/* ═══════════════════════════════════════════════════════════════════════════════
   AVANTI · CASCA COMPARTILHADA  (29/ago — dono: "deixe o menu de todos os portais
   iguais e tudo bem padronizado")

   O QUE É: as poucas regras que precisam ser IDÊNTICAS no Backoffice e no Marketing —
   geometria do cabeçalho, menu lateral chapado, item ativo, avatar do cabeçalho e a
   linha da conta ativa. Nada de tela: só casca.

   ONDE ENTRA: DEPOIS da folha do portal (avanti-clean.css no Backoffice,
   avanti-mkt.css no Marketing). Por isso ela vence os dois — e por isso os poucos
   !important daqui existem: as duas folhas usam !important nesses mesmos pontos.

   REGRA: mexeu na casca, mexe AQUI (e nas parciais templates/_casca_*.html).
   Nunca copie uma regra de casca pra dentro de avanti-clean.css/avanti-mkt.css.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── cabeçalho: mesma altura, mesmo respiro, mesma âncora nos dois portais ───── */
@media (min-width:901px) {
  html body header.app-header { display:flex; align-items:center; gap:1rem; height:72px;
    padding:6px 2.25rem 0 1.5rem; box-sizing:border-box; background:transparent;
    border-bottom:0; position:static; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (max-width:900px) {
  html body header.app-header { height:58px; padding:0 .9rem; gap:.5rem;
    position:sticky; top:0; z-index:900; }
}
/* o vão que empurra os controles pro canto direito (busca, tema, sino, avatar) */
html body .hdr-espaco { flex:1; min-width:0; }
html body .header-user { display:flex; align-items:center; gap:.5rem; }

/* ── menu lateral chapado e sempre à vista (29/ago, Gui: "chapado") ─────────── */
@media (min-width:901px) {
  html body aside.sidebar { border:0 !important; box-shadow:none !important;
    background:transparent !important; margin:0 !important; border-radius:0 !important;
    position:sticky !important; top:0 !important; height:100vh !important;
    padding:.85rem .7rem 1rem !important; overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; scrollbar-width:none; }
  html body aside.sidebar::-webkit-scrollbar { width:0; }
}

/* ── item ativo: MESMO desenho nos dois portais ─────────────────────── */
/* pastilha cheia Brand Deep com o degrade discreto (29/ago, Gui: "pra nao ficar tudo
   chapado") — no claro. Escrito em background-color + background-image de proposito: o
   atalho `background:` apagaria o degrade. No escuro segue chapado, como o Backoffice ja
   estava. Mexa AQUI: e o que faz o item ativo ser igual nos dois portais. */
html body .nav-main a.active { background-color:#002970 !important; color:#F6F5F2 !important;
  background-image:linear-gradient(135deg, #002970 0%, #0B4CB0 100%) !important;
  box-shadow:0 8px 20px -12px rgba(0,41,112,.6) !important; }
html body .nav-main a.active .av-ic { opacity:1; }
html[data-theme="dark"] body .nav-main a.active { background-color:#2290FF !important;
  background-image:none !important;
  color:#F6F5F2 !important; box-shadow:0 8px 20px -10px rgba(34,144,255,.7) !important; }

/* ── ícones do menu: mesmo tamanho em todo item, dos dois portais ───────────── */
html body .nav-main a .av-ic { width:17px; height:17px; flex:none; }
html body :is(#notifBtn,#darkmode-btn,.nav-burger) .av-ic { width:18px; height:18px; }

/* ── linha da CONTA ATIVA sob a marca (hoje só o Marketing usa; a casca é uma só) ── */
html body .sidebar-conta { display:flex; align-items:center; gap:.4rem; margin:-.5rem 0 .2rem;
  padding:0 .65rem; font-size:11.5px; font-weight:500; letter-spacing:.01em;
  color:var(--ink-3,#5A6B84); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body .sidebar-conta i { width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--av-marca,#2290FF); }
html[data-theme="dark"] body .sidebar-conta { color:rgba(246,245,242,.62); }

/* ── avatar do cabeçalho: o mesmo botão redondo nos dois portais ────────────── */
html body a.header-avatar { width:34px; height:34px; border-radius:50%; background:#002970;
  color:#F6F5F2; display:inline-flex; align-items:center; justify-content:center;
  font-weight:500; font-size:13px; text-decoration:none; overflow:hidden; flex:none; }
html body a.header-avatar img, html body a.header-avatar span { width:100%; height:100%;
  object-fit:cover; border-radius:inherit; display:flex; align-items:center;
  justify-content:center; }
html[data-theme="dark"] body a.header-avatar { background:#2290FF; }

/* ── skip-link: mesmo comportamento e mesma cor ─────────────────────────────── */
html body .skip-link { position:absolute; top:-40px; left:0; background:#020B1A; color:#F6F5F2;
  padding:8px 16px; z-index:1000; text-decoration:none; font-size:13.5px; font-weight:500; }
html body .skip-link:focus { top:0; }
html[data-theme="dark"] body .skip-link { background:#2290FF; color:#F6F5F2; }

/* ── impressão: a casca some, o conteúdo fica ───────────────────────────────── */
@media print {
  html body :is(aside.sidebar,header.app-header,.app-footer,.nav-backdrop,#navload,.skip-link) { display:none !important; }
}

/* ── rodapé legal: o MESMO em todo portal, inclusive nas telas sem menu ─────── */
/* (15/jul, Gui: rodapé + selos site-wide — 2 fileiras, links e selos, respiro Avanti) */
html body .app-footer { padding:1.15rem 2rem 1.35rem; border-top:1px solid var(--border-hex,rgba(2,11,26,.10));
  background:transparent; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  text-align:center; font-size:11.5px; color:var(--muted-foreground-hex,#5A6B84); margin-top:auto; }
html body .app-footer a { color:var(--muted-foreground-hex,#5A6B84); text-decoration:none; }
html body .app-footer a:hover { color:var(--navy-hex,#002970); }
html body .app-foot-links { display:flex; flex-wrap:wrap; gap:.55rem 1.1rem; align-items:center; justify-content:center; }
html body .app-selos { display:inline-flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:center; }
html body .app-selos .selo { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .6rem;
  border:1px solid var(--border-hex,rgba(2,11,26,.10)); border-radius:100px; font-size:10px; font-weight:500;
  letter-spacing:.02em; color:var(--muted-foreground-hex,#5A6B84); text-decoration:none;
  transition:color .15s ease, border-color .15s ease; }
html body .app-selos .selo svg { width:12px; height:12px; flex:none; }
html body .app-selos .selo:hover { color:var(--navy-hex,#002970); }
/* LGPD nítido: ícone azul Avanti + rótulo forte (Gui: "cadê o logo do LGPD") */
html body .app-selos .selo-lgpd { color:#002970; border-color:rgba(34,144,255,.35); }
html body .app-selos .selo-lgpd svg { color:#2290FF; }
html body .app-selos .selo-lgpd b { font-weight:500; letter-spacing:.05em; }
html body .app-selos .selo-lgpd:hover { border-color:rgba(34,144,255,.6); }
html[data-theme="dark"] body .app-selos .selo-lgpd { color:#F6F5F2; border-color:rgba(34,144,255,.4); }
html[data-theme="dark"] body .app-selos .selo-lgpd svg { color:#2290FF; }
html[data-theme="dark"] body .app-footer, html[data-theme="dark"] body .app-footer a,
html[data-theme="dark"] body .app-selos .selo { color:rgba(246,245,242,.62); }
html[data-theme="dark"] body .app-footer a:hover { color:#F6F5F2; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TELAS FORA DA CASCA (30/ago — dono: "e essa aba aqui também", "a página de login",
   "e a de saiu", "e tudo mais")

   O QUE É: o vocabulário mínimo das telas que NÃO têm menu — o hub (/), login, 2FA,
   "Você saiu", erro, sem acesso, o perfil e a caixa de documentos do cliente. Mesmas
   peças da casca: selo redondo, lockup, cartão branco sem borda, botão pill, rótulo
   de seção, campo com rótulo e o rodapé legal.

   REGRA: mexeu aqui, valeu em TODAS as telas sem menu. Nada de tela solta.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ícone do sprite: fora da casca não entra o avanti-clean.css, que é quem dava o
   tamanho padrão do .av-ic. Sem isto o <svg> nasce 300x150 e estoura o botão. */
.av-ic { width:1em; height:1em; vertical-align:-.15em; flex:none; }

/* página simples (base.html no ramo anônimo): rodapé no pé, conteúdo empurrando */
html body:has(> main.container) { min-height:100vh; display:flex; flex-direction:column; }
html body:has(> main.container) > main.container { flex:1 0 auto; }

/* ── selo redondo: o MESMO dos portais (círculo Brand Deep + SVG negativo a 128%) ── */
.av-selo { width:40px; height:40px; border-radius:50%; background:#002970;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  overflow:hidden; box-shadow:0 6px 14px -8px rgba(0,41,112,.7); }
.av-selo img { width:128%; height:128%; max-width:none; display:block; flex:0 0 auto; }
/* selo grande do heroi: BLOCO e ja centrado — inline-flex fazia o rotulo de baixo
   subir pra mesma linha do selo. */
.av-selo-g { width:56px; height:56px; display:flex; margin:0 auto .95rem; }

/* ── lockup: selo + "Avanti" com a linha de baixo, igual ao do menu ── */
.av-marca { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.av-marca-txt { display:flex; flex-direction:column; line-height:1.05; font-size:15px;
  letter-spacing:-.02em; color:#020B1A; font-weight:500; }
.av-marca-txt small { font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#5A6B84; font-weight:500; margin-top:3px; }
html[data-theme="dark"] .av-marca-txt { color:#F6F5F2; }
html[data-theme="dark"] .av-marca-txt small { color:rgba(246,245,242,.62); }

/* ── casca mínima: topo na mesma altura do cabeçalho dos portais + miolo centrado ── */
.av-fora { min-height:100vh; display:flex; flex-direction:column; }
.av-topo { display:flex; align-items:center; gap:1rem; height:72px;
  padding:6px 2.25rem 0 1.5rem; box-sizing:border-box; }
.av-espaco { flex:1; min-width:0; }
.av-topo-dir { display:flex; align-items:center; gap:.4rem; }
@media (max-width:900px) { .av-topo { height:58px; padding:0 .9rem; } }
.av-meio { flex:1 0 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:2.5rem 1.25rem 3rem; box-sizing:border-box; }
.av-col { width:100%; max-width:440px; }
.av-col-l { max-width:600px; }

/* ── botão de ícone do topo (tema) ── */
.av-btn-icone { width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(2,11,26,.12); background:transparent; color:#5A6B84; font:inherit;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease; }
.av-btn-icone .av-ic { width:16px; height:16px; }
.av-btn-icone:hover { color:#002970; border-color:rgba(2,11,26,.28); }
html[data-theme="dark"] .av-btn-icone { border-color:rgba(246,245,242,.12); color:rgba(246,245,242,.62); }
html[data-theme="dark"] .av-btn-icone:hover { color:#F6F5F2; border-color:rgba(246,245,242,.28); }

/* ── link discreto do topo (Meu perfil, Sair) — mesmo peso do cabeçalho dos portais ── */
.av-link { font-size:13px; font-weight:500; color:#5A6B84; text-decoration:none;
  background:none; border:0; padding:.4rem .7rem; border-radius:100px; cursor:pointer;
  font-family:inherit; transition:color .15s ease, background-color .15s ease; }
.av-link:hover { color:#002970; background:rgba(2,11,26,.04); }
html[data-theme="dark"] .av-link { color:rgba(246,245,242,.62); }
html[data-theme="dark"] .av-link:hover { color:#F6F5F2; background:rgba(246,245,242,.08); }

/* ── cartão: BRANCO, SEM borda; o que separa é a sombra suave e o espaço ── */
.av-card, html body .avanti-card { background-color:#FFFFFF; border:0; border-radius:16px;
  box-shadow:0 1px 2px rgba(2,11,26,.05), 0 10px 24px -20px rgba(2,11,26,.35);
  background-image:linear-gradient(180deg, rgba(34,144,255,.045) 0%, rgba(255,255,255,0) 46%); }
.av-card { padding:1.75rem 1.6rem; }
.av-card-link { display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease; }
.av-card-link:hover { transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(2,11,26,.06), 0 16px 32px -20px rgba(2,11,26,.45); }
html[data-theme="dark"] .av-card, html[data-theme="dark"] body .avanti-card {
  background-color:#0A1931; box-shadow:none;
  background-image:linear-gradient(180deg, rgba(34,144,255,.10) 0%, rgba(10,25,49,0) 52%); }
html[data-theme="dark"] .av-card-link:hover { box-shadow:0 14px 30px -16px rgba(0,0,0,.6); }

/* ── chip do ícone: a cor vem do portal (--av-chip), nunca preto ── */
.av-chip { width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  flex:none; color:#F6F5F2; background-color:var(--av-chip,#002970);
  background-image:linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); }
.av-chip .av-ic { width:20px; height:20px; }

/* ── rótulo de seção: mesma escala e mesmo degradê do .section-tag dos portais ── */
.av-rot { display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:#002970; background-image:linear-gradient(90deg, #002970, #2290FF);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
html[data-theme="dark"] .av-rot { color:#8CC2FF; background-image:linear-gradient(90deg, #8CC2FF, #2290FF); }

/* ── títulos e apoio ── */
.av-h1 { font-size:34px; font-weight:300; letter-spacing:-1.2px; line-height:1.12;
  margin:.55rem 0 .45rem; color:#020B1A; }
.av-h1 strong, .av-h1 b { font-weight:500; }
.av-h2 { font-size:24px; font-weight:500; letter-spacing:-.5px; line-height:1.2;
  margin:.55rem 0 .4rem; color:#020B1A; }
.av-sub { font-size:14.5px; font-weight:300; line-height:1.55; color:#5A6B84; margin:0; }
.av-nota { font-size:12px; font-weight:300; line-height:1.5; color:#5A6B84; margin:0; }
html[data-theme="dark"] .av-h1, html[data-theme="dark"] .av-h2 { color:#F6F5F2; }
html[data-theme="dark"] .av-sub, html[data-theme="dark"] .av-nota { color:rgba(246,245,242,.62); }

/* ── botões pill (100px), o primário com o degradê discreto ── */
.av-pill { display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:13px 26px; border-radius:100px; border:0; cursor:pointer; font-family:inherit;
  font-size:14.5px; font-weight:500; letter-spacing:.01em; text-decoration:none;
  color:#F6F5F2; background-color:#002970;
  background-image:linear-gradient(135deg, #002970 0%, #0B4CB0 100%);
  box-shadow:0 10px 24px -16px rgba(0,41,112,.85); transition:box-shadow .18s ease; }
.av-pill:hover { box-shadow:0 14px 28px -14px rgba(0,41,112,.95); }
.av-pill:disabled { opacity:.55; cursor:default; box-shadow:none; }
html[data-theme="dark"] .av-pill { background-color:#2290FF;
  background-image:linear-gradient(135deg, #2290FF 0%, #0B4CB0 100%); }
.av-pill-2 { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 24px; border-radius:100px; border:1px solid rgba(2,11,26,.14); background:transparent;
  color:#020B1A; font-family:inherit; font-size:14px; font-weight:500; text-decoration:none;
  cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.av-pill-2:hover { border-color:#2290FF; color:#2290FF; }
html[data-theme="dark"] .av-pill-2 { color:#F6F5F2; border-color:rgba(246,245,242,.14); }
.av-largo { width:100%; box-sizing:border-box; }
.av-acoes { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* ── campo com rótulo e foco visível ── */
.av-campo { display:block; margin:0 0 1.1rem; }
.av-lbl { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:#5A6B84; margin:0 0 .45rem; }
html[data-theme="dark"] .av-lbl { color:rgba(246,245,242,.62); }
.av-in { width:100%; box-sizing:border-box; padding:.8rem 1rem; font-family:inherit;
  font-size:15px; color:#020B1A; background:#FFFFFF; border:1px solid rgba(2,11,26,.14);
  border-radius:12px; transition:border-color .15s ease, box-shadow .15s ease; }
.av-in:hover { border-color:rgba(2,11,26,.28); }
.av-in:focus { border-color:#2290FF; box-shadow:0 0 0 3px rgba(34,144,255,.18); }
.av-in:focus-visible { outline:2px solid #2290FF; outline-offset:2px; }
html[data-theme="dark"] .av-in { background:#0A1931; color:#F6F5F2; border-color:rgba(246,245,242,.14); }

/* ── caixa de documentos do cliente: uma linha por arquivo ── */
.av-arq { display:flex; align-items:center; gap:.85rem; padding:.8rem 1rem;
  border-radius:12px; text-decoration:none; color:inherit; background:transparent;
  border:1px solid rgba(2,11,26,.12); transition:border-color .15s ease, background-color .15s ease; }
.av-arq:hover { border-color:#2290FF; background:rgba(34,144,255,.05); }
.av-arq-ext { width:38px; height:38px; border-radius:10px; flex:none; display:grid;
  place-items:center; font-size:11px; font-weight:500; letter-spacing:.04em;
  color:#F6F5F2; background-color:#002970;
  background-image:linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); }
.av-arq-nome { flex:1; min-width:0; font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.av-arq-go { flex:none; font-size:12.5px; font-weight:500; color:#2290FF; }
html[data-theme="dark"] .av-arq { border-color:rgba(246,245,242,.12); }
html[data-theme="dark"] .av-arq:hover { background:rgba(34,144,255,.10); }

/* ── quem prefere menos movimento não ganha degradê em texto (leitura primeiro) ── */
@media (prefers-reduced-motion: reduce) {
  .av-rot { background-image:none; -webkit-text-fill-color:currentColor; color:#002970; }
  html[data-theme="dark"] .av-rot { color:#8CC2FF; }
  .av-pill { background-image:none; }
  .av-chip, .av-arq-ext { background-image:none; }
  .av-card, html body .avanti-card { background-image:none; }
}

/* ── modo escuro x azul global de <a> ────────────────────────────────────────
   O avanti-theme.css pinta todo link de azul no escuro com uma regra de
   especificidade (0,6,2) — inalcancavel por seletor limpo. Sem isto, nome de
   arquivo da caixa do cliente, link do topo e texto de apoio saem azuis, e o
   "Sair" (que e <button>) fica cinza do lado do "Meu perfil" azul. Aqui cada um
   volta pra cor do seu papel. #2290FF fica so onde e ACAO ("Baixar", "Entrar"). */
html[data-theme="dark"] a.av-link { color:rgba(246,245,242,.62) !important; }
html[data-theme="dark"] a.av-link:hover { color:#F6F5F2 !important; }
html[data-theme="dark"] a.av-marca, html[data-theme="dark"] a.av-card-link,
html[data-theme="dark"] a.av-arq, html[data-theme="dark"] a.av-pill-2 { color:#F6F5F2 !important; }
html[data-theme="dark"] a.av-pill { color:#F6F5F2 !important; }
html[data-theme="dark"] .av-arq .av-arq-nome { color:#F6F5F2; }
html[data-theme="dark"] .av-arq .av-arq-go { color:#2290FF; }

/* rodape legal no escuro: a regra certa ja esta la em cima, mas o <a> azul global do
   avanti-theme.css (0,6,2) passava por cima. Vale nos portais tambem — a parcial e a
   mesma. Azul fica pro que e ACAO, nao pro rodape inteiro. */
html[data-theme="dark"] body .app-footer a { color:rgba(246,245,242,.62) !important; }
html[data-theme="dark"] body .app-footer a:hover { color:#F6F5F2 !important; }

/* campo VAZIO nao e erro. O avanti-theme.css pinta de vermelho
   `input:invalid:not(:placeholder-shown)` — e um campo obrigatorio SEM placeholder cai
   nessa regra ANTES de a pessoa digitar (o codigo do 2FA abria vermelho, parecendo que
   ja tinha errado). Nos portais o avanti-clean.css ja neutraliza isso; fora da casca ele
   nao entra, entao a MESMA politica mora aqui: vermelho so em :user-invalid, ou seja,
   depois que a pessoa mexeu e saiu do campo. O foco continua visivel pelo outline
   global logo abaixo, que nao briga com borda nem com fundo. */
html body :is(input,select,textarea):is(:invalid,:valid:not(:placeholder-shown):required):not(:user-invalid) {
  border-color:rgba(2,11,26,.14); background:#FFFFFF; box-shadow:none; }
/* !important porque a regra dark do avanti-theme.css tambem e !important */
html[data-theme="dark"] body :is(input,select,textarea):is(:invalid,:valid:not(:placeholder-shown):required):not(:user-invalid) {
  border-color:rgba(246,245,242,.14) !important; background:#0A1931 !important; color:#F6F5F2 !important; }
html body :is(input,select,textarea):user-invalid { border-color:#EF4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.14); }

/* foco visivel fora da casca: o base.html tem um `*:focus-visible` global; o base_auth,
   o base_publico e o hub nao tinham. Como o realce e OUTLINE, ele nao briga com as
   regras de borda/fundo acima — o campo pode estar neutro e ainda mostrar onde esta o
   teclado. Acessibilidade primeiro. */
html body *:focus-visible { outline:2px solid #2290FF; outline-offset:2px; }

/* ══ REPORTAR ERRO (item 8 dos 12) ═══════════════════════════════════════════
   Botao fixo, discreto, na MESMA posicao nos dois portais. z-index 1050: acima do
   toast (1000) e ABAIXO do fundo escuro do menu-gaveta do celular (1100), pra ele
   sumir sozinho quando a gaveta abre em vez de flutuar por cima. */
.av-erro-btn {
  position:fixed; right:16px; bottom:16px; z-index:1050;
  display:inline-flex; align-items:center; gap:.4rem;
  background:#FFFFFF; color:#5A6B84; border:1px solid rgba(2,11,26,.12);
  border-radius:9999px; padding:.42rem .8rem; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:500; line-height:1;
  box-shadow:0 2px 10px rgba(2,11,26,.08); opacity:.62;
  transition:opacity .15s ease, color .15s ease, border-color .15s ease; }
.av-erro-btn:hover, .av-erro-btn:focus-visible { opacity:1; color:#002970; border-color:rgba(2,11,26,.24); }
.av-erro-btn .av-ic { width:15px; height:15px; }
.av-erro-cx {
  position:fixed; right:16px; bottom:60px; z-index:1050;
  width:min(330px, calc(100vw - 32px));
  background:#FFFFFF; color:#020B1A; border:1px solid rgba(2,11,26,.12);
  border-radius:12px; padding:.85rem; box-shadow:0 18px 50px -14px rgba(2,11,26,.35); }
.av-erro-cx[hidden] { display:none; }
.av-erro-tit { margin:0 0 .5rem; font-size:13.5px; font-weight:500; color:#020B1A; }
.av-erro-cx textarea {
  width:100%; box-sizing:border-box; resize:vertical; font:inherit; font-size:13px;
  color:#020B1A; background:#FFFFFF; border:1px solid rgba(2,11,26,.14);
  border-radius:8px; padding:.5rem .6rem; }
.av-erro-nota { margin:.45rem 0 0; font-size:11px; line-height:1.45; color:#5A6B84; }
.av-erro-acoes { display:flex; justify-content:flex-end; gap:.45rem; margin-top:.6rem; }
.av-erro-acoes button { font:inherit; font-size:12.5px; font-weight:500; border-radius:9999px;
  padding:.4rem .9rem; cursor:pointer; border:1px solid transparent; }
.av-erro-sec { background:transparent; color:#5A6B84; border-color:rgba(2,11,26,.14); }
.av-erro-sec:hover { color:#002970; }
.av-erro-pri { background:#2290FF; color:#F6F5F2; }
.av-erro-pri:hover { background:#002970; }
.av-erro-pri:disabled { opacity:.55; cursor:default; }
.av-erro-msg { margin:.5rem 0 0; font-size:12px; color:#5A6B84; min-height:1em; }
/* imprimir a tela nao leva o botao junto */
@media print { .av-erro-btn, .av-erro-cx { display:none !important; } }
html[data-theme="dark"] .av-erro-btn,
html[data-theme="dark"] .av-erro-cx { background:#0A1931; color:#F6F5F2; border-color:rgba(246,245,242,.14); }
html[data-theme="dark"] .av-erro-tit { color:#F6F5F2; }
html[data-theme="dark"] .av-erro-cx textarea { background:#020B1A; color:#F6F5F2; border-color:rgba(246,245,242,.16); }
html[data-theme="dark"] .av-erro-btn:hover, html[data-theme="dark"] .av-erro-btn:focus-visible { color:#2290FF; }
/* dentro de iframe a casca some — o botao tambem (senao aparece solto no form embutido) */
html.in-iframe .av-erro-btn, html.in-iframe .av-erro-cx { display:none !important; }

/* .sr-only: so existia no <style> do base.html (Backoffice). O rotulo do campo de
   reportar erro usa a classe em TODA casca, entao a regra passa a morar aqui — a
   definicao e identica a de la, nao briga. */
html body .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; }