/* ==========================================================================
   Executivos — folha de estilo compartilhada.
   Identidade "Executivos Holding": fonte Nunito, paleta azul + marinho +
   laranja, cards arredondados com sombra suave, rótulos em maiúsculas.

   ORGANIZAÇÃO (mobile-first):
   1. As regras BASE valem para o celular (a menor tela).
   2. Todo ajuste de layout entra em @media (min-width: ...) — nunca max-width.
      Assim o celular não precisa "desfazer" estilo de desktop.
   3. Breakpoints em `em` (respeitam o zoom de fonte do usuário) e escolhidos
      pelo CONTEÚDO, não por aparelho:
        34em (~544px) — cabe uma segunda coluna de informação no topo;
        48em (~768px) — cabem dois campos de formulário lado a lado;
        52em (~832px) — cabe o menu lateral fixo + tabelas sem rolagem;
        55em (~880px) — cabe a tela de login dividida (imagem + formulário).
   4. Tamanhos em rem/em/%/ch. px só onde é fisicamente correto:
      bordas de 1px/1.5px, sombras e contornos de foco (hairlines).
   ========================================================================== */

:root{
  /* ---------- Cores ----------
     Revisão de contraste WCAG 2.1 AA (razões calculadas, não estimadas).
     Regra: 4.5:1 para texto normal, 3:1 para texto grande e para bordas de
     componentes de interface. A paleta da holding foi mantida (mesmos matizes,
     só escurecidos o suficiente para passar). Pares corrigidos:

     --txt2 sobre branco ................ #6a7d92  4.23:1 -> #566476  6.03:1
     --txt2 sobre --card2 ............... #6a7d92  3.90:1 -> #566476  5.56:1
     --txt2 sobre --bg .................. #6a7d92  3.52:1 -> #566476  5.01:1
     --pri-d (links/texto) sobre branco . #1c7fb0  4.46:1 -> #15678e  6.25:1
     .btn (texto branco sobre o fundo) .. #2a9fd6  2.99:1 -> #15678e  6.25:1
     .avatar (iniciais brancas) ......... #2a9fd6  2.99:1 -> gradiente
                                          #15678e/#0f5b80  6.25:1 a 7.42:1
     .msg.ok (texto) .................... #27ae60  2.55:1 -> #16733f  5.23:1
     .msg.erro (texto) .................. #e74c3c  3.37:1 -> #b02a20  5.79:1
     .msg.aviso / .b-wait (texto) ....... #b85a10  3.99:1 -> #8f4409  5.99:1
     .b-ok (texto, --holding) ........... #1e8a4c  3.82:1 -> #157038  5.43:1
     .b-info (texto, --pri-d) ........... #1c7fb0  3.88:1 -> #15678e  5.43:1
     .mundoTag Holding sobre --holding-cl #1e8a4c  3.86:1 -> #157038  5.43:1
     .mundoTag Parceiro sobre --card2 ... #1c7fb0  4.11:1 -> #15678e  5.75:1
     borda de input (componente, 3:1) ... #cfdbe8  1.40:1 -> #78899e  3.58:1
     .demoflag (texto sobre o laranja) .. #fff     2.76:1 -> #23344a  4.58:1
     .passo.feito .bolha (ícone branco) . #27ae60  2.99:1 -> #157038  6.16:1
     Estados desativados são isentos pela WCAG, mas foram melhorados assim
     mesmo: .btn:disabled #9db6d3 2.09:1 -> #7286a3 3.71:1 e o texto de
     input:disabled #9aa5b1 2.22:1 -> #6b7885 4.01:1.

     As cores "vivas" originais (--pri, --ok, --ruim, --acento) continuam
     existindo: são usadas em preenchimentos decorativos (barras, gráficos,
     faixas do tile), onde não carregam texto. */
  --pri:#2a9fd6;          /* azul da marca — preenchimentos e ícones */
  --pri-d:#15678e;        /* azul escuro — texto, links e botão primário */
  --pri-dd:#0f5b80;       /* azul mais escuro — hover do botão primário */
  --acento:#F47920; --acento-d:#8f4409;
  --sb:#1e3a5f;
  --bg:#e3ebf3; --card:#fff; --card2:#f2f6fb;
  --linha:#cfdbe8;        /* separador decorativo (linhas de tabela, molduras) */
  --linha-forte:#78899e;  /* borda de componente interativo — 3.58:1 no branco */
  --txt:#23344a; --txt2:#566476;
  --ok:#27ae60; --ok-txt:#157038;      /* verde vivo p/ gráfico, escuro p/ texto */
  --ruim:#e74c3c; --ruim-txt:#b02a20;
  --foco:#0f5b80;         /* contorno de foco — 7.42:1 no branco */
  --sombra:0 1px 3px rgba(30,58,95,.10),0 8px 22px rgba(30,58,95,.10);
  /* Acentos por "mundo" (etiquetas e menu ativo) */
  --holding:#157038; --holding-cl:#e6f4ea;
  --fundacao:#b0347a; --fundacao-cl:#fbe9f2;
  --diretoria:#3f51b5; --diretoria-cl:#e8eaf6;
  --neutro:#3e4c59; --neutro-cl:#eef1f5;

  /* ---------- Escala tipográfica modular ----------
     Razão ~1.125 (segunda maior) no celular e ~1.2 no desktop. O clamp() faz
     a interpolação fluida ENTRE os breakpoints, então não há "salto" de fonte
     ao girar o aparelho. Valores em rem: respeitam a fonte-base do usuário. */
  --texto-xs:  clamp(0.6875rem, 0.665rem + 0.11vw, 0.75rem);    /* 11 -> 12px */
  --texto-sm:  clamp(0.75rem,   0.72rem  + 0.15vw, 0.8125rem);  /* 12 -> 13px */
  --texto-md:  clamp(0.8125rem, 0.78rem  + 0.16vw, 0.875rem);   /* 13 -> 14px */
  --texto-base:clamp(0.9375rem, 0.91rem  + 0.16vw, 1rem);       /* 15 -> 16px */
  --texto-lg:  clamp(1.0625rem, 1.02rem  + 0.23vw, 1.1875rem);  /* 17 -> 19px */
  --texto-xl:  clamp(1.25rem,   1.14rem  + 0.55vw, 1.625rem);   /* 20 -> 26px */
  --texto-2xl: clamp(1.5rem,    1.30rem  + 1vw,    2rem);       /* 24 -> 32px */
  /* Campos de formulário NÃO usam a escala: abaixo de 16px o iOS dá zoom
     automático ao focar o campo e desalinha a tela. 1rem é o piso seguro. */
  --texto-campo:1rem;

  /* ---------- Alvo de toque ----------
     44x44px = 2.75rem, mínimo recomendado (WCAG 2.5.5 / iOS HIG). */
  --toque:2.75rem;

  /* ---------- Espaçamento (múltiplos de 0.25rem) ---------- */
  --e1:0.25rem; --e2:0.5rem; --e3:0.75rem; --e4:1rem; --e5:1.25rem;
  --e6:1.5rem; --e8:2rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Nunito',-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);
  color:var(--txt);font-weight:600;font-size:var(--texto-base);line-height:1.5}
