/* evalleserp/css/contrast.css
   Ajustes de contraste para tema claro (bg-slate-100 / superficies blancas).
   Objetivo: que encabezados (Card 1/3/4) y etiquetas sean legibles en blanco,
   sin romper el tema oscuro/neo cuando se use.
*/

:root{
  --ev-ink: #0f172a;          /* slate-900 */
  --ev-ink-2:#1f2937;         /* gray-800 */
  --ev-muted-strong:#334155;  /* slate-700 */
  --ev-brand:#6d28d9;         /* violeta intenso */
  --ev-brand-2:#4f46e5;       /* indigo 600 */
}

/* Solo aplica cuando el body está en modo claro (como en tu index actual) */
body.bg-slate-100{
  color: var(--ev-ink);
}

/* Encabezados de secciones dentro de cards blancas */
body.bg-slate-100 .bg-white.rounded-xl h3{
  color: var(--ev-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

/* El “chip” del número (1/3/4) dentro del h3: más contraste */
body.bg-slate-100 .bg-white.rounded-xl h3 > span{
  background: linear-gradient(135deg, var(--ev-brand-2), var(--ev-brand)) !important;
  color: #fff !important;
  border: 1px solid rgba(15,23,42,.15) !important;
  box-shadow: 0 8px 18px rgba(109,40,217,.20);
}

/* Si el h3 viene con texto azul/indigo muy pálido, lo forzamos a tinta */
body.bg-slate-100 h3[class*="text-indigo"],
body.bg-slate-100 h3[class*="text-blue"],
body.bg-slate-100 h3[class*="text-sky"]{
  color: var(--ev-ink) !important;
}

/* Etiquetas de formularios: subir el contraste (muchas estaban slate-500 muy claras) */
body.bg-slate-100 label,
body.bg-slate-100 .label,
body.bg-slate-100 .field-label{
  color: var(--ev-muted-strong) !important;
}

/* Subtítulos pequeños dentro de cards (ej: “CONFIGURACIÓN DEL SERVICIO”) */
body.bg-slate-100 .bg-white.rounded-xl .text-slate-400,
body.bg-slate-100 .bg-white.rounded-xl .text-slate-500{
  color: var(--ev-muted-strong) !important;
}

/* Mantener el acento violeta de la línea superior de cada card visible */
body.bg-slate-100 .bg-gradient-to-r.from-indigo-500.to-purple-600{
  filter: saturate(1.15) contrast(1.05);
}

/* Inputs/Selects/Textareas: en modo claro el navegador reduce el contraste cuando están
   disabled/readonly (texto “lavado”). Forzamos legibilidad manteniendo color y opacidad. */
body.bg-slate-100 input,
body.bg-slate-100 select,
body.bg-slate-100 textarea{
  color: #111827; /* slate-900 */
  -webkit-text-fill-color: #111827;
}

body.bg-slate-100 input::placeholder,
body.bg-slate-100 textarea::placeholder{
  color: #64748b; /* slate-500 */
  opacity: 1;
}

body.bg-slate-100 select{
  color: #111827;
}

body.bg-slate-100 input[readonly],
body.bg-slate-100 textarea[readonly],
body.bg-slate-100 select[readonly],
body.bg-slate-100 input:disabled,
body.bg-slate-100 textarea:disabled,
body.bg-slate-100 select:disabled{
  opacity: 1 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background-color: #f8fafc; /* slate-50 */
}

/* Por si alguna clase utilitaria deja el texto gris muy claro en campos del formulario */
body.bg-slate-100 .text-slate-300,
body.bg-slate-100 .text-slate-200,
body.bg-slate-100 .text-slate-400{
  color: #111827 !important;
}