/* Degradado de marca único para los banners (hero) y llamadas a la acción. */
:root {
  --brand-hero: linear-gradient(135deg, #0d4d6b 0%, #155e8a 45%, #2d4ba0 100%);
}

/* Ajustes de tema oscuro para las clases propias (Bootstrap 5.3 adapta el resto). */
[data-bs-theme="dark"] .familias-nav {
  background: rgba(20, 24, 28, .92);
  border-bottom-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .mdtopx-flujo,
[data-bs-theme="dark"] .home-capacidades {
  background: #1a1d21;
}

[data-bs-theme="dark"] .mdtopx-flujo .row > div,
[data-bs-theme="dark"] .home-capacidades .row > div {
  color: #adb5bd;
}

[data-bs-theme="dark"] .chip-familia {
  background: #2a3038;
  color: #8fd3e3;
}

[data-bs-theme="dark"] .chip-familia:hover,
[data-bs-theme="dark"] .chip-familia:focus {
  background: #2d4ba0;
  color: #fff;
}

[data-bs-theme="dark"] .ficha-media,
[data-bs-theme="dark"] .sensor-card .sensor-media.media-icono {
  background: linear-gradient(135deg, #20262e 0%, #1a2028 100%);
}

[data-bs-theme="dark"] .producto-destacado {
  background: var(--bs-body-bg);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* El interruptor de tema no muestra decoración de foco. */
#btn-tema:focus,
#btn-tema:focus-visible,
#btn-tema:active {
  box-shadow: none;
  outline: none;
}

html {
  position: relative;
  min-height: 100%;
}

/* Sticky footer: si la página es corta, el footer queda al final de la ventana
   (no a media página). El contenedor principal crece para empujarlo abajo. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > .container-fluid:first-of-type {
  flex: 1 0 auto;
}

/* El footer (bg-dark) se funde con el fondo en tema oscuro: lo separamos con
   una línea superior de color de marca, visible en ambos temas. */
footer.bg-dark {
  border-top: 3px solid #155e8a;
}

/* Logo de la barra: versión normal en tema claro y versión blanca en tema oscuro. */
.logo-tema-oscuro {
  display: none;
}

[data-bs-theme="dark"] .logo-tema-claro {
  display: none;
}

[data-bs-theme="dark"] .logo-tema-oscuro {
  display: inline;
}