/* ============================================
   MODO OSCURO - COMPLETO Y CONSOLIDADO
   Todos los estilos dark centralizados aquí
   ============================================ */

/* Disable transitions on header elements when switching themes for instant color changes */
.rd-navbar-wrap,
.rd-navbar-main-outer,
.rd-navbar-aside-outer,
.nav-link-ref,
.rd-navbar,
.rd-navbar-main {
    transition: none !important;
}

/* Definir variables para modo oscuro */
:root {
  --dark-bg-main: #060b13;
  --dark-bg-card: #111720;
  --dark-text-primary: #ffffff;
  --dark-text-secondary: rgba(255, 255, 255, 0.7);
  --dark-text-muted: rgba(255, 255, 255, 0.5);
  --dark-border: rgba(255, 255, 255, 0.1);
}

/* Por defecto, sin necesidad de especificar */
html,
body {
  background-color: var(--dark-bg-main);
  color: var(--dark-text-primary);
}

/* Elementos principales */
main,
.page {
  background-color: var(--dark-bg-main);
  color: var(--dark-text-primary);
}

section,
.section {
  background-color: transparent;
}

/* Texto */
h1, h2, h3, h4, h5, h6 {
  color: var(--dark-text-primary);
}

p, span, li, label {
  color: var(--dark-text-secondary);
}

.text-muted {
  color: var(--dark-text-muted);
}

/* Enlaces */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
}

/* Tarjetas y paneles */
.card,
.panel,
.box {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-shadow-md);
}

.card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 15px 40px rgba(26, 168, 225, 0.2);
}

/* Formularios */
input,
textarea,
select {
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}

input:focus,
textarea:focus,
select:focus {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 168, 225, 0.2);
}

input::placeholder,
textarea::placeholder {
  color: var(--dark-text-muted);
}

/* Botones */
.btn,
button:not(.btn-light) {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn:hover,
button:not(.btn-light):hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Tablas */
table {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}

thead {
  background-color: rgba(26, 168, 225, 0.1);
  color: var(--color-primary);
}

tbody tr:hover {
  background-color: rgba(26, 168, 225, 0.08);
}

/* Modales */
.modal-content {
  background-color: var(--dark-card);
  border-color: var(--color-primary);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-shadow-lg);
}

.modal-header {
  background-color: rgba(26, 168, 225, 0.1);
  border-color: var(--color-primary);
}

.modal-title {
  color: var(--color-primary);
}

/* Bordes y divisores */
hr,
.divider {
  border-color: var(--dark-border);
}

/* Badges y alerts */
.badge {
  background-color: var(--color-primary);
  color: white;
}

.alert {
  background-color: rgba(26, 168, 225, 0.1);
  border-color: var(--color-primary);
  color: var(--dark-text-primary);
}

/* Dropdown */
.dropdown-menu {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-lg);
}

.dropdown-menu .dropdown-item {
  color: var(--dark-text-primary);
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(26, 168, 225, 0.15);
  color: var(--color-primary);
}

/* Navbar */
.rd-navbar-aside-outer {
  background: var(--dark-bg-main);
  border-bottom: 1px solid var(--dark-border);
}

.rd-navbar-main-outer {
  background: linear-gradient(to bottom, var(--dark-card) 0%, rgba(17, 23, 32, 0.8) 100%);
  box-shadow: var(--dark-shadow-sm);
}

.rd-navbar-main-outer.sticky {
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(17, 23, 32, 0.95), rgba(13, 20, 31, 0.92));
  box-shadow: 0 4px 12px rgba(26, 168, 225, 0.1);
}

.rd-navbar-toggle {
  border: 2px solid rgba(255,255,255,0.2) !important;
  color: #cccccc !important;
}

.rd-navbar-toggle span {
  background: #cccccc !important;
}

.rd-navbar-toggle.active,
.rd-navbar-toggle:hover {
  border-color: rgba(255,255,255,0.2) !important;
  background-color: transparent !important;
}

