/**
 * Sistema de Diseño Comercial Ultra-Moderno - TEMA LIGHT (DEFAULT) & DARK SOPORTE
 * Renta de Plantas de Luz Toluca & Metepec
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

:root, html.light {
    --bg-light: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-muted: #334155;
    --border-color: #e2e8f0;
    --brand-blue-deep: #0f3b7a;
    --brand-blue: #0284c7;
    --brand-blue-light: #38bdf8;
    --brand-cyan: #00b4d8;
    --brand-dark: #0c1e3a;
    color-scheme: light;
}

html.dark {
    --bg-light: #020617;
    --bg-card: #0f172a;
    --text-primary: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #1e293b;
    --brand-blue-deep: #38bdf8;
    --brand-blue: #0284c7;
    --brand-blue-light: #7dd3fc;
    --brand-cyan: #38bdf8;
    --brand-dark: #020617;
    color-scheme: dark;
}

body {
    background-color: var(--bg-light);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    letter-spacing: -0.025em;
    font-weight: 800;
}

/* Reemplazar monospace borroso por Inter de alta legibilidad para evitar pérdida visual */
.font-mono, .font-mono-tech, code, kbd, samp {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: normal !important;
}

/* Scrollbar Personalizado Limpio */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
html.dark ::-webkit-scrollbar-track {
    background: #0b1120;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}

/* Glassmorphism en Fondos Claro y Oscuro */
.glass-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

html.dark .glass-header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(30, 41, 59, 0.9);
}

.glass-card-light {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

/* Tarjeta Bento Comercial con Luz Suave y Zoom */
.bento-card-light {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.04), 0 2px 6px -2px rgba(15, 23, 42, 0.02);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    cursor: pointer;
}

.bento-card-light:hover {
    transform: translateY(-5px);
    border-color: #0284c7;
    box-shadow: 0 20px 30px -10px rgba(2, 132, 199, 0.22), 0 10px 15px -3px rgba(15, 23, 42, 0.06);
}

.bento-card-light .img-zoom {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card-light:hover .img-zoom {
    transform: scale(1.06);
}

/* Botones con Resplandor Comercial - Tonos de Azul RENTALUZ */
.btn-cta-amber, .btn-cta-blue {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #1e40af 100%);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.4);
    transition: all 0.25s ease;
}

.btn-cta-amber:hover, .btn-cta-blue:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 50%, #1d4ed8 100%);
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.55);
    transform: translateY(-2px);
    color: #ffffff;
}

.btn-cta-outline {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    color: #0f172a;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-cta-outline:hover {
    border-color: #0284c7;
    color: #0284c7;
    background: #f0f9ff;
    transform: translateY(-2px);
}

/* Animación de Pulso Status */
@keyframes status-pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }
}

.pulse-green {
    animation: status-pulse-green 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* Movimiento flotante suave y continuo para la planta en Hero */
@keyframes plant-float-animation {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-14px) rotate(0.4deg);
    }
}

@keyframes plant-shadow-animation {
    0%, 100% {
        transform: scale(1);
        opacity: 0.35;
    }
    50% {
        transform: scale(0.92);
        opacity: 0.22;
    }
}

.plant-floating-motion {
    animation: plant-float-animation 4.5s ease-in-out infinite;
    will-change: transform;
}

.plant-shadow-motion {
    animation: plant-shadow-animation 4.5s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Patrón de fondo geométrico sutil y visible */
.hero-light-backdrop {
    background: radial-gradient(circle at 75% 35%, rgba(245, 158, 11, 0.14) 0%, rgba(2, 132, 199, 0.08) 40%, transparent 70%),
                linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.light-dot-grid {
    background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
    background-size: 24px 24px;
}

/* ============================================================
   Ajuste Cinemático del Video Hero (Encuadre Natural sin Zoom Excesivo)
   ============================================================ */
.hero-video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background-color: #0b1120;
}

#heroBgVideo,
#nosotrosBgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    filter: contrast(1.04) brightness(0.92);
}

@media (min-width: 1024px) {
    #inicio {
        min-height: 96vh;
        max-height: 1080px;
    }
    #heroBgVideo {
        object-position: 55% center;
    }
}

/* ============================================================
   Fondo Fijo (Parallax) Nave Industrial con Planta de Luz
   ============================================================ */
.bg-fixed-nave {
    background-image: url('../images/nave_industrial_planta.jpg');
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@supports (-webkit-touch-callout: none) {
    .bg-fixed-nave {
        background-attachment: scroll;
    }
}

/* ============================================================
   Fondo Cinemático de Dron: Toluca de Noche con Movimiento de Luces
   ============================================================ */
.drone-bg-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background-color: #050814;
}

