/* ═══════════════════════════════════════════════════════════════════
   TEMA ÁPICE — Identidade visual do Portal v4 (Grupo Soifer)
   ─────────────────────────────────────────────────────────────────
   "Premium neutro do grupo": grafite escuro + acento platina/champanhe
   apagado (sobrio, frio-neutro) + neutros de apoio. Marca guarda-chuva,
   NEUTRA ao shopping — NAO usa o dourado #B89550 do Patio Batel.

   Este arquivo carrega DEPOIS de tokens.css e SOBRESCREVE os valores
   das variaveis que a UI ja consome (mesmos nomes de token). Nenhuma
   classe/estrutura v3 e alterada: so mudam os valores de cor.

   ── PALETA CANONICA ──
   GRAFITE   #16181B · #1B1E22 · #23262B(base) · #2C3036 · #383D45
   PLATINA   #F5F4F1 · #EBE9E3 · #DAD6CC · #C4BEB1 · #ADA795
             #9A9484 · #8A867C(marca) · #6F6B60(hover) · #55524A
   ═══════════════════════════════════════════════════════════════════ */

:root,
html[data-theme="gold"],
html[data-theme="apice"] {
  /* ─── Marca ─── */
  --pb-gold:            #8A867C;   /* repontado: nao ha mais dourado na marca */
  --pb-dark:            #23262B;
  --pb-bg:              #FCFCFB;
  --pb-gold-light:      rgba(138,134,124,0.12);

  /* ─── Escala Ápice (referencia direta em logo/detalhes) ─── */
  --apice-grafite:      #23262B;
  --apice-grafite-900:  #1B1E22;
  --apice-platina:      #8A867C;
  --apice-platina-claro:#C4BEB1;
  --apice-champanhe:    #ADA795;

  /* ─── Topbar (grafite escuro; placa whitesmoke abriga a marca) ─── */
  --topbar-bg:          #23262B;
  --topbar-text:        rgba(255,255,255,0.87);
  --topbar-muted:       rgba(255,255,255,0.46);
  --topbar-hover:       rgba(255,255,255,0.10);
  --topbar-border:      rgba(255,255,255,0.12);

  /* ─── Sidebar (neutro claro) ─── */
  --sidebar-bg:         #F4F3F0;
  --sidebar-border:     #E4E2DD;
  --sidebar-hover:      #EDEBE6;
  --sidebar-active-bg:  rgba(138,134,124,0.12);
  --sidebar-active-text:#7A7669;
  --sidebar-active-bar: #8A867C;

  /* ─── Cor primaria / de marca (mapeada em --blue, usada em botoes,
         foco, loader, estados ativos e links de acao) ─── */
  --blue:               #8A867C;
  --blue-hover:         #736F63;
  --blue-light:         rgba(138,134,124,0.14);

  /* ─── Semanticas (sobrias, alinhadas ao premium neutro) ─── */
  --green:              #2F8F5B;
  --green-light:        #E4F1E9;
  --red:                #C24A3E;
  --red-light:          #F9E8E5;
  --yellow:             #BE8A2E;
  --yellow-light:       #F8EFD9;

  /* ─── Status (info recalibrado p/ azul sobrio) ─── */
  --status-success:     var(--green);
  --status-success-bg:  var(--green-light);
  --status-error:       var(--red);
  --status-error-bg:    var(--red-light);
  --status-warning:     var(--yellow);
  --status-warning-bg:  var(--yellow-light);
  --status-info:        #3E6DA6;
  --status-info-bg:     rgba(62,109,166,0.12);

  /* ─── Texto (neutros grafite) ─── */
  --text-primary:       #1F2226;
  --text-secondary:     #6A6E73;
  --text-label:         #3A3E43;
  --text-muted:         #9A9DA2;

  /* ─── Superfícies (off-white neutro, sem calor dourado) ─── */
  --bg-app:             #EAE9E6;
  --bg-content:         #FCFCFB;
  --bg-toolbar:         #F6F5F3;
  --bg-grid-header:     #F1F0ED;
  --bg-grid-alt:        #FAFAF9;
  --bg-grid-hover:      #F4F3F0;
  --bg-grid-selected:   #E7E5DF;

  /* ─── Fundo dedicado da tela de login (grafite) ─── */
  --bg-login:           #23262B;
  --bg-login-2:         #16181B;

  /* ─── Bordas ─── */
  --border:             #E4E3DF;
  --border-strong:      #CFCDC7;
  --border-focus:       #8A867C;

  /* ─── Inputs ─── */
  --input-bg:           #FFFFFF;
  --input-border:       #CFCDC7;
  --input-focus-ring:   rgba(138,134,124,0.18);
}

