/* ============================================================
   INFECZERO
   Painel de indicadores — higienização das mãos

   Identidade alinhada ao Manual de Marca Prefeitura Rio 2025:
   - azul institucional #13335A (uso em telas, sistema hexadecimal)
   - série 1 dos gráficos #0056A7 (azul dos portais da Prefeitura;
     contraste 6:1 sobre branco, croma validado)
   - série 2 #42B9EB (azul-claro oficial do degradê; abaixo de 3:1
     sobre branco, por isso sempre acompanhado de rótulo direto e
     tabela espelho)
   ============================================================ */


/* ============================================================
   VARIÁVEIS
   ============================================================ */

:root {

    --bg-app: #E6EEF4;

    --surface: #FFFFFF;
    --surface-secondary: #F7FAFC;

    --primary-navy: #13335A;

    --serie-1: #0056A7;
    --serie-2: #42B9EB;

    /* Níveis de alerta dos indicadores (semântica clínica):
       crítico < 60% · atenção 60–79% · adequado ≥ 80% (azul).
       Sempre acompanhados de rótulo textual — nunca cor sozinha.
       Tons quentes derivados do degradê oficial da marca Prefeitura
       Rio 2025 (#F06949, "céu vibrante do Rio"), escurecidos para
       garantir contraste sobre o branco. */
    --nivel-atencao: #D97706;
    --nivel-atencao-texto: #92400E;
    --nivel-atencao-fundo: #FDF1D7;
    --nivel-atencao-borda: #F2D9A0;

    --nivel-critico: #C23A20;
    --nivel-critico-texto: #9E2E18;
    --nivel-critico-fundo: #FCEAE4;
    --nivel-critico-borda: #F0BFB0;

    --text-main: #1E293B;
    --text-muted: #64748B;

    --border-color: #B8C9D8;

    --grid-line: #E4EBF2;
    --baseline: #C4D2DE;

    --focus: #0F62FE;

    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 16px;

    --shadow-small:
        0 1px 3px rgba(15, 23, 42, 0.08);

    --shadow-hover:
        0 8px 20px rgba(15, 23, 42, 0.12);
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    background: var(--bg-app);

    color: var(--text-main);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;
}


button,
a,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


button:focus-visible,
a:focus-visible,
select:focus-visible,
.bar-row:focus-visible {

    outline: 3px solid var(--focus);
    outline-offset: 3px;
}


.icon {

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    flex-shrink: 0;
}


/* ============================================================
   CABEÇALHO
   ============================================================ */

.app-header {

    position: sticky;

    top: 0;

    z-index: 100;

    background: var(--primary-navy);

    color: #FFFFFF;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.18);
}


.header-content {

    width: min(1100px, calc(100% - 32px));

    min-height: 76px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 24px;
}


.brand-area {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.back-link {

    min-width: 44px;
    min-height: 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: var(--radius-medium);

    color: #FFFFFF;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.back-link:hover {

    background: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.55);
}


.app-icon {

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 0.04em;
}


.brand-text h1 {

    margin: 0;

    font-size: 1.35rem;

    line-height: 1.2;

    letter-spacing: 0.02em;
}


.brand-text p {

    margin: 3px 0 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.78rem;

    line-height: 1.3;
}


/* ============================================================
   CONTEÚDO
   ============================================================ */

.main-content {

    width: min(1100px, calc(100% - 32px));

    margin: 0 auto;

    padding: 24px 0 56px;
}


.main-content > * {

    margin-bottom: 20px;
}


.prototype-notice {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding: 12px 14px;

    background: #F8FAFC;

    border: 1px solid #D8E1E8;

    border-radius: var(--radius-medium);

    color: var(--text-muted);

    font-size: 0.82rem;

    line-height: 1.45;
}


.prototype-notice .icon {

    width: 17px;
    height: 17px;

    margin-top: 1px;

    color: var(--serie-1);
}


/* ============================================================
   FILTROS
   ============================================================ */

.filters-section {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.filter-field {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


/* O atributo hidden precisa vencer o display:flex acima. */

.filter-field[hidden] {

    display: none;
}


.filter-field label {

    /* #51607A sobre o fundo #E6EEF4 = 5,42:1 (AA); o cinza-mudo
       padrão ficava em 4,06:1 neste corpo pequeno. */
    color: #51607A;

    font-size: 0.76rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.filter-field select,
.filter-field input[type="date"] {

    min-width: 180px;

    min-height: 44px;

    padding: 8px 12px;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-medium);

    background: var(--surface);

    color: var(--text-main);

    font: inherit;
}


.periodo-personalizado input[type="date"] {

    min-width: 150px;
}


/* ============================================================
   NÚMERO-HERÓI + TILES
   ============================================================ */

.kpi-section {

    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);

    gap: 16px;
}


.hero-card,
.stat-tile {

    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-small);
}


