/* ============================================================
   THEME-TOKENS.CSS
   �� Sistema global de tokens visuales Wide
   �� Claro / oscuro por prefers-color-scheme
   �� Base reutilizable para todas las p��ginas y secciones
   �� Marca unificada con rojo #e50513 tambi��n en dark mode
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ========================================================
     BRAND
     ======================================================== */
  --wide-red: #e50513;
  --wide-red-strong: #c90011;
  --wide-red-soft: rgba(229, 5, 19, 0.10);
  --wide-red-soft-2: rgba(229, 5, 19, 0.06);

  /* ========================================================
     BACKGROUNDS
     ======================================================== */
  --wide-bg: #ffffff;
  --wide-bg-soft: #f9fafb;
  --wide-bg-muted: #f3f4f6;
  --wide-surface: rgba(255, 255, 255, 0.96);
  --wide-surface-strong: #ffffff;

  /* ========================================================
     TEXT
     ======================================================== */
  --wide-text: #111827;
  --wide-text-soft: #4b5563;
  --wide-text-muted: #6b7280;
  --wide-text-inverse: #ffffff;

  /* ========================================================
     BORDERS
     ======================================================== */
  --wide-border: rgba(229, 231, 235, 1);
  --wide-border-strong: rgba(209, 213, 219, 1);

  /* ========================================================
     SHADOWS
     ======================================================== */
  --wide-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.04);
  --wide-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.05);
  --wide-shadow-lg: 0 18px 34px rgba(15, 23, 42, 0.07);
  --wide-shadow-xl: 0 24px 52px rgba(15, 23, 42, 0.10);

  /* ========================================================
     RADIUS
     ======================================================== */
  --wide-radius-sm: 12px;
  --wide-radius-md: 16px;
  --wide-radius-lg: 22px;
  --wide-radius-xl: 26px;
  --wide-radius-pill: 9999px;

  /* ========================================================
     TIMING
     ======================================================== */
  --wide-ease: .28s ease;

  /* ========================================================
     ICONS / CHIPS / ACCENTS
     ======================================================== */
  --wide-icon-bg: rgba(229, 5, 19, 0.10);
  --wide-icon-color: #e50513;

  --wide-chip-bg: rgba(229, 5, 19, 0.08);
  --wide-chip-color: #e50513;
  --wide-chip-border: rgba(229, 5, 19, 0.16);

  --wide-button-primary-bg: #e50513;
  --wide-button-primary-text: #ffffff;
  --wide-button-primary-hover: #c90011;

  --wide-button-secondary-bg: transparent;
  --wide-button-secondary-text: #1f2937;
  --wide-button-secondary-border: rgba(209, 213, 219, 1);
  --wide-button-secondary-hover-bg: #ffffff;
  --wide-button-secondary-hover-text: #e50513;
  --wide-button-secondary-hover-border: rgba(229, 5, 19, 0.80);

  /* ========================================================
     GLOW
     ======================================================== */
  --wide-glow: rgba(229, 5, 19, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* ======================================================
       BRAND �� mismo rojo de marca tambi��n en dark mode
       ====================================================== */
    --wide-red: #e50513;
    --wide-red-strong: #ff2a37;
    --wide-red-soft: rgba(229, 5, 19, 0.14);
    --wide-red-soft-2: rgba(229, 5, 19, 0.10);

    /* ======================================================
       BACKGROUNDS
       ====================================================== */
    --wide-bg: #030712;
    --wide-bg-soft: #111827;
    --wide-bg-muted: #0f172a;
    --wide-surface: rgba(17, 24, 39, 0.94);
    --wide-surface-strong: #111827;

    /* ======================================================
       TEXT
       ====================================================== */
    --wide-text: #ffffff;
    --wide-text-soft: #f3f4f6;
    --wide-text-muted: #e5e7eb;
    --wide-text-inverse: #ffffff;

    /* ======================================================
       BORDERS
       ====================================================== */
    --wide-border: rgba(55, 65, 81, 0.95);
    --wide-border-strong: rgba(75, 85, 99, 0.95);

    /* ======================================================
       SHADOWS
       ====================================================== */
    --wide-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.14);
    --wide-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.18);
    --wide-shadow-lg: 0 18px 34px rgba(0, 0, 0, 0.24);
    --wide-shadow-xl: 0 24px 52px rgba(0, 0, 0, 0.28);

    /* ======================================================
       ICONS / CHIPS / ACCENTS
       ====================================================== */
    --wide-icon-bg: rgba(229, 5, 19, 0.14);
    --wide-icon-color: #e50513;

    --wide-chip-bg: rgba(229, 5, 19, 0.12);
    --wide-chip-color: #e50513;
    --wide-chip-border: rgba(229, 5, 19, 0.24);

    --wide-button-primary-bg: #e50513;
    --wide-button-primary-text: #ffffff;
    --wide-button-primary-hover: #ff2a37;

    --wide-button-secondary-bg: rgba(17, 24, 39, 0.58);
    --wide-button-secondary-text: #ffffff;
    --wide-button-secondary-border: rgba(55, 65, 81, 0.95);
    --wide-button-secondary-hover-bg: rgba(17, 24, 39, 0.92);
    --wide-button-secondary-hover-text: #e50513;
    --wide-button-secondary-hover-border: rgba(229, 5, 19, 0.85);

    /* ======================================================
       GLOW
       ====================================================== */
    --wide-glow: rgba(229, 5, 19, 0.08);
  }
}

