/* ============================================================================
 * TRITIUM AURA · Edição Fôlego — Intralogística H₂ × Protium Edition
 * EXTENSÃO DO DESIGN SYSTEM — cores de tecnologia + componentes específicos
 * (tokens.css/base/layout/components/portfolio permanecem intocados = Selene/Ceres)
 * ========================================================================== */

:root {
    /* ===== CORES DE TECNOLOGIA (consistentes em todos os gráficos) ======= */
    --tech-fc:           #22C55E;   /* empilhadeira H₂ (célula a combustível) = emerald, hero */
    --tech-fc-light:     #86EFAC;
    --tech-liion:        #3B82F6;   /* elétrica li-íon = azul */
    --tech-liion-light:  #93C5FD;
    --tech-chumbo:       #64748B;   /* elétrica chumbo-ácido = cinza-ardósia */
    --tech-chumbo-light: #CBD5E1;
    --tech-glp:          #F59E0B;   /* combustão GLP = âmbar */
    --tech-glp-light:    #FCD34D;
    --tech-diesel:       #92400E;   /* diesel = terra queimada (referência outdoor) */
    --tech-diesel-light: #D97706;

    /* ===== CADEIA DO H₂ ================================================== */
    --h2-porta:     #0E2E50;   /* preço porta da planta (navy) */
    --h2-logistica: #6366F1;   /* tube trailer */
    --h2-hrs:       #14B8A6;   /* estação de abastecimento on-site */
    --h2-entregue:  #22C55E;   /* custo entregue no bocal */
}

/* Linha de tecnologia em tabelas */
tr.tech-fc td:first-child     { box-shadow: inset 3px 0 0 var(--tech-fc); padding-left: 14px; }
tr.tech-liion td:first-child  { box-shadow: inset 3px 0 0 var(--tech-liion); padding-left: 14px; }
tr.tech-chumbo td:first-child { box-shadow: inset 3px 0 0 var(--tech-chumbo); padding-left: 14px; }
tr.tech-glp td:first-child    { box-shadow: inset 3px 0 0 var(--tech-glp); padding-left: 14px; }
tr.tech-diesel td:first-child { box-shadow: inset 3px 0 0 var(--tech-diesel); padding-left: 14px; }

/* ===== SELETOR DE CASOS (C0–C5) — cards clicáveis ======================= */
.caso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: var(--sp-4);
}
.caso-card {
    position: relative;
    background: var(--surface);
    border: 1.5px solid var(--line-1);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: pointer;
    transition: all var(--t-fast);
    overflow: hidden;
}
.caso-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--caso-cor, var(--emerald-500));
    opacity: 0.85;
}
.caso-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.caso-card.ativo {
    border-color: var(--caso-cor, var(--emerald-500));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--caso-cor, var(--emerald-500)) 18%, transparent), var(--shadow-sm);
    background: linear-gradient(180deg, color-mix(in srgb, var(--caso-cor, var(--emerald-500)) 6%, var(--surface)) 0%, var(--surface) 100%);
}
.caso-card .caso-tag {
    font-size: 9.5px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--caso-cor, var(--emerald-600));
}
.caso-card .caso-nome {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-black);
    font-size: 14px;
    color: var(--ink-1);
    letter-spacing: -0.01em;
    margin: 2px 0;
    line-height: 1.15;
}
.caso-card .caso-regiao {
    font-size: 10.5px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 4px;
}
.caso-card .caso-regiao svg { width: 11px; height: 11px; flex-shrink: 0; }
.caso-card .caso-metric {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line-1);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.caso-card .caso-metric .v {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-black);
    font-size: 16px;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
}
.caso-card .caso-metric .l { font-size: 9.5px; text-transform: uppercase; color: var(--ink-4); }
[data-theme="dark"] .caso-card .caso-nome,
[data-theme="dark"] .caso-card .caso-metric .v { color: white; }

/* ===== DIAGRAMA DE BALANÇO (massa/energia) =============================== */
.balanco-diagrama {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    padding: var(--sp-2) 0;
}
.balanco-no {
    min-width: 150px;
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    padding: 12px 14px;
    position: relative;
}
.balanco-no:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--emerald-500);
    font-size: 18px;
    font-weight: bold;
    z-index: 1;
}
.balanco-no .bn-titulo {
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-600);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}
[data-theme="dark"] .balanco-no .bn-titulo { color: var(--emerald-400); }
.balanco-no .bn-titulo svg { width: 13px; height: 13px; color: var(--emerald-600); }
.balanco-no .bn-linha {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    padding: 2.5px 0;
    border-bottom: 1px dashed var(--line-1);
}
.balanco-no .bn-linha:last-child { border-bottom: none; }
.balanco-no .bn-linha .k { color: var(--ink-3); }
.balanco-no .bn-linha .v {
    font-family: var(--font-mono);
    font-weight: var(--fw-semi);
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
[data-theme="dark"] .balanco-no .bn-linha .v { color: white; }

/* ===== BADGE DE CLASSE DE CARBONO ======================================== */
.ci-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}
.ci-badge.classe-a  { background: var(--emerald-50); color: var(--emerald-700); border: 1px solid var(--emerald-200); }
.ci-badge.classe-b  { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.ci-badge.classe-c  { background: #FEE2E2; color: var(--danger); border: 1px solid #FECACA; }
[data-theme="dark"] .ci-badge.classe-a { background: rgba(34,197,94,0.15); color: var(--emerald-300); }
[data-theme="dark"] .ci-badge.classe-b { background: rgba(245,158,11,0.15); color: #FCD34D; }
[data-theme="dark"] .ci-badge.classe-c { background: rgba(220,38,38,0.15); color: #FCA5A5; }

/* ===== MIX DE ENERGIA (barra empilhada CSS) ============================== */
.mix-bar {
    display: flex;
    height: 26px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--line-1);
}
.mix-bar .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--fw-bold);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    transition: width var(--t-med);
}
.mix-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.mix-legenda .item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }
.mix-legenda .dot { width: 9px; height: 9px; border-radius: 50%; }

