/**
 * Estilos customizados do projeto (constituicao, secao 8).
 *
 * REGRA: nunca sobrescrever classes do Bootstrap diretamente.
 * Classes proprias usam o prefixo "eurosistem-", compostas com as do Bootstrap
 * quando customizam um componente.
 *
 * IDENTIDADE PROVISORIA (ADR-0022; cores do ADR-0023). A marca ainda nao tem
 * logo nem cores definitivas; a cor de estrutura e a escolhida pelo dono, e o
 * resto e uma proposta propria do Eurosistem. Todas as cores e a fonte moram nos
 * tokens do bloco 1, e so neles: quando a marca chegar, troca-se o bloco 1 e o
 * resto acompanha. Nenhuma cor fica solta nas regras de baixo.
 *
 * O QUE ESTE ARQUIVO MEXE NO BOOTSTRAP, E POR QUE (secao 8, "ajuste de tema"):
 * so variaveis --bs-* DENTRO de .eurosistem-painel-corpo (fonte, cor de texto
 * e de link). Nao altera o comportamento de componente nenhum, nao vale fora
 * do painel, e nenhuma classe do Bootstrap e redefinida.
 */

/* ─── 0. Fonte local (ADR-0022): sem CDN, a CSP so aceita font-src 'self' ─── */
/* Atkinson Hyperlegible, Braille Institute, licenca SIL OFL 1.1
   (public/assets/fonts/LICENCA-OFL.txt). Subconjunto latin: cobre o portugues. */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}

/* ─── 1. Tokens: a identidade inteira mora aqui ────────────────────────────── */
:root {
    /* Cor: o nome diz o PAPEL. A estrutura e o #1D3730 escolhido pelo dono, e o
       resto deriva dela (ADR-0023, que substitui a tabela de cores do ADR-0022).
       Contraste conferido sobre o fundo em que cada uma e usada (AA: 4,5:1). */
    --eurosistem-estrutura:      #1d3730;  /* verde-escuro do dono: menu e topo */
    --eurosistem-estrutura-2:    #2d4d45;  /* hover e divisorias sobre a estrutura */
    --eurosistem-sobre-estrutura:#f3f7f5;  /* texto sobre a estrutura (11,8:1) */
    --eurosistem-sobre-estrutura-2: #c4d4ce; /* item nao ativo sobre a estrutura (8,3:1) */
    --eurosistem-acao:           #0f766e;  /* verde-azulado: link, botao, item ativo (5,5:1 no branco) */
    --eurosistem-acao-2:         #115e59;  /* pressionado, e texto sobre o suave (6,3:1) */
    --eurosistem-acao-suave:     #d5efea;
    --eurosistem-dinheiro:       #3f6212;  /* verde-folha, longe do verde-azulado: ganho, cliente ativo (7,4:1; 6,4:1 no selo) */
    --eurosistem-dinheiro-suave: #ecf7d9;
    --eurosistem-atencao:        #b45309;  /* ambar: o que pede acao (5,0:1 no branco; 4,5:1 no selo) */
    --eurosistem-atencao-suave:  #fef3c7;
    --eurosistem-fundo:          #f1f5f3;  /* neutro que puxa de leve para a estrutura */
    --eurosistem-superficie:     #ffffff;
    --eurosistem-linha:          #dde6e2;
    --eurosistem-texto:          #13211d;  /* 16,6:1 no branco */
    --eurosistem-texto-2:        #4a5b56;  /* texto de apoio (7,2:1 no branco; 6,5:1 no fundo) */

    /* Faixa de dado de exemplo: listras cinza neutras, de proposito fora da
       paleta, como tapume de obra. Nao se confunde com o verde-azulado nem com a atencao. */
    --eurosistem-exemplo-listra-1: #eceef1;
    --eurosistem-exemplo-listra-2: #e1e4e9;
    --eurosistem-exemplo-texto:    #111827;

    /* Tipo: uma familia so, escala de terca maior (1,25) sobre 16px */
    --eurosistem-fonte:   'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --eurosistem-tipo-1:  0.875rem;  /* 14 */
    --eurosistem-tipo-2:  1rem;      /* 16 */
    --eurosistem-tipo-3:  1.25rem;   /* 20 */
    --eurosistem-tipo-4:  1.5625rem; /* 25 */
    --eurosistem-tipo-5:  1.953rem;  /* 31 */
    --eurosistem-tipo-6:  2.441rem;  /* 39 */

    /* Forma: o raio segue a hierarquia - painel maior, etiqueta menor */
    --eurosistem-raio-painel:   0.875rem;
    --eurosistem-raio-controle: 0.5rem;
    --eurosistem-raio-etiqueta: 999px;
    --eurosistem-largura-menu:  15.5rem;
    --eurosistem-largura-leitura: 72rem;
    --eurosistem-altura-barra:  4.25rem;   /* barra de baixo do celular */
    --eurosistem-espaco-secao:  3rem;
}

