/* ══════════════════════════════════════════════════════════════════════════
   MARCA MICROZONE — la cabecera y los botones de TODAS las apps de la tienda
   ══════════════════════════════════════════════════════════════════════════

   ESTE FICHERO ES LA FUENTE ÚNICA. No se edita dentro de cada app: se edita
   aquí (~/Desktop/Proyectos/microzone-marca/) y se reparte con ./repartir.sh.
   Si dos apps se ven distintas, es que alguien tocó su copia: no hacerlo.

   Reglas del manual de marca (OneDrive → TIENDA MICROZONE → IMAGEN CORPORATIVA):
     azul #02113B · rojo #FF0000 · negro #000000 · letra Montserrat
     logo = chip cuadrado + palabra «microzone» en píxeles. Nunca redibujado.

   MEDIDAS FIJAS, iguales en las seis apps:
     cabecera 64 px de alto · chip 40 px · palabra 15 px · nombre de app 11 px
     enlaces 13 px · botones con radio de píldora · separación 10 px
   ────────────────────────────────────────────────────────────────────────── */

/* Montserrat AUTOALOJADA: hay apps (Publicaciones) con una política de
   seguridad que bloquea Google Fonts, y la letra tiene que ser la misma en
   todas. Los ficheros vienen del propio manual de marca. */
@font-face{font-family:"Montserrat";src:url("fuentes/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fuentes/Montserrat-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fuentes/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --mz-azul:#02113B;
  --mz-azul-2:#041A52;
  --mz-rojo:#FF0000;
  --mz-blanco:#fff;
  --mz-cabecera-alto:64px;
  --mz-letra:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ── LA CABECERA ────────────────────────────────────────────────────────── */
.mz-cabecera{
  background:linear-gradient(180deg,var(--mz-azul) 0%,var(--mz-azul-2) 100%);
  color:var(--mz-blanco);
  font-family:var(--mz-letra);
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 0 rgba(255,0,0,.35), 0 4px 18px rgba(2,17,59,.22);
}
.mz-cabecera-caja{
  height:var(--mz-cabecera-alto);
  max-width:1400px; margin:0 auto; padding:0 18px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}

/* ── LA MARCA (chip + palabra + nombre de la app) ───────────────────────── */
.mz-marca{
  display:flex; align-items:center; gap:12px; flex:none;
  text-decoration:none; color:inherit;
  padding:4px 10px 4px 4px; margin-left:-4px;
  border-radius:10px; transition:background .12s;
}
.mz-marca:hover,.mz-marca:focus-visible{background:rgba(255,255,255,.12)}
.mz-marca:focus-visible{outline:2px solid rgba(255,255,255,.5); outline-offset:1px}
/* El chip va SUELTO (rojo sobre el azul de la cabecera), sin caja ni recuadro
   detrás: sobre fondo oscuro es como se lee de verdad la marca, y es la
   decisión que ya estaba tomada en el Hub. Es cuadrado, así que alto y ancho
   van iguales o se deforma. */
.mz-chip{width:40px; height:40px; flex:none; display:block}
.mz-marca-texto{display:block; min-width:0}
/* La palabra mide 970x85 en el original: a 15 px de alto son 171 px de ancho.
   Se fija SOLO el alto y el ancho va solo, así nunca se corta ni se estira. */
.mz-palabra{height:15px; width:auto; display:block}
.mz-app{
  display:block; margin-top:3px;
  font-size:11px; font-weight:700; letter-spacing:.02em; opacity:.75;
  white-space:nowrap;
}

/* ── LA NAVEGACIÓN ──────────────────────────────────────────────────────── */
.mz-nav{
  display:flex; align-items:center; gap:4px;
  min-width:0; overflow-x:auto; scrollbar-width:none;
}
.mz-nav::-webkit-scrollbar{display:none}
.mz-nav a,.mz-nav button{
  font-family:var(--mz-letra);
  font-size:13px; font-weight:600; line-height:1;
  color:rgba(255,255,255,.78); text-decoration:none; white-space:nowrap;
  background:transparent; border:0; cursor:pointer;
  padding:9px 12px; border-radius:8px; transition:.12s;
}
.mz-nav a:hover,.mz-nav button:hover,
.mz-nav a:focus-visible,.mz-nav button:focus-visible{
  color:var(--mz-blanco); background:rgba(255,255,255,.12);
}
.mz-nav a.activo{color:var(--mz-blanco); background:rgba(255,255,255,.16)}

/* Botón de la acción principal de cada app (rojo de la casa). */
.mz-nav .mz-boton,.mz-boton{
  font-family:var(--mz-letra);
  font-size:13px; font-weight:700; line-height:1;
  background:var(--mz-rojo); color:var(--mz-blanco); text-decoration:none;
  border:0; border-radius:999px; padding:10px 16px; white-space:nowrap;
  cursor:pointer; transition:.12s;
}
.mz-nav .mz-boton:hover,.mz-boton:hover{background:#d90000; color:var(--mz-blanco)}

/* Botón secundario, con borde y sin relleno. */
.mz-nav .mz-boton-fino,.mz-boton-fino{
  font-family:var(--mz-letra);
  font-size:13px; font-weight:600; line-height:1;
  color:var(--mz-blanco); text-decoration:none; background:transparent;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:9px 15px; white-space:nowrap; cursor:pointer; transition:.12s;
}
.mz-nav .mz-boton-fino:hover,.mz-boton-fino:hover{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5);
}

/* La casita de vuelta al Hub. Va SIEMPRE la última y en todas las apps: es
   como el equipo vuelve al sitio donde están todas las herramientas. */
.mz-hub{flex:none}
.mz-hub::before{content:"⌂"; margin-right:6px; font-size:15px; line-height:1}

/* Datos sueltos de la cabecera (los contadores de Precios, por ejemplo). */
.mz-datos{display:flex; align-items:center; gap:18px; font-size:13px; color:rgba(255,255,255,.78)}
.mz-datos b{color:var(--mz-blanco); font-weight:700}

/* ── PANTALLAS ESTRECHAS (el móvil del mostrador) ───────────────────────── */
@media (max-width:820px){
  .mz-cabecera-caja{height:auto; padding:10px 14px; flex-wrap:wrap; gap:10px}
  .mz-nav{width:100%; padding-bottom:2px}
  .mz-datos{display:none}
}

/* Al imprimir (etiquetas, informes) la cabecera sobra. */
@media print{ .mz-cabecera{display:none !important} }