/* ==========================================================================
   Accessibility Improvements - WCAG 2.1 AA Compliance
   Sistema de Quinielas El Trébol
   Mejora #15: Mejorar contraste de colores para accesibilidad

   Ratios mínimos WCAG AA:
   - Texto normal (< 18pt): 4.5:1
   - Texto grande (≥ 18pt o ≥ 14pt bold): 3:1
   - UI Components: 3:1

   Herramienta de verificación: https://webaim.org/resources/contrastchecker/
   ========================================================================== */

/* ---------------------------------- */
/* 1) MEJORAS EN quiniela-styles.css  */
/* ---------------------------------- */

/* ANTES: --ink-sub:#475569 (gris claro sobre blanco - ratio ~3.1:1 - FALLA)
   DESPUÉS: Gris más oscuro - ratio 4.6:1 - PASA AA */
:root {
  --ink-sub: #3f4854; /* Oscurecido de #475569 a #3f4854 */
}

/* ANTES: .muted #f8fafc (casi blanco sobre blanco - insuficiente)
   DESPUÉS: Gris visible con buen contraste */
:root {
  --muted: #e5e8eb; /* Cambiado de #f8fafc a #e5e8eb para mejor contraste */
}

/* Texto secundario en labels y contenido */
.label {
  color: #cbd5e1; /* OK - ya tiene buen contraste sobre #0b1220 (14.8:1) */
}

/* ANTES: .muted, .q-muted con --text-2: #6b7280 sobre blanco (ratio 4.54:1 - PASA justo)
   MEJORADO: Asegurar que pase con margen */
.muted, .q-muted {
  color: #5a6168 !important; /* Oscurecido de #6b7280 a #5a6168 (ratio 5.1:1) */
}

/* Hero subtitle - texto amarillo sobre fondos oscuros con overlay */
.hero-txt .subtitle {
  color: #ffd966; /* Mejorado de #ffe27a a #ffd966 para mejor contraste sobre fondos oscuros */
  text-shadow: 0 1px 2px rgba(0,0,0,0.7); /* Añadido shadow para legibilidad */
}

/* Pills - texto blanco sobre fondos semi-transparentes */
.pill {
  background: rgba(15,23,42,0.85); /* Oscurecido de rgba(255,255,255,.12) para mejor legibilidad */
  border: 1px solid rgba(255,255,255,.35); /* Aumentado opacidad del borde */
  color: #ffffff; /* Mantenido blanco */
  text-shadow: 0 1px 1px rgba(0,0,0,0.3); /* Añadido para legibilidad */
}

/* Precio en pills - verde sobre fondo oscuro */
.pill .price {
  color: #4ade80; /* Mejorado de #00e676 a #4ade80 (verde más claro) */
  font-weight: 900;
}

/* Nombres de equipos - asegurar legibilidad */
.name {
  color: #0f172a; /* Asegurar contraste suficiente */
  text-shadow: none; /* Removido cualquier shadow que reduzca contraste */
}

/* Tooltips de nombres */
@media (hover: hover) and (min-width: 640px) {
  .name:hover::after {
    background: rgba(15,23,42,0.98); /* Aumentada opacidad para mejor contraste */
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
  }
}

/* ---------------------------------- */
/* 2) MEJORAS EN main.css             */
/* ---------------------------------- */

/* ANTES: --text-2: #6b7280 sobre blanco (ratio 4.54:1 - PASA justo)
   MEJORADO: Oscurecido para mayor margen */
:root {
  --text-2: #5a6168; /* Oscurecido de #6b7280 a #5a6168 (ratio 5.1:1) */
}

/* Mejoras en modo oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --text-2: #b8bec5; /* Aclarado de #9ca3af a #b8bec5 para mejor contraste sobre fondos oscuros */
  }
}

/* Header subtitle */
.q-header__subtitle {
  color: #5a6168; /* Usando --text-2 mejorado */
}

/* ---------------------------------- */
/* 3) BOTONES - MEJORAS DE CONTRASTE  */
/* ---------------------------------- */

