/* ============================================================
   Timbre Pericial — Design System (fundação)
   Importado do projeto Claude Design "Timbre Pericial Design System".
   Um único arquivo: webfont Lexend + tokens (cor/tipografia/espaço/
   raio/elevação/motion) + aliases de compatibilidade com os nomes
   antigos do app. Carregado ANTES do <style> inline do app, para que
   regras inline possam sobrepor quando necessário.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');

/* ---------- COR: rampas 50→900 + aliases semânticos + tema escuro ---------- */
:root{
  --royal-50:#e8edfb; --royal-100:#d6dff7; --royal-200:#b3c3f0; --royal-300:#8aa1e6;
  --royal-400:#5f7ce0; --royal-500:#3b5fd9; --royal-600:#1e3fae; --royal-700:#152d80;
  --royal-800:#0d1f5c; --royal-900:#081541;
  --gold-50:#faf4e0; --gold-100:#f5e9bf; --gold-200:#ecd485; --gold-300:#e0bd54;
  --gold-400:#d4ac3a; --gold-500:#c9a227; --gold-600:#a9861d; --gold-700:#856817;
  --gold-800:#614b12; --gold-900:#40320c;
  --white:#ffffff;
  --neutral-50:#f4f6fb; --neutral-100:#eaeef6; --neutral-200:#dfe4ee; --neutral-300:#c7cedd;
  --neutral-400:#9aa3b5; --neutral-500:#5b6474; --neutral-600:#454d5c; --neutral-700:#333a47;
  --neutral-800:#1b2230; --neutral-900:#10151f;
  --success-50:#e3f4ea; --success-100:#c2e6d0; --success-500:#1e8e4e; --success-600:#197a43; --success-700:#14602f;
  --warning-50:#fdf3e0; --warning-100:#fbe4b8; --warning-500:#d98c15; --warning-600:#b97a0e; --warning-700:#8a5f0c;
  --danger-50:#fdeaea; --danger-100:#f9cfcf; --danger-500:#d6392c; --danger-600:#b3261e; --danger-700:#8f1d17;
  --info-50:var(--royal-50); --info-500:var(--royal-500); --info-600:var(--royal-600);

  --color-primary:var(--royal-600); --color-primary-hover:var(--royal-700); --color-primary-active:var(--royal-800);
  --color-accent:var(--gold-500);
  --gradient-royal:linear-gradient(135deg,var(--royal-600),var(--royal-500));
  --gradient-sidebar:linear-gradient(180deg,var(--royal-800),var(--royal-700));

  /* COLISÃO CORRIGIDA (26/07/2026): a cor do texto corrido chamava-se
     --text-body, mesmo nome do TAMANHO de fonte do corpo, definido logo abaixo
     na escala tipográfica. Em CSS a segunda declaração vence — então
     `color:var(--text-body)` resolvia para "0.95rem", valor inválido para cor, e
     o texto caía em preto. Estava assim desde a importação do design system, e
     a homepage usava essa cor em 19 lugares. A cor passa a ser --text-default;
     o tamanho continua --text-body. */
  --text-strong:var(--neutral-900); --text-default:var(--neutral-800); --text-muted:var(--neutral-500);
  --text-subtle:var(--neutral-400); --text-on-dark:var(--white); --text-on-dark-muted:rgba(255,255,255,.72);
  --text-link:var(--royal-600);
  /* gold-600 sobre branco mede 4,4:1 — reprova por pouco. O dourado como
     TEXTO usa gold-700 (6,1:1); como preenchimento continua gold-500. */
  --text-accent:var(--gold-700);
  /* Número/rótulo na cor da marca. Existe separado de --color-primary porque
     aquele é cor de PREENCHIMENTO (botão, com texto branco por cima): no tema
     escuro ele clareia para royal-500, que como TEXTO sobre a superfície escura
     mede 3,20:1 — reprova em AA. Como texto, a marca usa royal-300 no escuro. */
  --text-brand:var(--royal-600);
  /* Título em azul-marinho institucional. No tema escuro esse marinho ficaria
     quase invisível sobre o fundo (1,1:1), então o título clareia — a hierarquia
     é preservada pelo peso e pelo tamanho, não pela cor. */
  --text-heading:var(--royal-800);
  /* Segundo nível de título (título de seção, número de indicador). O kit usa
     royal-700 aqui e royal-800 no título da página — a hierarquia é de tom, não
     só de tamanho. No escuro os dois clareiam mantendo a mesma distância. */
  --text-heading-2:var(--royal-700);
  /* Medidas de componente do kit (tokens/spacing.css) */
  --pad-input-y:11px; --pad-input-x:14px; --pad-btn-y:12px; --pad-btn-x:24px;

  --surface-app:var(--neutral-50); --surface-card:var(--white); --surface-elevated:var(--white);
  --surface-sunken:var(--neutral-100); --surface-soft:var(--royal-50); --surface-dark:var(--royal-800);
  --surface-overlay:rgba(13,20,40,.55);

  --border-default:var(--neutral-200); --border-strong:var(--neutral-300);
  --border-focus:var(--royal-500); --border-on-dark:rgba(255,255,255,.12);

  --status-success-surface:var(--success-50); --status-success-solid:var(--success-500); --status-success-text:var(--success-600);
  /* warning-600 sobre warning-50 mede 3,26:1 — reprova em AA para o corpo 0,72rem
     dos badges. O texto de atenção passa a warning-700 (5,3:1). */
  --status-warning-surface:var(--warning-50); --status-warning-solid:var(--warning-500); --status-warning-text:var(--warning-700);
  --status-danger-surface:var(--danger-50); --status-danger-solid:var(--danger-500); --status-danger-text:var(--danger-600);
  --status-info-surface:var(--royal-50); --status-info-solid:var(--royal-600); --status-info-text:var(--royal-600);

  /* ---------- TIPOGRAFIA ---------- */
  --font-sans:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Consolas,'Liberation Mono',monospace;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800;
  --text-display:3rem; --text-h1:2rem; --text-h2:1.45rem; --text-h3:1.15rem; --text-h4:1rem;
  --text-body-lg:1.05rem; --text-body:0.95rem; --text-body-sm:0.875rem; --text-small:0.82rem; --text-caption:0.72rem;
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-open:0.02em; --tracking-wide:0.06em; --tracking-wider:0.13em;

  /* ---------- ESPAÇAMENTO (4/8px) ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --gap-field:16px; --pad-card:24px; --sidebar-width:240px; --page-pad:38px;

  /* ---------- RAIO ---------- */
  --radius-xs:6px; --radius-sm:8px; --radius-md:9px; --radius-lg:12px;
  --radius-card:14px; --radius-xl:20px; --radius-pill:999px; --radius-full:50%;

  /* ---------- ELEVAÇÃO ---------- */
  --shadow-xs:0 1px 2px rgba(13,31,92,.06); --shadow-sm:0 2px 8px rgba(13,31,92,.08);
  --shadow-md:0 8px 30px rgba(13,31,92,.10); --shadow-lg:0 16px 48px rgba(13,31,92,.16);
  --shadow-xl:0 24px 70px rgba(0,0,0,.35);
  --shadow-primary:0 4px 14px rgba(30,63,174,.35); --shadow-primary-hover:0 6px 18px rgba(30,63,174,.45);
  --shadow-focus:0 0 0 3px rgba(59,95,217,.15); --shadow-focus-danger:0 0 0 3px rgba(214,57,44,.18);
  --inset-nav-active:inset 3px 0 0 var(--gold-500);
  --bar-top-royal:linear-gradient(90deg,var(--royal-600),var(--royal-500));

  /* ---------- MOTION ---------- */
  --dur-fast:120ms; --dur-base:150ms; --dur-slow:180ms; --dur-slower:300ms; --dur-spin:1s;
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1); --ease-emphasis:cubic-bezier(.2,.7,.2,1);
  --transition-base:all var(--dur-base) var(--ease-standard);

  /* ---------- COMPATIBILIDADE com os nomes antigos do app ----------
     Cada alias aponta para um token SEMÂNTICO, não para um degrau fixo da rampa
     — é isso que faz o app inteiro acompanhar o tema sem reescrever cada regra:
     --royal-pale é "superfície suave", não "azul claro nº 50". */
  --royal:var(--color-primary); --royal-dark:var(--royal-700); --royal-deep:var(--royal-800);
  --royal-light:var(--royal-500); --royal-pale:var(--surface-soft); --gold:var(--gold-500);
  --ink:var(--text-default); --gray:var(--text-muted); --line:var(--border-default);
  /* --white NÃO entra aqui: a rampa define --white:#ffffff e o semântico define
     --surface-card:var(--white). Apontar --white de volta para --surface-card
     fecha um CICLO, e o CSS descarta os dois — toda superfície fica
     transparente. Quem quiser "a cor do cartão" usa --surface-card. */
  --bg:var(--surface-app);
  --ok:var(--status-success-text); --warn:var(--status-warning-text);
  --radius:var(--radius-card); --shadow:var(--shadow-md);
}

