/* =====================================================================
   VEUS Jurídico — Base: reset + tipografia + layout shell
   ---------------------------------------------------------------------
   Reset opinativo curto (não-Tailwind). Foco em:
     - Box-sizing universal
     - Tipografia fluida coerente com tokens
     - Esqueleto de página (sticky header + main + footer)
     - Acessibilidade: outline visível, scroll suave, contraste AA
   ===================================================================== */

/* --- Reset moderno --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--veus-font-body);
  font-size: var(--veus-text-base);
  line-height: var(--veus-leading-normal);
  color: var(--veus-gray-deep);
  background: var(--veus-page-bg, var(--veus-gray-fog));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

picture { display: block; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a {
  color: var(--veus-gray-rich);
  text-decoration: none;
  transition: color var(--veus-duration-fast) var(--veus-ease-out);
}

a:hover { color: var(--veus-yellow-link); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--veus-yellow);
  outline-offset: 3px;
  border-radius: var(--veus-radius-sm);
}

/* --- Tipografia headings --- */
h1, h2, h3, h4 {
  font-family: var(--veus-font-display);
  font-weight: var(--veus-weight-medium);
  line-height: var(--veus-leading-tight);
  color: var(--veus-gray-deep);
  margin: 0;
}

h1 {
  font-size: var(--veus-text-2xl);
  letter-spacing: var(--veus-tracking-wider);
}

h2 {
  font-size: var(--veus-text-xl);
  letter-spacing: var(--veus-tracking-wide);
}

h3 {
  font-size: var(--veus-text-lg);
  letter-spacing: var(--veus-tracking-wide);
}

h4 {
  font-size: var(--veus-text-base);
  font-weight: var(--veus-weight-semibold);
}

p { margin: 0 0 var(--veus-space-4) 0; max-width: var(--veus-text-max); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding-left: var(--veus-space-6); }
li + li { margin-top: var(--veus-space-2); }

code, kbd, samp, pre {
  font-family: var(--veus-font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--veus-gray-pale);
  margin: var(--veus-space-8) 0;
}

/* --- Shell layout: header sticky + main fluid + footer --- */
.veus-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.veus-header {
  position: sticky;
  top: 0;
  z-index: var(--veus-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--veus-space-4);
  padding: var(--veus-space-4) var(--veus-space-8);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(89, 89, 89, 0.08);
  box-shadow: 0 1px 0 rgba(255, 179, 22, 0.04);
}

.veus-header__brand {
  display: flex;
  align-items: center;
  gap: var(--veus-space-3);
  font-family: var(--veus-font-display);
  font-weight: var(--veus-weight-medium);
  font-size: var(--veus-text-lg);
  letter-spacing: var(--veus-tracking-wider);
  text-transform: uppercase;
  color: var(--veus-gray-deep);
}

.veus-header__brand img,
.veus-header__brand svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 6px rgba(255, 179, 22, 0.25));
}

.veus-header__brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.veus-header__brand-name span:first-child {
  font-size: var(--veus-text-base);
}

.veus-header__brand-name span:last-child {
  font-size: var(--veus-text-xs);
  color: var(--veus-gray-mid);
  letter-spacing: var(--veus-tracking-widest);
  font-weight: var(--veus-weight-regular);
}

.veus-header__nav {
  display: flex;
  align-items: center;
  gap: var(--veus-space-3);
}

.veus-header__user {
  display: flex;
  align-items: center;
  gap: var(--veus-space-3);
  padding: var(--veus-space-2) var(--veus-space-4);
  border-radius: var(--veus-radius-full);
  background: var(--veus-gray-fog);
  border: 1px solid var(--veus-gray-pale);
  font-size: var(--veus-text-sm);
  color: var(--veus-gray-rich);
}

.veus-header__user-email {
  font-family: var(--veus-font-mono);
  font-size: 0.85em;
  color: var(--veus-gray-mid);
}

.veus-main {
  width: 100%;
  max-width: var(--veus-content-max);
  margin: 0 auto;
  padding: var(--veus-space-12) var(--veus-space-8) var(--veus-space-16);
}

.veus-main--narrow {
  max-width: 880px;
}

.veus-footer {
  padding: var(--veus-space-8) var(--veus-space-8);
  border-top: 1px solid rgba(89, 89, 89, 0.06);
  text-align: center;
  color: var(--veus-gray-mid);
  font-size: var(--veus-text-xs);
  letter-spacing: var(--veus-tracking-widest);
  text-transform: uppercase;
  font-family: var(--veus-font-display);
  font-weight: var(--veus-weight-regular);
}

.veus-footer__sep {
  display: inline-block;
  margin: 0 var(--veus-space-3);
  color: var(--veus-yellow-link);
}

/* --- Skip link (a11y) --- */
.veus-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--veus-space-2) var(--veus-space-4);
  background: var(--veus-gray-deep);
  color: var(--veus-white);
  z-index: var(--veus-z-modal);
  font-weight: var(--veus-weight-semibold);
}

.veus-skip:focus {
  left: var(--veus-space-2);
  top: var(--veus-space-2);
}

/* --- Utilities mínimas (não-Tailwind) --- */
.veus-stack > * + * { margin-top: var(--veus-space-4); }
.veus-stack-lg > * + * { margin-top: var(--veus-space-8); }
.veus-stack-xl > * + * { margin-top: var(--veus-space-12); }

