/* =============================================================================
   Árvore de Dados
   Folha de estilo única. Organizada em: tokens, base, acessibilidade,
   cabeçalho, busca, árvore, ramo expandido, painel administrativo, rodapé,
   responsividade e preferências de movimento.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------- */

:root {
    --marinho: #0B2A45;
    --marinho-claro: #12395C;
    --verde: #0F6B5C;
    --verde-claro: #17A98F;
    --verde-agua: #2FD4B4;
    --folha: #7FB77E;
    --folha-clara: #A9D3A0;
    --casca: #23415C;

    --fundo: #F4F7F5;
    --fundo-alt: #EAF1EC;
    --superficie: #FFFFFF;
    --texto: #16323F;
    --texto-suave: #4A6572;
    /* Escurecido para manter contraste mínimo de 4.5:1 sobre o branco,
       inclusive nos textos de apoio e no placeholder da busca. */
    --texto-fraco: #5B7180;
    --borda: #DCE6DF;

    --sucesso: #14735C;
    --erro: #A32218;
    --info: #14557A;

    --raio: 14px;
    --raio-grande: 26px;
    --raio-pilula: 999px;

    --sombra-1: 0 1px 2px rgba(11, 42, 69, .06), 0 2px 8px rgba(11, 42, 69, .06);
    --sombra-2: 0 4px 10px rgba(11, 42, 69, .08), 0 12px 28px rgba(11, 42, 69, .10);
    --sombra-3: 0 18px 48px rgba(11, 42, 69, .18);

    --duracao: 820ms;
    --duracao-curta: 220ms;
    --suavizacao: cubic-bezier(.22, .61, .36, 1);

    --largura-maxima: 1240px;
    --altura-cabecalho: 72px;

    /* Largura da árvore (e da coluna dela) quando uma área está aberta. */
    --arvore-aberta: 320px;
    /* E quando nenhuma está: a copa ocupa o palco inteiro. */
    --arvore-fechada: 860px;
}

/* --- Base ------------------------------------------------------------------ */

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, var(--fundo) 45%, var(--fundo-alt) 100%)
        fixed;
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    margin: 0 0 .4em;
    line-height: 1.2;
    font-weight: 700;
    color: var(--marinho);
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--verde);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

.conteudo {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.icone {
    display: block;
    flex: none;
}

/* Sprite de ícones: presente no DOM apenas como fonte para <use>. */
.sprite-icones {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Acessibilidade -------------------------------------------------------- */

.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    padding: .7rem 1.1rem;
    background: var(--superficie);
    color: var(--marinho);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
    font-weight: 600;
    transition: top var(--duracao-curta) var(--suavizacao);
}

.pular-para-conteudo:focus {
    top: .75rem;
}

:focus-visible {
    outline: 3px solid var(--verde-claro);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Cabeçalho ------------------------------------------------------------- */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, var(--marinho) 0%, #0A2540 100%);
    color: #fff;
    box-shadow: 0 2px 16px rgba(11, 42, 69, .22);
}

.cabecalho__interno {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    min-height: var(--altura-cabecalho);
    padding: .6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    flex: none;
}

.marca:hover {
    text-decoration: none;
    color: var(--verde-agua);
}

.marca__simbolo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--verde-agua);
}

.marca__arvore {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.marca__nome {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.cabecalho__acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

.botao-fantasma {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: var(--raio-pilula);
    color: rgba(255, 255, 255, .88);
    font-size: .93rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.botao-fantasma:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
}

.menu-usuario {
    position: relative;
}

.menu-usuario__gatilho {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem .35rem .35rem;
    border-radius: var(--raio-pilula);
    cursor: pointer;
    list-style: none;
    color: rgba(255, 255, 255, .92);
    font-size: .93rem;
}

.menu-usuario__gatilho::-webkit-details-marker {
    display: none;
}

.menu-usuario__gatilho:hover {
    background: rgba(255, 255, 255, .12);
}

.avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--verde-claro);
    color: #06251F;
    font-weight: 700;
}

.menu-usuario__caixa {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 230px;
    padding: .9rem 1rem;
    background: var(--superficie);
    color: var(--texto);
    border-radius: var(--raio);
    box-shadow: var(--sombra-3);
    display: grid;
    gap: .5rem;
    z-index: 50;
}

.menu-usuario__identificacao {
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--borda);
    font-size: .9rem;
    color: var(--texto-suave);
}

