/* ============================================================================
   FLUXXI · a pele (visual herdado do painel FLUXXI)
   ----------------------------------------------------------------------------
   A tela é um APARELHO: o chassi escuro é o corpo, as fichas de papel claro são
   o que está aceso em cima dele, e a mesma RÉGUA graduada (a "sonda") mede tudo:
   prazo, porcentagem, quantidade, sempre com a meta marcada e a zona vermelha
   impressa a partir do limite.

   Cinco decisões que sustentam o acabamento (não quebrar sem motivo):
   1. MATERIAL, não cor: campo fundo com grão, papel com aresta de luz e sombra em
      várias paradas. Sombra da cor do fundo escurece sem lavar.
   2. A COR MORA NA ESCALA: vermelho só a partir do limite. Cinco cartões vermelhos
      seguidos viram papel de parede; com tudo em alarme, nada está em alarme.
   3. SERIFA (Fraunces) = quem é e em que tela estou (títulos, nomes de gente e de
      cliente). SANS (Archivo) = o que o sistema mede, conta ou faz. Número é
      instrumento: grotesca 700, algarismo tabular. Código e legenda de régua: mono.
   4. UM momento de movimento: as fichas sobem uma vez quando a tela troca. O resto
      é resposta ao toque. Tudo reduzido em prefers-reduced-motion.
   5. NADA DE PADRÃO DE FÁBRICA: barra de rolagem, anel de foco, seleção de texto e
      estado vazio são desenhados.

   Regras de uso: cor nova entra como token aqui em :root, nunca solta na tela.
   Sem style="" no HTML (a CSP bloqueia): medida dinâmica vai por JS (el.style.setProperty).
   Celular (até 720 px) mora em celular.css.
   ========================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fontes/fraunces.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fontes/archivo.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fontes/plexmono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fontes/plexmono-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fontes/plexmono-600.woff2) format("woff2"); }

:root {
  /* o chassi */
  --chassi: #0C1114;
  --tinta: #161E22;
  --tinta2: #1E272C;
  --tinta3: #334046;
  --tinta-txt: #D5DDE1;
  --tinta-txt2: #8C98A0;
  --creme: #FBF7F0;

  /* o papel aceso */
  --papel: #FFFCF7;
  --papel2: #F3EDE3;
  --linha-papel: #DED4C3;
  --linha-papel2: #EBE3D7;
  --grafite: #141A1D;
  --aco: #4E5A63;
  --aco2: #7A858E;

  /* os quatro sinais */
  --carmim: #A8112B; --carmim-suave: #FBE9EB; --carmim-borda: #EDC7CE;
  --ouro: #8A6413;   --ouro-suave: #F8EFD9;   --ouro-borda: #E6D3A9;
  --menta: #166152;  --menta-suave: #DBEBE5;  --menta-borda: #BCD9CF;
  --azul: #2C5C8F;   --azul-suave: #E2EAF3;

  --serif: "Fraunces", Georgia, serif;
  --corpo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px;

  --lev:
    0 1px 2px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.40),
    0 14px 30px rgba(0,0,0,.38), 0 30px 60px rgba(0,0,0,.30),
    0 0 70px -26px rgba(255,244,222,.22);
  --lev-alta:
    0 2px 4px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.5),
    0 28px 60px rgba(0,0,0,.5), 0 60px 110px rgba(0,0,0,.45),
    0 0 110px -30px rgba(255,244,222,.30);
  --aresta: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(255,250,238,.10);
  --grao-campo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.30'/%3E%3C/svg%3E");
  --fibra-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23f)' opacity='.16'/%3E%3C/svg%3E");
  --curva: cubic-bezier(.2,.7,.3,1);


  /* superfícies e detalhes (o nome diz onde a cor mora) */
  --coluna-alto: #232E34;
  --coluna-meio: #1A2429;
  --coluna-baixo: #141D22;
  --campo-meio: #0C1417;
  --campo-fundo: #05080A;
  --forte-alto: #242E33;
  --forte-baixo: #131C20;
  --forte-alto-mouse: #2D383E;
  --forte-baixo-mouse: #182226;
  --alarme-alto: #FCEBEE;
  --alarme-baixo: #F8DFE4;
  --alarme-texto: #8A3243;
  --cabeca-tabela-alto: #F0E9DC;
  --cabeca-tabela-baixo: #F5F0E7;
  --bt-mouse: #EAE1D3;
  --selo-papel: #E8A9B4;
  --luz-aberta: #3FA57F;
  --versao: #5E6A71;
  --portal-topo: #1F2A30;
  --branco: #fff;
  --preto: #000;

  /* os tokens do kit apontam para a pele (componentes do kit herdam o visual) */
  --fonte: var(--corpo); --fonte-mono: var(--mono);
  --marca: var(--grafite); --marca-forte: var(--preto); --marca-suave: var(--papel2); --sobre-marca: var(--creme);
  --fundo: var(--chassi); --superficie: var(--papel); --superficie-2: var(--papel2); --borda: var(--linha-papel);
  --texto: var(--grafite); --texto-2: var(--aco);
  --ok: var(--menta); --ok-suave: var(--menta-suave);
  --alerta: var(--ouro); --alerta-suave: var(--ouro-suave);
  --erro: var(--carmim); --erro-suave: var(--carmim-suave);
  --info: var(--azul); --info-suave: var(--azul-suave);
  --raio: var(--r-sm); --raio-grande: var(--r-lg);
  --foco: 0 0 0 3px rgba(168,17,43,.35);
}

