/* static/css/cg.css
 *
 * Kit de componentes (Fase 2 da revisão de UX): o visual dos includes de templates/componentes/
 * e dos comportamentos de static/js/cg.js. Usa as variáveis de marca.css; cada bloco tem a sua
 * versão de alto contraste. Referência viva, com exemplos: a página /componentes/ (superusuário).
 */

/* --- Tons: teal (andamento), sucesso, alerta, perigo, neutro. Texto sempre >= 4,5:1 no fundo. --- */
:root {
    --cg-teal-fundo: var(--marca-nevoa);      --cg-teal-texto: var(--marca-petroleo);  --cg-teal-borda: var(--marca-teal);
    --cg-sucesso-fundo: #e8f6ee;               --cg-sucesso-texto: #135c36;             --cg-sucesso-borda: #2e9e5b;
    --cg-alerta-fundo: #fff6e0;                --cg-alerta-texto: #6b4a00;              --cg-alerta-borda: #e0a400;
    --cg-perigo-fundo: #fdecee;                --cg-perigo-texto: #8a1c28;              --cg-perigo-borda: #d63a4a;
    --cg-neutro-fundo: #eef1f2;                --cg-neutro-texto: #3b4a4e;              --cg-neutro-borda: #8a9a9e;
}

/* --- Tabela que rola de lado: o texto só para leitor de tela (.visually-hidden, absoluto) fica
   preso nela; sem a âncora, ele escapa e a página ganha rolagem lateral no celular. --- */
.table-responsive {
    position: relative;
}

/* --- Cabeçalho de página --- */
.cg-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.cg-cabecalho-titulo {
    font-size: 1.6rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.cg-cabecalho-titulo .fa-solid {
    color: var(--marca-teal-forte);
}

.cg-cabecalho-subtitulo {
    color: var(--marca-petroleo-suave);
    margin: .35rem 0 0;
    max-width: 70ch;
}

.cg-cabecalho-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* --- Mensagens --- */
.cg-mensagens {
    margin: 0 0 1rem;
}

.cg-mensagens .alert {
    margin-bottom: .5rem;
}

/* --- Estado vazio --- */
.cg-vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--marca-petroleo-suave);
}

.cg-vazio-icone {
    font-size: 2rem;
    color: var(--marca-teal);
    margin-bottom: .75rem;
}

.cg-vazio-titulo {
    font-weight: 700;
    color: var(--marca-petroleo);
    margin-bottom: .25rem;
}

.cg-vazio-texto {
    margin: 0 auto .75rem;
    max-width: 52ch;
}

/* --- Selo de situação --- */
.cg-selo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--cg-neutro-borda);
    background-color: var(--cg-neutro-fundo);
    color: var(--cg-neutro-texto);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.cg-selo--pequeno { font-size: .72rem; padding: .1rem .45rem; }
.cg-selo--teal { background-color: var(--cg-teal-fundo); color: var(--cg-teal-texto); border-color: var(--cg-teal-borda); }
.cg-selo--sucesso { background-color: var(--cg-sucesso-fundo); color: var(--cg-sucesso-texto); border-color: var(--cg-sucesso-borda); }
.cg-selo--alerta { background-color: var(--cg-alerta-fundo); color: var(--cg-alerta-texto); border-color: var(--cg-alerta-borda); }
.cg-selo--perigo { background-color: var(--cg-perigo-fundo); color: var(--cg-perigo-texto); border-color: var(--cg-perigo-borda); }

/* --- Cartão de indicador: o valor encolhe com o cartão (unidade cqi), nunca quebra linha --- */
.cg-kpi {
    container-type: inline-size;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    border-left: 4px solid var(--cg-teal-borda);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .05);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.cg-kpi--sucesso { border-left-color: var(--cg-sucesso-borda); }
.cg-kpi--alerta { border-left-color: var(--cg-alerta-borda); }
.cg-kpi--perigo { border-left-color: var(--cg-perigo-borda); }
.cg-kpi--neutro { border-left-color: var(--cg-neutro-borda); }

.cg-kpi-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.cg-kpi-rotulo {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--marca-petroleo-suave);
    margin: 0;
    line-height: 1.35;
}

