/*
 * Nación Tecnológica — bloques editables del encabezado público.
 * Franja superior: header.topbar  | Franja inferior: nav.menu
 *
 * Para cambiar un color sin editar SVG, establece su variable -svg en none
 * y modifica la variable -color de la MISMA franja.
 * Para sustituir el diseño, cambia el SVG versionado en images/brand/header-blocks/
 * o actualiza únicamente su variable -svg. Nunca hace falta alterar el HTML.
 * Las alturas son MÍNIMAS en píxeles CSS: el contenido puede necesitar más alto.
 */
:root {
  --nt-header-superior-svg: url('/images/brand/header-blocks/header-superior.svg');
  --nt-header-superior-color: #142844;
  --nt-header-superior-height: 90px;
  --nt-header-superior-height-tablet: 80px;
  --nt-header-superior-height-mobile: 68px;
  --nt-header-navegacion-svg: url('/images/brand/header-blocks/header-navegacion.svg');
  --nt-header-navegacion-color: #0a1b32;
  --nt-header-navegacion-height: 45px;
  --nt-header-superior-background-size: 100% 100%;
  --nt-header-navegacion-background-size: 100% 100%;
}

/* Conserva el contraste del logo azul y del menú en tema claro.
 * Se pueden añadir SVG claros después, editando sólo las variables siguientes. */
html.tema-claro,
body.tema-claro {
  --nt-header-superior-svg: none;
  --nt-header-superior-color: #ffffff;
  --nt-header-navegacion-svg: none;
  --nt-header-navegacion-color: #ffffff;
}

body:not(.admin-body) header.topbar {
  min-height: var(--nt-header-superior-height);
  background-color: var(--nt-header-superior-color);
  background-image: var(--nt-header-superior-svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--nt-header-superior-background-size);
}

body:not(.admin-body) nav.menu {
  min-height: var(--nt-header-navegacion-height);
  background-color: var(--nt-header-navegacion-color);
  background-image: var(--nt-header-navegacion-svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--nt-header-navegacion-background-size);
}

@media (max-width: 1100px) {
  body:not(.admin-body) header.topbar {
    min-height: var(--nt-header-superior-height-tablet);
  }
}

@media (max-width: 430px) {
  body:not(.admin-body) header.topbar {
    min-height: var(--nt-header-superior-height-mobile);
  }
}

/* Nota responsive: .topbar-inicio conserva el buscador en segunda fila
 * por debajo de 600 px; no forzamos height fijo ni recortamos contenido.
 * La navegación continúa desplazándose horizontalmente en pantallas estrechas. */

/* Productos añade lista y carrito a los controles comunes. A 320–600 px
 * necesitan una fila propia que pueda envolver, sin recortar el acceso de usuario. */
@media (max-width: 600px) {
  body:not(.admin-body) .topbar-catalogo:has(#abrir-carrito) .acciones-catalogo {
    flex-basis: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Evitar divisores dobles cuando se reduce el ancho de pantalla.
 * El SVG de navegación incorpora trazos de 1 px arriba y abajo, y el topbar
 * ya tiene su propio borde inferior. Hasta 1920 px se usa el color liso del
 * bloque, sin esos trazos; no se modifica la versión de escritorio ni
 * el indicador verde de la sección activa. */
@media (max-width: 1920px) {
  body:not(.admin-body) header.topbar {
    border-bottom: 0;
  }

  body:not(.admin-body) nav.menu {
    background-image: none;
  }
}