/* ================================================================ o chassi */
html, body { height: 100%; }
body {
  margin: 0; font: 14px/1.5 var(--corpo); color: var(--tinta-txt);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-color: var(--chassi);
  background-image: var(--grao-campo), radial-gradient(125% 90% at 50% -12%, var(--coluna-baixo) 0%, var(--campo-meio) 48%, var(--campo-fundo) 100%);
  background-size: 160px 160px, 100% 100%;
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--carmim); color: var(--branco); }
:focus-visible { outline: 2px solid var(--carmim); outline-offset: 3px; border-radius: 5px; box-shadow: none; }
* { scrollbar-width: thin; scrollbar-color: rgba(140,152,160,.35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(140,152,160,.30); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

.serif { font-family: var(--serif); font-optical-sizing: auto; }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.olho { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-txt2); padding-right: .18em; }

.casa { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }

/* ============================================================== a coluna */
.caixa {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 3;
  display: flex; flex-direction: column; gap: 14px; padding: 22px 14px 14px;
  background: linear-gradient(184deg, var(--coluna-alto) 0%, var(--coluna-meio) 55%, var(--coluna-baixo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(255,255,255,.06), 18px 0 44px -16px rgba(0,0,0,.75);
}
.marca { padding: 0 6px; }
.wordmark { display: block; font: 700 15px/1 var(--corpo); letter-spacing: .42em; color: var(--creme); }
.marca-empresa { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.marca-empresa b { font: 600 19px/1.1 var(--serif); letter-spacing: -.028em; color: var(--creme); }
.selo-papel {
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--selo-papel);
  border: 1px solid rgba(224,132,148,.34); border-radius: 99px; padding: 2px 7px 2px 8px;
}
.estado-casa {
  margin: 4px 0 0; padding: 11px 13px; border-radius: var(--r-md); background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05);
}
.estado-casa b { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--creme); }
.estado-casa b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--luz-aberta); box-shadow: 0 0 0 3px rgba(63,165,127,.18); }
.estado-casa span { display: block; font-size: 11.5px; color: var(--tinta-txt2); margin-top: 3px; line-height: 1.45; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .grupo { margin: 16px 0 6px 14px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 12px;
  border-radius: var(--r-sm); color: var(--tinta-txt); text-decoration: none; font-size: 14px;
  transition: background .14s var(--curva), color .14s;
}
.nav a svg { width: 17px; height: 17px; flex: none; color: var(--tinta-txt2); }
.nav a:hover { background: rgba(255,255,255,.05); color: var(--creme); }
.nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; margin-top: 0;
  background: var(--carmim); border-radius: 0 2px 2px 0; transition: height .18s var(--curva), margin-top .18s var(--curva);
}
.nav a[aria-current="page"] {
  background: rgba(255,255,255,.09); color: var(--creme);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.07);
}
.nav a[aria-current="page"] svg { color: var(--creme); }
.nav a[aria-current="page"]::before { height: 18px; margin-top: -9px; }
.nav .badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  background: var(--carmim); color: var(--branco); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.rodape-caixa { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid rgba(255,255,255,.07); display: grid; gap: 10px; }
.quem { display: flex; gap: 11px; align-items: center; }
.quem div { min-width: 0; }
.quem div b { display: block; font-size: 13.5px; font-weight: 500; color: var(--creme); }
.quem div span { display: block; font-size: 11.5px; color: var(--tinta-txt2); overflow-wrap: anywhere; }
.quem-acoes { display: flex; gap: 16px; padding-left: 47px; }
.quem-acoes a, .quem-acoes button { font-size: 12px; color: var(--tinta-txt2); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.quem-acoes a:hover, .quem-acoes button:hover { color: var(--creme); }
.versao { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--versao); text-align: right; text-transform: uppercase; }

