/* ==========================================================================
   GCMFluxo — Design System
   Guarda Civil Municipal de Praia Grande

   Tokens da identidade institucional. A paleta foi extraída da logo oficial:
   dourado predominante (hsl 51 67% 49%) sobre neutros escuros.

   O dourado é cor de DESTAQUE, não de base. Dourado puro sobre branco tem
   contraste de ~1.9:1 e reprova em qualquer critério de acessibilidade
   (RNF07 exige 4.5:1), então ele aparece como preenchimento, borda e marca —
   nunca como texto pequeno sobre fundo claro.
   ========================================================================== */

:root {
    /* -- Marca ----------------------------------------------------------- */
    --marca-h: 51;
    --marca-s: 67%;

    --dourado:            hsl(var(--marca-h) var(--marca-s) 49%);
    --dourado-escuro:     hsl(var(--marca-h) 78% 28%);   /* legível sobre claro */
    --dourado-suave:      hsl(var(--marca-h) 70% 94%);

    /* Azul institucional — mesma família do GCM Ensino, para os dois
       sistemas se reconhecerem como do mesmo órgão. */
    --navy-900:           hsl(222 62% 15%);
    --navy-800:           hsl(222 60% 20%);
    --navy-700:           hsl(222 56% 26%);
    --navy-600:           hsl(222 52% 34%);
    --navy-500:           hsl(222 46% 46%);

    /* Aliases mantidos: os componentes já escritos continuam válidos. */
    --grafite-900:        var(--navy-900);
    --grafite-800:        var(--navy-800);
    --grafite-700:        var(--navy-700);
    --grafite-500:        hsl(215 16% 46%);

    /* -- Superfícies ----------------------------------------------------- */
    --fundo:              hsl(215 25% 97%);
    --superficie:         hsl(0 0% 100%);
    --superficie-2:       hsl(215 25% 98%);
    --borda:              hsl(215 18% 88%);
    --borda-forte:        hsl(215 16% 76%);

    /* Fundo da coluna do quadro. Token próprio porque ele precisa ser mais
       escuro que --superficie-2: a coluna tem de recuar visualmente para o
       cartão branco saltar. Com o mesmo tom dos demais painéis, o quadro
       vira uma mancha só e some a noção de coluna. */
    --quadro-fundo:       hsl(215 20% 93%);

    /* Etiqueta de equipe no cartão. Cada classe fixa o MATIZ; a luminosidade e
       a saturação são tokens porque precisam virar no tema escuro — texto de
       11px a 38% de luz some sobre cartão escuro. Assim a paleta inteira
       acompanha o tema sem oito redefinições por bloco. */
    --cat-s:              62%;
    --cat-l:              38%;

    /* -- Texto ----------------------------------------------------------- */
    --texto:              hsl(215 32% 14%);
    --texto-suave:        hsl(215 14% 40%);
    --texto-tenue:        hsl(215 12% 54%);
    --texto-invertido:    hsl(0 0% 100%);

    /* -- Semânticas (estados de atividade) -------------------------------- */
    --info:               hsl(211 76% 42%);
    --info-fundo:         hsl(211 90% 96%);
    --sucesso:            hsl(154 62% 28%);
    --sucesso-fundo:      hsl(154 60% 95%);
    --alerta:             hsl(35 88% 34%);
    --alerta-fundo:       hsl(38 92% 95%);
    --perigo:             hsl(0 66% 42%);
    --perigo-fundo:       hsl(0 80% 96%);

    /* -- Tipografia ------------------------------------------------------- */
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;

    --txt-xs:   0.75rem;
    --txt-sm:   0.8125rem;
    --txt-base: 0.9375rem;
    --txt-lg:   1.0625rem;
    --txt-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --txt-2xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

    /* -- Espaçamento (escala de 4px) --------------------------------------- */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;

    /* -- Formas ------------------------------------------------------------ */
    --raio-sm: 4px;  --raio: 8px;  --raio-lg: 14px;  --raio-total: 999px;

    --sombra-sm: 0 1px 2px hsl(215 30% 12% / 0.06);
    --sombra:    0 1px 3px hsl(215 30% 12% / 0.08), 0 4px 12px hsl(215 30% 12% / 0.05);
    --sombra-lg: 0 4px 12px hsl(215 30% 12% / 0.10), 0 16px 40px hsl(215 30% 12% / 0.10);

    --transicao: 140ms cubic-bezier(0.4, 0, 0.2, 1);

    color-scheme: light;
}

/* Tema escuro: redefine SOMENTE os tokens. Nenhum componente sabe que ele existe. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --fundo:            hsl(215 32% 9%);
        --superficie:       hsl(215 28% 13%);
        --superficie-2:     hsl(215 26% 16%);
        --borda:            hsl(215 20% 22%);
        --borda-forte:      hsl(215 18% 32%);
        --quadro-fundo:     hsl(215 30% 11%);
        --cat-s:            58%;
        --cat-l:            72%;

        --texto:            hsl(215 20% 94%);
        --texto-suave:      hsl(215 14% 72%);
        --texto-tenue:      hsl(215 12% 58%);

        --dourado-escuro:   hsl(var(--marca-h) 72% 62%);
        --dourado-suave:    hsl(var(--marca-h) 40% 18%);

        --info: hsl(211 84% 66%);      --info-fundo:    hsl(211 60% 17%);
        --sucesso: hsl(154 56% 58%);   --sucesso-fundo: hsl(154 45% 14%);
        --alerta: hsl(38 88% 62%);     --alerta-fundo:  hsl(35 55% 16%);
        --perigo: hsl(0 78% 68%);      --perigo-fundo:  hsl(0 45% 18%);

        --sombra-sm: 0 1px 2px hsl(0 0% 0% / 0.3);
        --sombra:    0 1px 3px hsl(0 0% 0% / 0.35), 0 4px 12px hsl(0 0% 0% / 0.3);
        --sombra-lg: 0 4px 12px hsl(0 0% 0% / 0.4), 0 16px 40px hsl(0 0% 0% / 0.45);

        color-scheme: dark;
    }
}

/* Escolha explícita do usuário vence a preferência do sistema, nos dois sentidos. */
:root[data-tema="escuro"] {
    --fundo:            hsl(215 32% 9%);
    --superficie:       hsl(215 28% 13%);
    --superficie-2:     hsl(215 26% 16%);
    --borda:            hsl(215 20% 22%);
    --borda-forte:      hsl(215 18% 32%);
    --quadro-fundo:     hsl(215 30% 11%);
    --cat-s:            58%;
    --cat-l:            72%;
    --texto:            hsl(215 20% 94%);
    --texto-suave:      hsl(215 14% 72%);
    --texto-tenue:      hsl(215 12% 58%);
    --dourado-escuro:   hsl(var(--marca-h) 72% 62%);
    --dourado-suave:    hsl(var(--marca-h) 40% 18%);
    --info: hsl(211 84% 66%);      --info-fundo:    hsl(211 60% 17%);
    --sucesso: hsl(154 56% 58%);   --sucesso-fundo: hsl(154 45% 14%);
    --alerta: hsl(38 88% 62%);     --alerta-fundo:  hsl(35 55% 16%);
    --perigo: hsl(0 78% 68%);      --perigo-fundo:  hsl(0 45% 18%);
    color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--txt-base);
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e-3); line-height: 1.25; font-weight: 650; }
h1 { font-size: var(--txt-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--txt-xl);  letter-spacing: -0.01em; }
h3 { font-size: var(--txt-lg); }
p  { margin: 0 0 var(--e-4); }

a { color: var(--info); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; height: auto; }

/* Foco visível e consistente — requisito de acessibilidade, não enfeite. */
:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

.apenas-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Componentes
   ========================================================================== */

/* -- Botão -------------------------------------------------------------- */
.botao {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--e-2);
    padding: 0.625rem 1.125rem;
    min-height: 42px;                      /* alvo de toque confortável */
    font: inherit; font-weight: 600;
    color: var(--texto-invertido);
    background: var(--grafite-800);
    border: 1px solid transparent;
    border-radius: var(--raio);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transicao), transform var(--transicao),
                box-shadow var(--transicao);
}
.botao:hover  { background: var(--grafite-700); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: 0.55; cursor: not-allowed; }

/*
   Botão primário em navy, como no GCM Ensino. O dourado permanece reservado
   ao papel de acento — item ativo do menu, filete dos cartões, avatar, selo de
   sigla. Em botão de tamanho cheio ele compete com o conteúdo e cansa a vista,
   além de exigir texto escuro para passar no contraste.
*/
.botao--destaque {
    color: hsl(0 0% 100%);
    background: var(--navy-800);
    box-shadow: var(--sombra-sm);
}
.botao--destaque:hover { background: var(--navy-700); }

.botao--contorno {
    color: var(--texto);
    background: transparent;
    border-color: var(--borda-forte);
}
.botao--contorno:hover { background: var(--superficie-2); }

.botao--largura-total { width: 100%; }

/* -- Cartão -------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
}
.cartao__corpo { padding: var(--e-5); }

/* -- Formulário ---------------------------------------------------------- */
.campo { margin-bottom: var(--e-4); }

.campo__rotulo {
    display: block;
    margin-bottom: var(--e-2);
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--texto-suave);
}

.campo__entrada {
    display: block; width: 100%;
    padding: 0.625rem 0.875rem;
    min-height: 42px;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo__entrada:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px hsl(211 76% 42% / 0.16);
}
.campo__entrada[aria-invalid="true"] { border-color: var(--perigo); }
.campo__entrada::placeholder { color: var(--texto-tenue); }

.campo__ajuda { margin: var(--e-2) 0 0; font-size: var(--txt-sm); color: var(--texto-tenue); }
.campo__erro  { margin: var(--e-2) 0 0; font-size: var(--txt-sm); color: var(--perigo); font-weight: 600; }

/* -- Aviso (flash) -------------------------------------------------------- */
.aviso {
    display: flex; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    margin-bottom: var(--e-4);
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-size: var(--txt-sm);
    animation: surgir 200ms ease-out;
}
.aviso--erro    { color: var(--perigo);  background: var(--perigo-fundo);  border-color: var(--perigo); }
.aviso--sucesso { color: var(--sucesso); background: var(--sucesso-fundo); border-color: var(--sucesso); }
.aviso--atencao { color: var(--alerta);  background: var(--alerta-fundo);  border-color: var(--alerta); }
.aviso--info    { color: var(--info);    background: var(--info-fundo);    border-color: var(--info); }

/* Faixa de ESTADO, não de alerta — item arquivado, por exemplo. Tom neutro
   porque arquivar não é problema, é arrumação: pintá-la de amarelo faria a
   pessoa procurar o que deu errado. */
