/* FOYKE · Definitive Stylesheet & Custom Properties */
:root {
  --color-verde-noche: #0E2A29;
  --color-verde-cannabis: #567A52;
  --color-oliva: #8B9B7A;
  --color-hueso: #EDE4D6;
  --color-violeta: #553A72;
  --color-coral: #D65E52;
  --color-acento-optico: #D9C7FF;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #081010;
}
::-webkit-scrollbar-thumb {
  background: #182B2B;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #567A52;
}

/* Glassmorphism & Luxury Panels */
.glass-panel {
  background: rgba(14, 26, 26, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
  background: rgba(8, 16, 16, 0.90);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Carousel Animations */
.carousel-slide {
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.carousel-slide.inactive {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
}

/* Indicator dots */
.carousel-dot {
  transition: all 0.3s ease;
}
.carousel-dot.active {
  width: 2rem;
  background-color: #D9C7FF;
}

/* Skeleton Loading Shimmer Animation */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

/* Print Styles for Carnet Digital */
@media print {
  body {
    background: #081010 !important;
    color: #EDE4D6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  header, nav, #toastContainer, #modalQrCarnet, #btnDescargarCarnet, #btnCopiarCodigoDirecto, #containerHistorialDispensacion {
    display: none !important;
  }

  main {
    padding: 0 !important;
    margin: 0 !important;
  }

  #carnetDigitalPrintable {
    margin: 20px auto !important;
    max-width: 480px !important;
    border: 2px solid #567A52 !important;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   FOYKE THEME ENGINE: MODO CLARO BOTÁNICO (Hueso & Verde Noche)
   ========================================================================== */

/* Transiciones suaves al alternar temas */
body, header, section, footer, .glass-panel, .glass-nav, input, select, textarea {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Indicadores visuales en el switch de tema */
html.dark .theme-icon-dark {
  background: #553A72;
  color: #D9C7FF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
html.dark .theme-icon-light {
  color: rgba(237, 228, 214, 0.35);
  background: transparent;
}

html:not(.dark) .theme-icon-light,
html.light .theme-icon-light {
  background: #567A52;
  color: #EDE4D6;
  box-shadow: 0 1px 4px rgba(86, 122, 82, 0.4);
}
html:not(.dark) .theme-icon-dark,
html.light .theme-icon-dark {
  color: rgba(14, 42, 41, 0.35);
  background: transparent;
}

/* Configuración de color scheme nativo para scrollbars e inputs */
html:not(.dark),
html.light {
  color-scheme: light;
}

/* Scrollbar en modo claro */
html:not(.dark)::-webkit-scrollbar-track,
html.light::-webkit-scrollbar-track {
  background: #EFECE4;
}
html:not(.dark)::-webkit-scrollbar-thumb,
html.light::-webkit-scrollbar-thumb {
  background: #C8D1C0;
}
html:not(.dark)::-webkit-scrollbar-thumb:hover,
html.light::-webkit-scrollbar-thumb:hover {
  background: #567A52;
}

/* Body & Contenedores Principales en Modo Claro */
html:not(.dark) body,
html.light body {
  background-color: #F8F6F0 !important;
  color: #0E2A29 !important;
}

/* Franja Superior Institucional */
html:not(.dark) body > div:first-of-type,
html.light body > div:first-of-type {
  background-color: #EDE4D6 !important;
  border-bottom: 1px solid rgba(14, 42, 41, 0.12) !important;
  color: #0E2A29 !important;
}
html:not(.dark) body > div:first-of-type span,
html.light body > div:first-of-type span {
  color: #0E2A29 !important;
}

/* Header & Glass Nav */
html:not(.dark) .glass-nav,
html.light .glass-nav {
  background: rgba(248, 246, 240, 0.94) !important;
  border-bottom: 1px solid rgba(14, 42, 41, 0.10) !important;
  box-shadow: 0 2px 14px rgba(14, 42, 41, 0.04) !important;
}
html:not(.dark) nav a:not(.font-bold),
html.light nav a:not(.font-bold) {
  color: #0E2A29 !important;
}
html:not(.dark) nav a:hover,
html.light nav a:hover {
  color: #567A52 !important;
}
html:not(.dark) #btnMobileMenuToggle,
html.light #btnMobileMenuToggle {
  background-color: rgba(14, 42, 41, 0.06) !important;
  border-color: rgba(14, 42, 41, 0.12) !important;
  color: #0E2A29 !important;
}

/* Mobile Drawer */
html:not(.dark) #mobileMenuDrawer,
html.light #mobileMenuDrawer {
  background-color: #FAF8F5 !important;
  border-left-color: rgba(14, 42, 41, 0.12) !important;
  color: #0E2A29 !important;
}
html:not(.dark) #mobileMenuDrawer .mobile-nav-link:not(.bg-\[\#13271E\]),
html.light #mobileMenuDrawer .mobile-nav-link:not(.bg-\[\#13271E\]) {
  color: #0E2A29 !important;
}
html:not(.dark) #mobileMenuDrawer .mobile-nav-link:hover,
html.light #mobileMenuDrawer .mobile-nav-link:hover {
  background-color: rgba(14, 42, 41, 0.05) !important;
  color: #567A52 !important;
}
html:not(.dark) #mobileMenuDrawer #btnCloseMobileMenu,
html.light #mobileMenuDrawer #btnCloseMobileMenu {
  color: #0E2A29 !important;
}

/* ==========================================================================
   Hero Section (#inicio) & Carousel en Modo Claro
   ========================================================================== */
html:not(.dark) #inicio,
html.light #inicio {
  background-color: #F8F6F0 !important;
  border-bottom: 1px solid rgba(14, 42, 41, 0.08) !important;
}

/* SLIDE 1: Apertura Institucional */
html:not(.dark) #inicio .carousel-slide:nth-child(1) .bg-gradient-to-r,
html.light #inicio .carousel-slide:nth-child(1) .bg-gradient-to-r {
  background: linear-gradient(135deg, rgba(248, 246, 240, 0.98) 0%, rgba(242, 237, 226, 0.93) 50%, rgba(235, 228, 214, 0.96) 100%) !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(1) .blur-\[150px\],