/* ─── Tema ONYX (dark): mantem superfícies escuras do v3, mas troca o
       acento dourado (#D4B896) pela platina clara p/ ficar on-brand ─── */
html[data-theme="onyx"] {
  --blue:               #C4BEB1;
  --blue-hover:         #ADA795;
  --blue-light:         rgba(196,190,177,0.14);
  --sidebar-active-text:#C4BEB1;
  --sidebar-active-bar: #C4BEB1;
  --sidebar-active-bg:  rgba(196,190,177,0.10);
  --border-focus:       #C4BEB1;
  --input-focus-ring:   rgba(196,190,177,0.16);
  --topbar-bg:          #16181B;
  --topbar-text:        rgba(255,255,255,0.87);
  --topbar-muted:       rgba(255,255,255,0.46);
  --topbar-hover:       rgba(255,255,255,0.10);
  --topbar-border:      rgba(255,255,255,0.12);
}

/* ─── Marca: placa whitesmoke abraçando logo + nome, corte arredondado (raio 8px) ───
   A placa cola no canto esquerdo do topo (cancela o padding do .topbar), com respiro
   igual dos dois lados; a beirada direita arredonda e revela o grafite. Serve os dois
   temas (no onyx a placa clara tambem contrasta). O wordmark fica grafite sobre a placa. */
