/* ============================================================================
   sdp-components.css — CAMADA DE COMPONENTES CANÔNICOS
   Sistema Disciplinar Pantanal · Lion's Technologies
   ============================================================================
   FONTE ÚNICA DA VERDADE (componentes). Trio canônico:
     • sdp-tokens.css   — valores  (cores, espaços, raios, sombras, tipografia)
     • sdp-components.css — ESTE arquivo: as classes de componente (.sdp-*)
     • docs/styleguide.html  — a vitrine (demonstra cada componente + regras de uso)

   ── REGRA DE OURO (inquebrável) ──────────────────────────────────────────
     1. Toda página apenas CONSOME estas classes. Nunca redefine, nunca dá
        override (zero <style> inline de componente, zero !important de página,
        zero classe de componente nova por tela).
     2. Mudou um componente?  edite AQUI **e** no docs/styleguide.html — sempre em par.
        Mudou um valor?        o token vai no sdp-tokens.css (via design-audit.js).
     3. Falta uma variante?    adicione-a À FONTE (styleguide + aqui) antes de usar
        na página — não improvise. (Foi improvisando que nasceram 88 botões e
        136 cards divergentes.)

   ── DEPENDÊNCIA ──────────────────────────────────────────────────────────
     Requer sdp-tokens.css carregado ANTES (as classes referenciam var(--…)).
     Os fallbacks em var(--x, #hex) garantem o render mesmo se um token faltar,
     mas o valor real mora no sdp-tokens.css.

   ── PROVENIÊNCIA ─────────────────────────────────────────────────────────
     Extraído 1:1 do bloco "COMPONENTES CANÔNICOS PROPOSTOS" do docs/styleguide.html
     (/design-fix · Fase 0). Ordem da fonte preservada de propósito: garante
     render idêntico à vitrine. Agrupamento/limpeza fica para um passe futuro.
   ============================================================================ */