.rd-navbar-toggle.active span {
  background: #cccccc !important;
}

/* CARETS SIN RELLENO EN MODO OSCURO */
html[data-theme="dark"] .submenu-toggle,
html[data-theme="dark"] button.submenu-toggle,
html[data-theme="dark"] .rd-nav-item .submenu-toggle,
html[data-theme="dark"] .rd-nav-item button.submenu-toggle,
body[data-theme="dark"] .submenu-toggle,
body[data-theme="dark"] button.submenu-toggle,
body[data-theme="dark"] .rd-nav-item .submenu-toggle,
body[data-theme="dark"] .rd-nav-item button.submenu-toggle,
html.dark-mode .submenu-toggle,
html.dark-mode button.submenu-toggle,
html.dark-mode .rd-nav-item .submenu-toggle,
html.dark-mode .rd-nav-item button.submenu-toggle,
body.dark-mode .submenu-toggle,
body.dark-mode button.submenu-toggle,
body.dark-mode .rd-nav-item .submenu-toggle,
body.dark-mode .rd-nav-item button.submenu-toggle,
.submenu-toggle,
button.submenu-toggle,
.rd-nav-item .submenu-toggle,
.rd-nav-item button.submenu-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  fill: transparent !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Override nav-link-ref hover background for submenu-toggle in dark mode */
html[data-theme="dark"] .nav-link-ref:hover .submenu-toggle,
html[data-theme="dark"] .nav-link-ref:hover button.submenu-toggle,
html[data-theme="dark"] .rd-nav-item .nav-link-ref:hover .submenu-toggle,
html[data-theme="dark"] .rd-nav-item .nav-link-ref:hover button.submenu-toggle,
body[data-theme="dark"] .nav-link-ref:hover .submenu-toggle,
body[data-theme="dark"] .nav-link-ref:hover button.submenu-toggle,
body[data-theme="dark"] .rd-nav-item .nav-link-ref:hover .submenu-toggle,
body[data-theme="dark"] .rd-nav-item .nav-link-ref:hover button.submenu-toggle,
html.dark-mode .nav-link-ref:hover .submenu-toggle,
html.dark-mode .nav-link-ref:hover button.submenu-toggle,
html.dark-mode .rd-nav-item .nav-link-ref:hover .submenu-toggle,
html.dark-mode .rd-nav-item .nav-link-ref:hover button.submenu-toggle,
body.dark-mode .nav-link-ref:hover .submenu-toggle,
body.dark-mode .nav-link-ref:hover button.submenu-toggle,
body.dark-mode .rd-nav-item .nav-link-ref:hover .submenu-toggle,
body.dark-mode .rd-nav-item .nav-link-ref:hover button.submenu-toggle,
.nav-link-ref:hover .submenu-toggle,
.nav-link-ref:hover button.submenu-toggle,
.rd-nav-item .nav-link-ref:hover .submenu-toggle,
.rd-nav-item .nav-link-ref:hover button.submenu-toggle {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .submenu-toggle i,
html[data-theme="dark"] button.submenu-toggle i,
html[data-theme="dark"] .rd-nav-item .submenu-toggle i,
html[data-theme="dark"] .rd-nav-item button.submenu-toggle i,
body[data-theme="dark"] .submenu-toggle i,
body[data-theme="dark"] button.submenu-toggle i,
body[data-theme="dark"] .rd-nav-item .submenu-toggle i,
body[data-theme="dark"] .rd-nav-item button.submenu-toggle i,
html.dark-mode .submenu-toggle i,
html.dark-mode button.submenu-toggle i,
html.dark-mode .rd-nav-item .submenu-toggle i,
html.dark-mode .rd-nav-item button.submenu-toggle i,
body.dark-mode .submenu-toggle i,
body.dark-mode button.submenu-toggle i,
body.dark-mode .rd-nav-item .submenu-toggle i,
body.dark-mode .rd-nav-item button.submenu-toggle i,
.submenu-toggle i,
button.submenu-toggle i,
.rd-nav-item .submenu-toggle i,
.rd-nav-item button.submenu-toggle i {
  background: transparent !important;
  color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  fill: transparent !important;
} 

/* Override nav-link-ref hover background for submenu-toggle icons in dark mode */
html[data-theme="dark"] .nav-link-ref:hover .submenu-toggle i,
html[data-theme="dark"] .nav-link-ref:hover button.submenu-toggle i,
html[data-theme="dark"] .rd-nav-item .nav-link-ref:hover .submenu-toggle i,
html[data-theme="dark"] .rd-nav-item .nav-link-ref:hover button.submenu-toggle i,
body[data-theme="dark"] .nav-link-ref:hover .submenu-toggle i,
body[data-theme="dark"] .nav-link-ref:hover button.submenu-toggle i,
body[data-theme="dark"] .rd-nav-item .nav-link-ref:hover .submenu-toggle i,
body[data-theme="dark"] .rd-nav-item .nav-link-ref:hover button.submenu-toggle i,
html.dark-mode .nav-link-ref:hover .submenu-toggle i,
html.dark-mode .nav-link-ref:hover button.submenu-toggle i,
html.dark-mode .rd-nav-item .nav-link-ref:hover .submenu-toggle i,
html.dark-mode .rd-nav-item .nav-link-ref:hover button.submenu-toggle i,
body.dark-mode .nav-link-ref:hover .submenu-toggle i,
body.dark-mode .nav-link-ref:hover button.submenu-toggle i,
body.dark-mode .rd-nav-item .nav-link-ref:hover .submenu-toggle i,
body.dark-mode .rd-nav-item .nav-link-ref:hover button.submenu-toggle i,
.nav-link-ref:hover .submenu-toggle i,
.nav-link-ref:hover button.submenu-toggle i,
.rd-nav-item .nav-link-ref:hover .submenu-toggle i,
.rd-nav-item .nav-link-ref:hover button.submenu-toggle i {
  background: transparent !important;
  fill: transparent !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .submenu-toggle:hover,
html[data-theme="dark"] button.submenu-toggle:hover,
html[data-theme="dark"] .rd-nav-item .submenu-toggle:hover,
html[data-theme="dark"] .rd-nav-item button.submenu-toggle:hover,
body[data-theme="dark"] .submenu-toggle:hover,
body[data-theme="dark"] button.submenu-toggle:hover,
body[data-theme="dark"] .rd-nav-item .submenu-toggle:hover,
body[data-theme="dark"] .rd-nav-item button.submenu-toggle:hover,
html.dark-mode .submenu-toggle:hover,
html.dark-mode button.submenu-toggle:hover,
html.dark-mode .rd-nav-item .submenu-toggle:hover,
html.dark-mode .rd-nav-item button.submenu-toggle:hover,
body.dark-mode .submenu-toggle:hover,
body.dark-mode button.submenu-toggle:hover,
body.dark-mode .rd-nav-item .submenu-toggle:hover,
body.dark-mode .rd-nav-item button.submenu-toggle:hover,
.submenu-toggle:hover,
button.submenu-toggle:hover,
.rd-nav-item .submenu-toggle:hover,
.rd-nav-item button.submenu-toggle:hover {
  background: transparent !important;
  color: #ffffff !important;
  fill: transparent !important;
}

html[data-theme="dark"] .submenu-toggle:hover i,
html[data-theme="dark"] button.submenu-toggle:hover i,
html[data-theme="dark"] .rd-nav-item .submenu-toggle:hover i,
html[data-theme="dark"] .rd-nav-item button.submenu-toggle:hover i,
body[data-theme="dark"] .submenu-toggle:hover i,
body[data-theme="dark"] button.submenu-toggle:hover i,
body[data-theme="dark"] .rd-nav-item .submenu-toggle:hover i,
body[data-theme="dark"] .rd-nav-item button.submenu-toggle:hover i,
html.dark-mode .submenu-toggle:hover i,
html.dark-mode button.submenu-toggle:hover i,
html.dark-mode .rd-nav-item .submenu-toggle:hover i,
html.dark-mode .rd-nav-item button.submenu-toggle:hover i,
body.dark-mode .submenu-toggle:hover i,
body.dark-mode button.submenu-toggle:hover i,
body.dark-mode .rd-nav-item .submenu-toggle:hover i,
body.dark-mode .rd-nav-item button.submenu-toggle:hover i,
.submenu-toggle:hover i,
button.submenu-toggle:hover i,
.rd-nav-item .submenu-toggle:hover i,
.rd-nav-item button.submenu-toggle:hover i {
  color: #000 !important;
  background: transparent !important;
  fill: transparent !important;
}

/* Enlaces de navegación */
.nav-link-ref {
  color: var(--dark-text-primary);
}

.nav-link-ref::before {
  background: var(--color-primary);
}

.nav-link-ref:hover {
  color: var(--color-primary);
  background: rgba(26, 168, 225, 0.1);
}

/* Override the blue background for submenu-toggle icons inside hovered nav-link-ref */
.nav-link-ref:hover .submenu-toggle i,
.nav-link-ref:hover button.submenu-toggle i {
  background: transparent !important;
  fill: transparent !important;
  color: var(--dark-text-primary) !important;
}

/* Botón unificado */
.btn-style-unified {
  color: var(--dark-text-primary);
}

.btn-style-unified::before {
  background: var(--color-primary);
}

.btn-style-unified:hover {
  color: var(--color-primary);
  background: rgba(26, 168, 225, 0.1);
}

/* Botón toggle tema: base limpia + efecto circular en hover */
.btn-mode-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 50%;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

/* remove any pseudo-elements that might draw backgrounds */
.btn-mode-toggle::before {
  display: none !important;
}

.btn-mode-toggle .mode-icon {
  color: inherit;
  font-size: 18px;
}

/* hover/active circle effect without resizing or shifting */
.btn-mode-toggle:hover {
  background: var(--color-primary) !important;
  box-shadow: 0 0 20px rgba(26, 168, 225, 0.35);
}

.btn-mode-toggle:hover .mode-icon {
  color: #fff !important;
}

/* Sección intro (hero) */
.section-intro {
  padding: 140px 0 200px;
  position: relative;
  background: transparent; /* image moved to .intro-bg */
}

.intro-bg {
  /* Background image is now handled dynamically by JS to support theme switching */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  opacity: 1;
}

.esin-badge-top {
  background-color: var(--color-primary);
  color: white;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

.title_portada_premium {
  color: var(--dark-text-primary);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

.orange-italic {
  color: var(--color-primary);
  font-style: italic;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 4px;
}

.boton_hero_premium {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.boton_hero_premium:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 10px 25px rgba(26, 168, 225, 0.4);
}

/* Tarjetas de servicios */
.cards-services-grid .card {
  background-color: var(--dark-card);
  border: 1px solid var(--dark-border);
  transition: var(--transition-base);
}

.cards-services-grid .card:hover {
  border-color: rgba(26, 168, 225, 0.3);
  box-shadow: 0 15px 40px rgba(26, 168, 225, 0.2);
}

.cards-services-grid .card h4 {
  color: var(--dark-text-primary);
}

.cards-services-grid .card p {
  color: var(--dark-text-secondary);
}

.cards-services-grid .card .boton_personalizado,
.cards-services-grid .card .btn.btn-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.cards-services-grid .card .boton_personalizado:hover,
.cards-services-grid .card .btn.btn-outline-primary:hover {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 8px 20px rgba(26, 168, 225, 0.4);
}

/* Sección beneficios */
.bg-manchas-decor {
  opacity: 0.6;
}

.mancha {
  opacity: 0.3;
}

.subtitle-badge {
  background: rgba(26, 168, 225, 0.15);
  color: var(--color-primary);
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

.titulos_premium {
  color: var(--dark-text-primary);
}

.desc_premium {
  color: var(--dark-text-secondary);
}

.benefit-card-new {
  background-color: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: var(--transition-base);
  position: relative;
}

.benefit-card-new:hover {
  border-color: var(--color-primary);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(26, 168, 225, 0.2);
  background: linear-gradient(135deg, rgba(17, 23, 32, 0.8) 0%, rgba(26, 168, 225, 0.05) 100%);
}

.bg-num {
  font-size: 80px;
  font-weight: 700;
  color: rgba(26, 168, 225, 0.1);
  margin-bottom: -20px;
}

.benefit-card-new:hover .bg-num {
  color: rgba(26, 168, 225, 0.2);
}

.box-icon-orange {
  background: rgba(26, 168, 225, 0.15);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border-radius: 12px;
}

.benefit-card-new:hover .box-icon-orange {
  background: rgba(26, 168, 225, 0.25);
}

.benefit-card-new h4 {
  color: var(--dark-text-primary);
  font-weight: 700;
  margin-bottom: 10px;
}

.benefit-card-new p {
  color: var(--dark-text-secondary);
}

.benefit-card-new::after,
.benefit-card-new::before {
  background: var(--color-primary);
}

/* Sección potenciamos */
.section-potenciamos {
  padding: 100px 0;
  /* Fixed relative path from css/theme to vistas/images */
  background: linear-gradient(rgba(6,11,19,0.92), rgba(6,11,19,0.92)), url('../../images/portada/2.webp') center/cover;
  text-align: center;
  position: relative;
}

.titulo-potenciamos {
  color: var(--dark-text-primary);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

.desc-potenciamos {
  color: var(--dark-text-secondary);
  font-size: 18px;
  margin-bottom: 30px;
}

.btn-programas-white {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  padding: 12px 30px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.btn-programas-white:hover {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 10px 25px rgba(26, 168, 225, 0.3);
}

/* Footer */
footer,
.footer-classic {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  border-top: 1px solid var(--dark-border);
}

footer a {
  color: var(--color-primary);
  opacity: 0.9;
}

footer a:hover {
  color: var(--color-primary-light);
  opacity: 1;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Preloader */
.preloader {
  background: var(--dark-bg-main);
}

.preloader-body {
  color: var(--color-primary);
}

.preloader-body p {
  color: var(--dark-text-secondary);
}

/* Fondo decorativo */
.curved-bg-stripes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse at 20% 30%, rgba(26,168,225,0.08) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(59,130,246,0.06) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(26,168,225,0.03) 0%, transparent 70%);
}

.stripe {
  position: absolute;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
  border-radius: 50%;
  filter: blur(80px);
}

.stripe-1 {
  top: -10%;
  left: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(26,168,225,0.12) 0%, transparent 70%);
  animation: float1 25s ease-in-out infinite;
}

.stripe-2 {
  top: 40%;
  right: -10%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
  animation: float2 30s ease-in-out infinite;
}

.stripe-3 {
  bottom: -5%;
  left: 20%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(26,168,225,0.06) 0%, transparent 70%);
  animation: float3 35s ease-in-out infinite;
}

/* Principales */
.main-esin-dark {
  background-color: var(--dark-bg-main);
  overflow: hidden;
}

.context-dark {
  color: var(--dark-text-primary);
}

.context-dark * {
  color: inherit;
}

/* Transiciones */
* {
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

[class*="animation"],
[class*="animate"] {
  transition: none;
}

/* Responsive */
@media (max-width: 768px) {
  .section-intro {
    padding: 80px 0 120px;
  }
  
  .title_portada_premium {
    font-size: 32px;
  }
  
  .titulo-potenciamos {
    font-size: 28px;
  }
  
  .section-potenciamos {
    padding: 60px 0;
  }
}

@media (max-width: 576px) {
  .section-intro {
    padding: 60px 0 80px;
  }
  
  .title_portada_premium {
    font-size: 24px;
  }
  
  .titulo-potenciamos {
    font-size: 22px;
  }
  
  .section-potenciamos {
    padding: 40px 0;
  }
}