.botao-texto {
    padding: 0;
    background: none;
    border: 0;
    color: var(--erro);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.botao-texto:hover {
    text-decoration: underline;
}

/* --- Busca ----------------------------------------------------------------- */

.busca {
    position: relative;
    flex: 1 1 460px;
    max-width: 520px;
    display: flex;
    align-items: center;
}

.busca__icone {
    position: absolute;
    left: .9rem;
    color: var(--texto-fraco);
    pointer-events: none;
}

.busca__campo {
    width: 100%;
    padding: .7rem 1rem .7rem 2.7rem;
    border: 1px solid transparent;
    border-radius: var(--raio-pilula);
    background: rgba(255, 255, 255, .96);
    color: var(--texto);
    font: inherit;
    font-size: .97rem;
}

.busca__campo::placeholder {
    color: var(--texto-fraco);
}

.busca__campo:focus {
    outline: 3px solid var(--verde-agua);
    outline-offset: 1px;
}

.busca__enviar {
    position: absolute;
    right: .35rem;
    padding: .45rem .9rem;
    border: 0;
    border-radius: var(--raio-pilula);
    background: var(--verde);
    color: #fff;
    font: inherit;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
}

.busca__enviar:hover {
    background: var(--verde-claro);
}

.busca__resultados {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    max-height: 62vh;
    overflow-y: auto;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra-3);
    z-index: 60;
}

.busca__resultados[hidden] {
    display: none;
}

.busca__item a,
.busca__item span.busca__vazio {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    color: var(--texto);
}

.busca__item a:hover,
.busca__item a:focus-visible,
.busca__item[aria-selected="true"] a {
    background: var(--fundo-alt);
    text-decoration: none;
}

.busca__rotulo {
    display: block;
    font-weight: 600;
}

.busca__contexto {
    display: block;
    font-size: .82rem;
    color: var(--texto-fraco);
}

.busca__vazio {
    color: var(--texto-suave);
}

/* --- Avisos ---------------------------------------------------------------- */

.avisos {
    max-width: var(--largura-maxima);
    margin: 1rem auto 0;
    padding: 0 1.25rem;
    display: grid;
    gap: .5rem;
}

.aviso {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .8rem 1rem;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
    font-size: .95rem;
}

.aviso__marca {
    width: 6px;
    align-self: stretch;
    border-radius: 3px;
    background: var(--info);
    flex: none;
}

.aviso--sucesso .aviso__marca { background: var(--sucesso); }
.aviso--erro .aviso__marca { background: var(--erro); }
.aviso--info .aviso__marca { background: var(--info); }

.aviso--erro { color: #6E1710; }

/* --- Palco: árvore e relatórios lado a lado --------------------------------- */

/*
   O palco é o contêiner das conexões. A árvore fica no fluxo — nunca flutua —
   e as linhas até os relatórios saem dela, desenhadas pelo navegador.

   Sem altura fixa e sem overflow escondido: a altura vem do conteúdo.
*/
.tree-container {
    position: relative;
    /* Acima da folhagem de fundo, que fica em z-index 0. */
    z-index: 1;
    width: 100%;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
}

/* --- Folhagem de fundo ----------------------------------------------------- */

/*
   Textura, não ilustração: fica presa à janela, atrás de tudo, e não intercepta
   nenhum clique. `overflow: hidden` porque os ramos sangram para fora de
   propósito — sem ele apareceria barra de rolagem.
*/
.fundo-folhas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--verde);
}

.fundo-folhas__molde {
    position: absolute;
    width: 0;
    height: 0;
}

