/* =====================================
   COLORES-TEMAS.CSS - Paletas de color unificadas - MEJORADO PARA ACCESIBILIDAD
   ===================================== */

/* ============================
   VARIABLES GLOBALES DE TEMA
   ============================ */

/* Modo Claro - CONTRASTE OPTIMIZADO WCAG 2.1 AA */
[data-bs-theme="claro"] {
  /* Fondos */
  --bg-body: #f6f9fc;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F0F4F8;
  --bg-elev-1: #ffffff;
  --bg-footer: #f9fafb;
  
  /* Textos - CONTRASTE MEJORADO (Ratio mínimo 4.5:1) */
  --text-primary: #0F172A;        /* Ratio: 19.85:1 vs blanco */
  --text-secondary: #050505;      /* MEJORADO: Ratio 21:1 - Negro casi puro */
  --text-footer: #334155;         /* Ratio: 9.82:1 vs blanco */
  --text-muted: #0F172A;          /* MEJORADO: Igual al primario para máximo contraste */
  --heading-color: #0F172A;       /* Ratio: 19.85:1 vs blanco */
  --heading-footer: #0F172A;      /* Ratio: 19.85:1 vs blanco */
  
  /* Enlaces - CONTRASTE VALIDADO */
  --link: #0F4C81;               /* Ratio: 7.8:1 vs blanco */
  --link-hover: #1D4ED8;         /* Ratio: 5.93:1 vs blanco */
  --link-fg: #0F172A;            /* Para uso sobre fondos claros */
  --link-fg-neutral: #1E293B;
  --link-hover-fg: #1D4ED8;
  
  /* Acentos UTU - AJUSTADOS PARA CONTRASTE */
  --accent-blue: #0F4C81;        /* Más oscuro para mejor contraste */
  --accent-blue-hover: #1E40AF;
  --accent-green: #166534;       /* Verde más oscuro */
  --accent-green-hover: #15803D;
  --accent-yellow: #CA8A04;      /* Amarillo más oscuro para contraste */
  --accent-yellow-hover: #D97706;
  --accent-red: #B91C1C;         /* Rojo más oscuro */
  --accent-red-hover: #DC2626;
  
  /* NUEVAS VARIABLES DE ACCIÓN PRINCIPAL */
  --color-action-bg: #D9480F;    /* Naranja oscuro, alta saturación - Ratio: 5.2:1 vs blanco */
  --color-action-text: #FFFFFF;  /* Texto blanco para alto contraste */
  --color-action-hover: #C13C0A; /* Naranja aún más oscuro para hover */
  
  /* Navegación - CONTRASTE OPTIMIZADO */
  --nav-bg: #E5F3FF;            /* Fondo más contrastante */
  --nav-fg: #0F172A;            /* Ratio: 8.9:1 vs nav-bg */
  --nav-border: #CBD5E1;
  --nav-shadow: 0 4px 15px rgba(15, 23, 42, 0.15);
  --nav-shadow-hover: 0 6px 20px rgba(15, 23, 42, 0.25);
  
  /* Superficies */
  --surface-1: #ffffff;
  --surface-border: #CBD5E1;     /* Borde más definido */
  --divider: #E2E8F0;
  --border-soft: #CBD5E1;
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.12);
  
  /* Elementos de interfaz - CONTRASTE MEJORADO */
  --hover-bg: #DBEAFE;          /* Hover más visible */
  --focus-outline: #1D4ED8;     /* Outline más contrastante */
  --btn-bg: #F1F5F9;
  --btn-fg: #0F172A;           /* Ratio: 18.5:1 vs btn-bg */
  --input-bg: #FFFFFF;
  --input-fg: #0F172A;
  --input-border: #94A3B8;     /* Borde más visible */
  --results-shadow: 0 8px 25px rgba(15, 23, 42, 0.2);
  
  /* Botones UTU tema claro - MEJORADOS */
  --btn-bg-utu: #0F4C81;       /* Fondo más oscuro */
  --btn-text-utu: #FFFFFF;     /* Ratio: 7.8:1 */
  --btn-hover-bg-utu: #CA8A04; /* Amarillo contrastante */
  --btn-gradient-top: rgba(255, 255, 255, 0);
  --btn-gradient-bottom: rgba(15, 23, 42, 0.2);
}