html.light #inicio .carousel-slide:nth-child(1) .blur-\[150px\] {
  background-color: rgba(85, 58, 114, 0.08) !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(1) .blur-\[160px\],
html.light #inicio .carousel-slide:nth-child(1) .blur-\[160px\] {
  background-color: rgba(86, 122, 82, 0.12) !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(1) span.rounded-full,
html.light #inicio .carousel-slide:nth-child(1) span.rounded-full {
  background-color: #E2EBE2 !important;
  border-color: rgba(86, 122, 82, 0.4) !important;
  color: #15381E !important;
}
html:not(.dark) #inicio h1,
html.light #inicio h1 {
  color: #0E2A29 !important;
  font-weight: 800 !important;
}
/* Nombre de marca FOYKE: Violeta Sólido Nítido en Modo Claro */
html:not(.dark) .hero-brand-name,
html.light .hero-brand-name {
  color: #553A72 !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #553A72 !important;
  font-weight: 900 !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(1) p,
html.light #inicio .carousel-slide:nth-child(1) p {
  color: #243E35 !important;
  font-weight: 500 !important;
}
html:not(.dark) #inicio a.text-\[\#8B9B7A\],
html.light #inicio a.text-\[\#8B9B7A\] {
  color: #2E4E3F !important;
  font-weight: 600 !important;
}
html:not(.dark) #inicio a.text-\[\#8B9B7A\]:hover,
html.light #inicio a.text-\[\#8B9B7A\]:hover {
  color: #553A72 !important;
}

/* SLIDE 2: Terroir Andino & Cultivo Cordillerano */
html:not(.dark) #inicio .carousel-slide:nth-child(2) .bg-gradient-to-t,
html.light #inicio .carousel-slide:nth-child(2) .bg-gradient-to-t {
  background: linear-gradient(to top, rgba(248, 246, 240, 0.98) 0%, rgba(248, 246, 240, 0.88) 50%, rgba(248, 246, 240, 0.72) 100%) !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(2) span.rounded-full,
html.light #inicio .carousel-slide:nth-child(2) span.rounded-full {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #553A72 !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(2) h2,
html.light #inicio .carousel-slide:nth-child(2) h2 {
  color: #0E2A29 !important;
  font-weight: 800 !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(2) p,
html.light #inicio .carousel-slide:nth-child(2) p {
  color: #243E35 !important;
  font-weight: 500 !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(2) .text-\[\#9ED297\],
html.light #inicio .carousel-slide:nth-child(2) .text-\[\#9ED297\] {
  color: #1E502B !important;
  font-weight: 700 !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(2) .text-white\/20,
html.light #inicio .carousel-slide:nth-child(2) .text-white\/20 {
  color: rgba(14, 42, 41, 0.3) !important;
}

/* SLIDE 3: Marco Legal & REPROCANN */
html:not(.dark) #inicio .carousel-slide:nth-child(3) .bg-gradient-to-b,
html.light #inicio .carousel-slide:nth-child(3) .bg-gradient-to-b {
  background: linear-gradient(to bottom, #F8F6F0 0%, #EFEBE0 50%, #F8F6F0 100%) !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(3) .w-14.h-14,
html.light #inicio .carousel-slide:nth-child(3) .w-14.h-14 {
  background-color: #E2EBE2 !important;
  border-color: rgba(86, 122, 82, 0.4) !important;
  color: #1E502B !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(3) .w-14.h-14 span,
html.light #inicio .carousel-slide:nth-child(3) .w-14.h-14 span {
  color: #1E502B !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(3) .text-\[\#567A52\],
html.light #inicio .carousel-slide:nth-child(3) .text-\[\#567A52\] {
  color: #2E5A36 !important;
  font-weight: 700 !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(3) h2,
html.light #inicio .carousel-slide:nth-child(3) h2 {
  color: #0E2A29 !important;
  font-weight: 800 !important;
}
html:not(.dark) #inicio .carousel-slide:nth-child(3) p,
html.light #inicio .carousel-slide:nth-child(3) p {
  color: #243E35 !important;
  font-weight: 500 !important;
}

/* Controles del Carrusel (Flechas y Puntos) */
html:not(.dark) #carouselPrev,
html:not(.dark) #carouselNext,
html.light #carouselPrev,
html.light #carouselNext {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #0E2A29 !important;
  box-shadow: 0 4px 12px rgba(14, 42, 41, 0.08) !important;
}
html:not(.dark) #carouselPrev span,
html:not(.dark) #carouselNext span,
html.light #carouselPrev span,
html.light #carouselNext span {
  color: #0E2A29 !important;
}
html:not(.dark) #carouselPrev:hover,
html:not(.dark) #carouselNext:hover,
html.light #carouselPrev:hover,
html.light #carouselNext:hover {
  background-color: #553A72 !important;
}
html:not(.dark) #carouselPrev:hover span,
html:not(.dark) #carouselNext:hover span,
html.light #carouselPrev:hover span,
html.light #carouselNext:hover span {
  color: #FFFFFF !important;
}

html:not(.dark) .carousel-dot,
html.light .carousel-dot {
  background-color: rgba(14, 42, 41, 0.25) !important;
}
html:not(.dark) .carousel-dot.active,
html.light .carousel-dot.active {
  background-color: #553A72 !important;
}

/* ==========================================================================
   REGLA MAESTRA DE BOTONES: CONTRASTE 100% GARANTIZADO EN MODO CLARO
   ========================================================================== */

