/* ===========================================================================
   USO DOS PAINÉIS — El Misti
   Tokens copiados de Times/Time de TI/design-system/tokens/tokens.css
   (o painel vive fora dessa árvore de pastas — ver README do Design System,
   seção "Como usar num dashboard novo": copiar valores, não linkar path
   relativo entre repositórios diferentes).
   =========================================================================== */
:root {
  --color-brand-primary: #1B5E20;
  --color-brand-primary-light: #2E7D32;
  --color-brand-primary-bg: #E8F5E9;
  --color-brand-dark: #0D2818;

  --color-surface: #f5f7f5;
  --color-surface-card: #ffffff;
  --color-border: #d5e0d5;

  --color-text: #1a2e1a;
  --color-text-muted: #5f7060;
  --color-heading: var(--color-brand-dark);

  --color-success-text: #2E7D32;
  --color-danger-text: #C62828;
  --color-info-text: #1565C0;
  --color-warning-text: #BF360C;
  --color-accent-text: #00695C;
  --color-purple-text: #6A1B9A;

  --color-success-fill: #2E7D32;
  --color-danger-fill: #C62828;
  --color-info-fill: #1565C0;
  --color-warning-fill: #F9A825;
  --color-accent-fill: #00897B;
  --color-purple-fill: #6A1B9A;

  --color-table-head-bg: var(--color-brand-primary-bg);
  --color-hover-bg: var(--color-brand-primary-bg);
  --color-hachure-bg: repeating-linear-gradient(135deg, rgba(95,112,96,.16), rgba(95,112,96,.16) 4px, rgba(95,112,96,.04) 4px, rgba(95,112,96,.04) 8px);

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-2xs: 9px;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.2;
  --lh-base: 1.3;
  --lh-relaxed: 1.5;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(0,40,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);

  --touch-target: 44px;
}

[data-theme="dark"] {
  --color-surface: #10160f;
  --color-surface-card: #1a231a;
  --color-border: #2c3a2c;
  --color-text: #e6ede6;
  --color-text-muted: #8fa08f;
  --color-heading: #eafaea;

  --color-success-text: #81C784;
  --color-danger-text: #EF5350;
  --color-info-text: #64B5F6;
  --color-warning-text: #FFCC80;
  --color-accent-text: #4DB6AC;
  --color-purple-text: #CE93D8;

  --color-table-head-bg: rgba(46,125,50,.22);
  --color-hover-bg: rgba(46,125,50,.14);
  --color-hachure-bg: repeating-linear-gradient(135deg, rgba(230,237,230,.10), rgba(230,237,230,.10) 4px, rgba(230,237,230,.02) 4px, rgba(230,237,230,.02) 8px);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  background:var(--color-surface);
  color:var(--color-text);
  line-height:var(--lh-base);
}

/* ---------- Header (COMPONENTS.md > Header) ---------- */
.header{background:var(--color-brand-dark);color:#fff;padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.header-logo-img{height:28px;width:auto}
.header-title{flex:1;text-align:left;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:.5px}
.header-sub{font-size:var(--fs-2xs);opacity:.65;display:block;margin-top:1px;font-weight:var(--fw-regular);letter-spacing:.2px}

.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;flex-shrink:0}
.theme-toggle:hover{background:rgba(255,255,255,.15)}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media(max-width:768px){.theme-toggle{width:var(--touch-target);height:var(--touch-target)}}

/* ---------- Aviso de honestidade (variação do "Aviso de corte" —
   COMPONENTS.md > Aviso de corte. Aqui é permanente, não sobre data de
   início de medição, e sim sobre o LIMITE do que o número significa —
   requisito do CONTRATO.md §6, não enfeite.) ---------- */
.honestidade-banner{display:flex;align-items:flex-start;gap:var(--sp-2);background:rgba(249,168,37,.14);border-bottom:1px solid rgba(249,168,37,.35);padding:var(--sp-2) var(--sp-3);flex-wrap:wrap}
.honestidade-icon{color:var(--color-warning-fill);font-size:14px;flex-shrink:0;line-height:1.4}
.honestidade-text{font-size:var(--fs-sm);color:var(--color-text);flex:1;min-width:220px;line-height:var(--lh-relaxed)}
.honestidade-text strong{color:var(--color-heading)}
.honestidade-more-btn{min-height:28px;padding:2px 10px;border:1px solid rgba(249,168,37,.5);border-radius:var(--radius-sm);background:transparent;color:var(--color-warning-text);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer;flex-shrink:0;align-self:center}
.honestidade-more-btn:hover{background:rgba(249,168,37,.15)}
.honestidade-detalhe{display:none;width:100%;font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed);padding-top:var(--sp-2);border-top:1px dashed rgba(249,168,37,.35);margin-top:var(--sp-1)}
.honestidade-detalhe.aberto{display:block}
.honestidade-detalhe p + p{margin-top:var(--sp-1)}

