/* ===========================================================
   Painel de EB — linguagem do dashboard do EB Manager, em azul.
   Glassmorphism, grade no fundo, cards que levantam, entrada
   escalonada. Fundo NUNCA preto chapado: azul-grafite + camadas
   de luz + grade + granulado.
   =========================================================== */

:root {
    --bg:          #131417;
    --bg-fundo:    #0D0D0F;
    --surface:     rgba(31,32,36,.72);
    --surface-2:   rgba(38,40,45,.6);
    --surface-3:   rgba(17,18,21,.55);
    --border:      rgba(255, 255, 255, .08);
    --border-2:    rgba(255, 255, 255, .14);

    --accent:      #2ECC70;
    --accent-d:    #26A85C;
    --accent-cl:   #CEF4DE;
    --accent-12:   rgba(46,204,112,.12);
    --gold:        #C9A84C;

    --text:        #ffffff;
    --text-mid:    #CBCDD2;
    --text-dim:    #93969C;

    --amber:       #E0A92E;
    --red:         #FF5A6A;
    --green:       #2ECC71;

    --radius:      14px;
    --radius-s:    10px;

    /* Granulado procedural: SVG em data URI. Zero arquivo, zero requisicao e
       nao perde qualidade em tela retina. numOctaves 3 — acima disso o ganho
       visual nao paga o custo de pintura.
       Sao DOIS graos: o fino da a textura de perto, o grosso quebra a lisura
       das manchas de luz, que sem ele ficam com faixas visiveis (banding). */
    --grao-fino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
    --grao-grosso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.28' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23h)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* `display` vindo de uma classe ganha do [hidden] do navegador, e o elemento
   "escondido" continua aparecendo. Esta linha devolve o comportamento esperado. */
[hidden] { display: none !important; }

/* Imagem sem endereço (avatar que ainda não foi buscado, militar sem foto) faz
   o navegador desenhar o ícone de figura quebrada. Some até ter o que mostrar. */
img[src=""], img:not([src]) { visibility: hidden; }

/* `scrollbar-width: thin` é obrigatório junto com `scrollbar-color`: quando só
   a cor é definida, o Chrome troca a barra pelo modelo padrão (LARGO, ~15 px)
   e ignora as regras ::-webkit-scrollbar abaixo — era a barra clara e grossa
   que aparecia na lateral do painel. */
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.13) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.18); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(46,204,112,.45); }

body {
    /* A cor base vive no html: um fundo opaco aqui taparia a aurora, que é
       pintada por um pseudo-elemento com z-index negativo deste mesmo body. */
    background: transparent;
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    letter-spacing: .1px;
    position: relative;
}

/* O fundo tem QUATRO camadas empilhadas. Juntar tudo num background so faz o
   granulado lavar a cor: ele vira um cinza por cima do azul. Separado, cada
   camada tem a sua opacidade e o seu papel. */

/* 1 — aurora: manchas de luz grandes e moles. Em fundo escuro elas precisam de
   alfa BAIXO; cor clara demais aqui nao vira "mesh", vira auréola dura. */
body::before {
    content: '';
    /* `inset: 0`, sem sobra: a sobra só existe para a camada DERIVAR, e ela
       não deriva (veja o porquê logo abaixo). Sobra parada é pixel composto
       fora da tela de graça. */
    position: fixed; inset: 0;
    z-index: -3; pointer-events: none;
    background:
        radial-gradient(46% 42% at 14% 6%,   rgba(46,204,112,.05), rgba(46,204,112,0) 70%),
        radial-gradient(40% 36% at 86% 14%,  rgba(131,227,171,.028), rgba(131,227,171,0) 72%),
        radial-gradient(50% 44% at 74% 92%,  rgba(26,117,64,.055), rgba(26,117,64,0) 70%),
        radial-gradient(36% 32% at 26% 80%,  rgba(41,183,100,.025), rgba(41,183,100,0) 72%);
    /* Camada própria na GPU, e PARADA.
       ⚠️ MEDIDO DUAS VEZES, NÃO VALE: fazer esta camada derivar derruba o
       computador de 61 para 53 fps. Na segunda tentativa (07/10/2026) a
       deriva foi feita do jeito "certo" — só translate3d, numa camada já
       rasterizada, com 8% de sobra para não revelar borda — e ficou PIOR
       ainda, 51 fps, porque a camada maior custa mais para compor.
       O problema não é a propriedade animada: é o tamanho. Uma camada do
       tamanho da tela, com quatro gradientes, em movimento perpétuo, não
       cabe no orçamento de 16,7 ms junto com o resto do painel.
       Se for tentar de novo: manchas em elementos SEPARADOS e pequenos, não
       uma camada só de tela cheia — e medir antes de commitar. */
    transform: translateZ(0);
}

/* 2 — base sólida por baixo da aurora, para a cor não depender dela. */
html { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-fundo) 100%); }

/* 3 — grade de prancheta: traço fino de perto, traço forte a cada 5 quadros e
   um ponto nos cruzamentos. É o que dá a sensação de planta técnica. */
.textura {
    position: fixed; inset: 0;
    z-index: -2; pointer-events: none;
    /* Camada própria: sem isto o navegador repinta a grade inteira a cada
       quadro de rolagem, e a lista longa perde 5 fps. */
    transform: translateZ(0);
    background-image:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(rgba(206,244,222,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(206,244,222,.045) 1px, transparent 1px),
        radial-gradient(circle, rgba(206,244,222,.16) 1px, rgba(206,244,222,0) 1.6px);
    background-size:
        46px 46px, 46px 46px,
        230px 230px, 230px 230px,
        230px 230px;
    /* A grade SOME nas bordas em vez de ser escurecida por uma vinheta preta
       por cima. A diferença importa: a vinheta apagava o fundo inteiro junto,
       a máscara tira só a grade e o chumbo continua o mesmo. É o que separa
       "planta técnica" de "papel quadriculado". */
    -webkit-mask-image: radial-gradient(ellipse 92% 78% at 50% 28%,
                        #000 24%, rgba(0,0,0,.28) 68%, transparent 92%);
    mask-image: radial-gradient(ellipse 92% 78% at 50% 28%,
                #000 24%, rgba(0,0,0,.28) 68%, transparent 92%);
}

/* 4 — granulado em duas frequências: o fino dá textura de perto, o grosso
   quebra a lisura das manchas de luz. Opacidade baixa de propósito — a
   textura tem que ser sentida, não vista. Em .5 o fundo vira concreto cinza. */
.textura::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--grao-fino), var(--grao-grosso);
    background-size: 180px 180px, 340px 340px;
    opacity: .05;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(46,204,112,.35); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =========================================================
   Entrada
   ========================================================= */
.entrada {
    min-height: 100vh;
    /* `column` é o que põe o rodapé EMBAIXO do cartão. Sem isto o flex
       alinhava os dois lado a lado, e os links iam parar flutuando no meio
       da tela, ao lado do cartão, como se fossem outra coluna. */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px;
}

.cartao-entrada {
    width: 100%; max-width: 445px;
    background: linear-gradient(180deg, rgba(32,34,39,.92), rgba(25,26,30,.96));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 44px 34px 36px;
    text-align: center;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    animation: subir .5s cubic-bezier(.22,1,.36,1) backwards;
}

.brasao {
    width: 78px; height: 78px;
    margin: 0 auto 22px;
    border-radius: 21px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--accent) 0%, var(--accent-d) 55%, #186B3B 100%);
    border: 1px solid rgba(206,244,222,.45);
    box-shadow: 0 12px 32px -10px rgba(46,204,112,.75),
                inset 0 1px 0 rgba(255,255,255,.28);
    position: relative;
}
.brasao svg { width: 37px; height: 37px; stroke: #06240F; }

/* quando o grupo tem arte propria, ela entra no lugar do escudo */
.brasao.arte { background: var(--surface-3); padding: 0; overflow: hidden; }
.brasao.arte img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.brasao::after {
    content: '';
    position: absolute; inset: 0; border-radius: 21px;
    animation: anel 3.6s ease-out infinite;
}
@keyframes anel {
    0%   { box-shadow: 0 0 0 0 rgba(46,204,112,.45); }
    70%  { box-shadow: 0 0 0 14px rgba(46,204,112,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,204,112,0); }
}

.cartao-entrada h1 {
    font-size: 1.65rem; font-weight: 800;
    letter-spacing: .3px; line-height: 1.2;
}
.cartao-entrada h1 .destaque {
    background: linear-gradient(90deg, var(--accent-cl), var(--accent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitulo-entrada {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 6px 13px;
    background: var(--accent-12);
    border: 1px solid rgba(46,204,112,.28);
    border-radius: 20px;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .9px;
    color: var(--accent-cl);
}
.subtitulo-entrada::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-cl); box-shadow: 0 0 8px var(--accent);
}

.cartao-entrada p.texto {
    color: var(--text-dim);
    font-size: .92rem; line-height: 1.65;
    margin: 20px 0 28px;
}

.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px 22px;
    background: var(--accent);
    /* texto quase preto em cima do verde, como no site do dono: o verde do
       acento e claro, e branco sobre ele fica ilegivel */
    color: #06140C; border: none;
    border-radius: var(--radius-s);
    font-size: .95rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px;
    cursor: pointer; position: relative; overflow: hidden;
    transition: background .22s, box-shadow .22s, transform .18s;
    -webkit-appearance: none; appearance: none;
}
/* O halo de neon fica PARADO e só troca de intensidade no hover. Animar
   box-shadow sem parar obriga o navegador a refazer o desfoque a cada quadro —
   é o que trava celular. */
.botao {
    box-shadow: 0 6px 18px rgba(46,204,112,.3), 0 0 0 1px rgba(206,244,222,.18) inset;
}
.botao:hover {
    background: #5EDB92;
    box-shadow: 0 10px 30px rgba(46,204,112,.55), 0 0 22px rgba(46,204,112,.35),
                0 2px 8px rgba(0,0,0,.25);
    transform: translateY(-2px);
}
.botao:active { transform: scale(.975) translateY(1px); }

.botao svg { width: 18px; height: 18px; }

/* Estes dois NAO tem fundo verde, entao o texto escuro do .botao nao serve:
   sobre cinza translucido e sobre vermelho quem le e o texto claro. */
.botao.secundario {
    background: rgba(255,255,255,.07);
    border: 1px solid var(--border-2);
    color: var(--text);
    /* sem o halo verde do .botao: com ele, o secundário competia com o
       principal e os dois pareciam o botão de ação da tela */
    box-shadow: none;
}
.botao.secundario:hover { background: rgba(255,255,255,.12); box-shadow: none; }
.botao.perigo {
    background: #D93B4C; color: #fff;
    box-shadow: 0 6px 18px rgba(217,59,76,.3);
}
/* Precisa nomear as variantes: `.botao:disabled` sozinho tem a mesma força
   de `.botao.perigo` e vinha antes no arquivo, então perdia — o "Exilar"
   desativado continuava vermelho vivo, com cara de pronto para apertar. */
.botao:disabled,
.botao.secundario:disabled,
.botao.perigo:disabled {
    background: #313337;
    border-color: rgba(255,255,255,.07);
    color: #83858A;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: saturate(.2);
}
.botao:disabled svg { opacity: .55; }

.botao.perigo:hover {
    background: #EF4A5C;
    box-shadow: 0 10px 30px rgba(217,59,76,.5), 0 0 22px rgba(255,90,106,.32);
}
.botao.estreito { width: auto; padding: 12px 20px; font-size: .86rem; }

.aviso-config {
    margin-top: 24px; padding: 14px 16px;
    background: rgba(224,169,46,.09);
    border: 1px solid rgba(224,169,46,.3);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-s);
    color: #EFCB83;
    font-size: .8rem; line-height: 1.6; text-align: left;
}
.aviso-config b { color: var(--amber); }

/* =========================================================
   Estrutura
   ========================================================= */
/* `align-items: flex-start` é o que destrava o `sticky` da lateral: no padrão
   (`stretch`) ela já teria a altura inteira do container e não teria para onde
   grudar — o menu descia junto com o conteúdo. */
.estrutura { display: flex; min-height: 100vh; align-items: flex-start; }

.lateral {
    width: 268px; flex-shrink: 0;
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Fundo sólido, sem desfoque. Ela fica parada enquanto o conteúdo rola
       ATRÁS dela: com vidro, o navegador reborrava a faixa inteira a cada
       quadro da rolagem — foi o que derrubou a lista longa para 34 fps. */
    background: linear-gradient(180deg, #111215 0%, #0D0E10 100%);
    border-right: 1px solid var(--border);
    box-shadow: 10px 0 30px rgba(0,0,0,.4);
    display: flex; flex-direction: column;
    padding: 24px 18px;
    z-index: 100;
}

.marca {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 6px 18px; margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.marca .brasao { width: 44px; height: 44px; border-radius: 13px; margin: 0; flex-shrink: 0; }
.marca .brasao svg { width: 22px; height: 22px; }
.marca .brasao::after { display: none; }
.marca-texto { min-width: 0; flex: 1; }
.marca strong {
    font-size: .98rem; font-weight: 800; letter-spacing: .2px;
    display: block; line-height: 1.2;
}
.marca span {
    font-size: .7rem; color: var(--text-dim); font-weight: 500;
    display: block; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.menu { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }

/* Rótulo de seção: dá hierarquia ao menu em vez de uma pilha solta de botões. */
.menu-titulo {
    font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #8B8D93;
    padding: 14px 14px 6px;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,.06);
    user-select: none;
}
.menu-titulo:first-child { margin-top: 0; border-top: none; padding-top: 4px; }

.menu button span { flex: 1; min-width: 0; }
.menu button .conta {
    flex: 0 0 auto;
    min-width: 21px; padding: 1px 7px;
    border-radius: 20px;
    background: rgba(46,204,112,.18);
    border: 1px solid rgba(46,204,112,.3);
    color: var(--accent-cl);
    font-size: .68rem; font-weight: 800; font-style: normal;
    text-align: center; line-height: 17px;
}

.menu button {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px;
    background: none; border: 1px solid transparent;
    border-radius: 9px;
    color: #C9CBCE;
    font-size: .88rem; font-weight: 600;
    cursor: pointer; text-align: left; width: 100%;
    position: relative; overflow: hidden;
    transition: all .25s ease;
}
.menu button svg {
    width: 18px; height: 18px; flex-shrink: 0;
    pointer-events: none; transition: transform .2s ease;
}
.menu button::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 55%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom, var(--accent), rgba(46,204,112,.3));
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.menu button:hover { background: rgba(255,255,255,.05); color: #fff; }
.menu button:hover svg { transform: scale(1.1); }
.menu button.ativo {
    background: var(--accent-12);
    color: var(--accent-cl);
    border-color: rgba(46,204,112,.3);
    box-shadow: inset 0 0 15px rgba(46,204,112,.06);
}
.menu button.ativo::before {
    transform: translateY(-50%) scaleY(1);
    box-shadow: 0 0 12px 1px rgba(46,204,112,.9);
}
.menu button.ativo svg {
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px rgba(46,204,112,.75));
}

.rodape-lateral {
    display: flex; align-items: center; gap: 12px;
    margin-top: 15px; padding: 14px;
    background: rgba(0,0,0,.4);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
}
.rodape-lateral img {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--accent);
    background: rgba(255,255,255,.05);
    animation: anelAvatar 3.5s ease-out infinite;
}
@keyframes anelAvatar {
    0%   { box-shadow: 0 0 0 0 rgba(46,204,112,.5); }
    65%  { box-shadow: 0 0 0 5px rgba(46,204,112,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,204,112,0); }
}
.rodape-lateral div { flex: 1; min-width: 0; }
.rodape-lateral strong { font-size: .85rem; font-weight: 700; display: block; }
.rodape-lateral span {
    font-size: .7rem; color: var(--text-dim); display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rodape-lateral .patente { color: var(--accent-cl); font-weight: 600; margin-top: 2px; }
.rodape-lateral a {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    color: #FF4D5E; transition: transform .2s, background .2s;
}
.rodape-lateral a:hover { background: rgba(255,77,94,.12); transform: scale(1.1); }
.rodape-lateral a svg { width: 16px; height: 16px; }

/* `min-width: 0` é o que deixa esta coluna encolher. Sem ele, um item flex não
   diminui abaixo da largura do próprio conteúdo, e entre ~880 e ~1050px a
   barra lateral + o conteúdo estouravam a janela em mais de 100px. */
.conteudo { flex: 1; min-width: 0; padding: 40px; max-width: 1240px; }

/* =========================================================
   Capa do grupo — faixa fina. Ela aparece em todas as abas, então
   identifica o EB sem roubar altura do que importa.
   ========================================================= */
/* A capa era uma faixa de 11px de respiro — presença de rodapé para a arte
   que identifica o EB. Agora tem altura de cabeçalho de verdade, e a arte
   ao fundo aparece de fato. */
.capa {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-s);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 26px;
    background: var(--surface-3);
    box-shadow: 0 8px 24px rgba(0,0,0,.32);
}
.capa-fundo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: blur(24px) saturate(1.7);
    transform: scale(1.5);
    opacity: .5;
}
.capa::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(14,15,17,.95) 0%, rgba(14,15,17,.82) 55%,
                        rgba(14,15,17,.45) 100%),
        radial-gradient(360px circle at 92% 150%, rgba(46,204,112,.3), transparent 70%);
}
.capa::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-cl) 50%, var(--accent) 65%, transparent);
    box-shadow: 0 0 12px rgba(46,204,112,.8);
}
.capa > *:not(.capa-fundo) { position: relative; z-index: 1; }