.veus-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--veus-space-3);
}

.veus-eyebrow {
  font-family: var(--veus-font-display);
  font-size: var(--veus-text-xs);
  font-weight: var(--veus-weight-medium);
  letter-spacing: var(--veus-tracking-widest);
  text-transform: uppercase;
  color: var(--veus-gray-mid);
}

.veus-eyebrow--yellow {
  color: var(--veus-yellow-link);
}

.veus-text-muted { color: var(--veus-gray-mid); }
.veus-text-soft  { color: var(--veus-gray-soft); }

.veus-mono { font-family: var(--veus-font-mono); }

.veus-divider-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--veus-yellow);
  margin: 0 var(--veus-space-2);
  vertical-align: middle;
}

/* --- Utility classes (substituem style="..." inline por CSP estrita) --- */
.veus-u-m-0          { margin: 0 !important; }
.veus-u-mt-3         { margin-top: var(--veus-space-3); }
.veus-u-mt-5         { margin-top: var(--veus-space-5); }
.veus-u-mt-8         { margin-top: var(--veus-space-8); }
.veus-u-mb-6         { margin-bottom: var(--veus-space-6); }
.veus-u-mb-2px       { margin-bottom: 2px; }
.veus-u-p-0          { padding: 0; }
.veus-u-block        { display: block; }
.veus-u-flex         { display: flex; }
.veus-u-text-left    { text-align: left; }
.veus-u-text-right   { text-align: right; }
.veus-u-text-center  { text-align: center; }
.veus-u-no-tt        { text-transform: none; }
.veus-u-no-ls        { letter-spacing: 0; }
.veus-u-yellow       { color: var(--veus-yellow-link); }
.veus-u-link-clean   { color: inherit; text-decoration: none; }
.veus-u-link-clean:hover { color: inherit; }

/* Column widths para tabelas. `white-space: nowrap` evita quebra de
   conteúdo mono em "Última consulta" e similares — coluna ajusta width
   ao conteúdo se o ch declarado for menor que o sintagma. */
.veus-u-col-8ch  { width: 8ch; }
.veus-u-col-10ch { width: 10ch; }
.veus-u-col-14ch { width: 14ch; }
.veus-u-col-16ch { width: 16ch; }
.veus-u-col-20ch { width: 20ch; }
.veus-u-col-24ch { width: 24ch; }
.veus-u-nowrap   { white-space: nowrap; }

/* Container dimensionado */
.veus-u-section-card {
  margin: var(--veus-space-8) auto;
  max-width: 980px;
}

/* Spinner cluster centralizado */
.veus-u-cluster-center {
  justify-content: center;
  padding: var(--veus-space-6);
}

.veus-u-ml-3 { margin-left: var(--veus-space-3); }

/* Cell link (table cell envolto em <a>) — área clicável completa */
.veus-u-cell-link {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: var(--veus-space-3) var(--veus-space-4);
}

/* --- Responsivo header --- */
@media (max-width: 640px) {
  .veus-header {
    padding: var(--veus-space-3) var(--veus-space-4);
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100vw;
  }
  .veus-header__nav {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  .veus-header__user {
    display: none;  /* user info recolhe; tela limitada */
  }
  .veus-main {
    padding: var(--veus-space-8) var(--veus-space-4) var(--veus-space-12);
    max-width: 100vw;
  }
  .veus-header__user-email {
    display: none;  /* economiza espaço; user pode ver no /me */
  }
  .veus-shell {
    max-width: 100vw;
    overflow-x: hidden;
  }
  body { overflow-x: hidden; }
}

/* =====================================================================
   DARK MODE — overrides de base.css (item 16, 2026-06-10, gucci-frontend)
   ---------------------------------------------------------------------
   Elementos que hardcodam rgba(255,255,255,…) / rgba(89,89,89,…) e por
   isso NÃO são alcançados pela inversão de tokens (tokens.css). Aqui só
   o que precisa de valor explícito; o resto herda os tokens dark.
   Seletor :root[data-theme="dark"] (0,1,1) > [data-theme="dark"] (0,1,0)
   p/ vencer o seletor original sem !important.
   ===================================================================== */

/* Header "glass" — em dark vira vidro escuro translúcido, não branco */
:root[data-theme="dark"] .veus-header {
  background: rgba(22, 24, 27, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 179, 22, 0.06);
}

/* Pílula com o e-mail do usuário no header */
:root[data-theme="dark"] .veus-header__user {
  background: var(--veus-gray-fog);
  border-color: var(--veus-gray-pale);
}

/* Rodapé — divisória sutil sobre fundo escuro */
:root[data-theme="dark"] .veus-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Skip-link: o fundo escuro do link já contrasta; trocamos para a
   superfície de card + texto claro p/ manter legibilidade ao focar. */
:root[data-theme="dark"] .veus-skip {
  background: var(--veus-yellow);
  color: #16181b;
}

/* hr divisor */
:root[data-theme="dark"] hr {
  background: var(--veus-gray-pale);
}

/* Glifo VS no header e heros: o drop-shadow amarelo continua, mas o
   contorno do glifo (SVG usa currentColor?) — apenas garantimos que o
   filtro não some. Mantido por herança; sem override necessário. */