/* Design System UNIAVAN v3.0 aplicado ao painel dos coordenadores (15/10/2026).
   Evolução do v2.0 (o «UNIAVAN · Design System do Dashboard» v1.0 aplicado no mesmo dia), a pedido do Jonas:
   padrão de cores ancorado na marca oficial, acabamento mais limpo e movimento mínimo inspirado no Magic UI.
   Carrega por último (app.css → design.css → ds.css): é a fonte única dos tokens e veste os componentes que já
   existem, sem mexer em estrutura, handlers ou cálculo. O movimento vive em fx.js e nos blocos «movimento» abaixo.

   Cores: as duas âncoras saem da logomarca oficial — grafite #1D1D1B e verde #1BCE1E. Cada família é uma rampa
   OKLCH de 50 a 950 gerada por docs/design-system-20261015/paleta.py (que também mede os pares de contraste);
   os papéis (--papel, --tinta, --marca…) apontam para os primitivos e só os papéis mudam com o tema.
   A Regra dos Dois Tons segue: texto usa o tom de leitura (700 no claro, 400/500 no escuro) e o vivo (500) fica
   para barra, glifo e gráfico. Ícones: traços no estilo Lucide (ISC), como máscara SVG pintada pelo token. */

/* ---------- primitivos: rampas da marca (gerados por paleta.py; não editar à mão) ---------- */
:root {
  --grafite-0: #ffffff; --grafite-25: #fbfbf9; --grafite-50: #f6f6f4; --grafite-100: #efefed; --grafite-150: #e7e7e6; --grafite-200: #dededc; --grafite-300: #c7c7c5; --grafite-400: #a5a5a2; --grafite-500: #80807e; --grafite-600: #636361; --grafite-700: #484846; --grafite-800: #2e2e2c; --grafite-850: #252523; --grafite-900: #1d1d1b; --grafite-925: #151513; --grafite-950: #10100e; --grafite-975: #0c0c0a;
  --verde-50: #eafde8; --verde-100: #d5f8d2; --verde-200: #b1f0ac; --verde-300: #86e980; --verde-400: #57e153; --verde-500: #1bce1e; --verde-600: #06a60d; --verde-700: #007d05; --verde-800: #005c02; --verde-900: #024203; --verde-950: #022c02;
  --azul-50: #f2f7fe; --azul-100: #e2eefe; --azul-200: #c7dfff; --azul-300: #a3caff; --azul-400: #69aaff; --azul-500: #2987f8; --azul-600: #1b72d8; --azul-700: #165eb4; --azul-800: #174988; --azul-900: #143560; --azul-950: #0b2341;
  --roxo-50: #f8f5ff; --roxo-100: #f0e8ff; --roxo-200: #e3d4ff; --roxo-300: #d3b8fe; --roxo-400: #bb89fe; --roxo-500: #9f5ced; --roxo-600: #8a4dcf; --roxo-700: #7341ae; --roxo-800: #583484; --roxo-900: #3f275d; --roxo-950: #2a193f;
  --laranja-50: #fff4ef; --laranja-100: #ffe7db; --laranja-200: #ffd2b9; --laranja-300: #ffb48a; --laranja-400: #fe9557; --laranja-500: #f7791a; --laranja-600: #c75d03; --laranja-700: #974603; --laranja-800: #773501; --laranja-900: #552606; --laranja-950: #391804;
  --vermelho-50: #fef4f3; --vermelho-100: #fee6e4; --vermelho-200: #ffcfca; --vermelho-300: #feb0a9; --vermelho-400: #fe7a73; --vermelho-500: #ef4244; --vermelho-600: #ce3135; --vermelho-700: #ab282b; --vermelho-800: #832323; --vermelho-900: #5d1c1b; --vermelho-950: #3f1110;
  /* movimento: chegada confiante, sem quique; rotina rápida, entrada de tela curta */
  --ease-saida: cubic-bezier(.16, 1, .3, 1);
  --ease-padrao: cubic-bezier(.2, 0, 0, 1);
  --t-1: 120ms; --t-2: 200ms; --t-3: 320ms; --t-4: 640ms;
  /* escalas (refino de 15/10): espaço em passos de 4 px e tamanhos de texto; não são cor, valem nos dois temas */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px;
  --painel-gap: var(--esp-4); --painel-x: var(--esp-5);
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-40: 40px;
  --fs-h1: clamp(27px, 2.6vw, 38px);
  /* ícones */
  --i-panorama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1.5'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1.5'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1.5'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1.5'/%3E%3C/svg%3E");
  --i-metas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E");
  --i-vinculos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  --i-polos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-ficha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
  --i-liga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
  --i-trofeu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");
  --i-ajuda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --i-tema: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --i-sair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
  --i-captacao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
  --i-rematricula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
  --i-evasao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
  --i-feito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --i-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E");
  --i-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='m2 12.65 9.17 4.16a2 2 0 0 0 1.66 0L22 12.65'/%3E%3Cpath d='m2 17.65 9.17 4.16a2 2 0 0 0 1.66 0L22 17.65'/%3E%3C/svg%3E");
  --i-pessoas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --i-ofertas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
  --i-transferencias: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E");
  --i-trocas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
  --i-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --i-abrir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-ordenar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  --i-fechar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --i-foco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
  --i-recolher: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m16 15-3-3 3-3'/%3E%3C/svg%3E");
  --i-expandir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m14 9 3 3-3 3'/%3E%3C/svg%3E");
  --i-detalhes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 5h8'/%3E%3Cpath d='M13 9h5'/%3E%3Cpath d='M13 15h8'/%3E%3Cpath d='M13 19h5'/%3E%3Cpath d='M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/%3E%3Cpath d='M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/%3E%3C/svg%3E");
  --i-atualiza: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4'/%3E%3Cpath d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/%3E%3C/svg%3E");
  --i-atencao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --i-parcelas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z'/%3E%3Cpath d='M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
  --i-cursando: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9l-10 -4l-10 4l10 4l10 -4v6'/%3E%3Cpath d='M6 10.6v5.4a6 3 0 0 0 12 0v-5.4'/%3E%3C/svg%3E");
  --i-reservado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.866 10.45a9 9 0 1 0 -7.815 10.488'/%3E%3Cpath d='M12 7v5l1.5 1.5'/%3E%3Cpath d='M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5'/%3E%3Cpath d='M19 21v1m0 -8v1'/%3E%3C/svg%3E");
  --i-cancelado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h3.5'/%3E%3Cpath d='M22 22l-5 -5'/%3E%3Cpath d='M17 22l5 -5'/%3E%3C/svg%3E");
  --i-repasse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
  --i-baixar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
  --i-cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --i-usuario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --i-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
}

/* ---------- papéis: tema claro ---------- */
:root, :root[data-theme="light"] {
  /* papéis: claro */
  --papel: var(--grafite-50);
  --lateral: var(--grafite-25);
  --folha: var(--grafite-0);
  --folha-2: var(--grafite-100);
  --folha-3: var(--grafite-150);
  --tinta: var(--grafite-900);
  --tinta-2: var(--grafite-600);
  --fio: var(--grafite-150);
  --fio-2: var(--grafite-200);
  --fio-forte: var(--grafite-500);
  --marca: var(--verde-500);
  --marca-esc: var(--verde-700);
  --marca-fundo: var(--verde-50);
  --tinta-primario: var(--grafite-900);
  --foco: var(--verde-700);
  --teal: var(--verde-700);
  --teal-vivo: var(--verde-500);
  --teal-fraco: var(--verde-50);
  --azul: var(--azul-700);
  --azul-vivo: var(--azul-500);
  --azul-fraco: var(--azul-50);
  --roxo: var(--roxo-700);
  --roxo-vivo: var(--roxo-500);
  --roxo-fraco: var(--roxo-50);
  --laranja: var(--laranja-700);
  --lar-vivo: var(--laranja-500);
  --lar-fraco: var(--laranja-50);
  --bordo: var(--vermelho-700);
  --bordo-vivo: var(--vermelho-500);
  --bordo-fraco: var(--vermelho-50);
  /* fundo das linhas de estado (meta atingida, atrasada) e sombra que avisa da rolagem lateral; medidos no paleta.py */
  --linha-atingida: var(--teal-fraco);
  --linha-atrasada: var(--bordo-fraco);
  --sombra-rolagem: color-mix(in srgb, var(--tinta) 14%, transparent);
  --barra: var(--lateral); --barra-tinta: var(--tinta); --barra-tinta-2: var(--tinta-2); --tinta-3: var(--tinta-2);
  --campo: var(--folha);
  --sombra: 0 1px 2px rgb(29 29 27 / .04), 0 2px 10px -2px rgb(29 29 27 / .06);
  --sombra-alta: 0 2px 6px rgb(29 29 27 / .05), 0 28px 56px -14px rgb(29 29 27 / .22);
  --brilho-borda: rgb(255 255 255 / 0);
  --sombra-item: 0 1px 2px rgb(29 29 27 / .06);
  --sombra-primario: inset 0 1px 0 rgb(255 255 255 / .32), 0 1px 2px rgb(29 29 27 / .14);
  --pontos: rgb(29 29 27 / .11);
  --listra: rgb(255 255 255 / .34);
  /* reflexo que atravessa o verde da marca (botão primário, barra de meta batida): igual nos dois temas */
  --reflexo: rgb(255 255 255 / .36); --reflexo-forte: rgb(255 255 255 / .55);
  --r: 14px; --r-controle: 10px; --topo: 0px; --lateral-w: 238px;
  --fonte-texto: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: var(--fonte-texto); --fonte-num: var(--fonte-texto);
  color-scheme: light;
}
/* ---------- papéis: tema escuro (automático pelo sistema ou escolhido) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* papéis: escuro */
    --papel: var(--grafite-950);
    --lateral: var(--grafite-925);
    --folha: var(--grafite-900);
    --folha-2: var(--grafite-850);
    --folha-3: var(--grafite-800);
    --tinta: var(--grafite-50);
    --tinta-2: var(--grafite-400);
    --fio: var(--grafite-800);
    --fio-2: var(--grafite-700);
    --fio-forte: var(--grafite-500);
    --marca: var(--verde-500);
    --marca-esc: var(--verde-500);
    --marca-fundo: var(--verde-950);
    --tinta-primario: var(--grafite-900);
    --foco: var(--verde-500);
    --teal: var(--verde-500);
    --teal-vivo: var(--verde-500);
    --teal-fraco: var(--verde-950);
    --azul: var(--azul-400);
    --azul-vivo: var(--azul-500);
    --azul-fraco: var(--azul-950);
    --roxo: var(--roxo-400);
    --roxo-vivo: var(--roxo-500);
    --roxo-fraco: var(--roxo-950);
    --laranja: var(--laranja-400);
    --lar-vivo: var(--laranja-500);
    --lar-fraco: var(--laranja-950);
    --bordo: var(--vermelho-400);
    --bordo-vivo: var(--vermelho-500);
    --bordo-fraco: var(--vermelho-950);
    /* no escuro, o 950 é a superfície mais saturada: a linha de estado é o vivo a 10% sobre a folha */
    --linha-atingida: color-mix(in srgb, var(--marca) 10%, var(--folha));
    --linha-atrasada: color-mix(in srgb, var(--bordo-vivo) 10%, var(--folha));
    --sombra-rolagem: color-mix(in srgb, var(--tinta) 14%, transparent);
    --campo: var(--folha-2);
    --sombra: inset 0 1px 0 rgb(255 255 255 / .035), 0 1px 2px rgb(0 0 0 / .45);
    --sombra-alta: inset 0 1px 0 rgb(255 255 255 / .05), 0 28px 72px -16px rgb(0 0 0 / .75);
    --brilho-borda: rgb(255 255 255 / .05);
    --sombra-item: 0 1px 2px rgb(0 0 0 / .4);
    --sombra-primario: inset 0 1px 0 rgb(255 255 255 / .32), 0 1px 2px rgb(0 0 0 / .5);
    --pontos: rgb(246 246 244 / .075);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* papéis: escuro */
  --papel: var(--grafite-950);
  --lateral: var(--grafite-925);
  --folha: var(--grafite-900);
  --folha-2: var(--grafite-850);
  --folha-3: var(--grafite-800);
  --tinta: var(--grafite-50);
  --tinta-2: var(--grafite-400);
  --fio: var(--grafite-800);
  --fio-2: var(--grafite-700);
  --fio-forte: var(--grafite-500);
  --marca: var(--verde-500);
  --marca-esc: var(--verde-500);
  --marca-fundo: var(--verde-950);
  --tinta-primario: var(--grafite-900);
  --foco: var(--verde-500);
  --teal: var(--verde-500);
  --teal-vivo: var(--verde-500);
  --teal-fraco: var(--verde-950);
  --azul: var(--azul-400);
  --azul-vivo: var(--azul-500);
  --azul-fraco: var(--azul-950);
  --roxo: var(--roxo-400);
  --roxo-vivo: var(--roxo-500);
  --roxo-fraco: var(--roxo-950);
  --laranja: var(--laranja-400);
  --lar-vivo: var(--laranja-500);
  --lar-fraco: var(--laranja-950);
  --bordo: var(--vermelho-400);
  --bordo-vivo: var(--vermelho-500);
  --bordo-fraco: var(--vermelho-950);
  --linha-atingida: color-mix(in srgb, var(--marca) 10%, var(--folha));
  --linha-atrasada: color-mix(in srgb, var(--bordo-vivo) 10%, var(--folha));
  --sombra-rolagem: color-mix(in srgb, var(--tinta) 14%, transparent);
  --campo: var(--folha-2);
  --sombra: inset 0 1px 0 rgb(255 255 255 / .035), 0 1px 2px rgb(0 0 0 / .45);
  --sombra-alta: inset 0 1px 0 rgb(255 255 255 / .05), 0 28px 72px -16px rgb(0 0 0 / .75);
  --brilho-borda: rgb(255 255 255 / .05);
  --sombra-item: 0 1px 2px rgb(0 0 0 / .4);
  --sombra-primario: inset 0 1px 0 rgb(255 255 255 / .32), 0 1px 2px rgb(0 0 0 / .5);
  --pontos: rgb(246 246 244 / .075);
  color-scheme: dark;
}

/* ---------- base ---------- */
body { background: var(--papel); color: var(--tinta); font: 400 14px/1.5 var(--fonte-texto);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 650; letter-spacing: -.015em; }
.num, td.num, th.num, input.num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
/* small sem classe herdava «smaller» (9,2 px nas células de polo): passa ao Small do DS; rótulo e cabeçalho seguem 11. */
small { font-size: var(--fs-12); line-height: 1.5; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--marca) 26%, transparent); }
html { scrollbar-color: var(--fio-2) transparent; }
.rolagem, .topo, .lateral > .cartao { scrollbar-width: thin; scrollbar-color: var(--fio-2) transparent; }

/* ---------- menu lateral ---------- */
.topo {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: var(--lateral-w); height: auto; min-height: 0;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 24px 14px 18px;
  background: var(--lateral); color: var(--tinta); border: 0; border-right: 1px solid var(--fio);
  overflow-y: auto; overscroll-behavior: contain;
}
.topo .marca { display: block; flex: none; margin: 0 12px 28px; font: inherit; letter-spacing: 0; }
.topo .marca img { width: 146px; max-width: 100%; height: auto; margin: 0 0 12px; }
/* Subtítulo da marca em duas linhas de texto comum: em caixa-alta de 10,5 px ocupava três. */
.topo .marca em { display: block; font-style: normal; font-size: var(--fs-12); font-weight: 500; line-height: 1.4;
  letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
/* A logomarca troca com o tema: grafite sobre o claro, branca sobre o escuro (arquivos oficiais da marca). */
img.logo { display: none !important; }
img.logo-claro { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.logo { display: block !important; }
  :root:not([data-theme="light"]) img.logo-claro { display: none !important; }
}
:root[data-theme="dark"] img.logo { display: block !important; }
:root[data-theme="dark"] img.logo-claro { display: none !important; }

.topo .abas { position: static; inset: auto; width: auto; padding: 0; margin: 0; background: none; border: 0; z-index: auto; }
.topo .abas .envelope { display: flex; flex-direction: column; gap: var(--esp-5); max-width: none; margin: 0; padding: 0; }
/* Dois grupos com título, «Acompanhar» e «Administrar» (PRD «Navbar lateral nova», Cléo, 28/10/2026). O título é o rótulo de
   11 px do DS e o JS o esconde quando só um grupo aparece; o grupo sem item visível some (.oculto). */
.topo .grupo { min-width: 0; }
.topo .grupo-rot { margin: 0 0 var(--esp-1); padding: 0 12px; font-size: var(--fs-11); font-weight: 650; line-height: 1.45;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); }
.topo .grupo-itens { display: flex; flex-direction: column; gap: 2px; }
.topo .abas button, .topo .lugar {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 0; margin: 0; padding: 9px 12px;
  border: 0; border-radius: var(--r-controle); background: none; box-shadow: none;
  color: var(--tinta-2); font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left; white-space: normal; cursor: pointer;
  transition: background-color var(--t-2) var(--ease-padrao), color var(--t-2) var(--ease-padrao), box-shadow var(--t-2) var(--ease-padrao);
}
.topo .abas button:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.topo .abas button:active { transform: scale(.985); }
.topo .abas button[aria-current="true"] {
  color: var(--tinta); font-weight: 600; background: var(--folha);
  box-shadow: 0 0 0 1px var(--fio), var(--sombra-item), inset 0 1px 0 var(--brilho-borda);
}
/* Indicador do item ativo: traço verde curto à esquerda, no lugar da borda de 3px de altura total do v2.0. */
.topo .abas button[aria-current="true"]::after {
  content: ""; position: absolute; left: -14px; top: 50%; width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 3px 3px 0; background: var(--marca);
}
.topo .ico { flex: none; width: 18px; height: 18px; font-size: 0; line-height: 0; color: inherit; background: currentColor;
  -webkit-mask: var(--ico, var(--i-panorama)) center / 18px 18px no-repeat; mask: var(--ico, var(--i-panorama)) center / 18px 18px no-repeat; }
.topo .abas button[aria-current="true"] .ico, .topo .lugar .ico { background: var(--marca-esc); }
.topo [data-tela="panorama"] .ico { --ico: var(--i-panorama); }
.topo [data-tela="metas-captacao"] .ico, .topo .lugar[data-papel-de="polo"] .ico { --ico: var(--i-metas); }
.topo [data-tela="vinculos"] .ico { --ico: var(--i-vinculos); }
.topo [data-tela="polos"] .ico { --ico: var(--i-polos); }
/* Quem vê uma tela só (o gestor de polo sem Repasse) não tem menu: o item marca onde a pessoa está. É texto, não botão:
   sem fundo, sombra nem traço de item ativo, que o faziam parecer clicável. */
.topo .lugar { display: none; cursor: default; color: var(--tinta); font-weight: 600; }
body[data-papel="polo"] .topo .lugar[data-papel-de="polo"] { display: flex; }

/* Conta (PRD «Navbar lateral nova», 28/10/2026): o pé do menu é um botão só, com avatar, nome (ou e-mail) e papel. Ele abre o
   menu da conta (#menu-conta, mais abaixo) com Perfil, Ajuda, Tema e Sair. O prefixo .topo vence o `.topo button` legado. */