.drone-bg-image {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-image: url('../images/toluca_dron_noche.jpg');
    background-position: center 40%;
    background-size: cover;
    background-repeat: no-repeat;
    animation: droneCameraDrift 22s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes droneCameraDrift {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.05) translate(-1%, -1.2%);
    }
    100% {
        transform: scale(1.08) translate(1%, -0.4%);
    }
}

/* Pulso y resplandor dinámico de luces de la ciudad y avenidas */
.drone-lights-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 68%, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0.08) 45%, transparent 75%),
                radial-gradient(circle at 49% 72%, rgba(254, 240, 138, 0.3) 0%, transparent 30%);
    mix-blend-mode: screen;
    animation: trafficLightPulse 3.5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes trafficLightPulse {
    0% {
        opacity: 0.45;
        transform: scale(0.98);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.02);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

/* Destello de flujo vehicular sobre la autopista (Paseo Tollocan) */
.drone-highway-beam {
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 10%;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, rgba(251, 191, 36, 0.25) 40%, rgba(245, 158, 11, 0.5) 100%);
    filter: blur(14px);
    mix-blend-mode: screen;
    animation: highwayBeamPulse 3s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes highwayBeamPulse {
    0% {
        opacity: 0.3;
        transform: scaleY(0.94);
    }
    100% {
        opacity: 0.9;
        transform: scaleY(1.06);
    }
}

/* ============================================================
   Navegación y Header Mejorado (Micro-animaciones & Drawer)
   ============================================================ */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2.5px;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
    border-radius: 9999px;
    transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.active-nav::after {
    width: 100%;
}

.nav-link.active-nav {
    color: #0284c7 !important;
    font-weight: 700;
}

/* Estado Activo del Drawer Móvil */
#mobileDrawer.drawer-open {
    transform: translateX(0) !important;
}

#mobileDrawerBackdrop.drawer-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Sombra suave para dropdowns */
.dropdown-menu-shadow {
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
}

/* Ocultar barra de scroll conservando funcionalidad */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============================================================
   ESTILOS PARA DASHBOARD PRO Y CONMUTADOR RENGLÓN / ICONOS
   ============================================================ */