/* ---------- Barra de período (segmented control, reaproveita .tab-btn) ---------- */
.periodo-bar{background:var(--color-surface-card);border-bottom:1px solid var(--color-border);padding:var(--sp-2) var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.periodo-label{font-size:var(--fs-xs);color:var(--color-text-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.3px}
.periodo-group{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.periodo-btn{min-height:var(--touch-target);padding:0 var(--sp-4);border:none;background:var(--color-surface-card);color:var(--color-text-muted);font-size:var(--fs-md);font-weight:var(--fw-semibold);cursor:pointer;border-right:1px solid var(--color-border)}
.periodo-btn:last-child{border-right:none}
.periodo-btn:hover:not(.active){background:var(--color-hover-bg);color:var(--color-text)}
.periodo-btn.active{background:var(--color-brand-primary);color:#fff}
.periodo-range{font-size:var(--fs-xs);color:var(--color-text-muted);margin-left:auto}
.freshness{font-size:var(--fs-2xs);color:var(--color-text-muted)}

/* ---------- KPI row (COMPONENTS.md > KPI card) ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-2);padding:var(--sp-3)}
.kpi-card{background:var(--color-surface-card);border-radius:var(--radius-md);padding:var(--sp-3);box-shadow:var(--shadow-sm);border-left:4px solid var(--color-brand-primary)}
.kpi-label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}
.kpi-value{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--color-heading);display:block;line-height:var(--lh-tight)}
.kpi-sub{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:3px;display:block;line-height:var(--lh-relaxed)}
.kpi-card.accent-red{border-left-color:var(--color-danger-fill)}
.kpi-card.accent-blue{border-left-color:var(--color-info-fill)}
.kpi-card.accent-orange{border-left-color:var(--color-warning-fill)}
.kpi-card.accent-teal{border-left-color:var(--color-accent-fill)}
@media(max-width:768px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.kpi-row{grid-template-columns:1fr}.kpi-value{font-size:var(--fs-3xl)}}

/* ---------- Seção / card (COMPONENTS.md > Seção) ---------- */
.section-card{background:var(--color-surface-card);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);margin:0 var(--sp-3) var(--sp-3);box-shadow:var(--shadow-sm)}
.section-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--sp-1);display:flex;align-items:center;gap:var(--sp-1)}
.section-desc{font-size:var(--fs-xs);color:var(--color-text-muted);margin-bottom:var(--sp-3);line-height:var(--lh-relaxed);max-width:70ch}

/* ---------- "Quem sumiu" — cards de alerta, topo da página ---------- */
.sumiu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-2)}
.sumiu-card{border-radius:var(--radius-md);padding:var(--sp-3);border-left:4px solid var(--color-text-muted);background:var(--color-surface)}
.sumiu-card.grave{border-left-color:var(--color-danger-fill);background:rgba(198,40,40,.06)}
.sumiu-card.atencao{border-left-color:var(--color-warning-fill);background:rgba(249,168,37,.08)}
.sumiu-nome{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--color-heading)}
.sumiu-papel{font-size:var(--fs-2xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px;margin-left:var(--sp-1)}
.sumiu-dias{font-size:var(--fs-xl);font-weight:var(--fw-bold);display:block;margin-top:var(--sp-1)}
.sumiu-card.grave .sumiu-dias{color:var(--color-danger-text)}
.sumiu-card.atencao .sumiu-dias{color:var(--color-warning-text)}
.sumiu-card:not(.grave):not(.atencao) .sumiu-dias{color:var(--color-text-muted)}
.sumiu-desde{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:2px}

/* ---------- Tabela ranqueada (COMPONENTS.md > Tabela ranqueada) ---------- */
.table-scroll{overflow-x:auto;max-height:440px;overflow-y:auto}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th{background:var(--color-table-head-bg);padding:var(--sp-2);text-align:left;font-weight:var(--fw-bold);color:var(--color-heading);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--color-brand-primary);white-space:nowrap;position:sticky;top:0;z-index:1}
.data-table th.sortable{cursor:pointer;user-select:none}
.data-table th.sortable:hover{background:var(--color-hover-bg)}
.data-table th.sortable .sort-arrow{font-size:8px;opacity:.5;margin-left:3px}
.data-table th.sortable.sort-active .sort-arrow{opacity:1;color:var(--color-brand-primary-light)}
.data-table td{padding:var(--sp-2);border-bottom:1px solid var(--color-border);white-space:nowrap}
.data-table tr:hover td{background:var(--color-hover-bg)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table tr.linha-orfa td{color:var(--color-text-muted)}
.nome-papel{font-weight:var(--fw-semibold);color:var(--color-text)}
.papel-tag{font-size:var(--fs-2xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.2px;display:block;font-weight:var(--fw-regular)}

/* ---------- Badges e pills (COMPONENTS.md > honestidade de dado) ---------- */
.badge-caution{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:var(--fw-bold);background:rgba(249,168,37,.18);color:var(--color-warning-text);text-transform:uppercase;letter-spacing:.3px}
.badge-orfao{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:var(--fw-bold);background:rgba(95,112,96,.14);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:var(--radius-full);background:var(--color-table-head-bg);color:var(--color-brand-primary-light);font-size:10px;cursor:help;font-style:normal;margin-left:2px}

/* Régua de profundidade (CONTRATO.md §6.3) — 3 níveis fixos, nunca só cor. */
.pill-nivel{display:inline-block;padding:2px 8px;border-radius:8px;font-size:9px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.2px;white-space:nowrap}
.pill-nivel.n-abriu{background:rgba(95,112,96,.14);color:var(--color-text-muted)}
.pill-nivel.n-olhada{background:rgba(21,101,192,.14);color:var(--color-info-text)}
.pill-nivel.n-trabalhou{background:rgba(46,125,50,.14);color:var(--color-success-text)}

/* ---------- Gráfico de evolução — SVG puro, sem lib de gráfico ---------- */
.evolucao-svg{width:100%;height:190px;display:block;overflow:visible}
.evolucao-svg .barra{fill:var(--color-brand-primary-light);transition:fill .2s}
.evolucao-svg .barra:hover{fill:var(--color-brand-primary)}
.evolucao-svg .eixo-linha{stroke:var(--color-border);stroke-width:1}
.evolucao-svg .eixo-label{fill:var(--color-text-muted);font-size:9px;font-family:var(--font-body)}
.evolucao-nota{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--sp-2)}

/* ---------- Estado vazio / erro / carregando ---------- */
.empty-msg{text-align:center;padding:var(--sp-5);color:var(--color-text-muted);font-size:var(--fs-sm)}
.section-card.is-empty > *:not(.section-title):not(.section-desc):not(.empty-msg){display:none}
.section-card.is-empty .empty-msg{display:block}
.section-card:not(.is-empty) .empty-msg{display:none}

.error-box{color:var(--color-danger-text);text-align:center;padding:var(--sp-5);font-size:var(--fs-sm)}
.error-box button{margin-top:var(--sp-2);padding:6px 16px;border:1px solid var(--color-danger-text);border-radius:var(--radius-sm);background:none;color:var(--color-danger-text);cursor:pointer;font-size:var(--fs-xs)}
.error-box button:hover{background:var(--color-danger-text);color:#fff}

.loading{text-align:center;padding:var(--sp-6);color:var(--color-text-muted);font-size:var(--fs-sm)}

/* ---------- Rodapé ---------- */
.rodape{padding:var(--sp-4) var(--sp-3) var(--sp-6);text-align:center;font-size:var(--fs-xs);color:var(--color-text-muted)}

@media(max-width:600px){
  .header-title{font-size:var(--fs-md)}
  .periodo-range{margin-left:0;width:100%}
  .section-card{margin:0 var(--sp-2) var(--sp-2);padding:var(--sp-2) var(--sp-3)}
}


/* Aviso de início da medição — ausência de registro não é ausência de uso.
   Fundo translúcido como o .honestidade-banner: funciona nos dois temas sem
   precisar de regra separada em [data-theme="dark"]. Azul (informativo) e não
   âmbar, porque o banner do topo já é âmbar e fala de OUTRA coisa — dois
   avisos da mesma cor viram um borrão que ninguém lê. */
.aviso-inicio{
  margin:var(--sp-3) var(--sp-3) 0;
  padding:var(--sp-2) var(--sp-3);
  background:rgba(33,150,243,.12);
  border-left:3px solid var(--color-info-text, #1976D2);
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  color:var(--color-text-muted);
  line-height:var(--lh-relaxed);
}
.aviso-inicio strong{color:var(--color-text);font-weight:var(--fw-semibold)}