/* Perfil Studio — tokens (Catálogo Técnico + base de superfícies) */
:root {
  /* ---- Tipografia ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-10: 10px;  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;
  --fs-14: 14px;  --fs-15: 15px;  --fs-17: 17px;  --fs-20: 20px;
  --fs-24: 24px;  --fs-28: 28px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

  --lh-tight: 1.25; --lh-normal: 1.45; --lh-loose: 1.6;
  --tracking-tight: -0.02em; --tracking-caps: 0.06em;

  /* ---- Espaçamento (escala de 4) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- Raios ---- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* ---- Camadas ---- */
  --z-content: 1; --z-sticky: 20; --z-shell: 40; --z-drawer: 60;
  --z-overlay: 80; --z-toast: 100;

  /* ---- Larguras (App Shell Standard §6) ---- */
  --w-padrao: 1480px;   /* conteúdo comum */
  --w-amplo: 1920px;    /* tabelas e operação */
  /* Total = 100%, exige justificativa */

  --sidebar-w: 244px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 52px;
  --contexthdr-h: 60px;

  /* ---- Movimento ---- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: .12s; --dur-base: .18s; --dur-slow: .26s;
}

/* ============================================================
   TEMA CLARO (padrão) — herdado do PerfilX
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --surface-app:    #F5F5F7;  
  --surface-raised: #FFFFFF;
  --surface-sunken: #EFEFF2;
  --surface-hover:  #EBEBEF;
  --surface-active: #E4E4EA;
  /* 0.3: as barras do shell deixam de ser painéis brancos e assentam no
     mesmo plano do fundo — quem se destaca é o conteúdo, não o cromo. */
  --surface-shell:  #F5F5F7;
  --surface-code:   #FBFBFD;

  --border:        #E3E3E8;
  --border-strong: #D2D2DA;
  --border-dashed: #C7C7CC;

  --text-1: #1D1D1F;  
  --text-2: #6E6E73;  
  --text-3: #98989F;
  --text-on-accent: #FFFFFF;

  /* Azul Perfil — ações, seleção, links, foco */
  --accent:         #2563EB;  
  --accent-hover:   #1D4FD8;
  --accent-soft:    #EEF2FF;  
  /* Acento em TEXTO sobre fundo suave: --accent não alcança AA em corpo
     pequeno sobre --accent-soft. Usado em estado selecionado. */
  --accent-strong:  #1E40AF;
  --accent-border:  #C3D4FD;
  --focus-ring:     rgba(37, 99, 235, .34);

  --success:      #0F766E; --success-soft: #ECFDF5; --success-border: #A7F3D0;
  --warning:      #92400E; --warning-soft: #FEF8EC; --warning-border: #FCD34D;
  --danger:       #991B1B; --danger-soft:  #FEF2F2; --danger-border:  #FECACA;
  --neutral-soft: #F0F0F3; --neutral-border: #DFDFE5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.09);

  --overlay-scrim: rgba(20,20,22,.40);
  --diff-add-bg: #ECFDF5; --diff-add-marker: #0F766E;
  --diff-del-bg: #FEF2F2; --diff-del-marker: #991B1B;
  --watermark-opacity: .022;
}

[data-theme="dark"] {
  color-scheme: dark;

  --surface-app:    #131315;
  --surface-raised: #1C1C1F;
  --surface-sunken: #0E0E10;
  --surface-hover:  #232327;
  --surface-active: #2B2B30;
  --surface-shell:  #131315;   /* 0.3: shell no mesmo plano do fundo */
  --surface-code:   #1F1F23;

  --border:        #2E2E33;
  --border-strong: #3C3C43;
  --border-dashed: #46464D;

  --text-1: #F2F2F4;
  --text-2: #A2A2AA;
  --text-3: #74747D;
  --text-on-accent: #FFFFFF;

  --accent:         #6FA8FF;
  --accent-hover:   #86B7FF;
  --accent-soft:    #1B2733;
  --accent-strong:  #A8CBFF;
  --accent-border:  #2F4763;
  --focus-ring:     rgba(111, 168, 255, .38);

  --success:      #4ADE9B; --success-soft: #17251F; --success-border: #2C4A3B;
  --warning:      #F5C14E; --warning-soft: #262015; --warning-border: #4D3D1B;
  --danger:       #FF8A85; --danger-soft:  #2A1818; --danger-border:  #4F2A2A;
  --neutral-soft: #232327; --neutral-border: #35353B;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);

  --overlay-scrim: rgba(0,0,0,.62);
  --diff-add-bg: #16251E; --diff-add-marker: #4ADE9B;
  --diff-del-bg: #2A1818; --diff-del-marker: #FF8A85;
  --watermark-opacity: .05;
}

