/* ==========================================================================
   Modo oscuro.

   Las páginas usan clases de Tailwind de modo claro (bg-white, text-gray-800,
   border-gray-100...). En vez de agregar dark: a cientos de elementos, aquí se
   reasignan esas mismas clases cuando <html> tiene la clase "dark".

   Especificidad: "html.dark .clase" le gana a ".clase" y a ".hover\:clase:hover"
   de Tailwind; por eso cada hover: que se usa también tiene su versión aquí
   (si no, el color base oscuro taparía el hover).

   Si una pantalla nueva usa un color que no está aquí, se verá en claro:
   agrégalo en la sección que le toque.
   ========================================================================== */

html.dark {
    color-scheme: dark;

    /* Grises carbón neutros, derivados del #1E2226 de la marca (sin tinte azul). */
    --o-fondo: #141619;       /* bg-gray-50: fondo de página */
    --o-superficie: #1E2226;  /* bg-white: tarjetas, paneles */
    --o-elevada: #262a2f;     /* bg-gray-100, hovers suaves */
    --o-hover: #2d3237;
    --o-borde-1: #2a2e33;     /* border-gray-100 */
    --o-borde-2: #33383e;     /* border-gray-200 */
    --o-borde-3: #434950;     /* border-gray-300 */

    --o-t900: #f4f5f6;
    --o-t800: #e4e6e8;
    --o-t700: #c9cdd1;
    --o-t600: #a9afb5;
    --o-t500: #8c939a;
    --o-t400: #6d747b;
    --o-t300: #4f555b;

    --ss-marino: #9cc3e6;
}

html.dark body { background: var(--o-fondo); color: var(--o-t800); }

/* ---------------------------- Superficies ---------------------------- */