.aviso--neutro { color: var(--texto-suave); background: var(--superficie-2); border-color: var(--borda); }

/* O <strong> do TÍTULO é que vira bloco; o do meio da frase continua inline.
   Uma regra em 'strong' solto (0,1,1) venceria .em-linha (0,1,0) e quebraria
   a frase em duas linhas — por isso a classe própria. */
.aviso__corpo  { flex: 1 1 auto; min-width: 0; }
.aviso__titulo { display: block; margin-bottom: 2px; color: var(--texto); }
.aviso > form  { flex: 0 0 auto; align-self: center; }

@keyframes surgir {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Tela de acesso
   ========================================================================== */

/*
   Login e portal externo travam a paleta CLARA.

   As duas telas forçam um cartão branco sobre fundo navy por decisão de
   identidade. Sem travar os tokens, um visitante com o sistema em modo escuro
   receberia cartão branco com texto e bordas de tema escuro — contraste
   quebrado justamente na tela que um terceiro de fora vai usar, muitas vezes
   uma única vez e sem saber a quem recorrer.
*/
.acesso, .externo {
    color-scheme: light;

    --fundo:          hsl(215 25% 97%);
    --superficie:     hsl(0 0% 100%);
    --superficie-2:   hsl(215 25% 98%);
    --borda:          hsl(215 18% 88%);
    --borda-forte:    hsl(215 16% 76%);

    --texto:          hsl(215 32% 14%);
    --texto-suave:    hsl(215 14% 40%);
    --texto-tenue:    hsl(215 12% 54%);

    --info:    hsl(211 76% 42%);   --info-fundo:    hsl(211 90% 96%);
    --sucesso: hsl(154 62% 28%);   --sucesso-fundo: hsl(154 60% 95%);
    --alerta:  hsl(35 88% 34%);    --alerta-fundo:  hsl(38 92% 95%);
    --perigo:  hsl(0 66% 42%);     --perigo-fundo:  hsl(0 80% 96%);

    --dourado-escuro: hsl(var(--marca-h) 78% 28%);
    --dourado-suave:  hsl(var(--marca-h) 70% 94%);
}

.acesso {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--e-4);
    /* Fundo navy cheio, como no GCM Ensino: a tela de entrada é a única em
       que a identidade do órgão ocupa o espaço todo. */
    background:
        radial-gradient(70rem 45rem at 15% 110%, hsl(222 60% 34% / 0.55), transparent 65%),
        radial-gradient(50rem 35rem at 85% -10%, hsl(222 55% 40% / 0.40), transparent 60%),
        var(--navy-900);
}

.acesso__caixa { width: 100%; max-width: 27rem; }

.acesso__marca {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
    text-align: center;
}
.acesso__marca img { width: 84px; height: 84px; }

.acesso__nome {
    margin: 0;
    font-size: var(--txt-2xl); font-weight: 700;
    letter-spacing: -0.02em;
    color: hsl(0 0% 100%);
}
.acesso__orgao {
    margin: var(--e-1) 0 0;
    font-size: var(--txt-sm);
    color: hsl(215 30% 78%);
    line-height: 1.5;
}

.acesso__rodape {
    margin-top: var(--e-5);
    text-align: center;
    font-size: var(--txt-xs);
    color: hsl(215 28% 70%);
    line-height: 1.7;
}
.acesso__rodape a { color: hsl(215 40% 86%); }

/* O cartão permanece claro sobre o fundo navy, inclusive no tema escuro:
   é o ponto de contraste que guia o olho para o formulário. */
.acesso .cartao {
    background: hsl(0 0% 100%);
    border-color: hsl(215 20% 88%);
    box-shadow: 0 20px 50px hsl(222 60% 8% / 0.35);
    border-top: 3px solid var(--dourado);
}
.acesso .cartao__corpo { padding: var(--e-6) var(--e-5); }
.acesso .campo__rotulo { display: flex; align-items: center; gap: var(--e-2); color: hsl(215 25% 28%); }
.acesso .campo__entrada { background: hsl(215 30% 98%); border-color: hsl(215 18% 85%); color: hsl(215 32% 14%); }
.acesso .campo__entrada:focus { background: hsl(0 0% 100%); }

.acesso .botao--destaque {
    color: hsl(0 0% 100%);
    background: var(--navy-800);
    min-height: 46px;
    font-size: var(--txt-base);
}
.acesso .botao--destaque:hover { background: var(--navy-700); }

@media (max-width: 30rem) {
    .acesso { padding: var(--e-3); }
    .acesso .cartao__corpo { padding: var(--e-5) var(--e-4); }
    .acesso__marca img { width: 68px; height: 68px; }
}

/* ==========================================================================
   Casca da aplicação: menu lateral retrátil + área de conteúdo
   ========================================================================== */

.app {
    display: grid;
    grid-template-columns: var(--menu-largura, 17rem) 1fr;
    min-height: 100dvh;
}

/* Estado recolhido: só os ícones permanecem. A largura é uma variável, então
   toda a régua do layout acompanha sem nenhuma regra duplicada. */
.app--recolhido { --menu-largura: 4.75rem; }

/* -- Menu lateral --------------------------------------------------------- */
.menu {
    position: sticky; top: 0;
    display: flex; flex-direction: column;
    height: 100dvh; overflow: hidden auto;
    background: var(--navy-900);
    color: hsl(0 0% 100%);
    scrollbar-width: thin;
    scrollbar-color: hsl(0 0% 100% / 0.2) transparent;
}

.menu__topo {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-4);
    border-bottom: 1px solid hsl(0 0% 100% / 0.10);
    min-height: 4.5rem;
}

.menu__marca {
    display: flex; align-items: center; gap: var(--e-3);
    color: inherit; text-decoration: none;
    min-width: 0;
}
.menu__marca img { width: 34px; height: 34px; flex: 0 0 auto; }
.menu__nome {
    font-size: var(--txt-lg); font-weight: 700; letter-spacing: -0.01em;
    white-space: nowrap;
}

.menu__alternar {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    margin-left: auto;
    color: hsl(215 25% 78%);
    background: transparent;
    border: 0; border-radius: var(--raio);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.menu__alternar:hover { background: hsl(0 0% 100% / 0.12); color: hsl(0 0% 100%); }

/* -- Bloco do usuário ----------------------------------------------------- */
.menu__usuario {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-4);
    border-bottom: 1px solid hsl(0 0% 100% / 0.10);
    min-width: 0;
}
.menu__avatar {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    font-weight: 700; font-size: var(--txt-base);
    color: var(--navy-900);
    background: var(--dourado);
    border-radius: var(--raio-total);
}
.menu__identificacao { min-width: 0; }
/* O e-mail não cabe inteiro num menu de 17rem. Corta com reticências em vez de
   quebrar linha: o bloco tem duas linhas fixas, e uma terceira empurraria a
   navegação inteira para baixo em nome de um endereço. O title do HTML
   devolve o valor completo. */
.menu__email {
    display: block;
    font-weight: 650; font-size: var(--txt-sm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu__perfil {
    display: block;
    font-size: var(--txt-xs); color: hsl(215 22% 72%);
    white-space: nowrap;
}

/* -- Itens de navegação --------------------------------------------------- */
.menu__navegacao { padding: var(--e-3) var(--e-2); flex: 1; }

.menu__item {
    display: flex; align-items: center; gap: var(--e-3);
    padding: 0.6875rem var(--e-3);
    margin-bottom: 2px;
    color: hsl(215 25% 82%);
    font-size: var(--txt-base); font-weight: 500;
    text-decoration: none;
    border-radius: var(--raio);
    border-left: 3px solid transparent;
    white-space: nowrap;
    transition: background var(--transicao), color var(--transicao);
}
.menu__item:hover { background: hsl(0 0% 100% / 0.08); color: hsl(0 0% 100%); }
.menu__item .icone { flex: 0 0 auto; }

.menu__item[aria-current="page"] {
    color: hsl(0 0% 100%);
    background: hsl(0 0% 100% / 0.12);
    border-left-color: var(--dourado);
    font-weight: 650;
}

.menu__rodape {
    padding: var(--e-3) var(--e-2) var(--e-4);
    border-top: 1px solid hsl(0 0% 100% / 0.10);
}
.menu__sair {
    display: flex; align-items: center; gap: var(--e-3);
    width: 100%;
    padding: 0.6875rem var(--e-3);
    font: inherit; font-size: var(--txt-base); font-weight: 500;
    color: hsl(215 25% 82%);
    background: transparent;
    border: 0; border-radius: var(--raio);
    cursor: pointer; text-align: left;
    white-space: nowrap;
    transition: background var(--transicao), color var(--transicao);
}
.menu__sair:hover { background: hsl(0 80% 60% / 0.18); color: hsl(0 0% 100%); }

/* Ao recolher, some tudo que é texto e os blocos passam a centralizar. */
.app--recolhido .menu__nome,
.app--recolhido .menu__identificacao,
.app--recolhido .menu__rotulo { display: none; }

.app--recolhido .menu__topo,
.app--recolhido .menu__usuario { justify-content: center; padding-inline: var(--e-2); }
.app--recolhido .menu__marca { display: none; }
.app--recolhido .menu__alternar { margin-left: 0; }
.app--recolhido .menu__item,
.app--recolhido .menu__sair { justify-content: center; padding-inline: 0; }

/* -- Área principal ------------------------------------------------------- */
.principal { display: flex; flex-direction: column; min-width: 0; }

/*
   Respiro do conteúdo. A margem lateral existe dos dois lados: entre o menu
   e o conteúdo, e entre o conteúdo e a borda da janela — sem ela os cartões
   encostam no menu e a leitura fica apertada.

   max-width limita a linha em telas muito largas: texto atravessando 2000px
   é cansativo de ler. Acima disso o bloco centraliza.
*/
.conteudo {
    flex: 1;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: var(--e-5) var(--e-6) var(--e-7);
}

/* A trilha acompanha o mesmo alinhamento do conteúdo. */
.trilha { padding-inline: var(--e-6); }

/* -- Rodapé --------------------------------------------------------------- */
/*
   Fica no fim da coluna principal, e a coluna é flex com o conteúdo em
   flex:1 — assim o rodapé encosta na base da janela mesmo em página curta,
   sem recorrer a position:fixed (que roubaria espaço de leitura no celular).
*/
.rodape {
    margin-top: auto;
    padding: var(--e-4);
    text-align: center;
    font-size: var(--txt-sm);
    color: hsl(215 30% 80%);
    background: var(--navy-900);
}
/* O texto inteiro fica num único filho: sem isso, "Desenvolvido por:" e o
   nome do setor viram itens flex separados e quebram em linhas diferentes
   na tela estreita. */
.rodape__creditos { display: inline-flex; align-items: center; gap: var(--e-2); }
.rodape__creditos .icone { flex: 0 0 auto; }
.rodape strong { color: hsl(0 0% 100%); font-weight: 650; }

/* -- Trilha de navegação -------------------------------------------------- */
.trilha {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-3) var(--e-5);
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    font-size: var(--txt-sm);
    overflow-x: auto; white-space: nowrap;
}
.trilha a { color: var(--texto-suave); text-decoration: none; display: inline-flex; align-items: center; gap: var(--e-2); }
.trilha a:hover { color: var(--info); text-decoration: underline; }
.trilha__separador { color: var(--texto-tenue); display: inline-flex; }
.trilha__atual { color: var(--texto); font-weight: 650; }

/* -- Faixa de cabeçalho da página ----------------------------------------- */
.faixa {
    display: flex; align-items: flex-start; gap: var(--e-4);
    margin-bottom: var(--e-5);
    padding: var(--e-5);
    color: hsl(0 0% 100%);
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
}
.faixa__icone {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    background: hsl(0 0% 100% / 0.14);
    border-radius: var(--raio);
}
.faixa__texto { flex: 1; min-width: 0; }
.faixa h1 { margin: 0 0 var(--e-1); color: hsl(0 0% 100%); }
.faixa__descricao { margin: 0; color: hsl(215 35% 86%); font-size: var(--txt-sm); }
.faixa__acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* Sobre a faixa navy o botão fica branco: dourado saturado nesse tamanho
   compete com o título e cansa. O dourado permanece como acento fino —
   item ativo do menu, topo dos cartões, selo de sigla. */
.faixa .botao--destaque {
    color: var(--navy-800);
    background: hsl(0 0% 100%);
    box-shadow: 0 1px 2px hsl(222 60% 8% / 0.25);
}
.faixa .botao--destaque:hover { background: hsl(215 30% 94%); }

/* .botao--contorno herda cor de texto escura e borda cinza-clara — certas
   sobre fundo branco, quase invisíveis sobre o gradiente navy da faixa. Sem
   esta sobreposição o botão "Exportar CSV" (e os outros contorno da faixa:
   Preferências, Verificar a cadeia, Voltar) lê como se tivesse fundo
   transparente sumindo no cabeçalho — foi assim que passou despercebido: o
   HTML e a classe estavam certos, só faltava a variante para este fundo. */
.faixa .botao--contorno {
    color: hsl(0 0% 100%);
    border-color: hsl(0 0% 100% / 0.35);
}
.faixa .botao--contorno:hover {
    background: hsl(0 0% 100% / 0.12);
    border-color: hsl(0 0% 100% / 0.5);
}

/* No tema escuro a faixa perde o gradiente forte para não brilhar demais. */
:root[data-tema="escuro"] .faixa { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .faixa { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); }
}