.topo .conta { margin-top: auto; padding: var(--esp-3) 0 0; border-top: 1px solid var(--fio); }
.topo .conta-btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 8px 10px;
  border: 0; border-radius: var(--r-controle); background: none; box-shadow: none; color: var(--tinta); font-size: var(--fs-13);
  text-align: left; cursor: pointer;
  transition: background-color var(--t-2) var(--ease-padrao), box-shadow var(--t-2) var(--ease-padrao);
}
.topo .conta-btn:hover, .topo .conta-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--tinta) 5%, transparent); border: 0; }
/* Na tela Perfil o botão leva o estilo de item ativo do menu, com o traço verde à esquerda. */
.topo .conta-btn[aria-current="true"] { background: var(--folha);
  box-shadow: 0 0 0 1px var(--fio), var(--sombra-item), inset 0 1px 0 var(--brilho-borda); }
.topo .conta-btn[aria-current="true"]::after {
  content: ""; position: absolute; left: -14px; top: 50%; width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 3px 3px 0; background: var(--marca);
}
/* Nome e papel numa linha cada; o e-mail comprido corta com reticências no pé e aparece inteiro no cabeçalho do menu. */
.topo .conta-btn :is(b, .quem) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .conta-btn .quem { margin: 0; font-size: var(--fs-12); line-height: 1.4; color: var(--tinta-2); }
/* A seta aponta para cima enquanto fechado (o menu abre acima do botão) e vira ao abrir. */
.topo .conta-seta { flex: none; width: 16px; height: 16px; margin-left: auto; background: currentColor; color: var(--tinta-2);
  transform: rotate(180deg); transition: transform var(--t-2) var(--ease-padrao);
  -webkit-mask: var(--i-abrir) center / 16px 16px no-repeat; mask: var(--i-abrir) center / 16px 16px no-repeat; }
.topo .conta-btn[aria-expanded="true"] .conta-seta { transform: none; }

/* Menu recolhível (20/10/2026): o botão fica no canto da marca; recolhido, o menu mostra só os ícones e o conteúdo
   ocupa a largura liberada. No celular o menu é a faixa do topo e o botão some. */
.topo .recolhe-menu {
  position: absolute; top: 34px; right: 10px; z-index: 1; display: inline-grid; place-items: center;
  width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--r-controle);
  background: none; box-shadow: none; color: var(--tinta-2); cursor: pointer;
  transition: background-color var(--t-2) var(--ease-padrao), color var(--t-2) var(--ease-padrao);
}
.topo .recolhe-menu:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 5%, transparent); border: 0; }
.topo .recolhe-menu .ico { --ico: var(--i-recolher); }
:root[data-menu="recolhido"] .topo .recolhe-menu .ico { --ico: var(--i-expandir); }
.avatar { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--marca) 18%, var(--folha)); color: var(--marca-esc); font-size: 13px; font-weight: 700; line-height: 1; }
.perfil-textos { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.perfil-textos b { color: var(--tinta); font-size: 13px; font-weight: 600; }
@media (min-width: 761px) {
  :root[data-menu="recolhido"] { --lateral-w: 68px; }
  :root[data-menu="recolhido"] .topo { padding: 18px 10px 14px; overflow-x: hidden; }
  :root[data-menu="recolhido"] .topo .recolhe-menu { position: static; align-self: center; width: 44px; height: 40px; margin: 0 0 18px; }
  :root[data-menu="recolhido"] .topo .marca { display: none; }
  :root[data-menu="recolhido"] .topo :is(.abas button, .lugar) { justify-content: center; gap: 0; padding: 11px 0; font-size: 0; }
  :root[data-menu="recolhido"] .topo .abas button[aria-current="true"]::after { left: -10px; }
  /* Recolhido, os títulos dos grupos somem (o nome do grupo segue no aria-labelledby) e uma linha fina separa um do outro. */
  :root[data-menu="recolhido"] .topo .abas .envelope { gap: var(--esp-3); }
  :root[data-menu="recolhido"] .topo .grupo-rot { display: none; }
  :root[data-menu="recolhido"] .topo .grupo:not(.oculto) ~ .grupo:not(.oculto) { padding-top: var(--esp-3); border-top: 1px solid var(--fio); }
  /* A conta vira o avatar sozinho, num alvo de 44 px; o nome acessível vem do aria-label que o app.js escreve. */
  :root[data-menu="recolhido"] .topo .conta-btn { justify-content: center; width: 44px; min-height: 44px; margin: 0 auto; padding: 6px 0; }
  :root[data-menu="recolhido"] .topo .conta-btn :is(.perfil-textos, .conta-seta) { display: none; }
  :root[data-menu="recolhido"] .topo .conta-btn[aria-current="true"]::after { left: -10px; }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .topo { transition: width var(--t-2) var(--ease-padrao), padding var(--t-2) var(--ease-padrao); }
  main.envelope, body[data-papel] main.envelope { transition: margin-left var(--t-2) var(--ease-padrao); }
}

/* ---------- Menu da conta (PRD «Navbar lateral nova», Cléo, 28/10/2026) ---------- */
/* Bloco no fim do `body`, fora do menu lateral e do `main`: nem o recolhimento do menu nem o redesenho das telas o tocam. O
   app.js escreve `left` e `top` em px (acima do botão, ao lado do avatar ou abaixo dele) e mostra e esconde pelo `hidden`.
   Mesma superfície do popover da mensalidade, na mesma camada (150): o painel do guia (180) passa por cima. */
.menu-conta { position: fixed; z-index: 150; width: 256px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto;
  padding: 6px; background: var(--folha); color: var(--tinta); border: 1px solid var(--fio); border-radius: 12px; box-shadow: var(--sombra-alta); }
/* Quem é a conta, inteiro: o botão do pé corta o e-mail comprido com reticências, aqui ele quebra. */
.mc-cab { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-bottom: 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--fio); }
.mc-cab b { font-size: var(--fs-14); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.mc-cab :is(.mc-email, .mc-escopo) { font-size: var(--fs-12); line-height: 1.4; color: var(--tinta-2); overflow-wrap: anywhere; }
.mc-itens { display: flex; flex-direction: column; gap: 2px; }
.mc-itens form { margin: 0; }
.menu-conta .mc-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0; padding: 8px 10px;
  border: 0; border-radius: var(--r-controle); background: none; box-shadow: none; color: var(--tinta);
  font-family: inherit; font-size: var(--fs-14); font-weight: 500; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-2) var(--ease-padrao);
}
.menu-conta .mc-item:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
/* O anel por dentro: o menu rola (`overflow`) e cortaria um anel por fora. */
.menu-conta .mc-item:focus-visible { outline-offset: -2px; }
.menu-conta .mc-item .ico { flex: none; width: 16px; height: 16px; background: var(--tinta-2);
  -webkit-mask: var(--ico) center / 16px 16px no-repeat; mask: var(--ico) center / 16px 16px no-repeat; }
.menu-conta [data-tela="perfil"] .ico { --ico: var(--i-usuario); }
.menu-conta .menu-ajuda .ico { --ico: var(--i-ajuda); }
.menu-conta #tema .ico { --ico: var(--i-tema); }
.menu-conta form .ico { --ico: var(--i-sair); }
/* O valor do tema (automático, escuro, claro) e a seta de «abre em nova aba» ficam à direita do rótulo. */
.menu-conta .valor { margin-left: auto; font-size: var(--fs-12); color: var(--tinta-2); }
.menu-conta .mc-externo { flex: none; width: 14px; height: 14px; margin-left: auto; background: var(--tinta-2);
  -webkit-mask: var(--i-externo) center / 14px 14px no-repeat; mask: var(--i-externo) center / 14px 14px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .menu-conta:not([hidden]) { animation: mc-entra var(--t-2) var(--ease-saida); }
  @keyframes mc-entra { from { opacity: 0; transform: translateY(4px); } }
}
@media (max-width: 760px) { .menu-conta .mc-item { min-height: 44px; } }

/* ---------- Perfil (20/10/2026) ---------- */
.perfil-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--painel-gap); align-items: start; max-width: 1040px; }
.perfil-grade > .cartao { margin: 0; }
.perfil-grade .corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 var(--painel-x) 20px; }
.perfil-grade .corpo p { margin: 0; max-width: 60ch; color: var(--tinta-2); }
.perfil-grade .corpo form { margin: 0; }
.perfil-grade a.secundario { text-decoration: none; }
.perfil-identidade { display: flex; align-items: center; gap: 14px; min-width: 0; }
.perfil-identidade b { display: block; font-size: 15px; font-weight: 650; }
.perfil-email { display: block; font-size: 14px; color: var(--tinta); overflow-wrap: anywhere; }
.avatar.avatar-grande { width: 48px; height: 48px; font-size: 19px; }
.perfil-dados { display: grid; gap: 12px; width: 100%; margin: 0; }
.perfil-dados > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--fio); }
.perfil-dados dt { color: var(--tinta-2); font-size: var(--fs-12); font-weight: 500; }
.perfil-dados dd { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.perfil-dados dd small, .perfil-guia small, .perfil-tema small { color: var(--tinta-2); }
.perfil-tema { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.perfil-tema legend { margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 600; }
.segmentos { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--fio); border-radius: var(--r-controle); background: var(--papel); }
.opcao-tema { position: relative; display: inline-flex; }
.opcao-tema input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao-tema span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px;
  color: var(--tinta-2); font-size: 13px; font-weight: 500; transition: background-color var(--t-2) var(--ease-padrao), color var(--t-2) var(--ease-padrao); }
.opcao-tema input:checked + span { color: var(--tinta); font-weight: 600; background: var(--folha); box-shadow: 0 0 0 1px var(--fio), var(--sombra-item); }
.opcao-tema input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.perfil-guia { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding-top: 14px; border-top: 1px solid var(--fio); }
.perfil-guia b { display: block; font-size: 13px; font-weight: 600; }
@media (max-width: 1050px) { .perfil-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .topo .recolhe-menu { display: none; }
  .perfil-grade .corpo :is(a.secundario, button.secundario), .opcao-tema span { min-height: 44px; }
  .perfil-guia { flex-direction: column; align-items: flex-start; }
  .perfil-dados > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- área principal ---------- */
main.envelope, body[data-papel] main.envelope { margin: 0 0 0 var(--lateral-w); max-width: 1700px; padding: 32px 36px 90px; min-width: 0; }
.pular-conteudo { z-index: 100; border: 1px solid var(--fio); border-radius: var(--r-controle); }

/* ---------- cabeçalho de página ---------- */
.titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.titulo h1 { margin: 6px 0 4px; font-size: var(--fs-h1); font-weight: 700; line-height: 1.12; letter-spacing: -.028em; }
/* A linha de contexto vem depois do título, como metadado, não como sobretítulo em caixa-alta acima dele. */
.olho { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.titulo .olho { margin: 2px 0 8px; }
/* Linha de leitura: até 72 caracteres no parágrafo de abertura e 80 no corpo dos cartões (EV-12: chegava a 131). */
.sub { margin: 6px 0 0; max-width: 72ch; font-size: var(--fs-14); color: var(--tinta-2); }
.migalha { margin-bottom: 18px; }
/* Ações e selos do título (ir ao acompanhamento, progresso, «só de consulta») ficam juntos, ao lado do h1. */
.titulo-acoes { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

/* ---------- painéis ---------- */
/* O guia não tem sombra e «Períodos, fontes e atualização» não é cartão: é uma linha que abre (UI-09). */
.quadro, .cartao, .guia { background: var(--folha); border: 1px solid var(--fio); border-radius: var(--r); }
.quadro, .cartao, .lateral > *, .lateral .resultado { box-shadow: var(--sombra); }
/* Um só espaço entre painéis vizinhos: antes eram 0, 12, 16, 18 ou 28 px conforme a tela (UI-01). O guia entra na
   mesma régua: os 18/24 px do app.css deixavam 18, 24 e 40 px entre os painéis do Panorama (B2, 20/10/2026). */
.quadro, .cartao, .guia, .fonte-detalhes { margin: 0 0 var(--painel-gap); }
/* Dentro de «Períodos, fontes e atualização», guia e aviso seguem o texto com 12 px, e o último não soma margem. */
.fonte-detalhes > :is(.guia, .aviso) { margin: var(--esp-3) 0 0; }
.fonte-detalhes > :last-child { margin-bottom: 0; }
.fonte-detalhes > p { max-width: 80ch; }
/* Na ficha, «Fontes e atualização» fica dentro do título: a margem do painel abria um vão antes das ações no celular. */
.titulo .fonte-detalhes { margin-bottom: 0; }
/* Aviso solto entre painéis tem o intervalo deles; era um style de 18 px no markup (B2). */
:is(#tela-panorama, #tela-metas-captacao) > .aviso { margin: 0 0 var(--painel-gap); }
.quadro > header, .cartao > header, .sanfona > summary { padding: 16px 20px; background: transparent; }
.quadro > header h2, .cartao > header h2, .sanfona > summary h2, .gestores-polo > h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.cartao .corpo { padding: 18px 20px; }
/* O corpo que desenha fundo, fio no topo ou lista com divisórias segue a largura do cartão, senão o traço para no meio
   (as «Regras do painel» e a lista de apoio paravam a 128 px da borda, C7, 20/10/2026). */
.cartao .corpo:not(.aviso, .acoes, .acomp-rodape, .corpo-fio, :has(> .gate, > .nota-regua, > .regra-painel, > .foco-lista)) { max-width: 80ch; }
/* Corpo com fio no topo e corpo de nota (13 px, tinta-2), no lugar dos estilos inline que serviam de seletor (C12). */
.corpo-fio { border-top: 1px solid var(--fio); }
.corpo-nota { font-size: var(--fs-13); color: var(--tinta-2); }
/* Nota curta sob um valor (como o vínculo foi definido, quem salvou e quando, estado da régua): Small em tinta-2 (B7). */
.texto-nota { font-size: var(--fs-12); line-height: 1.5; color: var(--tinta-2); }
td > .texto-nota { margin-top: var(--esp-1); }
.sanfona > summary { transition: background-color var(--t-2) var(--ease-padrao); }
.sanfona > summary:hover { background: color-mix(in srgb, var(--tinta) 3%, var(--folha)); }
.guia { color: var(--tinta); }
.guia > summary { padding: 14px var(--painel-x); font-weight: 600; }
/* Conteúdo solto do guia (texto, lista, campos) leva o respiro do corpo do cartão; os .passos já trazem o seu. */
.guia > .corpo { padding: 14px var(--painel-x) 18px; border-top: 1px solid var(--fio); }
.guia > .corpo > :first-child { margin-top: 0; }
.guia > .corpo > :last-child { margin-bottom: 0; }
/* Controles dos cartões de ferramenta: rótulo no estilo Label acima do campo (B10, 20/10/2026), botões pela base dele. */
.relatorio-controles { display: flex; flex-wrap: wrap; align-items: end; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-3); }
.relatorio-controles label { display: grid; gap: 7px; }
.relatorio-controles input { min-height: 38px; padding: 6px 10px; font-size: var(--fs-14); }
/* Réguas da ficha («Para consultar»): um cartão agrupado com divisórias, em vez de seis cartões soltos (UI-11). Sem
   overflow:hidden, para o contorno do .piscou continuar à vista; os cantos do primeiro e do último cortam o hover. */
.contexto { margin: 0 0 var(--painel-gap); background: var(--folha); border: 1px solid var(--fio); border-radius: var(--r); box-shadow: var(--sombra); }
.contexto > .cartao { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.contexto > .cartao + .cartao { border-top: 1px solid var(--fio); }
.contexto > .cartao:first-child { border-top-left-radius: calc(var(--r) - 1px); border-top-right-radius: calc(var(--r) - 1px); }
.contexto > .cartao:last-child { border-bottom-left-radius: calc(var(--r) - 1px); border-bottom-right-radius: calc(var(--r) - 1px); }
.grupo-rotulo { margin: var(--esp-6) 0 var(--esp-2); font-size: var(--fs-11); font-weight: 650; line-height: 1.45; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-2); }
.guia .passos, .guia .passo { background: var(--folha-2); }
/* Passo na régua (B7, 20/10/2026): o título do guia e os passos ficam no recuo do painel (eram 20 px fixos no título e
   15/18/17 px no passo), o título do passo em 14 px (13,5 no app.css) e o selo da unidade no raio de 6 px (era 5). */
.guia .passo { padding: var(--esp-4) var(--painel-x); }
.guia .passo b { font-size: var(--fs-14); }
.marca-unidade { border-radius: 6px; }
/* Verde a 14% opaco sobre a folha: o número de 11px dá 4,74:1 no claro e 6,2:1 no escuro (paleta.py). Transparente,
   sobre a folha-2 do guia, dava 4,18:1 no claro (AUDIT de 15/10). */
.guia .passo i, .etapa { background: color-mix(in srgb, var(--marca) 14%, var(--folha)); color: var(--marca-esc); font-family: var(--fonte-num); font-weight: 700; }
.etapa { border: 0; border-radius: 8px; }
.acomp-indicador, .acao-linha { border-radius: 12px; }
/* Sem faixa lateral grossa (app.css): o plano de ação já diz o estado pelo farol e pelo fundo, então a borda é de 1 px,
   tingida pelo estado; a fonte de referência do acompanhamento ganha a borda inteira, como o aviso. */
.acao-linha { border-width: 1px; }
.acao-linha.farol-verde { border-color: color-mix(in srgb, var(--teal-vivo) 40%, var(--fio)); }
.acao-linha.farol-amarelo { border-color: color-mix(in srgb, var(--lar-vivo) 40%, var(--fio)); }
.acao-linha.farol-vermelho { border-color: color-mix(in srgb, var(--bordo-vivo) 40%, var(--fio)); }
.acao-linha.farol-neutro { border-color: var(--fio); }
.acomp-origem { border: 1px solid color-mix(in srgb, var(--azul-vivo) 28%, var(--fio)); border-radius: 10px; }
.caixa-ajuda { border-radius: 12px; border-color: var(--fio); box-shadow: var(--sombra-alta); font-family: var(--fonte-texto); }
.rodape { margin-top: 34px; padding-top: 22px; color: var(--tinta-2); font-size: 12px; }
/* Documentos do painel (20/10/2026): linha própria abaixo das notas, links no verde de leitura. */
.rodape .rodape-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) 18px;
  margin-top: var(--esp-2); padding-top: 14px; border-top: 1px solid var(--fio); }
.rodape .rodape-legal a { color: var(--marca-esc); text-decoration: none; font-weight: 500; }
.rodape .rodape-legal a:hover, .rodape .rodape-legal a:focus-visible { text-decoration: underline; }
.rodape .rodape-legal span { margin-left: auto; }
@media (max-width: 760px) {
  .rodape .rodape-legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .rodape .rodape-legal span { margin-left: 0; flex-basis: 100%; }
}

/* ---------- cartões de indicador (KPI) ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0 28px; padding: 0;
  border: 0; border-radius: 0; background: none; overflow: visible; }
.kpis:has(> .kpi:nth-child(3):last-child), .kpis:has(> .kpi:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis:has(> .kpi:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis:has(> .kpi:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis:has(> .kpi:only-child) { grid-template-columns: minmax(0, 360px); }
/* Cartão neutro: o acento fica no glifo e na barra. Sob o mouse, um foco de luz da cor do acento segue o ponteiro
   pelo fundo e pela borda (magic card); --mx/--my vêm do fx.js e, sem eles, o foco fica fora do cartão. */
.kpis .kpi {
  --accent: var(--tinta-2); --accent-txt: var(--tinta-2); --pad: 20px;
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 156px; padding: var(--pad);
  border: 1px solid transparent; border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden;
  background:
    radial-gradient(280px circle at var(--mx, -400px) var(--my, -400px), color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%) padding-box,
    linear-gradient(var(--folha), var(--folha)) padding-box,
    radial-gradient(220px circle at var(--mx, -400px) var(--my, -400px), color-mix(in srgb, var(--accent) 60%, var(--fio)), var(--fio) 72%) border-box;
}
.kpis .kpi::before {
  content: "" / ""; order: -2; display: block; align-self: flex-start; width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 13%, var(--folha));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.kpis .kpi:not([data-kpi])::before { display: none; }
/* Rótulo que quebra em duas linhas descia o número 17 px em relação aos vizinhos: no cartão estreito, todo rótulo
   reserva duas linhas (UI-03). A ficha não soma margem ao título (UI-04). */
.kpis .kpi { container-type: inline-size; }
@container (max-width: 200px) { .kpis .kpi .k { min-height: 2lh; } }
.ficha .kpis { margin-top: 0; }
/* O símbolo do glifo é o ::before do rótulo, posto sobre o quadrado: assim o ::after do cartão segue livre para o
   espaçador que alinha as barras. */
.kpis .kpi[data-kpi] > .k::before {
  content: "" / ""; position: absolute; top: calc(var(--pad) + 8px); left: calc(var(--pad) + 8px); width: 18px; height: 18px;
  background: var(--accent-txt); -webkit-mask: var(--ico, var(--i-feito)) center / 18px 18px no-repeat; mask: var(--ico, var(--i-feito)) center / 18px 18px no-repeat;
}
.kpis .kpi .k { order: -1; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--tinta-2); }
.kpis .kpi .v { margin: 8px 0 4px; font-family: var(--fonte-titulo); font-size: 30px; font-weight: 650; line-height: 1.1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--tinta) !important; overflow-wrap: anywhere; }
.kpis .kpi .v .de-meta { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.kpis .kpi .d { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--tinta-2); }
.kpis .kpi .d.kpi-pct, .kpis .kpi .captacao-meta { margin-top: 0; font-weight: 500; }
/* A barra vai ao pé do cartão: o espaçador empurra todas para a mesma altura na linha. */
.kpis .kpi:has(> .kpi-barra, > .barra)::after { content: ""; display: block; order: 2; flex: 1 0 14px; }
.kpis .kpi > .kpi-barra, .kpis .kpi > .barra { order: 3; }
/* Trilho em fio, como os outros trilhos: em folha-2 dava 1,10:1 no escuro (UI-21). */
.kpi-barra { position: relative; height: 6px; border-radius: 99px; background: var(--fio); overflow: hidden; }
.kpi-barra i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transform-origin: left center; }
.kpi-barra.cheia i { background: var(--teal-vivo); }
.kpis .kpi .barra { min-width: 0; }
/* «previsto 3,8%» não cabe na coluna de 44 px e quebrava em duas linhas, desalinhado do realizado: a coluna do valor
   cresce até o maior dos dois, e os dois trilhos seguem com o mesmo comprimento. */
