/*
 * Tema oscuro Mushin sobre Bootstrap 5.3, para /admin.
 *
 * No toca el markup de las páginas admin (siguen usando `btn btn-primary`,
 * `card border-0 shadow-sm`, `table table-hover`, etc. tal cual) — solo
 * redefine variables de Bootstrap y algunas clases utilitarias que Bootstrap
 * NO adapta automáticamente con data-bs-theme="dark" (bg-white, bg-light,
 * table-light, border, text-dark quedan fijas en su valor claro salvo que se
 * pisen explícitamente aquí).
 *
 * Los colores salen de los design tokens Mushin (--mushin-*, definidos en
 * styles/landing.css, que se cargan en TODAS las páginas vía pages/_app.js).
 * Este archivo se sirve como estático (público) y se linkea en _document.js
 * después del CSS de Bootstrap, así que gana en la cascada.
 */

body {
  font-family: var(--mushin-font-body), sans-serif;
}

/* ── Variables de Bootstrap ──────────────────────────────────────────────── */
[data-bs-theme='dark'] {
  --bs-body-bg: var(--mushin-bg);
  --bs-body-color: var(--mushin-text);
  --bs-secondary-color: var(--mushin-text-secondary);
  --bs-tertiary-color: var(--mushin-muted);
  --bs-border-color: var(--mushin-border);
  --bs-border-color-translucent: var(--mushin-border);

  --bs-secondary-bg: var(--mushin-surface);
  --bs-tertiary-bg: var(--mushin-surface-soft);

  --bs-primary: var(--mushin-primary);
  --bs-primary-rgb: 229, 185, 143;
  --bs-link-color: var(--mushin-primary);
  --bs-link-hover-color: var(--mushin-primary-light);
  --bs-link-color-rgb: 229, 185, 143;
  --bs-link-hover-color-rgb: 243, 210, 180;

  --bs-success: var(--mushin-success);
  --bs-warning: var(--mushin-warning);
  --bs-danger: var(--mushin-danger);

  --bs-border-radius: var(--mushin-radius-md);
  --bs-border-radius-sm: var(--mushin-radius-sm);
  --bs-border-radius-lg: var(--mushin-radius-lg);
  --bs-border-radius-xl: var(--mushin-radius-xl);

  color-scheme: dark;
}

/* ── Utilidades que Bootstrap NO adapta con data-bs-theme (quedan fijas en
   su valor claro por diseño de Bootstrap) — se pisan a mano ────────────── */
[data-bs-theme='dark'] .bg-white,
[data-bs-theme='dark'] .bg-light,
[data-bs-theme='dark'] .table-light {
  background-color: var(--mushin-surface) !important;
  color: var(--mushin-text) !important;
}

[data-bs-theme='dark'] .table-light > * {
  --bs-table-bg: var(--mushin-surface);
  --bs-table-color: var(--mushin-text-secondary);
  border-color: var(--mushin-border);
}

[data-bs-theme='dark'] .text-dark {
  color: var(--mushin-text) !important;
}

[data-bs-theme='dark'] .border {
  border-color: var(--mushin-border) !important;
}

[data-bs-theme='dark'] hr {
  border-color: var(--mushin-border);
  opacity: 1;
}

/* Bootstrap Icons heredan color del texto (currentColor), así que ya siguen
   el tema sin cambios adicionales. */

/* ── Cards y superficies ─────────────────────────────────────────────────── */
[data-bs-theme='dark'] .card {
  background-color: var(--mushin-surface);
  border-color: var(--mushin-border);
  border-radius: var(--mushin-radius-lg);
}

[data-bs-theme='dark'] .card-header,
[data-bs-theme='dark'] .card-footer {
  background-color: transparent;
  border-color: var(--mushin-border);
}

