/*
 * @file     painel.css
 * @module   fe26/staff
 * @purpose  Pele unica do painel interno (staff.fe26equipamentos.com.br).
 * @updated  2026-11-11
 * @rules
 *   1. ZERO JavaScript no painel. A CSP e
 *      default-src 'none'; style-src 'self'; img-src 'self'; form-action 'self';
 *      base-uri 'none'; frame-ancestors 'none'
 *      — nao existe script-src. Logo: nada aqui pode depender de script, e nenhum
 *      HTML do painel pode ter atributo style= (a CSP barra style inline).
 *      Tudo que a tela faz, faz com seletor de CSS.
 *   2. A pele e a da FE26 (tokens vindos de src/css/site.css), mas isto e FERRAMENTA
 *      DE TRABALHO: sem vidro, sem animacao de entrada, sem ornamento. Quem usa abre
 *      vinte vezes por dia e quer ler rapido.
 *   3. Marcador que o backend nao conhece vira vazio. Por isso todo bloco que carrega
 *      marcador se esconde quando vem vazio (:empty / :has) em vez de virar caixa oca.
 *      -> Consequencia para quem edita o HTML: NAO ponha espaco nem quebra de linha
 *         entre a tag e o {{MARCADOR}}. `:empty` nao casa com elemento que contem
 *         espaco em branco, e a caixa vazia reapareceria.
 */

/* ---------- Tipografia: Barlow servida pelo proprio servidor do staff ----------
 * Licenca OFL em /storage/.../staff/fontes/OFL-Barlow.txt (vai junto, sempre).
 * Sem CDN e sem fonte externa — a CSP nao tem font-src, so 'self' herdado de
 * default-src 'none'... logo a fonte SO funciona servida pela mesma origem.
 * font-display: swap — o texto aparece na hora na pilha de sistema e troca depois.
 */
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fontes/Barlow-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fontes/Barlow-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fontes/Barlow-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fontes/Barlow-Bold.woff2") format("woff2");
}

/* ---------- Tokens ----------
 * Cores herdadas de src/css/site.css, nao reinventadas aqui.
 * Contraste medido (WCAG 2.x, calculado em 11/11/2026, nao copiado):
 *   CLARO   tinta/fundo .............. 17,85:1
 *           tinta/superficie ......... 15,56:1
 *           tinta-fraca/superficie .... 7,26:1
 *           acento/superficie ......... 6,37:1
 *           branco/acento-cheio ....... 5,18:1   (botao primario)
 *           branco/acento ............. 7,31:1   (botao de apagar)
 *           borda/fundo ............... 3,74:1   (nao-textual, WCAG 1.4.11 >= 3:1)
 *   ESCURO  tinta/fundo .............. 15,56:1
 *           tinta/superficie ......... 13,18:1
 *           tinta-fraca/superficie .... 7,30:1
 *           acento/superficie ......... 6,68:1
 *           borda/superficie .......... 3,11:1   (nao-textual)
 * NAO use --p-borda para texto: 3,74:1 reprova em 4,5:1.
 */