/* Fontes premium (Plus Jakarta Sans + Space Grotesk) — viajam com a camada de
   componentes: a página linka este arquivo + os tokens e já recebe a tipografia.
   (@import precede todas as regras de estilo — só comentários podem vir antes.) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..700&family=Space+Grotesk:wght@400..700&display=swap');

/* --- Ícones (SVG, base Lucide) — REGRA UNIVERSAL: nunca emoji --- */
.sdp-icon { width: var(--sdp-icon-md, 24px); height: var(--sdp-icon-md, 24px); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sdp-icon--xs { width: 14px; height: 14px; }
.sdp-icon--sm { width: 18px; height: 18px; }
.sdp-icon--lg { width: 28px; height: 28px; }
.sdp-icon--xl { width: 40px; height: 40px; }

/* --- Chip de ícone: container tonal que SEGURA um glyph (colapsa as ~61 classes *-icon) --- */
.sdp-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-md, 10px); background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); }
.sdp-icon-chip > .sdp-icon { width: 22px; height: 22px; }
.sdp-icon-chip--sm { width: 34px; height: 34px; border-radius: var(--radius-sm, 8px); }
.sdp-icon-chip--sm > .sdp-icon { width: 18px; height: 18px; }
.sdp-icon-chip--lg { width: 56px; height: 56px; border-radius: var(--radius-lg, 12px); }
.sdp-icon-chip--lg > .sdp-icon { width: 28px; height: 28px; }
.sdp-icon-chip--round { border-radius: var(--radius-full, 9999px); }
/* tons — sempre chapados, nunca gradiente/brilho */
.sdp-icon-chip--gold    { background: var(--color-gold-100, #F7F0DC);     color: var(--sdp-brand-gold, #B5904A); }
.sdp-icon-chip--navy    { background: var(--color-navy-100, #E8EDF4);     color: var(--sdp-brand-navy, #16243C); }
.sdp-icon-chip--success { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); }
.sdp-icon-chip--warning { background: var(--color-warning-soft, #FEF3C7); color: var(--color-status-warning, #CA8A04); }
.sdp-icon-chip--danger  { background: var(--color-danger-soft, #FEF2F2);  color: var(--color-status-danger, #DC2626); }
.sdp-icon-chip--info    { background: var(--color-info-soft, #DBEAFE);    color: var(--color-status-info, #2563EB); }
.sdp-icon-chip--neutral { background: var(--color-surface-2, #EFEBE0);    color: var(--color-text-secondary, #4B5563); }

/* --- Botões --- */
.sdp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--control-gap, .5rem);
  height: var(--control-height-md, 40px);
  padding: 0 var(--space-4, 1rem);
  font-family: var(--font-body); font-size: var(--font-size-sm, .875rem); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-md, 8px);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transition-base, 220ms ease);
}
.sdp-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-btn[disabled], .sdp-btn.is-disabled { background: var(--color-action-disabled, #E5E7EB); color: var(--color-text-subtle, #9CA3AF); cursor: not-allowed; border-color: transparent; -webkit-text-fill-color: currentColor; }
.sdp-btn--primary { background: var(--sdp-brand-navy, #16243C); border-color: var(--sdp-brand-navy, #16243C); color: #fff; -webkit-text-fill-color: currentColor; }
.sdp-btn--primary:hover { background: var(--color-navy-800, #2A3A5C); border-color: var(--color-navy-800, #2A3A5C); }
.sdp-btn--secondary { background: var(--sdp-brand-gold, #B5904A); border-color: var(--sdp-brand-gold, #B5904A); color: var(--sdp-brand-navy, #16243C); -webkit-text-fill-color: currentColor; }
.sdp-btn--secondary:hover { background: var(--color-gold-400, #C9A560); border-color: var(--color-gold-400, #C9A560); }
.sdp-btn--outline { background: transparent; border-color: rgba(181, 144, 74, .42); color: var(--sdp-brand-navy, #16243C); -webkit-text-fill-color: currentColor; }
.sdp-btn--outline:hover { background: var(--color-surface-2, #EFEBE0); border-color: rgba(181, 144, 74, .68); }
.sdp-btn--ghost { background: transparent; color: var(--color-text-secondary, #4B5563); }
.sdp-btn--ghost:hover { background: var(--color-surface-2, #EFEBE0); }
.sdp-btn--danger { background: var(--color-danger, #E53935); color: #fff; }
.sdp-btn--danger:hover { filter: brightness(.92); }
.sdp-btn--success { background: var(--sdp-success, #059669); color: #fff; }
.sdp-btn--success:hover { filter: brightness(.92); }
.sdp-btn--warning { background: var(--color-warning, #FFB300); color: var(--color-navy-950, #16243C); }
.sdp-btn--warning:hover { background: var(--color-status-warning, #CA8A04); }
.sdp-btn--sm { height: var(--control-height-sm, 32px); padding: 0 var(--space-3, .75rem); font-size: var(--font-size-xs, .75rem); }
.sdp-btn--lg { height: var(--control-height-lg, 44px); padding: 0 var(--space-6, 1.5rem); font-size: var(--font-size-base, 1rem); }
/* feedback de pressão (scale-feedback / press-feedback) */
.sdp-btn:active:not([disabled]):not(.is-disabled):not(.is-loading) { transform: translateY(1px); }
/* só-ícone — quadrado; EXIGE aria-label */
.sdp-btn--icon { padding: 0; aspect-ratio: 1 / 1; }
/* link — ação textual de baixa ênfase */
.sdp-btn--link { background: transparent; border-color: transparent; color: var(--sdp-brand-navy, #16243C); height: auto; padding: 0 2px; }
.sdp-btn--link:hover { background: transparent; text-decoration: underline; }
/* "soft" — fundo tonalizado + borda + texto na cor semântica. Densidade certa p/
   várias ações por linha de tabela (diferencia cada ação sem o peso do fill sólido). */
.sdp-btn--soft-neutral { background: var(--color-surface-2, #EFEBE0); border-color: var(--color-border-strong, #C8BFA8); color: var(--color-text-secondary, #4B5563); -webkit-text-fill-color: currentColor; }
.sdp-btn--soft-neutral:hover { background: var(--color-action-hover, #EFEBE0); filter: brightness(.96); }
.sdp-btn--soft-info { background: var(--color-info-soft, #DBEAFE); border-color: var(--color-info, #0078d4); color: var(--color-info, #0078d4); -webkit-text-fill-color: currentColor; }
.sdp-btn--soft-info:hover { filter: brightness(.97); }
.sdp-btn--soft-warning { background: var(--color-warning-soft, #FEF3C7); border-color: var(--color-warning, #FFB300); color: var(--color-status-warning, #CA8A04); -webkit-text-fill-color: currentColor; }
.sdp-btn--soft-warning:hover { filter: brightness(.97); }
.sdp-btn--soft-success { background: var(--color-success-soft, #DCFCE7); border-color: var(--sdp-success, #059669); color: var(--sdp-success, #059669); -webkit-text-fill-color: currentColor; }
.sdp-btn--soft-success:hover { filter: brightness(.97); }
.sdp-btn--soft-danger { background: var(--color-danger-soft, #FEF2F2); border-color: var(--color-danger-border, #FECACA); color: var(--color-danger, #E53935); -webkit-text-fill-color: currentColor; }
.sdp-btn--soft-danger:hover { filter: brightness(.97); }
/* dark: bg translúcido da cor, borda/texto mantêm o tom semântico (espelha o padrão soft do tema escuro) */
:root[data-theme="dark"] .sdp-btn--soft-neutral { background: rgba(255, 255, 255, .06); border-color: var(--color-border-strong, #2A3A5C); color: var(--color-text-secondary, #C7D0E0); }
:root[data-theme="dark"] .sdp-btn--soft-info { background: rgba(0, 120, 212, .18); border-color: rgba(0, 120, 212, .55); color: #7FB6EE; }
:root[data-theme="dark"] .sdp-btn--soft-warning { background: rgba(255, 179, 0, .16); border-color: rgba(255, 179, 0, .5); color: #E8B84B; }
:root[data-theme="dark"] .sdp-btn--soft-success { background: rgba(5, 150, 105, .18); border-color: rgba(5, 150, 105, .5); color: #4ADE80; }
:root[data-theme="dark"] .sdp-btn--soft-danger { background: rgba(229, 57, 53, .16); border-color: rgba(229, 57, 53, .5); color: #F0918D; }
/* largura cheia — mobile / formulários */
.sdp-btn--block { width: 100%; }
/* estado carregando (loading-buttons) */
.sdp-btn.is-loading { pointer-events: none; opacity: .85; }
.sdp-btn__spinner { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sdp-spin .6s linear infinite; }

/* estado funcional reutilizavel para elementos controlados por JS */
.sdp-hidden { display: none; }

/* --- Cards --- */
.sdp-card {
  background: var(--sdp-surface-card, #fff);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06));
  padding: var(--space-6, 1.5rem);
  transition: var(--transition-base, 220ms ease);
  color: inherit;          /* card-como-link (<a class="sdp-card">) não herda o azul de link */
  text-decoration: none;   /* nem sublinha — evita style="text-decoration:none" inline na página */
}
.sdp-card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
/* Card interno (agrupador de campos dentro de um painel): superfície tênue, sem sombra */
.sdp-card--inner { background: var(--color-surface-2, #EFEBE0); box-shadow: none; }
/* Dark: superfícies aninhadas dentro de um painel recuam (mais escuras) + borda visível,
   pra não se fundir com o fundo do painel (sub-cards, metric-cards, placeholder de foto). */
:root[data-theme="dark"] .sdp-card--inner,
:root[data-theme="dark"] .sdp-panel .sdp-card,
:root[data-theme="dark"] .sdp-panel .sdp-history-item { background: var(--color-surface-1, #0D1B2A); border-color: var(--color-border-strong, #4A5E7C); }
:root[data-theme="dark"] .sdp-panel .sdp-avatar--neutral { background: var(--color-surface-1, #0D1B2A); }
/* Card-filtro selecionável: clicável p/ filtrar uma lista (ex.: stat-cards de tipo
   que alternam o recorte da tabela). Estado ativo = anel dourado, sem mexer no miolo.
   Toggle via classList .is-active (JS). Token-only, dark herda via tokens. */
.sdp-card--filter { cursor: pointer; }
.sdp-card--filter:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(31,45,74,.12)); }
.sdp-card--filter.is-active { border-color: var(--sdp-brand-gold, #B5904A); box-shadow: 0 0 0 1px var(--sdp-brand-gold, #B5904A); }
/* Card-etapa bloqueado: passo que só libera quando o anterior é concluído (ex.: fluxo em etapas). */
.sdp-card.is-locked { opacity: .5; pointer-events: none; }
.sdp-card__title { font-family: var(--font-display); font-size: var(--font-size-lg, 1.125rem); color: var(--sdp-brand-navy, #16243C); margin-bottom: var(--space-2, .5rem); }
.sdp-card__title:has(+ .sdp-card__subtitle) { margin-bottom: 0; }
/* Icone inline no titulo: dimensiona proporcional ao texto (era 24px fixo -> destoava
   do ~18px do titulo e parecia desalinhado) e centra opticamente na linha. */
.sdp-card__title .sdp-icon { width: 1.15em; height: 1.15em; vertical-align: -.12em; }
.sdp-card__subtitle { font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #6B7280); margin-top: 2px; }
.sdp-card__body { color: var(--color-text-secondary, #4B5563); font-size: var(--font-size-sm); }
.sdp-card__footer { margin-top: var(--space-5, 1.25rem); padding-top: var(--space-4, 1rem); border-top: 1px solid var(--color-border-subtle); display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }
.sdp-card__footer--equal .sdp-btn {
  flex: 0 1 auto;
  width: auto;
  min-width: min(100%, var(--sdp-action-width, 176px));
  max-width: none;
  min-height: var(--control-height-md, 40px);
  height: auto;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.sdp-card__footer--equal .sdp-btn--primary {
  flex-grow: 1;
}
@media (max-width: 640px) { .sdp-card__footer--equal .sdp-btn { flex: 1 1 100%; width: 100%; min-width: 0; } }
/* Footer centralizado: ações/links centrados (ex.: "voltar" em página de card único). */
.sdp-card__footer--center { justify-content: center; }

/* Shell de página de card único centralizado (utilitárias do Portal: login, corrigir
   associação) — sem chrome staff. Centra um único .sdp-card no viewport. Token-only. */
.sdp-auth-shell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  background: var(--color-surface-1, #F6F4EE);
}
/* Card de largura contida para formulário/utilitário avulso (auth/Portal). */
.sdp-card--auth { width: 100%; max-width: 600px; }

/* Região colapsável de detalhe dentro de um card (toggle via .sdp-hidden) */
.sdp-card__expander { margin-top: var(--space-4, 1rem); padding-top: var(--space-4, 1rem); border-top: 1px solid var(--color-border-subtle, #DDD6C4); }
.sdp-card__expander-title { display: flex; align-items: center; gap: var(--space-2, .5rem); font-size: var(--font-size-xs, .75rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); color: var(--color-text-muted, #6B7280); margin-bottom: var(--space-3, .75rem); }

.sdp-stat-card { display: flex; align-items: center; gap: var(--space-4, 1rem); }
.sdp-stat-card__icon { width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius-md, 8px); display: grid; place-items: center; font-size: 26px; background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); }
.sdp-stat-card__value { font-family: var(--font-display); font-size: var(--font-size-3xl, 1.875rem); line-height: 1; color: var(--sdp-brand-navy, #16243C); }
.sdp-stat-card__label { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); margin-top: 4px; }
/* Link de ação dentro de um stat-card clicável (ex.: "Ver lista →"). Dourado de destaque; a seta desliza no hover do card. */
.sdp-stat-card__link { display: inline-flex; align-items: center; gap: var(--space-1, .25rem); margin-top: var(--space-2, .5rem); font-size: var(--font-size-xs, .75rem); font-weight: 700; color: var(--sdp-brand-gold, #B5904A); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); }
.sdp-stat-card__link svg { transition: transform var(--transition-fast, 150ms ease); }
.sdp-card--hover:hover .sdp-stat-card__link svg { transform: translateX(3px); }
/* Variante clicável com CTA no rodapé: o miolo (ícone+valor+label) ocupa o card e
   segue centralizado IGUAL aos stat-cards comuns; o link é ancorado no rodapé via
   position:absolute (fora do fluxo), então NÃO desloca o número/título. O min-height
   dá o respiro p/ o CTA. Usa .sdp-icon-chip (44px) — o left do link conta com isso. */
.sdp-stat-card--action { position: relative; display: block; min-height: 7.5rem; }
.sdp-stat-card--action .sdp-stat-card__main { display: flex; align-items: center; gap: var(--space-4, 1rem); height: 100%; }
.sdp-stat-card--action .sdp-stat-card__link { position: absolute; left: calc(var(--space-6, 1.5rem) + 44px + var(--space-4, 1rem)); bottom: var(--space-3, .75rem); margin-top: 0; }

/* --- Metric card: KPI rico de dashboard (ícone + badge + valor + label + hint).
   Irmão encorpado do .sdp-stat-card (o minimalista do hub). Herda .sdp-card (superfície
   sóbria). A cor por tipo vem do .sdp-icon-chip--* / .sdp-badge--* — o card NÃO se colore
   (zero gradiente/glow/spotlight do legado .dp-card). --- */
.sdp-metric-card { display: flex; flex-direction: column; }
.sdp-metric-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, .75rem); margin-bottom: var(--space-4, 1rem); }
.sdp-metric-card__value { font-family: var(--font-display); font-size: var(--font-size-3xl, 1.875rem); font-weight: 700; line-height: 1; color: var(--sdp-brand-navy, #16243C); }
.sdp-metric-card__value--danger  { color: var(--color-status-danger, #DC2626); }
.sdp-metric-card__value--success { color: var(--color-status-success, #16A34A); }
.sdp-metric-card__label { margin-top: var(--space-2, .5rem); font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--color-text-primary, #111827); }
.sdp-metric-card__hint { margin-top: 2px; font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-metric-card__split { display: flex; align-items: stretch; gap: var(--space-4, 1rem); }
.sdp-metric-card__split-item { flex: 1; min-width: 0; }
.sdp-metric-card__split-divider { width: 1px; flex: 0 0 auto; background: var(--color-border-subtle, #DDD6C4); }
/* Variante compacta: fileiras densas de contadores (ex.: faltas/atestados por turma) */
.sdp-metric-card--compact { padding: var(--space-3, .75rem) var(--space-4, 1rem); }
.sdp-metric-card--compact .sdp-metric-card__value { font-size: var(--font-size-xl, 1.25rem); }
.sdp-metric-card--compact .sdp-metric-card__label { margin-top: var(--space-1, .25rem); font-size: var(--font-size-xs, .75rem); }

/* --- Hub card (navegação / lançador de seção) --- */
.sdp-hub-card {
  display: flex; align-items: center; gap: var(--space-4, 1rem);
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  background: var(--sdp-surface-card, #fff);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06));
  text-decoration: none; color: inherit; cursor: pointer;
  transition: var(--transition-base, 220ms ease);
}
.sdp-hub-card:hover { border-color: var(--sdp-brand-gold, #B5904A); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sdp-hub-card:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-hub-card__icon { width: 48px; height: 48px; flex: 0 0 auto; border-radius: var(--radius-md, 8px); display: grid; place-items: center; background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); }
.sdp-hub-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sdp-hub-card__title { font-family: var(--font-display); font-size: var(--font-size-base, 1rem); font-weight: 600; color: var(--sdp-brand-navy, #16243C); }
.sdp-hub-card__desc { font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #6B7280); margin-top: 2px; }
.sdp-hub-card__arrow { color: var(--color-text-subtle, #9CA3AF); transition: transform var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease); }
.sdp-hub-card:hover .sdp-hub-card__arrow { color: var(--sdp-brand-gold, #B5904A); transform: translateX(3px); }

/* --- Tipo-card: mini-card de contagem por categoria (número + nome + tag), com
   barra lateral colorida pela polaridade. Usado em grids densos de breakdown
   (ex.: "Por tipo de medida" no hub). A cor entra por modificador --pos/--neg/--edu
   e pinta SÓ a barra e o número; o resto herda a superfície sóbria. --- */
.sdp-tipo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3, .75rem); }
.sdp-tipo-card {
  display: flex; align-items: center; gap: var(--space-3, .75rem);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  background: var(--sdp-surface-card, #fff);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-left: 4px solid var(--sdp-tipo-cor, var(--color-text-muted, #6B7280));
  border-radius: var(--radius-lg, 10px);
  text-decoration: none; color: inherit;
  transition: var(--transition-base, 220ms ease);
}
.sdp-tipo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sdp-tipo-card:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-tipo-card__num { font-family: var(--font-display); font-size: var(--font-size-2xl, 1.5rem); font-weight: 700; line-height: 1; color: var(--sdp-tipo-cor, var(--color-text-secondary, #4B5563)); font-variant-numeric: tabular-nums; }
.sdp-tipo-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sdp-tipo-card__name { font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--color-text-primary, #111827); line-height: 1.2; }
.sdp-tipo-card__tag { font-size: var(--font-size-xs, .75rem); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); color: var(--color-text-muted, #6B7280); }
.sdp-tipo-card--pos { --sdp-tipo-cor: var(--color-status-success, #16A34A); }
.sdp-tipo-card--neg { --sdp-tipo-cor: var(--color-status-danger, #DC2626); }
.sdp-tipo-card--edu { --sdp-tipo-cor: var(--color-text-muted, #6B7280); }

/* --- Panel (card com header titulado: chip + titulo + fonte, e acao no rodape) --- */
.sdp-panel { display: flex; flex-direction: column; }
.sdp-panel__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3, .75rem); margin-bottom: var(--space-5, 1.25rem); }
.sdp-panel__title { font-family: var(--font-display); font-size: var(--font-size-lg, 1.125rem); font-weight: 700; letter-spacing: -.01em; color: var(--sdp-brand-navy, #16243C); margin: 0; }
.sdp-panel__source { margin-left: auto; flex: 0 0 auto; }
.sdp-panel__body { display: flex; flex-direction: column; }
.sdp-panel__foot { display: flex; justify-content: flex-end; margin-top: var(--space-5, 1.25rem); }
.sdp-panel__action { display: inline-flex; align-items: center; gap: var(--space-1, .25rem); font-size: var(--font-size-sm, .875rem); font-weight: 700; color: var(--sdp-brand-gold, #B5904A); text-decoration: none; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); }
.sdp-panel__action svg { width: 1em; height: 1em; transition: transform var(--transition-fast, 150ms ease); }
.sdp-panel__action:hover { color: var(--sdp-brand-gold, #B5904A); }
.sdp-panel__action:hover svg { transform: translateX(3px); }

/* --- Card: variantes especializadas (composição sobre .sdp-card) --- */
.sdp-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, .75rem); margin-bottom: var(--space-4, 1rem); }
.sdp-card__head .sdp-card__title { margin-bottom: 0; }
.sdp-card__head .sdp-card__subtitle { margin-top: 6px; }

/* Slot de gráfico (Chart.js com maintainAspectRatio:false precisa de altura no container) */
.sdp-chart-canvas { display: block; width: 100%; max-height: 350px; }

/* Mídia / notícia (sem thumbnail = ícone no banner; com imagem real, usar <img> no mesmo lugar) */
.sdp-card--media { padding: 0; overflow: hidden; }
.sdp-card__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--color-navy-800, #2A3A5C), var(--color-navy-950, #16243C)); display: grid; place-items: center; color: var(--color-gold-200, #EDD99A); }
.sdp-card__media .sdp-icon { width: 40px; height: 40px; opacity: .9; }
.sdp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sdp-card__media-body { padding: var(--space-5, 1.25rem); }

/* Pessoa / aluno */
.sdp-person-card { display: flex; align-items: center; gap: var(--space-3, .75rem); }
.sdp-avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--font-size-sm, .875rem); background: var(--color-navy-100, #E8EDF4); color: var(--sdp-brand-navy, #16243C); }
.sdp-avatar--gold { background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); }
.sdp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sdp-avatar > .sdp-icon { width: 55%; height: 55%; }
.sdp-avatar--sm { width: 32px; height: 32px; font-size: var(--font-size-xs, .75rem); }
.sdp-avatar--lg { width: 56px; height: 56px; font-size: var(--font-size-lg, 1.125rem); }
.sdp-avatar--xl { width: 72px; height: 72px; font-size: var(--font-size-xl, 1.25rem); }
/* Foto-retrato grande de aluno (ficha) — preenche a coluna aside e estica até a
   altura do conteúdo ao lado (grid align stretch); a imagem cobre via object-fit */
.sdp-avatar--photo { width: 200px; max-width: 100%; min-height: 240px; }
.sdp-avatar--square { border-radius: var(--radius-md, 10px); }
.sdp-avatar--navy { background: var(--sdp-brand-navy, #16243C); color: #fff; }
.sdp-avatar--neutral { background: var(--color-surface-2, #EFEBE0); color: var(--color-text-secondary, #4B5563); }
/* status (online/ativo) por composição */
.sdp-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.sdp-avatar-wrap__status { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-status-success, #16A34A); box-shadow: 0 0 0 2px var(--color-surface, #FFFCF5); }
.sdp-avatar-wrap__status--off { background: var(--color-text-subtle, #9CA3AF); }
/* grupo empilhado */
.sdp-avatar-group { display: inline-flex; align-items: center; }
.sdp-avatar-group > * { margin-left: -10px; box-shadow: 0 0 0 2px var(--color-surface, #FFFCF5); }
.sdp-avatar-group > *:first-child { margin-left: 0; }
.sdp-person-card__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sdp-person-card__name { font-family: var(--font-display); font-weight: 600; color: var(--sdp-brand-navy, #16243C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdp-person-card__meta { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdp-person-card__score { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sdp-person-card__score b { font-family: var(--font-display); font-size: var(--font-size-lg, 1.125rem); line-height: 1; color: var(--sdp-brand-navy, #16243C); }
.sdp-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sdp-status-dot--success { background: var(--color-status-success, #16A34A); }
.sdp-status-dot--warning { background: var(--color-status-warning, #CA8A04); }
.sdp-status-dot--danger { background: var(--color-status-danger, #DC2626); }

/* Linha de pessoa clicável (afordância de edição inline) */
.sdp-person-card--clickable { cursor: pointer; border-radius: var(--radius-md, 8px); padding: var(--space-2, .5rem); margin: calc(-1 * var(--space-2, .5rem)); transition: background .15s; }
.sdp-person-card--clickable:hover { background: var(--color-surface-1, #F6F4EE); }

/* Item de lista (card compacto: barra dourada à esquerda + conteúdo título/texto + ação à direita).
   Para listas de itens manuais/editáveis (composição sobre .sdp-card com superfície sutil). */
.sdp-item-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, .75rem); padding: var(--space-3, .75rem) var(--space-4, 1rem); border-left: 3px solid var(--sdp-brand-gold, #B5904A); background: var(--color-surface-1, #F6F4EE); }
.sdp-item-card__body { flex: 1 1 auto; min-width: 0; }
.sdp-item-card__title { font-family: var(--font-display); font-weight: 600; color: var(--sdp-brand-navy, #16243C); font-size: var(--font-size-sm, .875rem); margin-bottom: 2px; }
.sdp-item-card__text { color: var(--color-text-secondary, #4B5563); font-size: var(--font-size-sm, .875rem); white-space: pre-wrap; }
:root[data-theme="dark"] .sdp-item-card { background: var(--color-surface-1, #11233A); }
:root[data-theme="dark"] .sdp-item-card__title { color: var(--color-text-primary, #E6EAF0); }
/* Slot de ícone à esquerda (ex.: tipo de notificação) */
.sdp-item-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 2px; color: var(--color-text-secondary, #4B5563); }
.sdp-item-card__icon .sdp-icon { width: 22px; height: 22px; }
/* Linha de metadados (chips/tempo) abaixo do texto */
.sdp-item-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, .5rem); margin-top: var(--space-2, .5rem); font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
/* Cluster de ações à direita */
.sdp-item-card__actions { flex: 0 0 auto; display: flex; gap: var(--space-2, .5rem); }
/* Card clicável (toda a linha vira alvo) */
.sdp-item-card--clickable { cursor: pointer; text-decoration: none; color: inherit; transition: background .12s; }
.sdp-item-card--clickable:hover { background: var(--color-surface-2, #EFEBE0); }
:root[data-theme="dark"] .sdp-item-card--clickable:hover { background: var(--color-surface-2, #16304D); }
/* Estado lido (esmaecido) */
.sdp-item-card.is-read { opacity: .6; }
/* Barra lateral por severidade (default = dourado marca) */
.sdp-item-card--info    { border-left-color: var(--color-status-info, #2563EB); }
.sdp-item-card--warning { border-left-color: var(--color-status-warning, #CA8A04); }
.sdp-item-card--danger  { border-left-color: var(--color-status-danger, #DC2626); }
.sdp-item-card--info .sdp-item-card__icon    { color: var(--color-status-info, #2563EB); }
.sdp-item-card--warning .sdp-item-card__icon { color: var(--color-status-warning, #CA8A04); }
.sdp-item-card--danger .sdp-item-card__icon  { color: var(--color-status-danger, #DC2626); }

/* Avaliação por estrelas (rating display) */
.sdp-star-row { display: inline-flex; align-items: center; gap: 1px; }
.sdp-star--on { color: var(--sdp-brand-gold, #B5904A); }
.sdp-star--off { color: var(--color-text-subtle, #9CA3AF); }

/* Conteúdo inline em célula de tabela (ícone + texto / chips) */
.sdp-cell-inline { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); }
.sdp-cell-inline .sdp-icon { color: var(--color-text-muted, #6B7280); }
/* Célula de observação (texto longo truncado) */
.sdp-cell-obs { display: inline-block; max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-style: italic; color: var(--color-text-muted, #6B7280); }
/* Célula de texto truncado (sem itálico) — título/autor/editora em tabelas largas.
   --strong = ênfase navy; padrão = texto secundário muted. */
.sdp-cell-truncate { display: inline-block; max-width: 20ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--color-text-secondary, #4B5563); }
/* Célula de identificador técnico (LID, hash, código interno) — monospace muted */
.sdp-cell-mono { font-family: var(--font-family-mono, monospace); font-size: var(--font-size-xs, .75rem); color: var(--color-text-subtle, #9CA3AF); }
.sdp-cell-truncate--strong { max-width: 24ch; font-weight: 600; color: var(--color-text-primary, #111827); }
:root[data-theme="dark"] .sdp-cell-truncate--strong { color: var(--color-text-primary, #F5F7FA); }

/* Edição inline em célula de tabela (duplo-clique → input/select).
   .sdp-cell-edit = span clicável (afordância de hover); .is-editing = td em modo edição. */
.sdp-cell-edit { cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm, 4px); transition: background .15s; min-width: 60px; display: inline-block; }
.sdp-cell-edit:hover { background: var(--color-surface-1, #F6F4EE); }
td.is-editing { padding: 0; }
td.is-editing input, td.is-editing select {
  width: 100%; padding: 6px 8px; box-sizing: border-box;
  border: 2px solid var(--sdp-brand-navy, #16243C); border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm, .8rem); background: var(--color-surface-0, #fff); color: var(--color-text-primary, #333); outline: none;
}
/* Linha desativada (livro removido da seleção, mantido p/ restaurar) */
.sdp-row-removed { opacity: .35; }
.sdp-row-removed td:not(:first-child):not(:last-child) { text-decoration: line-through; }
:root[data-theme="dark"] .sdp-cell-edit:hover { background: var(--color-surface-1, #111E30); }
:root[data-theme="dark"] td.is-editing input, :root[data-theme="dark"] td.is-editing select {
  background: var(--color-surface-1, #111E30); color: var(--color-text-primary, #F5F7FA); border-color: var(--sdp-brand-gold, #B5904A);
}

/* Utilitário: texto secundário/atenuado */
.sdp-text-muted { color: var(--color-text-muted, #6B7280); }
/* Utilitários de alinhamento de texto (irmãos do .sdp-text-muted) — sem token (text-align é estrutural). */
.sdp-text-center { text-align: center; }
.sdp-text-right { text-align: right; }
/* Utilitário: texto com cor semântica (status) — p/ trechos curtos dentro de modal/aviso */
.sdp-text-success { color: var(--color-status-success, #16A34A); }
.sdp-text-warning { color: var(--color-status-warning, #CA8A04); }
.sdp-text-danger  { color: var(--color-status-danger, #DC2626); }
.sdp-text-info    { color: var(--color-status-info, #2563EB); }

/* Skeleton (estado de carregamento) */
.sdp-skeleton { background: linear-gradient(90deg, var(--color-surface-2, #EFEBE0) 25%, var(--color-surface-1, #F6F4EE) 50%, var(--color-surface-2, #EFEBE0) 75%); background-size: 200% 100%; border-radius: var(--radius-sm, 4px); animation: sdp-shimmer 1.3s ease-in-out infinite; }
@keyframes sdp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- Hero / banner de topo (saudação do dashboard) --- */
.sdp-page-hero { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6, 1.5rem); padding: var(--space-6, 1.5rem) var(--space-8, 2rem); border-radius: var(--radius-lg, 10px); background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(135deg, var(--color-navy-950, #16243C), var(--color-navy-900, #1F2D4A)); color: #fff; overflow: hidden; }
.sdp-page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sdp-brand-gold, #B5904A); }
.sdp-page-hero__text { min-width: 0; }
.sdp-page-hero__title { font-family: var(--font-display); font-size: var(--font-size-3xl, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--space-2, .5rem); }
.sdp-page-hero__subtitle { font-size: var(--font-size-base, 1rem); color: rgba(255,255,255,.78); margin: 0; max-width: 56ch; }
.sdp-page-hero__aside { display: flex; align-items: center; gap: var(--space-3, .75rem); flex: 0 0 auto; }
.sdp-page-hero__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-3, .75rem) var(--space-4, 1rem); border-radius: var(--radius-md, 8px); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); }
.sdp-page-hero__tile-num { font-family: var(--font-display); font-size: var(--font-size-4xl, 2.25rem); font-weight: 700; line-height: 1; }
.sdp-page-hero__tile-label { font-size: var(--font-size-xs, .75rem); text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-top: 2px; }
.sdp-page-hero__logo { height: 64px; width: auto; flex: 0 0 auto; opacity: .92; }
.sdp-page-hero--compact { padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem); }
.sdp-page-hero--compact .sdp-page-hero__title { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.sdp-page-hero--plain { background: var(--color-surface, #FFFCF5); color: var(--color-text-primary, #111827); border: 1px solid var(--color-border, #E5E0D2); }
.sdp-page-hero--plain .sdp-page-hero__subtitle { color: var(--color-text-muted, #6B7280); }
.sdp-page-hero--plain .sdp-page-hero__tile { background: var(--color-surface-2, #EFEBE0); border-color: var(--color-border, #E5E0D2); color: var(--sdp-brand-navy, #16243C); }
@media (max-width: 760px) { .sdp-page-hero { padding: var(--space-5, 1.25rem); } .sdp-page-hero__aside { width: 100%; } }

/* --- Layout: grid · stack · cluster --- */
.sdp-grid { display: grid; gap: var(--space-5, 1.25rem); }
.sdp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sdp-grid--auto { grid-template-columns: repeat(auto-fit, minmax(var(--sdp-grid-min, 280px), 1fr)); }
.sdp-grid--tight { gap: var(--space-3, .75rem); }
/* --aside: coluna lateral de largura fixa (config/filtros) + area principal larga
   (preview/tabela). Largura do aside via --sdp-aside-w (default 380px). */
.sdp-grid--aside { grid-template-columns: var(--sdp-aside-w, 380px) minmax(0, 1fr); align-items: start; }
.sdp-grid--aside-end { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
/* --rect: retangulo automatico. Conta os filhos (quantity queries) e escolhe as
   colunas pra NAO sobrar orfao quando o total e PAR. Impar cai no default 4 col
   ("deixar como esta"). As regras :has() so mexem na variavel, nunca no
   grid-template-columns direto, pra nao brigar de especificidade com o responsivo. */
.sdp-grid--rect { grid-template-columns: repeat(var(--sdp-rect-cols, 4), minmax(0, 1fr)); }
.sdp-grid--rect:has(> :nth-child(2):last-child)  { --sdp-rect-cols: 2; } /* 1x2 */
.sdp-grid--rect:has(> :nth-child(6):last-child)  { --sdp-rect-cols: 3; } /* 2x3 */
.sdp-grid--rect:has(> :nth-child(10):last-child) { --sdp-rect-cols: 2; } /* 5x2 */
/* 4 -> 1x4, 8 -> 2x4, 12 -> 3x4 ja viram retangulo no default 4 col */
@media (max-width: 1024px) { .sdp-grid--3, .sdp-grid--4, .sdp-grid--rect { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sdp-grid--aside, .sdp-grid--aside-end { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sdp-grid--2, .sdp-grid--3, .sdp-grid--4, .sdp-grid--rect { grid-template-columns: 1fr; } }
.sdp-stack { display: flex; flex-direction: column; gap: var(--space-5, 1.25rem); }
.sdp-stack--sm { gap: var(--space-3, .75rem); }
.sdp-stack--lg { gap: var(--space-8, 2rem); }
/* Lista com marcadores (bullets) — para enumerar itens dentro de alerta/modal */
.sdp-bullet-list { margin: var(--space-2, 8px) 0 0; padding-left: 20px; list-style: disc; }
.sdp-bullet-list li { margin-bottom: 4px; }
.sdp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, .75rem); }
.sdp-cluster--between { justify-content: space-between; }
.sdp-cluster--end { justify-content: flex-end; }
.sdp-cluster--center { justify-content: center; }

/* --- Formulários --- */
.sdp-field { display: flex; flex-direction: column; gap: var(--space-2, .5rem); margin-bottom: var(--space-4, 1rem); }
.sdp-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--color-text-primary, #111827); }
/* ícone (svg cru) dentro do label: fonts-reset força svg{display:block} no redesign → trava em 16px e alinha com o texto via flex acima */
.sdp-label > svg { flex: 0 0 auto; width: 16px; height: 16px; }
.sdp-input, .sdp-select, .sdp-textarea {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height-md, 40px);
  padding: 0 var(--space-3, .75rem);
  font-family: var(--font-body); font-size: var(--font-size-sm, .875rem); color: var(--color-text-primary);
  background: #fff;
  border: 1px solid var(--sdp-control-border, #D7DCE5);
  border-radius: var(--radius-md, 8px);
  transition: var(--transition-fast, 150ms ease);
}
.sdp-input[type="date"] {
  height: var(--control-height-select, 48px);
  font-size: 1.0625rem;
  line-height: 1.5;
  padding-top: 0;
  padding-bottom: 0;
}
/* Inputs comuns nivelam com os selects (48px) quando lado a lado no form-grid;
   .sdp-nota-input mantém a altura compacta própria (definida mais abaixo) */
.sdp-input { height: var(--control-height-select, 48px); }
.sdp-input[type="date"]::-webkit-date-and-time-value {
  min-height: 1.5em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
  text-align: left;
}
.sdp-input[type="date"]::-webkit-datetime-edit,
.sdp-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.sdp-input[type="date"]::-webkit-datetime-edit-text,
.sdp-input[type="date"]::-webkit-datetime-edit-day-field,
.sdp-input[type="date"]::-webkit-datetime-edit-month-field,
.sdp-input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
}
.sdp-select {
  height: var(--control-height-select, 48px);
  font-size: var(--font-size-base, 1rem);
  line-height: 1.5;
  padding-top: 0;
  padding-bottom: 0;
}
.sdp-select option {
  background-color: var(--color-surface-0, #fff);
  color: var(--color-text-primary, #111827);
}
.sdp-select option:checked {
  background-color: var(--sdp-brand-gold, #B5904A);
  box-shadow: inset 0 0 0 999px var(--sdp-brand-gold, #B5904A);
  color: var(--sdp-brand-navy, #16243C);
  font-weight: 700;
}
.sdp-select-custom { position: relative; width: 100%; }
.sdp-select-custom > .sdp-select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.sdp-select-custom__trigger {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--control-height-select, 48px);
  padding: 0 42px 0 var(--space-3, .75rem);
  border: 1px solid var(--sdp-control-border, #D7DCE5);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-0, #fff);
  color: var(--color-text-primary, #111827);
  font-family: var(--font-body);
  font-size: var(--font-size-base, 1rem);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast, 150ms ease);
}
.sdp-select-custom__trigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  opacity: .72;
}
.sdp-select-custom.has-value .sdp-select-custom__trigger {
  border-color: rgba(181, 144, 74, .62);
  background: var(--color-gold-50, #FBF7EC);
}
.sdp-select-custom.is-open .sdp-select-custom__trigger,
.sdp-select-custom__trigger:focus-visible {
  outline: none;
  border-color: var(--color-focus-border, #B5904A);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42));
}
.sdp-select-custom.is-disabled .sdp-select-custom__trigger {
  background: var(--color-surface-2, #EFEBE0);
  color: var(--color-text-subtle, #9CA3AF);
  cursor: not-allowed;
}
.sdp-select-custom__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdp-select-custom__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-index-dropdown, 1050);
  display: none;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-1, .25rem);
  border: 1px solid var(--color-border-strong, #C8BFA8);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-0, #fff);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(31,45,74,.16));
  scrollbar-color: var(--sdp-brand-gold, #B5904A) var(--color-surface-2, #EFEBE0);
  scrollbar-width: thin;
}
.sdp-select-custom.is-open .sdp-select-custom__menu { display: block; }
.sdp-select-custom__menu::-webkit-scrollbar { width: 10px; }
.sdp-select-custom__menu::-webkit-scrollbar-track { background: var(--color-surface-2, #EFEBE0); border-radius: var(--radius-full, 999px); }
.sdp-select-custom__menu::-webkit-scrollbar-thumb { background: var(--sdp-brand-gold, #B5904A); border: 2px solid var(--color-surface-2, #EFEBE0); border-radius: var(--radius-full, 999px); }
.sdp-select-custom__group {
  padding: var(--space-2, .5rem) var(--space-3, .75rem) var(--space-1, .25rem);
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-wide, .04em);
  text-transform: uppercase;
}
.sdp-select-custom__option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--color-text-primary, #111827);
  font-family: var(--font-body);
  font-size: var(--font-size-base, 1rem);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.sdp-select-custom__option:hover,
.sdp-select-custom__option:focus-visible {
  outline: none;
  background: var(--color-gold-100, #F7F0DC);
  color: var(--sdp-brand-navy, #16243C);
}
.sdp-select-custom__option.is-selected {
  background: var(--sdp-brand-gold, #B5904A);
  color: var(--sdp-brand-navy, #16243C);
  font-weight: 800;
}
.sdp-select-custom__option:disabled {
  color: var(--color-text-subtle, #9CA3AF);
  cursor: not-allowed;
}
.sdp-textarea { height: auto; min-height: 90px; padding: var(--space-3, .75rem); resize: vertical; }
.sdp-textarea--autogrow {
  field-sizing: content;
  overflow-y: auto;
  max-height: min(420px, 60vh);
}
.sdp-input:focus, .sdp-select:focus {
  outline: none;
  border-color: var(--color-focus-border, #B5904A);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42));
}
.sdp-textarea:focus {
  outline: none;
  border-color: var(--sdp-control-border, #D7DCE5);
  box-shadow: 0 0 0 3px rgba(181, 144, 74, .14);
}
.sdp-input::placeholder { color: var(--color-text-subtle, #9CA3AF); }
.sdp-hint { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); line-height: 1.45; }
.sdp-hint:has(> svg),
.sdp-hint:has(> .sdp-icon) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, .5rem);
}
.sdp-hint > svg,
.sdp-hint > .sdp-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: currentColor;
}
.sdp-hint--warning { color: var(--color-status-warning, #CA8A04); font-weight: 600; }
.sdp-check { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); font-size: var(--font-size-sm); cursor: pointer; }
.sdp-check input { width: 18px; height: 18px; accent-color: var(--sdp-brand-gold, #B5904A); }
/* obrigatório + mensagem de erro */
.sdp-label--required::after { content: " *"; color: var(--color-status-danger, #DC2626); font-weight: 700; }
.sdp-error { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-xs, .75rem); color: var(--color-status-danger, #DC2626); }
/* estados do campo (error-placement / inline-validation) */
.sdp-input--selected,
.sdp-textarea--selected,
.sdp-textarea[placeholder]:not(:placeholder-shown),
.sdp-textarea:not([placeholder]):not(:empty),
.sdp-input[required]:valid,
.sdp-input[type="date"][required]:valid,
body.sdp-redesigned .sdp-input--selected,
body.sdp-redesigned .sdp-textarea--selected,
body.sdp-redesigned .sdp-textarea[placeholder]:not(:placeholder-shown),
body.sdp-redesigned .sdp-textarea:not([placeholder]):not(:empty),
body.sdp-redesigned .sdp-input[required]:valid,
body.sdp-redesigned .sdp-input[type="date"][required]:valid {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(181, 144, 74, .62);
  background: var(--color-gold-50, #FBF7EC);
  box-shadow: none;
}
/* Autofill (light): o Chrome pinta o fundo de azul claro e so o dark tinha override (~L1993) — forca o fundo real do input p/ nao vazar azul no campo preenchido automaticamente. */
.sdp-input:-webkit-autofill,
.sdp-input:-webkit-autofill:hover,
.sdp-input:-webkit-autofill:focus,
.sdp-textarea:-webkit-autofill,
.sdp-select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-primary, #16243C);
  box-shadow: 0 0 0 1000px var(--input-bg, #FFFFFF) inset;
  caret-color: var(--color-text-primary, #16243C);
}
.sdp-field--error .sdp-input, .sdp-field--error .sdp-select, .sdp-field--error .sdp-textarea { border-color: var(--color-status-danger, #DC2626); }
.sdp-field--error .sdp-input:focus, .sdp-field--error .sdp-select:focus, .sdp-field--error .sdp-textarea:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.18); border-color: var(--color-status-danger, #DC2626); }
.sdp-field--success .sdp-input { border-color: var(--color-status-success, #16A34A); }
.sdp-field--success .sdp-input:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.18); border-color: var(--color-status-success, #16A34A); }
/* desabilitado vs somente-leitura (read-only-distinction) */
.sdp-input:disabled, .sdp-select:disabled, .sdp-textarea:disabled { background: var(--color-surface-2, #EFEBE0); color: var(--color-text-subtle, #9CA3AF); cursor: not-allowed; }
.sdp-input[readonly] { background: var(--color-surface-1, #F6F4EE); color: var(--color-text-secondary, #4B5563); }
/* campo com ícone / addon */
.sdp-input-group { position: relative; display: flex; align-items: center; }
.sdp-input-group > .sdp-icon { position: absolute; left: var(--space-3, .75rem); color: var(--color-text-muted, #6B7280); pointer-events: none; }
.sdp-input-group--icon .sdp-input { padding-left: 40px; }
.sdp-input-group--action .sdp-input { padding-right: 44px; }
/* cresce numa linha de filtro (.sdp-cluster) sem encolher abaixo de ~240px; o .sdp-input interno preenche */
.sdp-input-group--grow { flex: 1 1 240px; }
.sdp-input-group--grow .sdp-input { width: 100%; }
.sdp-input-group__action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: none; background: transparent; color: var(--color-text-muted, #6B7280); border-radius: var(--radius-sm, 4px); cursor: pointer; }
.sdp-input-group__action:hover { background: var(--color-surface-2, #EFEBE0); color: var(--color-text-primary, #111827); }
.sdp-input-group__action:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
/* seletor de cor: amostra nativa + campo de texto hex lado a lado */
.sdp-color-field { display: flex; align-items: center; gap: var(--space-3, .75rem); }
.sdp-color-field__swatch {
  flex: 0 0 auto; width: 48px; height: 40px; padding: 2px;
  border: 2px solid var(--color-border, #E5E7EB); border-radius: var(--radius-md, 8px);
  background: var(--color-surface-1, #F6F4EE); cursor: pointer;
}
.sdp-color-field__swatch:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-color-field .sdp-input { flex: 1 1 auto; min-width: 0; }
/* radio (mesmo padrão do check) */
.sdp-radio { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); font-size: var(--font-size-sm); cursor: pointer; }
.sdp-radio input { width: 18px; height: 18px; accent-color: var(--sdp-brand-gold, #B5904A); }
/* switch / toggle */
.sdp-switch { display: inline-flex; align-items: center; gap: var(--space-3, .75rem); cursor: pointer; font-size: var(--font-size-sm); }
.sdp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sdp-switch__track { position: relative; width: 42px; height: 24px; flex: 0 0 auto; background: var(--color-surface-3, #DDD6C4); border-radius: var(--radius-full, 9999px); transition: var(--transition-fast, 150ms ease); }
.sdp-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: var(--transition-fast, 150ms ease); }
.sdp-switch input:checked + .sdp-switch__track { background: var(--sdp-brand-gold, #B5904A); }
.sdp-switch input:checked + .sdp-switch__track::after { transform: translateX(18px); }
.sdp-switch input:focus-visible + .sdp-switch__track { box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
/* grid de formulário (2 col → 1 no mobile) */
.sdp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4, 1rem); }
.sdp-form-grid .sdp-field { margin-bottom: 0; }
.sdp-form-grid .sdp-field--full { grid-column: 1 / -1; }
/* campo de ação (botão de filtro): empurra o botão pro fim da célula → fica nivelado com os inputs ao lado */
.sdp-field--action { justify-content: flex-end; }
.sdp-field--action > .sdp-btn { margin-top: auto; }
/* Botão de ação na linha de filtros nivela com a altura dos selects (48px) */
.sdp-field--action > .sdp-btn:not(.sdp-btn--sm) { height: var(--control-height-select, 48px); }
@media (max-width: 560px) { .sdp-form-grid { grid-template-columns: 1fr; } }
/* Variante 3-col: linha de campos (ex.: ano/turma/aluno). Colapsa 3→1. */
.sdp-form-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .sdp-form-grid--3 { grid-template-columns: 1fr; } }
/* Variante 4-col: linha de campos compactos (ex.: turma/turno/aluno/data). Colapsa 4→2→1. */
.sdp-form-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .sdp-form-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sdp-form-grid--4 { grid-template-columns: 1fr; } }
/* Controles uniformes: quando a linha mistura inputs (40px) e <select> (48px),
   sobe os inputs p/ a altura do select → a linha fica nivelada. */
.sdp-form-grid--controls-lg .sdp-input { height: var(--control-height-select, 48px); }

/* --- Upload de foto (preview 3x4 + dropzone tracejado) ---
   Campo composto p/ foto do aluno: preview em retrato + área de ação.
   O botão é um .sdp-btn normal; o Jy (SDPCropper) injeta <img> no preview. */
.sdp-photo-upload { display: flex; gap: var(--space-5, 1.25rem); align-items: flex-start; padding: var(--space-5, 1.25rem); background: var(--color-surface-1, #F6F4EE); border: 2px dashed var(--color-border-strong, #C7BFA6); border-radius: var(--radius-lg, 12px); }
.sdp-photo-upload__preview { flex: 0 0 auto; width: 140px; height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-surface-0, #FFFFFF); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-sm); }
.sdp-photo-upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.sdp-photo-upload__placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--space-2, .5rem); color: var(--color-text-muted, #6B7280); }
.sdp-photo-upload__placeholder > .sdp-icon { width: 40px; height: 40px; opacity: .5; }
.sdp-photo-upload__placeholder span { font-size: var(--font-size-xs, .8rem); font-weight: 500; }
.sdp-photo-upload__actions { flex: 1; display: flex; flex-direction: column; gap: var(--space-3, .75rem); }
@media (max-width: 560px) { .sdp-photo-upload { flex-direction: column; align-items: center; text-align: center; } }
:root[data-theme="dark"] .sdp-photo-upload { background: var(--color-surface-1, #11233A); border-color: var(--color-border-strong, #4A5E7C); }
:root[data-theme="dark"] .sdp-photo-upload__preview { background: var(--input-bg, #0D1B2A); border-color: var(--color-border-strong, #4A5E7C); }

/* --- Dropzone de imagem (preview preenche a zona + botão remover flutuante) ---
   Distinto de .sdp-photo-upload (retrato lateral + ações) e de .sdp-anexos-dropzone
   (arquivo, sem preview): aqui a imagem PREENCHE a área e o "x" flutua sobre ela.
   É um <label> envolvendo um .sdp-anexos-input (clique nativo → sem onclick).
   O placeholder e a borda sólida são resolvidos por :has() (sem style inline no JS). */
.sdp-image-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 140px; overflow: hidden; cursor: pointer;
  border: 2px dashed var(--color-border-strong, #C7BFA6);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface-1, #F6F4EE);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sdp-image-drop:hover { border-color: var(--sdp-brand-gold, #B5904A); background: var(--color-gold-100, #F7F0DC); }
.sdp-image-drop.is-dragging { border-color: var(--sdp-brand-gold, #B5904A); background: rgba(181,144,74,.14); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-image-drop--sm { min-height: 100px; }
.sdp-image-drop__placeholder {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2, .5rem);
  padding: var(--space-4, 1rem); text-align: center;
  color: var(--color-text-muted, #6B7280); font-size: var(--font-size-sm, .875rem);
}
.sdp-image-drop__placeholder > .sdp-icon { width: 28px; height: 28px; opacity: .6; }
.sdp-image-drop__placeholder small { font-size: var(--font-size-xs, .75rem); opacity: .8; }
.sdp-image-drop__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdp-image-drop__remove {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 28px; height: 28px; border-radius: var(--radius-full, 9999px);
  border: none; cursor: pointer; place-items: center; line-height: 1;
  background: rgba(15,23,42,.6); color: #fff;
  transition: background .15s ease;
}
.sdp-image-drop__remove:hover { background: var(--color-danger, #E53935); }
.sdp-image-drop__remove > .sdp-icon { width: 16px; height: 16px; }
/* Estado vazio × com-imagem dirigido pela classe .has-image no <label>.
   (Não usar .sdp-hidden no <img>: o fonts-reset força img{display:block} com
   especificidade maior e venceria o .sdp-hidden — por isso o seletor de 2 classes.) */
.sdp-image-drop .sdp-image-drop__preview,
.sdp-image-drop .sdp-image-drop__remove { display: none; }
.sdp-image-drop.has-image .sdp-image-drop__preview { display: block; }
.sdp-image-drop.has-image .sdp-image-drop__remove { display: grid; }
.sdp-image-drop.has-image .sdp-image-drop__placeholder { display: none; }
.sdp-image-drop.has-image { border-style: solid; border-color: var(--color-border-subtle, #DDD6C4); }
:root[data-theme="dark"] .sdp-image-drop { background: var(--color-surface-1, #11233A); border-color: var(--color-border-strong, #4A5E7C); }

/* --- Galeria de fotos (álbuns + miniaturas) ---
   Grid de cartões de álbum / miniaturas de foto + "ladrilho" tracejado de adicionar.
   Usada no editor do Portal Institucional; token-only, dark automático. */
.sdp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4, 1rem); }
.sdp-gallery-grid--photos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3, .75rem); }
@media (max-width: 768px) {
  .sdp-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .sdp-gallery-grid--photos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
.sdp-album-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-lg, 10px);
  background: var(--color-surface-1, #F6F4EE);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sdp-album-card:hover { border-color: var(--sdp-brand-gold, #B5904A); box-shadow: var(--shadow-md, 0 4px 12px rgba(31,45,74,.12)); transform: translateY(-2px); }
.sdp-album-card:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-album-card__cover { aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: var(--color-surface-2, #EFEBE0); color: var(--color-text-subtle, #9CA3AF); }
.sdp-album-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.sdp-album-card__cover > .sdp-icon { width: 38px; height: 38px; }
.sdp-album-card__info { padding: var(--space-3, .75rem); }
.sdp-album-card__name { margin: 0; font-family: var(--font-display); font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--color-text-primary, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdp-album-card__meta { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md, 10px); border: 1px solid var(--color-border-subtle, #DDD6C4); background: var(--color-surface-1, #F6F4EE); }
.sdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sdp-thumb__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-2, .5rem); opacity: 0; transition: opacity .15s ease; background: linear-gradient(0deg, rgba(15,23,42,.62) 0%, transparent 55%); }
.sdp-thumb:hover .sdp-thumb__overlay { opacity: 1; }
.sdp-thumb__legenda { color: #fff; font-size: var(--font-size-xs, .75rem); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdp-thumb__delete {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: var(--radius-full, 9999px);
  border: none; cursor: pointer; display: grid; place-items: center; line-height: 1;
  background: rgba(15,23,42,.6); color: #fff; opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.sdp-thumb:hover .sdp-thumb__delete { opacity: 1; }
.sdp-thumb__delete:hover { background: var(--color-danger, #E53935); }
.sdp-thumb__delete > .sdp-icon { width: 15px; height: 15px; }
/* ladrilho tracejado de "adicionar" (novo álbum / nova foto) */
.sdp-add-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, .5rem);
  min-height: 120px; cursor: pointer; text-align: center;
  border: 2px dashed var(--color-border-strong, #C7BFA6); border-radius: var(--radius-lg, 10px);
  background: var(--color-surface-1, #F6F4EE); color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-sm, .875rem); font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sdp-add-tile:hover { border-color: var(--sdp-brand-gold, #B5904A); background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-navy, #16243C); }
.sdp-add-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-add-tile > .sdp-icon { width: 26px; height: 26px; }
:root[data-theme="dark"] .sdp-album-card,
:root[data-theme="dark"] .sdp-add-tile { background: var(--color-surface-1, #11233A); border-color: var(--color-border-strong, #4A5E7C); }
:root[data-theme="dark"] .sdp-album-card__cover { background: var(--color-surface-2, #152236); }

/* --- Tabelas --- */
.sdp-table-wrap { border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-lg, 10px); overflow: auto; box-shadow: var(--shadow-sm); }
.sdp-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, .875rem); background: #fff; }
.sdp-table thead th {
  text-align: left; padding: var(--space-3, .75rem) var(--space-4, 1rem);
  background: var(--color-surface-1, #F6F4EE);
  color: var(--color-text-secondary, #4B5563); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); font-size: var(--font-size-xs, .75rem);
  border-bottom: 1px solid var(--color-border-subtle);
}
.sdp-table tbody td { padding: var(--space-3, .75rem) var(--space-4, 1rem); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-primary); }
/* coluna-rótulo (key/value): linha de detalhe com <th scope="row"> */
.sdp-table tbody th[scope="row"] { padding: var(--space-3, .75rem) var(--space-4, 1rem); border-bottom: 1px solid var(--color-border-subtle); text-align: left; font-weight: 600; color: var(--color-text-muted, #6B7280); white-space: nowrap; vertical-align: top; }
.sdp-table tbody tr:last-child td,
.sdp-table tbody tr:last-child th[scope="row"] { border-bottom: none; }
.sdp-table tbody tr:hover { background: var(--color-surface-1, #F6F4EE); }
/* linha clicável (abre detalhe ao clicar) — usa o realce de hover existente */
.sdp-table tbody tr.is-clickable { cursor: pointer; }
/* coluna numérica — alinhada à direita + dígitos tabulares (number-tabular) */
.sdp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* cabeçalho ordenável (sortable-table) */
.sdp-table th.is-sortable { cursor: pointer; user-select: none; }
.sdp-table th.is-sortable:hover { color: var(--sdp-brand-navy, #16243C); }
.sdp-table__sort { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--color-text-subtle, #9CA3AF); }
.sdp-table th[aria-sort] .sdp-table__sort { color: var(--sdp-brand-gold, #B5904A); }
/* linha selecionada */
.sdp-table tbody tr.is-selected { background: var(--color-gold-100, #F7F0DC); }
/* linha em alerta/risco (ex.: frequencia abaixo do minimo) */
.sdp-table tbody tr.is-danger { background: var(--pp-danger-soft, #FEE2E2); }
.sdp-table tbody tr.is-danger:hover { background: var(--pp-danger-soft, #FEE2E2); }
.sdp-table tbody tr.is-danger td { color: var(--color-status-danger, #DC2626); }
/* ações por linha */
.sdp-table__actions { display: flex; gap: var(--space-1, .25rem); justify-content: flex-end; }
/* zebra (opcional) */
.sdp-table--zebra tbody tr:nth-child(even) { background: var(--color-surface-1, #F6F4EE); }
/* celula de frequencia (grade por dias) — fundo tintado por status (P/F/FC/A).
   Tokens *-soft/status-* sao theme-aware -> dark automatico, sem bloco extra. */
.sdp-freq-cell { text-align: center; font-weight: 700; }
.sdp-freq-cell--p  { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); }
.sdp-freq-cell--f  { background: var(--color-danger-soft, #FEF2F2);  color: var(--color-status-danger, #DC2626); }
.sdp-freq-cell--fc { background: var(--color-warning-soft, #FEF3C7); color: var(--color-status-warning, #CA8A04); }
.sdp-freq-cell--a  { background: var(--color-info-soft, #DBEAFE);    color: var(--color-status-info, #2563EB); }
/* Dentro de .data-table/.sdp-table o "tbody td" tem background (esp. 0,2,3) que
   esmagaria a cor da celula -> reancorar com a mesma raiz para a cor vencer. */
body.sdp-redesigned .data-table tbody td.sdp-freq-cell--p,
body.sdp-redesigned .sdp-table tbody td.sdp-freq-cell--p  { background: var(--color-success-soft, #DCFCE7) !important; color: var(--color-status-success, #16A34A) !important; }
body.sdp-redesigned .data-table tbody td.sdp-freq-cell--f,
body.sdp-redesigned .sdp-table tbody td.sdp-freq-cell--f  { background: var(--color-danger-soft, #FEF2F2) !important;  color: var(--color-status-danger, #DC2626) !important; }
body.sdp-redesigned .data-table tbody td.sdp-freq-cell--fc,
body.sdp-redesigned .sdp-table tbody td.sdp-freq-cell--fc { background: var(--color-warning-soft, #FEF3C7) !important; color: var(--color-status-warning, #CA8A04) !important; }
body.sdp-redesigned .data-table tbody td.sdp-freq-cell--a,
body.sdp-redesigned .sdp-table tbody td.sdp-freq-cell--a  { background: var(--color-info-soft, #DBEAFE) !important;    color: var(--color-status-info, #2563EB) !important; }
/* celula de status com subtexto (motivo) — badge + dica abaixo */
.sdp-status-cell { text-align: center; white-space: normal; }
.sdp-status-cell__hint { display: block; font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); margin-top: var(--space-1, .25rem); }
/* celula de estado vazio (td colspan ocupando a tabela inteira) */
.sdp-table__empty-cell { text-align: center; padding: var(--space-5, 1.25rem); color: var(--color-text-muted, #6B7280); }
/* variante sucesso — "nada a reportar" é um bom resultado (ex.: nenhuma medida no mês) */
.sdp-table__empty-cell--success { color: var(--color-status-success, #16A34A); font-weight: 700; background: var(--color-success-soft, #DCFCE7); }
/* rodapé / paginação */
.sdp-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, .75rem); padding: var(--space-3, .75rem) var(--space-4, 1rem); border-top: 1px solid var(--color-border-subtle, #DDD6C4); background: var(--color-surface-1, #F6F4EE); font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #6B7280); }
.sdp-pagination { display: inline-flex; gap: var(--space-1, .25rem); }
/* estado vazio reutilizável (empty-data-state) */
.sdp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: var(--space-8, 2rem) var(--space-4, 1rem); color: var(--color-text-muted, #6B7280); }
.sdp-empty__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-2, #EFEBE0); color: var(--color-text-subtle, #9CA3AF); margin-bottom: var(--space-2, .5rem); }
.sdp-empty__emoji { font-size: 48px; line-height: 1; margin-bottom: var(--space-2, .5rem); }
.sdp-empty h4 { font-family: var(--font-display); color: var(--color-text-secondary, #4B5563); font-size: var(--font-size-base, 1rem); margin: 0; }
.sdp-empty p { font-size: var(--font-size-sm, .875rem); margin: 0; max-width: 40ch; }

/* rótulo de grupo em listas (ex.: "Hoje" / "Ontem" agrupando itens por dia) */
.sdp-day-group { font-size: var(--font-size-xs, .75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted, #6B7280); margin-bottom: var(--space-2, .5rem); }

/* --- Tabela larga/compacta — muitas colunas (ex.: notas disciplinares).
   Cabeçalho fixo no topo do scroll do .sdp-table-wrap + células estreitas/centradas.
   Token-only, dark herdado do .sdp-table base. --- */
.sdp-table--compact thead th { position: sticky; top: 0; z-index: 2; }
.sdp-table--compact tbody td,
.sdp-table--compact thead th { padding: var(--space-3, .75rem) var(--space-2, .5rem); }
.sdp-table .sdp-cell--center { text-align: center; }
.sdp-table th.sdp-cell--narrow,
.sdp-table td.sdp-cell--narrow { padding-left: 6px; padding-right: 6px; text-align: center; }
.sdp-table th.sdp-cell--narrow { font-size: var(--font-size-xs, .75rem); }
/* célula que nunca quebra de linha (ex.: CPF/datas/códigos formatados) */
.sdp-table th.sdp-cell--nowrap,
.sdp-table td.sdp-cell--nowrap { white-space: nowrap; }

/* --- Texto de contador em célula de tabela (positivo/negativo/neutro).
   Dígitos display, alinhado pelo .sdp-cell--center da própria célula. --- */
.sdp-counter { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.sdp-counter--pos     { color: var(--color-status-success, #16A34A); }
.sdp-counter--neg     { color: var(--color-status-danger, #DC2626); }
.sdp-counter--neutral { color: var(--color-text-muted, #6B7280); }

/* --- Badge de classificação de nota disciplinar (6 níveis).
   Pílula tintada por faixa de comportamento. Token-only (soft/status), dark-aware. --- */
.sdp-nota-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-1, .25rem) var(--space-3, .75rem); min-width: 3.25rem;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Aprovação (10 → 5): tinta suave por faixa. Reprovação (<5): preenchimento
   sólido (texto branco) para sinalizar a zona de alerta. */
.sdp-nota-badge--excepcional  { background: var(--color-gold-100, #F7F0DC);     color: var(--sdp-brand-gold, #B5904A);     border: 1px solid var(--sdp-brand-gold, #B5904A); }
.sdp-nota-badge--otimo        { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); }
.sdp-nota-badge--bom          { background: var(--color-info-soft, #DBEAFE);    color: var(--color-status-info, #2563EB); }
.sdp-nota-badge--regular      { background: var(--color-warning-soft, #FEF3C7); color: var(--color-status-warning, #CA8A04); }
.sdp-nota-badge--insuficiente { background: var(--color-warning, #CA8A04);      color: #fff; }
.sdp-nota-badge--incompativel { background: var(--color-danger, #DC2626);       color: #fff; }

/* --- Badge de bônus (ativo/inativo) — pílula de período de bônus. --- */
.sdp-bonus-badge { display: inline-flex; align-items: center; gap: var(--space-1, .25rem); padding: var(--space-1, .25rem) var(--space-2, .5rem); border-radius: var(--radius-sm, 4px); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--font-size-sm, .875rem); }
.sdp-bonus-badge--ativo   { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); }
.sdp-bonus-badge--inativo { background: var(--color-surface-2, #EFEBE0);    color: var(--color-text-muted, #6B7280); }

/* --- Distribuição — barra empilhada + chips de legenda (ex.: distribuição
   por classificação). A cor de cada segmento/chip vem do --sdp-dist-c
   (estado de dado, setado no JS), não de estilo de página. Dark-aware. --- */
.sdp-dist__title { font-size: var(--font-size-xs, .75rem); font-weight: 600; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); color: var(--color-text-muted, #6B7280); margin-bottom: var(--space-2, .5rem); }
.sdp-dist__bar { display: flex; height: 10px; border-radius: var(--radius-sm, 4px); overflow: hidden; background: var(--color-surface-2, #EFEBE0); margin-bottom: var(--space-2, .5rem); }
.sdp-dist__seg { display: block; background: var(--sdp-dist-c, var(--color-surface-2, #EFEBE0)); transition: flex-basis var(--transition-base, .3s ease); }
.sdp-dist__chips { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem) var(--space-4, 1rem); }
.sdp-dist__chip { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); font-size: var(--font-size-xs, .75rem); color: var(--color-text-secondary, #4B5563); }
.sdp-dist__chip::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-sm, 4px); background: var(--sdp-dist-c, var(--color-surface-2, #EFEBE0)); }
.sdp-dist__chip strong { color: var(--color-text-primary, #111827); font-weight: 700; }
:root[data-theme="dark"] .sdp-dist__bar { background: var(--color-surface-1, #11233A); }
:root[data-theme="dark"] .sdp-dist__chip strong { color: var(--sdp-text, #F5F7FA); }

/* --- Grade de notas (boletim) — tabela editável de notas por bimestre.
   Consome .sdp-table; a 1ª coluna é o nome da matéria, as 4 seguintes são
   inputs numéricos compactos. Sem !important: a especificidade resolve. --- */
.sdp-nota-grade th[scope="col"]:not(:first-child),
.sdp-nota-grade td:not(:first-child) { text-align: center; }
.sdp-nota-grade th[scope="row"] {
  text-align: left; font-family: var(--font-display);
  font-weight: 600; color: var(--color-text-primary, #111827);
  white-space: nowrap; padding: var(--space-2, .5rem) var(--space-4, 1rem);
}
.sdp-nota-grade td { padding: var(--space-2, .5rem) var(--space-3, .75rem); vertical-align: middle; }
/* input compacto, centralizado, dígitos tabulares — variante do .sdp-input */
.sdp-nota-input {
  height: var(--control-height-sm, 34px);
  padding: 0 var(--space-2, .5rem);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* célula já preenchida (nota carregada do banco) — destaque informativo gold */
.sdp-nota-input--filled {
  background: var(--color-gold-100, #F7F0DC);
  border-color: var(--sdp-brand-gold, #B5904A);
}
/* nota inválida (fora de 0–10) sinalizada na validação do salvar */
.sdp-nota-input.is-invalid { border-color: var(--color-status-danger, #DC2626); }
.sdp-nota-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.18); border-color: var(--color-status-danger, #DC2626); }

/* célula de nota SOMENTE-LEITURA (preview de import: nota já calculada, não editável).
   Dígitos tabulares centralizados; cor semântica por desempenho. */
.sdp-nota-grade__val { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.sdp-nota-grade__val--high { color: var(--color-status-success, #16A34A); }
.sdp-nota-grade__val--low  { color: var(--color-status-danger, #DC2626); }
/* nota substituída por recomposição: sublinhado verde (marcador "*" vem do conteúdo) */
.sdp-nota-grade__recomp { font-weight: 700; color: var(--color-status-success, #16A34A); border-bottom: 2px solid var(--color-status-success, #16A34A); }
/* total de faltas: numérico muted, cursor de ajuda (detalhe no title) */
.sdp-nota-grade__faltas { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text-muted, #6B7280); cursor: help; }

/* --- Console de log (terminal escuro p/ saída de processamento, ex.: import PDF) ---
   Painel navy escuro, rolável, monoespaçado; linhas tintadas por severidade.
   Tema fixo escuro (é um "terminal") — não flipa no dark, por isso usa cores diretas. */
.sdp-log-console {
  background: var(--color-navy-950, #16243C);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-5, 1.25rem);
  max-height: 300px;
  overflow-y: auto;
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-xs, .8125rem);
  line-height: 1.6;
}
.sdp-log-console__line { color: var(--color-text-inverse, #FAF8F2); margin-bottom: 4px; }
.sdp-log-console__line--success { color: #4ADE80; }
.sdp-log-console__line--error   { color: #F87171; }
.sdp-log-console__line--warning { color: #FBBF24; }
.sdp-log-console__line--info    { color: #60A5FA; }

/* --- Badges --- */
.sdp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full, 9999px); font-size: var(--font-size-xs, .75rem); font-weight: 600; line-height: 1.4; }
.sdp-badge--success { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); }
.sdp-badge--danger  { background: var(--color-danger-soft, #FEF2F2); color: var(--color-status-danger, #DC2626); }
.sdp-badge--warning { background: var(--color-warning-soft, #FEF3C7); color: var(--color-status-warning, #CA8A04); }
.sdp-badge--info    { background: var(--color-info-soft, #DBEAFE); color: var(--color-status-info, #2563EB); }
.sdp-badge--neutral { background: var(--color-surface-2, #EFEBE0); color: var(--color-text-secondary, #4B5563); }
.sdp-badge--brand   { background: rgba(181, 144, 74, .16); color: var(--sdp-brand-gold, #B5904A); border: 1px solid rgba(181, 144, 74, .34); }

/* Agrupador de badges (ex.: várias pendências numa célula de tabela) — só layout */
.sdp-badge-group { display: flex; flex-wrap: wrap; gap: var(--space-1, .25rem); }

/* --- Stat pills (faixa-resumo de contagens read-only) --- */
/* Tira de pílulas número + rótulo. Read-only (não é filtro como .sdp-chip). */
.sdp-stat-pills { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); }
.sdp-stat-pill {
  display: flex; align-items: baseline; gap: var(--space-2, .5rem);
  padding: var(--space-2, .5rem) var(--space-4, 1rem);
  background: var(--color-surface, #FFFCF5);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm);
}
.sdp-stat-pill__num { font-family: var(--font-display); font-size: var(--font-size-xl, 1.25rem); font-weight: 700; line-height: 1; color: var(--sdp-brand-navy, #16243C); }
.sdp-stat-pill__lbl { font-size: var(--font-size-xs, .8rem); font-weight: 600; color: var(--color-text-muted, #6B7280); }
:root[data-theme="dark"] .sdp-stat-pill { background: var(--color-surface-1, #11233A); border-color: var(--color-border-strong, #4A5E7C); }
:root[data-theme="dark"] .sdp-stat-pill__num { color: var(--sdp-text, #F5F7FA); }

/* --- Alerts --- */
.sdp-alert { display: flex; gap: var(--space-3, .75rem); padding: var(--space-4, 1rem); border-radius: var(--radius-md, 8px); border-left: 4px solid; font-size: var(--font-size-sm, .875rem); margin-bottom: var(--space-3, .75rem); }
.sdp-alert__icon { display: inline-flex; align-items: center; }
.sdp-alert__title { font-family: var(--font-display); font-weight: 600; margin-bottom: 2px; }
.sdp-alert--success { background: var(--color-success-soft, #DCFCE7); border-color: var(--color-status-success, #16A34A); color: #14532d; }
.sdp-alert--danger  { background: var(--color-danger-soft, #FEF2F2); border-color: var(--color-status-danger, #DC2626); color: #7f1d1d; }
.sdp-alert--warning { background: var(--color-warning-soft, #FEF3C7); border-color: var(--color-status-warning, #CA8A04); color: #713f12; }
.sdp-alert--info    { background: var(--color-info-soft, #DBEAFE); border-color: var(--color-status-info, #2563EB); color: #1e3a8a; }

/* Variante institucional — bloco explicativo fixo ("Como funciona…", instruções de uso).
   Sem semântica de status e sem close; título opcional, corpo aceita texto ou lista. */
.sdp-alert--hint {
  background: var(--color-gold-50, #FBF7EC);
  border: 1px solid var(--color-gold-200, #EDD99A);
  border-left: 4px solid var(--sdp-brand-gold, #B5904A);
  color: var(--color-navy-700, #36476B);
}
.sdp-alert--hint .sdp-alert__title { color: var(--color-navy-900, #1F2D4A); }
.sdp-alert--hint .sdp-alert__icon  { color: var(--sdp-brand-gold, #B5904A); }
.sdp-alert--hint ul { margin: var(--space-1, .25rem) 0 0; padding-left: 1.1rem; }
.sdp-alert--hint li { margin-bottom: 2px; }
.sdp-alert--hint li::marker { color: var(--sdp-brand-gold, #B5904A); }

/* --- Toast --- */
.sdp-toast { display: inline-flex; align-items: center; gap: var(--space-3, .75rem); background: var(--color-navy-900, #1F2D4A); color: #fff; padding: var(--space-3, .75rem) var(--space-4, 1rem); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); }
.sdp-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sdp-brand-gold, #B5904A); }

/* --- Spinner --- */
.sdp-spinner { width: 28px; height: 28px; border: 3px solid var(--color-surface-3, #DDD6C4); border-top-color: var(--sdp-brand-gold, #B5904A); border-radius: 50%; animation: sdp-spin .7s linear infinite; }
@keyframes sdp-spin { to { transform: rotate(360deg); } }

/* --- Spinner (tamanhos) --- */
.sdp-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.sdp-spinner--lg { width: 40px; height: 40px; border-width: 4px; }

/* --- Badge: ponto de status --- */
.sdp-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
/* dot de cor independente do texto (indicador de status standalone) */
.sdp-badge__dot--info    { color: var(--color-status-info, #2563EB); }
.sdp-badge__dot--success { color: var(--color-status-success, #16A34A); }
.sdp-badge__dot--warning { color: var(--color-status-warning, #CA8A04); }
.sdp-badge__dot--danger  { color: var(--color-status-danger, #DC2626); }

/* --- Tag: rótulo de categoria (read-only) --- */
.sdp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-sm, 4px); font-size: var(--font-size-xs, .75rem); font-weight: 600; line-height: 1.4; background: var(--color-surface-2, #EFEBE0); color: var(--color-text-secondary, #4B5563); border: 1px solid var(--color-border, #E5E0D2); }
.sdp-tag .sdp-icon { width: 13px; height: 13px; }
.sdp-tag--gold { background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); border-color: transparent; }
.sdp-tag--navy { background: var(--color-navy-100, #E8EDF4); color: var(--sdp-brand-navy, #16243C); border-color: transparent; }
.sdp-tag--success { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); border-color: transparent; }
.sdp-tag--info { background: var(--color-info-soft, #DBEAFE); color: var(--color-status-info, #2563EB); border-color: transparent; }
.sdp-tag--pill { border-radius: var(--radius-full, 9999px); }

/* --- Chip: filtro/seleção interativa (opcional removível) --- */
.sdp-chip { display: inline-flex; align-items: baseline; gap: 6px; min-height: 30px; padding: 6px 14px; border-radius: var(--radius-full, 9999px); font-family: var(--font-body); font-size: var(--font-size-sm, .875rem); font-weight: 500; line-height: 1.15; color: var(--color-text-secondary, #4B5563); background: var(--color-surface, #FFFCF5); border: 1px solid var(--color-border-strong, #C8BFA8); cursor: pointer; transition: var(--transition-fast, 150ms ease); white-space: nowrap; }
.sdp-chip:hover { border-color: var(--sdp-brand-navy, #16243C); color: var(--sdp-brand-navy, #16243C); }
.sdp-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-chip .sdp-icon { width: 15px; height: 15px; align-self: center; }
.sdp-chip.is-active, .sdp-chip[aria-pressed="true"] { background: var(--color-navy-100, #E8EDF4); border-color: var(--sdp-brand-navy, #16243C); color: var(--sdp-brand-navy, #16243C); }
.sdp-chip__count { font-variant-numeric: tabular-nums; opacity: .7; font-size: var(--font-size-xs, .75rem); }
.sdp-chip__remove { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 16px; height: 16px; margin-right: -4px; padding: 0; border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; border-radius: 50%; }
.sdp-chip__remove:hover { opacity: 1; background: rgba(0,0,0,.10); }
.sdp-chip__remove .sdp-icon { width: 12px; height: 12px; }

/* --- Accordion (disclosure) --- */
.sdp-accordion { border: 1px solid var(--color-border, #E5E0D2); border-radius: var(--radius-md, 8px); background: var(--color-surface, #FFFCF5); overflow: hidden; }
.sdp-accordion__item + .sdp-accordion__item { border-top: 1px solid var(--color-border, #E5E0D2); }
.sdp-accordion__trigger { display: flex; align-items: center; gap: var(--space-3, .75rem); width: 100%; padding: var(--space-4, 1rem) var(--space-5, 1.25rem); border: 0; background: transparent; font-family: var(--font-display); font-size: var(--font-size-base, 1rem); font-weight: 600; color: var(--sdp-brand-navy, #16243C); text-align: left; cursor: pointer; }
.sdp-accordion__trigger:hover { background: var(--color-surface-2, #EFEBE0); }
.sdp-accordion__trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-focus-border, #B5904A); }
.sdp-accordion__trigger > .sdp-icon { width: 18px; height: 18px; margin-left: auto; flex: 0 0 auto; color: var(--color-text-muted, #6B7280); transition: transform var(--transition-base, 250ms ease); }
.sdp-accordion__trigger[aria-expanded="true"] > .sdp-icon { transform: rotate(180deg); }
.sdp-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition-base, 250ms ease); }
.sdp-accordion__trigger[aria-expanded="true"] + .sdp-accordion__panel { grid-template-rows: 1fr; }
.sdp-accordion__panel > div { overflow: hidden; min-height: 0; }
.sdp-accordion__body { padding: 0 var(--space-5, 1.25rem) var(--space-4, 1rem); color: var(--color-text-secondary, #4B5563); font-size: var(--font-size-sm, .875rem); line-height: 1.6; }

/* --- Stepper (progresso em etapas) --- */
.sdp-stepper { display: flex; align-items: flex-start; }
.sdp-stepper__step { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; text-align: center; gap: var(--space-2, .5rem); }
.sdp-stepper__step:not(:first-child)::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--color-border-strong, #C8BFA8); }
.sdp-stepper__step--done:not(:first-child)::before, .sdp-stepper__step--current:not(:first-child)::before { background: var(--sdp-brand-gold, #B5904A); }
.sdp-stepper__bullet { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--color-surface, #FFFCF5); border: 2px solid var(--color-border-strong, #C8BFA8); color: var(--color-text-muted, #6B7280); font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-sm, .875rem); }
.sdp-stepper__bullet .sdp-icon { width: 16px; height: 16px; }
.sdp-stepper__step--done .sdp-stepper__bullet { background: var(--sdp-brand-gold, #B5904A); border-color: var(--sdp-brand-gold, #B5904A); color: #fff; }
.sdp-stepper__step--current .sdp-stepper__bullet { border-color: var(--sdp-brand-gold, #B5904A); color: var(--sdp-brand-gold, #B5904A); box-shadow: 0 0 0 4px var(--color-gold-100, #F7F0DC); }
.sdp-stepper__text { display: flex; flex-direction: column; gap: 2px; }
.sdp-stepper__label { font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--color-text-primary, #111827); }
.sdp-stepper__step--upcoming .sdp-stepper__label { color: var(--color-text-muted, #6B7280); font-weight: 500; }
.sdp-stepper__hint { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-stepper--vertical { flex-direction: column; align-items: stretch; }
.sdp-stepper--vertical .sdp-stepper__step { flex-direction: row; align-items: flex-start; text-align: left; flex: 0 0 auto; gap: var(--space-3, .75rem); padding-bottom: var(--space-5, 1.25rem); }
.sdp-stepper--vertical .sdp-stepper__step::before { display: none; }
.sdp-stepper--vertical .sdp-stepper__step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: -2px; width: 2px; background: var(--color-border-strong, #C8BFA8); }
.sdp-stepper--vertical .sdp-stepper__step--done:not(:last-child)::after { background: var(--sdp-brand-gold, #B5904A); }
.sdp-stepper--vertical .sdp-stepper__text { padding-top: 4px; }

/* --- Alert: dismissível + ação --- */
.sdp-alert { position: relative; }
.sdp-alert__body { flex: 1; }
.sdp-alert__actions { display: flex; gap: var(--space-3, .75rem); margin-top: var(--space-2, .5rem); }
.sdp-alert__close { flex: 0 0 auto; align-self: flex-start; border: none; background: transparent; color: inherit; opacity: .55; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm, 4px); }
.sdp-alert__close:hover { opacity: 1; background: rgba(0,0,0,.07); }

/* --- Toast: pilha, variantes, ação e fechar (surface navy única) --- */
.sdp-toast-stack { display: flex; flex-direction: column; gap: var(--space-2, .5rem); align-items: flex-start; }
.sdp-toast__icon { display: inline-flex; flex: 0 0 auto; color: var(--sdp-brand-gold, #C9A560); }
.sdp-toast--success .sdp-toast__icon { color: #4ADE80; }
.sdp-toast--danger  .sdp-toast__icon { color: #F87171; }
.sdp-toast--warning .sdp-toast__icon { color: #FBBF24; }
.sdp-toast--info    .sdp-toast__icon { color: #60A5FA; }
.sdp-toast__msg { flex: 1; }
.sdp-toast__action { border: none; background: transparent; color: var(--sdp-brand-gold, #C9A560); font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-sm); cursor: pointer; padding: 0 4px; white-space: nowrap; }
.sdp-toast__action:hover { text-decoration: underline; }
.sdp-toast__close { border: none; background: transparent; color: rgba(255,255,255,.55); cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm, 4px); flex: 0 0 auto; }
.sdp-toast__close:hover { color: #fff; background: rgba(255,255,255,.12); }
/* região flutuante: o toast aparece SEMPRE, independente do scroll */
.sdp-toast-region { position: fixed; top: var(--space-4, 1rem); right: var(--space-4, 1rem); z-index: var(--z-index-toast, 1200); display: flex; flex-direction: column; gap: var(--space-2, .5rem); align-items: flex-end; pointer-events: none; max-width: min(92vw, 380px); }
.sdp-toast-region .sdp-toast { pointer-events: auto; transition: opacity .25s ease, transform .25s ease; animation: sdp-toast-in .25s ease; }
@keyframes sdp-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .sdp-toast-region { left: var(--space-4, 1rem); right: var(--space-4, 1rem); top: auto; bottom: var(--space-4, 1rem); align-items: stretch; max-width: none; } }

/* --- Progress --- */
.sdp-progress { height: 10px; background: var(--color-surface-2, #EFEBE0); border-radius: var(--radius-full, 9999px); overflow: hidden; width: 100%; }
.sdp-progress__fill { height: 100%; background: linear-gradient(90deg, var(--sdp-brand-navy, #16243C), var(--sdp-brand-gold, #B5904A)); border-radius: inherit; transition: width .4s ease; }
.sdp-progress--sm { height: 6px; }
.sdp-progress__fill--success { background: var(--color-status-success, #16A34A); }
.sdp-progress__fill--danger  { background: var(--color-status-danger, #DC2626); }
.sdp-progress-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sdp-progress-field__head { display: flex; justify-content: space-between; font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-progress-field__head b { font-variant-numeric: tabular-nums; color: var(--color-text-secondary, #4B5563); }
.sdp-progress--indeterminate .sdp-progress__fill { width: 40%; animation: sdp-progress-slide 1.2s ease-in-out infinite; }
@keyframes sdp-progress-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* --- Breadcrumb --- */
.sdp-breadcrumb { display: flex; align-items: center; gap: var(--space-2, .5rem); font-size: var(--font-size-sm, .875rem); list-style: none; padding: 0; margin: 0; }
.sdp-breadcrumb a { color: var(--color-text-muted, #6B7280); text-decoration: none; }
.sdp-breadcrumb a:hover { color: var(--sdp-brand-navy, #16243C); }
.sdp-breadcrumb li[aria-current] { color: var(--sdp-brand-navy, #16243C); font-weight: 600; }
.sdp-breadcrumb .sdp-breadcrumb__sep { color: var(--color-text-subtle, #9CA3AF); }

/* Breadcrumb "em caixa": pílula com borda + fundo soft — trilha destacada (ex.: acima de um header --banner) */
.sdp-breadcrumb--boxed { width: fit-content; max-width: 100%; padding: var(--space-2, .5rem) var(--space-3, .75rem); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-md, 8px); background: var(--color-surface-1, #F6F4EE); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06)); margin-bottom: var(--space-4, 1rem); }

/* --- Tabs (componente) --- */
.sdp-tabset { display: flex; gap: var(--space-1, .25rem); border-bottom: 1px solid var(--color-border-subtle); }
.sdp-tabset button { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); border: none; background: none; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); padding: var(--space-3, .75rem) var(--space-4, 1rem); border-bottom: 2px solid transparent; cursor: pointer; }
.sdp-tabset button.is-active { color: var(--sdp-brand-navy); border-bottom-color: var(--sdp-brand-gold); }
/* Ícone na aba: mesma linha do rótulo, herda a cor do estado (canônico A3) */
.sdp-tabset button .sdp-icon { flex: 0 0 auto; width: 1.05em; height: 1.05em; }

/* --- Dropdown --- */
.sdp-dropdown { position: relative; display: inline-block; }
.sdp-dropdown__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: #fff; border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-lg); padding: var(--space-2, .5rem); display: none; z-index: var(--z-index-dropdown, 1050); }
.sdp-dropdown.is-open .sdp-dropdown__menu { display: block; }
.sdp-dropdown__item { display: block; width: 100%; text-align: left; border: none; background: none; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text-primary); padding: var(--space-2, .5rem) var(--space-3, .75rem); border-radius: var(--radius-sm, 4px); cursor: pointer; }
.sdp-dropdown__item { display: flex; align-items: center; gap: var(--space-2, .5rem); }
.sdp-dropdown__item:hover { background: var(--color-surface-2, #EFEBE0); }
.sdp-dropdown__divider { height: 1px; margin: var(--space-2, .5rem) 0; background: var(--color-border-subtle, #DDD6C4); border: none; }
.sdp-dropdown__item--danger { color: var(--color-status-danger, #DC2626); }
.sdp-dropdown__item--danger:hover { background: var(--color-danger-soft, #FEF2F2); }
.sdp-dropdown__menu--right { left: auto; right: 0; }
.sdp-dropdown__item .sdp-icon { color: var(--color-text-muted, #6B7280); }
.sdp-dropdown__item--danger .sdp-icon { color: currentColor; }

/* --- Breadcrumb: ícone + chevron --- */
.sdp-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); }
.sdp-breadcrumb a { display: inline-flex; align-items: center; gap: 5px; }
.sdp-breadcrumb .sdp-breadcrumb__sep { color: var(--color-text-subtle, #9CA3AF); display: inline-flex; }

/* --- Tabs: contador + variante segmentada (filtros) --- */
.sdp-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: var(--radius-full, 9999px); background: var(--color-surface-2, #EFEBE0); color: var(--color-text-secondary, #4B5563); font-size: 11px; font-weight: 700; line-height: 1; }
.sdp-tabset button.is-active .sdp-tab__count { background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); }
.sdp-tabset--pill { border-bottom: none; gap: var(--space-2, .5rem); flex-wrap: wrap; }
.sdp-tabset--pill button { border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-full, 9999px); padding: var(--space-2, .5rem) var(--space-4, 1rem); color: var(--color-text-secondary, #4B5563); }
.sdp-tabset--pill button:hover { background: var(--color-surface-2, #EFEBE0); color: var(--sdp-brand-navy, #16243C); }
body.sdp-redesigned .sdp-tabset--pill button.is-active { background: var(--sdp-brand-navy, #16243C); border-color: var(--sdp-brand-navy, #16243C); color: #fff; }
.sdp-tabset--pill button.is-active .sdp-tab__count { background: rgba(255,255,255,.2); color: #fff; }

/* --- Modal --- */
.sdp-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; z-index: var(--z-index-modal, 1100); padding: var(--space-4, 1rem); }
/* opacity:1 + visibility derrotam o modal.css (que deixa todo overlay opacity:0,
   revelando só com .sdp-modal-show — classe que o modal de redesign NÃO usa). */
.sdp-modal-overlay.is-open { display: flex; opacity: 1; visibility: visible; }
/* Override do modal.css legado: ele e injetado em runtime por modal.js (createElement+href),
   entao vence a cascata por ordem de carga e forca .sdp-modal-overlay para display:flex
   (overlay invisivel cobrindo a tela e bloqueando todos os cliques da pagina). Reancoramos a
   regra canonica com especificidade maior, escopada aos modais ESTATICOS de pagina
   (overlay > .sdp-modal), sem tocar no modal premium do modal.css (overlay > .sdp-modal-dialog). */
body.sdp-redesigned .sdp-modal-overlay:has(> .sdp-modal) { display: none; }
body.sdp-redesigned .sdp-modal-overlay.is-open:has(> .sdp-modal) { display: flex; opacity: 1; visibility: visible; }
.sdp-modal { background: #fff; border-radius: var(--radius-xl, 14px); box-shadow: var(--shadow-xl); width: 100%; max-width: 460px; overflow: hidden; }
.sdp-modal__header { padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem); border-bottom: 1px solid var(--color-border-subtle); }
.sdp-modal__header h3 { font-family: var(--font-display); color: var(--sdp-brand-navy); font-size: var(--font-size-lg); }
.sdp-modal__body { padding: var(--space-6, 1.5rem); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.sdp-modal__footer { padding: var(--space-4, 1rem) var(--space-6, 1.5rem); background: var(--color-surface-1, #F6F4EE); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
/* Modal de feedback (popup central com ícone) — quando o toast não basta */
.sdp-modal--feedback { max-width: 400px; text-align: center; }
.sdp-modal--feedback .sdp-modal__body { padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem) var(--space-2, .5rem); }
.sdp-modal--feedback .sdp-modal__footer { background: transparent; border-top: none; justify-content: center; padding-top: var(--space-2, .5rem); }
.sdp-modal--feedback h3 { font-family: var(--font-display); color: var(--sdp-brand-navy, #16243C); font-size: var(--font-size-xl, 1.25rem); }
.sdp-modal__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--space-4, 1rem); }
.sdp-modal__icon--success { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); }
.sdp-modal__icon--danger  { background: var(--color-danger-soft, #FEF2F2); color: var(--color-status-danger, #DC2626); }
.sdp-modal__icon--warning { background: var(--color-warning-soft, #FEF3C7); color: var(--color-status-warning, #CA8A04); }
.sdp-modal__icon--info    { background: var(--color-info-soft, #DBEAFE); color: var(--color-status-info, #2563EB); }
/* Overlays — tamanhos, botão fechar, corpo rolável, bottom-sheet no mobile */
.sdp-modal--sm { max-width: 380px; }
.sdp-modal--lg { max-width: 640px; }
.sdp-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, .75rem); }
.sdp-modal__header h3 { flex: 1; }
.sdp-modal__close { flex: 0 0 auto; border: none; background: transparent; color: var(--color-text-muted, #6B7280); cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -8px -4px 0; border-radius: var(--radius-sm, 4px); }
.sdp-modal__close:hover { background: var(--color-surface-2, #EFEBE0); color: var(--sdp-brand-navy, #16243C); }
.sdp-modal__body--scroll { max-height: 56vh; overflow-y: auto; }
/* preserva quebras de linha do conteúdo (ex.: mensagem WhatsApp completa) */
.sdp-modal__body--prewrap { white-space: pre-wrap; line-height: 1.6; }
/* poço de pré-visualização de mensagem (ex.: prévia do texto no modal de envio) */
.sdp-msg-preview { margin-top: var(--space-2, .5rem); padding: var(--space-3, .75rem); border-radius: var(--radius-md, 8px); background: var(--color-surface-2, #EFEBE0); white-space: pre-wrap; font-size: var(--font-size-sm, .8125rem); line-height: 1.5; color: var(--color-text-primary, #111827); }
@media (max-width: 520px) {
  .sdp-modal-overlay { align-items: flex-end; padding: 0; }
  .sdp-modal, .sdp-modal--sm, .sdp-modal--lg { max-width: none; border-radius: var(--radius-xl, 14px) var(--radius-xl, 14px) 0 0; }
}

/* Page header — banda plana: trilha + título + contexto + ações (sem card, sem gradiente) */
.sdp-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4, 1rem); flex-wrap: wrap; padding-bottom: var(--space-4, 1rem); margin-bottom: var(--space-6, 1.5rem); border-bottom: 1px solid var(--color-border-subtle, #DDD6C4); }
.sdp-page-header__crumb { flex: 1 1 100%; }
/* flex-basis 0: sem isso o main mede o subtítulo inteiro numa linha (max-content)
   e empurra o .sdp-header-brand pra baixo quando o texto é longo */
.sdp-page-header__main { display: flex; align-items: center; gap: var(--space-3, .75rem); min-width: 0; flex: 1 1 0; }
.sdp-page-header__icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md, 8px); background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); }
.sdp-page-header__text { min-width: 0; }
.sdp-page-header__title { font-family: var(--font-display); font-size: var(--font-size-3xl, 1.875rem); font-weight: 700; color: var(--sdp-brand-navy, #16243C); line-height: 1.15; margin: 0; }
.sdp-page-header__subtitle { margin: 4px 0 0; color: var(--color-text-muted, #6B7280); font-size: var(--font-size-base, 1rem); line-height: 1.5; }
.sdp-page-header__actions { display: flex; align-items: center; gap: var(--space-2, .5rem); flex: 0 0 auto; flex-wrap: wrap; }
/* Variante "destaque" sutil: fio dourado no topo em vez de borda embaixo (sem gradiente/glow) */
.sdp-page-header--accent { border-bottom: none; border-top: 3px solid var(--sdp-brand-gold, #B5904A); padding-top: var(--space-4, 1rem); padding-bottom: 0; }
/* Variante "painel": header como SUPERFÍCIE contida (fundo sutil + fio dourado no topo) — mais presença que o --accent, sem o peso do hero */
.sdp-page-header--panel { background: var(--color-surface-1, #F6F4EE); border: 1px solid var(--color-border-subtle, #DDD6C4); border-top: 3px solid var(--sdp-brand-gold, #B5904A); border-radius: var(--radius-lg, 10px); padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem); }
/* Variante "banner": header navy com textura de grade (quadriculado) — presença de hero p/ hubs. Combine com .sdp-breadcrumb--boxed acima. Navy nos 2 temas (texto branco). */
.sdp-page-header--banner { position: relative; overflow: hidden; align-items: center; border: none; border-radius: var(--radius-lg, 10px); padding: var(--space-6, 1.5rem) var(--space-8, 2rem); color: #fff; background-color: var(--color-navy-900, #1F2D4A); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(135deg, var(--color-navy-950, #16243C), var(--color-navy-900, #1F2D4A)); background-size: 32px 32px, 32px 32px, cover; }
.sdp-page-header--banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sdp-brand-gold, #B5904A); }
.sdp-page-header--banner .sdp-page-header__title { color: #fff; }
.sdp-page-header--banner .sdp-page-header__subtitle { color: rgba(255,255,255,.78); }
.sdp-page-header--banner .sdp-page-header__icon { background: rgba(255,255,255,.12); color: #fff; }

/* Marca do cabecalho: logo do sistema + tile da data de hoje (preenchido por header-data.js).
   Bloco UNICO reusado no hero (dashboard) e no --banner (demais paginas) — "uma so" marca de topo.
   Pele p/ fundo navy (texto branco, tile translucido). Em fundo claro precisaria de variante. */
.sdp-header-brand { display: inline-flex; align-items: center; gap: var(--space-3, .75rem); flex: 0 0 auto; }
.sdp-header-brand__logo { height: 64px; width: auto; flex: 0 0 auto; opacity: .92; }
.sdp-header-brand__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-3, .75rem) var(--space-4, 1rem); border-radius: var(--radius-md, 8px); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); }
.sdp-header-brand__day { font-family: var(--font-display); font-size: var(--font-size-4xl, 2.25rem); font-weight: 700; line-height: 1; }
.sdp-header-brand__label { font-size: var(--font-size-xs, .75rem); text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-top: 2px; }
@media (max-width: 760px) { .sdp-header-brand { width: 100%; justify-content: flex-start; } }
@media (max-width: 640px) {
  .sdp-page-header { flex-direction: column; }
  .sdp-page-header__actions { width: 100%; }
  .sdp-page-header__actions .sdp-btn { flex: 1; justify-content: center; }
}

/* --- Título de seção: rótulo acima de um grupo de cards/conteúdo --- */
.sdp-section-title { font-family: var(--font-display); font-size: var(--font-size-xl, 1.25rem); font-weight: 700; letter-spacing: -.01em; color: var(--sdp-brand-navy, #16243C); margin: 0; }

/* ===== Sidebar (nav lateral) — superfície clara, ativo plano c/ barra dourada (zero glow) ===== */
.sdp-sidebar { width: var(--sdp-sidebar-w, 288px); display: flex; flex-direction: column; background: var(--color-surface, #FFFCF5); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-lg, 12px); overflow: hidden; }
.sdp-sidebar__brand { display: flex; align-items: center; gap: var(--space-3, .75rem); padding: var(--space-4, 1rem); border-bottom: 1px solid var(--color-border-subtle, #DDD6C4); }
.sdp-sidebar__brand-logo { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-md, 8px); background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); }
.sdp-sidebar__brand-name { font-size: var(--font-size-xs, .75rem); font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .03em; color: var(--sdp-brand-navy, #16243C); }
.sdp-sidebar__nav { padding: var(--space-2, .5rem); }
.sdp-sidebar__section { padding: var(--space-2, .5rem) 0; }
.sdp-sidebar__section + .sdp-sidebar__section { border-top: 1px solid var(--color-border-subtle, #DDD6C4); }
.sdp-sidebar__title { margin: 0; padding: var(--space-2, .5rem) var(--space-3, .75rem) var(--space-1, .25rem); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted, #6B7280); }
.sdp-sidebar__item { position: relative; display: flex; align-items: center; gap: var(--space-3, .75rem); width: 100%; margin: 1px 0; padding: var(--space-2, .5rem) var(--space-3, .75rem); border: none; background: transparent; border-radius: var(--radius-md, 8px); color: var(--color-text-secondary, #475063); font: inherit; font-size: var(--font-size-sm, .875rem); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.sdp-sidebar__item:hover { background: var(--color-gold-50, #FBF7EC); color: var(--sdp-brand-navy, #16243C); }
.sdp-sidebar__item-icon { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm, 6px); background: var(--color-surface-2, #F1ECDD); color: var(--color-text-secondary, #475063); transition: background .15s, color .15s; }
.sdp-sidebar__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdp-sidebar__item-arrow { flex: 0 0 auto; color: var(--color-text-muted, #9AA3B5); transition: transform .2s; }
.sdp-sidebar__item[aria-expanded="true"] .sdp-sidebar__item-arrow { transform: rotate(90deg); }
.sdp-sidebar__item.is-active { background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-navy, #16243C); font-weight: 600; }
.sdp-sidebar__item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--sdp-brand-gold, #B5904A); }
.sdp-sidebar__item.is-active .sdp-sidebar__item-icon { background: var(--sdp-brand-navy, #16243C); color: #fff; }
.sdp-sidebar__item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-gold-300, #C9A560); }
.sdp-sidebar__sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px; padding-left: 36px; }
.sdp-sidebar__subitem { display: flex; align-items: center; gap: var(--space-2, .5rem); padding: 6px var(--space-3, .75rem); border-radius: var(--radius-sm, 6px); color: var(--color-text-muted, #6B7280); text-decoration: none; font-size: .8125rem; cursor: pointer; }
.sdp-sidebar__subitem::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.sdp-sidebar__subitem:hover { background: var(--color-gold-50, #FBF7EC); color: var(--sdp-brand-navy, #16243C); }
.sdp-sidebar__subitem.is-active { color: var(--sdp-brand-navy, #16243C); font-weight: 600; }
.sdp-sidebar__subitem.is-active::before { opacity: 1; background: var(--sdp-brand-gold, #B5904A); }
/* variante compacta — rail só de ícones */
.sdp-sidebar--rail { width: var(--sdp-sidebar-rail-w, 72px); }
.sdp-sidebar--rail .sdp-sidebar__brand { justify-content: center; padding: var(--space-3, .75rem) 0; }
.sdp-sidebar--rail .sdp-sidebar__brand-name, .sdp-sidebar--rail .sdp-sidebar__title, .sdp-sidebar--rail .sdp-sidebar__item-label, .sdp-sidebar--rail .sdp-sidebar__item-arrow, .sdp-sidebar--rail .sdp-sidebar__sub { display: none; }
.sdp-sidebar--rail .sdp-sidebar__item { justify-content: center; padding: var(--space-2, .5rem); gap: 0; }

/* ===== Topbar (barra superior) — fundo claro, controles planos, foco visível, zero glow ===== */
.sdp-topbar { display: flex; align-items: center; gap: var(--space-4, 1rem); width: 100%; height: var(--topbar-height, 64px); padding: 0 var(--space-4, 1rem); background: var(--color-surface, #FFFCF5); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-lg, 12px); }
.sdp-topbar__left { display: flex; align-items: center; gap: var(--space-3, .75rem); min-width: 0; flex: 0 1 auto; }
.sdp-topbar__center { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.sdp-topbar__right { display: flex; align-items: center; gap: var(--space-2, .5rem); flex: 0 0 auto; margin-left: auto; }
.sdp-topbar__school { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sdp-brand-navy, #16243C); font-weight: 600; font-size: var(--font-size-sm, .875rem); }
.sdp-topbar__icon-btn { position: relative; flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--control-border, #DDD6C4); border-radius: var(--radius-md, 8px); background: var(--control-bg, #fff); color: var(--color-text-secondary, #475063); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sdp-topbar__icon-btn:hover { background: var(--color-gold-50, #FBF7EC); border-color: var(--color-gold-300, #C9A560); color: var(--sdp-brand-navy, #16243C); }
.sdp-topbar__icon-btn:focus-visible { outline: none; border-color: var(--sdp-brand-gold, #B5904A); box-shadow: 0 0 0 3px var(--color-gold-200, #EADFBE); }
.sdp-topbar__badge { position: absolute; top: 6px; right: 6px; min-width: 7px; height: 7px; border-radius: 50%; background: var(--color-status-danger, #DC2626); }
.sdp-topbar__search { display: flex; align-items: center; gap: var(--space-2, .5rem); width: 100%; max-width: 380px; height: 38px; padding: 0 var(--space-3, .75rem); border: 1px solid var(--control-border, #DDD6C4); border-radius: var(--radius-md, 8px); background: var(--control-bg, #fff); color: var(--color-text-muted, #6B7280); }
.sdp-topbar__search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--color-text-primary, #16243C); font: inherit; font-size: var(--font-size-sm, .875rem); outline: none; }
.sdp-topbar__search:focus-within { border-color: var(--sdp-brand-gold, #B5904A); box-shadow: 0 0 0 3px var(--color-gold-200, #EADFBE); }
.sdp-topbar__select { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; height: 38px; padding: 0 var(--space-3, .75rem); border: 1px solid var(--control-border, #DDD6C4); border-radius: var(--radius-md, 8px); background: var(--control-bg, #fff); cursor: pointer; transition: border-color .15s; }
.sdp-topbar__select:hover { border-color: var(--color-gold-300, #C9A560); }
.sdp-topbar__select-label { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted, #6B7280); line-height: 1; }
.sdp-topbar__select-value { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--sdp-brand-navy, #16243C); line-height: 1.1; }
.sdp-topbar__avatar { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--sdp-brand-navy, #16243C); color: #fff; font-size: var(--font-size-xs, .75rem); font-weight: 700; }
.sdp-topbar__logout { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); height: 38px; padding: 0 var(--space-3, .75rem); border: 1px solid var(--control-border, #DDD6C4); border-radius: var(--radius-md, 8px); background: transparent; color: var(--color-text-secondary, #475063); font: inherit; font-size: var(--font-size-sm, .875rem); font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sdp-topbar__logout:hover { background: var(--color-danger-soft, #FEF2F2); border-color: var(--color-danger-border, #FECACA); color: var(--color-status-danger, #DC2626); }
@media (max-width: 760px) {
  .sdp-topbar { --topbar-height: 56px; }
  .sdp-topbar__center, .sdp-topbar__select, .sdp-topbar__logout span { display: none; }
}

/* ----------------------------------------------------------------------------
   ANEXOS DE PROVA — dropzone de upload + lista de arquivos anexados
   Widget reutilizável (medidas, encaminhamentos...). Acento = dourado da marca.
   Fundos em tokens de surface p/ flipar no escuro; navy-as-texto/badge ganha
   override no bloco dark (d) abaixo.
   ---------------------------------------------------------------------------- */
.sdp-anexos-card {
  background: var(--color-surface-0, #fff);
  border: 1px solid rgba(181, 144, 74, .35);
  border-left: 4px solid var(--sdp-brand-gold, #B5904A);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4, 1rem) var(--space-5, 1.125rem);
  margin-top: var(--space-6, 1.5rem);
  margin-bottom: var(--space-4, 1rem);
}
.sdp-anexos-card-header {
  display: flex; align-items: center; gap: var(--space-2, .5rem);
  font-weight: 600; font-size: var(--font-size-sm, .875rem);
  margin-bottom: 4px;
  color: var(--color-text-primary, #111827);
}
.sdp-anexos-hint {
  font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280);
  margin-bottom: var(--space-3, .75rem);
}
.sdp-anexos-dropzone {
  display: flex;                 /* label é inline-block por default — força bloco e centraliza conteúdo */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  border: 1px dashed rgba(181, 144, 74, .58);
  border-radius: var(--radius-md, 10px);
  padding: 22px 18px;
  text-align: center;
  cursor: pointer;
  background: var(--color-surface-1, #F6F4EE);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sdp-anexos-dropzone:hover {
  background: var(--color-gold-100, #F7F0DC);
  border-color: var(--sdp-brand-gold, #B5904A);
  box-shadow: inset 0 0 0 1px rgba(181, 144, 74, .18);
}
.sdp-anexos-dropzone.is-dragging {
  background: rgba(181, 144, 74, .14);
  border-color: var(--sdp-brand-gold, #B5904A);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42));
}
.sdp-anexos-dropzone.is-disabled {
  opacity: .55; cursor: not-allowed;
}
.sdp-anexos-dropzone-text {
  font-size: var(--font-size-sm, .8125rem); color: var(--color-text-secondary, #4B5563);
  line-height: 1.45;
  text-align: center;
}
.sdp-anexos-dropzone-text strong {
  color: var(--sdp-brand-gold, #B5904A);
}
/* Pré-visualização de imagem: placeholder com ícone (sem broken-image quando vazia).
   A img recebe/perde a classe .sdp-hidden via JS; o placeholder some quando há imagem. */
.sdp-img-preview {
  position: relative; margin-top: var(--space-2, .5rem);
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; overflow: hidden;
  border: 1px dashed var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface-1, #F6F4EE);
}
.sdp-img-preview__img { display: block; max-width: 100%; max-height: 320px; border-radius: var(--radius-md, 10px); }
.sdp-img-preview__placeholder {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2, .5rem);
  padding: var(--space-5, 1.5rem); text-align: center;
  color: var(--color-text-muted, #6B7280); font-size: var(--font-size-sm, .8125rem);
}
.sdp-img-preview__placeholder .sdp-icon { width: 28px; height: 28px; opacity: .6; }
.sdp-img-preview:has(> .sdp-img-preview__img:not(.sdp-hidden)) .sdp-img-preview__placeholder { display: none; }

/* variante com miniatura à esquerda + texto à esquerda (ex.: upload de logo) */
.sdp-anexos-dropzone--inline { justify-content: flex-start; gap: var(--space-4, 1rem); text-align: left; }
.sdp-anexos-dropzone--inline .sdp-anexos-dropzone-text { text-align: left; }
.sdp-logo-thumb {
  flex: 0 0 auto; width: 80px; height: 80px; border-radius: var(--radius-md, 12px);
  background: var(--color-surface-2, #EFEBE0);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--color-text-subtle, #9CA3AF);
}
.sdp-logo-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sdp-anexos-dropzone__icon {
  width: 30px; height: 30px; flex: 0 0 auto;
  color: var(--sdp-brand-gold, #B5904A);
}

/* Tutorial card — barra clicavel (<a>) em navy solido (padrao do sistema, sem gradiente),
   icone + titulo a esquerda e CTA pill a direita. Mais elegante que um alerta para apontar tutoriais. */
.sdp-tutorial-card {
  display: flex; align-items: center; gap: var(--space-3, .75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-lg, 12px);
  background: var(--sdp-brand-navy, #16243C);
  color: #fff; text-decoration: none;
  box-shadow: 0 4px 16px rgba(22, 36, 60, .16);
  transition: box-shadow .15s ease, transform .15s ease;
}
.sdp-tutorial-card:hover { box-shadow: 0 8px 24px rgba(22, 36, 60, .22); transform: translateY(-1px); }
.sdp-tutorial-card__icon { display: inline-flex; flex: 0 0 auto; }
.sdp-tutorial-card__icon .sdp-icon { width: 22px; height: 22px; }
.sdp-tutorial-card__title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--font-size-md, 1rem); }
.sdp-tutorial-card__cta {
  flex: 0 0 auto; font-size: var(--font-size-sm, .8125rem); font-weight: 600;
  background: rgba(255, 255, 255, .2); padding: 6px 14px; border-radius: 999px;
}
.sdp-anexos-input {
  /* CSS globais do projeto têm regras agressivas em input — !important garante */
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}
.sdp-anexos-lista {
  display: flex; flex-direction: column; gap: var(--space-2, .5rem);
  margin-top: var(--space-3, .75rem);
}
.sdp-anexos-lista:empty { display: none; }
.sdp-anexo-item {
  display: flex; align-items: center; gap: var(--space-3, .625rem);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  background: var(--color-surface-0, #fff);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-md, 8px);
  transition: border-color .15s ease, background .15s ease;
}
.sdp-anexo-item:hover { border-color: rgba(181, 144, 74, .42); background: var(--color-surface-1, #F6F4EE); }
.sdp-anexo-icone {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm, 6px);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs, .75rem); font-weight: 700;
  color: var(--color-text-inverse, #fff);
}
.sdp-anexo-icone.pdf { background: var(--color-danger, #E53935); }
.sdp-anexo-icone.img,
.sdp-anexo-icone.image { background: var(--sdp-brand-navy, #16243C); }
.sdp-anexo-icone.excel { background: var(--color-status-success, #16A34A); }
.sdp-anexo-icone.word { background: var(--color-status-info, #2563EB); }
/* miniatura de imagem dentro do item de anexo */
.sdp-anexo-thumb {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm, 6px);
  object-fit: cover;
}
.sdp-anexo-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
}
.sdp-anexo-nome {
  font-size: var(--font-size-sm, .8125rem); color: var(--color-text-primary, #111827);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sdp-anexo-meta {
  font-size: var(--font-size-xs, .6875rem); color: var(--color-text-muted, #6B7280);
}
.sdp-anexo-meta .badge-novo { color: var(--sdp-brand-gold, #B5904A); font-weight: 700; }
.sdp-anexo-meta .badge-existente { color: var(--sdp-brand-navy, #16243C); font-weight: 600; }
.sdp-anexo-acoes {
  display: flex; gap: 6px;
}
.sdp-anexo-btn {
  background: transparent; border: 1px solid transparent;
  color: var(--color-text-muted, #6B7280);
  border-radius: var(--radius-sm, 6px);
  padding: 4px 8px;
  cursor: pointer;
  font-size: var(--font-size-xs, .75rem);
  transition: background .12s ease, color .12s ease;
}
.sdp-anexo-btn:hover {
  background: var(--color-surface-2, #EFEBE0);
  color: var(--color-text-primary, #111827);
}
.sdp-anexo-btn.danger:hover {
  background: var(--color-danger-soft, #FEF2F2);
  color: var(--color-danger, #E53935);
}
.sdp-anexo-progress {
  height: 3px; background: rgba(181, 144, 74, .2);
  border-radius: 2px; overflow: hidden;
  margin-top: 6px;
}
.sdp-anexo-progress-bar {
  height: 100%; background: var(--sdp-brand-gold, #B5904A);
  transition: width .2s ease;
}

/* ============================================================================
   LEITOR DE CÓDIGO DE BARRAS (.sdp-barcode-scanner) — captura de ISBN via scanner USB
   ----------------------------------------------------------------------------
   Bloco com estado: idle → escaneando (.is-scanning, borda+input verdes + pulso no
   botão ativo). Composição: __label (título), __row (input-group + botão Ativar),
   __status (dot semântico + texto). O dot reusa .sdp-status-dot--*; --idle (cinza)
   e --waiting (verde piscando) são acréscimos deste componente. Tokenizado + dark.
   ============================================================================ */
.sdp-barcode-scanner {
  background: var(--color-info-soft, #DBEAFE);
  border: 1px dashed var(--color-status-info, #2563EB);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-4, 15px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sdp-barcode-scanner.is-scanning {
  background: var(--color-success-soft, #DCFCE7);
  border-style: solid;
  border-color: var(--color-status-success, #16A34A);
  box-shadow: 0 0 0 3px var(--color-success-soft, rgba(22, 163, 74, .15));
}
.sdp-barcode-scanner__label {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  font-size: var(--font-size-sm, 14px); font-weight: 600;
  color: var(--color-status-info, #2563EB);
  margin-bottom: var(--space-3, 10px);
}
.sdp-barcode-scanner.is-scanning .sdp-barcode-scanner__label {
  color: var(--color-status-success, #16A34A);
}
.sdp-barcode-scanner__row {
  display: flex; gap: var(--space-3, 10px); align-items: center;
}
.sdp-barcode-scanner__row > .sdp-input-group { flex: 1 1 auto; min-width: 0; }
.sdp-barcode-scanner__status {
  display: flex; align-items: center; gap: var(--space-2, 6px);
  font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6B7280);
  margin: var(--space-2, 8px) 0 0;
  min-height: 18px;
}
.sdp-status-dot--idle { background: var(--color-text-subtle, #9CA3AF); }
.sdp-status-dot--waiting { background: var(--color-status-success, #16A34A); animation: sdp-blink 1s infinite; }
@keyframes sdp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* botão "Ativar Leitor" em estado escaneando (pulso) — usa .sdp-btn--success.is-scanning */
.sdp-btn--success.is-scanning { animation: sdp-pulse-scan 2s infinite; }
@keyframes sdp-pulse-scan {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-success-soft, rgba(22, 163, 74, .4)); }
  50% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
}
/* divisor "ou preencha manualmente" (regra horizontal com rótulo central) */
.sdp-divider-label {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  margin: var(--space-4, 16px) 0;
  color: var(--color-text-muted, #9CA3AF);
  font-size: var(--font-size-xs, 12px);
  text-transform: uppercase; letter-spacing: .05em;
}
.sdp-divider-label::before,
.sdp-divider-label::after {
  content: ''; flex: 1; height: 1px;
  background: var(--color-border-subtle, #E5E7EB);
}

/* ============================================================================
   CHROME (topbar + sidebar) — tokens canônicos (light)
   ----------------------------------------------------------------------------
   Migrados de sidebar-redesigned.css, onde eram privados (body.sdp-redesigned).
   Agora vivem na fonte canônica (hand-edited) p/ rastreabilidade e reuso. Os
   overrides dark espelham no bloco :root[data-theme="dark"] abaixo. O navy do
   chrome usa --color-navy-900 (#1F2D4A) direto — não há token --sdp-sidebar-navy.
   Escala --color-gold-aXX = dourado de marca (#B5904A) com alpha, p/ os estados
   do botão de toggle da topbar (eram rgba() literais).
   ============================================================================ */
:root {
  /* sidebar — superfícies / texto */
  --sdp-sidebar-bg-1:        #FEFCF8;
  --sdp-sidebar-bg-2:        #F4EEDD;
  --sdp-sidebar-bg-glaze:    rgba(181, 144, 74, 0.045);
  --sdp-sidebar-grain:       rgba(31, 45, 74, 0.02);

  --sdp-sidebar-ink:         #0F1A2E;
  --sdp-sidebar-ink-muted:   #475063;
  --sdp-sidebar-ink-faint:   #6B7488;
  --sdp-sidebar-title:       #7A6644;
  --sdp-sidebar-arrow:       #9AA3B5;

  /* sidebar — linhas / divisores */
  --sdp-sidebar-line:        rgba(31, 45, 74, 0.13);
  --sdp-sidebar-line-soft:   rgba(31, 45, 74, 0.07);
  --sdp-sidebar-line-faint:  rgba(31, 45, 74, 0.04);

  /* sidebar — surfaces interativas */
  --sdp-sidebar-hover-bg:        rgba(181, 144, 74, 0.09);
  --sdp-sidebar-hover-bg-strong: rgba(181, 144, 74, 0.14);
  --sdp-sidebar-hover-border:    rgba(181, 144, 74, 0.18);

  /* sidebar — ouro institucional */
  --sdp-sidebar-gold:        #B5904A;
  --sdp-sidebar-gold-warm:   #C9A05A;
  --sdp-sidebar-gold-soft:   rgba(181, 144, 74, 0.22);
  --sdp-sidebar-gold-line:   rgba(181, 144, 74, 0.34);
  --sdp-sidebar-gold-glow:   rgba(181, 144, 74, 0.32);

  /* sidebar — container de ícone */
  --sdp-sidebar-icon-bg:        rgba(31, 45, 74, 0.05);
  --sdp-sidebar-icon-bg-hover:  rgba(181, 144, 74, 0.16);
  --sdp-sidebar-icon-ink:       #4A5567;
  --sdp-sidebar-icon-ink-hover: #17243C;

  /* sidebar — sombras / glows */
  --sdp-sidebar-shadow:        12px 0 32px -8px rgba(31, 45, 74, 0.10),
                               1px 0 0 0 rgba(31, 45, 74, 0.04);
  --sdp-sidebar-active-glow:   0 6px 14px -8px rgba(181, 144, 74, 0.55),
                               inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  --sdp-sidebar-focus-ring:    0 0 0 2px rgba(181, 144, 74, 0.55),
                               0 0 0 4px rgba(181, 144, 74, 0.18);

  /* sidebar — estruturais */
  --sdp-sidebar-width:         288px;
  --sdp-sidebar-pad-x:         14px;
  --sdp-sidebar-radius-item:   10px;
  --sdp-sidebar-radius-sub:    8px;

  /* curvas de animação (chrome) */
  --sdp-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sdp-ease-decel:    cubic-bezier(0.0, 0, 0.2, 1);
  --sdp-ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --sdp-ease-emph:     cubic-bezier(0.2, 0, 0, 1);

  /* dourado de marca com alpha (estados do toggle da topbar) */
  --color-gold-a10: rgba(181, 144, 74, 0.10);
  --color-gold-a16: rgba(181, 144, 74, 0.16);
  --color-gold-a22: rgba(181, 144, 74, 0.22);
  --color-gold-a30: rgba(181, 144, 74, 0.30);
  --color-gold-a35: rgba(181, 144, 74, 0.35);
  --color-gold-a36: rgba(181, 144, 74, 0.36);
  --color-gold-a55: rgba(181, 144, 74, 0.55);
}

/* ============================================================================
   RANKING / PÓDIO (.sdp-ranking) — listas de destaque por turma com medalhas
   ----------------------------------------------------------------------------
   Card de ranking (cabeçalho navy + linhas horizontais com posição, nome,
   colunas opcionais e barra de pontuação). As 3 primeiras posições recebem
   medalha (ouro/prata/bronze). Prata e bronze são cores de medalha (decoração
   semântica de pódio, sem token global equivalente) → custom properties locais
   da família, não vazam pro :root. Ouro usa o dourado de marca.
   Tokenizado, dark-aware, zero !important.
   ============================================================================ */
/* grade dos cards de ranking: auto-fit largo (cabe colunas Disc/Freq/Bol/Geral) */
.sdp-grid--ranking { grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); }
.sdp-grid--ranking-single { grid-template-columns: 1fr; }
@media (max-width: 768px) { .sdp-grid--ranking { grid-template-columns: 1fr; } }

.sdp-ranking {
  --sdp-medal-gold: var(--sdp-brand-gold, #B5904A);
  --sdp-medal-silver: #9AA3AD;
  --sdp-medal-bronze: #B07A47;
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--sdp-surface-card, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06));
}
.sdp-ranking__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, .75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: linear-gradient(135deg, var(--color-navy-950, #16243C), var(--color-navy-900, #1F2D4A));
  color: #fff;
}
.sdp-ranking__title { display: flex; align-items: center; gap: var(--space-2, .5rem); margin: 0; font-family: var(--font-display); font-size: var(--font-size-base, 1rem); font-weight: 700; letter-spacing: .02em; }
.sdp-ranking__meta { font-size: var(--font-size-sm, .8rem); font-weight: 500; opacity: .85; }
/* variante destaque (Top 10) — cabeçalho dourado */
.sdp-ranking--top10 .sdp-ranking__header { background: linear-gradient(135deg, var(--color-gold-500, #B5904A), var(--color-gold-200, #EDD99A)); color: var(--sdp-brand-navy, #16243C); }
.sdp-ranking--top10 .sdp-ranking__meta { color: rgba(22,36,60,.85); opacity: 1; }

.sdp-ranking__body { padding: var(--space-2, .5rem) var(--space-5, 1.25rem) var(--space-5, 1.25rem); }
.sdp-ranking__row {
  display: grid;
  grid-template-columns: 44px 1fr 90px minmax(120px, 32%);
  gap: var(--space-4, 1rem); align-items: center;
  padding: var(--space-3, .75rem) var(--space-2, .5rem);
  border-radius: var(--radius-sm, 8px);
  transition: background .15s ease;
}
.sdp-ranking__row + .sdp-ranking__row { border-top: 1px solid var(--color-border-subtle, #DDD6C4); }
.sdp-ranking__row:hover { background: var(--color-surface-1, #F6F4EE); }
/* variante "geral": pos | nome | Disc | Freq | Bol | Geral | Barra */
.sdp-ranking--geral .sdp-ranking__row { grid-template-columns: 38px minmax(110px, 1fr) 46px 56px 46px 64px minmax(70px, 16%); gap: var(--space-2, .5rem); }
/* cabeçalho de colunas */
.sdp-ranking__row--head { padding-bottom: var(--space-1, .25rem); border: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle, #9CA3AF); font-weight: 700; }
.sdp-ranking__row--head:hover { background: transparent; }

.sdp-ranking__pos { text-align: center; font-weight: 700; font-size: var(--font-size-base, .95rem); color: var(--color-text-subtle, #9CA3AF); }
.sdp-ranking__pos--medal { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; color: #fff; margin: 0 auto; }
.sdp-ranking__pos--gold   { background: var(--sdp-medal-gold); }
.sdp-ranking__pos--silver { background: var(--sdp-medal-silver); }
.sdp-ranking__pos--bronze { background: var(--sdp-medal-bronze); }

.sdp-ranking__name-wrap { min-width: 0; }
.sdp-ranking__name { font-weight: 600; font-size: var(--font-size-sm, .9rem); color: var(--color-text-primary, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdp-ranking__sub { font-size: var(--font-size-xs, .72rem); color: var(--color-text-muted, #6B7280); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sdp-ranking__num { text-align: right; font-size: var(--font-size-sm, .82rem); color: var(--color-text-secondary, #4B5563); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sdp-ranking__col-label { text-align: right; font-size: .68rem; font-weight: 700; color: var(--color-text-subtle, #9CA3AF); text-transform: uppercase; letter-spacing: .04em; }
.sdp-ranking__col-label--left { text-align: left; }

.sdp-ranking__value { font-weight: 800; font-size: var(--font-size-lg, 1.05rem); text-align: right; color: var(--color-text-primary, #111827); font-variant-numeric: tabular-nums; }
.sdp-ranking__value--empty { font-weight: 400; font-size: var(--font-size-sm, .85rem); color: var(--color-text-muted, #6B7280); font-style: italic; }
.sdp-ranking__row--gold   .sdp-ranking__value { color: var(--sdp-medal-gold); }
.sdp-ranking__row--silver .sdp-ranking__value { color: var(--sdp-medal-silver); }
.sdp-ranking__row--bronze .sdp-ranking__value { color: var(--sdp-medal-bronze); }

/* barra de pontuação (reaproveita a mecânica do .sdp-progress) */
.sdp-ranking__bar { height: 10px; background: var(--color-surface-2, #EFEBE0); border-radius: var(--radius-full, 6px); overflow: hidden; }
.sdp-ranking__bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sdp-brand-navy, #16243C), var(--sdp-brand-gold, #B5904A)); transition: width .8s cubic-bezier(.4,0,.2,1); }
.sdp-ranking__row--gold   .sdp-ranking__bar-fill { background: var(--sdp-medal-gold); }
.sdp-ranking__row--silver .sdp-ranking__bar-fill { background: var(--sdp-medal-silver); }
.sdp-ranking__row--bronze .sdp-ranking__bar-fill { background: var(--sdp-medal-bronze); }

/* responsivo: em coluna estreita, esconde a barra do modo geral, depois colunas */
@media (max-width: 1280px) {
  .sdp-ranking--geral .sdp-ranking__row { grid-template-columns: 38px 1fr 46px 56px 46px 64px; }
  .sdp-ranking--geral .sdp-ranking__bar,
  .sdp-ranking--geral .sdp-ranking__col-label--bar { display: none; }
}
@media (max-width: 600px) {
  .sdp-ranking__row { grid-template-columns: 36px 1fr auto; gap: var(--space-3, .625rem); }
  .sdp-ranking--geral .sdp-ranking__row { grid-template-columns: 36px 1fr 70px; }
  .sdp-ranking--geral .sdp-ranking__num,
  .sdp-ranking--geral .sdp-ranking__col-label:not(.sdp-ranking__col-label--left):not(:last-child) { display: none; }
  .sdp-ranking__bar { display: none; }
}

/* ============================================================================
   TEMA ESCURO (:root[data-theme="dark"]) — camada canônica
   ----------------------------------------------------------------------------
   O theme-toggle.js seta data-theme="dark" no <html>. Dois problemas resolvidos
   de uma vez aqui:
     1) ESPECIFICIDADE. O sdp-tokens.css reafirma os valores CLAROS no :root e
        carrega DEPOIS do design-system.css. Como :root e [data-theme="dark"] têm
        a MESMA especificidade, o :root mais recente atropelava o dark do legado.
        Por isso usamos :root[data-theme="dark"] (especificidade maior) — vence
        qualquer :root, em qualquer ordem de carregamento.
     2) COMPLETUDE. Não basta superfície/texto: os soft tones precisam virar
        translúcidos e o --color-action-selected vira gold translúcido, senão
        elementos legados que consomem esses tokens (ex.: seletor de escola do
        master) ficam claro-no-claro. Os valores espelham o design-system.css
        (tema já comprovado) + acrescentam os tokens canônicos (--sdp-*).
   Mora AQUI (arquivo hand-edited) p/ sobreviver a um re-run do design-audit.js
   que regeneraria o :root dos tokens. (a)/(b)/(c) abaixo: regras de componente
   que o flip de token sozinho não alcança.
   ============================================================================ */
:root[data-theme="dark"] {
  /* superfícies — navy escuro (espelha design-system.css) */
  --color-surface-0: #111827;
  --color-surface-1: #0D1B2A;
  --color-surface-2: #152236;
  --color-surface-3: #243659;
  --color-surface-elevated: #132033;
  --color-surface: #152236;
  --sdp-surface-page: #0A1320;
  --sdp-surface-card: #152236;
  --bg-card: #152236;
  --card-bg: #152236;
  --input-bg: #0D1B2A;
  --topbar-bg: #132033;

  /* texto — claro */
  --color-text-primary: #F5F7FA;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #A8B3C7;
  --color-text-subtle: #7D8AA3;
  --color-text-inverse: #FAF8F2;
  --sdp-text: #F5F7FA;
  --sdp-text-muted: #A8B3C7;
  --text-primary: #F5F7FA;
  --text-body: #CBD5E1;
  --text-secondary: #CBD5E1;
  --text-muted: #A8B3C7;

  /* soft tones — translúcidos (chips/badges/alerts legíveis no escuro) */
  --color-success-soft: rgba(22, 163, 74, 0.16);
  --color-warning-soft: rgba(202, 138, 4, 0.18);
  --color-danger-soft: rgba(220, 38, 38, 0.16);
  --color-danger-border: rgba(248, 113, 113, 0.42);
  --color-info-soft: rgba(37, 99, 235, 0.18);

  /* estados de ação (hover/selecionado do chrome legado) */
  --color-action-hover: #1B2A42;
  --color-action-active: #233754;
  --color-action-selected: rgba(181, 144, 74, 0.18);
  --color-action-disabled: #1F2A3C;

  /* bordas + foco */
  --color-border-subtle: #2A3B56;
  --color-border-strong: #4A5E7C;
  --color-border: #2A3B56;
  --border-color: #2A3B56;
  --topbar-border: #2A3B56;
  --color-focus-ring: rgba(201, 165, 96, 0.36);

  /* sombras — aprofundadas no escuro */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.30), 0 2px 5px rgba(0, 0, 0, 0.22);
  --shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.36), 0 6px 14px rgba(0, 0, 0, 0.24);

  /* chrome (sidebar) — overrides dark (migrados de sidebar-redesigned.css) */
  --sdp-sidebar-bg-1:        #0F1A2E;
  --sdp-sidebar-bg-2:        #0A1320;
  --sdp-sidebar-bg-glaze:    rgba(181, 144, 74, 0.06);
  --sdp-sidebar-grain:       rgba(255, 255, 255, 0.015);

  --sdp-sidebar-ink:         #F5F8FF;
  --sdp-sidebar-ink-muted:   #B8C3D6;
  --sdp-sidebar-ink-faint:   #9AA6BD;
  --sdp-sidebar-title:       #D4B47C;
  --sdp-sidebar-arrow:       #7A8499;

  --sdp-sidebar-line:        rgba(255, 255, 255, 0.10);
  --sdp-sidebar-line-soft:   rgba(255, 255, 255, 0.06);
  --sdp-sidebar-line-faint:  rgba(255, 255, 255, 0.03);

  --sdp-sidebar-hover-bg:        rgba(255, 255, 255, 0.05);
  --sdp-sidebar-hover-bg-strong: rgba(181, 144, 74, 0.16);
  --sdp-sidebar-hover-border:    rgba(255, 255, 255, 0.10);

  --sdp-sidebar-gold-soft:   rgba(181, 144, 74, 0.20);
  --sdp-sidebar-gold-line:   rgba(181, 144, 74, 0.45);
  --sdp-sidebar-gold-glow:   rgba(181, 144, 74, 0.55);

  --sdp-sidebar-icon-bg:        rgba(255, 255, 255, 0.06);
  --sdp-sidebar-icon-bg-hover:  rgba(181, 144, 74, 0.20);
  --sdp-sidebar-icon-ink:       #B8C3D6;
  --sdp-sidebar-icon-ink-hover: #F5F8FF;

  --sdp-sidebar-shadow:        12px 0 32px -6px rgba(0, 0, 0, 0.50),
                               1px 0 0 0 rgba(255, 255, 255, 0.04);
  --sdp-sidebar-active-glow:   0 6px 16px -8px rgba(181, 144, 74, 0.65),
                               inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* chrome (topbar) — bg translúcido dos botões no dark */
  --sdp-toggle-bg-dark: rgba(18, 29, 46, 0.72);
}

/* (a) Títulos usam --sdp-brand-navy como COR DE TEXTO; some no fundo escuro.
   Repontuar p/ o token de texto (que já flipou p/ claro acima). */
:root[data-theme="dark"] .sdp-page-header__title,
:root[data-theme="dark"] .sdp-section-title,
:root[data-theme="dark"] .sdp-card__title,
:root[data-theme="dark"] .sdp-stat-card__value,
:root[data-theme="dark"] .sdp-hub-card__title,
:root[data-theme="dark"] .sdp-panel__title,
:root[data-theme="dark"] .sdp-person-card__name,
:root[data-theme="dark"] .sdp-person-card__score b,
:root[data-theme="dark"] .sdp-modal__header h3,
:root[data-theme="dark"] .sdp-modal--feedback h3,
:root[data-theme="dark"] .sdp-breadcrumb li[aria-current],
:root[data-theme="dark"] .sdp-accordion__trigger,
:root[data-theme="dark"] .sdp-sidebar__brand-name,
:root[data-theme="dark"] .sdp-topbar__school { color: var(--sdp-text, #F5F7FA); }
/* metric-card: valor navy → claro no escuro; preserva os realces danger/success do split */
:root[data-theme="dark"] .sdp-metric-card__value { color: var(--sdp-text, #F5F7FA); }
:root[data-theme="dark"] .sdp-metric-card__value--danger  { color: var(--color-status-danger, #DC2626); }
:root[data-theme="dark"] .sdp-metric-card__value--success { color: var(--color-status-success, #16A34A); }

/* ranking/pódio: superfície navy clara + medalhas mantêm cor de marca */
:root[data-theme="dark"] .sdp-ranking { background: var(--sdp-surface-card, #152236); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-ranking__name { color: var(--sdp-text, #F5F7FA); }
:root[data-theme="dark"] .sdp-ranking__row:hover { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .sdp-ranking__row + .sdp-ranking__row { border-top-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-ranking__bar { background: rgba(255,255,255,.08); }

/* (b) Superfícies hardcoded #fff → escurecer (o flip de token não as alcança) */
:root[data-theme="dark"] .sdp-input,
:root[data-theme="dark"] .sdp-select,
:root[data-theme="dark"] .sdp-textarea { background: var(--input-bg, #0D1B2A); color: var(--color-text-primary, #F5F7FA); border-color: var(--color-border-strong, #4A5E7C); }
:root[data-theme="dark"] .sdp-input::placeholder,
:root[data-theme="dark"] .sdp-textarea::placeholder { color: var(--color-text-subtle, #93A4BD); }
:root[data-theme="dark"] .sdp-input:-webkit-autofill,
:root[data-theme="dark"] .sdp-input:-webkit-autofill:hover,
:root[data-theme="dark"] .sdp-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary, #F5F7FA);
  box-shadow: 0 0 0 1000px rgba(181, 144, 74, .18) inset;
  caret-color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-btn--primary {
  background: var(--color-surface-3, #243659);
  border-color: rgba(181, 144, 74, .56);
  color: var(--color-text-primary, #F5F7FA);
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="dark"] .sdp-btn--primary:hover {
  background: var(--color-navy-800, #2A3A5C);
  border-color: rgba(181, 144, 74, .82);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-btn--outline {
  background: transparent;
  border-color: rgba(181, 144, 74, .54);
  color: var(--color-text-primary, #F5F7FA);
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="dark"] .sdp-btn--outline:hover {
  background: rgba(181, 144, 74, .14);
  border-color: rgba(181, 144, 74, .78);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-select-custom__trigger {
  background: var(--input-bg, #0D1B2A);
  border-color: var(--color-border-strong, #4A5E7C);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-select-custom__trigger::after {
  color: var(--color-text-secondary, #CBD5E1);
}
:root[data-theme="dark"] .sdp-select-custom.is-open .sdp-select-custom__trigger,
:root[data-theme="dark"] .sdp-select-custom__trigger:focus-visible {
  border-color: var(--color-focus-border, #B5904A);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42));
}
:root[data-theme="dark"] .sdp-select-custom.is-disabled .sdp-select-custom__trigger {
  background: var(--color-surface-2, #1B2A41);
  color: var(--color-text-subtle, #93A4BD);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-input--selected,
:root[data-theme="dark"] .sdp-textarea--selected,
:root[data-theme="dark"] .sdp-textarea[placeholder]:not(:placeholder-shown),
:root[data-theme="dark"] .sdp-textarea:not([placeholder]):not(:empty),
:root[data-theme="dark"] .sdp-input[required]:valid,
:root[data-theme="dark"] .sdp-input[type="date"][required]:valid,
:root[data-theme="dark"] body.sdp-redesigned .sdp-input--selected,
:root[data-theme="dark"] body.sdp-redesigned .sdp-textarea--selected,
:root[data-theme="dark"] body.sdp-redesigned .sdp-textarea[placeholder]:not(:placeholder-shown),
:root[data-theme="dark"] body.sdp-redesigned .sdp-textarea:not([placeholder]):not(:empty),
:root[data-theme="dark"] body.sdp-redesigned .sdp-input[required]:valid,
:root[data-theme="dark"] body.sdp-redesigned .sdp-input[type="date"][required]:valid,
:root[data-theme="dark"] .sdp-select-custom.has-value .sdp-select-custom__trigger {
  background: rgba(181, 144, 74, .18);
  border-color: rgba(181, 144, 74, .68);
  color: var(--color-text-primary, #F5F7FA);
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="dark"] .sdp-select-custom__menu {
  background: var(--sdp-surface-card, #152236);
  border-color: var(--color-border-subtle, #2A3B56);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,.36));
  scrollbar-color: var(--sdp-brand-gold, #B5904A) var(--color-surface-2, #1B2A41);
}
:root[data-theme="dark"] .sdp-select-custom__menu::-webkit-scrollbar-track {
  background: var(--color-surface-2, #1B2A41);
}
:root[data-theme="dark"] .sdp-select-custom__menu::-webkit-scrollbar-thumb {
  background: var(--sdp-brand-gold, #B5904A);
  border-color: var(--color-surface-2, #1B2A41);
}
:root[data-theme="dark"] .sdp-select-custom__group {
  color: var(--color-text-muted, #A8B3C7);
}
:root[data-theme="dark"] .sdp-select-custom__option {
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-select-custom__option:hover,
:root[data-theme="dark"] .sdp-select-custom__option:focus-visible {
  background: rgba(181, 144, 74, .14);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-select-custom__option.is-selected {
  background: rgba(181, 144, 74, .32);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-select-custom__option:disabled {
  color: var(--color-text-subtle, #93A4BD);
}
:root[data-theme="dark"] .sdp-table { background: var(--sdp-surface-card, #152236); }
:root[data-theme="dark"] .sdp-table tbody tr.is-danger,
:root[data-theme="dark"] .sdp-table tbody tr.is-danger:hover { background: rgba(220, 38, 38, 0.12); }
:root[data-theme="dark"] .sdp-table tbody tr.is-danger td { color: #FCA5A5; }
:root[data-theme="dark"] .sdp-nota-grade th[scope="row"] { color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-nota-input--filled { background: rgba(181, 144, 74, 0.18); border-color: var(--sdp-brand-gold, #B5904A); }
:root[data-theme="dark"] .sdp-modal { background: var(--sdp-surface-card, #152236); }
:root[data-theme="dark"] .sdp-dropdown__menu { background: var(--sdp-surface-card, #152236); }
:root[data-theme="dark"] .sdp-msg-preview { background: var(--color-surface-1, #11233A); color: var(--sdp-text, #F5F7FA); }

/* (c) Alerts: o fundo soft virou translúcido-escuro → clarear o texto (era hex
   escuro hardcoded, pensado p/ o soft claro do modo light). */
:root[data-theme="dark"] .sdp-alert--success { color: #86EFAC; }
:root[data-theme="dark"] .sdp-alert--danger  { color: #FCA5A5; }
:root[data-theme="dark"] .sdp-alert--warning { color: #FDE68A; }
:root[data-theme="dark"] .sdp-alert--info    { color: #93C5FD; }

/* (c2) Alert --hint (institucional): o creme não existe no dark → dourado translúcido. */
:root[data-theme="dark"] .sdp-alert--hint {
  background: rgba(181, 144, 74, .10);
  border-color: rgba(181, 144, 74, .32);
  border-left-color: var(--sdp-brand-gold, #B5904A);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-alert--hint .sdp-alert__title { color: var(--color-gold-200, #EDD99A); }

/* (d) Anexos de Prova: o badge "img" é navy (some no fundo escuro) e o badge
   "existente" usa navy como texto (idem). Repontuar p/ tokens que flipam. */
:root[data-theme="dark"] .sdp-anexos-card {
  background: var(--sdp-surface-card, #152236);
  border-color: rgba(181, 144, 74, .36);
  border-left-color: var(--sdp-brand-gold, #B5904A);
}
:root[data-theme="dark"] .sdp-anexos-card-header,
:root[data-theme="dark"] .sdp-anexo-nome {
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-anexos-hint,
:root[data-theme="dark"] .sdp-anexo-meta {
  color: var(--color-text-muted, #A8B3C7);
}
:root[data-theme="dark"] .sdp-badge--brand {
  background: rgba(181, 144, 74, .18);
  border-color: rgba(181, 144, 74, .48);
  color: #F3D28A;
}
:root[data-theme="dark"] .sdp-anexos-dropzone {
  background: var(--color-surface-1, #111E30);
  border-color: rgba(181, 144, 74, .46);
}
:root[data-theme="dark"] .sdp-anexos-dropzone:hover,
:root[data-theme="dark"] .sdp-anexos-dropzone.is-dragging {
  background: rgba(181, 144, 74, .14);
  border-color: var(--sdp-brand-gold, #B5904A);
}
:root[data-theme="dark"] .sdp-anexos-dropzone-text {
  color: var(--color-text-secondary, #CBD5E1);
}
:root[data-theme="dark"] .sdp-anexo-item {
  background: var(--color-surface-1, #111E30);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-anexo-item:hover {
  background: rgba(181, 144, 74, .10);
  border-color: rgba(181, 144, 74, .42);
}
:root[data-theme="dark"] .sdp-anexo-icone.img { background: var(--color-surface-3, #243659); }
:root[data-theme="dark"] .sdp-anexo-meta .badge-existente { color: var(--color-text-secondary, #CBD5E1); }
:root[data-theme="dark"] .sdp-anexo-btn {
  color: var(--color-text-muted, #A8B3C7);
}
:root[data-theme="dark"] .sdp-anexo-btn:hover {
  background: rgba(181, 144, 74, .14);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-anexo-btn.danger:hover {
  background: rgba(220, 38, 38, .18);
  color: #FCA5A5;
}

/* Leitor de código de barras — dark */
:root[data-theme="dark"] .sdp-barcode-scanner {
  background: rgba(37, 99, 235, .12);
  border-color: rgba(37, 99, 235, .55);
}
:root[data-theme="dark"] .sdp-barcode-scanner.is-scanning {
  background: rgba(22, 163, 74, .14);
  border-color: var(--color-status-success, #16A34A);
}
:root[data-theme="dark"] .sdp-barcode-scanner__label { color: #93C5FD; }
:root[data-theme="dark"] .sdp-barcode-scanner.is-scanning .sdp-barcode-scanner__label { color: #86EFAC; }
:root[data-theme="dark"] .sdp-barcode-scanner__status { color: var(--color-text-muted, #A8B3C7); }
:root[data-theme="dark"] .sdp-divider-label { color: var(--color-text-muted, #A8B3C7); }
:root[data-theme="dark"] .sdp-divider-label::before,
:root[data-theme="dark"] .sdp-divider-label::after { background: var(--color-border-subtle, #2A3B56); }


/* ============================================================================
   WIDGETS DINAMICOS - carousel, noticias e atualizacoes
   ---------------------------------------------------------------------------
   Fonte global para widgets montados por JS. A pagina deve carregar apenas
   sdp-components.css + o JS funcional do widget.
   ============================================================================ */
.sdp-widget-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  gap: var(--space-3, .75rem);
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-sm, .875rem);
}
.sdp-widget-loading .sdp-spinner {
  width: 22px;
  height: 22px;
  border-width: 3px;
}
.sdp-carousel__viewport {
  position: relative;
  overflow: hidden;
  box-sizing: content-box;
  padding: 18px 14px;
  margin: -18px -14px;
}
.sdp-carousel__track {
  display: flex;
  gap: 16px;
  transition: transform .5s cubic-bezier(.25, .1, .25, 1);
  will-change: transform;
}
.sdp-carousel__item {
  flex: 0 0 calc(33.333% - 11px);
  min-width: 280px;
}
.sdp-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-5, 1.25rem);
}
.sdp-carousel__button {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full, 9999px);
}
.sdp-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sdp-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-border-strong, #C9C0A8);
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease);
}
.sdp-carousel__dot:hover,
.sdp-carousel__dot.is-active {
  background: var(--sdp-brand-gold, #B5904A);
}
.sdp-carousel__dot.is-active {
  transform: scale(1.3);
}
.sdp-news-card {
  min-height: 180px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sdp-news-card:hover {
  border-color: var(--sdp-brand-gold, #B5904A);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(31, 45, 74, .10));
  transform: translateY(-3px);
}
.sdp-news-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sdp-news-card__category {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2, .5rem);
  color: var(--sdp-brand-gold, #B5904A);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, .04em);
}
.sdp-news-card__category .sdp-icon {
  width: 16px;
  height: 16px;
}
.sdp-news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 var(--space-2, .5rem);
  color: var(--color-text-primary, #111827);
  font-family: var(--font-display);
  font-size: var(--font-size-sm, .875rem);
  font-weight: 600;
  line-height: 1.4;
}
.sdp-news-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 1;
  margin: 0;
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-xs, .75rem);
  line-height: 1.5;
}
.sdp-news-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-3, .75rem);
  color: var(--color-text-subtle, #9CA3AF);
  font-size: var(--font-size-xs, .75rem);
}
.sdp-news-card__meta .sdp-icon {
  width: 14px;
  height: 14px;
  opacity: .8;
}
.sdp-updates-list {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sdp-updates-version {
  padding: var(--space-3, .75rem) 0;
  border-bottom: 1px solid var(--color-border-subtle, #DDD6C4);
}
.sdp-updates-version:first-child { padding-top: 0; }
.sdp-updates-version:last-child { border-bottom: 0; padding-bottom: 0; }
.sdp-updates-date {
  margin-bottom: var(--space-3, .75rem);
  color: var(--sdp-brand-gold, #B5904A);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, .04em);
}
.sdp-updates-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, .5rem);
}
.sdp-updates-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, .75rem);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-2, #F4F1E8);
  transition: background var(--transition-fast, 150ms ease);
}
.sdp-updates-item:hover {
  background: var(--color-gold-100, #F7F0DC);
}
.sdp-updates-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-gold-100, #F7F0DC);
  color: var(--sdp-brand-gold, #B5904A);
}
.sdp-updates-item__icon .sdp-icon {
  width: 20px;
  height: 20px;
}
.sdp-updates-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sdp-updates-item__text strong {
  color: var(--color-text-primary, #111827);
  font-size: var(--font-size-sm, .875rem);
  font-weight: 600;
  line-height: 1.3;
}
.sdp-updates-item__text span {
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-sm, .8125rem);
  line-height: 1.45;
}
.sdp-modal-body:has(.sdp-popup-wrap) {
  white-space: normal;
}
.sdp-popup-wrap {
  white-space: normal;
  text-align: left;
}
.sdp-popup-bloco {
  margin-bottom: 14px;
}
.sdp-popup-bloco:last-child {
  margin-bottom: 0;
}
.sdp-popup-data {
  margin-bottom: 8px;
  color: var(--sdp-brand-navy, #16243C);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sdp-popup-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}
.sdp-popup-item + .sdp-popup-item {
  border-top: 1px solid var(--color-border-subtle, #DDD6C4);
}
.sdp-popup-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--sdp-brand-navy, #16243C);
}
.sdp-popup-icone .sdp-icon {
  width: 22px;
  height: 22px;
}
.sdp-popup-texto {
  flex: 1;
  min-width: 0;
}
.sdp-popup-texto strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text-primary, #111827);
  font-size: 14px;
  line-height: 1.35;
}
.sdp-popup-texto p {
  margin: 0;
  color: var(--color-text-muted, #64748B);
  font-size: 13px;
  line-height: 1.45;
}
@media (max-width: 1024px) {
  .sdp-carousel__item {
    flex-basis: calc(50% - 8px);
    min-width: 260px;
  }
}
@media (max-width: 768px) {
  .sdp-carousel__item {
    flex-basis: 100%;
    min-width: 100%;
  }
  .sdp-carousel__track {
    gap: 12px;
  }
  .sdp-carousel__button {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 640px) {
  .sdp-updates-list {
    max-height: 360px;
  }
  .sdp-updates-item {
    padding: var(--space-2, .5rem);
  }
}
:root[data-theme="dark"] .sdp-carousel__dot {
  background: var(--color-border-strong, #41516B);
}
:root[data-theme="dark"] .sdp-carousel__button {
  background: var(--sdp-surface-card, #152236);
  border-color: rgba(181, 144, 74, .52);
  color: var(--sdp-brand-gold, #C9A560);
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="dark"] .sdp-carousel__button:hover {
  background: rgba(181, 144, 74, .16);
  border-color: rgba(181, 144, 74, .78);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-carousel__dot:hover,
:root[data-theme="dark"] .sdp-carousel__dot.is-active {
  background: var(--sdp-brand-gold, #C9A560);
}
:root[data-theme="dark"] .sdp-news-card__title,
:root[data-theme="dark"] .sdp-updates-item__text strong,
:root[data-theme="dark"] .sdp-popup-texto strong {
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-news-card__summary,
:root[data-theme="dark"] .sdp-news-card__meta,
:root[data-theme="dark"] .sdp-updates-item__text span,
:root[data-theme="dark"] .sdp-popup-texto p {
  color: var(--color-text-muted, #B8C2D0);
}
:root[data-theme="dark"] .sdp-updates-version,
:root[data-theme="dark"] .sdp-popup-item + .sdp-popup-item {
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-updates-item {
  background: var(--sdp-surface-2, #16243C);
}
:root[data-theme="dark"] .sdp-updates-item:hover {
  background: var(--sdp-surface-3, #1F2D4A);
}
:root[data-theme="dark"] .sdp-updates-item__icon {
  background: var(--sdp-surface-3, #1F2D4A);
  color: var(--sdp-brand-gold, #C9A560);
}
:root[data-theme="dark"] .sdp-popup-data,
:root[data-theme="dark"] .sdp-popup-icone {
  color: var(--sdp-brand-gold, #C9A560);
}

/* ============================================================================
   REGISTRAR MEDIDA - promoted to global components
   ---------------------------------------------------------------------------
   Mantido na camada global para evitar CSS por pagina. Classes consumidas por
   /pages/medidas/registrar.html e futuras telas equivalentes.
   ============================================================================ */
:root {
  --med-accent: var(--sdp-brand-navy, #16243C);
  --med-accent-soft: rgba(22, 36, 60, .14);
}

:root[data-theme="dark"] {
  --med-accent: #7CA7E6;
  --med-accent-soft: rgba(124, 167, 230, .20);
}
:root[data-theme="dark"] .sdp-selected-tag,
:root[data-theme="dark"] .medida-falta-tag {
  background: rgba(181, 144, 74, .18);
  color: var(--color-text-primary, #F5F7FA);
  border-color: rgba(181, 144, 74, .42);
}
:root[data-theme="dark"] .sdp-selected-tag button,
:root[data-theme="dark"] .medida-falta-tag button {
  background: rgba(255, 255, 255, .10);
}

/* ─── Overlay de loading da IA (base é inline via JS; aqui só o ajuste dark) ─── */
@keyframes iaSpinnerRotate { to { transform: rotate(360deg); } }
:root[data-theme="dark"] #iaLoadingOverlay > div {
  background: var(--sdp-surface-card, #152236);
  color: var(--color-text-primary, #F5F7FA);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] #iaLoadingOverlay #iaLoadingMsg { color: var(--color-text-muted, #A8B3C7); }
:root[data-theme="dark"] .medida-ia-dialog > .sdp-spinner {
  border-color: var(--color-border-strong, #4A5E7C);
  border-top-color: var(--color-success, #107c10);
}

/* ─── Controles compostos reutilizáveis (origem: Registrar Medida) ─── */
.sdp-segmented,
.batch-toggle-chips {
  display: inline-flex;
  flex-wrap: wrap; /* 5+ opções num modal estreito quebram linha em vez de vazar */
  background: var(--color-surface-2, #EFEBE0);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-1, .25rem);
  gap: var(--space-1, .25rem);
  margin-top: 4px;
}
.sdp-segmented__option,
.batch-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary, #4B5563);
  -webkit-text-fill-color: currentColor;
  border-radius: calc(var(--radius-md, 8px) - 2px);
  font-size: var(--font-size-sm, 13px);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.sdp-segmented__option:hover,
.batch-toggle-option:hover {
  background: rgba(181, 144, 74, .14);
  color: var(--sdp-brand-navy, #16243C);
}
.sdp-segmented__option.is-active,
.sdp-segmented__option[aria-selected="true"],
.batch-toggle-option.is-active {
  background: var(--sdp-brand-navy, #16243C);
  border-color: var(--sdp-brand-navy, #16243C);
  color: #fff;
  -webkit-text-fill-color: currentColor;
  box-shadow: 0 1px 2px rgba(22, 36, 60, .16);
}
body.sdp-redesigned .sdp-segmented__option.is-active,
body.sdp-redesigned .sdp-segmented__option[aria-selected="true"],
body.sdp-redesigned .batch-toggle-option.is-active {
  color: #fff;
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="dark"] .sdp-segmented,
:root[data-theme="dark"] .batch-toggle-chips {
  background: var(--sdp-surface-card, #152236);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-segmented__option,
:root[data-theme="dark"] .batch-toggle-option {
  color: var(--color-text-secondary, #CBD5E1);
}
:root[data-theme="dark"] .sdp-segmented__option:hover,
:root[data-theme="dark"] .batch-toggle-option:hover {
  background: rgba(181, 144, 74, .14);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-segmented__option.is-active,
:root[data-theme="dark"] .sdp-segmented__option[aria-selected="true"],
:root[data-theme="dark"] .batch-toggle-option.is-active,
:root[data-theme="dark"] body.sdp-redesigned .sdp-segmented__option.is-active,
:root[data-theme="dark"] body.sdp-redesigned .sdp-segmented__option[aria-selected="true"],
:root[data-theme="dark"] body.sdp-redesigned .batch-toggle-option.is-active {
  background: var(--sdp-brand-gold, #B5904A);
  border-color: var(--sdp-brand-gold, #B5904A);
  color: var(--sdp-brand-navy, #16243C);
  -webkit-text-fill-color: currentColor;
}
.sdp-control-hint,
.batch-toggle-hint {
  display: block;
  margin-top: 6px;
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-xs, 12px);
  line-height: 1.45;
}
.sdp-selection-counter,
.batch-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 10px;
  background: var(--sdp-brand-navy, #16243C);
  color: var(--color-text-inverse, #fff);
  border-radius: 999px;
  font-size: var(--font-size-xs, 12px);
  font-weight: 700;
  vertical-align: middle;
}
.sdp-action-row,
.batch-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.sdp-action-row__fill,
.medida-batch-filter {
  flex: 1;
  min-width: 180px;
}
.sdp-check-list,
.batch-alunos-lista {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--color-border-strong, #cbd5e1);
  border-radius: 8px;
  background: var(--color-surface-0, #fff);
  padding: 6px;
  scrollbar-color: var(--sdp-brand-gold, #B5904A) var(--color-surface-2, #EFEBE0);
  scrollbar-width: thin;
}
.sdp-check-list::-webkit-scrollbar,
.batch-alunos-lista::-webkit-scrollbar,
.sdp-selectable-list::-webkit-scrollbar,
.medida-faltas-container::-webkit-scrollbar { width: 10px; }
.sdp-check-list::-webkit-scrollbar-track,
.batch-alunos-lista::-webkit-scrollbar-track,
.sdp-selectable-list::-webkit-scrollbar-track,
.medida-faltas-container::-webkit-scrollbar-track { background: var(--color-surface-2, #EFEBE0); border-radius: var(--radius-full, 999px); }
.sdp-check-list::-webkit-scrollbar-thumb,
.batch-alunos-lista::-webkit-scrollbar-thumb,
.sdp-selectable-list::-webkit-scrollbar-thumb,
.medida-faltas-container::-webkit-scrollbar-thumb { background: var(--sdp-brand-gold, #B5904A); border: 2px solid var(--color-surface-2, #EFEBE0); border-radius: var(--radius-full, 999px); }
.sdp-check-list__item,
.batch-aluno-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
  user-select: none;
}
.sdp-check-list__item:hover,
.batch-aluno-item:hover { background: var(--color-surface-2, #f1f5f9); }
.sdp-check-list__item:has(input[type="checkbox"]:checked),
.batch-aluno-item:has(input[type="checkbox"]:checked) {
  background: var(--color-action-selected, rgba(181,144,74,.16));
  box-shadow: inset 3px 0 0 var(--sdp-brand-gold, #B5904A);
}
.sdp-check-list__item input[type=checkbox],
.batch-aluno-item input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--med-accent, #16243C);
  flex-shrink: 0;
}
.sdp-check-list__label,
.batch-aluno-item .batch-aluno-nome {
  flex: 1;
  color: var(--color-text-primary, #111827);
  font-size: var(--font-size-sm, 13px);
}
.sdp-check-list__meta,
.batch-aluno-item .batch-aluno-codigo {
  color: var(--color-text-subtle, #94a3b8);
  font-size: 11px;
  font-family: 'Courier New', monospace;
}
.sdp-check-list__item.is-hidden,
.batch-aluno-item.is-hidden { display: none; }
.sdp-empty-state,
.batch-loading {
  text-align: center;
  color: var(--color-text-subtle, #94a3b8);
  padding: 24px;
  font-size: var(--font-size-sm, 13px);
}
.sdp-empty-state--error,
.batch-loading--error { color: var(--color-status-danger, #DC2626); }
:root[data-theme="dark"] .sdp-check-list,
:root[data-theme="dark"] .batch-alunos-lista {
  background: var(--sdp-surface-card, #152236);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-check-list__item:hover,
:root[data-theme="dark"] .batch-aluno-item:hover {
  background: rgba(181, 144, 74, .12);
}
:root[data-theme="dark"] .sdp-check-list__label,
:root[data-theme="dark"] .batch-aluno-item .batch-aluno-nome {
  color: var(--color-text-primary, #F5F7FA);
}

/* ─── Ações e avisos específicos da registrar ─── */
.sdp-action-cluster,
.medida-ai-actions {
  display: flex;
  gap: var(--space-3, .75rem);
  flex-wrap: wrap;
}
.sdp-action-cluster .sdp-btn,
.medida-ai-actions .sdp-btn {
  flex: 1 1 240px;
}
.sdp-action-help {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, .5rem);
}
.sdp-action-help > .sdp-btn {
  width: 100%;
  flex: 0 0 auto;
}
.sdp-action-help:has(> .sdp-btn[style*="display: none"]),
.sdp-action-help:has(> .sdp-btn[hidden]),
.sdp-action-help:has(> .sdp-btn.sdp-hidden) {
  display: none;
}
.sdp-action-help__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, .5rem);
  margin: 0;
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-xs, .75rem);
  line-height: 1.45;
}
.sdp-action-help__hint svg,
.sdp-action-help__hint .sdp-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--color-text-muted, #6B7280);
}

.sdp-inline-alert,
.medida-inline-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, .625rem);
  font-size: var(--font-size-sm, .875rem);
  line-height: 1.45;
}
.sdp-inline-alert--info,
.medida-inline-alert--info {
  background: var(--color-info-soft, #EFF6FF);
  border: 1px solid var(--color-status-info, #2563EB);
  color: var(--color-status-info, #1E40AF);
}
.medida-impact {
  font-weight: 700;
}
.medida-impact--neg { color: var(--color-status-danger, #DC2626); }
.medida-impact--pos { color: var(--color-status-success, #16A34A); }

/* ─── Estados auxiliares da página ─── */
.sdp-info-box,
.medida-info-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, .75rem);
  margin-top: var(--space-3, .75rem);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border: 1px solid var(--color-status-info, #2563EB);
  border-left: 4px solid var(--color-status-info, #1E40AF);
  border-radius: var(--radius-md, .625rem);
  background: var(--color-info-soft, #EFF6FF);
  color: var(--color-status-info, #1E40AF);
  font-size: var(--font-size-sm, .875rem);
}
.sdp-info-box strong,
.medida-info-box strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
}
:root[data-theme="dark"] .sdp-inline-alert--info,
:root[data-theme="dark"] .medida-inline-alert--info,
:root[data-theme="dark"] .sdp-info-box,
:root[data-theme="dark"] .medida-info-box {
  background: rgba(59, 130, 246, .14);
  border-color: rgba(147, 197, 253, .42);
  color: #BFDBFE;
}
/* Painel militar (EEMDP): os cards de decisao/resolucao usam a superficie neutra da
   marca (cream + texto navy + fio dourado a esquerda), nao o azul "info" generico.
   Escopo em #militarPainel p/ NAO afetar os sdp-info-box de alerta do resto do sistema. */
#militarPainel .sdp-info-box {
  background: var(--color-surface-2, #EFEBE0);
  border-color: var(--color-border-strong, #C8BFA8);
  border-left-color: var(--sdp-brand-gold, #B5904A);
  color: var(--color-text-primary, #16243C);
}
:root[data-theme="dark"] #militarPainel .sdp-info-box {
  background: var(--sdp-surface-card, #152236);
  border-color: var(--color-border-subtle, #2A3B56);
  border-left-color: var(--sdp-brand-gold, #B5904A);
  color: var(--color-text-primary, #F5F7FA);
}

.sdp-option-card,
.medida-notify-option {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  margin-top: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, .75rem);
  background: var(--color-surface-0, #fff);
  transition: border-color var(--transition-fast, 150ms ease), background var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.sdp-option-card:hover,
.medida-notify-option:hover {
  border-color: rgba(181, 144, 74, .45);
  background: var(--color-surface-1, #F6F4EE);
}
.sdp-option-card:has(input[type="checkbox"]:checked),
.medida-notify-option:has(input[type="checkbox"]:checked) {
  border-color: var(--sdp-brand-gold, #B5904A);
  background: var(--color-gold-100, #F7F0DC);
  box-shadow: inset 3px 0 0 var(--sdp-brand-gold, #B5904A);
}
.sdp-option-card input[type="checkbox"],
.medida-notify-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--sdp-brand-gold, #B5904A);
  cursor: pointer;
}
.sdp-option-card label,
.medida-notify-option label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  margin: 0;
  color: var(--color-text-primary, #111827);
  font-size: var(--font-size-sm, .875rem);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.sdp-option-card label svg,
.medida-notify-option label svg {
  color: var(--sdp-brand-gold, #B5904A);
  flex: 0 0 auto;
}
.sdp-option-card:has(input[type="checkbox"]:checked) label,
.medida-notify-option:has(input[type="checkbox"]:checked) label {
  color: var(--sdp-brand-navy, #16243C);
}
.sdp-option-card:has(input[type="checkbox"]:checked) label svg,
.medida-notify-option:has(input[type="checkbox"]:checked) label svg {
  color: var(--sdp-brand-navy, #16243C);
}
:root[data-theme="dark"] .sdp-option-card,
:root[data-theme="dark"] .medida-notify-option {
  background: var(--sdp-surface-card, #152236);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-option-card:hover,
:root[data-theme="dark"] .medida-notify-option:hover {
  background: var(--color-surface-2, #152236);
  border-color: rgba(181, 144, 74, .42);
}
:root[data-theme="dark"] .sdp-option-card:has(input[type="checkbox"]:checked),
:root[data-theme="dark"] .medida-notify-option:has(input[type="checkbox"]:checked) {
  background: rgba(181, 144, 74, .16);
  border-color: rgba(181, 144, 74, .58);
}
:root[data-theme="dark"] .sdp-option-card:has(input[type="checkbox"]:checked) label,
:root[data-theme="dark"] .sdp-option-card:has(input[type="checkbox"]:checked) label svg,
:root[data-theme="dark"] .medida-notify-option:has(input[type="checkbox"]:checked) label,
:root[data-theme="dark"] .medida-notify-option:has(input[type="checkbox"]:checked) label svg {
  color: var(--color-text-primary, #F5F7FA);
}

/* ─── Busca embutida + lista selecionável ─── */
.sdp-search-field,
.medida-faltas-search {
  margin: 8px 0 12px;
}
.sdp-search-field__wrap,
.medida-reg-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sdp-search-field__wrap > .sdp-icon,
.medida-reg-search-wrap > .sdp-icon {
  position: absolute;
  left: 12px;
  color: var(--color-text-subtle, #94a3b8);
  pointer-events: none;
}
.sdp-search-field__input,
#filtroBuscaFaltas {
  width: 100%;
  padding: 10px 38px 10px 38px;
  border: 1px solid var(--color-border-strong, #cbd5e1);
  border-radius: 8px;
  font-size: var(--font-size-base, 14px);
  background: var(--color-surface-0, #fff);
  color: var(--color-text-primary, #111827);
  transition: border-color .15s, box-shadow .15s;
}
.sdp-search-field__input:focus,
#filtroBuscaFaltas:focus {
  outline: none;
  border-color: var(--med-accent, #16243C);
  box-shadow: 0 0 0 3px var(--med-accent-soft, rgba(22,36,60,.14));
}
.sdp-search-field__input::-webkit-search-cancel-button,
#filtroBuscaFaltas::-webkit-search-cancel-button { display: none; }
.sdp-search-clear,
.medida-faltas-search-clear {
  position: absolute;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--color-surface-1, #F6F4EE);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  color: var(--color-text-muted, #6B7280);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-md, 8px);
}
.sdp-search-clear:hover,
.medida-faltas-search-clear:hover { background: var(--color-gold-100, #F7F0DC); border-color: var(--sdp-brand-gold, #B5904A); color: var(--sdp-brand-navy, #16243C); }
.sdp-search-clear:focus-visible,
.medida-faltas-search-clear:focus-visible {
  outline: none;
  border-color: var(--sdp-brand-gold, #B5904A);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42));
}
.sdp-search-clear .sdp-icon,
.medida-faltas-search-clear .sdp-icon {
  width: 15px;
  height: 15px;
}
.sdp-search-info,
.medida-faltas-search-info {
  display: block;
  margin-top: 6px;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted, #6B7280);
}

.sdp-selectable-list,
.medida-faltas-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, .5rem);
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-4, 1rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, .75rem);
  background: var(--color-surface-1, #F6F4EE);
  scrollbar-color: var(--sdp-brand-gold, #B5904A) var(--color-surface-2, #EFEBE0);
  scrollbar-width: thin;
}
.sdp-selectable-list__section,
.medida-falta-separador {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  margin: var(--space-2, .5rem) 0;
  padding: var(--space-2, .5rem) var(--space-4, 1rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-md, .625rem);
  background: var(--color-surface-2, #EFEBE0);
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.sdp-selectable-list__section::before,
.medida-falta-separador::before {
  content: "";
  width: 3px;
  align-self: stretch;
  border-radius: var(--radius-full, 9999px);
  background: var(--sdp-brand-gold, #B5904A);
}
.sdp-selectable-list__section svg,
.medida-falta-separador svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.medida-falta-separador-leve {
  border-color: var(--color-border-subtle, #DDD6C4) !important;
  background: var(--color-surface-2, #EFEBE0) !important;
  color: var(--sdp-brand-navy, #16243C) !important;
}
.medida-falta-separador-media {
  border-color: var(--color-border-subtle, #DDD6C4) !important;
  background: var(--color-surface-2, #EFEBE0) !important;
  color: var(--sdp-brand-navy, #16243C) !important;
}
.medida-falta-separador-grave {
  border-color: var(--color-border-subtle, #DDD6C4) !important;
  background: var(--color-surface-2, #EFEBE0) !important;
  color: var(--sdp-brand-navy, #16243C) !important;
}
.medida-falta-separador-positiva {
  border-color: var(--color-border-subtle, #DDD6C4) !important;
  background: var(--color-surface-2, #EFEBE0) !important;
  color: var(--sdp-brand-navy, #16243C) !important;
}
.sdp-selectable-list__item,
.medida-falta-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, .75rem);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-md, .625rem);
  background: var(--color-surface-0, #fff);
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease), background var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.sdp-selectable-list__item:hover,
.medida-falta-item:hover {
  border-color: var(--sdp-brand-gold, #B5904A);
  background: var(--color-surface-2, #EFEBE0);
}
.sdp-selectable-list__item:has(input[type="checkbox"]:checked),
.medida-falta-item:has(input[type="checkbox"]:checked) {
  border-color: var(--sdp-brand-gold, #B5904A);
  background: var(--color-action-selected, rgba(181,144,74,.16));
  box-shadow: inset 3px 0 0 var(--sdp-brand-gold, #B5904A);
}
.sdp-selectable-list__item input[type="checkbox"],
.medida-falta-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sdp-brand-gold, #B5904A);
  cursor: pointer;
}
.sdp-selectable-list__item label,
.medida-falta-item label {
  margin: 0;
  color: var(--color-text-primary, #111827);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: var(--font-size-sm, .875rem);
  line-height: 1.5;
  cursor: pointer;
}
.medida-falta-item-positiva {
  border-color: var(--color-border-subtle, #DDD6C4) !important;
  background: var(--color-surface-0, #fff) !important;
}
.medida-falta-item-positiva:hover {
  border-color: var(--sdp-brand-gold, #B5904A) !important;
  background: var(--color-surface-2, #EFEBE0) !important;
}
.medida-falta-item-positiva:has(input[type="checkbox"]:checked) {
  border-color: var(--sdp-brand-gold, #B5904A) !important;
  background: var(--color-action-selected, rgba(181,144,74,.16)) !important;
  box-shadow: inset 3px 0 0 var(--sdp-brand-gold, #B5904A);
}
.sdp-selected-tags,
.medida-faltas-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, .5rem);
  min-height: 50px;
  margin-top: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, .75rem);
  background: var(--color-surface-1, #F6F4EE);
}
.sdp-selected-tag,
.medida-falta-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  max-width: 100%;
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border-radius: var(--radius-full, 9999px);
  background: var(--color-navy-100, #E8EDF4);
  color: var(--sdp-brand-navy, #16243C);
  border: 1px solid rgba(181, 144, 74, .35);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
}
.sdp-selected-tag span,
.medida-falta-tag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdp-selected-tag button,
.medida-falta-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  background: rgba(181, 144, 74, .18);
  color: currentColor;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.sdp-selected-tag button:hover,
.medida-falta-tag button:hover {
  background: rgba(181, 144, 74, .32);
}
.sdp-empty-message,
.medida-empty-message {
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-sm, .875rem);
}

/* --- Multi-select (combobox de seleção múltipla, expande inline pra baixo) ---
   Trigger + painel checklist (.sdp-multiselect__option reusa o realce do
   .sdp-selectable-list__item) + área de escolhidos. A variante --sub é o
   multi-select aninhado dentro de um card (ex.: turmas por disciplina).
   Estado aberto = .is-open no .sdp-multiselect. */
.sdp-multiselect { position: relative; }
.sdp-multiselect__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, .5rem);
  width: 100%; min-height: var(--control-height, 42px);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border: 1px solid var(--sdp-control-border, #D7DCE5);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-0, #fff);
  font-family: var(--font-body); font-size: var(--font-size-sm, .875rem);
  color: var(--color-text-primary, #111827); cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.sdp-multiselect__trigger:hover { border-color: var(--color-border-strong, #C8BFA8); }
.sdp-multiselect.is-open .sdp-multiselect__trigger {
  border-color: var(--sdp-brand-gold, #B5904A);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42));
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.sdp-multiselect__value { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdp-multiselect__value--empty { color: var(--color-text-subtle, #9CA3AF); }
.sdp-multiselect__arrow { flex: 0 0 auto; color: var(--color-text-muted, #6B7280); transition: transform var(--transition-fast, 150ms ease); }
.sdp-multiselect.is-open .sdp-multiselect__arrow { transform: rotate(180deg); color: var(--sdp-brand-gold, #B5904A); }
.sdp-multiselect__panel {
  display: none; flex-direction: column;
  background: var(--color-surface-0, #fff);
  border: 1px solid var(--sdp-brand-gold, #B5904A); border-top: none;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
}
.sdp-multiselect.is-open .sdp-multiselect__panel { display: flex; }
.sdp-multiselect__list { overflow-y: auto; max-height: 240px; padding: var(--space-2, .5rem); display: flex; flex-direction: column; gap: var(--space-1, .25rem); }
.sdp-multiselect__list-empty { padding: var(--space-4, 1rem); font-size: var(--font-size-xs, .75rem); color: var(--color-text-subtle, #9CA3AF); text-align: center; }
.sdp-multiselect__option {
  display: flex; align-items: center; gap: var(--space-2, .5rem);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border: 1px solid transparent; border-radius: var(--radius-sm, 6px);
  font-size: var(--font-size-sm, .875rem); color: var(--color-text-primary, #111827);
  cursor: pointer; user-select: none; transition: background var(--transition-fast, 150ms ease);
}
.sdp-multiselect__option:hover { background: var(--color-surface-2, #EFEBE0); }
.sdp-multiselect__option.is-active { background: var(--color-action-selected, rgba(181,144,74,.16)); color: var(--sdp-brand-navy, #16243C); font-weight: 600; }
.sdp-multiselect__option input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--sdp-brand-gold, #B5904A); cursor: pointer; }
.sdp-multiselect__option-text { flex: 1; }
.sdp-multiselect__custom { flex: 0 0 auto; color: var(--sdp-brand-gold, #B5904A); }
.sdp-multiselect__add { display: flex; gap: var(--space-2, .5rem); padding: var(--space-2, .5rem); border-top: 1px solid var(--color-border-subtle, #DDD6C4); background: var(--color-surface-1, #F6F4EE); border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); }
.sdp-multiselect__add .sdp-input { height: var(--control-height-sm, 34px); flex: 1; }
.sdp-multiselect__add .sdp-btn { white-space: nowrap; }
/* área dos itens escolhidos (cards de disciplina) */
.sdp-multiselect__chosen { display: flex; flex-direction: column; gap: var(--space-3, .75rem); margin-top: var(--space-3, .75rem); }
.sdp-multiselect__card { display: flex; flex-direction: column; gap: var(--space-2, .5rem); padding: var(--space-3, .75rem); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-md, 10px); background: var(--color-surface-0, #fff); }
.sdp-multiselect__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, .5rem); }
.sdp-multiselect__card-remove { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--radius-full, 9999px); background: transparent; color: var(--color-text-muted, #6B7280); cursor: pointer; transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease); }
.sdp-multiselect__card-remove:hover { background: var(--color-danger-soft, #FEF2F2); color: var(--color-status-danger, #DC2626); }
/* sub-multiselect (turmas dentro do card) */
.sdp-multiselect--sub .sdp-multiselect__trigger { min-height: var(--control-height-sm, 34px); background: var(--color-surface-1, #F6F4EE); font-size: var(--font-size-xs, .8125rem); color: var(--color-text-secondary, #4B5563); }
.sdp-multiselect__chips { min-height: 0; margin-top: 0; }
.sdp-multiselect__chip-empty { font-size: var(--font-size-xs, .75rem); color: var(--color-text-subtle, #9CA3AF); font-style: italic; }
:root[data-theme="dark"] .sdp-multiselect__trigger { background: var(--input-bg, #0D1B2A); border-color: var(--color-border-strong, #4A5E7C); color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-multiselect__panel,
:root[data-theme="dark"] .sdp-multiselect__card { background: var(--sdp-surface-card, #152236); }
:root[data-theme="dark"] .sdp-multiselect__add { background: var(--input-bg, #0D1B2A); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-multiselect--sub .sdp-multiselect__trigger { background: var(--input-bg, #0D1B2A); }
.sdp-loading-state,
.medida-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3, .75rem);
  padding: var(--space-8, 2rem);
  color: var(--color-text-muted, #6B7280);
  text-align: center;
}
.sdp-selectable-list__item.is-filter-hidden,
.sdp-selectable-list__section.is-filter-hidden,
.medida-falta-item.is-filter-hidden,
.medida-falta-separador.is-filter-hidden { display: none; }
:root[data-theme="dark"] .sdp-search-field__input,
:root[data-theme="dark"] #filtroBuscaFaltas {
  background: var(--input-bg, #0D1B2A);
  border-color: var(--color-border-strong, #4A5E7C);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-search-clear,
:root[data-theme="dark"] .medida-faltas-search-clear {
  background: var(--sdp-surface-card, #152236);
  border-color: var(--color-border-subtle, #2A3B56);
  color: var(--color-text-muted, #A8B3C7);
}
:root[data-theme="dark"] .sdp-search-clear:hover,
:root[data-theme="dark"] .medida-faltas-search-clear:hover {
  background: rgba(181, 144, 74, .14);
  border-color: rgba(181, 144, 74, .52);
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-selectable-list,
:root[data-theme="dark"] .medida-faltas-container {
  background: var(--input-bg, #0D1B2A);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-selectable-list__section,
:root[data-theme="dark"] .medida-falta-separador,
:root[data-theme="dark"] .medida-falta-separador-leve,
:root[data-theme="dark"] .medida-falta-separador-media,
:root[data-theme="dark"] .medida-falta-separador-grave,
:root[data-theme="dark"] .medida-falta-separador-positiva {
  background: var(--sdp-surface-card, #152236) !important;
  border-color: var(--color-border-subtle, #2A3B56) !important;
  color: var(--color-text-secondary, #CBD5E1) !important;
}
:root[data-theme="dark"] .sdp-selectable-list__item,
:root[data-theme="dark"] .medida-falta-item,
:root[data-theme="dark"] .medida-falta-item-positiva {
  background: var(--sdp-surface-card, #152236) !important;
  border-color: var(--color-border-subtle, #2A3B56) !important;
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-selectable-list__item:hover,
:root[data-theme="dark"] .medida-falta-item:hover,
:root[data-theme="dark"] .medida-falta-item-positiva:hover {
  background: rgba(181, 144, 74, .12) !important;
  border-color: rgba(181, 144, 74, .48) !important;
}
:root[data-theme="dark"] .sdp-selectable-list__item:has(input[type="checkbox"]:checked),
:root[data-theme="dark"] .medida-falta-item:has(input[type="checkbox"]:checked),
:root[data-theme="dark"] .medida-falta-item-positiva:has(input[type="checkbox"]:checked) {
  background: rgba(181, 144, 74, .18) !important;
  border-color: rgba(181, 144, 74, .68) !important;
}
:root[data-theme="dark"] .sdp-selectable-list__item label,
:root[data-theme="dark"] .medida-falta-item label {
  color: var(--color-text-primary, #F5F7FA);
}
:root[data-theme="dark"] .sdp-selected-tags,
:root[data-theme="dark"] .medida-faltas-tags {
  background: var(--input-bg, #0D1B2A);
  border-color: var(--color-border-subtle, #2A3B56);
}

/* ─── Status da IA e overlay ─── */
.sdp-status-line,
.medida-status-ia {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  margin-top: var(--space-3, .75rem);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, .625rem);
  font-size: var(--font-size-sm, .875rem);
  line-height: 1.45;
}
.sdp-status-line--loading,
.medida-status-loading {
  background: var(--color-warning-soft, #FEF3C7);
  border: 1px solid var(--color-status-warning, #CA8A04);
  color: var(--color-status-warning, #92400E);
}
.sdp-status-line--success,
.medida-status-success {
  background: var(--color-success-soft, #DCFCE7);
  border: 1px solid var(--color-status-success, #16A34A);
  color: var(--color-status-success, #166534);
}
.sdp-status-line--brand,
.medida-status-brand {
  background: rgba(181, 144, 74, .12);
  border: 1px solid rgba(181, 144, 74, .42);
  color: var(--sdp-brand-navy, #16243C);
}
.sdp-status-line--error,
.medida-status-error {
  background: var(--color-danger-soft, #FEE2E2);
  border: 1px solid var(--color-danger-border, #FCA5A5);
  color: var(--color-status-danger, #991B1B);
}
.sdp-status-line--warning,
.medida-status-warning {
  background: var(--color-warning-soft, #FEF9C3);
  border: 1px solid var(--color-status-warning, #CA8A04);
  color: var(--color-status-warning, #854D0E);
}
:root[data-theme="dark"] .sdp-status-line--loading,
:root[data-theme="dark"] .medida-status-loading {
  background: rgba(202, 138, 4, .16);
  border-color: rgba(253, 230, 138, .48);
  color: #FDE68A;
}
:root[data-theme="dark"] .sdp-status-line--success,
:root[data-theme="dark"] .medida-status-success {
  background: rgba(22, 163, 74, .16);
  border-color: rgba(134, 239, 172, .42);
  color: #86EFAC;
}
:root[data-theme="dark"] .sdp-status-line--brand,
:root[data-theme="dark"] .medida-status-brand {
  background: rgba(181, 144, 74, .16);
  border-color: rgba(181, 144, 74, .48);
  color: #F3D28A;
}
:root[data-theme="dark"] .sdp-status-line--error,
:root[data-theme="dark"] .medida-status-error {
  background: rgba(220, 38, 38, .16);
  border-color: rgba(252, 165, 165, .42);
  color: #FCA5A5;
}
:root[data-theme="dark"] .sdp-status-line--warning,
:root[data-theme="dark"] .medida-status-warning {
  background: rgba(202, 138, 4, .16);
  border-color: rgba(253, 230, 138, .48);
  color: #FDE68A;
}
.sdp-blocking-overlay,
.medida-ia-loading {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 1.25rem);
  z-index: 10000;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sdp-blocking-overlay.is-active,
.medida-ia-loading.is-active {
  display: flex;
}
.sdp-blocking-dialog,
.medida-ia-dialog {
  width: min(420px, 100%);
  min-width: min(320px, 100%);
  padding: var(--space-8, 2rem) var(--space-10, 2.5rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-xl, .875rem);
  background: var(--sdp-surface-card, #fff);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,.35));
  color: var(--color-text-primary, #111827);
  text-align: center;
}
.sdp-blocking-dialog > .sdp-spinner,
.medida-ia-dialog > .sdp-spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-5, 1.25rem);
  border-width: 4px;
  border-top-color: var(--sdp-brand-gold, #B5904A);
}
.sdp-blocking-dialog__title,
.medida-ia-title {
  margin-bottom: var(--space-2, .5rem);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 700;
}
.sdp-blocking-dialog__message,
.medida-ia-message {
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-sm, .875rem);
  line-height: 1.5;
}
/* Linha de "passo" do diálogo bloqueante (texto vivo abaixo da mensagem). */
.sdp-blocking-dialog__step {
  margin-top: var(--space-4, 1rem);
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-subtle, #9CA3AF);
}

/* --- Contador de caracteres ancorado num campo (textarea/input).
   O pai recebe .sdp-char-counter-field (position:relative); o contador fica no canto.
   NB: classe renomeada de .sdp-counter para não colidir com o helper de número
   .sdp-counter (cor/peso) usado em tabelas e legendas. --- */
.sdp-char-counter-field { position: relative; }
.sdp-char-counter {
  position: absolute;
  right: var(--space-3, .75rem);
  bottom: var(--space-2, .5rem);
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-muted, #6B7280);
  pointer-events: none;
}

/* --- Preset card: atalho clicável vertical (chip de ícone + título + descrição).
   Botão de preenchimento rápido em grade (ex.: atalhos de pergunta à IA). Estado
   escolhido = .is-selected (borda/realce dourado). Distinto do .sdp-option-card
   (horizontal/checkbox) e do .sdp-hub-card (navegação). Token-only, dark automático. */
.sdp-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, .5rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, .75rem);
  background: var(--sdp-surface-card, #fff);
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease);
}
.sdp-preset-card:hover { border-color: var(--sdp-brand-gold, #B5904A); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06)); transform: translateY(-2px); }
.sdp-preset-card:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-preset-card.is-selected { border-color: var(--sdp-brand-gold, #B5904A); background: var(--color-gold-100, #F7F0DC); box-shadow: inset 0 0 0 1px var(--sdp-brand-gold, #B5904A); }
.sdp-preset-card__title { font-family: var(--font-display); font-size: var(--font-size-sm, .875rem); font-weight: 700; color: var(--sdp-brand-navy, #16243C); }
.sdp-preset-card__desc { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-preset-card.is-selected .sdp-preset-card__title { color: var(--sdp-brand-navy, #16243C); }
:root[data-theme="dark"] .sdp-preset-card { background: var(--sdp-surface-card, #152236); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-preset-card.is-selected { background: rgba(181, 144, 74, .16); border-color: rgba(181, 144, 74, .58); box-shadow: inset 0 0 0 1px rgba(181, 144, 74, .58); }
:root[data-theme="dark"] .sdp-preset-card__title,
:root[data-theme="dark"] .sdp-preset-card.is-selected .sdp-preset-card__title { color: var(--color-text-primary, #F5F7FA); }

/* --- Lista de histórico: linhas clicáveis (badge + corpo + data) ---
   Distinta da .sdp-selectable-list (checkbox/seleção); aqui cada item é um
   botão que abre o registro. Token-only, hover dourado, dark automático. */
.sdp-history-list { display: flex; flex-direction: column; gap: var(--space-2, .5rem); }
.sdp-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  width: 100%;
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, .75rem);
  background: var(--sdp-surface-card, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.sdp-history-item:hover { border-color: var(--sdp-brand-gold, #B5904A); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06)); }
.sdp-history-item:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181,144,74,.42)); }
.sdp-history-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sdp-history-item__title { font-size: var(--font-size-sm, .875rem); font-weight: 600; color: var(--color-text-primary, #111827); }
.sdp-history-item__meta { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.sdp-history-item__aside { flex: 0 0 auto; font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-history-item__desc { font-size: var(--font-size-sm, .875rem); color: var(--color-text-secondary, #4B5563); line-height: 1.5; margin: 4px 0 0; white-space: pre-wrap; }
:root[data-theme="dark"] .sdp-history-item { background: var(--sdp-surface-card, #152236); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-history-item__title { color: var(--color-text-primary, #F5F7FA); }

/* Item de histórico colapsável (ex.: medidas): resumo clicável + chevron + painel que expande.
   Recolhido = especificação em 1 linha (--preview) + responsável; expandido = tudo. */
.sdp-history-item--collapsible { align-items: flex-start; }
.sdp-history-item__chevron { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--color-text-muted, #6B7280); transition: transform var(--transition-base, 250ms ease); }
.sdp-history-item.is-expanded .sdp-history-item__chevron { transform: rotate(180deg); }
.sdp-history-item__desc--preview { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sdp-history-item.is-expanded .sdp-history-item__desc--preview { display: block; -webkit-line-clamp: none; overflow: visible; }
.sdp-history-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition-base, 250ms ease); }
.sdp-history-item.is-expanded .sdp-history-item__panel { grid-template-rows: 1fr; }
.sdp-history-item__panel > div { overflow: hidden; min-height: 0; }

/* --- Grupo colapsável "Circunstâncias, defesa e despacho" (registrar de medidas) ---
   <details> nativo: minimizado por padrão, um clique no <summary> expande. Nível ACIMA
   do show/hide por tipo — cada campo interno (atenuantes/agravantes/defesa/despacho)
   ainda aparece só quando o tipo o habilita. O JS esconde o <details> inteiro (.sdp-hidden)
   quando nenhum dos 4 é elegível. */
.sdp-collapse-circ {
  grid-column: 1 / -1; /* full-width dentro do .sdp-form-grid (senão vira item de 1 coluna, espremido) */
  min-width: 0;
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface-1, #F6F4EE);
  margin-bottom: var(--space-4, 1rem);
  overflow: hidden;
}
.sdp-collapse-circ__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-sm, .875rem);
  color: var(--sdp-brand-navy, #16243C);
  list-style: none;
  user-select: none;
}
/* Remove o triângulo nativo do <summary> (usamos o chevron SVG próprio). */
.sdp-collapse-circ__summary::-webkit-details-marker { display: none; }
.sdp-collapse-circ__summary::marker { content: ""; }
.sdp-collapse-circ__summary > .sdp-icon:first-child { flex: 0 0 auto; color: var(--sdp-brand-gold, #B5904A); }
.sdp-collapse-circ__title { flex: 0 0 auto; }
.sdp-collapse-circ__opt {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-muted, #6B7280);
  padding: 1px 8px;
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: 999px;
}
.sdp-collapse-circ__chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--color-text-muted, #6B7280);
  transition: transform var(--transition-base, 250ms ease);
}
.sdp-collapse-circ[open] .sdp-collapse-circ__chevron { transform: rotate(180deg); }
.sdp-collapse-circ__summary:hover { background: var(--color-surface-2, #EFEBE0); }
.sdp-collapse-circ__summary:focus-visible { outline: 2px solid var(--sdp-brand-gold, #B5904A); outline-offset: -2px; }
.sdp-collapse-circ__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  padding-top: var(--space-1, .25rem);
  border-top: 1px solid var(--color-border-subtle, #DDD6C4);
}
:root[data-theme="dark"] .sdp-collapse-circ {
  background: var(--color-surface-1, #11233A);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-collapse-circ__summary { color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-collapse-circ__summary:hover { background: var(--color-surface-2, #16304D); }
:root[data-theme="dark"] .sdp-collapse-circ__opt { border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-collapse-circ__body { border-top-color: var(--color-border-subtle, #2A3B56); }

/* --- Resultado da análise de IA: tipografia do markdown renderizado + rodapé meta.
   Os <h2>/<h3>/<ul>/<p> vêm do renderizador (sem classe) → estilizados por contexto. */
.sdp-analise-result { color: var(--color-text-secondary, #4B5563); line-height: 1.6; }
.sdp-analise-result h2 { font-family: var(--font-display); color: var(--sdp-brand-navy, #16243C); font-size: var(--font-size-xl, 1.25rem); margin: var(--space-6, 1.5rem) 0 var(--space-3, .75rem); padding-bottom: var(--space-2, .5rem); border-bottom: 1px solid var(--color-border-subtle, #DDD6C4); }
.sdp-analise-result h3 { font-family: var(--font-display); color: var(--sdp-brand-navy, #16243C); font-size: var(--font-size-lg, 1.125rem); margin: var(--space-5, 1.25rem) 0 var(--space-2, .5rem); }
.sdp-analise-result p { margin: var(--space-3, .75rem) 0; }
.sdp-analise-result ul { margin: var(--space-3, .75rem) 0; padding-left: var(--space-6, 1.5rem); list-style: disc; }
.sdp-analise-result li { margin-bottom: var(--space-2, .5rem); }
.sdp-analise-result table { width: 100%; border-collapse: collapse; margin: var(--space-4, 1rem) 0; font-size: var(--font-size-sm, .875rem); }
.sdp-analise-result th, .sdp-analise-result td { border: 1px solid var(--color-border-subtle, #DDD6C4); padding: var(--space-2, .5rem) var(--space-3, .75rem); text-align: left; }
.sdp-analise-result th { background: var(--color-surface-2, #EFEBE0); color: var(--sdp-brand-navy, #16243C); font-weight: 700; }
.sdp-analise-meta .sdp-alert__body { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3, .75rem); }
.sdp-analise-meta__text { font-size: var(--font-size-xs, .75rem); }
:root[data-theme="dark"] .sdp-analise-result h2,
:root[data-theme="dark"] .sdp-analise-result h3,
:root[data-theme="dark"] .sdp-analise-result th { color: var(--color-text-primary, #F5F7FA); }

@media (max-width: 640px) {
  .sdp-action-cluster .sdp-btn,
  .medida-ai-actions .sdp-btn {
    flex-basis: 100%;
  }
  .sdp-action-help {
    flex-basis: 100%;
  }
  .sdp-selectable-list,
  .medida-faltas-container {
    padding: var(--space-3, .75rem);
  }
  .sdp-blocking-dialog,
  .medida-ia-dialog {
    padding: var(--space-6, 1.5rem);
  }
}

/* estado funcional reutilizavel para elementos controlados por JS.
   Fica no fim para vencer displays naturais de componentes sem precisar de !important. */
.sdp-hidden,
.sdp-field.sdp-hidden,
.sdp-alert.sdp-hidden,
.sdp-info-box.sdp-hidden,
.sdp-status-line.sdp-hidden,
.sdp-option-card.sdp-hidden {
  display: none;
}

/* ------------------------------------------------------------------ *
 * IMPRESSAO — camada canonica reutilizavel.
 * Esconde o chrome (topbar/sidebar/trilha/acoes) e o que a pagina marcar
 * com .sdp-no-print, e estica o conteudo pra ocupar a folha. O !important
 * aqui e idiomatico de @media print (vence os estilos de tela) e vive na
 * FONTE, nao em override de pagina — a pagina so consome .sdp-no-print.
 * ------------------------------------------------------------------ */
@media print {
  .top-bar, .sidebar, .sdp-sidebar, .sdp-topbar,
  .breadcrumb, .sdp-breadcrumb,
  .sdp-page-header__actions, .sdp-no-print {
    display: none !important;
  }
  .main-layout { display: block !important; }
  .content-area { padding: 0 !important; }
  .main-content, .main-content--wide {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body { background: #fff !important; }
}

/* ============================================================================
   CHAT / INBOX — interface de mensageria (lista de conversas + thread)
   ---------------------------------------------------------------------------
   Família reutilizável estilo "WhatsApp Web": shell de 2 colunas, lista de
   conversas, bolhas de mensagem (entrada/saída), header e composer da thread.
   Origem: /pages/comunicacao/inbox-waba.html. Token-only, dark-aware, zero
   !important. Consumida por telas de conversa/atendimento.
   ============================================================================ */
.sdp-chat {
  display: flex;
  height: calc(100vh - 280px);
  min-height: 520px;
  background: var(--sdp-surface-card, #fff);
  border: 1px solid var(--color-border-subtle, #DDD6C4);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(31, 45, 74, .12));
  overflow: hidden;
}

/* ---------- Coluna esquerda: lista ---------- */
.sdp-chat__list {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border-subtle, #DDD6C4);
  background: var(--color-surface-1, #F6F4EE);
}
.sdp-chat__list-header {
  padding: var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-border-subtle, #DDD6C4);
  background: var(--sdp-surface-card, #fff);
}
.sdp-chat__list-header .sdp-input-group { margin-top: var(--space-3, .75rem); }
.sdp-chat__list-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  color: var(--sdp-brand-navy, #16243C);
}
.sdp-chat__list-count {
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-muted, #6B7280);
  font-weight: 500;
}
.sdp-chat__conversas {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2, .5rem) 0;
}
.sdp-chat__section {
  padding: var(--space-3, .75rem) var(--space-4, 1rem) var(--space-1, .25rem);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-text-muted, #6B7280);
}

/* ---------- Item de conversa ---------- */
.sdp-chat-conv {
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-border-subtle, #DDD6C4);
  cursor: pointer;
  transition: background .15s ease;
}
.sdp-chat-conv:hover { background: var(--color-surface-2, #EFEBE0); }
.sdp-chat-conv.is-active {
  background: var(--color-action-selected, rgba(181, 144, 74, .16));
  border-left: 3px solid var(--sdp-brand-gold, #B5904A);
}
.sdp-chat-conv__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2, .5rem);
  margin-bottom: 2px;
}
.sdp-chat-conv__title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: var(--font-size-sm, .875rem);
  color: var(--color-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdp-chat-conv__time {
  flex-shrink: 0;
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-subtle, #9CA3AF);
}
.sdp-chat-conv__sub {
  margin-bottom: var(--space-1, .25rem);
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-muted, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdp-chat-conv__preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2, .5rem);
  font-size: var(--font-size-sm, .875rem);
  color: var(--color-text-secondary, #4B5563);
}
.sdp-chat-conv__preview > span:first-child {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdp-chat-conv__dot { color: var(--color-status-success, #16A34A); font-size: .65em; }
.sdp-chat-conv__bot-mute { font-size: .85em; opacity: .8; }

/* ---------- Coluna direita: thread ---------- */
.sdp-chat__thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2, #EFEBE0);
}
.sdp-chat__thread-inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sdp-chat__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, .75rem);
  padding: var(--space-5, 1.25rem);
  text-align: center;
  color: var(--color-text-muted, #6B7280);
}
.sdp-chat__placeholder-icon { width: 64px; height: 64px; color: var(--color-text-subtle, #9CA3AF); }
.sdp-chat__placeholder p { font-size: var(--font-size-sm, .875rem); max-width: 320px; margin: 0; }

.sdp-chat-thread__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3, .75rem);
  padding: var(--space-3, .75rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--color-border-subtle, #DDD6C4);
  background: var(--sdp-surface-card, #fff);
}
.sdp-chat-thread__title { font-weight: 700; font-size: var(--font-size-base, 1rem); color: var(--color-text-primary, #111827); }
.sdp-chat-thread__sub { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-chat-thread__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2, .5rem); }

.sdp-chat-thread__messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, .5rem);
  padding: var(--space-5, 1.25rem);
}

/* ---------- Bolhas ---------- */
.sdp-chat-msg { display: flex; }
.sdp-chat-msg--out { justify-content: flex-end; }
.sdp-chat-msg--in { justify-content: flex-start; }
.sdp-chat-bubble {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  width: fit-content;
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31, 45, 74, .06));
  font-size: var(--font-size-sm, .875rem);
  line-height: 1.35;
  word-wrap: break-word;
}
.sdp-chat-bubble--out {
  background: var(--color-success-soft, #DCFCE7);
  color: var(--color-text-primary, #111827);
  border-bottom-right-radius: 2px;
}
.sdp-chat-bubble--in {
  background: var(--sdp-surface-card, #fff);
  color: var(--color-text-primary, #111827);
  border-bottom-left-radius: 2px;
}
.sdp-chat-bubble__text { white-space: pre-wrap; word-wrap: break-word; }
.sdp-chat-bubble__meta {
  align-self: flex-end;
  margin-top: 2px;
  font-size: var(--font-size-xs, .75rem);
  color: var(--color-text-muted, #6B7280);
  white-space: nowrap;
  line-height: 1.1;
}
.sdp-chat-bubble__status--sent { color: var(--color-text-subtle, #9CA3AF); }
.sdp-chat-bubble__status--delivered { color: var(--color-text-secondary, #4B5563); font-weight: 700; }
.sdp-chat-bubble__status--read { color: var(--color-status-success, #16A34A); font-weight: 600; }
.sdp-chat-bubble__status--failed { color: var(--color-status-danger, #DC2626); font-weight: 600; }

/* ---------- Composer ---------- */
.sdp-chat-thread__composer {
  border-top: 1px solid var(--color-border-subtle, #DDD6C4);
  background: var(--sdp-surface-card, #fff);
  padding: var(--space-3, .75rem) var(--space-5, 1.25rem);
}
.sdp-chat-thread__composer .sdp-field { margin-bottom: var(--space-2, .5rem); }

/* ---------- Estado escondido / dark / mobile ---------- */
.sdp-chat.sdp-hidden { display: none; }

:root[data-theme="dark"] .sdp-chat {
  background: var(--sdp-surface-card, #152236);
  border-color: var(--color-border-subtle, #2A3B56);
}
:root[data-theme="dark"] .sdp-chat__list { background: var(--color-surface-1, #11233A); border-right-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-chat__list-header { background: var(--sdp-surface-card, #152236); border-bottom-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-chat__list-title { color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-chat-conv { border-bottom-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-chat-conv:hover { background: var(--color-surface-2, #1B2D45); }
:root[data-theme="dark"] .sdp-chat-conv__title { color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-chat__thread { background: var(--color-surface-1, #11233A); }
:root[data-theme="dark"] .sdp-chat-thread__header,
:root[data-theme="dark"] .sdp-chat-thread__composer { background: var(--sdp-surface-card, #152236); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-chat-thread__title { color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-chat-bubble--in { background: var(--sdp-surface-card, #1F3350); color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-chat-bubble--out { background: rgba(22, 163, 74, .22); color: var(--color-text-primary, #F5F7FA); }

@media (max-width: 768px) {
  .sdp-chat { height: calc(100vh - 220px); min-height: 400px; }
  .sdp-chat__list { width: 100%; }
  /* MVP: no mobile abre só a lista; thread fica pra próxima iteração */
  .sdp-chat__thread { display: none; }
}

/* ============================================================================
   Modal: cabeçalho rico (avatar + título + subtítulo) e tamanho XL
   ----------------------------------------------------------------------------
   Para modais de detalhe com foto/avatar à esquerda do título (ex.: ficha do
   aluno no Conselho de Classe). O bloco de texto cresce e trunca; o subtítulo
   é a linha de contexto sob o título.
   ============================================================================ */
.sdp-modal--xl { max-width: 880px; }
.sdp-modal__header-text { flex: 1; min-width: 0; }
.sdp-modal__title { font-family: var(--font-display); color: var(--sdp-brand-navy, #16243C); font-size: var(--font-size-lg, 1.125rem); margin: 0; }
.sdp-modal__subtitle { font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #6B7280); margin-top: 2px; }
:root[data-theme="dark"] .sdp-modal__title { color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-modal__subtitle { color: var(--color-text-muted, #A8B3C7); }

/* ============================================================================
   Caixa de leitura (read-out) — fundo soft com pares rótulo/valor
   ----------------------------------------------------------------------------
   Bloco somente-leitura (ex.: movimentação registrada pela coordenação,
   feedback de média do boletim). `__label` é o rótulo discreto à esquerda.
   ============================================================================ */
.sdp-readout { background: var(--color-surface-1, #F6F4EE); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-md, 8px); padding: var(--space-4, 1rem); font-size: var(--font-size-sm, .875rem); color: var(--color-text-secondary, #4B5563); line-height: 1.6; }
.sdp-readout__label { color: var(--color-text-muted, #6B7280); font-weight: 600; }
.sdp-readout__title { font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); font-weight: 700; margin-bottom: var(--space-2, .5rem); }
:root[data-theme="dark"] .sdp-readout { background: var(--color-surface-1, #11233A); border-color: var(--color-border-strong, #4A5E7C); color: var(--color-text-secondary, #C7D0DE); }

/* ============================================================================
   Grade chave-valor (KV) — caixinhas título/valor/legenda
   ----------------------------------------------------------------------------
   Resumo numérico em blocos (ex.: Faltas / Medidas / Disciplinas < 6 / Nota).
   Distinto do `.sdp-metric-card` (que é card com ícone): aqui são caixas soft
   compactas para dados automáticos lado a lado.
   ============================================================================ */
.sdp-kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3, .75rem); margin-bottom: var(--space-4, 1rem); }
.sdp-kv { background: var(--color-surface-1, #F6F4EE); border-radius: var(--radius-md, 8px); padding: var(--space-3, .75rem); }
.sdp-kv__title { font-size: var(--font-size-xs, .75rem); text-transform: uppercase; color: var(--color-text-muted, #6B7280); font-weight: 700; letter-spacing: var(--letter-spacing-wide, .04em); margin-bottom: var(--space-2, .5rem); }
.sdp-kv__value { font-family: var(--font-display); font-size: var(--font-size-2xl, 1.5rem); font-weight: 800; line-height: 1; color: var(--sdp-brand-navy, #16243C); }
.sdp-kv__value--success { color: var(--color-status-success, #16A34A); }
.sdp-kv__value--danger  { color: var(--color-status-danger, #DC2626); }
.sdp-kv__list { font-size: var(--font-size-sm, .8125rem); color: var(--color-text-secondary, #4B5563); line-height: 1.5; margin-top: var(--space-2, .5rem); }
.sdp-kv__list .sdp-kv__empty { color: var(--color-text-subtle, #9CA3AF); }
.sdp-kv--block { grid-column: 1 / -1; }
:root[data-theme="dark"] .sdp-kv { background: var(--color-surface-1, #11233A); }
:root[data-theme="dark"] .sdp-kv__value { color: var(--sdp-text, #F5F7FA); }

/* ============================================================================
   Lista de definição (deflist) — pares "rótulo: valor" com ícone
   ----------------------------------------------------------------------------
   Dados cadastrais / atributos de uma entidade em grade responsiva
   (ex.: Código, Turma, Matrícula, Responsável na ficha do aluno). Distinta da
   `.sdp-kv-grid` (valores numéricos grandes) — aqui é texto rotulado denso.
   `--full` ocupa a linha inteira (endereço, observação). Ícone vem do sprite.
   ============================================================================ */
.sdp-deflist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3, .75rem); }
.sdp-deflist__item { display: flex; align-items: flex-start; gap: var(--space-2, .5rem); color: var(--color-text-muted, #6B7280); line-height: 1.4; }
.sdp-deflist__item > .sdp-icon { flex: 0 0 auto; margin-top: 2px; color: var(--sdp-brand-gold, #B5904A); }
.sdp-deflist__item--full { grid-column: 1 / -1; }
.sdp-deflist--cols-1 { grid-template-columns: 1fr; }
.sdp-deflist__term { font-weight: 600; color: var(--color-text-secondary, #4B5563); }
.sdp-deflist__value { color: var(--color-text-primary, #111827); word-break: break-word; }
:root[data-theme="dark"] .sdp-deflist__value { color: var(--sdp-text, #F5F7FA); }

/* ============================================================================
   Mini-estatísticas — grade compacta de números rotulados num card
   ----------------------------------------------------------------------------
   Tira de 4 indicadores dentro de um card clicável (ex.: card de aluno no
   Conselho). Polaridade da cor por modificador, via token semântico.
   ============================================================================ */
.sdp-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1, .25rem); }
.sdp-mini-stat { text-align: center; background: var(--color-surface-1, #F6F4EE); border-radius: var(--radius-sm, 6px); padding: var(--space-2, .5rem) 2px; }
.sdp-mini-stat__num { font-size: var(--font-size-base, 1rem); font-weight: 800; line-height: 1; color: var(--sdp-mini-cor, var(--sdp-brand-navy, #16243C)); font-variant-numeric: tabular-nums; }
.sdp-mini-stat__lbl { font-size: 9px; color: var(--color-text-muted, #6B7280); margin-top: 4px; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); }
.sdp-mini-stat--alerta { --sdp-mini-cor: var(--color-status-danger, #DC2626); }
.sdp-mini-stat--ok     { --sdp-mini-cor: var(--color-status-success, #16A34A); }
.sdp-mini-stat--neutro { --sdp-mini-cor: var(--sdp-brand-navy, #16243C); }
:root[data-theme="dark"] .sdp-mini-stat { background: var(--color-surface-1, #11233A); }
:root[data-theme="dark"] .sdp-mini-stat--neutro { --sdp-mini-cor: var(--sdp-text, #F5F7FA); }

/* ============================================================================
   Checklist de itens (chips feito/pendente) — derivado de uma lista
   ----------------------------------------------------------------------------
   Ex.: disciplinas da turma com observação registrada (✓) vs pendentes (○).
   ============================================================================ */
.sdp-checklist { background: var(--color-surface-1, #F6F4EE); border-radius: var(--radius-md, 8px); padding: var(--space-3, .75rem) var(--space-4, 1rem); margin-bottom: var(--space-4, 1rem); }
.sdp-checklist__title { font-size: var(--font-size-xs, .75rem); font-weight: 700; color: var(--color-text-secondary, #4B5563); margin-bottom: var(--space-2, .5rem); }
.sdp-checklist__chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs, .75rem); font-weight: 600; padding: 4px 9px; border-radius: var(--radius-sm, 8px); margin: 0 5px 5px 0; }
.sdp-checklist__chip--feito { background: var(--color-success-soft, #DCFCE7); color: var(--color-status-success, #16A34A); }
.sdp-checklist__chip--pendente { background: var(--color-surface, #FFFCF5); color: var(--color-text-secondary, #4B5563); border: 1px dashed var(--color-border-strong, #C8BFA8); cursor: pointer; }
.sdp-checklist__chip--pendente:hover { background: var(--color-navy-100, #E8EDF4); color: var(--sdp-brand-navy, #16243C); border-color: var(--sdp-brand-navy, #16243C); }
:root[data-theme="dark"] .sdp-checklist { background: var(--color-surface-1, #11233A); }
:root[data-theme="dark"] .sdp-checklist__chip--pendente { background: var(--color-surface-2, #1B2D45); }

/* ============================================================================
   Item de observação — cartão com fio lateral + cabeçalho + tags + texto
   ----------------------------------------------------------------------------
   Ex.: observação pedagógica de cada professor no Conselho de Classe.
   ============================================================================ */
.sdp-obs-item { border: 1px solid var(--color-border-subtle, #DDD6C4); border-left: 3px solid var(--sdp-brand-navy, #16243C); border-radius: var(--radius-md, 8px); padding: var(--space-3, .75rem) var(--space-4, 1rem); margin-bottom: var(--space-3, .75rem); }
.sdp-obs-item__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3, .75rem); margin-bottom: var(--space-2, .5rem); }
.sdp-obs-item__prof { font-weight: 700; color: var(--color-text-primary, #111827); font-size: var(--font-size-sm, .875rem); }
.sdp-obs-item__disc { font-size: var(--font-size-xs, .8125rem); color: var(--sdp-brand-navy, #16243C); font-weight: 600; }
.sdp-obs-item__actions { display: flex; gap: var(--space-1, .25rem); flex: 0 0 auto; }
.sdp-obs-item__tags { margin: var(--space-2, .5rem) 0; }
.sdp-obs-item__text { font-size: var(--font-size-sm, .875rem); color: var(--color-text-secondary, #4B5563); line-height: 1.5; margin-top: 4px; }
.sdp-obs-item__text b { color: var(--color-text-primary, #111827); }
:root[data-theme="dark"] .sdp-obs-item { border-color: var(--color-border-strong, #4A5E7C); border-left-color: var(--sdp-brand-gold, #B5904A); }
:root[data-theme="dark"] .sdp-obs-item__prof { color: var(--color-text-primary, #F5F7FA); }
:root[data-theme="dark"] .sdp-obs-item__disc { color: var(--sdp-brand-gold, #B5904A); }

/* ============================================================================
   Tabela compacta no card (boletim mini) — variante densa do .sdp-table
   ----------------------------------------------------------------------------
   Tabela pequena dentro de uma caixa KV (notas por bimestre). Reaproveita o
   .sdp-table com padding reduzido + coluna destacada (bimestre atual) e
   células de nota tintadas por faixa.
   ============================================================================ */
.sdp-table--mini { font-size: var(--font-size-xs, .75rem); }
.sdp-table--mini thead th,
.sdp-table--mini tbody td { padding: var(--space-1, .25rem) var(--space-2, .5rem); text-align: center; }
.sdp-table--mini thead th:first-child,
.sdp-table--mini tbody td:first-child { text-align: left; }
.sdp-table--mini th.is-current,
.sdp-table--mini td.is-current { background: var(--color-info-soft, #DBEAFE); color: var(--color-status-info, #2563EB); }
.sdp-cell-grade { font-weight: 700; font-variant-numeric: tabular-nums; }
.sdp-cell-grade--ok    { color: var(--color-status-success, #16A34A); background: var(--color-success-soft, #DCFCE7); }
.sdp-cell-grade--baixo { color: var(--color-status-danger, #DC2626); background: #FEE2E2; } /* vermelho perceptível (o token danger-soft #FEF2F2 é quase branco) */
.sdp-cell-grade--vazia { color: var(--color-text-subtle, #9CA3AF); }

/* ============================================================================
   Utilitários de apoio (layout/tipografia) — consumidos pela Ficha e demais
   ============================================================================ */
.sdp-stack--center { align-items: center; text-align: center; }
.sdp-mt-4 { margin-top: var(--space-6, 1.5rem); }
.sdp-ml-auto { margin-left: auto; }
.sdp-section-title--sm { font-size: var(--font-size-base, 1rem); display: inline-flex; align-items: center; gap: var(--space-2, .5rem); }
.sdp-section-title--sm > .sdp-icon { color: var(--sdp-brand-gold, #B5904A); }
/* Tabela com todas as colunas centradas, exceto a 1ª (rótulo) */
.sdp-table--center th, .sdp-table--center td { text-align: center; }
.sdp-table--center th:first-child, .sdp-table--center td:first-child { text-align: left; }


/* ============================================================================
   Frequência — resumo total, barras mensais e registros de faltas
   ----------------------------------------------------------------------------
   Reusa os tokens de status (P=sucesso, F=perigo, A=info, FC=alerta) já usados
   na família .sdp-freq-cell. Theme-aware via tokens soft.
   ============================================================================ */
.sdp-freq-total { text-align: center; padding: var(--space-4, 1rem); border-radius: var(--radius-md, 8px); background: var(--color-info-soft, #DBEAFE); }
.sdp-freq-total__pct { font-family: var(--font-display); font-size: var(--font-size-2xl, 1.5rem); font-weight: 800; line-height: 1; color: var(--color-status-info, #2563EB); }
.sdp-freq-total__label { font-size: var(--font-size-sm, .875rem); color: var(--color-text-secondary, #4B5563); margin-top: var(--space-1, .25rem); }
.sdp-freq-month { background: var(--color-surface-1, #F6F4EE); border-radius: var(--radius-md, 8px); padding: var(--space-4, 1rem); border-left: 4px solid var(--sdp-brand-gold, #B5904A); }
.sdp-freq-month__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3, .75rem); }
.sdp-freq-month__name { font-weight: 600; color: var(--color-text-primary, #111827); }
.sdp-freq-month__pct { font-size: var(--font-size-lg, 1.125rem); font-weight: 700; color: var(--color-status-success, #16A34A); }
.sdp-freq-month__pct--baixa { color: var(--color-status-danger, #DC2626); }
.sdp-freq-bar { display: flex; height: 8px; border-radius: var(--radius-full, 4px); overflow: hidden; margin-bottom: var(--space-3, .75rem); }
.sdp-freq-bar__seg { height: 100%; }
.sdp-freq-bar__seg--p  { background: var(--color-status-success, #16A34A); }
.sdp-freq-bar__seg--f  { background: var(--color-status-danger, #DC2626); }
.sdp-freq-bar__seg--a  { background: var(--color-status-info, #2563EB); }
.sdp-freq-bar__seg--fc { background: var(--color-status-warning, #CA8A04); }
.sdp-freq-legend { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #6B7280); }
.sdp-freq-legend__item { display: inline-flex; align-items: center; gap: 4px; }
.sdp-freq-legend__dot { width: 12px; height: 12px; border-radius: var(--radius-sm, 2px); display: inline-block; }
.sdp-freq-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2, .5rem); }
.sdp-freq-records__item { text-align: center; font-size: var(--font-size-sm, .875rem); font-weight: 600; padding: var(--space-2, .5rem); border-radius: var(--radius-sm, 6px); background: var(--color-danger-soft, #FEF2F2); color: var(--color-status-danger, #991B1B); }
.sdp-freq-records__item--a  { background: var(--color-info-soft, #DBEAFE);    color: var(--color-status-info, #1E40AF); }
.sdp-freq-records__item--fc { background: var(--color-warning-soft, #FEF3C7); color: var(--color-status-warning, #92400E); }
:root[data-theme="dark"] .sdp-freq-month { background: var(--color-surface-1, #11233A); }
:root[data-theme="dark"] .sdp-freq-month__name { color: var(--sdp-text, #F5F7FA); }

/* ============================================================================
   Boletim — bloco de média geral anual (faixa de destaque navy)
   ============================================================================ */
.sdp-boletim-geral { text-align: center; padding: var(--space-4, 1rem); border-radius: var(--radius-md, 8px); margin-top: var(--space-4, 1rem); background: var(--sdp-brand-navy, #16243C); color: var(--color-text-inverse, #fff); }
.sdp-boletim-geral h3 { margin: 0 0 var(--space-2, .5rem); font-size: var(--font-size-sm, .938rem); }
.sdp-boletim-geral__valor { font-family: var(--font-display); font-size: var(--font-size-3xl, 2.25rem); font-weight: 800; margin: var(--space-1, .25rem) 0; }
.sdp-boletim-geral__status { font-size: var(--font-size-sm, .938rem); font-weight: 700; }
.sdp-boletim-geral__info { font-size: var(--font-size-xs, .75rem); opacity: .9; margin-top: var(--space-2, .5rem); }

/* ============================================================================
   Boletim (Consulta) — exibicao completa do boletim de um aluno
   ----------------------------------------------------------------------------
   Usado por assets/js/boletim.js na pagina pages/boletim/consultar. Evolui o
   boletim simples da Ficha (consulta-ficha.js) com: cabecalho de identidade,
   faixa de destaque da media geral (hero navy com realce lateral por situacao),
   medias por bimestre (reusa .sdp-kv) e tabela de notas por materia (.sdp-table).
   Token-only e dark-aware — os tokens de superficie/texto/status ja trocam no
   [data-theme="dark"]; o hero e navy fixo em ambos os temas (por isso usa
   claros proprios sobre o fundo escuro). Sem !important.
   ============================================================================ */
.sdp-boletim { display: flex; flex-direction: column; gap: var(--space-6, 1.5rem); }

/* Cabecalho: identidade do aluno */
.sdp-boletim__head { display: flex; align-items: center; gap: var(--space-4, 1rem); padding-bottom: var(--space-4, 1rem); border-bottom: 1px solid var(--color-border-subtle, #E5E7EB); }
.sdp-boletim__head-text { min-width: 0; }
.sdp-boletim__name { font-family: var(--font-display); font-size: var(--font-size-xl, 1.25rem); font-weight: 700; line-height: 1.2; color: var(--color-text-primary, #111827); margin: 0 0 var(--space-2, .5rem); word-break: break-word; }
.sdp-boletim__meta { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); }

/* Faixa de destaque: media geral anual + situacao (navy com realce lateral) */
.sdp-boletim__hero { --sdp-boletim-accent: var(--color-status-info, #2563EB); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5, 1.25rem); padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem); border-radius: var(--radius-lg, 12px); border-left: 6px solid var(--sdp-boletim-accent); background: var(--sdp-brand-navy, #16243C); color: var(--color-text-inverse, #FAF8F2); box-shadow: var(--shadow-md, 0 4px 12px rgba(31,45,74,.12)); }
.sdp-boletim__hero--aprovado  { --sdp-boletim-accent: var(--color-status-success, #16A34A); }
.sdp-boletim__hero--reprovado { --sdp-boletim-accent: var(--color-status-danger, #DC2626); }
.sdp-boletim__hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1, .25rem); }
.sdp-boletim__hero-label { font-size: var(--font-size-xs, .75rem); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); font-weight: 700; opacity: .82; }
.sdp-boletim__hero-value { font-family: var(--font-display); font-size: var(--font-size-4xl, 2.25rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sdp-boletim__hero-status { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--space-1, .25rem); padding: 4px 13px; border-radius: var(--radius-full, 9999px); font-size: var(--font-size-xs, .75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: rgba(255, 255, 255, .12); }
.sdp-boletim__hero-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sdp-boletim-accent); }

/* Micro-indicadores do hero (materias / na media / abaixo) */
.sdp-boletim__hero-stats { display: flex; gap: var(--space-3, .75rem); }
.sdp-boletim__stat { min-width: 78px; text-align: center; padding: var(--space-3, .75rem) var(--space-4, 1rem); border-radius: var(--radius-md, 8px); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.sdp-boletim__stat-num { display: block; font-family: var(--font-display); font-size: var(--font-size-2xl, 1.5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sdp-boletim__stat-label { display: block; margin-top: 5px; font-size: var(--font-size-xs, .7rem); text-transform: uppercase; letter-spacing: .03em; opacity: .78; }
.sdp-boletim__stat--ok    .sdp-boletim__stat-num { color: #4ADE80; }
.sdp-boletim__stat--baixo .sdp-boletim__stat-num { color: #FCA5A5; }

/* Secao interna (titulo + conteudo) */
.sdp-boletim__section { display: flex; flex-direction: column; gap: var(--space-3, .75rem); }

/* Media de bimestre sem lancamento */
.sdp-boletim__kv-empty { color: var(--color-text-subtle, #9CA3AF); }

/* Tabela: separa a coluna Media Anual das colunas de bimestre */
.sdp-boletim__table th.is-media, .sdp-boletim__table td.is-media { border-left: 2px solid var(--color-border-strong, #C8BFA8); }

@media (max-width: 640px) {
  .sdp-boletim__hero { flex-direction: column; align-items: stretch; }
  .sdp-boletim__hero-stats { justify-content: space-between; }
  .sdp-boletim__stat { flex: 1; min-width: 0; }
}

/* ============================================================================
   Gráfico — caixa relativa p/ Chart.js (maintainAspectRatio:false) + legenda
   ============================================================================ */
.sdp-card--chart { display: flex; flex-direction: column; }
.sdp-card__title--sm { font-size: var(--font-size-sm, .875rem); display: inline-flex; align-items: center; gap: var(--space-2, .5rem); margin-bottom: var(--space-3, .75rem); }
.sdp-card__title--sm > .sdp-icon { color: var(--sdp-brand-gold, #B5904A); }
.sdp-chart-box { position: relative; flex: 1; min-height: 200px; width: 100%; }
.sdp-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4, 1.25rem); padding: var(--space-3, .75rem) var(--space-4, 1rem); margin-bottom: var(--space-4, 1.25rem); background: var(--color-surface-1, #F6F4EE); border: 1px solid var(--color-border-subtle, #E5E7EB); border-radius: var(--radius-md, 10px); }
.sdp-chart-legend__item { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); font-size: var(--font-size-xs, .813rem); font-weight: 500; color: var(--color-text-secondary, #4B5563); }
.sdp-chart-legend__dot { width: 12px; height: 12px; border-radius: var(--radius-sm, 3px); display: inline-block; }
:root[data-theme="dark"] .sdp-chart-legend { background: var(--color-surface-1, #11233A); }

/* --- Mini-cards de valores sob um gráfico: 1 por categoria, faixa lateral = cor da
   barra correspondente (via custom prop --sdp-stat-c, setada inline pelo JS). --- */
.sdp-chart-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3, .75rem); margin-top: var(--space-5, 1.25rem); }
.sdp-chart-stat { display: flex; flex-direction: column; gap: var(--space-1, .25rem); padding: var(--space-2, .5rem) var(--space-3, .75rem); background: var(--color-surface-1, #F6F4EE); border: 1px solid var(--color-border-subtle, #E5E7EB); border-left: 3px solid var(--sdp-stat-c, var(--color-border-strong, #CBD5E1)); border-radius: var(--radius-md, 8px); }
.sdp-chart-stat__value { font-family: var(--font-display); font-size: var(--font-size-xl, 1.25rem); font-weight: 700; line-height: 1; color: var(--color-text-primary, #111827); font-variant-numeric: tabular-nums; }
.sdp-chart-stat__label { font-size: var(--font-size-xs, .75rem); color: var(--color-text-secondary, #4B5563); }

/* ============================================================================
   Comparativo — cards aluno × turma × escola (com indicador de posição)
   ============================================================================ */
.sdp-cmp-card { background: var(--sdp-surface-card, #fff); border: 1px solid var(--color-border-subtle, #E5E7EB); padding: var(--space-4, 1rem); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06)); }
.sdp-cmp-card__title { display: inline-flex; align-items: center; gap: var(--space-2, .4rem); font-size: var(--font-size-xs, .75rem); font-weight: 700; color: var(--color-text-secondary, #4B5563); margin-bottom: var(--space-3, .625rem); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); }
.sdp-cmp-card__title > .sdp-icon { color: var(--sdp-brand-gold, #B5904A); }
.sdp-cmp-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2, .5rem); margin-bottom: var(--space-3, .75rem); }
.sdp-cmp-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3, .625rem) var(--space-2, .5rem); border-radius: var(--radius-md, 10px); background: var(--color-surface-1, #F6F4EE); border: 1px solid var(--color-border-subtle, #EFEBE0); border-top: 3px solid var(--color-border-strong, #CBD5E1); }
.sdp-cmp-cell__label { font-size: var(--font-size-xs, .75rem); font-weight: 600; color: var(--color-text-muted, #6B7280); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .04em); }
.sdp-cmp-cell__val { font-family: var(--font-display); font-size: var(--font-size-xl, 1.25rem); font-weight: 700; line-height: 1.15; color: var(--color-text-primary, #111827); font-variant-numeric: tabular-nums; }
/* Identidade pela borda-topo = cor da série no gráfico (aluno navy · turma dourado · escola cinza); o texto fica sempre legível */
.sdp-cmp-cell--aluno  { border-top-color: var(--sdp-brand-navy, #16243C); background: var(--color-navy-100, #E8EDF4); }
.sdp-cmp-cell--turma  { border-top-color: var(--sdp-brand-gold, #B5904A); }
.sdp-cmp-cell--escola { border-top-color: var(--color-text-muted, #94A3B8); }
.sdp-cmp-flag { display: inline-flex; align-items: center; gap: var(--space-1, .3rem); padding: var(--space-1, .3rem) var(--space-3, .75rem); border-radius: var(--radius-full, 999px); font-size: var(--font-size-xs, .7rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide, .03em); }
.sdp-cmp-flag::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sdp-cmp-flag--above { background: var(--color-success-soft, #ECFDF5); color: var(--color-status-success, #047857); }
.sdp-cmp-flag--below { background: var(--color-danger-soft, #FEF2F2);  color: var(--color-status-danger, #B91C1C); }
.sdp-cmp-flag--equal { background: var(--color-info-soft, #EFF6FF);    color: var(--color-status-info, #1D4ED8); }
:root[data-theme="dark"] .sdp-cmp-card { background: var(--sdp-surface-card, #152236); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-cmp-cell { background: var(--color-surface-1, #11233A); border-color: var(--color-border-subtle, #2A3B56); border-top-color: var(--color-border-strong, #4A5E7C); }
:root[data-theme="dark"] .sdp-cmp-cell__val { color: var(--color-text-primary, #F5F7FA); }
/* Accent da borda-topo no dark: navy escuro sumiria no fundo → usa o navyAlt do gráfico (mesma cor da barra do Aluno) */
:root[data-theme="dark"] .sdp-cmp-cell--aluno  { background: var(--color-surface-2, #152236); border-top-color: var(--color-navy-alt, #5B8DEF); }
:root[data-theme="dark"] .sdp-cmp-cell--turma  { border-top-color: var(--sdp-brand-gold, #B5904A); }
:root[data-theme="dark"] .sdp-cmp-cell--escola { border-top-color: var(--color-text-muted, #94A3B8); }

/* ============================================================================
   Tutorial — passo de artigo (cartão de etapa com imagem + subpassos)
   ----------------------------------------------------------------------------
   Para artigos de tutorial passo-a-passo (1 cartão por etapa: número + título +
   descrição no cabeçalho; corpo com captura de tela e caixa de subpassos com
   selo por letra). DISTINTO de .sdp-stepper (indicador de progresso compacto,
   bullet+label) — aqui cada passo é um BLOCO de conteúdo com mídia. Reutilizável
   pelos demais tutoriais. Token-only, dark via tokens, zero !important.
   ============================================================================ */
.sdp-tutorial-steps { display: flex; flex-direction: column; gap: var(--space-6, 1.5rem); }

.sdp-tutorial-step { background: var(--sdp-surface-card, #fff); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06)); overflow: hidden; }
.sdp-tutorial-step__head { display: flex; align-items: center; gap: var(--space-4, 1rem); padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem); border-bottom: 1px solid var(--color-border-subtle, #DDD6C4); }
.sdp-tutorial-step__num { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-md, 10px); background: var(--sdp-brand-navy, #16243C); color: var(--color-text-inverse, #fff); font-family: var(--font-display); font-size: var(--font-size-lg, 1.125rem); font-weight: 700; }
.sdp-tutorial-step__text { flex: 1; min-width: 0; }
.sdp-tutorial-step__title { font-family: var(--font-display); font-size: var(--font-size-lg, 1.125rem); font-weight: 700; color: var(--sdp-brand-navy, #16243C); margin: 0 0 2px; }
.sdp-tutorial-step__desc { font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #6B7280); margin: 0; line-height: 1.5; }
.sdp-tutorial-step__body { padding: var(--space-6, 1.5rem); }
.sdp-tutorial-step__shot { display: block; width: 100%; height: auto; border-radius: var(--radius-md, 10px); border: 1px solid var(--color-border-subtle, #DDD6C4); box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,45,74,.06)); }

/* Caixa de subpassos / detalhes do passo */
.sdp-tutorial-step__details { margin-top: var(--space-5, 1.25rem); padding: var(--space-5, 1.25rem); background: var(--color-surface-1, #F6F4EE); border: 1px solid var(--color-border-subtle, #DDD6C4); border-radius: var(--radius-md, 10px); }
.sdp-tutorial-step__details-title { display: flex; align-items: center; gap: var(--space-2, .5rem); font-family: var(--font-display); font-size: var(--font-size-base, 1rem); font-weight: 600; color: var(--sdp-brand-navy, #16243C); margin: 0 0 var(--space-4, 1rem); }
.sdp-tutorial-step__details-title > .sdp-icon { color: var(--sdp-brand-gold, #B5904A); }
.sdp-tutorial-substeps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3, .75rem); }
.sdp-tutorial-substep { display: flex; align-items: flex-start; gap: var(--space-3, .75rem); font-size: var(--font-size-sm, .875rem); color: var(--color-text-secondary, #4B5563); line-height: 1.6; }
.sdp-tutorial-substep__badge { display: grid; place-items: center; min-width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--radius-sm, 8px); background: var(--color-gold-100, #F7F0DC); color: var(--sdp-brand-gold, #B5904A); font-family: var(--font-display); font-size: var(--font-size-xs, .8rem); font-weight: 700; }
.sdp-tutorial-substep__text { padding-top: 2px; }
.sdp-tutorial-substep__text strong { color: var(--color-text-primary, #111827); }
.sdp-tutorial-substep__note { display: block; margin-top: 4px; font-size: var(--font-size-xs, .8rem); color: var(--color-text-muted, #6B7280); font-style: italic; }

/* Cartão de conclusão do tutorial (banner de marca) */
.sdp-tutorial-done { text-align: center; padding: var(--space-8, 2.5rem) var(--space-6, 1.5rem); border-radius: var(--radius-lg, 12px); background: var(--sdp-brand-navy, #16243C); color: var(--color-text-inverse, #fff); box-shadow: var(--shadow-md, 0 4px 12px rgba(31,45,74,.12)); }
.sdp-tutorial-done__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-4, 1rem); border-radius: var(--radius-full, 9999px); background: var(--color-gold-a22, rgba(181,144,74,.22)); color: var(--sdp-brand-gold, #B5904A); }
.sdp-tutorial-done__icon > .sdp-icon { width: 32px; height: 32px; }
.sdp-tutorial-done__title { font-family: var(--font-display); font-size: var(--font-size-xl, 1.25rem); font-weight: 700; margin: 0 0 var(--space-2, .5rem); }
.sdp-tutorial-done__text { font-size: var(--font-size-base, 1rem); margin: 0 auto var(--space-5, 1.25rem); max-width: 520px; line-height: 1.6; opacity: .9; }

@media (max-width: 640px) {
  .sdp-tutorial-step__head { flex-direction: column; align-items: flex-start; gap: var(--space-3, .75rem); }
  .sdp-tutorial-step__body { padding: var(--space-5, 1.25rem); }
}

:root[data-theme="dark"] .sdp-tutorial-step { background: var(--sdp-surface-card, #152236); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-tutorial-step__head { border-bottom-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-tutorial-step__title,
:root[data-theme="dark"] .sdp-tutorial-step__details-title { color: var(--sdp-text, #F5F7FA); }
:root[data-theme="dark"] .sdp-tutorial-step__details { background: var(--color-surface-1, #11233A); border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-tutorial-step__shot { border-color: var(--color-border-subtle, #2A3B56); }
:root[data-theme="dark"] .sdp-tutorial-substep__text strong { color: var(--sdp-text, #F5F7FA); }