/* ─── 2. Pagina provisoria da raiz ─────────────────────────────────────────── */
.eurosistem-construcao {
    padding-block: var(--eurosistem-espaco-secao);
}

/* ─── 3. Painel: base ──────────────────────────────────────────────────────── */
.eurosistem-painel-corpo {
    /* Variaveis do Bootstrap SO dentro do painel (ver o cabecalho) */
    --bs-body-font-family: var(--eurosistem-fonte);
    --bs-body-color: var(--eurosistem-texto);
    --bs-link-color-rgb: 15, 118, 110;       /* = --eurosistem-acao */
    --bs-link-hover-color-rgb: 17, 94, 89;   /* = --eurosistem-acao-2 */
    --bs-border-color: var(--eurosistem-linha);

    font-family: var(--eurosistem-fonte);
    font-size: var(--eurosistem-tipo-2);
    line-height: 1.5;
    background: var(--eurosistem-fundo);
    color: var(--eurosistem-texto);
    min-height: 100vh;
    /* Espaco para a barra fixa de baixo nao cobrir o fim da pagina no celular */
    padding-bottom: calc(var(--eurosistem-altura-barra) + env(safe-area-inset-bottom, 0px));
}

.eurosistem-painel-corpo :focus-visible {
    outline: 3px solid var(--eurosistem-acao);
    outline-offset: 2px;
}

.eurosistem-numero {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.eurosistem-apoio {
    color: var(--eurosistem-texto-2);
}

/* ─── 4. Faixa de exemplo, topo e menu ─────────────────────────────────────── */
.eurosistem-faixa-exemplo {
    background: repeating-linear-gradient(
        -45deg,
        var(--eurosistem-exemplo-listra-1) 0 12px,
        var(--eurosistem-exemplo-listra-2) 12px 24px
    );
    color: var(--eurosistem-exemplo-texto);
    font-size: var(--eurosistem-tipo-1);
    font-weight: 700;
    padding: 0.45rem 1rem;
}

.eurosistem-topo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--eurosistem-estrutura);
    color: var(--eurosistem-sobre-estrutura);
    padding: 0.75rem 1rem;
}