/* ============================================================
   HELPERS BASE REUTILIZABLES
   ============================================================ */

.wide-section-bg {
  background: var(--wide-bg);
}

.wide-section-bg-soft {
  background: var(--wide-bg-soft);
}

.wide-title {
  color: var(--wide-text);
}

.wide-text {
  color: var(--wide-text-soft);
}

.wide-text-muted {
  color: var(--wide-text-muted);
}

.wide-card {
  border: 1px solid var(--wide-border);
  background: var(--wide-surface);
  box-shadow: var(--wide-shadow-md);
  transition:
    transform var(--wide-ease),
    box-shadow var(--wide-ease),
    border-color var(--wide-ease),
    background-color var(--wide-ease);
}

.wide-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--wide-red) 18%, var(--wide-border));
  box-shadow: var(--wide-shadow-lg);
}

.wide-card-soft {
  border: 1px solid var(--wide-border);
  background: var(--wide-surface);
  box-shadow: var(--wide-shadow-sm);
}

.wide-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .58rem .95rem;
  border-radius: var(--wide-radius-pill);
  border: 1px solid var(--wide-chip-border);
  background: var(--wide-chip-bg);
  color: var(--wide-chip-color);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wide-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wide-icon-bg);
  color: var(--wide-icon-color);
  box-shadow: inset 0 0 0 1px rgba(229, 5, 19, 0.08);
  flex-shrink: 0;
}

.wide-surface {
  background: var(--wide-surface);
  border: 1px solid var(--wide-border);
}

.wide-glow {
  background: var(--wide-glow);
}

/* ============================================================
   BUTTONS BASE
   ============================================================ */

.wide-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 14px;
  padding: .85rem 1.25rem;
  background: var(--wide-button-primary-bg);
  color: var(--wide-button-primary-text);
  border: 1px solid transparent;
  box-shadow: var(--wide-shadow-sm);
  transition:
    background-color var(--wide-ease),
    transform var(--wide-ease),
    box-shadow var(--wide-ease);
}

.wide-btn-primary:hover {
  background: var(--wide-button-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--wide-shadow-md);
}

.wide-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 14px;
  padding: .85rem 1.25rem;
  background: var(--wide-button-secondary-bg);
  color: var(--wide-button-secondary-text);
  border: 1px solid var(--wide-button-secondary-border);
  transition:
    border-color var(--wide-ease),
    color var(--wide-ease),
    background-color var(--wide-ease),
    transform var(--wide-ease),
    box-shadow var(--wide-ease);
}

.wide-btn-secondary:hover {
  background: var(--wide-button-secondary-hover-bg);
  color: var(--wide-button-secondary-hover-text);
  border-color: var(--wide-button-secondary-hover-border);
  transform: translateY(-1px);
  box-shadow: var(--wide-shadow-sm);
}

