/*
 * Ajuste de contraste para el modo claro del FOP publico.
 * Se carga despues del build React para respetar el diseno base.
 */
html:not(.dark) body:not(.dark) #root {
  color: #0f172a;
}

html:not(.dark) body:not(.dark) #root .bg-white,
html:not(.dark) body:not(.dark) #root .bg-white\/80 {
  color: #0f172a;
}

html:not(.dark) body:not(.dark) #root .bg-white h1,
html:not(.dark) body:not(.dark) #root .bg-white h2,
html:not(.dark) body:not(.dark) #root .bg-white h3,
html:not(.dark) body:not(.dark) #root .bg-white strong,
html:not(.dark) body:not(.dark) #root .bg-white label {
  color: #020617 !important;
}

html:not(.dark) body:not(.dark) #root .bg-white p,
html:not(.dark) body:not(.dark) #root .bg-white .text-slate-300,
html:not(.dark) body:not(.dark) #root .bg-white .text-slate-400,
html:not(.dark) body:not(.dark) #root .bg-white .text-slate-500,
html:not(.dark) body:not(.dark) #root .bg-white .text-slate-600 {
  color: #475569 !important;
}

html:not(.dark) body:not(.dark) #root .bg-white .text-purple-400,
html:not(.dark) body:not(.dark) #root .bg-white .text-purple-600,
html:not(.dark) body:not(.dark) #root .bg-white .text-purple-700 {
  color: #2FB5FF !important;
}

html:not(.dark) body:not(.dark) #root .bg-white .text-rose-400,
html:not(.dark) body:not(.dark) #root .bg-white .text-rose-500,
html:not(.dark) body:not(.dark) #root .bg-white .text-rose-600,
html:not(.dark) body:not(.dark) #root .bg-white .text-rose-700 {
  color: #e11d48 !important;
}

html:not(.dark) body:not(.dark) #root .bg-purple-600,
html:not(.dark) body:not(.dark) #root .bg-purple-700,
html:not(.dark) body:not(.dark) #root .bg-emerald-600,
html:not(.dark) body:not(.dark) #root .bg-emerald-700,
html:not(.dark) body:not(.dark) #root .bg-slate-900,
html:not(.dark) body:not(.dark) #root .bg-slate-800 {
  color: #ffffff !important;
}

html:not(.dark) body:not(.dark) #root input,
html:not(.dark) body:not(.dark) #root select,
html:not(.dark) body:not(.dark) #root textarea {
  color: #0f172a;
}

/* Re-mapeo de la escala purple del bundle a azul de marca. */
:root {
  --color-purple-50: #eef9ff;
  --color-purple-100: #d9f2ff;
  --color-purple-200: #b8e7ff;
  --color-purple-300: #86d8ff;
  --color-purple-400: #4fc3ff;
  --color-purple-500: #2FB5FF;
  --color-purple-600: #2FB5FF;
  --color-purple-700: #148ed1;
  --color-purple-900: #0b4f76;
}

html:not(.dark) body:not(.dark) #root header button,
html:not(.dark) body:not(.dark) #root header a {
  display: none !important;
}

html:not(.dark) body:not(.dark) #root .bg-purple-600,
html:not(.dark) body:not(.dark) #root .bg-purple-700,
html:not(.dark) body:not(.dark) #root .hover\:bg-purple-700:hover {
  background-color: #2FB5FF !important;
  color: #ffffff !important;
}

html:not(.dark) body:not(.dark) #root .bg-purple-50,
html:not(.dark) body:not(.dark) #root .bg-purple-50\/80,
html:not(.dark) body:not(.dark) #root .bg-purple-100,
html:not(.dark) body:not(.dark) #root .hover\:bg-purple-50:hover,
html:not(.dark) body:not(.dark) #root .hover\:bg-purple-100:hover {
  background-color: #eef9ff !important;
}

html:not(.dark) body:not(.dark) #root .border-purple-100,
html:not(.dark) body:not(.dark) #root .border-purple-200,
html:not(.dark) body:not(.dark) #root .border-purple-300,
html:not(.dark) body:not(.dark) #root .focus\:border-purple-600:focus {
  border-color: #b8e7ff !important;
}

html:not(.dark) body:not(.dark) #root .text-purple-400,
html:not(.dark) body:not(.dark) #root .text-purple-600,
html:not(.dark) body:not(.dark) #root .text-purple-700,
html:not(.dark) body:not(.dark) #root .text-purple-900,
html:not(.dark) body:not(.dark) #root .hover\:text-purple-600:hover,
html:not(.dark) body:not(.dark) #root .hover\:text-purple-700:hover,
html:not(.dark) body:not(.dark) #root .hover\:text-purple-900:hover {
  color: #148ed1 !important;
}

html:not(.dark) body:not(.dark) #root .focus\:ring-purple-500:focus {
  --tw-ring-color: #2FB5FF !important;
}