/* Intraweb — estilos base (mobile-first, Spec 05) */

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

/* O atributo `hidden` PRECISA vencer.
 *
 * `[hidden]` é uma regra do próprio navegador e tem especificidade quase nula:
 * qualquer regra de classe que declare `display` a anula em silêncio. O
 * elemento continua na tela, sem erro em lugar nenhum.
 *
 * Já mordeu duas vezes no mesmo dia (09/09/2026): o balão de aviso do player
 * ficava permanentemente sobre o vídeo mostrando só o ícone — o operador
 * descreveu como "um ponto de interrogação no meio da tela" — e os dois botões
 * "Próximo", o liberado e o travado, apareciam juntos. Nos dois casos o
 * `hidden` estava certo no HTML e o CSS o ignorava.
 *
 * Como o JS de todo o projeto esconde e mostra coisas por `el.hidden`, a regra
 * é global e com `!important`: é a única forma de a promessa do atributo valer
 * sempre, sem depender de alguém lembrar de escrever o par em cada classe. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; font-size: 17px; }   /* 18/09 22:35 (a pedido: "o texto do site tá pequeno demais"): base 16 → 17px; tudo é rem, cresce junto. Impressão (mm/pt) não muda. */

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--cor-texto);
    background: var(--cor-bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--sp-3); }

/* Acessibilidade */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--cor-primaria);
    color: #fff; padding: var(--sp-2) var(--sp-3); z-index: 100;
}
.skip-link:focus { left: var(--sp-2); }
:focus-visible { outline: 3px solid var(--cor-acento); outline-offset: 2px; }

/* Layout */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--sp-3);
}
.section-title {
    text-align: center;
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-4);
}

/* Botões — alvo de toque >= 44px */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 44px; padding: .7rem 1.4rem;
    border: 1px solid transparent; border-radius: var(--raio-sm);
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cor-primaria); color: #fff; }
.btn--primary:hover { background: var(--cor-primaria-escura); text-decoration: none; }
.btn--ghost { background: transparent; border-color: var(--cor-borda); color: var(--cor-texto); }
.btn--ghost:hover { background: var(--cor-superficie); text-decoration: none; }
.btn--sm { min-height: 38px; padding: .45rem 1rem; }
.btn--lg { min-height: 52px; padding: .9rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Cabeçalho público */
.site-header { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.site-header__inner, .app-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--cor-texto); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark {
    display: inline-grid; place-items: center; width: 36px; height: 36px;
    background: var(--cor-primaria); color: #fff; border-radius: var(--raio-sm);
    font-size: .85rem; letter-spacing: .5px;
}

/* Hero */
.hero {
    background: linear-gradient(160deg, var(--cor-primaria), var(--cor-primaria-escura));
    color: #fff; padding: var(--sp-6) 0;
}
.hero__inner { max-width: 720px; text-align: center; }
.hero__title { font-size: var(--fs-h1); color: #fff; }
.hero__lead { font-size: 1.1rem; color: #eaf1f8; margin-bottom: var(--sp-4); }
.hero__note {
    display: inline-block; margin: 0; padding: var(--sp-2) var(--sp-3);
    background: rgba(255, 255, 255, .12); border-radius: var(--raio-sm); color: #fff;
}
.hero__note strong { color: var(--cor-acento); }

/* Grids */
.grid { display: grid; gap: var(--sp-3); }
.grid--features { grid-template-columns: 1fr; }
.grid--steps { grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; counter-reset: none; }

.features, .steps, .cta { padding: var(--sp-6) 0; }
.steps { background: var(--cor-superficie); }

/* Cards */
.card {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: var(--sp-4); box-shadow: var(--sombra);
}
.feature__icon { font-size: 2rem; margin-bottom: var(--sp-2); }
.feature__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.feature__text { color: var(--cor-texto-suave); margin: 0; }

/* Passos */
.step { position: relative; padding-left: 3.4rem; }
.step__num {
    position: absolute; left: 0; top: 0;
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem;
    background: var(--cor-acento); color: #fff; border-radius: 50%; font-weight: 700;
}
.step__title { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.step p { color: var(--cor-texto-suave); margin: 0; }

/* CTA */
.cta { background: var(--cor-bg); text-align: center; }
.cta__inner { max-width: 620px; }
.cta__title { font-size: var(--fs-h2); }
.cta__text { color: var(--cor-texto-suave); margin-bottom: var(--sp-4); }

/* Rodapé */
.site-footer {
    background: var(--cor-primaria-escura); color: #cdd9e6;
    padding: var(--sp-4) 0; text-align: center; font-size: .9rem;
}
.site-footer p { margin: 0; }

/* Formulários */
.auth { padding: var(--sp-6) 0; }
.auth__inner { max-width: 420px; }
.auth__card { padding: var(--sp-5); }
.auth__title { margin-bottom: var(--sp-1); }
.auth__subtitle { color: var(--cor-texto-suave); margin-top: 0; margin-bottom: var(--sp-4); }
.form-field { margin-bottom: var(--sp-3); }
.form-field label { display: block; font-weight: 600; margin-bottom: var(--sp-1); }
.form-field input {
    width: 100%; min-height: 46px; padding: .6rem .8rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    font: inherit; background: var(--cor-superficie);
}
.form-field input:focus { border-color: var(--cor-primaria); outline: none; box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }

/* Alertas */
.alert { padding: var(--sp-3); border-radius: var(--raio-sm); margin: var(--sp-3) 0; }
.alert--ok { background: var(--cor-ok-bg); color: var(--cor-ok); }
.alert--erro { background: var(--cor-alerta-bg); color: var(--cor-alerta); }
.alert--info { background: var(--cor-info-bg); color: var(--cor-info); }

/* Página de erro */
.error-page { padding: var(--sp-6) 0; text-align: center; }
.error-page__code { font-size: 3.5rem; font-weight: 800; color: var(--cor-primaria); margin: 0; }
.error-page__title { font-size: var(--fs-h2); }
.error-page__text { color: var(--cor-texto-suave); margin-bottom: var(--sp-4); }

/* ---- App interno: barra superior (portal) ---- */
/* Azul da barra = tom do topo do banner, pra emendar sem costura */
.appbar { position: sticky; top: 0; z-index: 50; color: #fff; background: var(--cor-banner); }
/* 3 colunas: o logo do meio fica centralizado na barra, não entre os links */
.appbar__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2);
    max-width: 1360px; margin: 0 auto; padding: var(--sp-2) var(--sp-3); min-height: 62px;
}
.appbar__brand { justify-self: center; line-height: 0; }
.appbar__brand:hover { text-decoration: none; }   /* 22/09: a logo sublinhava ao passar o mouse */
.appbar__brand img { height: 34px; width: auto; display: block; }
.appbar__link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: var(--raio-sm); color: #dce9f8; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.appbar__link:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.appbar__link.is-active { color: #fff; }
.appbar__link--start { justify-self: start; }
.appbar__ic { width: 20px; height: 20px; flex: none; }
.appbar__end { justify-self: end; display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Relógio da sessão: normal → alerta (5min) → crítico (1min) → expirada */
.sessao {
    display: inline-flex; align-items: center; gap: .35rem; flex: none;
    padding: .3rem .6rem; border-radius: 999px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    color: #eaf2fd; font-size: .82rem; font-weight: 700;
    font-variant-numeric: tabular-nums; /* o número não "pula" a cada segundo */
    white-space: nowrap;
}
.sessao__ic { font-size: .9em; }
.sessao--alerta { background: rgba(255, 193, 7, .22); border-color: rgba(255, 193, 7, .55); color: #ffe9a8; }
.sessao--critico { background: rgba(220, 53, 69, .28); border-color: rgba(220, 53, 69, .6); color: #ffd7db; }
.sessao--fim { background: #b02a37; border-color: #b02a37; color: #fff; cursor: pointer; }
.sessao--fim:hover { background: #c0313f; }
@media (prefers-reduced-motion: no-preference) {
    .sessao--critico { animation: sessao-pulsa 1.6s ease-in-out infinite; }
}
@keyframes sessao-pulsa { 50% { opacity: .62; } }

.rascunho {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin: 0 0 var(--sp-3); padding: .7rem .9rem;
    background: #fff8e1; border: 1px solid #ffd45e; border-radius: var(--raio-sm);
    color: #6b4e00; font-size: .9rem;
}
.rascunho span { flex: 1; min-width: 12rem; }
.appbar__end .usermenu__txt, .appbar__end .usermenu__chev { display: none; }
.appbar__end .usermenu__avatar { width: 34px; height: 34px; font-size: .82rem; }

.usermenu { position: relative; flex: none; }
.usermenu__btn { display: inline-flex; align-items: center; gap: var(--sp-2); background: transparent; border: 0; color: #fff; cursor: pointer; padding: .3rem; }
.usermenu__avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--cor-primaria-clara); color: #fff; font-weight: 700; font-size: .9rem; }
.usermenu__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.usermenu__txt strong { font-size: .95rem; }
.usermenu__txt small { color: #cdd9f0; font-size: .8rem; }
.usermenu__chev { color: #cdd9f0; }
.usermenu__drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 224px; list-style: none; margin: 0; padding: var(--sp-1); background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra-forte); }
.usermenu__drop a, .usermenu__drop button { display: block; width: 100%; text-align: left; padding: .6rem .8rem; border: 0; background: transparent; font: inherit; color: var(--cor-texto); border-radius: var(--raio-sm); cursor: pointer; }
.usermenu__drop a:hover, .usermenu__drop button:hover { background: var(--cor-bg); text-decoration: none; }
.usermenu__head { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--sp-1); }
.usermenu__head strong { font-size: .95rem; color: var(--cor-texto); }
.usermenu__head small { font-size: .8rem; color: var(--cor-texto-suave); }
.usermenu__sep { border-top: 1px solid var(--cor-borda); margin-top: var(--sp-1); padding-top: var(--sp-1); }
.usermenu__drop form { margin: 0; }

.app-main { padding: var(--sp-4) 0; }
.app-main--full { padding: 0; }
.flash-wrap { padding-top: var(--sp-3); }

/* Portal (hero = banner puro, sem nada sobreposto, com respiro e cantos arredondados) */
.portal-hero { padding: var(--sp-4) var(--sp-4) 0; }
.portal-hero__banner {
    display: block; width: 100%; height: auto; max-width: 1360px; margin: 0 auto;
    border-radius: var(--raio); background: var(--cor-banner);
}

/* Rolagem suave até âncoras. ~~O exemplo era o "Ver todos" -> #recursos~~, que
   saiu da tela; o `id` continua no HTML como endereço de URL. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#beneficios, #recursos { scroll-margin-top: 78px; } /* compensa a appbar sticky (~62px + folga) */

/* ---- Seções do portal: destaques + recursos ---- */
.portal-sec { padding: var(--sp-5) 0 0; }
.portal-sec:last-of-type { padding-bottom: var(--sp-5); }

.sec-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sec-head__title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cor-banner); }
.sec-head__link { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .92rem; color: var(--cor-texto-suave); }
.sec-head__link:hover { color: var(--cor-banner); text-decoration: none; }

/* Arte própria de /img/icones. Onde há suporte a máscara o ícone é tingido com
   a cor do card (currentColor); sem suporte, cai no PNG original azul-marinho. */
.ico { display: block; width: 100%; height: 100%; background: var(--ico) center / contain no-repeat; }
.ico--campanhas-semanais-cheio { --ico: url("../img/icones/campanhas-semanais-cheio.svg"); }
.ico--campanhas-semanais { --ico: url("../img/icones/campanhas-semanais.svg"); }   /* 21/09: ícone novo, disco padrão */
.ico--promocionais { --ico: url("../img/icones/promocionais.svg"); }
.ico--novidades { --ico: url("../img/icones/novidades.svg"); }
.ico--beneficios { --ico: url("../img/icones/beneficios.svg"); }
.ico--organograma { --ico: url("../img/icones/organograma.svg"); }
.ico--politicas-empresa { --ico: url("../img/icones/politicas-empresa.svg"); }
.ico--comunicacao-segura { --ico: url("../img/icones/comunicacao-segura.svg"); }
.ico--feriados { --ico: url("../img/icones/feriados.svg"); }
.ico--formularios { --ico: url("../img/icones/formularios.svg"); }
.ico--manuais-procedimentos { --ico: url("../img/icones/manuais-procedimentos.svg"); }
.ico--academia-serraf { --ico: url("../img/icones/academia-serraf.svg"); }
.ico--gestao-projetos { --ico: url("../img/icones/gestao-projetos.svg"); }   /* 22/09: Spec 15 */
.ico--visitas-matriz { --ico: url("../img/icones/visitas-matriz.svg"); }
.ico--solicitacao-ausencia { --ico: url("../img/icones/solicitacao-ausencia.svg"); }
.ico--catalogo-fraga { --ico: url("../img/icones/catalogo-fraga.svg"); }
.ico--melhorias { --ico: url("../img/icones/melhorias.svg"); }
.ico--materiais-apoio { --ico: url("../img/icones/materiais-apoio.svg"); }
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
    .ico {
        background: currentColor;
        -webkit-mask: var(--ico) center / contain no-repeat;
        mask: var(--ico) center / contain no-repeat;
    }
}

/* Destaques (acesso rápido) — cor do card vem de --c */
/* `grid-auto-rows: 1fr` iguala a ALTURA DAS LINHAS: sem isso cada linha do
   grid ganha a altura do seu proprio conteudo, e o card de texto curto sai
   mais baixo que o vizinho da linha de cima. */
.qa-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
/* Cards maiores e com mais presença, a pedido. Agora que são 3 por linha eles
   têm o dobro da largura de antes, e o padding acompanha — senão o conteúdo
   ficaria perdido no meio de um card grande e vazio.
   A sombra deixou de ser só de hover: no fundo azul escuro, card claro sem
   sombra parece adesivo colado, não peça com volume. */
.qa-card {
    --c: var(--c-azul-forte);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-4); background: var(--cor-superficie);
    border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    transition: transform .15s ease, box-shadow .15s ease;
}
.qa-card--verde { --c: var(--c-verde-forte); }
.qa-card--amarelo { --c: var(--c-amarelo-forte); }
.qa-card--roxo { --c: var(--c-roxo-forte); }
.qa-card--laranja { --c: var(--c-laranja-forte); }
.qa-card--teal { --c: var(--c-teal-forte); }
@supports (background: color-mix(in srgb, red 5%, white)) {
    /* ~~5% de tinta, so nos de cima.~~ 10% nos DOIS tipos, a pedido de cores
       mais fortes — e iguais entre si, senao os de baixo pareceriam de outra
       pagina. A borda acompanha, em 30%. */
    .qa-card { background: color-mix(in srgb, var(--c) 10%, #fff); border-color: color-mix(in srgb, var(--c) 30%, #fff); }
}
.qa-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.qa-card__ic { display: grid; place-items: center; width: 76px; height: 76px; padding: 19px; border-radius: 50%; background: var(--c); color: #fff; }
/* Arte que já vem com o círculo desenhado: entra inteira, sem o círculo do CSS */
.qa-card__ic--cheio { padding: 0; background: none; }
.qa-card__ic--cheio .ico { background: var(--ico) center / contain no-repeat; -webkit-mask: none; mask: none; }
.qa-card__title { margin: 0; font-size: 1.22rem; color: var(--c); }
.qa-card__text { margin: 0; flex: 1; color: var(--cor-texto-suave); font-size: .96rem; line-height: 1.55; }
.qa-card__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-3); font-weight: 700; font-size: 1rem; color: var(--c); }
.qa-card__go:hover { text-decoration: none; }

/* ---- Seta em disco (`.seta-go`) ----
   ~~Seta solta ao lado do "Acessar", que só abria o espaçamento no hover.~~
   Personalizada a pedido: vira um disco na cor do card, com a seta dentro.
   No hover o disco PREENCHE com a cor e a seta desliza para a direita — o
   movimento diz "vai para lá" sem precisar de texto.

   Um componente só, usado nos cards de cima (`.qa-card__go`) e nos de baixo
   (`.res-card__go`): se a seta mudar, muda em todos de uma vez.

   O hover é disparado pelo PAI clicável, não pelo disco: nos cards de baixo o
   card inteiro é o link, e a seta tem de reagir de onde quer que o ponteiro
   esteja. `color-mix` com fallback: sem suporte, o disco fica só com a borda. */
.seta-go {
    display: inline-grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid var(--c); color: var(--c);
    background: transparent;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
    .seta-go { background: color-mix(in srgb, var(--c) 10%, #fff); border-color: transparent; }
}
.seta-go svg { width: 16px; height: 16px; transition: transform .18s ease; }
/* Hover pelo CARD inteiro nos dois tipos — ~~nos de cima so o link `.qa-card__go`
   disparava~~, e passar o ponteiro pelo card sem acertar o "Acessar" deixava
   a bolinha parada, como se nao respondesse. */
.qa-card:hover .seta-go, .qa-card__go:hover .seta-go, .qa-card__go--btn:hover .seta-go, .res-card:hover .seta-go {
    background: var(--c); color: #fff; transform: translateX(3px);
}
.qa-card:hover .seta-go svg, .qa-card__go:hover .seta-go svg, .qa-card__go--btn:hover .seta-go svg, .res-card:hover .seta-go svg {
    transform: translateX(1px);
}
/* O card do catálogo é botão (o endereço só existe depois da resposta da API),
   mas precisa parecer com os outros "Acessar". */
.qa-card__go--btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.qa-card__go--btn:disabled { cursor: progress; }
.qa-card__go--btn.is-carregando .qa-card__go-txt { opacity: .55; }
.qa-card__spin { display: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.is-carregando .qa-card__spin { display: inline-block; animation: qa-girar .7s linear infinite; }
@keyframes qa-girar { to { transform: rotate(360deg); } }

/* ---- Painel: integrações ---- */
.card__sub { margin: 0 0 var(--sp-3); color: var(--cor-texto-suave); font-size: .92rem; }
.int-status { margin: 0 0 var(--sp-3); }
.int-teste { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--cor-borda); }
.int-passos { margin: 0 0 var(--sp-3); padding-left: 1.15rem; color: var(--cor-texto-suave); font-size: .92rem; }
.int-passos li { margin-bottom: var(--sp-2); }
.form-check { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: var(--sp-3); font-size: .92rem; cursor: pointer; }
.form-check input { margin-top: .2rem; flex: 0 0 auto; }
/* Campo de segredo com o olhinho de revelar */
.input-reveal { display: flex; gap: var(--sp-2); }
.input-reveal input { flex: 1 1 auto; min-width: 0; }
.input-reveal__btn { flex: 0 0 auto; width: 44px; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-bg); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.input-reveal__btn:hover { border-color: var(--cor-primaria); }

/* ---- Academia (Spec 10) ---- */
/* Barra de progresso: <progress> nativo. A CSP tem `style-src 'self'`, então
   style="" inline não vale (seria bloqueado calado) — o valor vai no atributo. */
.acad-barra { display: block; width: 100%; height: 9px; border: 0; border-radius: 999px; background: var(--cor-bg); overflow: hidden; appearance: none; -webkit-appearance: none; }
.acad-barra::-webkit-progress-bar { background: var(--cor-bg); border-radius: 999px; }
.acad-barra::-webkit-progress-value { background: var(--c-verde); border-radius: 999px; transition: width .3s ease; }
.acad-barra::-moz-progress-bar { background: var(--c-verde); border-radius: 999px; }
.acad-barra--mini { display: inline-block; width: 90px; height: 7px; vertical-align: middle; margin-right: .4rem; }

.acad-resumo { align-self: center; color: var(--cor-texto-suave); font-size: .95rem; }
.acad-resumo strong { color: var(--c-verde); font-size: 1.15rem; }

/* Invólucro de "Meus cursos" sem o `.container` do layout: largura maior que os
   1140px do padrão, que era o que espremia o banner e o título. */
.acad-pagina { max-width: 1700px; margin: 0 auto; padding: var(--sp-4) var(--sp-3) var(--sp-5); }
@media (min-width: 992px) { .acad-pagina { padding-inline: var(--sp-4); } }

/* ---- conteúdo programático em "Meus cursos" ----
   Módulos retráteis: 6 módulos e 35 aulas abertos de uma vez viram uma lista
   sem fim, e o card do curso some lá em cima. */
.acad-programa {
    margin-top: var(--sp-4); padding: var(--sp-4);
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}
/* Cabeçalho no mesmo desenho dos outros da Academia: ícone em disco, título e
   os números à direita. */
.acad-programa__cab {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: linear-gradient(100deg, #eef4fd 0%, var(--cor-superficie) 70%);
    border-bottom: 1px solid var(--cor-borda);
    border-radius: var(--raio) var(--raio) 0 0;
}
.acad-programa__ic { flex: none; display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--cor-primaria); color: #fff; }
.acad-programa__ic svg { width: 1.35rem; height: 1.35rem; }
.acad-programa__txt { flex: 1; min-width: 0; }
/* Titulo grande e com peso, a pedido: e o cabecalho da secao inteira, e
   competia em tamanho com os titulos dos modulos logo abaixo. */
.acad-programa__cab h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.015em; }
.acad-programa__cab p { margin: .25rem 0 0; color: var(--cor-texto-suave); font-size: .95rem; }
/* Números em pílulas: batem o olho e já sabem o tamanho do curso. */
.acad-programa__nums { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.acad-programa__nums span {
    padding: .25rem .7rem; border-radius: 999px;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    font-size: .8rem; color: var(--cor-texto-suave);
}
.acad-programa__nums strong { color: var(--cor-primaria); }
/* ~~Cada módulo era uma linha separada por `border-top`.~~ A pedido, virou um
   mini card com linha preta em volta: com 6 módulos empilhados, o separador
   cinza não dizia onde um bloco terminava e o outro começava — principalmente
   com o primeiro aberto e os outros fechados.

   O padding lateral fica no `<details>`, não no `<summary>`: assim a lista de
   aulas também respeita a margem do card, sem precisar repetir o valor. */
.acad-programa__mod {
    margin-bottom: var(--sp-2); padding: 0 var(--sp-3);
    border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    background: var(--cor-superficie);
    transition: background .18s ease, border-color .18s ease;
}
.acad-programa__mod:last-of-type { margin-bottom: 0; }

/* ~~Linha preta em volta.~~ Removida no mesmo dia: contorno preto puro num
   layout de azuis e cinzas pesava demais, e com 6 cards empilhados a tela
   virava uma grade dura. Voltou para a borda padrão do sistema.

   O que separa um card do outro passou a ser o ESTADO: o módulo aberto fica
   azul escuro e os fechados ficam claros. Resolve o mesmo problema que a borda
   tentava resolver — saber onde cada bloco começa — sem desenhar nada a mais.

   Cada cor de dentro é reescrita uma a uma. Não dá para confiar em `color`
   herdado: o número, a seta, a duração e as aulas têm cor própria, e sem
   reescrever ficariam azul-sobre-azul, ilegíveis. */
.acad-programa__mod[open] {
    background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura);
}
.acad-programa__mod[open] > summary .acad-programa__tit { color: #fff; }
.acad-programa__mod[open] > summary .acad-programa__tit small { color: rgba(255, 255, 255, .72); }
.acad-programa__mod[open] .acad-programa__n { background: rgba(255, 255, 255, .16); color: #fff; }
.acad-programa__mod[open] .acad-programa__seta { color: #fff; }
.acad-programa__mod[open] .acad-programa__aulas li { background: rgba(255, 255, 255, .10); color: #fff; }
.acad-programa__mod[open] .acad-programa__tipo { color: rgba(255, 255, 255, .92); }
.acad-programa__mod[open] .acad-programa__dur { color: rgba(255, 255, 255, .7); }
.acad-programa__mod > summary {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) 0; cursor: pointer; list-style: none;
}
.acad-programa__mod > summary::-webkit-details-marker { display: none; }
.acad-programa__mod > summary:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.acad-programa__n {
    flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
    border-radius: 50%; background: var(--v2-tinta, rgba(23,52,140,.06)); color: var(--cor-primaria);
    font-size: .82rem; font-weight: 800;
}
.acad-programa__tit { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.acad-programa__tit small { display: block; margin-top: .15rem; color: var(--cor-texto-suave);
    font-size: .78rem; font-weight: 500; }
/* A seta era o glifo `▾` no tamanho do texto — quase invisível no canto do card,
   e é ela que avisa que o módulo abre. `line-height: 1` porque um glifo grande
   com entrelinha herdada estica a altura do summary sem necessidade. */
.acad-programa__seta {
    flex: none; color: var(--cor-primaria); font-size: 1.45rem; line-height: 1;
    transition: transform .15s ease;
}
.acad-programa__mod[open] > summary .acad-programa__seta { transform: rotate(180deg); }
/* As aulas: lista simples, sem link — quem navega é a trilha, e é lá que a
   trava sequencial decide o que abre. Link aqui sugeriria que tudo está livre. */
.acad-programa__aulas { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 2.9rem;
    display: grid; gap: .35rem; }
.acad-programa__aulas li {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .7rem; border-radius: var(--raio-sm);
    background: var(--cor-bg); font-size: .9rem; color: var(--cor-texto);
}
.acad-programa__tipo { flex: none; width: 1.1rem; text-align: center; color: var(--cor-primaria); font-size: .82rem; }
.acad-programa__dur { margin-left: auto; flex: none; color: var(--cor-texto-suave); font-size: .78rem; }
@media (max-width: 560px) {
    .acad-programa { padding: var(--sp-3); }
    .acad-programa__aulas { padding-left: 0; }
}

/* ---- banner da Academia ----
   Ponta a ponta: a arte foi feita para ocupar a largura, e margem branca dos
   dois lados tira a força dela. `object-fit: cover` com altura limitada evita
   que, numa tela muito larga, o banner vire uma faixa gigante empurrando o
   conteúdo para baixo da dobra. */
.acad-banner { margin-bottom: var(--sp-4); border-radius: var(--raio); overflow: hidden;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .18); }
.acad-banner img { display: block; width: 100%; height: auto;
    max-height: 240px; object-fit: cover; object-position: center; }
@media (max-width: 700px) {
    /* No celular a arte fica minúscula se couber inteira; corta e mantém o
       lado esquerdo, onde está a marca e o texto. */
    .acad-banner img { height: 130px; object-position: left center; }
}

/* Logotipo oficial no lugar do ícone desenhado. Sem o título ao lado ele passou
   a ser a identificação da tela, então ganhou corpo. */
.acad-cabecalho__logo { flex: none; width: clamp(180px, 26vw, 280px); height: auto; display: block; }
@media (max-width: 560px) { .acad-cabecalho__logo { width: 160px; } }
/* O h1 existe para leitor de tela e para a estrutura da página; quem mostra o
   nome na tela é o logotipo. */
.acad-cabecalho__titulo-oculto {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Cabeçalho de "Meus cursos" em card verde. Verde e não o azul da marca porque
   aqui a informação é progresso — a mesma cor da barra de conclusão e do selo
   "Concluída". A página inteira passa a ler na mesma chave. */
.acad-cabecalho {
    align-items: center;
    padding: var(--sp-4);
    background: linear-gradient(100deg, #e8f7ee 0%, #f4fbf7 60%, var(--cor-superficie) 100%);
    border: 1px solid #bfe6cf; border-left: 4px solid var(--c-verde);
    border-radius: var(--raio);
}
.acad-cabecalho__main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: 1 1 22rem; }
/* Quando o contador quebra para a linha de baixo, ele continua à direita — sem
   isto ele encostava na esquerda, embaixo do logotipo, e parecia deslocado. */
.acad-cabecalho .acad-resumo { margin-left: auto; }
@media (max-width: 560px) {
    /* No celular a linha própria é melhor que espremer os dois; aí ele volta
       para a esquerda, alinhado com o resto do card. */
    .acad-cabecalho .acad-resumo { margin-left: 0; }
}
.acad-cabecalho h1 { margin: 0 0 .15rem; color: var(--cor-ok); }
/* Disco atrás do ícone: sem ele o gráfico some no fundo claro do card. */
.acad-cabecalho__ic {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--c-verde); color: #fff;
}
.acad-cabecalho__ic svg { width: 1.6rem; height: 1.6rem; }
@media (max-width: 560px) {
    .acad-cabecalho__ic { width: 2.4rem; height: 2.4rem; }
    .acad-cabecalho__ic svg { width: 1.25rem; height: 1.25rem; }
}

.acad-grade { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
/* Card deitado: mascote à esquerda, conteúdo à direita.
   ~~Era uma coluna vertical~~ — com um curso só na grade, empilhar título,
   descrição, barra e botão produzia um bloco alto e vazio ocupando a largura
   toda. Deitado, a mesma informação cabe na altura do próprio mascote. */
/* `start`, não `center`: com a descrição inteira o card fica alto, e centralizar
   deixava o botão boiando no meio do vazio à direita. No topo ele fica na linha
   do título. O mascote continua centralizado (regra própria abaixo) — alinhado
   ao topo sobraria meia tela de branco embaixo dele. */
/* ~~mascote | conteúdo | botão~~ — o Serrafinho passou para a DIREITA, e com
   ele lá o botão não cabia mais numa coluna própria: passou a fechar a coluna
   de texto, encostado à direita. Sobraram duas colunas. */
.acad-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
    column-gap: var(--sp-4);
    padding: var(--sp-4); background: var(--cor-superficie);
    border: 1px solid var(--cor-borda); border-left: 4px solid var(--c-laranja); border-radius: var(--raio);
    overflow: hidden;   /* o mascote encosta na base; sem isto ele passaria da borda arredondada */
}
.acad-card__corpo { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* ~~max-width: 68ch~~ — o limite protegia a leitura, mas era ele que abria o
   vazio entre o texto e o Serrafinho: o texto parava no meio e a coluna seguia
   até a lateral. Sem o limite o texto vai até a borda da coluna e os dois ficam
   próximos, que foi o pedido. A coluna já é estreitada pela lateral, então a
   linha não chega perto dos 1140px do card. */
/* Coluna da direita: Serrafinho em cima, botão embaixo, o conjunto encostado na
   base. `flex-end` mantém o botão no canto inferior direito — que foi onde o
   operador quis — com o mascote logo acima dele. */
.acad-card__lateral {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; gap: var(--sp-3);
}
.acad-card__acao { display: flex; }
.acad-card__acao .btn { min-width: 11rem; }
/* No card em pé o título esticava (`flex: 1`) para empurrar o selo à direita da
   coluna. Deitado, essa mesma regra joga o selo para longe do título, no meio do
   card, parecendo solto. Aqui ele cola no título. */
.acad-card__corpo .acad-card__title { flex: 0 1 auto; }
/* A imagem é 460×690 (retrato), 1,5× mais alta que larga. Amarrar só a largura e
   deixar a altura em auto preserva a proporção — travar as duas achataria o
   Serrafinho. ~~116px~~ → 200px: no card deitado, e agora com o texto inteiro
   deixando o card alto, ele ficava pequeno demais e sobrava branco na lateral. */
.acad-card__mascote { width: 200px; height: auto; }
/* Sem espaço para as duas colunas, a lateral inteira desce para baixo do texto,
   e o botão vai para a direita para continuar fechando o card. */
@media (max-width: 860px) {
    .acad-card { grid-template-columns: 1fr; row-gap: var(--sp-3); }
    .acad-card__lateral { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    /* Embaixo do texto ele não tem mais um vazio lateral para preencher — nos
       200px viraria o maior elemento do card. */
    .acad-card__mascote { width: 130px; }
}
/* No celular o mascote roubaria a largura do texto: some, e sobra só o botão. */
@media (max-width: 640px) {
    .acad-card__mascote { display: none; }
    .acad-card__lateral { justify-content: flex-start; }
}
.acad-card.is-concluida { border-left-color: var(--c-verde); }
.acad-card__head { display: flex; align-items: flex-start; gap: var(--sp-2); }
/* Nome do curso: e a informacao principal do card e saia menor que o
   proprio texto de descricao logo abaixo. `clamp` para encolher junto em
   tela pequena, em vez de estourar a largura. */
.acad-card__title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; flex: 1; }
/* ~~Cortava em 3 linhas para não esticar o card~~ — por decisão do operador o
   texto aparece inteiro: ele quer a descrição do curso legível já na grade, sem
   precisar abrir. O card cresce com o texto, e é isso mesmo. */
.acad-card__text { margin: 0; color: var(--cor-texto-suave); font-size: .9rem; }
.acad-card__meta { margin: 0; color: var(--cor-texto-suave); font-size: .85rem; }
.acad-card .btn { align-self: flex-start; margin-top: var(--sp-1); }
.acad-selo { padding: .15rem .55rem; border-radius: 999px; background: var(--cor-ok-bg); color: var(--cor-ok); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.acad-selo--obrig { background: #fff3e0; color: var(--c-laranja); }
.acad-selo--rascunho { background: var(--cor-bg); color: var(--cor-texto-suave); }

/* Rodada de teste no painel. Roxo, fora da paleta do curso de propósito: é uma
   ferramenta de bastidor, e confundir com ação do dia a dia levaria alguém a
   abrir uma sem querer. */
.acad-teste { border-left: 4px solid #7b5cd6; background: #faf8ff; margin-bottom: var(--sp-4); }
.acad-teste__cab { margin-bottom: var(--sp-3); }
.acad-teste__lista { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.acad-teste__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); background: var(--cor-superficie);
    border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
}
.acad-teste__item small { display: block; color: var(--cor-texto-suave); font-size: .82rem; }
.acad-teste__vazio { margin: 0 0 var(--sp-3); }
/* Linha de acesso rápido: é daqui que a pessoa entra no curso em modo de teste,
   sem precisar procurar a Academia no menu. */
.acad-teste__eu { display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap; margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3);
    background: var(--cor-superficie); border: 1px solid #d9cdf5; border-radius: var(--raio-sm); }
.acad-teste__eu__ok { font-weight: 700; color: #5b3fb0; margin-right: var(--sp-1); }
.acad-teste__eu--nao { display: block; border-color: #f3d9b4; background: #fff8ee; color: var(--cor-texto); font-size: .92rem; line-height: 1.5; }
.acad-teste__abrir { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.acad-teste__abrir .form-field { margin: 0; min-width: 16rem; }

.acad-status { margin-bottom: var(--sp-4); }
.acad-status .acad-barra { margin-bottom: var(--sp-2); }
.acad-ok { margin: var(--sp-2) 0 0; color: var(--cor-ok); font-weight: 600; }

.acad-aulas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.acad-aula { padding: var(--sp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); scroll-margin-top: 80px; }
.acad-aula.is-vista { border-color: var(--cor-ok); }
.acad-aula__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.acad-aula__num { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--cor-bg); color: var(--cor-texto-suave); font-weight: 700; }
.acad-aula.is-vista .acad-aula__num { background: var(--cor-ok); color: #fff; }
.acad-aula__title { margin: 0; font-size: 1rem; }
.acad-video { position: relative; padding-top: 56.25%; margin-bottom: var(--sp-3); border-radius: var(--raio-sm); overflow: hidden; background: #000; }
.acad-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Player da aula (vídeo próprio, com trava de avanço) ------------------ */
/* Reaproveita a moldura 16:9 do .acad-video; o que muda é ser <video> nosso
   em vez de iframe de terceiro, mais a faixa de progresso e o aviso. */
.acad-player { margin-bottom: var(--sp-3); }
.acad-player__moldura { position: relative; padding-top: 56.25%; border-radius: var(--raio-sm); overflow: hidden; background: #000; }
.acad-player__moldura video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }

/* Cadeado: aula ainda não liberada pela ordem da trilha. */
.acad-player--travado .acad-player__moldura { display: grid; place-items: center; padding-top: 0; min-height: 200px; background: var(--cor-bg); border: 1px dashed var(--cor-borda); }
.acad-player__cadeado { display: grid; gap: var(--sp-2); justify-items: center; padding: var(--sp-4); text-align: center; color: var(--cor-texto-suave); }
.acad-player__cadeado strong { color: var(--cor-texto); }

.acad-player__rodape { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); font-size: .85rem; color: var(--cor-texto-suave); }

/* Faixa de cobertura. A largura vem da custom property --pct, escrita pelo
   academia-player.js — nunca por atributo style no HTML, que o CSP bloqueia. */
.acad-player__barra { --pct: 0%; flex: 1; height: 8px; border-radius: 999px; background: var(--cor-bg); overflow: hidden; }
.acad-player__barra::before { content: ""; display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--cor-primaria-clara); transition: width .4s ease; }
.acad-player__rotulo { font-variant-numeric: tabular-nums; white-space: nowrap; }

.acad-player__aviso { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--raio-sm); background: var(--cor-alerta-bg); color: var(--cor-alerta); font-size: .88rem; }
.acad-player__aviso--ok { background: var(--cor-ok-bg); color: var(--cor-ok); }

/* Aula bloqueada na lista da trilha. */
.acad-aula--travada { opacity: .62; }
.acad-aula--travada .acad-aula__title { color: var(--cor-texto-suave); }
.acad-trava { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: .8rem; color: var(--cor-texto-suave); }

/* Pontuação do bloco de perguntas da aula. */
.acad-pontos { display: inline-flex; align-items: center; gap: var(--sp-1); padding: .15rem .5rem; border-radius: 999px; background: var(--cor-info-bg); color: var(--cor-info); font-size: .78rem; font-weight: 700; }
.acad-pontos--cheio { background: var(--cor-ok-bg); color: var(--cor-ok); }
.acad-texto { margin-bottom: var(--sp-3); color: var(--cor-texto); }
.acad-anexo { margin: 0 0 var(--sp-3); }

/* "Sobre o curso" na aba Visão geral. Mesmo padrão de <details> dos módulos no
   painel: cabeçalho inteiro clicável, marcador nativo escondido e seta própria
   (a nativa muda de forma entre navegadores). A view decide se nasce aberta:
   sim enquanto nenhuma aula foi concluída, recolhida depois. */
.acad-sobre { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    margin-bottom: var(--sp-3); background: var(--cor-bg); }
.acad-sobre__cab { display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2); cursor: pointer; list-style: none;
    font-weight: 700; font-size: .92rem; color: var(--cor-texto);
    border-radius: var(--raio-sm); }
.acad-sobre__cab::-webkit-details-marker { display: none; }   /* Safari */
.acad-sobre__cab:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.acad-sobre__seta { display: inline-block; flex: none; width: 1.2rem; text-align: center;
    color: var(--cor-texto-suave); transition: transform .15s ease; }
.acad-sobre:not([open]) > .acad-sobre__cab .acad-sobre__seta { transform: rotate(-90deg); }
.acad-sobre__corpo { margin: 0; padding: 0 var(--sp-3) var(--sp-3); white-space: normal; }
.acad-marcar { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }

.acad-cta { margin-top: var(--sp-4); }
.acad-prova { display: grid; gap: var(--sp-3); }
.acad-questao { border-left: 4px solid var(--cor-borda); }
.acad-questao.is-certa { border-left-color: var(--cor-ok); }
.acad-questao.is-errada { border-left-color: var(--cor-erro, #c62828); }
.acad-questao__num { padding: 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-suave); }
.acad-questao__txt { margin: 0 0 var(--sp-3); font-weight: 600; }

/* ---- perguntas DA PROVA ----
   A trilha já tratava as perguntas como card; a prova ficou para trás, com uma
   barra lateral cinza e o enunciado no tamanho do texto comum. Numa prova de 19
   questões isso cansa: a pergunta é o que se lê, e ela desaparecia no meio das
   alternativas. Mini card azul e enunciado maior. */
.acad-prova .acad-questao {
    background: #f5f9ff; border: 1px solid #cfe0f7;
    border-left: 4px solid var(--cor-primaria);
    border-radius: var(--raio); padding: var(--sp-4);
}
.acad-prova .acad-questao.is-certa  { background: #f4fbf6; border-color: #bfe6cf; border-left-color: var(--c-verde); }
.acad-prova .acad-questao.is-errada { background: #fdf5f5; border-color: #f0cccc; }
.acad-prova .acad-questao__num {
    display: inline-block; padding: .25rem .7rem; border-radius: 999px;
    background: var(--cor-primaria); color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em;
}
.acad-prova .acad-questao.is-certa  .acad-questao__num { background: var(--c-verde); }
.acad-prova .acad-questao.is-errada .acad-questao__num { background: var(--cor-erro, #c62828); }
/* O enunciado é a linha mais importante da tela — sai de ~1rem para 1.2rem. */
.acad-prova .acad-questao__txt {
    margin: var(--sp-3) 0; font-size: 1.2rem; font-weight: 700;
    line-height: 1.45; color: var(--cor-texto);
}
/* Alternativa acolchoada, linha inteira clicável — mesmo desenho da trilha. */
.acad-prova .acad-opcao {
    display: flex; align-items: center; gap: .65rem; margin: 0 0 .5rem;
    padding: .7rem 1rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    background: var(--cor-superficie); font-size: 1.02rem;
    transition: background .15s ease, border-color .15s ease;
}
.acad-prova .acad-opcao:hover { background: #eef4fd; border-color: var(--cor-primaria-clara); }

/* ---- revisão da prova (já respondida) ----
   Antes era uma lista de enunciados dentro de um card só, com "acertou/errou" e
   nada mais: quem errava saía sem saber o que errou — justamente a hora em que a
   prova ensina. Agora cada questão é um card, e as alternativas mostram a
   escolhida e a correta. */
.acad-revisao { display: grid; gap: var(--sp-3); }
.acad-revisao__cab { display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap; }
.acad-revisao__cab h2 { margin: 0; }
/* "Suas respostas" fica DIRETO no fundo azul da página, sem card por baixo: sem
   esta regra herda a cor de texto escura e some. Os cards de questão logo abaixo
   têm fundo branco próprio, por isso só o título precisa mudar. */
body.palco-azul .acad-revisao__cab h2 { color: #fff; }
.acad-revisao__placar { display: flex; gap: var(--sp-2); }
.acad-revisao__certo, .acad-revisao__errado {
    padding: .25rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
}
.acad-revisao__certo  { background: var(--cor-ok-bg); color: var(--cor-ok); }
.acad-revisao__errado { background: #fdecea; color: #b3261e; }

/* O card da questão herda o desenho da prova; aqui só a cor do estado. */
.acad-revisao .acad-questao {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-borda); border-radius: var(--raio); padding: var(--sp-4);
}
.acad-revisao .acad-questao.is-certa  { border-left-color: var(--c-verde); background: #f6fbf8; border-color: #cfe8da; }
.acad-revisao .acad-questao.is-errada { border-left-color: var(--cor-erro, #c62828); background: #fdf6f6; border-color: #f0cccc; }
.acad-revisao .acad-questao__num {
    display: inline-block; padding: .25rem .75rem; border-radius: 999px;
    background: var(--cor-bg); color: var(--cor-texto-suave);
    font-size: .74rem; font-weight: 800; letter-spacing: .04em;
}
.acad-revisao .acad-questao.is-certa  .acad-questao__num { background: var(--cor-ok-bg); color: var(--cor-ok); }
.acad-revisao .acad-questao.is-errada .acad-questao__num { background: #fdecea; color: #b3261e; }
.acad-revisao .acad-questao__txt { margin: var(--sp-3) 0; font-size: 1.15rem; font-weight: 700; line-height: 1.45; }

.acad-revisao__alts { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.acad-revisao__alt {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .55rem .9rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    background: var(--cor-superficie); color: var(--cor-texto-suave); font-size: .96rem;
}
/* A correta sempre verde, mesmo quando não foi a escolhida — é o que a pessoa
   precisa levar da revisão. */
.acad-revisao__alt.is-certa { border-color: #bfe6cf; background: var(--cor-ok-bg); color: var(--cor-texto); font-weight: 600; }
.acad-revisao__alt.is-escolhida { border-color: #f0cccc; background: #fdecea; color: var(--cor-texto); }
.acad-revisao__marca { flex: none; width: 1.1rem; font-weight: 800; text-align: center; }
.acad-revisao__alt.is-certa .acad-revisao__marca { color: var(--cor-ok); }
.acad-revisao__alt.is-escolhida .acad-revisao__marca { color: #b3261e; }
.acad-revisao__tag { margin-left: auto; font-style: normal; font-size: .72rem;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b3261e; }
.acad-revisao__tag--ok { color: var(--cor-ok); }
/* "Sua resposta" na alternativa CERTA sai em verde: vermelho ali contradizia o
   card, que já dizia "acertou". */
.acad-revisao__alt.is-certa .acad-revisao__tag { color: var(--cor-ok); }
.acad-opcao { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem 0; cursor: pointer; }
.acad-explica { margin: var(--sp-3) 0 0; padding: var(--sp-2); border-radius: var(--raio-sm); background: var(--cor-bg); font-size: .9rem; }
.acad-resultado { margin-bottom: var(--sp-4); border-left: 4px solid var(--cor-erro, #c62828); }
.acad-resultado.is-ok { border-left-color: var(--cor-ok); }
/* Aprovado vira duas colunas para caber o Serrafinho de beca. Só no aprovado
   (`--festa`): reprovado continua de uma coluna, e um mascote festejando ao lado
   de "Não atingiu a nota" seria deboche. */
.acad-resultado--festa {
    display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-3);
}
.acad-resultado__txt { min-width: 0; }
/* Margem negativa embaixo para encostar na borda do card em vez de flutuar sobre
   o padding — mesma solução do mascote no aviso da prova. */
.acad-resultado__mascote {
    width: clamp(96px, 13vw, 155px); height: auto;
    margin-bottom: calc(var(--sp-4) * -1); align-self: end;
}
/* Abaixo de 620px ele sai: a nota e o botão do certificado é que precisam da
   largura. Mesmo ponto de corte do aviso da prova, para as duas telas da prova
   quebrarem juntas. */
@media (max-width: 620px) {
    .acad-resultado--festa { grid-template-columns: 1fr; }
    .acad-resultado__mascote { display: none; }
}
/* Certificado dentro do próprio card de aprovado: quem acabou de passar quer o
   documento, não um caminho de volta para a trilha para ir buscá-lo.
   `inline-flex` para o botão não esticar na largura toda do card. */
.acad-resultado__cert { display: inline-flex; margin-top: var(--sp-3); }
/* Aprovado, mas ainda falta algo para o certificado (uma atividade, uma entrega
   para corrigir). O motivo ocupa o lugar do botão — sumir calado deixaria a
   pessoa procurando o que não existe. */
.acad-resultado__pend {
    margin: var(--sp-3) 0 0; padding: .55rem .8rem;
    background: #fff8ee; border: 1px solid #f3d9b4; border-radius: var(--raio-sm);
    font-size: .88rem; color: var(--cor-texto-suave);
}
/* Aviso que abre a prova. Laranja, não vermelho: é advertência, não erro — o
   vermelho aqui leria como "algo deu errado" antes mesmo de começar. Mesmo
   laranja do selo "Obrigatória", para o aluno reconhecer o código de cor. */
/* Aviso de rodada de teste. Roxo, não laranja nem vermelho: precisa ser
   inconfundível com o aviso "Antes de começar" logo abaixo, e não é advertência
   nem erro — é um estado diferente da tela. */
.acad-teste-prova {
    margin-bottom: var(--sp-3); background: #f6f2ff;
    border: 1px solid #ddd0f7; border-left: 4px solid var(--c-roxo);
}
.acad-teste-prova p { margin: var(--sp-2) 0 0; font-size: .94rem; line-height: 1.55; }
.acad-teste-prova__obs { color: var(--cor-texto-suave); font-size: .88rem !important; }

/* Duas colunas: o aviso à esquerda, o Serrafinho à direita. `align-items: end`
   encosta o mascote na base do card em vez de deixá-lo boiando no meio. */
/* ~~`align-items: end`.~~ Trocado para `start` a pedido: com `end`, o texto era
   empurrado para a base do card e ficava boiando no meio dele, longe do título.
   Agora começa no canto superior esquerdo, que é onde a leitura começa.
   O mascote não se mexe — ele tem `align-self: end` próprio e segue na base. */
.acad-aviso-prova {
    display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--sp-3);
    margin-bottom: var(--sp-4); background: #fff8ee;
    border: 1px solid #f3d9b4; border-left: 4px solid var(--c-laranja);
}
.acad-aviso-prova__txt { min-width: 0; align-self: start; }
.acad-aviso-prova__lista { margin: var(--sp-2) 0 0; padding-left: 1.15rem; display: grid; gap: var(--sp-2); }
.acad-aviso-prova__lista li { color: var(--cor-texto); font-size: .94rem; line-height: 1.5; }
/* Margem negativa embaixo: o mascote encosta na borda do card em vez de flutuar
   sobre o padding, que é o que o fazia parecer colado por cima e não dentro. */
.acad-aviso-prova__mascote {
    width: clamp(110px, 15vw, 175px); height: auto;
    margin-bottom: calc(var(--sp-4) * -1); align-self: end;
}
/* Abaixo de 620px o mascote roubaria a largura do texto, e o aviso é o que
   importa aqui: ele sai da linha e some. */
@media (max-width: 620px) {
    .acad-aviso-prova { grid-template-columns: 1fr; }
    .acad-aviso-prova__mascote { display: none; }
}

/* ---- Módulos (Spec 11) ---- */
.acad-modulo { margin-bottom: var(--sp-5); padding-left: var(--sp-3); border-left: 3px solid var(--c-laranja); scroll-margin-top: 80px; }
.acad-modulo__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.acad-modulo__head > div:first-child { flex: 1; min-width: 220px; }
.acad-modulo__n { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-laranja); }
.acad-modulo__title { margin: .15rem 0 .3rem; font-size: 1.15rem; }
.acad-modulo__prog { min-width: 130px; text-align: right; }
.acad-modulo__prog small { color: var(--cor-texto-suave); font-size: .82rem; }

.acad-sub { margin: 0 0 var(--sp-2); font-size: .95rem; }
.acad-materiais { margin-bottom: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-bg); }
.acad-material { margin-bottom: var(--sp-2); }
.acad-material__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
/* Leitor de PDF embutido: a CSP libera 'self' no frame-src justamente para isto */
.acad-pdf { margin-top: var(--sp-2); height: 70vh; min-height: 380px; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); overflow: hidden; background: var(--cor-superficie); }
.acad-pdf iframe { width: 100%; height: 100%; border: 0; display: block; }

.acad-atividade { margin-top: var(--sp-3); border-left: 3px solid var(--c-teal); }
.acad-resposta { margin-bottom: var(--sp-3); border-left: 4px solid var(--c-amarelo); }
.acad-resposta.is-avaliada { border-left-color: var(--cor-ok); }
.acad-resposta__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }

/* ---- página inteira azul ----
   ~~Exclusivo da Academia, marcado por `bodyClass`.~~ Desde 10/09/2026 é o fundo
   PADRÃO do Intraweb inteiro, a pedido do operador: o layout `app` já entrega
   `palco-azul` em toda tela. A classe continua existindo porque é ela que
   carrega as ~20 regras de contraste — texto solto, abas do painel, links fora
   de card — construídas e testadas na Academia. Promover a classe custou uma
   linha no layout; reescrever essas regras para `is-app` custaria revisar cada
   uma sem ganho nenhum.

   O azul vai no `<body>`, não num container. Pintar só o container deixava
   tiras claras em volta — nas laterais, acima e abaixo. */
/* Padrão de peças no fundo, desenhado em SVG e embutido como `data:` — pistão,
   engrenagem, filtro e vela. Vale a pena ser desenho e não arquivo: pesa ~1 KB
   dentro do próprio CSS, escala sem borrar em qualquer tela e a cor sai de
   `rgba` branca, então funciona em cima de qualquer tom de azul.
   Opacidade baixíssima de propósito — é textura, não ilustração: mais forte que
   isso e o texto branco por cima perde legibilidade.
   O `data:` passa na CSP porque `img-src` já libera `data:`. */
body.palco-azul {
    background:
        url("../img/fundo-intraweb.webp") center center / cover no-repeat,
        linear-gradient(160deg, var(--cor-primaria), #0f2160);
    background-attachment: fixed;
}
/* O gradiente fica DEBAIXO da imagem de propósito: enquanto ela carrega — e se
   não carregar — a página já é azul, em vez de piscar branco. */

/* `fixed` com imagem raster trava a rolagem no celular: cada frame reprojeta a
   imagem contra o viewport, e o iOS ainda a redimensiona errado ao esconder a
   barra de endereço. `scroll` resolve os dois. A imagem é quase toda gradiente,
   então esticar na altura do documento não estraga o desenho — e o gradiente
   por baixo cobre o que sobrar. */
@media (max-width: 768px) {
    body.palco-azul { background-attachment: scroll; background-position: center top; }
}
/* ---- Cabeçalhos e títulos que vivem DIRETO no azul ----
   Estes ficam fora de qualquer card, e no fundo claro usavam cores de marca que
   no azul escuro somem: "Acesso rápido" e "Todos os recursos" mediam 1.91:1 de
   contraste (o mínimo legível é 4.5:1) e "Empresa", 2.25:1 — praticamente a
   mesma cor do fundo. */
/* ~~Branco.~~ Amarelo claro a pedido: os cabeçalhos de seção ("Acesso rápido",
   "Todos os recursos") são os únicos títulos que ficam soltos no azul, e o
   amarelo os separa do texto branco de todo o resto sem gritar. Tom escolhido
   claro de propósito — amarelo saturado sobre azul-marinho vibra e cansa. */
body.palco-azul .sec-head__title { color: #ffdf7e; }
/* Resumo do filtro na Auditoria: cinza-suave, e fica solto no azul. */
body.palco-azul .periodo__resumo { color: rgba(255, 255, 255, .82); }
body.palco-azul .sec-head__link { color: rgba(255, 255, 255, .78); }
body.palco-azul .sec-head__link:hover { color: #fff; }

/* Os grupos de recursos se identificam PELA COR — jogar todos para branco
   resolveria o contraste e apagaria a identidade junto. Em vez disso a paleta
   ganha a versão clara para fundo escuro: mesma família de cor, agora acima de
   7:1. O ícone acompanha sozinho, porque desenha com `currentColor`. */
/* ~~Redefinia `--c` no grupo inteiro.~~ Isso vazava para os cards de dentro:
   quando os discos dos icones passaram a usar `--c` como fundo solido, saiam
   na cor CLARA (feita para texto sobre azul) em vez da forte — 1.5:1 de
   contraste com o icone branco. A cor clara agora vai so onde e lida sobre o
   azul, o titulo do grupo; os cards, que tem fundo proprio claro, ficam com a
   versao forte de `--c`. */
body.palco-azul .res-group          > .res-group__title { color: #8ec9ff; }
body.palco-azul .res-group--verde   > .res-group__title { color: #6fe7a9; }
body.palco-azul .res-group--laranja > .res-group__title { color: #ffc272; }
body.palco-azul .res-group--roxo    > .res-group__title { color: #c4aeff; }
body.palco-azul .res-group--teal    > .res-group__title { color: #6fe0dc; }
body.palco-azul .res-group--amarelo > .res-group__title { color: #ffd968; }

/* ~~A barra de abas vivia direto no azul, com caracteres claros.~~ Agora é um
   card branco em qualquer fundo; no palco azul só a sombra fica mais forte. */
body.palco-azul .gestao-nav { border-color: transparent; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
/* ~~Pílula .gestao-nav__volta ("← Voltar para a matéria") ao lado da aba Academia.~~
   Saiu em 16/09: o mini card de voltar padrão assumiu. */
/* O container do palco vira transparente: o azul agora é da página. */
body.palco-azul .acad-palco, body.palco-azul .v2 { background: none; }
/* Cabeçalhos de página que ficam direto no azul (prova, e qualquer outra tela
   da Academia que use o `page-head` padrão). */
body.palco-azul > .container > .page-head h1,
body.palco-azul .app-main > .container > p > .sec-head__link { color: #fff; }
/* `:not(.acad-cabecalho)` porque aquele cabeçalho tem fundo próprio (o card
   verde de "Meus cursos"): texto branco em cima dele ficava ilegível. Resolvido
   aqui, na origem, em vez de uma regra mais específica brigando depois —
   guerra de especificidade é remendo que o próximo não entende. */
body.palco-azul .app-main > .container > .page-head:not(.acad-cabecalho) h1 { color: #fff; }
body.palco-azul .app-main > .container > .page-head:not(.acad-cabecalho) .page-head__sub { color: rgba(255, 255, 255, .78); }
body.palco-azul .app-main > .container > p > a { color: rgba(255, 255, 255, .82); }
body.palco-azul .app-main > .container > p > a:hover { color: #fff; }
/* Textos soltos no azul (estados vazios, dicas) em qualquer tela da Academia. */
body.palco-azul .app-main > .container > .muted,
body.palco-azul .app-main > .container > .form-hint { color: rgba(255, 255, 255, .75); }
/* O cabeçalho verde de "Meus cursos" já é um card — no azul ele só precisa de
   sombra para descolar, senão parece colado no fundo. */
body.palco-azul .acad-cabecalho,
body.palco-azul .card { box-shadow: 0 8px 26px rgba(0, 0, 0, .18); }

/* ---- palco azul da tela da matéria ----
   O fundo da PÁGINA fica azul; os cards seguem brancos. ~~Uma tentativa anterior
   pintou a coluna dos módulos~~ — não era isso: o azul é o palco, e o conteúdo
   continua sendo lido como conteúdo em cima dele.
   O trabalho é adaptar os caracteres que ficam FORA dos cards: no escuro, o
   cinza-suave padrão do painel some, e borda cinza também. */
.acad-palco {
    background: linear-gradient(160deg, var(--cor-primaria), #0f2160);
    margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0;
    padding: var(--sp-4) var(--sp-3) var(--sp-5);
    border-radius: var(--raio);
}
/* Título e subtítulo da página vivem direto no azul. */
.acad-palco > .page-head h1 { color: #fff; }
.acad-palco > .page-head .page-head__sub { color: rgba(255, 255, 255, .78); }
/* Botões do cabeçalho: contorno claro, senão o cinza desaparece. */
.acad-palco > .page-head .btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.acad-palco > .page-head .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/* O badge de pendências continua vermelho — ele precisa gritar no azul também. */
.acad-palco > .page-head .nav-badge { background: var(--cor-alerta); color: #fff; }
/* Cards e caixas por cima do azul ganham sombra mais funda, para descolarem. */
.acad-palco .card { box-shadow: 0 8px 26px rgba(0, 0, 0, .18); }
@media (min-width: 992px) {
    .acad-palco { padding-inline: var(--sp-4); }
}

/* Gestão: módulos, aulas e perguntas dentro da matéria.
   ~~padding sp-2 / margin sp-3~~ — com 6 módulos de nome longo, o título quebrava
   em duas linhas e encostava na contagem logo abaixo: os cards ficavam "em pé",
   um grudado no outro. Mais acolchoado por dentro e mais respiro entre eles,
   sem virar um card gigante — o painel continua sendo uma lista de trabalho. */
.acad-mod-box {
    margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda); border-radius: var(--raio);
    transition: border-color .15s, box-shadow .15s;
}
.acad-mod-box:hover { border-color: var(--cor-primaria-clara); box-shadow: var(--sombra); }
/* Módulo aberto se destaca da pilha: é onde a pessoa está trabalhando. */
.acad-mod-box:has(.acad-mod[open]) { border-left: 4px solid var(--cor-primaria); }
/* O título respira longe da contagem, em vez de as duas linhas se tocarem. */
.acad-mod-box .acad-item__main strong { display: block; line-height: 1.35; margin-bottom: .3rem; }
.acad-mod-box .acad-item__main small { color: var(--cor-texto-suave); }
/* Chips da contagem: o número salta, o zero apaga e o que falta aparece. */
.acad-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.acad-chip {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    background: var(--cor-bg); color: var(--cor-texto);
    font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.acad-chip.is-zero { color: var(--cor-texto-suave); opacity: .6; font-weight: 500; }
/* Aula de vídeo sem arquivo é aula que o aluno abre e não vê nada — é o
   problema que o editor precisa enxergar sem abrir o módulo. */
.acad-chip.is-alerta { background: #fff3e0; color: #9a6a00; }

/* ---- módulo retrátil no painel ----
   O curso de vendas terá 30 módulos. Todos abertos, a tela vira uma rolagem
   sem fim e achar um módulo custa mais que editá-lo. Fechado por padrão; o
   cabeçalho inteiro é a área de clique. */
.acad-mod__cab { display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; cursor: pointer;
    list-style: none; border-radius: var(--raio-sm); }
.acad-mod__cab::-webkit-details-marker { display: none; }   /* Safari */
.acad-mod__cab:hover { background: var(--cor-bg); }
.acad-mod__cab:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.acad-mod__seta { display: inline-block; flex: none; width: 1.2rem; text-align: center;
    color: var(--cor-texto-suave); transition: transform .15s ease; }
.acad-mod[open] > .acad-mod__cab .acad-mod__seta { transform: rotate(180deg); }
/* Ações ficam no corpo, não no cabeçalho: dentro do <summary>, clicar em
   "excluir" também abriria e fecharia o módulo. */
.acad-mod__acoes { justify-content: flex-end; padding-top: var(--sp-1); }
.acad-mod-acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.acad-upload { display: inline-flex; margin: 0; }
.acad-upload label { cursor: pointer; margin: 0; }
/* Matéria nova: o formulário ocupa a linha toda (a ajuda saiu para um modal) */
.acad-form-full > .card { width: 100%; }
.acad-cols { display: grid; gap: var(--sp-3); }
.acad-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.acad-item { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); }
.acad-item__main { flex: 1; min-width: 0; }
.acad-item__main small { display: block; margin-top: .2rem; color: var(--cor-texto-suave); font-size: .82rem; }
.acad-alt { display: inline-block; margin-right: .5rem; }
.acad-alt.is-correta { color: var(--cor-ok); font-weight: 700; }
/* Linha de alternativa: os campos nascem do JS, fora de um .form-field, então
   não herdam o estilo de input do projeto — sem isto viram caixinha sem borda. */
.acad-alt-linha { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.acad-alt-linha input[type="text"] {
    flex: 1; min-width: 0; min-height: 44px; padding: .55rem .75rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    font: inherit; background: var(--cor-superficie);
}
.acad-alt-linha input[type="text"]:focus { border-color: var(--cor-primaria); outline: none; box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }
.acad-alt-linha input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; cursor: pointer; }
/* A alternativa marcada como correta fica evidente enquanto se digita */
.acad-alt-linha:has(input[type="radio"]:checked) input[type="text"] { border-color: var(--cor-ok); background: var(--cor-ok-bg); }
.acad-alt-erro { margin: 0 0 var(--sp-2); padding: .5rem .7rem; border-radius: var(--raio-sm); background: #fdecea; color: #b3261e; font-size: .9rem; }
.acad-filtros { margin-bottom: var(--sp-3); }
.acad-filtros__acao { display: flex; align-items: flex-end; }

/* ~~A grade abria em 2 colunas a partir de 768px e 3 a partir de 1200px~~ —
   fazia sentido com o card em pé. Com o card deitado, virava contradição: numa
   coluna de um terço da tela o card fica estreito e alto de novo, o título
   quebra em duas linhas e a descrição vira uma tira de três palavras. Uma
   coluna só, e cada curso ocupa uma faixa larga da tela. */

/* Aviso modal genérico (falha ao abrir um sistema externo, por exemplo) */
.aviso { width: 92%; max-width: 420px; padding: 0; border: 0; border-radius: var(--raio-sm); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); background: var(--cor-superficie); }
.aviso::backdrop { background: rgba(10, 20, 45, .6); }
.aviso__body { padding: var(--sp-4); text-align: center; }
.aviso__ic { display: block; font-size: 2rem; line-height: 1; margin-bottom: var(--sp-2); }
.aviso__title { margin: 0 0 var(--sp-2); font-size: 1.15rem; }
.aviso__text { margin: 0 0 var(--sp-4); color: var(--cor-texto-suave); }

/* Recursos por grupo */
/* `--c` nos cards aponta para a versao FORTE de cada cor (tokens.css): a pedido,
   as originais estavam mornas nos discos dos icones. */
.res-group { margin-bottom: var(--sp-5); --c: var(--c-azul-forte); }
.res-group--verde { --c: var(--c-verde-forte); }
.res-group--laranja { --c: var(--c-laranja-forte); }
.res-group__title { display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--sp-3); font-size: 1.12rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.res-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
/* Maiores e com sombra propria, a pedido, no mesmo desenho dos cards de
   cima: no fundo azul escuro, card claro sem sombra parece adesivo colado.
   O padding subiu junto com o tamanho — card grande com padding pequeno deixa
   o conteudo boiando na borda. */
.res-card {
    display: grid; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4); color: var(--cor-texto);
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .13);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.res-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .22); border-color: var(--c); text-decoration: none; color: var(--cor-texto); }
/* A tinta do card de baixo mora AQUI, depois da regra base, e nao no
   `@supports` la de cima junto com o `.qa-card`: la ela perdia a cascata para o
   `background: var(--cor-superficie)` da base, que vem depois no arquivo — e o
   card saia branco puro. Mesma tinta dos de cima: 10% de cor, borda em 30%. */
@supports (background: color-mix(in srgb, red 5%, white)) {
    .res-card { background: color-mix(in srgb, var(--c) 10%, #fff); border-color: color-mix(in srgb, var(--c) 30%, #fff); }
}
/* `grid-auto-rows: 1fr` iguala as linhas DENTRO de um grid, mas cada grupo tem o
   seu — e o grupo com o texto mais longo saía mais alto que os vizinhos. Um piso
   comum resolve o que o grid sozinho não alcança.
   Em `rem` e não em `px`: acompanha quem aumenta a fonte do navegador, em vez de
   espremer o texto contra uma altura fixa.
   Só a partir de 768px: em coluna única cada card já ocupa a linha toda, e um
   piso ali só criaria espaço vazio embaixo do texto curto. */
/* ~~13.5rem.~~ Subiu para 19rem, que e a altura natural dos cards de "Todos
   os recursos": as duas secoes ficam lado a lado na mesma pagina e a diferenca
   de ~88px entre elas era visivel. Um valor so para os dois tipos de card.

   O conteudo nao fica amontoado no topo porque o "Acessar" ja tem
   `align-self: end` — ele desce para a base e o espaco extra vai para o meio. */
/* ~~19rem so acima de 768px.~~ Sem media query e um pouco maior: abaixo de
   768px a regra nao valia e os cards voltavam a se descolar (139px de
   diferenca em 560px), e em 1024px o texto do card quebra em mais linhas e o
   proprio conteudo passava de 19rem.

   20.5rem cobre o pior caso medido (327px em 1024px), entao o piso vale em
   toda largura em vez de so onde eu tinha olhado. */
/* ~~20.5rem.~~ Reduzido a pedido (11/09): com os icones maiores o card de
   20,5rem sobrava espaco. 18rem cobre o conteudo mais alto medido (287px em 1024 e 640px) e
   mantem os dois tipos de card no mesmo tamanho. */
/* ~~18rem.~~ 13rem (16/09, a pedido: "arrume os tamanhos"): com os cards 6% mais
   largos o texto quebra menos e sobrava um terço de card vazio. O conteúdo mais
   alto medido (Benefícios, 3 linhas) fecha em ~200px; o resto acompanha pela
   linha do grid. */
.qa-card, .res-card { min-height: 13rem; }
/* ~~58px.~~ Quase o dobro, a pedido: o card tem 328px de altura e o icone de
   58px ficava perdido no canto. `clamp` para encolher no celular, onde a
   largura e que manda e um icone de 110px espremeria o texto ao lado. O card
   nao cresce — a altura e fixa pelo min-height e o icone so ocupa espaco que
   estava vazio. */
/* ~~Icone colorido solto, sem disco, ate 110px.~~ Mesmo desenho dos cards de
   cima, a pedido: disco solido na cor do card com o icone BRANCO dentro. Um
   estilo so na pagina inteira. O tamanho desceu para o dos discos de cima
   (76px) — disco solido de 110px e um bloco de cor, nao um icone. */
.res-card__ic {
    display: grid; place-items: center; flex: none;
    width: clamp(64px, 7vw, 80px); height: clamp(64px, 7vw, 80px); padding: 20%;
    border-radius: 50%; background: var(--c); color: #fff;
}
.res-card__title { display: block; margin-bottom: .3rem; font-size: 1.15rem; font-weight: 700; color: var(--c); }
.res-card__text { display: block; color: var(--cor-texto-suave); font-size: .95rem; line-height: 1.55; }
/* ~~Só a seta, no canto.~~ Agora "Acessar" + disco, igual aos cards de cima. O
   texto é herdado do card (que é o `<a>`), então precisa de cor e peso
   próprios — senão sairia na cor do corpo. */
.res-card__go {
    justify-self: end; align-self: end;
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .95rem; color: var(--c);
}
/* Empresa: ícone acima do texto, tudo centralizado */
.res-grid--topo .res-card { justify-items: center; text-align: center; }
/* RH e Desenvolvimento: ícone à esquerda, texto à direita */
.res-grid--lado .res-card { grid-template-columns: auto 1fr; }
.res-grid--lado .res-card__ic { grid-row: 1 / span 2; }
.res-grid--lado .res-card__body, .res-grid--lado .res-card__go { grid-column: 2; }

/* Barra de valores */

/* Filtros do mural */
.mural-filtros { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .8rem; border-radius: 999px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-weight: 600; font-size: .9rem; }
.chip:hover { border-color: var(--cor-primaria-clara); color: var(--cor-primaria); text-decoration: none; }
.chip.is-active { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* Seletor de filial (multi-filial) */
.mural-filtro, .org-pick { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.mural-filtro label, .org-pick label { font-weight: 600; color: var(--cor-texto-suave); font-size: .9rem; }
.mural-filtro select, .org-pick select { padding: .45rem .7rem; border-radius: var(--raio, 8px); border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; max-width: 100%; }
.mural-filtro select:focus, .org-pick select:focus { outline: 2px solid var(--cor-primaria-clara); outline-offset: 1px; }
/* Ações do organograma (criar/editar/remover o container) */
.org-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.org-bar .inline-form { display: inline; margin: 0; }

/* Mural — cards em coluna única (um embaixo do outro, linha inteira) */
.mural-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.mural-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-left: 4px solid var(--cor-borda); transition: box-shadow .15s, transform .15s; }
.mural-card:hover { box-shadow: var(--sombra-forte); transform: translateY(-2px); }
.mural-card--novo { border-left-color: var(--cor-primaria); }
.mural-card__hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); color: inherit; }
.mural-card__hit:hover { text-decoration: none; }
.mural-card__ic { font-size: 1.7rem; line-height: 1; }
.mural-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.mural-card__tipo { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--cor-texto-suave); }
.mural-card__title { font-size: 1.05rem; font-weight: 600; color: var(--cor-texto); }
.mural-card__meta { font-size: .8rem; color: var(--cor-texto-suave); }
.mural-card__arrow { font-size: 1.5rem; color: var(--cor-texto-suave); }
.mural-card__cta { flex-shrink: 0; white-space: nowrap; }

/* Evento — tela de detalhe */
.evento { max-width: 820px; margin: 0 auto; }
.evento__tipo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--cor-primaria); margin: 0 0 var(--sp-2); }
.evento__data, .evento__vigencia { color: var(--cor-texto-suave); margin: 0 0 var(--sp-2); font-size: .9rem; }
.evento__media { margin: var(--sp-3) 0; }
.evento__media img { max-width: 100%; height: auto; border-radius: var(--raio-sm); display: block; }
.evento__video { margin: var(--sp-3) 0; aspect-ratio: 16 / 9; border-radius: var(--raio-sm); overflow: hidden; background: #000; }
.evento__video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Vídeo vertical (celular/Shorts): player em pé, sem tarjas pretas nas laterais */
.evento__video--short { aspect-ratio: 9 / 16; max-width: min(340px, 100%); margin-left: auto; margin-right: auto; }
.evento__body { line-height: 1.7; margin: var(--sp-3) 0; }
.evento__anexos { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-2); }
.evento__lido { margin: var(--sp-4) 0 0; color: var(--cor-sucesso, #198754); font-weight: 600; font-size: .9rem; }

/* Tela estreita: só os ícones nos cantos, o logo continua no centro */
@media (max-width: 575px) {
    .appbar__inner { padding: var(--sp-2); min-height: 56px; }
    .appbar__link span { display: none; }
    .appbar__brand img { height: 28px; }
    /* Espaço curto: fica só o número da sessão, sem o ⏱ */
    .sessao { padding: .25rem .45rem; font-size: .76rem; }
    .sessao__ic { display: none; }
    .portal-hero { padding: var(--sp-3) var(--sp-3) 0; }
}

/* Botão claro + gate de login (home pública) */
.btn--light { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.btn--light:hover { background: rgba(255, 255, 255, .26); color: #fff; text-decoration: none; }
.appbar__entrar { flex: none; }

.gate:not([hidden]) { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-3); background: rgba(10, 20, 45, .6); }
.gate__box { background: var(--cor-superficie); color: var(--cor-texto); max-width: 440px; width: 100%; border-radius: var(--raio); padding: var(--sp-5); text-align: center; box-shadow: var(--sombra-forte); }
.gate__ic { font-size: 2.4rem; }
.gate__title { font-size: var(--fs-h3); margin: var(--sp-2) 0; }
.gate__box p { color: var(--cor-texto-suave); margin-bottom: var(--sp-4); }

/* Tutorial em fotos (Spec 05 §7) */
.tutorial { padding: var(--sp-6) 0; background: var(--cor-superficie); }
.tutorial__intro { text-align: center; color: var(--cor-texto-suave); max-width: 640px; margin: 0 auto var(--sp-4); }
.grid--tutorial { grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
.step-photo__figure {
    margin: 0; background: var(--cor-bg); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); overflow: hidden; position: relative;
}
.step-photo__num {
    position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 1;
    display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem;
    background: var(--cor-acento); color: #fff; border-radius: 50%; font-weight: 700;
}
.step-photo__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #dfe6ee; }
.step-photo__cap { padding: var(--sp-3); }
.step-photo__title { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.step-photo__cap p { color: var(--cor-texto-suave); margin: 0; }

/* Cabeçalho de página interna */
.page-head { margin-bottom: var(--sp-4); }
.page-head__sub { color: var(--cor-texto-suave); margin: 0; }
.card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }

/* Card centralizado (token inválido) */
.auth__card--center { text-align: center; }
.auth__icon { font-size: 2.6rem; margin-bottom: var(--sp-2); }

/* ---- Painel master ---- */
.btn--danger { background: var(--cor-alerta); color: #fff; }
.btn--danger:hover { background: #a51f1f; text-decoration: none; }
.btn--ok { background: var(--cor-ok); color: #fff; }
.btn--ok:hover { background: #24601f; text-decoration: none; }

/* Banner de impersonation */
.imp-banner { background: #f0a836; color: #22303c; }
.imp-banner__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); min-height: 48px;
}
.imp-banner .btn { background: #22303c; color: #fff; }

/* Sub-nav do painel */
/* ~~Fileira de textos com sublinhado no ativo.~~ Barra de menu (16/09/2026, a
   pedido: "está simples demais, quero que pareça um menu"): card branco com
   pílulas, ícone + rótulo, a ativa preenchida em azul. */
.gestao-nav {
    display: flex; gap: .25rem; flex-wrap: wrap; align-items: center;
    margin-bottom: var(--sp-4); padding: .5rem;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
/* ~~.5rem .85rem / .92rem / 17px~~ Maior, a pedido (16/09: "o card do menu está muito
   curto; aumenta os ícones e o texto"). */
.gestao-nav__link {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .75rem 1.1rem; border-radius: 12px; color: var(--cor-texto-suave);
    font-weight: 600; font-size: 1.02rem; line-height: 1.2; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.gestao-nav__ic { width: 21px; height: 21px; flex: none; opacity: .85; }
.gestao-nav__link:hover { background: var(--vis-azul-bg, #eaf1fb); color: var(--cor-primaria); text-decoration: none; }
.gestao-nav__link:hover .gestao-nav__ic { opacity: 1; }
.gestao-nav__link.is-active { background: var(--cor-primaria); color: #fff; box-shadow: 0 4px 12px rgba(19, 60, 130, .3); }
.gestao-nav__link.is-active .gestao-nav__ic { opacity: 1; }

/* Cards de estatística */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: var(--sp-4); text-align: center; box-shadow: var(--sombra);
}
/* `display: block` no número e no rótulo: eles precisam ficar em LINHAS
   separadas. Sem isso — e era o caso, porque a view usava classes que não
   existiam — os dois saíam grudados na mesma linha. */
.stat__num { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1.05;
    color: var(--cor-primaria); letter-spacing: -.02em; }
.stat__lbl { display: block; margin-top: .35rem; color: var(--cor-texto); font-size: .95rem; font-weight: 600; }
.stat__hint { display: block; margin-top: .25rem; color: var(--cor-texto-suave); font-size: .78rem; opacity: .85; }
.stat--destaque { border-color: var(--cor-primaria-clara); }
/* Quatro números lado a lado quando há espaço; dois no meio-termo. */
@media (min-width: 900px) { .stats--4 { grid-template-columns: repeat(4, 1fr); } }
/* A cor diz o estado sem precisar ler o rótulo — mesmo código da trilha. */
.stat--ok         { border-top: 3px solid var(--c-verde); }
.stat--ok .stat__num { color: var(--cor-ok); }
.stat--andamento  { border-top: 3px solid var(--cor-primaria-clara); }
.stat--parado     { border-top: 3px solid var(--cor-borda); }
.stat--parado .stat__num { color: var(--cor-texto-suave); }

/* Cabeçalho do relatório em card. Azul: aqui a informação é de gestão, não de
   progresso do aluno — o verde é a chave da Academia do lado de quem estuda. */
.rel-cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
    border-left: 4px solid var(--cor-primaria);
}
.rel-cabecalho__main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
/* Dois botões no cabeçalho (ex.: Acesso + Nova matéria): lado a lado, quebrando no celular. */
.rel-cabecalho__acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rel-cabecalho__ic { flex: none; display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--cor-primaria); color: #fff; }
.rel-cabecalho__ic svg { width: 1.6rem; height: 1.6rem; }
.rel-cabecalho__txt { min-width: 0; }
.rel-cabecalho__txt h1 { margin: .1rem 0 .2rem; font-size: var(--fs-h2, 1.5rem); }
/* O "voltar" vira uma sobrancelha do título, em vez de linha solta acima do card. */
.rel-cabecalho__volta { display: inline-block; font-size: .82rem; color: var(--cor-texto-suave); }
.rel-cabecalho__volta:hover { color: var(--cor-primaria); }
@media (max-width: 560px) {
    .rel-cabecalho__ic { width: 2.4rem; height: 2.4rem; }
    .rel-cabecalho__ic svg { width: 1.25rem; height: 1.25rem; }
}

/* ---- envios (respostas para corrigir) ----
   Um card por envio. A ordem dentro dele segue a pergunta que o avaliador faz
   na cabeça: quem entregou, de qual módulo, o que entregou, e só então o campo
   de comentar. */
.envios-placar { margin-bottom: var(--sp-4); }
@media (min-width: 900px) { .envios-placar { grid-template-columns: repeat(3, 1fr); } }
.envios { display: grid; gap: var(--sp-4); }
@media (min-width: 1200px) { .envios { grid-template-columns: repeat(2, 1fr); } }
.envio { border-left: 4px solid var(--cor-alerta, #c62828); display: flex; flex-direction: column; gap: var(--sp-3); }
.envio.is-avaliada { border-left-color: var(--c-verde); }
.envio__topo { display: flex; align-items: center; gap: var(--sp-3); }
/* Iniciais em disco: dá rosto ao card sem depender de foto cadastrada. */
.envio__avatar {
    flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
    border-radius: 50%; background: var(--cor-primaria); color: #fff;
    font-size: .82rem; font-weight: 800; letter-spacing: .02em;
}
.envio__quem { min-width: 0; flex: 1; }
.envio__quem strong { display: block; line-height: 1.25; }
.envio__quem small { color: var(--cor-texto-suave); font-size: .8rem; }
.envio__estado {
    flex: none; padding: .22rem .7rem; border-radius: 999px;
    background: #fff4e0; color: #9a6a00; font-size: .74rem; font-weight: 700;
}
.envio__estado.is-ok { background: var(--cor-ok-bg); color: var(--cor-ok); }
.envio__origem { margin: 0; }
.envio__tag {
    display: inline-block; padding: .2rem .65rem; border-radius: var(--raio-sm);
    background: var(--cor-bg); color: var(--cor-texto-suave);
    font-size: .76rem; font-weight: 600;
}
.envio__tag--prova { background: #eef4fd; color: var(--cor-primaria); }
.envio__enunciado { margin: 0; font-weight: 600; line-height: 1.45; }
/* O anexo é o motivo do card existir — vira botão, não link miúdo com emoji. */
.envio__anexo {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    background: var(--cor-bg); color: var(--cor-texto); text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.envio__anexo:hover { border-color: var(--cor-primaria-clara); background: #eef4fd; text-decoration: none; }
.envio__anexo__ic { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
    border-radius: var(--raio-sm); background: var(--cor-primaria); color: #fff; }
.envio__anexo__ic svg { width: 1.1rem; height: 1.1rem; }
.envio__anexo__txt { min-width: 0; }
.envio__anexo__txt strong { display: block; font-size: .9rem; word-break: break-word; }
.envio__anexo__txt small { color: var(--cor-texto-suave); font-size: .76rem; }
/* Texto dissertativo como citação: separa a voz do aluno da do sistema. */
.envio__texto {
    margin: 0; padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--cor-borda); background: var(--cor-bg);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    font-size: .94rem; line-height: 1.55; color: var(--cor-texto);
}
.envio__form { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--cor-borda); }
.envio__form .form-field { margin-bottom: var(--sp-2); }

/* Filtro de período (auditoria) */
.periodo { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.periodo__rapido { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.periodo__datas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
.periodo__datas .form-field { margin: 0; flex: 1 1 150px; min-width: 140px; }
.periodo__datas .btn { flex: 0 0 auto; }
.periodo__resumo { color: var(--cor-texto-suave); font-size: .9rem; margin: calc(var(--sp-4) * -1 + var(--sp-2)) 0 var(--sp-4); }

/* Barras de acessos por dia */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 420px; overflow-y: auto; }
.barras__item { display: grid; grid-template-columns: 3.2rem 1fr 2.5rem; align-items: center; gap: var(--sp-2); font-size: .85rem; }
.barras__dia { color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.barras__trilho { background: var(--cor-bg); border-radius: 999px; height: 14px; overflow: hidden; }
.barras__valor { display: block; height: 100%; border-radius: 999px; background: var(--cor-primaria); min-width: 2px; }
/* Larguras da barra em passos de 5%. Classe em vez de style="width:X%" porque
   o CSP (style-src 'self') bloqueia atributo de estilo inline — com o style
   inline as barras eram desenhadas sempre com largura zero. */
.barras__valor--0 { width: 0%; }
.barras__valor--5 { width: 5%; }
.barras__valor--10 { width: 10%; }
.barras__valor--15 { width: 15%; }
.barras__valor--20 { width: 20%; }
.barras__valor--25 { width: 25%; }
.barras__valor--30 { width: 30%; }
.barras__valor--35 { width: 35%; }
.barras__valor--40 { width: 40%; }
.barras__valor--45 { width: 45%; }
.barras__valor--50 { width: 50%; }
.barras__valor--55 { width: 55%; }
.barras__valor--60 { width: 60%; }
.barras__valor--65 { width: 65%; }
.barras__valor--70 { width: 70%; }
.barras__valor--75 { width: 75%; }
.barras__valor--80 { width: 80%; }
.barras__valor--85 { width: 85%; }
.barras__valor--90 { width: 90%; }
.barras__valor--95 { width: 95%; }
.barras__valor--100 { width: 100%; }
.barras__n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tabelas */
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.table-wrap { overflow-x: auto; }
.table-wrap.card { padding: var(--sp-2); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--cor-borda); }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); }
.table tbody tr:last-child td { border-bottom: 0; }
.table code { background: var(--cor-bg); padding: .1rem .4rem; border-radius: 6px; font-size: .85rem; }
.table__empty { text-align: center; color: var(--cor-texto-suave); padding: var(--sp-4); }

/* ---- tabela de colaboradores do relatório ----
   Uma linha nítida separando cada pessoa, a pedido: a borda padrão da tabela é
   clara demais para percorrer 200 nomes com o dedo na tela e não pular de
   linha. Mais alta também — linha apertada cansa em lista longa. */
.acad-relatorio-tabela tbody td { padding-block: var(--sp-3); border-bottom: 2px solid var(--cor-borda); }
.acad-relatorio-tabela tbody tr:last-child td { border-bottom: 0; }
/* O nome ganha peso: é por ele que se procura na lista. */
.acad-relatorio-tabela tbody td:first-child { font-weight: 600; color: var(--cor-texto); }
/* Faixa alternada de leve, para o olho não perder a linha no meio da largura. */
.acad-relatorio-tabela tbody tr:nth-child(even) { background: var(--cor-bg); }
.acad-relatorio-tabela tbody tr:hover { background: #eef4fd; }
.ta-right { text-align: right; }
.nowrap { white-space: nowrap; }
.muted { color: var(--cor-texto-suave); }
.row-actions { display: inline-flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.row-actions form { margin: 0; }

/* Promoção a admin: form inline (e-mail + senha) que abre no <details> */
.promote { position: relative; }
.promote > summary { list-style: none; cursor: pointer; }
.promote > summary::-webkit-details-marker { display: none; }
.promote__form {
    display: flex; flex-direction: column; gap: var(--sp-2);
    margin-top: var(--sp-2); padding: var(--sp-3);
    background: var(--cor-bg); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    text-align: left; min-width: 240px;
}
.promote__form input {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm); font: inherit;
}
.promote__form input:focus { border-color: var(--cor-primaria); outline: none; box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }

/* Formulário estreito e centralizado (troca de senha) */
.form--narrow { max-width: 460px; margin: 0 auto; }

/* Organograma — árvore indentada com guias */
.org-wrap { overflow-x: auto; }
ul.org { list-style: none; margin: 0; padding: 0; }
ul.org ul.org { margin-left: 1.1rem; padding-left: 1rem; border-left: 2px solid var(--cor-borda); }
.org__item { margin: .5rem 0; }
.org__card {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    max-width: 560px; padding: .55rem .8rem;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.org__info { display: flex; flex-direction: column; min-width: 0; }
.org__nome { font-weight: 700; }
.org__cargo { font-size: .82rem; color: var(--cor-texto-suave); }
.org__acoes { display: inline-flex; gap: .3rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.org__acoes form { margin: 0; }
.btn--xs { padding: .2rem .5rem; font-size: .8rem; line-height: 1.4; }

/* Modal (dialog) — usado no organograma */
.modal { width: 92%; max-width: 420px; padding: 0; border: 0; border-radius: var(--raio-sm); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal::backdrop { background: rgba(0, 0, 0, .5); }
.modal .form { margin: 0; padding: var(--sp-4); }
/* Formulário alto (aula, pergunta com várias alternativas) rola dentro do modal
   em vez de estourar a altura da tela e ficar com botão inalcançável. */
.modal--wide { max-width: 560px; }
.modal--scroll { max-height: 88vh; overflow-y: auto; }
.modal__title { margin: 0 0 var(--sp-3); font-size: 1.15rem; }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Popup da página principal */
.popup { width: 92%; max-width: 460px; padding: 0; border: 0; border-radius: var(--raio-sm); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden; background: var(--cor-superficie); }
.popup::backdrop { background: rgba(10, 20, 45, .6); }
.popup__close { position: absolute; top: 8px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.popup__close:hover { background: rgba(0, 0, 0, .7); }
/* Imagem sempre proporcional ao popup, com respiro (não colada no topo/laterais). */
.popup__img { display: block; width: calc(100% - 2 * var(--sp-3)); margin: var(--sp-3) auto 0; height: auto; max-height: 72vh; object-fit: contain; border-radius: var(--raio-sm); background: #f2f4f7; }
.popup__body { padding: var(--sp-4); }
.popup__title { margin: 0 0 var(--sp-2); font-size: 1.3rem; }
.popup__text { margin: 0 0 var(--sp-3); color: var(--cor-texto-suave); }
.popup__cta { margin: 0; }
.popup-item__img { display: block; max-width: 240px; height: auto; border-radius: var(--raio-sm); margin: var(--sp-2) 0; }

@media (max-width: 576px) {
    .org__card { flex-direction: column; align-items: flex-start; max-width: 100%; }
}

/* Organograma — visualização "org chart" (top-down, caixas ligadas por linhas) */
.orgchart {
    --org-line: rgba(130, 190, 100, .6);
    overflow-x: auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    border-radius: var(--raio-sm);
    background: radial-gradient(120% 90% at 50% 0%, #17407e 0%, #0d2551 72%);
}
.orgchart .tree { display: inline-block; min-width: 100%; }
.orgchart .tree ul { display: flex; justify-content: center; position: relative; margin: 0; padding: 22px 0 0; list-style: none; }
.orgchart .tree li { position: relative; list-style: none; text-align: center; padding: 22px 12px 0; }
/* conectores tracejados */
.orgchart .tree li::before,
.orgchart .tree li::after {
    content: ''; position: absolute; top: 0; right: 50%;
    width: 50%; height: 22px; border-top: 2px dashed var(--org-line);
}
.orgchart .tree li::after { right: auto; left: 50%; border-left: 2px dashed var(--org-line); }
.orgchart .tree li:only-child { padding-top: 0; }
.orgchart .tree li:only-child::before,
.orgchart .tree li:only-child::after { display: none; }
.orgchart .tree li:first-child::before,
.orgchart .tree li:last-child::after { border: 0 none; }
.orgchart .tree li:last-child::before { border-right: 2px dashed var(--org-line); }
.orgchart .tree ul ul::before {
    content: ''; position: absolute; top: 0; left: 50%;
    width: 0; height: 22px; border-left: 2px dashed var(--org-line);
}
/* nível raiz: sem linha/conector acima */
.orgchart .tree > ul { padding-top: 0; }
.orgchart .tree > ul > li { padding-top: 0; }
.orgchart .tree > ul > li::before,
.orgchart .tree > ul > li::after { display: none; }
/* caixas por nível */
.orgnode {
    display: inline-flex; flex-direction: column; gap: 2px;
    min-width: 120px; padding: .55rem 1.1rem; border-radius: 10px;
    color: #fff; font-weight: 700; border: 2px dashed rgba(255, 255, 255, .35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.orgnode__nome { font-size: .95rem; line-height: 1.2; }
.orgnode__cargo { font-size: .72rem; font-weight: 500; opacity: .85; }
.orgnode--lvl0 { background: #66b04a; color: #0f240a; border-color: rgba(255, 255, 255, .55); }
.orgnode--lvl1 { background: #0e2b57; }
.orgnode--lvl2 { background: #3f4692; }
.orgnode--lvl3 { background: #4f83c9; }
/* ações de edição dentro da caixa (modo master) */
.orgnode__acoes { display: inline-flex; gap: .25rem; justify-content: center; margin-top: .45rem; }
.orgnode__acoes form { margin: 0; }
.orgbtn {
    border: 0; border-radius: 6px; cursor: pointer; padding: .22rem .45rem;
    font-size: .82rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, .18);
}
.orgbtn:hover { background: rgba(255, 255, 255, .34); }
.orgbtn--danger:hover { background: rgba(220, 80, 80, .85); }

/* Popover genérico (edição de setores/pessoas via <details>) */
.pop { position: relative; display: inline-block; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop__form {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
    display: flex; flex-direction: column; gap: .45rem; width: 270px; max-width: 82vw;
    padding: .7rem; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); text-align: left;
}
.pop__form input, .pop__form textarea {
    width: 100%; padding: .45rem .6rem; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm); font: inherit;
}
.pop__form textarea { min-height: 64px; resize: vertical; }
@media (max-width: 576px) { .pop__form { position: static; width: 100%; max-width: 100%; box-shadow: none; } }

/* Quem Procurar — busca + cards */
.qp-search { margin-bottom: var(--sp-3); }
.qp-search input {
    width: 100%; padding: .8rem 1rem; font: inherit;
    border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-superficie);
}
.qp-search input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }
.setores-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .setores-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .setores-grid { grid-template-columns: repeat(3, 1fr); } }
.setor-card { display: flex; flex-direction: column; gap: .6rem; }
.setor-card__head { display: flex; align-items: center; gap: .55rem; }
.setor-card__ic { font-size: 1.5rem; line-height: 1; }
.setor-card__nome { margin: 0; font-size: 1.1rem; }
.setor-card__desc { margin: 0; color: var(--cor-texto-suave); }
.setor-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.qp-tag { font-size: .74rem; padding: .12rem .55rem; border-radius: 999px; background: var(--cor-bg); color: var(--cor-texto-suave); }
.pessoa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pessoa { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .65rem; background: var(--cor-bg); border-radius: var(--raio-sm); }
.pessoa__nome { font-weight: 700; }
.pessoa__funcao { font-size: .84rem; color: var(--cor-texto-suave); }
.pessoa__contatos { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .2rem; font-size: .84rem; }
.qp-empty { text-align: center; color: var(--cor-texto-suave); padding: var(--sp-3); }

/* Quem Procurar — edição (master) */
.setor-edit { margin-bottom: var(--sp-3); }
.setor-edit__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.setor-edit__head h2 { margin: 0; font-size: 1.1rem; }
.pessoa-edit-list { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: .4rem; }
.pessoa-edit-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .4rem .6rem; background: var(--cor-bg); border-radius: var(--raio-sm); }

/* Grupos (edição master) */
.grupo-edit { margin-bottom: var(--sp-3); }
.grupo-membros-form { margin-top: var(--sp-2); }
.grupo-membros-form select { width: 100%; }

/* Tags / badges */
.tag {
    display: inline-block; padding: .15rem .6rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; background: var(--cor-bg); color: var(--cor-texto-suave);
}
.tag--ativo { background: var(--cor-ok-bg); color: var(--cor-ok); }
.tag--bloqueado { background: var(--cor-alerta-bg); color: var(--cor-alerta); }
.tag--inativo { background: var(--cor-bg); color: var(--cor-texto-suave); }

/* Layout dividido (form + lista) */
.grid--split { grid-template-columns: 1fr; align-items: start; }
.form-hint { display: block; margin-top: var(--sp-1); color: var(--cor-texto-suave); font-size: .85rem; }
@media (min-width: 768px) {
    .grid--split { grid-template-columns: 1fr 1.4fr; }
}

/* ---- Conteúdo (form + feed) ---- */
.page-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* Form */
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.form-field select, .form-field textarea {
    width: 100%; padding: .6rem .8rem; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm); font: inherit; background: var(--cor-superficie);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field select[multiple] { padding: 0; }
.form-field select[multiple] option { padding: .4rem .6rem; }
.fieldset { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.fieldset legend { font-weight: 700; padding: 0 var(--sp-2); }
.radio, .check { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-weight: 500; }
.check { margin: var(--sp-2) 0 var(--sp-4); }
.radio input, .check input { width: 18px; height: 18px; }

/* Feed */
.feed { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.feed-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.feed-card__tipo { font-size: .85rem; font-weight: 700; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.feed-card__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.feed-card__date { color: var(--cor-primaria); font-weight: 600; margin: 0 0 var(--sp-2); }
.feed-card__body { color: var(--cor-texto); margin-bottom: var(--sp-3); }
.feed-card__foot { margin: 0; }
.feed-card--novo { border-left: 4px solid var(--cor-acento); }
.badge-novo { background: var(--cor-acento); color: #fff; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; text-transform: uppercase; }
.empty-state { text-align: center; color: var(--cor-texto-suave); }

@media (min-width: 768px) {
    .form-row { grid-template-columns: 1fr 1fr; }
    .feed { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Breakpoints ---- */
@media (min-width: 576px) {
    .grid--features { grid-template-columns: repeat(2, 1fr); }
    .grid--tutorial { grid-template-columns: repeat(2, 1fr); }
    .qa-grid, .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .grid--steps { grid-template-columns: repeat(3, 1fr); }
    .stats { grid-template-columns: repeat(4, 1fr); }
    /* ~~`.res-grid--lado` ia a 3 colunas já em 768px.~~ Removido: entre 768 e
       992px três colunas ficam estreitas demais, o texto quebra em número
       diferente de linhas em cada grupo e as alturas se descolam (30px de
       diferença em 820px). Nessa faixa ficam 2 colunas, herdadas de 576px, e
       as 3 colunas entram junto com todo o resto em 992px. */
}
@media (min-width: 992px) {
    .grid--features { grid-template-columns: repeat(3, 1fr); }
    .grid--tutorial { grid-template-columns: repeat(3, 1fr); }
}
/* ~~O nº de destaques variava o arranjo: 5 numa linha, 6 em duas de 3, e a
   partir de 1400px os 6 numa linha só.~~ Agora são SEMPRE 3 por linha, a
   pedido — e é o arranjo certo: com 6 numa linha cada card ficava com ~190px,
   estreito demais para o texto de três linhas que eles carregam.

   `1fr` sem quantidade no seletor porque o número de destaques não importa
   mais: 5 fecham em 3+2, 6 em 3+3, e um sétimo entraria sem CSS novo. */
/* ~~`--topo` ia a 4 colunas e `--lado` parava em 3~~ — os cards de "Empresa"
   saíam com 265px e os de "RH" com 359px na mesma tela, o que lia como defeito.
   Agora TODO grid de card da home usa as mesmas 3 colunas: um card é do mesmo
   tamanho em qualquer seção. */
@media (min-width: 992px) {
    .qa-grid, .res-grid, .res-grid--topo, .res-grid--lado {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- Documentos ---- */
.logout-form { margin: 0; }
.doc-upload { margin-bottom: var(--sp-4); }
.doc-actions { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.doc-actions .inline-form { display: inline-flex; gap: var(--sp-2); margin: 0; }
.badge {
    display: inline-block; padding: .15rem .6rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; text-transform: capitalize;
    background: var(--cor-bg); color: var(--cor-texto-suave);
}
.badge--pendente  { background: #fff4e0; color: #9a6a00; }
.badge--aprovado  { background: var(--cor-ok-bg); color: var(--cor-ok); }
.badge--recusado  { background: var(--cor-alerta-bg); color: var(--cor-alerta); }
.badge--arquivado { background: var(--cor-bg); color: var(--cor-texto-suave); }

/* ---- Notificações / feriados / anexos ---- */
.nav-badge {
    display: inline-block; min-width: 18px; padding: 0 .35rem;
    background: var(--cor-alerta); color: #fff; border-radius: 999px;
    font-size: .72rem; font-weight: 700; text-align: center; line-height: 18px;
}
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--cor-borda); }
.notif-item:last-child { border-bottom: 0; }
.notif-item--novo { border-left: 4px solid var(--cor-acento); padding-left: var(--sp-3); }
.feriados { margin-bottom: var(--sp-3); }
.feriados-list { list-style: none; margin: 0; padding: 0; }
.feriados-list li { padding: var(--sp-1) 0; }
.feed-card__anexos { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.feed-card__anexos li { padding: .1rem 0; }
.anexo-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.anexo-list li { display: flex; align-items: center; gap: var(--sp-2); padding: .2rem 0; }
.anexo-list .inline-form { margin: 0; }

/* ---- Logo / marca ---- */
.brand__img { height: 40px; width: auto; display: block; }
@media (min-width: 768px) { .brand__img { height: 46px; } }
.hero__logo {
    display: block; width: min(440px, 82%); height: auto;
    margin: 0 auto var(--sp-4);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .30));
}

/* --- Envio do vídeo da aula (painel) ------------------------------------- */
.acad-upload { margin-top: var(--sp-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: var(--sp-2) var(--sp-3); background: var(--cor-superficie); }
.acad-upload > summary { cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); font-size: .88rem; font-weight: 600; }
.acad-upload input[type="file"] { max-width: 100%; margin: var(--sp-2) 0; font-size: .85rem; }

/* ---- botão "Escolher arquivo" ----
   O botão nativo do `<input type=file>` é desenhado pelo sistema: sai cinza
   quadrado no Windows, arredondado no Mac, e com texto em inglês se o
   navegador estiver em inglês. `::file-selector-button` é a única forma de
   estilizá-lo sem esconder o input e falsificar um botão com JS — que quebraria
   o teclado e o leitor de tela.
   O campo em si vira uma caixa acolchoada, para o nome do arquivo escolhido não
   ficar solto ao lado do botão. */
input[type="file"] {
    max-width: 100%;
    padding: .35rem .6rem .35rem .35rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    background: var(--cor-superficie); color: var(--cor-texto-suave);
    font: inherit; font-size: .9rem; cursor: pointer;
}
input[type="file"]:hover { border-color: var(--cor-primaria-clara); }
input[type="file"]:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
input[type="file"]::file-selector-button {
    margin-right: .7rem; padding: .5rem 1.1rem;
    border: 0; border-radius: var(--raio-sm);
    background: var(--cor-primaria); color: #fff;
    font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
    transition: background .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--cor-primaria-escura); }
/* Dentro de card claro sobre o palco azul o campo já contrasta; num fundo
   escuro direto, ele precisa da borda clara para não sumir. */
.palco-azul .acad-palco > input[type="file"],
.palco-azul .v2 > input[type="file"] { border-color: rgba(255, 255, 255, .35); }
/* Barra do envio. A largura vem de --pct, escrita pelo academia-video-upload.js
   via CSSOM — nunca por atributo style no HTML, que o CSP bloqueia. */
.acad-upload__barra { --pct: 0%; display: block; height: 6px; margin: var(--sp-2) 0; border-radius: 999px; background: var(--cor-bg); overflow: hidden; }
.acad-upload__barra::before { content: ""; display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--cor-primaria-clara); transition: width .2s linear; }
.acad-upload__status { margin: 0; font-size: .82rem; color: var(--cor-texto-suave); }
.acad-upload__status--erro { color: var(--cor-alerta); }
.acad-upload__status--ok { color: var(--cor-ok); font-weight: 600; }

/* --- Certificado ---------------------------------------------------------- */
/* Página feita para virar PDF pelo "Imprimir → Salvar como PDF" do navegador. */
/* A página do certificado também é azul, como o resto da Academia. O documento
   em si continua branco — ele é papel, e o azul é a mesa em que ele está.
   Na impressão o `@media print` devolve o branco: azul de fundo viraria uma
   moldura escura desperdiçando tinta em volta do certificado. */
.cert-body {
    background:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%20viewBox='0%200%20320%20320'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='.07'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20transform='translate(24%2022)'%3E%3Cpath%20d='M4%206h44v34a6%206%200%200%201-6%206H10a6%206%200%200%201-6-6V6Z'/%3E%3Cpath%20d='M4%2013h44M4%2020h44M4%2027h44'/%3E%3Ccircle%20cx='26'%20cy='38'%20r='4'/%3E%3Cpath%20d='M26%2046v16m-7%2012%207-12%207%2012'/%3E%3Cpath%20d='M17%2074h18'/%3E%3C/g%3E%3Cg%20transform='translate(180%2020)'%3E%3Cpath%20d='M12%204%2026%204%2033%2012%2026%2020%2012%2020%205%2012Z'/%3E%3Cpath%20d='M15%2020h8v10h-8z'/%3E%3Cpath%20d='M13%2032h12M13%2038h12M13%2044h12M13%2050h12'/%3E%3Cpath%20d='M19%2056v6'/%3E%3C/g%3E%3Cg%20transform='translate(22%20150)'%3E%3Cpath%20d='M6%204h68a6%206%200%200%201%206%206v40a6%206%200%200%201-6%206H6a6%206%200%200%201-6-6V10a6%206%200%200%201%206-6Z'/%3E%3Ccircle%20cx='20'%20cy='30'%20r='9'/%3E%3Ccircle%20cx='44'%20cy='30'%20r='9'/%3E%3Ccircle%20cx='68'%20cy='30'%20r='5'/%3E%3Ccircle%20cx='8'%20cy='11'%20r='2.4'/%3E%3Ccircle%20cx='8'%20cy='49'%20r='2.4'/%3E%3Ccircle%20cx='76'%20cy='11'%20r='2.4'/%3E%3Ccircle%20cx='76'%20cy='49'%20r='2.4'/%3E%3C/g%3E%3Cg%20transform='translate(190%20150)'%3E%3Ccircle%20cx='30'%20cy='30'%20r='12'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='5'/%3E%3Cpath%20d='M30%204v8M30%2048v8M4%2030h8M48%2030h8M11%2011l6%206M43%2043l6%206M49%2011l-6%206M17%2043l-6%206'/%3E%3C/g%3E%3Cg%20transform='translate(112%20232)'%3E%3Cpath%20d='M10%202h12v16H10z'/%3E%3Cpath%20d='M8%2018h16l-3%2012h-10z'/%3E%3Cpath%20d='M11%2030h10v14h-10z'/%3E%3Cpath%20d='M13%2044v8h6l-2%208'/%3E%3C/g%3E%3Cg%20transform='translate(232%20240)'%3E%3Cpath%20d='M8%208a8%208%200%201%200%2011%2011l26%2026-6%206-26-26A8%208%200%200%200%208%208Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat,
        linear-gradient(160deg, var(--cor-primaria), #0f2160);
    background-attachment: fixed;
    margin: 0;
}
/* Os controles acima do documento ficam sobre o azul. */
.cert-body .cert-acoes .muted { color: rgba(255, 255, 255, .8); }
.cert-body .cert-acoes .btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.cert-body .cert-acoes .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cert-acoes { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3); max-width: 1120px; margin: 0 auto; }

/* Faixa de parabéns, acima do certificado e alinhada com ele. Fica FORA da
   moldura: o certificado é um documento, e mascote dentro dele tira a seriedade
   de quem for mostrar o PDF. Some na impressão, junto com os botões. */
.cert-parabens {
    display: flex; align-items: center; gap: var(--sp-4);
    max-width: 1120px; margin: 0 auto var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: linear-gradient(90deg, #eef4fd 0%, var(--cor-superficie) 70%);
    border: 1px solid var(--cor-primaria-clara); border-radius: var(--raio);
}
/* 683×1024, retrato. Só a largura é amarrada — travar as duas achataria o
   Serrafinho. `align-self: end` faz ele apoiar na base da faixa. */
/* ~~104px~~ → 150px, a pedido: ele é a comemoração da tela, e pequeno demais
   virava um adorno. Só a largura é amarrada — travar as duas achataria o
   desenho. */
.cert-parabens__mascote { width: 150px; height: auto; flex: none; align-self: end; margin-bottom: calc(var(--sp-3) * -1); }
.cert-parabens__texto { min-width: 0; }
.cert-parabens__titulo { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 700; color: var(--cor-primaria); }
.cert-parabens__sub { margin: 0; color: var(--cor-texto-suave); font-size: .95rem; line-height: 1.55; }
@media (max-width: 560px) {
    /* Em tela estreita ele roubaria a largura da frase — e a frase é o recado. */
    .cert-parabens__mascote { display: none; }
}

.cert { padding: 0 var(--sp-3) var(--sp-5); }
/* A ARTE do modelo enviado pelo operador é o fundo: faixas azuis, padrão de
   ícones, o título "CERTIFICADO" e a marca da Academia já vêm desenhados nela.
   Foi extraída do PDF do modelo, desfazendo o preditor PNG da compressão.
   `aspect-ratio` amarra a proporção original (1123×794, A4 paisagem), então o
   texto cai sempre no mesmo lugar da arte, em qualquer largura de tela. */
.cert__moldura {
    position: relative;
    max-width: 1120px; margin: 0 auto; aspect-ratio: 1123 / 794;
    background: var(--cor-superficie) url("../img/certificado-fundo.png") center/100% 100% no-repeat;
    border-radius: var(--raio); box-shadow: var(--sombra);
    /* A área branca útil da arte, medida nela: o texto não invade as faixas, e a
       margem de baixo é generosa porque a marca da Academia está desenhada ali —
       com 6% o rodapé caía em cima dela. */
    padding: 16% 13% 21%;
    text-align: center; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0;   /* o respiro agora vem das margens de cada bloco, medidas uma a uma */
    overflow: hidden;
}
/* O título existe para leitor de tela e para a aba do navegador; na tela ele
   sairia em cima do "CERTIFICADO" que já está desenhado no fundo. */
.cert__titulo-oculto {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Modelo enviado pelo operador: faixa azul no canto esquerdo, título grande em
   caixa alta e a marca no rodapé. A faixa é `::before` em vez de imagem —
   assim ela acompanha a altura do documento e sai no PDF sem depender de
   arquivo, que na impressão o navegador pode descartar. */
.cert__topo { display: grid; gap: var(--sp-1); justify-items: center; }
.cert__logo { height: 40px; width: auto; }
/* A marca fecha o documento, como no modelo. Desenhada em vez de imagem: o
   único arquivo de marca do projeto é a versão branca, invisível aqui. */
.cert__marca { display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2); margin: var(--sp-3) auto 0; }
.cert__marca__ic { display: grid; place-items: center; flex: none;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--cor-primaria); color: #fff; }
.cert__marca__ic svg { width: 1.4rem; height: 1.4rem; }
.cert__marca__txt { display: grid; text-align: left; line-height: 1.1; }
.cert__marca__txt strong { font-size: 1.15rem; color: var(--cor-primaria); letter-spacing: -.01em; }
.cert__marca__txt em { font-style: normal; font-size: .7rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--cor-texto-suave); }
.cert__chapeu { margin: 0; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cor-texto-suave); }
/* Caixa alta e bem maior, como no modelo: é a primeira coisa que se lê. */
.cert__titulo { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); color: var(--cor-primaria);
    letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }
.cert__nome { margin: 0; font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 700; color: var(--cor-texto); border-bottom: 2px solid var(--cor-borda); padding-bottom: var(--sp-3);
    /* Rede de segurança: um nome de 60 letras SEM espaço não tem onde quebrar e
       transbordava a moldura em vez de passar para a linha de baixo. */
    overflow-wrap: anywhere; }

/* Faixas de tamanho do nome. Medido no layout: 52 caracteres cabem numa linha
   na fonte cheia a 1120px. Passando disso, encolher é melhor do que quebrar em
   duas linhas — o nome é o eixo do documento, e duas linhas descentralizam
   tudo o que vem abaixo. A view escolhe a faixa pelo tamanho do nome. */
.cert__nome--m { font-size: clamp(1.25rem, 3.2vw, 1.85rem); }
.cert__nome--p { font-size: clamp(1.05rem, 2.7vw, 1.55rem); }
/* ~~Caixa de conferência do nome.~~ Removida em 09/09/2026: o nome vem do
   cadastro do usuário, não de um campo digitado. */

/* Curso a que o certificado se refere, logo abaixo do título. */
.cert__curso { margin: calc(var(--sp-2) * -1) 0 0; font-size: clamp(.95rem, 2vw, 1.15rem);
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cor-texto-suave); }

/* ---- botões do certificado ----
   ~~Pílula própria (`.cert-btn`), maior que o padrão.~~ Ficou grande demais.
   Voltou para o botão padrão do site no tamanho `--sm` (38px de altura), com
   dois ajustes só: canto em pílula, para o acolchoado combinar com o resto da
   Academia, e ícone pequeno — o texto é que manda, o ícone só acompanha. */
.cert-acoes .btn { border-radius: 999px; }
.cert-acoes .btn svg { width: 12px; height: 12px; flex: none; }
/* Espelha o "Próximo" da trilha: o de voltar desliza para a esquerda. */
.cert-acoes .btn--ghost:hover { transform: translateX(-2px); }
.cert__texto { margin: 0 auto; max-width: 60ch; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.7; color: var(--cor-texto); }
.cert__nota { margin: 0; color: var(--cor-texto-suave); }
.cert__assinatura { display: grid; gap: var(--sp-1); justify-items: center; margin-top: var(--sp-4); }
.cert__linha { display: block; width: min(320px, 70%); height: 1px; background: var(--cor-texto); margin-bottom: var(--sp-2); }
.cert__assinatura small { color: var(--cor-texto-suave); }
.cert__rodape { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; font-size: .78rem; color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); padding-top: var(--sp-3); }

/* ---- ajustes para o texto caber DENTRO da arte ----
   A arte tem uma área branca útil definida; o texto agora vive nela, então as
   medidas passam a ser relativas à largura do documento (%/vw) em vez de rem
   fixo. Assim o conjunto encolhe junto com a arte em tela estreita, em vez de
   transbordar por cima das faixas azuis. */
/* ---- respiro do texto do certificado ----
   O bloco estava apertado: curso, nome, frase, nota e assinatura quase se
   encostavam, e num documento isso pesa — certificado é para ser lido devagar.
   O espaço vem em `%` da altura do documento, não em `rem`: assim ele encolhe
   junto com a arte em tela menor, em vez de empurrar o texto para fora dela. */
.cert__moldura .cert__curso { margin: 0 0 2.6%; font-size: clamp(.8rem, 1.5vw, 1.05rem); }
.cert__moldura .cert__nome {
    margin: 0 0 3.6%; padding-bottom: 2.4%; border-bottom: 2px solid rgba(23, 52, 140, .18);
    font-size: clamp(1.1rem, 3vw, 2rem);
}
.cert__moldura .cert__texto {
    margin: 0 auto 3.4%; max-width: 62ch;
    font-size: clamp(.78rem, 1.55vw, 1.08rem);
    line-height: 2;             /* entrelinha alta: é o que dá ar ao parágrafo */
}
.cert__moldura .cert__nota { margin: 0 0 2%; font-size: clamp(.72rem, 1.3vw, .92rem); }
.cert__moldura .cert__assinatura { margin-top: 4.5%; gap: 0; }
.cert__moldura .cert__assinatura strong { font-size: clamp(.85rem, 1.6vw, 1.05rem); }
.cert__moldura .cert__assinatura small { font-size: clamp(.68rem, 1.2vw, .85rem); }
.cert__moldura .cert__linha { width: min(300px, 55%); margin-bottom: .6%; }
/* O rodapé encosta na base da área branca, acima da marca da arte. O
   `padding-top` é um piso: `margin-top: auto` sozinho dava o que sobrasse, e
   com o texto mais espaçado não sobrava nada — o rodapé colava na assinatura. */
.cert__moldura .cert__rodape {
    border-top: 0; margin-top: auto; padding-top: 3%;
    font-size: clamp(.6rem, 1.05vw, .76rem); gap: 1.2rem;
}
/* ---- verso ----
   Segunda folha com a MESMA arte, levando o conteúdo programático. Repete nome
   e código de propósito: folha solta precisa se identificar sozinha. */
/* A arte do verso é a mesma, sem o título "CERTIFICADO" — ele pertence à
   frente, e repetido atrás faria a folha de trás parecer um segundo
   certificado. A marca da Academia continua desenhada no rodapé dela. */
.cert__verso { margin-top: var(--sp-4); background-image: url("../img/certificado-verso.png"); }

/* Em tela estreita a arte fica ilegível se mantivermos a proporção paisagem —
   solta a proporção e volta ao documento em bloco, sem fundo. */
@media (max-width: 700px) {
    .cert__moldura {
        aspect-ratio: auto; background-image: none;
        border: 1px solid var(--cor-borda); border-left: 5px solid var(--cor-primaria);
        padding: var(--sp-4); gap: var(--sp-3);
    }
    .cert__titulo-oculto {
        position: static; width: auto; height: auto; margin: 0 0 var(--sp-2);
        clip-path: none; white-space: normal; font-size: 1.4rem; color: var(--cor-primaria);
    }
    .cert__moldura .cert__rodape { border-top: 1px solid var(--cor-borda); padding-top: var(--sp-3); }
}
.cert__codigo { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .08em; }

@media print {
    /* Paisagem e sem margem do navegador: a moldura é quem define a borda.
       Sem isto o cabeçalho/rodapé do navegador (URL, data) entra no PDF. */
    @page { size: A4 landscape; margin: 8mm; }

    /* SEM ISTO O CERTIFICADO SAI BRANCO: por padrão o navegador descarta
       cores de fundo e bordas ao imprimir, para economizar tinta. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* O Serrafinho comemora na TELA. No PDF ele sai: o documento é o
       certificado, e mascote impresso ao lado dele estraga o que a pessoa vai
       mostrar para alguém. */
    .cert-acoes, .cert-flash, .cert-parabens { display: none !important; }
    .cert-body { background: var(--cor-superficie); }
    .cert { padding: 0; }
    /* UMA FOLHA POR PÁGINA. A arte tem proporção A4 paisagem, então a moldura
       ocupa a página inteira: `height: 100%` em vez de `aspect-ratio`, que com a
       altura da página já fixa poderia sobrar ou faltar meia linha e empurrar o
       documento para uma segunda folha. */
    .cert__moldura {
        max-width: none; width: 100%; height: 100%;
        margin: 0; box-shadow: none; border-radius: 0; aspect-ratio: auto;
        page-break-inside: avoid; break-inside: avoid;
    }
    /* O verso começa na folha seguinte, nunca colado na frente. */
    .cert__verso { page-break-before: always; break-before: page; margin-top: 0; }
    /* A última folha não puxa uma página em branco atrás dela. */
    .cert__moldura:last-child { page-break-after: auto; break-after: auto; }
    a[href]::after { content: none !important; }  /* não imprimir a URL ao lado dos links */
}

/* ========================================================================
   ACADEMIA — tela do aluno (layout aprovado em 09/09/2026)
   ======================================================================
   Protótipo de referência: docs/layout/curso-aprovado.html
   Player em foco + currículo lateral, no lugar da lista vertical longa.
   ===================================================================== */

/* =========================================================================
   LAYOUT DE CURSO — v2 "leve"
   =========================================================================
   Mesma identidade Serraf (todas as cores saem de tokens.css), tratamento
   diferente: cards flutuantes com cantos generosos sobre o fundo claro, em
   vez de blocos coladas de ponta a ponta.

   O que muda em relação à v1:
   - vídeo com canto arredondado e sombra suave, com respiro em volta
   - bordas mais claras e sombras mais baixas: menos peso visual
   - conjunto de ícones em SVG, um só traço, no lugar de emoji
   - faixa de indicadores do aluno (progresso, pontos, tempo, o que falta)
   ========================================================================= */

.v2 {
    /* Tons derivados dos tokens — não são cores novas, são diluições. */
    --v2-borda: #eaeef4;
    --v2-tinta: rgba(23, 52, 140, .06);
    --v2-sombra: 0 1px 2px rgba(20, 40, 70, .04), 0 8px 24px rgba(20, 40, 70, .06);
    --v2-raio: 18px;
    --v2-raio-sm: 12px;

    max-width: 1700px;
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
    display: grid;
    gap: var(--sp-4);

    /* Acima do mascote, que fica fixo no fundo da janela. Sem isto ele
       apareceria por cima do player e dos controles do vídeo. */
    position: relative;
    z-index: 1;

    /* Palco azul, a pedido — a tela do aluno inteira. Os cards seguem brancos:
       eles são o conteúdo, o azul é o palco. O `border-radius` e a margem
       negativa fazem o azul encostar nas bordas do container do layout. */
    background: linear-gradient(160deg, var(--cor-primaria), #0f2160);
    border-radius: var(--raio);
}
/* ---- caracteres adaptados ao azul ----
   Tudo que vive FORA de um card precisa trocar de cor: no escuro, o
   cinza-suave padrão do site fica ilegível. */
.v2 .v2__voltar { color: rgba(255, 255, 255, .82); }
.v2 .v2__voltar:hover { color: #fff; }
/* Os chips do topo eram azul sobre azul-claro; aqui viram claros sobre o azul. */
.v2 .v2__chip { background: rgba(255, 255, 255, .14); color: #fff; }
/* Rótulo "Conteúdo do curso" e afins. */
.v2 .v2__rotulo { color: rgba(255, 255, 255, .72); }
/* Cards descolam do fundo com sombra mais funda. */
.v2 .v2__card, .v2 .v2__mod { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
/* O currículo é uma pilha de <details> direto no azul: cada um vira card claro
   para o conteúdo continuar legível. */
.v2 .v2__mod { background: var(--cor-superficie); border-radius: var(--v2-raio-sm); }
/* ---- responsivo da tela do aluno ----
   Três degraus, e o critério é sempre o mesmo: o player manda. Ele cresce até
   onde a tela permite, e a coluna lateral só existe quando sobra espaço para
   ela sem espremer o vídeo.

   Abaixo de 1040px a lateral desce para baixo do player — em coluna estreita,
   "Seu progresso" e o currículo roubariam a largura de quem está assistindo. */
@media (min-width: 1040px) {
    .v2 { grid-template-columns: minmax(0, 1fr) 300px; align-items: start;
          column-gap: var(--sp-5); }
    .v2__topo { grid-column: 1 / -1; }
}
/* Tela grande: a lateral vai para a BORDA direita e o vão aumenta, para ela
   deixar de encostar no player. Era o incômodo — não é o tamanho da lateral,
   é a distância. */
@media (min-width: 1360px) {
    .v2 { grid-template-columns: minmax(0, 1fr) 330px; column-gap: var(--sp-6); }
}
@media (min-width: 1600px) {
    .v2 { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 3.5rem; }
}

.v2__card { background: var(--cor-superficie); border: 1px solid var(--v2-borda);
    border-radius: var(--v2-raio); box-shadow: var(--v2-sombra); }

/* ---- cabeçalho do curso ---- */
.v2__topo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.v2__voltar { display: inline-flex; align-items: center; gap: .4rem; color: var(--cor-texto-suave); font-size: .88rem; }
.v2__voltar:hover { color: var(--cor-primaria); text-decoration: none; }
/* Nome do curso acolchoado — mesmo tratamento do título da aula, num degrau
   acima: selo com ícone. É o título da página, então pesa mais que o da aula,
   sem competir com ela (a aula usa fundo claro).
   ~~Fundo em azul da marca~~ → **verde**, para casar com o cabeçalho de "Meus
   cursos". As duas telas da Academia agora abrem com o mesmo selo verde e o
   mesmo ícone: o aluno atravessa da lista para o curso sem a página trocar de
   identidade no meio do caminho. O azul segue mandando no resto da tela — a
   moldura do player e a navegação — então o verde marca só "onde eu estou". */
.v2__nome { display: inline-flex; align-items: center; gap: .65rem; margin: 0;
    padding: .55rem 1.15rem .55rem .7rem; border-radius: 16px;
    background: linear-gradient(135deg, #1b8f52, var(--c-verde));
    color: #fff; font-size: 1.4rem; letter-spacing: -.015em; line-height: 1.25;
    box-shadow: 0 4px 14px rgba(34, 164, 93, .28); }
.v2__nome__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px;
    border-radius: 10px; background: rgba(255, 255, 255, .18); }
.v2__nome__ic svg { width: 19px; height: 19px; }
.v2__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
.v2__chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem;
    border-radius: 999px; background: var(--v2-tinta); color: var(--cor-primaria);
    font-size: .78rem; font-weight: 600; }
.v2__chip svg { width: 15px; height: 15px; }

/* ---- Serrafinho ao lado do vídeo ----
   Ele acompanha o estudo, então fica colado à base do player, como se
   estivesse sentado à mesa ao lado. Sai de cena na prova.

   Some abaixo de 1200px: em tela estreita ele roubaria largura do vídeo, que
   é o que a pessoa veio ver. É decoração — a primeira coisa a ceder espaço. */
.v2__palcolinha { position: relative; display: flex; align-items: flex-end; gap: var(--sp-3); }

/* ---- Serrafinho ----
   Fica FIXO no canto inferior esquerdo da janela, ATRÁS do conteúdo — espia de
   trás do card. Foi a única forma de o player crescer de verdade: com ele na
   linha, os três (mascote + player + currículo) disputavam a mesma largura, e
   numa tela de 1920 o mascote inteiro fora do conteúdo travava o container em
   1520px. Fora da linha, o player passou de 1164 para 1344px.

   Atrás do conteúdo e com pointer-events desligado, ele nunca cobre os
   controles do vídeo nem rouba clique — problema que apareceria se ele
   simplesmente sobrepusesse o player. */
/* ~~O mascote ficava FIXO no canto inferior esquerdo da janela.~~ Saiu de lá: em
   monitor pequeno ele encostava no player, que era a reclamação antiga, e vivia
   solto no meio da tela sem pertencer a nada. Agora mora no card "Seu
   progresso", com lugar próprio. As regras abaixo ficam neutralizadas — o
   elemento não é mais renderizado. */
.v2__mascote { display: none; margin: 0; }
.v2__mascote img { width: 100%; height: auto; display: block;
    filter: drop-shadow(0 12px 18px rgba(20, 40, 70, .18)); }

/* ---- Serrafinho dentro do "Seu progresso" ----
   Apoiado na base do card, ao lado de uma frase que muda com o progresso. A
   margem negativa faz ele "sentar" na borda, em vez de flutuar com o padding
   por baixo dos pés. */
.v2__prog__mascote {
    display: flex; align-items: flex-end; gap: var(--sp-2);
    margin: var(--sp-3) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
    padding: 0 var(--sp-3);
    border-top: 1px solid var(--v2-borda);
}
.v2__prog__mascote img {
    width: 88px; height: auto; flex: none; display: block;
    margin-bottom: calc(var(--sp-1) * -1);
    filter: drop-shadow(0 8px 14px rgba(20, 40, 70, .16));
}
.v2__prog__fala {
    margin: 0 0 var(--sp-3); font-size: .84rem; line-height: 1.4;
    color: var(--cor-texto-suave);
}
/* A lateral só existe a partir de 1040px, e ali ela tem 300–360px: o mascote
   acompanha esses degraus em vez de ficar do mesmo tamanho sempre. */
@media (min-width: 1360px) { .v2__prog__mascote img { width: 100px; } }
@media (min-width: 1600px) { .v2__prog__mascote img { width: 116px; } }
/* Abaixo de 1040px o card vai para baixo do player e ocupa a linha inteira:
   ali o mascote cresce um pouco, porque tem largura sobrando. */
@media (max-width: 1039px) { .v2__prog__mascote img { width: 104px; } }
/* Celular estreito: a frase precisa da largura, o mascote encolhe. */
@media (max-width: 420px) {
    .v2__prog__mascote img { width: 76px; }
    .v2__prog__fala { font-size: .8rem; }
}

@media (min-width: 1200px) {
    .v2__mascote {
        display: block;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 84px;

        /* z-index NEGATIVO, não 0.
         *
         * O comentário acima sempre prometeu "atrás do conteúdo", mas com
         * `z-index: 0` isso era falso: elemento posicionado pinta na última
         * fase, ACIMA do fundo dos cards, que não são posicionados. Em telas
         * de 13" a 15" — 1280, 1366 e 1440px, o parque da empresa — ele
         * cobria o player de verdade. Medido: 106px de sobreposição a
         * 1264px, 63px a 1350px, 26px a 1424px.
         *
         * Com valor negativo ele pinta antes do fundo dos cards, então some
         * atrás deles em vez de tapá-los. Continua visível na margem, que é
         * o efeito pretendido: espiar de trás do conteúdo. */
        z-index: -1;
        pointer-events: none;
    }
}

/* Degraus calibrados pela MARGEM medida, não pela polegada do monitor.
 *
 * O que manda é a folga entre a borda da janela e o card: em cada faixa o
 * mascote tem de caber nela inteiro. Medido com a página real, rolada até as
 * perguntas, em oito resoluções — a largura escolhida é sempre menor que a
 * folga daquela faixa.
 *
 * Os limites são em VIEWPORT, que fica ~16px abaixo da resolução do monitor
 * por causa da barra de rolagem: por isso 1880 e não 1920, senão o degrau de
 * 24" nunca dispararia na prática.
 *
 *   viewport 1264 (13" 1280×800) -> folga  94px -> mascote  84px
 *   viewport 1350 (14" 1366×768) -> folga 145px -> mascote 132px
 *   viewport 1904 (24" 1920)     -> folga 300px+ -> mascote 200px            */
@media (min-width: 1340px) { .v2__mascote { width: 132px; } }
@media (min-width: 1480px) { .v2__mascote { width: 152px; } }
@media (min-width: 1600px) { .v2__mascote { width: 176px; } }
@media (min-width: 1880px) { .v2__mascote { width: 200px; } }
@media (min-width: 2160px) { .v2__mascote { width: 224px; } }

/* Tela baixa E estreita ao mesmo tempo: aí não sobra margem nem altura, e ele
   ficaria quase todo escondido atrás do card — sem graça e sem função. Some. */
@media (max-height: 700px) and (max-width: 1280px) {
    .v2__mascote { display: none; }
}

/* Tela larga: sai do fluxo e encosta na borda esquerda. O player deixa de
   dividir a linha e recupera a largura inteira da coluna — que é o ganho
   real aqui, já que o vídeo é o que a pessoa veio ver. */
/* O mascote não ocupa mais espaço na linha (é fixo na janela), então o palco
   usa a largura inteira da coluna. */
.v2__palcolinha { display: block; }

/* Entrada suave ao trocar de aula, sem chamar atenção demais. */
@media (prefers-reduced-motion: no-preference) {
    .v2__mascote img { animation: v2-mascote .45s ease-out both; }
    @keyframes v2-mascote { from { opacity: 0; transform: translateY(10px); } }
}

/* ---- palco do vídeo: cantos curvos e respiro ---- */
.v2__palco { overflow: hidden; flex: 1; min-width: 0; }
.v2__video { position: relative; aspect-ratio: 16 / 9; background: #0b1120;
    border-radius: var(--v2-raio) var(--v2-raio) 0 0; overflow: hidden; }
.v2__video video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* O player do YouTube: a IFrame API troca o <div data-youtube-id> por um
   <iframe> com o MESMO id/classe, entao a regra vale para os dois momentos —
   antes (div vazio, fundo escuro do .v2__video) e depois (iframe ocupando o
   palco todo, como o <video> faria). */
.v2__video .v2__yt, .v2__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Trilho de progresso do vídeo — arredondado nas pontas, com respiro lateral. */
.v2__trilho { position: relative; height: 6px; margin: var(--sp-3) var(--sp-4) 0;
    border-radius: 999px; background: var(--cor-bg); overflow: hidden; }
.v2__trilho::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--visto, 0%);
    border-radius: 999px; background: linear-gradient(90deg, var(--cor-primaria-clara), var(--c-verde)); }
.v2__trilho::after { content: ""; position: absolute; left: var(--visto, 0%); right: 0; top: 0; bottom: 0;
    background: repeating-linear-gradient(45deg, rgba(198,40,40,.18) 0 6px, transparent 6px 12px); }

.v2__sobvideo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    flex-wrap: wrap; padding: var(--sp-2) var(--sp-4) var(--sp-3); }
/* Bloco do percentual acolchoado, no mesmo idioma das pílulas de meta. */
.v2__pctxt { display: inline-flex; align-items: center; gap: .55rem;
    padding: .35rem .85rem .35rem .4rem; border-radius: 999px;
    background: var(--v2-tinta); font-size: .84rem; color: var(--cor-texto-suave); }
.v2__pctxt strong { color: var(--cor-primaria); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Selo do ícone: círculo azul da marca com o anel de progresso em branco. */
.v2__pctxt__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px;
    border-radius: 50%; background: var(--cor-primaria); color: #fff;
    box-shadow: 0 2px 5px rgba(23, 52, 140, .28); }
.v2__pctxt__ic svg { width: 17px; height: 17px; }
.v2__nav { display: flex; gap: var(--sp-2); }

/* ---- moldura do player ------------------------------------------------
   ~~Card azul em volta do vídeo.~~ ~~Linha preta.~~ Ficou uma linha no AZUL DA
   MARCA (`--cor-primaria`), o mesmo do card da aula selecionada e do botão
   "Próximo" — assim a moldura conversa com o resto da tela em vez de introduzir
   uma cor nova só dela. O card segue branco; o azul aparece na borda e na barra.

   A borda é o único elemento que separa o player do fundo, então tem peso
   próprio (2px) — 1px sumia contra o cinza claro da página. Contraste medido
   contra o fundo #f5f7fa: 10,4:1. */
.v2__palco { background: var(--cor-superficie); border: 2px solid var(--cor-primaria);
    padding: var(--sp-2); box-shadow: 0 8px 22px rgba(23, 52, 140, .18); }

/* O vídeo flutua dentro da moldura: curva nos QUATRO cantos, não só em cima
   como quando ele encostava na borda do card. */
.v2__palco .v2__video { border-radius: var(--v2-raio-sm); }

/* Trilho azul sobre o card branco: vazio em cinza claro, preenchido no azul
   da marca. Medido — preenchido #17348c contra o vazio #eef1f6: 9,8:1. */
.v2__palco .v2__trilho { margin: var(--sp-3) var(--sp-2) 0; background: #eef1f6; }
.v2__palco .v2__trilho::before {
    background: linear-gradient(90deg, var(--cor-primaria), var(--cor-primaria-clara)); }
.v2__palco .v2__trilho::after {
    background: repeating-linear-gradient(45deg, rgba(23, 52, 140, .10) 0 6px, transparent 6px 12px); }

.v2__palco .v2__sobvideo { padding: var(--sp-2) var(--sp-2) var(--sp-1); }

/* O balão de aviso e os botões de navegação declaram `display`, o que anulava o
   atributo `hidden`. Resolvido de uma vez no topo do arquivo, com a regra
   global `[hidden] { display: none !important }` — ver a nota lá. */

/* ---- navegação entre aulas ----
   Estes botões foram criados sem CSS e os SVGs herdavam o tamanho padrão do
   elemento — daí a seta e o cadeado gigantes. Agora são pílulas ACOLCHOADAS,
   no mesmo idioma dos chips do topo: preenchimento generoso, canto redondo e
   ícone pequeno, que só aponta a direção. */
.v2__navbtn { display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1.05rem; border-radius: 999px;
    border: 1px solid var(--v2-borda); background: var(--v2-tinta);
    color: var(--cor-primaria); font-size: .82rem; font-weight: 700; line-height: 1.2;
    white-space: nowrap; box-shadow: 0 1px 2px rgba(16, 21, 31, .06);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease; }
.v2__navbtn svg { width: 13px; height: 13px; flex: none; }
.v2__navbtn:hover { background: #e4ecfa; color: var(--cor-primaria-escura);
    text-decoration: none; box-shadow: 0 3px 8px rgba(23, 52, 140, .14); }

/* O "Próximo" liberado é o único sólido: é a ação que a pessoa procura. */
.v2__navbtn--forte { background: var(--cor-primaria); border-color: var(--cor-primaria);
    color: #fff; box-shadow: 0 3px 10px rgba(23, 52, 140, .26); }
.v2__navbtn--forte:hover { background: var(--cor-primaria-escura); color: #fff;
    transform: translateX(2px); box-shadow: 0 5px 14px rgba(23, 52, 140, .32); }

/* Travado: borda tracejada diz "ainda não" sem depender de cor, e o cadeado
   fica menor — ele é aviso, não protagonista. */
.v2__navbtn--travado { border-style: dashed; border-color: #c9d2e0;
    background: transparent; color: var(--cor-texto-suave); cursor: not-allowed;
    box-shadow: none; }
.v2__navbtn--travado svg { width: 11px; height: 11px; }

/* Ícone pequeno no meio de um texto corrido. */
.v2__ic-inline { width: 13px; height: 13px; vertical-align: -2px; flex: none; }

/* ---- aba de perguntas ----------------------------------------------------
   As perguntas usavam as classes `acad-*` do layout ANTIGO da Academia, então
   destoavam do resto da página: texto solto, sem card, sem os cantos e as
   pílulas do v2. Aqui elas ganham o mesmo idioma — card por pergunta, rótulo em
   pílula, alternativa clicável de ponta a ponta.

   Tudo escopado em [data-painel="perguntas"] de propósito: as mesmas classes
   servem a prova final, que tem tela própria e não deve mudar junto. */
[data-painel="perguntas"] { display: grid; gap: var(--sp-3); }

/* Cada pergunta é um card, igual aos cards de módulo do currículo. */
[data-painel="perguntas"] .acad-questao {
    margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border: 1px solid var(--v2-borda); border-left: 4px solid var(--cor-primaria);
    border-radius: var(--v2-raio-sm); background: var(--cor-superficie);
    box-shadow: var(--v2-sombra); }
/* Já respondida recua: some a barra azul, entra a verde. */
[data-painel="perguntas"] .acad-questao.is-feita { border-left-color: var(--c-verde);
    background: var(--cor-bg); }

/* Rótulo em pílula, no mesmo desenho dos chips do topo. */
[data-painel="perguntas"] .acad-questao__num {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .8rem .3rem .35rem; border-radius: 999px;
    background: var(--v2-tinta); color: var(--cor-primaria);
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
[data-painel="perguntas"] .acad-questao.is-feita .acad-questao__num {
    background: var(--cor-ok-bg); color: var(--cor-ok); }

/* Número da pergunta: disco, como o número do módulo no currículo. */
.v2__qnum { display: grid; place-items: center; flex: none; width: 22px; height: 22px;
    border-radius: 50%; background: var(--cor-primaria); color: #fff;
    font-size: .74rem; font-weight: 800; letter-spacing: 0; }
[data-painel="perguntas"] .acad-questao.is-feita .v2__qnum { background: var(--c-verde); }

[data-painel="perguntas"] .acad-questao__txt {
    margin: var(--sp-2) 0 var(--sp-3); font-size: 1.02rem; font-weight: 700;
    line-height: 1.45; color: var(--cor-texto); }

/* Alternativa: linha inteira clicável, não só o texto ao lado do radio. */
[data-painel="perguntas"] .acad-opcao {
    align-items: center; gap: .65rem; margin: 0 0 .45rem;
    padding: .6rem .9rem; border: 1px solid var(--v2-borda); border-radius: 999px;
    background: var(--cor-bg);
    transition: background .15s ease, border-color .15s ease; }
[data-painel="perguntas"] .acad-opcao:hover {
    background: var(--v2-tinta); border-color: var(--cor-primaria-clara); }
[data-painel="perguntas"] .acad-opcao:has(input:checked) {
    background: var(--v2-tinta); border-color: var(--cor-primaria); font-weight: 700; }
[data-painel="perguntas"] .acad-opcao:focus-within {
    outline: 2px solid var(--cor-primaria); outline-offset: 1px; }

[data-painel="perguntas"] .acad-explica {
    margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--v2-raio-sm); background: var(--v2-tinta);
    border-left: 3px solid var(--cor-primaria-clara); font-size: .9rem; }

/* Banner de "respondido", no desenho do bloco de conclusão do curso. */
.v2__qok { display: flex; align-items: center; gap: .7rem; margin: 0 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--v2-raio-sm);
    background: var(--cor-ok-bg); color: var(--cor-ok); font-size: .9rem; }
.v2__qok__ic { display: grid; place-items: center; flex: none; width: 26px; height: 26px;
    border-radius: 50%; background: var(--c-verde); color: #fff; }
.v2__qok__ic svg { width: 14px; height: 14px; }

/* Aba que acabou de ser destravada: um ponto verde, agora grande o bastante
   para ser notado sem olhar para ele. Some no primeiro clique (o JS tira a
   classe). */
.v2__aba--nova { position: relative; }
.v2__aba--nova::after { content: ""; position: absolute; top: -3px; right: -3px;
    width: 13px; height: 13px; border-radius: 50%; background: var(--c-verde);
    box-shadow: 0 0 0 2.5px var(--cor-superficie), 0 1px 4px rgba(34, 164, 93, .5); }
@media (prefers-reduced-motion: no-preference) {
    .v2__aba--nova::after { animation: v2-ponto 1.6s ease-in-out infinite; }
    @keyframes v2-ponto { 50% { transform: scale(1.18); } }
}

.v2__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem;
    border: 1px solid var(--v2-borda); border-radius: 999px; background: var(--cor-superficie);
    color: var(--cor-texto); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.v2__btn:hover { background: var(--cor-bg); text-decoration: none; }
.v2__btn svg { width: 16px; height: 16px; }
.v2__btn--forte { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.v2__btn--forte:hover { background: var(--cor-primaria-escura); color: #fff; }
.v2__btn:disabled { opacity: .45; cursor: not-allowed; }

/* Estado bloqueado, dentro do palco */
.v2__trava { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
    gap: .5rem; padding: var(--sp-4); text-align: center; background: rgba(11,17,32,.94); color: #e2e8f0; }
.v2__trava svg { width: 40px; height: 40px; color: #64748b; }
.v2__trava strong { font-size: 1.05rem; color: #fff; }
.v2__trava small { color: #94a3b8; max-width: 38ch; }

.v2__toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px;
    background: rgba(15,23,42,.92); color: #fff; font-size: .82rem; font-weight: 600; }
.v2__toast svg { width: 15px; height: 15px; }

/* ---- corpo da aula ---- */
.v2__corpo { padding: var(--sp-4); }
/* Título acolchoado: bloco com preenchimento e fundo próprio, em vez de texto
   solto. A faixa colorida à esquerda ancora o título no azul da marca. */
.v2__aulatit {
    display: inline-block;
    margin: 0 0 var(--sp-3);
    padding: .6rem 1.1rem .6rem .95rem;
    border-radius: 14px;
    border-left: 4px solid var(--cor-primaria);
    background: linear-gradient(180deg, #f7f9fd, var(--v2-tinta));
    font-size: 1.2rem;
    letter-spacing: -.01em;
    line-height: 1.35;
}

/* Meta também acolchoada: cada dado vira pílula com a cor do seu ícone. */
.v2__linhameta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.v2__linhameta span { display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.v2__linhameta svg { width: 15px; height: 15px; flex: none; }

.v2__meta--tempo  { background: #e7f0fb; color: #0f4c94; }
.v2__meta--modulo { background: #efe9fb; color: #4f2fa8; }
.v2__meta--pontos { background: #fff3da; color: #8a5200; }

.v2__abas { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.v2__aba { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem;
    border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .86rem;
    font-weight: 600; color: var(--cor-texto-suave); cursor: pointer; }
.v2__aba:hover { background: var(--cor-bg); }
.v2__aba[aria-selected="true"] { background: var(--v2-tinta); color: var(--cor-primaria); }
.v2__aba svg { width: 15px; height: 15px; }

/* ---- faixa de indicadores do aluno ---- */
.v2__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 640px) { .v2__stats { grid-template-columns: repeat(4, 1fr); } }
.v2__stat { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3);
    border: 1px solid var(--v2-borda); border-radius: var(--v2-raio-sm); background: var(--cor-superficie); }
/* Ícone com cor CHEIA e traço branco: a tinta clara anterior sumia contra o
   card. Cada indicador puxa uma cor diferente da paleta que o portal já usa
   nos cards de recurso, então continua sendo a identidade da casa. */
.v2__stat__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px;
    border-radius: 11px; background: var(--c-azul); color: #fff;
    box-shadow: 0 2px 6px rgba(20, 40, 70, .18); }
.v2__stat__ic svg { width: 19px; height: 19px; }
.v2__stat b { display: block; font-size: 1.05rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.v2__stat small { color: var(--cor-texto-suave); font-size: .74rem; }

.v2__stat--verde  .v2__stat__ic { background: var(--c-verde); }
.v2__stat--ambar  .v2__stat__ic { background: var(--c-amarelo); }
.v2__stat--azul   .v2__stat__ic { background: var(--c-azul); }
.v2__stat--roxo   .v2__stat__ic { background: var(--c-roxo); }

/* A borda do card acompanha a cor, de leve — liga o número ao ícone. */
.v2__stat--verde { border-color: #bfe3c9; }
.v2__stat--ambar { border-color: #f5dfa8; }
.v2__stat--azul  { border-color: #c3d9f2; }
.v2__stat--roxo  { border-color: #d8cbf2; }

/* ---- coluna lateral ---- */
.v2__lado { display: grid; gap: var(--sp-3); }
@media (min-width: 1040px) { .v2__lado { position: sticky; top: 76px; } }

.v2__prog { padding: var(--sp-4); overflow: hidden; }  /* o mascote encosta na base: sem isto ele passaria da borda arredondada */
.v2__prog h2 { margin: 0 0 var(--sp-3); font-size: .95rem; }
.v2__anel { display: flex; align-items: center; gap: var(--sp-3); }
.v2__anel svg { width: 74px; height: 74px; flex: none; }
.v2__anel__fundo { fill: none; stroke: var(--cor-bg); stroke-width: 8; }
.v2__anel__valor { fill: none; stroke: var(--c-verde); stroke-width: 8; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: center; transition: stroke-dasharray .5s ease; }
.v2__anel__txt { font-size: 1.05rem; font-weight: 800; fill: var(--cor-texto); }
.v2__anel p { margin: 0; font-size: .84rem; color: var(--cor-texto-suave); }
.v2__anel strong { display: block; color: var(--cor-texto); font-size: .95rem; }

/* ---- currículo: um card POR MÓDULO ----
   Antes era um card único com os módulos empilhados por dentro. Separando,
   cada etapa vira um objeto próprio — fica claro onde um módulo termina e o
   outro começa, e o módulo aberto ganha destaque sem arrastar os vizinhos. */
.v2__curriculo { display: grid; gap: var(--sp-2); }
.v2__rotulo { margin: 0 0 calc(var(--sp-1) * -1); padding-left: .2rem;
    font-size: .74rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .09em; color: var(--cor-texto-suave); }

.v2__mod { background: var(--cor-superficie); border: 1px solid var(--v2-borda);
    border-radius: var(--v2-raio); box-shadow: var(--v2-sombra); overflow: hidden;
    transition: border-color .2s, box-shadow .2s; }
.v2__mod[open] { border-color: #d5dfec; box-shadow: 0 1px 2px rgba(20,40,70,.04), 0 10px 28px rgba(20,40,70,.09); }
.v2__mod > summary { display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4); cursor: pointer; font-weight: 700; font-size: .88rem; }
.v2__mod > summary:hover { background: var(--cor-bg); }
.v2__mod[open] > summary { border-bottom: 1px solid var(--v2-borda); }

/* Numerador do módulo, para a sequência ficar explícita. */
.v2__mod__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px;
    border-radius: 8px; background: var(--v2-tinta); color: var(--cor-primaria);
    font-size: .78rem; font-weight: 800; }
.v2__mod--feito .v2__mod__n { background: var(--cor-ok-bg); color: var(--cor-ok); }
.v2__mod > summary::-webkit-details-marker { display: none; }
.v2__mod__seta { margin-left: auto; color: #b9c4d1; transition: transform .2s; }
.v2__mod__seta svg { width: 16px; height: 16px; display: block; }
.v2__mod[open] .v2__mod__seta { transform: rotate(180deg); }
.v2__mod__meta { display: block; margin-top: .1rem; font-weight: 400; font-size: .74rem; color: var(--cor-texto-suave); }

/* Cada aula é um mini-card AZUL com texto SEMPRE BRANCO.
   O estado não é dito pela cor do texto — que nunca muda — e sim pelo tom do
   azul e pelo ícone. Isso mantém o contraste alto nos três estados e evita o
   texto cinza-claro sobre fundo claro, que era o ponto fraco da versão
   anterior. Todos os tons saem da própria paleta da marca. */
.v2__aulas { list-style: none; margin: 0; padding: var(--sp-2); display: grid; gap: var(--sp-2); }

/* Padrão = CINZA. A aula selecionada abre exceção e fica azul escuro.
   #64707d é um cinza levemente puxado para o azul — não é neutro puro, para
   não brigar com a paleta da marca — e sustenta texto branco a 5.05:1. */
.v2__aula { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: var(--sp-2);
    padding: .6rem .7rem; border-radius: var(--v2-raio-sm); cursor: pointer;
    background: #64707d; color: #fff;
    box-shadow: 0 1px 3px rgba(20, 40, 70, .16);
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.v2__aula:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 40, 70, .2); }

/* Todo texto dentro do card herda o branco. */
/* Nome da aula na lista.
   `.v2__nome` também é o título do CURSO lá no topo, que é uma pílula azul com
   gradiente e sombra. A regra daqui só trocava fonte e cor, então o fundo azul
   daquela pílula vazava para cá: cada aula ganhava um mini-card azul dentro do
   próprio card, inclusive nas cinzas. Removido a pedido — quem carrega a cor é
   o card inteiro, e por isso aqui zeramos tudo o que veio de lá. */
.v2__aula .v2__nome { display: block; padding: 0; border-radius: 0;
    background: none; box-shadow: none; letter-spacing: 0;
    font-size: .85rem; line-height: 1.35; color: #fff; font-weight: 600; }
.v2__sub  { display: block; margin-top: .1rem; font-size: .72rem; color: rgba(255, 255, 255, .82); }
.v2__dur  { font-size: .74rem; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }

.v2__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, .22); color: #fff; }
.v2__ic svg { width: 13px; height: 13px; }

/* Em andamento: azul da marca, o mais forte, com anel para saltar aos olhos. */
/* SELECIONADA: azul escuro da marca. É a única colorida no meio dos cinzas,
   então a cor sozinha já diz onde a pessoa está. */
.v2__aula--atual { background: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(23, 52, 140, .22), 0 4px 12px rgba(20, 40, 70, .22); }
.v2__aula--atual .v2__nome { font-weight: 800; }
.v2__aula--atual .v2__ic { background: rgba(255, 255, 255, .28); }

/* Concluída: a linha segue cinza como as demais — quem diz que terminou é o ✓.
   Ele agora é um disco VERDE CHEIO, não mais um tique verde-claro sobre círculo
   translúcido, que ficava apagado e não se lia como "pronto".

   Vem depois de `--atual` de propósito: aula concluída E selecionada mantém o
   fundo azul da seleção, mas o ✓ verde ganha — as duas informações convivem.

   Contraste medido: tique #0d2b1a sobre o verde = 7,5:1. O disco contra o cinza
   da linha fica em 2,5:1 (verde e cinza têm luminância parecida, nenhum verde
   passa de 3 aqui), por isso o anel branco define a borda. O estado também vem
   escrito em "concluída." logo abaixo, então não depende só da cor. */
.v2__aula--feita .v2__ic { background: #2fd071; color: #0d2b1a;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.v2__aula--feita .v2__ic svg { stroke-width: 3.2; }

/* Bloqueada: ~~cinza mais fechado~~ o MESMO cinza das demais, a pedido —
   "todas as aulas que não estiverem sendo acessadas ficam cinza". O que diz
   que está bloqueada é o cadeado e a palavra, não um tom diferente; a sombra
   sai para a linha recuar sem mudar de cor. */
.v2__aula--trancada { cursor: not-allowed; box-shadow: none; }
.v2__aula--trancada:hover { transform: none; box-shadow: none; }
.v2__aula--trancada .v2__sub, .v2__aula--trancada .v2__dur { color: rgba(255, 255, 255, .74); }
.v2__aula--trancada .v2__ic { background: rgba(255, 255, 255, .14); }

/* ---- conclusão (só com 100%) ---- */
.v2__fim { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-4); border: 1px solid #bfe3c9; border-radius: var(--v2-raio);
    background: linear-gradient(180deg, #f2fbf5, var(--cor-ok-bg)); }
.v2__fim__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px;
    border-radius: 12px; background: var(--cor-ok); color: #fff; }
.v2__fim__ic svg { width: 22px; height: 22px; }
.v2__fim strong { display: block; color: var(--cor-ok); }
.v2__fim small { color: #3c6b46; }
.v2__fim .v2__btn { margin-left: auto; }

/* Placeholders (sem conteúdo inventado) */
.v2__ph { height: 11px; border-radius: 999px; background: #eef2f7; margin-bottom: .55rem; }
.v2__ph--l { width: 88%; } .v2__ph--m { width: 66%; } .v2__ph--s { width: 42%; }
.v2__legenda { margin: var(--sp-2) 0 0; font-size: .78rem; color: var(--cor-texto-suave); font-style: italic; }

/* Ajustes da view real que o protótipo não precisava ---------------------- */

.v2__coluna { display: grid; gap: var(--sp-4); }
.v2__defs { position: absolute; }

/* A aula inteira é clicável. `display: contents` mantém o grid de 3 colunas
   em .v2__aula — sem isso o link viraria uma caixa só e a linha desmontava. */
.v2__aula__link { display: contents; color: inherit; text-decoration: none; }
.v2__aula__link:hover { text-decoration: none; }
.v2__aula:focus-within { outline: 3px solid var(--cor-acento); outline-offset: 2px; }

/* Contador nas abas */
.v2__pill { display: inline-block; min-width: 20px; padding: .05rem .4rem; border-radius: 999px;
    background: var(--v2-tinta); color: var(--cor-primaria); font-size: .72rem; font-weight: 800; text-align: center; }
.v2__pill--ok { background: var(--cor-ok-bg); color: var(--cor-ok); }

/* O <video> real ocupa a moldura inteira. */
.v2__video video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.v2__toast--ok { background: rgba(34, 164, 93, .95); }

/* ==========================================================================
   Visitas à Matriz (Spec 12) — Etapa 1: cadastros
   Mesma linguagem do resto da gestão (cards, tabelas, tags); o que é novo é
   o roteiro em lista vertical, embrião da timeline da Etapa 2.
   ========================================================================== */
.vis__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Cards de entrada do módulo */
.vis-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (min-width: 768px) { .vis-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vis-card {
    --c: var(--cor-primaria);
    display: flex; align-items: center; gap: var(--sp-3);
    color: inherit; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
a.vis-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-2, 0 6px 18px rgba(0,0,0,.12)); }
a.vis-card:hover .seta-go { background: var(--c); color: #fff; }
.vis-card__ic {
    flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
    background: var(--cor-primaria-bg, rgba(31, 78, 121, .1)); color: var(--cor-primaria);
}
.vis-card__ic svg { width: 26px; height: 26px; }
.vis-card__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.vis-card__txt strong { font-size: 1.05rem; }
.vis-card__txt span, .vis-card__txt em { font-size: .85rem; color: var(--cor-texto-suave); font-style: normal; }
.vis-card__alerta { color: var(--cor-alerta) !important; font-weight: 600; }
.vis-card--breve { opacity: .6; }
.vis-card--breve .vis-card__ic { background: var(--cor-bg); color: var(--cor-texto-suave); }

.vis-passos { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.vis-passos li { line-height: 1.45; }

/* Linhas de formulário em colunas (o form-row padrão é 1 coluna) */
.vis-form .form-row, .vis-add .form-row, .vis-duas .form-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 768px) {
    .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.form-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.form-actions .check { margin: 0; }
.form-field--fim { display: flex; align-items: flex-end; }
.vis-form textarea, .vis-add textarea { width: 100%; }

/* Setor na tabela: ícone + nome + local */
.vis-setor { display: flex; align-items: center; gap: var(--sp-2); }
.vis-setor__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--cor-primaria-bg, rgba(31, 78, 121, .1)); color: var(--cor-primaria); }
.vis-setor__ic svg { width: 18px; height: 18px; }
.vis-setor small, .table td small { display: block; font-size: .8rem; }
.table tr.is-inativo td { opacity: .55; }

/* Duas colunas: lista de modelos | modelo aberto */
.vis-duas { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
@media (min-width: 992px) { .vis-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.vis-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.vis-lista__item a {
    display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; border-radius: 10px;
    color: inherit; text-decoration: none; border: 1px solid var(--cor-borda);
}
.vis-lista__item a:hover { border-color: var(--cor-primaria); }
.vis-lista__item.is-atual a { border-color: var(--cor-primaria); background: var(--cor-primaria-bg, rgba(31, 78, 121, .08)); }
.vis-lista__item.is-inativo a { opacity: .55; }
.vis-lista__item small { color: var(--cor-texto-suave); font-size: .8rem; }

/* Roteiro do modelo — lista vertical com hora, ícone, texto, ações */
.vis-roteiro { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: .4rem; }
.vis-roteiro__item {
    display: grid; grid-template-columns: 3.2rem 34px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
    padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--cor-borda); background: var(--cor-superficie);
}
.vis-roteiro__hora { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cor-primaria); }
.vis-roteiro__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--cor-primaria-bg, rgba(31, 78, 121, .1)); color: var(--cor-primaria); }
.vis-roteiro__ic svg { width: 18px; height: 18px; }
.vis-roteiro__txt { display: flex; flex-direction: column; min-width: 0; }
.vis-roteiro__txt small { color: var(--cor-texto-suave); font-size: .8rem; }
.vis-roteiro__acoes { display: flex; gap: .25rem; }
.vis-roteiro__item.is-opcional { border-style: dashed; }
.vis-roteiro__item.is-opcional .vis-roteiro__hora { color: var(--cor-texto-suave); }
.vis-roteiro__item.is-inativo { opacity: .55; }
.vis-add { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--cor-borda); }
.vis-excluir { margin-top: var(--sp-3); text-align: right; }
@media (max-width: 575px) {
    .vis-roteiro__item { grid-template-columns: 3rem minmax(0, 1fr); }
    .vis-roteiro__ic { display: none; }
    .vis-roteiro__acoes { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Versão do colaborador (/visitas) e tela de acesso */
.vis-duas--colab { grid-template-columns: 1fr; }
@media (min-width: 992px) { .vis-duas--colab { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.vis-setores { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vis-setores__item { display: flex; align-items: flex-start; gap: var(--sp-2); padding: .55rem .6rem; border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-superficie); }
.vis-setores__txt { display: flex; flex-direction: column; min-width: 0; }
.vis-setores__txt small { color: var(--cor-texto-suave); font-size: .8rem; }
.vis-setores__desc { margin-top: .15rem; }
.vis-acesso { display: inline-flex; align-items: center; gap: .4rem; }
.vis-acesso select { padding: .3rem .5rem; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--cor-superficie); }

/* ==========================================================================
   Visitas à Matriz — Etapa 2: dashboard, wizard e a TIMELINE
   Status com cor E ícone/texto (doc 2 §20): verde confirmado/concluído,
   amarelo pendente, vermelho recusado, azul em andamento, cinza cancelado.
   ========================================================================== */
:root {
    --vis-verde: #1e9e5a;   --vis-verde-bg: #e6f6ec;
    --vis-amarelo: #b7791f; --vis-amarelo-bg: #fff4d6;
    --vis-vermelho: #c62828; --vis-vermelho-bg: #fdecea;
    --vis-azul: #0064d5;    --vis-azul-bg: #e6f0fc;
    --vis-cinza: #6b7a89;   --vis-cinza-bg: #eef1f4;
    --vis-neutro: #4a5a6a;  --vis-neutro-bg: #f1f4f7;
}

/* Tag de status */
.vis-status {
    display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; white-space: nowrap; line-height: 1.2;
    background: var(--vis-neutro-bg); color: var(--vis-neutro);
}
.vis-status svg { width: 13px; height: 13px; }
.vis-status--verde    { background: var(--vis-verde-bg);    color: var(--vis-verde); }
.vis-status--amarelo  { background: var(--vis-amarelo-bg);  color: var(--vis-amarelo); }
.vis-status--vermelho { background: var(--vis-vermelho-bg); color: var(--vis-vermelho); }
.vis-status--azul     { background: var(--vis-azul-bg);     color: var(--vis-azul); }
.vis-status--cinza    { background: var(--vis-cinza-bg);    color: var(--vis-cinza); }
.vis-alerta { color: var(--vis-vermelho); font-style: normal; font-weight: 600; }
.vis-ic-inline { width: 13px; height: 13px; vertical-align: -2px; }

/* KPIs do dashboard */
.vis-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (min-width: 768px) { .vis-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vis-kpi {
    --c: var(--vis-neutro);
    display: flex; flex-direction: column; gap: .15rem; padding: var(--sp-3) var(--sp-4);
    background: var(--cor-superficie); border-radius: 14px; border-left: 5px solid var(--c);
    color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: transform .18s ease, box-shadow .18s ease;
}
.vis-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.vis-kpi__num { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
.vis-kpi__lbl { font-size: .85rem; color: var(--cor-texto-suave); font-weight: 600; }
.vis-kpi--azul { --c: var(--vis-azul); }
.vis-kpi--amarelo { --c: var(--vis-amarelo); }
.vis-kpi--vermelho { --c: var(--vis-vermelho); }
.vis-kpi--verde { --c: var(--vis-verde); }

/* 22/09 (a pedido): "ao selecionar o card 'hoje' ele fica azul, em vez de
   aparecer linhas". As linhas eram o SUBLINHADO — `a:hover` (linha 35) vence o
   `text-decoration: none` do card. Agora o card selecionado pinta na cor dele
   (o de hoje é azul) e o texto vira branco. Só em `a.vis-kpi`: os KPIs dos
   preparativos são <span> e não devem reagir. */
a.vis-kpi:hover, a.vis-kpi:focus, a.vis-kpi:active {
    background: var(--c); border-color: var(--c); color: #fff; text-decoration: none;
}
a.vis-kpi:hover .vis-kpi__num, a.vis-kpi:focus .vis-kpi__num, a.vis-kpi:active .vis-kpi__num,
a.vis-kpi:hover .vis-kpi__lbl, a.vis-kpi:focus .vis-kpi__lbl, a.vis-kpi:active .vis-kpi__lbl { color: #fff; }
/* Teclado: mantém o anel de foco, mas na cor do card em vez do contorno padrão. */
a.vis-kpi:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* Ações necessárias */
.vis-acoes .card__title { display: flex; align-items: center; gap: .45rem; }
.vis-acoes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vis-acoes__item { --c: var(--vis-neutro); --bg: var(--vis-neutro-bg); display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .8rem; border-radius: 10px; background: var(--bg); }
.vis-acoes__item svg { flex: none; width: 20px; height: 20px; color: var(--c); margin-top: .1rem; }
.vis-acoes__item span { display: flex; flex-direction: column; }
.vis-acoes__item small { color: var(--cor-texto-suave); }
.vis-acoes__item--vermelho { --c: var(--vis-vermelho); --bg: var(--vis-vermelho-bg); }
.vis-acoes__item--amarelo  { --c: var(--vis-amarelo);  --bg: var(--vis-amarelo-bg); }
.vis-vazio { display: flex; align-items: center; gap: .5rem; color: var(--vis-verde); margin: 0; }
.vis-vazio svg { width: 20px; height: 20px; flex: none; }

/* Lista de visitas (cards em linha) */
.vis-visitas { display: grid; gap: .5rem; }
.vis-visita {
    display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
    padding: .6rem .8rem; border: 1px solid var(--cor-borda); border-radius: 12px; background: var(--cor-superficie);
    color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
a.vis-visita:hover { border-color: var(--cor-primaria); transform: translateX(2px); }
/* 22/09, 2ª volta (a pedido: "não fica não, as linhas ainda aparecem"). Na 1ª
   volta eu tratei só o KPI do topo; as linhas que incomodavam estavam no card da
   VISITA — o "ter, 22/09 · PIMENTAS · VIS-2026-0002". Mesma causa: o sublinhado
   de `a:hover` (app.css:35) vence o `text-decoration: none` do card.
   Agora o card selecionado fica azul, com o texto todo em branco. */
a.vis-visita:is(:hover, :focus, :active) {
    background: var(--cor-primaria); border-color: var(--cor-primaria);
    color: #fff; text-decoration: none;
}
a.vis-visita:is(:hover, :focus, :active) :is(.vis-visita__quando, .vis-visita__txt) :is(strong, small) { color: #fff; }
/* "17 recusas" sai do vermelho, que some no azul, para um vermelho claro que
   ainda lê como alerta. */
a.vis-visita:is(:hover, :focus, :active) .vis-alerta { color: #ffd4cf; }
/* Teclado: mantém o anel, na cor do card. */
a.vis-visita:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }

/* Rede de segurança: nenhum card-link do módulo sublinha ao ser selecionado —
   é sempre a mesma regra global mordendo, e eu já corri atrás dela duas vezes. */
:is(a.vis-visita, a.vis-kpi, a.vis-card, a.vis-atalho, a.vis-voltar, a.vis-ano__chip, a.vis-setor):is(:hover, :focus, :active) { text-decoration: none; }
.vis-visita__quando { display: flex; flex-direction: column; line-height: 1.15; }
.vis-visita__quando strong { color: var(--cor-primaria); text-transform: capitalize; }
.vis-visita__quando small { color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.vis-visita__txt { display: flex; flex-direction: column; min-width: 0; }
.vis-visita__txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-visita__txt small { color: var(--cor-texto-suave); font-size: .8rem; }
.vis-visitas--compacto .vis-visita { padding: .45rem .7rem; }
@media (max-width: 575px) { .vis-visita { grid-template-columns: 3.6rem minmax(0, 1fr); } .vis-visita .vis-status { grid-column: 2; justify-self: start; } }

/* Atalhos de cadastro */
.vis-atalhos { display: grid; gap: .5rem; }
.vis-atalho { display: flex; align-items: center; gap: var(--sp-2); padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--cor-borda); color: inherit; text-decoration: none; }
.vis-atalho:hover { border-color: var(--cor-primaria); }
.vis-atalho span:last-child { display: flex; flex-direction: column; }
.vis-atalho small { color: var(--cor-texto-suave); font-size: .8rem; }
.vis-duas--dash { grid-template-columns: 1fr; }
@media (min-width: 992px) { .vis-duas--dash { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.vis-secao { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.vis-secao .card__title { margin-bottom: .2rem; display: flex; align-items: center; gap: .4rem; }

/* Wizard da nova visita */
.vis-wizard { display: grid; gap: var(--sp-3); }
.vis-passo .card__title { display: flex; align-items: center; gap: .6rem; }
.vis-passo__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cor-primaria); color: #fff; font-size: .85rem; font-weight: 700; }
.vis-modelos { display: grid; gap: .5rem; }
@media (min-width: 768px) { .vis-modelos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vis-modelo { display: flex; align-items: center; gap: var(--sp-2); padding: .7rem .8rem; border: 1.5px solid var(--cor-borda); border-radius: 12px; cursor: pointer; background: var(--cor-superficie); }
.vis-modelo:has(input:checked) { border-color: var(--cor-primaria); background: var(--vis-azul-bg); }
.vis-modelo input { accent-color: var(--cor-primaria); }
.vis-modelo__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--vis-azul-bg); color: var(--cor-primaria); flex: none; }
.vis-modelo__ic svg { width: 20px; height: 20px; }
.vis-modelo__txt { display: flex; flex-direction: column; min-width: 0; }
.vis-modelo__txt small { color: var(--cor-texto-suave); font-size: .8rem; }
.vis-wizard__acoes { justify-content: flex-end; }

/* Cabeçalho da visita */
.vis-cab { --c: var(--cor-primaria); border-left-color: var(--c); }
.vis-cab--verde { --c: var(--vis-verde); } .vis-cab--amarelo { --c: var(--vis-amarelo); }
.vis-cab--vermelho { --c: var(--vis-vermelho); } .vis-cab--azul { --c: var(--vis-azul); } .vis-cab--cinza { --c: var(--vis-cinza); }
.vis-cab__codigo { font-size: .8rem; font-weight: 600; color: var(--cor-texto-suave); letter-spacing: .04em; margin-left: .4rem; vertical-align: middle; }
.vis-cab__lado { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.vis-cancelar summary { list-style: none; cursor: pointer; }
.vis-cancelar summary::-webkit-details-marker { display: none; }
.vis-cancelar__form { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.vis-cancelar__form input { flex: 1 1 14rem; padding: .4rem .6rem; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; }

/* ---- A TIMELINE ---- */
.vis-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.vis-tl::before { content: ""; position: absolute; left: calc(3.4rem + 15px); top: 14px; bottom: 14px; width: 2px; background: var(--cor-borda); }
.vis-tl__item { --c: var(--vis-neutro); --bg: var(--vis-neutro-bg); display: grid; grid-template-columns: 3.4rem 32px minmax(0, 1fr); gap: .6rem; align-items: start; padding: .3rem 0; position: relative; }
.vis-tl__item--verde    { --c: var(--vis-verde);    --bg: var(--vis-verde-bg); }
.vis-tl__item--amarelo  { --c: var(--vis-amarelo);  --bg: var(--vis-amarelo-bg); }
.vis-tl__item--vermelho { --c: var(--vis-vermelho); --bg: var(--vis-vermelho-bg); }
.vis-tl__item--azul     { --c: var(--vis-azul);     --bg: var(--vis-azul-bg); }
.vis-tl__item--cinza    { --c: var(--vis-cinza);    --bg: var(--vis-cinza-bg); }
/* 22/09, 4ª volta (a pedido: "o concluído aparece somente ao lado do horário,
   não precisa ter 2 confirmações, e nem estar dentro do card"): a coluna da
   esquerda passou a ser hora + estado da tarefa, empilhados. O card ficou só
   com a resposta do responsável. */
.vis-tl__quando { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; min-width: 0; }
.vis-tl__hora { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cor-primaria); padding-top: .55rem; text-align: right; }
.vis-tl__quando .vis-tl__hora { padding-top: .5rem; }
.vis-tl__feito {
    display: inline-flex; align-items: center; gap: .18rem; white-space: nowrap;
    font-size: .64rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
    padding: .1rem .3rem; border-radius: 5px;
}
.vis-tl__feito svg { width: 9px; height: 9px; flex: none; }
.vis-tl__feito--ok    { background: var(--vis-verde-bg); color: var(--vis-verde); }
.vis-tl__feito--agora { background: var(--vis-azul-bg);  color: var(--vis-azul); }
.vis-tl__ponto { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c); margin-top: .25rem; z-index: 1; }
.vis-tl__ponto svg { width: 16px; height: 16px; }
.vis-tl__card { display: flex; align-items: center; gap: var(--sp-2); padding: .6rem .8rem; border: 1px solid var(--cor-borda); border-left: 4px solid var(--c); border-radius: 12px; background: var(--cor-superficie); min-width: 0; }
.vis-tl__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--vis-azul-bg); color: var(--cor-primaria); }
.vis-tl__ic svg { width: 21px; height: 21px; }
.vis-tl__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .1rem; }
.vis-tl__txt small { color: var(--cor-texto-suave); font-size: .8rem; }
.vis-tl__resp { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.vis-tl__lado { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex: none; }
.vis-tl__acoes { display: flex; gap: .2rem; }
.vis-tl__item.is-opcional .vis-tl__card { border-style: dashed; border-left-style: solid; }
.vis-tl__item.is-opcional .vis-tl__hora { color: var(--cor-texto-suave); font-weight: 600; }
.vis-tl__item--fim .vis-tl__ponto { --c: var(--cor-primaria); --bg: #fff; }
.vis-tl__card--fim { display: flex; flex-direction: column; border-style: dashed; background: transparent; }
.vis-tl__card--fim small { color: var(--cor-texto-suave); font-size: .8rem; }
.vis-tl__form { display: block; }
.vis-tl__form .form-row { margin-bottom: var(--sp-2); }
.vis-andares { display: flex; gap: .8rem; flex-wrap: wrap; }
.vis-andares .check { margin: 0; }
.vis-canceladas { margin-top: var(--sp-2); font-size: .85rem; }
.vis-canceladas__lista { margin: .3rem 0 0 1.2rem; color: var(--cor-texto-suave); }
.vis-dados summary { cursor: pointer; }
.vis-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.vis-hist__item { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .5rem; font-size: .88rem; }
.vis-hist__quando { color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vis-duas--visita { grid-template-columns: 1fr; }
@media (min-width: 992px) { .vis-duas--visita { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
@media (max-width: 575px) {
    .vis-tl::before { left: calc(2.6rem + 15px); }
    .vis-tl__item { grid-template-columns: 2.6rem 32px minmax(0, 1fr); gap: .4rem; }
    .vis-tl__card { flex-wrap: wrap; }
    .vis-tl__ic { display: none; }
    .vis-tl__lado { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
    .vis-cab__lado { align-items: flex-start; }
}

/* Versão do colaborador: a próxima visita em destaque */
.vis-proxima { --c: var(--cor-primaria); border-left: 5px solid var(--c); }
.vis-proxima--verde { --c: var(--vis-verde); } .vis-proxima--amarelo { --c: var(--vis-amarelo); }
.vis-proxima--azul { --c: var(--vis-azul); } .vis-proxima--cinza { --c: var(--vis-cinza); }
.vis-proxima__rotulo { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.vis-tl--leitura .vis-tl__card { padding: .5rem .7rem; }

/* Respiro entre cards empilhados no módulo Visitas (15/09/2026, a pedido:
   "alguns cards estão próximos demais"). O .card do sistema não tem margem
   — nas outras telas ele vive em grids; aqui as colunas empilham vários. */
.vis-duas { margin-top: var(--sp-4); }
.vis-duas > div { display: flex; flex-direction: column; gap: var(--sp-4); }
.vis-duas > div > .card, .vis-duas > div > details.card, .vis-duas > div > form.card { margin: 0; }
.vis-form, .vis-proxima, .vis-cards, .vis-kpis { margin-bottom: var(--sp-4); }
.vis-wizard { gap: var(--sp-4); }
.vis-visitas { gap: .7rem; }
.vis-acoes__lista { gap: .65rem; }
.vis-atalhos { gap: .65rem; }
.vis-lista { gap: .5rem; }
.vis-setores { gap: .65rem; }
.vis-roteiro { gap: .55rem; }
.vis-tl__item { padding: .45rem 0; }
.vis-hist { gap: .6rem; }
.alert + .vis-duas { margin-top: var(--sp-3); }
.vis-canceladas { margin-top: var(--sp-3); }
.vis-add { margin-top: var(--sp-4); padding-top: var(--sp-4); }
.vis-excluir { margin-top: var(--sp-4); }

/* ==========================================================================
   Usuários (master) — cards com filtros (15/09/2026)
   ========================================================================== */
.usr-resumo { display: flex; gap: .5rem; flex-wrap: wrap; }
.usr-resumo__item { padding: .3rem .7rem; border-radius: 999px; background: var(--cor-bg); font-size: .82rem; color: var(--cor-texto-suave); }
.usr-resumo__item strong { color: var(--cor-texto); }
.usr-resumo__item--ok { background: var(--cor-ok-bg); color: var(--cor-ok); }
.usr-resumo__item--ok strong { color: inherit; }
.usr-resumo__item--erro { background: var(--cor-alerta-bg); color: var(--cor-alerta); }
.usr-resumo__item--erro strong { color: inherit; }

.usr-filtros { display: grid; grid-template-columns: 1fr; gap: .6rem; padding: var(--sp-3); margin-bottom: var(--sp-3); }
@media (min-width: 992px) { .usr-filtros { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto auto; align-items: center; } }
.usr-filtros select, .usr-filtros__busca input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--cor-borda); border-radius: 10px; font: inherit; background: var(--cor-superficie); }
.usr-filtros__busca { position: relative; }
.usr-filtros__busca svg { position: absolute; left: .7rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--cor-texto-suave); pointer-events: none; }
.usr-filtros__busca input { padding-left: 2.3rem; }
.usr-contagem { margin: 0 0 var(--sp-2); color: var(--cor-texto-suave); font-size: .85rem; }

.usr-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 768px)  { .usr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .usr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.usr-card { display: flex; flex-direction: column; gap: .7rem; padding: var(--sp-3) var(--sp-4); scroll-margin-top: 5rem; }
.usr-card.is-bloqueado { background: #fbfbfc; }
.usr-card.is-bloqueado .usr-card__nome { color: var(--cor-texto-suave); }
.usr-card:target { box-shadow: 0 0 0 3px var(--cor-primaria); }

.usr-card__topo { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.usr-avatar { --c: var(--c-azul-forte); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .02em; }
.usr-avatar--azul { --c: var(--c-azul-forte); } .usr-avatar--verde { --c: var(--c-verde-forte); } .usr-avatar--roxo { --c: var(--c-roxo-forte); }
.usr-avatar--laranja { --c: var(--c-laranja-forte); } .usr-avatar--teal { --c: var(--c-teal-forte); } .usr-avatar--amarelo { --c: var(--c-amarelo-forte); }
.usr-card__quem { min-width: 0; }
.usr-card__nome { margin: 0; font-size: 1.02rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-card__meta { margin: .1rem 0 0; font-size: .8rem; color: var(--cor-texto-suave); }
.usr-situacao { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.usr-situacao svg { width: 13px; height: 13px; }
.usr-situacao--ok { background: var(--cor-ok-bg); color: var(--cor-ok); }
.usr-situacao--erro { background: var(--cor-alerta-bg); color: var(--cor-alerta); }

.usr-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.usr-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 8px; background: var(--cor-bg); color: var(--cor-texto); font-size: .76rem; font-weight: 600; }
.usr-tag svg { width: 13px; height: 13px; color: var(--cor-texto-suave); }
.usr-tag--papel.usr-tag--master { background: #fff4d6; color: #7a5200; } .usr-tag--papel.usr-tag--master svg { color: inherit; }
.usr-tag--papel.usr-tag--admin  { background: var(--vis-azul-bg); color: var(--vis-azul); } .usr-tag--papel.usr-tag--admin svg { color: inherit; }
.usr-tag--suave { font-weight: 500; color: var(--cor-texto-suave); }

.usr-acoes { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--cor-borda); }
.usr-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; border: 1px solid var(--cor-borda); border-radius: 9px; background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.usr-btn svg { width: 15px; height: 15px; color: var(--cor-primaria); }
.usr-btn:hover { border-color: var(--cor-primaria); background: var(--vis-azul-bg); }
.usr-btn:disabled { opacity: .5; cursor: not-allowed; }
.usr-btn--perigo svg { color: var(--cor-alerta); }
.usr-btn--perigo:hover { border-color: var(--cor-alerta); background: var(--cor-alerta-bg); }
.usr-btn--ok svg { color: var(--cor-ok); }
.usr-btn--ok:hover { border-color: var(--cor-ok); background: var(--cor-ok-bg); }
.usr-mais summary { list-style: none; }
.usr-mais summary::-webkit-details-marker { display: none; }
.usr-mais__form { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; width: 100%; }
.usr-mais__form input { flex: 1 1 12rem; padding: .4rem .6rem; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; }
.usr-master-nota { margin: 0; font-size: .82rem; color: var(--cor-texto-suave); }


/* ==========================================================================
   Visitas — calendário, lista e impressão (15/09/2026)
   ========================================================================== */
.cal-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cal-nav__mes { margin: 0 .3rem; font-size: 1.15rem; min-width: 11rem; text-align: center; }
.cal-nav__hoje { margin-left: .3rem; }
.cal-nav__resumo { margin-left: auto; font-size: .82rem; color: var(--cor-texto-suave); display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }


.cal { --cal-borda: #b8c0cc; }   /* linha firme: o operador pediu grade visível, não borda transparente */
.cal__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal__semana span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-suave); text-align: center; }
.cal__grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__dia { min-height: 4.6rem; padding: .3rem .35rem; border: 1.5px solid var(--cal-borda); border-radius: 8px; background: var(--cor-superficie); display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.cal__dia.is-fds { background: #f3f5f8; }
.cal__dia.is-fora { opacity: .55; border-style: dashed; }
.cal__dia.is-hoje { border-color: var(--cor-primaria); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.cal__dia.is-hoje .cal__num { background: var(--cor-primaria); color: #fff; }
.cal__topo { display: flex; align-items: center; justify-content: space-between; }
.cal__num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.cal__novo { display: none; width: 22px; height: 22px; border-radius: 6px; text-align: center; line-height: 22px; font-weight: 700; color: var(--cor-primaria); background: var(--vis-azul-bg); text-decoration: none; }
.cal__dia:hover .cal__novo { display: block; }
.cal__chips { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cal__chip { --c: var(--vis-neutro); --bg: var(--vis-neutro-bg); display: block; padding: .18rem .4rem; border-radius: 6px; background: var(--bg); color: var(--c); font-size: .74rem; line-height: 1.25; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--c); }
.cal__chip:hover { filter: brightness(.95); }
/* 22/09, mesma volta: o chip do calendário é a MESMA visita e sublinhava também
   (achado varrendo todos os links da página, não só os que ele citou). Fica na
   cor dele, cheia, com o texto claro — em vez de escurecer e sublinhar. */
/* ~~background: var(--c)~~ 22/09, na conferência: com o status amarelo o chip
   ficava #b7791f com texto branco — 3,7:1, abaixo do mínimo de 4,5:1 para texto
   pequeno (ele tem .74rem). Medido, não estimado. Vai para o azul da marca
   (11:1), igual ao card da visita; a barra da esquerda continua na cor do
   status, então a informação não se perde. */
a.cal__chip:is(:hover, :focus, :active) { background: var(--cor-primaria); color: #fff; filter: none; text-decoration: none; }
a.cal__chip:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.cal__chip--verde { --c: var(--vis-verde); --bg: var(--vis-verde-bg); }
.cal__chip--amarelo { --c: var(--vis-amarelo); --bg: var(--vis-amarelo-bg); }
.cal__chip--vermelho { --c: var(--vis-vermelho); --bg: var(--vis-vermelho-bg); }
.cal__chip--azul { --c: var(--vis-azul); --bg: var(--vis-azul-bg); }
.cal__chip--cinza { --c: var(--vis-cinza); --bg: var(--vis-cinza-bg); }
.cal__chip--neutro { --c: var(--vis-neutro); --bg: var(--vis-neutro-bg); border-left-style: dashed; }
.cal__pontos { display: flex; align-items: center; gap: 3px; text-decoration: none; }
.cal__pontos small { font-size: .65rem; color: var(--cor-texto-suave); }
.cal__ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vis-neutro); }
.cal__ponto--verde { background: var(--vis-verde); } .cal__ponto--amarelo { background: var(--vis-amarelo); }
.cal__ponto--vermelho { background: var(--vis-vermelho); } .cal__ponto--azul { background: var(--vis-azul); }
.cal__ponto--cinza { background: var(--vis-cinza); } .cal__ponto--neutro { background: var(--vis-neutro); opacity: .5; }

/* Mini (dashboard): quadradinhos só com número e pontos */
.cal--mini .cal__dia { min-height: 2.4rem; padding: .2rem .25rem; gap: .15rem; align-items: center; border-radius: 8px; }
.cal--mini .cal__num { width: 20px; height: 20px; font-size: .72rem; }
.cal--mini .cal__topo { justify-content: center; }
.cal--mini .cal__semana span { font-size: .62rem; }
.cal-card--mini .card__title { margin-bottom: 0; }

@media (max-width: 767px) {
    .cal__dia { min-height: 4.4rem; padding: .25rem .3rem; }
    .cal__chip strong { display: none; }
    .cal__novo { display: block; }
}

/* Lista completa */
.vis-filtros { grid-template-columns: 1fr; }
@media (min-width: 992px) { .vis-filtros { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto auto auto; } }
.vis-filtros input[type="date"] { padding: .5rem .6rem; border: 1px solid var(--cor-borda); border-radius: 10px; font: inherit; background: var(--cor-superficie); }
.vis-tabela td small { display: block; }

/* Próxima visita do colaborador: status + imprimir */
.vis-proxima__lado { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }

/* ==========================================================================
   Impressão do roteiro (layout do certificado: sem menu).
   ~~Tabela simples~~ 18/09: documento para folha A4 em pé — marca, faixa de
   dados, boas-vindas do CEO, cronograma numerado, rodapé. Na tela aparece
   como uma "folha" centralizada; no @media print vira a página inteira.
   ========================================================================== */
.vis-imp { --imp-azul: #1f4e79; --imp-azul-claro: #e8f0f8; --imp-tinta: #1c2733; --imp-suave: #5b6b7b; --imp-linha: #d9e1ea;
    width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto var(--sp-5); padding: 16mm 16mm 14mm; box-sizing: border-box;
    background: #fff; border-radius: var(--raio); box-shadow: 0 6px 30px rgba(0, 0, 0, .12); color: var(--imp-tinta);
    font-size: 10.5pt; line-height: 1.4; display: flex; flex-direction: column; }
.vis-imp__cab { display: grid; grid-template-columns: auto 1fr auto; gap: 8mm; align-items: center; padding-bottom: 4mm; margin-bottom: 4mm; border-bottom: 3px solid var(--imp-azul); }
.vis-imp__logo { width: 34mm; height: auto; }
.vis-imp__marca { margin: 0; font-size: 8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--imp-azul); }
.vis-imp__cab h1 { margin: 1mm 0; font-size: 20pt; line-height: 1.1; color: var(--imp-tinta); }
.vis-imp__sub { margin: 0; color: var(--imp-suave); font-size: 11pt; }
.vis-imp__codigo { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1mm; }
.vis-imp__codigo span { font-size: 12pt; font-weight: 800; letter-spacing: .06em; color: var(--imp-azul); padding: 1.5mm 3mm; border: 1.5px solid var(--imp-azul); border-radius: 6px; }
.vis-imp__codigo small { color: var(--imp-suave); font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; }

.vis-imp__dados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5mm 5mm; margin: 0 0 4mm; padding: 3.5mm 5mm; background: var(--imp-azul-claro); border-radius: 8px; }
.vis-imp__dados > div { min-width: 0; }
.vis-imp__dados--largo { grid-column: 1 / -1; }
.vis-imp__dados dt { font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--imp-azul); margin: 0 0 .5mm; }
.vis-imp__dados dd { margin: 0; font-size: 10.5pt; font-weight: 600; }
.vis-imp__dados dd small { font-weight: 400; color: var(--imp-suave); }

.vis-imp__boas { display: grid; grid-template-columns: 9mm 1fr; gap: 4mm; margin: 0 0 5mm; padding: 3.5mm 5mm 3.5mm 4mm; border-left: 3px solid var(--imp-azul); background: #fbfcfe; border-radius: 0 8px 8px 0; break-inside: avoid; }
.vis-imp__aspas { width: 9mm; height: 9mm; color: var(--imp-azul); opacity: .8; margin-top: .5mm; }
.vis-imp__boas h2 { margin: 0 0 1.5mm; font-size: 13pt; color: var(--imp-azul); }
.vis-imp__boas p { margin: 0; font-size: 10pt; color: #2b3a48; }
.vis-imp__assina { margin-top: 3mm !important; display: flex; flex-direction: column; line-height: 1.25; }
.vis-imp__assina strong { font-size: 10.5pt; }
.vis-imp__assina span { font-size: 8.5pt; color: var(--imp-suave); text-transform: uppercase; letter-spacing: .06em; }

.vis-imp__crono h2 { margin: 0 0 2.5mm; font-size: 12pt; color: var(--imp-tinta); display: flex; align-items: center; gap: 2mm; }
.vis-imp__crono h2 svg { width: 5mm; height: 5mm; color: var(--imp-azul); }
.vis-imp__tabela { width: 100%; border-collapse: collapse; font-size: 10pt; }
.vis-imp__tabela th { text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--imp-azul); padding: 2mm 3mm; }
.vis-imp__tabela th:first-child { border-radius: 6px 0 0 0; }
.vis-imp__tabela th:last-child { border-radius: 0 6px 0 0; }
.vis-imp__tabela td { padding: 2mm 3mm; border-bottom: 1px solid var(--imp-linha); vertical-align: top; }
.vis-imp__tabela tbody tr:nth-child(even) td { background: #f7f9fc; }
.vis-imp__col-hora { width: 18mm; }
.vis-imp__col-resp { width: 42mm; }
.vis-imp__col-dur { width: 20mm; }
.vis-imp__hora { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--imp-azul); white-space: nowrap; font-size: 11pt; }
.vis-imp__ativ { display: flex; gap: 2.5mm; align-items: flex-start; }
.vis-imp__ativ > div { display: flex; flex-direction: column; gap: .4mm; min-width: 0; }
.vis-imp__ativ strong { font-size: 10.5pt; }
.vis-imp__ativ small { color: var(--imp-suave); font-size: 8.5pt; display: flex; align-items: center; gap: 1mm; }
.vis-imp__ativ small svg { width: 3.2mm; height: 3.2mm; }
.vis-imp__num { flex: none; display: grid; place-items: center; width: 6mm; height: 6mm; border-radius: 50%; background: var(--imp-azul-claro); color: var(--imp-azul); font-size: 8pt; font-weight: 800; margin-top: .3mm; }
.vis-imp__dur { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vis-imp__fim td { border-bottom: 0; border-top: 2px solid var(--imp-azul); background: #fff !important; }
.vis-imp__obs { margin-top: 5mm; break-inside: avoid; }
.vis-imp__obs h2 { font-size: 11pt; margin: 0 0 1mm; color: var(--imp-azul); }
.vis-imp__obs p { margin: 0; font-size: 10pt; }
.vis-imp__rodape { display: flex; justify-content: space-between; gap: 4mm; margin-top: auto; padding-top: 3mm; border-top: 1px solid var(--imp-linha); font-size: 8pt; color: var(--imp-suave); flex-wrap: wrap; }
.vis-imp__rodape strong { color: var(--imp-azul); }
@media screen and (max-width: 720px) {   /* 18/09 17:05: só na tela — no papel a largura útil (~703px) caía aqui e empilhava as colunas */
    .vis-imp { width: auto; min-height: 0; padding: var(--sp-4); font-size: 10pt; }
    .vis-imp__cab { grid-template-columns: 1fr; gap: 3mm; }
    .vis-imp__logo { width: 28mm; }
    .vis-imp__codigo { align-items: flex-start; text-align: left; }
    .vis-imp__dados { grid-template-columns: 1fr 1fr; }
    .vis-imp__col-resp { width: auto; }
}
/* ---- Checklist da visita (22/09): a folha A4 do roteiro, com as atividades em
   cards, duas colunas.
   ~~Tabelas de 6 colunas em 2 folhas.~~ 11:20: duas colunas, quadrados sempre
   vazios. ~~Cards com borda dura, tarja lateral e letra de 10,5pt espremida
   numa folha só.~~ 11:50, a pedido (*"ficou muito quadradão e muito pequeno as
   letras, pode passar para 2 folhas se isso for melhorar"*, *"não quero nada de
   títulos, antes da visita, depois da visita"*): card claro sem borda dura,
   número em círculo, corpo em 13pt, **duas folhas liberadas** (`data-imp-piso`)
   e **sem os títulos de fase** — só a lista. ---- */
.vis-chk__bloco { margin: 0 0 2mm; break-inside: auto; }
.vis-chk__bloco h2 { margin: 0 0 3mm; padding: 0 0 1.5mm; border-bottom: 2px solid var(--imp-azul);
    font-size: 14pt; color: var(--imp-azul); display: flex; align-items: baseline; justify-content: space-between; gap: 3mm;
    break-after: avoid; }
.vis-chk__bloco h2 small { font-size: 9pt; font-weight: 400; color: var(--imp-suave); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.vis-chk__lista { columns: 2; column-gap: 4mm; }

/* Card leve: fundo suave, cantos redondos, sem moldura dura — era a moldura
   fechada mais a tarja lateral que davam o ar "quadradão". */
.vis-chk__item { display: grid; grid-template-columns: 6.4mm 1fr; gap: 2.6mm; align-items: start;
    margin: 0 0 .9mm; padding: 1mm 2.2mm; background: #f6f9fc; border-radius: 6px;
    break-inside: avoid; }
.vis-chk__box { width: 6.4mm; height: 6.4mm; margin-top: .4mm; box-sizing: border-box;
    border: 1.6px solid var(--imp-azul); border-radius: 3px; background: #fff; }
.vis-chk__txt { min-width: 0; font-size: 11pt; line-height: 1.22; }
.vis-chk__txt strong { display: block; font-weight: 600; }
.vis-chk__txt small { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6mm;
    margin-top: .5mm; font-size: 9pt; line-height: 1.15; color: var(--imp-suave); }
/* Número em círculo: tira o ar de tabela e ancora a numeração do padrão. */
.vis-chk__n { display: inline-grid; place-items: center; width: 5.6mm; height: 5.6mm; margin-right: 1.8mm;
    border-radius: 50%; background: var(--imp-azul); color: #fff; vertical-align: 1mm;
    font-variant-numeric: tabular-nums; font-size: 8.5pt; font-weight: 800; }
/* Etiqueta: o setor (preparativos) ou a duração (paradas). */
.vis-chk__setor { display: inline-block; padding: .3mm 2mm; border-radius: 999px;
    background: #fff; color: var(--imp-azul); font-weight: 700; font-size: 8pt;
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.vis-chk__hora { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--imp-azul); margin-right: 1.6mm; }
.vis-chk__vazio { margin: 0; font-size: 11pt; color: var(--imp-suave); }

/* O topo do documento continua compacto no checklist; o roteiro do visitante
   (mesma folha, outra view) segue generoso. */
.vis-chk .vis-imp__cab { gap: 5mm; padding-bottom: 2.4mm; margin-bottom: 2.4mm; border-bottom-width: 2px; }
.vis-chk .vis-imp__logo { width: 21mm; }
.vis-chk .vis-imp__cab h1 { font-size: 14pt; margin: .3mm 0; }
.vis-chk .vis-imp__marca { font-size: 7.5pt; }
.vis-chk .vis-imp__sub { font-size: 10pt; }
.vis-chk .vis-imp__dados { gap: 1mm 4mm; margin-bottom: 2.4mm; padding: 1.6mm 3.5mm; }
.vis-chk .vis-imp__dados dt { font-size: 7.5pt; margin-bottom: .2mm; }
.vis-chk .vis-imp__dados dd { font-size: 10.5pt; }
.vis-chk .vis-imp__rodape { font-size: 8pt; padding-top: 2.5mm; }

@media screen and (max-width: 720px) {
    /* Uma coluna no celular: card de ~88mm vira ilegível em tela estreita. */
    .vis-chk__lista { columns: 1; }
    .vis-chk__txt { font-size: 1rem; }
    .vis-chk__txt small { font-size: .82rem; }
    .vis-chk__item { padding: .6rem .7rem; margin-bottom: .5rem; }
    .vis-chk__bloco h2 { font-size: 1.05rem; }
}

@page { size: A4 portrait; margin: 11mm 12mm; }
@media print {
    .cert-acoes, .cert-flash { display: none !important; }
    .cert-body { background: #fff !important; }
    html, body { background: #fff !important; }
    .vis-imp { width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none;
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .vis-imp__cab { break-after: avoid; }
    .vis-imp__tabela { break-inside: auto; }
    .vis-imp__tabela thead { display: table-header-group; }
    .vis-imp__tabela tr { break-inside: avoid; page-break-inside: avoid; }
    .vis-imp__rodape { margin-top: 6mm; }
    a { text-decoration: none; color: inherit; }
}

/* ---- Visitas: painel "Filiais no ano" (meta: toda filial visita a Matriz) ---- */
/* <progress> nativo: sem style inline (CSP). Trilho e valor estilizados por pseudo-elemento. */
.vis-ano__barra {
    display: block; width: 100%; height: 8px; margin: .5rem 0 .9rem;
    appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; overflow: hidden;
    background: var(--cor-bg); color: var(--vis-verde);
}
.vis-ano__barra::-webkit-progress-bar { background: var(--cor-bg); border-radius: 999px; }
.vis-ano__barra::-webkit-progress-value { background: linear-gradient(90deg, var(--vis-verde), var(--cor-ok)); border-radius: 999px; transition: width .4s ease; }
.vis-ano__barra::-moz-progress-bar { background: linear-gradient(90deg, var(--vis-verde), var(--cor-ok)); border-radius: 999px; }
.vis-ano__rotulo {
    margin: 0 0 .45rem;
    font-size: .82rem;
    color: var(--cor-texto-suave);
}
.vis-ano__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.vis-ano__chip {
    display: inline-flex;
    align-items: center;
    padding: .28rem .65rem;
    border: 1px dashed var(--cor-borda);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--cor-texto);
    background: var(--cor-superficie);
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.vis-ano__chip:hover,
.vis-ano__chip:focus-visible {
    border-style: solid;
    border-color: var(--cor-primaria);
    background: var(--vis-azul-bg);
    color: var(--cor-primaria);
}
.vis-ano__feitas {
    margin-top: .9rem;
    font-size: .82rem;
}
.vis-ano__feitas summary {
    cursor: pointer;
    color: var(--cor-texto-suave);
}
.vis-ano__feitas ul {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: grid;
    gap: .3rem;
}
.vis-ano__feitas li {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.vis-ano__feitas li svg { color: var(--vis-verde); flex: none; }
.vis-cab__quem { margin-top: .25rem; display: inline-flex; align-items: center; gap: .35rem; }

/* Setores da visita: número + setas de ordem na mesma célula */
.vis-ordem { display: inline-flex; align-items: center; gap: .15rem; }
.vis-ordem > .muted { min-width: 1.2rem; text-align: right; margin-right: .2rem; }
.vis-ordem .inline-form { margin: 0; display: inline; }
.vis-ordem .btn--xs { padding: .15rem .3rem; }
.vis-a-definir { font-style: normal; color: var(--vis-amarelo); font-weight: 600; }
.vis-ano__mais { margin-left: auto; font-size: .75rem; color: var(--cor-primaria); text-decoration: none; white-space: nowrap; }
.vis-ano__mais:hover { text-decoration: underline; }

/* Card de módulo com mascote (Visitas à Matriz, versão do colaborador — 15/09):
   o Serrafinho entra no lugar do disco com ícone e toma a altura do card.
   Sem disco, sem padding: a arte já tem fundo transparente. `clamp` para o
   celular, onde a largura manda e 200px de boneco espremeria o texto. */
.res-card__ic--mascote {
    width: auto; height: auto; padding: 0; border-radius: 0; background: none;
    align-self: stretch; display: flex; align-items: flex-end; justify-content: center;
}
/* Duas artes empilhadas na mesma célula (16/09): a enrolada é a padrão e a
   aberta entra por cima no hover, com fade. Mesmo canvas nas duas, então o
   boneco não pula. */
.res-card__ic--mascote { display: grid; }
.res-card__ic--mascote img {
    grid-area: 1 / 1; display: block; width: auto; height: clamp(150px, 14vw, 200px); max-width: 100%;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18));
    transition: transform .2s ease, opacity .25s ease;
}
.res-card__mascote--hover { opacity: 0; }
.res-card--mascote:hover .res-card__mascote--hover, .res-card--mascote:focus-visible .res-card__mascote--hover { opacity: 1; }
.res-card--mascote:hover .res-card__mascote--padrao, .res-card--mascote:focus-visible .res-card__mascote--padrao { opacity: 0; }
.res-card--mascote:hover .res-card__ic--mascote img { transform: translateY(-3px) scale(1.03); }
@media (max-width: 575.98px) {
    .res-card__ic--mascote img { height: clamp(120px, 34vw, 160px); }
}

/* Visitas (colaborador): card de boas-vindas no topo — só o título e o
   Serrafinho, sem ícone nem subtítulo (a pedido, 15/09). O card cresce para o
   mascote caber inteiro; a faixa do boneco já diz "seja bem-vindo". */
/* Fundo: a foto da fachada (`--foto`, vinda da view) com um degradê azul por
   cima — forte na esquerda, onde está o texto, e mais leve na direita, onde o
   Serrafinho fica sobre o prédio. Texto em branco. */
.vis-boas-vindas {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    min-height: 280px; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
    overflow: hidden; color: #fff;
    --foto: url("../img/matriz-fachada.webp");
    background:
        linear-gradient(90deg, rgba(5, 24, 58, .97) 0%, rgba(5, 24, 58, .93) 40%, rgba(5, 24, 58, .72) 58%, rgba(8, 34, 78, .35) 78%, rgba(8, 34, 78, .25) 100%),
        var(--foto) center 62% / cover no-repeat, var(--cor-primaria);
}
/* ~~Título centralizado na vertical.~~ Título no alto e, embaixo, a mensagem
   de boas-vindas a quem visita (a pedido, 15/09). */
.vis-boas-vindas__txt { display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; gap: var(--sp-2); min-width: 0; padding-top: var(--sp-2); }
.vis-boas-vindas__txt h1 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.vis-boas-vindas__msg { margin: 0; max-width: 52ch; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.vis-boas-vindas__msg strong { display: block; margin-bottom: .15rem; color: #fff; }
.vis-boas-vindas__txt .btn { margin-top: var(--sp-2); }
.vis-boas-vindas__mascote {
    display: block; flex: none; width: auto; height: clamp(200px, 22vw, 260px); max-width: 45%;
    object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
}
@media (max-width: 575.98px) {
    .vis-boas-vindas {
        flex-direction: column; justify-content: center; text-align: center; min-height: 0; padding: var(--sp-4);
        background-image: linear-gradient(180deg, rgba(8, 34, 78, .9) 0%, rgba(8, 34, 78, .7) 55%, rgba(8, 34, 78, .35) 100%), var(--foto);
    }
    .vis-boas-vindas__txt { align-items: center; align-self: center; padding-top: 0; }
    .vis-boas-vindas__mascote { height: 200px; max-width: 100%; }
}

/* Home: cards 2% mais largos, a pedido (15/09). O container das seções da
   home vai de 1140 para 1163px; com 3 colunas e o mesmo espaçamento, cada
   card passa de ~353 para ~361px. Só na home — o resto do site fica igual. */
/* ~~1.02~~ Mais 4% a pedido (15/09): 1.06 → 1208px. */
.portal-sec > .container { max-width: calc(var(--container) * 1.06); }

/* Mini card "voltar" das telas de Visitas sobre o palco azul (16/09): o
   btn--ghost (transparente, texto escuro) sumia no fundo. Card branco com o
   ícone do módulo e o destino por extenso, à esquerda das ações. */
.vis-voltar {
    display: inline-flex; align-items: center; gap: .7rem; margin-right: auto;
    padding: .5rem .95rem .5rem .6rem; color: var(--cor-texto); text-decoration: none;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .14);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vis-voltar:hover, .vis-voltar:focus-visible { transform: translateY(-2px); border-color: var(--cor-primaria); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); color: var(--cor-texto); text-decoration: none; }
/* Ícone à DIREITA do texto (16/09, a pedido: "inverte o ícone de lugar"): o card
   continua o mesmo, só a ordem visual muda — a seta fica na ponta esquerda, o destino no meio. */
.vis-voltar__ic { display: grid; place-items: center; flex: none; order: 2; width: 38px; height: 38px; border-radius: 50%; background: var(--cor-primaria); color: #fff; }
.vis-voltar { padding: .5rem .6rem .5rem .95rem; }
.vis-voltar__ic svg { width: 18px; height: 18px; }
.vis-voltar__txt { display: flex; flex-direction: column; line-height: 1.2; }
/* ~~"← Voltar" em texto miúdo.~~ Rótulo em caixa alta espaçada com seta em ícone,
   que desliza para a esquerda no hover (16/09, a pedido: "muda a fonte e a seta"). */
.vis-voltar__txt small { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cor-texto-suave); }
.vis-voltar__seta { width: 13px; height: 13px; flex: none; transition: transform .18s ease; }
.vis-voltar:hover .vis-voltar__seta, .vis-voltar:focus-visible .vis-voltar__seta { transform: translateX(-3px); }
.vis-voltar__txt strong { font-size: 1rem; letter-spacing: -.01em; color: var(--cor-primaria); }
.vis-wizard__acoes { align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
/* No alto da página: um bloco só, com respiro até o cabeçalho. */
.vis-voltar--topo { margin: 0 0 var(--sp-3); }

/* ---- Painel de Visitas (gestão), 16/09: mais compacto ----
   ~~Duas colunas 1.6fr/1fr com cards empilhados~~ → grade de 3 colunas, cards
   alinhados ao topo e com padding menor. A pedido: "cards muito grandes e
   espalhados pela página". */
.vis-dash { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; margin-top: var(--sp-3); }
@media (min-width: 768px)  { .vis-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vis-dash { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vis-dash > .card { margin: 0; padding: var(--sp-3) var(--sp-4); }
.vis-dash > .card > .card__title, .vis-dash .vis-secao .card__title { font-size: 1.05rem; }
.vis-dash .vis-secao { margin-bottom: .4rem; }
.vis-dash .vis-vazio { font-size: .92rem; }
.vis-dash .form-hint { margin-top: .5rem; }
.vis-dash .vis-atalhos { gap: .5rem; }
.vis-dash .vis-atalho { padding: .5rem .7rem; }
/* KPIs mais baixos e mais perto do cabeçalho */
.vis-kpis { gap: var(--sp-3); margin-bottom: var(--sp-3); }
.vis-kpi { padding: .6rem var(--sp-3); gap: .05rem; border-radius: 12px; }
.vis-kpi__num { font-size: 1.6rem; }
.vis-kpi__lbl { font-size: .8rem; }
/* Botões do cabeçalho: neutros; azul só com o mouse em cima (a pedido, 16/09).
   "Nova visita" segue o mesmo desenho, só mais forte no peso da fonte. */
.vis-btn-cab { background: var(--cor-superficie); border: 1px solid var(--cor-borda); color: var(--cor-texto); font-weight: 600; }
.vis-btn-cab svg { color: var(--cor-texto-suave); transition: color .15s ease; }
.vis-btn-cab:hover, .vis-btn-cab:focus-visible { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; text-decoration: none; }
.vis-btn-cab:hover svg, .vis-btn-cab:focus-visible svg { color: #fff; }
/* ~~Borda azul.~~ Sem linha em volta (16/09, a pedido); só o texto e o + em azul. */
.vis-btn-cab--novo { font-weight: 700; border-color: transparent; color: var(--cor-primaria); }
.vis-btn-cab--novo svg { color: var(--cor-primaria); }
/* 16/09 (a pedido): calendário cheio em duas colunas e duas linhas — o maior
   card do painel, sem ser gigante (células mais baixas que na tela própria);
   Filiais no ano compacto (busca + chips rolando); Cadastros volta a ser um
   card comum de uma coluna. */
/* Posição fixa: colunas 2–3, linhas 1–3. Assim a ordem do HTML só manda na
   coluna 1 (Hoje, Filiais, Próximas, Cadastros) e o calendário fica sempre
   no alto à direita. Em tablet ocupa a largura toda na posição em que está. */
@media (min-width: 768px) and (max-width: 1099.98px) { .vis-dash > .vis-dash__cal { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .vis-dash > .vis-dash__cal { grid-column: 2 / 4; grid-row: 1 / span 3; } }
.vis-dash .cal-card .cal__dia { min-height: 3.6rem; padding: .25rem .3rem; }
.vis-dash .cal-card .cal__chip { font-size: .7rem; padding: .12rem .35rem; }
.vis-dash .cal-card .cal__semana span { font-size: .68rem; }
.vis-ano__busca { position: relative; display: block; margin: .3rem 0 .5rem; }
.vis-ano__busca svg { position: absolute; left: .55rem; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--cor-texto-suave); pointer-events: none; }
.vis-ano__busca input { width: 100%; padding: .42rem .6rem .42rem 1.9rem; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--cor-superficie); }
.vis-ano__busca input:focus { outline: 2px solid var(--cor-primaria); outline-offset: 1px; border-color: var(--cor-primaria); }
.vis-ano__lista { max-height: 6.4rem; overflow-y: auto; padding: .1rem .2rem .1rem 0; }
.vis-ano__nada { margin: .3rem 0 0; font-size: .85rem; }
.vis-ano__chip[hidden], .vis-ano__feitas li[hidden] { display: none; }
.vis-ano .vis-ano__barra { margin: .3rem 0 .5rem; }

/* Navegação de mês no calendário do painel (16/09). */
.cal-nav--dash { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
/* ~~.cal-nav--dash .btn--xs { min-width: 30px; }~~ 22/09: 30px deixava a seta
   com cara de texto solto; o mini card abaixo define o tamanho. */
/* 22/09 (a pedido: "melhora o contorno delas, quase não dá pra ver, faz tipo um
   mini card em volta de cada uma"): os controles do calendário do painel — ‹ · ›
   · Hoje · Abrir calendário — eram .btn--ghost de fundo transparente com a borda
   #e0e6ed, que some no branco do card. Viram mini cards, na mesma linguagem do
   .vis-mini__campo: fundo levemente cinza, borda de verdade e sombrinha. */
.cal-nav--dash { gap: .4rem; }
/* ~~borda #c3cfdd sobre fundo branco~~ 22/09, 3ª volta: "melhora o contorno das
   setas, muito fraco ainda, qualquer coisa escurece o mini card não tem
   problema, com a cor azul". O mini card passa a ser azul de verdade — fundo
   azul-claro, borda de 2px no azul vivo e texto no azul escuro da marca. */
.cal-nav--dash .btn {
    height: 36px; min-height: 0; min-width: 36px; padding: 0 .7rem;   /* altura fixa: com o chevron a 1.5rem as setas ficavam 4px mais altas que "Abrir calendário" */
    background: var(--vis-azul-bg); border: 2px solid var(--cor-primaria-clara); border-radius: 10px;
    color: var(--cor-primaria); font-weight: 700;
    box-shadow: 0 1px 3px rgba(23, 52, 140, .14);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
/* As setas ficam quadradas, com o chevron maior — em 30px de largura elas
   pareciam texto solto, não botão. */
.cal-nav--dash .btn[aria-label^="Mês"], .cal-nav--dash .btn[aria-label^="Próximo"] {
    padding: 0; font-size: 1.5rem; font-weight: 700; line-height: 1;
}
/* Selecionado: inverte para o azul cheio — o mesmo desenho dos outros cards. */
.cal-nav--dash .btn:hover, .cal-nav--dash .btn:focus-visible {
    background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff;
    box-shadow: 0 4px 10px rgba(23, 52, 140, .28); transform: translateY(-1px); text-decoration: none;
}
.cal-nav--dash .btn:active { transform: translateY(0); }
.vis-dash .cal-card .form-hint { margin: .2rem 0 .6rem; }

/* Suporte TI: WhatsApp e Teams como pílulas de contato (16/09) — na cor de
   cada serviço, para o olho achar rápido no meio de e-mail e ramal. */
.pessoa__contato { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
.pessoa__contato--whats { background: #e7f8ee; color: #1b7f4b; }
.pessoa__contato--whats:hover { background: #25d366; color: #fff; text-decoration: none; }
.pessoa__contato--teams { background: #ece9f7; color: #4b53bc; }
.pessoa__contato--teams:hover { background: #5059c9; color: #fff; text-decoration: none; }

/* Cards de página empilhados direto no conteúdo (16/09, a pedido: "na aba
   Auditoria os cards estão muito juntos"): o .card não tem margem porque nas
   outras telas ele vive em grids; quando dois ficam irmãos no nível da página,
   ganham o mesmo respiro dos grids. Vale para o site inteiro — a varredura
   achou só a Auditoria hoje, mas a regra cobre qualquer tela futura. */
.app-main .container > .card + .card,
.app-main > .card + .card { margin-top: var(--sp-4); }

/* Atalhos (Cadastros, "Criar a primeira visita"): azul cheio ao passar o mouse
   ou focar — 16/09, a pedido ("o azul ao selecionar o mini card"). O disco do
   ícone inverte para branco, senão some no fundo azul. */
.vis-atalho { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.vis-atalho:hover, .vis-atalho:focus-visible { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; text-decoration: none; transform: translateY(-1px); }
.vis-atalho:hover small, .vis-atalho:focus-visible small { color: rgba(255, 255, 255, .85); }
.vis-atalho:hover .vis-setor__ic, .vis-atalho:focus-visible .vis-setor__ic { background: #fff; color: var(--cor-primaria); }
.vis-atalho--acao { border-style: dashed; }
.vis-atalho--acao:hover, .vis-atalho--acao:focus-visible { border-style: solid; }

/* Fileira de mini cards no alto da tela (16/09): o de voltar à esquerda, ações
   à direita — padrão do site para "voltar" + atalhos de contexto. */
.mini-acoes { display: flex; align-items: stretch; gap: .6rem; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.mini-acoes > .vis-voltar--topo { margin: 0; }
.mini-acoes > .vis-voltar--topo:first-child { margin-right: auto; }
/* Ação (não é voltar): sem seta, rótulo pequeno + destaque; alerta pinta o disco de amarelo. */
.mini-acao .vis-voltar__txt small { text-transform: uppercase; }
.mini-acao--alerta .vis-voltar__ic { background: var(--vis-amarelo); }
.mini-acao--alerta .vis-voltar__txt strong { color: var(--vis-amarelo); }
.mini-acao--alerta:hover .vis-voltar__ic { background: var(--cor-primaria); }
.mini-acao--alerta:hover .vis-voltar__txt strong { color: var(--cor-primaria); }
/* O mini card em página de impressão some ao imprimir, junto com a barra de ações. */
@media print { .vis-voltar { display: none !important; } }

/* 404: linha "você está conectado como…" (16/09) — resolve a confusão de quem
   troca de conta no mesmo navegador e cai no 404 das rotas sem permissão. */
.error-page__sessao { margin: -.5rem 0 var(--sp-4); color: var(--cor-texto-suave); }
.error-page__sessao small { display: inline-block; margin-top: .35rem; color: var(--cor-texto-suave); opacity: .85; }

/* Promocionais: dois grupos retráteis (16/09, a pedido) — ativas abertas,
   inativas fechadas. <details> nativo: sem JS, e o navegador lembra o estado. */
.mural-grupo { padding: 0; margin-bottom: var(--sp-3); overflow: hidden; }
.mural-grupo > summary {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    cursor: pointer; list-style: none; user-select: none;
}
.mural-grupo > summary::-webkit-details-marker { display: none; }
.mural-grupo > summary::after {
    content: ''; width: 10px; height: 10px; margin-left: auto; flex: none;
    border-right: 2px solid var(--cor-texto-suave); border-bottom: 2px solid var(--cor-texto-suave);
    transform: rotate(-45deg); transition: transform .18s ease;
}
.mural-grupo[open] > summary::after { transform: rotate(45deg); }
.mural-grupo__ic { font-size: 1.5rem; line-height: 1; }
.mural-grupo__txt { display: flex; flex-direction: column; line-height: 1.25; }
.mural-grupo__txt strong { font-size: 1.05rem; }
.mural-grupo__txt small { color: var(--cor-texto-suave); }
.mural-grupo__n { min-width: 2rem; padding: .2rem .6rem; border-radius: 999px; text-align: center; font-weight: 700; font-size: .85rem; background: var(--cor-bg); color: var(--cor-texto); }
.mural-grupo--ativas { border-left: 4px solid var(--cor-ok); }
.mural-grupo--ativas .mural-grupo__n { background: var(--cor-ok-bg); color: var(--cor-ok); }
.mural-grupo--inativas { border-left: 4px solid var(--cor-borda); }
.mural-cards--grupo { padding: 0 var(--sp-4) var(--sp-4); }
.mural-card--inativa { opacity: .8; border-left-color: var(--cor-borda); }
.mural-card--inativa .mural-card__ic { filter: grayscale(1); }
.badge-encerrada { background: var(--cor-texto-suave); color: #fff; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
/* ~~Um grupo sobre o outro.~~ Lado a lado a partir do tablet (16/09, a pedido);
   no celular empilha. Alinhados ao topo: recolher um não estica o outro. */
.mural-grupos { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; }
@media (min-width: 768px) { .mural-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mural-grupos > .mural-grupo { margin-bottom: 0; }
.mural-grupos .mural-card { padding: var(--sp-3); gap: var(--sp-2); }
.mural-grupos .mural-card__title { font-size: 1rem; }
/* Promoção inativa trancada (16/09): quem não é admin/master vê o card, mas
   sem link — cadeado no lugar do ícone e o aviso embaixo das datas. */
.mural-card--trancada { cursor: not-allowed; }
.mural-card--trancada .mural-card__hit { cursor: not-allowed; }
.mural-card--trancada:hover { transform: none; box-shadow: var(--sombra); }
.mural-card__cadeado { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .78rem; font-weight: 600; color: var(--cor-texto-suave); }
/* Evento: baixar a arte (JPEG/PDF) e compartilhar o vídeo — mini cards com ícone
   em disco, no padrão dos atalhos do site (16/09; ~~btn--ghost com emoji~~). */
.baixar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.baixar__rotulo { width: 100%; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); }
.baixar__opcao {
    --c: var(--cor-primaria);
    display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .5rem;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 12px;
    color: var(--cor-texto); text-decoration: none; font: inherit; cursor: pointer; text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.baixar__opcao:hover, .baixar__opcao:focus-visible { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 8px 18px rgba(0, 0, 0, .12); text-decoration: none; color: var(--cor-texto); }
.baixar__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c); color: #fff; }
.baixar__ic svg { width: 18px; height: 18px; }
.baixar__txt { display: flex; flex-direction: column; line-height: 1.2; }
.baixar__txt strong { font-size: .95rem; color: var(--c); }
.baixar__txt small { font-size: .74rem; color: var(--cor-texto-suave); }
.baixar__seta { display: grid; place-items: center; width: 22px; height: 22px; margin-left: .2rem; color: var(--cor-texto-suave); transition: transform .15s ease, color .15s ease; }
.baixar__seta svg { width: 16px; height: 16px; }
.baixar__opcao:hover .baixar__seta { transform: translateY(2px); color: var(--c); }
.baixar__opcao--jpeg { --c: var(--cor-primaria); }
.baixar__opcao--pdf  { --c: #c62828; }
.baixar__opcao--link { --c: var(--cor-acento); }
.baixar__opcao--yt   { --c: #d32f2f; }
.baixar__opcao.is-ok { --c: var(--cor-ok); border-color: var(--cor-ok); }
.baixar--video { margin-top: .8rem; }
.evento__media figcaption.baixar { justify-content: center; }
@media (max-width: 575.98px) { .baixar__opcao { flex: 1 1 100%; } }

.evento__media figcaption.baixar .baixar__rotulo { text-align: center; }

/* Card do mural, controles de admin (16/09): "Editar datas" abre um mini formulário
   no próprio card; "Reativar" só aparece na vencida. */
.mural-card { flex-wrap: wrap; }
.mural-card__admin { flex-basis: 100%; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; padding-top: .6rem; border-top: 1px dashed var(--cor-borda); }
.mural-datas { flex: 1 1 auto; }
.mural-datas > summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; font-size: .82rem; font-weight: 600; color: var(--cor-primaria); }
.mural-datas > summary::-webkit-details-marker { display: none; }
.mural-datas > summary svg { width: 15px; height: 15px; }
.mural-datas__form { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.mural-datas__form label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; font-weight: 600; color: var(--cor-texto-suave); }
.mural-datas__form input[type="date"] { padding: .35rem .5rem; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--cor-superficie); }
.mural-datas__form small { flex-basis: 100%; }
.mural-reativar { display: inline-flex; align-items: center; gap: .35rem; }
.mural-reativar svg { width: 14px; height: 14px; }

/* ==========================================================================
   Solicitação de Ausência (17/09/2026). Mesma paleta de status das Visitas
   (`--vis-*`), mesmos mini cards e cabeçalho; o que é próprio leva `aus-`.
   ========================================================================== */
/* Cabeçalho: o ícone do módulo (máscara branca) dentro do disco azul. */
.aus-cabecalho__ic .ico { width: 1.7rem; height: 1.7rem; color: #fff; }
.aus-cabecalho--verde .rel-cabecalho__ic { background: var(--vis-verde); }
.aus-cabecalho--amarelo .rel-cabecalho__ic { background: var(--vis-amarelo); }
.aus-cabecalho--vermelho .rel-cabecalho__ic { background: var(--vis-vermelho); }
.aus-cabecalho--cinza .rel-cabecalho__ic { background: var(--vis-cinza); }
.aus-rotulo { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); }

.aus-secao { margin-bottom: var(--sp-4); }
.aus-secao .vis-secao { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.aus-secao .card__title { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.aus-secao__ic { width: 20px; height: 20px; color: var(--cor-primaria); }
/* "Já respondidos" retrátil: o <summary> é o cabeçalho da seção. */
.aus-secao--retratil > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.aus-secao--retratil > summary::-webkit-details-marker { display: none; }
.aus-secao--retratil > summary .card__title::before { content: "\25B8"; display: inline-block; font-size: .9em; color: var(--cor-texto-suave); transition: transform .15s ease; }
.aus-secao--retratil[open] > summary { margin-bottom: var(--sp-3); }
.aus-secao--retratil[open] > summary .card__title::before { transform: rotate(90deg); }

.aus-mes { display: flex; align-items: baseline; gap: .5rem; margin: var(--sp-3) 0 var(--sp-2); font-size: .95rem; color: var(--cor-primaria); }
.aus-mes:first-of-type { margin-top: 0; }
.aus-mes .muted { font-size: .8rem; font-weight: 500; }

/* Um pedido na lista: bloco de data à esquerda, texto no meio, status à direita. */
.aus-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.aus-item__link {
    display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
    padding: .7rem .9rem; color: inherit; text-decoration: none;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-left: 5px solid var(--vis-neutro); border-radius: 12px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.aus-item__link:hover, .aus-item__link:focus-visible { transform: translateY(-1px); border-color: var(--cor-primaria); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); text-decoration: none; color: inherit; }
.aus-item--pendente .aus-item__link { border-left-color: var(--vis-amarelo); }
.aus-item--aprovada .aus-item__link { border-left-color: var(--vis-verde); }
.aus-item--recusada .aus-item__link { border-left-color: var(--vis-vermelho); }
.aus-item--cancelada .aus-item__link { border-left-color: var(--vis-cinza); opacity: .75; }
.aus-item.is-hoje .aus-item__data { background: var(--cor-primaria); color: #fff; }
.aus-item__data { display: grid; place-items: center; padding: .35rem 0; border-radius: 10px; background: var(--vis-neutro-bg); color: var(--cor-primaria); line-height: 1; }
.aus-item__data strong { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.aus-item__data small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.aus-item__txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.aus-item__motivo { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem; }
.aus-item__motivo svg { width: 18px; height: 18px; flex: none; color: var(--cor-primaria); }
.aus-item__meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .84rem; color: var(--cor-texto-suave); }
.aus-item__meta strong { color: var(--cor-texto); font-weight: 600; }
.aus-item__lado { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.aus-item__cta { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--cor-primaria); }
@media (max-width: 575.98px) {
    .aus-item__link { grid-template-columns: 3rem minmax(0, 1fr); }
    .aus-item__lado { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Vazio: convite para o primeiro pedido. */
.aus-vazio { display: grid; gap: .5rem; justify-items: start; padding: var(--sp-3) 0 var(--sp-2); }
.aus-vazio p { margin: 0; }

/* Formulário do pedido */
.aus-form__bloco { border: 0; margin: 0 0 var(--sp-4); padding: 0; min-width: 0; }
.aus-form__bloco legend { padding: 0; margin-bottom: var(--sp-2); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); }
.form-label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; }
.aus-opcoes { display: inline-flex; border: 1px solid var(--cor-borda); border-radius: 10px; overflow: hidden; }
.aus-opcao { position: relative; display: inline-flex; }
.aus-opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.aus-opcao span { padding: .55rem 1.1rem; font-weight: 600; font-size: .92rem; color: var(--cor-texto-suave); background: var(--cor-superficie); transition: background .15s ease, color .15s ease; }
.aus-opcao + .aus-opcao span { border-left: 1px solid var(--cor-borda); }
.aus-opcao input:checked + span { background: var(--cor-primaria); color: #fff; }
.aus-opcao input:focus-visible + span { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.aus-form__acoes { justify-content: flex-end; }

/* Detalhe do pedido: dados à esquerda, resposta à direita. */
.aus-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 992px) { .aus-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.aus-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0 0; }
.aus-dados > div { min-width: 0; }
.aus-dados--largo { grid-column: 1 / -1; }
.aus-dados dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); }
.aus-dados dd { margin: .15rem 0 0; font-size: .98rem; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .aus-dados { grid-template-columns: 1fr; } }
.aus-resposta { border-top: 5px solid var(--vis-neutro); }
.aus-resposta--amarelo { border-top-color: var(--vis-amarelo); }
.aus-resposta--verde { border-top-color: var(--vis-verde); }
.aus-resposta--vermelho { border-top-color: var(--vis-vermelho); }
.aus-resposta--cinza { border-top-color: var(--vis-cinza); }
.aus-resposta__txt { margin: var(--sp-2) 0 0; padding: .75rem 1rem; border-left: 4px solid var(--cor-borda); background: var(--cor-bg); border-radius: 0 10px 10px 0; font-style: italic; }
.aus-cancelar { margin-top: var(--sp-3); }

/* Gestão: encaminhamento em lista e linha liberada em destaque. */
.aus-fluxo__lista { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.aus-fluxo__lista li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; background: var(--vis-neutro-bg); border-radius: 999px; font-size: .9rem; }
.aus-fluxo__seta { color: var(--cor-primaria); font-weight: 700; }
.table tr.is-liberado td { background: var(--vis-verde-bg); }
.aus-tabela td { vertical-align: middle; }
/* Cabeçalho: no desktop a tag de status fica à direita do texto, não embaixo (o subtítulo é longo e empurrava). */
@media (min-width: 768px) { .aus-cabecalho { flex-wrap: nowrap; } .aus-cabecalho .rel-cabecalho__main { flex: 1 1 auto; min-width: 0; } .aus-cabecalho > .vis-status, .aus-cabecalho > .tag { flex: none; } }

/* Visitas (colaborador) — aceitar/recusar a atividade (Etapa 3, 17/09). A recusa abre num <details>: sem JS, a CSP não deixa inline. */
.vis-resposta { display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap; margin: .35rem 0 .6rem; padding-left: 3.9rem; }
.vis-resposta .inline-form { margin: 0; }
.vis-recusa { position: relative; }
.vis-recusa > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.vis-recusa > summary::-webkit-details-marker { display: none; }
.vis-recusa[open] > summary { background: var(--vis-vermelho-bg); color: var(--vis-vermelho); border-color: var(--vis-vermelho); }
.vis-recusa__form { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; margin-top: .6rem; padding: .75rem .9rem; background: var(--vis-vermelho-bg); border: 1px solid var(--vis-vermelho); border-radius: 12px; }
.vis-recusa__form .form-field { margin: 0; }
.vis-recusa__form label { font-size: .8rem; }
.vis-resposta__nota { margin: .2rem 0 .6rem; padding-left: 3.9rem; font-size: .85rem; }
@media (max-width: 767.98px) { .vis-resposta, .vis-resposta__nota { padding-left: 0; } .vis-recusa__form { grid-template-columns: 1fr; } }

/* ==========================================================================
   Visitas — ajustes de design (17/09/2026, a pedido: "arrume o card próximas
   visitas, o card dados da visita e o cronograma — texto muito perto do botão").
   ========================================================================== */
/* Item de visita (Próximas, Hoje, Histórico, lista): em coluna estreita a tag de
   status roubava a largura do texto e a filial sumia, o resto quebrava palavra a
   palavra. Agora a tag fica ABAIXO do texto por padrão e só volta para a direita
   quando o container tem largura (container query). */
.vis-visitas { container-type: inline-size; }
.vis-visita { grid-template-columns: 4.6rem minmax(0, 1fr); align-items: start; row-gap: .4rem; }
.vis-visita__quando { padding-top: .1rem; }
.vis-visita__quando strong { font-size: .95rem; white-space: nowrap; }
.vis-visita__txt strong { white-space: normal; overflow: visible; line-height: 1.25; }
.vis-visita__txt small { line-height: 1.45; }
.vis-visita > .vis-status { grid-column: 2; justify-self: start; }
@container (min-width: 560px) {
    .vis-visita { grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; }
    .vis-visita > .vis-status { grid-column: auto; justify-self: end; }
}

/* Cronograma: mais ar entre o texto e a coluna de status/botões, que ganha um
   filete à esquerda; os botões ficam um pouco maiores e espaçados. */
.vis-tl__card { gap: var(--sp-3); align-items: stretch; }
.vis-tl__ic { align-self: center; }
.vis-tl__txt { justify-content: center; gap: .18rem; padding-right: .25rem; }
.vis-tl__txt > strong { line-height: 1.25; }
.vis-tl__andares { display: block; color: var(--cor-texto-suave); font-size: .78rem; line-height: 1.4; }
.vis-tl__lado { justify-content: space-between; gap: .55rem; padding-left: var(--sp-3); border-left: 1px solid var(--cor-borda); min-width: 8.5rem; }
.vis-tl__acoes { gap: .3rem; }
.vis-tl__acoes .btn--xs { min-width: 30px; height: 30px; padding: 0 .45rem; display: inline-grid; place-items: center; }
@media (max-width: 575.98px) {
    .vis-tl__card { flex-wrap: wrap; }
    .vis-tl__lado { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding-left: 0; padding-top: .5rem; border-left: 0; border-top: 1px solid var(--cor-borda); min-width: 0; }
}

/* "Incluir atividade": "Opcional" e o botão dividiam a mesma célula, colados. */
.form-field--fim { gap: var(--sp-3); flex-wrap: wrap; align-items: center; padding-top: 1.55rem; }
.form-field--fim .check { margin: 0; white-space: nowrap; }
.form-field--fim .btn { margin-left: auto; }

/* Dados da visita: resumo em duas colunas sempre visível; a edição é um
   "Editar dados" retrátil, com o formulário dentro de um bloco próprio. */
.vis-dados__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0 0; }
.vis-dados__lista > div { min-width: 0; }
.vis-dados--largo { grid-column: 1 / -1; }
.vis-dados__lista dt { font-size: .74rem; font-weight: 600; color: var(--cor-texto-suave); }
.vis-dados__lista dd { margin: .15rem 0 0; font-size: .95rem; overflow-wrap: anywhere; }
.vis-dados__editar { margin-top: var(--sp-4); }
.vis-dados__editar > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.vis-dados__editar > summary::-webkit-details-marker { display: none; }
.vis-dados__editar[open] > summary { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.vis-dados__editar > form { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-2); border: 1px solid var(--cor-borda); border-radius: 12px; background: var(--cor-bg); }
/* ~~@media (max-width: 575.98px)~~ o número de colunas passou a vir do tamanho do próprio card (container query, no fim deste arquivo). */
.form-field--fim { padding-top: 1.7rem; }
.form-field--fim .check { white-space: normal; }
.vis-incluir__acoes { justify-content: flex-end; margin-top: var(--sp-2); }
.vis-respostas td { vertical-align: top; }
.rel-cabecalho__acoes .vis-status { text-decoration: none; }

/* ==========================================================================
   Visitas — cronograma interativo (18/09/2026): editar no lugar, arrastar e
   soltar, "Incluir atividade" em card próprio
   ========================================================================== */
/* ~~.vis-add colado no fim do card do cronograma~~ agora é card próprio (#incluir). */
.vis-incluir .vis-add { margin-top: 0; padding-top: 0; border-top: 0; }
.vis-duas--visita > div > .card + .card { margin-top: var(--sp-4); }

.vis-tl__grip { display: none; align-items: center; justify-content: center; width: 22px; height: 26px; border-radius: 6px; color: var(--cor-texto-suave); }
.vis-tl--arrastavel .vis-tl__grip { display: inline-flex; cursor: grab; }
.vis-tl--arrastavel .vis-tl__grip:hover { background: var(--cor-bg); color: var(--cor-primaria); }
.vis-tl--arrastavel .vis-tl__item.is-arrastando { opacity: .45; }
.vis-tl--arrastavel .vis-tl__item.is-arrastando .vis-tl__card { border-style: dashed; }
.vis-tl.is-salvando .vis-tl__hora { opacity: .5; }
.vis-tl__dica { margin: var(--sp-2) 0 0; font-size: .8rem; }
.vis-tl__item.is-editando .vis-tl__form { border-left-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(31, 78, 121, .12); }
.vis-tl__form .form-actions { margin-top: 0; }

/* ==========================================================================
   Visitas — pessoas fora do sistema (18/09/2026) e mini card de imprimir
   ========================================================================== */
.vis-externos { margin-top: var(--sp-4); }
.vis-externos__form { margin-bottom: var(--sp-3); }
.vis-externos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .4rem; }
.vis-externos__lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: .5rem .8rem; border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-superficie); }
.vis-externos__nome { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
@media (min-width: 768px) { .vis-externos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .vis-externos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ~~Botão solto "Imprimir / salvar em PDF" ao lado do Voltar~~ — mini card no
   mesmo desenho do Voltar (ícone à direita, sem seta), a pedido. */
.vis-voltar--acao { margin-right: 0; cursor: pointer; font: inherit; }
.vis-voltar--acao .vis-voltar__ic { order: 2; }
.vis-voltar--acao .vis-voltar__txt { order: 1; text-align: left; }
.vis-voltar--acao:hover .vis-voltar__ic, .vis-voltar--acao:focus-visible .vis-voltar__ic { background: var(--cor-primaria-escura, #163a5c); }

/* ==========================================================================
   Visitas — tela da visita (18/09/2026, 11:10, a pedido): "Incluir atividade"
   pequeno e retrátil ACIMA do cronograma; "Dados da visita" compacto;
   card "Histórico" removido.
   ========================================================================== */
/* ~~.vis-incluir como <section> grande abaixo do cronograma~~ agora é <details>. */
.vis-incluir--retratil { padding: .7rem var(--sp-4); }
.vis-incluir--retratil > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.vis-incluir--retratil > summary::-webkit-details-marker { display: none; }
.vis-incluir--retratil > summary .card__title { margin: 0; display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; }
.vis-incluir--retratil > summary .card__title::before { content: "\25B8"; display: inline-block; font-size: .9em; color: var(--cor-texto-suave); transition: transform .15s ease; }
.vis-incluir--retratil[open] > summary .card__title::before { transform: rotate(90deg); }
.vis-incluir--retratil > summary .muted { font-size: .8rem; }
.vis-incluir--retratil > summary:hover .card__title { color: var(--cor-primaria); }
.vis-incluir--retratil > .vis-add { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--cor-borda); }
.vis-add__grid { display: grid; grid-template-columns: 1fr; gap: .6rem var(--sp-3); align-items: end; }
.vis-add__grid .form-field { margin: 0; min-width: 0; }
.vis-add__grid .form-field[hidden] { display: none !important; }
.vis-add__grid label { display: block; margin-bottom: .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); }
.vis-add__grid select, .vis-add__grid input { width: 100%; }
.vis-add__acao .btn { white-space: nowrap; }
@media (min-width: 768px) {
    /* Tipo · Setor OU Título · Duração · Responsável · botão — Setor/Título alternam no mesmo trilho. */
    .vis-add__grid { grid-template-columns: 9.5rem minmax(0, 1.2fr) 5rem minmax(0, 1.4fr) auto; }
}
@media (max-width: 767.98px) { .vis-add__acao .btn { width: 100%; } }

/* Dados da visita compacto: 3 colunas, fonte menor, "Editar dados" fechado (era o form aberto que dobrava o card). */
.vis-dados--compacto .vis-dados__lista { gap: .55rem var(--sp-3); margin-top: .6rem; }
.vis-dados--compacto .vis-dados__lista dt { font-size: .66rem; }
.vis-dados--compacto .vis-dados__lista dd { font-size: .88rem; margin-top: .05rem; }
.vis-dados--compacto .vis-dados__editar { margin-top: var(--sp-3); }
/* ~~@media (min-width: 768px) → 3 colunas; @media (992–1199) → 2.~~ REMOVIDAS em
   23/09/2026. Elas mediam a JANELA, e este card vive numa coluna lateral de ~390px:
   em tela de 1366 a lista abria em três colunas de 120px, onde "RH responsável"
   virava "RH RESPONSÁV…". Quem manda agora é a largura do próprio card, no bloco
   de container queries no fim deste arquivo. */

/* 18/09 11:50 (a pedido): nome do responsável "um pouco maior" no cronograma; item sumindo ao remover sem recarregar. */
.vis-tl__txt small.vis-tl__resp { font-size: .92rem; color: var(--cor-texto); }
.vis-tl__txt small.vis-tl__resp .muted, .vis-tl__txt small.vis-tl__resp em { font-size: .82rem; }
.vis-tl__item.is-removendo { opacity: .4; pointer-events: none; transition: opacity .15s ease; }

/* 18/09 12:20 (a pedido: "o design interior não me agradou"): Incluir atividade por dentro —
   painel leve, rótulos em caixa normal, botão com a ação. Sobrescreve o bloco de 11:10. */
.vis-incluir--retratil > .vis-add { margin-top: .8rem; padding: .85rem .95rem .7rem; border: 1px solid var(--cor-borda); border-radius: 12px; background: var(--cor-bg); border-top: 1px solid var(--cor-borda); }
.vis-add__grid label { font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cor-texto); margin-bottom: .3rem; }
.vis-add__grid select, .vis-add__grid input { min-height: 2.5rem; }
.vis-add__acao .btn { min-height: 2.5rem; }
.vis-add__dica { margin: .55rem 0 0; font-size: .8rem; color: var(--cor-texto-suave); }
.vis-incluir--retratil > summary .muted { color: var(--cor-texto-suave); }
@media (min-width: 768px) {
    .vis-add__grid { grid-template-columns: 9.5rem minmax(0, 1.2fr) 5.5rem minmax(0, 1.4fr) auto; }
}
/* 12:25: em uma linha só o botão esmagava Setor e Responsável — duas linhas por área. */
@media (min-width: 768px) {
    .vis-add__grid { grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem; grid-template-areas: "tipo setor dur" "resp resp acao"; }
    .vis-add__tipo { grid-area: tipo; }
    .vis-add__setor { grid-area: setor; }
    .vis-add__dur { grid-area: dur; }
    .vis-add__resp { grid-area: resp; }
    .vis-add__acao { grid-area: acao; justify-self: end; }
}
/* 12:30: Responsável + botão numa linha flex própria (o botão passava por cima do select); altura fixa nos campos. */
.vis-add__grid { align-items: start; }
.vis-add__grid select, .vis-add__grid input { height: 2.5rem; min-height: 0; }
.vis-add__linha { grid-column: 1 / -1; display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.vis-add__linha .vis-add__resp { flex: 1 1 14rem; min-width: 0; }
.vis-add__linha .vis-add__acao { flex: 0 0 auto; }
@media (min-width: 768px) {
    .vis-add__grid { grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem; grid-template-areas: "tipo setor dur" "linha linha linha"; }
    .vis-add__linha { grid-area: linha; }
    .vis-add__acao { justify-self: auto; }
}
@media (max-width: 767.98px) { .vis-add__linha .vis-add__acao { flex-basis: 100%; } .vis-add__linha .vis-add__acao .btn { width: 100%; } }
.vis-add__so-setor { display: block; margin-top: .3rem; font-size: .76rem; color: var(--cor-texto-suave); }
/* 12:40: card de rascunho com lixeira ao lado (o card é um <a>; o form fica fora dele). */
.vis-visita-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.vis-visita-linha > .vis-visita { min-width: 0; }
.vis-visita-linha > form { align-self: center; margin: 0; }
.vis-visita-linha > form > .btn--xs { min-height: 0; min-width: 32px; height: 32px; padding: 0 .5rem; display: inline-grid; place-items: center; }   /* mesmo tamanho da lixeira do cronograma */
/* 13:15: excluir rascunho sem recarregar — linha/seção esmaecem enquanto somem. */
.vis-visita-linha.is-removendo, #rascunhos.is-removendo { opacity: .35; pointer-events: none; transition: opacity .3s ease; }

/* ~~Impressão A4 como linha do tempo com ícones (13:30) e compactação em uma folha (13:50–14:05).~~
   18/09 14:30, a pedido ("volta para o modelo antigo a impressão"): blocos removidos; a view voltou
   à tabela .vis-imp__tabela, cujo CSS segue acima. Histórico em docs/registro-de-trabalho.md. */
.vis-secao__lado { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.vis-secao__lado .btn--sm { min-height: 32px; padding: .25rem .7rem; }

/* 18/09 14:10 (a pedido: "tem uns cards tortos, arruma"): lado direito do item do cronograma alinhado —
   etiqueta e botões na MESMA linha, centrados; lixeira do mesmo tamanho dos outros botões. */
.vis-tl__lado { flex-direction: row; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; flex-wrap: wrap; }
.vis-tl__acoes { align-items: center; }
.vis-tl__acoes .btn { min-height: 0; height: 30px; min-width: 30px; padding: 0 .45rem; display: inline-grid; place-items: center; line-height: 1; }
.vis-tl__acoes .btn svg { width: 13px; height: 13px; }
.vis-tl__acoes .inline-form { margin: 0; display: inline-flex; }
.vis-tl__lado .vis-status { white-space: nowrap; }
/* cabeçalho da visita: etiqueta de status junto dos botões, na mesma linha */
.vis-cab__lado { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .6rem var(--sp-3); }
.vis-cab__lado .rel-cabecalho__acoes { margin: 0; }
/* Dados da visita: rótulo curto não quebra a grade */
.vis-dados__lista dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .vis-tl__lado { justify-content: space-between; } }
.vis-tl__titulo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; line-height: 1.25; }
.vis-tl__titulo .vis-status { font-size: .72rem; padding: .1rem .5rem; }
.vis-tl__lado { min-width: 0; padding-left: var(--sp-2); }

/* ==========================================================================
   Impressão A4 — proposta C escolhida (18/09/2026 15:10): dados e boas-vindas
   lado a lado; cronograma em duas colunas de cartões; faixa de encerramento.
   ========================================================================== */
.vis-imp { padding: 12mm 12mm 11mm; }
.vis-imp__cab { gap: 6mm; padding-bottom: 3mm; margin-bottom: 3mm; border-bottom-width: 2px; }
.vis-imp__logo { width: 26mm; }
.vis-imp__cab h1 { font-size: 17pt; }
.vis-imp__codigo span { color: #fff; background: var(--imp-azul); border-color: var(--imp-azul); font-size: 11pt; }
.vis-imp__topo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4mm; margin: 0 0 3.5mm; }
.vis-imp__dados--c { grid-template-columns: 1fr 1fr; gap: 1.8mm 4mm; margin: 0; padding: 3mm 4mm; align-content: start; }
.vis-imp__dados--c dt { font-size: 7.2pt; margin-bottom: .3mm; }
.vis-imp__dados--c dd { font-size: 9.8pt; font-weight: 600; }
.vis-imp__boas--c { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 3mm 4mm 3mm 3.5mm; }
.vis-imp__boas--c h2 { font-size: 11pt; margin-bottom: 1mm; }
.vis-imp__boas--c p { font-size: 8.6pt; line-height: 1.35; margin: 0; }
.vis-imp__boas--c .vis-imp__assina { margin-top: 1.5mm !important; }
.vis-imp__boas--c .vis-imp__assina span { font-size: 7.8pt; }
.vis-imp__crono--c h2 { justify-content: space-between; font-size: 12pt; margin-bottom: 2mm; }
.vis-imp__crono--c h2 small { font-size: 8.5pt; font-weight: 600; color: var(--imp-suave); }
.vis-imp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; align-items: start; }
.vis-imp__col h3 { margin: 0 0 1.5mm; font-size: 8pt; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--imp-azul); padding: 1.4mm 3mm; border-radius: 6px; display: flex; justify-content: space-between; }
.vis-imp__col h3 span { font-weight: 600; letter-spacing: 0; text-transform: none; color: #dbe7f3; }
.vis-imp__cartao { display: grid; grid-template-columns: 15mm 6.5mm minmax(0, 1fr); gap: 0 2mm; align-items: center; padding: 1.5mm 2mm; border: 1px solid var(--imp-linha); border-radius: 7px; margin-bottom: 1.6mm; background: #fff; break-inside: avoid; page-break-inside: avoid; }
.vis-imp__cartao--pausa { background: #f7f9fc; border-style: dashed; }
.vis-imp__cartao-h { display: flex; flex-direction: column; line-height: 1.05; font-variant-numeric: tabular-nums; }
.vis-imp__cartao-h strong { font-size: 10.5pt; color: var(--imp-azul); }
.vis-imp__cartao-h small { font-size: 7.2pt; color: var(--imp-suave); margin-top: .5mm; }
.vis-imp__cartao-ic { width: 6.5mm; height: 6.5mm; border-radius: 50%; background: var(--imp-azul-claro); color: var(--imp-azul); display: grid; place-items: center; }
.vis-imp__cartao-ic svg { width: 3.8mm; height: 3.8mm; }
.vis-imp__cartao-t { min-width: 0; }
.vis-imp__cartao-t > strong { display: block; font-size: 9.6pt; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vis-imp__cartao-q { display: flex; align-items: center; justify-content: space-between; gap: 2mm; font-size: 8.6pt; color: var(--imp-tinta); font-weight: 600; margin-top: .4mm; }
.vis-imp__cartao-q em { font-style: normal; font-weight: 400; color: #8a97a6; }
.vis-imp__cartao-q b { font-weight: 700; font-size: 7.6pt; color: var(--imp-azul); background: var(--imp-azul-claro); padding: .3mm 1.8mm; border-radius: 999px; white-space: nowrap; }
.vis-imp__cartao-meta { display: block; font-size: 7.4pt; color: var(--imp-suave); line-height: 1.3; margin-top: .3mm; }
.vis-imp__fimc { margin-top: 1mm; padding: 2mm 3mm; border-radius: 7px; background: var(--imp-azul); color: #fff; display: flex; align-items: center; gap: 2.5mm; font-size: 9.5pt; flex-wrap: wrap; }
.vis-imp__fimc svg { width: 4.5mm; height: 4.5mm; }
.vis-imp__fimc strong { font-size: 10.5pt; }
.vis-imp__fimc small { margin-left: auto; color: #dbe7f3; }
@media screen and (max-width: 720px) {   /* 18/09 17:05: só na tela — no papel a largura útil (~703px) caía aqui e empilhava as colunas */
    .vis-imp__topo, .vis-imp__cols { grid-template-columns: 1fr; }
    .vis-imp__dados--c { grid-template-columns: 1fr 1fr; }
}
@media print {
    .vis-imp { padding: 0; }
    .vis-imp__cartao-ic, .vis-imp__col h3, .vis-imp__fimc, .vis-imp__cartao-q b, .vis-imp__codigo span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 18/09 15:30 (a pedido: "arruma os cards que estão tortos"): no painel de Visitas, a fileira de baixo
   (Cadastros · Rascunhos · Histórico) ficava em escada — cada card com a própria altura. Os três
   passam a esticar até o mais alto da fileira; o conteúdo continua no topo. */
.vis-dash > .vis-dash__baixo { align-self: stretch; display: flex; flex-direction: column; }
.vis-dash > .vis-dash__baixo > .vis-visitas, .vis-dash > .vis-dash__baixo > .vis-atalhos { align-content: start; }
/* …e o calendário (que ocupa 3 linhas) estica até a base do 3º card da esquerda. */
@media (min-width: 1100px) { .vis-dash > .vis-dash__cal { align-self: stretch; } }

/* 18/09 15:50 ("na hora da impressão não está saindo legal"): a caixa de impressão do Chrome vem com
   "Gráficos de plano de fundo" DESMARCADO — só os elementos com print-color-adjust: exact mantinham
   a cor, e a folha saía pela metade. Agora a folha inteira força fundos e cores. */
@media print {
    .vis-imp, .vis-imp * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .vis-imp__topo, .vis-imp__col h3, .vis-imp__fimc { break-inside: avoid; page-break-inside: avoid; }   /* .vis-imp__cols NÃO: visita longa precisa poder quebrar entre cartões */
}

/* 18/09 16:10 (a pedido: "caiba numa A4, sem descer nada, tudo na mesma folha"): js/visitas-imprimir.js
   mede o conteúdo e grava --imp-zoom; só o papel usa. Tela continua 1:1. */
@media print {
    .vis-imp { zoom: var(--imp-zoom, 1); }
    .vis-imp__cols, .vis-imp__crono { break-inside: avoid; page-break-inside: avoid; }   /* com o zoom, o cronograma inteiro cabe — não quebra mais */
}

/* 18/09 16:50 (a pedido: "+1 de um responsável"): acompanhantes da atividade — lista de selects + botão. */
.vis-extras { margin-top: .5rem; }
.vis-extras__rotulo { display: block; font-size: .78rem; font-weight: 600; color: var(--cor-texto); margin-bottom: .3rem; }
.vis-extras__rotulo .muted { font-weight: 400; }
.vis-extras__lista { display: flex; flex-direction: column; gap: .35rem; }
.vis-extras__item { display: flex; align-items: center; gap: .35rem; }
.vis-extras__item select { flex: 1 1 auto; min-width: 0; }
.vis-extras__item .btn--xs { min-height: 0; height: 30px; min-width: 30px; padding: 0 .4rem; display: inline-grid; place-items: center; font-size: 1rem; line-height: 1; }
.vis-extras__mais { margin-top: .4rem; min-height: 32px; padding: .25rem .7rem; }
.vis-tl__extras { color: var(--cor-texto-suave); font-weight: 500; }
.vis-add__grid .vis-extras { grid-column: 1 / -1; }
.vis-add__linha .vis-add__resp .vis-extras { margin-top: .45rem; }
.vis-imp__cartao-q small { font-weight: 500; color: var(--imp-suave); font-size: 7.8pt; }   /* acompanhantes (16:50) */

/* 18/09 18:05 (a pedido): acompanhante com ícone e nome, igual ao principal (cronograma e impressão). */
.vis-tl__extra { display: inline-flex; align-items: center; gap: .3rem; }
.vis-imp__mais { display: inline-flex; align-items: center; gap: .9mm; margin-left: 1.6mm; font-weight: 600; }
.vis-imp__mais svg { width: 3mm; height: 3mm; color: var(--imp-azul); }

/* ==========================================================================
   Visitas — Preparativos (checklist por setor antes do roteiro), 18/09/2026 18:40.
   Gestão: card na tela da visita. Colaborador: "Suas tarefas para a visita".
   ========================================================================== */
.vis-prep__barra { height: 10px; border-radius: 999px; background: var(--cor-borda); overflow: hidden; margin: .2rem 0 .6rem; }
.vis-prep__barra > i { display: block; height: 100%; background: linear-gradient(90deg, #2b8a3e, #37b24d); transition: width .3s ease; }
.vis-prep__aviso { margin: 0 0 .7rem; font-size: .88rem; }
.vis-prep__aviso--ok { background: #e6f4ea; color: #1e7d45; }
.vis-prep__setor { border: 1px solid var(--cor-borda); border-radius: 12px; margin-bottom: .55rem; overflow: hidden; }
.vis-prep__setor > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; background: var(--cor-bg); flex-wrap: wrap; }
.vis-prep__setor > summary::-webkit-details-marker { display: none; }
.vis-prep__setor-nome { font-weight: 700; }
.vis-prep__setor-quem { font-size: .8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 8rem; }
.vis-prep__prog { margin-left: auto; font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: #fff4d6; color: #8a5a00; white-space: nowrap; }
.vis-prep__prog--ok { background: #e6f4ea; color: #1e7d45; }
.vis-prep__prog--env { background: var(--cor-primaria-bg, #e8f0f8); color: var(--cor-primaria); }
.vis-prep__lista { list-style: none; margin: 0; padding: .3rem .6rem .5rem; }
.vis-prep__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .45rem .15rem; border-bottom: 1px dashed var(--cor-borda); }
.vis-prep__item:last-child { border-bottom: 0; }
.vis-prep__check { margin: 0; display: inline-flex; }
.vis-prep__caixa { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--cor-primaria); background: #fff; color: #fff; font-weight: 800; font-size: .9rem; line-height: 1; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.vis-prep__caixa.is-on { background: #1e7d45; border-color: #1e7d45; }
span.vis-prep__caixa { cursor: default; }
.vis-prep__txt { font-size: .9rem; line-height: 1.3; min-width: 0; }
.vis-prep__txt small { display: block; color: var(--cor-texto-suave); font-size: .76rem; margin-top: .1rem; }
.vis-prep__item.is-feita .vis-prep__txt { color: var(--cor-texto-suave); text-decoration: line-through; }
.vis-prep__item.is-feita .vis-prep__txt small { text-decoration: none; }
.vis-prep__prazo { font-size: .74rem; color: var(--cor-texto-suave); white-space: nowrap; }
.vis-prep__prazo.is-atrasada { color: var(--cor-alerta); font-weight: 700; }
.vis-prep__rem { min-height: 0; height: 26px; min-width: 26px; padding: 0 .35rem; display: inline-grid; place-items: center; font-size: 1rem; line-height: 1; }
.vis-prep__incluir > summary { background: #fff; }
.vis-prep__form { padding: .6rem .75rem .5rem; }
.vis-prep__form-linha { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr; gap: .5rem; }
.vis-prep__form .form-field { margin: 0 0 .5rem; }
.vis-prep__form label { font-size: .78rem; font-weight: 600; }
.vis-prep__acoes { margin-top: .6rem; }
.vis-prep--colab .vis-prep__lista { padding: 0; }
.vis-prep--colab .vis-prep__item { grid-template-columns: 28px minmax(0, 1fr) auto; }
@media (max-width: 767.98px) {
    .vis-prep__form-linha { grid-template-columns: 1fr 1fr; }
    .vis-prep__item { grid-template-columns: 28px minmax(0, 1fr); }
    .vis-prep__prazo, .vis-prep__item > .inline-form:last-child { grid-column: 2; justify-self: start; }
}
/* 19:55: colaborador marca e envia de uma vez — checkbox escondido, quadradinho visual; contador no botão. */
.vis-prep__marcar { display: inline-grid; place-items: center; cursor: pointer; position: relative; }
.vis-prep__marcar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vis-prep__marcar input:checked + .vis-prep__caixa { background: #1e7d45; border-color: #1e7d45; }
.vis-prep__marcar input:checked + .vis-prep__caixa::after { content: "✓"; color: #fff; font-weight: 800; font-size: .9rem; }
.vis-prep__marcar input:focus-visible + .vis-prep__caixa { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.vis-prep__item:has(input:checked) .vis-prep__txt { color: var(--cor-texto-suave); }
.vis-prep__n { font-weight: 400; opacity: .85; }
/* 20:20: comprovante obrigatório em algumas tarefas dos preparativos. */
.vis-prep__badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: #fff4d6; color: #8a5a00; vertical-align: middle; margin-left: .25rem; }
.vis-prep__anexo { grid-column: 2 / -1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .78rem; margin-top: .15rem; }
.vis-prep__anexo-rot { font-weight: 700; color: #8a5a00; }
.vis-prep__anexo input[type="file"] { font-size: .78rem; max-width: 100%; }
.vis-prep__anexo-link { display: inline-block; font-size: .78rem; margin-top: .1rem; color: var(--cor-primaria); text-decoration: none; }
.vis-prep__anexo-link:hover { text-decoration: underline; }
.vis-prep__exige { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; margin: 0 0 .4rem; }

/* 18/09 21:00 (a pedido): Preparativos em página própria, compacta — card-resumo na visita. */
.vis-prep__kpis { display: flex; gap: .5rem; flex-wrap: wrap; }
.vis-prep__kpi { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; background: var(--cor-bg); border: 1px solid var(--cor-borda); font-size: .8rem; color: var(--cor-texto-suave); }
.vis-prep__kpi b { font-size: 1.05rem; color: var(--cor-primaria); }
.vis-prep__kpi--pend b { color: #8a5a00; }
.vis-prep__kpi--antes b { color: var(--cor-alerta); }
.vis-prep__kpis--card { margin: .4rem 0 .5rem; }
.vis-prep--resumo .vis-prep__barra { margin: .1rem 0 .3rem; }
.vis-prep__estado { margin: 0; font-size: .85rem; font-weight: 600; }
.vis-prep__estado.is-trava { color: #8a5a00; }
.vis-prep__estado.is-ok { color: #1e7d45; }
.vis-prep--resumo .vis-prep__acoes { margin-top: .6rem; }
.vis-prep__barra--pagina { height: 8px; margin: .2rem 0 .8rem; }
.vis-duas--prep { grid-template-columns: 1fr; }
@media (min-width: 992px) { .vis-duas--prep { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } }
/* linhas mais baixas na página; grupos em duas colunas em tela larga para não descer demais */
.vis-duas--prep .vis-prep__item { padding: .3rem .1rem; gap: .4rem; }
.vis-duas--prep .vis-prep__txt { font-size: .86rem; line-height: 1.25; }
.vis-duas--prep .vis-prep__txt small { font-size: .72rem; }
.vis-duas--prep .vis-prep__setor > summary { padding: .4rem .6rem; }
.vis-duas--prep .vis-prep__setor { break-inside: avoid; margin-bottom: .5rem; }
.vis-duas--prep .vis-prep__lista { padding: .15rem .5rem .35rem; }
@media (min-width: 1200px) {
    /* ~~inline-block 50%~~ empilhava por causa do espaço em branco; grid de verdade: */
    .vis-duas--prep .vis-prep__grupos { columns: 2; column-gap: .7rem; }
    .vis-duas--prep .vis-prep__grupos .vis-prep__setor { display: block; break-inside: avoid; page-break-inside: avoid; margin-bottom: .5rem; }
}
.vis-prep__feitas > summary { list-style: none; cursor: pointer; }
.vis-prep__feitas > summary::-webkit-details-marker { display: none; }
.vis-prep__feitas > summary .card__title::before { content: "\25B8"; display: inline-block; font-size: .9em; color: var(--cor-texto-suave); margin-right: .3rem; transition: transform .15s ease; }
.vis-prep__feitas[open] > summary .card__title::before { transform: rotate(90deg); }
.vis-prep__form--pagina { padding: 0; }
.vis-prep__form--pagina .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* 18/09 21:30 (a pedido): Preparativos — Pendentes e Já feitas lado a lado, retráteis; Enviar/Incluir embaixo;
   linhas das pendências redesenhadas (prazo em pílula, atrasada em vermelho, contador por setor). */
.vis-prep__grade { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; margin-top: var(--sp-3); }
@media (min-width: 992px) { .vis-prep__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vis-prep__grade > .card { margin: 0; }
.vis-prep__bloco > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.vis-prep__bloco > summary::-webkit-details-marker { display: none; }
.vis-prep__bloco > summary .card__title::before { content: "\25B8"; display: inline-block; font-size: .9em; color: var(--cor-texto-suave); margin-right: .35rem; transition: transform .15s ease; }
.vis-prep__bloco[open] > summary .card__title::before { transform: rotate(90deg); }
.vis-prep__bloco > summary:hover .card__title { color: var(--cor-primaria); }
.vis-prep__contador { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .55rem; border-radius: 999px; background: #fff4d6; color: #8a5a00; font-weight: 800; font-size: .9rem; }
.vis-prep__contador--ok { background: #e6f4ea; color: #1e7d45; }
.vis-prep__sub { margin: .1rem 0 .6rem; }
/* ~~duas colunas fluidas dentro de Pendentes~~ agora Pendentes ocupa meia tela: uma coluna. */
.vis-duas--prep .vis-prep__grupos { columns: auto; }
.vis-prep__grupos { columns: 1; }
.vis-prep__grupos .vis-prep__setor { display: block; break-inside: avoid; margin-bottom: .55rem; border-radius: 12px; }
.vis-prep__grupos .vis-prep__setor > summary { padding: .55rem .75rem; background: var(--cor-primaria-bg, #e8f0f8); }
.vis-prep__grupos .vis-prep__setor-nome { color: var(--cor-primaria); }
.vis-prep__grupos .vis-prep__lista { padding: .2rem .5rem .4rem; }
.vis-prep__grupos .vis-prep__item { grid-template-columns: 28px minmax(0, 1fr) auto auto; padding: .45rem .3rem; border-bottom: 1px solid var(--cor-borda); border-radius: 8px; }
.vis-prep__grupos .vis-prep__item:hover { background: var(--cor-bg); }
.vis-prep__grupos .vis-prep__txt { font-size: .88rem; line-height: 1.3; }
.vis-prep__grupos .vis-prep__txt small { font-size: .74rem; margin-top: .15rem; }
.vis-prep__grupos .vis-prep__prazo { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: var(--cor-bg); border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); }
.vis-prep__grupos .vis-prep__prazo.is-atrasada { background: #fde8e8; border-color: #f3b4b4; color: var(--cor-alerta); }
.vis-prep__feitas .vis-prep__lista { padding: 0; }
.vis-prep__feitas .vis-prep__item { grid-template-columns: 28px minmax(0, 1fr) auto; padding: .4rem .2rem; }
.vis-prep__grade--acoes .vis-prep__form--pagina .form-row { grid-template-columns: 1fr 1fr; }
/* 21:45 (a pedido): setas maiores nos cards retráteis (chevron desenhado, não o caractere ▸); Incluir tarefa retrátil. */
.vis-prep__bloco > summary .card__title::before { content: ""; width: .62rem; height: .62rem; border-right: 3px solid var(--cor-primaria); border-bottom: 3px solid var(--cor-primaria); border-radius: 1px; transform: rotate(-45deg) translate(-2px, 2px); margin: 0 .55rem 0 .15rem; transition: transform .15s ease; }
.vis-prep__bloco[open] > summary .card__title::before { transform: rotate(45deg) translate(-3px, -3px); }
.vis-prep__incluir-card > summary { align-items: center; }
.vis-prep__incluir-card > .form { margin-top: .3rem; }
.vis-prep__grade--acoes { align-items: start; }
/* 21:55 (a pedido: "os cards dentro de Pendentes estão muito fracos, moldura mais visível"). */
.vis-prep__grupos .vis-prep__setor { border: 2px solid var(--cor-primaria); border-radius: 12px; box-shadow: 0 2px 8px rgba(31, 78, 121, .12); overflow: hidden; margin-bottom: .75rem; }
.vis-prep__grupos .vis-prep__setor > summary { background: var(--cor-primaria); color: #fff; padding: .6rem .8rem; }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__setor-nome { color: #fff; font-size: .95rem; }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__setor-quem { color: #dbe7f3; }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__prog { background: rgba(255, 255, 255, .18); color: #fff; }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__prog--env { background: #fff; color: var(--cor-primaria); }
.vis-prep__grupos .vis-prep__lista { padding: .35rem .6rem .45rem; }
.vis-prep__grupos .vis-prep__item { border: 1px solid var(--cor-borda); border-radius: 10px; margin: .35rem 0; padding: .5rem .55rem; background: #fff; }
.vis-prep__grupos .vis-prep__item:last-child { border-bottom: 1px solid var(--cor-borda); }
.vis-prep__grupos .vis-prep__item:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-bg, #e8f0f8); }
.vis-prep__grupos .vis-prep__caixa { border-width: 2.5px; }
/* 22:15: coluna da direita empilha Já feitas + Enviar + Incluir; a esquerda (Pendentes) não empurra. */
.vis-prep__coluna { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.vis-prep__coluna > .card { margin: 0; }
/* 22:25 (a pedido): Confirmar / Cancelar inline antes de marcar/reabrir uma tarefa dos preparativos. */
.vis-prep__item.is-confirmando { border-color: var(--cor-primaria); background: var(--cor-primaria-bg, #e8f0f8); }
.vis-prep__confirma { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem 0 .1rem .1rem; border-top: 1px dashed var(--cor-borda); margin-top: .3rem; }
.vis-prep__confirma-txt { font-size: .82rem; font-weight: 600; color: var(--cor-primaria); margin-right: .2rem; }
.vis-prep__confirma .btn--xs { min-height: 0; height: 30px; padding: 0 .8rem; font-size: .8rem; }

/* 18/09 17:20 (a pedido: "o card de cronograma tá muito longo, não quero ele até o final
   da página"): cada atividade cabe em DUAS linhas — título + etiqueta em cima; tipo · duração ·
   local e o responsável (com acompanhantes) na MESMA linha embaixo (.vis-tl__sub). Ícone, bolinha
   e respiros menores. E a lista rola DENTRO do card (.vis-tl__caixa): o card para em ~62 % da
   altura da tela em vez de empurrar a página. Com mouse e arrastar ativo, as setas ↑↓ somem
   (o arrastar já reordena; sem JS ou no toque elas continuam). Medido na visita 48 local:
   item médio 126px → ver registro-de-trabalho. */
.vis-tl__caixa { max-height: min(62vh, 680px); overflow-y: auto; overscroll-behavior: contain; padding: 2px .4rem 2px 0; scrollbar-gutter: stable; }
.vis-tl__item { padding: .2rem 0; grid-template-columns: 4.6rem 26px minmax(0, 1fr); gap: .45rem; }   /* 22/09: 3.1rem nao cabia o selo "Concluida" embaixo da hora */
.vis-tl::before { left: calc(4.6rem + .45rem + 12px); top: 12px; bottom: 12px; }   /* 22/09: acompanha a coluna do horario, que alargou para caber o selo */
.vis-tl__hora { padding-top: .42rem; font-size: .9rem; }
.vis-tl__ponto { width: 26px; height: 26px; margin-top: .28rem; }
.vis-tl__ponto svg { width: 13px; height: 13px; }
.vis-tl__card { padding: .36rem .6rem .36rem .55rem; border-radius: 10px; gap: var(--sp-2); }
.vis-tl__ic { width: 30px; height: 30px; border-radius: 8px; }
.vis-tl__ic svg { width: 16px; height: 16px; }
.vis-tl__txt { gap: .04rem; padding-right: 0; }
.vis-tl__titulo { gap: .4rem; }
.vis-tl__titulo strong { font-size: .95rem; }
.vis-tl__titulo .vis-status { font-size: .66rem; padding: .05rem .42rem; }
.vis-tl__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .05rem .7rem; }
.vis-tl__sub > small { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; line-height: 1.35; }
.vis-tl__txt small { font-size: .78rem; }
.vis-tl__txt small.vis-tl__resp { font-size: .9rem; }
.vis-tl__andares { font-size: .74rem; line-height: 1.3; }
.vis-tl__lado { gap: .4rem; padding-left: var(--sp-2); }
.vis-tl__acoes { gap: .2rem; }
.vis-tl__acoes .btn { height: 27px; min-width: 27px; padding: 0 .35rem; }
.vis-tl__grip { height: 24px; width: 20px; }
@media (hover: hover) and (pointer: fine) {
    .vis-tl--arrastavel .vis-tl__acoes .inline-form:has(input[value="cima"]),
    .vis-tl--arrastavel .vis-tl__acoes .inline-form:has(input[value="baixo"]) { display: none; }
}
.vis-tl__card--fim { padding: .3rem .6rem; flex-direction: row; align-items: baseline; gap: .5rem; }
.vis-tl__dica { margin: .45rem 0 0; font-size: .8rem; }
@media (max-width: 575px) {
    .vis-tl::before { left: calc(4.2rem + .4rem + 12px); }
    /* o selo encostava no ponto em 390px: fonte menor cabe nos 4.2rem */
    .vis-tl__feito { font-size: .58rem; padding: .08rem .24rem; gap: .14rem; }
    .vis-tl__feito svg { width: 8px; height: 8px; }
    .vis-tl__item { grid-template-columns: 4.2rem 26px minmax(0, 1fr); gap: .4rem; }
    .vis-tl__caixa { max-height: min(70vh, 720px); }
}

/* 18/09 17:35: barra dos Preparativos (card-resumo e página) era <div><i style="width:X%"> — a CSP
   (style-src 'self') descarta o atributo e a barra saía sempre 100 %. Agora é <progress>, como a
   .vis-ano__barra do painel. Mesmas medidas de antes (10px no card, 8px na página). */
progress.vis-prep__barra {
    display: block; width: 100%; height: 10px; margin: .2rem 0 .6rem;
    appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; overflow: hidden;
    background: var(--cor-borda); color: #37b24d;
}
progress.vis-prep__barra::-webkit-progress-bar { background: var(--cor-borda); border-radius: 999px; }
progress.vis-prep__barra::-webkit-progress-value { background: linear-gradient(90deg, #2b8a3e, #37b24d); border-radius: 999px; transition: width .3s ease; }
progress.vis-prep__barra::-moz-progress-bar { background: linear-gradient(90deg, #2b8a3e, #37b24d); border-radius: 999px; }
.vis-prep--resumo progress.vis-prep__barra { margin: .1rem 0 .3rem; }
progress.vis-prep__barra--pagina { height: 8px; margin: .2rem 0 .8rem; }

/* 18/09 17:50: o auto-zoom passou a AMPLIAR o roteiro (js/visitas-imprimir.js). Aí o
   `.vis-imp__rodape { margin-top: 6mm }` que só existia no papel (a tela mede sem ele) virou 2ª
   página quando a folha enche. No papel o rodapé volta a `margin-top: auto`, e a folha ganha altura
   mínima = A4 útil ÷ zoom (275mm menos 5mm de segurança): o rodapé fica no PÉ da folha em qualquer
   zoom, sem sobrar página em branco. */
@media print {
    .vis-imp { min-height: calc(270mm / var(--imp-zoom, 1)); }
    .vis-imp__rodape { margin-top: auto; }
    /* 22/09 12:00: o checklist NAO usa esse piso. Ele existe para o roteiro nao
       deixar o rodape solto no meio da folha; aqui, com o documento medindo
       270mm, o min-height virava o proprio teto e empurrava para a 2a folha. */
    .vis-chk { min-height: 0 !important; }
}

/* 18/09 18:05 (a pedido: "botão da cor da parede não dá pra identificar — botão branco em parede
   azul, botão azul em parede branca"). Auditoria por script nas 17 telas de palco azul (tests/carga,
   contraste botão × fundo do primeiro ancestral com cor): só três pontos falhavam. */
/* 1. Wizard "Nova visita": "Criar rascunho e abrir a timeline" fica direto no palco azul → branco. */
body.palco-azul .vis-wizard__acoes .btn--primary { background: #fff; border-color: #fff; color: var(--cor-primaria); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
body.palco-azul .vis-wizard__acoes .btn--primary:hover, body.palco-azul .vis-wizard__acoes .btn--primary:focus-visible { background: #eaf1ff; color: var(--cor-primaria-escura); }
/* 2. Card azul de boas-vindas (tela do colaborador): "Gestão de visitas" → branco. */
.vis-boas-vindas .btn--primary { background: #fff; border-color: #fff; color: var(--cor-primaria); }
.vis-boas-vindas .btn--primary:hover, .vis-boas-vindas .btn--primary:focus-visible { background: #eaf1ff; color: var(--cor-primaria-escura); }
/* 3. Cabeçalho do painel (card branco): ~~neutros, azul só no hover; "Nova visita" sem linha (16/09)~~
   → azul: "Nova visita" cheio, os outros três em azul-claro com borda e texto azuis. */
.vis-btn-cab { background: var(--vis-azul-bg); border-color: #c3d4ea; color: var(--cor-primaria); }
.vis-btn-cab svg { color: var(--cor-primaria); }
.vis-btn-cab--novo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.vis-btn-cab--novo svg { color: #fff; }
.vis-btn-cab--novo:hover, .vis-btn-cab--novo:focus-visible { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); }
.vis-prep__anexo-links { display: inline-flex; gap: .6rem; align-items: center; flex-wrap: wrap; }   /* 18/09 18:10: abrir + baixar */
.vis-prep__anexo-link--baixar { font-weight: 600; }

/* 21/09 — Preparativos: "Editar" retrátil em cada tarefa (prazo, quem faz, fase…; vale
   mesmo já enviada — a critério do gestor) e campo de nº de patrimônio (T.I). */
.vis-prep__editar { grid-column: 2 / -1; margin-top: .1rem; }
.vis-prep__editar > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; min-height: 0; height: 26px; padding: 0 .5rem; font-size: .78rem; }
.vis-prep__editar > summary::-webkit-details-marker { display: none; }
.vis-prep__editar[open] > summary { margin-bottom: .4rem; color: var(--cor-primaria); }
.vis-prep__form--editar { background: var(--cor-bg); border: 1px dashed var(--cor-borda); border-radius: var(--raio); padding: .6rem .75rem .5rem; }
.vis-prep__form--editar .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.vis-prep__form--editar .form-field { margin-bottom: .45rem; }
.vis-prep__form--editar .form-actions { margin-top: .2rem; }
.vis-prep__patrimonio input[type="text"] { font-size: .82rem; max-width: 16rem; padding: .25rem .5rem; }
.vis-prep__anexo-link--patrimonio { cursor: default; font-weight: 600; }
@media (max-width: 720px) { .vis-prep__form--editar .form-row { grid-template-columns: 1fr; } }

/* 21/09 — "Novo setor" no mesmo card retrátil dos outros "Incluir" (ícone + subtítulo). */
.vis-incluir--retratil > .vis-form { margin-bottom: 0; margin-top: .5rem; }

/* 21/09 — Faixa "tarefas pendentes dos preparativos" (layout): fica em toda página
   enquanto a pessoa tiver preparativo de visita pendente; some sozinha ao zerar. */
.prep-aviso { background: #fff4d6; color: #4a3700; border-bottom: 1px solid #f0d58a; }
.prep-aviso--atrasada { background: var(--cor-alerta-bg); color: #7a1f1f; border-bottom-color: #f3b8b8; }
.prep-aviso__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); min-height: 48px; font-size: .95rem; }
.prep-aviso__txt { flex: 1 1 32rem; line-height: 1.4; }
.prep-aviso__ic { margin-right: .35rem; }
.prep-aviso__ic { font-size: 1.15rem; }
.prep-aviso__atraso { color: var(--cor-alerta); }
.prep-aviso__btn { flex: 0 0 auto; background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; white-space: nowrap; }
.prep-aviso__btn:hover, .prep-aviso__btn:focus-visible { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); color: #fff; }
@media (max-width: 720px) { .prep-aviso__inner { font-size: .9rem; } .prep-aviso__btn { width: 100%; text-align: center; } }

/* ~~21/09 09:38 — "Quem acompanha" encaixado à força nos mini cards de 3 colunas: o select vazava.~~
   Redesenho às 10:20 (a pedido: "está vazado, o design está horrível") — ver .vis-externos__tabela mais abaixo. */

/* 21/09 — Cards da Home com o FUNDO NA COR (a pedido: "os laranjas tenham fundo laranja,
   os verdes fundo verde, os azuis fundo azul e o amarelo fundo amarelo; mude os ícones").
   ~~Tinta de 10% da cor + disco colorido com glifo branco~~ → fundo cheio (leve degradê
   para o tom mais escuro, que dá volume e garante contraste do texto branco no amarelo),
   texto branco, disco BRANCO com o glifo na cor, seta em disco translúcido. O card com o
   Serrafinho (Visitas à Matriz) segue o mesmo fundo — o boneco tem fundo transparente. */
.qa-card, .res-card {
    background: var(--c); border-color: rgba(255, 255, 255, .22); color: #fff;
}
@supports (background: color-mix(in srgb, red 5%, white)) {
    .qa-card, .res-card {
        background: linear-gradient(160deg, var(--c) 0%, color-mix(in srgb, var(--c) 80%, #000) 100%);
        border-color: color-mix(in srgb, var(--c) 60%, #fff);
    }
}
.res-card:hover { color: #fff; border-color: #fff; }
.qa-card__title, .res-card__title, .qa-card__go, .res-card__go, .qa-card__go--btn { color: #fff; }
.qa-card__text, .res-card__text { color: rgba(255, 255, 255, .9); }
.qa-card__ic, .res-card__ic { background: #fff; color: var(--c); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.res-card__ic--mascote { background: none; box-shadow: none; }
.qa-card .seta-go, .res-card .seta-go { background: rgba(255, 255, 255, .2); border-color: transparent; color: #fff; }
.qa-card:hover .seta-go, .qa-card__go:hover .seta-go, .qa-card__go--btn:hover .seta-go, .res-card:hover .seta-go { background: #fff; color: var(--c); }
.qa-card__go--btn.is-carregando .qa-card__go-txt { opacity: .7; }

/* 21/09 — Preparativos (gestão), a pedido: passar o mouse no "Editar" (ou deixá-lo aberto)
   pinta o mini card de azul; o "×" de remover é vermelho; ao clicar no quadrado, ele já
   mostra o tique (prévia) e só então aparecem Confirmar / Cancelar. */
.vis-prep__item:has(.vis-prep__editar > summary:hover),
.vis-prep__item:has(.vis-prep__editar[open]) { background: #e6f0fb; border-color: var(--cor-primaria); border-radius: 8px; box-shadow: inset 3px 0 0 var(--cor-primaria); }
.vis-prep__editar > summary:hover { color: var(--cor-primaria); border-color: var(--cor-primaria); background: #fff; }
.vis-prep__rem { color: var(--cor-alerta); border-color: transparent; font-weight: 700; }
.vis-prep__rem:hover, .vis-prep__rem:focus-visible { background: var(--cor-alerta-bg); border-color: var(--cor-alerta); color: var(--cor-alerta); }
.vis-prep__caixa.is-previa { background: #1e7d45; border-color: #1e7d45; color: #fff; }
.vis-prep__caixa.is-previa::after { content: "✓"; font-weight: 800; font-size: .9rem; }
.vis-prep__caixa.is-on.is-previa-off { background: #fff; border-color: var(--cor-primaria); color: transparent; }

/* 21/09 — Preparativos: aceite/recusa antes do quadradinho (colaborador) e badges de resposta (gestão). */
.vis-prep__aceite { margin: 0 0 var(--sp-3); padding: .6rem .8rem .5rem; background: #fff8e1; border: 1px solid #f0d58a; border-radius: 10px; }
.vis-prep__aceite-titulo { margin: 0 0 .2rem; font-size: 1rem; color: #7a5a00; display: flex; align-items: center; gap: .4rem; }
.vis-prep__aceite .form-hint { margin-bottom: .4rem; }
.vis-prep__item--aceite { grid-template-columns: 28px minmax(0, 1fr) auto; }
.vis-prep__caixa--espera { border-color: #c48d00; color: #c48d00; background: #fff; font-size: .95rem; }
.vis-prep__caixa--recusada { border-color: var(--cor-alerta); color: var(--cor-alerta); background: #fff; }
.vis-prep__item.is-recusada .vis-prep__txt { color: var(--cor-texto-suave); }
.vis-prep__resposta { grid-column: 2 / -1; display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 0; padding-left: 0; }
.vis-prep__resposta .vis-recusa { flex: 0 1 auto; }
.vis-prep__resposta .vis-recusa[open] { flex: 1 1 100%; }
.vis-prep__resposta .vis-recusa > summary { display: inline-flex; width: auto; }
.vis-prep__badge--ok { background: var(--cor-ok-bg); color: var(--cor-ok); }
.vis-prep__badge--espera { background: #fff4d6; color: #7a5a00; }
.vis-prep__badge--recusa { background: var(--cor-alerta-bg); color: var(--cor-alerta); }

/* 21/09 — "Tarefas que você acompanha" (só leitura) no /visitas: quem acompanha vê, não age. */
.vis-prep__acompanho { margin-top: var(--sp-3); padding: .5rem .8rem; border: 1px dashed var(--cor-borda); border-radius: 10px; background: var(--cor-bg); }
.vis-prep__acompanho > summary { cursor: pointer; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; list-style: none; }
.vis-prep__acompanho > summary::-webkit-details-marker { display: none; }
.vis-prep__acompanho-titulo { font-weight: 700; font-size: .95rem; color: var(--cor-texto); }
.vis-prep__acompanho .vis-prep__lista { margin-top: .4rem; opacity: .85; }
.vis-prep__caixa--leitura { cursor: default; border-style: dashed; }

/* 21/09 10:20 — Card "Pessoas fora do sistema" redesenhado (a pedido: "está vazado, o design está
   horrível"). ~~Mini cards em 2–3 colunas com o select estourando a borda.~~ Agora: formulário de
   cadastro numa linha (nome + botão) e a lista como TABELA de linhas cheias — Nome · Quem acompanha ·
   Remover — cada coluna com espaço próprio (minmax(0,…) impede o select de vazar). No celular vira
   uma coluna, com o select ocupando a largura toda. */
.vis-externos__form .form-row { align-items: end; }
.vis-externos__form .form-field--fim { display: flex; align-items: flex-end; }
.vis-externos__form .form-field--fim .btn { white-space: nowrap; }
.vis-externos__tabela { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cor-borda); border-radius: 10px; overflow: hidden; background: var(--cor-superficie); }
.vis-externos__cab, .vis-externos__tabela li {
    display: grid; grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: .6rem 1rem;
    padding: .55rem .9rem;
}
.vis-externos__cab { background: var(--cor-bg); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); border-bottom: 1px solid var(--cor-borda); }
.vis-externos__tabela li { border-top: 1px solid var(--cor-borda); }
.vis-externos__tabela li:first-of-type { border-top: 0; }
.vis-externos__tabela li:hover { background: #f6f9fd; }
.vis-externos__nome { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; min-width: 0; }
.vis-externos__nome .vis-ic-inline { flex: none; color: var(--cor-primaria); }
.vis-externos__acomp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; margin: 0; min-width: 0; }
.vis-externos__acomp label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* rótulo só para leitor de tela; o cabeçalho da coluna já diz */
.vis-externos__acomp select { width: 100%; min-width: 0; font-size: .88rem; padding: .35rem .5rem; }
.vis-externos__acomp .btn { white-space: nowrap; }
.vis-externos__rem { justify-self: end; }
.vis-externos__rem .btn { color: var(--cor-alerta); border-color: transparent; }
.vis-externos__rem .btn:hover, .vis-externos__rem .btn:focus-visible { background: var(--cor-alerta-bg); border-color: var(--cor-alerta); color: var(--cor-alerta); }
@media (max-width: 720px) {
    .vis-externos__cab { display: none; }
    .vis-externos__tabela li { grid-template-columns: 1fr; gap: .45rem; }
    .vis-externos__acomp { grid-template-columns: minmax(0, 1fr) auto; }
    .vis-externos__acomp label { position: static; width: auto; height: auto; clip: auto; grid-column: 1 / -1; font-size: .78rem; color: var(--cor-texto-suave); }
    .vis-externos__rem { justify-self: start; }
}

/* 21/09 10:55 — card de externos só com Nome · Remover (a pedido: "pode remover quem acompanha"). */
.vis-externos__cab, .vis-externos__tabela li { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 720px) { .vis-externos__tabela li { grid-template-columns: minmax(0, 1fr) auto; } .vis-externos__rem { justify-self: end; } }

/* 21/09 — aviso ao "Enviar ao RH" sem marcar o quadrado (colaborador). */
.vis-prep__aviso { margin: .4rem 0 0; padding: .45rem .7rem; border-radius: 8px; background: var(--cor-alerta-bg); color: var(--cor-alerta); font-size: .88rem; font-weight: 600; }

/* 21/09 12:00 — card "Preparativos" da visita: ~~pílulas em linha~~ os três números viram MINI CARDS
   (a pedido: "3 feitas, 21 pendentes, 16 antes da visita dentro de um mini card"). */
.vis-prep__kpis--card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 .6rem; }
.vis-prep__kpis--card .vis-prep__kpi {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; text-align: center;
    padding: .6rem .4rem .5rem; border-radius: 10px; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cor-texto-suave);
}
.vis-prep__kpis--card .vis-prep__kpi b { font-size: 1.45rem; line-height: 1.1; color: var(--cor-ok); }
.vis-prep__kpis--card .vis-prep__kpi--pend { background: #fffaf0; border-color: #f0d58a; }
.vis-prep__kpis--card .vis-prep__kpi--pend b { color: #8a5a00; }
.vis-prep__kpis--card .vis-prep__kpi--antes { background: var(--cor-alerta-bg); border-color: #f3b8b8; }
.vis-prep__kpis--card .vis-prep__kpi--antes b { color: var(--cor-alerta); }
@media (max-width: 420px) { .vis-prep__kpis--card { grid-template-columns: 1fr 1fr; } .vis-prep__kpis--card .vis-prep__kpi--antes { grid-column: 1 / -1; } }

/* 21/09 14:45 — Editar atividade redesenhado (a pedido: "na parte de editar a atividade, melhore o design"):
   painel próprio com cabeçalho (título + hora · tipo), campos em grade de 6 colunas e rodapé de ações.
   ~~duas form-row--2 soltas dentro do card~~ */
.vis-tl__form { display: block; padding: 0; overflow: hidden; border: 1px solid var(--cor-primaria); box-shadow: 0 8px 24px rgba(0, 100, 213, .14); }
.vis-tl__form-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .55rem .9rem; background: #e6f0fb; border-bottom: 1px solid #c5d9f2; }
.vis-tl__form-titulo { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--cor-primaria); }
.vis-tl__form-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem .75rem; padding: .8rem .9rem .2rem; }
.vis-tl__form-grade .form-field { margin: 0; }
.vis-tl__form-grade label { font-size: .78rem; font-weight: 700; color: var(--cor-texto-suave); margin-bottom: .2rem; }
.vis-tl__form-grade label .muted { font-weight: 400; }
.vis-tl__form-grade input, .vis-tl__form-grade select { width: 100%; min-width: 0; }
.vis-tl__f-tipo { grid-column: span 2; }
.vis-tl__f-setor { grid-column: span 2; }
.vis-tl__f-dur { grid-column: span 2; }
.vis-tl__f-titulo { grid-column: span 3; }
.vis-tl__f-local { grid-column: span 3; }
.vis-tl__f-resp { grid-column: 1 / -1; }
.vis-tl__form .vis-andares { padding: 0 .9rem; }
.vis-tl__form > .form-field { padding: 0 .9rem; }
.vis-tl__form-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .9rem; margin-top: .5rem; background: var(--cor-bg); border-top: 1px solid var(--cor-borda); }
.vis-tl__form-acoes .btn--primary { display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 720px) {
    .vis-tl__form-grade { grid-template-columns: 1fr 1fr; }
    .vis-tl__f-tipo, .vis-tl__f-setor, .vis-tl__f-titulo, .vis-tl__f-local { grid-column: 1 / -1; }
    .vis-tl__f-dur { grid-column: span 1; }
}

/* 21/09 — tipo Personalizado: o campo de título vira "Descreva a atividade", em destaque. */
input.is-personalizado { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(0, 100, 213, .12); }

/* 21/09 15:30 — Personalizado: a caixa "Escreva a atividade" aparece logo embaixo do tipo (a pedido). */
.vis-personalizado { margin-top: .45rem; padding: .5rem .6rem; border-radius: 8px; background: #e6f0fb; border: 1px dashed var(--cor-primaria); }
.vis-personalizado__rotulo { display: block; font-size: .8rem; font-weight: 700; color: var(--cor-primaria); margin-bottom: .25rem; }
.vis-personalizado input { width: 100%; }
/* Com Personalizado ativo, o campo do tipo ocupa a linha inteira: a caixa "Escreva a atividade" fica larga. */
.vis-add__tipo:has(.vis-personalizado:not([hidden])), .vis-tl__f-tipo:has(.vis-personalizado:not([hidden])) { grid-column: 1 / -1; }
.vis-add__tipo:has(.vis-personalizado:not([hidden])) > select, .vis-tl__f-tipo:has(.vis-personalizado:not([hidden])) > select { max-width: 18rem; }
.vis-personalizado input { font-size: 1rem; padding: .5rem .7rem; }

/* 21/09 15:40 — Incluir atividade: Título com área própria (dividia a área "setor" com o select de setor — desde
   que os dois ficaram visíveis, sobrepunham-se) e a caixa "Escreva a atividade" (Personalizado) numa linha inteira
   logo abaixo do Tipo. ~~.vis-add__tipo:has(...) { grid-column: 1 / -1 }~~ */
.vis-add__tipo:has(.vis-personalizado:not([hidden])), .vis-tl__f-tipo:has(.vis-personalizado:not([hidden])) { grid-column: auto; }
.vis-add__tipo:has(.vis-personalizado:not([hidden])) > select, .vis-tl__f-tipo:has(.vis-personalizado:not([hidden])) > select { max-width: none; }
.vis-personalizado { grid-column: 1 / -1; flex-basis: 100%; margin-top: 0; }
@media (min-width: 768px) {
    .vis-add__grid { grid-template-areas: "tipo setor dur" "titulo titulo titulo" "pers pers pers" "linha linha linha"; }
    .vis-add__titulo { grid-area: titulo; }
    .vis-add__grid > .vis-personalizado { grid-area: pers; }
}
.vis-add__grid > .vis-personalizado[hidden], .vis-add__titulo[hidden] { display: none !important; }
.vis-tl__form-grade > .vis-personalizado { grid-column: 1 / -1; }
.form-row > .vis-personalizado { grid-column: 1 / -1; }

/* 21/09 15:30 — Editar atividade DENTRO do mesmo mini card (a pedido). ~~painel separado no lugar do card~~
   O card fica (ícone, título, status); o formulário abre como uma faixa embaixo, no mesmo card; os botões
   de ação do card somem enquanto edita. */
.vis-tl__card { flex-wrap: wrap; }
.vis-tl__card > .vis-tl__form { flex: 1 1 100%; order: 10; margin-top: .55rem; padding: 0; border: 0; border-top: 1px solid var(--cor-borda); border-radius: 0; box-shadow: none; background: transparent; }
.vis-tl__item.is-editando .vis-tl__form { border-left-color: transparent; box-shadow: none; }
.vis-tl__item.is-editando .vis-tl__card { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(31, 78, 121, .12); }
.vis-tl__item.is-editando .vis-tl__lado, .vis-tl__item.is-editando .vis-tl__sub { display: none; }
.vis-tl__form-grade { padding: .7rem 0 .2rem; }
.vis-tl__form-acoes { margin: .4rem 0 0; padding: .55rem 0 .1rem; background: transparent; border-top: 1px dashed var(--cor-borda); }

/* 21/09 15:45 — EDIÇÃO NO LUGAR do card da atividade (a pedido: "não quero um novo mini card; deixe eu editar
   no que já existe"). ~~faixa de edição dentro do card~~ Cada texto tem o campo equivalente na mesma posição:
   [data-view] some e [data-edit] aparece com .is-editando. */
.vis-tl__item [data-edit] { display: none; }
.vis-tl__item.is-editando [data-view] { display: none !important; }
.vis-tl__item.is-editando [data-edit] { display: block; }
.vis-tl__item.is-editando .vis-tl__acoes--edit { display: flex; flex-direction: row; gap: .35rem; }
.vis-tl__item.is-editando .vis-tl__card { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(31, 78, 121, .12); }
.vis-tl__item.is-editando .vis-tl__sub, .vis-tl__item.is-editando .vis-tl__lado { display: flex; }
.vis-tl__form-oculto { display: none; }
.vis-tl__in { height: 2rem; min-height: 0; padding: .15rem .45rem; font-size: .9rem; border: 1px solid var(--cor-borda); border-radius: 6px; background: #fff; }
.vis-tl__in--titulo { width: 100%; max-width: 32rem; font-weight: 700; font-size: 1rem; }
.vis-tl__titulo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vis-tl__item.is-editando .vis-tl__titulo { width: 100%; }
.vis-tl__linha-edit { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: flex-end; width: 100%; }
.vis-tl__campo { display: inline-flex; flex-direction: column; gap: .15rem; font-size: .72rem; font-weight: 700; color: var(--cor-texto-suave); min-width: 0; }
.vis-tl__campo > span { letter-spacing: .04em; text-transform: uppercase; }
.vis-tl__campo--dur input { width: 4.5rem; }
.vis-tl__campo--local { flex: 1 1 12rem; }
.vis-tl__campo--local input { width: 100%; }
.vis-tl__campo--resp { flex: 1 1 100%; }
.vis-tl__campo--resp select { width: 100%; max-width: 30rem; }
.vis-tl__linha-edit .vis-extras { flex: 1 1 100%; margin-top: .2rem; }
.vis-tl__linha-edit .vis-extras select { height: 2rem; min-height: 0; font-size: .9rem; }
.vis-tl__item.is-editando .vis-andares { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
/* ~~regras da faixa dentro do card (15:30)~~ neutralizadas: */
.vis-tl__card > .vis-tl__form { display: none; }
.vis-tl__item.is-editando .vis-tl__lado, .vis-tl__item.is-editando .vis-tl__sub { display: flex; }
.vis-tl__item.is-editando .vis-tl__acoes--edit { flex-direction: column; align-items: stretch; gap: .4rem; }
.vis-tl__item.is-editando .vis-tl__acoes--edit .btn { white-space: nowrap; justify-content: center; display: inline-flex; align-items: center; gap: .3rem; }
.vis-tl__item.is-editando .vis-tl__lado { min-width: 7.5rem; justify-content: flex-end; }
.vis-tl__item.is-editando .vis-tl__ic { align-self: flex-start; }
@media (max-width: 720px) { .vis-tl__item.is-editando .vis-tl__lado { min-width: 0; padding-left: 0; border-left: 0; width: 100%; } .vis-tl__item.is-editando .vis-tl__acoes--edit { flex-direction: row; } }

/* 21/09 15:55 — Personalizado: o campo "Escreva o tipo" aparece logo abaixo/ao lado do select de tipo.
   ~~caixa "Escreva a atividade" que movia o título~~ (o título ficou como era). */
.vis-tipo-texto { margin-top: .35rem; width: 100%; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(0, 100, 213, .12); }
.vis-tipo-texto[hidden] { display: none !important; }
.vis-tl__campo .vis-tipo-texto { margin-top: .25rem; min-width: 10rem; }
.vis-personalizado { display: none !important; }
input.is-personalizado { border-color: var(--cor-borda); box-shadow: none; }

/* 21/09 16:30 — RÉGUA DE DESIGN do módulo Visitas (a pedido: "muita coisa no Visitas não parece com o resto:
   mini cards, opções sem contorno, '— escolher —' muito feio"). Só afinação visual; nada muda de lugar.
   1) KPIs dos preparativos: ~~pílulas .vis-prep__kpi~~ o mesmo mini card do painel (.vis-kpi), em 3 colunas. */
.vis-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .35rem 0 .6rem; }
@media (min-width: 768px) { .vis-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vis-kpis--prep .vis-kpi { padding: .6rem .8rem; border-radius: 12px; border-left-width: 4px; }
.vis-kpis--prep .vis-kpi:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vis-kpis--prep .vis-kpi__num { font-size: 1.5rem; }
.vis-kpis--prep .vis-kpi__lbl { font-size: .74rem; }
/* cabeçalho da tela de preparativos: versão compacta, em linha */
.vis-prep__kpis { display: flex; gap: .5rem; flex-wrap: wrap; }
.vis-kpi--mini { flex-direction: row; align-items: baseline; gap: .4rem; padding: .3rem .7rem; border-radius: 10px; border-left-width: 4px; }
.vis-kpi--mini:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vis-kpi--mini .vis-kpi__num { font-size: 1.1rem; }
.vis-kpi--mini .vis-kpi__lbl { font-size: .78rem; }

/* 2) Grupos por setor: ~~cabeçalho azul-escuro cheio (borda 2px, texto branco)~~ o mesmo card branco do resto
   do sistema, com a faixa colorida à esquerda (igual aos mini cards). */
.vis-prep__grupos .vis-prep__setor { border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-primaria); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.vis-prep__grupos .vis-prep__setor > summary { background: var(--cor-bg); color: var(--cor-texto); }
.vis-prep__grupos .vis-prep__setor > summary:hover { background: #eef3f8; }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__setor-nome { color: var(--cor-primaria); }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__setor-quem { color: var(--cor-texto-suave); }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__prog { background: var(--vis-neutro-bg, #eef1f5); color: var(--cor-texto); }
.vis-prep__grupos .vis-prep__setor > summary .vis-prep__prog--env { background: var(--vis-verde-bg, #e6f4ea); color: var(--vis-verde); }

/* 3) Controles com contorno e o mesmo raio do resto (.form-field): edição no lugar, extras, tipo livre. */
.vis-tl__in, .vis-tl__linha-edit .vis-extras select, .vis-tipo-texto { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-superficie); font: inherit; }
.vis-tl__in:focus, .vis-tl__linha-edit .vis-extras select:focus, .vis-tipo-texto:focus, .vis-add__grid select:focus, .vis-add__grid input:focus { border-color: var(--cor-primaria); outline: none; box-shadow: 0 0 0 3px rgba(31, 78, 121, .15); }
.vis-tl__in { height: 2.25rem; padding: .2rem .55rem; }
.vis-add__grid select, .vis-add__grid input { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-superficie); font: inherit; padding: .35rem .6rem; }
.vis-tipo-texto { box-shadow: none; border-color: var(--cor-borda); }
/* botões pequenos das listas (✎ Editar, ×): contorno visível e altura igual */
.vis-prep__editar > summary, .vis-prep__rem, .vis-tl__acoes .btn--ghost.btn--xs { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-superficie); }
.vis-prep__editar > summary:hover, .vis-tl__acoes .btn--ghost.btn--xs:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); background: var(--cor-superficie); }
.vis-prep__editar[open] > summary { border-color: var(--cor-primaria); }
.vis-prep__rem { border-radius: var(--raio-sm); }

/* 21/09 16:40 — ícones de ação do card do cronograma (editar, subir/descer, remover, alça de arrastar) maiores
   (a pedido: "estão minúsculos"). ~~botão 30px com ícone 13px~~ botão 36px com ícone 18px; alça 20px. Só CSS. */
.vis-tl__acoes .btn--xs { min-width: 36px; height: 36px; padding: 0 .5rem; }
.vis-tl__acoes .btn--xs svg { width: 18px; height: 18px; }
.vis-tl__grip { width: 28px; height: 36px; }
.vis-tl__grip svg { width: 20px; height: 20px; }
.vis-tl__acoes { gap: .35rem; }

/* 21/09 16:50 — Visitas do colaborador: o card "Suas tarefas" ficava na coluna ESTREITA (40%) e o bloco Aceitar · Recusar
   saía minúsculo — motivo e justificativa espremidos em 3 colunas (a pedido: "o card está muito pequeno e minúsculo,
   principalmente no motivo e justificativa"). ~~tarefas 1fr · setores 1.5fr~~ tarefas 1.5fr · setores 1fr; recusa em UMA
   coluna, campos de 44px, botões tamanho normal. */
@media (min-width: 992px) { .vis-duas--colab { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.vis-prep__aceite { padding: .9rem 1rem .8rem; border-radius: 12px; }
.vis-prep__aceite-titulo { font-size: 1.1rem; margin-bottom: .45rem; }
.vis-prep__item--aceite { padding: .6rem .15rem; }
.vis-prep__item--aceite .vis-prep__txt { font-size: 1rem; line-height: 1.4; }
.vis-prep__resposta { gap: .6rem; margin-top: .5rem; }
.vis-prep__resposta .btn--xs { min-height: 38px; padding: .45rem 1rem; font-size: .9rem; }
.vis-prep__resposta .vis-recusa__form { grid-template-columns: 1fr; gap: .75rem; padding: 1rem; margin-top: .6rem; }
.vis-prep__resposta .vis-recusa__form label { font-size: .92rem; margin-bottom: .3rem; }
.vis-prep__resposta .vis-recusa__form select, .vis-prep__resposta .vis-recusa__form input { min-height: 44px; font-size: 1rem; }
.vis-prep__resposta .vis-recusa__form .btn { justify-self: start; }
/* Aceitar e Recusar lado a lado mesmo com a recusa aberta: o <details> vira "contents" e o form ocupa a linha de baixo. */
.vis-prep__resposta .vis-recusa[open] { display: contents; }
.vis-prep__resposta .vis-recusa[open] > summary { background: var(--vis-vermelho-bg); color: var(--vis-vermelho); border-color: var(--vis-vermelho); }
.vis-prep__resposta .vis-recusa[open] > .vis-recusa__form { flex: 1 1 100%; }
.vis-prep__resposta .vis-recusa__form { max-width: none; width: 100%; }   /* .form global limita a largura */
@media (max-width: 767.98px) { .vis-prep__item--aceite .vis-prep__resposta { grid-column: 1 / -1; } }
/* Chrome 131+: o conteúdo do <details> fica num ::details-content (bloco) — sem isto ele encolhe pro tamanho do texto. */
.vis-prep__resposta .vis-recusa[open]::details-content { flex: 1 1 100%; width: 100%; display: block; }

/* 21/09 16:50 — card "Setores da visita" (colaborador) em 2 COLUNAS dentro do mesmo card (a pedido: "o card está muito
   grande, tente pôr em 2 colunas dentro do mesmo card"). ~~tarefas 1.5fr · setores 1fr (16:24)~~ as duas colunas ficam
   iguais (50/50) para os setores terem largura; a lista vira 2 colunas fluidas (sem buraco) a partir de 1200px. */
@media (min-width: 992px) { .vis-duas--colab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1200px) {
    .vis-duas--colab .vis-setores { display: block; columns: 2; column-gap: .65rem; }
    .vis-duas--colab .vis-setores__item { break-inside: avoid; page-break-inside: avoid; margin-bottom: .65rem; }
}

/* 21/09 16:55 — "muito grande ainda, pode alargar mais": a página do colaborador vira UMA coluna (cada card em largura
   total); Setores da visita em 3 colunas fluidas ≥1200px (2 entre 768 e 1199); as tarefas, agora largas, em 2 colunas
   fluidas ≥992px. ~~duas colunas 50/50 (16:50)~~ */
@media (min-width: 992px) { .vis-duas--colab { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) {
    .vis-duas--colab .vis-setores { display: block; columns: 2; column-gap: .65rem; }
    .vis-duas--colab .vis-setores__item { break-inside: avoid; page-break-inside: avoid; margin-bottom: .65rem; }
}
@media (min-width: 1200px) { .vis-duas--colab .vis-setores { columns: 3; } }
@media (min-width: 992px) {
    .vis-prep--colab .vis-prep__lista { columns: 2; column-gap: 2.5rem; }
    .vis-prep--colab .vis-prep__lista > .vis-prep__item { break-inside: avoid; page-break-inside: avoid; min-width: 0; }
}

/* 21/09 17:50 — card "Incluir atividade" acolchoado por dentro (a pedido: "acolchoa ele, o design interior"). ~~caixa
   cinza com .85rem de padding, campos de 2.5rem, gaps de .6rem~~ caixa branca com 1.4rem de padding e cantos 14px, campos
   de 2.9rem (46px), gaps maiores, rótulos e dica com mais respiro, botão na altura dos campos. */
.vis-incluir--retratil { padding: 1rem var(--sp-4) 1.1rem; }
.vis-incluir--retratil > summary .card__title { font-size: 1.1rem; }
.vis-incluir--retratil > .vis-add { margin-top: 1rem; padding: 1.4rem 1.5rem 1.2rem; border-radius: 14px; background: var(--cor-superficie); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.05); }
.vis-add__grid { gap: 1rem var(--sp-4); }
.vis-add__grid label { font-size: .88rem; margin-bottom: .4rem; }
.vis-add__grid select, .vis-add__grid input { height: 2.9rem; padding: .5rem .8rem; font-size: .95rem; background: var(--cor-bg); }
.vis-add__grid select:focus, .vis-add__grid input:focus { background: var(--cor-superficie); }
.vis-add__linha { gap: var(--sp-4); margin-top: .2rem; }
.vis-add__acao .btn { min-height: 2.9rem; padding: .6rem 1.4rem; border-radius: var(--raio-sm); }
.vis-add__dica { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--cor-borda); }
.vis-add__grid .vis-extras { margin-top: .2rem; padding: .9rem 1rem; background: var(--cor-bg); border: 1px dashed var(--cor-borda); border-radius: 12px; }
.vis-add__grid .vis-extras select { height: 2.9rem; background: var(--cor-superficie); }
.vis-add__grid .vis-extras__item { gap: .6rem; margin-bottom: .5rem; }
.vis-add__grid .vis-extras__item .btn--xs { min-width: 36px; height: 36px; }
.vis-add__grid .vis-extras__mais { margin-top: .3rem; min-height: 36px; }

/* 22/09 — prévia do texto automático de boas-vindas na folha (card Dados da visita). */
.vis-bv-previa { display: grid; gap: .3rem; margin: 0 0 .5rem; padding: .85rem 1rem; background: var(--cor-bg); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-primaria); border-radius: 12px; }
.vis-bv-previa strong { font-size: 1rem; color: var(--cor-primaria); }
.vis-bv-previa span { font-size: .9rem; line-height: 1.45; }
.vis-bv-previa small { color: var(--cor-texto-suave); font-size: .78rem; }

/* 22/09 — card "Hoje" do painel: a etiqueta de status ("Aguardando confirmações") vazava para fora do item (a 3ª coluna
   do grid é `auto` + `nowrap`, e na coluna estreita do painel faltavam ~4px). Agora a etiqueta desce para a linha de
   baixo quando o CARD é estreito (container query — não depende da largura da janela) e, em qualquer navegador, pode
   quebrar em vez de transbordar. ~~só a media query de 575px cuidava disso, e ela olha a janela, não o card~~ */
.vis-visitas { container-type: inline-size; }
.vis-visita .vis-status { min-width: 0; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }
@container (max-width: 460px) {
    .vis-visita { grid-template-columns: auto minmax(0, 1fr); row-gap: .35rem; column-gap: var(--sp-2); }
    .vis-visita__quando small { white-space: nowrap; }         /* "08:12–14:42" não quebra no meio */
    .vis-visita .vis-status { grid-column: 2; justify-self: start; text-align: left; white-space: nowrap; }
}

/* ==========================================================================
   Mini cards de formulário (22/09/2026, a pedido: "melhora o card de
   adicionar o novo setor, ponha mini cards ali dentro acolchoados, quero que
   fique parecido com o restante" — e o mesmo para "Filial que vem visitar" e
   "Data e horário" em /gestao/visitas/nova).

   Antes os campos eram linhas soltas (`form-row` + `form-field`) dentro de um
   card grande: tudo colado, sem hierarquia, e cada tela com um espaçamento.
   Agora cada campo é um mini card com respiro próprio, e campos que andam
   juntos ficam num GRUPO com título — o mesmo desenho dos cards de conteúdo
   que o resto do sistema já usa.
   ========================================================================== */
.vis-mini { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vis-mini__campo {
    display: flex; flex-direction: column; gap: .4rem; min-width: 0;
    padding: .8rem .9rem; background: var(--cor-bg);
    border: 1px solid var(--cor-borda); border-radius: var(--raio);
    transition: border-color .15s, box-shadow .15s;
}
.vis-mini__campo:focus-within { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(31, 78, 121, .10); }
.vis-mini__campo > label,
.vis-mini__campo > .vis-mini__rot {
    margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cor-texto-suave);
}
.vis-mini__campo > label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* O controle fica branco sobre o fundo do mini card — sem isso some no cinza. */
/* Os controles herdavam o visual de `.form-field`; fora dela ficavam crus
   (sem altura, sem raio). O mini card repete o mesmo desenho, para a tela
   continuar parecida com o resto do sistema. */
.vis-mini__campo input, .vis-mini__campo select, .vis-mini__campo textarea {
    width: 100%; padding: .6rem .8rem; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm); font: inherit; background: var(--cor-superficie); color: var(--cor-texto);
}
.vis-mini__campo input { min-height: 46px; }
.vis-mini__campo textarea { min-height: 96px; resize: vertical; }
.vis-mini__campo input:focus, .vis-mini__campo select:focus, .vis-mini__campo textarea:focus {
    border-color: var(--cor-primaria); outline: none; box-shadow: 0 0 0 3px rgba(31, 78, 121, .15);
}
/* O checkbox do card de marcar volta ao tamanho natural. */
.vis-mini__campo .check input[type="checkbox"] { width: auto; min-height: 0; padding: 0; accent-color: var(--cor-primaria); }
.vis-mini__campo .form-hint, .vis-mini__dica { margin: 0; font-size: .78rem; line-height: 1.35; color: var(--cor-texto-suave); }
.vis-mini__campo--largo { grid-column: 1 / -1; }
/* Campo de marcar (checkbox): o rótulo vira a própria linha clicável. */
.vis-mini__campo .check { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600;
    text-transform: none; letter-spacing: 0; color: var(--cor-texto); }

/* Grupo: um conjunto de mini cards com um título discreto. */
.vis-grupo { margin: 0 0 var(--sp-3); }
.vis-grupo > h3 {
    margin: 0 0 .55rem; display: flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cor-primaria);
}
.vis-grupo > h3 svg { width: 15px; height: 15px; }
.vis-grupo > h3 .muted { font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.vis-grupo:last-of-type { margin-bottom: 0; }

@media (max-width: 560px) {
    .vis-mini { grid-template-columns: 1fr; gap: .6rem; }
    .vis-mini__campo { padding: .7rem .8rem; }
}

/* 22/09: o cronograma passou a pedir HORA em vez de minutos (a pedido). Dois
   campos de relógio lado a lado, com a duração calculada embaixo do segundo. */
.vis-tl__campo--hora { min-width: 7.5rem; }
.vis-tl__campo--hora input[type="time"] { font-variant-numeric: tabular-nums; }
.vis-tl__dur { display: block; margin-top: .2rem; font-size: .76rem; color: var(--cor-texto-suave); }
.vis-tl__dur.is-erro { color: var(--cor-erro, #b03a3a); font-weight: 700; }

/* ==========================================================================
   Gestão de Projetos (Spec 15, 22/09/2026)
   --------------------------------------------------------------------------
   Prefixo `prj-` para não colidir com o módulo de Visitas (`vis-`), que tem
   componentes de nome parecido e regras próprias.

   O painel foi desenhado a partir do KPI da Logística que o operador usa:
   bloco colorido, número grande e rótulo curto. Duas diferenças de propósito:

     1. aqui o bloco é LINK — abre a lista que compõe aquele número. No painel
        do estoque o número é só leitura;
     2. a cor não é decoração: vermelho/laranja/roxo/amarelo dizem QUE TIPO de
        problema é, e o cartão só "acende" (`.is-aceso`) quando há algo a
        tratar. Painel com tudo aceso o tempo todo ensina a ignorar cor.

   Mobile first: 2 colunas no celular, 3 no tablet, 5–6 no desktop. Nada de
   rolagem horizontal em 360px — as linhas de projeto quebram em blocos.
   ========================================================================== */
:root {
    --prj-vermelho: #c62828; --prj-vermelho-bg: #fdecea;
    --prj-laranja: #d9670c;  --prj-laranja-bg: #fdf0e4;
    --prj-amarelo: #b7791f;  --prj-amarelo-bg: #fff4d6;
    --prj-roxo: #6b3fc7;     --prj-roxo-bg: #f0eafc;
    --prj-verde: #1e9e5a;    --prj-verde-bg: #e6f6ec;
    --prj-azul: #0064d5;     --prj-azul-bg: #e6f0fc;
    --prj-azul-claro: #2f7fe6;
    --prj-cinza: #6b7a89;    --prj-cinza-bg: #eef1f4;
}

/* ---- Cabeçalho e botões (mesmo desenho dos botões de Visitas) ---- */
.prj-cab-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.prj-btn-cab { background: var(--cor-superficie); border: 1px solid var(--cor-borda); color: var(--cor-texto); font-weight: 600; }
.prj-btn-cab svg { color: var(--cor-texto-suave); fill: none; stroke: currentColor; transition: color .15s ease; }
.prj-btn-cab:hover, .prj-btn-cab:focus-visible { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; text-decoration: none; }
.prj-btn-cab:hover svg, .prj-btn-cab:focus-visible svg { color: #fff; }
.prj-btn-cab--novo { font-weight: 700; border-color: transparent; color: var(--cor-primaria); }
.prj-btn-cab--novo svg { color: var(--cor-primaria); }

/* ---- Filtros globais ---- */
.prj-filtros { padding: var(--sp-3) var(--sp-4); }
.prj-filtros__tit { display: flex; align-items: center; gap: .45rem; font-size: 1rem; margin: 0 0 .75rem; color: var(--cor-texto-suave); }
.prj-filtros__tit svg { fill: none; stroke: currentColor; }
.prj-filtros__limpar { margin-left: auto; font-size: .85rem; font-weight: 600; }
.prj-filtros__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.prj-filtros__grade .form-field { margin-bottom: 0; }
.prj-filtros__acoes { display: flex; align-items: flex-end; padding-top: 0; }
.prj-filtros__acoes .btn { width: 100%; }
@media (min-width: 640px)  { .prj-filtros__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .prj-filtros__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
                             .prj-filtros__acoes .btn { width: auto; } }

/* ---- Faixas de indicadores ---- */
.prj-faixa-tit { font-size: .92rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
                 color: var(--cor-texto-suave); margin: var(--sp-4) 0 .6rem; }
.palco-azul .prj-faixa-tit { color: rgba(255, 255, 255, .85); }

.prj-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: var(--sp-3); }
@media (min-width: 640px)  { .prj-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } }
@media (min-width: 1024px) { .prj-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .prj-kpis--geral { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.prj-kpi {
    --c: var(--prj-cinza); --c-bg: var(--prj-cinza-bg);
    display: flex; flex-direction: column; gap: .1rem;
    padding: .7rem .85rem; min-height: 86px;
    background: var(--cor-superficie); border-radius: 14px; border-left: 5px solid var(--c);
    color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}
a.prj-kpi:hover, a.prj-kpi:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); text-decoration: none; }
/* Aceso = tem número a tratar. Fundo tingido e borda cheia: dá para achar de
   longe, sem precisar ler o rótulo. */
.prj-kpi.is-aceso { background: var(--c-bg); border-left-width: 7px; }
.prj-kpi__num { font-size: 1.9rem; font-weight: 800; line-height: 1.05; color: var(--c); font-variant-numeric: tabular-nums; }
.prj-kpi__lbl { font-size: .84rem; color: var(--cor-texto); font-weight: 600; line-height: 1.25; }
.prj-kpi__dica { font-size: .72rem; color: var(--cor-texto-suave); line-height: 1.3; margin-top: .1rem; }
@media (min-width: 1024px) { .prj-kpi__num { font-size: 2.2rem; } }

.prj-kpi--vermelho   { --c: var(--prj-vermelho); --c-bg: var(--prj-vermelho-bg); }
.prj-kpi--laranja    { --c: var(--prj-laranja);  --c-bg: var(--prj-laranja-bg); }
.prj-kpi--amarelo    { --c: var(--prj-amarelo);  --c-bg: var(--prj-amarelo-bg); }
.prj-kpi--roxo       { --c: var(--prj-roxo);     --c-bg: var(--prj-roxo-bg); }
.prj-kpi--verde      { --c: var(--prj-verde);    --c-bg: var(--prj-verde-bg); }
.prj-kpi--azul       { --c: var(--prj-azul);     --c-bg: var(--prj-azul-bg); }
.prj-kpi--azul-claro { --c: var(--prj-azul-claro); --c-bg: var(--prj-azul-bg); }
.prj-kpi--cinza      { --c: var(--prj-cinza);    --c-bg: var(--prj-cinza-bg); }

/* ---- Etiquetas ---- */
.prj-tag, .prj-saude, .prj-prio {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .12rem .5rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.prj-tag svg, .prj-saude svg, .prj-prio svg { fill: none; stroke: currentColor; }
/* Colunas do quadro (migration 0071). Frio → quente pelo fluxo: o que ainda
   não começou é cinza, o que está sendo feito é azul, o que espera outra pessoa
   é roxo. Bloqueado é marca, não coluna — mas mantém a etiqueta vermelha. */
.prj-tag--ideia     { background: var(--prj-cinza-bg);    color: var(--prj-cinza); }
.prj-tag--aprovado  { background: var(--prj-cinza-bg);    color: var(--cor-texto); }
.prj-tag--pronto    { background: var(--prj-azul-bg);     color: var(--cor-primaria); }
.prj-tag--execucao  { background: var(--prj-azul-bg);     color: var(--prj-azul); }
.prj-tag--revisao   { background: var(--prj-roxo-bg);     color: var(--prj-roxo); }
.prj-tag--aprovacao { background: var(--prj-roxo-bg);     color: var(--prj-roxo); }
.prj-tag--bloqueado { background: var(--prj-vermelho-bg); color: var(--prj-vermelho); }
.prj-tag--concluido { background: var(--prj-verde-bg);    color: var(--prj-verde); }
.prj-tag--cancelado { background: var(--prj-cinza-bg);    color: var(--prj-cinza); }
.prj-tag--aberta    { background: var(--prj-cinza-bg);    color: var(--prj-cinza); }
.prj-tag--andamento { background: var(--prj-azul-bg);     color: var(--prj-azul); }
.prj-tag--concluida { background: var(--prj-verde-bg);    color: var(--prj-verde); }
.prj-tag--bloqueada { background: var(--prj-vermelho-bg); color: var(--prj-vermelho); }

.prj-saude--atencao { background: var(--prj-amarelo-bg);  color: var(--prj-amarelo); }
.prj-saude--risco   { background: var(--prj-laranja-bg);  color: var(--prj-laranja); }
.prj-saude--critico { background: var(--prj-vermelho-bg); color: var(--prj-vermelho); }

.prj-prio { background: transparent; color: var(--cor-texto-suave); font-weight: 600; padding-left: 0; }
.prj-prio--alta    { background: var(--prj-laranja-bg);  color: var(--prj-laranja); padding-left: .5rem; }
.prj-prio--urgente { background: var(--prj-vermelho-bg); color: var(--prj-vermelho); padding-left: .45rem; }

.prj-contador { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px;
                background: var(--prj-azul-bg); color: var(--prj-azul); font-size: .78rem; font-weight: 700; }

/* ---- Linha de projeto (a mesma nas quatro listas do módulo) ---- */
.prj-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.prj-lista--fraca { opacity: .72; }
.prj-lista > li { margin: 0; }

.prj-linha {
    display: grid; gap: .3rem; padding: .7rem .85rem;
    border: 1px solid var(--cor-borda); border-left: 4px solid var(--prj-cinza);
    border-radius: 12px; background: var(--cor-superficie); color: inherit; text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.prj-linha:hover, .prj-linha:focus-visible { text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.prj-linha--atencao { border-left-color: var(--prj-amarelo); }
.prj-linha--risco   { border-left-color: var(--prj-laranja); }
.prj-linha--critico { border-left-color: var(--prj-vermelho); }
.prj-linha__topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: space-between; }
.prj-linha__dep { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700;
                  text-transform: uppercase; letter-spacing: .02em; color: var(--cor-texto-suave); }
.prj-linha__dep svg { fill: none; stroke: currentColor; }
.prj-linha__tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.prj-linha__titulo { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--cor-texto); }
.prj-linha__meta { display: flex; gap: .2rem .8rem; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--cor-texto-suave); }
.prj-linha__cod { font-variant-numeric: tabular-nums; font-weight: 600; }
.prj-linha__resp { display: inline-flex; align-items: center; gap: .25rem; }
.prj-linha__resp svg { fill: none; stroke: currentColor; }
.prj-linha__fim { display: flex; align-items: center; gap: .5rem; }
.prj-linha__pct { font-size: .8rem; font-weight: 700; color: var(--cor-texto-suave); min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }

.prj-prazo { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }
.prj-prazo--vazio    { color: var(--cor-texto-suave); font-style: italic; font-weight: 500; }
.prj-prazo--perto    { color: var(--prj-laranja); }
.prj-prazo--hoje     { color: var(--prj-laranja); font-weight: 700; }
.prj-prazo--atrasado { color: var(--prj-vermelho); font-weight: 700; }

/* ---- Barra de progresso ---- */
.prj-barra { display: block; flex: 1; min-width: 60px; height: 8px; border-radius: 999px; background: var(--prj-cinza-bg); overflow: hidden; }
.prj-barra__fill { display: block; height: 100%; border-radius: 999px; background: var(--prj-azul); transition: width .3s ease; }
.prj-barra--atencao .prj-barra__fill { background: var(--prj-amarelo); }
.prj-barra--risco .prj-barra__fill   { background: var(--prj-laranja); }
.prj-barra--critico .prj-barra__fill { background: var(--prj-vermelho); }

/* ---- Blocos do painel ---- */
.prj-ajuda { font-size: .85rem; color: var(--cor-texto-suave); margin: 0 0 .6rem; }
.prj-vazio { display: flex; align-items: center; gap: .5rem; padding: .9rem; border-radius: 10px;
             background: var(--prj-verde-bg); color: var(--prj-verde); font-size: .92rem; font-weight: 600; margin: 0; }
.prj-vazio svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }
.prj-motivos { margin: .25rem 0 0 .85rem; font-size: .8rem; color: var(--cor-texto-suave); }
.prj-atencao .prj-lista { gap: .7rem; }
.prj-atencao .card__title, .prj-dash .card__title { display: flex; align-items: center; gap: .4rem; }
.prj-atencao .card__title svg, .prj-dash .card__title svg { fill: none; stroke: currentColor; }

.prj-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; margin-top: var(--sp-3); }
@media (min-width: 768px)  { .prj-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .prj-dash { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prj-dash > .card { margin: 0; padding: var(--sp-3) var(--sp-4); }
.prj-dash > .card > .card__title { font-size: 1.02rem; }

.prj-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.prj-mini a { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 10px; color: inherit; text-decoration: none; }
.prj-mini a:hover { background: var(--prj-azul-bg); text-decoration: none; }
.prj-mini__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.prj-mini__txt strong { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-mini__txt small { font-size: .76rem; color: var(--cor-texto-suave); }
.prj-mini__num { display: flex; flex-direction: column; align-items: center; font-size: 1.15rem; font-weight: 800;
                 color: var(--prj-azul); line-height: 1; font-variant-numeric: tabular-nums; }
.prj-mini__num small { font-size: .72rem; font-weight: 600; color: var(--cor-texto-suave); text-transform: uppercase; }

.prj-dep { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.prj-dep__topo { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .9rem; }
.prj-dep__n { font-size: .78rem; color: var(--cor-texto-suave); white-space: nowrap; }
.prj-dep__barra { display: block; position: relative; height: 7px; border-radius: 999px; background: var(--prj-cinza-bg); margin: .25rem 0; overflow: hidden; }
.prj-dep__fill { position: absolute; inset: 0 auto 0 0; background: var(--prj-azul); border-radius: 999px; }
.prj-dep__atraso { position: absolute; inset: 0 auto 0 0; background: var(--prj-vermelho); border-radius: 999px; }
.prj-dep__pe { font-size: .76rem; color: var(--cor-texto-suave); }
.prj-dep__alerta { color: var(--prj-vermelho); font-style: normal; font-weight: 700; }

.prj-mudancas { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.prj-mudancas a { display: grid; gap: .1rem; padding: .45rem .55rem; border-radius: 10px; color: inherit; text-decoration: none; }
.prj-mudancas a:hover { background: var(--prj-azul-bg); text-decoration: none; }
.prj-mudancas strong { font-size: .88rem; }
.prj-mudancas span { font-size: .8rem; color: var(--cor-texto); }
.prj-mudancas small { font-size: .74rem; color: var(--cor-texto-suave); }
.prj-mudancas__motivo { font-style: italic; }

/* ---- Ordenação da lista ---- */
.prj-ordenar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 0 .7rem; font-size: .84rem; }
.palco-azul .prj-ordenar { color: rgba(255, 255, 255, .85); }
.prj-ordenar__op {
    min-height: 36px; display: inline-flex; align-items: center; padding: .25rem .65rem; border-radius: 999px; background: var(--cor-superficie);
                   border: 1px solid var(--cor-borda); color: var(--cor-texto); font-weight: 600; text-decoration: none; }
.prj-ordenar__op:hover { background: var(--prj-azul-bg); text-decoration: none; }
.prj-ordenar__op.is-on { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* ---- Detalhe do projeto ---- */
.prj-topo { border-top: 4px solid var(--prj-cinza); }
.prj-topo--atencao { border-top-color: var(--prj-amarelo); }
.prj-topo--risco   { border-top-color: var(--prj-laranja); }
.prj-topo--critico { border-top-color: var(--prj-vermelho); }
.prj-topo__cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: space-between; margin-bottom: .3rem; }
.prj-topo__cod { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.prj-topo__titulo { font-size: clamp(1.25rem, 3.4vw, 1.75rem); line-height: 1.25; margin: 0 0 .7rem; }
.prj-topo__fatos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-bottom: .8rem; }
@media (min-width: 560px)  { .prj-topo__fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .prj-topo__fatos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prj-fato { display: flex; align-items: flex-start; gap: .45rem; }
.prj-fato > svg { flex: 0 0 auto; margin-top: .15rem; color: var(--cor-texto-suave); fill: none; stroke: currentColor; }
.prj-fato > span { display: flex; flex-direction: column; min-width: 0; }
.prj-fato small { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cor-texto-suave); font-weight: 700; }
.prj-fato strong { font-size: .92rem; font-weight: 600; }
.prj-topo__progresso { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.prj-topo__progresso .prj-barra { height: 11px; }
.prj-topo__pct { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right; }
.prj-diag { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .86rem; color: var(--cor-texto-suave); }
.prj-diag li { margin-bottom: .15rem; }
.prj-topo__texto { font-size: .92rem; border-top: 1px solid var(--cor-borda); padding-top: .6rem; }
.prj-topo__texto p { margin: 0 0 .35rem; }
.prj-topo__equipe { font-size: .85rem; color: var(--cor-texto-suave); margin: .3rem 0 0; }

.prj-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
@media (min-width: 1024px) { .prj-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prj-colunas > .card { margin: 0; }
.prj-colunas .card__title, .prj-atualizar .card__title { display: flex; align-items: center; gap: .4rem; }
.prj-colunas .card__title svg, .prj-atualizar .card__title svg { fill: none; stroke: currentColor; }

/* ---- Tarefas ---- */
.prj-tarefas { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: .4rem; }
.prj-tarefa { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
              padding: .55rem .7rem; border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-superficie); }
.prj-tarefa--concluida { opacity: .62; }
.prj-tarefa--concluida .prj-tarefa__txt strong { text-decoration: line-through; }
.prj-tarefa--bloqueada, .prj-tarefa.is-atrasada { border-left: 3px solid var(--prj-vermelho); }
.prj-tarefa__txt { flex: 1 1 60%; display: flex; flex-direction: column; min-width: 0; }
.prj-tarefa__txt strong { font-size: .92rem; font-weight: 600; }
.prj-tarefa__txt small { font-size: .78rem; color: var(--cor-texto-suave); }
.prj-tarefa__obs { font-style: italic; }
.prj-tarefa__acoes { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.prj-tarefa__acoes select, .prj-tarefa select {
    min-height: 38px; padding: .25rem .5rem; font-size: .84rem;
    border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-superficie); color: var(--cor-texto);
}
.prj-tarefa-nova { border-top: 1px solid var(--cor-borda); padding-top: var(--sp-3); }

/* ---- Linha do tempo e histórico ---- */
.prj-timeline { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 1rem; border-left: 2px solid var(--cor-borda); display: grid; gap: .8rem; }
.prj-timeline li { position: relative; }
.prj-timeline__ponto { position: absolute; left: -1.38rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%;
                       background: var(--prj-azul); border: 2px solid var(--cor-superficie); }
.prj-timeline p { margin: 0 0 .15rem; font-size: .92rem; }
.prj-timeline small { font-size: .76rem; color: var(--cor-texto-suave); }
.prj-sub { font-size: .92rem; font-weight: 700; color: var(--cor-texto-suave); margin: 0 0 .4rem; }
.prj-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .82rem; }
.prj-hist li { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; padding-bottom: .3rem; border-bottom: 1px dashed var(--cor-borda); }
.prj-hist__campo { text-transform: uppercase; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
                   color: var(--prj-azul); background: var(--prj-azul-bg); padding: .05rem .4rem; border-radius: 4px; }
.prj-hist__motivo { font-style: italic; color: var(--cor-texto-suave); }
.prj-hist small { color: var(--cor-texto-suave); margin-left: auto; font-size: .74rem; }

/* ---- Formulários do módulo ---- */
.prj-form__bloco { border: 0; border-top: 1px solid var(--cor-borda); padding: var(--sp-3) 0 0; margin: 0 0 var(--sp-3); }
.prj-form__bloco:first-of-type { border-top: 0; padding-top: 0; }
.prj-form__bloco legend { font-weight: 700; font-size: .95rem; color: var(--cor-primaria); padding: 0; margin-bottom: .5rem; }
.prj-form input[type="range"], .prj-atualizar input[type="range"] { width: 100%; accent-color: var(--cor-primaria); }
.prj-editar { margin-top: var(--sp-3); }

/* ---- Departamentos e acesso ---- */
.prj-deps, .prj-acesso { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.prj-deps__item, .prj-acesso__item { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
                                     padding: .5rem .65rem; border: 1px solid var(--cor-borda); border-radius: 10px; }
.prj-deps__item.is-off { opacity: .6; }
.prj-deps__form, .prj-acesso__form { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; flex: 1; }
.prj-deps__form input[type="text"], .prj-deps__form select, .prj-acesso__form select {
    min-height: 40px; padding: .3rem .55rem; border: 1px solid var(--cor-borda);
    border-radius: 8px; background: var(--cor-superficie); color: var(--cor-texto);
}
.prj-deps__form input[type="text"] { flex: 1; min-width: 140px; }
.prj-deps__ic { color: var(--cor-texto-suave); display: inline-flex; }
.prj-deps__ic svg { fill: none; stroke: currentColor; }
.prj-deps__check { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; white-space: nowrap; }
.prj-deps__n { font-size: .78rem; color: var(--cor-texto-suave); white-space: nowrap; }
.prj-deps__trava { color: var(--cor-texto-suave); display: inline-flex; padding: .3rem; }
.prj-deps__trava svg { fill: none; stroke: currentColor; }
.prj-acesso__item.is-liberado { border-left: 4px solid var(--prj-verde); background: var(--prj-verde-bg); }
.prj-acesso__pessoa { display: flex; flex-direction: column; flex: 1; min-width: 150px; }
.prj-acesso__pessoa small { font-size: .76rem; color: var(--cor-texto-suave); }
.prj-busca { display: grid; gap: .5rem; margin-bottom: var(--sp-3); }
.prj-busca .form-field { margin-bottom: 0; }
.prj-busca .form-field--fim { display: flex; gap: .4rem; align-items: flex-end; padding-top: 0; }
@media (min-width: 640px) { .prj-busca { grid-template-columns: 1fr auto; align-items: end; } }

/* O sprite de símbolos não ocupa espaço nenhum na página. */
.prj__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Larguras em passos de 5%, para as barras do módulo de Projetos.
   Classe em vez de style="width:X%" porque o CSP (style-src 'self') bloqueia
   atributo de estilo inline — com o style inline a barra é desenhada sempre
   com largura zero. Mesma solução das barras da auditoria (.barras__valor--N).
   O número exato continua escrito ao lado da barra; 5% de arredondamento não
   muda o que a pessoa lê. */
.prj-w-0 { width: 0%; }
.prj-w-5 { width: 5%; }
.prj-w-10 { width: 10%; }
.prj-w-15 { width: 15%; }
.prj-w-20 { width: 20%; }
.prj-w-25 { width: 25%; }
.prj-w-30 { width: 30%; }
.prj-w-35 { width: 35%; }
.prj-w-40 { width: 40%; }
.prj-w-45 { width: 45%; }
.prj-w-50 { width: 50%; }
.prj-w-55 { width: 55%; }
.prj-w-60 { width: 60%; }
.prj-w-65 { width: 65%; }
.prj-w-70 { width: 70%; }
.prj-w-75 { width: 75%; }
.prj-w-80 { width: 80%; }
.prj-w-85 { width: 85%; }
.prj-w-90 { width: 90%; }
.prj-w-95 { width: 95%; }
.prj-w-100 { width: 100%; }

/* ---- Telas estreitas: 360–430px ----
   O painel tem números grandes e etiquetas longas; sem estas regras a linha de
   projeto e os cartões de KPI empurravam a página alguns pixels para o lado, o
   que no celular vira rolagem horizontal. Medido com Playwright em 360px. */
@media (max-width: 430px) {
    .prj-kpi { padding: .6rem .7rem; min-height: 78px; }
    .prj-kpi__num { font-size: 1.6rem; }
    .prj-kpi__lbl { font-size: .78rem; }
    .prj-kpi__dica { display: none; }   /* a dica é apoio; no celular ela rouba a tela */
    .prj-linha { padding: .6rem .7rem; }
    .prj-linha__titulo { font-size: .95rem; }
    .prj-linha__meta { font-size: .78rem; gap: .15rem .5rem; }
    .prj-linha__fim { gap: .4rem; }
    .prj-linha__pct { min-width: 2.2rem; font-size: .76rem; }
    .prj-barra { min-width: 0; }
    .prj-topo__pct { min-width: 2.4rem; }
    .prj-hist small { margin-left: 0; }
    .prj-deps__form input[type="text"] { min-width: 100px; }
}

/* Nenhum elemento do módulo pode ser mais largo que a tela: trava de segurança
   para texto sem espaço (código, nome de arquivo) em telas pequenas. */
.prj-linha, .prj-kpi, .prj-tarefa, .prj-deps__item, .prj-acesso__item { max-width: 100%; min-width: 0; }
.prj-linha__titulo, .prj-mini__txt strong, .prj-mudancas strong { overflow-wrap: anywhere; }

/* Grid que encolhe de verdade no celular.
   `1fr` sozinho não deixa a coluna ficar menor que o CONTEÚDO dela (min-width
   auto é o padrão do grid), então um card com texto largo empurrava a página
   39px para o lado em 360px — medido com Playwright. `minmax(0, 1fr)` + o
   `min-width: 0` nos filhos é o que permite o conteúdo quebrar em vez de
   esticar a coluna. */
/* Só `min-width` aqui. ~~Esta regra também redefinia `grid-template-columns`~~
   — e, vindo depois das media queries com a mesma especificidade, ela
   derrubava o layout de 2 e 4 colunas: no desktop os filtros voltavam a
   ficar empilhados numa coluna só. O `minmax(0, 1fr)` foi para as
   declarações originais de cada grid, que são mobile first. */
.prj-dash > .card, .prj-colunas > .card { min-width: 0; }
.prj-mini a, .prj-mudancas a, .prj-dep li { min-width: 0; }
/* Todo item de grid do módulo pode encolher. Sem isto, cada lista aninhada
   (ul.prj-mini > li > a) repete o problema do `min-width: auto` um nível
   abaixo — foi assim que sobraram 12px de rolagem depois da primeira correção. */
.prj-mini > li, .prj-mudancas > li, .prj-dep > li, .prj-lista > li,
.prj-tarefas > li, .prj-deps > li, .prj-acesso > li, .prj-timeline > li { min-width: 0; }
.prj-mini > li > a, .prj-mudancas > li > a { max-width: 100%; }

/* ==========================================================================
   Gestão de Projetos — Quadro (Fase 1 do plano, docs/specs/16)

   Refeito em 23/09/2026 a pedido do operador, com o Jira da Serraf como
   referência: "o kanban não está do jeito que eu quero".

   O QUE MUDOU DE IDEIA. A versão anterior punha no cartão tudo o que o módulo
   sabia — barra de progresso, prazo escrito, idade na coluna, seletor de
   mover, encaixes de vaga no cabeçalho. Cada peça se justificava sozinha, e
   juntas faziam o quadro pedir leitura em vez de dar resposta. Agora o cartão
   guarda o que se lê de relance e o resto vive na tela do projeto.

   ONDE ESTÁ A COR. Cartão em dia é branco e mudo. Cor no quadro significa
   uma coisa só: alguém precisa agir — etiqueta de atraso, de bloqueio, de
   prazo curto, ou a coluna que passou do limite. Sem isso o vermelho vira
   papel de parede e para de ser avisado em duas semanas.

   A coluna NÃO tem cor própria de família (a versão anterior tinha barra
   colorida no topo): sete cores fixas competiam com as três que importam.
   ========================================================================== */
body.prj-palco-quadro .container { max-width: 1880px; }

/* Setores: chips sobre o fundo azul. No celular, uma linha que rola de lado
   em vez de ocupar meia tela empilhada. */
.prj-qdeps {
    display: flex; gap: .4rem; overflow-x: auto; padding: .15rem 0 .5rem; margin: var(--sp-3) 0;
    scrollbar-width: thin;
}
.prj-dep-chip {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; min-height: 36px;
    padding: .3rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600; white-space: nowrap;
    color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
}
.prj-dep-chip:hover { text-decoration: none; background: rgba(255, 255, 255, .22); }
.prj-dep-chip[aria-current="page"] { background: #fff; color: var(--cor-primaria); border-color: #fff; font-weight: 750; }
@media (min-width: 1024px) { .prj-qdeps { flex-wrap: wrap; overflow: visible; } }

/* ---- Barra de filtros rápidos ------------------------------------------
   Uma linha só, como a do Jira: buscar, quem, e dois atalhos. Cada controle
   é um <button type="submit"> do mesmo formulário GET — funciona sem
   JavaScript e o estado ligado fica no aria-pressed, não só na cor. */
.prj-fq {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin: var(--sp-3) 0 .65rem; padding: .5rem .6rem;
    background: var(--cor-superficie); border-radius: 12px; box-shadow: var(--sombra);
}
.prj-fq__busca {
    display: flex; align-items: center; gap: .35rem; flex: 1 1 13rem; min-width: 0; max-width: 22rem;
    padding: 0 .55rem; min-height: 36px;
    background: #f4f6f9; border: 1px solid var(--cor-borda); border-radius: 8px;
    color: var(--cor-texto-suave);
}
.prj-fq__busca:focus-within { background: #fff; border-color: var(--cor-acento); box-shadow: 0 0 0 3px rgba(47, 127, 230, .18); }
.prj-fq__busca input {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: .3rem 0;
    font: inherit; font-size: .88rem; color: var(--cor-texto);
}
.prj-fq__busca input:focus { outline: none; }
/* O botão de buscar existe para quem não tem teclado com Enter à mão (toque)
   e para leitor de tela; no desktop o Enter no campo já envia. */
.prj-fq__ir {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.prj-fq__ir:focus-visible {
    position: static; width: auto; height: auto; clip-path: none;
    padding: .2rem .4rem; border-radius: 6px; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 700; color: var(--cor-primaria); background: #fff;
}

.prj-fq__gente { display: flex; align-items: center; flex-wrap: wrap; }
/* Sobrepostos, como no board dele. O avatar ativo sobe para a frente da pilha. */
.prj-fq__gente > * + * { margin-left: -6px; }
.prj-fq__av .prj-selo { box-shadow: 0 0 0 2px var(--cor-superficie); }
.prj-fq__av:hover, .prj-fq__av.is-on { position: relative; z-index: 2; }
.prj-fq__av {
    display: inline-grid; place-items: center; padding: 3px; border: 0; background: none; cursor: pointer;
    border-radius: 50%; line-height: 0; min-width: 36px; min-height: 36px;
}
.prj-fq__av .prj-selo { transition: transform .12s ease; }
.prj-fq__av:hover .prj-selo { transform: translateY(-1px); }
.prj-fq__av.is-on { background: var(--cor-acento); }
.prj-fq__av.is-on .prj-selo { box-shadow: 0 0 0 2px #fff; }

.prj-fq__mais { position: relative; }
.prj-fq__mais > summary {
    display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    font-size: .72rem; font-weight: 700; cursor: pointer; list-style: none;
    background: var(--prj-cinza-bg); color: var(--cor-texto-suave);
}
.prj-fq__mais > summary::-webkit-details-marker { display: none; }
.prj-fq__lista {
    position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; width: max-content; max-width: 16rem;
    display: grid; gap: .1rem; padding: .35rem;
    background: #fff; border: 1px solid var(--cor-borda); border-radius: 10px; box-shadow: var(--sombra-forte);
}
.prj-fq__lista button {
    display: flex; align-items: center; gap: .45rem; width: 100%; padding: .35rem .5rem;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
    font: inherit; font-size: .84rem; text-align: left; color: var(--cor-texto);
}
.prj-fq__lista button:hover { background: var(--prj-azul-bg); }
.prj-fq__lista small { margin-left: auto; color: var(--cor-texto-suave); }

.prj-fq__chip {
    min-height: 36px; padding: .3rem .8rem; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: .84rem; font-weight: 600;
    background: #f4f6f9; border: 1px solid var(--cor-borda); color: var(--cor-texto);
}
.prj-fq__chip:hover { background: var(--prj-azul-bg); border-color: var(--prj-azul-claro); }
.prj-fq__chip.is-on { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.prj-fq__sel {
    min-height: 36px; padding: .3rem 1.6rem .3rem .6rem; font-size: .84rem;
    border: 1px solid var(--cor-borda); border-radius: 8px; background-color: #f4f6f9; color: var(--cor-texto);
}
.prj-fq__limpar { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--cor-primaria); }

.prj-quadro-nota { margin: 0 0 .5rem; font-size: .82rem; color: rgba(255, 255, 255, .85); }

/* ---- O quadro ----------------------------------------------------------
   Colunas de largura fixa que rolam de lado, como no Jira: sete colunas
   espremidas para caber na tela dariam cartão de duas palavras por linha. */
/* FLEX, e não grid: `grid-auto-columns` dá a mesma largura a todas as colunas,
   e uma coluna recolhida precisa ser mais estreita que as vizinhas. */
.prj-quadro {
    display: flex; gap: .5rem;
    padding: .5rem; border-radius: 14px; background: var(--cor-superficie); box-shadow: var(--sombra);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
@media (min-width: 640px) { .prj-quadro { scroll-snap-type: none; } }

.prj-col {
    display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start;
    flex: 0 0 84%;
    background: var(--prj-fundo-frio); border-radius: 10px; padding: .55rem .5rem .5rem;
    transition: flex-basis .18s ease, background-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 640px)  { .prj-col { flex: 0 0 360px; } }
@media (min-width: 1600px) { .prj-col { flex: 0 0 380px; } }

/* ---- Coluna recolhida ---------------------------------------------------
   Pedido do operador (23/09): poder encolher a coluna para a lateral. Vira uma
   faixa fina com o nome de pé e a contagem, como no board dele — e continua
   valendo como alvo de arrasto: soltar um cartão numa coluna recolhida move o
   projeto do mesmo jeito. Por isso ela encolhe, mas não some.

   `visibility: hidden` na lista, e não `display: none`: o cartão arrastado
   precisa achar o retângulo da coluna, e elemento sem caixa não tem retângulo. */
.prj-col.is-dobrada { flex: 0 0 2.75rem; padding: .55rem .25rem .5rem; overflow: hidden; }
.prj-col.is-dobrada .prj-col__cartoes,
.prj-col.is-dobrada .prj-col__vazio,
.prj-col.is-dobrada .prj-col__criar { visibility: hidden; height: 0; margin: 0; padding: 0; min-height: 0; }
.prj-col.is-dobrada .prj-col__cab {
    flex-direction: column; gap: .5rem; padding: 0; height: 100%; justify-content: flex-start;
}
.prj-col.is-dobrada .prj-col__nome {
    writing-mode: vertical-rl; rotate: 180deg;
    max-height: 14rem; overflow: hidden; text-overflow: ellipsis;
    margin-top: .35rem; order: 3;
}
.prj-col.is-dobrada .prj-col__n    { order: 2; }
.prj-col.is-dobrada .prj-col__wip  { order: 4; margin: 0; writing-mode: vertical-rl; rotate: 180deg; }
.prj-col.is-dobrada .prj-col__dobrar { order: 1; margin: 0; }

/* O botão de recolher/abrir. Nasce pelo JavaScript: sem ele o botão não teria
   o que fazer, e botão morto na tela é pior do que botão nenhum. */
.prj-col__dobrar {
    flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px;
    margin-left: auto; border: 0; border-radius: 6px; background: none; cursor: pointer;
    color: var(--cor-texto-suave);
}
.prj-col__dobrar:hover { background: rgba(23, 52, 140, .08); color: var(--cor-primaria); }
.prj-col__dobrar svg { transition: rotate .18s ease; }
.prj-col.is-dobrada .prj-col__dobrar svg { rotate: 180deg; }
/* Com WIP no cabeçalho o botão perde o empurrão do margin-left: auto. */
.prj-col__wip + .prj-col__dobrar { margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
    .prj-col, .prj-col__dobrar svg { transition: none; }
}
.prj-col.is-alvo { background: var(--prj-azul-bg); box-shadow: inset 0 0 0 2px var(--cor-acento); }

.prj-col__cab { display: flex; align-items: center; gap: .4rem; padding: .15rem .35rem .55rem; min-width: 0; }
/* O board do operador (Jira da Serraf) escreve "Em Estudo", não "EM ESTUDO":
   capitalização normal, peso alto, cor escura. A versão de hoje cedo tinha posto
   maiúsculas — corrigido em 23/09 depois de ver os prints dele. */
.prj-col__nome {
    margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .88rem; font-weight: 700; color: var(--cor-texto);
}
.prj-col__n { font-size: .82rem; font-weight: 600; color: var(--cor-texto-suave); }
.prj-col__wip {
    margin-left: auto; padding: .1rem .4rem; border-radius: 6px;
    font-size: .72rem; font-weight: 700; color: var(--cor-texto-suave); background: rgba(23, 52, 140, .07);
}
.prj-col.is-estourada .prj-col__wip { background: var(--prj-vermelho-bg); color: var(--prj-vermelho); }

.prj-col__cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; flex: 1; min-height: 2rem; }
/* Cada coluna rola sozinha a partir do desktop, como no board dele: sem isso a
   página inteira cresce com a coluna mais cheia e as outras viram espaço vazio.
   No celular fica como estava — rolagem dentro de rolagem, no dedo, é armadilha. */
@media (min-width: 1024px) {
    .prj-col__cartoes { max-height: calc(100vh - 19rem); min-height: 8rem; overflow-y: auto; scrollbar-width: thin; padding-right: .15rem; }
}
.prj-col__cartoes > li { min-width: 0; }
.prj-col__vazio { margin: .1rem .35rem; font-size: .78rem; color: var(--cor-texto-suave); }

/* "+ Criar" só nas colunas onde um projeto pode nascer (Ideia e Aprovado):
   criar direto em Execução pularia a conferência de limite, que é o ponto. */
.prj-col__criar {
    display: flex; align-items: center; gap: .35rem; margin-top: .35rem; padding: .4rem .5rem;
    border-radius: 8px; font-size: .82rem; font-weight: 600; color: var(--cor-texto-suave);
}
.prj-col__criar:hover { background: rgba(23, 52, 140, .07); color: var(--cor-primaria); text-decoration: none; }

/* ---- O cartão ----------------------------------------------------------- */
.prj-cartao {
    position: relative; display: grid; gap: .45rem; padding: .75rem .85rem .7rem;
    background: var(--cor-superficie); border-radius: 8px;
    box-shadow: 0 1px 1px rgba(20, 40, 70, .18), 0 0 1px rgba(20, 40, 70, .28);
}
.prj-cartao:hover { background: #fafbfc; }
.prj-cartao.is-bloqueado { box-shadow: 0 1px 1px rgba(20, 40, 70, .18), 0 0 0 1px var(--prj-roxo); }

/* O setor faz aqui o papel do "Principal" (épico) no board dele: etiqueta
   colorida logo ABAIXO do título, não texto solto acima. A cor sai do próprio
   nome do setor (hash → matiz), para dois setores nunca caírem na mesma cor por
   acaso e a cor não mudar quando alguém renomeia outro setor. */
.prj-cartao__setor {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; min-width: 0;
    /* O cartao e grid: sem o justify-self a etiqueta estica ate a borda e vira
       uma faixa, em vez do chip curto do board dele. */
    justify-self: start; width: fit-content;
    padding: .1rem .4rem; border-radius: 4px;
    font-size: .75rem; font-weight: 700; color: var(--cor-texto);
    background: hsl(var(--setor-h, 220) 60% 92%);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prj-cartao__setor::before {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px;
    background: hsl(var(--setor-h, 220) 55% 45%);
}
.prj-cartao__setor svg { display: none; }
/* A matiz vem do nome do setor (crc32 % 12), em classe: `style=\"--x\"` é
   bloqueado pela CSP e a etiqueta sairia sempre da mesma cor. */
.prj-setor-h0 { --setor-h: 0; }
.prj-setor-h1 { --setor-h: 30; }
.prj-setor-h2 { --setor-h: 60; }
.prj-setor-h3 { --setor-h: 90; }
.prj-setor-h4 { --setor-h: 120; }
.prj-setor-h5 { --setor-h: 150; }
.prj-setor-h6 { --setor-h: 180; }
.prj-setor-h7 { --setor-h: 210; }
.prj-setor-h8 { --setor-h: 240; }
.prj-setor-h9 { --setor-h: 270; }
.prj-setor-h10 { --setor-h: 300; }
.prj-setor-h11 { --setor-h: 330; }
.prj-cartao__titulo {
    font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--cor-texto);
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.prj-cartao__titulo:hover { color: var(--cor-primaria); text-decoration: underline; }

.prj-cartao__etqs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; }
.prj-etq {
    padding: .15rem .5rem; border-radius: 4px; font-size: .76rem; font-weight: 700;
    letter-spacing: .01em; white-space: nowrap;
}
.prj-etq--atrasado  { background: var(--prj-vermelho-bg); color: var(--prj-vermelho); }
.prj-etq--bloqueado { background: var(--prj-roxo-bg);     color: var(--prj-roxo); }
.prj-etq--hoje      { background: var(--prj-laranja-bg);  color: var(--prj-laranja); }
.prj-etq--perto     { background: var(--prj-amarelo-bg);  color: var(--prj-amarelo); }

/* Idade na coluna: só aparece a partir de 7 dias parados. Antes disso é
   informação sem decisão junto — e o quadro fica calado. */
.prj-idade { font-size: .76rem; font-weight: 700; }
.prj-idade--0, .prj-idade--1 { display: none; }
.prj-idade--2 { color: var(--prj-laranja); }
.prj-idade--3 { color: var(--prj-vermelho); }

.prj-cartao__pe { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.prj-cartao__cod { font-size: .78rem; font-weight: 700; color: var(--cor-texto-suave); letter-spacing: .01em; }
.prj-prio-ic { display: inline-flex; line-height: 0; }
.prj-prio-ic--urgente { color: var(--prj-vermelho); }
.prj-prio-ic--alta    { color: var(--prj-laranja); }
/* Media e baixa ganharam marca em 23/09, como no board dele: cartao sem
   marca nenhuma deixava a duvida "e media ou ninguem definiu?". */
.prj-prio-ic--media   { color: var(--prj-amarelo); }
.prj-prio-ic--baixa   { color: var(--prj-azul); }
.prj-cartao__tarefas { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--cor-texto-suave); }
.prj-cartao__wip {
    display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
    font-size: .78rem; font-weight: 800; background: var(--prj-vermelho-bg); color: var(--prj-vermelho);
}
.prj-cartao__pe .prj-selo { margin-left: auto; }
.prj-selo {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    font-size: .74rem; font-weight: 800; color: #fff; background: var(--cor-primaria);
}
.prj-selo--vazio { background: #fff; color: var(--prj-cinza); border: 1px dashed var(--prj-cinza); }

/* Menu do cartão: escondido até o hover no desktop, sempre à mão no toque.
   Aberto, empurra o cartão para baixo em vez de flutuar — flutuar seria
   cortado pela rolagem lateral do quadro. */
.prj-cartao__menu { flex: 0 0 auto; }
/* Aberto, o menu toma a linha de baixo do cartão: o "…" continua à vista
   como botão de fechar e o seletor ocupa o resto da largura. */
.prj-cartao__menu[open] { flex: 1 1 100%; display: flex; align-items: center; gap: .35rem; margin-top: .3rem; }
.prj-cartao__menu[open] > summary { opacity: 1; background: rgba(23, 52, 140, .08); }
.prj-cartao__menu > summary {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
    color: var(--cor-texto-suave); cursor: pointer; list-style: none;
}
.prj-cartao__menu > summary::-webkit-details-marker { display: none; }
.prj-cartao__menu > summary:hover { background: rgba(23, 52, 140, .08); color: var(--cor-primaria); }
.prj-cartao__mover { flex: 1 1 auto; min-width: 0; }
.prj-cartao__mover select {
    width: 100%; min-height: 36px; padding: .3rem .5rem; font-size: .8rem;
    border: 1px solid var(--cor-borda); border-radius: 8px; background: #f7f9fc; color: var(--cor-texto);
}
@media (hover: hover) and (pointer: fine) {
    .prj-cartao__menu > summary { opacity: 0; }
    .prj-cartao:hover .prj-cartao__menu > summary,
    .prj-cartao__menu[open] > summary,
    .prj-cartao__menu > summary:focus-visible { opacity: 1; }
}

/* Arrastar: só com mouse (o JS põe .is-arrastavel). */
.prj-quadro.is-arrastavel .prj-cartao { cursor: grab; }
.prj-quadro.is-arrastavel .prj-cartao a,
.prj-quadro.is-arrastavel .prj-cartao select,
.prj-quadro.is-arrastavel .prj-cartao summary { cursor: pointer; }
.prj-cartao.is-arrastando { cursor: grabbing; box-shadow: var(--sombra-forte); rotate: 2deg; }
.prj-quadro.is-arrastando { user-select: none; }
.prj-cartao.is-enviando { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
    .prj-cartao.is-arrastando { rotate: none; }
    .prj-col, .prj-fq__av .prj-selo { transition: none; }
}

/* ---- Dedo em vez de ponteiro -------------------------------------------
   `pointer: coarse` é toque (celular e tablet). Os mesmos alvos que são
   confortáveis com mouse ficam pequenos no dedo, e a regra da casa é 36px
   para cima — 44px em campo de formulário. Só aqui, para não inchar a tela
   de quem está no computador. */
@media (pointer: coarse) {
    /* O título do cartão é o alvo mais usado do quadro: abrir o projeto. Com
       24px de linha ele ficava abaixo do mínimo do dedo; o respiro extra sobe
       o alvo sem mexer no corte de 4 linhas (o título é -webkit-box, então
       min-height ou flex quebrariam o `line-clamp`). */
    .prj-cartao__titulo { padding: .45rem 0; }
    /* O campo de busca do quadro: a caixa tem 44px, o input dentro tinha 34 —
       e é no input que o dedo encosta. */
    .prj-fq__busca input { min-height: 42px; }
    /* Situação da tarefa, na tela do colaborador. */
    .prj-tarefa select,
    .inline-form select { min-height: 44px; }
    /* Nome do setor dentro dos gráficos do painel: link de 20px de altura. */
    .prj-graf__rot a,
    .prj-tarefa__txt small a {
        display: inline-block; padding: .45rem .5rem; margin: -.45rem -.5rem;
    }
    .prj-col__dobrar,
    .prj-cartao__menu > summary { width: 40px; height: 40px; }
    .prj-cartao__mover select,
    .prj-fq__busca,
    .prj-fq__chip,
    .prj-fq__sel { min-height: 44px; }
    .prj-fq__av { min-width: 44px; min-height: 44px; }
    .prj-col__criar { min-height: 44px; }
}

/* Faixa de retorno de cada movimento: presa ao pé da tela, porque quem acabou
   de arrastar pode estar longe do topo. */
.prj-quadro-aviso {
    position: fixed; left: 50%; bottom: 1rem; z-index: 60; transform: translateX(-50%);
    width: min(640px, calc(100% - 2rem)); margin: 0; padding: .7rem 1rem;
    border-radius: 12px; border-left: 5px solid var(--prj-verde);
    background: #fff; color: var(--cor-texto); box-shadow: var(--sombra-forte);
    font-size: .9rem; font-weight: 600;
}
.prj-quadro-aviso[data-tipo="wip"]  { border-left-color: var(--prj-laranja); }
.prj-quadro-aviso[data-tipo="erro"] { border-left-color: var(--prj-vermelho); }

.prj-quadro-rodape { margin: var(--sp-3) 0 0; font-size: .86rem; }
.palco-azul .prj-quadro-rodape { color: rgba(255, 255, 255, .85); }
.palco-azul .prj-quadro-rodape a { color: #fff; text-decoration: underline; }

/* ---- Tela do projeto: nota de WIP e bloqueio ----------------------------- */
.prj-wip-nota {
    margin: 0 0 .75rem; padding: .55rem .8rem; border-radius: 10px; font-size: .88rem;
    background: var(--prj-laranja-bg); color: #8a4200; border-left: 4px solid var(--prj-laranja);
}
.prj-bloqueio { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--cor-borda); }
.prj-bloqueio__estado {
    margin: 0 0 .6rem; padding: .55rem .8rem; border-radius: 10px; font-size: .9rem;
    background: var(--prj-vermelho-bg); color: var(--prj-vermelho);
}

/* ---- Limites de WIP ------------------------------------------------------ */
.prj-limites-ajuda ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .92rem; }
.prj-limites { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-3); }
.prj-limites > * { min-width: 0; }
.app-main .container > .prj-limites > .card + .card { margin-top: 0; }
@media (min-width: 1024px) { .prj-limites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prj-limite__nome { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: 1.05rem; margin: 0 0 .75rem; color: var(--cor-primaria-escura); }
.prj-limite__padrao { font-size: .74rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--prj-cinza-bg); color: var(--prj-cinza); }
.prj-limite__campos { display: grid; gap: .25rem .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prj-limite__campos > * { min-width: 0; }
.prj-limite__campos input { min-height: 44px; }
@media (min-width: 640px) { .prj-limite__campos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   Gestão de Projetos — gráficos (22/09/2026, noite) e a parte de cada setor

   Cores escolhidas pelo trabalho que fazem (skill dataviz) e conferidas no
   validador dela, não no olho:
   - SITUAÇÃO usa a paleta de STATUS da skill (bom/atenção/sério/crítico) +
     um cinza neutro para "sem notícias". Na barra, a ordem põe o cinza entre
     laranja e amarelo: lado a lado os dois davam ΔE 13,6 (abaixo de 15); com
     o cinza no meio, o pior vizinho fica em ΔE 15,7. Amarelo e cinza ficam
     abaixo de 3:1 contra o branco de propósito (são cores de status) — por
     isso todo segmento tem rótulo e número escritos na legenda.
   - FASES é uma sequência (planejamento → entregue): um azul só, do claro ao
     escuro. O número está escrito ao lado de cada barra.
   ========================================================================== */
/* `stroke` junto de `fill` porque a mesma cor pinta a barra (fill) e a fatia
   da rosca (stroke): duas regras para a mesma ideia divergiriam na primeira
   mudança. Os valores são tokens — componente não guarda hex. */
.prj-g-bloqueado    { fill: var(--prj-st-critico); stroke: var(--prj-st-critico); background: var(--prj-st-critico); }
.prj-g-atrasado     { fill: var(--prj-st-serio);   stroke: var(--prj-st-serio);   background: var(--prj-st-serio); }
.prj-g-sem_noticias { fill: var(--prj-st-neutro);  stroke: var(--prj-st-neutro);  background: var(--prj-st-neutro); }
.prj-g-vencendo     { fill: var(--prj-st-atencao); stroke: var(--prj-st-atencao); background: var(--prj-st-atencao); }
.prj-g-em_dia       { fill: var(--prj-st-bom);     stroke: var(--prj-st-bom);     background: var(--prj-st-bom); }
.prj-g-fase1 { fill: #9dbbef; }
.prj-g-fase2 { fill: #5b8fe2; }
.prj-g-fase3 { fill: #2f6fd6; }
.prj-g-fase4 { fill: #17348c; }
/* ---- CUBOS 3D: "onde está o trabalho" ---------------------------------
   Vieram do protótipo docs/prototipos/projetos-3d.html, que o operador
   aprovou em 23/09 ("gostei dos cubos 3d como gráfico"). SÓ eles foram
   trazidos — nada do tema, da montanha WebGL ou dos cartões daquele estudo.

   Uma torre por coluna do quadro, UM CUBO POR PROJETO: a altura é contagem,
   não escala, então dá para conferir no dedo em vez de acreditar no eixo. A
   cor é a fase (quatro tons de um azul só, porque é sequência e não
   categoria), e o número vem escrito embaixo — cor nunca é a única pista.

   Tudo em CSS 3D de verdade (perspective + preserve-3d), sem biblioteca e
   sem canvas. Os valores variáveis (quantos cubos, que altura reservar) saem
   por CLASSE: a CSP do site é style-src 'self' e derruba style="" calado.

   Cada cubo tem CINCO faces. Com três, o olho enxerga o interior do prisma
   pelo verso e o bloco vira uma seta — aconteceu no protótipo, e o conserto
   foi fechar o sólido com as quatro laterais mais backface-visibility. */
.prj-cubos {
    --prj-c: 46px;   /* lado do cubo                       */
    --prj-h: 12px;   /* altura de cada bloco               */
    --prj-p: 21px;   /* passo: 9px de ar entre um e outro  */
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;   /* bases alinhadas: é um gráfico de barras */
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.prj-cubos__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}
.prj-cubos__palco {
    position: relative;
    display: block;
    width: 100%;
    height: var(--prj-alt, 120px);
    perspective: 700px;
}
.prj-torre, .prj-cubos__vazia {
    position: absolute;
    left: 50%;
    bottom: calc(var(--prj-c) * 0.42);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    /* Os dois angulos vivem em variaveis para o mouse poder mexer neles.
       O JS escreve --giro-z e --giro-x via CSSOM, que a CSP permite —
       style="" no HTML e que ela derruba. */
    --giro-x: 60deg;
    --giro-z: -45deg;
    transform: rotateX(var(--giro-x)) rotateZ(var(--giro-z));
}
.prj-torre {
    transition: transform 220ms ease-out;
    cursor: grab;
    touch-action: pan-y;   /* arrastar de lado gira; de cima a baixo rola a pagina */
}
.prj-torre[data-girando] { transition: none; cursor: grabbing; }
/* Sem mouse por perto, uma inclinada de cortesia mostra que a peca e 3D. */
.prj-cubos__col:hover .prj-torre:not([data-girado]),
.prj-cubos__col:focus-within .prj-torre:not([data-girado]) { --giro-x: 55deg; --giro-z: -28deg; }

.prj-bloco { position: absolute; transform-style: preserve-3d; }
.prj-face {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    backface-visibility: hidden;
}
.prj-face--topo {
    width: var(--prj-c); height: var(--prj-c);
    margin: calc(var(--prj-c) / -2) 0 0 calc(var(--prj-c) / -2);
    transform: translateZ(calc(var(--prj-h) / 2));
}
.prj-face--sul, .prj-face--nor {
    width: var(--prj-c); height: var(--prj-h);
    margin: calc(var(--prj-h) / -2) 0 0 calc(var(--prj-c) / -2);
}
.prj-face--sul { transform: rotateX(90deg)  translateZ(calc(var(--prj-c) / 2)); }
.prj-face--nor { transform: rotateX(-90deg) translateZ(calc(var(--prj-c) / 2)); }
.prj-face--les, .prj-face--oes {
    width: var(--prj-h); height: var(--prj-c);
    margin: calc(var(--prj-c) / -2) 0 0 calc(var(--prj-h) / -2);
}
.prj-face--les { transform: rotateY(90deg)  translateZ(calc(var(--prj-c) / 2)); }
.prj-face--oes { transform: rotateY(-90deg) translateZ(calc(var(--prj-c) / 2)); }

/* Quatro tons do MESMO azul: as fases são uma sequência (planejamento →
   progresso → pendente → concluído), e sequência não se pinta de hues soltos.
   O background sólido vem antes do color-mix de propósito: navegador que não
   conhece color-mix ignora a segunda linha e fica com a cor cheia. */
/* SEMAFORO — a cor deixou de ser a fase e passou a ser o ESTADO, a pedido do
   operador em 23/09 ("verde, vermelho, amarelo e cinza para indicar o
   progresso"). Validadas em validate_palette.js contra o branco do card:
   todas acima de 3:1, pior par vizinho com ΔE 9,0 em deuteranopia.
   O cinza reprova de proposito no piso de croma do validador: ele nao e
   mais uma categoria, e a AUSENCIA de sinal, e e isso que comunica. */
.prj-cubo-critico { --prj-cor: #c62828; }  /* 5,62:1 · bloqueado ou atrasado */
.prj-cubo-atencao { --prj-cor: #ae821c; }  /* 3,50:1 · vence em 7 dias       */
.prj-cubo-parado  { --prj-cor: #6a7c8c; }  /* 4,31:1 · sem noticias          */
.prj-cubo-bom     { --prj-cor: #1f6b34; }  /* 6,54:1 · em dia                */
.prj-bloco .prj-face--topo { background: var(--prj-cor); background: color-mix(in srgb, var(--prj-cor) 76%, #fff); }
.prj-bloco .prj-face--sul,
.prj-bloco .prj-face--nor  { background: var(--prj-cor); }
.prj-bloco .prj-face--les,
.prj-bloco .prj-face--oes  { background: var(--prj-cor); background: color-mix(in srgb, var(--prj-cor) 80%, #000); }

/* Coluna vazia não some: uma placa tracejada no chão diz "existe e está
   zerada", que é informação. Sumir faria a coluna parecer inexistente. */
.prj-cubos__vazia .prj-face--topo {
    background: none;
    border: 1px dashed var(--prj-linha, #b9cef0);
    transform: translateZ(0);
}

.prj-cubos__num {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--texto, #16283f);
    line-height: 1.2;
}
.prj-cubos__rot {
    font-size: .6875rem;
    line-height: 1.25;
    text-align: center;
    color: var(--texto-fraco, #5c6b7f);
    overflow-wrap: anywhere;
}

/* Altura reservada: translateZ não empurra layout nenhum, então a caixa
   precisa saber de antemão de quanto a torre vai precisar. Uma classe por
   degrau — é isso ou style="", que a CSP não deixa. */
.prj-cubos__col--h1  { --prj-alt: calc(var(--prj-p) * 1  + var(--prj-c) * 1.12); }
.prj-cubos__col--h2  { --prj-alt: calc(var(--prj-p) * 2  + var(--prj-c) * 1.12); }
.prj-cubos__col--h3  { --prj-alt: calc(var(--prj-p) * 3  + var(--prj-c) * 1.12); }
.prj-cubos__col--h4  { --prj-alt: calc(var(--prj-p) * 4  + var(--prj-c) * 1.12); }
.prj-cubos__col--h5  { --prj-alt: calc(var(--prj-p) * 5  + var(--prj-c) * 1.12); }
.prj-cubos__col--h6  { --prj-alt: calc(var(--prj-p) * 6  + var(--prj-c) * 1.12); }
.prj-cubos__col--h7  { --prj-alt: calc(var(--prj-p) * 7  + var(--prj-c) * 1.12); }
.prj-cubos__col--h8  { --prj-alt: calc(var(--prj-p) * 8  + var(--prj-c) * 1.12); }
.prj-cubos__col--h9  { --prj-alt: calc(var(--prj-p) * 9  + var(--prj-c) * 1.12); }
.prj-cubos__col--h10 { --prj-alt: calc(var(--prj-p) * 10 + var(--prj-c) * 1.12); }
.prj-cubos__col--h11 { --prj-alt: calc(var(--prj-p) * 11 + var(--prj-c) * 1.12); }
.prj-cubos__col--h12 { --prj-alt: calc(var(--prj-p) * 12 + var(--prj-c) * 1.12); }
.prj-cubos__col--h13 { --prj-alt: calc(var(--prj-p) * 13 + var(--prj-c) * 1.12); }
.prj-cubos__col--h14 { --prj-alt: calc(var(--prj-p) * 14 + var(--prj-c) * 1.12); }
.prj-cubos__col--h15 { --prj-alt: calc(var(--prj-p) * 15 + var(--prj-c) * 1.12); }

.prj-bloco--0  { transform: translateZ(calc(var(--prj-p) * 0)); }
.prj-bloco--1  { transform: translateZ(calc(var(--prj-p) * 1)); }
.prj-bloco--2  { transform: translateZ(calc(var(--prj-p) * 2)); }
.prj-bloco--3  { transform: translateZ(calc(var(--prj-p) * 3)); }
.prj-bloco--4  { transform: translateZ(calc(var(--prj-p) * 4)); }
.prj-bloco--5  { transform: translateZ(calc(var(--prj-p) * 5)); }
.prj-bloco--6  { transform: translateZ(calc(var(--prj-p) * 6)); }
.prj-bloco--7  { transform: translateZ(calc(var(--prj-p) * 7)); }
.prj-bloco--8  { transform: translateZ(calc(var(--prj-p) * 8)); }
.prj-bloco--9  { transform: translateZ(calc(var(--prj-p) * 9)); }
.prj-bloco--10 { transform: translateZ(calc(var(--prj-p) * 10)); }
.prj-bloco--11 { transform: translateZ(calc(var(--prj-p) * 11)); }
.prj-bloco--12 { transform: translateZ(calc(var(--prj-p) * 12)); }
.prj-bloco--13 { transform: translateZ(calc(var(--prj-p) * 13)); }
.prj-bloco--14 { transform: translateZ(calc(var(--prj-p) * 14)); }

.prj-cubos__chaves {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--prj-linha-fina, #dde7f8);
}
.prj-cubos__chave {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8125rem;
    color: var(--texto-fraco, #5c6b7f);
}
.prj-cubos__chave i {
    width: 12px; height: 12px;
    flex: none;
    border-radius: 2px;
    background: var(--prj-cor);
}

/* O cubo encolhe junto com a tela. Não dá para deixar em % porque transform
   3D precisa de px — então os três números mudam por faixa de largura. */
@media (max-width: 1100px) {
    .prj-cubos { --prj-c: 36px; --prj-h: 11px; --prj-p: 12px; }
}
@media (max-width: 860px) {
    /* O cubo encolhe; o ROTULO nao. Abaixo de 11px o nome da coluna deixa
       de ser legivel, e a regra da casa e nada minusculo. Quem cede aqui
       e o cubo, que ainda comunica pela altura. */
    .prj-cubos { --prj-c: 26px; --prj-h: 9px; --prj-p: 10px; gap: 2px; }
}
/* Sete torres não cabem num celular sem virar poeira: viram quatro colunas em
   duas fileiras, que é grade de leitura e não rolagem lateral. */
@media (max-width: 560px) {
    .prj-cubos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; --prj-c: 34px; --prj-h: 10px; --prj-p: 11px; }
    .prj-cubos__rot { font-size: .6875rem; }
}
@media (max-width: 380px) {
    .prj-cubos { grid-template-columns: repeat(3, minmax(0, 1fr)); --prj-c: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .prj-torre { transition: none; }
    .prj-cubos__col:hover .prj-torre:not([data-girado]),
    .prj-cubos__col:focus-within .prj-torre:not([data-girado]) { --giro-x: 60deg; --giro-z: -45deg; }
}

/* ---- O CARD em volta das torres ------------------------------------- */
.prj-cubos__caixa {
    margin-top: 14px;
    padding: 20px 14px 14px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
    border: 1px solid var(--prj-linha-fina, #dde7f8);
    border-radius: 14px;
}
.prj-cubos__ajuda {
    margin: 12px 0 0;
    text-align: center;
    font-size: .75rem;
    color: var(--texto-fraco, #5c6b7f);
}
/* Dedo não arrasta: o aviso muda de texto em vez de mentir. */
@media (pointer: coarse) {
    .prj-cubos__ajuda { visibility: hidden; position: relative; }
    .prj-cubos__ajuda::after {
        content: "Toque numa torre para ver o detalhe.";
        visibility: visible;
        position: absolute;
        inset-inline: 0;
        top: 0;
    }
}

.prj-cubos__pe {
    /* 11px e o piso da casa. O detalhe e detalhe, mas nao pode virar
       poeira: quem precisa dele e justamente quem esta procurando.
       Ja cai nessa duas vezes hoje encolhendo rotulo junto com o resto. */
    font-size: .6875rem;
    line-height: 1.3;
    color: var(--texto-fraco, #5c6b7f);
    text-align: center;
    min-height: 1.1em;
}
.prj-cubos__pe em { font-style: normal; font-weight: 700; }
.prj-cubo-critico.prj-cubos__pe em, .prj-cubos__pe .prj-cubo-critico { color: #c62828; }

.prj-cubos__chave small {
    display: block;
    font-size: .6875rem;
    color: var(--texto-fraco, #5c6b7f);
    font-weight: 400;
}
.prj-cubos__chave { align-items: flex-start; }
.prj-cubos__chave i { margin-top: 3px; }

/* ---- GRÁFICO DE ESCALA: progresso por setor contra a linha da casa --- */
.prj-card--escala { margin-block: 18px; }

.prj-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 1px;
    background: var(--prj-linha-fina, #dde7f8);
    border: 1px solid var(--prj-linha-fina, #dde7f8);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}
.prj-kpi__item { background: #fff; padding: 14px 16px; }
.prj-kpi__item--alerta { background: #fdf3f2; }
.prj-kpi__num {
    display: block;
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--prj-azul-forte, #1a4f9c);
}
.prj-kpi__item--alerta .prj-kpi__num { color: #c62828; }
.prj-kpi__rot {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--texto-fraco, #5c6b7f);
}

.prj-escala { min-width: 640px; }
.prj-escala__malha  { stroke: #e8eef7; stroke-width: 1; }
.prj-escala__trilho { fill: #f1f5fa; }
.prj-escala__barra  { transition: opacity 140ms ease-out; }
.prj-escala__barra:hover { opacity: .82; }
.prj-escala__barra--acima  { fill: #1f6b34; }
.prj-escala__barra--abaixo { fill: #c62828; }
.prj-escala__nome {
    font-size: 13px;
    fill: var(--texto, #16283f);
}
.prj-escala__valor {
    font-size: 12px;
    font-weight: 700;
    fill: var(--texto, #16283f);
}
.prj-escala__valor--abaixo { fill: #c62828; }
.prj-escala__marca { font-size: 11px; fill: var(--texto-fraco, #5c6b7f); }
/* A linha base é tracejada de propósito: contínua ela parece mais uma barra,
   e o que ela é mesmo é uma referência. */
.prj-escala__linha {
    stroke: #16283f;
    stroke-width: 2;
    stroke-dasharray: 5 4;
}
.prj-escala__rotulo {
    font-size: 11px;
    font-weight: 700;
    fill: #16283f;
}

@media (max-width: 720px) {
    .prj-escala__nome { font-size: 12px; }
    .prj-kpi__num { font-size: 1.5rem; }
}


.prj-graficos { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-3); }
.prj-graficos > * { min-width: 0; }
.app-main .container > .prj-graficos > .card + .card { margin-top: 0; }
@media (min-width: 1024px) { .prj-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prj-graf-setores { margin-top: var(--sp-3); }

.prj-graf { margin: 0; min-width: 0; }
.prj-graf__tit { display: grid; gap: .1rem; margin-bottom: .85rem; font-size: 1.05rem; font-weight: 750; color: var(--cor-primaria-escura); }
.prj-graf__sub { font-size: .8rem; font-weight: 500; color: var(--cor-texto-suave); }

/* Barra 100% da situação: trilho arredondado, segmentos separados por 2px
   da cor da superfície (o traço não escala com o viewBox esticado). */
.prj-graf__barra, .prj-graf__trilho {
    display: block; overflow: hidden; border-radius: 4px; background: var(--prj-cinza-bg);
}
.prj-graf__barra { height: 28px; }
.prj-graf__trilho { height: 14px; }
.prj-graf__barra svg, .prj-graf__trilho svg { display: block; width: 100%; height: 100%; }
.prj-graf rect { stroke: var(--cor-superficie); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.prj-graf rect:hover { opacity: .85; }

.prj-graf__legenda {
    list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem;
    font-size: .82rem; color: var(--cor-texto-suave);
}
.prj-graf__legenda li { display: inline-flex; align-items: center; gap: .35rem; }
.prj-graf__legenda strong { color: var(--cor-texto); }
.prj-graf__amostra { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.prj-graf__legenda + .prj-graf__linhas { margin-top: .8rem; }

/* Linhas de barra (fases e setores). No celular o rótulo vai em cima da
   barra; a partir de 640px, rótulo · barra · número na mesma linha. */
.prj-graf__linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.prj-graf__linha {
    display: grid; align-items: center; gap: .25rem .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "rot val" "trilho trilho";
}
.prj-graf__linha > * { min-width: 0; }
.prj-graf__rot { grid-area: rot; font-size: .88rem; font-weight: 650; color: var(--cor-texto); }
.prj-graf__rot small { display: block; font-size: .72rem; font-weight: 500; color: var(--cor-texto-suave); }
.prj-graf__rot a { color: var(--cor-primaria); }
.prj-graf__trilho { grid-area: trilho; }
.prj-graf__val { grid-area: val; font-size: .95rem; font-weight: 800; color: var(--cor-texto); text-align: right; min-width: 2ch; }
@media (min-width: 640px) {
    .prj-graf__linha { grid-template-columns: 11rem minmax(0, 1fr) 2.5rem; grid-template-areas: "rot trilho val"; }
    .prj-graf__linhas--setor .prj-graf__linha { grid-template-columns: 13rem minmax(0, 1fr) 2.5rem; }
}
.prj-graf__nota { margin: .7rem 0 0; font-size: .8rem; color: var(--cor-texto-suave); }

.prj-graf__tabela { margin-top: .8rem; font-size: .84rem; }
.prj-graf__tabela summary { cursor: pointer; color: var(--cor-primaria); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.prj-graf__rolar { overflow-x: auto; }
.prj-graf__tabela table { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.prj-graf__tabela th, .prj-graf__tabela td { padding: .35rem .5rem; border-bottom: 1px solid var(--cor-borda); text-align: left; white-space: nowrap; }
.prj-graf__tabela td:not(:first-child), .prj-graf__tabela th:not(:first-child) { text-align: right; }

.prj-graf-dica {
    position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
    padding: .35rem .6rem; border-radius: 8px; font-size: .8rem; font-weight: 600;
    background: var(--cor-texto); color: #fff; box-shadow: var(--sombra-forte); max-width: 280px;
}

/* ---- Página do setor e cadastro de setores ------------------------------ */
.prj-setor-cab .rel-cabecalho__ic svg { width: 26px; height: 26px; }
.prj-setores-cfg { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.prj-setores-cfg__item {
    display: grid; gap: .35rem .9rem; align-items: center; padding: .7rem .8rem;
    border: 1px solid var(--cor-borda); border-radius: 10px; grid-template-columns: minmax(0, 1fr);
}
.prj-setores-cfg__item > * { min-width: 0; }
.prj-setores-cfg__item.is-off { opacity: .7; background: #f7f9fc; }
.prj-setores-cfg__nome { display: inline-flex; align-items: center; gap: .45rem; }
.prj-setores-cfg__quem { font-size: .84rem; color: var(--cor-texto-suave); }
.prj-setores-cfg__n { font-size: .8rem; font-weight: 700; color: var(--cor-texto-suave); white-space: nowrap; }
.prj-setores-cfg__item .inline-form { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (min-width: 900px) {
    .prj-setores-cfg__item { grid-template-columns: 14rem minmax(0, 1fr) auto auto; }
}
@media (min-width: 1280px) { .prj-dash { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Gestão de Projetos — molduras e linhas azuis (23/09/2026)

   Pedido do operador: *"quero que tenham cards, e molduras com linhas azuis
   para separar tudo"*. Antes, a separação era por sombra e por espaço em
   branco: bonito de perto, frouxo de longe — em telas com muita informação
   (o painel tem KPIs, dois gráficos, carga por pessoa e o que mudou) não ficava
   claro onde um bloco termina e o outro começa.

   TUDO AQUI VIVE SOB `.prj-app`, a classe que o controller põe no body de cada
   tela do módulo. Sem esse escopo, dar borda azul a `.card` pintaria o site
   inteiro — e a aba Projetos é a única que ele pediu.

   TRÊS PESOS DE LINHA, e não um só. Uma borda igual em tudo achata a
   hierarquia: o quadro e um item de lista passariam a valer o mesmo.
     forte  → moldura de bloco (card, quadro, coluna): a divisa principal;
     média  → cartão e item de lista, o que se pode clicar;
     fina   → divisória interna (linha de tabela, item de histórico).
   ========================================================================== */
/* Os três pesos de linha e a paleta dos gráficos são TOKENS do projeto
   (tokens.css) — regra do design system: componente lê token, nunca hex. */

/* ---- Blocos: todo card do módulo ganha moldura ------------------------- */
.prj-app .card {
    border: 1.5px solid var(--prj-linha-forte);
    box-shadow: 0 1px 3px rgba(23, 52, 140, .06);
}

/* Cabeçalho da tela: a barra da esquerda já existia e passa a ser a mesma cor
   da moldura, para o bloco ler como uma peça só. */
.prj-app .rel-cabecalho { border-left: 5px solid var(--cor-primaria); }

/* Título de faixa ("Precisa de atenção", "Quadro do setor") ganha um filete
   embaixo: separa seções sem precisar de mais um card em volta. */
.prj-app .prj-faixa-tit {
    padding-bottom: .35rem;
    border-bottom: 2px solid rgba(255, 255, 255, .35);
}

/* ---- Indicadores -------------------------------------------------------- */
.prj-app .prj-kpi { border: 1.5px solid var(--prj-linha-forte); }
/* O KPI aceso mantém a cor do próprio estado — ali a borda já diz outra coisa
   (vermelho = atrasado) e trocá-la por azul apagaria o aviso. */
.prj-app .prj-kpi.is-aceso { border-color: var(--c, var(--prj-linha-forte)); }

/* ---- Listas e tabelas: divisória entre linhas --------------------------- */
.prj-app .prj-linha,
.prj-app .prj-tarefa,
.prj-app .prj-acesso > li,
.prj-app .prj-setores-cfg__item,
.prj-app .prj-deps > li { border: 1px solid var(--prj-linha); }

.prj-app .prj-mini > li + li,
.prj-app .prj-mudancas > li + li,
.prj-app .prj-dep > li + li,
.prj-app .prj-timeline > li + li,
.prj-app .prj-hist > li + li { border-top: 1px solid var(--prj-linha-fina); }

.prj-app .prj-graf__tabela th,
.prj-app .prj-graf__tabela td { border-bottom: 1px solid var(--prj-linha-fina); }

/* Bloco de formulário: a moldura mostra onde um assunto termina e começa o
   outro ("o que é o projeto", "quem toca", "prazos"). */
.prj-app .prj-form__bloco {
    border: 1px solid var(--prj-linha);
    border-radius: 10px;
    padding: .9rem 1rem;
}
.prj-app .prj-form__bloco + .prj-form__bloco { margin-top: var(--sp-3); }

/* ---- Quadro ------------------------------------------------------------- */
.prj-app .prj-quadro { border: 1.5px solid var(--prj-linha-forte); }
/* Coluna: moldura em volta e divisa entre o cabeçalho e os cartões. Sem a
   divisa, com a coluna cheia o nome parecia o título do primeiro cartão. */
.prj-app .prj-col { border: 1px solid var(--prj-linha); }
.prj-app .prj-col__cab { border-bottom: 1px solid var(--prj-linha); margin-bottom: .5rem; padding-bottom: .5rem; }
.prj-app .prj-col.is-dobrada .prj-col__cab { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.prj-app .prj-col__criar { border-top: 1px dashed var(--prj-linha); border-radius: 0 0 8px 8px; }

/* O cartão troca a sombra fininha pela linha: com moldura em volta da coluna,
   sombra sobre sombra vira borrão. A cor do estado (bloqueado) continua
   ganhando da moldura — é aviso, não decoração. */
.prj-app .prj-cartao {
    border: 1px solid var(--prj-linha);
    box-shadow: none;
}
.prj-app .prj-cartao:hover { border-color: var(--prj-linha-forte); background: #fbfcfe; }
.prj-app .prj-cartao.is-bloqueado { border-color: var(--prj-roxo); box-shadow: none; }
.prj-app .prj-cartao.is-arrastando { box-shadow: var(--sombra-forte); }

/* ---- Barra de filtros --------------------------------------------------- */
.prj-app .prj-fq { border: 1.5px solid var(--prj-linha-forte); }
.prj-app .prj-fq__busca,
.prj-app .prj-fq__chip,
.prj-app .prj-fq__sel { border-color: var(--prj-linha); }
/* Divisória entre "quem" e "o quê": os avatares e os atalhos fazem coisas
   diferentes com o mesmo quadro. */
.prj-app .prj-fq__gente { padding-right: .5rem; border-right: 1px solid var(--prj-linha-fina); margin-right: .1rem; }

/* ---- Gráficos ----------------------------------------------------------- */
.prj-app .prj-graf__linha + .prj-graf__linha { border-top: 1px solid var(--prj-linha-fina); padding-top: .6rem; }
.prj-app .prj-graf__legenda { border-top: 1px solid var(--prj-linha-fina); padding-top: .6rem; }

/* ---- Tela do projeto ---------------------------------------------------- */
.prj-app .prj-fato { border: 1px solid var(--prj-linha); border-radius: 10px; padding: .6rem .75rem; }
.prj-app .prj-ajuda { border-left: 4px solid var(--prj-linha-forte); }

/* No celular a moldura fina some na largura pequena; 1px a mais devolve o
   contorno sem engordar a tela. */
@media (max-width: 640px) {
    .prj-app .prj-cartao,
    .prj-app .prj-linha,
    .prj-app .prj-tarefa { border-width: 1.5px; }
}

/* ---- Gráfico de fluxo semanal (23/09) ----------------------------------
   Colunas agrupadas: puxados x concluídos. As duas séries saem da paleta
   categórica validada; a grade é recessiva de propósito (o dado é a barra,
   não a régua) e o número vai em cima de cada coluna, porque cor sozinha
   nunca identifica série. */
.prj-g-puxados { fill: var(--prj-serie-1); background: var(--prj-serie-1); }
.prj-g-feitos  { fill: var(--prj-serie-2); background: var(--prj-serie-2); }

.prj-graf__colunas { margin-top: .5rem; }
/* Teto de largura: esticado numa tela de 1900px, o grupo de barras fica
   ralo e o desenho vira uma faixa fina. Centralizado, a coluna mantem
   corpo e o rotulo da semana continua legivel. */
.prj-graf__colunas svg { display: block; width: 100%; max-width: 1000px; margin-inline: auto; height: auto; }
.prj-graf__grade { stroke: var(--prj-linha-fina); stroke-width: 2; }
.prj-graf__col { transition: opacity .12s ease; }
.prj-graf__col:hover { opacity: .82; }
.prj-graf__num { fill: var(--cor-texto); font-size: 19px; font-weight: 700; }
.prj-graf__eixo { fill: var(--cor-texto-suave); font-size: 18px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .prj-graf__col { transition: none; } }

/* O fluxo ocupa a linha inteira: oito semanas espremidas em meia tela
   viram traços sem rótulo legível. */
.prj-graf-fluxo { margin-top: var(--sp-3); }
.app-main .container > .prj-graf-fluxo { margin-top: var(--sp-3); }

/* ---- Rosca da situação (23/09) ------------------------------------------
   Pizza com furo, e o furo carrega o número de projetos ativos. A fatia é o
   traço de um círculo (`stroke-dasharray`), então a espessura é o
   `stroke-width` e o vão entre fatias já vem embutido no dash.

   Em tela larga, desenho e legenda lado a lado; no celular, um embaixo do
   outro — legenda de cinco itens espremida ao lado de um círculo de 120px
   vira uma coluna de palavras quebradas. */
.prj-rosca { display: grid; gap: var(--sp-3); align-items: center; grid-template-columns: minmax(0, 1fr); }
.prj-rosca > * { min-width: 0; }
@media (min-width: 560px) { .prj-rosca { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); } }

.prj-rosca__svg { display: block; width: 100%; max-width: 210px; height: auto; margin-inline: auto; }
.prj-rosca__trilho { fill: none; stroke: var(--prj-linha-fina); stroke-width: 32; }
.prj-rosca__fatia {
    fill: none; stroke-width: 32; transform: rotate(-90deg); transform-origin: 100px 100px;
    transition: stroke-width .12s ease;
}
.prj-rosca__fatia:hover { stroke-width: 38; }
.prj-rosca__num { fill: var(--cor-primaria-escura); font-size: 46px; font-weight: 800; }
.prj-rosca__lbl { fill: var(--cor-texto-suave); font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.prj-rosca__lado .prj-graf__legenda { margin-top: 0; display: grid; gap: .45rem; }
@media (prefers-reduced-motion: reduce) { .prj-rosca__fatia { transition: none; } }

/* ~~.vis-kpi--acao / .vis-kpi__acao / .vis-kpis--5: o card "Minhas tarefas"
   como quinto número da fileira de Visitas.~~ Vividos por uma hora em
   23/09/2026. O card saiu a pedido ("pode remover pois a atividade deles já
   aparece ao entrar no módulo") e as regras saíram junto — CSS que ninguém
   usa é peso que todo mundo baixa. O desvio que o substituiu não precisa de
   estilo novo: reaproveita a tela de tarefas inteira. */

/* Botões da tela de tarefas e a volta no painel (23/09/2026, 16h).
   "Painel de gestão visitas" é a única saída da tela de tarefas para quem gere,
   e em `btn--sm` dentro do card ele passava por link secundário. O de volta, no
   cabeçalho do painel, leva a contagem junto: o número é o motivo de voltar. */
.vis-btn-painel { font-size: .92rem; padding: .6rem 1rem; white-space: nowrap; }
.vis-btn-cab--tarefas { font-weight: 700; }
.vis-btn-cab__n {
    display: inline-block;
    min-width: 1.3rem;
    padding: 0 .3rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: var(--vis-amarelo, #b7791f);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ====================================================================
   Ficha "Dados da visita" (23/09/2026) — redesenho
   ====================================================================
   O card vira um CONTAINER: o número de colunas passa a depender da largura
   dele, não da janela. Era esse o defeito visível — na coluna lateral de 390px
   a lista abria em três colunas de 120px e cortava rótulo e nome.

   Também saiu a caixa alta dos rótulos. Rótulo em versalete é o enfeite que
   mais rouba largura numa coluna estreita (letra maiúscula é mais larga, e o
   `letter-spacing` somava mais alguns pixels em cada um) — e a hierarquia já
   vem do tamanho e da cor, que é o trabalho que o peso do texto deve fazer. */
.vis-dados { container-type: inline-size; container-name: fichavisita; }

/* Uma coluna é o padrão. Duas só quando o card tem largura de verdade — o
   limite é 30rem, medido no conteúdo real: "Débora Menezes da Rocha" cabe numa
   linha a partir daí. */
.vis-dados .vis-dados__lista,
.vis-dados--compacto .vis-dados__lista { grid-template-columns: 1fr; }

@container fichavisita (min-width: 30rem) {
    .vis-dados .vis-dados__lista,
    .vis-dados--compacto .vis-dados__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ~~Estilos do resumo retrátil da ficha (summary, filial em destaque, "ver os
   dados", cursor travado quando incompleta).~~ Removidos no mesmo dia: a ficha
   deixou de ser retrátil a pedido — *"os dados da visita não devem ser
   retráteis e sim o botão editar dados"*. Sobrou o cabeçalho simples. */
.vis-dados__resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.vis-dados__resumo .card__title { margin: 0; }

/* O que falta preencher é a única coisa acionável do cabeçalho, então é a única
   que ganha cor. */
.vis-dados__falta { font-size: .78rem; font-weight: 600; color: var(--vis-amarelo, #b7791f); }

.vis-dados__vazio { color: var(--cor-texto-suave); font-style: italic; }
/* O código da visita é identificador: dígito de largura fixa evita que ele
   dance de tamanho entre uma visita e outra. */
.vis-dados__cod { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
    .vis-dados__bloco > summary { transition: color .12s ease-out; }
}

/* ---- Formulário "Editar dados" dentro da ficha (23/09/2026, 16h50) ----
   Mesma doença que a lista tinha, no formulário: `@media (min-width: 768px)`
   com `!important` põe as linhas em duas colunas olhando a JANELA, e o card
   vive numa coluna de ~390px. O rótulo "Responsável pelo RH" quebrava em duas
   linhas e o select mostrava "Débora Mene…".

   O `!important` aqui é para vencer o `!important` que já existe na regra de
   cima — não para ganhar uma briga de especificidade inventada agora. Quando
   aquela regra virar container query, este daqui sai junto. */
@container fichavisita (max-width: 32rem) {
    .vis-dados__editar .vis-dados__linha-larga { grid-template-columns: 1fr !important; }
}

/* Abaixo de ~23rem nem os campos curtos cabem em par: aí tudo empilha. */
@container fichavisita (max-width: 23rem) {
    .vis-dados__editar .form-row--2,
    .vis-dados__editar .form-row--3 { grid-template-columns: 1fr !important; }
}

/* O rótulo do campo não quebra por falta de espaço lateral, e o select ocupa a
   largura toda do campo — um select mais estreito que o próprio campo é o que
   corta o nome antes da hora. */
.vis-dados__editar .form-field > label { display: block; margin-bottom: .25rem; }
.vis-dados__editar .form-field > select,
.vis-dados__editar .form-field > input,
.vis-dados__editar .form-field > textarea { width: 100%; max-width: 100%; }

/* O formulário respira menos dentro do card: ele já está dentro de uma caixa,
   com borda e fundo próprios. Espaçamento de tela cheia aqui só empurra o botão
   de salvar para fora da vista. */
.vis-dados__editar > form { padding: var(--sp-3); }
.vis-dados__editar .form-row { gap: .6rem; }
.vis-dados__editar .form-field { margin-bottom: .2rem; }

/* O select de pessoas é montado por `$selectPessoas`, que carimba a classe
   `.vis-tl__in` — o campo COMPACTO do cronograma, de altura fixa 2.25rem. No
   cronograma ele está certo (a linha é apertada de propósito); aqui, no meio de
   campos de 46px, ficava menor que os vizinhos e o nome saía com a base
   cortada. Dentro da ficha ele veste o mesmo uniforme dos outros campos. */
.vis-dados__editar .vis-tl__in {
    height: auto;
    min-height: 46px;
    padding: .6rem .8rem;
    font-size: inherit;
    border-radius: var(--raio-sm);
}

/* Três alturas de campo na mesma coluna (46, 50 e 52px) era o que sobrava do
   desalinho: `input` tem `min-height: 46px`, `select` e `textarea` não têm, e
   cada navegador resolve a altura do select pelo próprio desenho da seta. Com
   os campos lado a lado ninguém nota; empilhados numa coluna estreita, a
   diferença vira degrau a cada linha. Uma altura só, dentro da ficha. */
.vis-dados__editar .form-field > select,
.vis-dados__editar .form-field > input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 46px;
    height: 46px;
    padding: .6rem .8rem;
}
.vis-dados__editar .form-field > textarea { min-height: 96px; padding: .6rem .8rem; }

/* ── "Quem vem": escolher os visitantes pela filial (23/09/2026) ───────────
   O campo era um <input type="text"> onde se digitava "Juliana Reis". Virou
   uma lista de pessoas do cadastro filtrada pela filial escolhida, porque o
   sistema precisa saber QUEM vem para entregar o roteiro a essa pessoa.

   O desenho é de lista de conferência, não de cartão: linhas finas, uma sob a
   outra, com a caixa de marcar à esquerda e a filial em cinza à direita. É o
   mesmo gesto do checklist da visita, que quem usa esta tela já faz todo dia —
   e são de quatro a nove nomes por filial, então a lista inteira cabe sem
   rolagem na maioria das vezes. O teto de 17rem existe para a Matriz (53) e
   São José do Rio Preto (22), as duas únicas que estouram. */
.vis-quem { border: 0; margin: 0; padding: 0; min-width: 0; }
.vis-quem__legenda { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
    padding: 0; margin-bottom: .4rem; font-size: .95rem; font-weight: 600; color: var(--cor-texto); }
.vis-quem__conta { font-size: .8rem; font-weight: 500; color: var(--cor-texto-suave); }
.vis-quem__aviso, .vis-quem__vazio { margin: .3rem 0 0; font-size: .85rem; color: var(--cor-texto-suave); }

.vis-quem__busca { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem;
    padding: 0 .7rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-card); }
.vis-quem__busca svg { flex: none; color: var(--cor-texto-suave); }
.vis-quem__busca input { flex: 1; min-width: 0; border: 0; background: none; padding: .55rem 0; font: inherit; }
.vis-quem__busca input:focus { outline: none; }
.vis-quem__busca:focus-within { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cor-primaria) 18%, transparent); }

.vis-quem__lista { max-height: 17rem; overflow-y: auto; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm); background: var(--cor-card); }
.vis-quem__item { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .5rem .7rem;
    border-bottom: 1px solid color-mix(in oklab, var(--cor-borda) 55%, transparent); cursor: pointer; font-weight: 500; }
.vis-quem__item:last-child { border-bottom: 0; }
.vis-quem__item[hidden] { display: none; }
.vis-quem__item:hover { background: color-mix(in oklab, var(--cor-primaria) 6%, transparent); }
.vis-quem__item:has(input:checked) { background: color-mix(in oklab, var(--cor-primaria) 10%, transparent); }
.vis-quem__item:focus-within { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.vis-quem__item input { flex: none; width: 18px; height: 18px; min-height: 0; accent-color: var(--cor-primaria); }
.vis-quem__pessoa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; min-width: 0; }
.vis-quem__nome { font-size: .92rem; overflow-wrap: anywhere; }
.vis-quem__filial { font-size: .75rem; font-weight: 500; color: var(--cor-texto-suave); }
.vis-quem__livre { margin-top: .6rem; }

/* Dentro da ficha da visita o campo de busca e os itens herdariam a altura de
   46px que a ficha impõe aos inputs — numa lista de nove linhas isso vira uma
   parede. Aqui a regra da ficha é desfeita para as caixas de marcar. */
.vis-dados__editar .vis-quem__item input[type="checkbox"] { height: 18px; min-height: 0; padding: 0; }
.vis-dados__editar .vis-quem__busca input { height: auto; min-height: 0; padding: .55rem 0; }

/* Setinha do "Editar dados" (23/09, a pedido: "ponha uma setinha dentro do
   editar dados, para mostrar que ele é retrátil"). Aponta para baixo fechado,
   para cima aberto — o giro é o que conta a história, então ele é animado, e
   quem pediu menos movimento no sistema recebe a troca sem transição. */
.vis-dados__seta { flex: none; transition: transform .18s ease-out; }
.vis-dados__editar[open] > summary .vis-dados__seta { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .vis-dados__seta { transition: none; } }

/* Dentro de um mini card, o rótulo do seletor veste o uniforme dos vizinhos —
   um "Pessoas que vêm" em caixa normal ao lado de "FILIAL" e "TIPO DE VISITA"
   lê como defeito, não como escolha. A contagem fica de fora da caixa alta:
   ela é frase, não etiqueta. */
.vis-mini__campo > .vis-quem > .vis-quem__legenda {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cor-texto-suave);
}
.vis-mini__campo > .vis-quem > .vis-quem__legenda .vis-quem__conta {
    text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .75rem;
}
.vis-mini__campo > .vis-quem { gap: .4rem; }
.vis-mini__campo > .vis-quem .vis-quem__livre > label { font-weight: 600; font-size: .85rem; }