:root {
  color-scheme: light dark;

  --p-fundo: #fff;
  --p-superficie: #f2efea;      /* areia quente da FE26 */
  --p-tinta: #1a1714;           /* ferro fundido */
  --p-tinta-fraca: #574c44;
  --p-borda: #8f8275;
  --p-borda-fina: #ded7cd;      /* separador decorativo — nunca carrega informacao */
  --p-acento: #9a3412;          /* oxido escuro: texto e link em fundo claro */
  --p-acento-cheio: #c2410c;    /* oxido: fundo de botao com texto branco */
  --p-sobre-acento: #fff;
  --p-apoio: #3f6f8f;           /* azul-aco */
  --p-realce-nova: #c2410c;

  --p-texto: "Barlow", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --p-e1: 0.25rem;
  --p-e2: 0.5rem;
  --p-e3: 0.75rem;
  --p-e4: 1rem;                 /* gutter lateral do celular = 16px */
  --p-e5: 1.5rem;
  --p-e6: 2.5rem;
  --p-raio: 0.25rem;            /* canto seco, igual ao do site */
  --p-dobra: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --p-fundo: #1a1714;
    --p-superficie: #2b2521;
    --p-tinta: #f2efea;
    --p-tinta-fraca: #c0b2a4;
    --p-borda: #7d6f63;
    --p-borda-fina: #3b332d;
    --p-acento: #fb923c;
    --p-acento-cheio: #c2410c;
    --p-sobre-acento: #fff;
    --p-apoio: #8fb8d4;
    --p-realce-nova: #fb923c;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* O navegador aplica [hidden]{display:none} na folha DELE, a de menor prioridade:
   qualquer display: do autor vence e o elemento fica invisivel para o teclado mas
   DESENHADO na tela. Licao paga em 10/11/2026 no site. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--p-texto);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--p-tinta);
  background: var(--p-fundo);   /* fundo explicito: tema escuro nao herda branco */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.375rem; letter-spacing: 0.01em; }
h2 { font-size: 1.0625rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--p-acento); }

/* Foco: anel grosso e por fora, visivel nos dois temas. Nao removido em lugar
   nenhum deste arquivo sem outro anel no lugar. */
:focus-visible {
  outline: 3px solid var(--p-acento-cheio);
  outline-offset: 2px;
  border-radius: var(--p-raio);
}
@media (prefers-color-scheme: dark) {
  :focus-visible { outline-color: var(--p-acento); }
}

/* Texto de cliente e texto de tamanho imprevisivel: nunca empurra o layout.
   Cobre o caso medido de palavra unica de 60 caracteres sem espaco. */
.quebra { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Barra de topo ---------- */
.topo {
  border-bottom: 2px solid var(--p-borda);
  background: var(--p-superficie);
}
.topo-faixa {
  max-width: var(--p-dobra);
  margin: 0 auto;
  padding: var(--p-e3) var(--p-e4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-e3);
}
.marca {
  display: flex; align-items: baseline; gap: var(--p-e2);
  text-decoration: none; color: var(--p-tinta); margin-right: auto;
}
.marca-nome {
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.marca-sub {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--p-acento);
}
.topo-usuario {
  font-size: 0.875rem; color: var(--p-tinta-fraca);
  max-width: 14rem; overflow-wrap: anywhere;
}
.topo-usuario:empty { display: none; }

/* ---------- Esqueleto ---------- */
.folha {
  max-width: var(--p-dobra);
  margin: 0 auto;
  padding: var(--p-e5) var(--p-e4) var(--p-e6);
}
.cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--p-e2) var(--p-e3);
  margin-bottom: var(--p-e4);
}
.conta {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--p-tinta-fraca);
}
/* Sem {{QUANTAS}} a frase "N na fila" nao faz sentido: some inteira. */
.cabeca-resumo:has(.conta:empty) { display: none; }