/* -- Cartão com título ---------------------------------------------------- */
.cartao__cabecalho {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--borda);
}
.cartao__cabecalho h2 { margin: 0; font-size: var(--txt-base); font-weight: 700; }
.cartao__contagem {
    margin-left: auto;
    padding: 0.125rem 0.625rem;
    font-size: var(--txt-xs); font-weight: 700;
    color: hsl(0 0% 100%); background: var(--navy-600);
    border-radius: var(--raio-total);
}

/* -- Barra superior das telas pequenas ------------------------------------ */
/* Só aparece no celular; no desktop o menu lateral já cumpre esse papel. */
.barra-movel {
    display: none;
    align-items: center; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    background: var(--navy-900);
    color: hsl(0 0% 100%);
    position: sticky; top: 0; z-index: 30;
}
.barra-movel__abrir {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    color: inherit; background: transparent;
    border: 1px solid hsl(0 0% 100% / 0.25); border-radius: var(--raio);
    cursor: pointer;
}
.barra-movel__titulo {
    display: flex; align-items: center; gap: var(--e-2);
    font-weight: 700; font-size: var(--txt-base);
}
.barra-movel__titulo img { width: 26px; height: 26px; }

/* Véu que cobre o conteúdo enquanto a gaveta está aberta. */
.veu { display: none; }

/* -- Cabeçalho de página -------------------------------------------------- */
.pagina-topo {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-4);
    margin-bottom: var(--e-5);
}
.pagina-topo__texto { flex: 1 1 20rem; }
.pagina-topo h1 { margin-bottom: var(--e-1); }
.pagina-topo__descricao { margin: 0; color: var(--texto-suave); font-size: var(--txt-sm); }
.pagina-topo__acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* -- Barra de filtros ----------------------------------------------------- */
.filtros {
    display: flex; flex-wrap: wrap; gap: var(--e-2);
    margin-bottom: var(--e-4);
}
.filtros .campo__entrada { width: auto; min-width: 14rem; flex: 1 1 14rem; }
.filtros select.campo__entrada { flex: 0 0 auto; min-width: 11rem; }

/* -- Tabela --------------------------------------------------------------- */
.tabela-caixa {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    overflow-x: auto;                      /* conteúdo largo rola dentro da caixa */
}
.tabela { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.tabela th, .tabela td {
    padding: var(--e-3) var(--e-4);
    text-align: left;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}
.tabela th {
    font-size: var(--txt-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--texto-tenue);
    background: var(--superficie-2);
    white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela__principal { font-weight: 600; color: var(--texto); }
.tabela__apoio { display: block; font-size: var(--txt-xs); color: var(--texto-tenue); }
.tabela__acoes { text-align: right; white-space: nowrap; }
.tabela__inativa { opacity: 0.55; }

/* -- Selo ----------------------------------------------------------------- */
.selo {
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: 0.1875rem 0.5rem;
    font-size: var(--txt-xs); font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    border-radius: var(--raio-total);
    white-space: nowrap;
}
.selo--neutro  { color: var(--texto-suave); background: var(--superficie-2); border-color: var(--borda-forte); }
.selo--info    { color: var(--info);    background: var(--info-fundo);    border-color: var(--info); }
.selo--sucesso { color: var(--sucesso); background: var(--sucesso-fundo); border-color: var(--sucesso); }
.selo--atencao { color: var(--alerta);  background: var(--alerta-fundo);  border-color: var(--alerta); }
.selo--perigo  { color: var(--perigo);  background: var(--perigo-fundo);  border-color: var(--perigo); }
.selo--marca   { color: var(--dourado-escuro); background: var(--dourado-suave); border-color: var(--dourado); }

/* -- Botão pequeno / de linha --------------------------------------------- */
.botao--pequeno { padding: 0.3125rem 0.625rem; min-height: 32px; font-size: var(--txt-sm); }

/* -- Estado vazio --------------------------------------------------------- */
.vazio { padding: var(--e-7) var(--e-4); text-align: center; color: var(--texto-suave); }
.vazio h2 { font-size: var(--txt-lg); color: var(--texto); }
.vazio p { margin-bottom: var(--e-4); font-size: var(--txt-sm); }

/* -- Formulário em duas colunas ------------------------------------------- */
.formulario { max-width: 44rem; }
.formulario__linha { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) {
    .formulario__linha--duas { grid-template-columns: 1fr 1fr; }
}
.formulario__acoes {
    display: flex; gap: var(--e-2); flex-wrap: wrap;
    margin-top: var(--e-5); padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
}

.caixa-marcavel { display: flex; align-items: flex-start; gap: var(--e-3); }
.caixa-marcavel input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--info); }
.caixa-marcavel__texto { font-size: var(--txt-sm); }
.caixa-marcavel__texto strong { display: block; }
.caixa-marcavel__texto span { color: var(--texto-tenue); }

/* -- Credencial provisória ------------------------------------------------ */
.credencial {
    margin: var(--e-4) 0;
    padding: var(--e-4);
    background: var(--dourado-suave);
    border: 1px dashed var(--dourado);
    border-radius: var(--raio);
}
.credencial dt { font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); }
.credencial dd { margin: 0 0 var(--e-3); font-family: var(--fonte-mono); font-size: var(--txt-lg); font-weight: 700; }
.credencial dd:last-child { margin-bottom: 0; }

/* ==========================================================================
   Quadro Kanban

   O cartão precisa responder, sem ser aberto, às quatro perguntas de quem
   passa os olhos no quadro: de quem é a demanda, quanto tempo resta, quanto
   já andou e se tem gente de fora envolvida. Cada bloco abaixo existe para
   uma delas.
   ========================================================================== */

/*
   Colunas de largura fixa numa faixa que rola na horizontal. Grid com
   auto-fit espremeria as cinco colunas em telas médias a ponto de o cartão
   ficar ilegível; rolar é o comportamento esperado num quadro.
*/
.quadro {
    display: grid;
    grid-auto-flow: column;
    /* 14rem é o menor tamanho em que o cartão ainda cabe sem espremer o
       título em quatro linhas. Com ele, as cinco colunas cabem num laptop de
       1366px COM O MENU RECOLHIDO; com o menu aberto a faixa rola, que é o
       comportamento esperado de um quadro. */
    grid-auto-columns: minmax(14rem, 1fr);
    gap: var(--e-3);
    overflow-x: auto;
    padding-bottom: var(--e-3);
    scrollbar-width: thin;
}

.quadro__coluna {
    display: flex; flex-direction: column;
    background: var(--quadro-fundo);
    border-radius: var(--raio-lg);
    min-height: 12rem;
}

.quadro__cabecalho {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-4) var(--e-4) var(--e-3);
}

/* Quadradinho de cor no lugar do selo: identifica a coluna sem competir com
   os selos coloridos que os cartões já usam para prioridade e prazo. */
.quadro__marcador {
    width: 9px; height: 9px; flex: 0 0 auto;
    border-radius: 2px;
    background: var(--borda-forte);
}
.quadro__marcador--marca   { background: var(--dourado); }
.quadro__marcador--neutro  { background: var(--grafite-500); }
.quadro__marcador--info    { background: var(--info); }
.quadro__marcador--atencao { background: var(--alerta); }
.quadro__marcador--sucesso { background: var(--sucesso); }

.quadro__titulo {
    margin: 0;
    font-size: var(--txt-sm); font-weight: 700;
    color: var(--texto);
}
.quadro__contagem {
    font-size: var(--txt-sm); font-weight: 600; color: var(--texto-tenue);
}

.quadro__cartoes { display: grid; gap: var(--e-3); padding: 0 var(--e-3) var(--e-3); }
.quadro__vazio {
    margin: 0; padding: var(--e-4);
    text-align: center;
    font-size: var(--txt-xs); color: var(--texto-tenue);
    line-height: 1.5;
}