.barra.dupla { grid-template-columns: minmax(0, 1fr) auto; }
.barra.dupla .val { width: auto; min-width: 44px; white-space: nowrap; }
.kpis .kpi .barra .trilho:not(.previsto) { height: 6px; border-radius: 99px; background: var(--fio); }
.kpis .kpi .barra .trilho:not(.previsto) i { border-radius: 99px; }

/* Acento por indicador: azul captação, roxo rematrícula, laranja evasão, verde o que está feito. */
.kpi[data-kpi="captacao"] { --accent: var(--azul-vivo); --accent-txt: var(--azul); --ico: var(--i-captacao); }
.kpi[data-kpi="rematricula"] { --accent: var(--roxo-vivo); --accent-txt: var(--roxo); --ico: var(--i-rematricula); }
.kpi[data-kpi="evasao"] { --accent: var(--lar-vivo); --accent-txt: var(--laranja); --ico: var(--i-evasao); }
.kpi:is([data-kpi="fichas"], [data-kpi="firmes"], [data-kpi="gestores"]) { --accent: var(--marca); --accent-txt: var(--marca-esc); --ico: var(--i-feito); }
.kpi[data-kpi="base"] { --ico: var(--i-base); }
.kpi[data-kpi="coordenadores"] { --ico: var(--i-pessoas); }
.kpi[data-kpi="ofertas"] { --ico: var(--i-ofertas); }
.kpi[data-kpi="meta"] { --ico: var(--i-metas); }
.kpi[data-kpi="transferencias"] { --ico: var(--i-transferencias); }
.kpi[data-kpi="carteiras"] { --ico: var(--i-vinculos); }
.kpi[data-kpi="nomeadas"] { --ico: var(--i-liga); }
.kpi[data-kpi="trocas"] { --ico: var(--i-trocas); }

/* ---------- botões ---------- */
button.primario, a.primario {
  background: var(--marca); color: var(--tinta-primario); border: 1px solid color-mix(in srgb, var(--marca) 82%, var(--grafite-900));
  border-radius: var(--r-controle); padding: 9px 15px; font-size: 14px; font-weight: 650;
  box-shadow: var(--sombra-primario);
  background-image: linear-gradient(110deg, transparent 38%, var(--reflexo) 50%, transparent 62%);
  background-size: 250% 100%; background-position: 130% 0; background-repeat: no-repeat;
  transition: background-color var(--t-2) var(--ease-padrao), transform var(--t-1) var(--ease-padrao), box-shadow var(--t-2) var(--ease-padrao);
}
/* Brilho que atravessa o botão principal uma vez no hover (shimmer, sem laço). */
button.primario:hover:not(:disabled), a.primario:hover, .entrada button.primario:hover {
  background-color: color-mix(in srgb, var(--marca) 90%, #ffffff); background-position: -30% 0;
  transition: background-color var(--t-2) var(--ease-padrao), background-position .7s var(--ease-saida), transform var(--t-1) var(--ease-padrao);
}
button.secundario, a.secundario, .migalha button.voltar {
  background: var(--folha); color: var(--tinta); border: 1px solid var(--fio-2); border-radius: var(--r-controle);
  padding: 8px 14px; font-size: 13px; font-weight: 500; box-shadow: var(--sombra-item);
  transition: background-color var(--t-2) var(--ease-padrao), border-color var(--t-2) var(--ease-padrao), transform var(--t-1) var(--ease-padrao);
}
button.secundario:hover, a.secundario:hover, .migalha button.voltar:hover {
  border-color: var(--fio-forte); color: var(--tinta); background: color-mix(in srgb, var(--tinta) 3%, var(--folha));
}
/* Navegação entre fichas acima do h1: sem borda nem sombra, para não competir com as ações da ficha. */
.migalha button.voltar, .migalha button.voltar:hover { border-color: transparent; box-shadow: none; }
:is(button.primario, button.secundario, a.primario, a.secundario, .migalha button.voltar, button.op, button.op-div):active:not(:disabled) { transform: scale(.98); }
button.secundario.perigo { color: var(--bordo); border-color: var(--fio-2); }
button.secundario.perigo:hover { color: var(--bordo); border-color: var(--bordo-vivo); background: var(--bordo-fraco); }
/* Ações que apagam ou derrubam acesso vestem a «ação crítica», sem mudar classe nem handler. */
button.op-div:is([data-polo-revoga], [data-tira-outro]), button.secundario[data-remove-evidencia] { color: var(--bordo); }
button.op-div:is([data-polo-revoga], [data-tira-outro]):hover:not(:disabled),
button.secundario[data-remove-evidencia]:hover:not(:disabled) { color: var(--bordo); border-color: var(--bordo-vivo); background: var(--bordo-fraco); }
.acoes button.secundario[aria-current="true"], button.op.sel {
  background: var(--marca-fundo); color: var(--marca-esc);
  border-color: color-mix(in srgb, var(--marca) 50%, var(--fio)); font-weight: 650;
}
:is(button.primario, button.secundario):disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.op, button.op-div { background: var(--campo); color: var(--tinta-2); border-color: var(--fio-forte); border-radius: var(--r-controle);
  transition: border-color var(--t-2) var(--ease-padrao), color var(--t-2) var(--ease-padrao), transform var(--t-1) var(--ease-padrao); }
button.op:hover, button.op-div:hover { border-color: var(--tinta-2); color: var(--tinta); }
/* Tudo o que abre uma explicação fala no mesmo tom: o verde de leitura, sublinhado ao passar o ponteiro. */
button.link-regua, .barras-curso summary, .explicacao-completa summary, .res-regua > summary,
:is(.vinc-alterar, .polo-designar) > summary { color: var(--marca-esc); }
:is(button.link-regua, .barras-curso summary, .explicacao-completa summary, .res-regua > summary, .vinc-alterar > summary, .polo-designar > summary):hover {
  color: var(--marca-esc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Dentro de uma frase (o «Ver reservados» do «Como usar» do polo), o link segue o corpo do texto: a margem e os 11,5 px
   do botão de régua abriam um vão de ~20 px entre as linhas no celular. */
.como-usar button.link-regua { display: inline; min-height: 0; margin: 0; padding: 0; font: inherit; line-height: inherit; vertical-align: baseline; }
/* «?» que saem do título da seção ficam com o próprio rótulo, lado a lado e afastados o bastante para os alvos não se
   cobrirem no celular. */
.ajudas-secao { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-6); }
.secao-desc { flex: 1 1 100%; max-width: 72ch; margin: 0 0 var(--esp-3); font-size: var(--fs-13); line-height: 1.5; color: var(--tinta-2); }
.ajudas-secao > .secao-desc { margin: 0; }
.ajudas-secao .ajuda-item { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--fs-13); color: var(--tinta-2); }
/* «Alterar» do vínculo confirmado e «Designar outro gestor» do polo: link discreto que abre os controles. */
:is(.vinc-alterar, .polo-designar) > summary { width: fit-content; font-size: var(--fs-13); font-weight: 500; }
:is(.vinc-alterar, .polo-designar)[open] > summary { margin-bottom: var(--esp-2); }
.sem-meta { display: block; font-size: var(--fs-12); color: var(--tinta-2); }

/* ---------- setas e marcadores em máscara (sem glifo Unicode no texto) ---------- */
.migalha :is(#voltar, #ant)::before, button[data-volta-indicador]::before, a.volta-filtros::before, a.vai-resumo::before,
.migalha #pos::after, .celula-polo > footer a[data-ver-polo]::after {
  content: ""; display: inline-block; flex: none; width: 1.05em; height: 1.05em; vertical-align: -.17em; background: currentColor;
  -webkit-mask: var(--i-seta) center / contain no-repeat; mask: var(--i-seta) center / contain no-repeat; }
.migalha :is(#voltar, #ant)::before, button[data-volta-indicador]::before { margin-right: .4em; transform: rotate(180deg); }
a.volta-filtros::before { margin-right: .4em; transform: rotate(-90deg); }
/* «Voltar aos filtros» ao pé da lista de Metas encostava na borda do quadro (UI-01). */
a.volta-filtros { display: inline-flex; align-items: center; min-height: 36px; margin: var(--esp-2) var(--painel-x) var(--esp-3);
  font-size: var(--fs-13); color: var(--marca-esc); }
/* «Ver resumo por modalidade» é o par de ida do «Voltar aos filtros»: o mesmo link, com a seta para baixo. */
a.vai-resumo { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-13); color: var(--marca-esc); text-decoration: none; }
a.vai-resumo::before { margin-right: .4em; transform: rotate(90deg); }
:is(a.volta-filtros, a.vai-resumo, a.link-texto):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* «Ver resumo por modalidade» e «Comparar anos» andam juntos, numa linha própria depois dos filtros (D12, 20/10/2026). */
.filtros-meta .links-metas { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 var(--esp-4); }
/* Link no meio de uma frase («Metas de captação › Por polo», nos Polos): verde de leitura, sublinhado só ao passar; o
   a{color:inherit} do app.css o deixava cinza e sublinhado (B11, 20/10/2026). */
a.link-texto { color: var(--marca-esc); text-decoration: none; }
.migalha #pos::after, .celula-polo > footer a[data-ver-polo]::after { margin-left: .4em; }
/* A linha que abre (ação do plano, indicador do acompanhamento) e a seção recolhível (sanfona, guia) usam a divisa à
   direita, que gira ao abrir; o «mostrar/ocultar» escrito e o «+ −» saíram (UI-08). */
.acao-expansivel > summary::after, .acomp-indicador > summary::after, .sanfona > summary::after, .guia > summary::after,
.bloco-filtros > summary::after {
  content: ""; width: 16px; height: 16px; font-size: 0; background: var(--tinta-2);
  -webkit-mask: var(--i-abrir) center / contain no-repeat; mask: var(--i-abrir) center / contain no-repeat; }
.acao-expansivel[open] > summary::after, .acomp-indicador[open] > summary::after,
.sanfona[open] > summary::after, .guia[open] > summary::after, .bloco-filtros[open] > summary::after { transform: rotate(180deg); }
/* O que abre uma explicação curta leva a divisa antes do texto, deitada quando fechado; o triângulo nativo saiu. */
:is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-indicador, .polo-composicao, .carteira-cursos, .historico-anual, .fonte-anual, .fase-grupo) > summary {
  display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
:is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-indicador, .polo-composicao, .carteira-cursos, .historico-anual, .fonte-anual, .fase-grupo) > summary::-webkit-details-marker { display: none; }
:is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-indicador, .polo-composicao, .carteira-cursos, .historico-anual, .fonte-anual, .fase-grupo) > summary::before {
  content: ""; flex: none; width: 1.2em; height: 1.2em; background: currentColor; transform: rotate(-90deg);
  -webkit-mask: var(--i-abrir) center / contain no-repeat; mask: var(--i-abrir) center / contain no-repeat; }
:is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-indicador, .polo-composicao, .carteira-cursos, .historico-anual, .fonte-anual, .fase-grupo)[open] > summary::before { transform: none; }
/* Todo recolhível que abre explicação fala igual, 13 px 500 no verde de leitura e sublinhado ao passar: eram 11, 12, 12,5
   e 14 px em três cores (D9, 20/10/2026). A fonte do indicador conserva a cor, que diz se há fonte automática (teal) ou
   não (laranja); o «Histórico por ano», que é seção, conserva o título próprio. */
:is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-indicador, .fonte-anual, .polo-composicao, .carteira-cursos) > summary {
  font-size: var(--fs-13); font-weight: 500; }
:is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-anual, .polo-composicao, .carteira-cursos) > summary {
  color: var(--marca-esc); }
:is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-indicador, .fonte-anual, .polo-composicao, .carteira-cursos) > summary:hover {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* «Composição da captação» é a linha que abre do cartão: recuo do painel, não os 18 px do design.css. */
.faixa-captacao > summary { padding: var(--esp-3) var(--painel-x); }
/* «Como interpretar» a 4 px de um campo: a altura mínima de 24 px mantém o alvo separado (EV-17). */
.explicacao-completa > summary { min-height: 24px; }
/* Ordenação: «meta» leva a divisa dupla; a coluna ordenada mostra a divisa no sentido da ordem, no lugar dos triângulos. */
.ord-meta::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--i-ordenar) center / contain no-repeat; mask: var(--i-ordenar) center / contain no-repeat; }
thead th.ord:is([aria-sort="ascending"], [aria-sort="descending"])::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; background: var(--marca-esc);
  -webkit-mask: var(--i-abrir) center / contain no-repeat; mask: var(--i-abrir) center / contain no-repeat; }
thead th.ord[aria-sort="ascending"]::after { transform: rotate(180deg); }
/* Sub-linha de oferta recua no lugar da seta. No celular cada linha vira cartão com fundo próprio e o recuo zera, para o
   rótulo da célula alinhar com os demais (C8, 20/10/2026; substitui «o recuo continua» no celular). */
.recuo { padding-left: 32px; }
.salvo::before, .erro-salvar::before {
  content: ""; display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; background: currentColor;
  -webkit-mask: var(--i-feito) center / contain no-repeat; mask: var(--i-feito) center / contain no-repeat; }
.erro-salvar::before { margin-right: 6px; -webkit-mask-image: var(--i-alerta); mask-image: var(--i-alerta); }
.mes-botao[aria-pressed="true"] { border-color: color-mix(in srgb, var(--marca) 50%, var(--fio)); }

/* ---------- campos ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea {
  background-color: var(--campo); color: var(--tinta); border: 1px solid var(--fio-forte); border-radius: var(--r-controle);
  transition: border-color var(--t-2) var(--ease-padrao), box-shadow var(--t-2) var(--ease-padrao);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):hover:not(:disabled):not([readonly]),
select:hover:not(:disabled), textarea:hover:not(:disabled):not([readonly]) { border-color: var(--tinta-2); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 24%, transparent);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):is(:disabled, [readonly]),
select:disabled, textarea:is(:disabled, [readonly]) { border-color: var(--fio); background-color: var(--folha-2); }
input::placeholder, textarea::placeholder { color: var(--tinta-2); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); }
/* O «x» nativo da busca era azul do navegador: vira o ícone de fechar na cor do texto secundário (UI-20). */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-left: 6px; cursor: pointer; background: var(--tinta-2);
  -webkit-mask: var(--i-fechar) center / contain no-repeat; mask: var(--i-fechar) center / contain no-repeat; }
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--tinta); }
#limpa-busca { margin-left: var(--esp-2); }
/* Rótulo de campo no estilo Label; os do gestor de polo, do «Ordenar por» e dos cartões de ferramenta estavam em 12 e
   13 px (B10, 20/10/2026). */
.filtros-meta label, .periodo-polos, .entrada label, .acomp-edit > span,
.polo-form > label, .polo-unidades > legend, .ordem-mobile label, details[data-funcional] label {
  font-size: var(--fs-11); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2);
}
/* Quem só consulta lê o valor como texto, não como campo travado: sem borda, fundo nem seta (UX-10). O campo que o
   coordenador edita no acompanhamento continua com cara de campo; os dois :not vencem a regra de campo travado acima. */
body:is([data-escrita="nao"], [data-escrita="acomp"]) :is(.acomp-edit, table.matriz) :is(input, textarea, select):is(:disabled, [readonly]):not([type="checkbox"]):not([type="radio"]) {
  border-color: transparent; background: transparent; padding-inline: 0; color: var(--tinta); -webkit-text-fill-color: var(--tinta);
  opacity: 1; resize: none; -webkit-appearance: none; appearance: none; padding-block: 0; min-height: 0; height: auto; }
/* Sem valor, quem consulta lê o «—» do placeholder em tinta-2, como as outras ausências, nunca como valor. */
body:is([data-escrita="nao"], [data-escrita="acomp"]) :is(.acomp-edit, table.matriz) :is(input, textarea):is(:disabled, [readonly])::placeholder {
  color: var(--tinta-2); -webkit-text-fill-color: var(--tinta-2); opacity: 1; }
