/* Dark Theme for TECMAVE */
body.dark-mode {
    /* Colores base oscuros */
    --bg: #020617 !important;
    --bg-secondary: #020617 !important;
    --bg-tertiary: #020617 !important;

    /* Variables heredadas del tema claro que usan fondos "claros" */
    --light: #020617 !important;
    --light-gray: #020617 !important;
    --medium-gray: #0b1220 !important;
    --transparent-bg: rgba(15, 23, 42, 0.96) !important;
    --transparent-overlay: rgba(15, 23, 42, 0.9) !important;

    /* Panels y texto */
    --panel: #020617 !important;
    --panel-2: #020617 !important;
    --text: #e5e7eb !important;
    --text-light: #9ca3af !important;
    --text-muted: #9ca3af !important;

    /* Bordes y sombras */
    --border: rgba(148, 163, 184, 0.35) !important;
    --border-dark: rgba(148, 163, 184, 0.65) !important;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.95) !important;
    --shadow-lg: 0 40px 120px -20px rgba(0, 0, 0, 1) !important;

    background: var(--bg) !important;
    color: var(--text) !important;
}

/* General components */
body.dark-mode body.dark-mode .card,
body.dark-mode [class*="card"] {
    background: var(--panel) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow);
}

body.dark-mode .card:hover,
body.dark-mode [class*="card"]:hover {
    background: var(--panel-2) !important;
    border-color: var(--border-dark) !important;
}

body.dark-mode .input,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: var(--panel-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

body.dark-mode .input:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--primary) !important;
    background: var(--panel) !important;
    box-shadow: var(--ring);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: var(--text) !important;
}