/* Adicionar na coluna: contorno tracejado para ler como espaço disponível,
   e não como um cartão a menos no quadro. */
.quadro__adicionar {
    display: block;
    margin: 0 var(--e-3) var(--e-3);
    padding: var(--e-3);
    text-align: center;
    font-size: var(--txt-sm); font-weight: 600;
    color: var(--texto-tenue);
    text-decoration: none;
    background: transparent;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.quadro__adicionar:hover {
    color: var(--info);
    border-color: var(--info);
    background: var(--superficie);
}

/* -- Cartão --------------------------------------------------------------- */

.cartao-quadro {
    display: grid; gap: var(--e-2);
    padding: var(--e-3) var(--e-3) var(--e-2);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
}

/* Faixa de urgência à esquerda. Só aparece quando há o que sinalizar: uma
   borda colorida em todo cartão não distingue nada. */
.cartao-quadro--atrasada  { border-left: 3px solid var(--perigo); }
.cartao-quadro--vencendo  { border-left: 3px solid var(--alerta); }

.cartao-quadro__topo {
    display: flex; align-items: baseline; gap: var(--e-2);
    justify-content: space-between;
}

.cartao-quadro__categoria {
    font-size: var(--txt-xs); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Paleta das etiquetas de equipe: um matiz por classe, luminosidade vinda do
   tema. O rótulo é texto de 11px e precisa dos 4,5:1 do RNF07 nos DOIS temas —
   a mesma razão pela qual o dourado da marca nunca vira texto miúdo. */
.cartao-quadro__categoria--0 { color: hsl(211 var(--cat-s) var(--cat-l)); }
.cartao-quadro__categoria--1 { color: hsl(154 var(--cat-s) var(--cat-l)); }
.cartao-quadro__categoria--2 { color: hsl(275 var(--cat-s) var(--cat-l)); }
.cartao-quadro__categoria--3 { color: hsl(14  var(--cat-s) var(--cat-l)); }
.cartao-quadro__categoria--4 { color: hsl(190 var(--cat-s) var(--cat-l)); }
.cartao-quadro__categoria--5 { color: hsl(330 var(--cat-s) var(--cat-l)); }
.cartao-quadro__categoria--6 { color: hsl(35  var(--cat-s) var(--cat-l)); }
.cartao-quadro__categoria--7 { color: hsl(222 var(--cat-s) var(--cat-l)); }

/* O código não encolhe e a etiqueta de equipe sim: entre os dois, o
   identificador é o que precisa sair inteiro — é por ele que a demanda é
   cobrada. A tipografia é apertada para sobrar espaço à equipe. */
.cartao-quadro__codigo {
    flex: 0 0 auto;
    font-family: var(--fonte-mono);
    font-size: 10.5px; letter-spacing: -0.02em;
    color: var(--texto-tenue);
}
.cartao-quadro__categoria { min-width: 2.5rem; }

.cartao-quadro__titulo {
    margin: 0;
    font-size: var(--txt-sm); font-weight: 650; line-height: 1.35;
}
.cartao-quadro__titulo a { color: var(--texto); text-decoration: none; }
.cartao-quadro__titulo a:hover { text-decoration: underline; }

.cartao-quadro__selos { display: flex; gap: var(--e-1); flex-wrap: wrap; }

/* -- Etiqueta de prazo ---------------------------------------------------- */

.etiqueta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px;
    font-size: var(--txt-xs); font-weight: 600;
    border-radius: var(--raio-sm);
    white-space: nowrap;
}
.etiqueta .icone { flex: 0 0 auto; }

.etiqueta--neutro  { color: var(--texto-suave); background: var(--superficie-2); border: 1px solid var(--borda); }
.etiqueta--info    { color: var(--info);    background: var(--info-fundo); }
.etiqueta--sucesso { color: var(--sucesso); background: var(--sucesso-fundo); }
.etiqueta--atencao { color: var(--alerta);  background: var(--alerta-fundo); }
.etiqueta--perigo  { color: var(--perigo);  background: var(--perigo-fundo); }

/* -- Rodapé do cartão ----------------------------------------------------- */

.cartao-quadro__rodape {
    display: flex; align-items: center; gap: var(--e-2);
    margin-top: var(--e-1);
    padding-top: var(--e-2);
    border-top: 1px solid var(--borda);
}

.cartao-quadro__sinais {
    display: flex; align-items: center; gap: var(--e-3);
    margin-left: auto;
    font-size: var(--txt-xs); color: var(--texto-tenue);
}
.cartao-quadro__sinal { display: inline-flex; align-items: center; gap: 3px; }
.cartao-quadro__sinal--completo { color: var(--sucesso); font-weight: 700; }

/* -- Avatares ------------------------------------------------------------- */

/* Sobreposição negativa com anel da cor do cartão: mostra que as pessoas
   estão na MESMA demanda, e não uma lista de nomes soltos. */
.avatares { display: flex; align-items: center; }
.avatares > * + * { margin-left: -7px; }

.avatar {
    display: grid; place-items: center;
    width: 24px; height: 24px; flex: 0 0 auto;
    border-radius: var(--raio-total);
    box-shadow: 0 0 0 2px var(--superficie);
    font-size: 10px; font-weight: 700; letter-spacing: -0.02em;
    color: hsl(0 0% 100%);
    background: var(--grafite-500);
}

/* Fundos escuros o bastante para o texto branco passar dos 4,5:1. */
.avatar--0 { background: hsl(211 68% 38%); }
.avatar--1 { background: hsl(154 55% 28%); }
.avatar--2 { background: hsl(275 45% 44%); }
.avatar--3 { background: hsl(14 65% 42%); }
.avatar--4 { background: hsl(190 60% 30%); }
.avatar--5 { background: hsl(330 48% 42%); }
.avatar--6 { background: hsl(35 75% 32%); }
.avatar--7 { background: hsl(222 48% 40%); }

/* Cartão sem executor diz isso por escrito. Um avatar vazio no lugar parece
   imagem que não carregou — e o pool inteiro é feito de cartões sem dono. */
.avatares__vazio { font-size: var(--txt-xs); color: var(--texto-tenue); }
.avatar--resto {
    color: var(--texto-suave);
    background: var(--superficie-2);
    border: 1px solid var(--borda-forte);
}

/* -- Mover de coluna ------------------------------------------------------ */

/*
   O <select> + botão é o que faz o quadro funcionar sem JavaScript (critério
   de aceite 6). Fica recolhido num <details> para não ocupar o cartão inteiro
   quando ninguém está movendo nada — <details> é nativo e não custa script.
*/
.cartao-quadro__mover { margin-top: var(--e-1); }
.cartao-quadro__mover > summary {
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: 2px 0;
    cursor: pointer;
    font-size: var(--txt-xs); font-weight: 600;
    color: var(--texto-tenue);
    list-style: none;
}
.cartao-quadro__mover > summary::-webkit-details-marker { display: none; }
.cartao-quadro__mover > summary:hover { color: var(--info); }
.cartao-quadro__mover[open] > summary { margin-bottom: var(--e-2); }

.cartao-quadro__destinos { display: flex; gap: var(--e-2); align-items: center; }
.cartao-quadro__destinos .campo__entrada {
    flex: 1; min-width: 0;
    min-height: 32px; padding: 0.25rem 0.5rem;
    font-size: var(--txt-xs);
}
.cartao-quadro__destinos .botao { flex: 0 0 auto; padding-inline: 0.5rem; }

/* Mover e arquivar dividem a linha do pé do cartão.

   flex-start, e não center: o <details> cresce PARA BAIXO quando abre, e com
   os itens centralizados o "Arquivar" escorregaria para o meio do formulário
   aberto, longe do "Mover" com que ele se alinha fechado. */
.cartao-quadro__acoes {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--e-2); margin-top: var(--e-1);
}
.cartao-quadro__acoes .cartao-quadro__mover { flex: 1 1 auto; min-width: 0; margin-top: 0; }

/* Discreto de propósito: arrumar o quadro não compete com mover a demanda.
   Mesmo peso e cor do "Mover" ao lado. */
.cartao-quadro__arquivar {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: 2px 0;
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: var(--txt-xs); font-weight: 600;
    color: var(--texto-tenue);
}
.cartao-quadro__arquivar:hover { color: var(--info); }

/* -- Cabeçalho e filtros do quadro ---------------------------------------- */

.quadro-topo {
    display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
    margin-bottom: var(--e-4);
}
/* O título cede espaço aos filtros em vez de empurrá-los para a linha de
   baixo: com "Limpar" em tela são quatro controles, e eles precisam assentar
   na mesma linha do botão principal. */
.quadro-topo__texto { flex: 1 1 10rem; min-width: 0; }
.quadro-topo h1 { margin: 0; font-size: var(--txt-xl); }
.quadro-topo__descricao {
    margin: 2px 0 0;
    font-size: var(--txt-sm); color: var(--texto-suave);
}
/*
   Filtros e botão principal formam UM bloco que não se parte.

   Com flex-wrap aqui dentro, faltando espaço o "Filtrar" caía sozinho para a
   linha de baixo enquanto "Nova atividade" ficava em cima — três controles
   desalinhados de um quarto. Com nowrap, os campos encolhem até o piso e,
   quando nem isso basta, o grupo INTEIRO desce para a própria linha: a quebra
   passa a acontecer entre o título e os controles, que é onde ela não
   incomoda.
*/
.quadro-topo__acoes {
    display: flex; align-items: center; gap: var(--e-2);
    flex-wrap: nowrap;
    flex: 0 1 auto; min-width: 0;
}
.quadro-topo__filtro {
    display: flex; align-items: center; gap: var(--e-2);
    flex-wrap: nowrap;
    min-width: 0;
}
.quadro-topo__busca { flex: 1 1 14rem; min-width: 7rem; }
.quadro-topo__equipe { flex: 1 1 11rem; min-width: 6.5rem; }
/* Os botões nunca encolhem nem quebram o próprio rótulo: espremido,
   "Nova atividade" virava duas linhas e ficava mais alto que os campos ao
   lado — desalinhando justamente a fila que se quer alinhada. */
.quadro-topo__acoes > .botao,
.quadro-topo__filtro .botao { flex: 0 0 auto; white-space: nowrap; }

/* Barra de recortes: as visões à esquerda, os recortes no meio, a leitura de
   urgência à direita. */
.quadro-barra {
    display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
    margin-bottom: var(--e-4);
}