.filtros-meta label { gap: 7px; }
.filtros-meta select, .periodo-polos select { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* O campo herda a fonte do rótulo (font: inherit, no app.css): volta ao corpo do controle. */
.polo-form > label > input, .ordem-mobile label select, details[data-funcional] label :is(input, select) {
  text-transform: none; letter-spacing: 0; font-weight: 400; }
.ordem-mobile label select, details[data-funcional] label select { font-size: var(--fs-13); }

/* ---------- selos (badge) ---------- */
.chip { gap: 6px; padding: 3px 9px; border-radius: 100px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  font-size: 11px; font-weight: 650; line-height: 1.25; box-shadow: none; }
.chip.ok { color: var(--teal); background: color-mix(in srgb, var(--teal-vivo) 10%, var(--folha)); }
.chip.aten { color: var(--laranja); background: color-mix(in srgb, var(--lar-vivo) 10%, var(--folha)); }
.chip.crit { color: var(--bordo); background: color-mix(in srgb, var(--bordo-vivo) 10%, var(--folha)); }
.chip.info { color: var(--azul); background: color-mix(in srgb, var(--azul-vivo) 10%, var(--folha)); }
.chip.mudo { color: var(--tinta-2); background: var(--folha-2); border-color: var(--fio-2); }

/* ---------- alerta ---------- */
.aviso { border: 1px solid color-mix(in srgb, var(--lar-vivo) 30%, var(--fio)); border-radius: 12px; padding: 14px 16px;
  background: color-mix(in srgb, var(--lar-vivo) 6%, var(--folha)); color: var(--tinta); font-size: 13px; }
.aviso b { color: var(--laranja); }
.erro-salvar, .entrada .erro { border-radius: 12px; border-color: color-mix(in srgb, var(--bordo-vivo) 40%, var(--fio)); }
/* A caixa de mensagem da entrada também confirma (troca de senha aceita) e aparecia em bordô, com cara de falha (D2,
   20/10/2026). O par é o do selo ok, já medido no paleta.py (teal sobre teal-fraco), com a borda do vivo a 40%. */
.entrada .erro.sucesso { color: var(--teal); background: var(--teal-fraco); border-color: color-mix(in srgb, var(--teal-vivo) 40%, var(--fio)); }

/* ---------- tabela ---------- */
thead th, .tabela-meses thead th, .tabela-reservados th { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-2); background: var(--folha-2); }
/* Cabeçalho de linha (polo no «Mês a mês», fase, indicador do Resultado) no tamanho da célula: o th de 11 px vazava. Lê
   como a célula, à esquerda e sem a faixa cinza do cabeçalho de coluna, que o design.css dá a todo th (A4, D4, 20/10/2026). */
:is(tbody, tfoot) th { font-size: var(--fs-13); font-weight: 600; letter-spacing: 0; text-transform: none; text-align: left;
  color: var(--tinta); background: none; }
/* E com o respiro e o fio das células vizinhas: o app.css só dá os dois ao td, e o fio da linha parava na 1ª coluna das
   tabelas com cabeçalho de linha (20/10/2026; generaliza a regra que só a tabela da gestão da Legends tinha). No celular
   a leitura em cartão (.leitura-mobile) zera os dois, como no td. */
tbody th { padding: 10px 12px; border-bottom: 1px solid var(--fio); }
tbody tr:last-child th { border-bottom: 0; }
/* Legenda visível da tabela: linha de contexto à esquerda, no recuo do painel (a do leitor de tela segue .sr-only). */
caption { caption-side: top; padding: var(--esp-3) var(--painel-x); text-align: left; font-size: var(--fs-13); color: var(--tinta-2); }
/* 319 nomes de curso em negrito pesavam a lista de Metas (UI-22). */
.metas-referencia tbody td > b { font-weight: 500; }
tbody tr { transition: background-color var(--t-1) var(--ease-padrao); }
tbody tr:hover { background: color-mix(in srgb, var(--tinta) 3%, var(--folha)); }
tbody tr.clicavel:hover td { background: color-mix(in srgb, var(--marca) 6%, var(--folha)); }
td.num, th.num, .valor-barra, .barra .val { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }

/* ---------- abas ---------- */
.abas-cursos, .acomp-abas { gap: 6px; border-bottom: 1px solid var(--fio); }
.abas-cursos button, .acomp-abas button { color: var(--tinta-2); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  transition: color var(--t-2) var(--ease-padrao), border-color var(--t-2) var(--ease-padrao); }
.abas-cursos button:hover, .acomp-abas button:hover { color: var(--tinta); }
.abas-cursos button[aria-selected="true"], .acomp-abas button[aria-selected="true"] { color: var(--marca-esc); border-bottom-color: var(--marca); font-weight: 650; }
.abas-metas { border-bottom: 1px solid var(--fio); }

/* ---------- barras de progresso ---------- */
.barra .trilho, .trilho-meta, .progresso .trilho { background: var(--fio); border-radius: 99px; }
.barra .trilho i, .trilho-meta i, .trilho-meta .preenche, .progresso .trilho i { border-radius: 99px; transform-origin: left center; }
.trilho-meta { height: 10px; }
.trilho-meta i, .progresso .trilho i, .legenda-res i.cur, .mini-trilho i { background: var(--azul-vivo); }
.trilho-meta i.cheia, .mini-trilho i.cheia { background: var(--teal-vivo); }
.trilho-meta .preenche { --cor: var(--azul-vivo); }
.trilho-meta .preenche.cheia { --cor: var(--teal-vivo); }
.trilho-meta .preenche i { border-radius: 0; }
.trilho-meta .preenche i.res, .legenda-res i.res { background: repeating-linear-gradient(125deg, var(--cor, var(--azul-vivo)) 0 5px, var(--listra) 5px 8px); }
.trilho-meta .marca-100 { background: var(--tinta); }
.mini-trilho { border-radius: 99px; background: var(--fio); }
.mini-trilho i { transform-origin: left center; }
.barra .trilho.previsto i, .trilho-meta.previsto i, .legenda-res i.prev { background: var(--tinta-2); }
/* Meta batida: a barra cheia ganha um halo verde discreto; o brilho atravessa uma vez quando ela aparece. */
.kpi-barra.cheia, .trilho-meta:has(> .cheia, > .preenche.cheia) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 22%, transparent); }
.kpi-barra.cheia::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--reflexo-forte) 50%, transparent 70%) no-repeat;
  background-size: 60% 100%; background-position: -80% 0; opacity: 0; }

/* ---------- carregando (esqueleto) ---------- */
.carregando { display: grid; gap: 14px; padding-top: 6px; }
.esqueleto { display: block; height: 16px; border-radius: 6px;
  background: linear-gradient(90deg, var(--folha-2) 0%, var(--folha-3) 45%, var(--folha-2) 90%);
  background-size: 220% 100%; animation: esqueleto 1.6s var(--ease-padrao) infinite; }
.esqueleto.e-olho { width: 220px; height: 11px; }
.esqueleto.e-titulo { width: min(420px, 70%); height: 38px; border-radius: 8px; }
.esqueleto.e-linha { width: min(640px, 90%); }
.esqueleto-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 14px 0; }
.esqueleto.e-kpi { height: 156px; border-radius: var(--r); }
.esqueleto.e-tabela { height: 320px; border-radius: var(--r); }
@keyframes esqueleto { from { background-position: 110% 0; } to { background-position: -110% 0; } }

/* ---------- ficha: cartão Resultado gruda abaixo do topo da janela ---------- */
.lateral { top: 24px; }
@media (min-width: 981px) { .lateral > .cartao { max-height: calc(100vh - 48px); overflow-y: auto; } }
.acompanhamento { scroll-margin-top: 24px; }
/* O rodapé do acompanhamento («salvo em…», «cada campo salva sozinho») fica à vista enquanto se preenche (UX-12). O
   cartão corta com overflow:clip, que não cria rolagem e deixa o sticky valer (app.css). */
.cartao.acompanhamento .acomp-rodape { position: sticky; bottom: 0; z-index: 1; padding: var(--esp-3) var(--painel-x); background: var(--folha); }
/* No celular o rodapé vira coluna de três frases e, preso, cobria os campos enquanto a pessoa rolava: segue no fluxo. */
@media (max-width: 760px) { .cartao.acompanhamento .acomp-rodape { position: static; } }
/* Quem só consulta não grava: o rodapé preso só repetia texto fixo sobre o conteúdo. */
body[data-escrita="nao"] .cartao.acompanhamento .acomp-rodape { position: static; }
/* Com o rodapé preso, o Tab rolava o campo até a borda de baixo, por trás dele (WCAG 2.4.11): o campo para acima. */
.cartao.acompanhamento :is(input, textarea, select, summary, button) { scroll-margin-bottom: 88px; }
/* Lista de metas e ações no recuo do painel, como o rodapé e o cabeçalho: os 18 px (12 no celular) do app.css deixavam
   o conteúdo 2 a 4 px fora da coluna do título (C10, 20/10/2026). */
.acomp-lista-metas, .acomp-acoes { padding: var(--esp-4) var(--painel-x); }
/* O fio forte acima da «Soma» cobre a linha inteira: a última parcela não traz o fio claro por baixo dele. */
.res-tabela tbody tr:last-child > * { border-bottom: 0; }
/* «ver o que cada nota exige» quebrava centralizado sob «Regra da meta», alinhada à esquerda. Sublinhado só ao passar
   o ponteiro e em 13 px, como os outros links de explicação e o «Regra da meta» acima dele (o app.css fixava 11,5 px
   sublinhados; C9 e D9, 20/10/2026). */
button.link-regua { text-align: left; font-size: var(--fs-13); text-decoration: none; }
/* Tamanhos fora da escala no rodapé do acompanhamento, na régua das qualitativas e no nome da Meta Estrela (C9). */
.acomp-rodape, .nota-prazo { font-size: var(--fs-12); }
.nota-cab b, .indic b { font-size: var(--fs-13); }
/* «N de 100 com resultado» sem quebra alargava a coluna e espremia a do coordenador no computador, e no celular
   empurrava o cartão 56 px além do quadro com o espaçamento de texto da WCAG 1.4.12. */
td.aval small { white-space: normal; }
/* A frase do papel fica colada ao título da seção, antes do que se recolhe. */
.corpo.papel-secao { padding-block: var(--esp-3) var(--esp-2); }
.corpo.papel-secao > p { margin: 0; }
.res-num, .res-vazio { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
/* O número do polo segue a Metric (650), como o valor do indicador; o <b> dentro dele herdaria «bolder» (900) (D6, 20/10/2026). */
.celula-polo .polo-num, .celula-polo .polo-num b { font-weight: 650; letter-spacing: -.025em; }

/* ---------- entrada, convite e troca de senha ---------- */
/* Fundo de pontos que some para as bordas (dot pattern) atrás da caixa; a caixa recebe um feixe que percorre a
   borda uma vez ao abrir (border beam). */
.entrada { background-color: var(--papel);
  background-image: radial-gradient(circle at 1px 1px, var(--pontos) 1px, transparent 1.3px);
  background-size: 18px 18px; background-attachment: fixed; }
.entrada::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, var(--papel) 78%); }
.entrada .caixa { position: relative; z-index: 1; max-width: 440px; border: 1px solid var(--fio); border-radius: 18px; background: var(--folha); box-shadow: var(--sombra-alta); }
.entrada .caixa .cabeca { padding: 34px 34px 0; background: none; color: var(--tinta); border: 0; }
.entrada .caixa .cabeca img { width: 146px; height: auto; margin: 0 0 26px; }
.entrada .caixa .cabeca h1 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; color: var(--tinta); }
.entrada .caixa .cabeca p { color: var(--tinta-2); }
.entrada .caixa form { padding: 24px 34px 28px; gap: 16px; }
.entrada label { gap: 7px; }
.entrada input { min-height: 44px; padding: 11px 12px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; }
.entrada button.primario { min-height: 44px; margin-top: 4px; }
.entrada .pe { padding: 0 34px 28px; color: var(--tinta-2); font-size: 13px; }
.entrada .pe a { color: var(--marca-esc); font-weight: 600; }
.entrada .caixa > .erro { margin: 24px 34px 0; }

