/* ================================================================
   themes.css — Sistema de temas Alliance Risk & Protection
   3 temas: dark / light / gray
   Aplicable a cualquier <section> en cualquier página del sitio.
   Rojo bi-tono: #c8102e (light/gray) · #e01a3c (dark)
   Este archivo NO debe modificar comportamiento de páginas que no
   lleven una clase theme-*.
   ================================================================ */


/* ================================================================
   1-2 · TOKENS POR TEMA
   Cada bloque define el set completo de variables --theme-* y
   aplica background-color + color al propio contenedor.
   ================================================================ */

.theme-dark {
  --theme-bg: #0a0a0a;
  --theme-bg-alt: #111111;
  --theme-fg: #ffffff;
  --theme-fg-muted: #cfcfcf;
  --theme-fg-subtle: #9a9a9a;
  --theme-border: rgba(255,255,255,0.10);
  --theme-border-strong: rgba(255,255,255,0.22);
  --theme-accent: #e01a3c;
  --theme-accent-hover: #ff2a4d;
  --theme-accent-soft: rgba(224,26,60,0.12);
  --theme-on-accent: #ffffff;
  --theme-card-bg: #141414;
  --theme-card-border: rgba(255,255,255,0.08);
  --theme-input-bg: #1a1a1a;
  --theme-divider: rgba(255,255,255,0.10);
  --theme-shadow: 0 6px 24px rgba(0,0,0,0.45);
  background-color: var(--theme-bg);
  color: var(--theme-fg);
}

.theme-light {
  --theme-bg: #ffffff;
  --theme-bg-alt: #fafafa;
  --theme-fg: #0a0a0a;
  --theme-fg-muted: #3a3a3a;
  --theme-fg-subtle: #6b6b6b;
  --theme-border: rgba(10,10,10,0.10);
  --theme-border-strong: rgba(10,10,10,0.22);
  --theme-accent: #c8102e;
  --theme-accent-hover: #9c0c24;
  --theme-accent-soft: rgba(200,16,46,0.08);
  --theme-on-accent: #ffffff;
  --theme-card-bg: #ffffff;
  --theme-card-border: rgba(10,10,10,0.10);
  --theme-input-bg: #ffffff;
  --theme-divider: rgba(10,10,10,0.10);
  --theme-shadow: 0 6px 24px rgba(0,0,0,0.06);
  background-color: var(--theme-bg);
  color: var(--theme-fg);
}

.theme-gray {
  --theme-bg: #f4f4f4;
  --theme-bg-alt: #eeeeee;
  --theme-fg: #0a0a0a;
  --theme-fg-muted: #3a3a3a;
  --theme-fg-subtle: #6b6b6b;
  --theme-border: rgba(10,10,10,0.10);
  --theme-border-strong: rgba(10,10,10,0.20);
  --theme-accent: #c8102e;
  --theme-accent-hover: #9c0c24;
  --theme-accent-soft: rgba(200,16,46,0.08);
  --theme-on-accent: #ffffff;
  --theme-card-bg: #ffffff;
  --theme-card-border: rgba(10,10,10,0.08);
  --theme-input-bg: #ffffff;
  --theme-divider: rgba(10,10,10,0.10);
  --theme-shadow: 0 6px 24px rgba(0,0,0,0.05);
  background-color: var(--theme-bg);
  color: var(--theme-fg);
}


/* ================================================================
   3 · ALIAS DE COMPATIBILIDAD HACIA ATRÁS
   theme-light--alt se comportaba como fondo alternativo claro.
   Ahora se resuelve como theme-gray. Mantener alias hasta el
   reemplazo completo en el HTML.
   NOTA: en styles.css existe .theme-light.theme-light--alt con
   background-color:#f8f9fa !important; ese !important puede ganar
   sobre el fondo de aquí. Las VARIABLES sí se aplican igual (definen
   fg/accent/etc.). La reconciliación fina del fondo se hace en Fase 2.
   ================================================================ */