/* Pulsante de estado en línea */
.status-beacon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.status-beacon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: inherit;
    opacity: 0.75;
    animation: beaconPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes beaconPulse {
    0% { transform: scale(1); opacity: 0.8; }
    70% { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Conmutador de vista Renglón / Iconos */
.view-toggle-active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

/* Tarjeta Bento Pro Admin en Modo Iconos */
.admin-icon-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.admin-icon-card:hover {
    transform: translateY(-4px);
    border-color: #0284c7;
    box-shadow: 0 16px 28px -6px rgba(2, 132, 199, 0.18);
}

html.dark .admin-icon-card,
html.dark .bento-card-light {
    background: #0f172a;
    border-color: #1e293b;
    color: #f8fafc;
}
html.dark .admin-icon-card:hover,
html.dark .bento-card-light:hover {
    border-color: #38bdf8;
    box-shadow: 0 16px 28px -6px rgba(56, 189, 248, 0.2);
}

/* Estilos de Vista Modo Renglón en la Página Pública de Productos */
.products-row-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

/* ============================================================
   CORRECCIÓN DE CONTRASTE: BOTONES DE FILTRO DE CATEGORÍA
   Garantiza que el texto del botón activo NUNCA desaparezca al poner el cursor encima
   ============================================================ */
.filter-category-btn.bg-sky-600,
.filter-category-btn.is-active,
.filter-category-btn.bg-sky-600:hover,
.filter-category-btn.is-active:hover,
.filter-category-btn.bg-sky-600:focus,
.filter-category-btn.is-active:focus {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

.filter-category-btn.bg-sky-600:hover,
.filter-category-btn.is-active:hover {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
}

.filter-category-btn.bg-sky-600 *,
.filter-category-btn.is-active *,
.filter-category-btn.bg-sky-600:hover *,
.filter-category-btn.is-active:hover * {
    color: #ffffff !important;
}

.filter-category-btn.bg-sky-600 .category-pill-count,
.filter-category-btn.is-active .category-pill-count,
.filter-category-btn.bg-sky-600:hover .category-pill-count,
.filter-category-btn.is-active:hover .category-pill-count {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.products-row-layout .product-clickable-card {
    flex-direction: column !important;
}

@media (min-width: 768px) {
    .products-row-layout .product-clickable-card {
        flex-direction: row !important;
        align-items: stretch !important;
    }
    .products-row-layout .product-clickable-card > div:first-child {
        width: 260px !important;
        min-width: 260px !important;
        height: auto !important;
        min-height: 200px !important;
    }
}

/* ============================================================
   SISTEMA DE DISEÑO INTEGRAL PARA TEMA OSCURO (DARK MODE PRO)
   Garantiza máxima legibilidad, contraste cromático y acabado premium
   ============================================================ */

/* 1. Fondo Global y Jerarquía de Texto Base */
html.dark body {
    background-color: #020617;
    color: #e2e8f0;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #f8fafc;
}

/* 2. Jerarquía Tipográfica de Textos en Modo Oscuro (Sin overrides destructivos en badges) */
html.dark .text-slate-900 {
    color: #f8fafc;
}

html.dark .text-slate-800 {
    color: #f1f5f9;
}

html.dark .text-slate-700 {
    color: #cbd5e1;
}

html.dark .text-slate-600 {
    color: #94a3b8;
}

html.dark .text-slate-500 {
    color: #94a3b8;
}

html.dark .text-slate-400 {
    color: #64748b;
}

/* 3. Superficies y Contenedores Principales */
html.dark section.bg-white,
html.dark article.bg-white,
html.dark aside.bg-white:not(#clientes-carousel-track *),
html.dark div.bg-white:not(#clientes-carousel-track *):not(.client-logo-card) {
    background-color: #0b1329;
    border-color: #1e293b;
    color: #e2e8f0;
}

html.dark section.bg-slate-50,
html.dark div.bg-slate-50:not(#clientes-carousel-track *):not(.client-logo-card) {
    background-color: #020617;
}

html.dark .bg-slate-100 {
    background-color: #0f172a;
}

html.dark .bg-slate-200 {
    background-color: #1e293b;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/90 {
    border-color: #1e293b !important;
}

/* 4. Contenedores con Vidrio Translúcido (Glassmorphism Dark) */
html.dark .bg-white\/95,
html.dark .bg-white\/90 {
    background-color: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(51, 65, 85, 0.6) !important;
    color: #f8fafc;
}

html.dark .border-white\/80 {
    border-color: rgba(51, 65, 85, 0.6) !important;
}

html.dark .border-white\/20,
html.dark .border-white\/15 {
    border-color: rgba(51, 65, 85, 0.4) !important;
}

/* 5. Tarjetas Bento de Equipos y Botones de Acción (Alto Contraste) */
html.dark .bento-card-light,
html.dark .product-clickable-card {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark .bento-card-light:hover,
html.dark .product-clickable-card:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 20px 30px -10px rgba(2, 132, 199, 0.3) !important;
}

/* Botón de acción dentro de las tarjetas Bento: ahora resalta con superficie slate-800 y borde */
html.dark .product-clickable-card .bg-slate-900,
html.dark .bento-card-light .bg-slate-900 {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark .product-clickable-card:hover .bg-slate-900,
html.dark .bento-card-light:hover .bg-slate-900 {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

html.dark .product-clickable-card:hover .group-hover\:bg-emerald-600 {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* 6. Badges Sólidos Amarillos/Ámbar: Conservar texto oscuro para legibilidad 100% */
html.dark .bg-amber-400,
html.dark .bg-amber-300,
html.dark .bg-yellow-400,
html.dark .bg-yellow-300 {
    background-color: #fbbf24 !important;
    color: #0f172a !important;
}

html.dark .bg-amber-400 *,
html.dark .bg-amber-300 *,
html.dark .bg-yellow-400 *,
html.dark .bg-yellow-300 * {
    color: #0f172a !important;
}

/* 7. Badges y Cajas con Tintes Suaves (Sky, Emerald, Amber) */
html.dark .bg-sky-50,
html.dark .bg-sky-100 {
    background-color: rgba(14, 165, 233, 0.14) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

html.dark .bg-emerald-50,
html.dark .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.14) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.14) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* Badge de especificación rápida dentro de miniatura de producto */
html.dark .img-zoom ~ div span.bg-white\/95,
html.dark .product-clickable-card span.bg-white\/95 {
    background-color: rgba(15, 23, 42, 0.9) !important;
    color: #38bdf8 !important;
    border-color: #334155 !important;
}

/* 8. Carrusel de Clientes: Mantener tarjetas de logos nítidas en blanco para evitar recorte JPEG */
html.dark #clientes-carousel-track > div,
html.dark .client-logo-card {
    background-color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html.dark #clientes-carousel-track img {
    filter: grayscale(0.2) !important;
    opacity: 0.9 !important;
}

html.dark #clientes-carousel-track > div:hover img {
    filter: grayscale(0) !important;
    opacity: 1 !important;
}

/* Niebla difuminada de bordes del carrusel en Modo Oscuro */
html.dark .pointer-events-none.bg-gradient-to-r.from-slate-50,
html.dark .pointer-events-none.bg-gradient-to-l.from-slate-50 {
    --tw-gradient-from: #020617 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(2, 6, 23, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(2, 6, 23, 0.9) 50%, var(--tw-gradient-to) !important;
}

html.dark #btn-clientes-prev,
html.dark #btn-clientes-next {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark #btn-clientes-prev:hover,
html.dark #btn-clientes-next:hover {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

/* 9. Calculadora de Potencia Dinámica (#calculadora) */
html.dark #calculadora .bg-white\/95 {
    background-color: rgba(11, 19, 41, 0.95) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
}

html.dark #calculadora .bg-gradient-to-br {
    background: linear-gradient(135deg, #0b1329 0%, #0f172a 100%) !important;
    border-color: #0284c7 !important;
}

html.dark #calcKwResult {
    color: #38bdf8 !important;
    text-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
}

html.dark #calcBadgeResult {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark #calcIndustry,
html.dark #calcRegime {
    background-color: #0b1329 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* 10. Filtros y Búsqueda en Catálogo (productos.php, renta.php, venta.php) */
html.dark section.sticky {
    background-color: rgba(11, 19, 41, 0.95) !important;
    border-color: #1e293b !important;
}

html.dark #catalogSearchInput {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark #catalogSearchInput:focus {
    border-color: #38bdf8 !important;
    background-color: #0b1329 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

html.dark .filter-category-btn:not(.is-active) {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

html.dark .filter-category-btn:not(.is-active):hover {
    background-color: #1e293b !important;
    border-color: #0284c7 !important;
    color: #38bdf8 !important;
}

html.dark .filter-category-btn:not(.is-active) .category-pill-count {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Conmutador Modo Iconos / Modo Renglón */
html.dark #btnPublicViewGrid,
html.dark #btnPublicViewRow {
    color: #94a3b8;
}

html.dark #btnPublicViewGrid.bg-white,
html.dark #btnPublicViewRow.bg-white {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    border: 1px solid #334155 !important;
}

/* 11. Detalle de Producto (producto.php) */
html.dark .p-4.rounded-2xl.bg-slate-50.border {
    background-color: #0b1329 !important;
    border-color: #1e293b !important;
}

html.dark #productDirectQuoteForm input,
html.dark #productDirectQuoteForm select,
html.dark #productDirectQuoteForm textarea {
    background-color: #0b1329 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark #productDirectQuoteForm input:focus,
html.dark #productDirectQuoteForm select:focus,
html.dark #productDirectQuoteForm textarea:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

html.dark #productDirectQuoteForm label {
    color: #cbd5e1 !important;
}

/* 12. Menú de Servicios en Header y Drawer Móvil */
html.dark .group\/servicios > div > div {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.6) !important;
}

html.dark .group\/servicios a.group\/item:hover {
    background-color: #1e293b !important;
}

html.dark .group\/servicios a.group\/item div.text-slate-900 {
    color: #f8fafc !important;
}

html.dark .group\/servicios a.group\/item div.text-slate-500 {
    color: #94a3b8 !important;
}

html.dark #mobileDrawer {
    background-color: #0b1329 !important;
    border-left: 1px solid #1e293b !important;
}

html.dark #mobileDrawer > div > div:first-child {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

html.dark #mobileDrawer nav a {
    color: #cbd5e1 !important;
}