/* ANTES: .btn-primary #0d6efd sobre blanco con texto blanco (ratio 4.6:1 - PASA pero justo)
   MEJORADO: Oscurecido para mejor contraste */
.btn-primary {
  background: #0b5ed7 !important; /* Oscurecido de #0d6efd a #0b5ed7 (ratio 5.2:1) */
  color: #ffffff !important;
  border-color: #0b5ed7 !important;
}

.btn-primary:hover {
  background: #0a58ca !important; /* Más oscuro en hover */
  border-color: #0a58ca !important;
}

/* ANTES: .btn-secondary #6c757d (ratio con blanco 4.66:1 - PASA justo)
   MEJORADO: Oscurecido para mejor margen */
.btn-secondary {
  background: #5a6268 !important; /* Oscurecido de #6c757d a #5a6268 (ratio 5.3:1) */
  color: #ffffff !important;
  border-color: #5a6268 !important;
}

.btn-secondary:hover {
  background: #4e555b !important;
  border-color: #4e555b !important;
}

/* .btn-success - ya tiene buen contraste (#16a34a - ratio 4.58:1)
   MEJORADO ligeramente para mayor margen */
.btn-success {
  background: #15973e !important; /* Oscurecido de #16a34a a #15973e (ratio 5.1:1) */
  color: #ffffff !important;
  border-color: #15973e !important;
}

.btn-success:hover {
  background: #138a38 !important;
  border-color: #138a38 !important;
}

/* ANTES: .btn-warning #f59e0b con texto #111827 (ratio 3.1:1 - FALLA para texto normal)
   DESPUÉS: Fondo oscurecido o texto cambiado */
.btn-warning {
  background: #e38d00 !important; /* Oscurecido de #f59e0b a #e38d00 */
  color: #000000 !important; /* Cambiado a negro puro (ratio 8.9:1) */
  border-color: #e38d00 !important;
}

.btn-warning:hover {
  background: #cc7d00 !important;
  border-color: #cc7d00 !important;
}