html.dark .bg-white { background-color: var(--o-superficie); }
html.dark .bg-gray-50 { background-color: var(--o-fondo); }
html.dark .bg-gray-100 { background-color: var(--o-elevada); }
html.dark .bg-gray-200 { background-color: var(--o-borde-2); }
html.dark .bg-gray-300 { background-color: var(--o-borde-3); }
html.dark .bg-gray-800 { background-color: #334155; }

/* Tarjetas dentro de tarjetas (bg-gray-50 dentro de bg-white) no deben hundirse
   al color del fondo de página. */
html.dark :is(.bg-white, .bg-gray-50) .bg-gray-50 { background-color: var(--o-elevada); }

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-100\/70:hover { background-color: var(--o-hover); }
html.dark .hover\:bg-gray-900:hover { background-color: #475569; }
html.dark .focus\:bg-white:focus { background-color: var(--o-superficie); }
html.dark .disabled\:bg-gray-50:disabled { background-color: var(--o-elevada); }

/* ------------------------------ Bordes ------------------------------ */

html.dark .border-gray-50,
html.dark .border-gray-100 { border-color: var(--o-borde-1); }
html.dark .border-gray-200 { border-color: var(--o-borde-2); }
html.dark .border-gray-300 { border-color: var(--o-borde-3); }
html.dark .border-white { border-color: var(--o-superficie); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--o-borde-1); }
html.dark .ring-white { --tw-ring-color: var(--o-superficie); }

/* ------------------------------ Texto ------------------------------ */

html.dark .text-gray-900 { color: var(--o-t900); }
html.dark .text-gray-800 { color: var(--o-t800); }
html.dark .text-gray-700 { color: var(--o-t700); }
html.dark .text-gray-600 { color: var(--o-t600); }
html.dark .text-gray-500 { color: var(--o-t500); }
html.dark .text-gray-400 { color: var(--o-t400); }
html.dark .text-gray-300 { color: var(--o-t300); }
html.dark .placeholder\:text-gray-400::placeholder,
html.dark ::placeholder { color: var(--o-t400); }
html.dark .disabled\:text-gray-500:disabled { color: var(--o-t500); }

html.dark .hover\:text-gray-700:hover { color: var(--o-t700); }
html.dark .hover\:text-gray-800:hover { color: var(--o-t800); }
html.dark .hover\:text-gray-900:hover { color: var(--o-t900); }

/* --------------------------- Acentos (azul) --------------------------- */

html.dark .bg-blue-50 { background-color: rgb(242 106 33 / .12); }
html.dark .bg-blue-100 { background-color: rgb(242 106 33 / .2); }
html.dark .border-blue-50 { border-color: rgb(242 106 33 / .15); }
html.dark .border-blue-200 { border-color: rgb(242 106 33 / .35); }
html.dark .hover\:border-blue-200:hover { border-color: rgb(242 106 33 / .45); }
html.dark .text-blue-600 { color: #ff8a4c; }
html.dark .text-blue-700 { color: #ffa270; }
html.dark .text-blue-800 { color: #ffc8a6; }
html.dark .hover\:text-blue-600:hover { color: #ffb58a; }
html.dark .hover\:text-blue-700:hover { color: #ffb58a; }
html.dark .file\:bg-blue-50::file-selector-button { background-color: rgb(242 106 33 / .15); }
html.dark .file\:text-blue-700::file-selector-button { color: #ffb58a; }
html.dark .hover\:file\:bg-blue-100:hover::file-selector-button { background-color: rgb(242 106 33 / .25); }

/* --------------------- Estados (rojo, verde, ámbar) --------------------- */

html.dark .bg-red-50 { background-color: rgb(239 68 68 / .1); }
html.dark .bg-red-100 { background-color: rgb(239 68 68 / .18); }
html.dark .border-red-200 { border-color: rgb(239 68 68 / .35); }
html.dark .hover\:bg-red-50:hover { background-color: rgb(239 68 68 / .15); }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-red-700,
html.dark .text-red-800 { color: #fca5a5; }
html.dark .hover\:text-red-600:hover,
html.dark .hover\:text-red-700:hover,
html.dark .hover\:text-red-800:hover { color: #fecaca; }

html.dark .bg-green-50 { background-color: rgb(34 197 94 / .1); }
html.dark .bg-green-100 { background-color: rgb(34 197 94 / .18); }
html.dark .border-green-200 { border-color: rgb(34 197 94 / .35); }
html.dark .hover\:bg-green-100:hover { background-color: rgb(34 197 94 / .25); }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-green-700,
html.dark .text-green-800 { color: #86efac; }
html.dark .hover\:text-green-700:hover { color: #bbf7d0; }

html.dark .bg-amber-50 { background-color: rgb(245 158 11 / .1); }
html.dark .bg-amber-100 { background-color: rgb(245 158 11 / .18); }
html.dark .border-amber-100 { border-color: rgb(245 158 11 / .2); }
html.dark .border-amber-200 { border-color: rgb(245 158 11 / .35); }
html.dark .border-amber-300 { border-color: rgb(245 158 11 / .45); }
html.dark .hover\:bg-amber-100:hover { background-color: rgb(245 158 11 / .25); }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 { color: #fcd34d; }

html.dark .bg-purple-100 { background-color: rgb(168 85 247 / .2); }
html.dark .text-purple-800 { color: #d8b4fe; }

/* ------------------------- Colores de la marca ------------------------- */

/* El botón carbón se perdería sobre el fondo oscuro: en oscuro va en naranja.
   Solo botones: el panel carbón del login debe seguir carbón. */
html.dark .text-\[\#1E2226\] { color: #ffffff; }
html.dark button.bg-\[\#1E2226\] { background-color: #F26A21; }
html.dark button.hover\:bg-\[\#F26A21\]:hover { background-color: #ff7d36; }

/* Panel del login en oscuro: un tono más claro que el fondo para que se distinga. */
html.dark .ss-sobre-carbon { background-color: #1E2226; border-right: 1px solid var(--o-borde-1); }

/* ---------------------------- Controles ---------------------------- */

html.dark :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]) {
    background-color: var(--o-elevada);
    color: var(--o-t900);
    border-color: var(--o-borde-2);
}
html.dark :is(input, select, textarea):focus { background-color: var(--o-superficie); }
html.dark option { background-color: var(--o-superficie); color: var(--o-t800); }

/* Sombras: en oscuro las grises no se ven; se oscurecen. */
html.dark .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .4); }
html.dark .shadow-xl,
html.dark .shadow-2xl { --tw-shadow: 0 20px 40px -12px rgb(0 0 0 / .7); }

/* Esqueletos de carga */
html.dark .ss-skel { background: var(--o-hover); }
html.dark .ss-skel::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .06), transparent); }

/* Tarjetas que se levantan */
html.dark .ss-page a.rounded-xl.bg-white:hover,
html.dark .ss-page a.rounded-lg.border:hover,
html.dark .ss-lift:hover { box-shadow: 0 12px 28px -10px rgb(0 0 0 / .8); }

/* Barra de scroll */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb { background: var(--o-borde-3); border-radius: 10px; border: 2px solid var(--o-fondo); }

/* ---------------------------- SweetAlert2 ---------------------------- */

html.dark .swal2-popup { background: var(--o-superficie); color: var(--o-t800); }
html.dark .swal2-title { color: var(--o-t900); }
html.dark .swal2-html-container { color: var(--o-t600); }
html.dark .swal2-input,
html.dark .swal2-textarea,
html.dark .swal2-select { background: var(--o-elevada); color: var(--o-t900); border-color: var(--o-borde-2); }
html.dark .swal2-confirm { background-color: #F26A21 !important; }

/* Al cambiar de tema, los colores cruzan suave en vez de parpadear. */
html.tema-cambiando,
html.tema-cambiando * {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease !important;
}