a{color:var(--pri-d)}
i.fa-solid,i.fa-regular{line-height:1}
img{max-width:100%;height:auto}

/* Foco visível em qualquer elemento interativo.
   Não depende só de cor: é um contorno com deslocamento (mudança de forma),
   perceptível também para quem não distingue matizes. :focus-visible evita
   que o contorno apareça no clique do mouse. */
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:0.375rem}

/* Quem pediu menos animação no sistema operacional não recebe transição
   nenhuma — só o essencial instantâneo (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Animações usam SOMENTE opacity/transform (compostas na GPU, sem reflow). */
@keyframes surgir{from{opacity:0;transform:translateY(-0.375rem)}to{opacity:1;transform:none}}

/* ---------------- Login (base = celular: imagem no topo, formulário abaixo) -- */
body.login{min-height:100vh;background:#fff}
.login-split{min-height:100vh;display:grid;grid-template-columns:1fr}
/* Painel de identidade visual "Executivos Holding" */
.login-visual{position:relative;overflow:hidden;background:#0a1a3a;height:8.125rem}
.login-visual img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.login-visual::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,26,58,0) 60%,rgba(8,20,48,.45))}
/* Zona do polegar: no celular o cartão fica encostado embaixo, para o botão
   "Entrar" cair na área alcançável com uma mão. */