/* ---------- harmonização com app.css e design.css (achados do mapa de 15/10) ---------- */
/* Foco: o app.css pinta de azul o foco de summary, «?» de ajuda e campos da régua; o sistema usa um foco só. */
summary:focus-visible, .ajuda:focus-visible, th.ord:focus-visible { outline: 2px solid var(--foco); outline-offset: -3px; }
textarea.regua-entrega:focus, input.regua-prazo:focus { outline: none; }
.cartao.piscou, .sanfona.piscou { outline: 2px solid var(--marca); outline-offset: 3px; }
/* O app.css clareia o primário com filtro em todo tema que não seja o claro escolhido; o hover agora é de cor. */
:root:not(#fx) :is(button.primario, a.primario):hover { filter: none; }

/* ---------- efeitos (fx.js) ---------- */
/* Contador: o número real fica no DOM, transparente; o que sobe é o ::before com data-conta. */
.kpis .kpi .v.fx-conta { position: relative; color: transparent !important; }
.kpis .kpi .v.fx-conta::before { content: attr(data-conta); position: absolute; left: 0; top: 0; color: var(--tinta); white-space: nowrap; }
.fx-confete { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }
.fx-anuncio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Feixe que percorre a borda uma vez quando a meta é batida (border beam). */
.kpis .kpi > .fx-feixe, .entrada .caixa > .fx-feixe { position: absolute; inset: -1px; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.kpis .kpi > .fx-feixe::after, .entrada .caixa > .fx-feixe::after {
  content: ""; position: absolute; width: 110px; aspect-ratio: 1; opacity: 0;
  background: linear-gradient(to left, var(--marca), color-mix(in srgb, var(--marca) 45%, transparent) 40%, transparent);
  offset-path: rect(0 auto auto 0 round var(--r)); offset-anchor: 90% 50%;
}
.entrada .caixa > .fx-feixe::after { offset-path: rect(0 auto auto 0 round 18px); }

@media (prefers-reduced-motion: no-preference) {
  /* A entrada da tela (blur fade), o crescimento das barras e o contador são do fx.js (Web Animations), porque o
     vai() do painel força o layout antes de qualquer transição de CSS ter chance de começar. Aqui ficam os laços
     curtos que nascem de uma classe: brilho na barra cheia, feixe na borda e o recorte da troca de tema. */
  .fx-entrada .kpi-barra.cheia::after, .kpi.fx-comemorado .kpi-barra.cheia::after { animation: fx-brilho 1.1s var(--ease-saida) .75s 1 both; }
  .kpis .kpi > .fx-feixe::after { animation: fx-feixe 2.2s var(--ease-saida) 1 both; }
  .entrada .caixa > .fx-feixe::after { animation: fx-feixe 2.8s var(--ease-saida) .35s 1 both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  /* A divisa gira ao abrir; com movimento reduzido só troca de posição (o «*» do app.css não alcança ::before e ::after). */
  :is(.acao-expansivel, .acomp-indicador, .sanfona, .guia) > summary::after,
  :is(.fonte-detalhes, .explicacao-completa, .barras-curso, .res-regua, .divisao, .vinc-alterar, .polo-designar, .foco-mensal, .foco-relatorios, .fonte-indicador, .polo-composicao, .carteira-cursos, .historico-anual, .fonte-anual, .fase-grupo) > summary::before {
    transition: transform var(--t-2) var(--ease-padrao); }
}
@keyframes fx-brilho { 0% { opacity: 1; background-position: -80% 0; } 100% { opacity: 1; background-position: 220% 0; } }
@keyframes fx-feixe { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---------- responsivo (quebras: 1280, 1100, 1050 e 760 px) ---------- */
@media (max-width: 1280px) {
  .kpis:has(> .kpi:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  main.envelope, body[data-papel] main.envelope { padding: 26px 24px 80px; }
}
@media (max-width: 1050px) {
  .kpis, .kpis:has(> .kpi:nth-child(3):last-child), .kpis:has(> .kpi:nth-child(5):last-child), .kpis:has(> .kpi:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Recuo de tabelas e blocos igual ao título do painel (20 px); no celular a tabela vira cartões e fica como está (UI-05). */
@media (min-width: 761px) {
  table:not(.res-tabela, .tabela-fases) :is(th, td):first-child:not(.recuo) { padding-left: var(--painel-x); }
  table:not(.res-tabela, .tabela-fases) :is(th, td):last-child { padding-right: var(--painel-x); }
  table.matriz tr.grupo td, tr.oferta-grupo td { padding: var(--esp-2) var(--painel-x); }
  .faixa-captacao .corpo-barras, .barras-meta .corpo-barras,
  .reservados-contato .nota-lgpd, .faixa-transferencias .corpo-transf, .faixa-pendentes .corpo-transf { padding-inline: var(--painel-x); }
  /* Tabela mais larga que o painel rola com sombra na borda que continua, como as abas do celular: «Regime» saía
     cortado nos cursos da ficha sem aviso de rolagem (C5, 20/10/2026). O bloco tingido e o gráfico ficam sem fundo. */
  .rolagem {
    --fundo-rolagem: var(--folha);
    background:
      linear-gradient(to right, var(--fundo-rolagem) 30%, transparent) left center / 32px 100% no-repeat local,
      linear-gradient(to left, var(--fundo-rolagem) 30%, transparent) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--sombra-rolagem), transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--sombra-rolagem), transparent) right center / 12px 100% no-repeat scroll,
      var(--fundo-rolagem);
  }
  .acomp-indicador .rolagem, .grafico-anual-rolagem { background: none; }
  #cursos-resumo :is(th, td):first-child { min-width: 180px; }
  /* Barras do percentual da meta numa grade só: a coluna do valor crescia por linha e a marca de 100% desalinhava 7 px
     entre linhas (D8, 20/10/2026). O «Por curso» ocupa a largura toda e segue com a grade própria. */
  .barras-meta .corpo-barras { grid-template-columns: minmax(120px, 220px) 1fr max-content; }
  .barras-meta .corpo-barras > .linha-barra { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .barras-meta .corpo-barras > :not(.linha-barra) { grid-column: 1 / -1; }
}
/* Recolhível de explicação solto no painel alinha com o título, também no celular (C6, D10, 20/10/2026). */
:is(.quadro, .cartao, #cursos-resumo) > .explicacao-completa { padding-inline: var(--painel-x); }
@media (max-width: 760px) {
  :root { --painel-x: var(--esp-4); }
  /* A faixa é uma grade: a marca e o avatar da conta na primeira linha, a navegação na segunda. O avatar (alvo de 44 px) abre o
     mesmo menu da conta, abaixo dele; no desenho ele vem antes da navegação, no teclado depois dela (RF-10, 28/10/2026). */
  .topo { position: static; width: auto; height: auto; padding: 12px 15px; border-right: 0; border-bottom: 1px solid var(--fio); overflow: visible;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca conta" "nav nav"; align-items: center; }
  .topo .marca { grid-area: marca; margin: 0; }
  .topo .abas { grid-area: nav; min-width: 0; margin-top: 10px; }
  .topo .marca img { width: 112px; margin: 0; }
  .topo .marca em { display: none; }
  /* A faixa que rola de lado avisa que continua: sombra na borda com mais itens, coberta pelo fundo em «local» quando
     chega ao fim (UI-16). Folga de 4 px para o anel de foco e margem ao trazer o item focado (EV-14). */
  .topo .abas .envelope { flex-direction: row; overflow-x: auto; gap: 4px; padding: 4px; scroll-padding-inline: 16px; }
  .topo .abas .envelope, .acomp-abas {
    --fundo-rolagem: var(--lateral);
    background:
      linear-gradient(to right, var(--fundo-rolagem) 30%, transparent) left center / 32px 100% no-repeat local,
      linear-gradient(to left, var(--fundo-rolagem) 30%, transparent) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--sombra-rolagem), transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--sombra-rolagem), transparent) right center / 12px 100% no-repeat scroll,
      var(--fundo-rolagem);
  }
  .acomp-abas { --fundo-rolagem: var(--folha); flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .topo .abas button, .topo .lugar { width: auto; flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 10px 12px; }
  .topo .abas button[aria-current="true"]::after { left: 50%; top: auto; bottom: -1px; width: 18px; height: 3px; margin: 0 0 0 -9px; border-radius: 3px 3px 0 0; }
  /* Item único (gestor de polo) não ocupa uma faixa no celular: a tela já diz onde a pessoa está. */
  body[data-papel] .topo .lugar[data-papel-de] { display: none; }
  /* Os dois grupos seguem na mesma faixa que rola de lado, cada título antes dos seus itens e uma linha fina entre os grupos. */
  .topo .grupo { display: flex; flex: none; align-items: center; gap: 4px; }
  .topo .grupo-itens { flex-direction: row; }
  .topo .grupo-rot { margin: 0 4px 0 8px; padding: 0; white-space: nowrap; }
  .topo .grupo:not(.oculto) ~ .grupo:not(.oculto) { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--fio); }
  /* A conta é só o avatar, num alvo de 44 px: nome e papel ficam no cabeçalho do menu e no aria-label do botão. */
  .topo .conta { grid-area: conta; margin: 0; padding: 0; border-top: 0; }
  .topo .conta-btn { justify-content: center; width: 44px; min-height: 44px; padding: 6px 0; }
  .topo .conta-btn :is(.perfil-textos, .conta-seta), .topo .conta-btn[aria-current="true"]::after { display: none; }
  main.envelope, body[data-papel] main.envelope { margin: 0; padding: 20px 15px 60px; }
  .titulo { margin-bottom: 20px; }
  .titulo h1 { font-size: 27px; letter-spacing: -.025em; }
  .titulo-acoes, .titulo-acoes > :is(button, a) { flex: 1 1 100%; }
  .kpis, .kpis:has(> .kpi:nth-child(2):last-child), .kpis:has(> .kpi:nth-child(3):last-child), .kpis:has(> .kpi:nth-child(5):last-child), .kpis:has(> .kpi:nth-child(6):last-child) { grid-template-columns: minmax(0, 1fr); }
  .kpis .kpi, .kpis .kpi:nth-child(even), .kpis .kpi:nth-last-child(-n+2) { --pad: 16px; min-height: 0; }
  .kpis .kpi .v { font-size: 27px; }
  /* O quadrado do ícone vai ao canto, ao lado do rótulo, em vez de ocupar uma linha: 48 px a menos por cartão (UI-17). */
  .kpis .kpi[data-kpi]::before { position: absolute; top: var(--pad); right: var(--pad); margin: 0; }
  /* Com o quadrado também posicionado, ele pintava por cima do glifo e o ícone sumia: o glifo sobe uma camada. */
  .kpis .kpi[data-kpi] > .k::before { left: auto; right: calc(var(--pad) + 8px); z-index: 1; }
  .kpis .kpi[data-kpi] > .k { padding-right: 44px; }
  .quadro > header, .cartao > header, .sanfona > summary { padding: 14px 16px; }
  .cartao .corpo { padding: 16px; }
  /* Sem cálculo, o Resultado vazio («sem cálculo», «— peso N») desce para depois dos indicadores (UX-13). */
  .ficha > .lateral:has(.res-vazio) { order: 1; }
  .ficha > .lateral { margin-bottom: var(--painel-gap); }
  /* Tabela em cartões (B4, B5, C8, D5, D10, 20/10/2026): respiro do painel, um só rótulo de 13 px, valor e complemento
     juntos à direita, tingido no cartão inteiro em vez de nas células sem respiro, célula vazia fora e sub-linha sem
     o recuo do computador. */
  .leitura-mobile :is(tbody, tfoot) tr { padding: var(--esp-3) var(--painel-x); }
  .leitura-mobile :is(tbody, tfoot) [data-label]::before { margin-right: auto; font-size: var(--fs-13); }
  .leitura-mobile :is(tbody, tfoot) [data-label]:empty { display: none; }
  .leitura-mobile tbody td.recuo { padding-left: 0; }
  table.matriz.leitura-mobile tr.meta-atingida { background: var(--linha-atingida); }
  table.matriz.leitura-mobile tr.meta-atrasada { background: var(--linha-atrasada); }
  table.matriz.leitura-mobile tr:is(.meta-atingida, .meta-atrasada) > td { background: none; }
  .leitura-mobile tr.oferta-linha { background: color-mix(in srgb, var(--folha-2) 55%, transparent); }
  .leitura-mobile tr.oferta-linha td { background: none; }
  .tabela-meses.leitura-mobile tr.total { background: var(--folha-2); }
  .tabela-meses.leitura-mobile tr.total :is(th, td) { background: none; }
  .leitura-mobile .mes-celula.ciclo { border-left: 0; }
  .leitura-mobile :is(.mes-celula.atual, td.estrela-cel.meta-atingida) { margin-inline: -8px; padding-inline: 8px; border-radius: 6px; }
  .celula-polo { padding: var(--painel-x); }
  /* Vínculos: rótulo em cima e valor embaixo, como na matriz; em linha, o cartão passava da tela (EV-01). */
  /* Só Curso e Quem responde, que são longos; Alunos e Situação cabem em linha (AL-11). */
  #tela-vinculos .leitura-mobile td[data-label]:is(:nth-child(1), :nth-child(3)) { display: block; text-align: left; }
  #tela-vinculos .leitura-mobile td[data-label]:is(:nth-child(1), :nth-child(3))::before { display: block; max-width: none; margin-bottom: 6px; }
  /* O cabeçalho da tabela fica fora da tela no celular: o que se foca dentro dele sai da ordem do teclado (EV-03). */
  .leitura-mobile thead :is(button, a, [tabindex]) { visibility: hidden; }
  /* Alvos de toque de 44 px (EV-13). */
  :is(input, textarea, select).acomp-campo, input.meta, select.nivel, input.outro, .polo-form input, .filtros-meta select,
  a.volta-filtros, .explicacao-completa > summary, :is(.vinc-alterar, .polo-designar) > summary { min-height: 44px; }
  /* Os controles de «Alterar», «Designar», busca e ordenação mediam 36 a 38 px; o «Dividir» do vínculo, 19 px (16/10). */
  :is(#tela-vinculos, #tela-polos) :is(button.op, button.op-div, select, input.outro-nome), #tela-polos button.secundario,
  .busca input, .ordem-mobile :is(select, button), a.vai-resumo,
  #tela-metas-captacao button.secundario, details[data-funcional] :is(button, input, select) { min-height: 44px; }
  /* Na ficha, «Todos os coordenadores», anterior, próximo e «Ir para»/«Preencher o acompanhamento» mediam 24 a 43 px (16/10). */
  .migalha button.voltar, #tela-ficha :is(button.primario, button.secundario) { min-height: 44px; }
  :is(.divisao, .fonte-detalhes, .barras-curso) > summary { min-height: 44px; }
  .estrela-cel .liga { min-height: 44px; display: inline-flex; align-items: center; }
  .entrada .caixa .cabeca { padding: 26px 24px 0; }
  .entrada .caixa form { padding: 20px 24px 24px; }
  .entrada .pe { padding: 0 24px 24px; }
  .entrada .caixa > .erro { margin: 20px 24px 0; }
  /* Com espaçamento de texto aumentado (WCAG 1.4.12), o seletor de mês empurrava o cabeçalho 10 px para fora. A largura 0
     servia ao rótulo em flex; com o rótulo em grid (20/10), o `flex: 1` não estica mais e o seletor ficava com 41 px,
     sem mostrar «Ciclo inteiro» (23/10/2026). 100% do rótulo cabe no cabeçalho, inclusive com o espaçamento. */
  .resumo-polos > header .periodo-polos { min-width: 0; }
  .resumo-polos > header .periodo-polos select { width: 100%; }
}
/* O selo do indicador quebra linha em vez de cortar no cartão estreito (WCAG 1.4.12). */
.acomp-indicador > summary .chip { white-space: normal; }
/* Refino de 16/10: detalhes por toque e polos em uma leitura vertical no celular. */
@media (max-width:760px) {
  .grade-polos { grid-template-columns: minmax(0,1fr); }
  .celula-polo > header { flex-direction:row;align-items:baseline; }
  :is(.pedido-detalhes,.polo-composicao,.carteira-cursos,.contato-finalidade) > summary,
  .polo-composicao a,.contatos-rolagem a,.entrada .pe a { min-height:44px;display:flex;align-items:center; }
  .contatos-rolagem { overflow-x:auto; }
  .reservados-contato .tabela-reservados:not(.tabela-transferencias, .tabela-relatorio) { min-width:1100px; }
  .tabela-reservados td.quebra:has(a[href*="mail.google.com"]) { white-space:nowrap;overflow-wrap:normal; }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  :is(button.primario, button.secundario, a.primario, a.secundario, .migalha button.voltar, button.op, button.op-div, .topo .abas button):active { transform: none; }
  button.primario, a.primario { background-image: none; }
}
@media print {
  .topo, .menu-conta, .fx-confete, .fx-feixe { display: none; }
  main.envelope, body[data-papel] main.envelope { margin: 0; padding: 0; max-width: none; }
  .kpis .kpi, .quadro, .cartao { box-shadow: none; }
  .kpis .kpi { background: var(--folha); border-color: var(--fio); }
}

/* Refino solicitado em 16/10, 06h30–06h38: hierarquia e agrupamento no DS vigente. */
/* Mesma família, tamanho e superfície dos cinco ícones; situação continua escrita no dado. */
.kpis.kpis-vinculos .kpi{--accent:var(--tinta-2);--accent-txt:var(--tinta-2)}
.kpis-vinculos .kpi .k{min-height:2.8em}
.kpis-vinculos .kpi .d{font-size:13px}
/* No celular os cartões ficam em uma coluna: a segunda linha reservada era só um vão de 18 px (B12, 20/10/2026). */
@media (max-width: 760px) { .kpis-vinculos .kpi .k { min-height: 0; } }
/* Comparação anual: controles existentes, linha azul e cobertura textual nos dois temas. */
.captacao-anual .filtros-historico { width: 100%; margin-top: var(--esp-2); }
.captacao-anual .grafico-anual-rolagem { margin: 0 var(--painel-x); }
.grafico-anual { display: block; width: 100%; min-width: 460px; max-height: 360px; }
.grafico-anual text { fill: var(--tinta-2); font: var(--fs-12) Inter, sans-serif; font-variant-numeric: tabular-nums; }
.grafico-anual .eixo-titulo { fill: var(--tinta); }
.grafico-anual .grade { stroke: var(--fio); stroke-width: 1; }
.grafico-anual .serie-anual { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.grafico-anual .ponto-anual { fill: var(--azul); stroke: var(--folha); stroke-width: 2; }
.grafico-anual .ponto-anual.parcial { fill: var(--folha); stroke: var(--azul); }
.grafico-anual .valor-anual { fill: var(--tinta); font-weight: 600; }
.captacao-anual .fonte-anual { padding: 0 var(--painel-x) var(--esp-4); color: var(--tinta-2); font-size: var(--fs-13); }
.fonte-anual summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.fonte-anual p { max-width: 75ch; }
/* Realizado × mesmo período do ano anterior (Jonas, 19/10/2026). As séries se distinguem por traço e marcador, além da
   cor. Notas, fonte e detalhes ficam no recuo do painel com ritmo vertical próprio, sem mexer no `.rodape-polos` global. */
.captacao-anual > .referencia-polos { padding: 0 var(--painel-x) var(--esp-3); }
.captacao-anual .comparacao-resumo { margin: 0; padding: 0 var(--painel-x) var(--esp-2); font-size: var(--fs-14); color: var(--tinta); }
.captacao-anual .legenda-comparacao { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-5); margin: 0; padding: 0 var(--painel-x) var(--esp-2);
  list-style: none; font-size: var(--fs-13); color: var(--tinta-2); }
.legenda-comparacao li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.legenda-comparacao .amostra { width: 28px; border-top: 3px solid var(--azul); }
.legenda-comparacao .amostra.anterior { border-top: 3px dashed var(--tinta-2); }
.grafico-anual .serie-atual { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.grafico-anual .serie-anterior { fill: none; stroke: var(--tinta-2); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; }
.grafico-anual .ponto-atual { fill: var(--azul); stroke: var(--folha); stroke-width: 2; }
.grafico-anual .ponto-anterior { fill: var(--folha); stroke: var(--tinta-2); stroke-width: 2; }
.grafico-anual .valor-anterior { fill: var(--tinta-2); font-weight: 600; }
.captacao-anual .rodape-anual { display: grid; gap: var(--esp-2); padding: var(--esp-4) var(--painel-x) var(--esp-3); }
.captacao-anual .rodape-anual p { margin: 0; max-width: 75ch; font-size: var(--fs-13); line-height: 1.6; color: var(--tinta-2); }
.captacao-anual .historico-anual { margin-top: var(--esp-2); border-top: 1px solid var(--fio); }
.captacao-anual .historico-anual > summary { min-height: 44px; display: flex; align-items: center; padding: 0 var(--painel-x);
  cursor: pointer; font-weight: 600; color: var(--tinta); }
.captacao-anual .historico-anual > .filtros-historico { padding: 0 var(--painel-x) var(--esp-3); }
.captacao-anual .historico-anual > .referencia-polos { padding: 0 var(--painel-x) var(--esp-3); }
.topo [data-tela="ficha"] .ico { --ico: var(--i-ficha); }
@media (max-width: 760px) {
  /* O `.rolagem` global não rola no celular; o gráfico tem largura mínima e rola dentro do painel (20/10/2026). */
  .captacao-anual .grafico-anual-rolagem { overflow-x: auto; }
  /* O desenho encolhe a 460/700 no celular: 18 unidades dão os 12 px da escala na tela; eram ~8 px (D3, 20/10/2026). */
  .grafico-anual text { font-size: 18px; }
  .captacao-anual .filtros-historico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .captacao-anual .filtros-historico label { min-width: 0; }
  .captacao-anual .filtros-historico label:last-child { grid-column: 1 / -1; }
  .captacao-anual .filtros-historico select { width: 100%; min-height: 44px; }
}

/* O total é uma síntese horizontal própria; os polos abaixo têm suas próprias bordas e respiro. */
@media(min-width:761px){
 .celula-polo.total{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) minmax(220px,1fr);align-items:center;gap:12px 24px}
 .celula-polo.total>header{grid-column:1}.celula-polo.total .polo-metrica{grid-column:2;grid-row:1}
 .celula-polo.total .trilhos{grid-column:3;grid-row:1}.celula-polo.total .polo-prev{grid-column:3;grid-row:2}
 .celula-polo.total .polo-composicao{grid-column:1/3;grid-row:2}
}
/* Mês a mês e cartões de polo na régua (D6, D7, 20/10/2026): corpo de 14 px, o mês do cabeçalho no estilo do cabeçalho
   (11 px 650 em caixa-alta, com os 44 px de toque), número do polo como a Metric do indicador e os detalhes da barra
   em 12 px tinta-2 (eram 11 px em dois cinzas). O cabeçalho da Captação por polo alinha à borda dos cartões e ao h1,
   com o «Período» acima do campo, como nos filtros das ofertas. */
.tabela-meses{font-size:var(--fs-14)}
.tabela-meses :is(th,td){padding:14px 16px}
.tabela-meses tbody th{font-size:var(--fs-14);min-width:200px}
.mes-celula{min-width:112px}
.mes-celula b{font-size:var(--fs-20);line-height:1.3}
.mes-celula .de-meta{font-size:var(--fs-14);margin-top:4px}
.tabela-meses .mes-botao{font-size:var(--fs-11);font-weight:650;letter-spacing:.06em;text-transform:uppercase;min-height:44px;padding:10px}
.tabela-meses .em-curso{font-size:12px}
.celula-polo .polo-num .de-meta { font-size: var(--fs-14); font-weight: 500; }
.celula-polo .polo-pct { font-size: var(--fs-14); }
.valor-barra :is(.det-res, .det-prev) { font-size: var(--fs-12); color: var(--tinta-2); }
.resumo-polos.quadro > header { padding: 0 0 var(--esp-4); }
.resumo-polos > header .legenda-res + .periodo-polos { margin-left: 0; }
.resumo-polos > .referencia-polos { padding: 0 0 var(--esp-3); }
.periodo-polos { display: grid; gap: 7px; }
/* Nome, contato e situação do gestor em linhas próprias; formulário só ao solicitar designação. O respiro lateral é o
   do cabeçalho (14 px), que ficava 4 px fora da célula (B8); nome em 16 px 600 e selo no tamanho único (B6, B7). */
.tabela-gestores td{vertical-align:top;padding:18px 14px}
.tabela-gestores th:first-child{width:22%}.tabela-gestores th:nth-child(2){width:43%}
.polo-gestor{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px}
.polo-identidade{display:grid;gap:4px;max-width:100%}
.polo-identidade b{font-size:var(--fs-16);font-weight:600}.polo-identidade small{font-size:14px;overflow-wrap:anywhere;color:var(--tinta-2)}
.polo-estado{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.polo-form{display:grid;gap:12px;margin-top:12px}
.polo-form label{display:grid;gap:6px}
.polo-form input{width:100%;min-width:0;font-size:var(--fs-14)}
.polo-form button{justify-self:start}
.polo-unidades{min-width:0;margin:0;padding:0;border:0}
.polo-unidades legend{padding:0}
.polo-unidades .nota{margin:var(--esp-2) 0}
.polo-unidades button{min-height:44px}
.polo-opcoes{max-height:16rem;overflow:auto;border:1px solid var(--fio);border-radius:var(--r-controle);padding:var(--esp-2)}
.polo-form .polo-opcoes label{display:flex;align-items:center;gap:var(--esp-2);min-height:44px;cursor:pointer;overflow-wrap:anywhere;font-size:var(--fs-13);color:var(--tinta-2)}
.tabela-gestores .polo-form .polo-opcoes input{width:20px;min-height:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--marca)}
/* Resultados leem primeiro; período, teto e cobertura permanecem logo abaixo. Corpo em 14 px e nome em 16 px, na escala
   (eram 15 px); o ticket no peso dos outros resultados e o selo no tamanho único (B6, B7, 20/10/2026). */
.tabela-panorama tbody td{font-size:var(--fs-14);padding:18px 14px}
.tabela-panorama a.nome-ficha{font-size:var(--fs-16)}
.tabela-panorama .celula-coord{min-width:200px;max-width:280px}
.tabela-panorama .celula-coord small{font-size:13px;line-height:1.5;display:block;margin-top:6px}
.tabela-panorama .captacao-junta>b,.tabela-panorama .resultado-principal,.tabela-panorama .ticket-valor{font-size:var(--fs-20);font-weight:600}
.tabela-panorama .captacao-junta .de-meta{font-size:14px}
.tabela-panorama .barra{min-width:170px;margin-top:8px}
.tabela-panorama .barra .val{font-size:var(--fs-14)}.tabela-panorama .barra .val.prev{font-size:13px}
.tabela-panorama .resultado-principal small{font-size:13px;font-weight:400}
.tabela-panorama .ticket-resumo small{font-size:13px}
.tabela-panorama .aval .chip{white-space:nowrap}.tabela-panorama .aval small{font-size:13px;min-width:110px}
.regra-painel{border-bottom:1px solid var(--fio)}.regra-painel:last-child{border-bottom:0}
.regra-painel>summary{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none;min-height:44px}
.regra-painel>summary::-webkit-details-marker{display:none}
.regra-titulo{font-size:var(--fs-14);font-weight:600;flex:1}
.regra-acao{font-size:13px;color:var(--marca-esc);white-space:nowrap}
.regra-texto{font-size:14px;line-height:1.6;max-width:75ch;padding:0 0 18px}
.indic .fonte-indicador{display:block;font-size:13px;line-height:1.5;margin-top:8px}
.fonte-indicador>summary{cursor:pointer;width:fit-content;min-height:32px}
.fonte-indicador>div{color:var(--tinta-2);max-width:65ch;margin:8px 0}
.matriz td.indic{min-width:240px}.matriz td.indic>b{font-size:var(--fs-16)}
.matriz td.num{font-size:var(--fs-20)}.matriz .pontos-cel{font-weight:650;font-size:var(--fs-20)}
@media(max-width:760px){
 .tabela-gestores.leitura-mobile tbody td[data-label]{display:block;text-align:left}
 .tabela-gestores.leitura-mobile tbody td[data-label]:before{display:block;max-width:none;margin:8px 0}
 .tabela-gestores .polo-form{width:100%}.tabela-gestores .polo-form input{max-width:100%;min-height:44px}
 .tabela-panorama tbody td{padding:8px 0}.tabela-panorama .celula-coord{max-width:none}
 .tabela-panorama .barra{min-width:0;width:100%}
 .regra-painel>summary{flex-wrap:wrap;gap:8px 12px}.regra-titulo{flex-basis:calc(100% - 110px)}
 .regra-acao{margin-left:0}.fonte-indicador>summary{min-height:44px}
}

/* D2: lista de trabalho compacta, com as mesmas superfícies e tons dos dois temas. */
/* Superfície e título de cartão (20/10/2026): sombra dos painéis vizinhos e título de painel de 15,5 px. */
.foco-agora{min-width:0;margin-bottom:var(--painel-gap);padding:var(--esp-4) var(--painel-x);background:var(--folha);border:1px solid var(--fio);border-radius:var(--r);box-shadow:var(--sombra)}
.foco-cabeca{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);flex-wrap:wrap}
.foco-cabeca h2{margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.foco-contexto{display:block;color:var(--tinta-2);font-size:var(--fs-12);line-height:1.5;margin:var(--esp-2) 0;overflow-wrap:anywhere}
.foco-lista{list-style:none;padding:0;margin:var(--esp-3) 0}
.foco-lista li{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);padding:var(--esp-3) 0;border-top:1px solid var(--fio)}
.foco-lista li>div{min-width:0;flex:1}.foco-lista b{font-weight:600;overflow-wrap:anywhere}
.foco-lista .foco-contexto{margin:var(--esp-1) 0}.foco-motivo{display:block;font-size:var(--fs-13)}
.foco-lista button{flex-shrink:0;min-height:44px}
.foco-mensal,.foco-relatorios{border-top:1px solid var(--fio);padding-top:var(--esp-2)}
.foco-mensal>summary{cursor:pointer;min-height:44px;align-content:center;font-size:var(--fs-13);color:var(--marca-esc)}
.foco-relatorios>summary{cursor:pointer;min-height:44px;align-content:center;font-size:var(--fs-13);color:var(--marca-esc)}
.relatorio-ficha{display:none}
.foco-mensal table{min-width:440px;width:100%;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.foco-mensal caption{text-align:left;color:var(--tinta-2);padding:var(--esp-2) 0}
.foco-mensal :is(th,td){text-align:left;padding:var(--esp-2)}
.foco-agora :is(button,summary):focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.foco-paginacao{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;font-size:var(--fs-13)}
.apoio-gestao>.corpo>.foco-lista{margin:0}.apoio-gestao>.corpo>.foco-lista>li:first-child{border-top:0;padding-top:0}
@media(max-width:760px){.foco-lista li{align-items:flex-start}.foco-lista button{max-width:7rem}.foco-cabeca button{min-height:44px}.foco-mensal .rolagem{max-width:100%}}
/* «Seu foco agora» em diálogo (Cléo, 20/10/2026): ícone de lâmpada ao lado do nome da ficha, que abre o conteúdo num modal
   com X. O <dialog> não tem respiro (o clique nele é o fundo); a caixa interna rola e o X fica preso ao canto. */
.titulo-nome { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.titulo-nome h1 { min-width: 0; }
.foco-abre { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--fio-2);
  border-radius: var(--r-controle); background: var(--folha); color: var(--marca-esc); box-shadow: var(--sombra-item); cursor: pointer;
  transition: border-color var(--t-2) var(--ease-padrao), background-color var(--t-2) var(--ease-padrao); }
.foco-abre::before, .foco-fecha::before { content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--i-foco) center / contain no-repeat; mask: var(--i-foco) center / contain no-repeat; }
.foco-abre:hover { border-color: var(--fio-forte); background: color-mix(in srgb, var(--tinta) 3%, var(--folha)); }
.foco-dialogo { width: min(760px, calc(100vw - 2 * var(--painel-x))); max-width: none; max-height: calc(100dvh - 2 * var(--esp-8));
  margin: auto; padding: 0; border: 1px solid var(--fio); border-radius: var(--r); background: var(--folha); color: var(--tinta);
  box-shadow: var(--sombra-alta); overflow: hidden; }
.foco-dialogo[open] { display: flex; flex-direction: column; }
.foco-dialogo::backdrop { background: color-mix(in srgb, var(--grafite-900) 45%, transparent); }
.foco-dialogo-caixa { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.foco-fecha { position: absolute; z-index: 1; top: var(--esp-3); right: var(--esp-3); display: grid; place-items: center; width: 36px;
  height: 36px; padding: 0; border: 0; border-radius: var(--r-controle); background: var(--folha); color: var(--tinta-2); cursor: pointer; }
.foco-fecha::before { width: 18px; height: 18px; -webkit-mask-image: var(--i-fechar); mask-image: var(--i-fechar); }
.foco-fecha:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 5%, var(--folha)); }
/* Dentro do diálogo o foco não é mais um cartão da ficha: sem borda, sombra nem intervalo; o título abre espaço para o X. */
.foco-dialogo .foco-agora { margin: 0; padding: var(--esp-6) var(--painel-x) var(--painel-x); border: 0; border-radius: 0; box-shadow: none; }
.foco-dialogo .foco-cabeca { padding-right: var(--esp-8); }
@media (max-width: 760px) {
  .foco-abre, .foco-fecha { width: 44px; height: 44px; }
  .foco-dialogo { max-height: calc(100dvh - 2 * var(--painel-x)); }
  .foco-dialogo .foco-cabeca { padding-right: 48px; }
}
@media print { .foco-abre, .foco-dialogo { display: none !important; } }
/* «Regra da meta» da matriz (Cléo, 20/10/2026): gatilho de leitura do balão de ajuda (passar o ponteiro, foco ou toque),
   no verde das explicações e sublinhado só ao passar ou com o balão aberto; o texto da regra sai por extenso na impressão.
   Em 13 px 500, como os outros links de explicação: o «ver o que cada nota exige» abaixo e a fonte do indicador (D9). */
.ajuda.regra-meta { display: flex; width: fit-content; height: auto; min-height: 0; margin: var(--esp-1) 0 0; padding: 2px 0; border: 0;
  border-radius: 0; background: none; color: var(--marca-esc); font: 500 var(--fs-13)/1.4 var(--fonte-texto); text-align: left; }
.ajuda.regra-meta:hover, .ajuda.regra-meta[aria-expanded="true"] { color: var(--marca-esc); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ajuda.regra-meta::after { inset: -4px 0; }
/* Anel de foco por fora do texto, como nos links de explicação (o «?» redondo usa -3 px, que cobriria as letras). */
.ajuda.regra-meta:focus-visible { outline-offset: 2px; border-radius: 4px; }
.regra-meta-texto { display: none; }
@media (max-width: 760px) { .ajuda.regra-meta { align-items: center; min-height: 44px; padding: 0; } .ajuda.regra-meta::after { inset: 0; } }
@media print { .regra-meta-texto { display: block; max-width: 40ch; margin-top: var(--esp-1); font-size: var(--fs-11); color: var(--tinta-2); white-space: pre-line; } }
/* As revisões mantêm os meses em rolagem própria, sem mudar as tabelas móveis da ficha. */
@media screen and (max-width:760px){
 .foco-mensal:is([data-foco-painel="mensal"],[data-foco-painel="evolucao"]) .rolagem{overflow-x:auto}
}
@media print{
 @page{size:A4;margin:14mm}
 body.imprimindo-ficha>*:not(#relatorio-ficha){display:none!important}
 body.imprimindo-ficha #relatorio-ficha{display:block!important;color:var(--grafite-900);background:var(--grafite-0);font:11pt Inter,sans-serif}
 #relatorio-ficha :is(h1,h2,th,td,p,caption){color:inherit;background:transparent;overflow-wrap:anywhere}
 #relatorio-ficha h1{font-size:18pt}#relatorio-ficha h2{font-size:13pt;margin-top:16pt;break-after:avoid}
 #relatorio-ficha table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;font-size:8pt}
 #relatorio-ficha :is(th,td){padding:5pt;border-bottom:1px solid var(--grafite-300);white-space:normal}
 #relatorio-ficha thead{display:table-header-group}#relatorio-ficha tr{break-inside:avoid}
}

/* UNIAVAN LEGENDS: ranking da coordenação (posição, ícone da colocação, nome, índice), sem arquétipo, metáfora, nova
   semântica de cor ou movimento. Os 10 ícones de colocação saíram e voltaram em 20/10/2026, a pedido do Cléo: primeiro
   «vamos deixar só como ranking»; depois (K4) «vamos deixar só o ícone de cada colocação… pode manter todos os ícones».
   Nome do arquétipo, descrição e «Sobre esta posição» seguem fora. */
.legends-emblema[data-arquetipo="imperador"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206l4%204%205-7%205%207%204-4-2%2013H5Z%20M5%2022h14%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="soberano"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208l4-5h10l4%205-9%2014Z%20M3%208h18%20M7%203l5%2019%205-19%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="lendario"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203l4%206%204-6%20M5%203l5%208%20M19%203l-5%208%20M12%2010a6%206%200%201%200%200%2012%206%206%200%200%200%200-12Z%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="conquistador"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022V3h14l-4%205%204%205H5%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="comandante"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-8%2010-8%2010S4%2017%204%2012V6Z%20M8%2012l3%203%205-6%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="campeao"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10v8a5%205%200%200%201-10%200Z%20M7%205H3v4a4%204%200%200%200%204%204%20M17%205h4v4a4%204%200%200%201-4%204%20M12%2016v5%20M8%2022h8%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="guerreiro"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203l14%2014%20M3%204l1%205%2011%2011%205-5L9%204Z%20M20%203L6%2017%20M15%2020l5-5%20M4%2015l5%205%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="guardiao"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-8%2010-8%2010S4%2017%204%2012V6Z%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="explorador"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Z%20M16%208l-2%206-6%202%202-6Z%22%2F%3E%3C%2Fsvg%3E"); }
.legends-emblema[data-arquetipo="aspirante"] { --emblema: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022V12%20M12%2015C4%2015%203%209%203%207c7%200%209%204%209%208Z%20M12%2011c0-6%205-8%209-8%200%205-3%209-9%208Z%22%2F%3E%3C%2Fsvg%3E"); }

.topo [data-tela="legends"] .ico { --ico: var(--i-liga); }
/* Página no padrão das outras telas (20/10/2026): cabeçalho .titulo, cartões com o respiro do painel (16 × 20 no
   cabeçalho, --painel-x nas linhas), um só intervalo entre painéis, título de painel em 15,5 px 650 e o foco do sistema.
   O --fs-18 que a gamificação usava não existe na escala: o nome caía em 18 px e o título do cartão no tamanho do corpo. */
.legends-proprias { margin: 0 0 var(--painel-gap); border: 1px solid var(--fio); border-radius: var(--r); background: var(--folha);
  box-shadow: var(--sombra); color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.legends-proprias > header { padding: 16px var(--painel-x); border-bottom: 1px solid var(--fio); }
.legends-proprias h2, .legends-ranking > header h2 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.legends-proprias > header p { margin: 5px 0 0; font-size: 12.5px; color: var(--tinta-2); }
.legends-proprias ul { list-style: none; margin: 0; padding: 0; }
.legends-proprias li { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-6); padding: var(--esp-4) var(--painel-x);
  font-variant-numeric: tabular-nums; }
.legends-proprias li + li { border-top: 1px solid var(--fio); }
.legends-proprias li p, .legends-aguarda { margin: 0; }
.legends-aguarda { padding: var(--esp-4) var(--painel-x); color: var(--tinta-2); }
/* Top 10: um cartão com divisórias de 1 px (grupo de irmãos), não uma lista solta com faixas de 22 px. */
.legends-lista { list-style: none; margin: 0; padding: 0; }
.legends-linha { display: grid; grid-template-columns: 3ch 28px minmax(0, 1fr) minmax(170px, auto); gap: var(--esp-4);
  align-items: start; padding: var(--esp-4) var(--painel-x); background: var(--folha); }
.legends-linha + .legends-linha { border-top: 1px solid var(--fio); }
.legends-linha:hover { background: color-mix(in srgb, var(--tinta) 3%, var(--folha)); }
.legends-posicao { font-size: var(--fs-16); font-weight: 700; line-height: 1.5; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* Ícone da colocação (K4, 20/10/2026): máscara centrada na 1ª linha de 24 px da posição e do nome (16 px × 1,5),
   no verde de marca no pódio e em tinta-2 nas demais, como antes da retirada. */
.legends-emblema { display: block; width: 28px; height: 28px; margin-top: -2px; background: var(--tinta-2);
  -webkit-mask: var(--emblema) center/contain no-repeat; mask: var(--emblema) center/contain no-repeat; }
.legends-podio .legends-emblema { background: var(--marca-esc); }
.legends-nome, .legends-indice { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.legends-nome > b { font-size: var(--fs-16); font-weight: 600; line-height: 1.5; color: var(--tinta); }
.legends-indice > span { font-size: var(--fs-13); color: var(--tinta-2); }
.legends-indice { text-align: right; font-variant-numeric: tabular-nums; }
.legends-indice > b { font-size: var(--fs-20); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--tinta); }
.legends-nota { margin: 0; padding: var(--esp-3) var(--painel-x); border-top: 1px solid var(--fio); font-size: var(--fs-13); color: var(--tinta-2); }
.legends-vazio { margin: 0 0 var(--painel-gap); }
/* Tabela da gestão: legenda, cabeçalho de linha e margens dos painéis vêm das regras gerais de tabela e painel
   (20/10/2026: saíram as cópias locais, que davam peso 500 ao nome e divergiam das outras tabelas). */
@media (min-width: 761px) {
  .legends-gestao :is(th, td):first-child { width: 1%; white-space: nowrap; }
}
.legends-gestao :is(th, td).num { text-align: right; }
.legends-fontes { display: grid; gap: var(--esp-1); margin-top: var(--esp-6); font-size: var(--fs-12); color: var(--tinta-2); }
.legends-fontes p { margin: 0; max-width: 75ch; }
/* A falha é cartão com a ação principal; a linha de botão e estado é a .corpo.acoes, como nas outras telas (A14). */
.legends-erro p { margin: 0; }
/* «Minha posição» na ficha do coordenador (Cléo, 20/10/2026): selo de troféu + posição à direita do título Resultado,
   link para a liga. Quebra para a linha de baixo antes de apertar o título. */
.cartao > header:has(> .selo-ranking-alvo) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--esp-2) var(--esp-3); }
.selo-ranking { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--fio);
  border-radius: 999px; background: var(--folha-2); color: var(--tinta); font-size: var(--fs-13); font-weight: 650; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.selo-ranking:hover { border-color: var(--marca-esc); }
.selo-ranking:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.selo-ranking-ico { flex: none; width: 16px; height: 16px; background: var(--marca-esc);
  -webkit-mask: var(--i-trofeu) center / 16px 16px no-repeat; mask: var(--i-trofeu) center / 16px 16px no-repeat; }
@media (max-width: 760px) {
  .legends-proprias li { flex-direction: column; gap: var(--esp-1); }
  .legends-linha { grid-template-columns: 3ch 24px minmax(0, 1fr); gap: var(--esp-3); }
  .legends-emblema { width: 24px; height: 24px; margin-top: 0; }
  .legends-indice { grid-column: 3; text-align: left; }
  .selo-ranking { min-height: 44px; }
}

/* Guia opcional por papel; não bloqueia a página nem altera formulários. Veste o DS (20/10/2026): título de painel,
   texto no corpo de 14 px, ação principal verde e destaque do passo no verde de foco (o azul é semântica de captação). */
.onboarding-painel { position: fixed; z-index: 180; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 40px));
  max-height: 45dvh; overflow: auto; padding: 18px var(--painel-x) var(--painel-x); border: 1px solid var(--fio); border-radius: var(--r);
  background: var(--folha); color: var(--tinta); box-shadow: var(--sombra-alta); }
.onboarding-painel[hidden] { display: none; }
.onboarding-painel h2 { margin: 0 0 var(--esp-2); font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.onboarding-painel p { max-width: 65ch; margin: 0 0 var(--esp-2); font-size: var(--fs-14); line-height: 1.5; }
/* «Passo N de M» é a linha de contexto (.olho) logo abaixo do título, como nas telas; não um sobretítulo acima dele. */
.onboarding-painel .onboarding-progresso { margin: calc(-1 * var(--esp-1)) 0 var(--esp-3); }
.onboarding-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-top: var(--esp-4); }
.onboarding-acoes [data-tour="fecha"] { margin-left: auto; }
/* O passo destacado para no topo com folga (o scrollIntoView usa block: start); no desktop os botões têm a altura do DS. */
.onboarding-alvo { outline: 2px solid var(--foco); outline-offset: 3px; scroll-margin-top: var(--esp-6); }
@media (max-width: 760px) {
  .onboarding-painel { right: var(--painel-x); bottom: var(--painel-x); width: calc(100vw - 2 * var(--painel-x)); max-height: 40dvh;
    padding: var(--esp-4); }
  .onboarding-acoes button { min-height: 44px; }
}

/* D5: séries mensais com lacunas e equivalência tabular, sem movimento. */
/* O h3 caía no 1,17em do navegador e ficava maior que o título do cartão; as listas usam a .foco-lista (20/10/2026). */
.narrativa-ficha { margin-block: var(--esp-4) var(--esp-6); }
.narrativa-ficha h3 { margin: 0 0 var(--esp-2); font-size: var(--fs-14); font-weight: 600; }
.serie-ficha { margin: var(--esp-6) 0; }
/* Tabelas do foco: números à direita e o recuo do bloco, sem somar os 20 px do painel. O cabeçalho de linha segue a regra
   geral de tabela (20/10/2026: saiu a cópia local de peso 500). */
.foco-mensal :is(th, td).num { text-align: right; }
@media (min-width: 761px) {
  .foco-agora table :is(th, td):first-child:not(.recuo) { padding-left: var(--esp-2); }
  .foco-agora table :is(th, td):last-child { padding-right: var(--esp-2); }
}
.serie-ficha figcaption { font-weight: 600; }
.serie-ficha-svg { display: block; max-width: none; overflow: visible; }
.serie-ficha-svg text { fill: var(--tinta); font: 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.serie-eixo { fill: none; stroke: var(--tinta-2); stroke-width: 1; }
.serie-previsto { fill: var(--tinta-3); }
.serie-realizado.serie-captacao { fill: var(--azul); }
.serie-realizado.serie-remat { fill: var(--roxo); }

/* 3.1 Alunos por fase agrupado (Cléo, 20/10/2026): uma linha que abre por fase, com a divisa dos recolhíveis e o total da
   fase à direita; aberta, a tabela das turmas. O total do curso fecha a lista no tom do rodapé da tabela que ela substitui. */
.fases-grupos { border: 1px solid var(--fio); border-radius: var(--r-controle); overflow: hidden; }
.fase-grupo + .fase-grupo, .fases-grupos > .fase-total { border-top: 1px solid var(--fio); }
.fase-grupo > summary { min-height: 44px; padding: var(--esp-2) var(--esp-3); font-size: var(--fs-14); font-weight: 600; }
.fase-grupo > summary .fase-soma { margin-left: auto; font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.fase-grupo > .rolagem { padding: 0 var(--esp-3) var(--esp-3); }
.fase-total { display: flex; justify-content: space-between; gap: var(--esp-3); margin: 0; padding: var(--esp-3);
  background: var(--folha-2); font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Carteiras e vínculos (PRD do Cléo, 20/10/2026): nome da carteira em destaque, «Ver cursos» recolhido com modalidade,
   unidade e turno, edição do nome na própria linha e paginação de seis em seis, como na imagem de referência. */
.carteiras .carteira-nome { display: block; }
.carteiras .carteira-nome.sem-nome { color: var(--laranja); }
.carteira-cursos { margin-top: var(--esp-2); }
.carteira-cursos ul { margin: var(--esp-2) 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.carteira-cursos li small { color: var(--tinta-2); }
.carteira-edita { display: grid; gap: var(--esp-2); margin: var(--esp-2) 0; max-width: 28rem; }
.carteira-edita label { font-size: var(--fs-13); font-weight: 600; }
.carteira-edita input { width: 100%; }
.carteira-edita input[aria-invalid="true"] { border-color: var(--laranja); }
.carteira-erro { margin: 0; min-height: 1.2em; color: var(--laranja); font-size: var(--fs-13); }
.carteira-erro:empty { min-height: 0; }
.carteira-edita .acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.carteiras-paginacao { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2);
  padding: var(--esp-3) var(--painel-x); font-size: var(--fs-13); color: var(--tinta-2); border-top: 1px solid var(--fio); }
.carteiras-paginacao span { margin-right: auto; }
.carteiras-paginacao button { min-width: 44px; min-height: 44px; }
.vinculos-origem { margin: 0 var(--painel-x) var(--esp-3); }

/* Preços por oferta nas Metas de captação (PRD A do Cléo, 23/10/2026; liberação `precos`). As colunas de preço somam 388 px
   (RN-09, CA-03): com o recuo de 12 px, «1ª parte · matrícula R$ 299,00» e o título com o botão de ordenar davam 397 px, então
   no desktop o recuo dessas duas colunas é 10 px e o título é «Demais 1º sem.», como no mockup (o «1º sem.» se separa pela
   caixa e pelo peso). A linha não cresce ao abrir o detalhe: o popover flutua fora da tabela. Na rolagem horizontal do desktop a coluna
   Curso fica fixa; no celular a tabela segue em cartões, como as demais. Só tokens do DS (RN-23): laranja e teal de texto
   ficam sobre a folha, par já medido no paleta.py. */
.faixa-precos { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) var(--painel-x); border-bottom: 1px solid var(--fio); }
.faixa-precos p { margin: 0; font-size: var(--fs-13); color: var(--tinta); }
.faixa-precos .faixa-nota { font-size: var(--fs-12); color: var(--tinta-2); }
table.tabela-precos :is(th, td).preco-1a { width: 200px; min-width: 200px; }
table.tabela-precos :is(th, td).preco-demais { width: 136px; min-width: 136px; }
table.tabela-precos :is(th, td).acao-preco { width: 52px; padding-left: 0; text-align: center; }
/* O rótulo só para o leitor de tela é absoluto: sem bloco de contenção na célula, escapava do corte da `.rolagem` e
   alargava a página (1468 px de rolagem num viewport de 1366, medido na prévia). */
table.tabela-precos thead th.acao-preco { position: relative; }
thead th .cab-nota { text-transform: none; letter-spacing: 0; font-weight: 500; }
.preco-linhas .v { font-size: var(--fs-13); font-weight: 600; color: var(--tinta); white-space: nowrap; }
.preco-linhas .v2 { margin-top: 1px; font-size: var(--fs-12); line-height: 1.3; color: var(--tinta-2); white-space: nowrap; }
.preco-linhas .rot { font-family: var(--fonte-texto); font-size: var(--fs-12); font-weight: 400; color: var(--tinta-2); }
.curso-preco .chip-preco { display: flex; width: fit-content; margin-top: 3px; }
.botao-plano { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--tinta-2); cursor: pointer;
  transition: background-color var(--t-1) var(--ease-padrao), border-color var(--t-1) var(--ease-padrao); }
.botao-plano::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--i-detalhes) center / contain no-repeat; mask: var(--i-detalhes) center / contain no-repeat; }
.botao-plano:not(:disabled):hover { background: var(--folha-2); border-color: var(--fio-2); color: var(--tinta); }
.botao-plano[aria-expanded="true"] { outline: 2px solid var(--foco); outline-offset: 1px; color: var(--tinta); }
.botao-plano:disabled { opacity: .35; cursor: default; }
/* Selo com ícone no lugar do ponto: a máscara vem do `data-ico`, o desenho do `icones.py`. */
.chip.chip-ico::before { width: 12px; height: 12px; border-radius: 0; transform: none; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.chip.chip-sem-ponto::before { display: none; }
:is(.chip-ico, .pop-bloco-titulo)[data-ico="atualiza"] { --ico: var(--i-atualiza); }
:is(.chip-ico, .pop-bloco-titulo)[data-ico="atencao"] { --ico: var(--i-atencao); }
:is(.chip-ico, .pop-bloco-titulo)[data-ico="parcelas"] { --ico: var(--i-parcelas); }
/* Abaixo do onboarding (180) e da ajuda (1000), acima do menu lateral. */
.pop-plano { position: fixed; z-index: 150; width: 500px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto;
  background: var(--folha); color: var(--tinta); border: 1px solid var(--fio); border-radius: 12px; box-shadow: var(--sombra-alta); }
.pop-cabeca { padding: 14px var(--painel-x) 10px; border-bottom: 1px solid var(--fio); }
.pop-cabeca h3 { margin: 0; font-size: var(--fs-14); }
.pop-ctx { margin: 2px 0 0; font-size: var(--fs-12); color: var(--tinta-2); }
.pop-resumo { margin: var(--esp-2) 0 0; font-size: var(--fs-13); color: var(--tinta-2); }
.pop-resumo b { font-size: var(--fs-16); font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pop-bloco { padding: 10px var(--painel-x); border-bottom: 1px solid var(--fio); font-size: var(--fs-12); }
.pop-bloco-titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--tinta-2); }
.pop-bloco-titulo::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pop-bloco-titulo:only-child { margin-bottom: 0; }
.pop-linha { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--esp-3); align-items: baseline; padding: 2px 0; }
.pop-linha .f { color: var(--tinta-2); }
.pop-linha .vv { text-align: right; white-space: nowrap; font-size: var(--fs-13); font-variant-numeric: tabular-nums; color: var(--tinta); }
.pop-linha .vv s { color: var(--tinta-2); }
.pop-linha .vv b { font-weight: 600; }
.pop-mais { margin: var(--esp-1) 0 0; color: var(--tinta-2); }
.pop-corpo { max-height: 220px; overflow: auto; position: relative; }
.pop-corpo table { width: 100%; }
.pop-corpo :is(th, td) { padding: 7px 10px; white-space: nowrap; }
.pop-corpo :is(th, td):first-child { padding-left: var(--painel-x); }
.pop-corpo :is(th, td):last-child { padding-right: var(--painel-x); }
.pop-corpo thead th { position: sticky; top: 0; z-index: 1; letter-spacing: .04em; }
.pop-rodape { padding: var(--esp-2) var(--painel-x); border-top: 1px solid var(--fio); font-size: var(--fs-12); color: var(--tinta-2); }
.pop-rodape p { margin: 0; }
.preco-sobe { color: var(--laranja); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.preco-desce { color: var(--teal); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
@media (min-width: 761px) {
  table.tabela-precos :is(th, td):is(.preco-1a, .preco-demais) { padding-left: 10px; padding-right: 10px; }
  table.tabela-precos :is(th, td).curso-preco { position: sticky; left: 0; z-index: 1; background: var(--folha); box-shadow: inset -1px 0 0 var(--fio); }
  table.tabela-precos thead th.curso-preco { z-index: 2; background: var(--folha-2); }
  table.tabela-precos tbody tr:hover td.curso-preco { background: color-mix(in srgb, var(--tinta) 3%, var(--folha)); }
}
@media (max-width: 760px) {
  .botao-plano { width: 44px; height: 44px; }
  table.tabela-precos :is(th, td):is(.preco-1a, .preco-demais) { min-width: 0; }
  .leitura-mobile td.curso-preco[data-label] { flex-wrap: wrap; }
  .leitura-mobile td.curso-preco .chip-preco { margin-top: 0; margin-left: auto; }
  .leitura-mobile td.acao-preco[data-label] { align-items: center; }
}
@media print { .pop-plano { display: none !important; } }

/* Contadores da captação com ícone e dica (PRD B do Cléo, 23/10/2026; liberação `cancelados`; RN-11, RN-12A e RN-12B).
   Ícone e número nunca se separam e, sem espaço, os contadores descem juntos. O alvo tem 40 px (44 no celular); na linha
   do KPI a margem negativa devolve a altura da linha, sem encolher o alvo. O ícone é máscara do `icones.py`, no azul de
   leitura da rampa da barra e no vermelho de leitura (pares medidos no paleta.py, CA-13); zero e «—» ficam em tinta-2,
   sem opacidade, para o ícone seguir acima de 3:1. Entre um contador e outro, 14 px de respiro, como no mockup. */
.contadores { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin-inline: -6px; vertical-align: middle; }
.contador { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 5px; min-width: 40px;
  min-height: 40px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta);
  font-family: var(--fonte-num); font-size: var(--fs-13); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
  white-space: nowrap; cursor: default; }
/* O fundo do hover e da dica aberta e o anel de foco ficam numa pílula de 24 px, a altura do mockup, e não no alvo inteiro.
   Na linha do KPI o alvo passa da linha pela margem negativa, e o fundo dele cobria o texto vizinho ao abrir a dica (medido
   em produção em 23/10/2026: «instituição» na ficha de 768 a 1600 px; «migrações» e «provisório» no Panorama). */
.contador::before { content: ""; position: absolute; inset: 8px 0; z-index: -1; border-radius: 8px;
  transition: background-color var(--t-1) var(--ease-padrao); }
:is(.contador-ico, .chave-ico) { flex: none; width: 16px; height: 16px; background: var(--cor-ico);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.contador[data-tipo="cursando"], .chave-ico[data-tipo="cursando"] { --ico: var(--i-cursando); --cor-ico: var(--azul); }
.contador[data-tipo="reservado"], .chave-ico[data-tipo="reservado"] { --ico: var(--i-reservado); --cor-ico: var(--azul); }
.contador[data-tipo="cancelado"], .chave-ico[data-tipo="cancelado"] { --ico: var(--i-cancelado); --cor-ico: var(--bordo); }
.contador.zero { color: var(--tinta-2); --cor-ico: var(--tinta-2); }
.contador:hover::before, .contador[data-aberta]::before { background: var(--folha-2); }
.contador:focus-visible { outline: 0; }
.contador:focus-visible::before { outline: 2px solid var(--foco); outline-offset: -2px; }
/* Texto e contadores são itens de flex, como no mockup: 12 px entre eles na mesma linha e 4 px quando os contadores descem.
   Em linha corrida, a margem de -6 px punha o alvo 2,6 px sobre a última letra do texto. */
.kpis .kpi .d:has(> .contadores) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kpis .kpi .d .contadores { margin-block: -8px; }
.valor-barra .contadores { display: flex; justify-content: flex-end; margin-top: 2px; margin-right: -6px; }
/* No card de polo, os contadores e o «Ver N ofertas» ficam à vista, o link abaixo, no lugar de «Composição e ofertas». */
.polo-contagem { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); font-size: var(--fs-12); }
.polo-contagem a { display: block; }
/* A legenda da captação ganha os ícones e a chave do cancelado; com quatro chaves, elas descem em vez de espremer. */
.legenda-res:has(.chave-ico) { flex-wrap: wrap; row-gap: var(--esp-1); }
.legenda-res .chave-ico { width: 14px; height: 14px; }
@media (min-width: 761px) { .celula-polo.total .polo-contagem { grid-column: 1 / 3; grid-row: 2; } }
@media (max-width: 720px) { .valor-barra .contadores { justify-content: flex-start; margin-right: 0; } }
@media (max-width: 760px) {
  .contador { min-width: 44px; min-height: 44px; }
  .contador::before { inset-block: 10px; }
  .kpis .kpi .d .contadores { margin-block: -10px; }
  .polo-contagem a { display: flex; align-items: center; min-height: 44px; }
}

/* ---------- período e relatório de alunos nas Metas de captação (PRD do Cléo de 26/10/2026; liberação `periodo`) ----------
   O bloco de filtros vem antes dos cartões e das barras que ele muda (RN-25): período em controle segmentado, a grade dos
   filtros e o rodapé com o resumo (RN-26). Quando o bloco sai da tela, a faixa fixa resume os filtros sem deslocar o
   conteúdo nem cobrir o menu lateral (CA-22). No celular o bloco recolhe em «Filtros» (RN-27). Só tokens: os dois temas
   vêm deles. Sem a liberação nenhuma destas classes aparece, e a tela segue a de antes (CA-01). */
.bloco-filtros { margin: 0 0 var(--painel-gap); background: var(--folha); border: 1px solid var(--fio); border-radius: var(--r);
  box-shadow: var(--sombra); scroll-margin-top: var(--esp-4); }
.bloco-filtros > summary { display: none; }
/* Sem o resumo no desktop, o bloco fica sempre aberto, inclusive depois de recolhido no celular e a janela crescer. */
@media (min-width: 761px) { .bloco-filtros::details-content { content-visibility: visible; } }
.bloco-filtros .corpo-filtros { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--esp-4);
  padding: var(--esp-5) var(--painel-x); }
.grupo-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); }
.rotulo-periodo { display: inline-flex; align-items: center; gap: var(--esp-1); }
.rotulo-sit { font-size: var(--fs-11); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); }
/* Controle segmentado (#segPer do mockup): trilho em folha-2, o escolhido em folha, verde de leitura e 650. */
.seg-per { display: inline-flex; flex-wrap: wrap; gap: var(--esp-1); padding: var(--esp-1); border-radius: var(--r-controle);
  background: var(--folha-2); }
