/* ============================================================================
   spa-dark.css — Re-tematización dark de la SPA compilada (index.html)
   ----------------------------------------------------------------------------
   La home es un build de Vite/React (assets/index-*.css) cuyo código fuente no
   está en este repo, por lo que no se puede recompilar con el tema oscuro.
   Esta capa se carga DESPUÉS del CSS del build y remapea sus utilidades claras
   de Tailwind a la paleta del sitio (tokens --tt-* de /css/theme.css).

   ⚠️ Archivo transitorio: cuando el proyecto React se recompile con la paleta
   dark, borrar este archivo y su <link> en index.html.

   Solo se sobreescriben las clases que EXISTEN en el build actual (inventario
   hecho sobre assets/index-4U0Dizlx.css). Si se sube un build nuevo, repasar.
   ============================================================================ */

/* --- Superficies: blanco / grises claros → paleta navy --- */
.bg-white          { background-color: var(--tt-bg); }
.bg-white\/95      { background-color: rgba(10, 22, 40, .95); } /* navbar sticky */
.bg-gray-50        { background-color: var(--tt-card); }
.bg-gray-100       { background-color: var(--tt-card-2); }
.hover\:bg-gray-50:hover  { background-color: var(--tt-card); }
.hover\:bg-gray-100:hover { background-color: var(--tt-card-2); }
.hover\:bg-gray-200:hover { background-color: var(--tt-border); }

/* --- Texto: tinta oscura → tinta clara --- */
/* El build usa el navy de marca como tinta sobre fondo claro (clase arbitraria
   text-[#0a1628]); sobre el fondo dark pasa a ser tinta blanca. */
.text-\[\#0a1628\] { color: var(--tt-ink); }
.text-gray-900     { color: var(--tt-ink); }
.text-gray-700,
.text-gray-600     { color: var(--tt-body); }
.text-gray-500     { color: var(--tt-muted); }
.hover\:text-gray-900:hover { color: var(--tt-ink); }

/* --- Bordes claros → líneas suaves --- */
.border-gray-100,
.border-gray-200,
.border-gray-300   { border-color: var(--tt-line); }

/* --- Botón secundario claro del hero (bg-white + tinta navy) → botón ghost ---
   Con bg-white remapeado a navy quedaba navy-sobre-navy (invisible). El inset
   ring evita mover el layout (no agrega borde real). */
.bg-white.text-\[\#0a1628\] {
  background-color: rgba(255, 255, 255, .08);
  color: var(--tt-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.bg-white.text-\[\#0a1628\]:hover { background-color: rgba(255, 255, 255, .16); }

/* --- Acento teal: tonos "sobre fondo claro" → tonos "sobre fondo oscuro" --- */
/* En claro el hover oscurecía el teal; en dark debe aclararlo. */
.hover\:text-\[\#159a93\]:hover { color: #5eead4; }
.text-teal-500     { color: #2dd4bf; }
.text-teal-600     { color: #2dd4bf; }
.text-teal-700     { color: #5eead4; }
.text-teal-800     { color: #99f6e4; }
.text-teal-900     { color: #ccfbf1; }
.bg-teal-50,
.bg-teal-100,
.hover\:bg-teal-50:hover { background-color: var(--tt-teal-tint); }
.border-teal-100,
.border-teal-200   { border-color: rgba(24, 179, 171, .35); }

/* --- Campos de formulario (registro-mentor, solicitar-mentor) ---
   El build no les pone bg-*: quedaban con el blanco default del navegador y,
   con la tinta clara del re-tema encima, el texto tipeado era invisible
   (blanco sobre blanco). Se llevan al estilo de formulario del sitio
   (mismo look que .form-input de theme.css). */
input.border-gray-300,
select.border-gray-300,
textarea.border-gray-300 {
  background-color: var(--tt-card-2);
  color: var(--tt-ink);
  border-color: var(--tt-border);
  color-scheme: dark; /* widgets nativos (date, number, select) en dark */
}
input.border-gray-300::placeholder,
textarea.border-gray-300::placeholder { color: var(--tt-faint); }
select.border-gray-300 option {
  background-color: var(--tt-card-2);
  color: var(--tt-ink);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--tt-teal); }

/* --- Chips/avisos teñidos: pastel claro → tinte translúcido + texto claro --- */
.bg-red-50, .bg-red-100       { background-color: rgba(239, 68, 68, .15); }
.text-red-600                 { color: #f87171; }
.text-red-700                 { color: #fca5a5; }
.text-red-800                 { color: #fecaca; }
.border-red-200               { border-color: rgba(239, 68, 68, .35); }

.bg-amber-50, .bg-amber-100   { background-color: rgba(245, 158, 11, .15); }
.text-amber-600               { color: #fbbf24; }
.text-amber-700               { color: #fcd34d; }
.text-amber-800               { color: #fde68a; }
.text-amber-900               { color: #fef3c7; }
.border-amber-200,
.border-amber-300,
.border-amber-400             { border-color: rgba(245, 158, 11, .4); }

.bg-green-50, .bg-green-100   { background-color: rgba(34, 197, 94, .15); }
.text-green-600               { color: #4ade80; }
.text-green-700               { color: #86efac; }
.text-green-800               { color: #bbf7d0; }
.border-green-200             { border-color: rgba(34, 197, 94, .35); }

.bg-blue-50, .bg-blue-100     { background-color: rgba(59, 130, 246, .15); }
.text-blue-600                { color: #93c5fd; }
.border-blue-200              { border-color: rgba(59, 130, 246, .35); }

.bg-purple-100                { background-color: rgba(168, 85, 247, .18); }
.text-purple-600              { color: #d8b4fe; }
.border-purple-200            { border-color: rgba(168, 85, 247, .35); }

.bg-yellow-50, .bg-yellow-100 { background-color: rgba(234, 179, 8, .15); }
.text-yellow-600              { color: #fde047; }
.border-yellow-200            { border-color: rgba(234, 179, 8, .35); }

.text-orange-600              { color: #fdba74; }
.border-orange-200            { border-color: rgba(251, 146, 60, .35); }

/* --- Gradientes decorativos claros → superficies navy ---
   Mismo formato de variables que genera Tailwind v3 en el build. */
.from-amber-50,
.from-blue-50,
.from-green-50,
.from-orange-50,
.from-purple-50 {
  --tw-gradient-from: #0f1f3a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 31 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(10 22 40 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0a1628 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-white   { --tw-gradient-to: #0a1628 var(--tw-gradient-to-position); }
.to-teal-50 { --tw-gradient-to: #10283f var(--tw-gradient-to-position); }