@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================================
   REGLAS GLOBALES DE ALTO CONTRASTE PARA MODO OSCURO (DARK)
   ======================================================== */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0B0F19;
    color: #F8FAFC;
}

/* Títulos y Encabezados Nítidos */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6 {
    color: #FFFFFF !important;
}

/* Colores de Texto con Alto Contraste */
html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: #F8FAFC !important;
}

html.dark .text-gray-700 {
    color: #E2E8F0 !important;
}

html.dark .text-gray-600 {
    color: #CBD5E1 !important;
}

html.dark .text-gray-500 {
    color: #94A3B8 !important;
}

/* Inputs, Selects y Textareas Legibles en Modo Oscuro */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
    background-color: #1E293B !important;
    color: #FFFFFF !important;
    border-color: #334155 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94A3B8 !important;
}

/* Tarjetas y Contenedores */
html.dark .bg-white {
    background-color: #0F172A !important;
    border-color: #1E293B !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-\[\#f8f9fa\],
html.dark .bg-\[\#f1f3f5\] {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

/* Divisores y Bordes */
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .border-gray-200,
html.dark .border-gray-100 {
    border-color: #1E293B !important;
}

html.dark tr:hover {
    background-color: rgba(30, 41, 59, 0.7) !important;
}