/* ---------- Botoes ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem;                 /* alvo de toque de 44px */
  padding: var(--p-e2) var(--p-e4);
  border: 2px solid transparent;
  border-radius: var(--p-raio);
  font: inherit; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.875rem;
  text-decoration: none; cursor: pointer;
}
.botao-cheio {
  background: var(--p-acento-cheio);
  color: var(--p-sobre-acento);        /* 5,18:1 */
}
.botao-cheio:hover { background: var(--p-acento); }
.botao-vazio {
  background: transparent;
  color: var(--p-acento);
  border-color: var(--p-borda);
}
.botao-vazio:hover { background: var(--p-superficie); }
.botao-perigo {
  background: #9a3412;                 /* branco sobre ele: 7,31:1 nos dois temas */
  color: #fff;
}
.botao-perigo:hover { background: #7c2a0e; }
.botao-pequeno { min-height: 2.25rem; padding: var(--p-e1) var(--p-e3); font-size: 0.8125rem; }

/* ---------- Entrar ---------- */
.entrada {
  min-height: 100vh;
  display: grid; align-items: start; justify-items: center;
  padding: var(--p-e6) var(--p-e4);
  background: var(--p-superficie);
}
.cartao-entrada {
  width: 100%; max-width: 24rem;
  background: var(--p-fundo);
  border: 1px solid var(--p-borda);
  border-top: 4px solid var(--p-acento-cheio);
  border-radius: var(--p-raio);
  padding: var(--p-e5);
}
.cartao-entrada h1 { margin-bottom: var(--p-e1); }
.entrada-nota {
  font-size: 0.875rem; color: var(--p-tinta-fraca);
  margin-bottom: var(--p-e4);
}
.campo { display: block; margin-bottom: var(--p-e4); }
.campo > span {
  display: block; margin-bottom: var(--p-e1);
  font-size: 0.875rem; font-weight: 600;
}
.campo input {
  width: 100%; min-height: 2.75rem;
  padding: var(--p-e2) var(--p-e3);
  font: inherit;
  color: var(--p-tinta);
  background: var(--p-fundo);
  border: 2px solid var(--p-borda);
  border-radius: var(--p-raio);
}
.campo input:hover { border-color: var(--p-tinta-fraca); }
.aviso-erro {
  margin-bottom: var(--p-e4);
  padding: var(--p-e2) var(--p-e3);
  border-left: 4px solid var(--p-acento-cheio);
  background: var(--p-superficie);
  color: var(--p-tinta);
  font-size: 0.9375rem;
}
/* {{ERRO}} vazio nao deixa caixa oca na tela. */
.aviso-erro:empty { display: none; }
.cartao-entrada .botao { width: 100%; }
.rodape-entrada {
  margin-top: var(--p-e5); padding-top: var(--p-e3);
  border-top: 1px solid var(--p-borda-fina);
  font-size: 0.8125rem; color: var(--p-tinta-fraca);
}

/* ---------- Fila de mensagens ----------
 * Nao e <table>: a 390px uma tabela de 4 colunas estoura. Lista semantica com
 * grid, que empilha no celular e vira colunas no desktop.
 */
.fila { border-top: 1px solid var(--p-borda-fina); }
.fila > li { border-bottom: 1px solid var(--p-borda-fina); }
.fila:empty { display: none; }

.linha-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--p-e1) var(--p-e4);
  padding: var(--p-e3) var(--p-e3) var(--p-e3) var(--p-e4);
  text-decoration: none;
  color: var(--p-tinta);
  border-left: 4px solid transparent;
  margin-left: -4px;
}
.linha-link:hover { background: var(--p-superficie); }
.linha-nome { font-weight: 600; }
.linha-assunto { color: var(--p-tinta-fraca); }
.linha-quando {
  font-size: 0.8125rem; color: var(--p-tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.linha-estado {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--p-tinta-fraca);
}
.linha-estado:empty { display: none; }

/* {{NOVA}} vale "sim" ou vazio. O destaque e SO CSS, por seletor de atributo. */
.fila > li[data-nova="sim"] .linha-link {
  border-left-color: var(--p-realce-nova);
  background: color-mix(in srgb, var(--p-acento-cheio) 6%, var(--p-fundo));
}
.fila > li[data-nova="sim"] .linha-nome { font-weight: 700; }
.fila > li[data-nova="sim"] .linha-assunto { color: var(--p-tinta); }
.fila > li[data-nova="sim"] .linha-estado { color: var(--p-acento); }

@media (min-width: 48em) {
  .linha-link {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 10rem 5.5rem;
    align-items: baseline;
  }
  .linha-estado { text-align: right; }
}

/* Cabecalho de colunas: so no desktop, onde a linha realmente tem 4 colunas.
   aria-hidden no HTML — e reforco visual; a informacao de cada celula ja vai
   na propria celula (rotulo .so-leitor em QUANDO). */
.fila-colunas { display: none; }
@media (min-width: 48em) {
  .fila-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 10rem 5.5rem;
    gap: var(--p-e4);
    padding: 0 var(--p-e3) var(--p-e2) var(--p-e4);
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--p-tinta-fraca);
  }
  .fila-colunas .col-estado { text-align: right; }
}
/* Fila vazia nao tem cabecalho de coluna. */
.folha:has(.fila:empty) .fila-colunas { display: none; }

