/* estilo.css — folha única do painel de domínios FAmazing.
 *
 * O quê: todo o aspecto do painel. Um só ficheiro, sem build, sem CDN — o alojamento é
 *     partilhado e não há Node nem Composer lá. Claro e escuro pelo esquema do sistema.
 * Depende de: nada. Sem fontes externas de propósito: o chefe abre isto no telemóvel e uma
 *     fonte remota é um pedido a mais que pode falhar ou demorar.
 * Usado por: app/vistas.php (o layout) e todas as páginas.
 * Ao mexer: a tabela tem de continuar a caber num telemóvel. O padrão é: em ecrã estreito
 *     cada linha vira um cartão (ver @media abaixo), nunca scroll horizontal na página.
 */

:root {
  --fundo: #ffffff;
  --fundo2: #f6f7f9;
  --texto: #1a1d21;
  --suave: #62676e;
  --risco: #e3e6ea;
  --azul: #1257a8;
  --azul-claro: #e8f0fb;
  --verde: #10693a;
  --ambar: #8a5a00;
  --vermelho: #b3261e;
  --vermelho-claro: #fdeceb;
  --raio: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #16181c; --fundo2: #1e2126; --texto: #e6e8eb; --suave: #9aa1a9;
    --risco: #2c3037; --azul: #6ba6f5; --azul-claro: #17263c;
    --verde: #4cc38a; --ambar: #e0a72c; --vermelho: #f2726a; --vermelho-claro: #33201f;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--azul); }

/* ---- cabeçalho ---------------------------------------------------------- */
header.topo {
  position: sticky; top: 0; z-index: 20;
  background: var(--fundo); border-bottom: 1px solid var(--risco);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem 1rem;
}
header.topo .marca { font-weight: 700; margin-right: auto; }
header.topo nav { display: flex; flex-wrap: wrap; gap: .15rem; }
header.topo nav a {
  padding: .35rem .7rem; border-radius: var(--raio); text-decoration: none;
  color: var(--texto); font-size: .92rem; white-space: nowrap;
}
header.topo nav a:hover { background: var(--fundo2); }
header.topo nav a.activo { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
header.topo .util { font-size: .85rem; color: var(--suave); }

main { padding: 1.25rem 1rem 4rem; max-width: 82rem; margin: 0 auto; }
h1 { font-size: 1.3rem; margin: 0 0 .3rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; }
p.sub { color: var(--suave); margin: 0 0 1.25rem; }

/* ---- cartões de números ------------------------------------------------- */
.numeros { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 1.5rem; }
.num { background: var(--fundo2); border-radius: var(--raio); padding: .8rem 1rem; }
.num b { display: block; font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.num span { color: var(--suave); font-size: .8rem; }
.num.alerta b { color: var(--vermelho); }

/* barra de cobertura — o número que tem de subir */
.barra { height: 7px; background: var(--risco); border-radius: 4px; overflow: hidden; margin-top: .45rem; }
.barra i { display: block; height: 100%; background: var(--verde); }

/* ---- filtros ------------------------------------------------------------ */
form.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--fundo2); padding: .7rem; border-radius: var(--raio); margin-bottom: 1rem;
}
input, select, textarea, button {
  font: inherit; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--risco); border-radius: 6px; padding: .4rem .55rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
button.principal { background: var(--azul); color: #fff; border-color: var(--azul); cursor: pointer; font-weight: 600; }
button.ligeiro { background: transparent; cursor: pointer; }
form.filtros input[type=search] { min-width: 12rem; flex: 1 1 12rem; }

/* ---- tabela ------------------------------------------------------------- */
.tabela-caixa { overflow-x: auto; border: 1px solid var(--risco); border-radius: var(--raio); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--risco); vertical-align: top; }
th { background: var(--fundo2); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); position: sticky; top: 0; }
tbody tr:hover { background: var(--fundo2); }
td.num-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .dom { font-weight: 600; }
td .meta { display: block; color: var(--suave); font-size: .8rem; }

/* ---- etiquetas ---------------------------------------------------------- */
.et { display: inline-block; padding: .1rem .45rem; border-radius: 20px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.et.ok { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }
.et.aviso { background: color-mix(in srgb, var(--ambar) 18%, transparent); color: var(--ambar); }
.et.mau { background: var(--vermelho-claro); color: var(--vermelho); }
.et.neutro { background: var(--fundo2); color: var(--suave); }
.et.falta { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---- avisos ------------------------------------------------------------- */
.aviso { border-left: 4px solid var(--ambar); background: color-mix(in srgb, var(--ambar) 8%, transparent);
         padding: .7rem 1rem; border-radius: 0 var(--raio) var(--raio) 0; margin: 1rem 0; }
.aviso.mau { border-color: var(--vermelho); background: var(--vermelho-claro); }
.aviso.bom { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 8%, transparent); }
.aviso p:first-child { margin-top: 0; } .aviso p:last-child { margin-bottom: 0; }

/* ---- formulários de edição ---------------------------------------------- */
.campos { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.campo { display: flex; flex-direction: column; gap: .25rem; }
.campo label { font-size: .82rem; color: var(--suave); font-weight: 600; }
.campo .nota { font-size: .78rem; color: var(--suave); }
.campo.bloqueado input, .campo.bloqueado select { background: var(--fundo2); color: var(--suave); }
.acoes { display: flex; gap: .5rem; margin-top: 1.2rem; flex-wrap: wrap; }

/* ---- entrar ------------------------------------------------------------- */
.entrar { max-width: 22rem; margin: 12vh auto; padding: 0 1rem; }
.entrar .campos { grid-template-columns: 1fr; }

/* ---- modo foco (preencher um de cada vez) ------------------------------- */
.foco { max-width: 34rem; margin: 0 auto; }
.foco .alvo { font-size: 1.5rem; font-weight: 700; word-break: break-all; margin-bottom: .25rem; }
.foco .contexto { color: var(--suave); font-size: .88rem; margin-bottom: 1.25rem; }
.foco .progresso { color: var(--suave); font-size: .82rem; text-align: center; margin-top: 1.5rem; }

/* ---- telemóvel: cada linha vira cartão ---------------------------------- */
@media (max-width: 40rem) {
  main { padding: 1rem .75rem 3rem; }
  .tabela-caixa { border: 0; overflow: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border: 1px solid var(--risco); border-radius: var(--raio); margin-bottom: .7rem; padding: .3rem 0; }
  td { border: 0; padding: .3rem .8rem; display: flex; justify-content: space-between; gap: 1rem; }
  td::before { content: attr(data-r); color: var(--suave); font-size: .78rem; font-weight: 600;
               text-transform: uppercase; letter-spacing: .03em; flex: 0 0 auto; }
  td.num-col { text-align: right; }
  td:first-child { border-bottom: 1px solid var(--risco); padding-bottom: .5rem; margin-bottom: .2rem; }
  td:first-child::before { content: none; }
}

/* Impressão: o chefe pode querer levar a lista para uma reunião. */
@media print {
  header.topo, form.filtros, .acoes { display: none; }
  body { font-size: 11px; } .tabela-caixa { border: 0; }
}