.theme-light--alt {
  --theme-bg: #f4f4f4;
  --theme-bg-alt: #eeeeee;
  --theme-fg: #0a0a0a;
  --theme-fg-muted: #3a3a3a;
  --theme-fg-subtle: #6b6b6b;
  --theme-border: rgba(10,10,10,0.10);
  --theme-border-strong: rgba(10,10,10,0.20);
  --theme-accent: #c8102e;
  --theme-accent-hover: #9c0c24;
  --theme-accent-soft: rgba(200,16,46,0.08);
  --theme-on-accent: #ffffff;
  --theme-card-bg: #ffffff;
  --theme-card-border: rgba(10,10,10,0.08);
  --theme-input-bg: #ffffff;
  --theme-divider: rgba(10,10,10,0.10);
  --theme-shadow: 0 6px 24px rgba(0,0,0,0.05);
  background-color: var(--theme-bg);
  color: var(--theme-fg);
}


/* ================================================================
   4 · REGLAS HEREDADAS POR CONTENIDO
   Aplican a lo que esté DENTRO de cualquier .theme-*.
   Especificidad deliberadamente baja (0,1,1) para no pisar
   componentes con estilos propios; los overrides puntuales de
   componente van en las secciones 5-8.
   ================================================================ */

/* Jerarquía tipográfica — títulos */
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6,
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light h5, .theme-light h6,
.theme-gray h1, .theme-gray h2, .theme-gray h3, .theme-gray h4, .theme-gray h5, .theme-gray h6 {
  color: var(--theme-fg);
}

/* Cuerpo de texto */
.theme-dark p, .theme-light p, .theme-gray p {
  color: var(--theme-fg-muted);
}

/* Texto sutil (captions, labels, small) */
.theme-dark small, .theme-light small, .theme-gray small,
.theme-dark .caption, .theme-light .caption, .theme-gray .caption,
.theme-dark figcaption, .theme-light figcaption, .theme-gray figcaption {
  color: var(--theme-fg-subtle);
}

/* Acento en <em> / <strong> destacado */
.theme-dark em, .theme-light em, .theme-gray em {
  color: var(--theme-accent);
}

/* Links (excepto botones) */
.theme-dark a:not(.btn), .theme-light a:not(.btn), .theme-gray a:not(.btn) {
  color: var(--theme-accent);
}
.theme-dark a:not(.btn):hover, .theme-light a:not(.btn):hover, .theme-gray a:not(.btn):hover {
  color: var(--theme-accent-hover);
}

/* Dividers / reglas horizontales */
.theme-dark hr, .theme-light hr, .theme-gray hr {
  border-color: var(--theme-divider);
  background-color: var(--theme-divider);
}


/* ================================================================
   5 · VARIANTES DE BOTONES POR TEMA (scoped)
   NO se toca la definición base de .btn en styles.css: aquí solo
   se redefinen COLORES vía variables cuando el botón vive dentro
   de un .theme-*. Especificidad (0,2,0) > .btn-primary (0,1,0).
   ================================================================ */

/* --- Primary: relleno de acento --- */
.theme-dark .btn-primary,
.theme-light .btn-primary,
.theme-gray .btn-primary {
  background: var(--theme-accent);
  color: var(--theme-on-accent);
  border-color: var(--theme-accent);
}
.theme-dark .btn-primary:hover,
.theme-light .btn-primary:hover,
.theme-gray .btn-primary:hover {
  background: var(--theme-accent-hover);
  border-color: var(--theme-accent-hover);
  color: var(--theme-on-accent);
}
.theme-dark .btn-primary .arrow, .theme-dark .btn-primary i,
.theme-light .btn-primary .arrow, .theme-light .btn-primary i,
.theme-gray .btn-primary .arrow, .theme-gray .btn-primary i {
  color: var(--theme-on-accent);
}