html.dark #mobileDrawer nav a:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

html.dark #mobileDrawer nav a.bg-sky-50 {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

/* 13. Formularios Generales e Inputs */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #0f172a;
    color: #f8fafc;
    border-color: #334155;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}

html.dark label {
    color: #cbd5e1;
}

/* 14. Botones Outline Secundarios */
html.dark .btn-cta-outline {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

html.dark .btn-cta-outline:hover {
    background: #1e293b;
    border-color: #38bdf8;
    color: #38bdf8;
}

/* 15. Tablas Comparativas y Divisores */
html.dark table {
    color: #e2e8f0;
}

html.dark table thead {
    background-color: #0b1329 !important;
    border-bottom: 2px solid #1e293b;
}

html.dark table tbody tr {
    border-color: #1e293b !important;
}

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

html.dark table tbody td {
    border-color: #1e293b !important;
}

/* 16. Chips de Marcas y Badges Genéricos con Fondo Blanco en Light */
html.dark span.bg-white:not(#clientes-carousel-track *):not(.client-logo-card),
html.dark a.bg-white:not(#clientes-carousel-track *):not(.client-logo-card) {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* 17. Modales de Notificación y Alertas */
html.dark #productQuoteAlert {
    border-color: #1e293b;
}

html.dark #productQuoteAlert.bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

html.dark #productQuoteAlert.bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

/* 18. Galería de Obras y Clientes & Visor Modal Lightbox */
.gallery-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.gallery-card:hover img {
    transform: scale(1.06);
}

#galleryModal {
    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
}

#modalThumbnailStrip {
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

#modalThumbnailStrip::-webkit-scrollbar {
    height: 6px;
}

#modalThumbnailStrip::-webkit-scrollbar-track {
    background: transparent;
}

#modalThumbnailStrip::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}

#modalThumbnailStrip::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}