/* ==========================================================================
   theme.css — Design system compartilhado (DM Sans + paleta slate).
   Referência: /fesc/scorecard/ (aprovada). É um RE-SKIN por papel.
   USO: incluir DEPOIS de main.css e do CSS da página, pra sobrepor a base.
   Preserva o que é SEMÂNTICO (cores de barra do Gantt por WS, badges de status,
   verde das concluídas, cores de chart) — este arquivo NÃO toca nesses seletores.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --font: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --bg: #0a0e17;             /* fundo da página */
    --surface: #111827;        /* card */
    --surface-2: #1a2235;      /* superfície interna (trilhos, células) */
    --surface-border: #1e293b;
    --radius: 10px;
    --card-pad: 22px;

    --text: #f1f5f9;           /* títulos / texto forte */
    --text-body: #94a3b8;      /* corpo */
    --text-muted: #64748b;     /* labels */
    --accent: #22c55e;         /* verde positivo (destaque) */

    /* escala tipográfica */
    --fs-page-title: 34px;     /* 700 */
    --fs-section: 22px;        /* 700 */
    --fs-card-title: 16px;     /* 700 */
    --fs-body: 16px;           /* 400, line-height 1.6 */
    --fs-label: 13px;          /* 400, uppercase, letter-spacing .8px */
    --fs-kpi: 40px;            /* 700 */

    /* P2 — larguras unificadas. --content-wide é responsivo (redefinido nos @media
       abaixo, cap 3200 no 4K); --content-read (~texto) fica disponível p/ seções. */
    --content-wide: 1800px;
    --content-read: 1280px;
}
/* escala do --content-wide: base 1800 → 2K 2400 → 4K 3200 (cap) */
@media (min-width: 1921px) { :root { --content-wide: 2400px; } }
@media (min-width: 2561px) { :root { --content-wide: 3200px; } }

/* --- Base por papel (só aplica onde theme.css é incluído) --- */
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);           /* forte por padrão (igual ao scorecard); corpo opta pelo --text-body */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--font); font-size: var(--fs-page-title); font-weight: 700; color: var(--text); letter-spacing: -.5px; }
h2 { font-family: var(--font); font-size: var(--fs-section); font-weight: 700; color: var(--text); }
h3, h4 { font-family: var(--font); color: var(--text); font-weight: 700; }
p { font-size: var(--fs-body); color: var(--text-body); line-height: 1.6; }

/* label em versalete (papel — aplicar a classes .label/.stat-label etc.) */
.label, .stat-label, .card-label {
    font-size: var(--fs-label);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-muted);
}

/* --- Card/superfície padrão --- */
.theme-card,
.section,
.stat-card,
.summary-card,
.checklist-product,
.card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    padding: var(--card-pad);
}

/* KPI em destaque (número grande, mono) */
.stat-card h3, .summary-card .value, .kpi-value {
    font-size: var(--fs-kpi);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
}

/* --- App-header combina com o tema --- */
.ah-bar { background: var(--surface); border-bottom-color: var(--surface-border); }
.ah-title { color: var(--text); }
.ah-back { color: var(--text-body); }
.ah-back:hover { color: var(--accent); }

/* ==========================================================================
   .callout — bloco informativo unificado do design system.
   Substitui .highlight-box / .note / .methodology (aplicação nas páginas = PR 7+).
   Variantes: info (padrão) · warning · success · crit → trocam só --c-accent.
   Modos:  VISÍVEL    <div class="callout callout-*">…
           RECOLHÍVEL <details class="callout callout-*"><summary>…</summary>
                        <div class="callout-content">…</div></details>
           MODAL      <button class="callout-trigger callout-*"
                              onclick="this.nextElementSibling.showModal()">…</button>
                      <dialog class="callout-modal callout-*"
                              onclick="if(event.target===this)this.close()">…</dialog>
   Mesma densidade/visual nos três. Tint por accent via color-mix.
   ========================================================================== */
