/* ==========================================================
   Modo oscuro — ajustes de contraste (sitio completo)
   Complementa la paleta de :root[data-theme="dark"] definida
   en index.html (tomada de plantilla-dark.html). El sitio usa
   muchos colores pastel FIJOS (hex) pensados para fondos claros,
   combinados con variables de texto que sí cambian de tono en
   oscuro; ese cruce es lo que dejaba textos e íconos "perdidos".
   Aquí se resuelve con el mismo patrón de plantilla-dark.html:
   fondo de color translúcido + texto del mismo tono, brillante.
   Se carga después del <style> principal para poder pisar esos
   estilos inline puntuales.
   ========================================================== */

/* ---------- Reglas de CLASE ---------- */

/* Insignias "eyebrow" de cada sección (Categorías, Estadísticas,
   Calendario, Instalaciones, Galería, Inscripción, Hero). */
[data-theme="dark"] .badge-soft-green {
  background: rgba(0, 230, 118, 0.15);
  border-color: rgba(0, 230, 118, 0.4);
  color: var(--primary);
}
[data-theme="dark"] .badge-soft-gold {
  background: rgba(255, 215, 0, 0.2);
  color: var(--secondary);
}

/* Pizarras de resultados: pill "Finalizado" / "Extra inning". */
[data-theme="dark"] .status-pill.live {
  background: rgba(0, 230, 118, 0.15);
  color: var(--primary);
}
[data-theme="dark"] .status-pill.gold {
  background: rgba(255, 215, 0, 0.2);
  color: var(--secondary);
}

/* Tabla de posiciones (estadísticas). */
[data-theme="dark"] .table-standings-light thead th {
  color: var(--surface);
}

/* Días con evento en el calendario mensual. */
[data-theme="dark"] .cal-day.event-green {
  background: rgba(0, 230, 118, 0.15);
}

/* Filtros activos (categorías / galería) y botón CTA principal:
   fondo verde neón sólido necesita texto oscuro, no blanco. */
[data-theme="dark"] .filter-pill-group button.active,
[data-theme="dark"] .btn-maya-primary,
[data-theme="dark"] .btn-maya-primary:hover {
  color: var(--surface) !important;
}
[data-theme="dark"] .btn-maya-outline {
  border-color: rgba(0, 230, 118, 0.4);
}
[data-theme="dark"] .btn-maya-outline:hover {
  background: rgba(0, 230, 118, 0.15);
}
[data-theme="dark"] .contact-box:hover {
  background: var(--surface-container-high);
}

/* ---------- Reglas sobre estilos inline ---------- */

/* Chips/insignias con fondo menta o verde-agua fijo (#d1fae5,
   #ecfdf5): el texto var(--primary) se vuelve verde neón y
   desaparece sobre un fondo tan claro. Mismo tratamiento que
   .pill-tag.green de plantilla-dark.html. */
[data-theme="dark"] [style*="background:#d1fae5"],
[data-theme="dark"] [style*="background:#ecfdf5"] {
  background: rgba(0, 230, 118, 0.15) !important;
  color: var(--primary) !important;
}

/* Chips con fondo azul cielo fijo (#e0f2fe, #f0f9ff), categoría
   "Pequeñas Ligas": mismo problema con el texto var(--sky). */
[data-theme="dark"] [style*="background:#e0f2fe"],
[data-theme="dark"] [style*="background:#f0f9ff"] {
  background: var(--sky-light) !important;
  color: var(--sky) !important;
}

/* Elementos "dorados" con texto café (#78350f): sobre fondo
   sólido var(--secondary) el texto debe quedar oscuro; sobre
   fondo translúcido rgba(255,213,79,.35) debe quedar dorado
   brillante, igual que pill-tag/cat-icon.gold en plantilla-dark. */
[data-theme="dark"] [style*="background:var(--secondary);color:#78350f"] {
  color: var(--surface) !important;
}
[data-theme="dark"] [style*="color:#78350f"]:not([style*="background:var(--secondary)"]) {
  color: var(--secondary) !important;
}

/* Texto blanco fijo sobre fondo sólido de color (badges de fotos,
   etiquetas del calendario, recuadros de fecha): en modo oscuro
   esos fondos son colores neón, así que el texto debe ser oscuro. */
[data-theme="dark"] [style*="background:var(--primary);color:#fff"],
[data-theme="dark"] [style*="background:var(--secondary);color:#fff"],
[data-theme="dark"] [style*="background:var(--secondary-dark);color:#fff"],
[data-theme="dark"] [style*="background:var(--sky);color:#fff"] {
  color: var(--surface) !important;
}

/* Etiquetas de categoría con texto de color fijo directo sobre la
   tarjeta (sin chip de fondo propio): Pañalitos (ámbar), Infantil
   Menor / Maceta (verde), checkmark del hero (verde), horario de
   contacto (verde). */
[data-theme="dark"] [style*="color:#b45309"] {
  color: var(--secondary) !important;
}
[data-theme="dark"] [style*="color:#047857"],
[data-theme="dark"] [style*="color:#059669"] {
  color: var(--primary) !important;
}
/* Softbol Juvenil & Libre: el rótulo va directo sobre la tarjeta
   (el ícono, que sí vive en su propio chip claro, es un <i>, no
   un <span>, así que este selector no lo toca). */
[data-theme="dark"] span[style*="color:#e11d48"] {
  color: var(--secondary) !important;
}

/* Panel de Inscripción: degradado blanco → tarjeta → menta claro,
   pensado solo para modo claro. En oscuro queda una franja blanca
   y otra clara en medio de la tarjeta oscura. */
[data-theme="dark"] #inscripcion [style*="linear-gradient(to bottom right, #fff"] {
  background: linear-gradient(to bottom right, var(--surface-card), var(--surface-card), rgba(0, 230, 118, 0.08)) !important;
}

/* Fila destacada de la tabla de posiciones y 1er lugar. */
[data-theme="dark"] .table-standings-light tbody tr.highlight {
  background: rgba(0, 230, 118, 0.12);
}
[data-theme="dark"] .pos-badge-light.first {
  color: var(--surface);
}

/* Tarjeta "Softbol Juvenil & Libre": el recuadro de horario tiene
   fondo rosa pastel fijo y se pierde con el texto claro del modo
   oscuro. Lo pasamos a un panel oscuro translúcido, como el
   .cat-schedule de plantilla-dark.html. */
[data-theme="dark"] .cat-card-wrapper[data-sport="softbol"] .schedule-box {
  background: rgba(10, 16, 12, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Bootstrap fuerza fondo blanco con !important en .bg-white;
   los paneles grandes (tabla de posiciones, calendario,
   servicios) deben pasar a la superficie oscura de tarjeta. */
[data-theme="dark"] .bg-white {
  background-color: var(--surface-card) !important;
}
/* Excepción: la placa del logo en el footer se deja blanca a
   propósito, como acento sobre el footer ya oscuro. */
[data-theme="dark"] footer .bg-white {
  background-color: #fff !important;
}