.kpi-label {

    margin: 0;

    color: var(--text-muted);

    font-size: 0.82rem;

    font-weight: 600;
}


.hero-value {

    margin: 6px 0 2px;

    color: var(--primary-navy);

    font-size: 3.4rem;

    font-weight: 700;

    line-height: 1;
}


.hero-unit {

    margin-left: 2px;

    font-size: 1.6rem;

    font-weight: 600;

    color: var(--text-muted);
}


.kpi-detail {

    margin: 4px 0 0;

    color: var(--text-muted);

    font-size: 0.8rem;
}


.tiles-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}


.tile-value {

    margin: 6px 0 2px;

    color: var(--primary-navy);

    font-size: 1.9rem;

    font-weight: 700;

    line-height: 1.1;
}


.tile-unit {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--text-muted);
}


/* ============================================================
   CARTÕES DE GRÁFICO
   ============================================================ */

.chart-card {

    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-small);
}


.charts-row {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    /* Cada cartão com a própria altura (a lista de setores dos dois
       blocos tem tamanhos diferentes). */
    align-items: start;
}


.chart-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}


.chart-head h2 {

    margin: 0;

    color: var(--primary-navy);

    font-size: 1.05rem;

    line-height: 1.3;
}


.chart-sub {

    margin: 3px 0 0;

    color: var(--text-muted);

    font-size: 0.78rem;
}


.table-toggle {

    flex-shrink: 0;

    min-height: 36px;

    padding: 6px 12px;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-medium);

    background: var(--surface);

    color: var(--serie-1);

    font-size: 0.8rem;

    font-weight: 600;
}


.table-toggle:hover {

    border-color: var(--serie-1);
}


/* ============================================================
   BARRAS
   ============================================================ */

.chart {

    position: relative;
}


/* Trilha de linhas de grade verticais (0 / 25 / 50 / 75 / 100%),
   atrás das barras, alinhada à coluna da barra. */

.grid-track {

    position: absolute;

    top: 0;
    bottom: 0;

    pointer-events: none;
}


.grid-track span {

    position: absolute;

    top: 0;
    bottom: 0;

    width: 1px;

    background: var(--grid-line);
}


.grid-track span:first-child {

    background: var(--baseline);
}


.bar-row {

    position: relative;

    display: grid;

    /* Coluna de rótulos fluida: acompanha a largura do cartão sem
       roubar espaço demais das barras em telas estreitas. */
    grid-template-columns: clamp(112px, 30%, 172px) minmax(0, 1fr);

    align-items: center;

    gap: 10px;

    min-height: 34px;

    border-radius: var(--radius-small);
}


.bar-row:hover {

    background: var(--surface-secondary);
}


.bar-label {

    color: var(--text-main);

    font-size: 0.8rem;

    line-height: 1.25;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;
}


.bar-area {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    /* Calha reservada para o rótulo, que fica SEMPRE fora da barra —
       até uma barra de 100% deixa o valor visível aqui. */
    padding-right: 72px;
}


/* Barra: no máximo 18px de espessura, ponta de dado arredondada
   (4px) e base reta sobre a linha de zero. */

.bar-fill {

    position: relative;

    height: 18px;

    background: var(--serie-1);

    border-radius: 0 4px 4px 0;

    min-width: 2px;
}


/* Amostra pequena: passo mais claro do mesmo azul. */

.bar-row.is-small .bar-fill {

    background: #8CB3D7;
}


/* ============================================================
   NÍVEIS DE ALERTA (indicador ruim = vermelho; transição = âmbar)
   ============================================================ */

.bar-fill.nivel-atencao {

    background: var(--nivel-atencao);
}


.bar-fill.nivel-critico {

    background: var(--nivel-critico);
}


/* Rótulo textual que acompanha a cor (nunca cor sozinha). */

.nivel-flag {

    display: inline-block;

    margin-left: 6px;

    padding: 1px 7px;

    border-radius: 5px;

    font-size: 0.66rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.03em;

    vertical-align: middle;
}


.nivel-flag.atencao {

    background: var(--nivel-atencao-fundo);

    border: 1px solid var(--nivel-atencao-borda);

    color: var(--nivel-atencao-texto);
}