:root {
    --callout-info:    #3b82f6;
    --callout-warning: #f59e0b;
    --callout-success: #22c55e;
    --callout-crit:    #ef4444;
}
.callout, details.callout, .callout-trigger, dialog.callout-modal { --c-accent: var(--callout-info); }
.callout-info    { --c-accent: var(--callout-info); }
.callout-warning { --c-accent: var(--callout-warning); }
.callout-success { --c-accent: var(--callout-success); }
.callout-crit    { --c-accent: var(--callout-crit); }

/* superfície compartilhada (mesma densidade nos 3 modos) */
.callout, details.callout, .callout-trigger {
    border: 1px solid var(--surface-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--c-accent) 7%, var(--surface));
    color: var(--text-body);
    font-size: 14px;
    line-height: 1.6;
}

/* ── VISÍVEL (padrão) ── */
.callout { display: flex; gap: 12px; padding: 13px 15px; }
.callout-ico { flex: none; font-size: 16px; line-height: 1.5; }
.callout-body { min-width: 0; }
.callout-title { color: var(--text); font-weight: 600; margin-bottom: 2px; }
.callout-body > :last-child { margin-bottom: 0; }
.callout a { color: var(--c-accent); }

/* ── RECOLHÍVEL: <details class="callout callout-*"> ── */
details.callout { display: block; padding: 0; }
details.callout > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px; cursor: pointer; list-style: none;
    color: var(--text); font-weight: 600;
}
details.callout > summary::-webkit-details-marker { display: none; }
details.callout > summary::after {
    content: '⌄'; margin-left: auto; color: var(--text-muted);
    font-size: 15px; line-height: 1; transition: transform .2s;
}
details.callout[open] > summary::after { transform: rotate(180deg); }
details.callout > .callout-content { padding: 0 15px 13px; color: var(--text-body); }
details.callout > .callout-content > :last-child { margin-bottom: 0; }

/* ── MODAL: botão .callout-trigger + <dialog class="callout-modal"> ── */
.callout-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
    transition: filter .2s;
}
.callout-trigger:hover { filter: brightness(1.18); }
dialog.callout-modal {
    /* margin:auto devolve a centralização nativa do <dialog> — páginas com um reset
       universal (*{margin:0}) zeram o margin:auto do UA e o modal ancora no canto. */
    margin: auto;
    max-width: 560px; width: calc(100% - 32px);
    padding: 20px 22px;
    border: 1px solid var(--surface-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--c-accent) 7%, var(--surface));
    color: var(--text-body); font-size: 14px; line-height: 1.7;
}
dialog.callout-modal::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.callout-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.callout-modal-title { color: var(--text); font-weight: 700; font-size: 16px; }
.callout-modal-close {
    margin-left: auto; cursor: pointer; background: none; border: none;
    color: var(--text-muted); font-size: 22px; line-height: 1; padding: 0 4px;
}
.callout-modal-close:hover { color: var(--text); }
.callout-modal a { color: var(--c-accent); }
.callout-modal-body > :last-child { margin-bottom: 0; }

/* ── TOOLTIP (.tip) — popover clique-pra-abrir, toque-friendly ──
   Trigger ⓘ discreto ao lado de um título/label + <span popover> curto.
   Usa a Popover API nativa (open/close · light-dismiss · Esc · acessível);
   posição ancorada sob o trigger via shim JS (anchor-positioning ainda não é universal).
   Conteúdo curto e SEM links — se precisar de link, use recolhível/modal. */
.tip-trigger {
    all: unset; cursor: pointer; vertical-align: middle;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 6px;
    border: 1px solid var(--surface-border); border-radius: 50%;
    font-size: 11px; line-height: 1; color: var(--text-muted);
    transition: color .15s, border-color .15s;
}
.tip-trigger:hover { color: var(--text); border-color: var(--c-accent, var(--text-muted)); }
.tip-trigger:focus-visible { outline: 2px solid var(--callout-info); outline-offset: 2px; }
.tip-pop {
    max-width: min(320px, 90vw); margin: 0; padding: 10px 13px;
    border: 1px solid var(--surface-border); border-radius: var(--radius);
    background: var(--surface); color: var(--text-body);
    font-size: 13px; line-height: 1.55;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.tip-pop::backdrop { background: transparent; }   /* light-dismiss sem escurecer a tela */