[data-theme="dark"]{
  --color-primary:var(--royal-500); --color-primary-hover:var(--royal-400); --color-primary-active:var(--royal-300);
  /* CORRIGIDO (27/07/2026): era royal-500 → royal-400. O texto do botão é
     BRANCO, e branco sobre royal-400 (#5f7ce0) mede 3,86:1 — reprova em AA para
     15,2 px / 600. A ponta clara do gradiente escurece para royal-500, que dá
     5,49:1. Defeito pré-existente do tema escuro, encontrado na varredura da
     1.51: a varredura anterior não compunha gradientes e por isso não o viu. */
  --gradient-royal:linear-gradient(135deg,var(--royal-600),var(--royal-500));
  --gradient-sidebar:linear-gradient(180deg,var(--royal-900),#0a1838);
  --text-strong:#f3f6fd; --text-default:#dbe2f2; --text-muted:#9aa6c2; --text-subtle:#6b7794;
  --text-link:var(--royal-300); --text-accent:var(--gold-400); --text-brand:var(--royal-300);
  --text-heading:var(--text-strong); --text-heading-2:#c3cfeb;
  --surface-app:#070e22; --surface-card:#0e1832; --surface-elevated:#152142; --surface-sunken:#0a1226;
  --surface-soft:#122048; --surface-dark:#050a1a; --surface-overlay:rgba(3,6,18,.66);
  --border-default:#22305a; --border-strong:#31427a; --border-focus:var(--royal-400); --border-on-dark:rgba(255,255,255,.10);
  --status-success-surface:rgba(30,142,78,.16); --status-success-text:#5fd394;
  --status-warning-surface:rgba(217,140,21,.16); --status-warning-text:#f0c060;
  --status-danger-surface:rgba(214,57,44,.16); --status-danger-text:#f08a80;
  --status-info-surface:rgba(59,95,217,.18); --status-info-text:var(--royal-300);
  /* Sombras: no escuro a sombra azulada some no fundo. Vale mais o contorno. */
  --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow-md:0 8px 26px rgba(0,0,0,.42);
  --shadow-lg:0 16px 44px rgba(0,0,0,.52); --shadow-xl:0 24px 70px rgba(0,0,0,.62);
  --shadow-focus:0 0 0 3px rgba(95,124,224,.30);
  /* Os aliases antigos herdam tudo isto porque apontam para tokens semânticos
     (ver o bloco de compatibilidade no :root) — não é preciso repeti-los aqui. */
}

/* ---------- controles do próprio sistema (comuns às três telas) ---------- */
/* Alternador de tema. Fica sempre sobre superfície escura (cabeçalho do admin,
   barra lateral do app, topo da homepage), por isso é claro por definição. */
.tema-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  background:rgba(255,255,255,.10); color:var(--text-on-dark);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-pill);
  font-size:1rem; line-height:1; cursor:pointer;
  transition:var(--transition-base);
}
.tema-btn:hover{ background:rgba(255,255,255,.20); }

/* Foco visível em TUDO que se navega por teclado — exigência de
   acessibilidade do design system, ausente no app até aqui. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}