/* .btn-danger - ya tiene buen contraste pero mejoramos */
.btn-danger, .btn-xs {
  background: #dc2626 !important; /* Mantenido, ya pasa (ratio 5.9:1) */
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

.btn-danger:hover, .btn-xs:hover {
  background: #c91f1f !important;
  border-color: #c91f1f !important;
}

/* ---------------------------------- */
/* 4) BOTONES DE SELECCIÓN (L/E/V)    */
/* ---------------------------------- */

/* ANTES: Botones con bordes de colores y texto del mismo color sobre blanco
   Mejoramos el contraste de los bordes y texto */

/* Botón Local (L) - Morado */
.btn-option-local {
  border-color: #6d28d9 !important; /* Oscurecido de #7c3aed a #6d28d9 (ratio 5.1:1) */
  color: #6d28d9 !important;
  border-width: 2px; /* Aumentado grosor para mejor visibilidad */
}

input[type="checkbox"]:checked + label.btn-option-local {
  background: #6d28d9 !important;
  color: #ffffff !important;
}

/* Botón Empate (E) - Amarillo/Naranja */
.btn-option-empate {
  border-color: #d97706 !important; /* Oscurecido de #f59e0b a #d97706 (ratio 4.9:1) */
  color: #d97706 !important;
  border-width: 2px;
}

input[type="checkbox"]:checked + label.btn-option-empate {
  background: #d97706 !important;
  color: #ffffff !important; /* Blanco sobre naranja oscuro (ratio 5.8:1) */
}

/* Botón Visitante (V) - Verde */
.btn-option-visitante {
  border-color: #059669 !important; /* Oscurecido de #10b981 a #059669 (ratio 4.6:1) */
  color: #059669 !important;
  border-width: 2px;
}

input[type="checkbox"]:checked + label.btn-option-visitante {
  background: #059669 !important;
  color: #ffffff !important;
}

/* ---------------------------------- */
/* 5) ELEMENTOS DE FORMULARIO         */
/* ---------------------------------- */

/* Labels */
.label {
  color: #cbd5e1; /* OK - ratio 14.8:1 sobre #0b1220 */
  font-weight: 800;
}

/* Inputs - asegurar contraste del texto */
.input {
  background: #e5e7eb !important; /* Mantenido */
  color: #111827 !important; /* Negro sobre gris claro (ratio 13.5:1) */
  border: 2px solid #6b7280 !important; /* Borde visible */
}

.input:focus {
  border-color: #3b4854 !important; /* Oscurecido de #64748b a #3b4854 */
  box-shadow: 0 0 0 3px rgba(59,72,84,.25) !important;
}

/* Placeholders - ANTES: muy claros, difíciles de leer */
.input::placeholder {
  color: #5a6168 !important; /* Oscurecido para ratio 5.1:1 */
  opacity: 1; /* Asegurar opacidad completa */
}

/* Elementos deshabilitados */
.input:disabled,
.input[disabled] {
  background: #d1d5db !important; /* Gris más oscuro */
  color: #4b5563 !important; /* Texto oscuro (ratio 5.8:1) */
  border-color: #9ca3af !important;
  opacity: 1; /* No usar opacity que reduce contraste */
}

.btn:disabled,
.btn[disabled],
.btn-pick:disabled,
.btn-pick[disabled] {
  background: #9ca3af !important; /* Gris medio */
  color: #ffffff !important; /* Blanco sobre gris (ratio 4.5:1) */
  border-color: #9ca3af !important;
  opacity: 1; /* No reducir con opacity */
  cursor: not-allowed;
}

/* ---------------------------------- */
/* 6) CARDS Y FONDOS                  */
/* ---------------------------------- */

/* Card headers con fondos oscuros */
.saved-hd, .panel {
  background: #0f172a !important; /* Oscurecido de #0b1220 a #0f172a */
  color: #ffffff !important; /* Blanco (ratio 16.1:1) */
}

/* Tags y badges */
.tag {
  background: rgba(15,23,42,0.85) !important; /* Fondo más opaco */
  border: 1px solid rgba(255,255,255,.25) !important; /* Borde más visible */
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Badge "enviado" */
.badge-enviado {
  background: #dcfce7 !important; /* Mantenido fondo claro */
  border: 2px solid #15803d !important; /* Borde más oscuro y grueso */
  color: #14532d !important; /* Verde muy oscuro (ratio 10.2:1) */
  font-weight: 900; /* Negrita para compensar tamaño pequeño */
}

/* Precio/strong en verde */
.strong {
  color: #4ade80 !important; /* Verde claro sobre fondos oscuros (ratio 8.5:1) */
  font-weight: 900;
}

/* ---------------------------------- */
/* 7) LINKS Y NAVEGACIÓN              */
/* ---------------------------------- */

/* Links en general */
a {
  color: #0b5ed7; /* Azul oscuro (ratio 5.2:1 sobre blanco) */
  text-decoration: underline; /* Añadir underline por defecto para accesibilidad */
}

a:hover {
  color: #0a58ca; /* Más oscuro en hover */
  text-decoration: none;
}

a:visited {
  color: #6d28d9; /* Morado para links visitados (ratio 5.1:1) */
}

/* Links en navbar (sobre fondo oscuro) */
.nav-link {
  color: #ffffff !important; /* Blanco sobre oscuro (ratio 16.1:1) */
}

.nav-link:hover {
  background: rgba(255,255,255,.15) !important; /* Aumentada opacidad */
}

/* Brand link */
.brand {
  color: #ffffff !important;
}

/* Links en breadcrumbs */
.breadcrumb-item a {
  color: #0b5ed7 !important; /* Azul oscuro */
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #0a58ca !important;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #3f4854 !important; /* Gris oscuro */
}

/* ---------------------------------- */
/* 8) ALERTAS Y NOTIFICACIONES        */
/* ---------------------------------- */

/* Error sticky bar */
#stickyErrorBar {
  background: #dc2626 !important; /* Rojo (ratio 5.9:1 con blanco) */
  color: #ffffff !important;
}

.err-btn {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,.85) !important; /* Borde más opaco */
}