.av {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 var(--corpo); letter-spacing: .01em; background: var(--creme); color: var(--grafite);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.av.no-papel { width: 30px; height: 30px; font-size: 10.5px; background: var(--papel2); color: var(--grafite); box-shadow: inset 0 0 0 1px var(--linha-papel); }

/* ================================================================ o campo */
.campo-principal { min-width: 0; padding: 22px 26px 56px; }
.topo-pagina {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.topo-pagina .titulos { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0; }
.topo-pagina h1 { margin: 0; font: 500 34px/1.05 var(--serif); letter-spacing: -.035em; color: var(--creme); }
.topo-pagina p { margin: 0; max-width: 560px; font-size: 13px; color: var(--tinta-txt2); }
.topo-pagina .acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.secao-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 30px 0 12px; }
.secao-topo h2 { margin: 0; font: 600 21px/1.2 var(--serif); letter-spacing: -.025em; color: var(--creme); }
.secao-topo p { margin: 0; font-size: 13px; color: var(--tinta-txt2); }

/* papel aceso: toda superfície de trabalho */
.papel, .kpi, .quadro, .portal-cartao, .gaveta-corpo {
  color: var(--grafite);
  background-color: var(--papel);
  background-image: var(--fibra-papel), linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 180px);
  background-size: 150px 150px, 100% 100%;
  box-shadow: var(--aresta), var(--lev);
  border-radius: var(--r-lg);
}
.papel { padding: 18px 20px; }
.papel.sem-recheio { padding: 0; overflow: hidden; }
.entra { animation: subir .38s var(--curva) both; }
.entra:nth-child(2) { animation-delay: .04s; } .entra:nth-child(3) { animation-delay: .08s; } .entra:nth-child(4) { animation-delay: .12s; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================ indicadores */
.kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.kpi { padding: 18px 20px 18px; display: flex; flex-direction: column; min-height: 188px; }
.kpi .v { font: 700 44px/.92 var(--corpo); letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--grafite); }
.kpi .v small { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--aco2); margin-left: 2px; }
.kpi .v.sem-dados { font-size: 26px; letter-spacing: -.03em; color: var(--aco2); }
.kpi.atencao .v { color: var(--ouro); }
.kpi.estourou .v { color: var(--carmim); }
.kpi .r { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.kpi .d { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--aco); }
.kpi .detalhe { margin-top: 2px; font: 500 11px/1.4 var(--mono); color: var(--aco2); }
.kpi .ver { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--grafite); text-underline-offset: 3px; align-self: flex-start; }
.kpi .acao-kpi { margin-top: auto; padding-top: 14px; }
.ajuda {
  width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font: 700 10px/1 var(--corpo); color: var(--aco); background: var(--papel2); box-shadow: inset 0 0 0 1px var(--linha-papel); cursor: help;
}