.vazio {
  margin-top: var(--p-e5);
  padding: var(--p-e6) var(--p-e4);
  text-align: center;
  color: var(--p-tinta-fraca);
  background: var(--p-superficie);
  border: 1px dashed var(--p-borda);     /* tracejado: estado calmo, nao erro */
  border-radius: var(--p-raio);
}
.vazio:empty { display: none; }
/* Com fila cheia, a frase de fila vazia nao aparece. Sem JS: seletor de irmao. */
.fila:not(:empty) ~ .vazio { display: none; }
/* Mesma ideia em numeros.html, onde as listas nao sao irmas do .vazio:
   havendo QUALQUER lista com conteudo, a frase de "ainda nao ha dado" some.
   Medido em 11/11: sem esta regra a frase aparecia embaixo dos numeros cheios. */
.folha:has(.barras:not(:empty)) .vazio { display: none; }

/* ---------- Uma mensagem ---------- */
/* Alvo de toque: medido em 11/11 a 390 px, o "voltar" tinha 22 px de altura e o
   e-mail/telefone 19 px — abaixo dos 24 px de WCAG 2.5.8. O padding abaixo e o
   conserto; nao e enfeite, nao tire. */
.voltar {
  display: inline-flex; align-items: center; gap: var(--p-e2);
  font-size: 0.875rem; font-weight: 600;
  padding: var(--p-e2) 0;
  margin-bottom: var(--p-e3);
}
.ficha dd a { display: inline-block; padding: 0.2rem 0; }
.assunto { overflow-wrap: anywhere; }
.ficha {
  margin: var(--p-e4) 0;
  padding: var(--p-e4);
  background: var(--p-superficie);
  border: 1px solid var(--p-borda-fina);
  border-radius: var(--p-raio);
  display: grid;
  gap: var(--p-e3);
}
.ficha > div { min-width: 0; }
.ficha dt {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--p-tinta-fraca);
}
.ficha dd { margin: var(--p-e1) 0 0; overflow-wrap: anywhere; }
@media (min-width: 40em) {
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.corpo {
  margin-top: var(--p-e5);
  padding: var(--p-e4);
  border: 1px solid var(--p-borda-fina);
  border-left: 4px solid var(--p-borda);
  border-radius: var(--p-raio);
  white-space: pre-wrap;        /* preserva paragrafo do cliente sem HTML dele */
  overflow-wrap: anywhere;
  line-height: 1.6;
  max-width: 44rem;             /* medida de leitura */
}

/* ---------- Apagar: dois toques, sem script ----------
 * <details> abre e fecha nativamente, sem JS — provado na bancada com a CSP real.
 * O segundo toque e um <button> dentro de <form method="post">: nunca <a href>,
 * porque link que apaga e disparado por pre-carregamento de navegador e por
 * varredor. A confirmacao nomeia o REMETENTE e nao reexibe a mensagem.
 */
.zona-apagar {
  margin-top: var(--p-e6);
  padding-top: var(--p-e4);
  border-top: 1px solid var(--p-borda-fina);
}
.apagar > summary,
.mais > summary {
  display: inline-flex; align-items: center; gap: var(--p-e2);
  min-height: 2.75rem; padding: var(--p-e2) var(--p-e4);
  border: 2px solid var(--p-borda);
  border-radius: var(--p-raio);
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--p-acento);
  cursor: pointer;
  width: fit-content;
  list-style: none;             /* some o triangulo; o estado vai no texto */
}
.apagar > summary::-webkit-details-marker,
.mais > summary::-webkit-details-marker { display: none; }
.apagar > summary:hover,
.mais > summary:hover { background: var(--p-superficie); }
.apagar[open] > summary { border-color: var(--p-acento-cheio); }
.mais > summary { margin-top: var(--p-e3); color: var(--p-tinta-fraca); }
.apagar-caixa {
  margin-top: var(--p-e3);
  padding: var(--p-e4);
  border: 2px solid var(--p-acento-cheio);
  border-radius: var(--p-raio);
  background: var(--p-superficie);
  max-width: 34rem;
}
.apagar-caixa p { overflow-wrap: anywhere; }
.apagar-acoes {
  margin-top: var(--p-e4);
  display: flex; flex-wrap: wrap; gap: var(--p-e3);
}
.apagar-aviso { font-size: 0.875rem; color: var(--p-tinta-fraca); margin-top: var(--p-e2); }

