/* ============================= */
/* TEMA OSCURO/CLARO - CSS PERSONALIZADO */
/* ============================= */

/* LIGHT MODE (por defecto) — Grafito neutro */
:root {
    --bg-primary: #f4f4f5;
    --bg-secondary: #e4e4e7;
    --bg-tertiary: #d4d4d8;
    --text-primary: #18181b;
    --text-secondary: #3f3f46;
    --text-tertiary: #52525b;
    --border-color: #d4d4d8;
    --section-bg: #f4f4f5;
    --section-bg-alt: #e4e4e7;
    --card-bg: rgba(255, 255, 255, 0.85);
    --modal-bg: #ffffff;
    --input-bg: #fafafa;
    --input-border: #d4d4d8;
    --input-focus: #71717a;
    --button-bg: #18181b;
    --button-hover: #3f3f46;
}

/* DARK MODE */
html.dark {
    --bg-primary: #18181b;
    --bg-secondary: #27272a;
    --bg-tertiary: #3f3f46;
    --text-primary: #ffffff;
    --text-secondary: #d4d4d8;
    --text-tertiary: #a1a1aa;
    --border-color: #3f3f46;
    --section-bg: #18181b;
    --card-bg: rgba(39, 39, 42, 0.8);
    --modal-bg: #27272a;
    --input-bg: #3f3f46;
    --input-border: #52525b;
    --input-focus: #52525b;
    --button-bg: #27272a;
    --button-hover: #3f3f46;
}

/* ============================= */
/* APLICAR ESTILOS SEGÚN TEMA */
/* ============================= */

html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    background-color: var(--section-bg) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html {
    background-color: var(--bg-primary);
}

/* SECTION — el fondo lo controla cada componente (p.ej. .cell del bento) */
section {
    background-color: transparent;
    color: var(--text-primary);
}

/* TARJETAS */
.bg-white {
    background-color: var(--card-bg) !important;
}

.bg-white\/80 {
    background-color: var(--card-bg) !important;
}

/* HEADER */
header {
    background-color: transparent;
}

/* BOTONES */
button {
    transition: all 0.3s ease;
}

.bg-gray-700 {
    background-color: var(--button-bg) !important;
}

.bg-gray-700:hover {
    background-color: var(--button-hover) !important;
}

/* INPUTS */
input[type="email"],
input[type="password"],
input[type="text"] {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.1) !important;
}

/* TEXTOS */
.text-gray-900 {
    color: var(--text-primary) !important;
}

.text-gray-700 {
    color: var(--text-secondary) !important;
}

.text-gray-600 {
    color: var(--text-secondary) !important;
}

.text-gray-400 {
    color: var(--text-tertiary) !important;
}

/* BORDES */
.border-gray-200,
.border-gray-100 {
    border-color: var(--border-color) !important;
}

/* FONDO DEL MODAL */
.bg-white.dark\:bg-gray-800 {
    background-color: var(--modal-bg) !important;
}

/* TRANSICIONES */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Asegurar que Tailwind dark mode funciona correctamente */
html.dark {
    color-scheme: dark;
}

html {
    color-scheme: light;
}
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}