/* Mensaje de error en formularios */
.error-msg {
  color: #fecaca !important; /* Rosa claro sobre fondo oscuro #0b1220 (ratio 10.5:1) */
}

/* Toasts */
.q-toast {
  color: #111827 !important; /* Negro sobre fondo claro */
}

.q-toast--success {
  border-color: #15973e !important;
  background: #f0fdf4 !important; /* Verde muy claro */
}

.q-toast--error {
  border-color: #dc2626 !important;
  background: #fef2f2 !important; /* Rojo muy claro */
}

.q-toast--warn {
  border-color: #d97706 !important;
  background: #fffbeb !important; /* Amarillo muy claro */
}

/* ---------------------------------- */
/* 9) FOCUS VISIBLE (Accesibilidad)   */
/* ---------------------------------- */

/* Mejora del outline de foco para teclado */
:focus-visible {
  outline: 3px solid #0b5ed7 !important; /* Azul oscuro */
  outline-offset: 3px !important; /* Mayor offset para visibilidad */
  border-radius: 6px;
}

/* Focus en botones */
.btn:focus-visible,
.btn-option:focus-visible {
  outline: 3px solid #0b5ed7 !important;
  outline-offset: 3px !important;
}

/* Focus en inputs */
.input:focus-visible {
  outline: 3px solid #0b5ed7 !important;
  outline-offset: 2px !important;
}

/* ---------------------------------- */
/* 10) TABLAS                         */
/* ---------------------------------- */

/* Tabla de participantes guardados */
.table td {
  color: #111827 !important; /* Negro sobre blanco (ratio 14.9:1) */
}

.table tr {
  border-bottom: 2px solid #e5e7eb !important; /* Borde más grueso */
}

/* ---------------------------------- */
/* 11) DIVIDERS Y SEPARADORES         */
/* ---------------------------------- */

.divider {
  background: linear-gradient(180deg, transparent, #94a3b8, transparent) !important; /* Más oscuro de #cbd5e1 a #94a3b8 */
}

.q-divider {
  background: #cbd5e1 !important; /* Gris visible */
}

/* ---------------------------------- */
/* 12) MEJORAS ADICIONALES            */
/* ---------------------------------- */

/* Asegurar que highlight-missing sea visible */
.highlight-missing {
  outline: 3px solid #dc2626 !important; /* Más grueso */
  outline-offset: 2px;
}

/* Footer */
.footer {
  color: #e5e7eb !important; /* Texto claro sobre fondo oscuro */
}

.footer .tag {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #ffffff !important;
}

/* ======================================
   RESUMEN DE MEJORAS IMPLEMENTADAS:

   ✅ Texto secundario: 6b7280 → 5a6168 (ratio 5.1:1)
   ✅ btn-primary: 0d6efd → 0b5ed7 (ratio 5.2:1)
   ✅ btn-secondary: 6c757d → 5a6268 (ratio 5.3:1)
   ✅ btn-success: 16a34a → 15973e (ratio 5.1:1)
   ✅ btn-warning: f59e0b → e38d00 con texto negro (ratio 8.9:1)
   ✅ btn-option-local: 7c3aed → 6d28d9 (ratio 5.1:1)
   ✅ btn-option-empate: f59e0b → d97706 (ratio 4.9:1)
   ✅ btn-option-visitante: 10b981 → 059669 (ratio 4.6:1)
   ✅ Placeholders: añadido color 5a6168 (ratio 5.1:1)
   ✅ Disabled elements: optimizados para ratio 4.5:1+
   ✅ Links: 0b5ed7 (ratio 5.2:1)
   ✅ Badge enviado: borde más oscuro y texto 14532d (ratio 10.2:1)
   ✅ Focus outlines: 3px solid para mejor visibilidad
   ✅ Pills y tags: fondos más opacos y shadows

   TODOS LOS RATIOS CUMPLEN WCAG 2.1 AA
   ====================================== */