/* ========== BADGES Y ELEMENTOS HERO EN MODO OSCURO ========== */
/* Asegura badges consistentes en tema oscuro: fondo oscuro semif transparente
   con texto cyan (#1AA8E1) y tamaño ajustado al contenido. */

[data-theme="dark"] .esin-badge-top,
[data-theme="dark"] .hero-badge,
[data-theme="dark"] .legal-badge,
[data-theme="dark"] .subtitle-badge {
  /* Fondo oscuro/casi negro con texto cyan */
  background: rgba(0, 0, 0, 0.4) !important;
  color: #1AA8E1 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0.35rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

[data-theme="dark"] .esin-badge-top:hover,
[data-theme="dark"] .hero-badge:hover,
[data-theme="dark"] .legal-badge:hover,
[data-theme="dark"] .subtitle-badge:hover {
  background: rgba(0, 0, 0, 0.6) !important;
  color: #BFEEFF !important;
  transform: translateY(-1px) !important;
}

/* Para cualquier elemento con clase que contenga "badge" */
[data-theme="dark"] [class*="badge"] {
  background: rgba(6, 18, 26, 0.55) !important;
  color: #1AA8E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
}

[data-theme="dark"] [class*="badge"]:hover {
  background: rgba(10, 35, 48, 0.7) !important;
}

/* Reglas específicas para badges en hero: evitar full-width y alinearlos a la izquierda */
html[data-theme="dark"] .section-intro .esin-badge-top,
html[data-theme="dark"] .hero-industrial-premium .esin-badge-top,
html[data-theme="dark"] .hero-text-side .esin-badge-top,
html[data-theme="dark"] .section-intro .hero-badge {
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100% - 40px) !important;
  margin: 0 0 18px 0 !important; /* left aligned */
  padding: 0.25rem 0.9rem !important;
  text-align: left !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
}

/* Blog-specific stronger overrides: ensure text is cyan and any icon/pseudo is hidden */
html[data-theme="dark"] .hero-blog .esin-badge-top,
html[data-theme="dark"] .hero-blog .hero-badge,
html[data-theme="dark"] .hero-blog .subtitle-badge,
html[data-theme="dark"] .hero-blog .legal-badge {
  background: rgba(3,12,20,0.55) !important;
  color: #1AA8E1 !important;
  box-shadow: 0 6px 18px rgba(2,10,18,0.6) !important;
  border: none !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 0.45rem 1rem !important;
  border-radius: 8px !important;
}

/* Hide any inline image/icon inside the badge for blog hero */
html[data-theme="dark"] .hero-blog .esin-badge-top img,
html[data-theme="dark"] .hero-blog .hero-badge img,
html[data-theme="dark"] .hero-blog .esin-badge-top i,
html[data-theme="dark"] .hero-blog .hero-badge i {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Remove pseudo-elements that might draw an icon or extra decoration inside blog hero badges */
html[data-theme="dark"] .hero-blog .esin-badge-top::before,
html[data-theme="dark"] .hero-blog .esin-badge-top::after,
html[data-theme="dark"] .hero-blog .hero-badge::before,
html[data-theme="dark"] .hero-blog .hero-badge::after {
  content: none !important;
  display: none !important;
}

/* Ensure ALL descendant text uses the cyan color (NOT white, NOT --text-light) */
html[data-theme="dark"] .hero-blog .esin-badge-top,
html[data-theme="dark"] .hero-blog .esin-badge-top * {
  color: #1AA8E1 !important;
}

html[data-theme="dark"] .hero-blog .hero-badge,
html[data-theme="dark"] .hero-blog .hero-badge * {
  color: #1AA8E1 !important;
}

/* Override any inline style or CSS variable that might apply --text-light or white */
html[data-theme="dark"] .hero-blog .esin-badge-top[style],
html[data-theme="dark"] .hero-blog .hero-badge[style] {
  color: #1AA8E1 !important;
}