/* Tecnifum — Efecto vidrio y barra de navegación.
   SOLO para el sitio público: la intranet y el móvil van sólidos porque el
   desenfoque cuesta GPU en los equipos de gama baja que se usan en campo. */

/* =========================================================
   VIDRIO
   La capa sólida (--vidrio-solido) garantiza el contraste;
   el desenfoque únicamente aporta profundidad.
   ========================================================= */
.vidrio {
  position: relative;
  background-color: var(--vidrio-solido);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .vidrio {
    -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.5);
    backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.5);
  }
}

/* Realce superior: el brillo del canto del cristal */
.vidrio::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vidrio-realce), transparent);
  border-radius: inherit;
  pointer-events: none;
}

/* =========================================================
   BARRA DE NAVEGACIÓN
   ========================================================= */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-6);
  padding: var(--espacio-3) var(--espacio-6);
  border-radius: 0;
  border-inline: 0;
  border-top: 0;
}

.barra__marca {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.barra__logo {
  height: 40px;
  width: auto;
}

.barra__enlaces {
  display: none;
  gap: var(--espacio-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .barra__enlaces { display: flex; }
}

.barra__enlaces a {
  color: var(--texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.barra__enlaces a:hover {
  color: var(--marca);
}

.barra__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}