.topbar-brand.apice-plate {
  align-self: stretch;
  background: #F5F5F5;
  margin-left: -14px;                 /* cancela o padding-left do .topbar → cola no canto */
  padding: 0 16px;                    /* respiro igual: esquerda do logo = direita do nome */
  gap: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.topbar-brand.apice-plate .apice-wm { color: #23262B; }   /* wordmark grafite sobre a placa */
.topbar .topbar-divider { display: none; }                 /* a beirada da placa e o separador */
.topbar .topbar-breadcrumb { margin-left: 8px; }           /* afastado da placa */
/* Selo institucional fixo (assinatura do produto ao lado da marca) */
.topbar-breadcrumb .current.apice-selo {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.72);
}

/* ═══ TOPBAR REFINADA — "variante A" (padrão Ápice 2026) ═══
   Marca em chip + wordmark platina, breadcrumb, switcher de shopping
   legível. Substitui a placa whitesmoke (.apice-plate segue como legado). */
.topbar.apice-topbar { gap: 12px; border-bottom: 1px solid rgba(173,167,149,.28); }
.apice-brand { display: flex; align-items: center; gap: 10px; }
.apice-brand-chip {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(245,244,241,.10);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.apice-brand .apice-wm {
  font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700;
  color: #F5F4F1; line-height: 1; white-space: nowrap;
}
.apice-vdiv { width: 1px; height: 22px; background: rgba(255,255,255,.14); flex-shrink: 0; }
.apice-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.55); min-width: 0; }
.apice-crumb .sep { width: 14px; height: 14px; opacity: .5; flex-shrink: 0; }
.apice-crumb .cur { color: #fff; font-weight: 500; white-space: nowrap; }
.apice-topbar .topbar-action-btn { width: 34px; height: 34px; border-radius: 8px; }
.apice-topbar .topbar-action-btn > i,
.apice-topbar .topbar-action-btn > svg { width: 18px; height: 18px; }
.apice-topbar .topbar-action-btn .notif-dot { background: var(--apice-champanhe); border-color: var(--topbar-bg); }
.apice-switch {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 12px 0 8px; border-radius: 9px;
  cursor: pointer; background: rgba(245,244,241,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: background var(--transition), border-color var(--transition);
}
.apice-switch:hover { background: rgba(245,244,241,.12); border-color: rgba(255,255,255,.18); }
.apice-switch .sw-code {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .03em; padding: 3px 7px; border-radius: 6px;
  background: var(--apice-platina); color: #1B1E22; flex-shrink: 0;
}
.apice-switch .sw-nm { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.apice-switch .sw-nm b { font-size: 12.5px; font-weight: 600; color: #fff; }
.apice-switch .sw-nm small { font-size: 10px; color: rgba(255,255,255,.5); }
.apice-switch > i, .apice-switch > svg { width: 15px; height: 15px; color: rgba(255,255,255,.55); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   PORTE DO DESIGN SYSTEM — variante 2026 (claude.ai/design)
   ─────────────────────────────────────────────────────────────────
   Classes/tokens que NASCERAM no DS e ainda nao existiam no codigo.
   Copia VERBATIM de:
     • components.css do DS (bloco "KPI BOARD" + "viz-legend")
     • _ds/dataviz.css (tokens --viz-*)
   NAO editar a mao aqui: quando o DS evoluir, re-portar deste bloco.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DATA VIZ (verbatim de _ds/dataviz.css) ───
   Paleta dedicada a RELATORIOS e GRAFICOS. NAO presa aos neutros da marca —
   series precisam ser distinguiveis. O chrome do grafico (grid/eixos/rotulos)
   usa os neutros da marca; a COR DE DADO usa --viz-*. */
:root {
  /* Categorica (ate 8 series) — ordem recomendada */
  --viz-1:  #3E6DA6;  --viz-2:  #2F8F5B;  --viz-3:  #C9962F;  --viz-4:  #C24A3E;
  --viz-5:  #6E5AA6;  --viz-6:  #0F9488;  --viz-7:  #B5773F;  --viz-8:  #7C8698;
  /* Versoes claras (~16%) */
  --viz-1-soft: rgba(62,109,166,0.16);  --viz-2-soft: rgba(47,143,91,0.16);
  --viz-3-soft: rgba(201,150,47,0.16);  --viz-4-soft: rgba(194,74,62,0.16);
  --viz-5-soft: rgba(110,90,166,0.16);  --viz-6-soft: rgba(15,148,136,0.16);
  --viz-7-soft: rgba(181,119,63,0.16);  --viz-8-soft: rgba(124,134,152,0.16);
  /* Sequencial (1 matiz, claro→escuro) */
  --viz-seq-1: #E7EDF4; --viz-seq-2: #B9C9DC; --viz-seq-3: #7C9BC0; --viz-seq-4: #476F9F; --viz-seq-5: #274865;
  /* Divergente (neg ↔ neutro ↔ pos) */
  --viz-div-neg-2: #C24A3E; --viz-div-neg-1: #E3A79E; --viz-div-mid: #EDEBE6; --viz-div-pos-1: #9AC7AE; --viz-div-pos-2: #2F8F5B;
  /* Financeiro (semantica fixa) */
  --viz-pos: #2F8F5B; --viz-neg: #C24A3E; --viz-neutral: #8A867C;
  /* Chrome do grafico (neutros da marca) */
  --viz-grid: var(--border); --viz-axis: var(--border-strong); --viz-label: var(--text-muted); --viz-ink: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════
   KPI BOARD — painel de indicadores assimetrico (anti-cliche)
   ─────────────────────────────────────────────────
   Substitui a grade de tiles identicos. Regras: (1) hierarquia —
   um .kpi-hero grande domina; secundarias (.kpi-cell) sao menores;
   (2) raios MISTOS — hero de canto reto (2px), celulas .accent com
   canto reto + fio de destaque e .round bem arredondadas; (3) SEM
   badge/pilula — a variacao e texto+seta (.kpi-change). Componha o
   layout com grid/flex na pagina (tamanhos deliberadamente desiguais).
   ═══════════════════════════════════════════════════ */

/* Hero — metrica principal, painel grafite, canto reto */
.kpi-hero {
  background: var(--apice-grafite); color: #F5F4F1;
  border-radius: 2px; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.kpi-hero-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(245,244,241,.55); }
.kpi-hero-value { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.kpi-hero-value .unit { font-size: 18px; font-weight: 600; color: rgba(245,244,241,.6); }

/* Celula secundaria — menor; raio varia pelo modificador */
.kpi-cell {
  background: var(--bg-content); border: 1px solid var(--border);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.kpi-cell-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.kpi-cell-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text-primary); }
.kpi-cell-value .unit { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.kpi-cell.accent { border-radius: 0; border-left: 2px solid var(--viz-1); }   /* canto reto + fio */
.kpi-cell.round  { border-radius: 12px; }                                     /* bem arredondada */

/* Variacao: texto + seta, NUNCA badge */
.kpi-change { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.kpi-change.up   { color: var(--viz-pos); }
.kpi-change.down { color: var(--viz-neg); }
.kpi-change > i, .kpi-change > svg { width: 13px; height: 13px; }
.kpi-change .vs { color: var(--text-muted); font-weight: 400; }
.kpi-hero .kpi-change.up { color: #9AC7AE; }
.kpi-hero .kpi-change .vs { color: rgba(245,244,241,.5); }

/* Legenda de series para graficos */
.viz-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.viz-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.viz-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   ADICOES DO DS · GABARITOS 2026-07 (vitrine 13 → 22)
   ─────────────────────────────────────────────────────────────────
   Classes NOVAS que nasceram nos 9 gabaritos criados nesta rodada.
   100% tokens var(--) (fora da paleta --viz-* dedicada a dados).
   Reusaveis pelas rotinas reais — nao duplicar no HTML do preview.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── adicao DS · gabarito 1 (Graficos) ───
   Cartao contentor de grafico. As cores de SERIE saem de --viz-* (nunca
   hardcoded); o chrome (grid/eixo/rotulo) usa --viz-grid/--viz-axis/--viz-label. */
.chart-card { background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; }
.chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.chart-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.chart-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.chart-canvas-wrap { position: relative; flex: 1; min-height: 200px; }

/* ─── adicao DS · gabarito 2 (Split master-detalhe) ───
   Lista mestre do .split-main. O painel detalhe usa .split-aside.open (tokens.css). */
.master-list { display: flex; flex-direction: column; }
.master-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background var(--transition); }
.master-item:hover { background: var(--bg-grid-hover); }
.master-item.selected { background: var(--bg-grid-selected); box-shadow: inset 3px 0 0 var(--blue); }
.master-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.master-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.master-item-sub { font-size: 11px; color: var(--text-muted); }
.detail-body { padding: 16px; overflow-y: auto; }
.detail-field { margin-bottom: 12px; }
.detail-field .k { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 3px; }
.detail-field .v { font-size: 13px; color: var(--text-primary); }

/* ─── adicao DS · gabarito 3 (Timeline / trilha de auditoria) ───
   Trilha vertical de eventos. Autor + data dd/mm/aaaa HH:mm + badge de status.
   O ponto muda de cor pelo modificador (concluido/aviso/erro). */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding: 0 0 18px 0; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -24px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-content); border: 2px solid var(--blue); box-shadow: 0 0 0 3px var(--bg-app); }
.tl-dot.is-done   { background: var(--green);  border-color: var(--green);  }
.tl-dot.is-warn   { background: var(--yellow); border-color: var(--yellow); }
.tl-dot.is-danger { background: var(--red);    border-color: var(--red);    }
.tl-body { background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tl-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tl-meta { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.tl-actor { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.tl-actor > i, .tl-actor > svg { width: 12px; height: 12px; }
.tl-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; }

/* ─── adicao DS · gabarito 4 (Upload / anexos / galeria) ─── */
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-toolbar); padding: 30px 20px; text-align: center; cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.dropzone:hover, .dropzone.is-drag { border-color: var(--blue); background: var(--blue-light); }
.dropzone-icon { color: var(--text-muted); }
.dropzone.is-drag .dropzone-icon, .dropzone:hover .dropzone-icon { color: var(--blue); }
.dropzone-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-top: 8px; }
.dropzone-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.anexo-list { display: flex; flex-direction: column; gap: 8px; }
.anexo-item { display: flex; align-items: center; gap: 12px; background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; }
.anexo-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.anexo-info { flex: 1; min-width: 0; }
.anexo-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anexo-meta { font-size: 11px; color: var(--text-muted); }
.anexo-remove { color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 4px; display: flex; }
.anexo-remove:hover { color: var(--red); }
.upload-progress { height: 5px; border-radius: 5px; background: var(--border); overflow: hidden; margin-top: 6px; }
.upload-progress > span { display: block; height: 100%; background: var(--blue); transition: width .25s; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.thumb { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-toolbar); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.thumb-cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(35,38,43,.72); color: #F5F4F1; font-size: 10px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── adicao DS · gabarito 5 (Relatorio / impressao A4) ───
   Folha A4 com cabecalho/rodape institucional. @page + @media print p/ impressao. */
.report-sheet { max-width: 820px; margin: 0 auto; background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 34px 38px; color: #1F2226; }
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--apice-grafite); padding-bottom: 14px; margin-bottom: 18px; }
.report-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--apice-grafite); }
.report-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.report-brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--apice-platina); text-align: right; white-space: nowrap; }
.report-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; margin-bottom: 20px; }
.report-meta b { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 2px; }
.report-meta span { font-size: 13px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.report-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.report-table th { text-align: left; background: var(--bg-grid-header); border-bottom: 1px solid var(--border-strong); padding: 7px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.report-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.report-table td.num, .report-table th.num { text-align: right; }
.report-table tfoot td { font-weight: 700; border-top: 2px solid var(--apice-grafite); border-bottom: none; background: var(--bg-grid-alt); }
.report-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--text-muted); }
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  .no-print { display: none !important; }
  body { background: #FFFFFF !important; }
  .report-sheet { box-shadow: none; border: none; margin: 0; max-width: none; padding: 0; }
  .report-table tr { break-inside: avoid; }
}

/* ─── adicao DS · gabarito 6 (Importador) ───
   Variante do wizard: contadores de validacao + destaque de linha com erro.
   Reusa .dropzone (g4), .browse-table e .badge (tokens.css). */
.imp-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.imp-stat { flex: 1; min-width: 120px; background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; }
.imp-stat b { display: block; font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.imp-stat span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 5px; }
.imp-stat.ok b  { color: var(--green); }
.imp-stat.err b { color: var(--red); }
.browse-table tr.row-err td { background: var(--red-light); }
.cell-err { color: var(--red); font-weight: 600; }

/* ─── adicao DS · gabarito 7 (Calendario / agenda mensal) ─── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-dow { background: var(--bg-grid-header); text-align: center; padding: 8px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.cal-day { background: var(--bg-content); min-height: 98px; padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; }
.cal-day.is-out { background: var(--bg-grid-alt); }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-daynum { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cal-day.is-out .cal-daynum { color: var(--text-muted); }
.cal-day.is-today .cal-daynum { color: var(--blue); }
.cal-event { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-event.ev-venc { background: var(--red-light);   color: var(--red);   }
.cal-event.ev-comp { background: var(--blue-light);  color: var(--blue);  }
.cal-event.ev-ok   { background: var(--green-light); color: var(--green); }
.cal-more { font-size: 10px; color: var(--text-muted); }

/* ─── adicao DS · gabarito 8 (Arvore / hierarquia) ─── */
.tree { font-size: 13px; }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: background var(--transition); }
.tree-row:hover { background: var(--bg-grid-hover); }
.tree-row.selected { background: var(--bg-grid-selected); color: var(--sidebar-active-text); }
.tree-toggle { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
.tree-node.open > .tree-row .tree-toggle { transform: rotate(90deg); }
.tree-toggle.is-leaf { visibility: hidden; }
.tree-ico { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }
.tree-label { flex: 1; }
.tree-tag { font-size: 10px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tree-children { margin-left: 20px; border-left: 1px solid var(--border); padding-left: 6px; display: none; }
.tree-node.open > .tree-children { display: block; }

/* ─── adicao DS · gabarito 9 (Matriz de permissoes) ───
   Grade rotinas × acoes. Header sticky (topo) + 1a coluna sticky (esquerda). */
.matriz-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-content); max-height: 100%; }
.matriz-table { border-collapse: separate; border-spacing: 0; font-size: 12px; width: 100%; }
.matriz-table thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-grid-header); border-bottom: 1px solid var(--border-strong); padding: 9px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); text-align: center; white-space: nowrap; }
.matriz-table th.col-rotina, .matriz-table td.col-rotina { position: sticky; left: 0; z-index: 2; background: var(--bg-content); border-right: 1px solid var(--border-strong); text-align: left; min-width: 230px; }
.matriz-table thead th.col-rotina { z-index: 4; background: var(--bg-grid-header); }
.matriz-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.matriz-table tbody tr:hover td { background: var(--bg-grid-hover); }
.matriz-table tbody tr:hover td.col-rotina { background: var(--bg-grid-hover); }
.matriz-rot { font-weight: 600; color: var(--text-primary); }
.matriz-mod { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.matriz-chk { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.matriz-table tr.matriz-group td { background: var(--bg-grid-alt); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); text-align: left; position: sticky; left: 0; }

/* ═══════════════════════════════════════════════════════════════════
   ADICAO DS · EXPLORACAO (futuro) · 2026-07 (vitrine 22 → 28)
   ─────────────────────────────────────────────────────────────────
   Classes de EXPLORACAO — direcao futura, ainda NAO padrao de producao.
   A doutrina e "gabarito nasce de padrao comprovado"; estas nascem de
   telas que o Apice ainda vai construir (tablet/kiosk, kanban, chat
   inbox, mapa de vagas SVG, central de notificacoes). 100% tokens
   var(--). Reusaveis quando a rotina real chegar; ate la, exploratorias.
   Nao promover a "gabarito consolidado" sem tela real comprovando.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── exploracao · TABLET / KIOSK (touch-first) · PRIORIDADE ───
   Persona operacao em campo / balcao (vistoria, consulta de vaga). Alvos
   de toque grandes (>=52px), densidade menor, tipografia maior, feedback
   :active. Referencia: views *Tablet* do Portal (Bombeiros/Vistorias). */
.tab-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--bg-app); -webkit-tap-highlight-color: transparent; }
.tab-topbar { background: var(--apice-grafite); color: #F5F4F1; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 18px; position: sticky; top: 0; z-index: 50; flex-shrink: 0; }
.tab-topbar-chip { width: 40px; height: 40px; border-radius: 10px; background: rgba(245,244,241,.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tab-topbar-info { flex: 1; min-width: 0; }
.tab-topbar-title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-topbar-sub { font-size: 11px; color: rgba(245,244,241,.55); margin-top: 1px; }
.tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .12s, transform .1s; }
.tab-btn:active { transform: scale(.97); }
.tab-btn-primary { background: var(--blue); color: #fff; }
.tab-btn-primary:active { background: var(--blue-hover); }
.tab-btn-ghost { background: rgba(245,244,241,.10); color: rgba(245,244,241,.9); border-color: rgba(255,255,255,.14); min-height: 44px; padding: 0 16px; font-size: 13px; }
.tab-btn-ghost:active { background: rgba(245,244,241,.20); }
.tab-progress-wrap { background: var(--bg-content); border-bottom: 1px solid var(--border); padding: 10px 18px 12px; flex-shrink: 0; }
.tab-progress-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.tab-progress-label strong { color: var(--text-primary); }
.tab-progress { height: 8px; border-radius: 5px; background: var(--border); overflow: hidden; }
.tab-progress > span { display: block; height: 100%; border-radius: 5px; background: var(--green); transition: width .35s ease; }
.tab-body { flex: 1; overflow-y: auto; padding: 0 18px 40px; }
.tab-section-head { display: flex; align-items: center; gap: 10px; margin: 14px -18px 10px; padding: 11px 18px; background: var(--apice-grafite); color: #F5F4F1; position: sticky; top: 0; z-index: 10; }
.tab-section-head:first-child { margin-top: 14px; }
.tab-section-label { font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tab-section-count { font-size: 12px; font-weight: 600; opacity: .6; margin-left: auto; font-variant-numeric: tabular-nums; }
.tab-card { background: var(--bg-content); border: 2px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; transition: border-color .15s, background .15s; }
.tab-card.is-ok  { border-color: var(--green); background: var(--green-light); }
.tab-card.is-nok { border-color: var(--red);   background: var(--red-light); }
.tab-card.is-na  { border-color: var(--border-strong); background: var(--bg-grid-alt); }
.tab-card-top { display: flex; align-items: flex-start; gap: 14px; }
.tab-card-info { flex: 1; min-width: 0; }
.tab-card-grupo { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.tab-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.tab-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.tab-status-group { display: flex; gap: 8px; flex-shrink: 0; }
.tab-status-btn { min-width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--border-strong); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background .12s, border-color .12s, color .12s, transform .1s; }
.tab-status-btn:active { transform: scale(.9); }
.tab-status-btn.ok  { border-color: var(--green); }
.tab-status-btn.nok { border-color: var(--red); }
.tab-status-btn.na  { border-color: var(--border-strong); }
.tab-status-btn.ok.active  { background: var(--green); color: #fff; }
.tab-status-btn.nok.active { background: var(--red);   color: #fff; }
.tab-status-btn.na.active  { background: var(--text-secondary); color: #fff; border-color: var(--text-secondary); }
.tab-obs-row { display: none; margin-top: 12px; }
.tab-card.is-nok .tab-obs-row { display: block; }
.tab-obs { width: 100%; min-height: 52px; resize: vertical; font-size: 13px; font-family: inherit; padding: 10px 12px; border: 1px solid var(--red); border-radius: 10px; box-sizing: border-box; background: var(--bg-content); color: var(--text-primary); }
.tab-obs:focus { outline: none; box-shadow: 0 0 0 3px var(--red-light); }
/* Grade de acao rapida em kiosk (cards grandes de menu / consulta de vaga) */
.tab-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding-top: 14px; }
.tab-tile { background: var(--bg-content); border: 2px solid var(--border); border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-decoration: none; color: inherit; min-height: 120px; transition: border-color .15s, transform .1s; }
.tab-tile:active { transform: scale(.98); }
.tab-tile:hover { border-color: var(--blue); }
.tab-tile-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.tab-tile-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.tab-tile-sub { font-size: 12px; color: var(--text-secondary); margin-top: auto; }
/* Utilitario touch generico */
.touch-target { min-width: 48px; min-height: 48px; }

/* ─── exploracao · KANBAN (board de colunas com cards) ───
   Ref.: Portal/GestaoProjetos, Seguranca/BombeirosIndicadores. Drag e MOCK
   (visual). Colunas rolam horizontal; cada coluna rola vertical. */
.kanban-board { display: flex; gap: 14px; flex: 1; min-height: 0; overflow-x: auto; padding: 16px; align-items: flex-start; }
.kanban-col { flex: 0 0 300px; display: flex; flex-direction: column; max-height: 100%; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kanban-col.is-over { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-light); }
.kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-app); border-radius: var(--radius-lg) var(--radius-lg) 0 0; z-index: 1; }
.kanban-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kanban-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.kanban-col-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-content); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.kanban-col-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.kanban-card { background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: grab; box-shadow: var(--shadow-sm); transition: box-shadow .15s, opacity .15s, transform .1s; }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .45; }
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.kanban-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: var(--blue-light); color: var(--blue); }
.kanban-tag.warn { background: var(--yellow-light); color: var(--yellow); }
.kanban-tag.danger { background: var(--red-light); color: var(--red); }
.kanban-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.kanban-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.kanban-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kanban-card-meta { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kanban-card-meta.late { color: var(--red); font-weight: 600; }

/* ─── exploracao · CHAT / INBOX de conversas ───
   Ref.: RH/AtendimentoWA, Administracao/WhatsApp. REUSA .chat-head /
   .chat-thread / .chat-input / .msg (tokens.css, vieram do painel IA).
   Adiciona so a coluna de conversas (inbox) ao redor da thread. */
.inbox-shell { display: flex; flex: 1; min-height: 0; background: var(--bg-content); }
.inbox-list { flex: 0 0 320px; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 0; }
.inbox-list-head { padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.inbox-search { display: flex; align-items: center; gap: 8px; background: var(--bg-toolbar); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.inbox-search input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text-primary); outline: none; }
.inbox-search > i, .inbox-search > svg { color: var(--text-muted); flex-shrink: 0; }
.inbox-scroll { flex: 1; overflow-y: auto; }
.inbox-item { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition); }
.inbox-item:hover { background: var(--bg-grid-hover); }
.inbox-item.active { background: var(--bg-grid-selected); box-shadow: inset 3px 0 0 var(--blue); }
.inbox-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--apice-platina); color: #1B1E22; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-item-body { flex: 1; min-width: 0; }
.inbox-item-top { display: flex; align-items: baseline; gap: 8px; }
.inbox-item-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item-time { margin-left: auto; font-size: 10px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.inbox-item-preview { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.inbox-item-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inbox-badge { flex-shrink: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.inbox-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.inbox-thread .chat-thread { flex: 1; height: auto; background: var(--bg-app); }
.inbox-chan { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 6px; background: var(--green-light); color: var(--green); }
.msg-time { display: block; font-size: 10px; opacity: .6; margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; }

/* ─── exploracao · MAPA / PLANTA SVG (vagas do estacionamento) ───
   Ref.: Estacionamento/PBParking, Seguranca/Ocorrencias. Grid de vagas
   coloridas por estado. Cores via fill/stroke com tokens (dado != marca). */
.mapa-wrap { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.mapa-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.mapa-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.mapa-legend-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid; flex-shrink: 0; }
.mapa-svg-card { background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; overflow: auto; }
.mapa-svg { width: 100%; height: auto; display: block; font-family: 'Inter', sans-serif; }
.mapa-svg .vaga { stroke-width: 1.5; rx: 3; cursor: pointer; transition: opacity .12s; }
.mapa-svg .vaga:hover { opacity: .78; }
.mapa-svg .vaga-livre       { fill: var(--green-light); stroke: var(--green); }
.mapa-svg .vaga-ocupada     { fill: var(--red-light);   stroke: var(--red); }
.mapa-svg .vaga-interditada { fill: var(--yellow-light);stroke: var(--yellow); }
.mapa-svg .vaga-reservada   { fill: var(--blue-light);  stroke: var(--blue); }
.mapa-svg .vaga-label { fill: var(--text-secondary); font-size: 9px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.mapa-svg .setor-label { fill: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.mapa-svg .via { fill: var(--bg-grid-alt); stroke: var(--border); stroke-dasharray: 4 4; }
.mapa-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.mapa-stat { background: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; min-width: 110px; }
.mapa-stat b { display: block; font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mapa-stat span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 5px; }

/* ─── exploracao · CENTRAL DE NOTIFICACOES (inbox / painel) ───
   Ref.: helpers/broadcastNotificacao. REUSA .notif-dropdown/.notif-list
   (tokens.css) para o dropdown; adiciona a versao painel/inbox completa. */
.notif-inbox { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.notif-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notif-filter { display: flex; gap: 6px; }
.notif-scroll { flex: 1; overflow-y: auto; }
.notif-row { display: flex; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition); align-items: flex-start; }
.notif-row:hover { background: var(--bg-grid-hover); }
.notif-row.unread { background: var(--blue-light); }
.notif-row.unread:hover { background: var(--blue-light); }
.notif-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-ico.info    { background: var(--status-info-bg);    color: var(--status-info); }
.notif-ico.success { background: var(--green-light);       color: var(--green); }
.notif-ico.warning { background: var(--yellow-light);      color: var(--yellow); }
.notif-ico.danger  { background: var(--red-light);         color: var(--red); }
.notif-inbox-body { flex: 1; min-width: 0; }
.notif-inbox-top { display: flex; align-items: baseline; gap: 8px; }
.notif-inbox-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.notif-inbox-time { margin-left: auto; font-size: 10px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.notif-inbox-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; }
.notif-inbox-actions { display: flex; gap: 8px; margin-top: 8px; }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 6px; }