/* 1. Botones Violetas Principales (Acceso Socios, Modal Login, Carousel CTA) */
html:not(.dark) button.bg-\[\#553A72\],
html:not(.dark) a.bg-\[\#553A72\],
html:not(.dark) #btnHeaderLogin,
html:not(.dark) .mobile-cta-btn,
html:not(.dark) #btnSubmitAuth,
html:not(.dark) #inicio button[data-action="open-modal-socio"],
html.light button.bg-\[\#553A72\],
html.light a.bg-\[\#553A72\],
html.light #btnHeaderLogin,
html.light .mobile-cta-btn,
html.light #btnSubmitAuth,
html.light #inicio button[data-action="open-modal-socio"] {
  background-color: #553A72 !important;
  color: #FFFFFF !important;
}

html:not(.dark) button.bg-\[\#553A72\] *,
html:not(.dark) a.bg-\[\#553A72\] *,
html:not(.dark) #btnHeaderLogin *,
html:not(.dark) .mobile-cta-btn *,
html:not(.dark) #btnSubmitAuth *,
html:not(.dark) #inicio button[data-action="open-modal-socio"] *,
html.light button.bg-\[\#553A72\] *,
html.light a.bg-\[\#553A72\] *,
html.light #btnHeaderLogin *,
html.light .mobile-cta-btn *,
html.light #btnSubmitAuth *,
html.light #inicio button[data-action="open-modal-socio"] * {
  color: #FFFFFF !important;
}

html:not(.dark) button.bg-\[\#553A72\] .text-\[\#D9C7FF\],
html:not(.dark) a.bg-\[\#553A72\] .text-\[\#D9C7FF\],
html.light button.bg-\[\#553A72\] .text-\[\#D9C7FF\],
html.light a.bg-\[\#553A72\] .text-\[\#D9C7FF\] {
  color: #D9C7FF !important;
}

/* 2. Botones Verdes Principales (Formularios REPROCANN, Guardar Cambios) */
html:not(.dark) button.bg-\[\#567A52\],
html:not(.dark) a.bg-\[\#567A52\],
html:not(.dark) #btnSubmitInline,
html:not(.dark) #btnSubmitOnboard,
html:not(.dark) #btnSubmitEditarSocioAdmin,
html.light button.bg-\[\#567A52\],
html.light a.bg-\[\#567A52\],
html.light #btnSubmitInline,
html.light #btnSubmitOnboard,
html.light #btnSubmitEditarSocioAdmin {
  background-color: #567A52 !important;
  color: #FFFFFF !important;
}

html:not(.dark) button.bg-\[\#567A52\] *,
html:not(.dark) a.bg-\[\#567A52\] *,
html:not(.dark) #btnSubmitInline *,
html:not(.dark) #btnSubmitOnboard *,
html:not(.dark) #btnSubmitEditarSocioAdmin *,
html.light button.bg-\[\#567A52\] *,
html.light a.bg-\[\#567A52\] *,
html.light #btnSubmitInline *,
html.light #btnSubmitOnboard *,
html.light #btnSubmitEditarSocioAdmin * {
  color: #FFFFFF !important;
}

/* 3. Botones Rojos (Borrado, Salir, Destructivos) */
html:not(.dark) button.bg-red-600,
html:not(.dark) button.bg-red-700,
html:not(.dark) #btnAcceptConfirmModal,
html.light button.bg-red-600,
html.light button.bg-red-700,
html.light #btnAcceptConfirmModal {
  color: #FFFFFF !important;
}
html:not(.dark) button.bg-red-600 *,
html:not(.dark) button.bg-red-700 *,
html:not(.dark) #btnAcceptConfirmModal *,
html.light button.bg-red-600 *,
html.light button.bg-red-700 *,
html.light #btnAcceptConfirmModal * {
  color: #FFFFFF !important;
}

/* 4. Botón "Mi Portal" en Header */
html:not(.dark) #btnHeaderPortal,
html.light #btnHeaderPortal {
  background-color: #E2EBE2 !important;
  border-color: rgba(86, 122, 82, 0.4) !important;
  color: #15381E !important;
}
html:not(.dark) #btnHeaderPortal *,
html.light #btnHeaderPortal * {
  color: #15381E !important;
}

/* 5. Botones Rápidos (Fast Login) & Acciones Secundarias */
html:not(.dark) .btn-fast-login,
html.light .btn-fast-login {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #0E2A29 !important;
  font-weight: 600 !important;
}
html:not(.dark) .btn-fast-login:hover,
html.light .btn-fast-login:hover {
  background-color: #F4EFE6 !important;
  border-color: #567A52 !important;
}

html:not(.dark) button.bg-white\/5,
html:not(.dark) button.bg-white\/10,
html:not(.dark) #btnCancelConfirmModal,
html:not(.dark) #btnCancelEditarSocioAdmin,
html.light button.bg-white\/5,
html.light button.bg-white\/10,
html.light #btnCancelConfirmModal,
html.light #btnCancelEditarSocioAdmin {
  background-color: #EFECE4 !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #0E2A29 !important;
  font-weight: 600 !important;
}
html:not(.dark) button.bg-white\/5 *,
html:not(.dark) button.bg-white\/10 *,
html.light button.bg-white\/5 *,
html.light button.bg-white\/10 * {
  color: #0E2A29 !important;
}

/* 6. Botones de Visibilidad de Contraseña (Eye) */
html:not(.dark) .btn-toggle-password,
html.light .btn-toggle-password {
  color: rgba(14, 42, 41, 0.5) !important;
}
html:not(.dark) .btn-toggle-password:hover,
html.light .btn-toggle-password:hover {
  color: #567A52 !important;
}

/* 7. Tabs del Modal (Acceso Socios vs Completar Ficha) */
html:not(.dark) #tabLogin,
html.light #tabLogin {
  color: #553A72 !important;
  border-color: #553A72 !important;
  font-weight: 700 !important;
}
html:not(.dark) #tabOnboarding,
html.light #tabOnboarding {
  color: #4A6357 !important;
}
html:not(.dark) #tabOnboarding:hover,
html.light #tabOnboarding:hover {
  color: #0E2A29 !important;
}

/* Glass Panels */
html:not(.dark) .glass-panel,
html.light .glass-panel {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(14, 42, 41, 0.12) !important;
  color: #0E2A29 !important;
  box-shadow: 0 10px 30px rgba(14, 42, 41, 0.05) !important;
}

/* Sección: Completa tu REPROCANN (#reprocann-section) */
html:not(.dark) #reprocann-section,
html.light #reprocann-section {
  background: linear-gradient(to bottom, #F7F5F0, #EFECE3, #F7F5F0) !important;
  border-bottom: 1px solid rgba(14, 42, 41, 0.08) !important;
}
html:not(.dark) #reprocann-section h2,
html:not(.dark) #reprocann-section h3,
html:not(.dark) #reprocann-section h4,
html.light #reprocann-section h2,
html.light #reprocann-section h3,
html.light #reprocann-section h4 {
  color: #0E2A29 !important;
  font-weight: 800 !important;
}
html:not(.dark) #reprocann-section p,
html.light #reprocann-section p {
  color: #2E463E !important;
}
html:not(.dark) #reprocann-section label,
html.light #reprocann-section label {
  color: #13271E !important;
}
html:not(.dark) #reprocann-section .text-\[\#8B9B7A\],
html.light #reprocann-section .text-\[\#8B9B7A\] {
  color: #4A6357 !important;
}
html:not(.dark) #reprocann-section .text-white,
html:not(.dark) #reprocann-section .text-white\/80,
html:not(.dark) #reprocann-section .text-white\/70,
html:not(.dark) #reprocann-section .text-white\/60,
html:not(.dark) #reprocann-section .text-white\/50,
html:not(.dark) #aliados .text-white,
html:not(.dark) #aliados .text-white\/80,
html:not(.dark) #aliados .text-white\/70,
html:not(.dark) #aliados .text-white\/50,
html:not(.dark) #comision .text-white,
html:not(.dark) #comision .text-white\/80,
html:not(.dark) #comision .text-white\/70,
html:not(.dark) #comision .text-white\/50 {
  color: #243831 !important;
}
html:not(.dark) #reprocann-section .bg-\[\#0A1313\],
html:not(.dark) #reprocann-section .bg-\[\#0E1A1A\],
html:not(.dark) #reprocann-section .bg-\[\#070E0E\],
html.light #reprocann-section .bg-\[\#0A1313\],
html.light #reprocann-section .bg-\[\#0E1A1A\],
html.light #reprocann-section .bg-\[\#070E0E\] {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.12) !important;
  box-shadow: 0 4px 20px rgba(14, 42, 41, 0.05) !important;
}
html:not(.dark) #reprocann-section .bg-\[\#081010\],
html.light #reprocann-section .bg-\[\#081010\] {
  background-color: #FAF8F5 !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #0E2A29 !important;
}
html:not(.dark) #reprocann-section input,
html:not(.dark) #reprocann-section select,
html:not(.dark) #reprocann-section textarea,
html.light #reprocann-section input,
html.light #reprocann-section select,
html.light #reprocann-section textarea {
  background-color: #FAF8F5 !important;
  border-color: rgba(14, 42, 41, 0.2) !important;
  color: #0E2A29 !important;
}
html:not(.dark) #reprocann-section input::placeholder,
html:not(.dark) #reprocann-section textarea::placeholder,
html.light #reprocann-section input::placeholder,
html.light #reprocann-section textarea::placeholder {
  color: rgba(14, 42, 41, 0.45) !important;
}
html:not(.dark) #reprocann-section .bg-\[\#13271E\],
html.light #reprocann-section .bg-\[\#13271E\] {
  background-color: #E2EBE2 !important;
  border-color: rgba(86, 122, 82, 0.35) !important;
}
html:not(.dark) #reprocann-section .text-\[\#9ED297\],
html.light #reprocann-section .text-\[\#9ED297\] {
  color: #256621 !important;
}