.seg-per button.secundario { min-height: 36px; padding: 7px 14px; border: 0; border-radius: 8px; background: transparent;
  box-shadow: none; color: var(--tinta-2); font-size: var(--fs-13); font-weight: 500; transform: none; }
.seg-per button.secundario:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); color: var(--tinta); transform: none; }
.seg-per button.secundario[aria-pressed="true"] { background: var(--folha); box-shadow: var(--sombra-item); color: var(--marca-esc);
  font-weight: 650; }
.grupo-periodo .datas { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3) var(--esp-4); }
/* Campo de data na medida do seletor do painel (13 px, 7 px 9 px, 144 px); o rótulo é Label, o valor não (font: inherit). */
.filtros-meta input[type="date"] { min-width: 144px; padding: 7px 9px; font-size: var(--fs-13); line-height: 1.4;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tinta); }
#tela-metas-captacao .datas input[aria-invalid="true"] { border-color: var(--bordo); }
/* No campo inválido a borda fica bordô; o foco é o contorno de sempre (3:1 no paleta.py), não um anel de 1,5:1. */
#tela-metas-captacao .datas input[aria-invalid="true"]:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: none; }
.grade-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--esp-4); }
.grade-filtros label { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.grade-filtros select, .grade-filtros .busca, .grade-filtros .busca input { width: 100%; min-width: 0; max-width: none; }
.grade-filtros .busca { flex: none; }
.grade-filtros .busca input { font-size: var(--fs-13); text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Mensagem de data inválida: texto e ícone, não só a cor (RN-28). O parágrafo fica no DOM, vazio, para o aria-describedby
   dos campos; o aviso ao leitor de tela sai pelo #anuncio, uma vez. */
.msg-periodo { display: none; margin: 0; color: var(--bordo); font-size: var(--fs-13); font-weight: 600; }
.msg-periodo.on { display: flex; align-items: center; gap: var(--esp-2); }
.msg-periodo.on::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i-alerta) center / contain no-repeat; mask: var(--i-alerta) center / contain no-repeat; }
.rodape-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); padding-top: var(--esp-3);
  border-top: 1px solid var(--fio); }