.login-panel{display:flex;align-items:flex-end;justify-content:center;padding:var(--e6) var(--e5) var(--e8);
  background:linear-gradient(135deg,#eef3f8,#e3ebf3)}
.card-login{background:#fff;width:100%;max-width:25rem;border-radius:1.125rem;
  padding:var(--e6) var(--e5) var(--e5);box-shadow:0 10px 40px rgba(30,58,95,.14)}
.card-login h1{font-size:var(--texto-lg);font-weight:800;text-align:center}
.card-login .sub{font-size:var(--texto-sm);color:var(--txt2);text-align:center;margin-top:var(--e1);font-weight:700}
.card-login .rodape{margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--linha);
  text-align:center;color:var(--txt2);font-size:var(--texto-xs);font-weight:700;line-height:1.6}
/* O bloco do código MFA aparece por display + fade/slide (opacity/transform).
   Antes animava max-height, que força recálculo de layout a cada quadro. */
.otp-wrap{display:none}
.otp-wrap.show{display:block;animation:surgir .28s ease}
.campo{position:relative}
.campo i{position:absolute;left:var(--e3);top:50%;transform:translateY(-50%);color:var(--txt2);
  font-size:var(--texto-md);pointer-events:none}
.campo input{padding-left:2.5rem}

@media (min-width:55em){
  /* Cabem as duas colunas: imagem à esquerda, formulário à direita. */
  .login-split{grid-template-columns:1.05fr .95fr}
  .login-visual{height:auto}
  .login-panel{align-items:center;padding:2.75rem 1.875rem}
  .card-login{padding:2.125rem 2rem var(--e6)}
}

/* ---------------- Marca / logo ---------------- */
.logo{width:2.5rem;height:2.5rem;border-radius:0.6875rem;color:#fff;font-weight:900;font-size:var(--texto-lg);
  display:grid;place-items:center;flex-shrink:0;
  /* gradiente encurtado para o lado escuro: a letra fica sobre ~#1d86ad, e como
     é texto grande em negrito o mínimo exigido é 3:1 (obtido ~4.1:1). */
  background:linear-gradient(135deg,var(--pri),var(--pri-dd))}
.logo.g{width:3.375rem;height:3.375rem;border-radius:0.875rem;font-size:var(--texto-xl);margin:0 auto var(--e3)}

/* ---------------- Formulários ---------------- */
label{display:block;font-size:var(--texto-sm);color:var(--txt2);text-transform:uppercase;letter-spacing:.05em;
  font-weight:800;margin:var(--e3) 0 var(--e1)}
input,select,textarea{width:100%;font-family:inherit;font-weight:700;color:var(--txt);
  background:#fbfcfe;border:1.5px solid var(--linha-forte);border-radius:0.6875rem;
  padding:0.625rem 0.8125rem;font-size:var(--texto-campo);min-height:var(--toque)}
textarea{min-height:5.5rem}
input:focus,select:focus,textarea:focus{background:#fff}
/* Além do contorno de foco, a borda engrossa: sinal redundante à cor. */
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--foco)}
input:disabled,select:disabled{background:#eef2f6;color:#6b7885;-webkit-text-fill-color:#6b7885}
/* Validação inline: o campo com erro ganha borda vermelha E o texto de erro
   logo abaixo (cor + texto, nunca cor sozinha). */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--ruim-txt);background:#fffafa}
.erro-campo{display:none;margin-top:var(--e1);font-size:var(--texto-sm);font-weight:700;color:var(--ruim-txt)}
.erro-campo.show{display:flex;align-items:center;gap:0.375rem}
.hint{font-size:var(--texto-sm);color:var(--txt2);margin-top:var(--e1);font-weight:700}
/* Base: um campo por linha (celular). Dois campos só quando há largura. */
.linha-campos{display:grid;grid-template-columns:1fr;gap:var(--e3)}
@media (min-width:48em){ .linha-campos{grid-template-columns:1fr 1fr} }

/* ---------------- Botões ---------------- */
.btn{display:inline-flex;align-items:center;gap:var(--e2);justify-content:center;border:none;cursor:pointer;
  background:var(--pri-d);color:#fff;font-family:inherit;font-weight:800;font-size:var(--texto-md);
  border-radius:0.625rem;padding:0.625rem var(--e4);min-height:var(--toque);
  transition:background .15s}