/* ---- Modo Sistema: segue a preferência do dispositivo ---- */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;

    --surface-app:    #131315;
    --surface-raised: #1C1C1F;
    --surface-sunken: #0E0E10;
    --surface-hover:  #232327;
    --surface-active: #2B2B30;
    --surface-shell:  #131315;
    --surface-code:   #1F1F23;

    --border:        #2E2E33;
    --border-strong: #3C3C43;
    --border-dashed: #46464D;

    --text-1: #F2F2F4;
    --text-2: #A2A2AA;
    --text-3: #74747D;

    --accent:        #6FA8FF;
    --accent-hover:  #86B7FF;
    --accent-soft:   #1B2733;
    --accent-strong: #A8CBFF;
    --accent-border: #2F4763;
    --focus-ring:    rgba(111, 168, 255, .38);

    --success:      #4ADE9B; --success-soft: #17251F; --success-border: #2C4A3B;
    --warning:      #F5C14E; --warning-soft: #262015; --warning-border: #4D3D1B;
    --danger:       #FF8A85; --danger-soft:  #2A1818; --danger-border:  #4F2A2A;
    --neutral-soft: #232327; --neutral-border: #35353B;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.55);

    --overlay-scrim: rgba(0,0,0,.62);
    --diff-add-bg: #16251E; --diff-add-marker: #4ADE9B;
    --diff-del-bg: #2A1818; --diff-del-marker: #FF8A85;
    --watermark-opacity: .05;
  }
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--text-1);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;            /* proíbe overflow horizontal global */
}
img, svg { display: block; max-width: 100%; }

/* O atributo `hidden` SEMPRE vence. Sem esta guarda, qualquer componente com
   display próprio (.alert é flex, .menu é block…) ressuscita um elemento que
   o HTML declarou escondido — o navegador aplica [hidden]{display:none} na
   folha do user agent, e QUALQUER regra de autor passa por cima dela. O v3
   remendava caso a caso (.mod-item, .overlay, .menu, .toast) e o caso não
   coberto (.alert) apareceu em produção como caixa vazia visível. `hidden` é
   semântica do documento, não escolha de estilo: o !important aqui devolve ao
   atributo a força que o padrão HTML pretendia que ele tivesse. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Tamanho base do ícone: sem isto, um .ico em contexto não previsto
   assume a dimensão intrínseca do SVG e estoura a linha. Cada contexto
   (.btn .ico, .nav-item .ico, …) continua sobrepondo por especificidade. */
.ico { width: 16px; height: 16px; flex: 0 0 auto; }
a { color: var(--color-action-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visível e consistente (nunca só cor) */
:focus-visible {
  outline: 2px solid var(--color-action-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--color-action-soft); color: var(--text-1); }

/* Barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---- Catálogo Técnico do Design System v0.2 (marca e ação) ---- */
:root,
[data-theme="light"] {
  --color-brand-accent:   #14497E;
  --color-brand-surface:  #14497E;
  --color-action-accent:  #2563EB;
  --color-action-surface: #2563EB;
  --color-on-brand:       #FFFFFF;
  --color-on-action:      #FFFFFF;
  --color-action-soft:    color-mix(in srgb, var(--color-action-accent) 8%, var(--surface-raised));
  --color-action-border:  color-mix(in srgb, var(--color-action-accent) 34%, var(--surface-raised));
  --color-focus-ring:     color-mix(in srgb, var(--color-action-accent) 38%, transparent);
  --icon-size-dense: 14px;
  --icon-size-compact: 16px;
  --icon-size-control: 20px;
  --icon-size-feature: 24px;
  --icon-stroke-dense: 1.75;
  --icon-stroke-compact: 1.75;
  --icon-stroke-control: 1.5;
  --icon-stroke-feature: 1.5;
  --icon-color-disabled: currentColor;
  --icon-opacity-disabled: 0.55;
}
[data-theme="dark"] {
  --color-brand-accent:   #97C3EF;
  --color-brand-surface:  #14497E;
  --color-action-accent:  #5C8BF0;
  --color-action-surface: #2563EB;
  --color-on-brand:       #FFFFFF;
  --color-on-action:      #FFFFFF;
}