/* Sección: Aliados (#aliados) */
html:not(.dark) #aliados,
html.light #aliados {
  background-color: #F8F6F0 !important;
  border-bottom: 1px solid rgba(14, 42, 41, 0.08) !important;
}
html:not(.dark) #aliados h2,
html.light #aliados h2 {
  color: #0E2A29 !important;
}
html:not(.dark) #aliados p,
html.light #aliados p {
  color: #385044 !important;
}
html:not(.dark) #aliados .bg-\[\#0E1A1A\],
html:not(.dark) #aliados .grid > div,
html.light #aliados .bg-\[\#0E1A1A\],
html.light #aliados .grid > div {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.12) !important;
  box-shadow: 0 4px 16px rgba(14, 42, 41, 0.04) !important;
}
html:not(.dark) #aliados .grid > div:hover,
html.light #aliados .grid > div:hover {
  border-color: #567A52 !important;
  box-shadow: 0 8px 24px rgba(86, 122, 82, 0.1) !important;
}
html:not(.dark) #aliados h3,
html.light #aliados h3 {
  color: #0E2A29 !important;
}

/* Sección: Comisión Directiva (#comision) */
html:not(.dark) #comision,
html.light #comision {
  background-color: #EFEBE2 !important;
  border-bottom: 1px solid rgba(14, 42, 41, 0.08) !important;
}
html:not(.dark) #comision h2,
html.light #comision h2 {
  color: #0E2A29 !important;
}
html:not(.dark) #comision p,
html.light #comision p {
  color: #385044 !important;
}
html:not(.dark) #comision .bg-\[\#0E1A1A\],
html:not(.dark) #comision .group,
html.light #comision .bg-\[\#0E1A1A\],
html.light #comision .group {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.12) !important;
  box-shadow: 0 4px 16px rgba(14, 42, 41, 0.05) !important;
}
html:not(.dark) #comision h3,
html.light #comision h3 {
  color: #0E2A29 !important;
}

/* Footer: Contraste Editorial Verde Noche */
html:not(.dark) #legal,
html.light #legal {
  background-color: #0E2A29 !important;
  color: rgba(237, 228, 214, 0.8) !important;
}
html:not(.dark) #legal h4,
html.light #legal h4 {
  color: #EDE4D6 !important;
}
html:not(.dark) #legal a,
html.light #legal a {
  color: rgba(237, 228, 214, 0.75) !important;
}
html:not(.dark) #legal a:hover,
html.light #legal a:hover {
  color: #D9C7FF !important;
}

/* Modal Socio (#modalSocio) */
html:not(.dark) #modalSocio .glass-panel,
html.light #modalSocio .glass-panel {
  background-color: #FAF8F5 !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #0E2A29 !important;
  box-shadow: 0 20px 60px rgba(14, 42, 41, 0.25) !important;
}
html:not(.dark) #modalSocio h3,
html.light #modalSocio h3 {
  color: #0E2A29 !important;
}
html:not(.dark) #modalSocio input,
html:not(.dark) #modalSocio textarea,
html.light #modalSocio input,
html.light #modalSocio textarea {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.2) !important;
  color: #0E2A29 !important;
}
html:not(.dark) #modalSocio input::placeholder,
html:not(.dark) #modalSocio textarea::placeholder,
html.light #modalSocio input::placeholder,
html.light #modalSocio textarea::placeholder {
  color: rgba(14, 42, 41, 0.45) !important;
}
html:not(.dark) #modalSocio label,
html.light #modalSocio label {
  color: #13271E !important;
}
html:not(.dark) #modalSocio #btnCloseModal,
html.light #modalSocio #btnCloseModal {
  color: #0E2A29 !important;
}