.resumo-filtros { flex: 1 1 auto; margin: 0; font-size: var(--fs-13); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.resumo-filtros b { color: var(--tinta); font-weight: 600; }
/* «Limpar filtros» é link no verde de leitura (RN-26), não botão secundário. */
button.link-limpa { min-height: 36px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--marca-esc);
  font-size: var(--fs-13); font-weight: 500; cursor: pointer; }
button.link-limpa:hover { background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* O quadro «Ofertas recebidas» fica com título, fonte e as ações agrupadas à direita (RN-15, RN-25). */
.acoes-cab, .acao-relatorio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.nota-periodo { margin: 0; font-size: var(--fs-12); color: var(--tinta-2); }
/* Faixa fixa: no topo, à direita do menu lateral (que fica acima, z-index 40) e na largura do conteúdo. */
.faixa-fixa { position: fixed; top: var(--esp-2); left: calc(var(--lateral-w) + var(--esp-8)); right: var(--esp-8); z-index: 30;
  max-width: calc(1700px - 72px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-4);
  min-height: 44px; padding: var(--esp-1) var(--esp-2) var(--esp-1) var(--painel-x); border: 1px solid var(--fio);
  border-radius: var(--r); background: var(--folha); box-shadow: var(--sombra-alta); font-size: var(--fs-13); color: var(--tinta-2); }
.faixa-fixa b { color: var(--tinta); font-weight: 650; }
.faixa-fixa .contadores { margin-block: -8px; }
.faixa-fixa #altera-filtros { margin-left: auto; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .faixa-fixa { transition: left var(--t-2) var(--ease-padrao); }
}
/* Com a faixa na tela (à vista ou não), a rolagem até um título e o foco do Tab param abaixo da altura dela (técnica C43
   do WCAG): a rolagem que tira o bloco de filtros da vista também faz a faixa aparecer. O --faixa-fim vem do JS. */
html:has(#tela-metas-captacao:not(.oculto) #faixa-filtros) { scroll-padding-top: calc(var(--faixa-fim, 64px) + var(--esp-2)); }
/* Relatório de alunos: o painel dos reservados, com o filtro de situação pelos contadores (RN-16). Marcado tem a pílula
   com contorno; desmarcado, o número riscado em tinta-2: o estado não depende só da cor. */
.relatorio-alunos { scroll-margin-top: var(--esp-4); }
.relatorio-alunos > .msg-periodo { padding: var(--esp-2) var(--painel-x) 0; }
.situacao-relatorio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3);
  padding: var(--esp-3) var(--painel-x); border-bottom: 1px solid var(--fio); }