/* ---------- Erro ---------- */
.folha-erro { max-width: 36rem; }
.folha-erro h1:empty { display: none; }
.erro-texto { margin-top: var(--p-e3); color: var(--p-tinta-fraca); }
.erro-texto:empty { display: none; }
.folha-erro .botao { margin-top: var(--p-e5); }

/* ---------- Numeros (proposta) ---------- */
.cartoes {
  display: grid; gap: var(--p-e3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-bottom: var(--p-e6);
}
.cartao {
  padding: var(--p-e4);
  background: var(--p-superficie);
  border: 1px solid var(--p-borda-fina);
  border-left: 4px solid var(--p-apoio);
  border-radius: var(--p-raio);
}
.cartao dt {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--p-tinta-fraca);
}
.cartao dd {
  margin: var(--p-e1) 0 0;
  font-size: 1.75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cartao dd:empty::before { content: "—"; color: var(--p-tinta-fraca); }
.bloco { margin-bottom: var(--p-e6); }
.bloco > h2 { margin-bottom: var(--p-e3); }
.barras { border-top: 1px solid var(--p-borda-fina); }
.barras > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem;
  gap: var(--p-e3);
  align-items: baseline;
  padding: var(--p-e2) 0;
  border-bottom: 1px solid var(--p-borda-fina);
}
.barras .valor {
  text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.barras .rotulo { overflow-wrap: anywhere; }
.nota-proposta {
  padding: var(--p-e3) var(--p-e4);
  border: 1px dashed var(--p-borda);
  border-radius: var(--p-raio);
  color: var(--p-tinta-fraca);
  font-size: 0.875rem;
  margin-bottom: var(--p-e5);
}

/* Impressao: a fila cabe em papel sem o cromo da tela. */
@media print {
  .topo-faixa form, .zona-apagar, .voltar { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   LIGACOES — acrescentado pelo ADMINISTRADOR em 12/11/2026, nao pelo DANTE.
   ==========================================================================
   Duas classes, para a tela /ligacoes (ligacoes.html). Tudo o mais naquela tela
   reusa as classes que ja estavam aqui: cartoes/cartao, barras/rotulo/valor,
   details.apagar, voltar, bloco, cabeca, conta, botao e variantes.

   NENHUMA cor, fonte ou tamanho novo: so as variaveis --p-e* de espaco que ja
   existiam. Se for para reescrever isto no seu padrao, DANTE, fique a vontade —
   a tela nao depende de nenhuma propriedade especifica daqui, so de os botoes de
   aba ficarem em linha e o rodape ficar discreto.

   .abas  — a fila dos tres botoes (Recebidas / Realizadas / Perdidas). O botao da
            aba aberta e `botao botao-cheio`, os outros `botao botao-vazio`; quem
            marca qual e o backend. flex-wrap porque a 320 px os tres nao cabem
            lado a lado e precisam descer em vez de vazar.
   .rodape-painel — a linha de "central no ar ha X" no fim da tela. Mesma receita
            do .rodape-entrada que ja existia, so sem a largura da caixa de login.
*/
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-e2);
  margin-bottom: var(--p-e5);
}
.rodape-painel {
  margin-top: var(--p-e6);
  padding-top: var(--p-e3);
  border-top: 1px solid var(--p-borda-fina);
  font-size: 0.8125rem;
  color: var(--p-tinta-fraca);
}