/* ==========================================================================
   PORTAL EN MODO CLARO (VISTAS MÉDICO, SOCIO Y ADMINISTRACIÓN)
   ========================================================================== */

/* Fondo general y reset de texto para Modo Claro */
html:not(.dark) body,
html.light body {
  background-color: #FAF8F5 !important;
  color: #0E2A29 !important;
}

/* Header del Portal */
html:not(.dark) header.glass-panel,
html.light header.glass-panel {
  background: rgba(248, 246, 240, 0.94) !important;
  border-bottom: 1px solid rgba(14, 42, 41, 0.1) !important;
}

/* Paneles y Cards principales del Portal */
html:not(.dark) .glass-panel,
html:not(.dark) .glass-card,
html:not(.dark) .portal-card,
html:not(.dark) #panelIndicadorCupo,
html:not(.dark) #cardHistorialDispensacion,
html:not(.dark) #stepperReprocann,
html.light .glass-panel,
html.light .glass-card,
html.light .portal-card,
html.light #panelIndicadorCupo,
html.light #cardHistorialDispensacion,
html.light #stepperReprocann {
  background: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.12) !important;
  color: #0E2A29 !important;
  box-shadow: 0 4px 16px rgba(14, 42, 41, 0.04) !important;
}

/* Sub-contenedores y cajas de métricas (anteriormente bg-black/40, bg-[#081010], etc.) */
html:not(.dark) main .bg-black\/50,
html:not(.dark) main .bg-black\/40,
html:not(.dark) main .bg-black\/30,
html:not(.dark) main .bg-black\/20,
html:not(.dark) main .bg-\[\#081010\],
html:not(.dark) main .bg-\[\#081010\]\/80,
html:not(.dark) main .bg-\[\#0E1A1A\],
html:not(.dark) main .bg-\[\#0E1A1A\]\/50,
html:not(.dark) main .bg-\[\#0A1313\],
html:not(.dark) [id^="modal"] .bg-black\/50,
html:not(.dark) [id^="modal"] .bg-black\/40,
html:not(.dark) [id^="modal"] .bg-black\/30,
html:not(.dark) [id^="modal"] .bg-\[\#081010\],
html:not(.dark) [id^="modal"] .bg-\[\#0E1A1A\],
html.light main .bg-black\/50,
html.light main .bg-black\/40,
html.light main .bg-black\/30,
html.light main .bg-\[\#081010\],
html.light main .bg-\[\#0E1A1A\],
html.light [id^="modal"] .bg-black\/50,
html.light [id^="modal"] .bg-black\/40,
html.light [id^="modal"] .bg-\[\#081010\],
html.light [id^="modal"] .bg-\[\#0E1A1A\] {
  background-color: #F6F4ED !important;
  border-color: rgba(14, 42, 41, 0.1) !important;
  color: #0E2A29 !important;
}

/* Bordes en Modo Claro */
html:not(.dark) main .border-white\/5,
html:not(.dark) main .border-white\/10,
html:not(.dark) main .border-white\/20,
html:not(.dark) [id^="modal"] .border-white\/5,
html:not(.dark) [id^="modal"] .border-white\/10,
html:not(.dark) [id^="modal"] .border-white\/20,
html.light main .border-white\/5,
html.light main .border-white\/10,
html.light main .border-white\/20,
html.light [id^="modal"] .border-white\/5,
html.light [id^="modal"] .border-white\/10,
html.light [id^="modal"] .border-white\/20 {
  border-color: rgba(14, 42, 41, 0.1) !important;
}

/* Títulos y texto primario (eliminar el color hueso pálido #EDE4D6 en modo claro) */
html:not(.dark) header .text-\[\#EDE4D6\],
html:not(.dark) main .text-\[\#EDE4D6\],
html:not(.dark) [id^="modal"] .text-\[\#EDE4D6\],
html:not(.dark) #viewMedico .text-\[\#EDE4D6\],
html:not(.dark) #viewSocio .text-\[\#EDE4D6\],
html:not(.dark) #viewAdmin .text-\[\#EDE4D6\],
html:not(.dark) #viewMedico h1,
html:not(.dark) #viewMedico h2,
html:not(.dark) #viewMedico h3,
html:not(.dark) #viewSocio h1,
html:not(.dark) #viewSocio h2,
html:not(.dark) #viewSocio h3,
html:not(.dark) #viewAdmin h1,
html:not(.dark) #viewAdmin h2,
html:not(.dark) #viewAdmin h3,
html.light header .text-\[\#EDE4D6\],
html.light main .text-\[\#EDE4D6\],
html.light [id^="modal"] .text-\[\#EDE4D6\],
html.light #viewMedico .text-\[\#EDE4D6\],
html.light #viewSocio .text-\[\#EDE4D6\],
html.light #viewAdmin .text-\[\#EDE4D6\] {
  color: #0E2A29 !important;
}

/* Subtítulos, descripciones y labels (reemplazar #8B9B7A por oliva de alto contraste) */
html:not(.dark) header .text-\[\#8B9B7A\],
html:not(.dark) main .text-\[\#8B9B7A\],
html:not(.dark) [id^="modal"] .text-\[\#8B9B7A\],
html:not(.dark) #viewMedico .text-\[\#8B9B7A\],
html:not(.dark) #viewSocio .text-\[\#8B9B7A\],
html:not(.dark) #viewAdmin .text-\[\#8B9B7A\],
html:not(.dark) #viewMedico p,
html:not(.dark) #viewSocio p,
html:not(.dark) #viewAdmin p,
html.light header .text-\[\#8B9B7A\],
html.light main .text-\[\#8B9B7A\],
html.light [id^="modal"] .text-\[\#8B9B7A\],
html.light #viewMedico .text-\[\#8B9B7A\],
html.light #viewSocio .text-\[\#8B9B7A\],
html.light #viewAdmin .text-\[\#8B9B7A\] {
  color: #3C4F44 !important;
}

/* Variantes de texto blanco (text-white/...) dentro del portal */
html:not(.dark) main .text-white,
html:not(.dark) main .text-white\/90,
html:not(.dark) main .text-white\/80,
html:not(.dark) main .text-white\/70,
html:not(.dark) main .text-white\/60,
html:not(.dark) [id^="modal"] .text-white,
html:not(.dark) [id^="modal"] .text-white\/80,
html:not(.dark) [id^="modal"] .text-white\/70,
html.light main .text-white,
html.light main .text-white\/80,
html.light [id^="modal"] .text-white {
  color: #0E2A29 !important;
}

html:not(.dark) main .text-white\/50,
html:not(.dark) main .text-white\/40,
html:not(.dark) [id^="modal"] .text-white\/50,
html:not(.dark) [id^="modal"] .text-white\/40,
html.light main .text-white\/50,
html.light main .text-white\/40 {
  color: #556B5F !important;
}

/* Color Verde Acento: #9ED297 en dark pasa a verde botánico contrastado #1F6E36 en light */
html:not(.dark) main .text-\[\#9ED297\],
html:not(.dark) [id^="modal"] .text-\[\#9ED297\],
html:not(.dark) header #headerUserBadge,
html.light main .text-\[\#9ED297\],
html.light [id^="modal"] .text-\[\#9ED297\],
html.light header #headerUserBadge {
  color: #1F6E36 !important;
}

/* Color Violeta Acento: #D9C7FF en dark pasa a violeta institucional #43265D en light */
html:not(.dark) main .text-\[\#D9C7FF\],
html:not(.dark) [id^="modal"] .text-\[\#D9C7FF\],
html.light main .text-\[\#D9C7FF\],
html.light [id^="modal"] .text-\[\#D9C7FF\] {
  color: #43265D !important;
}

/* Color Coral Acento: #FFB4AB en dark pasa a coral rojizo #A82D22 en light */
html:not(.dark) main .text-\[\#FFB4AB\],
html:not(.dark) [id^="modal"] .text-\[\#FFB4AB\],
html.light main .text-\[\#FFB4AB\],
html.light [id^="modal"] .text-\[\#FFB4AB\] {
  color: #A82D22 !important;
}

/* Badges Verdes (#13271E): Fondo salvia suave con texto verde oscuro */
html:not(.dark) main .bg-\[\#13271E\],
html:not(.dark) [id^="modal"] .bg-\[\#13271E\],
html:not(.dark) header .bg-\[\#13271E\],
html.light main .bg-\[\#13271E\],
html.light [id^="modal"] .bg-\[\#13271E\],
html.light header .bg-\[\#13271E\] {
  background-color: #E2EFE0 !important;
  border-color: rgba(86, 122, 82, 0.35) !important;
  color: #184A22 !important;
}
html:not(.dark) main .bg-\[\#13271E\] *,
html:not(.dark) [id^="modal"] .bg-\[\#13271E\] *,
html.light main .bg-\[\#13271E\] *,
html.light [id^="modal"] .bg-\[\#13271E\] * {
  color: #184A22 !important;
}

/* Badges Violetas (#553A72/40 o #553A72/30): Fondo lavanda suave con texto violeta oscuro */
html:not(.dark) main .bg-\[\#553A72\]\/40,
html:not(.dark) main .bg-\[\#553A72\]\/30,
html:not(.dark) [id^="modal"] .bg-\[\#553A72\]\/40,
html:not(.dark) header .bg-\[\#553A72\]\/40,
html.light main .bg-\[\#553A72\]\/40,
html.light [id^="modal"] .bg-\[\#553A72\]\/40 {
  background-color: #EFE8F6 !important;
  border-color: rgba(85, 58, 114, 0.25) !important;
  color: #43265D !important;
}
html:not(.dark) main .bg-\[\#553A72\]\/40 *,
html:not(.dark) main .bg-\[\#553A72\]\/30 *,
html:not(.dark) [id^="modal"] .bg-\[\#553A72\]\/40 *,
html.light main .bg-\[\#553A72\]\/40 * {
  color: #43265D !important;
}

/* Botones Primarios Verdes (#567A52): Texto blanco nítido y alto contraste */
html:not(.dark) button.bg-\[\#567A52\],
html:not(.dark) a.bg-\[\#567A52\],
html:not(.dark) button.bg-\[\#567A52\] *,
html:not(.dark) a.bg-\[\#567A52\] *,
html:not(.dark) #btnOpenModalNuevoPaciente,
html:not(.dark) #btnOpenModalCrearSocioAdmin,
html:not(.dark) #btnTriggerExcel,
html:not(.dark) #btnOpenModalNuevoPaciente *,
html:not(.dark) #btnOpenModalCrearSocioAdmin *,
html:not(.dark) #btnTriggerExcel * {
  background-color: #567A52 !important;
  color: #FFFFFF !important;
}
html:not(.dark) button.bg-\[\#567A52\]:hover,
html:not(.dark) a.bg-\[\#567A52\]:hover,
html:not(.dark) #btnOpenModalNuevoPaciente:hover,
html:not(.dark) #btnOpenModalCrearSocioAdmin:hover,
html:not(.dark) #btnTriggerExcel:hover {
  background-color: #456341 !important;
  color: #FFFFFF !important;
}

/* Botones Violetas Sólidos (#553A72): Texto blanco nítido */
html:not(.dark) button.bg-\[\#553A72\],
html:not(.dark) a.bg-\[\#553A72\],
html:not(.dark) button.bg-\[\#553A72\] *,
html:not(.dark) a.bg-\[\#553A72\] *,
html:not(.dark) .btn-abrir-reprocann.bg-\[\#553A72\],
html:not(.dark) .btn-abrir-reprocann.bg-\[\#553A72\] * {
  background-color: #553A72 !important;
  color: #FFFFFF !important;
}
html:not(.dark) button.bg-\[\#553A72\]:hover,
html:not(.dark) a.bg-\[\#553A72\]:hover,
html:not(.dark) .btn-abrir-reprocann.bg-\[\#553A72\]:hover {
  background-color: #422C5A !important;
  color: #FFFFFF !important;
}

/* Botones Secundarios Desplegables / Utilidades */
html:not(.dark) #btnToggleExcelDropdown,
html:not(.dark) #btnCopiarCodigoDirecto,
html:not(.dark) #btnCopiarReprocann {
  background-color: #EDE6F5 !important;
  border-color: rgba(85, 58, 114, 0.3) !important;
  color: #43265D !important;
}
html:not(.dark) #btnToggleExcelDropdown *,
html:not(.dark) #btnCopiarCodigoDirecto *,
html:not(.dark) #btnCopiarReprocann * {
  color: #43265D !important;
}
html:not(.dark) #btnToggleExcelDropdown:hover,
html:not(.dark) #btnCopiarCodigoDirecto:hover {
  background-color: #553A72 !important;
  color: #FFFFFF !important;
}
html:not(.dark) #btnToggleExcelDropdown:hover *,
html:not(.dark) #btnCopiarCodigoDirecto:hover * {
  color: #FFFFFF !important;
}

/* Botones de acción general (bg-white/5, bg-white/10) */
html:not(.dark) main .bg-white\/5,
html:not(.dark) main .bg-white\/10,
html:not(.dark) [id^="modal"] .bg-white\/5,
html:not(.dark) [id^="modal"] .bg-white\/10,
html:not(.dark) #btnRecargarSociosAdmin,
html:not(.dark) #btnDescargarCarnet,
html:not(.dark) #btnCancelConfirmModal {
  background-color: #EDE8DE !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #0E2A29 !important;
}
html:not(.dark) main .bg-white\/5:hover,
html:not(.dark) main .bg-white\/10:hover,
html:not(.dark) [id^="modal"] .bg-white\/5:hover,
html:not(.dark) [id^="modal"] .bg-white\/10:hover,
html:not(.dark) #btnRecargarSociosAdmin:hover,
html:not(.dark) #btnDescargarCarnet:hover,
html:not(.dark) #btnCancelConfirmModal:hover {
  background-color: #E2DDD1 !important;
  color: #0E2A29 !important;
}
html:not(.dark) #btnRecargarSociosAdmin *,
html:not(.dark) #btnDescargarCarnet * {
  color: #0E2A29 !important;
}

/* Inputs, Formularios y Textareas */
html:not(.dark) main input,
html:not(.dark) main select,
html:not(.dark) main textarea,
html:not(.dark) [id^="modal"] input,
html:not(.dark) [id^="modal"] select,
html:not(.dark) [id^="modal"] textarea {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(14, 42, 41, 0.22) !important;
  color: #0E2A29 !important;
}
html:not(.dark) main input::placeholder,
html:not(.dark) main textarea::placeholder,
html:not(.dark) [id^="modal"] input::placeholder,
html:not(.dark) [id^="modal"] textarea::placeholder {
  color: rgba(14, 42, 41, 0.45) !important;
}
html:not(.dark) main input:focus,
html:not(.dark) main select:focus,
html:not(.dark) main textarea:focus,
html:not(.dark) [id^="modal"] input:focus,
html:not(.dark) [id^="modal"] select:focus,
html:not(.dark) [id^="modal"] textarea:focus {
  border-color: #567A52 !important;
  box-shadow: 0 0 0 3px rgba(86, 122, 82, 0.18) !important;
  outline: none !important;
}

/* Selector de Roles en el Header (#roleTabsContainer) */
html:not(.dark) #roleTabsContainer {
  background-color: #EDE8DE !important;
  border-color: rgba(14, 42, 41, 0.12) !important;
}
html:not(.dark) #roleTabsContainer button {
  color: #3C4F44 !important;
}
html:not(.dark) #roleTabsContainer button:hover {
  color: #0E2A29 !important;
  background-color: rgba(14, 42, 41, 0.05) !important;
}
html:not(.dark) #roleTabsContainer button.bg-\[\#553A72\] {
  background-color: #553A72 !important;
  color: #FFFFFF !important;
  border-color: rgba(85, 58, 114, 0.4) !important;
}
html:not(.dark) #roleTabsContainer button.bg-\[\#553A72\] * {
  color: #FFFFFF !important;
}
html:not(.dark) #roleTabsContainer button.bg-\[\#567A52\] {
  background-color: #567A52 !important;
  color: #FFFFFF !important;
  border-color: rgba(86, 122, 82, 0.4) !important;
}
html:not(.dark) #roleTabsContainer button.bg-\[\#567A52\] * {
  color: #FFFFFF !important;
}
html:not(.dark) #roleTabsContainer button.bg-\[\#0E1A1A\] {
  background-color: #0E2A29 !important;
  color: #EDE4D6 !important;
  border-color: rgba(14, 42, 41, 0.3) !important;
}
html:not(.dark) #roleTabsContainer button.bg-\[\#0E1A1A\] * {
  color: #EDE4D6 !important;
}

/* Barra Móvil Inferior (#mobileRoleTabsContainer) */
html:not(.dark) #mobileRoleTabsContainer,
html:not(.dark) nav.md\:hidden {
  background: rgba(248, 246, 240, 0.98) !important;
  border-top-color: rgba(14, 42, 41, 0.12) !important;
  box-shadow: 0 -4px 20px rgba(14, 42, 41, 0.06) !important;
}
html:not(.dark) #mobileRoleTabsContainer button,
html:not(.dark) nav.md\:hidden button {
  color: #4A6052 !important;
}
html:not(.dark) #mobileRoleTabsContainer button:hover,
html:not(.dark) nav.md\:hidden button:hover {
  color: #0E2A29 !important;
}
html:not(.dark) #mobileRoleTabsContainer button.bg-\[\#553A72\]\/40 {
  background-color: #EFE8F6 !important;
  color: #43265D !important;
  border-color: rgba(85, 58, 114, 0.3) !important;
}
html:not(.dark) #mobileRoleTabsContainer button.bg-\[\#13271E\] {
  background-color: #E2EFE0 !important;
  color: #184A22 !important;
  border-color: rgba(86, 122, 82, 0.3) !important;
}
html:not(.dark) #mobileRoleTabsContainer button.bg-\[\#0E1A1A\] {
  background-color: #0E2A29 !important;
  color: #EDE4D6 !important;
}

/* Tabla del Padrón de Socios (Administrador) */
html:not(.dark) table {
  background-color: #FFFFFF !important;
  color: #0E2A29 !important;
}
html:not(.dark) thead th {
  background-color: #F3EFE7 !important;
  color: #0E2A29 !important;
  font-weight: 800 !important;
  border-bottom: 2px solid rgba(14, 42, 41, 0.12) !important;
}
html:not(.dark) tbody tr {
  border-bottom: 1px solid rgba(14, 42, 41, 0.08) !important;
}
html:not(.dark) tbody tr:hover {
  background-color: rgba(86, 122, 82, 0.06) !important;
}
html:not(.dark) tbody td {
  color: #13271E !important;
}
html:not(.dark) tbody td .text-\[\#EDE4D6\] {
  color: #0E2A29 !important;
}
html:not(.dark) tbody td .text-\[\#8B9B7A\] {
  color: #3C4F44 !important;
}
html:not(.dark) tbody td span.bg-black\/50,
html:not(.dark) tbody td span.bg-black\/40 {
  background-color: #EDE8DE !important;
  color: #0E2A29 !important;
  border-color: rgba(14, 42, 41, 0.1) !important;
}
html:not(.dark) tbody td div.bg-black\/40 {
  background-color: #EDE8DE !important;
  color: #0E2A29 !important;
  border-color: rgba(14, 42, 41, 0.1) !important;
}

/* Pestañas de Filtro (Médico, Admin y Cepas de Socio) */
html:not(.dark) .filter-btn,
html:not(.dark) .cepa-filter-btn {
  color: #3C4F44 !important;
}
html:not(.dark) .filter-btn:hover,
html:not(.dark) .cepa-filter-btn:hover {
  color: #0E2A29 !important;
}
html:not(.dark) .filter-btn.active,
html:not(.dark) .cepa-filter-btn.active {
  background-color: #0E2A29 !important;
  color: #EDE4D6 !important;
}

/* Carnet Digital de Socio (Mantiene su diseño oficial oscuro de credencial física) */
html:not(.dark) #carnetDigitalPrintable {
  background: linear-gradient(135deg, #0A1616 0%, #0E2A29 60%, #1A1224 100%) !important;
  border-color: rgba(217, 199, 255, 0.35) !important;
  box-shadow: 0 16px 36px rgba(14, 42, 41, 0.2) !important;
}
html:not(.dark) #carnetDigitalPrintable .text-\[\#EDE4D6\],
html:not(.dark) #carnetDigitalPrintable h3 {
  color: #EDE4D6 !important;
}
html:not(.dark) #carnetDigitalPrintable .text-\[\#8B9B7A\],
html:not(.dark) #carnetDigitalPrintable p {
  color: #8B9B7A !important;
}
html:not(.dark) #carnetDigitalPrintable .text-\[\#D9C7FF\] {
  color: #D9C7FF !important;
}
html:not(.dark) #carnetDigitalPrintable .text-\[\#9ED297\] {
  color: #9ED297 !important;
}
html:not(.dark) #carnetDigitalPrintable .bg-black\/40 {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

/* Modales en Modo Claro */
html:not(.dark) #modalReprocann > div,
html:not(.dark) #modalNuevoPaciente > div,
html:not(.dark) #modalCrearSocioAdmin > div,
html:not(.dark) #modalEditarSocioAdmin > div,
html:not(.dark) #modalHistorialCompleto > div > div,
html:not(.dark) #modalQrCarnet > div > div,
html:not(.dark) #modalConfirmacion > div,
html:not(.dark) #modalConfirmacion > div > div,
html.light #modalReprocann > div,
html.light #modalNuevoPaciente > div,
html.light #modalCrearSocioAdmin > div,
html.light #modalEditarSocioAdmin > div,
html.light #modalHistorialCompleto > div > div,
html.light #modalQrCarnet > div > div,
html.light #modalConfirmacion > div,
html.light #modalConfirmacion > div > div {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.15) !important;
  color: #0E2A29 !important;
  box-shadow: 0 25px 60px rgba(14, 42, 41, 0.25) !important;
}
html:not(.dark) [id^="modal"] h2,
html:not(.dark) [id^="modal"] h3,
html:not(.dark) [id^="modal"] h4 {
  color: #0E2A29 !important;
}
html:not(.dark) [id^="modal"] label {
  color: #0E2A29 !important;
}
html:not(.dark) [id^="modal"] button[id^="btnClose"] {
  color: #0E2A29 !important;
}
html:not(.dark) [id^="modal"] button[id^="btnClose"]:hover {
  background-color: rgba(14, 42, 41, 0.08) !important;
}

/* Gradients específicos sobre Glass Cards en Modo Claro */
html:not(.dark) .glass-card.bg-gradient-to-br,
html:not(.dark) main .glass-card[class*="bg-gradient-to-br"],
html:not(.dark) #stepperReprocann > div,
html:not(.dark) #stepperReprocann > div[class*="bg-gradient-to-br"] {
  background: #FFFFFF !important;
}

html:not(.dark) main .bg-gradient-to-br.from-\[\#13271E\] {
  background: linear-gradient(135deg, #E2EFE0, #D5E6D3) !important;
  color: #184A22 !important;
  border-color: rgba(86, 122, 82, 0.4) !important;
}
html:not(.dark) main .bg-gradient-to-br.from-\[\#13271E\] span {
  color: #184A22 !important;
}

/* Desplegable de Importación Excel en Admin */
html:not(.dark) #containerExcelDropdown {
  background-color: #F8F6F2 !important;
  border-color: rgba(85, 58, 114, 0.25) !important;
}
html:not(.dark) #containerExcelDropdown .border-dashed {
  background-color: #FFFFFF !important;
  border-color: rgba(14, 42, 41, 0.18) !important;
}
html:not(.dark) #containerExcelDropdown .border-dashed:hover {
  border-color: #567A52 !important;
}