.fundo-folhas__caule {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.fundo-folhas__folhas {
    fill: currentColor;
}

.fundo-folhas__ramo {
    position: absolute;
    width: var(--tamanho, 260px);
    height: auto;
    opacity: var(--forca, .055);
    transform: rotate(var(--giro, 0deg)) scaleX(var(--espelho, 1));
}

/*
   Ramos menores e em maior número: folha grande demais vira mancha, e o que se
   quer aqui é uma trama fina. Alturas e giros irregulares de propósito, para
   não se ler como padrão repetido.
*/
.fundo-folhas__ramo--a { --tamanho: 190px; --giro: 20deg;   top: -3rem;    left: -3.5rem; }
.fundo-folhas__ramo--b { --tamanho: 150px; --giro: -14deg;  top: 22%;      left: -3rem;  --forca: .05; }
.fundo-folhas__ramo--c { --tamanho: 170px; --giro: 8deg;    top: 52%;      left: -4rem;  --forca: .042; }
.fundo-folhas__ramo--d { --tamanho: 165px; --giro: 152deg;  bottom: -3rem; left: 6%;     --forca: .04; }
.fundo-folhas__ramo--e { --tamanho: 185px; --giro: -18deg;  --espelho: -1; top: -3.5rem; right: -3.5rem; }
.fundo-folhas__ramo--f { --tamanho: 155px; --giro: 12deg;   --espelho: -1; top: 26%;     right: -3rem; --forca: .05; }
.fundo-folhas__ramo--g { --tamanho: 175px; --giro: -6deg;   --espelho: -1; top: 56%;     right: -4rem; --forca: .042; }
.fundo-folhas__ramo--h { --tamanho: 160px; --giro: -148deg; --espelho: -1; bottom: -3rem; right: 7%;   --forca: .04; }

/* Em tela estreita a folhagem viraria sujeira atrás do conteúdo. */
@media (max-width: 900px) {
    .fundo-folhas__ramo--b,
    .fundo-folhas__ramo--c,
    .fundo-folhas__ramo--d,
    .fundo-folhas__ramo--f,
    .fundo-folhas__ramo--g,
    .fundo-folhas__ramo--h {
        display: none;
    }

    .fundo-folhas__ramo {
        --tamanho: 130px;
    }
}

/* --- Escolha da aba no painel ---------------------------------------------- */

.escolha-abas {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.escolha-abas__item {
    display: grid;
    gap: .3rem;
}

.escolha-abas__acoes {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
}

/* Os controles de ordem são formulários: funcionam sem JavaScript. */
.escolha-abas__acoes form {
    display: inline;
}

.botao-texto--neutro {
    color: var(--verde);
    font-size: .85rem;
}

.escolha-abas__excluir {
    color: var(--erro);
}

.escolha-abas__cartao {
    display: grid;
    gap: .2rem;
    padding: 1rem 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
    color: var(--marinho);
    transition: border-color 140ms var(--suavizacao), box-shadow 140ms var(--suavizacao);
}

.escolha-abas__cartao:hover {
    text-decoration: none;
    border-color: var(--verde);
    box-shadow: var(--sombra-2);
}

.escolha-abas__nome {
    font-size: 1.05rem;
    font-weight: 700;
}

.escolha-abas__unidade {
    font-size: .82rem;
    color: var(--verde);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.escolha-abas__total {
    font-size: .88rem;
    color: var(--texto-suave);
}

/* --- Abas da árvore ------------------------------------------------------- */

/*
   Faixa fina no alto da área de conteúdo, alinhada à esquerda. A linha
   horizontal nasce da própria faixa e a aba ativa se encaixa nela, para as abas
   parecerem parte da página e não um controle solto por cima.
*/
.abas-arvore {
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--borda);
}

.abas-arvore__faixa {
    display: flex;
    gap: .25rem;
    /*
       Em tela estreita a faixa rola dentro de si mesma. A rolagem fica contida
       aqui e nunca vira rolagem horizontal da página.
    */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    /* Espaço para o foco não ser cortado pela borda da faixa. */
    padding: 2px 2px 0;
    margin-bottom: -1px;
}

.abas-arvore__aba {
    flex: none;
    padding: .4rem .85rem;
    border: 1px solid var(--borda);
    border-bottom-color: transparent;
    border-radius: 8px 8px 0 0;
    background: var(--superficie);
    color: var(--marinho);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transition:
        background-color 140ms var(--suavizacao),
        color 140ms var(--suavizacao);
}

.abas-arvore__aba:hover {
    text-decoration: none;
    background: var(--fundo-alt);
}

.abas-arvore__aba--ativa,
.abas-arvore__aba[aria-selected="true"] {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

.abas-arvore__aba--ativa:hover {
    background: var(--verde);
}

.abas-arvore__aba:focus-visible {
    outline: 2px solid var(--verde-agua);
    outline-offset: 2px;
}

.abas-arvore__alerta {
    margin: .5rem 0 .75rem;
    padding: .5rem .75rem;
    border-left: 3px solid #B4551F;
    background: rgba(180, 85, 31, .08);
    color: #7A3A15;
    font-size: .85rem;
}

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

/* Árvore sem painéis configurados: o desenho continua, o aviso ocupa o lugar. */
.areas__vazio {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translateX(-50%);
    margin: 0;
    max-width: calc(100% - 2rem);
    padding: .5rem 1rem;
    border-radius: var(--raio-pilula);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--sombra-1);
    color: var(--texto-suave);
    font-size: .9rem;
    text-align: center;
    white-space: nowrap;
}

.arvore__unidade {
    margin: 0 0 .15rem;
    /* Altura reservada mesmo vazia, para a árvore não subir na troca de aba. */
    min-height: 1.2em;
    color: var(--verde);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/*
   Largura da copa, e também da coluna que a abriga.

   Não é animada por CSS. Animar esta medida — que afeta layout — deixava a
   ilustração sem ser repintada ao fim da transição: o elemento continuava
   visível e com as medidas certas, mas a imagem não aparecia. Quem move a
   árvore é o JavaScript, por transform, que é composto na GPU e não reflowa.
*/
.palco {
    display: grid;
    gap: clamp(1rem, 4vw, 3rem);
    align-items: center;
    --copa-largura: var(--arvore-fechada);
}

/* As linhas ficam atrás de tudo. */
.tree-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.palco[data-estado="completa"] .tree-connectors {
    display: none;
}

/*
   Enquanto a árvore encolhe, os observadores de tamanho redesenham as linhas a
   cada quadro — e elas apontariam para cartões ainda invisíveis, para depois
   serem reanimadas do zero quando o layout assenta. Ficam escondidas até lá.
*/
.palco--assentando .tree-connectors {
    visibility: hidden;
}

.moldura {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
}

.moldura__rodape {
    display: none;
}

.palco[data-estado="completa"] .ramo-expandido {
    display: none;
}

/*
   Área selecionada: a árvore encolhe para uma coluna e os relatórios ocupam a
   outra. Ela continua ali, no meio do fluxo, ligada aos cartões pelas linhas.
*/
/*
   A coluna da árvore usa a mesma medida animada da copa, então as duas encolhem
   juntas: no instante em que a segunda coluna nasce, a primeira ainda tem a
   largura de antes e nada salta.
*/
.palco[data-estado="area"] {
    grid-template-columns: minmax(0, var(--copa-largura)) minmax(0, 1fr);
    align-items: start;
    --copa-largura: var(--arvore-aberta);
}

.palco[data-estado="area"] .arvore__intro {
    display: none;
}

/*
   Em tamanho reduzido os rótulos seriam ilegíveis. Saem por opacidade, e não
   por display, para não sumirem de estalo: a árvore continua na tela o tempo
   todo e é ela que ancora o olhar durante a troca.
*/
.areas {
    transition: opacity 140ms ease-out;
}

.palco[data-estado="area"] .areas {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.palco[data-estado="area"] .moldura__rodape {
    display: grid;
    gap: .15rem;
    margin: .75rem 0 0;
    text-align: center;
}

.palco[data-estado="area"] .moldura__rotulo {
    font-size: .82rem;
    font-weight: 700;
    color: var(--texto-fraco);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.palco[data-estado="area"] .moldura__rodape .voltar-arvore {
    display: inline;
    font-weight: 600;
    color: var(--verde);
}

/* --- Árvore completa ------------------------------------------------------- */

.arvore__intro {
    text-align: center;
    margin-bottom: .5rem;
}

.arvore__titulo {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
}

.arvore__ajuda {
    margin: 0 0 .75rem;
    color: var(--texto-suave);
}

/*
   Contêiner de proporção fixa: a ilustração nunca distorce e as coordenadas
   percentuais dos botões valem em qualquer largura.
*/
.copa {
    position: relative;
    width: min(100%, var(--copa-largura));
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    /* O canto superior esquerdo é o ponto fixo do FLIP feito no JavaScript. */
    transform-origin: 0 0;
    /*
       Mantém a camada de composição estável. Sem isto o navegador promove a
       camada para animar e a descarta ao terminar, e o descarte deixava a
       ilustração sem pintar — presente e clicável, mas invisível.
    */
    will-change: transform;
}

.copa__ilustracao {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.areas {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.areas__item {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(-50%, -50%);
    max-width: 32%;
}

.ramo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .95rem .45rem .45rem;
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-2);
    color: var(--marinho);
    font-size: clamp(.78rem, 1.15vw, .95rem);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition:
        transform var(--duracao-curta) var(--suavizacao),
        box-shadow var(--duracao-curta) var(--suavizacao),
        border-color var(--duracao-curta) var(--suavizacao);
}

.ramo:hover,
.ramo:focus-visible {
    transform: translateY(-2px);
    border-color: var(--verde-claro);
    box-shadow: var(--sombra-3);
    text-decoration: none;
}

.ramo__icone {
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--cor-ramo, var(--verde));
    color: #fff;
    flex: none;
}

.ramo__icone .icone {
    width: 60%;
    height: 60%;
}

.ramo--ativo {
    border-color: var(--verde-agua);
    box-shadow: 0 0 0 4px rgba(47, 212, 180, .3), var(--sombra-3);
}

/* --- Relatórios da área ---------------------------------------------------- */

.ramo-expandido {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ramo-expandido[hidden] {
    display: none;
}

/*
   O painel chega por último, depois que a árvore terminou de encolher. Entrar
   junto seria pior: enquanto a coluna cresce, o texto reflowa e a quebra das
   linhas muda — movimento que não comunica nada e polui a leitura.
*/
/*
   A opacidade zero fica na regra base, e não só no quadro inicial da animação:
   com `backwards` o navegador ainda pintava um quadro com o painel opaco antes
   de a animação assumir, e essa piscada de 16 ms lia como falha.
*/
.palco[data-estado="area"] .ramo-expandido {
    opacity: 0;
    animation: painel-entra 300ms 360ms cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes painel-entra {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .palco[data-estado="area"] .ramo-expandido {
        animation: none;
    }
}

.trilha {
    margin-bottom: 1rem;
    font-size: .9rem;
    color: var(--texto-suave);
}

.trilha ol {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trilha li + li::before {
    content: "›";
    margin-right: .5rem;
    color: var(--texto-fraco);
}

.ramo-expandido__identidade {
    display: grid;
    justify-items: start;
    margin-bottom: 1.25rem;
}

.voltar-arvore {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--texto-suave);
}

.voltar-arvore:hover {
    color: var(--verde);
}

.ramo-expandido__simbolo {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 0 .75rem;
    border-radius: 50%;
    background: var(--cor-ramo, var(--verde));
    color: #fff;
    box-shadow: var(--sombra-2);
}

.ramo-expandido__titulo {
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
}

.ramo-expandido__titulo:focus {
    outline: none;
}

.ramo-expandido__ajuda {
    color: var(--texto-suave);
}

/* Lista em fluxo normal: a altura do componente vem daqui. */
.tree-branches {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree-branch {
    position: relative;
    min-width: 0;
}

/*
   Ligação de reserva em CSS, para quando o JavaScript não roda. Some assim que
   o SVG assume o desenho.
*/
.tree-branch::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: clamp(.75rem, 3vw, 2.5rem);
    height: 2px;
    background: var(--casca);
    opacity: .35;
}

.palco.connections-ready .tree-branch::before {
    display: none;
}

/* Traçados desenhados pelo JavaScript, saindo da copa. */
.conector__halo {
    fill: none;
    stroke: var(--verde-agua);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .35;
    filter: blur(5px);
}

.conector__linha {
    fill: none;
    stroke: var(--casca);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.conector__folha {
    fill: var(--folha);
    stroke: none;
    opacity: .9;
}

.conector__folha--clara {
    fill: var(--folha-clara);
}

/* --- Cartões dos relatórios ------------------------------------------------ */

.painel {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    box-shadow: var(--sombra-2);
    color: var(--marinho);
    transition:
        transform var(--duracao-curta) var(--suavizacao),
        border-color var(--duracao-curta) var(--suavizacao),
        box-shadow var(--duracao-curta) var(--suavizacao);
}

.painel:hover,
.painel:focus-visible {
    transform: translateX(4px);
    border-color: var(--verde-claro);
    box-shadow: var(--sombra-3);
    text-decoration: none;
}

.painel__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--fundo-alt);
    color: var(--cor-ramo, var(--verde));
    flex: none;
}

.painel__texto {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.painel__titulo {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.painel__descricao {
    font-size: .82rem;
    color: var(--texto-suave);
}

.painel__externo {
    margin-left: auto;
    color: var(--verde);
    font-size: 1.1rem;
    flex: none;
}

/* --- Resultados de busca (sem JavaScript) ---------------------------------- */

.resultados__titulo {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.resultados__contagem {
    color: var(--texto-suave);
}

.resultados__lista {
    display: grid;
    gap: .75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.vazio {
    padding: 2rem;
    border: 1px dashed var(--borda);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .6);
    color: var(--texto-suave);
    text-align: center;
}

.vazio--grande {
    padding: 3rem 2rem;
}

/* --- Erros ----------------------------------------------------------------- */

.erro {
    max-width: 560px;
    margin: 4rem auto;
    text-align: center;
}

.erro__codigo {
    margin: 0;
    font-size: 4rem;
    font-weight: 800;
    color: var(--verde-claro);
    line-height: 1;
}

.erro__mensagem {
    color: var(--texto-suave);
}

/* --- Formulários e botões -------------------------------------------------- */

.cartao-central {
    max-width: 430px;
    margin: 3rem auto;
    padding: 2rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-2);
}

.cartao-central__ajuda {
    color: var(--texto-suave);
    font-size: .95rem;
}

.cartao-central__rodape {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: .9rem;
}

.formulario {
    display: grid;
    gap: 1rem;
}

.campo {
    display: grid;
    gap: .35rem;
}

.campo label {
    font-weight: 600;
    font-size: .93rem;
}

.campo__dica {
    font-size: .82rem;
    color: var(--texto-fraco);
}

.obrigatorio {
    color: var(--erro);
    font-weight: 700;
}

.campo input[type="text"],
.campo input[type="search"],
.campo input[type="password"],
.campo input[type="email"],
.campo input[type="url"],
.campo input[type="number"],
.campo select,
.campo textarea {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: #fff;
    color: var(--texto);
    font: inherit;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: 3px solid var(--verde-claro);
    outline-offset: 0;
    border-color: var(--verde-claro);
}

.campo textarea {
    min-height: 84px;
    resize: vertical;
}

.campo--inline {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.campo--inline input {
    width: auto;
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .68rem 1.2rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    color: var(--marinho);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.botao:hover {
    border-color: var(--verde-claro);
    text-decoration: none;
}

.botao--primario {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

.botao--primario:hover {
    background: var(--verde-claro);
    border-color: var(--verde-claro);
}

.botao--perigo {
    color: var(--erro);
    border-color: #E7C6C3;
}

.botao--perigo:hover {
    background: #FDF3F2;
    border-color: var(--erro);
}

.botao--pequeno {
    padding: .35rem .7rem;
    font-size: .85rem;
}

/* --- Painel administrativo ------------------------------------------------- */

.admin__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin__topo h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.admin__acoes {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.abas {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--borda);
}

.abas a {
    padding: .55rem .9rem;
    border-radius: 10px 10px 0 0;
    color: var(--texto-suave);
    font-weight: 600;
}

.abas a[aria-current="page"] {
    background: var(--superficie);
    color: var(--marinho);
    box-shadow: var(--sombra-1);
}

.arvore-admin {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.no-admin {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
    overflow: hidden;
}

.no-admin__linha {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
}

.admin__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin__barra .campo__dica {
    flex: 1 1 320px;
    margin: 0;
}

.admin__acoes--compactas {
    margin-left: auto;
    flex: none;
}

/* Botão de recolher/expandir uma área. */
.no-admin__recolher {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--texto-suave);
    cursor: pointer;
    flex: none;
}

.no-admin__recolher:hover {
    background: var(--fundo-alt);
    color: var(--marinho);
}

.no-admin__recolher--vazio {
    cursor: default;
}

.no-admin__seta {
    transition: transform var(--duracao-curta) var(--suavizacao);
}

.no-admin__recolher[aria-expanded="true"] .no-admin__seta {
    transform: rotate(90deg);
}

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

.no-admin__filhos[hidden] {
    display: none;
}

.no-admin__linha--filho {
    padding-left: 2.2rem;
    border-top: 1px solid var(--borda);
    background: #FCFDFC;
}

.no-admin__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--cor-ramo, var(--verde));
    color: #fff;
    flex: none;
}

.no-admin__texto {
    min-width: 0;
    flex: 1 1 auto;
}

.no-admin__titulo {
    font-weight: 700;
}

.no-admin__meta {
    display: block;
    font-size: .82rem;
    color: var(--texto-fraco);
    overflow-wrap: anywhere;
}

.no-admin__controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    flex: none;
}

.no-admin__controles form {
    margin: 0;
}

.selo {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: var(--raio-pilula);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.selo--ativo {
    background: #E1F3EC;
    color: var(--sucesso);
}

.selo--inativo {
    background: #F1E7E6;
    color: #7C3A33;
}

.selo--perfil {
    background: #E5EDF5;
    color: var(--marinho);
}

.selo--pendente {
    background: #FDF0DA;
    color: #7A4B08;
}

.selo--excluir {
    background: #F7DEDB;
    color: #7C231A;
}

.selo--previa {
    background: var(--marinho);
    color: #fff;
}

/* Aviso de alterações não publicadas, no topo do painel. */
.aviso-publicacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid #F0D9A8;
    border-left: 6px solid #C98A12;
    border-radius: var(--raio);
    background: #FFFBF3;
}

.aviso-publicacao > div {
    flex: 1 1 320px;
    display: grid;
    gap: .15rem;
}

.aviso-publicacao .botao {
    margin-left: auto;
}

/* Faixa da prévia. */
.barra-previa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--borda);
    border-left: 6px solid var(--marinho);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
}

.barra-previa__texto {
    flex: 1 1 340px;
}

.barra-previa__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
    font-weight: 600;
}

.barra-previa__detalhe {
    margin: 0;
    font-size: .88rem;
    color: var(--texto-suave);
}

.barra-previa__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.barra-previa__acoes form {
    margin: 0;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--superficie);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra-1);
    font-size: .93rem;
}

.tabela th,
.tabela td {
    padding: .7rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

.tabela th {
    background: var(--fundo-alt);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--texto-suave);
}

.tabela tr:last-child td {
    border-bottom: 0;
}

.tabela-rolagem {
    overflow-x: auto;
}

.grade-formulario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.cartao {
    padding: 1.5rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-1);
}

.cartao + .cartao {
    margin-top: 1.25rem;
}

.seletor-icones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: .4rem;
    max-height: 210px;
    overflow-y: auto;
    padding: .4rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.seletor-icones label {
    display: grid;
    place-items: center;
    gap: .2rem;
    padding: .45rem .2rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: .62rem;
    text-align: center;
    color: var(--texto-fraco);
}

.seletor-icones input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.seletor-icones label:hover {
    background: var(--fundo-alt);
}

.seletor-icones input:checked + .seletor-icones__conteudo,
.seletor-icones label:has(input:checked) {
    border-color: var(--verde);
    background: #E7F5F1;
    color: var(--verde);
}

.seletor-icones input:focus-visible + .seletor-icones__conteudo {
    outline: 3px solid var(--verde-claro);
}

.historico {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
    font-size: .88rem;
    color: var(--texto-suave);
}

.arrastavel {
    cursor: grab;
}

.arrastando {
    opacity: .5;
}

/* --- Editor de posições ---------------------------------------------------- */

.editor-posicoes {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: start;
}

/*
   O palco reaproveita .copa: mesma proporção e mesmas coordenadas do site, de
   modo que arrastar aqui é literalmente posicionar lá.
*/
.editor-posicoes__palco {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    touch-action: none;
}

.editor-posicoes__lista {
    min-width: 0;
}

.editor-posicoes__lista input[type="number"] {
    width: 6.5rem;
}

.ramo--arrastavel {
    cursor: grab;
    user-select: none;
}

.areas__item.arrastando .ramo--arrastavel {
    cursor: grabbing;
}

/* Área ainda no cálculo automático: fica evidente que ninguém a posicionou. */
.editor-posicoes__palco .areas__item[data-manual="0"] .ramo--arrastavel {
    border-style: dashed;
    opacity: .78;
}

@media (max-width: 900px) {
    .editor-posicoes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Dica de uso ----------------------------------------------------------- */

/*
   Canto inferior direito: não cobre a árvore, que é central, nem a busca, que
   fica no topo. Fixa, para continuar visível se a página for rolada.
*/
.dica {
    position: fixed;
    right: clamp(.75rem, 3vw, 1.5rem);
    bottom: clamp(.75rem, 3vw, 1.5rem);
    z-index: 50;
    width: min(21rem, calc(100vw - 1.5rem));
    padding: .95rem 1.1rem 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-3);
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 240ms var(--suavizacao),
        transform 240ms var(--suavizacao);
}

.dica[hidden] {
    display: none;
}

.dica--visivel {
    opacity: 1;
    transform: none;
}

.dica__topo {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .5rem;
}

.dica__titulo {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--marinho);
}