.eurosistem-marca {
    color: var(--eurosistem-sobre-estrutura);
    font-weight: 700;
    font-size: var(--eurosistem-tipo-3);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.eurosistem-marca:hover,
.eurosistem-marca:focus-visible {
    color: var(--eurosistem-sobre-estrutura);
}

.eurosistem-topo-unidade {
    color: var(--eurosistem-sobre-estrutura-2);
    font-size: var(--eurosistem-tipo-1);
    margin-left: auto;
    min-width: 0;
}

.eurosistem-menu {
    background: var(--eurosistem-estrutura);
    color: var(--eurosistem-sobre-estrutura);
}

.eurosistem-menu .eurosistem-menu-link {
    color: var(--eurosistem-sobre-estrutura-2);
    border-radius: var(--eurosistem-raio-controle);
    padding: 0.6rem 0.85rem;
}

.eurosistem-menu .eurosistem-menu-link:hover {
    background: var(--eurosistem-estrutura-2);
    color: var(--eurosistem-sobre-estrutura);
}

.eurosistem-menu .eurosistem-menu-link.active {
    background: var(--eurosistem-sobre-estrutura);
    color: var(--eurosistem-estrutura);
    font-weight: 700;
}

/* Dentro do menu escuro o contorno de foco e claro, para continuar visivel */
.eurosistem-menu :focus-visible,
.eurosistem-menu .eurosistem-menu-link:focus-visible {
    outline-color: var(--eurosistem-sobre-estrutura);
}

/* Corpo do menu: a lista em cima, o pe ancorado embaixo (margin-top: auto).
   O pe vem no fluxo, e nao por cima: em janela baixa ele empurra, e a coluna
   rola - nunca cobre a lista. Vale no menu lateral e no "Menu" do celular. */
.eurosistem-menu .eurosistem-menu-corpo {
    flex-grow: 1;
}

.eurosistem-menu-interno {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-height: 100%;
}

.eurosistem-marca-menu {
    padding: 0.15rem 0.85rem 0.35rem;
}

.eurosistem-menu-pe {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.eurosistem-menu-pe-titulo {
    color: var(--eurosistem-sobre-estrutura);
    font-size: var(--eurosistem-tipo-2);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.eurosistem-menu-ajuda,
.eurosistem-menu-unidade {
    color: var(--eurosistem-sobre-estrutura-2);
    font-size: var(--eurosistem-tipo-1);
    padding-inline: 0.85rem;
}

.eurosistem-menu-unidade {
    border-top: 1px solid var(--eurosistem-estrutura-2);
    padding-top: 1rem;
}

.eurosistem-menu-unidade-nome {
    color: var(--eurosistem-sobre-estrutura);
    font-size: var(--eurosistem-tipo-2);
    font-weight: 700;
}

.eurosistem-menu-pe-link {
    color: var(--eurosistem-sobre-estrutura);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.eurosistem-menu-pe-link:hover {
    color: var(--eurosistem-sobre-estrutura);
    text-decoration-thickness: 2px;
}

.eurosistem-menu-pe-link.active {
    background: var(--eurosistem-sobre-estrutura);
    color: var(--eurosistem-estrutura);
    border-radius: var(--eurosistem-raio-controle);
    padding: 0.15rem 0.5rem;
    text-decoration: none;
}

/* "Sair" desenhado e desligado: contorno discreto, sem parecer defeito */
.eurosistem-menu-sair {
    background: none;
    border: 1px solid var(--eurosistem-estrutura-2);
    border-radius: var(--eurosistem-raio-controle);
    color: var(--eurosistem-sobre-estrutura-2);
    font-family: inherit;
    font-size: var(--eurosistem-tipo-1);
    padding: 0.15rem 0.6rem;
    margin-left: auto;
}

.eurosistem-menu-sair:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Barra de baixo do celular: as quatro telas de uso diario, ao alcance do polegar */
.eurosistem-barra {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--eurosistem-superficie);
    border-top: 1px solid var(--eurosistem-linha);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: var(--eurosistem-altura-barra);
}

.eurosistem-barra-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    color: var(--eurosistem-texto-2);
    font-size: 0.75rem;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0.4rem 0.25rem;
    font-family: inherit;
}

.eurosistem-barra-item svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eurosistem-barra-item[aria-current="page"] {
    color: var(--eurosistem-acao);
    font-weight: 700;
}

.eurosistem-conteudo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem 1rem 2rem;
}

.eurosistem-conteudo-limite {
    max-width: var(--eurosistem-largura-leitura);
}

/* ─── 5. Titulos e blocos ──────────────────────────────────────────────────── */
.eurosistem-titulo {
    font-size: var(--eurosistem-tipo-5);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 0.35rem;
}

.eurosistem-subtitulo {
    font-size: var(--eurosistem-tipo-3);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

/* Painel: o bloco que carrega conteudo. Uma superficie so por secao. */
.eurosistem-bloco {
    background: var(--eurosistem-superficie);
    border-radius: var(--eurosistem-raio-painel);
    padding: 1.25rem;
}

/* Linhas com divisoria: lista dentro de um bloco, nao uma pilha de cartoes */
.eurosistem-linhas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eurosistem-linhas > li {
    padding-block: 0.8rem;
    border-top: 1px solid var(--eurosistem-linha);
}

.eurosistem-linhas > li:first-child {
    border-top: 0;
    padding-top: 0;
}

.eurosistem-linhas > li:last-child {
    padding-bottom: 0;
}

/* Item escondido pelo filtro de lista (main.js). Precisa vencer o .d-flex do
   Bootstrap, que tambem e !important e vem depois do [hidden] do reboot. */
.eurosistem-painel-corpo [data-filtro-item][hidden] {
    display: none !important;
}

/* Etiquetas de estado: a cor diz o que fazer, o texto diz o que e */
.eurosistem-etiqueta {
    display: inline-block;
    border-radius: var(--eurosistem-raio-etiqueta);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.eurosistem-etiqueta-dinheiro { background: var(--eurosistem-dinheiro-suave); color: var(--eurosistem-dinheiro); }
.eurosistem-etiqueta-atencao  { background: var(--eurosistem-atencao-suave);  color: var(--eurosistem-atencao); }
/* No selo de acao o texto e o tom escuro: mais folga de contraste que o de acao sobre o suave (4,5:1) */
.eurosistem-etiqueta-acao     { background: var(--eurosistem-acao-suave);     color: var(--eurosistem-acao-2); }
.eurosistem-etiqueta-neutra   { background: var(--eurosistem-fundo);          color: var(--eurosistem-texto-2); }

/* Botao da casa, composto com .btn (secao 8, regra 3) */
.btn.eurosistem-botao {
    --bs-btn-bg: var(--eurosistem-acao);
    --bs-btn-border-color: var(--eurosistem-acao);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--eurosistem-acao-2);
    --bs-btn-hover-border-color: var(--eurosistem-acao-2);
    --bs-btn-hover-color: #fff;
    --bs-btn-disabled-bg: var(--eurosistem-acao);
    --bs-btn-disabled-border-color: var(--eurosistem-acao);
    --bs-btn-disabled-color: #fff;
    --bs-btn-border-radius: var(--eurosistem-raio-controle);
    font-weight: 700;
}

.btn.eurosistem-botao-contorno {
    --bs-btn-color: var(--eurosistem-acao);
    --bs-btn-border-color: var(--eurosistem-acao);
    --bs-btn-hover-bg: var(--eurosistem-acao-suave);
    --bs-btn-hover-color: var(--eurosistem-acao-2);
    --bs-btn-hover-border-color: var(--eurosistem-acao);
    --bs-btn-disabled-color: var(--eurosistem-acao);
    --bs-btn-disabled-border-color: var(--eurosistem-acao);
    --bs-btn-border-radius: var(--eurosistem-raio-controle);
    font-weight: 700;
}

/* Explica, ao lado do botao desligado, por que ele esta desligado */
.eurosistem-nota-desligado {
    color: var(--eurosistem-texto-2);
    font-size: var(--eurosistem-tipo-1);
}

/* ─── 6. Inicio: a manchete do mes e o que fazer agora ─────────────────────── */
/* A unica ousadia do painel: o mes contado em frase, em tipo grande. */
.eurosistem-manchete {
    font-size: var(--eurosistem-tipo-5);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 22ch;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.eurosistem-afazer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--eurosistem-texto);
    text-decoration: none;
    padding-block: 0.25rem;
}

.eurosistem-afazer:hover .eurosistem-afazer-texto {
    text-decoration: underline;
}

.eurosistem-afazer-marca {
    flex: 0 0 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--eurosistem-atencao);
}