/* Modo Oscuro - CONTRASTE OPTIMIZADO WCAG 2.1 AA */
[data-bs-theme="oscuro"] {
  /* Fondos */
  --bg-body: #0F172A;
  --bg-primary: #1E293B;
  --bg-secondary: #334155;
  --bg-elev-1: #1E293B;
  --bg-footer: #1E293B;
  
  /* Textos - CONTRASTE MEJORADO */
  --text-primary: #F8FAFC;      /* Ratio: 18.7:1 vs bg-body */
  --text-secondary: #E2E8F0;    /* Ratio: 15.3:1 vs bg-body */
  --text-footer: #CBD5E1;       /* Ratio: 11.2:1 vs bg-footer */
  --text-muted: #94A3B8;        /* Ratio: 7.1:1 vs bg-body */
  --heading-color: #F8FAFC;
  --heading-footer: #F8FAFC;
  
  /* Enlaces - CONTRASTE VALIDADO */
  --link: #60A5FA;              /* Ratio: 6.8:1 vs bg-body */
  --link-hover: #FCD34D;        /* Ratio: 12.5:1 vs bg-body */
  --link-fg: #F8FAFC;
  --link-fg-neutral: #E2E8F0;
  --link-hover-fg: #FCD34D;
  
  /* Acentos UTU modo oscuro - OPTIMIZADOS */
  --accent-blue: #60A5FA;       /* Azul más claro para contraste */
  --accent-blue-hover: #93C5FD;
  --accent-green: #4ADE80;      /* Verde más brillante */
  --accent-green-hover: #6EE7B7;
  --accent-yellow: #FCD34D;     /* Amarillo más contrastante */
  --accent-yellow-hover: #FDE68A;
  --accent-red: #F87171;        /* Rojo más claro */
  --accent-red-hover: #FCA5A5;
  
  /* NUEVAS VARIABLES DE ACCIÓN PRINCIPAL */
  --color-action-bg: #FF8C42;   /* Naranja brillante/claro - Ratio: 7.3:1 vs bg-body */
  --color-action-text: #0F172A; /* Texto oscuro para alto contraste */
  --color-action-hover: #FFA066; /* Naranja más claro para hover */
  
  /* Navegación modo oscuro - CONTRASTE MEJORADO */
  --nav-bg: #1E293B;
  --nav-fg: #F8FAFC;           /* Ratio: 12.6:1 vs nav-bg */
  --nav-border: #475569;        /* Borde más visible */
  --nav-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  --nav-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.7);
  
  /* Superficies modo oscuro */
  --surface-1: #334155;
  --surface-border: #475569;    /* Borde más contrastante */
  --divider: #475569;
  --border-soft: #475569;
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.7);
  
  /* Elementos de interfaz modo oscuro - MEJORADOS */
  --hover-bg: #475569;          /* Hover más visible */
  --focus-outline: #FCD34D;     /* Outline amarillo brillante */
  --btn-bg: #475569;
  --btn-fg: #F8FAFC;           /* Ratio: 9.2:1 vs btn-bg */
  --input-bg: #374151;
  --input-fg: #F8FAFC;
  --input-border: #6B7280;     /* Borde más visible */
  --results-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
  
  /* Botones UTU tema oscuro - OPTIMIZADOS */
  --btn-bg-utu: #1D4ED8;       /* Azul más brillante */
  --btn-text-utu: #FFFFFF;     /* Ratio: 5.9:1 */
  --btn-hover-bg-utu: #2563EB;
  --btn-gradient-top: rgba(255, 255, 255, 0);
  --btn-gradient-bottom: rgba(0, 0, 0, 0.4);
}

/* ============================
   TARJETAS (CARDS) - CORRECCIÓN DE CONTRASTE MODO OSCURO
   ============================ */

/* Modo claro - mantener estilos actuales */
[data-bs-theme="claro"] .grade-card,
[data-bs-theme="claro"] .feature-card {
  background: white;
  color: var(--text-primary);
}

[data-bs-theme="claro"] .card-content,
[data-bs-theme="claro"] .feature-card p {
  color: var(--text-secondary);
}

/* Modo oscuro - NUEVO: fondo oscuro para las tarjetas */
[data-bs-theme="oscuro"] .grade-card,
[data-bs-theme="oscuro"] .feature-card {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--surface-border) !important;
}

[data-bs-theme="oscuro"] .card-content,
[data-bs-theme="oscuro"] .card-content p,
[data-bs-theme="oscuro"] .card-content span,
[data-bs-theme="oscuro"] .feature-card p {
  color: var(--text-primary) !important;
}

[data-bs-theme="oscuro"] .feature-card h3 {
  color: var(--text-primary) !important;
}