/* ===== RASTREABILIDADE — chip de fonte por premissa ====================== */
.fonte-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1.5px 8px;
    border-radius: var(--r-full);
    font-size: 9px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: help;
}
.fonte-chip.f-oficial   { background: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }
.fonte-chip.f-lei       { background: #EDE9FE; color: #6D28D9; border: 1px solid #DDD6FE; }
.fonte-chip.f-vendor    { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.fonte-chip.f-everest   { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
.fonte-chip.f-folego    { background: #D1FAE5; color: #047857; border: 1px solid #A7F3D0; }
.fonte-chip.f-protium   { background: var(--emerald-50); color: var(--emerald-700); border: 1px solid var(--emerald-200); }
.fonte-chip.f-benchmark { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }
[data-theme="dark"] .fonte-chip.f-oficial   { background: rgba(37,99,235,0.15); color: #93C5FD; }
[data-theme="dark"] .fonte-chip.f-lei       { background: rgba(109,40,217,0.18); color: #C4B5FD; }
[data-theme="dark"] .fonte-chip.f-vendor    { background: rgba(245,158,11,0.15); color: #FCD34D; }
[data-theme="dark"] .fonte-chip.f-everest   { background: rgba(220,38,38,0.15); color: #FCA5A5; }
[data-theme="dark"] .fonte-chip.f-folego    { background: rgba(16,185,129,0.15); color: #6EE7B7; }
[data-theme="dark"] .fonte-chip.f-protium   { background: rgba(34,197,94,0.15); color: var(--emerald-300); }
[data-theme="dark"] .fonte-chip.f-benchmark { background: rgba(148,163,184,0.12); color: #CBD5E1; }

/* ===== BLOCO DIDÁTICO — fórmula com números vivos ======================== */
.formula-box {
    background: color-mix(in srgb, var(--navy-600) 4%, var(--surface));
    border: 1px solid var(--line-1);
    border-left: 3px solid var(--emerald-500);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin: 10px 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.9;
    overflow-x: auto;
}
.formula-box .fx-titulo {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--emerald-600);
    margin-bottom: 4px;
}
.formula-box .fx-num { color: var(--emerald-600); font-weight: var(--fw-bold); }
.formula-box .fx-res { color: var(--navy-600); font-weight: var(--fw-bold); }
[data-theme="dark"] .formula-box { background: rgba(34,197,94,0.05); }
[data-theme="dark"] .formula-box .fx-res { color: white; }

/* ===== BOTÃO "COMO CHEGAMOS AQUI" (didático) ============================= */
.como-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: var(--fw-semi);
    color: var(--emerald-600);
    background: transparent;
    border: 1px dashed var(--emerald-300);
    border-radius: var(--r-full);
    padding: 2px 9px;
    cursor: pointer;
    transition: all var(--t-fast);
}
.como-btn:hover { background: var(--emerald-50); border-style: solid; }
[data-theme="dark"] .como-btn { color: var(--emerald-300); border-color: rgba(34,197,94,0.35); }
[data-theme="dark"] .como-btn:hover { background: rgba(34,197,94,0.1); }

/* ===== CARD DE TECNOLOGIA (comparativo) ================================== */
.tech-card {
    position: relative;
    background: var(--surface);
    border: 1.5px solid var(--line-1);
    border-radius: var(--r-lg);
    padding: 16px;
    overflow: hidden;
}
.tech-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--tech-cor, var(--emerald-500));
}
.tech-card.vencedor {
    border-color: var(--tech-cor, var(--emerald-500));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-cor, var(--emerald-500)) 15%, transparent);
}
.tech-card .tc-flag {
    position: absolute;
    top: 10px; right: 12px;
    font-size: 9px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: var(--r-full);
}
.tech-card .tc-flag.ok       { background: var(--emerald-50); color: var(--emerald-700); }
.tech-card .tc-flag.restrito { background: #FEF3C7; color: #92400E; }
.tech-card .tc-flag.vetado   { background: #FEE2E2; color: #B91C1C; }
[data-theme="dark"] .tech-card .tc-flag.ok       { background: rgba(34,197,94,0.15); color: var(--emerald-300); }
[data-theme="dark"] .tech-card .tc-flag.restrito { background: rgba(245,158,11,0.15); color: #FCD34D; }
[data-theme="dark"] .tech-card .tc-flag.vetado   { background: rgba(220,38,38,0.15); color: #FCA5A5; }

/* ===== WATERFALL DO CUSTO ENTREGUE (barras CSS) ========================== */
.entregue-bar { display: flex; height: 30px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line-1); }
.entregue-bar .seg { display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:var(--fw-bold); color:white; white-space:nowrap; overflow:hidden; min-width:0; transition: width var(--t-med); }