.dica__fechar {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -.2rem -.35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--texto-fraco);
    cursor: pointer;
}

.dica__fechar:hover {
    background: rgba(11, 42, 69, .07);
    color: var(--marinho);
}

.dica__lista {
    margin: 0 0 .9rem;
    padding-left: 1.1rem;
    display: grid;
    gap: .4rem;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--texto-suave);
}

.dica__ok {
    width: 100%;
}

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

/* --- Rodapé ---------------------------------------------------------------- */

.rodape {
    flex: none;
    margin-top: auto;
    background: var(--marinho);
    color: rgba(255, 255, 255, .82);
}

.rodape__interno {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


.rodape__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.atalho {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border-radius: var(--raio-pilula);
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92);
    font-size: .88rem;
    font-weight: 600;
}

.atalho:hover {
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
}

.rodape__assinatura {
    margin: 0 0 0 auto;
    font-size: .84rem;
    color: rgba(255, 255, 255, .76);
}

/* Aviso de sessão prestes a expirar. */
.aviso-sessao {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 90;
    max-width: 320px;
    padding: .9rem 1.1rem;
    border-radius: var(--raio);
    border-left: 6px solid #C98A12;
    background: var(--superficie);
    box-shadow: var(--sombra-3);
    font-size: .92rem;
    color: var(--texto);
}