.eurosistem-afazer-texto {
    font-weight: 700;
}

/* A regua: os quatro numeros do mes numa faixa so, sem quatro cartoes */
.eurosistem-regua {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--eurosistem-linha);
    border-radius: var(--eurosistem-raio-painel);
    overflow: hidden;
    margin: 0;
}

.eurosistem-regua > div {
    background: var(--eurosistem-superficie);
    padding: 0.9rem 1rem;
}

.eurosistem-regua dt {
    color: var(--eurosistem-texto-2);
    font-size: var(--eurosistem-tipo-1);
    font-weight: 400;
}

.eurosistem-regua dd {
    font-size: var(--eurosistem-tipo-4);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* ─── 7. Graficos e mapa em SVG montado no servidor (cores dos tokens) ─────── */
.eurosistem-grafico {
    display: block;
    width: 100%;
    max-width: 36rem;   /* o texto do SVG cresce com a largura: acima disso fica gigante */
    height: auto;
}

.eurosistem-grafico-barra       { fill: var(--eurosistem-acao-suave); stroke: var(--eurosistem-acao); stroke-width: 1; }
.eurosistem-grafico-barra-atual { fill: var(--eurosistem-acao); }
.eurosistem-grafico-texto       { fill: var(--eurosistem-texto-2); font-family: var(--eurosistem-fonte); font-size: 11px; }
.eurosistem-grafico-eixo        { stroke: var(--eurosistem-linha); }

.eurosistem-mapa-regiao { fill: var(--eurosistem-acao-suave); stroke: var(--eurosistem-acao); stroke-width: 2; }
.eurosistem-mapa-divisa { fill: none; stroke: var(--eurosistem-acao); stroke-width: 1; stroke-dasharray: 4 4; }
.eurosistem-mapa-rotulo { fill: var(--eurosistem-estrutura); font-family: var(--eurosistem-fonte); font-size: 18px; font-weight: 700; }

/* ─── 8. Conversa do chamado ───────────────────────────────────────────────── */
.eurosistem-mensagem {
    border-radius: var(--eurosistem-raio-painel);
    max-width: 38rem;
    padding: 0.85rem 1rem;
}

.eurosistem-mensagem-unidade {
    background: var(--eurosistem-acao-suave);
    margin-left: auto;
}

.eurosistem-mensagem-franqueadora {
    background: var(--eurosistem-fundo);
}

.eurosistem-mensagem-autor {
    font-size: var(--eurosistem-tipo-1);
    font-weight: 700;
}

/* ─── 9. Media queries (mobile-first: so para cima) ────────────────────────── */
@media (min-width: 576px) {
    .eurosistem-regua {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .eurosistem-construcao {
        padding-block: calc(var(--eurosistem-espaco-secao) * 2);
    }

    .eurosistem-manchete {
        font-size: var(--eurosistem-tipo-6);
    }
}

/* lg: o offcanvas vira o menu lateral fixo e a barra de baixo some */
@media (min-width: 992px) {
    .eurosistem-painel-corpo {
        padding-bottom: 0;
    }

    .eurosistem-barra {
        display: none;
    }

    /* flex-start, e nao stretch: e o que deixa a coluna do menu ficar presa (sticky) */
    .eurosistem-painel {
        display: flex;
        align-items: flex-start;
    }

    /* O menu fica preso a tela: altura da janela, rolagem propria se um dia
       nao couber, e o pe sempre a vista. A coluna leva o fundo, porque o
       offcanvas-lg zera o fundo do aside no lg. */
    .eurosistem-menu-coluna {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        background: var(--eurosistem-estrutura);
        width: var(--eurosistem-largura-menu);
        flex: 0 0 var(--eurosistem-largura-menu);
        padding: 1.25rem 0.85rem;
    }

    .eurosistem-menu-coluna .eurosistem-menu {
        min-height: 100%;
        display: flex;
    }

    .eurosistem-principal {
        flex: 1 1 auto;
        min-width: 0;
    }

    .eurosistem-conteudo {
        padding: 2rem 2.5rem 3rem;
    }

    .eurosistem-regua {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eurosistem-painel-corpo * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}