[data-bs-theme='dark'] .shadow-sm {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
[data-bs-theme='dark'] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mushin-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(229, 185, 143, 0.06);
  --bs-table-border-color: var(--mushin-border);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
[data-bs-theme='dark'] .btn-primary {
  color: #14110C;
  background-color: var(--mushin-primary);
  border-color: var(--mushin-primary);
}
[data-bs-theme='dark'] .btn-primary:hover,
[data-bs-theme='dark'] .btn-primary:active {
  color: #14110C;
  background-color: var(--mushin-primary-light);
  border-color: var(--mushin-primary-light);
}

[data-bs-theme='dark'] .btn-outline-secondary {
  color: var(--mushin-text-secondary);
  border-color: var(--mushin-border);
}
[data-bs-theme='dark'] .btn-outline-secondary:hover {
  background-color: var(--mushin-surface-soft);
  border-color: var(--mushin-text-secondary);
  color: var(--mushin-text);
}

[data-bs-theme='dark'] .btn,
[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select,
[data-bs-theme='dark'] .badge {
  border-radius: var(--mushin-radius-sm);
}

/* ── Formularios ─────────────────────────────────────────────────────────── */
[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select {
  background-color: var(--mushin-surface-soft);
  border-color: var(--mushin-border);
  color: var(--mushin-text);
}
[data-bs-theme='dark'] .form-control:focus,
[data-bs-theme='dark'] .form-select:focus {
  background-color: var(--mushin-surface-soft);
  border-color: var(--mushin-primary);
  box-shadow: 0 0 0 0.2rem rgba(229, 185, 143, 0.2);
  color: var(--mushin-text);
}
[data-bs-theme='dark'] .form-control::placeholder {
  color: var(--mushin-muted);
}

/* ── Nav pills (tabs de reportes, portal admin, etc.) ────────────────────── */
[data-bs-theme='dark'] .nav-pills .nav-link {
  color: var(--mushin-text-secondary);
}
[data-bs-theme='dark'] .nav-pills .nav-link.active {
  background-color: var(--mushin-primary);
  color: #14110C;
}

[data-bs-theme='dark'] .nav-tabs {
  border-color: var(--mushin-border);
}
[data-bs-theme='dark'] .nav-tabs .nav-link {
  color: var(--mushin-text-secondary);
  border-color: transparent;
}
[data-bs-theme='dark'] .nav-tabs .nav-link:hover {
  border-color: transparent;
  color: var(--mushin-text);
}
[data-bs-theme='dark'] .nav-tabs .nav-link.active {
  background-color: transparent;
  border-color: transparent transparent var(--mushin-primary);
  border-bottom-width: 2px;
  color: var(--mushin-primary);
}

/* ── Modales ─────────────────────────────────────────────────────────────── */
[data-bs-theme='dark'] .modal-content {
  background-color: var(--mushin-surface);
  border: 1px solid var(--mushin-border);
}

/* ── FullCalendar (pages/admin/calendario.js) ────────────────────────────
   FullCalendar no sabe nada de data-bs-theme — trae su propio tema claro por
   defecto (fondo blanco, "hoy" en amarillo pálido). Se tematiza vía sus
   propias variables CSS (documentadas por FullCalendar) más algunos
   selectores directos como respaldo, sin tocar la config de calendario.js. */
[data-bs-theme='dark'] .fc {
  --fc-border-color: var(--mushin-border);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--mushin-surface-soft);
  --fc-neutral-text-color: var(--mushin-text-secondary);
  --fc-today-bg-color: rgba(229, 185, 143, 0.08);
  --fc-highlight-color: rgba(229, 185, 143, 0.15);
  --fc-now-indicator-color: var(--mushin-primary);
  --fc-list-event-hover-bg-color: var(--mushin-surface-soft);
  --fc-button-text-color: var(--mushin-text);
  --fc-button-bg-color: var(--mushin-surface-soft);
  --fc-button-border-color: var(--mushin-border);
  --fc-button-hover-bg-color: var(--mushin-surface);
  --fc-button-hover-border-color: var(--mushin-primary);
  --fc-button-active-bg-color: var(--mushin-primary);
  --fc-button-active-border-color: var(--mushin-primary);
  color: var(--mushin-text);
}

/* Respaldo directo por si algún elemento no lee las variables de arriba. */
[data-bs-theme='dark'] .fc .fc-col-header-cell,
[data-bs-theme='dark'] .fc .fc-scrollgrid,
[data-bs-theme='dark'] .fc .fc-daygrid-day,
[data-bs-theme='dark'] .fc .fc-timegrid-slot,
[data-bs-theme='dark'] .fc .fc-timegrid-axis,
[data-bs-theme='dark'] .fc .fc-list-day-cushion {
  background-color: transparent;
  border-color: var(--mushin-border);
}
[data-bs-theme='dark'] .fc .fc-col-header-cell-cushion,
[data-bs-theme='dark'] .fc .fc-timegrid-axis-cushion,
[data-bs-theme='dark'] .fc .fc-timegrid-slot-label-cushion {
  color: var(--mushin-text-secondary);
}
[data-bs-theme='dark'] .fc .fc-daygrid-day-number {
  color: var(--mushin-text);
}
[data-bs-theme='dark'] .fc-theme-standard .fc-scrollgrid,
[data-bs-theme='dark'] .fc-theme-standard td,
[data-bs-theme='dark'] .fc-theme-standard th {
  border-color: var(--mushin-border);
}

/* ── Spinners ────────────────────────────────────────────────────────────── */
[data-bs-theme='dark'] .spinner-border.text-primary,
[data-bs-theme='dark'] .spinner-border.text-secondary {
  color: var(--mushin-primary) !important;
}

/* ── Etiquetas de categoría y estado ─────────────────────────────────────────
   Antes cada página definía las suyas con colores pensados para fondo claro
   (rosado/lila pálido), que en el tema oscuro no se leían. Ahora viven solo
   aquí, con la paleta de styles/landing.css (--mushin-cat-*, --mushin-estado-*):
   fondo oscuro con tinte y texto del mismo color. `.badge.x` le gana a la regla
   de color blanco que Bootstrap pone a todo .badge. */
[data-bs-theme='dark'] .badge.badge-latino {
  background: var(--mushin-cat-latino-bg);
  color: var(--mushin-cat-latino);
}
[data-bs-theme='dark'] .badge.badge-urbano {
  background: var(--mushin-cat-urbano-bg);
  color: var(--mushin-cat-urbano);
}
[data-bs-theme='dark'] .badge.badge-cueca,
[data-bs-theme='dark'] .badge.badge-invitado {
  background: var(--mushin-cat-cueca-bg);
  color: var(--mushin-cat-cueca);
}
[data-bs-theme='dark'] .badge.badge-matriculado,
[data-bs-theme='dark'] .badge.badge-confirmado,
[data-bs-theme='dark'] .badge.badge-pagado {
  background: var(--mushin-estado-ok-bg);
  color: var(--mushin-success);
}
[data-bs-theme='dark'] .badge.badge-pendiente,
[data-bs-theme='dark'] .badge.badge-sin-confirmar {
  background: var(--mushin-estado-pendiente-bg);
  color: var(--mushin-warning);
}
[data-bs-theme='dark'] .badge.badge-parcial {
  background: var(--mushin-estado-alerta-bg);
  color: var(--mushin-estado-alerta);
}
[data-bs-theme='dark'] .badge.badge-no_matriculado {
  background: var(--mushin-estado-error-bg);
  color: var(--mushin-danger);
}
[data-bs-theme='dark'] .badge.badge-no_fue {
  background: var(--mushin-estado-neutro-bg);
  color: var(--mushin-text-secondary);
}
[data-bs-theme='dark'] .badge.badge-sala1 {
  background: rgba(129, 140, 248, 0.16);
  color: #A5B4FC;
}
[data-bs-theme='dark'] .badge.badge-sala2 {
  background: rgba(56, 189, 248, 0.14);
  color: #7DD3FC;
}

/* Encabezados oscuros de modales y barras (antes azul #1a1a2e fijo en cada página) */
[data-bs-theme='dark'] .mushin-header {
  background: var(--mushin-header-bg);
  color: var(--mushin-text);
  border-bottom: 1px solid var(--mushin-header-border);
}

/* Botón con borde dorado: transparente hasta pasar el mouse, para que nunca
   parezca "ya elegido" (Bootstrap lo deja en su azul por defecto). */
[data-bs-theme='dark'] .btn-outline-primary {
  color: var(--mushin-primary);
  background-color: transparent;
  border-color: var(--mushin-primary);
}
[data-bs-theme='dark'] .btn-outline-primary:hover,
[data-bs-theme='dark'] .btn-outline-primary:active,
[data-bs-theme='dark'] .btn-outline-primary.active {
  color: #14110C;
  background-color: var(--mushin-primary);
  border-color: var(--mushin-primary);
}