/* Módulo fiscal — telas fisc-* do protótipo. Só aliasa tokens; nunca hardcode. */

/* ── Certificado digital (= fisc-certificado.html) ───────────────── */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cert { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-elev-soft); display: flex; flex-direction: column; gap: 12px; }
.cert.exp-soon { border-color: color-mix(in oklab, var(--color-status-pending) 42%, transparent); background: color-mix(in oklab, var(--color-status-pending) 5%, var(--color-surface)); }
.cert.exp-now { border-color: color-mix(in oklab, var(--color-danger) 42%, transparent); background: color-mix(in oklab, var(--color-danger) 5%, var(--color-surface)); }
.cert-h { display: flex; align-items: flex-start; gap: 11px; }
.cert-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--color-accent) 12%, transparent); color: color-mix(in oklab, var(--color-accent), black 16%); }
.cert.exp-soon .cert-ic { background: color-mix(in oklab, var(--color-status-pending) 15%, transparent); color: color-mix(in oklab, var(--color-status-pending), black 10%); }
.cert.exp-now .cert-ic { background: color-mix(in oklab, var(--color-danger) 13%, transparent); color: var(--color-danger); }
.cert-ic svg { width: 19px; height: 19px; }
.cert-n { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.015em; }
.cert-s { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); margin-top: 2px; }
.cert-days { margin-left: auto; text-align: right; flex: none; }
.cert-days b { display: block; font-family: var(--font-mono); font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cert-days span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.cert-act { display: flex; gap: 8px; margin-top: auto; }
.cert-act .btn { flex: 1; }

/* ── Cartões de recebimento por unidade (= fisc-consolidacao.html) ── */
.rec-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1080px) { .rec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .rec-grid { grid-template-columns: 1fr; } }
.rec { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-elev-soft); }
.rec.ok { border-color: color-mix(in oklab, var(--color-success) 30%, transparent); }
.rec.warn { border-color: color-mix(in oklab, var(--color-status-pending) 38%, transparent); background: color-mix(in oklab, var(--color-status-pending) 5%, var(--color-surface)); }
.rec .rc-h { display: flex; align-items: center; gap: 8px; }
.rec .rc-n { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.rec .rc-v { font-family: var(--font-mono); font-weight: 700; font-size: 17px; margin: 9px 0 3px; font-variant-numeric: tabular-nums; }
.rec .rc-m { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-muted); }

/* ── Composição de meios de pagamento (chips inline) ─────────────── */
.met { display: flex; gap: 4px; align-items: center; }
.met span { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: var(--color-surface-soft); color: var(--color-fg-2); white-space: nowrap; }

/* ── Rejeição / código de erro fiscal (= fisc-notas.html, plat-monitor-fiscal.html) ── */
.rej { font-size: 11.5px; color: var(--color-danger); margin-top: 3px; line-height: 1.4; }
/* Variantes de tom — substituem os `style="color:..."` inline do protótipo. */
.rej--warn { color: var(--color-status-pending); }
.rej--muted { color: var(--color-muted); }
.cod { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: color-mix(in oklab, var(--color-danger), black 10%); padding: 1px 6px; border-radius: 5px; }

/* ── Modal de cancelamento aberto de dentro da gaveta (= fisc-notas.html) ──
   O Ui::ModalComponent reaproveita `.scrim`/`.dialog` genéricos (z-index 200,
   application.css); a gaveta (`.drawer`, components.css) fica em z-index 210,
   ACIMA do modal padrão. Sem este ajuste, o modal de cancelamento abriria
   visualmente atrás da gaveta ainda aberta. */
.drawer .scrim { z-index: 220; }

/* ── Cabeçalho de painel com contagem (= fisc-notas.html .panel-h) ──
   Diferente de `.panel-head` (já usado no resto da app: h2 + link à
   direita); este cabeçalho intercala h2 + contagem `.h-sub` + abas. */
.panel-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-h h2 { font-size: 16px; margin: 0; }
.panel-h .h-sub { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }

/* ── Documento vinculado ao cancelamento (= fisc-notas.html) ─────── */
.cn-doc { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border: 1px solid var(--color-border); border-radius: 11px; padding: 11px 14px; margin-bottom: 14px; }
.cn-doc .n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.cn-doc .m { font-size: 12px; color: var(--color-muted); }

/* ── Segmentado de período (= plat-monitor-fiscal.html .per) ──────
   Rádios reais escondidos sob labels: o filtro é server-side (GET), então o
   controle precisa funcionar como campo de formulário, não como botão de JS.
   Só aliasa tokens da marca — nunca cor literal. */
.per { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--color-surface-soft); border-radius: 10px; }
.per .per-opt { display: inline-flex; align-items: center; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--color-fg-2); border-radius: 7px; cursor: pointer; white-space: nowrap; }
.per .per-opt span { padding: 6px 11px; }
.per .per-opt input { position: absolute; opacity: 0; pointer-events: none; }
.per .per-opt:hover { color: var(--color-fg); }
.per .per-opt.on { background: var(--color-surface); color: var(--color-accent); box-shadow: var(--shadow-elev-soft); }
.per .per-opt:focus-within { outline: 2px solid var(--color-accent); outline-offset: 1px; }
@media (max-width: 760px) {
  .per { width: 100%; }
  .per .per-opt { flex: 1 1 auto; justify-content: center; }
}