/* a sonda: escala gravada, zona vermelha a partir do limite, cabeça chata */
.regua { margin-top: auto; padding-top: 16px; }
.trilho {
  position: relative; height: 8px; border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0 var(--limite, 100%), rgba(168,17,43,.15) var(--limite, 100%) 100%),
    repeating-linear-gradient(90deg, rgba(64,46,24,.20) 0 1px, transparent 1px 10%),
    var(--papel2);
  box-shadow: inset 0 1px 2px rgba(64,46,24,.18), inset 0 0 0 1px rgba(64,46,24,.11);
}
.regua.maior-melhor .trilho {
  background:
    linear-gradient(90deg, rgba(168,17,43,.15) 0 var(--limite, 0%), transparent var(--limite, 0%) 100%),
    repeating-linear-gradient(90deg, rgba(64,46,24,.20) 0 1px, transparent 1px 10%),
    var(--papel2);
}
.trilho::after { content: ""; position: absolute; left: calc(var(--limite, 100%) - 1px); top: -6px; bottom: -6px; width: 2px; background: var(--grafite); opacity: .5; border-radius: 1px; }
.trilho i { position: relative; display: block; height: 100%; width: 0; border-radius: 2px 0 0 2px; background: var(--aco2); transition: width .5s var(--curva); }
.trilho i::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 1px;
  background: var(--grafite); box-shadow: 0 0 0 2px var(--papel), 0 1px 3px rgba(64,46,24,.4);
}
.ok .trilho i { background: var(--menta); }
.atencao .trilho i { background: var(--ouro); }
.estourou .trilho i { background: var(--carmim); }
.estourou .trilho i::after { background: var(--carmim); }
.regua .leg { position: relative; display: flex; justify-content: space-between; margin-top: 7px; font: 400 9.5px/1 var(--mono); letter-spacing: .02em; color: var(--aco2); }
/* a legenda do meio fica embaixo da marca do limite (a mesma variável que desenha a marca) */
.regua .leg .no-limite { position: absolute; left: var(--limite, 50%); transform: translateX(-50%); white-space: nowrap; }