.btn:hover{background:var(--pri-dd)}
.btn:disabled{background:#7286a3;cursor:not-allowed}
.btn.bloco{width:100%;padding:0.8125rem;margin-top:var(--e4)}
.btn.sec{background:var(--card);color:var(--txt);border:1.5px solid var(--linha-forte)}
.btn.sec:hover{background:var(--card2)}
/* "mini" reduz o visual, não o alvo: o mínimo de 2.75rem de altura é mantido
   para o dedo (WCAG 2.5.5), inclusive nas ações dentro das tabelas. */
.btn.mini{padding:var(--e2) var(--e3);font-size:var(--texto-sm);border-radius:0.5rem;min-height:var(--toque)}
label.btn.mini{text-transform:none;letter-spacing:0;margin:0;color:var(--txt);display:inline-flex}

/* ---------------- Mensagens ---------------- */
.msg{margin:var(--e3) 0 0;padding:0.6875rem var(--e3);border-radius:0.625rem;font-size:var(--texto-md);
  font-weight:700;display:none;text-align:center}
.msg.show{display:block}
.msg.erro{background:rgba(231,76,60,.1);color:var(--ruim-txt)}
.msg.ok{background:rgba(39,174,96,.12);color:var(--ok-txt)}
.msg.aviso{background:rgba(244,121,32,.12);color:var(--acento-d)}

/* ---------------- Topbar (base = celular, quebra em linhas) ---------------- */
.top{background:var(--sb);color:#fff;padding:0.625rem 0.875rem;display:flex;align-items:center;
  flex-wrap:wrap;gap:var(--e2) var(--e3);position:sticky;top:0;z-index:10}
.top .marca{font-weight:800;font-size:var(--texto-base);line-height:1.15}
.top .marca .sub{font-size:var(--texto-xs);color:#aebfd2;font-weight:700} /* 6.13:1 sobre --sb */
.cresce{flex:1 1 auto}
/* "Ver como" ocupa a linha inteira no celular (é um seletor largo). */
.verComo{display:flex;align-items:center;gap:var(--e2);font-size:var(--texto-xs);color:#aebfd2;
  text-transform:uppercase;letter-spacing:.05em;font-weight:800;order:3;width:100%}
/* O rótulo "Ver como" fica na barra escura: herda a cor/tamanho dela em vez do
   estilo global de <label> (que é cinza sobre fundo claro). */
.verComo label{display:inline;margin:0;color:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;text-transform:inherit}
.verComo select{flex:1;width:auto;padding:0.4375rem 0.625rem;font-size:var(--texto-md);color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55)} /* borda clara: 3:1 sobre --sb */
.verComo select option{color:var(--txt)}
.user{display:flex;align-items:center;gap:var(--e2)}
.avatar{width:2.125rem;height:2.125rem;border-radius:50%;
  /* iniciais brancas: gradiente só entre os azuis escuros (6.25:1 a 7.42:1) */
  background:linear-gradient(135deg,var(--pri-d),var(--pri-dd));
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:var(--texto-md);flex-shrink:0}
.top .btn.sec{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55)}
.top .btn.sec:hover{background:rgba(255,255,255,.18)}
/* Pessoa logada: o nome só aparece quando há largura para ele. */
.userInfo{display:none;flex-direction:column;line-height:1.15;margin-right:var(--e1)}
.userNome{font-size:var(--texto-md);font-weight:800;color:#fff}
.userPerfil{font-size:var(--texto-xs);color:#aebfd2;font-weight:700}
@media (min-width:34em){ .userInfo{display:flex} }
@media (min-width:52em){
  .top{padding:0.875rem var(--e6);flex-wrap:nowrap;gap:0.875rem}
  .top .marca{font-size:var(--texto-lg)}
  .verComo{order:0;width:auto}
  .verComo select{flex:0 0 auto}
}

/* ---------------- Layout / menu lateral ----------------
   Base (celular): coluna única. O menu vira uma faixa de "chips" rolável na
   horizontal, para não empurrar o conteúdo da tela para baixo da dobra. */
.layout{display:flex;flex-direction:column;min-height:calc(100vh - 3.875rem)}
.side{background:#fff;border-bottom:1px solid var(--linha);padding:var(--e3)}
.mundoTag{font-size:var(--texto-xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:var(--e1) var(--e3);border-radius:1.25rem;display:inline-block;margin-bottom:var(--e2)}
.menu{list-style:none;display:flex;gap:var(--e2);overflow-x:auto;padding-bottom:var(--e1);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.menu li{display:flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e3);border-radius:0.625rem;
  cursor:pointer;font-size:var(--texto-md);font-weight:700;color:var(--txt);white-space:nowrap;
  min-height:var(--toque);background:var(--card2);transition:background .12s}
.menu li:hover{background:var(--linha)}
.menu li.ativo{background:rgba(21,103,142,.14);color:var(--pri-d);font-weight:800}
.menu li .ic{width:1.375rem;text-align:center;font-size:var(--texto-base);color:var(--pri-d)}
.nota{margin-top:var(--e3);padding:var(--e3);background:var(--card2);border:1px solid var(--linha);
  border-radius:0.625rem;font-size:var(--texto-xs);color:var(--txt2);line-height:1.55;font-weight:700}

@media (min-width:52em){
  /* Cabe a coluna lateral fixa: o menu volta a ser vertical. */
  .layout{flex-direction:row}
  .side{width:15.75rem;flex-shrink:0;border-bottom:none;border-right:1px solid var(--linha);
    padding:1.125rem var(--e3)}
  .menu{flex-direction:column;overflow:visible;gap:0.125rem}
  .menu li{background:none;padding:0.6875rem 0.8125rem;white-space:normal}
  .menu li:hover{background:var(--card2)}
  .menu li.ativo{background:rgba(21,103,142,.14)}
}

/* ---------------- Main ---------------- */
.main{flex:1;padding:var(--e5) var(--e4);max-width:73.75rem;width:100%}
.bread{font-size:var(--texto-xs);color:var(--txt2);text-transform:uppercase;letter-spacing:.05em;
  font-weight:800;margin-bottom:var(--e1)}
.main h1{font-size:var(--texto-xl);font-weight:800;margin-bottom:var(--e1);display:flex;
  align-items:center;gap:var(--e2);flex-wrap:wrap;line-height:1.25}
.main h1 i{color:var(--pri-d)}
.main .sub{color:var(--txt2);font-size:var(--texto-md);font-weight:700;margin-bottom:var(--e5)}
@media (min-width:52em){ .main{padding:var(--e6) 1.875rem} }

/* ---------------- Cards / componentes ---------------- */
/* auto-fill + minmax(min(100%,...)) resolve o celular e o desktop com UMA
   regra: nunca estoura a largura da tela e cria colunas conforme couber. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));
  gap:var(--e3);margin-bottom:1.125rem}
.tile{background:var(--card);border:1px solid var(--linha);border-radius:0.9375rem;padding:var(--e4) 1.125rem;
  box-shadow:var(--sombra);position:relative;overflow:hidden}
.tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pri)}
.tile:nth-child(2)::before{background:var(--acento)} .tile:nth-child(3)::before{background:var(--ok)}
.tile:nth-child(4)::before{background:var(--sb)}
.tile .n{font-size:var(--texto-2xl);font-weight:900;line-height:1.05;overflow-wrap:anywhere}
.tile .l{font-size:var(--texto-xs);color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;
  font-weight:800;margin-top:var(--e1)}
.painel,.card{background:var(--card);border:1px solid var(--linha);border-radius:0.9375rem;
  padding:1.125rem var(--e5);box-shadow:var(--sombra);margin-bottom:var(--e4)}
.painel .desc{color:var(--txt2);font-weight:700;margin-bottom:0.875rem}
/* Barra de ações: no celular tudo empilha e o botão principal fica por último,
   perto do polegar; a busca vem antes porque é a ação mais frequente. */
.barra{display:flex;flex-direction:column;align-items:stretch;gap:var(--e2);margin-bottom:0.875rem}
.barra b{font-size:var(--texto-base)}
.barra .btn{width:100%;justify-content:center}
@media (min-width:48em){
  .barra{flex-direction:row;justify-content:space-between;align-items:center;gap:var(--e3);flex-wrap:wrap}
  .barra .btn{width:auto}
}

/* ---------------- Tabelas ----------------
   No celular a tabela rola DENTRO do cartão (não quebra o layout da página).
   A rolagem é anunciada por tabindex+role no HTML gerado quando aplicável. */
.painel,.card{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--texto-md);min-width:32.5rem}
th{text-align:left;font-size:var(--texto-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--txt2);
  border-bottom:2px solid var(--linha);padding:0.5625rem var(--e2);font-weight:800}
td{padding:0.6875rem var(--e2);border-bottom:1px solid var(--linha);font-weight:600;vertical-align:top}
tr:hover td{background:var(--card2)}
@media (min-width:52em){
  .painel,.card{overflow-x:visible}
  table{min-width:0}
}

/* ---------------- Badges ---------------- */
.badge{display:inline-block;font-size:var(--texto-xs);font-weight:800;border-radius:0.6875rem;
  padding:0.125rem var(--e2);text-transform:uppercase;letter-spacing:.03em}
.b-ok{background:rgba(39,174,96,.14);color:var(--holding)}
.b-wait{background:rgba(244,121,32,.16);color:var(--acento-d)}
.b-info{background:rgba(42,159,214,.14);color:var(--pri-d)}

.endpoint{margin-top:0.875rem;font-size:var(--texto-sm);color:var(--txt2);font-weight:700;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.princ{margin-top:var(--e5);padding:var(--e3) var(--e4);border-radius:0.625rem;font-size:var(--texto-md);
  font-weight:700;background:linear-gradient(90deg,rgba(42,159,214,.12),rgba(42,159,214,.02));
  border-left:4px solid var(--pri-d);color:#1c5480}          /* 7.05:1 sobre o fundo azul claro */
.princ b{color:var(--pri-d)}

/* ---------------- Toast ---------------- */
.toast{position:fixed;bottom:var(--e6);left:50%;transform:translateX(-50%) translateY(1.25rem);
  background:var(--sb);color:#fff;padding:var(--e3) var(--e5);border-radius:0.6875rem;
  font-size:var(--texto-md);font-weight:700;max-width:min(90vw,28rem);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;
  box-shadow:0 10px 30px rgba(30,58,95,.35)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.demoflag{position:fixed;top:var(--e3);right:var(--e3);background:var(--acento);color:var(--txt);
  font-size:var(--texto-xs);font-weight:800;border-radius:1.25rem;padding:var(--e1) var(--e3);z-index:60;
  box-shadow:var(--sombra)}   /* texto marinho sobre o laranja: 4.58:1 (era branco, 2.76:1) */

/* ---------------- Avatar com foto ---------------- */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar.sm{width:1.875rem;height:1.875rem;font-size:var(--texto-sm)}
.avatar.grande{width:4rem;height:4rem;font-size:var(--texto-xl)}
.top .avatar{overflow:hidden}
.perfil-topo{display:flex;align-items:center;gap:var(--e4);margin-bottom:var(--e4);flex-wrap:wrap}
.perfil-nome{font-size:var(--texto-lg);font-weight:800}
.perfil-sub{font-size:var(--texto-md);color:var(--txt2);font-weight:700}

/* ---------------- Busca (ênfase no uso) ---------------- */
.busca{position:relative;flex:1 1 100%;min-width:0}
.busca i{position:absolute;left:var(--e3);top:50%;transform:translateY(-50%);color:var(--txt2);
  font-size:var(--texto-md);pointer-events:none}
.busca input{padding-left:2.375rem;background:#fff}
@media (min-width:48em){ .busca{flex:1 1 auto;max-width:32.5rem} }

/* ---------------- Célula pessoa + ações ---------------- */
.pessoa{display:flex;align-items:center;gap:var(--e2)}
.pessoa span{font-weight:700}
.acoes-linha{display:flex;flex-wrap:wrap;gap:var(--e1)}
.acoes-linha .btn.mini{flex:1 1 auto}
@media (min-width:48em){ .acoes-linha .btn.mini{flex:0 0 auto} }
.foto-upload{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.foto-preview{width:var(--toque);height:var(--toque);border-radius:50%;background:var(--card2);
  border:1.5px solid var(--linha-forte);overflow:hidden;flex-shrink:0;display:grid;place-items:center}
.foto-preview img{width:100%;height:100%;object-fit:cover}
/* A caixa de seleção inteira (rótulo + quadrado) é clicável e tem 2.75rem. */
.check{display:flex;align-items:center;gap:var(--e2);font-size:var(--texto-md);font-weight:700;
  color:var(--txt);text-transform:none;letter-spacing:0;margin:var(--e3) 0 0;min-height:var(--toque);cursor:pointer}
.check input{width:1.25rem;height:1.25rem;min-height:0;flex-shrink:0;accent-color:var(--pri-d)}

/* ---------------- Filtro de período ---------------- */
.periodo{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.periodo label{margin:0;white-space:nowrap}
.periodo select{width:100%}
@media (min-width:48em){ .periodo select{width:auto;min-width:10.625rem} }

/* ---------------- Painel Consolidado (dashboard) ---------------- */
.dash-grid{display:grid;grid-template-columns:1fr;gap:var(--e4)}
.dash-card{margin-bottom:0}
.dash-tit{font-weight:800;font-size:var(--texto-md);display:flex;align-items:center;gap:0.5625rem;
  margin-bottom:0.875rem}
.dash-tit i{color:var(--pri-d)}
.dash-card.mundo-holding{border-top:3px solid var(--holding)}
.dash-card.mundo-fundacao{border-top:3px solid var(--fundacao)}
.dash-card.mundo-fundacao .dash-tit i{color:var(--fundacao)}
.dash-nota{margin-top:var(--e3);font-size:var(--texto-sm);color:var(--txt2);font-weight:700;line-height:1.5}
.dash-nota i{color:var(--pri-d)}
@media (min-width:52em){ .dash-grid{grid-template-columns:1fr 1fr} }
/* Barras horizontais */
.barrasH{display:flex;flex-direction:column;gap:0.6875rem}
.bh-row{display:grid;grid-template-columns:6.875rem 1fr auto;align-items:center;gap:var(--e2)}
.bh-lab{font-size:var(--texto-sm);font-weight:700;color:var(--txt2)}
.bh-track{background:var(--card2);border:1px solid var(--linha);border-radius:0.5rem;height:1rem;overflow:hidden}
.bh-fill{display:block;height:100%;border-radius:0.5rem;min-width:3px}
.bh-val{font-size:var(--texto-md);font-weight:800;color:var(--txt);white-space:nowrap}
@media (min-width:52em){ .bh-row{grid-template-columns:8.125rem 1fr auto;gap:var(--e2)} }
/* Donut — os atributos width/height do <svg> reservam o espaço (sem CLS) e o
   CSS deixa a rosca encolher junto com a tela do celular. */
.donut-wrap{display:flex;align-items:center;gap:var(--e5);flex-wrap:wrap}
.donut-svg{max-width:100%;height:auto;flex-shrink:0}
.donut-leg{display:flex;flex-direction:column;gap:var(--e2)}
.leg{font-size:var(--texto-md);font-weight:700;color:var(--txt2);display:flex;align-items:center;gap:var(--e2)}
.leg b{color:var(--txt)}
.leg-cor{width:0.75rem;height:0.75rem;border-radius:3px;display:inline-block;flex-shrink:0;
  border:1px solid rgba(35,52,74,.35)}  /* contorno: a cor sozinha não identifica a série */

/* ---------------- Botão de ajuda (?) e modal ---------------- */
/* O botão é pequeno por design (fica ao lado do título), então o ALVO de toque
   é ampliado por um pseudo-elemento invisível de 2.75rem — o visual continua
   discreto e o dedo acerta. */
.ajuda-btn{position:relative;background:var(--card2);color:var(--pri-d);cursor:pointer;
  width:1.625rem;height:1.625rem;border-radius:50%;font-size:var(--texto-md);display:inline-grid;
  place-items:center;vertical-align:middle;border:1.5px solid var(--linha-forte);transition:background .12s}
.ajuda-btn::after{content:'';position:absolute;left:50%;top:50%;width:var(--toque);height:var(--toque);
  transform:translate(-50%,-50%)}
.ajuda-btn:hover{background:rgba(42,159,214,.14)}
.main h1 .ajuda-btn i{color:var(--pri-d)}
.modal-overlay{position:fixed;inset:0;background:rgba(20,34,54,.5);display:none;place-items:center;
  z-index:100;padding:var(--e4)}
.modal-overlay.show{display:grid;animation:surgir .18s ease}
.modal-box{background:#fff;width:100%;max-width:35rem;max-height:85vh;overflow:auto;border-radius:1rem;
  box-shadow:0 20px 60px rgba(20,34,54,.35)}
.modal-topo{display:flex;align-items:center;gap:var(--e3);padding:1.125rem var(--e5);
  border-bottom:1px solid var(--linha);position:sticky;top:0;background:#fff}
.modal-topo h2{font-size:var(--texto-lg);font-weight:800;flex:1}
.modal-topo h2 i{color:var(--pri-d)}
.modal-x{border:none;background:var(--card2);width:var(--toque);height:var(--toque);border-radius:0.5625rem;
  cursor:pointer;color:var(--txt);font-size:var(--texto-base);flex-shrink:0}
.modal-x:hover{background:var(--linha)}
.modal-corpo{padding:1.125rem var(--e5)}
.modal-corpo p{color:var(--txt2);font-weight:600;line-height:1.65;margin-bottom:var(--e2)}
.modal-corpo b{color:var(--txt)}

/* ---------------- Stepper (linha do tempo do andamento) ---------------- */
.stepper{list-style:none}
.passo{display:flex;align-items:center;gap:var(--e3);position:relative;padding:var(--e1) 0;min-height:2.5rem}
.passo .bolha{width:1.875rem;height:1.875rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--card2);color:var(--txt2);border:2px solid var(--linha-forte);font-size:var(--texto-md);z-index:1}
.passo.feito .bolha{background:var(--ok-txt);color:#fff;border-color:var(--ok-txt)}
.passo.atual .bolha{background:var(--pri-d);color:#fff;border-color:var(--pri-d)}
.passo .rotulo{font-weight:700;color:var(--txt2)}
.passo.feito .rotulo{color:var(--txt)}
.passo.atual .rotulo{color:var(--txt);font-weight:800}
.passo:not(:last-child)::before{content:'';position:absolute;left:0.875rem;top:2.125rem;
  height:calc(100% - 1.125rem);width:2px;background:var(--linha)}
.passo.feito:not(:last-child)::before{background:var(--ok-txt)}
.previsao{margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--linha);font-weight:700;color:var(--txt2)}
.previsao i{color:var(--pri-d)}

/* ---------------- Ajuda (acordeão pesquisável) ---------------- */
.ajuda-card{background:var(--card);border:1px solid var(--linha);border-radius:0.75rem;margin-bottom:var(--e2);
  box-shadow:var(--sombra);overflow:hidden}
.ajuda-titulo{width:100%;display:flex;align-items:center;gap:var(--e3);background:none;border:none;
  cursor:pointer;padding:var(--e3) 1.125rem;font-family:inherit;font-weight:800;font-size:var(--texto-base);
  color:var(--txt);text-align:left;min-height:var(--toque)}
.ajuda-titulo span{flex:1}
.ajuda-titulo i:first-child{color:var(--pri-d)}
.ajuda-titulo .seta{color:var(--txt2);font-size:var(--texto-md);transition:transform .2s}
.ajuda-card.aberto .seta{transform:rotate(180deg)}
/* Abre por display + fade (opacity/transform). O max-height animado anterior
   forçava layout a cada quadro e limitava o texto a 900px de altura. */
.ajuda-corpo{display:none;padding:0 1.125rem}
.ajuda-card.aberto .ajuda-corpo{display:block;padding:0.125rem 1.125rem var(--e4);animation:surgir .2s ease}
.ajuda-corpo p{color:var(--txt2);font-weight:600;line-height:1.65;margin-bottom:var(--e2)}

/* ---------------- Utilitário de acessibilidade ----------------
   Texto só para leitor de tela (link "pular para o conteúdo", legendas). */
.so-leitor{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Campo escondido só visualmente (ex.: seletor de arquivo): quando ele recebe
   o foco pelo teclado, o botão-rótulo ao lado mostra o contorno por ele. */
.so-leitor:focus-visible + .btn{outline:3px solid var(--foco);outline-offset:2px}
.pular{position:absolute;left:var(--e2);top:-100%;z-index:200;background:#fff;color:var(--pri-d);
  padding:var(--e2) var(--e3);border-radius:0.5rem;font-weight:800;box-shadow:var(--sombra)}
.pular:focus{top:var(--e2)}