.situacao-relatorio .contador { cursor: pointer; }
.situacao-relatorio .contador[aria-pressed="true"]::before { background: var(--folha-2); box-shadow: inset 0 0 0 1px var(--fio-forte); }
.situacao-relatorio .contador[aria-pressed="false"] { color: var(--tinta-2); --cor-ico: var(--tinta-2); text-decoration: line-through; }
/* O alvo da dica envolve o ícone mascarado: a máscara no próprio alvo recortava o anel de foco. */
.sit-celula { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; border-radius: 4px; }
.sit-celula:focus-visible { outline-offset: 3px; }
.paginacao-relatorio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3);
  padding: var(--esp-3) var(--painel-x) var(--esp-4); border-top: 1px solid var(--fio); }
.paginacao-relatorio .nota { flex: 1 1 auto; margin: 0; font-size: var(--fs-13); color: var(--tinta-2); }
/* Espaçamento ampliado só nesta tela (RN-24, decisão do Cléo de 26/10/2026): 24 px entre painéis no lugar dos 16 do
   --painel-gap e respiro de 20 a 24 px dentro dos cartões, quadros, barras, tabela e relatório. Desvio registrado no
   DESIGN.md; estender às outras telas é outro PRD. No celular fica o espaçamento de sempre, menos o intervalo. */
#tela-metas-captacao.metas-espacada { --painel-gap: var(--esp-6); }
/* A margem dos cartões é intervalo, então vale também no celular: a de sempre (22 e 28 px) dava 28 px até a fonte. */
#tela-metas-captacao.metas-espacada .kpis { margin: 0 0 var(--painel-gap); }
@media (min-width: 761px) {
  #tela-metas-captacao.metas-espacada { --painel-x: var(--esp-6); }
  #tela-metas-captacao.metas-espacada :is(.titulo, .abas-metas) { margin-bottom: var(--esp-6); }
  #tela-metas-captacao.metas-espacada .kpis { gap: var(--esp-5); }
  #tela-metas-captacao.metas-espacada .kpis .kpi { --pad: var(--esp-6); }
  #tela-metas-captacao.metas-espacada .quadro:not(.resumo-polos) > header { padding: var(--esp-5) var(--esp-6); }
  #tela-metas-captacao.metas-espacada .barras-meta .corpo-barras { padding: var(--esp-2) var(--esp-6) var(--esp-6); gap: var(--esp-4) var(--esp-5); }
  #tela-metas-captacao.metas-espacada .rolagem tbody td { padding-block: var(--esp-4); }
  #tela-metas-captacao.metas-espacada .rolagem thead th { padding-block: var(--esp-3); }
  #tela-metas-captacao.metas-espacada .bloco-filtros .corpo-filtros { padding: var(--esp-6); }
  #tela-metas-captacao.metas-espacada .reservados-contato .nota-lgpd { padding: var(--esp-2) var(--painel-x) var(--esp-4); line-height: 1.6; }
}
@media (max-width: 760px) {
  .bloco-filtros > summary { display: flex; align-items: center; gap: var(--esp-2); min-height: 48px; padding: 0 var(--painel-x);
    font-size: var(--fs-14); font-weight: 650; list-style: none; cursor: pointer; }
  .bloco-filtros > summary::-webkit-details-marker { display: none; }
  .bloco-filtros > summary::after { margin-left: auto; }
  .bloco-filtros[open] > summary { border-bottom: 1px solid var(--fio); }
  .bloco-filtros .corpo-filtros { padding: var(--esp-4) var(--painel-x); }
  .seg-per { display: flex; flex: 1 1 100%; }
  .seg-per button.secundario { flex: 1 1 calc(50% - var(--esp-1)); }
  .grupo-periodo .datas { display: flex; width: 100%; }
  .grupo-periodo .datas label { flex: 1 1 calc(50% - var(--esp-4)); min-width: 0; }
  .filtros-meta input[type="date"] { width: 100%; min-width: 0; min-height: 44px; }
  .grade-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
  .grade-filtros label:last-child { grid-column: 1 / -1; }
  button.link-limpa, #tela-metas-captacao button.primario { min-height: 44px; }
  .faixa-fixa { left: var(--esp-3); right: var(--esp-3); padding: var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-3); }
  .faixa-fixa .contadores { margin-block: -10px; }
  /* O ícone da situação abre a dica no toque: 44 px de alvo, como o contador ao lado. */
  .sit-celula { min-width: 44px; min-height: 44px; vertical-align: middle; }
}
@media print { .faixa-fixa { display: none !important; } .bloco-filtros > summary { display: none; } }
/* ---------- aba Repasse do polo parceiro (PRD do Cléo de 27/10/2026; mockup aprovado em docs/repasse-20261028/) ----------
   Usa os tokens, a lista de contatos (`.reservados-contato`), os contadores e o diálogo do «Seu foco agora»; o que vem
   aqui é só o que a tela tem de próprio. */
.topo [data-tela="repasse"] .ico { --ico: var(--i-repasse); }
.kpi[data-kpi="repasse"] { --accent: var(--teal-vivo); --accent-txt: var(--teal); --ico: var(--i-repasse); }
/* Botões segmentados no desenho do seletor de tema (.opcao-tema): mês e vista da lista. */
.segmentos button { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 34px;
  padding: 0 14px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--tinta-2); font-size: 13px;
  font-weight: 500; line-height: 1.25; cursor: pointer; transition: background-color var(--t-2) var(--ease-padrao), color var(--t-2) var(--ease-padrao); }
.segmentos button small { font-size: 11px; font-weight: 400; }
.segmentos button:hover { color: var(--tinta); }
.segmentos button[aria-pressed="true"] { color: var(--tinta); font-weight: 600; background: var(--folha); box-shadow: 0 0 0 1px var(--fio), var(--sombra-item); }
.segmentos button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.segmentos button:disabled { cursor: not-allowed; opacity: .6; }
.repasse-polo { display: grid; gap: 7px; font-size: var(--fs-11); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); }
.repasse-polo select { min-width: 200px; padding: 7px 30px 7px 9px; font-size: var(--fs-13); font-weight: 400; letter-spacing: 0; text-transform: none; }
.linha-mes { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-6); align-items: flex-end; justify-content: space-between; margin: 0 0 var(--painel-gap); }
.linha-mes .rot { display: flex; flex-direction: column; gap: var(--esp-2); font-size: var(--fs-11); font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-2); }
.linha-mes .rot .segmentos { text-transform: none; letter-spacing: 0; }
.linha-mes .fim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); font-size: var(--fs-12); color: var(--tinta-2); }
#tela-repasse > .aviso { margin: 0 0 var(--painel-gap); }
/* Resumo do mês ao lado do gráfico; abaixo de 1050 px, um embaixo do outro. */
.resumo-mes { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.7fr); }
.resumo-mes.so-grafico { grid-template-columns: minmax(0, 1fr); }
.resumo-mes .lado { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-6) var(--painel-x); border-right: 1px solid var(--fio); min-width: 0; }
.resumo-mes .rot-pequeno { margin: 0; font-size: var(--fs-11); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); }
.resumo-mes .grande { font-family: var(--fonte-titulo); font-size: var(--fs-40); font-weight: 700; line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--tinta); }
.resumo-mes .apoio-linha { margin: 0; font-size: var(--fs-13); color: var(--tinta-2); }
.linhas-res { display: grid; gap: var(--esp-2); margin: 0; padding-top: var(--esp-4); border-top: 1px solid var(--fio); }
.linhas-res > div { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: var(--fs-13); }
.linhas-res dt { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); }
.linhas-res dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.linhas-res dd small { display: block; font-size: var(--fs-12); font-weight: 400; color: var(--tinta-2); }
.linhas-res dd.neg { color: var(--bordo); }
.alunos-mes { display: grid; gap: var(--esp-1); padding-top: var(--esp-4); border-top: 1px solid var(--fio); }
.alunos-mes h3 { margin: 0 0 var(--esp-1); font-size: var(--fs-11); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); }
.alunos-mes .item { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--fs-13); }
/* O contador abre a lista naquela vista: aqui é botão de verdade, não só a dica. */
.alunos-mes .contador { margin-inline: -6px; min-width: 64px; cursor: pointer; }
.grafico-lado { padding: var(--esp-6) var(--painel-x); min-width: 0; }
.grafico-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-3); }
.grafico-cab h2 { margin: 0; font-size: var(--fs-16); }
.grafico-cab .leg { display: inline-flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); font-size: var(--fs-12); color: var(--tinta-2); }
.grafico-cab .leg > span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-cab .leg i { flex: none; width: 14px; height: 10px; border-radius: 2px; }
.grafico-cab .leg .leg-rec { background: var(--azul-vivo); }
.grafico-cab .leg .leg-prev { background: var(--teal-vivo); }
.grafico-cab .leg .leg-parcial { background: repeating-linear-gradient(135deg, var(--tinta-2) 0 3px, transparent 3px 6px); }
/* A área do gráfico é o bloco de contenção da legenda escondida (regra de 23/10) e rola de lado quando não cabe. */
.grafico-repasse-rolagem { position: relative; overflow-x: auto; }
.grafico-anual.grafico-repasse { min-width: calc(var(--w, 680px) * .7); }
.grafico-repasse .mes-slot { outline: none; }
.grafico-repasse .mes-slot[tabindex] { cursor: pointer; }
.grafico-repasse .mes-slot[tabindex]:hover .hit { fill: color-mix(in srgb, var(--tinta) 4%, transparent); }
.grafico-repasse .mes-slot:focus-visible .hit { stroke: var(--foco); stroke-width: 2; }
.grafico-repasse .zero-linha { stroke: var(--fio-forte); stroke-width: 1.5; }
.grafico-repasse .faixa-sel { fill: var(--folha-2); }
.grafico-repasse .barra-rec { fill: var(--azul-vivo); }
.grafico-repasse .barra-prev { fill: var(--teal-vivo); }
.grafico-repasse .barra-rec.parcial { fill: url(#rep-h-rec); stroke: var(--azul-vivo); stroke-width: 1.5; }
.grafico-repasse .barra-prev.parcial { fill: url(#rep-h-prev); stroke: var(--teal-vivo); stroke-width: 1.5; }
.grafico-repasse .nao-apurado { stroke: var(--tinta-2); stroke-width: 2; stroke-dasharray: 4 4; }
.grafico-repasse .valor-prev { font-size: 11px; font-weight: 650; fill: var(--teal); }
.grafico-repasse .rot-mes.sel { font-weight: 700; fill: var(--tinta); }
.grafico-repasse .rot-estado { font-size: 10.5px; }
.grafico-nota { margin: var(--esp-2) 0 0; font-size: var(--fs-12); color: var(--tinta-2); }
.repasse-sem-dados p, .repasse-erro p { margin: 0; }
.repasse-erro .acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }
.repasse-ir { margin: 0 0 var(--painel-gap); }
/* Lista dos alunos do mês: o quadro da lista de contatos, com o botão de baixar, as vistas e a busca. */
.ico-baixar { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i-baixar) center / contain no-repeat; mask: var(--i-baixar) center / contain no-repeat; }
#repasse-baixa { display: inline-flex; align-items: center; gap: 6px; }
#repasse-baixa[aria-disabled="true"] { cursor: progress; opacity: .7; }
:is(.erro-baixa, .erro-dialogo):not([hidden]) { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--bordo); font-size: var(--fs-13); }
:is(.erro-baixa, .erro-dialogo):not([hidden])::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; background: currentColor;
  -webkit-mask: var(--i-alerta) center / contain no-repeat; mask: var(--i-alerta) center / contain no-repeat; }
.repasse-lista .erro-baixa:not([hidden]) { padding: 10px var(--painel-x); border-bottom: 1px solid var(--fio); }
.repasse-filtros { align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--painel-x); border-bottom: 1px solid var(--fio); }
.repasse-filtros .busca { margin-left: auto; }
#tela-repasse .rolagem { position: relative; }
.tabela-repasse td.zero, .tabela-repasse-meses td.zero { color: var(--tinta-2); }
.tabela-repasse td.contato { white-space: nowrap; }
.tabela-repasse tfoot :is(th, td) { font-weight: 600; text-align: left; background: var(--folha-2); border-top: 2px solid var(--fio-forte); }
.tabela-repasse tfoot td.num { text-align: right; }
.tabela-repasse .linha-mais td { text-align: center; }
.sit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.tabela-repasse .sit-det { display: block; }
.tabela-repasse-meses { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.tabela-repasse-meses :is(th, td), .tabela-repasse-registro :is(th, td) { padding: 8px; text-align: left; border-bottom: 1px solid var(--fio); }
.tabela-repasse-meses :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-repasse-meses tbody tr.atual :is(th, td) { background: var(--marca-fundo); }
.tabela-repasse-registro { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
/* Dentro do recolhível o texto herda 12 px em tinta-2 (design.css); as tabelas voltam à cor do texto. */
.tabela-repasse-meses, .tabela-repasse-registro { color: var(--tinta); }
.fonte-detalhes[data-repasse-secao] > .rolagem { margin-top: var(--esp-3); }
.regras { padding: var(--esp-3) 0 0; }
.regras p, .regras ul { margin: 0 0 var(--esp-3); max-width: 80ch; }
.regras ul { padding-left: 20px; }
.regras li { margin: 6px 0; }
.regras .conta { margin: 0 0 var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--r-controle); background: var(--folha-2);
  font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
/* Coluna Repasse e caixa «Aba Repasse» da aba Polos. A caixa é um rótulo de linha, não um campo: sem a caixa-alta do
   Label nem a largura dos campos do formulário. */
.cel-rep { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.cel-rep .d { font-size: var(--fs-12); color: var(--tinta-2); }
.cel-rep .acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.polo-form > label.rep-campo { display: flex; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px dashed var(--fio-forte);
  border-radius: var(--r-controle); font-size: var(--fs-13); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta); cursor: pointer; }
.polo-form > label.rep-campo:has(input:disabled) { cursor: not-allowed; }
.polo-form > label.rep-campo small { display: block; color: var(--tinta-2); }
.tabela-gestores .polo-form .rep-campo input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--marca); }
/* Acesso negado: o cartão do mockup, com o cadeado. */
.negado { max-width: 560px; margin: var(--esp-8) auto; padding: var(--esp-8); text-align: center; border: 1px solid var(--fio); border-radius: var(--r);
  background: var(--folha); box-shadow: var(--sombra); }
.negado .ic-cadeado { display: block; width: 32px; height: 32px; margin: 0 auto var(--esp-3); background: var(--tinta-2);
  -webkit-mask: var(--i-cadeado) center / contain no-repeat; mask: var(--i-cadeado) center / contain no-repeat; }
.negado h1 { margin: 0 0 var(--esp-2); font-size: var(--fs-20); }
.negado p { margin: 0 auto var(--esp-5); max-width: 48ch; color: var(--tinta-2); }
/* Diálogo de configuração e de desligar, no molde do «Seu foco agora». */
.dlg-corpo { display: grid; gap: var(--esp-6); padding: var(--esp-6) var(--painel-x) var(--painel-x); }
.dlg-corpo h2 { margin: 0; padding-right: var(--esp-8); font-size: var(--fs-20); }
.dlg-corpo > p { margin: 0; }
.dlg-corpo section { display: grid; gap: var(--esp-3); }
.dlg-corpo h3 { margin: 0; font-size: var(--fs-14); }
.dlg-corpo .dica { margin: 0; font-size: var(--fs-13); color: var(--tinta-2); }
.dlg-corpo .dlg-campos label { display: flex; flex-direction: column; gap: var(--esp-2); font-size: var(--fs-13); font-weight: 600; }
.dlg-corpo .dlg-campos :is(input, select) { font-weight: 400; }
.dlg-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--esp-4); }
.faixa-pct { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--fio); border-radius: var(--r-controle); font-size: var(--fs-13); }
.faixa-pct .pct { display: flex; align-items: center; gap: 6px; }
.faixa-pct input { width: 100%; min-width: 0; text-align: right; }
.pessoas { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.pessoas li { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--fio); border-radius: var(--r-controle); }
.pessoas .t { flex: 1; min-width: 0; }
.pessoas .t b { display: block; }
.pessoas .t span { font-size: var(--fs-12); color: var(--tinta-2); overflow-wrap: anywhere; }
.dlg-corpo label.linha-chk { display: flex; flex-direction: row; align-items: flex-start; gap: var(--esp-3); flex: 1; font-size: var(--fs-13); font-weight: 400; cursor: pointer; }
.dlg-corpo label.linha-chk input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
.dlg-rod { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--fio); }
/* A confirmação de desligar tem uma frase e dois botões: na largura do diálogo de configurar, a linha passava de 100 caracteres. */
.repasse-dialogo:has(#repasse-desliga) { width: min(480px, calc(100vw - 2 * var(--painel-x))); }
@media (max-width: 1050px) {
  .resumo-mes { grid-template-columns: minmax(0, 1fr); }
  .resumo-mes .lado { border-right: 0; border-bottom: 1px solid var(--fio); }
}
@media (max-width: 760px) {
  .segmentos { flex-wrap: wrap; }
  .segmentos button { min-height: 44px; }
  .linha-mes .rot { width: 100%; }
  .repasse-polo, .repasse-polo select { width: 100%; }
  .repasse-polo select, #repasse-baixa, .repasse-ir button, .repasse-erro button, .negado button,
  .cel-rep button, .dlg-rod button, .dlg-corpo .dlg-campos input, .faixa-pct input { min-height: 44px; }
  .repasse-filtros .busca { margin-left: 0; }
  /* Inteiro no celular, rolando de lado e aberto no mês mais recente: encolhido, o texto ficava abaixo de 9 px e a
     escala do eixo saía cortada pela regra de 18 unidades do gráfico anual. */
  .grafico-anual.grafico-repasse { min-width: var(--w, 680px); }
  .grafico-anual.grafico-repasse text { font-size: var(--fs-12); }
  .grafico-anual.grafico-repasse .valor-prev { font-size: 11px; }
  .grafico-anual.grafico-repasse .rot-estado { font-size: 10.5px; }
  /* A lista do mês rola na própria área: 6 colunas, ou 9 com o cálculo do lançamento (era 1.100 px para a lista de contatos). */
  .reservados-contato .tabela-reservados.tabela-repasse { min-width: 760px; }
  .reservados-contato .tabela-reservados.tabela-repasse.com-lanc { min-width: 1020px; }
  /* Centrado na tabela de 760 px, o «Mostrar mais» ficava fora da tela de 390 px até rolar de lado. */
  .tabela-repasse .linha-mais td { text-align: left; }
  .tabela-repasse .linha-mais button { min-height: 44px; }
  /* Em cartões, o fundo do mês atual vai no cartão inteiro, como o total das tabelas de meses, não célula a célula. */
  .tabela-repasse-meses.leitura-mobile tr.atual { background: var(--marca-fundo); }
  .tabela-repasse-meses.leitura-mobile tr.atual :is(th, td) { background: none; }
  .dlg-corpo label.linha-chk { min-height: 44px; }
  .negado { margin: var(--esp-6) auto; padding: var(--esp-6) var(--painel-x); }
  .faixa-pct { grid-template-columns: minmax(0, 1fr) 110px; }
  .dlg-rod button { flex: 1 1 auto; }
  .dlg-corpo h2 { padding-right: 48px; }
  .polo-form > label.rep-campo { min-height: 44px; }
}
@media print { #repasse-baixa, .repasse-filtros, .linha-mais { display: none !important; } }