/* ── Tabela de itens do documento, dentro da gaveta
   (= plat-monitor-fiscal.html .itbl) ───────────────────────────── */
.itbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.itbl th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); font-weight: 700; padding: 0 8px 6px 0; border-bottom: 1px solid var(--color-border); }
.itbl td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.itbl tr:last-child td { border-bottom: 0; }
.itbl .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.itbl .lc { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--color-muted); background: var(--color-surface-soft); padding: 1px 6px; border-radius: 5px; }
.itbl .d { font-weight: 600; line-height: 1.4; }

/* ── Dashboard financeiro (= #viewFiscal de screens/dashboard.html) ── */
.cs-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-stack > * + * { margin-top: 16px; }

/* Barra empilhada por área — CSS puro, sem biblioteca de gráfico. */
.bar-track { height: 7px; border-radius: 999px; background: var(--color-surface-warm); overflow: hidden; display: flex; }
.bar-track > i { display: block; height: 100%; }
.bar-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--color-fg-2); }
.bar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bar-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
/* Paleta ciclada por posição: Area não tem cor no modelo (≠ protótipo, que
   fixa uma cor por nome de área). `.b-N` pinta trilho e legenda juntos. */
.bar-track > i.b-1, .bar-legend i.b-1 { background: var(--color-danger); }
.bar-track > i.b-2, .bar-legend i.b-2 { background: var(--color-info); }
.bar-track > i.b-3, .bar-legend i.b-3 { background: var(--color-status-pending); }
.bar-track > i.b-4, .bar-legend i.b-4 { background: var(--color-accent); }
.bar-track > i.b-5, .bar-legend i.b-5 { background: var(--color-fg-2); }

/* Linhas do painel "Documentos fiscais de DD/MM". */
.lrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--color-border-soft); }
.lrow:last-child { border-bottom: 0; }
.lrow .l-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--color-surface-soft); color: var(--color-fg-2); }
.lrow .l-ic svg { width: 18px; height: 18px; }
.lrow .l-ic.tone-accent { background: color-mix(in oklab, var(--color-accent) 12%, transparent); color: color-mix(in oklab, var(--color-accent), black 16%); }
.lrow .l-ic.tone-warn { background: color-mix(in oklab, var(--color-status-pending) 14%, transparent); color: color-mix(in oklab, var(--color-status-pending), black 8%); }
.lrow .l-ic.tone-danger { background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.lrow .l-body { flex: 1; min-width: 0; }
.lrow .l-nm { font-weight: 700; font-size: 13.5px; }
.lrow .l-mt { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); margin-top: 2px; }
.lrow .l-end { margin-left: auto; text-align: right; flex: none; }
.lrow .l-val { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lrow .l-val.is-danger { color: var(--color-danger); }
.lrow .l-val.is-warn { color: var(--color-status-pending); }

/* Célula "Unidade" da tabela de consolidação por unidade. */
.unit-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.unit-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--color-surface-soft); color: var(--color-fg-2); }
.unit-ic svg { width: 15px; height: 15px; }
.unit-cell .tnm { font-weight: 700; font-size: 13.5px; }
.unit-cell .tid { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); margin-top: 2px; }

/* Badge de área com dot colorido (= .seg-badge do protótipo fisc-consolidacao).
   As cores das áreas que o protótipo define; três delas SÃO tokens da paleta do
   app (warn/accent/danger) e por isso saem do token, não de hex literal. As
   duas restantes (roxo/azul) não existem na paleta e ficam literais, como no
   protótipo. Qual classe cada área recebe é decidido por
   FiscalUiHelper#area_dot_class. */
.seg-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-fg-2); white-space: nowrap; }
.seg-badge i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.i-lan { background: var(--color-warn); }
.i-sau { background: var(--color-accent); }
.i-esc { background: var(--color-danger); }
.i-res { background: #6d2ce0; }
.i-atd { background: #2972c6; }

/* Ações por linha do Monitor Fiscal (= .racts/.ract do protótipo
   plat-monitor-fiscal.html:30-34). `.is-off` substitui o `:disabled` do
   protótipo porque aqui os controles ativos são LINKS (download real), e link
   não tem estado disabled — o inativo é um <span> com aria-disabled. */
.racts { display: flex; gap: 4px; justify-content: flex-end; }
.ract {
  width: 29px; height: 29px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-fg-2); cursor: pointer;
  transition: border-color .13s, color .13s;
}
.ract:hover { border-color: var(--color-accent); color: var(--color-accent); }
.ract.is-off { opacity: .32; cursor: not-allowed; color: var(--color-muted); }
.ract.is-off:hover { border-color: var(--color-border); color: var(--color-muted); }

/* Seleção em lote da tabela (= .chk do protótipo, console.css). */
.chk { width: 17px; height: 17px; accent-color: var(--color-accent); cursor: pointer; }
/* Barra da ação em massa: aparece só com seleção (o controller alterna `hidden`). */
.bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--color-border-soft); border-radius: 11px;
  background: var(--color-surface-soft);
}
.bulk[hidden] { display: none; }
.bulk-count { font-size: 13px; font-weight: 700; color: var(--color-fg-2); }