/* DentCo — Modo oscuro global (html.dark) */

/* ── Badges de rol (modo claro) ── */
.role-badge-admin { background-color: #fceef4; color: #d64c81; }
.role-badge-rrhh { background-color: #eef8f8; color: #5aabae; }
.role-badge-afiliado { background-color: #eff6ff; color: #3b82f6; }
.role-badge-comercio { background-color: #fffbeb; color: #d97706; }
.role-badge-default { background-color: #f3f4f6; color: #6b7280; }

html.dark {
    color-scheme: dark;
    --dm-bg: #0f1417;
    --dm-surface: #1a2226;
    --dm-surface-2: #232d33;
    --dm-surface-3: #2a353b;
    --dm-surface-4: #323e45;
    --dm-border: #2a353b;
    --dm-text: #e5e7eb;
    --dm-text-secondary: #9ca3af;
    --dm-text-muted: #7d8890;
    --dm-text-faint: #6b757c;
}

/* ── Base ── */
html.dark body {
    background-color: var(--dm-bg);
    color: #d1d5db;
}

/* ── Superficies ── */
html.dark .bg-white { background-color: var(--dm-surface) !important; }
html.dark .bg-dentco_bg { background-color: var(--dm-bg) !important; }
html.dark .bg-gray-50 { background-color: var(--dm-surface-2) !important; }
html.dark .bg-gray-100 { background-color: var(--dm-surface-3) !important; }
html.dark .bg-gray-200 { background-color: var(--dm-surface-4) !important; }
html.dark .bg-gray-300 { background-color: #3d4a52 !important; }
html.dark .bg-gray-900\/40 { background-color: rgba(0, 0, 0, 0.65) !important; }

/* Fondos semánticos claros → equivalentes oscuros */
html.dark .bg-red-50 { background-color: #2d1a1c !important; }
html.dark .bg-red-100 { background-color: #3d2226 !important; }
html.dark .bg-green-50 { background-color: #142820 !important; }
html.dark .bg-teal-50 { background-color: #142428 !important; }
html.dark .bg-amber-50 { background-color: #2a2414 !important; }
html.dark .bg-blue-50 { background-color: #1a2332 !important; }
html.dark .bg-\[\#fceef4\] { background-color: #2d1a24 !important; }
html.dark .bg-\[\#eef8f8\] { background-color: #142428 !important; }

/* Botón "Actualizar contraseña" usa bg-dentco_text (#4a4a4a) — invisible en oscuro */
html.dark .bg-dentco_text {
    background-color: #4a8a8c !important;
    color: #ffffff !important;
}

/* ── Bordes ── */
html.dark .border { border-color: var(--dm-border) !important; }
html.dark .border-gray-50 { border-color: var(--dm-surface-2) !important; }
html.dark .border-gray-100 { border-color: var(--dm-border) !important; }
html.dark .border-gray-200 { border-color: var(--dm-surface-4) !important; }
html.dark .border-gray-300 { border-color: #4b5563 !important; }
html.dark .border-red-100 { border-color: #4b2226 !important; }
html.dark .border-green-100 { border-color: #1e3a2f !important; }
html.dark .border-amber-100 { border-color: #4a3a1a !important; }
html.dark .border-white,
html.dark .after\:border-white::after { border-color: var(--dm-surface-4) !important; }

/* ── Texto ── */
html.dark .text-dentco_text { color: var(--dm-text) !important; }
html.dark .text-gray-600 { color: #a8b0b6 !important; }
html.dark .text-gray-500 { color: var(--dm-text-secondary) !important; }
html.dark .text-gray-400 { color: var(--dm-text-muted) !important; }
html.dark .text-gray-300 { color: var(--dm-text-faint) !important; }
html.dark .text-red-400 { color: #fca5a5 !important; }
html.dark .text-red-500 { color: #f87171 !important; }
html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .text-green-500 { color: #4ade80 !important; }
html.dark .text-blue-500 { color: #60a5fa !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .text-orange-400 { color: #fb923c !important; }
html.dark .text-yellow-500 { color: #eab308 !important; }
html.dark .text-emerald-500 { color: #34d399 !important; }

/* Colores de marca: mantener legibles */
html.dark .text-dentco_teal { color: #8fd4d6 !important; }
html.dark .text-dentco_pink { color: #e879a8 !important; }

/* ── Formularios ── */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark select:focus,
html.dark textarea:focus,
html.dark .focus\:bg-white:focus {
    background-color: var(--dm-surface-3) !important;
    border-color: #7cc1c3 !important;
    color: var(--dm-text) !important;
    outline: none !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--dm-text-faint) !important;
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--dm-surface-2) inset !important;
    -webkit-text-fill-color: var(--dm-text) !important;
    caret-color: var(--dm-text);
}

html.dark input[type="checkbox"] {
    background-color: var(--dm-surface-2) !important;
    border-color: #4b5563 !important;
    accent-color: #7cc1c3;
}

html.dark input[type="checkbox"]:checked {
    background-color: #7cc1c3 !important;
    border-color: #7cc1c3 !important;
}

html.dark select option {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

html.dark select option:checked,
html.dark select option:hover {
    background-color: #2d4a4c !important;
    color: #8fd4d6 !important;
}

html.dark .dentco-multi-select {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark .dentco-multi-select option:checked {
    background: #2d4a4c !important;
    color: #8fd4d6 !important;
}

/* ── Hover ── */
html.dark .hover\:bg-gray-50:hover { background-color: var(--dm-surface-2) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: var(--dm-surface-3) !important; }
html.dark .hover\:bg-white:hover { background-color: #1f282d !important; }
html.dark .hover\:bg-red-100:hover { background-color: #3d2226 !important; }
html.dark .hover\:bg-gray-800:hover { background-color: #5aabae !important; }

/* ── Sombras ── */
html.dark .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ── Chrome de layout ── */
html.dark header {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark aside {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dm-border) !important;
}

/* ── Logo en header ── */
html.dark header img[alt="Logo"],
html.dark .dentco-logo {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* ── Toggle modo oscuro ── */
html.dark #darkModeToggle + span + span {
    background-color: #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* ── Banners de feedback ── */
html.dark .dentco-banner-error {
    background-color: #2d1a1c !important;
    border-color: #4b2226 !important;
    color: #f87171 !important;
}

html.dark .dentco-banner-success {
    background-color: #142820 !important;
    border-color: #1e3a2f !important;
    color: #4ade80 !important;
}

/* ── Badges de rol ── */
html.dark .role-badge-admin { background-color: #2d1a24 !important; color: #e879a8 !important; }
html.dark .role-badge-rrhh { background-color: #142428 !important; color: #8fd4d6 !important; }
html.dark .role-badge-afiliado { background-color: #1a2332 !important; color: #60a5fa !important; }
html.dark .role-badge-comercio { background-color: #2a2414 !important; color: #fbbf24 !important; }
html.dark .role-badge-default { background-color: var(--dm-surface-3) !important; color: var(--dm-text-secondary) !important; }

/* ── Íconos de actividad ── */
html.dark .activity-icon-wrap {
    background-color: var(--dm-surface-2) !important;
}

/* ── Medidor de fortaleza de contraseña ── */
html.dark .strength-track {
    background-color: var(--dm-surface-3) !important;
}

/* ── Otras páginas del portal ── */
html.dark {
    --dentco-border: var(--dm-border);
    --dentco-surface: var(--dm-surface);
}

html.dark .dl-widget,
html.dark .dentco-card {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}

html.dark .dl-widget-body,
html.dark .dl-filter-bar {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark .dl-stat-row {
    border-color: var(--dm-border) !important;
}

html.dark .dl-stat-num,
html.dark .dl-metric-big {
    color: var(--dm-text) !important;
}

html.dark table thead tr.bg-gray-50 {
    background-color: var(--dm-surface-2) !important;
}

html.dark .mobile-modal-panel,
html.dark [class*="rounded-\[2rem\]"].bg-white,
html.dark [class*="rounded-\[3rem\]"].bg-white {
    background-color: var(--dm-surface) !important;
}

html.dark .bg-amber-50 {
    background-color: #2a2414 !important;
}

html.dark .text-amber-800 {
    color: #fbbf24 !important;
}

html.dark .border-amber-100 {
    border-color: #4a3a1a !important;
}

/* ── Transiciones suaves ── */
body,
.bg-white,
input,
select,
textarea,
aside,
header,
button {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}