.capa-arte {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
    border: 1px solid rgba(206,244,222,.3);
}
.capa-texto {
    min-width: 0; flex: 1 1 auto;
    display: flex; align-items: baseline; gap: 10px;
    overflow: hidden;
}
.capa-texto strong {
    font-size: .92rem; font-weight: 800; letter-spacing: .2px;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.capa-texto span {
    font-size: .74rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0;
}

/* Os selos cedem antes do nome do EB: a capa tem overflow oculto, então o que
   não couber some em vez de vazar cortado pela metade. */
.capa-selos { display: flex; gap: 7px; flex-shrink: 0; min-width: 0; }
.capa-selos span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    font-size: .7rem; font-weight: 600; color: var(--text-mid);
    white-space: nowrap;
}
.capa-selos span svg { width: 12px; height: 12px; stroke: var(--accent-cl); }
.capa-selos .online {
    background: rgba(46,204,113,.09);
    border-color: rgba(46,204,113,.3);
    color: #8FE3B4;
}
.capa-selos .online svg { stroke: var(--green); }

.secao { display: none; }
.secao.ativa {
    display: block;
    animation: subirAba .45s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes subirAba {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes subir {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Titulo ---------- */
.titulo { margin-bottom: 30px; }
.titulo h2 {
    font-size: clamp(1.45rem, 4vw, 1.95rem);
    font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
    display: inline-flex; align-items: center; gap: 12px;
    position: relative; padding-bottom: 11px;
}
.titulo h2::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 50px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}
/* Texto em caixa alta não usa o espaço de descendente que a linha reserva,
   então o ícone centralizado fica ~1,5px ABAIXO do centro visual das letras. */
.titulo h2 svg { transform: translateY(-1.5px);
    width: 23px; height: 23px; stroke: var(--accent);
    filter: drop-shadow(0 0 9px rgba(46,204,112,.5));
}
.titulo p {
    color: var(--text-dim); font-size: .9rem;
    margin-top: 10px; line-height: 1.6; max-width: 72ch;
}

/* ---------- Caixa de vidro ---------- */
.caixa {
    position: relative;
    background: linear-gradient(180deg, rgba(31,32,36,.78), rgba(22,23,26,.88));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(20px, 4vw, 28px);
    margin-bottom: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    isolation: isolate;
}
.caixa:hover {
    border-color: rgba(46,204,112,.28);
    box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 30px rgba(46,204,112,.1),
                inset 0 1px 0 rgba(255,255,255,.06);
    transform: translateY(-2px);
}

/* O brilho que segue o cursor é desenhado pelo ::after (mais abaixo). Havia
   aqui um ::before fazendo a mesma coisa, que era sobrescrito pelo fio de
   luz do foco e nunca aparecia — e o `:hover::before` que o acompanhava
   acendia o fio no simples hover, deixando hover e foco iguais. */
.secao.ativa .caixa { animation: subir .5s cubic-bezier(.22,1,.36,1) backwards; }
.secao.ativa .caixa:nth-of-type(1) { animation-delay: .05s; }
.secao.ativa .caixa:nth-of-type(2) { animation-delay: .1s; }

.linha { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.campo { flex: 1; min-width: 195px; }
.campo label {
    display: block; margin-bottom: 8px;
    color: var(--text-dim);
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .6px;
}
.campo input, .campo select, .campo textarea {
    width: 100%; padding: 12px 15px;
    border-radius: var(--radius-s);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.4);
    color: #fff; font-family: inherit; font-size: 15px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none; appearance: none;
}
/* 4,6:1. Estava em 3,52:1, abaixo do mínimo — e aqui o placeholder é
   instrução de verdade ("Ex.: ywLevi", "O que foi treinado..."). */
.campo input::placeholder, .campo textarea::placeholder { color: #7E8186; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--accent);
    background: rgba(0,0,0,.55);
    box-shadow: 0 0 0 3px rgba(46,204,112,.15);
}
.campo textarea { resize: vertical; min-height: 70px; line-height: 1.55; }
.campo select { cursor: pointer; color-scheme: dark; }
.campo select option { background-color: #1F2024; color: #E8E9EA; }

/* ---------- Ficha ---------- */
.ficha { display: none; margin-top: 22px; }
.ficha.visivel { display: block; animation: subir .35s cubic-bezier(.22,1,.36,1) backwards; }

.ficha-topo {
    display: flex; align-items: center; gap: 18px;
    padding-bottom: 20px; margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.ficha-topo img {
    width: 72px; height: 72px; border-radius: 50%;
    /* O anel usa a cor da FAMILIA da patente dele, que o JS escreve em
       --cor-patente. Verde e so o padrao de quem nao caiu em familia
       nenhuma — assim a ficha mostra de relance se e oficial, graduado ou
       praca, com a mesma cor que a hierarquia usa. */
    border: 3px solid var(--cor-patente, var(--accent));
    box-shadow: 0 0 18px color-mix(in srgb, var(--cor-patente, var(--accent)) 38%, transparent);
    background: rgba(255,255,255,.05);
    transition: border-color .3s ease, box-shadow .3s ease;
}
/* o fio na lateral da linha do grupo acompanha a mesma cor */
.grupo-linha::before { background: var(--cor-patente, var(--accent)) !important; }
.ficha-nome { flex: 1; min-width: 0; }
.ficha-topo strong { font-size: 1.3rem; font-weight: 700; display: block; margin-bottom: 4px; }
.ficha-topo span { color: var(--text-dim); font-size: .85rem; }

/* Quantas vezes esse militar já subiu, desceu ou foi exilado por este painel. */
.ficha-resumo { display: flex; gap: 8px; flex-shrink: 0; }
.ficha-resumo .conta-tipo {
    text-align: center; min-width: 62px;
    padding: 9px 11px; border-radius: 10px;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.06);
}
.ficha-resumo .conta-tipo b {
    display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.1;
}
.ficha-resumo .conta-tipo span {
    display: block; margin-top: 3px;
    font-size: .6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-dim);
}
.ficha-resumo .sobe b    { color: var(--green); }
.ficha-resumo .desce b   { color: var(--amber); }
.ficha-resumo .exilio b  { color: var(--red); }

/* ---------- Histórico do militar ---------- */
.historico { margin-top: 16px; }
.historico:empty { display: none; }
.titulo-h {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--text-dim);
    margin-bottom: 9px;
}
.linha-historico {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .82rem;
}
.linha-historico:last-child { border-bottom: none; }
.linha-historico .ponto {
    width: 7px; height: 7px; border-radius: 50%;
    margin-top: 7px; flex-shrink: 0;
}
.linha-historico.promover .ponto   { background: var(--green);  box-shadow: 0 0 8px var(--green); }
.linha-historico.rebaixar .ponto   { background: var(--amber);  box-shadow: 0 0 8px var(--amber); }
.linha-historico.exilar .ponto     { background: var(--red);    box-shadow: 0 0 8px var(--red); }
.linha-historico.cdp_tirada .ponto { background: var(--text-dim); }
.linha-historico .txt { flex: 1; min-width: 0; line-height: 1.5; }
.linha-historico .txt b { color: #fff; font-weight: 600; }
.linha-historico .porque { color: var(--text-dim); font-size: .78rem; margin-top: 2px; }
.linha-historico .data { color: var(--text-dim); font-size: .72rem; white-space: nowrap; flex-shrink: 0; }

/* ---------- Filtros em chip ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chip {
    padding: 7px 14px; border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .76rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all .2s;
}
.chip:hover { background: rgba(255,255,255,.08); color: #fff; }
.chip.ativo {
    background: var(--accent-12);
    border-color: rgba(46,204,112,.42);
    color: var(--accent-cl);
    box-shadow: 0 0 16px rgba(46,204,112,.14);
}

/* =========================================================
   Escolha de patente — as patentes na tela, não num menu suspenso
   Um menu suspenso esconde a escada inteira atrás de um clique e mostra uma
   lista solta. Aqui a hierarquia fica à vista, agrupada, e a patente de agora
   aparece marcada — dá para ver de onde para onde a pessoa vai.
   ========================================================= */
.escolha-patente {
    max-height: 340px; overflow-y: auto;
    padding: 14px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    overscroll-behavior: contain;
}
.escolha-patente .grupo-patente + .grupo-patente { margin-top: 16px; }
.escolha-patente .titulo-familia {
    font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--cor-bloco, var(--text-dim));
    padding-bottom: 6px; margin-bottom: 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--cor-bloco, #888C93) 32%, transparent);
}
.escolha-patente .opcoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 7px;
}