/* --- Secondary (nuevo): outline con el color de texto del tema --- */
.theme-dark .btn-secondary,
.theme-light .btn-secondary,
.theme-gray .btn-secondary {
  background: transparent;
  color: var(--theme-fg);
  border-color: var(--theme-border-strong);
}
.theme-dark .btn-secondary:hover,
.theme-light .btn-secondary:hover,
.theme-gray .btn-secondary:hover {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  border-color: var(--theme-accent);
}

/* --- Ghost: transparente, hereda color de texto del tema --- */
.theme-dark .btn-ghost,
.theme-light .btn-ghost,
.theme-gray .btn-ghost {
  background: transparent;
  color: var(--theme-fg);
  border-color: var(--theme-border-strong);
}
.theme-dark .btn-ghost:hover,
.theme-light .btn-ghost:hover,
.theme-gray .btn-ghost:hover {
  color: var(--theme-accent);
  border-color: var(--theme-accent);
}


/* ================================================================
   6 · CARDS, CHIPS, BADGES, INPUTS, TRUST-STRIP (scoped)
   ================================================================ */

/* --- Cards genéricas --- */
.theme-dark .card, .theme-dark .feature-card,
.theme-light .card, .theme-light .feature-card,
.theme-gray .card, .theme-gray .feature-card {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-card-border);
  box-shadow: var(--theme-shadow);
  color: var(--theme-fg);
}

/* --- Chips / badges / pills --- */
.theme-dark .chip, .theme-dark .badge, .theme-dark .pill, .theme-dark .tag,
.theme-light .chip, .theme-light .badge, .theme-light .pill, .theme-light .tag,
.theme-gray .chip, .theme-gray .badge, .theme-gray .pill, .theme-gray .tag {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  border: 1px solid var(--theme-border);
}

/* Eyebrow (kicker) — mantiene el acento del tema */
.theme-dark .eyebrow,
.theme-light .eyebrow,
.theme-gray .eyebrow {
  color: var(--theme-accent);
}

/* --- Inputs / selects / textareas --- */
.theme-dark input, .theme-dark select, .theme-dark textarea,
.theme-light input, .theme-light select, .theme-light textarea,
.theme-gray input, .theme-gray select, .theme-gray textarea {
  background: var(--theme-input-bg);
  color: var(--theme-fg);
  border: 1px solid var(--theme-border);
}
.theme-dark input::placeholder, .theme-dark textarea::placeholder,
.theme-light input::placeholder, .theme-light textarea::placeholder,
.theme-gray input::placeholder, .theme-gray textarea::placeholder {
  color: var(--theme-fg-subtle);
}
.theme-dark input:focus, .theme-dark select:focus, .theme-dark textarea:focus,
.theme-light input:focus, .theme-light select:focus, .theme-light textarea:focus,
.theme-gray input:focus, .theme-gray select:focus, .theme-gray textarea:focus {
  border-color: var(--theme-accent);
  outline: none;
}

/* --- Trust-strip (métricas de confianza) --- */
.theme-dark .trust__item, .theme-light .trust__item, .theme-gray .trust__item {
  border-color: var(--theme-border);
}
.theme-dark .trust__num, .theme-light .trust__num, .theme-gray .trust__num {
  color: var(--theme-accent);
}
.theme-dark .trust__label, .theme-light .trust__label, .theme-gray .trust__label {
  color: var(--theme-fg-muted);
}


/* ================================================================
   7 · FASE 5 (placeholder) · TRANSICIONES DEL NAVBAR / LOGO DINÁMICO
   Se activa en la Fase 5. Se deja preparado aquí para que las
   transiciones existan cuando el observer agregue las clases de
   estado. No altera el navbar mientras esas clases no estén.
   ================================================================ */

.navbar {
  /* incluye padding 0.4s para NO pisar la animación de shrink al hacer scroll
     (la regla base .navbar en styles.css la declara) */
  transition: background-color 200ms ease, border-color 200ms ease, padding 0.4s ease;
}
.navbar__logo img {
  transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .navbar, .navbar__logo img {
    transition-duration: 0.01ms;
  }
}