/* ============================================================
   THEME OVERRIDES — soporte manual claro / oscuro
   · Permite que el usuario cambie el modo desde el navbar
   · Mantiene prefers-color-scheme como fallback automático
   ============================================================ */

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

  --wide-red: #e50513;
  --wide-red-strong: #c90011;
  --wide-red-soft: rgba(229, 5, 19, 0.10);
  --wide-red-soft-2: rgba(229, 5, 19, 0.06);

  --wide-bg: #ffffff;
  --wide-bg-soft: #f9fafb;
  --wide-bg-muted: #f3f4f6;
  --wide-surface: rgba(255, 255, 255, 0.96);
  --wide-surface-strong: #ffffff;

  --wide-text: #111827;
  --wide-text-soft: #4b5563;
  --wide-text-muted: #6b7280;
  --wide-text-inverse: #ffffff;

  --wide-border: rgba(229, 231, 235, 1);
  --wide-border-strong: rgba(209, 213, 219, 1);

  --wide-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.04);
  --wide-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.05);
  --wide-shadow-lg: 0 18px 34px rgba(15, 23, 42, 0.07);
  --wide-shadow-xl: 0 24px 52px rgba(15, 23, 42, 0.10);

  --wide-icon-bg: rgba(229, 5, 19, 0.10);
  --wide-icon-color: #e50513;

  --wide-chip-bg: rgba(229, 5, 19, 0.08);
  --wide-chip-color: #e50513;
  --wide-chip-border: rgba(229, 5, 19, 0.16);

  --wide-button-primary-bg: #e50513;
  --wide-button-primary-text: #ffffff;
  --wide-button-primary-hover: #c90011;

  --wide-button-secondary-bg: transparent;
  --wide-button-secondary-text: #1f2937;
  --wide-button-secondary-border: rgba(209, 213, 219, 1);
  --wide-button-secondary-hover-bg: #ffffff;
  --wide-button-secondary-hover-text: #e50513;
  --wide-button-secondary-hover-border: rgba(229, 5, 19, 0.80);

  --wide-glow: rgba(229, 5, 19, 0.06);
}

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

  --wide-red: #e50513;
  --wide-red-strong: #ff2a37;
  --wide-red-soft: rgba(229, 5, 19, 0.14);
  --wide-red-soft-2: rgba(229, 5, 19, 0.10);

  --wide-bg: #030712;
  --wide-bg-soft: #111827;
  --wide-bg-muted: #0f172a;
  --wide-surface: rgba(17, 24, 39, 0.94);
  --wide-surface-strong: #111827;

  --wide-text: #ffffff;
  --wide-text-soft: #f3f4f6;
  --wide-text-muted: #e5e7eb;
  --wide-text-inverse: #ffffff;

  --wide-border: rgba(55, 65, 81, 0.95);
  --wide-border-strong: rgba(75, 85, 99, 0.95);

  --wide-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.14);
  --wide-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.18);
  --wide-shadow-lg: 0 18px 34px rgba(0, 0, 0, 0.24);
  --wide-shadow-xl: 0 24px 52px rgba(0, 0, 0, 0.28);

  --wide-icon-bg: rgba(229, 5, 19, 0.14);
  --wide-icon-color: #e50513;

  --wide-chip-bg: rgba(229, 5, 19, 0.12);
  --wide-chip-color: #e50513;
  --wide-chip-border: rgba(229, 5, 19, 0.24);

  --wide-button-primary-bg: #e50513;
  --wide-button-primary-text: #ffffff;
  --wide-button-primary-hover: #ff2a37;

  --wide-button-secondary-bg: rgba(17, 24, 39, 0.58);
  --wide-button-secondary-text: #ffffff;
  --wide-button-secondary-border: rgba(55, 65, 81, 0.95);
  --wide-button-secondary-hover-bg: rgba(17, 24, 39, 0.92);
  --wide-button-secondary-hover-text: #e50513;
  --wide-button-secondary-hover-border: rgba(229, 5, 19, 0.85);

  --wide-glow: rgba(229, 5, 19, 0.08);
}

html[data-theme="light"] body,
html[data-theme="dark"] body {
  background: var(--wide-bg);
  color: var(--wide-text);
}


/* ============================================================
   THEME MANUAL — COBERTURA GLOBAL DEL SITIO
   · Hace que el cambio claro/oscuro afecte también clases Tailwind
   · Mantiene el contenido traducido intacto
   · El navbar conserva sus reglas específicas en navbar.php
   ============================================================ */

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .site-main {
  background: var(--wide-bg) !important;
  color: var(--wide-text) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/95,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100 {
  background-color: var(--wide-surface) !important;
}

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-black {
  color: var(--wide-text) !important;
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500 {
  color: var(--wide-text-soft) !important;
}

html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300 {
  border-color: var(--wide-border) !important;
}

html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-2xl {
  box-shadow: var(--wide-shadow-md) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--wide-surface-strong) !important;
  color: var(--wide-text) !important;
  border-color: var(--wide-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--wide-text-muted) !important;
}

html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] .site-main {
  background: var(--wide-bg) !important;
  color: var(--wide-text) !important;
}