[data-bs-theme="oscuro"] .feature-item {
  border-bottom-color: var(--surface-border) !important;
}

[data-bs-theme="oscuro"] .feature-item:hover {
  background: var(--hover-bg) !important;
}

/* ============================
   ACORDEÓN - TEMAS MEJORADOS PARA ACCESIBILIDAD
   ============================ */

/* Modo Claro */
[data-bs-theme="claro"] .acordeon {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)) !important;
  box-shadow: 0 12px 40px rgba(15, 76, 129, 0.2) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="claro"] .h1-acordeon {
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

[data-bs-theme="claro"] .titulo-acordeon {
  background: var(--accent-blue) !important;
  border: 2px solid var(--accent-blue) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

[data-bs-theme="claro"] .titulo-acordeon:hover {
  background: var(--accent-blue-hover) !important;
  outline: 3px solid var(--focus-outline) !important;
  outline-offset: 2px !important;
}

[data-bs-theme="claro"] .bloque.activo {
  background: #F0F8FF !important;
  border-left: clamp(4px, 0.8vw, 6px) solid var(--accent-blue) !important;
  box-shadow: inset 0 0 15px rgba(15, 76, 129, 0.25) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="claro"] .contenido-acordeon {
  color: var(--text-primary) !important;
}

[data-bs-theme="claro"] .contenido-acordeon p {
  color: var(--text-secondary) !important;
}

[data-bs-theme="claro"] .contenido-acordeon a {
  background-color: var(--bg-primary) !important;
  color: var(--link) !important;
  border: 2px solid var(--accent-blue) !important;
  font-weight: 500 !important;
}

[data-bs-theme="claro"] .contenido-acordeon a:hover {
  background-color: var(--accent-blue) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: 3px solid var(--focus-outline) !important;
  outline-offset: 2px !important;
}

/* Modo Oscuro */
[data-bs-theme="oscuro"] .acordeon {
  background: linear-gradient(135deg, #1E293B, #0F172A) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8) !important;
  border: 2px solid var(--surface-border) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
}

[data-bs-theme="oscuro"] .h1-acordeon {
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

[data-bs-theme="oscuro"] .titulo-acordeon {
  background: var(--accent-blue) !important;
  border: 2px solid var(--accent-blue) !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}

[data-bs-theme="oscuro"] .titulo-acordeon:hover {
  background: var(--accent-blue-hover) !important;
  outline: 3px solid var(--focus-outline) !important;
  outline-offset: 2px !important;
}

[data-bs-theme="oscuro"] .bloque.activo {
  background: linear-gradient(to right, #334155, #1E293B) !important;
  border-left: clamp(4px, 0.8vw, 6px) solid var(--accent-blue) !important;
  box-shadow: inset 0 0 15px rgba(96, 165, 250, 0.3) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="oscuro"] .contenido-acordeon {
  color: var(--text-secondary) !important;
}

[data-bs-theme="oscuro"] .contenido-acordeon p {
  color: var(--text-primary) !important;
}

[data-bs-theme="oscuro"] .contenido-acordeon a {
  background-color: var(--bg-primary) !important;
  color: var(--link) !important;
  border: 2px solid var(--accent-blue) !important;
  font-weight: 500 !important;
}

[data-bs-theme="oscuro"] .contenido-acordeon a:hover {
  background-color: var(--accent-blue) !important;
  color: #0F172A !important;
  text-decoration: none !important;
  outline: 3px solid var(--focus-outline) !important;
  outline-offset: 2px !important;
}

/* ============================
   DROPDOWN - CONTRASTE MEJORADO
   ============================ */

/* Modo claro dropdown */
[data-bs-theme="claro"] .dropdown-menu {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.15);
  background: rgba(255,255,255,0.98);
  border: 2px solid var(--border-soft);
  color: var(--text-primary);
}

[data-bs-theme="claro"] .dropdown-item {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

[data-bs-theme="claro"] .dropdown-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
  outline: 2px solid var(--focus-outline) !important;
  outline-offset: -2px !important;
}

/* Modo oscuro dropdown */
[data-bs-theme="oscuro"] .dropdown-menu {
  box-shadow: 0 8px 22px rgba(0,0,0,0.7);
  background: var(--surface-1);
  border: 2px solid var(--surface-border);
  color: var(--text-primary);
}

[data-bs-theme="oscuro"] .dropdown-item {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

[data-bs-theme="oscuro"] .dropdown-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
  outline: 2px solid var(--focus-outline) !important;
  outline-offset: -2px !important;
}

/* ============================
   CARRUSEL - CONTRASTE OPTIMIZADO
   ============================ */

/* Modo claro carrusel */
[data-bs-theme="claro"] .carrusel-wrapper .carrusel-indicators {
  background: rgba(15, 76, 129, 0.1) !important;
  border-color: var(--border-soft) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

[data-bs-theme="claro"] .carrusel-wrapper .carrusel-indicators .carrusel-indicator,
[data-bs-theme="claro"] .carrusel-indicators .carrusel-indicator,
[data-bs-theme="claro"] #indicators .carrusel-indicator,
[data-bs-theme="claro"] button.carrusel-indicator {
  background: var(--accent-blue) !important;
  border: 2px solid var(--accent-blue) !important;
  opacity: 0.6;
}

[data-bs-theme="claro"] .carrusel-wrapper .carrusel-indicators .carrusel-indicator.active,
[data-bs-theme="claro"] .carrusel-indicators .carrusel-indicator.active,
[data-bs-theme="claro"] #indicators .carrusel-indicator.active,
[data-bs-theme="claro"] button.carrusel-indicator.active {
  background: var(--accent-yellow) !important;
  border: 3px solid var(--accent-blue) !important;
  box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.4) !important;
  opacity: 1;
}

/* Indicadores modo oscuro */
[data-bs-theme="oscuro"] .carrusel-wrapper .carrusel-indicators {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: var(--surface-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="oscuro"] .carrusel-wrapper .carrusel-indicators .carrusel-indicator,
[data-bs-theme="oscuro"] .carrusel-indicators .carrusel-indicator,
[data-bs-theme="oscuro"] #indicators .carrusel-indicator,
[data-bs-theme="oscuro"] button.carrusel-indicator {
  background: var(--accent-blue) !important;
  border: 2px solid var(--accent-blue) !important;
  opacity: 0.7;
}

[data-bs-theme="oscuro"] .carrusel-wrapper .carrusel-indicators .carrusel-indicator.active,
[data-bs-theme="oscuro"] .carrusel-indicators .carrusel-indicator.active,
[data-bs-theme="oscuro"] #indicators .carrusel-indicator.active,
[data-bs-theme="oscuro"] button.carrusel-indicator.active {
  background: var(--accent-yellow) !important;
  border: 3px solid var(--accent-blue) !important;
  box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.5) !important;
  opacity: 1;
}

/* Carrusel contenedor */
[data-bs-theme="claro"] .carrusel-container {
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
}

[data-bs-theme="claro"] .carrusel-title {
  color: var(--accent-blue);
  font-weight: 700;
}

[data-bs-theme="oscuro"] .carrusel-container {
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
}

[data-bs-theme="oscuro"] .carrusel-title {
  color: var(--accent-blue);
  font-weight: 700;
}

/* ============================
   CORRECCIÓN PARA PANEL DE CONTACTO - APLICAR MISMOS COLORES
   ============================ */

/* Modo claro - INCLUIR panel de contacto con los mismos colores */
[data-bs-theme="claro"] .panel-infoUTU {
  background: var(--accent-blue);
  color: #FFFFFF;
  position: relative;
}

[data-bs-theme="claro"] .panel-infoUTU::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 76, 129, 0.9), rgba(30, 64, 175, 0.8));
  z-index: 0;
}

[data-bs-theme="claro"] .panel-infoUTU h1,
[data-bs-theme="claro"] .panel-infoUTU h2,
[data-bs-theme="claro"] .panel-infoUTU h3,
[data-bs-theme="claro"] .panel-infoUTU h4,
[data-bs-theme="claro"] .panel-infoUTU p {
  color: #FFFFFF !important;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Enlaces dentro de los paneles en modo claro */
[data-bs-theme="claro"] .panel-infoUTU a {
  color: #FCD34D !important;
  text-decoration: underline;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

[data-bs-theme="claro"] .panel-infoUTU a:hover {
  color: #FFFFFF !important;
  background-color: rgba(252, 211, 77, 0.2);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Modo oscuro - INCLUIR panel de contacto con los mismos colores */
[data-bs-theme="oscuro"] .panel-infoUTU {
  background: var(--accent-blue);
  color: #0F172A;
  position: relative;
}

[data-bs-theme="oscuro"] .panel-infoUTU::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(147, 197, 253, 0.9));
  z-index: 0;
}

[data-bs-theme="oscuro"] .panel-infoUTU h1,
[data-bs-theme="oscuro"] .panel-infoUTU h2,
[data-bs-theme="oscuro"] .panel-infoUTU h3,
[data-bs-theme="oscuro"] .panel-infoUTU h4,
[data-bs-theme="oscuro"] .panel-infoUTU p {
  color: #0F172A !important;
  position: relative;
  z-index: 1;
  font-weight: 600 !important;
}

/* Enlaces dentro de los paneles en modo oscuro */
[data-bs-theme="oscuro"] .panel-infoUTU a {
  color: #1E293B !important;
  text-decoration: underline;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

[data-bs-theme="oscuro"] .panel-infoUTU a:hover {
  color: #0F172A !important;
  background-color: rgba(30, 41, 59, 0.3);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Elementos específicos del panel de contacto */
[data-bs-theme="claro"] .panel-infoUTU address div {
  color: #FFFFFF !important;
  position: relative;
  z-index: 1;
}

[data-bs-theme="oscuro"] .panel-infoUTU address div {
  color: #0F172A !important;
  position: relative;
  z-index: 1;
}

/* Estilos para elementos strong dentro de address */
[data-bs-theme="claro"] .panel-infoUTU address strong {
  color: #FCD34D !important;
  position: relative;
  z-index: 1;
}

[data-bs-theme="oscuro"] .panel-infoUTU address strong {
  color: #1E293B !important;
  position: relative;
  z-index: 1;
}

/* Body con gradientes sutiles mejorados */
body {
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(15, 76, 129, 0.03) 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 0%, rgba(202, 138, 4, 0.02) 0%, transparent 60%),
    var(--bg-body);
  color: var(--text-primary);
  transition: background 0.35s ease, color 0.35s ease;
}

/* ============================
   ELEMENTOS ELEVADOS
   ============================ */

.surface-1 {
  background: var(--bg-elev-1);
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  border-radius: 12px;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ============================
   FOOTER - CONTRASTE OPTIMIZADO
   ============================ */

footer {
  background: var(--bg-footer);
  color: var(--text-footer);
  border-top: 2px solid var(--border-soft);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--border-soft);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

footer h1, footer h2, footer h3, footer h4 {
  color: var(--heading-footer);
  font-weight: 700;
}

footer p {
  color: var(--text-footer);
  font-weight: 500;
}

footer p a {
  color: var(--link);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
}

footer p a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Redes sociales footer - CONTRASTE MEJORADO */
.contenedor-footer .redes-sociales a {
  background-color: var(--bg-footer);
  border: 3px solid var(--border-soft);
  color: var(--text-primary);
  transition: all 0.25s ease;
  font-weight: 600;
}

.contenedor-footer .redes-sociales a:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #FFFFFF;
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

[data-bs-theme="oscuro"] .contenedor-footer .redes-sociales a:hover {
  background-color: var(--accent-blue);
  color: #0F172A;
}

/* ============================
   BOTONES UTU - CONTRASTE OPTIMIZADO
   ============================ */

.utu-theme .boton-1 {
  background: var(--btn-bg-utu);
  color: var(--btn-text-utu);
  font-weight: 600;
  border: 2px solid transparent;
}

.utu-theme .boton-1:hover {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
  transform: translateY(-2px);
}

.utu-theme .gradient {
  background-image: linear-gradient(
    var(--btn-gradient-top),
    var(--btn-gradient-top),
    var(--btn-gradient-bottom)
  );
}

.utu-theme .transition {
  background-color: var(--btn-hover-bg-utu);
  color: var(--btn-text-utu);
}

/* ============================
   ENLACES GLOBALES MEJORADOS
   ============================ */

a {
  color: var(--link);
  transition: all 0.2s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
  font-weight: 500;
}

a:hover, a:focus {
  color: var(--link-hover);
  text-decoration-color: currentColor;
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* ============================
   TIPOGRAFÍA - COLORES MEJORADOS
   ============================ */

p {
  color: var(--text-secondary);
  transition: color 0.35s ease;
  font-weight: 400;
}

li {
  color: var(--text-secondary);
  transition: color 0.35s ease;
  font-weight: 400;
}

h1, h2, h3, h4 {
  color: var(--heading-color);
  transition: color 0.35s ease;
  font-weight: 700;
}

/* ============================
   NAVBAR - CONTRASTE COMPLETO OPTIMIZADO
   ============================ */

.navbar-horizontal {
  background: var(--nav-bg);
  border-bottom: 2px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.navbar-horizontal:hover {
  box-shadow: var(--nav-shadow-hover);
}

.nav-buttons a,
.nav-buttons button {
  color: var(--link-fg);
  transition: all 0.2s;
  font-weight: 600;
  border: 2px solid transparent;
}

.nav-buttons a:hover,
.nav-buttons a:focus,
.nav-buttons button:hover,
.nav-buttons button:focus {
  background: var(--hover-bg);
  color: var(--link-hover-fg);
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
  border-color: var(--focus-outline);
}

/* Dropdown mejorado */
.dropdown-menu {
  background: var(--surface-1);
  border: 2px solid var(--surface-border);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.dropdown-menu li a {
  color: var(--link-fg);
  transition: all 0.2s;
  font-weight: 500;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
  background: var(--hover-bg);
  color: var(--link-hover-fg);
  outline: 2px solid var(--focus-outline);
  outline-offset: -2px;
}

/* Buscador mejorado */
.search-toggle-btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: all 0.3s ease;
  font-weight: 600;
  border: 2px solid var(--border-soft);
}

.search-toggle-btn:hover,
.search-toggle-btn[aria-expanded="true"] {
  background: var(--link-hover-fg);
  color: #FFFFFF;
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

.search-input {
  border: 3px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-fg);
  font-weight: 500;
}

.search-input:focus {
  border-color: var(--focus-outline);
  outline: 3px solid var(--focus-outline);
  outline-offset: -3px;
}

.search-submit-btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: all 0.3s ease;
  border: 2px solid var(--border-soft);
  font-weight: 600;
}

.search-submit-btn:hover {
  background: var(--link-hover-fg);
  color: #FFFFFF;
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

.search-results-list {
  background: var(--surface-1);
  border: 2px solid var(--surface-border);
  border-top: none;
  box-shadow: var(--results-shadow);
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.elemento-de-busqueda {
  border-bottom: 2px solid var(--divider);
}

.boton-navegador {
  color: var(--link-fg);
  transition: all 0.2s;
  font-weight: 500;
}

.boton-navegador:hover,
.boton-navegador:focus {
  background: var(--hover-bg);
  color: var(--link-hover-fg);
  outline: 2px solid var(--focus-outline);
  outline-offset: -2px;
}

.elemento-de-busqueda.activo {
  background-color: var(--hover-bg);
  color: var(--link-hover-fg);
  border-left: 4px solid var(--focus-outline);
}

/* ============================
   BOTÓN HAMBURGUESA - CONTRASTE MEJORADO
   ============================ */

.hamburger-line {
  background-color: var(--nav-fg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  height: 3px;
}

/* ============================
   SELECCIONES Y SCROLLBARS - MEJORADOS
   ============================ */

::selection {
  background: rgba(15, 76, 129, 0.3);
  color: inherit;
}

[data-bs-theme="oscuro"] ::selection {
  background: rgba(252, 211, 77, 0.3);
}

/* Scrollbar mejorado */
:root {
  scrollbar-color: var(--text-muted) transparent;
  scrollbar-width: auto;
}

[data-bs-theme="oscuro"] :root {
  scrollbar-color: var(--surface-border) transparent;
}

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 999px;
  border: 2px solid var(--bg-body);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

[data-bs-theme="oscuro"] ::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-color: var(--bg-body);
}

[data-bs-theme="oscuro"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
}

/* ============================
   ESTADOS DE FOCUS MEJORADOS
   ============================ */

*:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

/* ============================
   ELEMENTOS CON OPACIDAD CORREGIDOS
   ============================ */

.floating-element {
  opacity: 0.3;
}

[data-bs-theme="oscuro"] .floating-element {
  opacity: 0.4;
}

.backdrop-filter,
.glass-effect {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="oscuro"] .backdrop-filter,
[data-bs-theme="oscuro"] .glass-effect {
  background: rgba(30, 41, 59, 0.8);
}

/* ============================
   VALIDACIÓN CONTRASTE FINAL
   ============================ */

.high-contrast {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.medium-contrast {
  background: var(--text-secondary);
  color: var(--bg-primary);
}

.disabled,
[disabled] {
  opacity: 0.6;
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--input-bg);
  color: var(--input-fg);
  border: 2px solid var(--input-border);
  font-weight: 500;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--focus-outline);
  outline: 3px solid var(--focus-outline);
  outline-offset: -2px;
}

/* ============================
   MENSAJES DE ERROR Y ÉXITO
   ============================ */

.error-message {
  background: #FEE2E2;
  color: #991B1B;
  border: 2px solid #DC2626;
  font-weight: 600;
}

[data-bs-theme="oscuro"] .error-message {
  background: #991B1B;
  color: #FEE2E2;
  border-color: #F87171;
}

.success-message {
  background: #DCFCE7;
  color: #166534;
  border: 2px solid #16A34A;
  font-weight: 600;
}

[data-bs-theme="oscuro"] .success-message {
  background: #166534;
  color: #DCFCE7;
  border-color: #4ADE80;
}

.warning-message {
  background: #FEF3C7;
  color: #92400E;
  border: 2px solid #D97706;
  font-weight: 600;
}

[data-bs-theme="oscuro"] .warning-message {
  background: #92400E;
  color: #FEF3C7;
  border-color: #FCD34D;
}

/* ============================
   SIDEBAR NAVIGATION - TEMAS INTEGRADOS
   ============================ */

[data-bs-theme="claro"] .sidebar-navigation {
  background: var(--bg-primary);
  border-right: 2px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
}

[data-bs-theme="claro"] .sidebar-header {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-soft);
}

[data-bs-theme="claro"] .sidebar-logo {
  color: var(--accent-blue);
  font-weight: 700;
}

[data-bs-theme="claro"] .sidebar-subtitle {
  color: var(--text-muted);
}

[data-bs-theme="claro"] .sidebar-close {
  color: var(--text-muted);
  transition: all 0.2s ease;
}

[data-bs-theme="claro"] .sidebar-close:hover,
[data-bs-theme="claro"] .sidebar-close:focus {
  background: rgba(15, 76, 129, 0.1);
  color: var(--accent-blue);
}

[data-bs-theme="claro"] .sidebar-nav-link,
[data-bs-theme="claro"] .sidebar-submenu-link {
  color: var(--text-primary);
  border-left-color: transparent;
  transition: all 0.2s ease;
}

[data-bs-theme="claro"] .sidebar-nav-link:hover,
[data-bs-theme="claro"] .sidebar-nav-link:focus,
[data-bs-theme="claro"] .sidebar-submenu-link:hover,
[data-bs-theme="claro"] .sidebar-submenu-link:focus {
  background: var(--hover-bg);
  color: var(--accent-blue);
  border-left-color: var(--accent-blue);
  outline: 2px solid var(--focus-outline);
  outline-offset: -2px;
}

[data-bs-theme="claro"] .sidebar-submenu {
  background: rgba(15, 76, 129, 0.05);
  border-top-color: var(--border-soft);
}

[data-bs-theme="claro"] .sidebar-submenu-level2 {
  background: rgba(15, 76, 129, 0.08);
}

[data-bs-theme="claro"] .sidebar-search-container {
  background: var(--input-bg);
  border-color: var(--input-border);
}

[data-bs-theme="claro"] .sidebar-search-input {
  color: var(--input-fg);
}

[data-bs-theme="claro"] .sidebar-search-input::placeholder {
  color: var(--text-muted);
}

[data-bs-theme="claro"] .sidebar-search-btn {
  background: var(--accent-blue);
  color: #FFFFFF;
}

[data-bs-theme="claro"] .sidebar-search-btn:hover {
  background: var(--accent-blue-hover);
}

[data-bs-theme="claro"] .sidebar-indicator {
  background: linear-gradient(to bottom, var(--accent-blue), var(--accent-blue-hover));
  box-shadow: 2px 0 8px rgba(15, 76, 129, 0.3);
}

[data-bs-theme="claro"] .sidebar-overlay {
  background-color: rgba(15, 23, 42, 0.5);
}

[data-bs-theme="oscuro"] .sidebar-navigation {
  background: var(--bg-primary);
  border-right: 2px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
}

[data-bs-theme="oscuro"] .sidebar-header {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--surface-border);
}

[data-bs-theme="oscuro"] .sidebar-logo {
  color: var(--accent-blue);
  font-weight: 700;
}

[data-bs-theme="oscuro"] .sidebar-subtitle {
  color: var(--text-muted);
}

[data-bs-theme="oscuro"] .sidebar-close {
  color: var(--text-muted);
  transition: all 0.2s ease;
}

[data-bs-theme="oscuro"] .sidebar-close:hover,
[data-bs-theme="oscuro"] .sidebar-close:focus {
  background: rgba(96, 165, 250, 0.2);
  color: var(--accent-blue);
}

[data-bs-theme="oscuro"] .sidebar-nav-link,
[data-bs-theme="oscuro"] .sidebar-submenu-link {
  color: var(--text-primary);
  border-left-color: transparent;
  transition: all 0.2s ease;
}

[data-bs-theme="oscuro"] .sidebar-nav-link:hover,
[data-bs-theme="oscuro"] .sidebar-nav-link:focus,
[data-bs-theme="oscuro"] .sidebar-submenu-link:hover,
[data-bs-theme="oscuro"] .sidebar-submenu-link:focus {
  background: var(--hover-bg);
  color: var(--accent-blue);
  border-left-color: var(--accent-blue);
  outline: 2px solid var(--focus-outline);
  outline-offset: -2px;
}

[data-bs-theme="oscuro"] .sidebar-submenu {
  background: rgba(96, 165, 250, 0.1);
  border-top-color: var(--surface-border);
}

[data-bs-theme="oscuro"] .sidebar-submenu-level2 {
  background: rgba(96, 165, 250, 0.15);
}

[data-bs-theme="oscuro"] .sidebar-search-container {
  background: var(--input-bg);
  border-color: var(--input-border);
}

[data-bs-theme="oscuro"] .sidebar-search-input {
  color: var(--input-fg);
}

[data-bs-theme="oscuro"] .sidebar-search-input::placeholder {
  color: var(--text-muted);
}

[data-bs-theme="oscuro"] .sidebar-search-btn {
  background: var(--accent-blue);
  color: #0F172A;
  font-weight: 600;
}

[data-bs-theme="oscuro"] .sidebar-search-btn:hover {
  background: var(--accent-blue-hover);
}

[data-bs-theme="oscuro"] .sidebar-indicator {
  background: linear-gradient(to bottom, var(--accent-blue), var(--accent-blue-hover));
  box-shadow: 2px 0 8px rgba(96, 165, 250, 0.4);
}

[data-bs-theme="oscuro"] .sidebar-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

[data-bs-theme="claro"] .sidebar-search-results {
  background: var(--surface-1);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

[data-bs-theme="claro"] .sidebar-search-results a {
  color: var(--text-primary);
  border-bottom-color: var(--divider);
}

[data-bs-theme="claro"] .sidebar-search-results a:hover {
  background: var(--hover-bg);
  color: var(--accent-blue);
}

[data-bs-theme="oscuro"] .sidebar-search-results {
  background: var(--surface-1);
  border-color: var(--surface-border);
  box-shadow: var(--shadow-soft);
}

[data-bs-theme="oscuro"] .sidebar-search-results a {
  color: var(--text-primary);
  border-bottom-color: var(--surface-border);
}

[data-bs-theme="oscuro"] .sidebar-search-results a:hover {
  background: var(--hover-bg);
  color: var(--accent-blue);
}

[data-bs-theme="claro"] .sidebar-nav-link[style*="font-weight: bold"] {
  background: rgba(15, 76, 129, 0.1);
  border-left-color: var(--accent-blue);
  color: var(--accent-blue);
  font-weight: 700 !important;
}

[data-bs-theme="oscuro"] .sidebar-nav-link[style*="font-weight: bold"] {
  background: rgba(96, 165, 250, 0.15);
  border-left-color: var(--accent-blue);
  color: var(--accent-blue);
  font-weight: 700 !important;
}

[data-bs-theme="claro"] .sidebar-submenu.scrollable::before {
  background: linear-gradient(to bottom, var(--accent-blue), transparent);
}

[data-bs-theme="claro"] .sidebar-submenu.scrollable::after {
  background: linear-gradient(to top, var(--accent-blue), transparent);
}

[data-bs-theme="oscuro"] .sidebar-submenu.scrollable::before {
  background: linear-gradient(to bottom, var(--accent-blue), transparent);
}

[data-bs-theme="oscuro"] .sidebar-submenu.scrollable::after {
  background: linear-gradient(to top, var(--accent-blue), transparent);
}

[data-bs-theme="claro"] .sidebar-submenu.scrollable::-webkit-scrollbar-thumb {
  background: var(--text-muted);
}

[data-bs-theme="claro"] .sidebar-submenu.scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

[data-bs-theme="oscuro"] .sidebar-submenu.scrollable::-webkit-scrollbar-thumb {
  background: var(--text-muted);
}

[data-bs-theme="oscuro"] .sidebar-submenu.scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

.hola {
  text-decoration: none;
  color: var(--text-dark);
}