.nivel-flag.critico {

    background: var(--nivel-critico-fundo);

    border: 1px solid var(--nivel-critico-borda);

    color: var(--nivel-critico-texto);
}


.nivel-texto-atencao {

    color: var(--nivel-atencao-texto) !important;
}


.nivel-texto-critico {

    color: var(--nivel-critico-texto) !important;
}


/* O rótulo é ancorado na ponta da barra, fora do fluxo flex — assim
   nunca encolhe a barra e avança pela calha reservada à direita. */

.bar-value {

    position: absolute;

    left: calc(100% + 7px);

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-main);

    font-size: 0.8rem;

    font-weight: 650;

    white-space: nowrap;
}


.bar-value .n-flag {

    margin-left: 5px;

    color: var(--text-muted);

    font-weight: 600;

    font-size: 0.72rem;
}




/* ============================================================
   PAINÉIS DE BLOCO (Emergência · Hospital)
   ============================================================ */

.block-kpi {

    margin: 0 0 12px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--grid-line);

    color: var(--text-muted);

    font-size: 0.84rem;
}


.block-kpi strong {

    color: var(--primary-navy);

    font-size: 1.45rem;

    font-weight: 700;
}


.block-kpi:empty {

    display: none;
}


/* ============================================================
   BARRA EMPILHADA (solução)
   ============================================================ */

.stacked-legend {

    display: flex;

    gap: 16px;

    margin-bottom: 10px;
}


.legend-item {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--text-muted);

    font-size: 0.8rem;

    font-weight: 600;
}


.swatch {

    width: 12px;
    height: 12px;

    border-radius: 3px;
}


.swatch-alcool {

    background: var(--serie-1);
}


.swatch-sabonete {

    background: var(--serie-2);
}


.stacked-bar {

    display: flex;

    height: 24px;

    border-radius: 4px;

    overflow: hidden;
}


/* O espaçador entre segmentos é o próprio fundo do cartão (2px),
   nunca um contorno desenhado. */

.stacked-seg {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    font-size: 0.78rem;

    font-weight: 700;
}


.stacked-seg + .stacked-seg {

    margin-left: 2px;
}


.seg-alcool {

    background: var(--serie-1);

    color: #FFFFFF;
}


.seg-sabonete {

    background: var(--serie-2);

    color: var(--text-main);
}


.stacked-note {

    margin: 8px 0 0;

    color: var(--text-muted);

    font-size: 0.78rem;
}


/* ============================================================
   TABELAS ESPELHO
   ============================================================ */

.mirror-table {

    margin-top: 12px;

    overflow-x: auto;
}


.mirror-table table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.82rem;
}


.mirror-table th,
.mirror-table td {

    padding: 7px 10px;

    border-bottom: 1px solid var(--grid-line);

    text-align: left;
}


.mirror-table td.num,
.mirror-table th.num {

    text-align: right;

    font-variant-numeric: tabular-nums;
}


.mirror-table th {

    color: var(--text-muted);

    font-size: 0.74rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


/* ============================================================
   NOTA METODOLÓGICA
   ============================================================ */

.method-note {

    padding: 16px 20px;

    background: var(--surface-secondary);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-large);
}


.method-note h2 {

    margin: 0 0 8px;

    color: var(--primary-navy);

    font-size: 0.92rem;
}


.method-note ul {

    margin: 0;

    padding-left: 18px;

    color: var(--text-muted);

    font-size: 0.82rem;
}


.method-note li + li {

    margin-top: 4px;
}


/* ============================================================
   TOOLTIP
   ============================================================ */

.tooltip {

    position: fixed;

    z-index: 200;

    max-width: 260px;

    padding: 9px 12px;

    background: var(--text-main);

    border-radius: var(--radius-medium);

    color: #FFFFFF;

    font-size: 0.78rem;

    line-height: 1.4;

    pointer-events: none;

    box-shadow: var(--shadow-hover);
}


/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media (max-width: 860px) {

    .kpi-section {

        grid-template-columns: 1fr;
    }


    .charts-row {

        grid-template-columns: 1fr;
    }
}


@media (max-width: 560px) {

    .header-content {

        min-height: 68px;

        width: min(100% - 24px, 1100px);

        gap: 12px;
    }


    .main-content {

        width: min(100% - 24px, 1100px);
    }


    .tiles-grid {

        grid-template-columns: 1fr;
    }


    .hero-value {

        font-size: 2.7rem;
    }


    .chart-head {

        flex-direction: column;
    }
}


/* ============================================================
   REDUÇÃO DE MOVIMENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;
    }
}