.abas {
    display: inline-flex; gap: 2px;
    padding: 3px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.abas__item {
    padding: 5px 12px;
    font-size: var(--txt-sm); font-weight: 600;
    color: var(--texto-suave); text-decoration: none;
    border-radius: var(--raio-sm);
    white-space: nowrap;
}
.abas__item:hover { color: var(--texto); }
.abas__item[aria-current="page"] {
    color: var(--texto);
    background: var(--superficie);
    box-shadow: var(--sombra-sm);
}

.recortes { display: inline-flex; gap: var(--e-2); flex-wrap: wrap; }
.recortes__item {
    padding: 5px 12px;
    font-size: var(--txt-sm); font-weight: 600;
    color: var(--texto-suave); text-decoration: none;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    white-space: nowrap;
}
.recortes__item:hover { border-color: var(--borda-forte); color: var(--texto); }
.recortes__item[aria-current="true"] {
    color: var(--dourado-escuro);
    border-color: var(--dourado);
    background: var(--dourado-suave);
}

.leitura {
    display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
    margin-left: auto;
    font-size: var(--txt-sm); color: var(--texto-suave);
}
.leitura__item {
    display: inline-flex; align-items: center; gap: var(--e-2);
    color: inherit; text-decoration: none;
}
a.leitura__item:hover { color: var(--texto); }
a.leitura__item:hover .leitura__ponto { transform: scale(1.25); }
.leitura__ponto { transition: transform var(--transicao); }
.leitura__ponto {
    width: 8px; height: 8px;
    border-radius: var(--raio-total);
    background: var(--borda-forte);
}
.leitura__ponto--perigo  { background: var(--perigo); }
.leitura__ponto--atencao { background: var(--alerta); }
.leitura strong { color: var(--texto); font-weight: 700; }

/* ==========================================================================
   Calendário
   ========================================================================== */

.calendario-caixa { overflow-x: auto; }

.calendario { width: 100%; min-width: 44rem; border-collapse: collapse; table-layout: fixed; }

.calendario th {
    padding: var(--e-2);
    font-size: var(--txt-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--texto-tenue);
    background: var(--superficie-2);
    border-bottom: 1px solid var(--borda);
}

.calendario__dia {
    vertical-align: top;
    height: 7rem;
    padding: var(--e-2);
    border: 1px solid var(--borda);
    background: var(--superficie);
}
.calendario__dia--fora { background: var(--superficie-2); opacity: 0.6; }
.calendario__dia--hoje { box-shadow: inset 0 0 0 2px var(--info); }

/* O número do dia num disco: é o que permite achar "hoje" de relance numa
   grade de 35 células iguais. */
.calendario__numero {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    margin-bottom: var(--e-1);
    font-size: var(--txt-xs); font-weight: 700;
    color: var(--texto-suave);
    border-radius: var(--raio-total);
}
.calendario__numero--hoje {
    color: hsl(0 0% 100%);
    background: var(--info);
}

.calendario__marco {
    display: block;
    margin-bottom: 3px;
    padding: 3px 6px;
    font-size: var(--txt-xs); line-height: 1.3;
    border-radius: var(--raio-sm);
    border-left: 3px solid transparent;
    text-decoration: none;
}
.calendario__marco:hover { filter: brightness(0.96); }

.calendario__marco-titulo {
    display: block; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A hora em monoespaçada e discreta: ela alinha entre células e não compete
   com o título do marco. */
.calendario__marco-hora {
    display: block;
    font-family: var(--fonte-mono);
    font-size: 10px;
    opacity: 0.75;
}

.calendario__marco--prazo       { color: var(--info);    background: var(--info-fundo);    border-left-color: var(--info); }
.calendario__marco--atrasada    { color: var(--perigo);  background: var(--perigo-fundo);  border-left-color: var(--perigo); }
.calendario__marco--projeto     { color: var(--sucesso); background: var(--sucesso-fundo); border-left-color: var(--sucesso); }
.calendario__marco--projeto-fim { color: var(--alerta);  background: var(--alerta-fundo);  border-left-color: var(--alerta); }

.calendario__legenda {
    display: flex; flex-wrap: wrap; gap: var(--e-4);
    padding: var(--e-3) var(--e-4);
    border-top: 1px solid var(--borda);
    font-size: var(--txt-xs); color: var(--texto-suave);
}
.calendario__legenda span { display: inline-flex; align-items: center; gap: var(--e-2); }
.calendario__amostra {
    display: inline-block; width: 14px; height: 14px;
    border-radius: var(--raio-sm);
    border-left-width: 3px; border-left-style: solid;
}

/* ==========================================================================
   Adaptação a telas menores
   --------------------------------------------------------------------------
   Este bloco fica no FIM do arquivo de propósito. As regras aqui têm a mesma
   especificidade das regras base; em CSS, empate de especificidade é decidido
   pela ordem de declaração — se viessem antes, seriam ignoradas.
   ========================================================================== */

/* -- Telas médias: trilho de ícones --------------------------------------- */
@media (max-width: 60rem) and (min-width: 48.0625rem) {
    .app { --menu-largura: 4.75rem; }
    .app .menu__nome,
    .app .menu__identificacao,
    .app .menu__rotulo,
    .app .menu__marca { display: none; }
    .app .menu__topo,
    .app .menu__usuario { justify-content: center; padding-inline: var(--e-2); }
    .app .menu__alternar { margin-left: 0; }
    .app .menu__item,
    .app .menu__sair { justify-content: center; padding-inline: 0; }
}

/* -- Telas pequenas: menu em gaveta --------------------------------------- */
/*
   Um trilho de ícones fixo consumiria 20% de uma tela de 360px. Aqui o menu
   sai do fluxo e vira gaveta, aberta por um checkbox oculto — CSS puro, sem
   JavaScript, coerente com o resto do sistema (critério de aceite 6).
*/
@media (max-width: 48rem) {
    .app { grid-template-columns: 1fr; }

    .barra-movel { display: flex; }

    .menu {
        position: fixed; inset: 0 auto 0 0; z-index: 50;
        width: min(17rem, 82vw);
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--sombra-lg);
    }
    .menu__alternar { display: none; }   /* recolher não faz sentido em gaveta */

    #gaveta:checked ~ .app .menu { transform: none; }

    #gaveta:checked ~ .app .veu {
        display: block;
        position: fixed; inset: 0; z-index: 40;
        background: hsl(222 40% 8% / 0.55);
    }

    /* Fecha a gaveta ao navegar por teclado para fora dela. */
    .menu:focus-within { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .menu { transition: none; }
}

/* -- Ajustes finos de telas estreitas ------------------------------------- */
@media (max-width: 64rem) {
    .conteudo { padding: var(--e-5) var(--e-5) var(--e-7); }
    .trilha { padding-inline: var(--e-5); }
}

@media (max-width: 40rem) {
    .conteudo { padding: var(--e-4) var(--e-4) var(--e-6); }
    .trilha { padding-inline: var(--e-4); }

    .faixa { padding: var(--e-4); flex-direction: column; gap: var(--e-3); }
    .faixa__acoes { width: 100%; }
    .faixa__acoes .botao { flex: 1 1 auto; }

    .pagina-topo { flex-direction: column; }
    .pagina-topo__acoes { width: 100%; }
    .pagina-topo__acoes .botao { flex: 1 1 auto; }

    .filtros { flex-direction: column; align-items: stretch; }
    /* 'flex: none' é obrigatório aqui: com a direção em coluna, o flex-basis
       de 14rem passaria a valer como ALTURA e o campo viraria um bloco enorme. */
    .filtros .campo__entrada,
    .filtros select.campo__entrada { flex: none; width: 100%; min-width: 0; }
    .filtros .botao { flex: none; width: 100%; }

    .cartao__corpo { padding: var(--e-4); }
    .cartao__cabecalho { padding: var(--e-3) var(--e-4); }

    /* Ações de linha empilham e ocupam a largura: alvo de toque decente. */
    .tabela__acoes { text-align: left; }
    .tabela__acoes .botao,
    .tabela__acoes form { display: block; width: 100%; margin-bottom: var(--e-1); }
    .tabela__acoes .botao { width: 100%; }

    .formulario__acoes { flex-direction: column-reverse; }
    .formulario__acoes .botao { width: 100%; }

    .credencial dd { font-size: var(--txt-base); word-break: break-all; }

    /* O campo de novo item do checklist e o botão empilham em tela estreita. */
    .checklist__item { flex-wrap: wrap; }
    .checklist__autor { width: 100%; padding-left: calc(22px + var(--e-3)); }
    .lista-pessoas__item { flex-direction: column; align-items: stretch; }
    .lista-pessoas__item .botao { width: 100%; }

    /* No celular o quadro vira uma coluna por vez, rolando na horizontal. */
    .quadro { grid-auto-columns: 82vw; }

    /* O cabeçalho empilha e a busca ocupa a largura toda: espremida ao lado
       do botão ela caberia três letras. */
    .quadro-topo { gap: var(--e-3); }
    /* Aqui a quebra volta a ser desejada: em 360px nada cabe lado a lado. */
    .quadro-topo__acoes,
    .quadro-topo__filtro { width: 100%; flex-wrap: wrap; }
    .quadro-topo__busca,
    .quadro-topo__equipe { flex: 1 1 100%; min-width: 0; }

    /* A leitura de urgência desce para a própria linha em vez de brigar por
       espaço com os recortes. */
    .quadro-barra { gap: var(--e-2); }
    .leitura { margin-left: 0; width: 100%; gap: var(--e-3); }
    .abas, .recortes { width: 100%; }
    .abas__item, .recortes__item { flex: 1; text-align: center; }

    /* A altura fixa da célula não cabe: o dia cresce conforme o conteúdo. */
    .calendario__dia { height: auto; min-height: 4.5rem; }
    .calendario__legenda { gap: var(--e-2) var(--e-3); }
}

/* Tabelas em 360px: a caixa rola na horizontal e a primeira coluna fica
   fixa, para não se perder a referência de qual linha está sendo lida. */
@media (max-width: 34rem) {
    .tabela { min-width: 34rem; }
    .tabela th:first-child,
    .tabela td:first-child {
        position: sticky; left: 0;
        background: var(--superficie);
        box-shadow: 1px 0 0 var(--borda);
    }
    .tabela th:first-child { background: var(--superficie-2); }
    .tabela tbody tr:hover td:first-child { background: var(--superficie-2); }
}

/* ==========================================================================
   Progresso, cartões de resumo e linha do tempo
   ========================================================================== */

/*
   Barra de progresso em <progress> nativo.

   A versão anterior era uma div preenchida por style="width:N%" — e a CSP
   (RNF04) veta atributo style, então a barra nunca saía de zero na tela. Com
   <progress> o valor vai em atributo de dado, não de estilo: nada a liberar
   na política, e o leitor de tela anuncia a porcentagem sozinho.

   Os três seletores de pseudo-elemento ficam SEPARADOS de propósito: navegador
   que não conhece um deles descarta a regra inteira em que ele aparece.
*/
.progresso {
    display: flex; align-items: center; gap: var(--e-3);
    min-width: 8rem;
}
.progresso__barra {
    flex: 1;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 100%; height: 7px;
    border: 0;
    border-radius: var(--raio-total);
    background: var(--borda);
    overflow: hidden;
}
.progresso__barra::-webkit-progress-bar {
    background: var(--borda); border-radius: var(--raio-total);
}
.progresso__barra::-webkit-progress-value {
    background: var(--info); border-radius: var(--raio-total);
}
.progresso__barra::-moz-progress-bar {
    background: var(--info); border-radius: var(--raio-total);
}
.progresso__barra--completo::-webkit-progress-value { background: var(--sucesso); }
.progresso__barra--completo::-moz-progress-bar     { background: var(--sucesso); }
.progresso__barra--alerta::-webkit-progress-value  { background: var(--perigo); }
.progresso__barra--alerta::-moz-progress-bar       { background: var(--perigo); }

.progresso__valor {
    font-size: var(--txt-sm); font-weight: 700;
    color: var(--texto-suave); min-width: 2.75rem; text-align: right;
}

/* -- Cartões de indicador ------------------------------------------------- */
.indicadores {
    display: grid; gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-bottom: var(--e-5);
}
.indicador {
    display: flex; align-items: center; gap: var(--e-4);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    color: inherit; text-decoration: none;
    transition: border-color var(--transicao), transform var(--transicao);
}
a.indicador:hover { border-color: var(--borda-forte); transform: translateY(-1px); }
.indicador__icone {
    display: grid; place-items: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: var(--raio);
    background: var(--info-fundo); color: var(--info);
}
.indicador__icone--alerta  { background: var(--alerta-fundo);  color: var(--alerta); }
.indicador__icone--perigo  { background: var(--perigo-fundo);  color: var(--perigo); }
.indicador__icone--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.indicador__icone--marca   { background: var(--dourado-suave); color: var(--dourado-escuro); }
/* Empilhados por declaração, e não por sorte de quebra de linha: como spans
   em fluxo, número e rótulo dividiam a linha sempre que o rótulo era curto o
   bastante — e o mesmo painel ficava alinhado numa largura e torto na outra. */
.indicador__numero {
    display: block;
    font-size: 1.625rem; font-weight: 700; line-height: 1.1;
}
.indicador__rotulo { display: block; font-size: var(--txt-sm); color: var(--texto-suave); }

/* -- Colunas de detalhe --------------------------------------------------- */
.colunas { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 64rem) { .colunas { grid-template-columns: 2fr 1fr; align-items: start; } }

.dados { margin: 0; display: grid; gap: var(--e-3); }
.dados > div { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.dados dt { font-size: var(--txt-sm); color: var(--texto-tenue); }
.dados dd { margin: 0; font-size: var(--txt-sm); font-weight: 600; text-align: right; }

/* -- Linha do tempo de comentários ---------------------------------------- */
.linha-tempo { display: grid; gap: var(--e-4); }
.comentario {
    padding: var(--e-4);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.comentario--interno { border-left: 3px solid var(--alerta); }
.comentario--convidado { border-left: 3px solid var(--info); }
.comentario__topo {
    display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
    margin-bottom: var(--e-2);
    font-size: var(--txt-sm);
}
.comentario__autor { font-weight: 700; }
.comentario__data { color: var(--texto-tenue); font-size: var(--txt-xs); margin-left: auto; }
.comentario__texto { margin: 0; white-space: pre-wrap; font-size: var(--txt-sm); line-height: 1.6; }

/* -- Aviso de impedimento ------------------------------------------------- */
.impedimento {
    display: flex; gap: var(--e-3);
    padding: var(--e-4);
    margin-bottom: var(--e-4);
    background: var(--alerta-fundo);
    border: 1px solid var(--alerta);
    border-radius: var(--raio);
    color: var(--alerta);
    font-size: var(--txt-sm);
}
.impedimento strong { display: block; margin-bottom: var(--e-1); }

/* -- Ficha de ação no pool ------------------------------------------------ */
.pool { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.ficha {
    display: flex; flex-direction: column; gap: var(--e-3);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-top: 3px solid var(--dourado);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
}
.ficha__selos { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.ficha__titulo { margin: 0; font-size: var(--txt-base); font-weight: 700; }
.ficha__titulo a { color: inherit; text-decoration: none; }
.ficha__titulo a:hover { text-decoration: underline; }
.ficha__descricao {
    margin: 0; font-size: var(--txt-sm); color: var(--texto-suave);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ficha__rodape {
    display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
    margin-top: auto; padding-top: var(--e-3);
    border-top: 1px solid var(--borda);
    font-size: var(--txt-xs); color: var(--texto-tenue);
}
.ficha__rodape form { margin-left: auto; }

/* ==========================================================================
   Checklist e listas de pessoas
   ========================================================================== */

.checklist { margin: 0; padding: 0; list-style: none; }

.checklist__item {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-2) 0;
    border-bottom: 1px solid var(--borda);
    font-size: var(--txt-sm);
}
.checklist__item:last-child { border-bottom: 0; }

/* O botão de marcar é o próprio quadrado: sem checkbox, porque a marcação
   vai ao servidor por POST e precisa funcionar sem JavaScript. */
.checklist__marcar {
    display: grid; place-items: center;
    width: 22px; height: 22px; flex: 0 0 auto;
    font-size: 13px; line-height: 1; color: var(--sucesso);
    background: var(--superficie);
    border: 1.5px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}
.checklist__marcar:hover { border-color: var(--info); }

.checklist__texto { flex: 1; min-width: 0; }
.checklist__autor { font-size: var(--txt-xs); color: var(--texto-tenue); white-space: nowrap; }

.checklist__item--feito .checklist__texto { text-decoration: line-through; color: var(--texto-tenue); }
.checklist__item--feito .checklist__marcar { border-color: var(--sucesso); background: var(--sucesso-fundo); }

.checklist__remover {
    width: 24px; height: 24px; flex: 0 0 auto;
    font-size: 18px; line-height: 1; color: var(--texto-tenue);
    background: transparent; border: 0; border-radius: var(--raio-sm);
    cursor: pointer;
}
.checklist__remover:hover { color: var(--perigo); background: var(--perigo-fundo); }

.lista-pessoas { margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.lista-pessoas__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--borda);
    font-size: var(--txt-sm);
}
.lista-pessoas__item:last-child { border-bottom: 0; }
.lista-pessoas__item strong { display: block; }

/* ==========================================================================
   Anexos
   ========================================================================== */

.anexos { margin: 0; padding: 0; list-style: none; }

.anexos__item {
    display: flex; align-items: flex-start; gap: var(--e-3);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--borda);
}
.anexos__item:last-child { border-bottom: 0; }

.anexos__icone {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: 0 0 auto;
    color: var(--info); background: var(--info-fundo);
    border-radius: var(--raio);
}

.anexos__dados { flex: 1; min-width: 0; }
.anexos__nome { display: block; font-weight: 650; font-size: var(--txt-sm); word-break: break-word; }
.anexos__meta { display: block; font-size: var(--txt-xs); color: var(--texto-tenue); }

/* A impressão digital fica visível de propósito: é o que permite comprovar
   que o documento baixado é idêntico ao que foi enviado. */
.anexos__hash {
    display: block; margin-top: 2px;
    font-family: var(--fonte-mono); font-size: 11px;
    color: var(--texto-tenue);
}

/* ==========================================================================
   Notificações
   ========================================================================== */

/* Badge do sino no menu. Com o menu recolhido o rótulo some, mas o badge
   permanece: é o único sinal de que há algo por ler. */
.menu__badge {
    margin-left: auto;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    display: inline-grid; place-items: center;
    font-size: 11px; font-weight: 700; line-height: 1;
    color: hsl(0 0% 100%);
    background: var(--perigo);
    border-radius: var(--raio-total);
}
.app--recolhido .menu__badge {
    position: absolute;
    margin: 0;
    transform: translate(12px, -12px);
}
.app--recolhido .menu__item { position: relative; }

.barra-movel__sino {
    position: relative;
    margin-left: auto;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    color: inherit;
    border: 1px solid hsl(0 0% 100% / 0.25);
    border-radius: var(--raio);
}
.barra-movel__sino .menu__badge { position: absolute; margin: 0; transform: translate(12px, -12px); }

.notificacoes { margin: 0; padding: 0; list-style: none; }

.notificacoes__item {
    display: flex; align-items: flex-start; gap: var(--e-3);
    border-bottom: 1px solid var(--borda);
}
.notificacoes__item:last-child { border-bottom: 0; }
.notificacoes__item--nova { background: var(--info-fundo); }

.notificacoes__marcador {
    width: 8px; height: 8px; flex: 0 0 auto;
    margin: calc(var(--e-4) + 4px) 0 0 var(--e-4);
    border-radius: var(--raio-total);
    background: transparent;
}
.notificacoes__item--nova .notificacoes__marcador { background: var(--info); }

.notificacoes__corpo {
    flex: 1; min-width: 0;
    display: block;
    padding: var(--e-4) var(--e-4) var(--e-4) 0;
    color: inherit; text-decoration: none;
}
.notificacoes__corpo:hover .notificacoes__titulo { text-decoration: underline; }

.notificacoes__titulo { display: block; font-weight: 650; font-size: var(--txt-sm); }
.notificacoes__mensagem {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 2px 0;
    font-size: var(--txt-sm); color: var(--texto-suave);
}
.notificacoes__meta { display: block; font-size: var(--txt-xs); color: var(--texto-tenue); }

/* Filtro em botões: o escolhido fica marcado. */
.filtros .botao[aria-current="page"] {
    color: hsl(0 0% 100%); background: var(--navy-800); border-color: var(--navy-800);
}

/* ==========================================================================
   Portal do convidado externo
   ========================================================================== */

.externo {
    display: grid; place-items: start center;
    min-height: 100dvh;
    padding: var(--e-6) var(--e-4);
    background:
        radial-gradient(60rem 40rem at 50% -10%, hsl(222 55% 30% / 0.35), transparent 65%),
        var(--navy-900);
}

.externo__caixa { width: 100%; max-width: 38rem; }

.externo__marca {
    display: flex; align-items: center; justify-content: center; gap: var(--e-3);
    margin-bottom: var(--e-5);
    text-align: left;
}
.externo__orgao {
    margin: 0; font-size: var(--txt-lg); font-weight: 700;
    color: hsl(0 0% 100%); letter-spacing: -0.01em;
}
.externo__cidade {
    margin: 0; font-size: var(--txt-xs);
    color: hsl(215 30% 76%); text-transform: uppercase; letter-spacing: 0.08em;
}

/* Cartão sempre claro sobre o fundo navy, como na tela de acesso. */
.externo .cartao {
    background: hsl(0 0% 100%);
    border-color: hsl(215 20% 88%);
    border-top: 3px solid var(--dourado);
    box-shadow: 0 20px 50px hsl(222 60% 8% / 0.35);
    color: hsl(215 32% 14%);
}
.externo .cartao__corpo { padding: var(--e-6) var(--e-5); }
.externo .campo__rotulo { color: hsl(215 25% 28%); }
.externo .campo__entrada {
    background: hsl(215 30% 98%); border-color: hsl(215 18% 85%); color: hsl(215 32% 14%);
}
.externo .campo__entrada:focus { background: hsl(0 0% 100%); }
.externo .botao--destaque { background: var(--navy-800); color: hsl(0 0% 100%); min-height: 46px; }
.externo .botao--destaque:hover { background: var(--navy-700); }

.externo__saudacao { font-size: var(--txt-base); color: hsl(215 20% 32%); }

.externo__instrucoes {
    padding: var(--e-4);
    margin-bottom: var(--e-4);
    background: hsl(215 30% 97%);
    border-left: 3px solid var(--navy-600);
    border-radius: var(--raio);
}
.externo__instrucoes h2 {
    margin: 0 0 var(--e-2);
    font-size: var(--txt-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: hsl(215 16% 46%);
}

.externo__dados {
    padding: var(--e-3) 0 var(--e-4);
    margin-bottom: var(--e-4);
    border-bottom: 1px solid hsl(215 20% 90%);
}

.externo__confirmacao { text-align: center; }
.externo__selo {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px;
    margin-bottom: var(--e-4);
    color: var(--sucesso); background: var(--sucesso-fundo);
    border-radius: var(--raio-total);
}
.externo__selo--alerta { color: var(--alerta); background: var(--alerta-fundo); }

.externo__rodape {
    margin-top: var(--e-5);
    text-align: center;
    font-size: var(--txt-xs); line-height: 1.7;
    color: hsl(215 28% 70%);
}

/* ==========================================================================
   Links de convidado na tela da atividade
   ========================================================================== */

.links-convidado { margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.links-convidado__item {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--borda);
    font-size: var(--txt-sm);
}
.links-convidado__item:last-child { border-bottom: 0; }

.link-gerado {
    margin: var(--e-3) 0;
    padding: var(--e-4);
    background: var(--dourado-suave);
    border: 1px dashed var(--dourado);
    border-radius: var(--raio);
}
.link-gerado__url {
    display: block;
    margin: var(--e-2) 0;
    padding: var(--e-3);
    font-family: var(--fonte-mono); font-size: var(--txt-xs);
    word-break: break-all;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    color: var(--texto);
}

/* ==========================================================================
   Trilha de auditoria
   Bloco autocontido: as regras base vêm primeiro e o ajuste de tela estreita
   logo depois, dentro da própria seção. Ver a nota sobre ordem de declaração
   no bloco responsivo do layout.
   ========================================================================== */

.auditoria { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }

.auditoria__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--borda);
}
.auditoria__item:last-child { border-bottom: 0; padding-bottom: 0; }
.auditoria__item:first-child { padding-top: 0; }

/* O fio que liga os marcadores e transforma a lista em linha do tempo. */
.auditoria__marcador {
    position: relative;
    width: 0.75rem; height: 0.75rem;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: var(--texto-tenue);
    flex: none;
}
.auditoria__marcador::after {
    content: '';
    position: absolute;
    left: 50%; top: 1.05rem;
    width: 1px; height: calc(100% + 2.6rem);
    transform: translateX(-50%);
    background: var(--borda);
}
.auditoria__item:last-child .auditoria__marcador::after { display: none; }

.auditoria__marcador--sucesso { background: var(--sucesso); }
.auditoria__marcador--info    { background: var(--info); }
.auditoria__marcador--atencao { background: var(--alerta); }
.auditoria__marcador--perigo  { background: var(--perigo); }
.auditoria__marcador--marca   { background: var(--dourado); }
.auditoria__marcador--neutro  { background: var(--texto-tenue); }

.auditoria__conteudo { min-width: 0; }

.auditoria__topo {
    display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
    margin-bottom: var(--e-2);
}
.auditoria__data {
    margin-left: auto;
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    white-space: nowrap;
}

.auditoria__assunto {
    margin: 0 0 var(--e-1);
    font-size: var(--txt-sm); font-weight: 600;
    overflow-wrap: anywhere;
}
.auditoria__cru { font-family: var(--fonte-mono); font-weight: 400; color: var(--texto-suave); }

.auditoria__autor {
    margin: 0;
    font-size: var(--txt-xs);
    color: var(--texto-suave);
}
.auditoria__ip { font-family: var(--fonte-mono); }

.auditoria__detalhe { margin-top: var(--e-3); }
.auditoria__detalhe > summary {
    cursor: pointer;
    font-size: var(--txt-xs);
    color: var(--texto-suave);
    padding: var(--e-1) 0;
}
.auditoria__detalhe > summary:hover { color: var(--info); }
.auditoria__detalhe[open] > summary { margin-bottom: var(--e-3); }

.auditoria__mudancas { font-size: var(--txt-xs); }
.auditoria__antes  { color: var(--texto-tenue); text-decoration: line-through; }
.auditoria__depois { font-weight: 600; }

.auditoria__campos {
    display: grid; grid-template-columns: minmax(6rem, auto) 1fr;
    gap: var(--e-1) var(--e-3);
    margin: 0;
    font-size: var(--txt-xs);
}
.auditoria__campos dt { color: var(--texto-tenue); }
.auditoria__campos dd { margin: 0; overflow-wrap: anywhere; }

.auditoria__tecnico {
    margin: var(--e-3) 0 0;
    font-family: var(--fonte-mono);
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    overflow-wrap: anywhere;
}

/* -- Paginação ------------------------------------------------------------ */
.paginacao {
    display: flex; align-items: center; justify-content: center;
    gap: var(--e-3); flex-wrap: wrap;
    margin-top: var(--e-4);
}
.paginacao__posicao { font-size: var(--txt-sm); color: var(--texto-suave); }

@media (max-width: 40rem) {
    /* Em tela estreita a data desce para a própria linha em vez de espremer
       os selos contra a borda. */
    .auditoria__data { margin-left: 0; width: 100%; }
    .auditoria__mudancas { display: block; overflow-x: auto; }
}

/* ==========================================================================
   Grade de preferências de aviso
   ========================================================================== */

.preferencias__canal { text-align: center; white-space: nowrap; }
.preferencias__caixa { text-align: center; width: 8rem; }
.preferencias__caixa input[type="checkbox"] { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.preferencias__vazio { color: var(--texto-tenue); }

/* O bloco de identificação virou link: precisa perder a aparência de link e
   ganhar a resposta ao passar o mouse que os itens do menu já têm. */
a.menu__usuario { text-decoration: none; color: inherit; transition: background var(--transicao); }
a.menu__usuario:hover { background: hsl(0 0% 100% / 0.06); }
a.menu__usuario[aria-current="page"] { background: hsl(0 0% 100% / 0.10); }

@media (max-width: 40rem) {
    .preferencias__caixa { width: auto; }
}

/* ==========================================================================
   Utilitários de espaçamento e recorte

   Existem porque a CSP (RNF04) proíbe atributo `style`: o navegador descarta
   `style="margin-top:1rem"` sem avisar ninguém, e o ajuste simplesmente não
   acontece. Como o problema só aparece no navegador — nunca no HTML gerado —
   ele passou despercebido até a revisão da Fase 4.

   São poucas e propositalmente genéricas: cobrem o ajuste pontual de um
   componente já existente. Regra de vizinhança ou variante nova continua
   pertencendo à seção do próprio componente, não aqui.
   ========================================================================== */

.recortado { overflow: hidden; }

.sem-margem       { margin: 0; }
.sem-margem-topo  { margin-top: 0; }
.sem-margem-base  { margin-bottom: 0; }

.espaco-acima-1  { margin-top: var(--e-3); }
.espaco-acima-2  { margin-top: var(--e-4); }
.espaco-abaixo-1 { margin-bottom: var(--e-3); }
.espaco-abaixo-2 { margin-bottom: var(--e-4); }
.espaco-abaixo-3 { margin-bottom: var(--e-5); }

.a-direita { margin-left: auto; }

/* Formulário de uma ação só, que precisa conviver na mesma linha de outro. */
.em-linha { display: inline; }

.linha-botoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.linha-botoes--centro { align-items: center; flex-wrap: nowrap; }

/* Bloco final de um cartão, separado do que vem antes por um filete. */
.bloco-separado {
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
}

/* Tabela que ocupa o corpo inteiro do cartão: a moldura já é a do cartão. */
.tabela-caixa--embutida { border: 0; border-radius: 0; }

/* O título da linha vira link sem deixar de parecer título. */
.tabela__principal { text-decoration: none; }

.campo__entrada--maiusculas { text-transform: uppercase; }
.campo__entrada--curto { max-width: 8rem; }

/* Campo que precisa alinhar pela base com os vizinhos de duas linhas. */
.campo--rodape { align-self: end; padding-bottom: var(--e-3); }

.rotulo-clicavel { cursor: pointer; }

.texto-apoio { margin-bottom: var(--e-3); font-size: var(--txt-sm); }

/* ==========================================================================
   Painéis de indicadores (RF12)
   ========================================================================== */

/* Linha de contexto sob o rótulo: de onde saiu o número e qual é a meta.
   Indicador sem base de comparação vira enfeite — quem lê não sabe se 78%
   é bom ou ruim. */
.indicador__nota {
    display: block;
    margin-top: 2px;
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    line-height: 1.35;
}

/* Nesta grade o rótulo carrega duas linhas: o alinhamento precisa ser pelo
   topo, senão o cartão com nota fica desalinhado dos vizinhos sem nota. */
.indicadores .indicador { align-items: flex-start; }
.indicadores .indicador__icone { margin-top: 2px; }

/* Filtro de período: os rótulos "de"/"até" acompanham os campos na linha. */
.filtros .campo__rotulo { margin-bottom: 0; align-self: center; }

/* -- Campo de busca integrado --------------------------------------------- */

/*
   A lupa é ornamento; quem envia é o botão "Filtrar" ao lado.
   Já foi o submit, e funcionava enquanto a busca era o único campo do
   formulário. Ao entrar o seletor de equipe, deixou de funcionar na prática:
   ninguém associa uma lupa a "aplicar a equipe", e sem JavaScript o <select>
   não envia nada sozinho. Botão de envio precisa dizer o que faz.
*/
.busca {
    display: flex; align-items: center;
    /* 42px é a mesma altura de .botao e .campo__entrada: é o que faz o campo,
       o seletor e os botões assentarem na mesma linha de base. */
    min-height: 42px;
    padding-left: var(--e-3);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca:focus-within {
    border-color: var(--info);
    box-shadow: 0 0 0 3px var(--info-fundo);
}
.busca__icone {
    display: grid; place-items: center;
    flex: 0 0 auto;
    color: var(--texto-tenue);
}
.busca__campo {
    flex: 1; min-width: 0;
    padding: 0.5rem var(--e-3) 0.5rem var(--e-2);
    font: inherit; font-size: var(--txt-sm);
    color: var(--texto);
    background: transparent;
    border: 0;
}
.busca__campo:focus { outline: none; }
.busca__campo::placeholder { color: var(--texto-tenue); }

/* ==========================================================================
   Detalhe da atividade

   A coluna da direita responde "e agora?"; a da esquerda, "o que é isto?".
   O cartão de prazo abre a lateral porque é a pergunta que traz a maioria das
   pessoas à tela — e a única cuja resposta muda sozinha com o passar do tempo.
   ========================================================================== */

/* A lateral acompanha a rolagem: em atividade com muito comentário, as ações
   ficavam a três telas de distância do texto que motivou o clique. */
@media (min-width: 64rem) {
    .colunas__lateral { position: sticky; top: var(--e-4); }
}

.prazo-cartao {
    display: grid; gap: var(--e-2);
    padding: var(--e-5);
    margin-bottom: var(--e-5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: var(--superficie);
}
.prazo-cartao--atencao { border-color: var(--alerta); background: var(--alerta-fundo); }
.prazo-cartao--perigo  { border-color: var(--perigo); background: var(--perigo-fundo); }
.prazo-cartao--sucesso { border-color: var(--sucesso); background: var(--sucesso-fundo); }

.prazo-cartao__rotulo {
    font-size: var(--txt-xs); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--texto-suave);
}
.prazo-cartao--atencao .prazo-cartao__rotulo { color: var(--alerta); }
.prazo-cartao--perigo  .prazo-cartao__rotulo { color: var(--perigo); }
.prazo-cartao--sucesso .prazo-cartao__rotulo { color: var(--sucesso); }

/* Número grande porque é para ser lido de longe, em pé, com o celular na mão. */
.prazo-cartao__contagem {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--texto);
}
.prazo-cartao--atencao .prazo-cartao__contagem { color: var(--alerta); }
.prazo-cartao--perigo  .prazo-cartao__contagem { color: var(--perigo); }
.prazo-cartao--sucesso .prazo-cartao__contagem { color: var(--sucesso); }

.prazo-cartao__data { font-size: var(--txt-sm); color: var(--texto-suave); }

/* -- Cabeçalho do checklist ----------------------------------------------- */

.checklist-topo {
    display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
    margin-bottom: var(--e-3);
}
.checklist-topo .progresso { flex: 1 1 8rem; max-width: 14rem; }

/* -- Comentário com avatar ------------------------------------------------ */

/*
   Grade de duas colunas em vez de flex: o texto do comentário precisa alinhar
   com o nome do autor, e não com a borda do avatar.
*/
/* Só o comentário COM avatar vira grade. O cartão do pool reaproveita o mesmo
   bloco sem avatar: aplicar a grade nele jogava selos e título em colunas
   separadas e desmontava o cartão. */
.comentario--com-avatar {
    display: grid; grid-template-columns: auto 1fr; gap: var(--e-3);
}
.comentario--com-avatar .comentario__avatar { grid-row: 1 / span 2; }
.comentario--com-avatar .comentario__topo,
.comentario--com-avatar .comentario__texto { grid-column: 2; }
.comentario--com-avatar .comentario__texto { align-self: start; }

/* -- Anexo com selo de formato -------------------------------------------- */

/*
   A extensão no lugar do ícone genérico: numa lista de seis documentos, saber
   qual é a planilha e qual é o ofício em PDF é o que se procura primeiro.
*/
.anexos__formato {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: var(--raio);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    font-family: var(--fonte-mono);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--texto-suave);
    text-transform: uppercase;
}

/* -- Navegação de mês ------------------------------------------------------ */

/* Botões quadrados e juntos, no lugar de dois botões de texto: a seta já diz
   o que faz, e o par ocupa metade do espaço no cabeçalho. */
.passo-mes { display: inline-flex; gap: var(--e-2); flex: 0 0 auto; }
.passo-mes__botao {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    color: var(--texto-suave);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    text-decoration: none;
    transition: border-color var(--transicao), color var(--transicao);
}
.passo-mes__botao:hover { color: var(--info); border-color: var(--info); }

/* -- Prazo do convidado ---------------------------------------------------- */

/* Etiqueta larga, não a pílula compacta do cartão: aqui ela é a informação
   principal da página, e não um sinal ao lado de outros. */
.externo__prazo {
    display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
    width: 100%;
    margin: 0 0 var(--e-4);
    padding: var(--e-3) var(--e-4);
    font-size: var(--txt-sm);
    border-radius: var(--raio);
}
.externo__prazo span { font-weight: 400; color: var(--texto-suave); }

/* -- Cartões de canal de aviso --------------------------------------------- */

.canais {
    display: grid; gap: var(--e-3);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin: var(--e-4) 0;
}
.canais__item {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
/* Canal indisponível continua visível, e apagado: escondê-lo faria parecer
   que o sistema não tem o recurso, quando ele só não está configurado. */
.canais__item--inativo { background: var(--superficie-2); }
.canais__item--inativo .canais__icone { color: var(--texto-tenue); background: var(--superficie); }

.canais__icone {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: 0 0 auto;
    color: var(--info); background: var(--info-fundo);
    border-radius: var(--raio);
}
.canais__texto { flex: 1; min-width: 0; font-size: var(--txt-sm); line-height: 1.4; }
.canais__texto strong { display: block; }
.canais__texto span {
    display: block;
    font-size: var(--txt-xs); color: var(--texto-tenue);
    overflow-wrap: anywhere;
}

/* -- Ícone por tipo de notificação ----------------------------------------- */

.notificacoes__icone {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    align-self: start;
    border-radius: var(--raio);
    color: var(--texto-suave);
    background: var(--superficie-2);
}
.notificacoes__icone--info    { color: var(--info);    background: var(--info-fundo); }
.notificacoes__icone--sucesso { color: var(--sucesso); background: var(--sucesso-fundo); }
.notificacoes__icone--atencao { color: var(--alerta);  background: var(--alerta-fundo); }
.notificacoes__icone--perigo  { color: var(--perigo);  background: var(--perigo-fundo); }
.notificacoes__icone--marca   { color: var(--dourado-escuro); background: var(--dourado-suave); }

/* Avatar do cabeçalho: maior, porque ali ele identifica a página inteira. */
.avatar--grande { width: 42px; height: 42px; font-size: var(--txt-sm); box-shadow: none; }

/* Pilha de cartões fora do quadro: mesma separação entre cartões que a coluna
   usa, sem o fundo cinza que só faz sentido quando há colunas para distinguir. */
.pilha-cartoes { display: grid; gap: var(--e-3); }

/* -- Limite de trabalho em curso (WIP) ------------------------------------ */

/*
   Política de quadro, não estado da atividade: por isso a forma é de crachá
   discreto, e não de selo colorido como os do cartão. Ele só muda de cor
   quando a etapa passa do limite — sinalizar o tempo todo ensinaria a ignorar.
*/
.quadro__wip {
    padding: 1px 6px;
    font-size: var(--txt-xs); font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--texto-tenue);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    white-space: nowrap;
}
.quadro__wip--excedido {
    color: var(--perigo);
    background: var(--perigo-fundo);
    border-color: var(--perigo);
}

/* ==========================================================================
   Configurações
   Bloco autocontido: regras base primeiro, ajuste de tela estreita logo
   depois, dentro da própria seção. Ver a nota sobre ordem de declaração no
   bloco responsivo do layout.
   ========================================================================== */

/* Cinco abas não cabem em 360px. Em vez de quebrar em duas linhas — que
   empurra o conteúdo para baixo e faz a régua "pular" ao trocar de aba —, a
   faixa rola na horizontal e mantém altura constante. */
.abas--rolavel {
    display: flex; max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.abas--rolavel .abas__item { flex: 0 0 auto; }

/* Texto de comando e valor técnico: precisa ser copiável a olho, caractere a
   caractere, porque é digitado em outro lugar (token, nome de servidor). */
code {
    padding: 1px 5px;
    font-family: var(--fonte-mono); font-size: 0.92em;
    color: var(--texto);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    word-break: break-word;
}

/* Roteiro numerado. A numeração é do próprio <ol>: a ordem é informação —
   "peça o /start ANTES de procurar a conversa" —, não enfeite. */
.passos {
    display: grid; gap: var(--e-3);
    margin: var(--e-3) 0 0;
    padding-left: var(--e-6);
    font-size: var(--txt-sm); color: var(--texto-suave);
}
.passos__item { padding-left: var(--e-1); }
.passos__item::marker { color: var(--texto-tenue); font-weight: 700; }
.passos strong { color: var(--texto); font-weight: 700; }

/* -- Matriz de perfis ----------------------------------------------------- */

.matriz { min-width: 46rem; }
.matriz__perfil { text-align: center; white-space: nowrap; }
.matriz__celula { text-align: center; vertical-align: middle; }

/* A linha de grupo é um cabeçalho dentro da tabela: sem ela, quarenta linhas
   de capacidade viram um paredão em que ninguém acha o que procura. */
.matriz__grupo th {
    padding-top: var(--e-4);
    font-size: var(--txt-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--texto-tenue);
    background: var(--superficie-2);
    text-align: left;
}

.matriz__sim { display: inline-flex; color: var(--sucesso); }
/* Ausência de permissão é um traço apagado, não um X vermelho: "não pode" é
   o estado normal da maioria das células, e alarmar em todas elas ensina a
   ignorar o vermelho onde ele importa. */
.matriz__nao { color: var(--texto-tenue); }

@media (max-width: 48rem) {
    .matriz { min-width: 34rem; font-size: var(--txt-xs); }
    .matriz .tabela__apoio { display: none; }
    .matriz .selo { font-size: 0.65rem; }
}