/* faixa de alarme: o que não pode esperar */
.quadro { padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.quadro.alarme {
  background-color: var(--alarme-alto);
  background-image: var(--fibra-papel), linear-gradient(180deg, var(--alarme-alto) 0%, var(--alarme-baixo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(168,17,43,.20), 0 2px 4px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.38), 0 0 74px -24px rgba(255,190,200,.30);
}
.quadro h2 { margin: 0; padding-left: 12px; border-left: 2px solid var(--carmim); font: 700 16px/1.3 var(--corpo); letter-spacing: -.02em; color: var(--carmim); }
.quadro p { margin: 0; font-size: 13px; color: var(--alarme-texto); flex: 1 1 220px; }

/* ================================================================ controles */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px;
  border: 0; border-radius: var(--r-sm); background: var(--papel2); color: var(--grafite);
  font: 600 13.5px/1 var(--corpo); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(64,46,24,.10);
  transition: background .13s, box-shadow .13s, transform .08s;
}
.bt svg { width: 16px; height: 16px; }
.bt:hover { background: var(--bt-mouse); }
.bt:active { transform: translateY(1px); }
.bt[disabled], .bt[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.bt.forte {
  background: linear-gradient(180deg, var(--forte-alto) 0%, var(--forte-baixo) 100%); color: var(--creme);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.35);
}
.bt.forte:hover { background: linear-gradient(180deg, var(--forte-alto-mouse) 0%, var(--forte-baixo-mouse) 100%); }
.bt.quieto { background: none; box-shadow: none; }
.bt.quieto:hover { background: rgba(64,46,24,.07); }
.bt.perigo { background: var(--carmim-suave); color: var(--carmim); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px var(--carmim-borda); }
.bt.pequeno { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.no-chassi .bt:not(.forte) { background: rgba(255,255,255,.07); color: var(--creme); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.no-chassi .bt.perigo { background: var(--carmim-suave); color: var(--carmim); box-shadow: inset 0 0 0 1px var(--carmim-borda); }

.campo { display: grid; gap: 5px; }
.campo label, .rotulo { font-size: 12.5px; font-weight: 600; color: var(--aco); }
.campo .ajuda-campo { font-size: 11.5px; color: var(--aco2); }
.entrada, .campo input, .campo select, .campo textarea, .filtros input, .filtros select {
  width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: var(--r-sm);
  background: var(--papel); color: var(--grafite); font-size: 14px;
  box-shadow: inset 0 1px 3px rgba(64,46,24,.12), inset 0 0 0 1px rgba(64,46,24,.14);
  transition: box-shadow .14s;
}
.campo textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus, .filtros input:focus, .filtros select:focus {
  outline: none; box-shadow: inset 0 1px 3px rgba(64,46,24,.10), inset 0 0 0 1px var(--grafite), 0 0 0 3px rgba(20,26,29,.12);
}
.campo [aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--carmim), 0 0 0 3px rgba(168,17,43,.12); }
::placeholder { color: var(--aco2); }
.grade-form { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-form .inteiro { grid-column: 1 / -1; }

/* avisos e etiquetas: texto sempre explica, cor é reforço */
.aviso { border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; border: 0; box-shadow: inset 0 0 0 1px currentColor; }
.aviso--ok { background: var(--menta-suave); color: var(--menta); }
.aviso--alerta { background: var(--ouro-suave); color: var(--ouro); }
.aviso--erro { background: var(--carmim-suave); color: var(--carmim); }
.aviso--info { background: var(--azul-suave); color: var(--azul); }
/* importação: a conta das linhas, a nota de ordem e a barra de botões do relatório */
.nota-importacao { margin: 0 0 18px; line-height: 1.5; }
.conta-importacao { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.papel .aviso { margin: 0 0 12px; }
.barra-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* abas (Contatos): botões no chassi; a aba aberta é papel aceso */
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.aba { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-sm); font: 600 13.5px/1 var(--corpo); color: var(--tinta-txt); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); cursor: pointer; }
.aba:hover { background: rgba(255,255,255,.12); }
.aba[aria-selected="true"] { background: var(--papel); color: var(--grafite); box-shadow: var(--aresta); }
.lista-recusas { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--aco); display: grid; gap: 4px; }
/* campanhas: editor com a prévia ao lado; escolha do filtro; a conta de quem recebe */
.editor-campanha { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.coluna-form { flex: 999 1 520px; min-width: 0; display: grid; gap: 16px; }
.coluna-form .papel { display: grid; gap: 12px; }
.previa-campanha { flex: 1 1 300px; min-width: 0; display: grid; gap: 12px; position: sticky; top: 18px; }
.titulo-secao { margin: 0; font: 600 19px/1.2 var(--serif); letter-spacing: -.02em; color: var(--grafite); }
.escolhas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.escolha { display: grid; gap: 4px; text-align: left; min-height: 56px; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--linha-papel); font: inherit; color: var(--grafite); cursor: pointer; }
.escolha b { font-size: 14px; }
.escolha span { font-size: 12px; color: var(--aco); line-height: 1.4; }
.escolha[aria-checked="true"] { background: var(--papel2); box-shadow: inset 0 0 0 2px var(--grafite); }
.lista-fixa { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); font-size: 13.5px; }
.lista-fixa li { padding: 9px 12px; border-radius: var(--r-sm); background: var(--papel2); }
.conta-campanha { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.conta-campanha div { display: flex; justify-content: space-between; gap: 12px; }
.conta-campanha dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.conta-campanha .menos { color: var(--aco); }
.conta-campanha .menos dd { font-weight: 500; }
.conta-campanha .total { border-top: 1px solid var(--linha-papel); padding-top: 8px; font-weight: 700; }
.conta-campanha .total dd { font-size: 26px; }
.vazio-linha { margin: 0; padding: 18px 20px; font-size: 13.5px; color: var(--aco); }
/* envio: o próximo da fila e a mensagem exatamente como vai sair */
.painel-envio { display: grid; gap: 12px; }
.proximo-envio { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: start; font-size: 14px; }
.proximo-envio .sub { font-size: 12.5px; color: var(--aco); }
.previa-mensagem { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--linha-papel); font: 14px/1.5 var(--corpo); white-space: pre-wrap; overflow-wrap: anywhere; }
/* atendimento: lista de conversas ao lado da conversa aberta; mensagens com quem falou */
.atendimento { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.lista-conversas { flex: 1 1 280px; min-width: 0; display: grid; }
.item-conversa { display: grid; gap: 4px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--linha-papel2); background: transparent; text-align: left; font: inherit; color: var(--grafite); cursor: pointer; min-height: 44px; }
.item-conversa:hover { background: var(--papel2); }
.item-conversa[aria-pressed="true"] { background: var(--papel2); box-shadow: inset 3px 0 0 var(--carmim); }
.item-conversa .topo-item { display: flex; justify-content: space-between; gap: 8px; }
.item-conversa .texto-item { font-size: 13px; color: var(--aco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-aberta { flex: 999 1 420px; min-width: 0; display: grid; gap: 14px; }
.cabeca-conversa { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.linha-do-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.linha-do-tempo .msg { display: grid; gap: 4px; max-width: 85%; padding: 10px 12px; border-radius: var(--r-md); font-size: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--linha-papel); }
.linha-do-tempo .msg .quem { font-size: 11.5px; color: var(--aco2); }
.linha-do-tempo .msg .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.linha-do-tempo .msg.campanha, .linha-do-tempo .msg.equipe { justify-self: end; background: var(--papel2); }
.linha-do-tempo .msg.repasse { justify-self: center; background: var(--menta-suave); box-shadow: inset 0 0 0 1px var(--menta-borda); color: var(--menta); }
.repasse { border-top: 1px solid var(--linha-papel); padding-top: 14px; }
.barra-filtro { margin-bottom: 16px; }
.kpis + .papel { margin-top: 16px; }
.barra-filtro .filtros { border: 0; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--papel2); color: var(--aco); box-shadow: inset 0 0 0 1px var(--linha-papel);
}
.etiqueta.carmim { background: var(--carmim-suave); color: var(--carmim); box-shadow: inset 0 0 0 1px var(--carmim-borda); }
.etiqueta.ouro { background: var(--ouro-suave); color: var(--ouro); box-shadow: inset 0 0 0 1px var(--ouro-borda); }
.etiqueta.menta { background: var(--menta-suave); color: var(--menta); box-shadow: inset 0 0 0 1px var(--menta-borda); }

/* ================================================================== tabela */
.barra-lista { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
.barra-lista .contagem { font-size: 12.5px; color: var(--aco); }
.busca { position: relative; flex: 1 1 280px; max-width: 420px; }
.busca svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--aco2); }
.busca input { padding-left: 36px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 20px; background: rgba(243,237,227,.7); border-top: 1px solid var(--linha-papel2); border-bottom: 1px solid var(--linha-papel2); }
.filtros select, .filtros input { width: auto; min-width: 170px; min-height: 36px; padding: 6px 10px; font-size: 13px; }
.filtros label.marcar { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--aco); }
.filtros label.marcar input { width: auto; min-width: 0; min-height: 0; box-shadow: none; }
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 12px 20px; text-align: left; white-space: nowrap; position: sticky; top: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--aco);
  background: linear-gradient(180deg, var(--cabeca-tabela-alto), var(--cabeca-tabela-baixo)); border-bottom: 1px solid var(--linha-papel);
}
tbody td { padding: 13px 20px; border-bottom: 1px solid var(--linha-papel2); font-size: 13.5px; vertical-align: middle; font-variant-numeric: tabular-nums; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(243,237,227,.55); }
td.num, th.num { text-align: right; }
td .nome-linha { display: flex; align-items: center; gap: 11px; }
td .nome-linha b { font: 600 16px/1.2 var(--serif); letter-spacing: -.02em; }
td .nome-linha .sub { display: block; font-size: 11.5px; color: var(--aco2); font-family: var(--corpo); font-weight: 400; letter-spacing: 0; }
td.acao { text-align: right; width: 1%; white-space: nowrap; }
td.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.02em; }
.paginas { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 20px; font-size: 12.5px; color: var(--aco); }

