/* =========================================================================
   JustIA — capa de temas conmutables
   Se carga DESPUÉS de lexia-theme.css. Define el control theme-switch y el
   tema "Tribunal" (claro/serif) como override aditivo. El tema Jarvis vive
   en lexia-theme.css y no se toca aquí.
   ========================================================================= */

/* =========================================================================
   THEME SWITCH — control segmentado (funciona en ambos temas)
   ========================================================================= */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--nvy-border);
  background: color-mix(in srgb, var(--nvy-800) 55%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  color: var(--text-muted); background: transparent; border: 0;
  padding: 7px 12px; border-radius: 999px; line-height: 1;
  transition: color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] {
  color: var(--accent-contrast);
  background: var(--grad-ai);
  box-shadow: var(--glow-accent);
}
[data-theme="tribunal"] .theme-switch button[aria-pressed="true"] { color: #fff; }
.theme-switch .ts-label { white-space: nowrap; }
/* En la barra superior el conmutador es solo-ícono (compacto, estilo app);
   en el cajón móvil (.nav-cta) sí muestra etiquetas porque hay espacio. */
.header-cta .theme-switch .ts-label { display: none; }
.header-cta .theme-switch button { padding: 8px 10px; }

/* =========================================================================
   HEADER RESPONSIVE — acciones al cajón móvil (evita desbordes del CTA)
   ========================================================================= */
.nav-cta { display: none; }
@media (max-width: 960px) {
  /* En modo cajón, la barra solo conserva marca + hamburguesa */
  .header-cta .theme-switch,
  .header-cta > .btn { display: none; }
  /* Las acciones viven dentro del cajón, apiladas al pie de la navegación */
  .nav-cta {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--nvy-border);
  }
  .nav-cta .theme-switch { align-self: center; }
  .nav-cta .btn { justify-content: center; width: 100%; }
}

/* =========================================================================
   TEMA "TRIBUNAL" — clásico institucional (claro · serif · oro/navy)
   Override aditivo: recolorea vía tokens + parches puntuales sobre los pocos
   valores rgba fijados en componentes decorativos.
   ========================================================================= */