.patente-op {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid color-mix(in srgb, var(--cor-bloco, #888C93) 22%, transparent);
    border-radius: 9px;
    color: var(--text-mid);
    font-family: inherit; font-size: .82rem; font-weight: 600;
    text-align: left; cursor: pointer;
    transition: transform .16s, background .18s, border-color .18s, color .18s;
}
.patente-op:hover {
    background: rgba(255, 255, 255, .07);
    border-color: color-mix(in srgb, var(--cor-bloco, #888C93) 60%, transparent);
    color: #fff;
    transform: translateY(-1px);
}
.patente-op:active { transform: scale(.98); }
.patente-op .nome-p {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* a patente de agora: marcada, e não dá para escolher de novo */
.patente-op.atual {
    background: rgba(255, 255, 255, .02);
    border-style: dashed;
    color: var(--text-dim);
    cursor: default;
}
.patente-op.atual:hover { transform: none; background: rgba(255,255,255,.02); color: var(--text-dim); }
.patente-op .marca-atual {
    flex-shrink: 0;
    padding: 2px 7px; border-radius: 20px;
    background: rgba(255, 255, 255, .07);
    font-size: .6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px;
}

/* a escolhida fica acesa */
.patente-op.escolhida {
    background: var(--accent-12);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 1px var(--accent), 0 6px 20px -8px rgba(46,204,112,.9);
}
.patente-op.escolhida::after {
    content: '';
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-cl);
    box-shadow: 0 0 9px var(--accent);
}

.contador.escolheu { color: var(--accent-cl); }

/* ---------- Hierarquia ---------- */
.aba-grupo {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 14px 8px 8px; border-radius: 10px;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .82rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: all .18s;
}
.aba-grupo img {
    width: 24px; height: 24px; border-radius: 7px; object-fit: cover;
    background: rgba(255,255,255,.05);
}
.aba-grupo:hover { border-color: rgba(46,204,112,.4); color: #fff; }
.aba-grupo.ativo {
    border-color: var(--accent); color: var(--accent-cl);
    background: var(--accent-12);
    box-shadow: 0 4px 16px rgba(46,204,112,.18);
}

.hq-cabecalho {
    display: flex; align-items: center; gap: 20px;
    padding-bottom: 20px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.hq-cabecalho img {
    width: 78px; height: 78px; border-radius: 16px; object-fit: cover;
    border: 2px solid var(--accent);
    box-shadow: 0 0 20px rgba(46,204,112,.25);
    background: rgba(0,0,0,.4);
}
.hq-cabecalho h3 {
    font-size: clamp(1.05rem, 3vw, 1.4rem); font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; line-height: 1.2;
}
.hq-cabecalho p { color: var(--text-dim); font-size: .82rem; margin-top: 6px; }

/* Título de cada bloco, na cor da própria família de patentes */
.hq-bloco { margin-top: 26px; }
.hq-bloco-titulo {
    display: flex; align-items: baseline; gap: 10px;
    padding-bottom: 7px; margin-bottom: 14px;
    border-bottom: 2px solid var(--cor-bloco);
}
.hq-bloco-titulo h4 {
    font-size: 1rem; font-weight: 800;
    color: var(--cor-bloco);
    text-shadow: 0 0 14px color-mix(in srgb, var(--cor-bloco) 35%, transparent);
}
.hq-bloco-titulo span { font-size: .72rem; color: var(--text-dim); font-weight: 600; }

.hq-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 11px;
}
.hq-card {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 15px;
    background: rgba(0,0,0,.36);
    border: 1px solid color-mix(in srgb, var(--cor-bloco) 26%, transparent);
    border-radius: 10px;
    transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, background .22s;
}
.hq-card:hover {
    transform: translateY(-2px);
    background: rgba(0,0,0,.5);
    border-color: color-mix(in srgb, var(--cor-bloco) 55%, transparent);
}
.hq-card .nome {
    font-size: .88rem; font-weight: 700;
    color: var(--cor-bloco);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq-card { justify-content: flex-start; }
/* a patente de quem está olhando fica em dourado, como no site do Mirage */
.hq-card.minha {
    background: rgba(201,168,76,.14);
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(201,168,76,.22);
}
.hq-card.minha .nome { color: var(--gold); }

/* ---------- Linha do registro ---------- */
.item-registro {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.item-registro:last-child { border-bottom: none; }
.item-registro .caras { display: flex; align-items: center; flex-shrink: 0; }
/* 36, 38, 40 e 42px conviviam em quatro componentes que são a mesma coisa:
   foto redonda, nome, sub-linha. Dois pixels ninguém lê como intenção, mas
   o desalinho se sente ao trocar de aba. Agora é 40 em todos. */
.item-registro .caras img {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 2px solid var(--bg);
}
.item-registro .caras img + img { margin-left: -13px; }
.item-registro .meio { flex: 1; min-width: 0; }
.item-registro .quem { font-size: .9rem; line-height: 1.45; }
.item-registro .quem b { font-weight: 700; color: #fff; }
.item-registro .quem .mudanca { color: var(--text-mid); }
.item-registro .detalhe {
    font-size: .76rem; color: var(--text-dim);
    margin-top: 3px; line-height: 1.45;
}
.item-registro .lado { text-align: right; flex-shrink: 0; }
.item-registro .lado .quando {
    display: block; font-size: .72rem; color: var(--text-dim); margin-top: 6px;
}

/* ---------- Confirmação de ação ---------- */
.confirma {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(3,14,8,.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: surgirFundo .18s ease;
}
@keyframes surgirFundo { from { opacity: 0; } to { opacity: 1; } }
.confirma-caixa {
    width: 100%; max-width: 430px;
    background: linear-gradient(180deg, #1F2126, #151619);
    border: 1px solid var(--border-2);
    border-radius: 18px;
    padding: 30px 26px 24px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0,0,0,.7);
    animation: surgirCaixa .22s cubic-bezier(.22,1,.36,1);
}
@keyframes pular {
    from { transform: scale(.93); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.confirma-ic {
    width: 58px; height: 58px; margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,90,106,.12);
    border: 1px solid rgba(255,90,106,.3);
}
.confirma-ic svg { width: 26px; height: 26px; stroke: var(--red); }
.confirma-caixa strong {
    display: block; font-size: 1.15rem; font-weight: 800; margin-bottom: 9px;
}
.confirma-caixa p {
    color: var(--text-mid); font-size: .88rem; line-height: 1.6; margin-bottom: 24px;
}
.confirma-caixa p b { color: #fff; }
.confirma-botoes { display: flex; gap: 10px; }
.confirma-botoes .botao { flex: 1; width: auto; }

/* ---------- Grupos da ficha ---------- */
.grupos { display: grid; gap: 7px; }
.grupo-linha {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 14px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 10px;
    transition: all .3s cubic-bezier(.22,1,.36,1);
}

/* Em vez de uma fileira de cards grandes dizendo "não está neste grupo", os
   grupos de fora viram uma linha só, discreta, no fim da ficha. */
.fora-de {
    margin-top: 10px; padding: 9px 13px;
    background: rgba(0,0,0,.2);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 9px;
    font-size: .76rem; color: var(--text-dim); line-height: 1.5;
}
.fora-de b { color: #A8ABB1; font-weight: 600; }
.grupo-linha:hover {
    background: rgba(46,204,112,.06);
    border-color: rgba(46,204,112,.35);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(46,204,112,.12);
}
/* fio de neon na lateral do card, acende no hover */
.grupo-linha::before {
    content: '';
    position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 2px; border-radius: 0 2px 2px 0;
    background: var(--accent);
    opacity: 0; transition: opacity .3s ease;
}
.grupo-linha { position: relative; overflow: hidden; }
.grupo-linha:hover::before { opacity: 1; box-shadow: 0 0 12px 1px rgba(46,204,112,.9); }
.grupo-linha.fora:hover::before { opacity: 0; }
.grupo-linha .nome {
    font-size: .76rem; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .6px;
}
.grupo-linha .cargo { font-size: .92rem; color: #fff; font-weight: 600; margin-top: 2px; }
.grupo-linha .cargo em { font-style: normal; color: var(--text-dim); font-size: .8rem; font-weight: 400; }

.selo {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: 6px;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    white-space: nowrap; border: 1px solid;
}
.selo svg { width: 13px; height: 13px; }
.selo.cdp   { background: rgba(224,169,46,.1); color: var(--amber); border-color: rgba(224,169,46,.3); }
.selo.livre { background: rgba(46,204,113,.1); color: var(--green); border-color: rgba(46,204,113,.3); }

.nota {
    font-size: .8rem; color: var(--text-dim);
    margin-top: 16px; line-height: 1.6;
    padding: 12px 14px;
    background: rgba(0,0,0,.25);
    border-left: 3px solid rgba(46,204,112,.4);
    border-radius: 0 8px 8px 0;
}

/* =========================================================
   Divisões — grade de cards, uma tela por divisão
   ========================================================= */
.grade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

/* Sem vidro desfocado aqui: são vários cards na mesma tela, e cada um obriga o
   navegador a reborrar a região inteira a cada quadro da rolagem. Um gradiente
   opaco dá a mesma leitura por um custo que não aparece no medidor. */
.card-divisao {
    position: relative;
    display: flex; flex-direction: column;
    padding: 20px;
    background: linear-gradient(180deg, rgba(31,32,36,.92), rgba(22,23,26,.96));
    border: 1px solid var(--border);
    contain: paint;
    border-radius: var(--radius);
    cursor: pointer; overflow: hidden;
    text-align: left; width: 100%;
    color: inherit; font-family: inherit;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
    animation: subir .45s cubic-bezier(.22,1,.36,1) backwards;
}
.card-divisao:hover {
    transform: translateY(-5px);
    border-color: rgba(46,204,112,.42);
    box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 26px rgba(46,204,112,.16);
}
/* a arte da divisão desfocada por trás, igual à capa do grupo */
.card-divisao .fundo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: blur(22px) saturate(1.6);
    transform: scale(1.4);
    opacity: .3;
    transition: opacity .3s;
}
.card-divisao:hover .fundo { opacity: .5; }
.card-divisao::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, rgba(17,18,21,.94), rgba(17,18,21,.72));
}
.card-divisao > * { position: relative; z-index: 1; }

.card-divisao .topo {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 15px;
}
.card-divisao .arte {
    width: 66px; height: 66px; flex-shrink: 0;
    border-radius: 16px; object-fit: cover;
    border: 1px solid rgba(206,244,222,.3);
    background: rgba(0,0,0,.4);
    box-shadow: 0 8px 22px -6px rgba(0,0,0,.85);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.card-divisao:hover .arte { transform: scale(1.06); }

.card-divisao .texto { min-width: 0; }
.card-divisao .sigla {
    font-size: 1.22rem; font-weight: 800; letter-spacing: .3px;
    display: block; line-height: 1.15;
}
/* O nome completo da divisão, em até duas linhas. É o que diz o que a sigla
   significa para quem ainda não decorou. */
.card-divisao .nome-completo {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-size: .82rem; line-height: 1.45;
    color: var(--text-mid);
}
.card-divisao .rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.card-divisao .membros {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .76rem; font-weight: 600; color: var(--text-dim);
}
.card-divisao .membros svg { width: 13px; height: 13px; stroke: var(--text-dim); }
.card-divisao .ir {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 8px;
    background: rgba(46,204,112,.12);
    border: 1px solid rgba(46,204,112,.24);
    color: var(--accent-cl);
    font-size: .76rem; font-weight: 700;
    transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.card-divisao .ir svg { width: 14px; height: 14px; stroke: currentColor; }
.card-divisao:hover .ir {
    background: var(--accent); color: #fff;
    transform: translateX(3px);
    box-shadow: 0 6px 18px -6px rgba(46,204,112,.9);
}

/* ---------- Tela de uma divisão ---------- */
.voltar {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; margin-bottom: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    color: var(--text-mid); font-size: .8rem; font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .2s, color .2s;
}
.voltar:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateX(-3px); }
.voltar svg { width: 15px; height: 15px; }

.cabecalho-escolha {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 18px; margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.cabecalho-escolha img {
    width: 52px; height: 52px; border-radius: 13px; object-fit: cover;
    border: 1px solid rgba(206,244,222,.3);
    background: rgba(0,0,0,.4);
}
.cabecalho-escolha .nome { font-size: 1.15rem; font-weight: 800; display: block; }
.cabecalho-escolha .sub { font-size: .78rem; color: var(--text-dim); margin-top: 3px; display: block; }

/* o card do grupo principal se destaca dos das divisões */
.card-divisao.principal { border-color: rgba(46,204,112,.35); }
.card-divisao.principal .sigla { color: var(--accent-cl); }

/* ---------- Registro ---------- */
.tabela { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tabela th {
    text-align: left; padding: 14px;
    color: var(--text-dim);
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
}
.tabela td {
    padding: 15px 14px; font-size: .88rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: top;
}
.tabela tbody tr { transition: background .18s; }
.tabela tbody tr:hover td { background: rgba(255,255,255,.04); }
.tabela tr:last-child td { border-bottom: none; }
.tabela .motivo { color: var(--text-dim); font-size: .82rem; }
.tabela .quando { color: var(--text-dim); font-size: .8rem; white-space: nowrap; }

.etiqueta {
    display: inline-block; padding: 6px 11px; border-radius: 5px;
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
    white-space: nowrap; border: 1px solid;
}
.etiqueta.promover   { background: rgba(46,204,113,.1); color: var(--green); border-color: rgba(46,204,113,.3); }
.etiqueta.rebaixar   { background: rgba(224,169,46,.1); color: var(--amber); border-color: rgba(224,169,46,.3); }
.etiqueta.exilar     { background: rgba(255,90,106,.1); color: var(--red);   border-color: rgba(255,90,106,.3); }
.etiqueta.cdp_tirada { background: rgba(255,255,255,.06); color: #A1A4A8;    border-color: rgba(255,255,255,.12); }
.etiqueta.falhou     { background: rgba(255,90,106,.1); color: var(--red);   border-color: rgba(255,90,106,.3); }

.seta { color: var(--accent-cl); }

/* Empilha e centraliza SOZINHO. Antes era só `text-align: center`, e o ícone
   ficava na mesma linha do texto: quem esquecesse de envolver a frase num
   <div> via o ícone escorregar para o lado dela em vez de ficar acima. */
.vazio {
    display: flex; flex-direction: column; align-items: center; gap: 13px;
    text-align: center; padding: 56px 20px;
    color: var(--text-dim); font-size: .88rem; line-height: 1.6;
}
.vazio svg {
    width: 40px; height: 40px; flex-shrink: 0;
    stroke: rgba(255,255,255,.18);
    margin: 0;   /* o gap do flex cuida do respiro */
}

/* ---------- Espera: o que a caixa mostra antes de buscar alguém ---------- */
.aguardando {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 42px 20px 16px;
    color: var(--text-dim);
}
.aguardando .anel {
    width: 62px; height: 62px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    background: rgba(46,204,112,.07);
    border: 1px dashed rgba(46,204,112,.32);
}
.aguardando .anel svg { width: 25px; height: 25px; stroke: var(--accent); }
.aguardando p { font-size: .86rem; line-height: 1.6; max-width: 46ch; }
.aguardando.escondido { display: none; }

/* ---------- Botão trabalhando ---------- */
.botao.ocupado { pointer-events: none; color: transparent; }
.botao.ocupado::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 17px; height: 17px; margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff; border-radius: 50%;
    animation: girar .65s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Avisos ---------- */
.avisos {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 9px;
    width: 350px; max-width: calc(100vw - 40px);
}
.aviso {
    background: #17181B;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 14px 15px 16px;
    display: flex; align-items: flex-start; gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
    position: relative; overflow: hidden;
    animation: avisoEntra .35s cubic-bezier(.22,1,.36,1) backwards;
}
.aviso .ic {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-s);
    display: flex; align-items: center; justify-content: center;
    background: rgba(46,204,112,.13);
}
.aviso .ic svg { width: 18px; height: 18px; stroke: var(--accent); }
.aviso.erro .ic { background: rgba(255,90,106,.13); }
.aviso.erro .ic svg { stroke: var(--red); }
.aviso .corpo { flex: 1; min-width: 0; padding-top: 1px; }
.aviso strong {
    display: block; margin-bottom: 4px;
    font-size: .76rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .9px;
    color: var(--accent-cl);
}
.aviso.erro strong { color: var(--red); }
.aviso p { font-size: .82rem; color: #AFB2B6; line-height: 1.5; word-break: break-word; }
/* A barra encolhe por `scaleX`, não por `width`: largura refaz o layout a cada
   quadro, escala é resolvida na GPU. */
.aviso .barra {
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--accent), rgba(46,204,112,.2));
    animation: escoar 6s linear forwards;
}
.aviso.erro .barra { background: linear-gradient(90deg, var(--red), rgba(255,90,106,.2)); }
@keyframes escoar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes avisoEntra {
    from { opacity: 0; transform: translateY(-12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* =========================================================
   Treino em lote
   ========================================================= */
.lote-cabecalho {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 22px 0 10px;
}
.rotulo-lote {
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-dim);
}
.lote-conta { font-size: .8rem; color: var(--text-dim); }
.lote-conta b { color: var(--accent-cl); font-size: .95rem; }

.lote-lista { display: grid; gap: 9px; }
.lote-vazio {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 30px 18px; text-align: center;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: var(--radius-s);
    color: var(--text-dim); font-size: .85rem;
}
.lote-vazio svg { width: 26px; height: 26px; stroke: var(--text-dim); }

.lote-card {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 13px;
    background: rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.06);
    border-left: 2px solid var(--green);
    border-radius: var(--radius-s);
    animation: subir .3s cubic-bezier(.22,1,.36,1) backwards;
}
.lote-card.travado { border-left-color: var(--amber); opacity: .78; }
.lote-card img {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.05); flex-shrink: 0;
}
.lote-card .quem { flex: 1; min-width: 0; }
.lote-card .quem strong { font-size: .9rem; display: block; }
.lote-card .caminho {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: .78rem; color: var(--text-dim); margin-top: 3px;
}
.lote-card .caminho .vai { color: var(--green); font-weight: 600; }
.lote-card .caminho .trava { color: var(--amber); font-weight: 600; }
.lote-card .tirar {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer;
    transition: all .18s;
}
.lote-card .tirar:hover { background: rgba(255,90,106,.14); color: var(--red);
    border-color: rgba(255,90,106,.35); }
.lote-card .tirar svg { width: 15px; height: 15px; pointer-events: none; }

.contador { float: right; font-weight: 600; color: var(--text-dim); }
.contador.ok { color: var(--green); }

.area-arquivo {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 26px 18px; text-align: center;
    background: rgba(0,0,0,.3);
    border: 2px dashed rgba(255,255,255,.14);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.area-arquivo:hover { border-color: var(--accent); background: rgba(46,204,112,.06); }
.area-arquivo svg { width: 26px; height: 26px; stroke: var(--accent-cl); }
.area-arquivo span { font-size: .86rem; font-weight: 600; }
.area-arquivo em { font-size: .72rem; color: var(--text-dim); font-style: normal; }
.area-arquivo.cheia { border-style: solid; border-color: rgba(47,217,138,.5);
    background: rgba(47,217,138,.06); }
.area-arquivo.cheia svg { stroke: var(--green); }

.previa-cunha {
    display: block; margin-top: 12px;
    max-width: 100%; max-height: 220px;
    border-radius: var(--radius-s);
    border: 1px solid var(--border-2);
}

/* resultado do lote, nome por nome */
.resultado-linha {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.resultado-linha:last-child { border-bottom: none; }
.resultado-linha img { width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.05); flex-shrink: 0; }
.resultado-linha .quem { flex: 1; min-width: 0; }
.resultado-linha .quem strong { font-size: .88rem; display: block; }
.resultado-linha .quem span { font-size: .78rem; color: var(--text-dim); }
.resultado-linha .selo-r {
    flex-shrink: 0; padding: 5px 11px; border-radius: 6px;
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .4px; border: 1px solid;
}
.resultado-linha.subiu .selo-r { background: rgba(47,217,138,.12); color: var(--green);
    border-color: rgba(47,217,138,.3); }
.resultado-linha.ficou .selo-r { background: rgba(224,169,46,.12); color: var(--amber);
    border-color: rgba(224,169,46,.3); }

/* =========================================================
   Níveis de rebaixamento e caixas de permissão
   ========================================================= */
.niveis { display: flex; gap: 8px; }
.nivel-btn {
    width: 52px; height: 46px;
    background: rgba(0,0,0,.34);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--text-mid);
    font-size: 1rem; font-weight: 800;
    cursor: pointer; font-family: inherit;
    transition: all .18s;
}
.nivel-btn:hover:not(:disabled) { border-color: rgba(46,204,112,.45); color: #fff; }
.nivel-btn.ativo {
    background: var(--accent-12); border-color: var(--accent);
    color: var(--accent-cl);
    box-shadow: 0 0 16px rgba(46,204,112,.2);
}
.nivel-btn:disabled { opacity: .3; cursor: not-allowed; }
.dica-nivel { display: block; margin-top: 9px; font-size: .78rem; color: var(--text-dim); }

.poderes { display: grid; gap: 9px; margin-top: 20px; }
.poder {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 15px;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.poder:hover { border-color: rgba(46,204,112,.35); background: rgba(46,204,112,.05); }
.poder input {
    width: 19px; height: 19px; margin-top: 1px;
    accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.poder span { font-size: .82rem; color: var(--text-dim); line-height: 1.45; }
.poder span b { display: block; color: #fff; font-size: .9rem; margin-bottom: 2px; }
.poder:has(input:checked) { border-color: rgba(46,204,112,.45); background: var(--accent-12); }

.pessoa-liberada {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.pessoa-liberada:last-child { border-bottom: none; }
.pessoa-liberada img { width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.05); flex-shrink: 0; }
.pessoa-liberada .quem { flex: 1; min-width: 0; }
.pessoa-liberada .quem strong { font-size: .9rem; display: block; }
.pessoa-liberada .poderes-tem {
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;
}
.pessoa-liberada .marca-poder {
    padding: 3px 9px; border-radius: 5px;
    background: var(--accent-12); border: 1px solid rgba(46,204,112,.26);
    color: var(--accent-cl); font-size: .68rem; font-weight: 700;
}
.pessoa-liberada .marca-poder.perigo {
    background: rgba(255,90,106,.12); border-color: rgba(255,90,106,.3); color: var(--red);
}

/* =========================================================
   Avisos (sino)
   ========================================================= */
.botao-sino {
    position: relative; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text-mid); cursor: pointer;
    transition: all .18s;
}
.botao-sino:hover { background: rgba(46,204,112,.12); color: #fff;
    border-color: rgba(46,204,112,.35); }
.botao-sino svg { width: 17px; height: 17px; }
.botao-sino .bolinha {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 20px;
    background: var(--red); color: #fff;
    font-size: .62rem; font-weight: 800; font-style: normal;
    line-height: 18px; text-align: center;
    border: 2px solid var(--bg);
}

.painel-sino {
    position: fixed; top: 74px; left: 18px; z-index: 9998;
    width: 340px; max-width: calc(100vw - 36px);
    max-height: 70vh; overflow-y: auto;
    background: #17181B;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    box-shadow: 0 26px 60px rgba(0,0,0,.7);
    animation: surgirAviso .2s cubic-bezier(.22,1,.36,1);
}
@keyframes surgirAviso {
    from { opacity: 0; transform: translateY(-10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.sino-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px 17px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: #17181B;
}
.sino-topo strong { font-size: .95rem; font-weight: 800; }
.sino-limpar {
    background: none; border: none; cursor: pointer; font-family: inherit;
    color: var(--accent-cl); font-size: .74rem; font-weight: 700;
}
.sino-limpar:hover { text-decoration: underline; }

.aviso-item {
    display: flex; gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.aviso-item:last-child { border-bottom: none; }
.aviso-item.novo { background: rgba(46,204,112,.07); }
.aviso-item .pt {
    width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
    background: var(--border-2);
}
.aviso-item.novo .pt { background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.aviso-item .txt { flex: 1; min-width: 0; }
.aviso-item .txt strong { display: block; font-size: .85rem; margin-bottom: 3px; }
.aviso-item .txt p { font-size: .78rem; color: var(--text-dim); line-height: 1.5; }
.aviso-item .txt .quando { font-size: .7rem; color: #8B8D93; margin-top: 5px; display: block; }

/* =========================================================
   Perfil
   ========================================================= */
.cartao-perfil {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 20px;
    padding: 26px;
    background: linear-gradient(180deg, rgba(31,32,36,.8), rgba(22,23,26,.9));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
}
.cartao-perfil::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px circle at 88% -30%,
                color-mix(in srgb, var(--cor-perfil, #2ECC70) 26%, transparent), transparent 70%);
}
.cartao-perfil[data-enfeite="listras"]::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14;
    background: repeating-linear-gradient(115deg,
        var(--cor-perfil, #2ECC70) 0 2px, transparent 2px 16px);
}
.cartao-perfil[data-enfeite="grade"]::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background:
        linear-gradient(color-mix(in srgb, var(--cor-perfil,#2ECC70) 40%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cor-perfil,#2ECC70) 40%, transparent) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px;
}
.cartao-perfil[data-enfeite="brilho"]::after {
    content: ''; position: absolute; top: -60%; left: -20%; width: 55%; height: 220%;
    pointer-events: none; opacity: .16; transform: rotate(18deg);
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--cor-perfil,#2ECC70) 85%, transparent), transparent);
}
.cartao-perfil[data-enfeite="aurora"]::after {
    content: ''; position: absolute; inset: -30%; pointer-events: none; opacity: .3;
    background:
        radial-gradient(38% 42% at 20% 30%, color-mix(in srgb, var(--cor-perfil,#2ECC70) 55%, transparent), transparent 70%),
        radial-gradient(34% 38% at 80% 70%, color-mix(in srgb, var(--cor-perfil,#2ECC70) 35%, transparent), transparent 72%);
}
.cartao-perfil > * { position: relative; z-index: 1; }

.perfil-foto {
    width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
    border: 3px solid var(--cor-perfil, #2ECC70);
    box-shadow: 0 0 24px color-mix(in srgb, var(--cor-perfil,#2ECC70) 40%, transparent);
    background: rgba(255,255,255,.05);
}
.perfil-texto { min-width: 0; }
.perfil-texto h3 { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.perfil-texto .cargo {
    display: inline-block; margin-top: 7px;
    padding: 5px 12px; border-radius: 20px;
    background: color-mix(in srgb, var(--cor-perfil,#2ECC70) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--cor-perfil,#2ECC70) 38%, transparent);
    color: var(--cor-perfil, #2ECC70);
    font-size: .76rem; font-weight: 700;
}
.perfil-texto .lema {
    margin-top: 10px; font-size: .86rem; color: var(--text-mid);
    font-style: italic; line-height: 1.5;
}

.numeros-perfil {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 11px; margin-bottom: 20px;
}
.numero-caixa {
    padding: 16px; text-align: center;
    background: rgba(0,0,0,.32);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
}
.numero-caixa b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.numero-caixa span {
    display: block; margin-top: 6px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-dim);
}

.escolha-cores { display: flex; flex-wrap: wrap; gap: 9px; }
.bola-cor {
    width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    transition: transform .18s, border-color .18s;
}
.bola-cor:hover { transform: scale(1.1); }
.bola-cor.ativo { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.14); }

.escolha-enfeite { display: flex; flex-wrap: wrap; gap: 8px; }

/* =========================================================
   Gaveta do menu (celular)
   Ela ENTRA PELA ESQUERDA, como a barra lateral do computador — não sobe de
   baixo. Subindo, o menu virava um cartão solto no rodapé e não se parecia
   com a navegação do site; vindo do lado, é a mesma barra lateral de sempre,
   só que guardada enquanto não precisa.
   ========================================================= */
.gaveta {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: stretch; justify-content: flex-start;
    background: rgba(3,8,5,.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: surgirFundo .18s ease;
}
.gaveta-caixa {
    width: min(82vw, 290px);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #15171A;
    border-right: 1px solid var(--border-2);
    box-shadow: 8px 0 34px rgba(0,0,0,.6);
    padding: max(16px, env(safe-area-inset-top)) 12px
             max(16px, env(safe-area-inset-bottom));
    /* desliza por transform, que a GPU resolve sozinha */
    animation: entrarGaveta .26s cubic-bezier(.22,1,.36,1);
}
@keyframes entrarGaveta { from { transform: translateX(-100%); } to { transform: none; } }
/* o puxador era o traço da folha que subia; de lado ele não faz sentido */
.gaveta-puxador { display: none; }
.gaveta-caixa > strong {
    display: block; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .9px;
    color: var(--text-dim); margin: 2px 0 12px 8px;
}
/* Título de seção dentro da gaveta, igual ao da barra lateral do computador */
.gaveta-itens .gaveta-secao {
    font-size: .62rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #8B8D93;
    padding: 14px 10px 6px; margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.gaveta-itens .gaveta-secao:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
.gaveta-itens { display: grid; gap: 2px; }
.gaveta-itens button {
    display: flex; align-items: center; gap: 13px;
    width: 100%; padding: 13px 10px;
    background: none; border: none; border-radius: var(--radius-s);
    color: var(--text-mid); font-family: inherit;
    font-size: .92rem; font-weight: 600; text-align: left;
    cursor: pointer; min-height: 50px;
}
.gaveta-itens button:hover, .gaveta-itens button:active { background: rgba(255,255,255,.06); color: #fff; }
.gaveta-itens button svg { width: 19px; height: 19px; flex-shrink: 0; }
.gaveta-itens button.ativo { background: var(--accent-12); color: var(--accent-cl); }

.so-celular { display: none !important; }

/* =========================================================
   Esqueletos de carregamento
   Em vez da palavra "Carregando", o painel desenha a FORMA do que vem — e a
   tela já nasce no lugar certo, sem o conteúdo empurrar nada quando chega.
   O brilho desliza por `transform`, que roda na GPU; animar a posição do
   gradiente repintaria a faixa inteira a cada quadro.
   ========================================================= */
.osso {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .055);
    border-radius: 7px;
}
.osso::after {
    content: '';
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .09) 55%, transparent);
    animation: brilhar 1.6s ease-in-out infinite;
}
@keyframes brilhar { to { transform: translateX(100%); } }

/* cada peça entra um pouquinho depois da anterior: a onda atravessa a lista */
.osso:nth-child(2)::after { animation-delay: .12s; }
.osso:nth-child(3)::after { animation-delay: .24s; }
.osso:nth-child(4)::after { animation-delay: .36s; }
.osso:nth-child(5)::after { animation-delay: .48s; }
.osso:nth-child(n+6)::after { animation-delay: .6s; }

.osso.redondo { border-radius: 50%; }
.osso.linha { height: 11px; }
.osso.linha.curta { width: 38%; }
.osso.linha.media { width: 62%; }
.osso.linha.longa { width: 86%; }

.esqueleto-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
    gap: 16px;
}
.esqueleto-card {
    padding: 20px;
    background: rgba(22,23,26,.55);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.esqueleto-card .topo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.esqueleto-card .topo .texto { flex: 1; }
.esqueleto-card .rodape {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06);
}

.esqueleto-linha {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.esqueleto-linha:last-child { border-bottom: none; }
.esqueleto-linha .meio { flex: 1; display: grid; gap: 7px; }

/* =========================================================
   Movimento do painel
   Tudo que se move usa só transform e opacity — as duas únicas propriedades
   que o navegador resolve na GPU, sem refazer layout nem pintura.
   ========================================================= */

/* entrada escalonada: o item sabe a própria posição pelo --i */
@keyframes entrarDeBaixo {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes entrarDeLado {
    from { opacity: 0; transform: translate3d(-10px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes crescer {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
}

.escalonado > * {
    animation: entrarDeBaixo .42s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}

/* o conteúdo da aba entra junto, e a barra lateral marca o item novo */
.secao.ativa > .titulo { animation: entrarDeLado .4s cubic-bezier(.22,1,.36,1) backwards; }
.secao.ativa > .caixa, .secao.ativa > .grade-cards, .secao.ativa > .capa {
    animation: entrarDeBaixo .45s cubic-bezier(.22,1,.36,1) backwards;
}
.secao.ativa > .caixa:nth-of-type(2) { animation-delay: .07s; }
.secao.ativa > .caixa:nth-of-type(3) { animation-delay: .12s; }

/* apertar um botão responde na hora: o toque "afunda" */
.botao, .chip, .nivel-btn, .aba-grupo, .card-divisao, .voltar, .menu button {
    -webkit-tap-highlight-color: transparent;
}
/* A descida é mais RÁPIDA que a volta: 70 ms afundando, ~160 ms voltando.
   É a física de uma tecla — comprime na hora, retorna amortecida. Com os dois
   tempos iguais o botão parece elástico; com os dois lentos, o retorno chega
   depois de o dedo sair e parece travamento. */
.botao:active:not(:disabled):not(.ocupado) {
    transform: scale(.97); transition-duration: 70ms;
}
.chip:active, .nivel-btn:active:not(:disabled), .aba-grupo:active {
    transform: scale(.95); transition-duration: 70ms;
}
.card-divisao:active { transform: translateY(-2px) scale(.99); transition-duration: 70ms; }
.patente-op:active { transition-duration: 70ms; }
.cdp-card .cdp-tirar:active:not(:disabled) { transform: scale(.96); transition-duration: 70ms; }
.chip, .nivel-btn, .aba-grupo {
    transition: transform .16s cubic-bezier(.22,1,.36,1),
                background .18s, border-color .18s, color .18s;
}
/* o retângulo azul que o Android pinta em cima de tudo que é tocado */
.botao, .chip, .nivel-btn, .aba-grupo, .pag-btn, .patente-op,
.menu button, .gaveta-itens button, .cdp-card, .card-divisao {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;   /* mata a espera de 300 ms do duplo-toque */
}

/* ícone do menu reage ao passar o mouse e ao virar o item atual */
.menu button svg { transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.menu button:hover svg { transform: scale(1.14); }
.menu button.ativo svg { transform: scale(1.12); }

/* selo de CDP respira devagar: dá para ver de longe que o tempo corre */
.selo.cdp { animation: respirarSelo 2.8s ease-in-out infinite; }
@keyframes respirarSelo {
    0%, 100% { opacity: 1; }
    50%      { opacity: .72; }
}

/* a bolinha do sino chama atenção quando chega aviso novo */
.botao-sino .bolinha { animation: pular 2.6s ease-in-out infinite; }
@keyframes pular {
    0%, 86%, 100% { transform: scale(1); }
    90%           { transform: scale(1.22); }
    94%           { transform: scale(1); }
}

/* o anel do estado de espera gira devagar, sem chamar mais atenção que o texto */
.aguardando .anel { animation: girarDevagar 9s linear infinite; }
@keyframes girarDevagar { to { transform: rotate(360deg); } }
.aguardando .anel svg { animation: girarDevagar 9s linear infinite reverse; }

/* Só o card recém-adicionado entra animado. A lista inteira é redesenhada a
   cada inclusão, e sem isto os militares que já estavam lá piscariam junto. */
@keyframes entrarNaTurma {
    0%   { opacity: 0; transform: translate3d(-14px, 0, 0); }
    65%  { opacity: 1; transform: translate3d(3px, 0, 0); }
    100% { opacity: 1; transform: none; }
}
.lote-card.novo { animation: entrarNaTurma .4s cubic-bezier(.22,1,.36,1) backwards; }

/* listas que chegam do servidor entram em sequência */
.item-registro, .pessoa-liberada, .aviso-item {
    animation: entrarDeLado .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 38ms);
}

/* a turma do treino e o estado vazio trocam sem salto */
.lote-vazio { animation: crescer .3s ease backwards; }

/* resultado do treino: cada nome aparece na sequência, como se fosse lido */
.resultado-linha {
    animation: entrarDeLado .4s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}

/* número do perfil sobe ao aparecer */
.numero-caixa { animation: crescer .45s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms); }

/* patentes da hierarquia aparecem bloco a bloco */
.hq-card { animation: crescer .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 22ms); }

/* Troca de patente na ficha: o cargo novo pisca uma vez. O brilho é um
   pseudo-elemento que some por opacidade — trocar a cor de fundo repintaria
   a linha a cada quadro. */
.grupo-linha.mudou::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    background: rgba(46,204,112,.3);
    animation: destacarMudanca 1.4s ease-out forwards;
}
@keyframes destacarMudanca {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Celular ---------- */
.abrir-menu { display: none; }

@media (max-width: 620px) {
    /* De volta ao `stretch`. O `flex-start` existe só para o sticky da barra
       lateral no desktop; aqui, com a estrutura em coluna, ele faria cada
       bloco ter a largura do próprio conteúdo em vez da tela — era isso que
       criava rolagem lateral em toda aba. */
    .estrutura { flex-direction: column; align-items: stretch; }

    /* ---- Cabeçalho fixo no topo: marca à esquerda, quem está logado à direita ----
       ⚠️ Sem backdrop-filter aqui. Ele cria bloco de contenção para descendentes
       `fixed`, e a barra de navegação (filha desta aside) ancorava no cabeçalho
       em vez da janela — ia parar no TOPO da tela. Fundo sólido resolve. */
    .lateral {
        width: 100%; border-right: none;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 2px 12px rgba(0,0,0,.5);
        padding: 10px 14px;
        flex-direction: row; align-items: center; gap: 10px;
        position: sticky; top: 0; z-index: 90;
        padding-top: max(10px, env(safe-area-inset-top));
        height: auto; overflow: visible;
        background: #111215;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .marca { padding: 0; margin: 0; border-bottom: none; flex: 1; min-width: 0; }
    .marca .brasao { width: 38px; height: 38px; border-radius: 11px; }
    .marca strong { font-size: .88rem; }
    .marca span { font-size: .66rem; }
    .abrir-menu { display: none; }

    .rodape-lateral {
        margin: 0; padding: 0; border: none; background: none;
        flex-shrink: 0; gap: 8px;
    }
    .rodape-lateral div { display: none; }
    .rodape-lateral img { width: 36px; height: 36px; }
    .rodape-lateral a { width: 44px; height: 44px; }

    /* ---- Navegação embaixo, no alcance do polegar ----
       Quatro destinos, que é o ponto doce: acima de cinco a barra vira ruído.
       A altura respeita o alvo de toque de 48px e a faixa de gestos do sistema. */
    .menu {
        display: flex !important;
        flex-direction: row; gap: 0;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
        /* A largura fica presa na janela. Sem isto a barra cresce com o conteúdo
           dos botões e empurra a página inteira para o lado: em tela de 320px
           ela chegava a 449px e criava rolagem lateral em todas as abas. */
        width: 100%; max-width: 100%;
        box-sizing: border-box;
        padding: 6px 6px max(6px, env(safe-area-inset-bottom));
        /* Opaca de propósito. Vidro desfocado aqui obrigaria o navegador a
           reborrar uma faixa da tela a cada quadro da rolagem — e esta barra
           se move justamente enquanto a pessoa rola. */
        background: #111215;
        border-top: 1px solid var(--border-2);
        box-shadow: 0 -6px 26px rgba(0,0,0,.55);
        overflow: visible;
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }
    /* Sai de cena enquanto se lê descendo e volta assim que a pessoa sobe.
       Sai por transform, sem mexer na altura da página — mudar altura faria o
       conteúdo pular a cada vez que ela aparece ou some. */
    .menu.recolhido { transform: translateY(calc(100% + 12px)); }
    .menu-titulo { display: none; }

    .menu button {
        /* `1 1 0` (e não `flex: 1`) para a largura sair da divisão da barra, não
           do tamanho do rótulo — senão o botão nunca encolhe abaixo do texto. */
        flex: 1 1 0; min-width: 0; max-width: 100%;
        overflow: hidden;
        flex-direction: column; justify-content: center; gap: 4px;
        min-height: 52px; padding: 7px 3px;
        border: none; border-radius: var(--radius-s);
        font-size: .64rem; letter-spacing: .1px;
        text-align: center;
        position: relative;
    }
    .menu button::before { display: none; }
    .menu button svg { width: 21px; height: 21px; }
    /* Na barra de baixo cabe um rótulo curto, não "Promover no EB". O texto
       longo continua no HTML (é o que o leitor de tela anuncia); aqui só
       trocamos o que aparece. */
    .menu button span {
        flex: none; width: 100%;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: 0;
    }
    .menu button span::after {
        content: attr(data-curto);
        font-size: .64rem;
    }
    .menu button.ativo {
        background: var(--accent-12);
        box-shadow: none;
    }
    /* risco aceso em cima do item atual, no lugar da barra lateral */
    .menu button.ativo::after {
        content: '';
        position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 26px; height: 2px; border-radius: 0 0 3px 3px;
        background: var(--accent);
        box-shadow: 0 0 10px 1px rgba(46,204,112,.9);
    }
    .menu button .conta {
        position: absolute; top: 4px; left: 50%;
        margin-left: 6px;
        min-width: 17px; line-height: 15px;
        font-size: .58rem; padding: 0 5px;
    }

    /* o conteúdo precisa terminar acima da barra, senão o último botão fica atrás dela */
    .conteudo {
        padding: 20px 16px calc(84px + env(safe-area-inset-bottom));
    }

    .capa { padding: 9px 12px; gap: 10px; }
    .capa-texto { flex-direction: column; align-items: flex-start; gap: 1px; }
    .capa-selos span:not(.online) { display: none; }

    .titulo { margin-bottom: 22px; }
    .campo { min-width: 100%; }
    /* campo com menos de 16px faz o iPhone dar zoom sozinho ao tocar */
    .campo input, .campo select, .campo textarea { font-size: 16px; min-height: 48px; }
    .campo textarea { min-height: 84px; }
    .botao { min-height: 48px; }
    .botao.estreito { width: 100%; }
    .linha { gap: 10px; }

    .grade-cards { grid-template-columns: 1fr; gap: 12px; }
    .card-divisao { padding: 16px; }
    .card-divisao .arte { width: 56px; height: 56px; }
    .card-divisao .ir { padding: 9px 14px; }

    .grupo-linha { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ficha-topo { gap: 13px; flex-wrap: wrap; }
    .ficha-topo img { width: 56px; height: 56px; }
    .ficha-resumo { width: 100%; }
    .ficha-resumo .conta-tipo { flex: 1; }

    .item-registro { flex-wrap: wrap; gap: 11px; }
    .item-registro .lado { text-align: left; width: 100%; display: flex;
        align-items: center; gap: 10px; }
    .item-registro .lado .quando { margin-top: 0; }

    .filtros { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
        scrollbar-width: none; }
    .filtros::-webkit-scrollbar { display: none; }
    .chip { flex-shrink: 0; min-height: 40px; }

    .voltar { min-height: 44px; }
    .confirma-botoes { flex-direction: column-reverse; }
    .confirma-botoes .botao { width: 100%; }

    /* A barra de baixo leva quatro destinos; o que passar disso vai para a
       gaveta do "Mais" — acima de cinco itens a barra vira ruído. */
    .so-celular { display: flex !important; }
    .menu button.na-gaveta { display: none; }

    .painel-sino {
        top: auto; bottom: calc(76px + env(safe-area-inset-bottom));
        left: 12px; right: 12px; width: auto; max-height: 62vh;
    }

    .lote-card { gap: 11px; padding: 10px; }

    .lote-card .caminho { font-size: .74rem; }
    .nivel-btn { flex: 1; height: 50px; }
    .niveis { width: 100%; }
    .cartao-perfil { flex-direction: column; text-align: center; padding: 22px 18px; }
    .numeros-perfil { grid-template-columns: repeat(2, 1fr); }
    .area-arquivo { padding: 22px 14px; }
    .resultado-linha { gap: 10px; }

    .avisos { top: max(14px, env(safe-area-inset-top)); right: 12px; left: 12px;
        width: auto; max-width: none; }
}

/* =========================================================
   Peso da página no celular
   Medido num aparelho simulado: com vidro desfocado em 14 elementos a rolagem
   ficava em 28 fps, com 44 de 54 quadros estourando o orçamento de 16ms. Em
   tela pequena o vidro sai inteiro: o ganho de fluidez vale mais que o efeito,
   e o fundo em camadas já dá profundidade sozinho.
   ========================================================= */
@media (max-width: 620px) {
    .lateral, .cartao-entrada, .caixa, .card-divisao, .aviso, .confirma {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .lateral { background: #111215; }
    .cartao-entrada { background: linear-gradient(180deg, #202227, #191A1E); }
    .confirma { background: rgba(8,9,11,.88); }

    /* a aurora para de derivar: animação de fundo não paga o custo em celular */
    body::before { animation: none; }

    /* listas longas só pintam o que está perto da tela */
    .item-registro, .hq-bloco, .card-divisao {
        content-visibility: auto;
        contain-intrinsic-size: auto 120px;
    }
}

/* =========================================================
   Janela estreita de COMPUTADOR (621px a 880px).
   Não é celular: aqui o menu continua do lado, como o dono espera. Só a
   barra encolhe e o conteúdo perde respiro, para caber sem apertar.
   ========================================================= */
@media (min-width: 621px) and (max-width: 880px) {
    .lateral { width: 208px; padding-left: 10px; padding-right: 10px; }
    /* o nome quebrava em duas linhas na barra estreita */
    .lateral .marca-texto strong { font-size: .95rem; }
    /* o nome do grupo so cabia cortado ("EB | EXERCIT..."), entao sai:
       cortado ele nao informa nada e ainda rouba a linha do titulo */
    .lateral .marca-texto span { display: none; }
    .lateral .marca { gap: 8px; }
    .lateral .brasao, .lateral .brasao.arte { width: 36px; height: 36px; }
    .conteudo { padding: 24px 18px; }
    .menu button { padding-left: 11px; padding-right: 11px; }
    .menu-titulo { padding-left: 11px; padding-right: 11px; }
    .capa { padding: 12px 14px; }
    .titulo h2 { font-size: 1.5rem; }
    /* a barra de baixo e a gaveta são do celular, não desta faixa */
    .so-celular { display: none !important; }
    .menu button.na-gaveta { display: flex; }
}

/* =========================================================
   Páginas de texto: termos, privacidade, cookies e créditos.
   Largura de leitura curta de propósito — linha comprida cansa e faz o olho
   perder a volta. O resto segue o painel: mesmo fundo, mesmo verde.
   ========================================================= */
.doc-pagina {
    max-width: 760px;
    margin: 0 auto;
    padding: 34px 20px 70px;
}
.doc-voltar {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-dim); text-decoration: none;
    font-size: .86rem; font-weight: 600;
    padding: 9px 14px 9px 10px; border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    transition: color .2s, border-color .2s, transform .2s;
}
.doc-voltar:hover {
    color: var(--accent-cl); border-color: rgba(46,204,112,.4);
    transform: translateX(-3px);
}
.doc-voltar svg { width: 16px; height: 16px; }

.doc-folha {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 38px 38px 34px;
    box-shadow: 0 18px 50px -24px rgba(0,0,0,.8);
}
.doc-cabecalho { border-bottom: 1px solid var(--border); padding-bottom: 22px; }
.doc-cabecalho h1 {
    font-size: 2rem; font-weight: 800; letter-spacing: -.4px;
    color: var(--text); margin-bottom: 10px;
}
/* o fio verde embaixo do título, igual ao das abas do painel */
.doc-cabecalho h1::after {
    content: ''; display: block;
    width: 52px; height: 3px; border-radius: 3px; margin-top: 12px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}
.doc-resumo { color: var(--text-mid); font-size: .97rem; line-height: 1.65; margin-top: 14px; }
.doc-data {
    display: inline-block; margin-top: 14px;
    font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-dim);
    background: var(--surface-3); border: 1px solid var(--border);
    padding: 5px 11px; border-radius: 99px;
}

.doc-bloco { margin-top: 30px; }
.doc-bloco h2 {
    font-size: 1.12rem; font-weight: 700; color: var(--text);
    margin-bottom: 11px;
    display: flex; align-items: center; gap: 10px;
}
/* marcador verde no começo do título da seção */
.doc-bloco h2::before {
    content: ''; flex-shrink: 0;
    width: 3px; height: 17px; border-radius: 3px;
    background: var(--accent);
}
.doc-bloco p {
    color: var(--text-mid); font-size: .94rem; line-height: 1.78;
    margin-bottom: 11px;
}
.doc-bloco p b, .doc-lista b { color: var(--text); font-weight: 700; }
.doc-bloco code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .86em; color: var(--accent-cl);
    background: var(--sunken, rgba(0,0,0,.3));
    padding: 2px 6px; border-radius: 6px;
}

.doc-lista { list-style: none; margin: 4px 0 6px; display: grid; gap: 9px; }
.doc-lista li {
    position: relative; padding-left: 22px;
    color: var(--text-mid); font-size: .93rem; line-height: 1.7;
}
.doc-lista li::before {
    content: ''; position: absolute; left: 4px; top: .62em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); opacity: .85;
}

.doc-aviso {
    margin-top: 15px; padding: 14px 16px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background: var(--accent-12);
    color: var(--text-mid); font-size: .91rem; line-height: 1.7;
}

.doc-rodape {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; margin-top: 26px;
}
.doc-rodape a {
    color: var(--text-dim); text-decoration: none;
    font-size: .85rem; font-weight: 600;
    padding: 9px 15px; border-radius: 99px;
    border: 1px solid var(--border); background: var(--surface-3);
    transition: color .2s, border-color .2s;
}
.doc-rodape a:hover { color: var(--accent-cl); border-color: rgba(46,204,112,.4); }

/* Rodapé da tela de entrada, com os mesmos links */
.entrada-rodape {
    display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
    margin-top: 22px;
}
.entrada-rodape a {
    color: var(--text-dim); text-decoration: none;
    font-size: .78rem; font-weight: 500;
    transition: color .2s;
}
.entrada-rodape a:hover { color: var(--accent-cl); }

@media (max-width: 620px) {
    .doc-pagina { padding: 20px 14px 54px; }
    .doc-folha { padding: 24px 20px 26px; border-radius: var(--radius-s); }
    .doc-cabecalho h1 { font-size: 1.6rem; }
    .doc-bloco { margin-top: 24px; }
}

/* Rodapé do painel: fecha o conteúdo sem competir com ele. */
.painel-rodape {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-top: 42px; padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: .78rem;
}
.painel-rodape span { color: var(--text-dim); font-weight: 700; letter-spacing: .3px; }
.painel-rodape a {
    color: #8B8D93; text-decoration: none; font-weight: 500;
    transition: color .2s;
}
.painel-rodape a:hover { color: var(--accent-cl); }
@media (max-width: 620px) {
    /* a barra de navegação é fixa no rodapé e taparia os links */
    .painel-rodape { margin-bottom: 78px; }
}

/* =========================================================
   Entrada: a arte do grupo ao fundo
   Desfoque grande e opacidade baixa de proposito — a imagem é para dar
   identidade e cor, não para ser lida. Fica atrás de tudo e não disputa
   com o cartão.
   ========================================================= */
.entrada-fundo {
    position: fixed; inset: -80px;      /* sobra para o desfoque não mostrar borda */
    z-index: -2;
    background-size: cover; background-position: center;
    /* saturação BAIXA de proposito: a arte do grupo tem laranja e azul, e em
       tela cheia essas manchas brigavam com o verde do painel. Assim ela
       entra como luz e textura, não como cor solta. */
    filter: blur(64px) saturate(.9) brightness(.62);
    opacity: .55;
    /* escurece o miolo para o texto do cartão continuar legível sobre
       qualquer arte, clara ou escura */
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 48%,
                        rgba(0,0,0,.35), #000 72%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 48%,
                rgba(0,0,0,.35), #000 72%);
    animation: respirarFundo 22s ease-in-out infinite;
}
/* Véu verde sobre a arte: amarra o fundo ao resto do painel. */
.entrada-fundo::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(62% 56% at 50% 45%, rgba(46,204,112,.2), rgba(46,204,112,0) 72%),
        linear-gradient(180deg, rgba(12,14,16,.26), rgba(10,11,13,.5));
}

/* um movimento lento e quase imperceptível: dá vida sem puxar o olho.
   Só escala e opacidade, que a GPU resolve sem repintar nada. */
@keyframes respirarFundo {
    0%, 100% { transform: translate3d(-2%, -1%, 0); opacity: .55; }
    50%      { transform: translate3d( 2%,  1%, 0); opacity: .66; }
}

/* A entrada inteira chega de baixo, uma vez só. */
.cartao-entrada { animation: chegarCartao .55s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes chegarCartao {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.entrada-rodape { animation: chegarCartao .55s cubic-bezier(.22,1,.36,1) .12s backwards; }

/* O brasão ganha um halo que pulsa devagar. */
.cartao-entrada .brasao { position: relative; }
.cartao-entrada .brasao::after {
    content: ''; position: absolute; inset: -9px;
    border-radius: inherit; z-index: -1;
    background: radial-gradient(circle, rgba(46,204,112,.5), rgba(46,204,112,0) 68%);
    animation: pulsarBrasao 3.4s ease-in-out infinite;
}
@keyframes pulsarBrasao {
    0%, 100% { opacity: .35; transform: scale(.97); }
    50%      { opacity: .75; transform: scale(1.05); }
}

/* =========================================================
   ACABAMENTO — profundidade, revelação ao rolar e brilho no cursor
   Três coisas, todas de graça em quadro por segundo: a primeira é só cor,
   a segunda roda no compositor do navegador e a terceira só muda duas
   variáveis. Nada aqui anima largura, altura ou posição.
   ========================================================= */

/* --- 1. Elevação por COR, não por sombra ---------------------------------
   Em tela escura a sombra some: preto sobre preto não separa nada. O que
   separa é a superfície ficar mais clara a cada camada. Esta é a escala:
   fundo da página, caixa, caixa sobre caixa, e o realce do mouse. */
:root {
    --nivel-0: #0E1013;   /* o fundo de tudo */
    --nivel-1: #15181C;   /* caixa apoiada no fundo */
    --nivel-2: #1B1F24;   /* caixa dentro de caixa */
    --nivel-3: #22272D;   /* o que está sob o cursor */
}

/* --- 2. Revelar ao rolar -------------------------------------------------
   `animation-timeline: view()` amarra a animação à posição do elemento na
   tela, e quem toca é o compositor: nenhum listener de rolagem, nenhum
   JavaScript por quadro. Entra só onde o navegador sabe fazer — onde não
   sabe, a lista aparece normal, que é o estado correto de qualquer forma. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .item-registro, .hq-bloco, .lote-card, .linha-historico {
            animation: revelar linear backwards;
            animation-timeline: view();
            /* começa a aparecer 1/8 antes de entrar e termina no primeiro
               quarto: o item já está legível bem antes do meio da tela */
            animation-range: entry 0% cover 22%;
        }
    }
}
@keyframes revelar {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* --- 3. O cursor acende o card ------------------------------------------
   Um brilho segue o mouse por dentro do card. O JS só escreve --mx e --my;
   quem desenha é o gradiente, numa camada própria que não repinta o card. */
.card-divisao, .caixa, .item-registro, .hq-bloco {
    position: relative;
    isolation: isolate;
}
.card-divisao::after, .caixa::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                rgba(46,204,112,.1), rgba(46,204,112,0) 62%);
}
.card-divisao:hover::after, .caixa:hover::after { opacity: 1; }

/* --- 4. Hover dos cards: sobe um nível de superfície --------------------- */
.card-divisao {
    transition: transform .26s cubic-bezier(.22,1,.36,1),
                border-color .26s ease, background-color .26s ease,
                box-shadow .26s ease;
}
.card-divisao:hover {
    transform: translateY(-3px);
    border-color: rgba(46,204,112,.3);
}
/* Nomear TUDO que muda no hover. Antes esta lista era só cor, e como ela
   vem depois no arquivo, apagava o transform e a sombra que a .grupo-linha
   declara lá em cima — a linha saltava seca em vez de deslizar.
   (`.pessoa-perm` não existe no HTML; o certo é `.pessoa-liberada`.) */
.item-registro, .lote-card, .grupo-linha, .pessoa-liberada {
    transition: background-color .22s ease, border-color .22s ease,
                transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.item-registro:hover, .lote-card:hover { background: var(--nivel-2); }

/* --- 5. (vago) A troca de aba já teve View Transitions aqui; saiu por
   custar 30 fps. O histórico está no comentário do trocarAba(). ------ */

/* --- 6. Fio de luz que corre no topo da caixa em foco ------------------- */
.caixa:focus-within { border-color: rgba(46,204,112,.26); }
.caixa::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent,
                rgba(46,204,112,.55), transparent);
    opacity: 0; transition: opacity .4s ease;
    pointer-events: none;
}
.caixa:focus-within::before { opacity: 1; }

/* =========================================================
   ACABAMENTO FINO — coisas de uma linha que o olho sente
   ========================================================= */

/* Título não deixa mais uma palavra órfã sozinha na última linha, e o texto
   corrido evita viúvas. Degrada em silêncio onde o navegador não sabe. */
h1, h2, .titulo h2, .doc-cabecalho h1, .doc-bloco h2,
.card-divisao strong, .lote-card strong, .ficha-topo strong {
    text-wrap: balance;
}
.titulo p, .doc-bloco p, .doc-resumo, .vazio, .nota, .lote-vazio {
    text-wrap: pretty;
}

/* Número em largura fixa. Sem isto, um contador que sobe de 8 para 11 faz
   o texto ao lado DANÇAR, porque o "1" é mais estreito que o "8". */
.numero-caixa b, .lote-conta, .contador, [data-conta],
.doc-data, .reg-quando, .selo b {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* A caixa de texto cresce com o que foi escrito, até um teto. Os dois
   limites não são opcionais: sem eles ela nasce com uma linha e pode
   crescer até estourar a tela. */
@supports (field-sizing: content) {
    #descricao-lote, #motivo-rebaixar, #motivo-corregedoria, #lema-perfil {
        field-sizing: content;
        min-height: 4.5lh;
        max-height: 14lh;
    }
}

/* content-visibility NO DESKTOP: testado e NÃO aplicado.
   A recomendação é boa em tese — o navegador pula o desenho do que está fora
   da tela — mas medido aqui derrubou a troca de aba de 59 para 48 fps no
   computador. O motivo é o tamanho das listas deste painel: com poucos itens,
   o custo de o navegador decidir o que está visível a cada troca de aba é
   maior que o desenho que ele economiza. Ele CONTINUA ligado no bloco de
   celular (max-width: 620px), onde a lista rola de verdade e compensa.
   Se um dia o registro passar a trazer centenas de linhas, medir de novo. */

/* O pai reage ao filho, sem o JS precisar avisar com classe nenhuma. */
.campo:has(input:focus, textarea:focus) label { color: var(--accent-cl); }
.lote-lista:has(.lote-card) .lote-vazio { display: none; }
.escolha-patente:has(.patente-op.escolhida) ~ .nota-escolha { opacity: 1; }

/* Foco visível de verdade, no teclado. O anel fica FORA da borda para não
   mudar o tamanho do elemento e empurrar o que está ao lado. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =========================================================
   Aba CDP — a fila de quem espera para poder subir
   ========================================================= */
.cdp-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cdp-conta {
    display: flex; align-items: baseline; gap: 7px;
    padding: 10px 15px; border-radius: var(--radius-s);
    background: var(--sunken, rgba(0,0,0,.3));
    border: 1px solid var(--border);
}
.cdp-conta b { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.cdp-conta span { font-size: .78rem; color: var(--text-dim); font-weight: 600; }
/* quem sai hoje é a resposta que o comando procura: destaca */
.cdp-conta.destaque { border-color: rgba(46,204,112,.3); background: var(--accent-12); }
.cdp-conta.destaque b { color: var(--accent-cl); }

/* Grade de cards: 3 a 4 por linha no computador, 1 no celular.
   `auto-fill` com minmax decide a quantidade pela largura disponível, então
   a mesma regra serve a sidebar aberta, janela estreita e telefone — sem
   media query nova para cada caso. */
.cdp-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 12px;
}
.cdp-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 15px;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    /* o fio da cor da família da patente fica EM CIMA no card (na linha ele
       ficava à esquerda): num bloco alto, a lateral some do campo de visão */
    border-top: 3px solid var(--cor-patente, var(--accent));
    animation: subir .4s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
    transition: background-color .22s ease, border-color .22s ease,
                transform .22s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) and (pointer: fine) {
    .cdp-card:hover { background: rgba(0,0,0,.42); transform: translateY(-2px); }
}
/* quem sai nas próximas 24 h é o que o comando procura: o card se anuncia */
.cdp-card.sai-hoje {
    background: linear-gradient(180deg, rgba(46,204,112,.07), rgba(0,0,0,.32));
    border-color: rgba(46,204,112,.22);
}

.cdp-topo { display: flex; align-items: center; gap: 11px; }
/* a cor da patente saiu da borda da foto e foi para o fio do topo do card:
   o anel agora é do PROGRESSO, e duas cores no mesmo círculo brigavam */
.cdp-topo { gap: 12px; }
.cdp-quem { min-width: 0; }
.cdp-quem strong {
    display: block; font-size: .875rem; font-weight: 700; color: var(--text);
    overflow-wrap: anywhere;
}
.cdp-quem span {
    display: block; font-size: .72rem; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cdp-tempo { margin-top: auto; }
.cdp-tempo b {
    display: block; font-size: 1.05rem; font-weight: 800; color: var(--amber);
    /* dígito de largura fixa é obrigatório aqui: o número muda a cada
       segundo, e sem isto a linha inteira dança quando o 1 vira 8 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    line-height: 1.2;
}
.cdp-tempo span { font-size: .68rem; color: var(--text-dim); }
.cdp-card.sai-hoje .cdp-tempo b { color: var(--accent-cl); }

/* O progresso virou um ANEL em volta da foto, no lugar da barra embaixo:
   ocupa espaço que já existia e o olho lê o quanto falta junto com a cara da
   pessoa, não em dois lugares separados.
   O arco é um conic-gradient com o ângulo numa variável. Ele é repintado
   quando o GRAU muda — não a cada segundo: numa espera de três dias o grau
   só vira a cada 12 min, e repintar 12 cards por segundo à toa sairia caro. */
.cdp-anel {
    position: relative; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 50%;
    padding: 3px;
    background: conic-gradient(var(--accent) var(--volta, 0deg),
                               rgba(255,255,255,.1) 0);
    transition: background .4s linear;
}
.cdp-anel img {
    width: 100%; height: 100%; border-radius: 50%;
    display: block; border: none;
    background: #15181C;
}
/* o miolo escuro que transforma o círculo cheio em aro */
.cdp-anel::before {
    content: ''; position: absolute; inset: 2px;
    border-radius: 50%; background: #15181C;
}
.cdp-anel img { position: relative; z-index: 1; }

/* Zerou com a aba aberta. Some do lugar? Não: a lista daria um pulo e a
   pessoa perderia quem estava olhando. O card se anuncia e espera o
   próximo carregamento. */
.cdp-card.liberado {
    border-color: rgba(46,204,112,.5);
    background: linear-gradient(180deg, rgba(46,204,112,.14), rgba(0,0,0,.3));
}
.cdp-card.liberado .cdp-tempo b { color: var(--accent); }
.cdp-card.liberado .cdp-anel { background: var(--accent); }
.cdp-tirar { width: 100%; }

/* o campo de motivo dentro da janela de confirmação */
#confirma-campo {
    width: 100%; margin-top: 14px; padding: 11px 13px;
    background: rgba(0,0,0,.42);
    border: 1px solid var(--border-2); border-radius: var(--radius-s);
    color: var(--text); font-family: inherit; font-size: .9rem;
    resize: vertical; min-height: 72px;
}
#confirma-campo:focus { outline: none; border-color: rgba(46,204,112,.45); }

@media (max-width: 620px) {
    /* um por linha no telefone: dois cards de 236px não cabem em 390px */
    .cdp-grade { grid-template-columns: 1fr; }
}

/* =========================================================
   Barra de páginas (anterior · página X de Y · próxima)
   ========================================================= */
.paginacao {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--border);
}
.pag-btn {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 9px 15px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-s);
    color: var(--text); font-family: inherit;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pag-btn svg { width: 16px; height: 16px; }
.pag-btn:hover:not(:disabled) {
    background: var(--accent-12);
    border-color: rgba(46,204,112,.4);
    color: var(--accent-cl);
}
/* A ponta fica DESABILITADA, não some: sumindo, a barra muda de largura e
   os botões dançam de lugar a cada troca de página. */
.pag-btn:disabled {
    opacity: .38; cursor: not-allowed;
    background: rgba(255,255,255,.03);
}

/* O dedo tem de sentir o clique. A descida é mais RÁPIDA que a volta
   (70 ms contra 180) — é a física de uma tecla de verdade: comprime na hora,
   volta amortecido. Com os dois tempos iguais, parece elástico de borracha. */
.pag-btn { transition: background-color .2s ease, border-color .2s ease,
                       color .2s ease, transform .18s cubic-bezier(.22,1,.36,1); }
.pag-btn:active:not(:disabled) {
    transform: scale(.95);
    transition-duration: 70ms;
}

/* Enquanto a página nova não chega, o botão clicado vira um anel girando e
   a grade apaga um pouco. Sem isso o clique parecia não ter acontecido:
   a troca leva ~300 ms e nesse tempo a tela ficava idêntica. */
.pag-btn.carregando {
    color: transparent; pointer-events: none; position: relative;
}
.pag-btn.carregando svg { opacity: 0; }
.pag-btn.carregando::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 15px; height: 15px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(46,204,112,.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: girar .6s linear infinite;
}
.cdp-grade.trocando {
    opacity: .4;
    transition: opacity .15s ease;
    pointer-events: none;
}
.pag-txt {
    font-size: .8rem; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.pag-txt b { color: var(--text); font-weight: 700; }

@media (max-width: 620px) {
    .paginacao { gap: 10px; }
    .pag-btn { flex: 1; justify-content: center; min-width: 118px; }
    /* o texto passa para baixo dos dois botões, em linha inteira */
    .pag-txt { order: 3; width: 100%; text-align: center; }
}

/* =========================================================
   Segurar para confirmar (item 13)
   A barra cresce por dentro do botão enquanto a pressão dura. É `scaleX`
   numa camada própria, não `width`: largura dispara layout a cada quadro.
   ========================================================= */
.botao.segurando { cursor: progress; }
.botao[data-segura] { position: relative; overflow: hidden; }
.botao[data-segura]::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,.22);
    transform: scaleX(var(--segurado, 0));
    transform-origin: left;
    pointer-events: none;
    border-radius: inherit;
}
/* soltou antes do fim: a barra volta sozinha, sem aviso nenhum */
.botao[data-segura]:not(.segurando)::after {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
}
/* o rótulo conta o que fazer, em vez de a pessoa descobrir no susto */
.botao[data-segura] .segure {
    font-size: .68rem; font-weight: 600; opacity: .72;
    margin-left: 6px; text-transform: none; letter-spacing: 0;
}

/* =========================================================
   Comemoração do treino (item 14)
   ========================================================= */
.festa {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,10,7,.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: surgirFundo .22s ease;
    cursor: pointer;
}
.festa.saindo { animation: sumirFesta .3s ease forwards; }
@keyframes sumirFesta { to { opacity: 0; } }

.festa-caixa {
    text-align: center; padding: 34px 40px;
    animation: chegarFesta .5s cubic-bezier(.22,1,.36,1);
}
@keyframes chegarFesta {
    from { opacity: 0; transform: scale(.92) translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.festa-caixa strong {
    display: block;
    font-size: 4.2rem; font-weight: 800; line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 40px rgba(46,204,112,.5);
}
.festa-caixa span {
    display: block; margin-top: 6px;
    font-size: 1rem; font-weight: 700; color: var(--text);
}
.festa-caixa em {
    display: block; margin-top: 12px;
    font-size: .82rem; font-style: normal; color: var(--text-dim);
}

/* As três setas sobem em sequência — é o chevron de promoção que o painel
   já usa no menu, não confete: o assunto é patente, não aniversário. */
.festa-setas { display: flex; justify-content: center; gap: 2px; margin-bottom: 14px; }
.festa-setas svg {
    width: 34px; height: 34px; stroke: var(--accent);
    animation: subirSeta 1.1s cubic-bezier(.22,1,.36,1) infinite;
}
.festa-setas svg:nth-child(2) { animation-delay: .12s; }
.festa-setas svg:nth-child(3) { animation-delay: .24s; }
@keyframes subirSeta {
    0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
    30%           { transform: translateY(-9px); opacity: 1; }
}

/* =========================================================
   Tela inicial (item 1)
   ========================================================= */
.placar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.placar-item {
    position: relative;
    padding: 16px 16px 14px;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    animation: subir .4s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}
.placar-item b {
    display: block; font-size: 1.9rem; font-weight: 800; line-height: 1;
    color: var(--text); font-variant-numeric: tabular-nums;
}
.placar-item span {
    display: block; margin-top: 5px;
    font-size: .74rem; font-weight: 600; color: var(--text-dim);
}
.placar-ic {
    position: absolute; top: 14px; right: 14px;
    opacity: .3;
}
.placar-ic svg { width: 18px; height: 18px; }
/* o que vira ação hoje se anuncia; o que é problema também */
.placar-item.bom   { border-color: rgba(46,204,112,.26); background: var(--accent-12); }
.placar-item.bom b { color: var(--accent-cl); }
.placar-item.bom .placar-ic { opacity: .55; color: var(--accent); }
.placar-item.ruim  { border-color: rgba(255,90,106,.24); }
.placar-item.ruim b { color: #FF8A96; }

.inicio-colunas {
    display: grid; gap: 14px; margin-bottom: 14px;
    grid-template-columns: 1.4fr 1fr;
}
@media (max-width: 900px) { .inicio-colunas { grid-template-columns: 1fr; } }

/* --- gráfico de barras ---------------------------------------------------
   14 divs, não canvas nem biblioteca: canvas custaria uma textura na GPU e
   uma biblioteca pesaria mais que o pacote de ícones inteiro. A altura entra
   por scaleY para as 14 barras não dispararem layout ao aparecer. */
.grafico {
    display: flex; align-items: flex-end; gap: 5px;
    height: 118px; margin-top: 6px;
}
.grafico .barra {
    flex: 1; height: 100%;
    display: flex; align-items: flex-end;
    border-radius: 4px;
    background: rgba(255,255,255,.04);
    cursor: default;
}
.grafico .barra i {
    display: block; width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--accent), rgba(46,204,112,.45));
    transform: scaleY(var(--alt, 0)); transform-origin: bottom;
    animation: crescerBarra .5s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes crescerBarra { from { transform: scaleY(0); } }
/* dia parado continua ocupando o lugar dele: pular os dias sem ação faria
   um mês morto parecer movimentado */
.grafico .barra.zero i { background: rgba(255,255,255,.07); min-height: 2px; }
.grafico .barra:hover { background: rgba(255,255,255,.08); }
.grafico-pes {
    display: flex; justify-content: space-between;
    width: 100%; margin-top: 8px;
    font-size: .68rem; color: var(--text-dim);
}
.grafico { flex-wrap: wrap; }
.grafico-pes { flex-basis: 100%; }

/* --- quadro do instrutor (item 11) --------------------------------- */
.quadro-linha {
    display: flex; align-items: baseline; gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.quadro-linha:last-of-type { border-bottom: none; }
.quadro-linha b {
    font-size: 1.35rem; font-weight: 800; color: var(--accent-cl);
    min-width: 42px; font-variant-numeric: tabular-nums;
}
.quadro-linha span { font-size: .82rem; color: var(--text-mid); line-height: 1.4; }
.quadro-linha em {
    display: block; font-style: normal;
    font-size: .72rem; color: var(--text-dim);
}
.quadro-ultimo {
    margin-top: 12px; padding: 11px 13px;
    background: rgba(0,0,0,.3); border-radius: var(--radius-s);
    font-size: .8rem; color: var(--text-dim); line-height: 1.55;
}
.quadro-ultimo b { color: var(--text); }
.quadro-ultimo em { display: block; margin-top: 4px; font-style: italic; }

/* --- últimas ações ------------------------------------------------- */
.acao-linha {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    animation: entrarDeLado .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
}
.acao-linha:last-child { border-bottom: none; }
.acao-linha img {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.05);
}
.acao-txt { flex: 1; min-width: 0; font-size: .85rem; color: var(--text-mid); }
.acao-txt strong { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.acao-txt b { color: var(--accent-cl); font-weight: 700; }
.acao-txt span { display: block; font-size: .72rem; color: var(--text-dim); margin-top: 2px; }
.acao-ic {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05);
}
.acao-ic svg { width: 15px; height: 15px; }
.acao-ic.promover, .acao-ic.definir { background: var(--accent-12); color: var(--accent); }
.acao-ic.rebaixar, .acao-ic.exilar { background: rgba(255,90,106,.12); color: var(--red); }
.acao-linha time {
    font-size: .7rem; color: var(--text-dim); flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Trajetória do militar (item 9)
   ========================================================= */
.ver-trilha { margin-top: 12px; }
.trilha-caixa { margin-top: 16px; }
.trilha { position: relative; padding-left: 8px; margin-top: 10px; }
/* o fio que liga os pontos, atrás de tudo */
.trilha::before {
    content: ''; position: absolute;
    left: 22px; top: 14px; bottom: 14px; width: 2px;
    background: linear-gradient(180deg, var(--accent-12), rgba(255,255,255,.06));
}
.trilha-item {
    position: relative; display: flex; gap: 14px;
    padding: 10px 0;
    animation: entrarDeLado .36s cubic-bezier(.22,1,.36,1) backwards;
}
.trilha-ponto {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--nivel-1, #15181C);
    border: 2px solid rgba(255,255,255,.1);
    z-index: 1;
}
.trilha-ponto svg { width: 14px; height: 14px; }
.trilha-item.promover .trilha-ponto,
.trilha-item.definir .trilha-ponto { border-color: var(--accent); color: var(--accent); }
.trilha-item.rebaixar .trilha-ponto,
.trilha-item.exilar .trilha-ponto { border-color: var(--red); color: var(--red); }
.trilha-txt { min-width: 0; padding-top: 3px; }
.trilha-txt strong {
    display: block; font-size: .875rem; color: var(--text); font-weight: 700;
    overflow-wrap: anywhere;
}
.trilha-txt span { display: block; font-size: .72rem; color: var(--text-dim); margin-top: 2px; }
.trilha-txt em {
    display: block; margin-top: 5px;
    font-size: .76rem; font-style: italic; color: var(--text-mid);
}
.trilha-txt em.de-treino { font-style: normal; color: var(--text-dim); }

/* =========================================================
   Busca-herói: UM campo, grande, sem seletor de grupo
   O grupo deixou de ser escolhido antes da pessoa. O campo cresce porque
   é a única coisa que a tela pede — e dizer isso com tamanho é mais claro
   do que com um rótulo em caixa alta em cima.
   ========================================================= */
.busca-hero {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 18px;
    border-radius: 16px;
    background: rgba(0,0,0,.42);
    border: 1px solid rgba(255,255,255,.1);
    transition: border-color .22s ease, background-color .22s ease;
}
.busca-hero > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-dim); transition: color .22s; }
.busca-hero input {
    flex: 1; min-width: 0;
    background: none; border: none; outline: none;
    color: var(--text); font-family: inherit;
    font-size: 1.15rem; font-weight: 600;
    padding: 12px 0;
}
.busca-hero input::placeholder { color: #7E8186; font-weight: 500; }
.busca-hero:focus-within {
    border-color: rgba(46,204,112,.55);
    background: rgba(0,0,0,.5);
}
.busca-hero:focus-within > svg { color: var(--accent); }
/* a dica da tecla some quando a pessoa já está escrevendo */
.busca-tecla {
    flex-shrink: 0;
    font-family: ui-monospace, Consolas, monospace; font-size: .72rem; font-weight: 700;
    color: var(--text-dim);
    padding: 3px 8px; border-radius: 6px;
    border: 1px solid var(--border-2); background: rgba(255,255,255,.04);
    transition: opacity .2s;
}
.busca-hero:focus-within .busca-tecla { opacity: 0; }
/* `width: auto` aqui é obrigatório: o bloco de celular põe `.botao.estreito`
   em 100% de largura, e dentro do flex isso esmagava o campo para 0px. */
.busca-hero .botao.estreito { width: auto; flex-shrink: 0; padding: 12px 18px; border-radius: 12px; }
@media (hover: hover) {
    .busca-hero:hover { border-color: rgba(255,255,255,.18); }
}

/* =========================================================
   Faixa de grupos: a presença do militar vira o seletor
   ========================================================= */
.previa-grupos, .faixa-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}
.previa-grupos { margin-bottom: 18px; max-width: 760px; }
.faixa-grupos { margin: 18px 0 6px; }

.grupo-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 8px 11px;
    min-height: 44px;
    border-radius: 12px;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cor-patente, var(--border));
    color: var(--text); font-family: inherit; text-align: center;
    cursor: pointer;
    animation: subir .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 32ms);
    transition: background-color .2s ease, border-color .2s ease,
                transform .2s cubic-bezier(.22,1,.36,1), opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.grupo-card img, .grupo-card .brasao-vazio {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,.05); object-fit: cover;
    display: flex; align-items: center; justify-content: center;
}
.grupo-card .brasao-vazio svg { width: 18px; height: 18px; color: var(--text-dim); }
.grupo-card b { font-size: .78rem; font-weight: 800; letter-spacing: .2px; }
.grupo-card .patente-card {
    font-size: .66rem; color: var(--text-dim); line-height: 1.25;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grupo-card .cdp-card-mini {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .62rem; font-style: normal; color: var(--amber);
}
.grupo-card .cdp-card-mini svg { width: 10px; height: 10px; }

@media (hover: hover) and (pointer: fine) {
    .grupo-card:not(:disabled):hover {
        background: rgba(0,0,0,.42);
        border-color: rgba(46,204,112,.35);
        transform: translateY(-2px);
    }
}
.grupo-card:active:not(:disabled) { transform: scale(.96); transition-duration: 70ms; }

/* o escolhido: fundo verde leve, borda verde e o visto no canto */
.grupo-card.ativo {
    background: var(--accent-12);
    border-color: rgba(46,204,112,.55);
    border-top-color: var(--cor-patente, var(--accent));
}
.grupo-card.ativo b { color: var(--accent-cl); }
.marca-escolhido {
    position: absolute; top: 6px; right: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #06140C;
    animation: pularMarca .3s cubic-bezier(.34,1.56,.64,1);
}
.marca-escolhido svg { width: 11px; height: 11px; stroke-width: 3; }
@keyframes pularMarca { from { transform: scale(0); } to { transform: scale(1); } }

/* onde a pessoa NÃO está: aparece, mas apagado e sem clique — sumir com o
   card esconderia a informação de que ela não está lá */
.grupo-card.fora { opacity: .38; cursor: not-allowed; border-top-color: var(--border); }
.grupo-card.fora img { filter: grayscale(1); }
.grupo-card.previa { opacity: .5; cursor: default; pointer-events: none; }
.grupo-card.previa img { filter: grayscale(.6); }

/* o estado de espera perdeu o anel: a prévia dos brasões já diz o que a
   tela faz, e com mais informação do que um ícone genérico */
.aguardando:has(.previa-grupos) .anel { display: none; }
.aguardando { padding-top: 26px; }

@media (max-width: 620px) {
    .busca-hero { padding-left: 14px; border-radius: 14px; }
    .busca-hero input { font-size: 1rem; }
    .busca-tecla { display: none; }   /* celular não tem tecla "/" à mão */
    .busca-hero .botao.estreito { padding: 12px 14px; }
    .busca-hero .botao.estreito span { display: none; }
    .previa-grupos, .faixa-grupos { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
    .grupo-card { padding: 10px 6px 9px; }
    .grupo-card img, .grupo-card .brasao-vazio { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .festa-setas svg { animation: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .card-divisao:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .entrada-fundo, .cartao-entrada .brasao::after { animation: none; }
}

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


/* Nome vindo do Roblox não tem onde quebrar: sem isto, um nick comprido
   vaza a linha e empurra o que está do lado. */
.lote-card .quem strong, .resultado-linha .quem strong,
.pessoa-liberada .quem strong, .ficha-topo strong,
.cabecalho-escolha .nome, .perfil-texto h3 {
    overflow-wrap: anywhere;
}


/* =========================================================
   ACABAMENTO — alvos de toque e estados que faltavam
   ========================================================= */

/* O painel já põe 48px nos campos e nos botões grandes, mas sete controles
   ficaram de fora — e dois deles são o que mais dói errar: tirar alguém do
   treino e escolher a patente na corregedoria. */
@media (pointer: coarse) {
    .lote-card .tirar, .botao-sino, .bola-cor { width: 44px; height: 44px; }
    .lote-card .tirar { border-radius: var(--radius-s); }
    .chip, .aba-grupo, .patente-op, .pag-btn { min-height: 44px; }
    .chip { padding: 10px 16px; }
    .sino-limpar { min-height: 44px; padding: 0 10px; margin-right: -10px; }
    /* 10px de respiro dava 39px de altura; 13 chega aos 44 do alvo de toque */
    .painel-rodape a, .entrada-rodape a, .doc-rodape a {
        padding: 13px 6px; display: inline-block;
    }
}

/* `.vazio` servia de duas coisas: "nada aqui ainda" e "deu erro". Com o mesmo
   cinza e o mesmo respiro, uma falha de rede aparecia com a mesma cara de um
   sucesso sem resultados — e sem dizer que foi erro. */
.vazio.falhou {
    padding: 26px 20px;
    background: rgba(255,90,106,.07);
    border: 1px solid rgba(255,90,106,.22);
    border-radius: var(--radius-s);
    color: #F2B6BD;
}
.vazio.falhou svg { stroke: var(--red); }

/* O anel da tela de espera NÃO gira: girar quer dizer "carregando", e aqui o
   painel está parado esperando a pessoa digitar. Ele só acende quando o
   cursor entra no campo de busca. */
.aguardando .anel {
    animation: none;
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.aguardando .anel svg { animation: none; }
.caixa:focus-within .aguardando .anel {
    border-color: rgba(46,204,112,.6);
    background: rgba(46,204,112,.12);
    transform: scale(1.04);
}
.aguardando p b { color: var(--text-mid); font-weight: 600; }


/* Cabeçalho do grupo com mais presença (item 3) */
.capa-texto strong { font-size: 1.05rem; line-height: 1.25; }
.capa-sub {
    display: block; margin-top: 3px;
    font-size: .72rem; font-weight: 600; letter-spacing: .3px;
    color: var(--text-dim);
}
.capa-arte { width: 52px; height: 52px; border-radius: 13px; }
/* a arte ao fundo ganha presença, mas continua atrás do texto */
.capa-fundo { opacity: .22; filter: blur(22px) saturate(.85); }
.capa::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--gold), transparent 75%);
    opacity: .55;
}
@media (max-width: 620px) {
    .capa { padding: 13px 14px; gap: 12px; }
    .capa-arte { width: 42px; height: 42px; border-radius: 11px; }
    .capa-sub { display: none; }
}


/* Botão de desfazer dentro do aviso (item 7) */
.aviso .desfazer {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 9px; padding: 7px 13px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border-2);
    border-radius: 99px;
    color: var(--text); font-family: inherit;
    font-size: .76rem; font-weight: 700;
    cursor: pointer; position: relative;
    transition: background-color .18s ease, border-color .18s ease,
                transform .16s cubic-bezier(.22,1,.36,1);
}
.aviso .desfazer svg { width: 14px; height: 14px; }
.aviso .desfazer:hover {
    background: var(--accent-12);
    border-color: rgba(46,204,112,.4);
}
.aviso .desfazer:active { transform: scale(.95); transition-duration: 70ms; }
.aviso .desfazer.ocupado { color: transparent; pointer-events: none; }
.aviso .desfazer.ocupado svg { opacity: 0; }
.aviso .desfazer.ocupado::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 13px; height: 13px; margin: -7px 0 0 -7px;
    border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
    border-radius: 50%; animation: girar .6s linear infinite;
}
/* a barrinha de tempo do aviso acompanha a vida dele, que muda quando há
   desfazer — senão ela terminava antes de o aviso sair */
.aviso.com-desfazer .barra { animation-duration: var(--vida, 6000ms); }

/* =========================================================
   Divisões — cabeçalho da divisão, modos e pedidos de entrada
   ========================================================= */
.cabecalho-divisao { padding-bottom: 14px; }
.cabecalho-divisao .cabecalho-escolha {
    border-bottom: none; margin-bottom: 14px; padding-bottom: 0;
    flex-wrap: wrap;
}
.cabecalho-escolha .cabecalho-texto { min-width: 0; flex: 1; }
.cabecalho-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- os três modos: Treino · Pedidos de entrada · Um militar ---------- */
.modos {
    position: relative;
    display: flex; gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(0,0,0,.38);
    border: 1px solid var(--border);
}
.modos-marcador {
    position: absolute; top: 4px; bottom: 4px; left: 0;
    width: 0;
    border-radius: 9px;
    background: var(--accent-12);
    border: 1px solid rgba(46,204,112,.45);
    box-shadow: 0 6px 18px -8px rgba(46,204,112,.6);
    pointer-events: none;
    opacity: 0;
}
.modos-marcador.pronto {
    opacity: 1;
    transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.modo {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px; border-radius: 9px;
    background: none; border: none;
    color: var(--text-dim); font-family: inherit; font-size: .84rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.modo svg { width: 17px; height: 17px; flex-shrink: 0; }
.modo.ativo { color: var(--accent-cl); }
@media (hover: hover) { .modo:not(.ativo):hover { color: var(--text); } }
.modo-conta {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--amber); color: #1A1200;
    font-size: .68rem; font-weight: 800; font-style: normal;
    font-variant-numeric: tabular-nums;
}
.modo-conta[hidden] { display: none; }
.modo.ativo .modo-conta { background: var(--accent); color: #06140C; }

.modo-painel { display: none; }
.modo-painel.ativo { display: block; animation: subir .3s cubic-bezier(.22,1,.36,1) backwards; }
.modo-dica { margin: 0 0 14px; font-size: .86rem; color: var(--text-dim); line-height: 1.5; }
.modo-dica b { color: var(--text); }

/* ---------- no card da divisão: sua patente lá e os pedidos pendentes ---------- */
.card-divisao .voce {
    display: inline-flex; align-items: center; gap: 6px;
    margin: -6px 0 12px;
    font-size: .74rem; color: var(--text-dim);
    min-width: 0;
}
.card-divisao .voce b {
    color: var(--text-mid); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-divisao .voce svg { width: 13px; height: 13px; flex-shrink: 0; stroke: var(--text-dim); }
.card-divisao .pendentes { display: inline-flex; align-items: center; gap: 7px; color: var(--amber); }
.card-divisao .pendentes svg { stroke: var(--amber); }
.card-divisao .pendentes b { font-weight: 800; }
.card-divisao.tem-pedidos { border-color: rgba(224,169,46,.35); }

/* ---------- pedidos de entrada ---------- */
.pedidos-topo {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    margin-bottom: 14px;
}
.pedidos-topo .botao.estreito { width: auto; flex-shrink: 0; }
.pedidos-sub { margin: 6px 0 0; font-size: .84rem; color: var(--text-dim); line-height: 1.5; }
.pedidos-sub b { color: var(--text); }

.busca-hero.compacta { padding: 4px 4px 4px 14px; border-radius: 12px; margin-bottom: 14px; }
.busca-hero.compacta input { font-size: .95rem; font-weight: 500; padding: 10px 0; }
.busca-hero.compacta > svg { width: 18px; height: 18px; }

.pedidos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 10px;
}
.pedido-card {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px; min-height: 44px;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    color: var(--text); font-family: inherit; text-align: left;
    cursor: pointer;
    animation: subir .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 28ms);
    transition: background-color .2s ease, border-color .2s ease,
                transform .2s cubic-bezier(.22,1,.36,1);
    -webkit-tap-highlight-color: transparent;
}
.pedido-card img {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.05); object-fit: cover;
}
.pedido-quem { min-width: 0; display: block; }
.pedido-quem strong { display: block; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.pedido-quem span {
    display: block; font-size: .72rem; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pedido-quando {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto;
    font-size: .72rem; color: var(--text-dim);
}
.pedido-quando svg { width: 12px; height: 12px; }
.pedido-card .marca-escolhido { display: none; top: 10px; right: 10px; width: 22px; height: 22px; }
.pedido-card .marca-escolhido svg { width: 13px; height: 13px; }
.pedido-card.marcado { background: var(--accent-12); border-color: rgba(46,204,112,.55); }
.pedido-card.marcado .marca-escolhido { display: flex; }
.pedido-card.marcado strong { color: var(--accent-cl); }
.pedido-card.oculto { display: none; }
@media (hover: hover) and (pointer: fine) {
    .pedido-card:hover {
        background: rgba(0,0,0,.42);
        border-color: rgba(46,204,112,.35);
        transform: translateY(-2px);
    }
}
.pedido-card:active { transform: scale(.97); transition-duration: 70ms; }
.pedidos-vazio { grid-column: 1 / -1; }
.pedidos-vazio[hidden] { display: none; }

/* a barra de ação gruda embaixo enquanto a fila rola: com 40 pedidos, o
   botão de aceitar não pode ficar lá no fim da página */
.pedidos-rodape {
    position: sticky; bottom: 12px; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding: 10px 10px 10px 16px;
    border-radius: 12px;
    background: rgba(21,24,28,.97);
    border: 1px solid var(--border-2);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.pedidos-marcados { font-size: .84rem; color: var(--text-dim); }
.pedidos-marcados b {
    color: var(--accent-cl); font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.pedidos-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pedidos-botoes .botao.estreito { width: auto; }

.etiqueta.aceitar { background: rgba(46,204,112,.1); color: var(--accent-cl); border-color: rgba(46,204,112,.3); }
.acao-ic.aceitar { background: var(--accent-12); color: var(--accent-cl); }
.linha-historico.aceitar .ponto { background: var(--accent); }

@media (max-width: 620px) {
    .modo { padding: 10px 8px; font-size: .8rem; gap: 6px; }
    .modo:not(.ativo) > span { display: none; }
    .pedidos-topo { flex-direction: column; }
    .pedidos-rodape { bottom: 78px; }   /* acima da barra de abas do celular */
    .pedidos-botoes { width: 100%; }
    .pedidos-botoes .botao {
        flex: 1; min-width: 0;
        padding: 12px 8px; font-size: .78rem; white-space: nowrap;
    }
    .pedidos-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* =========================================================
   Quem pode usar — ficha da pessoa, kits, cards de poder, lista em cards
   ========================================================= */
.liberado-pessoa { margin-top: 16px; }
.liberado-topo {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    animation: subir .3s cubic-bezier(.22,1,.36,1) backwards;
}
/* o anel da foto tem a cor da família da patente, como em toda ficha do painel */
.liberado-topo img {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: rgba(255,255,255,.05);
    border: 3px solid var(--cor-patente, var(--border-2));
}
.liberado-nome { min-width: 0; flex: 1; }
.liberado-nome strong { display: block; font-size: 1.05rem; font-weight: 800; }
.liberado-nome span { display: block; font-size: .8rem; color: var(--text-dim); margin-top: 2px; }
.liberado-estado { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* a linha do alcance ocupa a largura toda, abaixo da foto e dos selos */
.liberado-regra {
    flex-basis: 100%;
    display: flex; align-items: flex-start; gap: 8px;
    padding-top: 10px; margin-top: 2px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .8rem; color: var(--text-dim); line-height: 1.45;
}
.liberado-regra svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent-cl); }
.liberado-regra b { color: var(--text); font-weight: 700; }

/* ---------- kits ---------- */
.kits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.kits-rotulo {
    font-size: .7rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-dim); margin-right: 4px;
}
.kit {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 36px; padding: 7px 13px; border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-2);
    color: var(--text-mid); font-family: inherit; font-size: .8rem; font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease,
                transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.kit svg { width: 14px; height: 14px; }
@media (hover: hover) { .kit:hover { background: rgba(255,255,255,.08); color: #fff; } }
.kit:active { transform: scale(.96); }
.kit.ativo { background: var(--accent-12); border-color: rgba(46,204,112,.5); color: var(--accent-cl); }
.kit.limpar { margin-left: auto; color: var(--text-dim); }

/* ---------- cards de poder ---------- */
.poderes-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.poder-card {
    position: relative;
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 42px 14px 14px; min-height: 44px;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    color: var(--text); font-family: inherit; text-align: left;
    cursor: pointer;
    animation: subir .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
    transition: background-color .2s ease, border-color .2s ease,
                transform .2s cubic-bezier(.22,1,.36,1);
    -webkit-tap-highlight-color: transparent;
}
.poder-ic {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05); color: var(--text-mid);
    transition: background-color .2s ease, color .2s ease;
}
.poder-ic svg { width: 19px; height: 19px; }
.poder-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.poder-txt b { font-size: .92rem; font-weight: 800; }
.poder-txt > span { font-size: .8rem; color: var(--text-dim); line-height: 1.45; }
.exige {
    display: flex; align-items: flex-start; gap: 5px;
    margin-top: 4px;
    font-size: .72rem; font-style: normal; color: var(--text-dim); line-height: 1.4;
}
.exige:empty { display: none; }
.exige svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; }
.exige b { font-weight: 700; }
.exige.ok { color: var(--accent-cl); }
.exige.falta { color: var(--amber); }
.poder-card .marca-escolhido { display: none; top: 12px; right: 12px; width: 22px; height: 22px; }
.poder-card .marca-escolhido svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
    .poder-card:hover {
        background: rgba(0,0,0,.42);
        border-color: rgba(46,204,112,.35);
        transform: translateY(-2px);
    }
}
.poder-card:active { transform: scale(.98); transition-duration: 70ms; }
.poder-card.ativo { background: var(--accent-12); border-color: rgba(46,204,112,.55); }
.poder-card.ativo .poder-ic { background: var(--accent); color: #06140C; }
.poder-card.ativo .marca-escolhido { display: flex; }
/* exilar ligado fica vermelho: é o único poder que não tem volta fácil */
.poder-card.perigo.ativo { background: rgba(255,90,106,.1); border-color: rgba(255,90,106,.5); }
.poder-card.perigo.ativo .poder-ic { background: var(--red); color: #fff; }
.poder-card.perigo.ativo .marca-escolhido { background: var(--red); color: #fff; }

/* ---------- teto do rebaixamento: só aparece com Rebaixar ligado ---------- */
.teto-caixa {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding: 14px 16px;
    border-radius: 12px;
    background: rgba(0,0,0,.25);
    border: 1px dashed var(--border-2);
    animation: subir .3s cubic-bezier(.22,1,.36,1) backwards;
}
.teto-texto b { display: block; font-size: .86rem; }
.teto-texto span { display: block; font-size: .76rem; color: var(--text-dim); margin-top: 2px; }

/* ---------- a frase do que vai ser salvo ---------- */
.resumo-liberacao {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 16px; padding: 13px 15px;
    border-radius: 12px;
    background: rgba(46,204,112,.06);
    border-left: 3px solid var(--accent);
    font-size: .88rem; line-height: 1.5; color: var(--text-mid);
}
.resumo-liberacao svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-cl); margin-top: 1px; }
.resumo-liberacao b { color: var(--text); }
.liberacao-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.liberacao-acoes .botao.estreito { width: auto; }
.botao.secundario.perigo-suave { color: var(--red); border-color: rgba(255,90,106,.3); }
.botao.secundario.perigo-suave:hover { background: rgba(255,90,106,.12); }

/* ---------- pessoas liberadas, em cards ---------- */
.pessoas-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.pessoas-topo .titulo-h { margin: 0; display: flex; align-items: center; gap: 8px; }
.conta-chip {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-12); color: var(--accent-cl);
    font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.pessoas-filtro { margin: 0; width: min(320px, 100%); }
.pessoas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.pessoa-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    animation: subir .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 30ms);
    transition: border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) and (pointer: fine) {
    .pessoa-card:hover { border-color: rgba(46,204,112,.3); transform: translateY(-2px); }
}
.pessoa-card.perigo { border-top: 3px solid rgba(255,90,106,.6); }
.pessoa-topo { display: flex; align-items: center; gap: 11px; }
.pessoa-topo img {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.05); object-fit: cover;
}
.pessoa-quem { min-width: 0; }
.pessoa-quem strong { display: block; font-size: .9rem; font-weight: 800; overflow-wrap: anywhere; }
.pessoa-quem span { display: block; font-size: .72rem; color: var(--text-dim); }
.pessoa-poderes { display: flex; flex-wrap: wrap; gap: 5px; }
.pessoa-poderes .marca-poder {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 6px;
    background: var(--accent-12); border: 1px solid rgba(46,204,112,.26);
    color: var(--accent-cl); font-size: .68rem; font-weight: 700;
}
.pessoa-poderes .marca-poder svg { width: 11px; height: 11px; }
.pessoa-poderes .marca-poder.perigo {
    background: rgba(255,90,106,.12); border-color: rgba(255,90,106,.3); color: var(--red);
}
.pessoa-poderes .marca-poder.neutra {
    background: rgba(255,255,255,.05); border-color: var(--border-2); color: var(--text-dim);
}
.pessoa-acoes { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.pessoa-acoes .botao.estreito { width: auto; flex: 1; padding: 10px 14px; font-size: .8rem; min-height: 44px; }
.pessoa-card .tirar {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pessoa-card .tirar:hover { background: rgba(255,90,106,.14); color: var(--red); border-color: rgba(255,90,106,.35); }
.pessoa-card .tirar svg { width: 16px; height: 16px; pointer-events: none; }

@media (max-width: 620px) {
    .kit { min-height: 44px; padding: 10px 14px; }   /* dedo, não cursor */
    .kit.limpar { margin-left: 0; }
    .poderes-grade, .pessoas-grade { grid-template-columns: 1fr; }
    .liberado-estado { justify-content: flex-start; width: 100%; }
    .pessoas-filtro { width: 100%; }
    .liberacao-acoes .botao.estreito { flex: 1; }
}

/* ---------- patente mínima por função ---------- */
.config-sub { margin: -4px 0 14px; font-size: .84rem; color: var(--text-dim); line-height: 1.5; }
.config-sub b { color: var(--text); }
.minimos { display: grid; gap: 8px; }
.minimo-card {
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    transition: border-color .2s ease;
}
.minimo-card.definido { border-color: rgba(46,204,112,.35); }
.minimo-card.aberto { border-color: rgba(46,204,112,.5); }
.minimo-topo {
    width: 100%; min-height: 44px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: none; border: none;
    color: var(--text); font-family: inherit; text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.minimo-card.definido .poder-ic { background: var(--accent); color: #06140C; }
.minimo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.minimo-txt > b { font-size: .9rem; font-weight: 800; }
.minimo-txt > span { font-size: .78rem; color: var(--text-dim); }
.minimo-txt > span b { color: var(--accent-cl); font-weight: 700; }
.minimo-seta { flex-shrink: 0; color: var(--text-dim); display: flex; }
.minimo-seta svg { width: 18px; height: 18px; transition: transform .2s ease; }
@media (hover: hover) { .minimo-topo:hover .minimo-seta { color: var(--text); } }
.minimo-escada { padding: 0 14px 14px; animation: subir .25s cubic-bezier(.22,1,.36,1) backwards; }
.minimo-dica { margin: 0 0 12px; font-size: .8rem; color: var(--text-dim); line-height: 1.5; }
.minimo-dica b { color: var(--text); }
/* o botão da escada vira "ocupado" enquanto o servidor grava */
.patente-op.ocupado { pointer-events: none; opacity: .5; }

@media (min-width: 900px) {
    .minimos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .minimo-card.aberto { grid-column: 1 / -1; }
}

/* ---------- Configuração: donos e regras fixas ---------- */
.donos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dono-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    animation: subir .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}
.dono-card.principal { border-color: rgba(201,168,76,.45); }
.dono-card img {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.05); object-fit: cover;
    border: 2px solid rgba(201,168,76,.6);
}
.dono-quem { flex: 1; min-width: 0; }
.dono-quem strong { display: block; font-size: .9rem; font-weight: 800; overflow-wrap: anywhere; }
.dono-quem strong em { font-style: normal; font-weight: 600; color: var(--text-dim); font-size: .78rem; }
.dono-quem span { display: block; font-size: .74rem; color: var(--text-dim); margin-top: 2px; }
.dono-ic { flex-shrink: 0; color: #C9A84C; display: flex; }
.dono-ic svg { width: 18px; height: 18px; }

.regras-lista { display: grid; gap: 8px; }
.regra-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 13px;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.25);
    border: 1px solid var(--border);
    font-size: .84rem; line-height: 1.5; color: var(--text-mid);
    animation: subir .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
}
.regra-item b { color: var(--text); }
.regra-ic {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-12); color: var(--accent-cl);
}
.regra-ic svg { width: 16px; height: 16px; }

/* ---------- pisos por divisão: um bloco por divisão, dois pisos dentro ---------- */
.divisoes-minimos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.divisao-minimo {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border);
    animation: subir .36s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}
.divisao-minimo.aberta { grid-column: 1 / -1; border-color: rgba(46,204,112,.35); }
.divisao-minimo-topo { display: flex; align-items: center; gap: 11px; padding: 2px 2px 6px; }
.divisao-minimo-topo img, .divisao-minimo-topo .brasao-vazio {
    width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex-shrink: 0;
    background: rgba(0,0,0,.4); border: 1px solid rgba(206,244,222,.25);
    display: flex; align-items: center; justify-content: center;
}
.divisao-minimo-topo .brasao-vazio svg { width: 18px; height: 18px; color: var(--text-dim); }
.divisao-minimo-topo b { display: block; font-size: .95rem; font-weight: 800; }
.divisao-minimo-topo span { display: block; font-size: .74rem; color: var(--text-dim); margin-top: 1px; }
.divisao-minimo .minimo-card { background: rgba(0,0,0,.3); }
@media (min-width: 900px) {
    .divisoes-minimos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- CDP por patente ---------- */
.cdp-config-grupos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cdp-bloco { margin-top: 16px; padding-left: 12px; border-left: 3px solid var(--cor-bloco, var(--border)); }
.cdp-bloco-titulo {
    font-size: .7rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--cor-bloco, var(--text-dim)); margin-bottom: 8px;
}
.cdp-linha {
    border-radius: var(--radius-s);
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    transition: border-color .2s ease;
}
.cdp-linha.definido { border-color: rgba(46,204,112,.35); }
.cdp-linha.sem { border-color: rgba(224,169,46,.35); }
.cdp-linha.aberta { border-color: rgba(46,204,112,.5); }
.cdp-linha-topo {
    width: 100%; min-height: 44px;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    background: none; border: none;
    color: var(--text); font-family: inherit; text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cdp-nome { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdp-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.cdp-valor b { font-size: .84rem; color: var(--text); font-variant-numeric: tabular-nums; }
.cdp-linha.definido .cdp-valor b { color: var(--accent-cl); }
.cdp-linha.sem .cdp-valor b { color: var(--amber); }
.cdp-valor em { font-size: .66rem; font-style: normal; color: var(--text-dim); }
.cdp-opcoes {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 12px 12px;
    animation: subir .25s cubic-bezier(.22,1,.36,1) backwards;
}
.cdp-opcoes .chip { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.cdp-opcoes .chip svg { width: 12px; height: 12px; }
@media (max-width: 620px) {
    .cdp-opcoes .chip { min-height: 44px; flex: 1 1 30%; justify-content: center; }
    .cdp-config-grupos .aba-grupo { min-height: 44px; }   /* dedo, não cursor */
    .cdp-nome { white-space: normal; }
}