/* --- Animações ------------------------------------------------------------- */

@keyframes brotar {
    from {
        opacity: 0;
        transform: translateX(-14px) scale(.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes surgir {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*
   A transição é conduzida pelo JavaScript (assets/js/app.js), com uma linha do
   tempo única. O CSS guarda apenas o estado final — assim, sem JavaScript ou
   com movimento reduzido, tudo já aparece pronto.

   Linha do tempo:
     0–200 ms    destaque do botão da área
     150–850 ms  árvore encolhe e vai para o canto
     450–1350 ms máscara revela o ramo, do tronco às pontas
     750–1500 ms folhagem restante ganha opacidade
     900–1700 ms cartões surgem em sequência (intervalo de 110 ms)
*/

.palco[data-estado="area"] .ramo-expandido__identidade {
    animation: surgir 420ms var(--suavizacao) backwards;
    animation-delay: 120ms;
}

/*
   Cada relatório surge em sequência quando o ramo abre.

   Só opacidade, sem transform: getBoundingClientRect() devolveria a caixa
   transformada, e as linhas seriam desenhadas fora do lugar enquanto a
   animação corre.
*/
.palco[data-estado="area"] .tree-branch {
    animation: surgir 380ms var(--suavizacao) backwards;
    animation-delay: calc(900ms + var(--ordem, 0) * 110ms);
}

/* --- Responsivo ------------------------------------------------------------ */

/*
   Abaixo desta largura a ilustração do ramo fica baixa demais para separar
   cinco cartões sem sobreposição: eles saem das pontas e viram uma lista logo
   abaixo do ramo. É a orientação para tablet — reduzir proporcionalmente até
   caber, e não espremer o desenho de desktop.
*/
@media (max-width: 1120px) {
    .palco[data-estado="area"] {
        --arvore-aberta: 230px;
    }

    .painel {
        padding: .6rem .9rem;
    }

    .painel__icone {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 900px) {
    .cabecalho__interno {
        flex-wrap: wrap;
        gap: .6rem;
    }

    .busca {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .cabecalho__acoes {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .marca__nome {
        font-size: 1.05rem;
    }

    .marca__simbolo {
        width: 34px;
        height: 34px;
    }

    .conteudo {
        padding: 1rem .9rem 2rem;
    }
}

/*
   No celular a copa desenhada seria ilegível: as áreas viram uma lista
   acessível, com a mesma identidade visual (mesmas pastilhas e ícones).
*/
@media (max-width: 780px) {
    /* A ilustração continua, menor, como identidade visual. */
    .copa {
        aspect-ratio: auto;
        max-width: none;
    }

    .copa__ilustracao {
        width: min(320px, 78%);
        height: auto;
        margin: 0 auto .5rem;
    }

    .areas {
        position: static;
        display: grid;
        gap: .6rem;
    }

    /* Com as áreas em lista, o aviso entra no fluxo em vez de cobrir o tronco. */
    .areas__vazio {
        position: static;
        transform: none;
        max-width: none;
        white-space: normal;
    }

    .areas__item {
        position: static;
        transform: none;
        max-width: none;
    }

    .ramo {
        display: flex;
        width: 100%;
        white-space: normal;
        justify-content: flex-start;
    }

    /*
       Sem espaço para as duas colunas: a árvore vai para cima e os relatórios
       viram uma lista embaixo. As linhas não fazem sentido nesse arranjo.
    */
    .palco[data-estado="area"] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .palco[data-estado="area"] .copa {
        max-width: 240px;
    }

    .tree-connectors,
    .tree-branch::before {
        display: none;
    }

    .painel {
        border-radius: var(--raio);
        padding: .85rem 1rem;
    }

    .no-admin__linha--filho {
        padding-left: 1.5rem;
    }

    .rodape__assinatura {
        margin-left: 0;
    }
}

/* --- Preferência por menos movimento --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Com movimento reduzido a máscara não anima: o ramo já entra inteiro. */
    .mascara__traco {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }

    .mascara__preenchimento {
        opacity: 1 !important;
    }
}

/* --- Impressão ------------------------------------------------------------- */

@media print {
    .cabecalho,
    .rodape,
    .moldura__rodape {
        display: none;
    }
}