[data-theme="tribunal"] {
  --nvy-950: #E7E1D2;
  --nvy-900: #F5F2EA;
  --nvy-850: #FBF9F3;
  --nvy-800: #FFFFFF;
  --nvy-700: #EAE4D5;
  --nvy-card: #FFFFFF;
  --nvy-border: rgba(13, 27, 61, 0.12);
  --nvy-border-strong: rgba(198, 163, 61, 0.60);

  --gold: #C6A33D;
  --gold-soft: #8A6D24;   /* oro profundo: legible como texto sobre papel */
  --gold-glow: rgba(198, 163, 61, 0.30);

  /* Los usos "neón" se remapean a navy/oro */
  --cyan: #16306A;
  --blue: #16306A;
  --purple: #8A6D24;
  --green: #1F7A4D;
  --red: #B23A4B;

  --accent: #16306A;
  --accent-2: var(--gold);
  --accent-contrast: #FFFFFF;

  --text: #0D1B3D;
  --text-soft: #43506B;
  --text-muted: #57617A;   /* AA sobre papel: #6B7488 daba ~4.0:1; #57617A ≈ 5.0:1 (≥4.5) */

  --glow-cyan: 0 16px 38px rgba(13, 27, 61, 0.12);
  --glow-purple: 0 16px 38px rgba(13, 27, 61, 0.10);
  --glow-gold: 0 16px 38px rgba(198, 163, 61, 0.24);
  --glow-accent: 0 12px 28px rgba(13, 27, 61, 0.16);
  --shadow-lg: 0 26px 60px rgba(13, 27, 61, 0.16);

  --grad-ai: linear-gradient(120deg, #16306A, #0D1B3D 55%, #C6A33D);
  --grad-gold: linear-gradient(120deg, #E0C67E, #C6A33D);

  --font-display: var(--font-serif);
}

/* Fondo papel con veladuras suaves de navy/oro (sin neón) */
[data-theme="tribunal"] body {
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 84% -8%, rgba(198, 163, 61, 0.14), transparent 60%),
    radial-gradient(900px 560px at 4% 8%, rgba(13, 27, 61, 0.07), transparent 58%),
    linear-gradient(180deg, #F7F4EC 0%, #EFEADD 100%);
}

/* Tipografía serif: menos tracking negativo, más porte editorial */
[data-theme="tribunal"] h1, [data-theme="tribunal"] h2,
[data-theme="tribunal"] h3, [data-theme="tribunal"] h4 { letter-spacing: -0.005em; font-weight: 600; }
[data-theme="tribunal"] h1.display { letter-spacing: -0.01em; font-weight: 600; }
[data-theme="tribunal"] .brand .brand-name { font-family: var(--font-serif); font-size: 1.35rem; }

/* Marca JustIA: logomark SVG inline (columna + constelación neural en oro).
   La columna hereda currentColor; por defecto usa var(--text) para adaptarse a
   CUALQUIER superficie (tarjetas de auth, header del panel claro/oscuro). El acento
   neural va en oro fijo. El blanco se aplica solo en el .site-header (navy en ambos
   temas), donde la columna debe contrastar sobre azul marino. */
.brand .brand-mark { height: 36px; width: auto; display: block; color: var(--text); }
.site-header .brand .brand-mark { color: #FFFFFF; }
.site-header.condensed .brand .brand-mark { height: 30px; }

[data-theme="tribunal"] ::selection { background: rgba(198, 163, 61, 0.30); color: #0D1B3D; }
[data-theme="tribunal"] * { scrollbar-color: rgba(13,27,61,.35) transparent; }
[data-theme="tribunal"] ::-webkit-scrollbar-thumb { background: rgba(13,27,61,.28); }

/* Header claro → NAVY institucional (alto contraste, logo en blanco).
   Aunque el tema Tribunal es "papel", la barra superior va en azul marino como
   ancla de marca: la columna JustIA se recolorea a blanco y los textos/botones
   se vuelven claros para leerse sobre el navy. El footer se mantiene en papel. */
[data-theme="tribunal"] .site-header {
  background: rgba(13, 27, 61, 0.92);
  border-bottom-color: rgba(198, 163, 61, 0.28);
}
[data-theme="tribunal"] .site-header.condensed { background: rgba(11, 18, 32, 0.96); }

/* La columna del logomark ya hereda currentColor:#FFFFFF (regla base .brand-mark);
   aquí solo el wordmark, que en tribunal sería navy sobre navy. */
[data-theme="tribunal"] .site-header .brand .brand-name { color: #FFFFFF; }
[data-theme="tribunal"] .site-header .brand .brand-name b { color: var(--gold); }

/* Navegación clara sobre navy */
[data-theme="tribunal"] .site-header .nav > a { color: rgba(255, 255, 255, 0.80); }
[data-theme="tribunal"] .site-header .nav > a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
[data-theme="tribunal"] .site-header .nav > a.active { color: #FFFFFF; }
[data-theme="tribunal"] .site-header .nav a::after { background: var(--gold); }

/* Conmutador de tema sobre navy (pastilla activa en oro para que se distinga) */
[data-theme="tribunal"] .site-header .theme-switch { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.20); }
[data-theme="tribunal"] .site-header .theme-switch button { color: rgba(255, 255, 255, 0.72); }
[data-theme="tribunal"] .site-header .theme-switch button:hover { color: #FFFFFF; }
[data-theme="tribunal"] .site-header .theme-switch button[aria-pressed="true"] { background: var(--gold); color: #0D1B3D; box-shadow: none; }

/* Botones del header: fantasma claro + CTA de descarga en oro para que resalte
   (el primario navy-sólido se perdería sobre un header navy) */
[data-theme="tribunal"] .site-header .btn-ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); color: #FFFFFF; }
[data-theme="tribunal"] .site-header .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(255, 255, 255, 0.12); box-shadow: none; }
[data-theme="tribunal"] .site-header .btn-primary { background: linear-gradient(180deg, #E0C67E 0%, #C6A33D 100%); color: #0D1B3D; box-shadow: none; }
[data-theme="tribunal"] .site-header .btn-primary svg { color: #0D1B3D; }
[data-theme="tribunal"] .site-header .btn-primary:hover { box-shadow: 0 14px 30px rgba(198, 163, 61, 0.35); }

/* Hamburguesa blanca */
[data-theme="tribunal"] .site-header .nav-toggle { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.24); }

/* Cajón de navegación móvil también en navy (coherente con la barra) */
@media (max-width: 960px) {
  [data-theme="tribunal"] .site-header .nav {
    background: rgba(13, 27, 61, 0.98);
    border-bottom-color: rgba(198, 163, 61, 0.28);
    box-shadow: 0 18px 40px rgba(13, 27, 61, 0.35);
  }
  [data-theme="tribunal"] .site-header .nav-cta { border-top-color: rgba(255, 255, 255, 0.14); }
}
[data-theme="tribunal"] .site-footer { background: rgba(233, 227, 214, 0.6); border-top-color: var(--nvy-border); }

/* Eyebrow / chips */
[data-theme="tribunal"] .eyebrow { color: #16306A; border-color: rgba(13,27,61,.18); background: rgba(13, 27, 61, 0.05); }
[data-theme="tribunal"] .eyebrow .dot { background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
[data-theme="tribunal"] .eyebrow.gold { color: var(--gold-soft); border-color: var(--gold-glow); background: rgba(198,163,61,.10); }

/* Cards blancas con hairline y sombra suave */
[data-theme="tribunal"] .card,
[data-theme="tribunal"] .track,
[data-theme="tribunal"] .testi,
[data-theme="tribunal"] .trust-card,
[data-theme="tribunal"] .proc-step,
[data-theme="tribunal"] .materia,
[data-theme="tribunal"] .faq details,
[data-theme="tribunal"] .legal-toc,
[data-theme="tribunal"] .ad-dot { background: #FFFFFF; border-color: var(--nvy-border); box-shadow: 0 1px 2px rgba(13,27,61,.04); }
[data-theme="tribunal"] .card:hover,
[data-theme="tribunal"] .track:hover,
[data-theme="tribunal"] .testi:hover,
[data-theme="tribunal"] .trust-card:hover { border-color: var(--nvy-border-strong); box-shadow: var(--glow-gold); }
[data-theme="tribunal"] .card .card-ico { background: rgba(13,27,61,.05); border-color: rgba(198,163,61,.4); color: #16306A; }
[data-theme="tribunal"] .step .step-n,
[data-theme="tribunal"] .flow-list .fl-n { background: rgba(13,27,61,.05); border-color: rgba(198,163,61,.45); color: #16306A; }
[data-theme="tribunal"] .pill-ai { color: #16306A; border-color: rgba(13,27,61,.2); background: rgba(13,27,61,.06); }

/* Botones — firma JustIA: primario navy sólido con texto/ícono en oro (como la app) */
[data-theme="tribunal"] .btn-primary {
  background: linear-gradient(180deg, #16306A 0%, #0D1B3D 100%);
  color: var(--gold); box-shadow: var(--glow-accent);
}
[data-theme="tribunal"] .btn-primary svg { color: var(--gold); }
[data-theme="tribunal"] .btn-primary:hover { box-shadow: 0 18px 40px rgba(13,27,61,.28); }
/* Antes el botón oro era un degradado dorado que se lavaba sobre papel. Se unifica
   con la firma navy-sólido + texto/ícono en oro (idéntico al CTA "Descargar app")
   para que TODOS los botones del sitio tengan el mismo peso y contraste en claro. */
[data-theme="tribunal"] .btn-gold {
  background: linear-gradient(180deg, #16306A 0%, #0D1B3D 100%);
  color: var(--gold); box-shadow: var(--glow-accent); border-color: transparent;
}
[data-theme="tribunal"] .btn-gold svg { color: var(--gold); }
[data-theme="tribunal"] .btn-gold:hover { box-shadow: 0 18px 40px rgba(13,27,61,.28); }
[data-theme="tribunal"] .btn-ghost { background: rgba(255,255,255,.6); border-color: var(--nvy-border); color: var(--text); }
[data-theme="tribunal"] .btn-ghost:hover { border-color: var(--nvy-border-strong); color: var(--gold-soft); box-shadow: var(--glow-gold); }
[data-theme="tribunal"] .btn-primary::after, [data-theme="tribunal"] .btn-gold::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); }

/* Formularios */
[data-theme="tribunal"] .input, [data-theme="tribunal"] .textarea, [data-theme="tribunal"] select.input {
  background: #FFFFFF; border-color: var(--nvy-border); color: var(--text);
}
[data-theme="tribunal"] .input:focus, [data-theme="tribunal"] .textarea:focus, [data-theme="tribunal"] select.input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,163,61,.18);
}

/* Chat demo → papel */
[data-theme="tribunal"] .chat-user { background: linear-gradient(135deg, rgba(13,27,61,.10), rgba(198,163,61,.10)); border-color: rgba(198,163,61,.4); color: var(--text); }
[data-theme="tribunal"] .chat-ai { background: #FBF9F3; border-color: var(--nvy-border); color: var(--text-soft); }
[data-theme="tribunal"] .chat-typing { background: #FBF9F3; border-color: var(--nvy-border); }

/* Paneles insertos oscuros (preview de documento, demo de teléfono, mini-stats) → papel.
   El fondo se controla por --inset-panel (los estilos inline usan var(--inset-panel)). */
[data-theme="tribunal"] { --inset-panel: #FBF9F3; }
[data-theme="tribunal"] .ad-doc,
[data-theme="tribunal"] .phone-bar,
[data-theme="tribunal"] .mini-stat { background: #FBF9F3; border-color: var(--nvy-border); color: var(--text-soft); }
[data-theme="tribunal"] .ad-ai,
[data-theme="tribunal"] .p-ai { background: #F1EDE2; color: var(--text-soft); }
/* Texto del bloque de código mono dentro de las cards (hero doc-preview) */
[data-theme="tribunal"] .card .mono.text-soft { color: #2C3852; }
[data-theme="tribunal"] .card .mono b,
[data-theme="tribunal"] .card .mono strong { color: #16306A; }
/* Inputs con fondo oscuro heredado */
[data-theme="tribunal"] .field input,
[data-theme="tribunal"] .field textarea { background: #FFFFFF; border-color: var(--nvy-border); color: var(--text); }

/* Banners / comparativa */
[data-theme="tribunal"] .cta-banner { border-color: var(--nvy-border-strong); background: linear-gradient(160deg, rgba(198,163,61,.12), rgba(13,27,61,.05)); box-shadow: 0 20px 50px rgba(13,27,61,.10); }
[data-theme="tribunal"] .vs-new { border-color: var(--nvy-border-strong); background: linear-gradient(160deg, rgba(198,163,61,.10), rgba(13,27,61,.04)); box-shadow: var(--glow-gold); }
[data-theme="tribunal"] .vs-old { background: rgba(13,27,61,.02); }

/* Tablas legales */
[data-theme="tribunal"] .legal-table th { color: #16306A; background: rgba(13,27,61,.05); }
[data-theme="tribunal"] .legal-doc a { color: var(--gold-soft); }

/* Aurora / rejilla / barra de progreso: recolor sin neón */
[data-theme="tribunal"] .aurora { opacity: .35; }
[data-theme="tribunal"] .aurora .a1 { background: radial-gradient(circle, rgba(198,163,61,.45), transparent 65%); }
[data-theme="tribunal"] .aurora .a2 { background: radial-gradient(circle, rgba(13,27,61,.30), transparent 65%); }
[data-theme="tribunal"] .aurora .a3 { background: radial-gradient(circle, rgba(198,163,61,.35), transparent 65%); }
[data-theme="tribunal"] .neural-canvas { opacity: .18; }
[data-theme="tribunal"] .neural-grid::after { background-image: linear-gradient(rgba(13,27,61,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(13,27,61,.05) 1px, transparent 1px); }
/* Barra de progreso superior: navy sobrio de marca (antes navy→oro; el tramo oro se leía
   como "barra dorada" al scrollear). Monocromático azul marino, sin oro, sin choque con
   los botones (relleno vertical sólido) por ser un degradado horizontal de 3px. */
[data-theme="tribunal"] .scroll-progress { background: linear-gradient(90deg, #0D1B3D, #16306A); box-shadow: 0 0 12px rgba(13,27,61,.35); }

/* Veladuras del hero: los glows base son cian/púrpura (neón) fijados inline y se
   lavan sobre papel. En tribunal se recolorean a oro/navy para que la ambientación
   viva también en claro (no solo en oscuro). */
[data-theme="tribunal"] .hero-glow { background: radial-gradient(circle, rgba(198,163,61,.22), transparent 62%) !important; opacity: .7; }
[data-theme="tribunal"] .hero-glow:nth-of-type(even) { background: radial-gradient(circle, rgba(13,27,61,.16), transparent 62%) !important; }
/* Glow que sigue el cursor en las tarjetas: cian → oro tenue */
[data-theme="tribunal"] .glow-card::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(198,163,61,.16), transparent 60%); }
/* Borde cónico animado de tarjetas destacadas: neón → navy/oro */
[data-theme="tribunal"] .grad-border::after { background: conic-gradient(from var(--a, 0deg), transparent 0 55%, #C6A33D 72%, #16306A 85%, transparent 100%); opacity: .5; }
/* Métrica con pulso: halo cian → oro */
[data-theme="tribunal"] .metric-pulse::after { background: radial-gradient(circle, rgba(198,163,61,.16), transparent 70%); }

/* Flotantes */
[data-theme="tribunal"] .to-top { background: rgba(255,255,255,.86); border-color: var(--nvy-border-strong); color: var(--gold-soft); }
[data-theme="tribunal"] .to-top:hover { background: #fff; box-shadow: var(--glow-gold); }
[data-theme="tribunal"] .cookie-banner { background: rgba(251, 249, 243, .95); border-color: var(--nvy-border-strong); box-shadow: 0 20px 50px rgba(13,27,61,.16); }
[data-theme="tribunal"] .cookie-banner .ck-ico { background: rgba(13,27,61,.05); border-color: rgba(198,163,61,.45); color: #16306A; }

/* Divisores */
[data-theme="tribunal"] .section-divider { background: linear-gradient(90deg, transparent, rgba(198,163,61,.5), transparent); }

/* ============================================================
   Profundidad de fondo (tema tribunal) — grano de papel + bandas
   Soluciona el "fondo plano": da textura global y ritmo por sección.
   Solo tema claro; el tema oscuro conserva su gradiente navy.
   ============================================================ */

/* Grano de papel muy tenue, fijo, detrás de todo el contenido.
   z-index:-1 lo mantiene sobre el gradiente del body pero bajo texto y tarjetas. */
[data-theme="tribunal"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .85;
}

/* Bandas alternas: cada <section> par se "levanta" a tono papel + hairline dorado.
   :nth-of-type cuenta solo <section>, así que los <div class="section-divider">
   intercalados NO alteran el conteo → alternancia limpia sin tocar el markup.
   El hero es el primer <section> (impar) y queda intacto con su fondo propio. */
[data-theme="tribunal"] main > section:nth-of-type(even) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(251,249,243,.72));
  box-shadow:
    inset 0 1px 0 rgba(198,163,61,.16),
    inset 0 -1px 0 rgba(198,163,61,.11);
  /* Espacio interno arriba: el hairline y el borde de banda quedan pegados al
     título cuando la regla `.section + .section` colapsa el padding-top a 0.
     Más específico que esa regla, así que garantiza aire dentro de cada banda. */
  padding-top: 3.75rem;
}

/* Reduce-transparency: superficies sólidas claras */
@media (prefers-reduced-transparency: reduce) {
  [data-theme="tribunal"] .site-header,
  [data-theme="tribunal"] .card, [data-theme="tribunal"] .track,
  [data-theme="tribunal"] .cookie-banner, [data-theme="tribunal"] .to-top { background: #FFFFFF; }
  [data-theme="tribunal"] main > section:nth-of-type(even) { background: #FBF9F3; }
}