.cg-kpi-icone {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cg-teal-fundo);
    color: var(--marca-teal-escuro);
}

.cg-kpi--sucesso .cg-kpi-icone { background-color: var(--cg-sucesso-fundo); color: var(--cg-sucesso-texto); }
.cg-kpi--alerta .cg-kpi-icone { background-color: var(--cg-alerta-fundo); color: var(--cg-alerta-texto); }
.cg-kpi--perigo .cg-kpi-icone { background-color: var(--cg-perigo-fundo); color: var(--cg-perigo-texto); }
.cg-kpi--neutro .cg-kpi-icone { background-color: var(--cg-neutro-fundo); color: var(--cg-neutro-texto); }

.cg-kpi-valor {
    font-size: clamp(1.05rem, 10.5cqi, 1.75rem);
    font-weight: 700;
    color: var(--marca-petroleo);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    margin: .1rem 0 0;
    line-height: 1.2;
}

.cg-kpi-valor--restrito {
    font-size: 1.05rem;
    color: var(--marca-petroleo-suave);
}

.cg-kpi-legenda {
    font-size: .85rem;
    color: var(--marca-petroleo-suave);
    margin: 0;
}

.cg-kpi-atualizado {
    font-size: .75rem;
    color: var(--marca-petroleo-suave);
    margin: auto 0 0;
    padding-top: .35rem;
}

/* --- Gráfico acessível --- */
.cg-grafico {
    margin: 0;
}

.cg-grafico-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.cg-grafico-titulo {
    font-weight: 700;
    color: var(--marca-petroleo);
}

.cg-grafico-area {
    position: relative;
}

.cg-grafico td {
    font-variant-numeric: tabular-nums;
}

/* --- Tabela ordenável: o cabeçalho é um botão (teclado e leitor de tela) --- */
.cg-ordenar {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

.cg-ordenar .fa-sort { opacity: .45; }
th[aria-sort="ascending"] .cg-ordenar .fa-sort::before { content: "\f0de"; }
th[aria-sort="descending"] .cg-ordenar .fa-sort::before { content: "\f0dd"; }
th[aria-sort] .cg-ordenar .fa-sort { opacity: 1; }

/* --- Janela de confirmação --- */
.cg-confirmar-quantidade {
    font-weight: 700;
    color: var(--marca-petroleo);
    margin-bottom: .5rem;
}

/* ==========================================================================
 * Alto contraste
 * ========================================================================== */
body.high-contrast-mode .cg-cabecalho-titulo .fa-solid,
body.high-contrast-mode .cg-vazio-icone { color: #ff0; }
body.high-contrast-mode .cg-cabecalho-subtitulo,
body.high-contrast-mode .cg-vazio,
body.high-contrast-mode .cg-kpi-rotulo,
body.high-contrast-mode .cg-kpi-legenda,
body.high-contrast-mode .cg-kpi-atualizado,
body.high-contrast-mode .cg-kpi-valor--restrito { color: #e6e6e6; }
body.high-contrast-mode .cg-vazio-titulo,
body.high-contrast-mode .cg-kpi-valor,
body.high-contrast-mode .cg-grafico-titulo,
body.high-contrast-mode .cg-confirmar-quantidade { color: #fff; }

body.high-contrast-mode .cg-selo { background-color: #000; color: #fff; border-width: 2px; }
body.high-contrast-mode .cg-selo--teal { border-color: #6edff6; }
body.high-contrast-mode .cg-selo--sucesso { border-color: #75b798; }
body.high-contrast-mode .cg-selo--alerta { border-color: #ffda6a; }
body.high-contrast-mode .cg-selo--perigo { border-color: #ea868f; }
body.high-contrast-mode .cg-selo--neutro { border-color: #fff; }

body.high-contrast-mode .cg-kpi {
    background-color: #000;
    border: 2px solid #ff0;
    border-left-width: 6px;
    box-shadow: none;
}

body.high-contrast-mode .cg-kpi-icone {
    background-color: #000;
    color: #ff0;
    border: 1px solid #ff0;
}