/* ============================================================ estado vazio
   Não é área cinza com uma frase: é a régua em repouso, zerada. */
.vazio { padding: 52px 24px; text-align: center; color: var(--aco); }
.vazio::before {
  content: ""; display: block; width: 112px; height: 8px; margin: 0 auto 22px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(64,46,24,.22) 0 1px, transparent 1px 12.5%), var(--papel2);
  box-shadow: inset 0 1px 2px rgba(64,46,24,.16), inset 0 0 0 1px rgba(64,46,24,.10);
}
.vazio b { display: block; font: 600 18px/1.3 var(--serif); letter-spacing: -.02em; color: var(--grafite); margin-bottom: 6px; }
.vazio p { margin: 0 auto; max-width: 420px; font-size: 13.5px; }
.carregando { padding: 40px; text-align: center; color: var(--tinta-txt2); font-size: 13px; }

/* ======================================================= gaveta (lado direito)
   Formulário e ficha abrem por cima da lista, sem trocar de tela: quem está no
   meio de uma busca não perde a busca. Esc e o fundo fecham. */
.gaveta { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgba(4,7,9,.72); backdrop-filter: blur(4px); animation: aparecer .16s ease-out both; }
.gaveta-corpo { width: min(560px, 100%); height: 100%; overflow-y: auto; border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--aresta), var(--lev-alta); animation: deslizar .26s var(--curva) both; display: flex; flex-direction: column; }
.gaveta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; border-bottom: 1px solid var(--linha-papel2); }
.gaveta-topo h2 { margin: 0; font: 600 23px/1.15 var(--serif); letter-spacing: -.03em; }
.gaveta-topo p { margin: 4px 0 0; font-size: 12.5px; color: var(--aco); }
.gaveta-miolo { padding: 18px 24px; display: grid; gap: 16px; }
.gaveta-pe { margin-top: auto; padding: 14px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--linha-papel2); background: rgba(243,237,227,.6); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes deslizar { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }

.ficha-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.ficha-dados div { min-width: 0; }
.ficha-dados dt { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--aco2); }
.ficha-dados dd { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.ficha-dados .inteiro { grid-column: 1 / -1; }
.trilha-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trilha-lista li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 12.5px; color: var(--aco); }
.trilha-lista li::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--linha-papel); box-shadow: 0 0 0 3px var(--papel2); }
.trilha-lista b { color: var(--grafite); font-weight: 600; }

/* recado que some sozinho (o que acabou de ser salvo) */
.recado { position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translateX(-50%); max-width: min(520px, calc(100% - 32px)); padding: 12px 18px; border-radius: var(--r-md); background: var(--grafite); color: var(--creme); font-size: 13.5px; box-shadow: var(--lev-alta); animation: subir .2s var(--curva) both; }
.recado.erro { background: var(--carmim); color: var(--branco); }

/* ================================================================== portal
   A primeira tela do dia: o chassi com o feixe de luz e a ficha acesa no meio.
   min-height (não height): com o teclado do celular aberto o botão Entrar não some. */
.portal { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.portal::before { content: ""; position: absolute; inset: -20% 10% auto; height: 70%; pointer-events: none; background: radial-gradient(50% 60% at 50% 0%, rgba(255,244,222,.10), transparent 70%); }
.portal-cartao { position: relative; width: min(420px, 100%); overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--aresta), var(--lev-alta); }
.portal-topo { padding: 30px 30px 26px; background: linear-gradient(180deg, var(--portal-topo) 0%, var(--coluna-baixo) 100%); color: var(--creme); }
.portal-topo .wordmark { font-size: 16px; }
.portal-topo span { display: block; margin-top: 16px; font-size: 13px; color: var(--tinta-txt2); }
.portal-miolo { padding: 24px 28px 24px; display: grid; gap: 15px; }
.portal-miolo h1 { margin: 0; font: 600 25px/1.15 var(--serif); letter-spacing: -.03em; }
.portal-miolo > p { margin: -8px 0 0; font-size: 13.5px; color: var(--aco); }
.portal-miolo .bt { width: 100%; min-height: 44px; font-size: 14px; }
.portal-ajuda { margin: 0; padding-top: 14px; border-top: 1px solid var(--linha-papel2); font-size: 12.5px; line-height: 1.55; color: var(--aco2); }
.portal-pe { display: flex; justify-content: space-between; gap: 10px; padding: 13px 28px; background: var(--papel2); border-top: 1px solid var(--linha-papel2); font: 500 10px/1.3 var(--mono); letter-spacing: .08em; color: var(--aco2); text-transform: uppercase; }
.portal-pe b { font: 700 9px/1.3 var(--corpo); letter-spacing: .16em; text-align: right; }
.codigo-entrada { font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; }

/* barra do celular: só aparece em celular.css */
.barra-celular, .topo-celular { display: none; }
.topo-celular .av { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .entra, .gaveta, .gaveta-corpo, .recado { animation-duration: 1ms !important; }
  .trilho i { transition: none; }
}