body.dark-mode a {
    color: var(--primary-light, #fca5a5);
}

/* Header and Navigation */
body.dark-mode .alpha-header,
body.dark-mode body.dark-mode .topbar {
    background: rgba(15, 22, 38, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom-color: var(--border) !important;
}

body.dark-mode .nav-link,
body.dark-mode .nav-phone {
    color: var(--text) !important;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active,
body.dark-mode .nav-phone:hover {
    color: var(--primary) !important;
}

body.dark-mode .brand h1,
body.dark-mode .brand2 span,
body.dark-mode .sidebar .brand span {
     background: linear-gradient(135deg, var(--primary), #e6ebf5) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Sidebar */
body.dark-mode .sidebar {
    background: linear-gradient(180deg, #111a2b, #0f1626) !important;
    border-right-color: var(--border) !important;
}

body.dark-mode .sidebar .nav a {
    color: var(--text-light) !important;
}

body.dark-mode .sidebar .nav a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

body.dark-mode .sidebar .nav a.active {
    background: linear-gradient(135deg, rgba(220,38,38,0.2), rgba(220,38,38,0.1)) !important;
    border: 1px solid rgba(220,38,38,0.4) !important;
    color: white !important;
}

/* Tables */
body.dark-mode .table thead th {
    color: var(--text-light);
    background: rgba(255,255,255,0.05) !important;
    border-bottom-color: var(--border-dark) !important;
}

body.dark-mode .table tbody tr {
    background: transparent !important;
    border-bottom-color: var(--border) !important;
}

body.dark-mode .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Specific Sections */
body.dark-mode .alpha-hero,
body.dark-mode .about-section,
body.dark-mode .video-section,
body.dark-mode .services-alpha,
body.dark-mode .testimonials-section,
body.dark-mode .features-alpha,
body.dark-mode .footer-v2,
body.dark-mode .section {
    background: transparent !important;
}

body.dark-mode .floating-card {
    background: var(--panel) !important;
}

body.dark-mode .hero-badge {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: rgba(220,38,38,0.1) !important;
}

/* Charts */
body.dark-mode .professional-chart {
    background: var(--panel) !important;
    border-color: var(--border) !important;
}
body.dark-mode .chart-title {
    color: var(--text) !important;
}
body.dark-mode .chart-action-btn {
    background: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #fecaca !important;
}

body.dark-mode .kpi-card {
     background: var(--panel) !important;
     border-color: var(--border) !important;
}
body.dark-mode .kpi-value {
    color: var(--text) !important;
}
body.dark-mode .kpi-label {
    color: var(--text-light) !important;
}
body.dark-mode .filters-container {
    background: var(--panel) !important;
    border-color: var(--border) !important;
}
body.dark-mode .filter-group label {
    color: var(--text) !important;
}
body.dark-mode .filter-select {
    background: var(--panel-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
body.dark-mode .modal-content {
    background-color: var(--panel) !important;
    border-color: var(--border) !important;
}
body.dark-mode .close-button {
    color: var(--text-light) !important;
}

/* Chatbot dark mode */
body.dark-mode .chat-window {
    background: var(--panel) !important;
    border-color: var(--border) !important;
}
body.dark-mode .chat-header {
    background-color: var(--primary-dark) !important;
}
body.dark-mode .chat-body {
    background: var(--bg-secondary) !important;
}
body.dark-mode .chat-message.bot {
    background-color: var(--panel-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
body.dark-mode .chat-footer {
    background: var(--panel) !important;
    border-top-color: var(--border) !important;
}
body.dark-mode .chat-footer input {
    background: var(--panel-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}


/* Icon buttons in dark mode (navbar) */
body.dark-mode .iconbtn {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: var(--border-dark) !important;
    color: var(--text) !important;
}
body.dark-mode .iconbtn:hover {
    background: rgba(30, 64, 175, 0.85) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85) !important;
}

/* Sidebar links ligeramente más oscuros cuando no están activos */
body.dark-mode .sidebar .nav a {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: transparent !important;
    color: var(--text-light) !important;
}


/* --- Extra dark overrides for mixed sections --- */

/* Hero principal (la franja súper blanca debajo de "Tu taller hoy") */
body.dark-mode .hero,
body.dark-mode .hero-card,
body.dark-mode .section-hero,
body.dark-mode .hero .card {
    background: #020617 !important;
    color: var(--text) !important;
}

/* Secciones grandes claras dentro del home (banners tipo "TECMAVE") */
body.dark-mode .section,
body.dark-mode .section-alt,
body.dark-mode .section-light {
    background: #020617 !important;
}

/* Cualquier card que use fondos semitransparentes muy claros */
body.dark-mode .kpi,
body.dark-mode .kpi .card,
body.dark-mode .panel-glass,
body.dark-mode .panel-glow {
    background: rgba(15, 23, 42, 0.98) !important;
    color: var(--text) !important;
}

/* Hero de servicios ("Nuestros Servicios") fondo oscuro, cards ya son dark */
body.dark-mode .services-hero,
body.dark-mode .services-wrapper {
    background: #020617 !important;
}

/* Ajuste general para elementos con fondo blanco explícito */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"] {
    background: #020617 !important;
    color: var(--text) !important;
}


/* Contenedor principal sin columnas blancas en dark */
body.dark-mode .container,
body.dark-mode main.container,
body.dark-mode .main > .container {
    background: transparent !important;
}

/* Secciones "section" usan el fondo del layout dark */
body.dark-mode .section,
body.dark-mode .section-alt,
body.dark-mode .section-light {
    background: #020617 !important;
}

/* Tablas en dashboard / clientes / etc. */
body.dark-mode .table {
    background: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85) !important;
}
body.dark-mode .table thead th {
    background: rgba(15, 23, 42, 0.98) !important;
    color: var(--text) !important;
    border-bottom-color: var(--border-dark) !important;
}
body.dark-mode .table tbody tr {
    background: rgba(15, 23, 42, 0.98) !important;
    border-bottom-color: rgba(15, 23, 42, 0.9) !important;
}
body.dark-mode .table tbody tr:hover {
    background: rgba(30, 64, 175, 0.25) !important;
    transform: none !important;
}

/* Footer moderno (footer-v2) más acorde al dark */
body.dark-mode footer.footer-v2,
body.dark-mode .footer-v2 {
    background: radial-gradient(circle at top, rgba(15,23,42,1), #020617) !important;
    color: var(--text) !important;
}
body.dark-mode .footer-v2-main {
    background: transparent !important;
}

/* Texto del footer para que no quede casi invisible */
body.dark-mode .footer-v2,
body.dark-mode .footer-v2 p,
body.dark-mode .footer-v2 a,
body.dark-mode .footer-v2 h4,
body.dark-mode .footer-v2 h5 {
    color: var(--text-light) !important;
}

/* Etiqueta "Gestión" y similares en el sidebar */
body.dark-mode .sidebar .subtle {
    color: var(--text-light) !important;
    background: transparent !important;
}


/* Navbar principal en modo oscuro */
body.dark-mode header {
    background: rgba(15, 23, 42, 0.96) !important;
    border-bottom-color: rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85) !important;
}

/* Cards KPI de "Tu taller hoy" (panel del cliente) */
body.dark-mode #panel-cliente .card {
    background: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95) !important;
}


/* === Tecmave: modo oscuro para panel y estadísticas === */
body.dark-mode .admin-card,
body.dark-mode .stats-kpi-card,
body.dark-mode .admin-dashboard-chart,
body.dark-mode .admin-dashboard-activity,
body.dark-mode .recent-activity-card,
body.dark-mode .top-clientes-card {
    background: var(--panel) !important;
    border-color: var(--border-dark) !important;
    color: var(--text) !important;
}

body.dark-mode .admin-dashboard-chart .chart-header h3,
body.dark-mode .stats-kpi-label,
body.dark-mode .stats-kpi-sub {
    color: var(--text-light) !important;
}

/* Auth (Login / Registro) - modo oscuro */
body.dark-mode .login-v2-body {
    background: radial-gradient(circle at top, #020617 0, #020617 40%, #020617 100%) !important;
}

body.dark-mode .login-v2-container {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

body.dark-mode .login-v2-right,
body.dark-mode .login-v2-form-container,
body.dark-mode .login-v2-form-header,
body.dark-mode .login-v2-form {
    background: transparent !important;
    color: var(--text) !important;
}

body.dark-mode .login-v2-form-header h1,
body.dark-mode .login-v2-form-header p,
body.dark-mode .login-v2-form label {
    color: var(--text) !important;
}

body.dark-mode .login-v2-input-group small {
    color: var(--text-light) !important;
}

/* Botones de auth se mantienen con rojo brand */
body.dark-mode .login-v2-button {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* Fin de overrides específicos de modo oscuro para auth/panel */


/* Tecmave: listas y tablas del panel en modo oscuro */
body.dark-mode .top-clientes-list li {
    background: transparent !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}

body.dark-mode .top-cliente-nombre,
body.dark-mode .top-cliente-monto {
    color: var(--text) !important;
}

body.dark-mode .activity-table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-light) !important;
}

body.dark-mode .activity-table tbody tr {
    background: transparent !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}


/* Forzar fondo oscuro para contenedores de dashboard/estadísticas */
body.dark-mode .stats-page,
body.dark-mode .admin-dashboard,
body.dark-mode .admin-dashboard-row,
body.dark-mode .admin-dashboard-half {
    background: #020617 !important;
}

/* Asegurar que las tarjetas de gráficos nunca usen blanco en dark */
body.dark-mode .admin-dashboard-chart {
    background: #020617 !important;
}