/* ============================================================================
   estilo_cabecera.css — Cabecera unificada de la intranet logic (2026-07-14)
   Diseño .cabecera-contenido + asides portado de la web pública
   (htdocs/css/main.css, ver rangos citados en cada bloque). Lo enlazan todas
   las páginas que pintan Menu_Superior_Flex(). Los estilos de tipografía se
   limitan a .cabecera/.lateral: el resto de la intranet sigue en Arial
   (estilos_1.css). Markup en php/functions_logic.php y logic/cart/cart.php.
   ============================================================================ */

/* ── Conservado del fichero anterior: layout de página en columna
      (.site-footer de estilos_1.css depende de esto para ir al fondo) ── */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* ── Fuente de la web pública (self-hosted, vía symlink logic/assets) ── */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-400i.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-700.ttf') format('truetype');
}

/* Tipografía SOLO en cabecera y laterales (no cambia el resto de la intranet) */
.cabecera, .lateral{ font-family: var(--fuente-base); }
.cabecera button, .cabecera input,
.lateral button, .lateral input, .lateral select{ font-family: inherit; }

/* ══ Tokens (main.css 24-110) ══ */
:root{
  /* ── Colores marca ── */
  --r: #8e1f30;
  --rO: #6a1724;
  --rC: #c78f98;
  --rC2: #e9d2d6;
  --rC3: #f1e7e9;
  --g: #545759;
  --gO: #1b1c1d;
  --g2: #6b6e70;
  --gM: #999;
  --gC: #ddd;
  --gC2: #efefef;
  --gC3: #eeeeee6b;
  --w2:#faf7f2;

  /* ── Tipografía base ── */
  --fuente-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";

  /* ── Escala tipográfica — BASE MÓVIL (<500px) ── */
  --fXS: clamp(0.86rem, calc(0.840rem + 0.100vw), 0.92rem);
  --fS:  clamp(1.02rem, calc(0.990rem + 0.140vw), 1.08rem);
  --fM:  clamp(1.10rem, calc(1.060rem + 0.200vw), 1.18rem);
  --fL:  clamp(1.17rem, calc(1.120rem + 0.220vw), 1.28rem);
  --fXL: clamp(1.28rem, calc(1.200rem + 0.350vw), 1.45rem);
  --f2XL: clamp(1.6rem, calc(1.443rem + 0.696vw), 2rem);
  --f3XL: clamp(2.1rem, calc(1.748rem + 1.565vw), 3rem);
  --f4XL: clamp(3rem,   calc(2.217rem + 3.478vw), 5rem);

  /* ── Espacios — BASE MÓVIL (768px -15%) ── */
  --eXS:  clamp(0.128rem, calc(0.110rem + 0.074vw), 0.170rem);
  --eS:   clamp(0.298rem, calc(0.247rem + 0.222vw), 0.425rem);
  --eM:   clamp(0.468rem, calc(0.401rem + 0.296vw), 0.638rem);
  --eL:   clamp(0.638rem, calc(0.554rem + 0.370vw), 0.850rem);
  --eX:   clamp(0.935rem, calc(0.802rem + 0.592vw), 1.275rem);
  --eXL:  clamp(1.190rem, calc(0.990rem + 0.887vw), 1.700rem);
  --e2XL: clamp(1.700rem, calc(1.368rem + 1.478vw), 2.550rem);
  --e3XL: clamp(2.210rem, calc(1.744rem + 2.070vw), 3.400rem);
  --e4XL: clamp(3rem, calc(3rem + 4vw), 8rem);

  /* ── Border-radius ── */
  --rP: 8px;
  --rM: 16px;
  --rB: 999px;

  /* ── Sombras ── */
  --shadowC: 0 2px 6px rgba(0, 0, 0, 0.18);

  /* ── Line-height ── */
  --lhXS: 1.45;
  --lhS:  1.50;
  --lhM:  1.50;
  --lhL:  1.45;
  --lhXL: 1.35;
  --lh2XL: 1.30;
  --lh3XL: 1.15;
  --lh4XL: 1.05;
}

/* ── 501px+: tipografía tablet ── */
@media (min-width: 501px){
  :root{
    --fXS: clamp(0.84rem, calc(0.820rem + 0.090vw), 0.90rem);
    --fS:  clamp(1.00rem, calc(0.970rem + 0.130vw), 1.06rem);
    --fM:  clamp(1.07rem, calc(1.030rem + 0.180vw), 1.16rem);
  }
}

/* ── 769px+: tipografía + espacios desktop ── */
@media (min-width: 769px){
  :root{
    --fXS: clamp(0.75rem, calc(0.730rem + 0.087vw), 0.8rem);
    --fS:  clamp(0.95rem, calc(0.930rem + 0.087vw), 1rem);
    --fM:  clamp(1.05rem, calc(0.991rem + 0.261vw), 1.2rem);
    --fL:  clamp(1.15rem, calc(1.091rem + 0.261vw), 1.3rem);
    --fXL: clamp(1.25rem, calc(1.152rem + 0.435vw), 1.5rem);

    --eXS:  clamp(0.15rem, calc(0.130rem + 0.087vw), 0.2rem);
    --eS:   clamp(0.35rem, calc(0.291rem + 0.261vw), 0.5rem);
    --eM:   clamp(0.55rem, calc(0.472rem + 0.348vw), 0.75rem);
    --eL:   clamp(0.75rem, calc(0.652rem + 0.435vw), 1rem);
    --eX:   clamp(1.1rem,  calc(0.943rem + 0.696vw), 1.5rem);
    --eXL:  clamp(1.4rem,  calc(1.165rem + 1.043vw), 2rem);
    --e2XL: clamp(2rem,    calc(1.609rem + 1.739vw), 3rem);
    --e3XL: clamp(2.6rem,  calc(2.052rem + 2.435vw), 4rem);
  }
}

/* ── Neutralización del button global de estilos_1.css ──
   estilos_1.css pinta TODO <button> rojo, negrita, width:calc(100% - 10px),
   margin:5px y :hover rojo (0-1-1). Aquí solo se neutralizan width/margin
   (todas las clases de botón de este fichero ya declaran su propio fondo,
   que a nivel de clase gana al elemento); los dos márgenes intencionados se
   redeclaran justo debajo con más especificidad, y los :hover sin fondo
   propio se fijan a transparente. Mismo problema documentado en tienda.css. */
.cabecera button, .lateral button{
  width: auto;
  margin: 0;
}
.cabecera button.cabecera-hamburguesa{ margin-right: var(--eL); }
.lateral button.lateral-menu__volver{ margin: var(--eL) var(--eM); }
.buscador__boton:hover,
.lateral__cerrar:hover,
.lateral-menu__volver:hover,
.stepper-btn--papelera:hover{ background: transparent; }

/* estilos_1.css también pinta TODO enlace `a, a:visited` en rojo #B13837 y
   negrita: a:visited (0,1,1) le gana a una clase (0,1,0) y los enlaces del
   menú ya visitados salían rojos. Base neutra en cabecera y laterales; los
   colores intencionados se redeclaran después (link-familia, botones). */
.cabecera a, .cabecera a:visited, .cabecera a:hover,
.lateral a, .lateral a:visited, .lateral a:hover{
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

/* ══ Iconos y botones-icono (main.css 227-269 + 1399-1412) ══ */
.cabecera-icono{ font: inherit; }

.cabecera .icono, .lateral .icono{
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.icono-boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS);
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--rP);
  border: 1px solid transparent;
  background: white;
  cursor: pointer;
  transition: border .2s ease, background .2s ease, color .2s ease;
  color: var(--rC);
}

.icono-boton:hover{
  border: 1px solid var(--rC2);
  background: white;
}

.icono-boton-carrito{ position: relative; }
.icono-boton--login{ color: var(--rC); }
.icono-carrito{ color: var(--rC); }

/* ══ Cabecera-top y saludo (main.css 277-283 + 829-847) ══ */
.cabecera-top{
  display: none;
  justify-content: flex-end;
  align-items: baseline;
  padding: var(--eXS) var(--eL) 0 0;
  font-size: var(--fXS);
}

.cabecera-saludo{
  padding: var(--eXS) var(--eL) 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-align: right;
  color: var(--g);
}

.cabecera-top span{
  color: var(--r);
  font-weight: 600;
  padding-right: var(--eL);
}

/* «Hola, Nombre» enlaza a /mi_cuenta.php */
.cabecera-top a.cabecera-top__cuenta{
  color: var(--r);
  font-weight: 600;
  padding-right: var(--eL);
  text-decoration: none;
}
.cabecera-top a.cabecera-top__cuenta:hover{ color: var(--rO); text-decoration: underline; }

/* Visitante de la tienda: enlace a iniciar sesión en la franja superior */
.cabecera-top .cabecera-top__login{
  width: auto;
  margin: 0;
  padding: 0 var(--eL) 0 0;
  background: none;
  border: 0;
  color: var(--r);
  font-size: var(--fXS);
  font-weight: 600;
  cursor: pointer;
}
.cabecera-top .cabecera-top__login:hover{ background: none; color: var(--rO); text-decoration: underline; }

/* ══ Buscador (main.css 397-449) ══ */
.buscador{
  display: flex;
  align-items: center;
  gap: var(--eS);
  padding: 0 var(--eM);
  border-radius: var(--rP);
  background: var(--gC2);
  width: 100%;
  outline: none;
}

.buscador:focus-within{
  outline: 1px solid var(--rC2);
  outline-offset: 2px;
}

.buscador__campo{
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--eS) 0;
  font: inherit;
  color: var(--gO);
}

.buscador__campo:focus{ outline: none; }
.buscador__campo::placeholder{ color: var(--gM); }

.buscador__boton{
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--rC);
}

.buscador__icono{
  width: var(--eXL);
  height: var(--eXL);
}

.buscador__icono:hover{ fill: var(--g); }

/* Botón de escaneo (cámara) dentro de la píldora del buscador: anula la caja
   de la base .btn-escanear (borde, min-width 46px, padding) y toma el tamaño
   de la lupa. El icono lo inyecta barcode-scanner.js en .btn-escanear:empty. */
.buscador .buscador__escanear{
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  min-width: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--r);          /* rojo corporativo, como el resto de .btn-escanear: el trazo fino en --rC se perdía */
  cursor: pointer;
}
.buscador .buscador__escanear:hover,
.buscador .buscador__escanear:focus{ background: transparent; box-shadow: none; border: none; color: var(--g); }
.buscador .buscador__escanear svg{
  width: var(--eXL);
  height: var(--eXL);
  fill: currentColor;
}

@media (min-width: 769px){
  .buscador__icono{
    width: var(--eL);
    height: var(--eL);
  }
  .buscador .buscador__escanear svg{
    width: var(--eL);
    height: var(--eL);
  }
}

/* ══ Cabecera (main.css 759-912) ══ */
.cabecera{
  position: relative;
  top: 0;
  z-index: 950;
  background: white;
  border-bottom: 1px solid var(--rC2);
  box-shadow: 0 2px 8px var(--rC3);
  margin-bottom: 1em;
}

.cabecera-contenido{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eXS);
  padding: var(--eS) 5px;
  border-bottom: 1px solid var(--rC2);
  flex-wrap: wrap;
  margin: 0;
}

.cabecera-identidad, .cabecera-buscador, .cabecera-acciones{
  display: flex;
  align-items: center;
}

/* ── Hamburguesa (siempre visible: abre el aside del catálogo) ── */
.cabecera-hamburguesa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: var(--eXS);
  min-width: 44px;
  min-height: 44px;
  order: 0;
  margin-right: var(--eL);
}
.cabecera-hamburguesa .icono{
  width: 1.1rem;
  height: 1.1rem;
}

.cabecera-identidad{
  flex: 1 1 auto;
  gap: var(--eM);
  order: 1;
  min-width: 0;
  margin: 0 var(--e2XL) 0 0;
}

/* ── Buscador (móvil base: fila completa) ── */
.cabecera-buscador{
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
  order: 3;
  margin: var(--eXS) var(--eM) var(--eS) var(--eM);
}

/* ── Acciones (móvil base) ── */
.cabecera-acciones{
  flex: 0 0 auto;
  gap: 0;
  order: 2;
}

/* En logic la acción Agenda es un <a>: siempre visible como botón-icono
   (la web pública ocultaba los <a> de acciones en móvil, main.css 826). */
.cabecera-acciones a.icono-boton{ display: inline-flex; }

/* ── Logo ── */
.logo{
  display: inline-flex;
  align-items: center;
  color: inherit;
  margin-top: -3px;
}

.logo::after{ display: none; }

.logo-img{
  display: block;
  height: 28px;
  width: auto;
}

/* ── Badge carrito (id="Carrito", contrato con display_cart) ── */
.badge-carrito{
  font-weight: 700;
  font-size: var(--fXS);
  line-height: 1;
  padding: 0;
  margin-left: 0;
  color: var(--gO);
}

/* Wrapper para posicionar el indicador relativo al icono SVG */
.icono-boton-carrito-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.indicador-carro{
  position: absolute;
  top: -2px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--rB);
  background-color: var(--r);
  pointer-events: none;
  opacity: 0;
}

.indicador-carro-activo{
  opacity: 1;
  animation: cabecera-carrito-pulso 1.8s ease-in-out infinite;
  top: -4px;
  right: 5px;
  width: 5px;
  height: 5px;
}

@keyframes cabecera-carrito-pulso{
  0%{ opacity: 0.2; }
  50%{ opacity: 1; }
  100%{ opacity: 0.2; }
}

/* Variante en línea (aside usuario: punto junto a "Agenda comercial") */
.indicador-carro--inline{
  position: static;
  display: inline-block;
  margin-left: var(--eS);
  vertical-align: middle;
}

/* ══ Responsive cabecera (main.css 1285-1389 + 1413-1491, sin cta/slogan) ══ */
@media (min-width: 769px){
  .cabecera-contenido{
    flex-wrap: wrap;
    margin: 0;
  }

  .cabecera-acciones{
    order: 2;
    flex: 0 0 auto;
    gap: var(--eS);
  }

  .cabecera-buscador{
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px){
  .cabecera-hamburguesa::after{
    content: "Catálogo";
    font-size: var(--fS);
    font-weight: 400; /* el button global de estilos_1 es bold */
    color: var(--g);
    padding-left: var(--eXS);
  }
  .cabecera-buscador{
    max-width: 100%;
    margin: var(--eXS) var(--eM) var(--eS) 0;
  }
  .cabecera-contenido{ padding: var(--eS) var(--eS) var(--eS) var(--eL); }
  .logo-img{ height: 35px; margin-top: -.25rem; }
  .cabecera-identidad{ margin: 0 var(--eXL); }
}

@media (min-width: 1025px){
  .cabecera-contenido{
    flex-wrap: nowrap;
  }

  .cabecera-identidad{
    gap: var(--eL);
    flex: 0 1 auto;
  }

  .cabecera-buscador{
    order: 2;
    flex: 1 1 auto;
    max-width: 600px;
    margin: 0 auto;
  }

  .cabecera-acciones{
    order: 3;
    gap: var(--eS);
  }

  .cabecera-top{ display: flex; }
}

@media (min-width: 1024px){
  .cabecera-buscador{ max-width: 100%; margin: 0 var(--eL) 0 0; }
  .buscador{ border-radius: var(--rB); }
  button[data-js="boton-menu"]{ margin-left: -.3rem; }
  .cabecera-top{ padding: var(--eM) var(--eXL) 0; }
  .cabecera-contenido{ padding: 0 var(--eL) var(--eS) var(--eXL); }
  .logo-img{ height: 40px; margin-top: -.5rem; }
}

@media (min-width: 1281px){
  .cabecera-buscador{ max-width: 100%; margin-right: var(--eXL); }
  .logo-img{ height: 55px; margin-top: -1rem; }
  .cabecera-identidad{ margin: 0 var(--eXL); }
}

/* ══ Overlay + laterales (main.css 3073-3147) ══ */
.lateral-overlay{
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease-out, visibility .25s ease-out;
}

.lateral-overlay--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lateral{
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1200;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform .25s ease-out, opacity .25s ease-out, visibility .25s ease-out;
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lateral--derecha{
  right: 0;
  left: 0;
  transform: translateX(100%);
}

.lateral--izquierda{
  left: 0;
  right: 0;
  transform: translateX(-100%);
}

.lateral--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

@media (min-width: 501px){
  .lateral{
    width: clamp(20vw, 25rem, 100vw);
  }

  .lateral--derecha{
    left: auto;
  }

  .lateral--izquierda{
    right: auto;
  }
}

/* ══ Cabecera del lateral (main.css 3149-3202) ══ */
.lateral__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eM);
  padding: var(--eM) var(--eL);
  background: var(--r);
  color: white;
}

.lateral__logo{
  display: block;
  max-width: 30%;
  height: var(--eXL);
}

/* Logos de asociado sobre el rojo del lateral: se sirven versiones
   pregeneradas quemadas a blanco (images/aside_*.png, ver
   local/generar_logos_aside.php). */
.lateral__logo--asociado{
  height: auto;
  max-height: calc(var(--eXL) + 6px);
  max-width: 45%;
  object-fit: contain;
}
/* Fallback si falta la versión pregenerada: solo funciona bien con PNG de
   fondo transparente (los opacos quedarían como un rectángulo blanco). */
.lateral__logo--quemar{ filter: brightness(0) invert(1); }

.lateral__cerrar{
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--eXS);
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lateral__cerrar:focus-visible{
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: var(--rP);
}

.lateral__cerrar-icono{
  border-radius: 50%;
  padding: 4px;
  width: 24px;
  height: 24px;
  fill: white;
  transition: background 0.2s ease, fill 0.2s ease;
}

.lateral__cerrar-icono:hover{
  background: var(--rC2);
  fill: var(--r);
}

/* ══ Contenido y pie del lateral (main.css 3204-3282) ══ */
.lateral-contenido, .lateral__contenido{
  padding: var(--eL);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.lateral-pie{
  padding: var(--eL);
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  border-top: 1px dotted var(--rC);
  padding-top: var(--eL);
}

.lateral-contenido-cabecera{
  display: flex;
  align-items: center;
  gap: var(--eS);
}

.lateral-cabecera-titulo{
  margin: 0;
  font-size: var(--fL);
  line-height: var(--lhL);
  font-weight: 600;
  width: 100%;
}

.lateral-cabecera-frase-info{
  padding: var(--eS);
  margin: 0 0 var(--eL);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
  background: var(--gC3);
  border-radius: var(--rP);
}

.lateral-pie-total{
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--eL);
}

.lateral-pie-total-label{
  font-size: var(--fS);
  color: var(--g);
}

.lateral-acciones-pie{
  display: flex;
  justify-content: flex-end;
  gap: var(--eS);
  flex-wrap: wrap;
}

/* ══ Botón de escanear código de barras (barcode-scanner.js) ══
   Estilos base compartidos por carrito/articulos/inventario/aside. El icono
   sale del sprite /assets/iconos.svg#i-escanear. width/margin neutralizan el
   button global de estilos_1.css (width:calc(100% - 10px); margin:5px) y el
   ::after invisible amplía la zona clicable a ~48px sin engordar el layout.
   articulos.css tiene una variante icono-sin-caja para el campo de búsqueda. */
.ean-scan-wrap{
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.ean-scan-wrap input{
  flex: 1;
  min-width: 0;
}

.btn-escanear{
  position: relative;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 10px;
  min-width: 46px;
  background: #fff;
  border: 1px solid var(--gC, #ccc);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  color: var(--r, #8e1f30);
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.btn-escanear::after{
  content: "";
  position: absolute;
  inset: -6px;
}

.btn-escanear svg{
  width: 26px;
  height: 26px;
  display: block;
}

.btn-escanear:hover{
  background: #fff;
  border-color: var(--r, #8e1f30);
  box-shadow: 0 0 0 3px rgba(142, 31, 48, 0.1);
}

/* En el pie del aside: alineado a la izquierda, a la altura de "Seguir comprando" */
.lateral-acciones-pie .lateral-escanear{
  margin-right: auto;
}

.aside-carrito__vacio-escanear{
  margin: var(--eS) 0 0;
}

/* ══ Mini-carrito: líneas (main.css 945-1111 + 3284-3341) ══ */
.lineas-aside{
  border: 0;
  padding: 0;
  margin: var(--eL) 0 var(--eM);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sublinea{
  display: flex; align-items: center; gap: var(--eM);
  padding: 4px 0;
  flex-wrap: wrap;
  position: relative;
  transition: opacity .15s ease;
  border-bottom: 1px dotted var(--gC);
}

/* Estado "actualizando": opacidad reducida + spinner overlay y bloqueo
   de interacción para evitar dobles clics mientras viaja el AJAX. */
.sublinea--actualizando{
  opacity: .55;
  pointer-events: none;
}
.sublinea--actualizando::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.5rem; height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid var(--rC);
  border-top-color: transparent;
  border-radius: 50%;
  animation: crisol-spin .7s linear infinite;
  pointer-events: none;
}

@keyframes crisol-spin{
  to { transform: rotate(360deg); }
}

.sublinea__info{ flex: 1 1 14rem; min-width: 14rem; }
.sublinea__descripcion{ margin: 0; font-size: .95em; }
.sublinea__atributos{ font-size: 0.85em; color: #555; margin: 0; }
.sublinea__precio-ud{ font-size: 0.8em; color: #888; margin: 2px 0 0; }
.sublinea__stepper-precio{
  display: flex; align-items: baseline; gap: 8px;
  flex-shrink: 0; margin-left: auto;
}

/* Foto de línea */
.imagen-aside{
  display: block;
  width: var(--e2XL);
}

/* Papelera integrada en el stepper: sustituye al "−" cuando la cantidad
   está en el mínimo del múltiplo de venta (patrón de la web pública). El
   tamaño/fondo/hover los hereda de .stepper button. */
.stepper-btn--papelera .icono,
.stepper-btn--papelera .stepper-icono{ width: .95rem; height: .95rem; }
.stepper-btn--papelera:hover{ color: var(--r); }

/* En el mini-carrito replicamos el layout móvil de /carrito/: descripciones
   a fila completa y stepper+subtotal en fila completa debajo. */
#lateral-carrito .lineas-aside .sublinea{ flex-wrap: wrap; }
#lateral-carrito .lineas-aside .sublinea__info{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
#lateral-carrito .lineas-aside .sublinea__stepper-precio{
  flex: 0 0 100%;
  margin-left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Stepper compacto dentro del mini-carrito */
.lineas-aside .stepper{
  width: auto;
  padding: 2px;
  gap: 2px;
}
.lineas-aside .stepper button{
  width: 1.6rem;
  height: 1.6rem;
  font-size: var(--fL);
}
.lineas-aside .stepper input{
  width: 2.25rem;
  min-width: 2.25rem;
  font-size: var(--fS);
}

/* Cliente del carrito (staff: asignado desde Clientes) */
.aside-carrito__cliente{
  margin: 0 0 var(--eM);
  font-size: var(--fXS);
  color: var(--g);
}
.aside-carrito__cliente--aviso{
  color: #8a6d3b;
  background: #fcf8e3;
  border-radius: var(--rP);
  padding: var(--eS);
}

/* Estado vacío */
.aside-carrito__vacio-pasos{ margin: var(--eL) 0; }
.aside-carrito__vacio-cta{ margin-top: var(--eL); }

/* ══ Precio con decimales en superíndice (main.css 1522-1554) ══ */
.precioFormato{
  color: var(--r);
  font-size: var(--f3XL);
  display: flex;
  width: fit-content;
  align-items: start;
  line-height: 1;
  margin: 0;
}

.precioFormato sup{
  font-size: var(--fXL);
  font-weight: 500;
  display: flex;
  align-items: center;
}
.precioFormato sup span{
  font-weight: 300;
  font-size: var(--fL);
  margin-left: var(--eXS);
}

.precioFormato.linea-subtotal{
  font-size: var(--fXL);
  min-width: 70px;
  justify-content: flex-end;
}
.precioFormato.linea-subtotal sup{
  font-size: var(--fXS);
}
.precioFormato.linea-subtotal sup span{
  font-size: var(--fXS);
}

/* El total del pie hereda el tamaño grande de .precioFormato */
.lateral-pie-total .precioFormato{ font-size: var(--f2XL); }

/* ══ Stepper (main.css 1652-1713) ══ */
.stepper{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  border: 1px solid var(--rC);
  padding: var(--eS);
  border-radius: var(--rP);
  background: white;
  justify-content: space-between;
}

.stepper button{
  width: var(--eXL);
  height: var(--eXL);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: white;
  border-radius: var(--rB);
  cursor: pointer;
  color: var(--rC);
  font-size: var(--fXL);
}

.stepper button:hover{ background: var(--rC2); color: var(--gO); }

.stepper input{
  width: 3.75rem;
  min-width: 3.75rem;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: var(--fM);
  font-weight: 500;
  color: var(--gO);
  padding: 0;
}
.stepper input:focus,
.stepper input:focus-visible{
  outline: none;
  box-shadow: none;
  color: var(--gM);
}

.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.stepper input[type="number"]{ -moz-appearance: textfield; }

/* ══ Botones (main.css 1786-1823) ══ */
.boton-principal, .boton-secundario{
  cursor: pointer;
  font-size: var(--fM);
  font-weight: 500;
  border-radius: var(--rP);
  border: 0;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Los <a>-botón conservan su color pese a la neutralización de enlaces del
   inicio del fichero (.lateral a con (0,1,1) ganaría a .boton-* (0,1,0)). */
a.boton-principal, a.boton-principal:visited, a.boton-principal:hover{ color: white; }
a.boton-secundario, a.boton-secundario:visited{ color: var(--gO); }
a.boton-secundario:hover{ color: white; }
a.boton-principal:hover,
a.boton-secundario:hover{ text-decoration: none; }
a.boton-principal::after,
a.boton-secundario::after{ display: none !important; }

.boton-principal{
  background: var(--r);
  border: 1px solid var(--r);
  color: white;
  padding: var(--eM);
}

.boton-secundario{
  background: var(--gC);
  color: var(--gO);
  padding: var(--eM);
  border: 1px solid var(--gM);
}

.boton-principal:hover{ background: var(--gO); border: 1px solid var(--gO); color: white; }
.boton-secundario:hover{ background: var(--gO); color: white; }
.apariencia-boton:hover{ color: white; }

/* ══ Aside usuario: card + avatar (main.css 3586-3617 + 3719-3797) ══ */
.aside-login__card{
  display: flex;
  align-items: center;
  gap: var(--eM);
  border: 1px solid var(--gC3);
  border-radius: var(--rM);
  padding: var(--eM);
}

.aside-login__avatar{
  width: calc(var(--eXL) + var(--eS));
  height: calc(var(--eXL) + var(--eS));
  border-radius: var(--rB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.78);
  flex: 0 0 auto;
}

.aside-login__card-textos{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
}

.aside-login__card-nombre{ margin: 0; font-weight: 700; }
.aside-login__card-rol{ margin: 0; color: rgba(0,0,0,.55); font-size: var(--fXS); }

/* Card-enlace a Mi cuenta (toda la sección del avatar es clicable) */
a.aside-login__card--enlace, a.aside-login__card--enlace:visited{
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  transition: border-color .15s ease;
}
a.aside-login__card--enlace:hover{ border-color: var(--rC); color: inherit; }
.aside-login__card-flecha{
  margin-left: auto;
  width: .8rem;
  height: .8rem;
  flex: 0 0 auto;
  fill: var(--rC3);
}
a.aside-login__card--enlace:hover .aside-login__card-flecha{ fill: var(--rC); }

/* Aside de login de visitante (tienda pública, 2026-10-16;
   main.css aside-login__*) */
.aside-login__texto{
  margin: var(--eM) 0 var(--eS);
  color: var(--gO);
  font-size: var(--fS);
  line-height: 1.35;
}
.aside-login__form{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eM);
}
.lateral .aside-login__input{
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--gC);
  background: white;
  font-size: var(--fS);
}
.lateral .boton-principal--ancho{
  width: 100%;
  margin: 0;
  justify-content: center;
}
.aside-login__msg{ margin: var(--eM) 0 0; font-size: var(--fXS); text-align: center; }
.aside-login__msg a{ color: var(--r); }
.aside-login__error{
  margin: var(--eM) 0 0;
  padding: var(--eS) var(--eM);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--rP);
  color: #991b1b;
  font-size: var(--fXS);
}
.aside-login__alta{
  margin-top: var(--eXL);
  padding-top: var(--eL);
  border-top: 1px dotted var(--rC);
}
.aside-login__alta-titulo{ margin: 0; font-weight: 700; }

/* Solicitud de acceso dentro del aside (inicio público, 2026-10-19) */
.aside-solacc__volver{ margin: 0 0 var(--eM); font-size: var(--fXS); }
.aside-solacc__volver a{ color: var(--r); }
.aside-solacc .aside-login__error{ margin: 0 0 var(--eM); }
.aside-solacc__ok{
  margin: var(--eM) 0 0;
  padding: var(--eM);
  background: #e6f4e6;
  border: 1px solid #bfe0bf;
  border-radius: var(--rP);
  color: #2d6a2d;
  font-size: var(--fS);
  line-height: 1.4;
}
.aside-solacc__hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.aside-solacc__check{
  display: flex;
  gap: var(--eS);
  align-items: flex-start;
  color: var(--gO);
  font-size: var(--fXS);
  line-height: 1.35;
}
.aside-solacc__check input{ margin: 0.15em 0 0; flex-shrink: 0; width: auto; }
.lateral .aside-login__input.aside-solacc--error{ border-color: #b94a48; background: #fffafa; }
.aside-solacc__check.aside-solacc--error{ color: #b94a48; }

/* Pie del aside usuario: Terminar de trabajar (izda) + Desconectar (dcha) */
.lateral-acciones-pie--repartida{ justify-content: space-between; }

.lateral-menu-cuenta{
  margin-top: var(--eM);
  border-top: 1px solid var(--gC3);
  padding-top: var(--eXS);
}
.lateral-menu-cuenta ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Conmutador de cliente activo (FL4) dentro del aside */
.aside-usuario__conmutador{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  margin: var(--eM) 0 0;
  padding: var(--eM);
  border: 1px solid var(--gC3);
  border-radius: var(--rM);
}
.aside-usuario__conmutador-label{
  font-size: var(--fXS);
  color: var(--g);
}
.aside-usuario__conmutador select{
  font-size: var(--fS);
  padding: var(--eS);
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: white;
  color: var(--gO);
  max-width: 100%;
}

/* ── Badge de GPS (aviso "GPS desactivado", sólo staff, bajo el hero) ── */
.is-hidden{ display: none !important; }

.aside-gps{
  margin: var(--eM) 0 0;
  padding: var(--eM);
  border: 1px solid #e0b400;
  background: #fff8e1;
  border-radius: var(--rM);
  color: #7a5c00;
}
.aside-gps__fila{ display: flex; align-items: center; gap: var(--eM); }
.aside-gps__icono{ width: 1.6rem; height: 1.6rem; flex: 0 0 auto; color: #c77700; }
.aside-gps__textos{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.aside-gps__titulo{ font-weight: 700; font-size: var(--fS); }
.aside-gps__sub{ font-size: var(--fXS); color: #8a6d1a; }

/* Interruptor on/off del badge */
.lateral .aside-gps__toggle{
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--rB);
  background: #c9a94a;
  cursor: pointer;
  transition: background .15s ease;
}
.lateral .aside-gps__toggle:hover{ background: #b89a42; }
.lateral .aside-gps__toggle[aria-checked="true"]{ background: #4CAF50; }
.lateral .aside-gps__toggle[aria-checked="true"]:hover{ background: #43a047; }
.aside-gps__thumb{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.aside-gps__toggle[aria-checked="true"] .aside-gps__thumb{ transform: translateX(18px); }

.aside-gps__ayuda{
  margin-top: var(--eM);
  padding-top: var(--eS);
  border-top: 1px dashed #e0b400;
  font-size: var(--fXS);
  color: #7a5c00;
}
.aside-gps__ayuda p{ margin: 0 0 var(--eS); }
.aside-gps__ayuda ol{ margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--eXS); }

.icono-boton--logueado svg, .icono-boton--logueado .icono{ fill: var(--r); }

.cabecera-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--r);
  color: #fff;
  font-size: var(--fXS);
  font-weight: 600;
  line-height: var(--fXS);
  letter-spacing: 0.5px;
}

/* ══ Aside menú del catálogo (main.css 3799-3937) ══ */
.lateral__titulo{
  margin: 0 0 var(--eXS);
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 600;
}

.lateral__frase{
  margin: 0 0 var(--eL);
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--g);
}

/* Vista 1: familias */
.lateral-icono-enlaces{ padding-left: 0; margin: var(--eXL) 0; list-style: none; }

.lateral-icono-enlace{
  display: flex;
  align-items: center;
  gap: var(--eS);
  margin-left: var(--eS);
  border-bottom: 1px dotted var(--gC);
}

.lateral-icono-enlace:first-child{ border-top: none; }
.lateral-icono-enlace:hover > a{ color: var(--rC); }

.lateral-enlace-texto{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eS);
  text-decoration: none;
  color: inherit;
  padding: .8rem 0;
  min-height: 50px;
  line-height: 1.2;
}
.lateral-enlace-texto span{ font-size: 1rem; }

@media (min-width: 501px){
  .lateral-enlace-texto{
    min-height: 40px;
  }
}
.lateral-icono-enlace-nombre{
    flex-grow: 1;
}

.lateral-icono-enlace-flecha{
  width: .8rem;
  height: .8rem;
  flex-shrink: 0;
  fill: var(--rC3);
}

.lateral-icono-enlace:hover .lateral-icono-enlace-flecha{ fill: var(--rC); }

/* Vista 2: subfamilias */
.lateral-menu__volver{
  border: none;
  background: none;
  padding: 0;
  margin: var(--eL) var(--eM);
  font-size: var(--fM);
  line-height: var(--lhXS);
  cursor: pointer;
  color: var(--rC);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
}

.lateral-menu__volver:hover{ color: var(--r); }
.lateral-menu__volver-icono{ transform: rotate(180deg); }
.lateral-menu__volver-texto{ font-size: .8rem; }

.lateral-menu__titulo-familia{
  font-size: var(--f2XL);
  line-height: var(--lhXL);
  font-weight: 600;
  margin: 0 0 var(--eL) var(--eXL);
  padding-bottom: var(--eS);
  color: var(--gO);
  border-bottom: 1px dotted var(--rC);
}

.lateral-menu__link-familia{
  display: inline-block;
  margin: 0 0 var(--eM) var(--eXL);
  font-size: .8rem;
  line-height: var(--lhXS);
  color: var(--r);
}

/* ── Conmutador "Filtrar en stock" (aside del catálogo y páginas tienda) ── */
a.filtro-stock, a.filtro-stock:visited, .filtro-stock{
  display: inline-flex;
  align-items: center;
  gap: var(--eS);
  margin: 0 0 var(--eL);
  font-size: var(--fS);
  font-weight: 400;
  color: var(--g);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
.filtro-stock:hover .filtro-stock__texto{ color: var(--gO); }
.filtro-stock__pista{
  position: relative;
  flex: 0 0 auto;
  width: 2.3rem;
  height: 1.25rem;
  border-radius: var(--rB);
  background: var(--gC);
  transition: background .2s ease;
}
.filtro-stock__pista::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: left .2s ease;
}
.filtro-stock--on .filtro-stock__pista{ background: #1e7d32; }
.filtro-stock--on .filtro-stock__pista::after{ left: calc(100% - 1.25rem + 2px); }
.filtro-stock--on .filtro-stock__texto{ color: #1e7d32; font-weight: 600; }

.lateral-menu__subfamilias{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eS);
}

.lateral-menu__subfamilia{
  display: flex;
  align-items: center;
  gap: var(--eM);
  padding: .6rem 0;
  margin-left: var(--eS);
}
.lateral-menu__subfamilia-enlace{ font-size: 1rem; text-decoration: none; }
.lateral-menu__subfamilia-nombre{ color: var(--g); }
.lateral-menu__subfamilia:hover span{ color: var(--rC); }

.lateral-menu__subfamilia-img{
  width: calc(var(--eXL) + var(--eS));
  height: calc(var(--eXL) + var(--eS));
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(.7);
  transition: filter .2s ease;
  display: inline-block;
  background: var(--gC3);
  border-radius: var(--rP);
}

.lateral-menu__subfamilia:hover .lateral-menu__subfamilia-img{ filter: grayscale(0); }

.lateral-menu__error{
  color: var(--r);
  font-size: var(--fS);
  line-height: var(--lhS);
}

/* ══ Aside de agenda (comerciales) — markup en logic/agenda-relay.php ══ */
.aside-agenda__aviso{
  padding: var(--eS);
  margin: 0 0 var(--eM);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: #B45309;
  background: #FFF8E1;
  border: 1px solid #FF9800;
  border-radius: var(--rP);
}

.aside-agenda__nueva{ justify-content: center; margin-bottom: var(--eM); }

.aside-agenda__lista{ display: flex; flex-direction: column; gap: var(--eS); }

.aside-agenda__item{
  display: flex;
  align-items: center;
  gap: var(--eM);
  padding: var(--eS) 0;
  border-bottom: 1px solid var(--gC2);
  min-width: 0;
  cursor: pointer;
}
.aside-agenda__item:hover strong{ color: var(--r); }

.aside-agenda__item-hora{
  font-weight: 600;
  font-size: var(--fS);
  white-space: nowrap;
}

.aside-agenda__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.aside-agenda__dot--pendiente{ background: #FF9800; }
.aside-agenda__dot--iniciada{ background: #43A047; }
.aside-agenda__dot--cerrada{ background: var(--gM); }
.aside-agenda__dot--detenida{ background: var(--r); }

.aside-agenda__item-textos{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.aside-agenda__item-textos strong,
.aside-agenda__item-textos span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aside-agenda__item-textos span{
  color: var(--g);
  font-size: var(--fXS);
}

.aside-agenda__titulo-seccion{
  margin-top: var(--eL);
  font-weight: 600;
  font-size: var(--fS);
  color: #B45309;
}

.aside-agenda__vacio,
.aside-carrito__buscador-cliente .buscador-cliente__vacio{
  margin: var(--eM) 0;
  font-size: var(--fS);
  color: var(--g);
}

.aside-agenda__ficha{ display: flex; flex-direction: column; gap: var(--eM); }

.aside-agenda__estado-linea{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eS);
}

.aside-agenda__chip{
  padding: 2px 12px;
  border-radius: var(--rB);
  font-size: var(--fXS);
  font-weight: 600;
  color: white;
  background: #FF9800;
}
.aside-agenda__chip--iniciada{ background: #43A047; }
.aside-agenda__chip--cerrada{ background: var(--gM); }
.aside-agenda__chip--detenida{ background: var(--r); }

.aside-agenda__comercial{ font-size: var(--fXS); color: var(--g); }

.aside-agenda__cliente{ display: flex; flex-direction: column; min-width: 0; }
.aside-agenda__cliente strong{ font-size: var(--fM); }
.aside-agenda__cliente span{ font-size: var(--fXS); color: var(--g); }
.aside-agenda__cliente:hover strong{ color: var(--r); }

.aside-agenda__telefono{ font-size: var(--fS); }

.aside-agenda__seleccionada{
  padding: var(--eS);
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: #4C1D95;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid #7C3AED;
  border-radius: var(--rP);
}

.aside-agenda__campos{ display: flex; flex-direction: column; gap: var(--eS); }

.aside-agenda__fila{ display: flex; gap: var(--eS); }

.aside-agenda__campo{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-size: var(--fXS);
  color: var(--g);
}
.aside-agenda__campo--fecha{ flex: 1.6; }
.aside-agenda__campo input,
.aside-agenda__campo select,
.aside-agenda__campo textarea,
.aside-agenda__buscador input{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--eS);
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  font-family: inherit;
  font-size: var(--fS);
  color: var(--gO);
  background: white;
}
.aside-agenda__campo input:disabled{ background: var(--gC2); color: var(--g); }
.aside-agenda__campo textarea{ resize: vertical; }

.aside-agenda__contacto-fila{
  display: flex;
  gap: var(--eS);
  align-items: stretch;
}
.aside-agenda__contacto-fila select,
.aside-agenda__contacto-fila input{ flex: 1; min-width: 0; }
.aside-agenda__btn-mas{
  flex: none;
  /* min-width (no width): el reset .lateral button{width:auto} pisa width */
  min-width: 2.6em;
  padding: 0 var(--eS);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fM);
  font-weight: 600;
  color: var(--gO);
  background: var(--gC);
  border: 1px solid var(--gM);
  border-radius: var(--rP);
  cursor: pointer;
}
.aside-agenda__btn-mas:hover{ background: var(--gO); color: white; }

.aside-agenda__crear-ficha{
  margin-top: var(--eXS);
  justify-content: center;
  font-size: var(--fXS);
}

.aside-agenda__docs{ display: flex; flex-direction: column; gap: var(--eXS); }
.aside-agenda__docs a{ font-size: var(--fS); font-weight: 600; color: #7C3AED; }
.aside-agenda__docs a:hover{ text-decoration: underline; }

/* Cobros en "Documentos generados" (verde, espejo del doc-cobro de agenda.php) */
.aside-agenda__docs a.aside-agenda__doc-cobro{
  display: flex;
  justify-content: space-between;
  gap: var(--eS);
  color: #2E7D32;
}
.aside-agenda__doc-importe{ white-space: nowrap; }

/* ── Tarjeta "Agenda de hoy": espejo de .agenda-day-card is-today de agenda.php
      (CSS inline de agenda.php ~91-380), traducido a los tokens del aside y con
      los colores de docs.css hardcodeados (docs.css no carga en todas las
      páginas que pintan la cabecera) ── */
.lateral .agenda-day-card{
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rM);
  overflow: hidden;
  box-shadow: var(--shadowC);
  /* El overflow:hidden anula el tamaño mínimo automático del flex-item y el
     .lateral-contenido (flex column) encogía la tarjeta recortando visitas:
     columna flex con scroll propio en las entradas y un mínimo visible */
  display: flex;
  flex-direction: column;
  min-height: 12rem;
}
.lateral .agenda-day-card .agenda-day-entries{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lateral .agenda-day-header{
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  color: white;
  padding: var(--eS) var(--eM);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fM);
}
.lateral .agenda-day-header .agenda-day-name{ text-transform: capitalize; }
.lateral .agenda-day-header .agenda-day-date{ font-weight: 700; }
.lateral .agenda-day-card.is-today .agenda-day-header{
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
}
.lateral .agenda-day-entries{
  padding: var(--eS);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
}
.lateral .agenda-day-empty{
  padding: var(--eL);
  text-align: center;
  color: var(--gM);
}
.lateral .agenda-day-footer{
  padding: var(--eS) var(--eM);
  border-top: 1px solid var(--gC);
  display: flex;
  justify-content: flex-end;
}
.lateral .agenda-day-total{
  font-weight: 700;
  color: #2E7D32;
}

/* Entradas del listado con el aspecto de agenda.php: tarjetita gris con borde
   izquierdo según el estado (colores de docs.css) */
.lateral .agenda-entry{
  background: #FAFAFA;
  border: 1px solid var(--gC);
  border-left: 3px solid #7C3AED;
  border-radius: var(--rP);
  padding: var(--eS);
}
.lateral .agenda-entry:hover{ background: white; }
.lateral .agenda-entry--pendiente{ border-left-color: #FF9800; }
.lateral .agenda-entry--iniciada{ border-left-color: #2196F3; }
.lateral .agenda-entry--cerrada{ border-left-color: #4CAF50; }
.lateral .agenda-entry--detenida{ border-left-color: #F44336; }

.aside-agenda__item-cobro{
  flex: none;
  align-self: center;
  font-weight: 700;
  font-size: var(--fS);
  color: #2E7D32;
  white-space: nowrap;
}

/* Chips de documentos dentro de la fila (Serie/Numero, como agenda.php).
   El selector largo gana al ellipsis de .aside-agenda__item-textos span */
.aside-agenda__item-textos .aside-agenda__item-docs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eXS);
  margin-top: 2px;
  overflow: visible;
  white-space: normal;
}
.aside-agenda__item-doc{
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--gC);
  border-radius: var(--rB);
  background: white;
  font-size: var(--fXS);
  font-weight: 600;
  color: #5B21B6;
  white-space: nowrap;
}
.aside-agenda__item-doc--pedido{ color: #1565C0; }
.aside-agenda__item-doc:hover{ border-color: currentColor; }

.aside-agenda__acciones{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eS);
  margin-top: var(--eS);
}
.aside-agenda__acciones .apariencia-boton{ flex: 1 1 45%; justify-content: center; }

.aside-agenda__btn-verde{ background: #2E7D32; border: 1px solid #2E7D32; }
.aside-agenda__btn-verde:hover{ background: #1B5E20; border: 1px solid #1B5E20; }

/* .aside-agenda__buscador y los __resultado los consume también el buscador
   de cliente del aside carrito (renderAsideCarrito en cart.php) */
.aside-agenda__buscador{ display: flex; gap: var(--eS); margin-bottom: var(--eM); }
.aside-agenda__buscador input{
  flex: 1;
  min-width: 0;
}

.aside-agenda__resultado,
.aside-carrito__buscador-cliente .buscador-cliente__resultado{
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: var(--eS) 0;
  border: 0;
  border-bottom: 1px solid var(--gC2);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fS);
  color: var(--gO);
  min-width: 0;
}
.aside-agenda__resultado:hover,
.aside-carrito__buscador-cliente .buscador-cliente__resultado:hover{ background: transparent; }
.aside-agenda__resultado:hover strong,
.aside-carrito__buscador-cliente .buscador-cliente__resultado:hover strong{ color: var(--r); }
.aside-agenda__resultado span,
.aside-carrito__buscador-cliente .buscador-cliente__resultado span{
  font-size: var(--fXS);
  color: var(--g);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Buscador rápido de cliente del aside carrito (sin cliente asignado).
   El input/botón reutilizan .aside-agenda__buscador; los resultados llegan
   de /cliente-buscar.php con las clases del buscador de carrito.php y toman
   el aspecto de los resultados de agenda vía los selectores agrupados en
   las reglas .aside-agenda__resultado / __vacio de más arriba. ── */
.aside-carrito__buscador-cliente{ margin-bottom: var(--eM); }
.aside-carrito__buscador-cliente.is-loading{ opacity: .6; pointer-events: none; }
.aside-carrito__buscador-cliente .buscador-cliente__lista{ display: flex; flex-direction: column; }

/* Badge "POTENCIAL" de los resultados de /cliente-buscar.php (página del
   carrito y aside comparten estas reglas): un POT solo admite ofertas.
   Tonos ámbar del aviso .aside-carrito__cliente--aviso. La línea del nombre
   pasa a flex para alinear TODOS los badges al borde derecho. */
.buscador-cliente__resultado strong{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.buscador-cliente__badge{
  display: inline-block;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fcf8e3;
  border: 1px solid #e7dcb5;
  color: #8a6d3b;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  vertical-align: 1px;
}

/* ══ Buscador de artículos del carrito (widget en carrito.php y en el aside;
   modal compartido inyectado por cart-javascript.js, contenido servido por
   /articulo-buscar.php). Por encima de .lateral (1200): debe verse abierto
   desde el propio aside. ══ */
.ab-modal{ position: fixed; inset: 0; z-index: 1300; }
.ab-modal[hidden]{ display: none; }
.ab-modal__fondo{ position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.ab-modal__caja{
  position: relative;
  margin: 8vh auto 0;
  width: min(560px, calc(100% - 2 * var(--eM)));
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  border-radius: 10px; /* --rB es radio pastilla (999px): aquí no vale */
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  padding: var(--eM);
}
/* border-box en todo el modal: los inputs a width:100% en content-box
   desbordaban su celda (bordes solapados en el grid del genérico y scroll
   horizontal de la caja) */
.ab-modal__caja,
.ab-modal__caja *,
.ab-modal__caja *::before,
.ab-modal__caja *::after{ box-sizing: border-box; }
.ab-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eS);
  padding-bottom: var(--eS);
  margin-bottom: var(--eS);
  border-bottom: 1px solid var(--gC2);
}
.ab-modal__titulo{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  color: var(--gO);
}
/* Refinar / Ordenar de la cabecera (solo sobre un listado) */
.ab-modal__accion{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--gC);
  border-radius: 6px;
  color: var(--r);
  font-family: inherit;
  font-size: var(--fS);
  line-height: 1;
  cursor: pointer;
}
.ab-modal__accion[hidden]{ display: none; }
.ab-modal__accion svg{ width: 18px; height: 18px; display: block; flex-shrink: 0; }
.ab-modal__accion:hover,
.ab-modal__accion[aria-expanded="true"]{ background: #f5f5f5; border-color: var(--r); }
/* orden elegido distinto del por defecto */
.ab-modal__accion--on,
.ab-modal__accion--on[aria-expanded="true"]{ background: var(--r); border-color: var(--r); color: #fff; }
.ab-modal__accion--on:hover{ background: var(--r); color: #fff; }
@media (max-width: 480px){
  .ab-modal__accion span{ display: none; }
  .ab-modal__accion{ padding: 0 8px; }
}
.ab-orden{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--eS);
  margin-bottom: var(--eS);
  background: #f7f7f7;
  border-radius: 8px;
}
.ab-orden[hidden]{ display: none; }
.ab-orden__titulo{ font-size: var(--fXS); color: var(--g); }
.ab-orden__stock{ margin: 0; }
.ab-orden__botones{ display: flex; flex-wrap: wrap; gap: 6px; }
.ab-orden__btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--gC);
  border-radius: 6px;
  color: var(--gO);
  font-family: inherit;
  font-size: var(--fS);
  line-height: 1.1;
  cursor: pointer;
}
.ab-orden__btn:hover{ background: #fff; border-color: var(--r); color: var(--r); }
.ab-orden__btn--on,
.ab-orden__btn--on:hover{ background: var(--r); border-color: var(--r); color: #fff; }
/* sentido del botón elegido (se invierte al volver a pulsarlo) */
.ab-orden__sentido{ font-size: var(--fXS); opacity: .9; white-space: nowrap; }
.ab-modal__cerrar{
  width: auto;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--g);
  cursor: pointer;
  padding: var(--eS);
}
.ab-modal__cerrar:hover{ color: var(--r); background: transparent; }

.ab-estado{ padding: var(--eM) var(--eS); color: var(--g); font-size: var(--fS); }

.ab-lista{ display: flex; flex-direction: column; }
.ab-lista__resumen,
.ab-afinar__resumen{ margin: 0 0 var(--eS); font-size: var(--fXS); color: var(--g); }
/* afinado que no devolvió nada: aviso dentro del formulario (se vuelve al
   afinado anterior para probar con otro texto) */
.ab-afinar__aviso{
  margin: 0 0 var(--eS);
  padding: 8px 10px;
  border: 1px solid #f0c36d;
  border-radius: 6px;
  background: #fff8e5;
  color: #7a4d00;
  font-size: var(--fS);
}
.ab-item{
  display: flex;
  align-items: center;
  gap: var(--eS);
  width: 100%;
  text-align: left;
  padding: var(--eS) 0;
  border: 0;
  border-bottom: 1px solid var(--gC2);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fS);
  color: var(--gO);
  min-width: 0;
}
.ab-item:hover{ background: transparent; }
.ab-item:hover .ab-item__desc{ color: var(--r); }
.ab-item__foto{
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gC2);
  background: white;
  flex-shrink: 0;
}
.ab-item__foto--sin{ display: block; }
.ab-item__info{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ab-item__codigos{
  font-size: var(--fXS);
  color: var(--g);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ab-item__der{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.ab-item__precio{ font-weight: 600; white-space: nowrap; }
.ab-badge{
  padding: 0 6px;
  border-radius: var(--rB);
  font-size: var(--fXS);
  font-weight: 600;
  white-space: nowrap;
}
.ab-badge--stock{ background: #E8F5E9; color: #2E7D32; }
.ab-badge--sin{ background: var(--gC2); color: var(--g); }

.ab-afinar{ display: flex; flex-direction: column; gap: var(--eS); }
.ab-afinar__check{ display: block; font-size: var(--fS); cursor: pointer; }
.ab-afinar__prov{
  border: 1px solid var(--gC2);
  border-radius: 8px;
  padding: var(--eS);
  max-height: 200px;
  overflow-y: auto;
}
.ab-afinar__prov legend{ font-size: var(--fXS); color: var(--g); padding: 0 var(--eS); }
.ab-afinar__prov label{ display: block; font-size: var(--fS); cursor: pointer; }
.ab-afinar__prov-sel{ margin-left: var(--eS); }
.ab-afinar__prov-btn{
  width: auto;
  border: 0;
  padding: 0 2px;
  background: transparent;
  color: var(--r);
  font-size: var(--fXS);
  text-decoration: underline;
  cursor: pointer;
}
.ab-afinar__prov-btn:hover{ background: transparent; color: var(--gO); }
/* El conmutador filtro-stock trae margin-bottom grande (aside catálogo) */
.ab-afinar__stock{ margin: 0; }
/* Texto de afinado: input a todo el ancho del modal, botón debajo.
   Con presencia (altura/padding tipo cta-anadir__input de la web): antes
   quedaba diminuto y no destacaba. */
.ab-afinar__texto{ display: flex; flex-direction: column; gap: var(--eS); }
.ab-afinar__texto input{
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0 10px;
  border: 1px solid var(--gC);
  border-radius: 6px;
  background: white;
  font-size: var(--fS);
  color: var(--gO);
}
.ab-afinar__texto input:focus{
  outline: none;
  border-color: var(--r);
  box-shadow: 0 0 0 2px rgba(142, 31, 48, .12);
}
.ab-afinar__texto .apariencia-boton{ width: 100%; justify-content: center; }

/* Genérico: mismo idioma visual que los detalles de línea del carrito
   (label pequeña gris sobre input con borde) */
.ab-generico{ display: flex; flex-direction: column; gap: var(--eM); }
.ab-generico__fila{ display: flex; gap: var(--eS); }
.ab-generico__fila--grid{
  display: grid;
  /* auto-fit: con Dto2/Dto3 ocultos, los campos visibles reparten el ancho */
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--eS);
}
.ab-generico__campo{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* El display:flex de arriba pisa el [hidden] del navegador: reafirmarlo
   (sin esto, los Dto2/Dto3 "ocultos" se veían igualmente) */
.ab-generico__campo[hidden]{ display: none; }
.ab-generico__campo--desc{ flex: 1; }
.ab-generico__campo label{
  font-size: var(--fXS);
  font-weight: 600;
  color: var(--g);
}
.ab-generico__campo input,
.ab-generico__campo textarea{
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gC);
  border-radius: 6px;
  font-size: var(--fS);
  font-family: inherit;
}
.ab-generico__campo input{ height: 38px; }
.ab-generico__fila--grid input{ text-align: center; }
.ab-generico__cod{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--gC2);
  border-radius: 6px;
  background: var(--gC2);
  font-size: var(--fS);
  font-weight: 600;
  min-width: 56px;
}
.ab-generico__acciones{ display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--eS); }
/* Los botones de texto se reparten la fila a partes iguales (el global los
   hace de ancho completo y se apilaban); con base 130px saltan de línea
   solos si el modal es muy estrecho. Uno solo (genérico) ocupa toda la fila. */
.ab-generico__acciones .apariencia-boton{
  width: auto;
  flex: 1 1 130px;
  min-width: 0;
  justify-content: center;
  text-align: center;
}
/* Atrás en la ficha (abajo a la izquierda, vuelve al listado de resultados) */
.ab-ficha__volver{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  margin: 0 auto 0 0;   /* empuja "Añadir al carrito" a la derecha */
  padding: 0 14px;
  min-width: 52px;
  min-height: 42px;
  background: #fff;
  border: 1px solid var(--gC);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  color: var(--r);
  transition: all 0.3s;
}
.ab-ficha__volver svg{ width: 22px; height: 22px; display: block; }
.ab-ficha__volver:hover{
  background: #f5f5f5;
  border-color: var(--r);
  box-shadow: 0 0 0 3px rgba(142, 31, 48, 0.1);
}

/* Botones del afinado (Afinar búsqueda / Ver todos) y paginación del listado */
.ab-afinar__botones{ display: flex; gap: var(--eS); }
.ab-afinar__botones .apariencia-boton{ flex: 1; justify-content: center; }
.ab-lista__mas{ margin-top: var(--eS); width: 100%; justify-content: center; }

/* Última compra en el listado del histórico */
.ab-item__ult{ font-size: var(--fXS); color: #1e7d32; font-weight: 600; }

/* Ficha de confirmación al elegir un artículo del listado (reutiliza las
   clases ab-generico para el grid de cantidad/PVP/dtos) */
.ab-ficha__cab{ display: flex; gap: var(--eS); align-items: center; }
.ab-ficha__foto{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gC2);
  background: white;
  flex-shrink: 0;
}
.ab-ficha__foto--sin{ display: block; }
.ab-ficha__info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ab-ficha__ult{ margin: 0; font-size: var(--fXS); color: #1e7d32; }

/* Botón "Añadir al carrito" del pie del aside (data-js ab-aside-toggle):
   gemelo visual del botón de escanear, agrupado con él a la izquierda
   (el margin-right:auto pasa de .lateral-escanear a este botón). */
.lateral-anadir{
  position: relative;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 10px;
  min-width: 46px;
  background: #fff;
  border: 1px solid var(--gC, #ccc);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  color: var(--r, #8e1f30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.lateral-anadir::after{ content: ""; position: absolute; inset: -6px; }
.lateral-anadir .icono{ width: 26px; height: 26px; fill: currentColor; display: block; }
.lateral-anadir:hover{
  background: #fff;
  border-color: var(--r, #8e1f30);
  box-shadow: 0 0 0 3px rgba(142, 31, 48, 0.1);
}
.lateral-acciones-pie .lateral-escanear{ margin-right: 0; }
.lateral-acciones-pie .lateral-anadir{ margin-right: auto; }

/* Widget de búsqueda (página y aside): una sola línea con campo
   (+ escáner en la página) + botón-icono de añadir al carrito.
   border-box también aquí: el input a flex:1 con padding en content-box
   desbordaba la fila (y el bloque de carrito.php, el ancho de la página). */
.AnadirArticulos,
.AnadirArticulos *,
.busca-articulo,
.busca-articulo *{ box-sizing: border-box; }
.busca-articulo__fila{ display: flex; gap: var(--eS); align-items: center; }
.busca-articulo__fila input[data-js="ab-q"]{ flex: 1; min-width: 0; min-height: 42px; }
/* Misma altura que los botones del pie del aside (allí los estira el flex
   del pie a la altura de "Ver carrito"): iconos con proporción cuadrada
   también en carrito.php */
.busca-articulo__fila .btn-escanear,
.busca-articulo__fila .busca-articulo__btn{ min-height: 42px; }
/* Mismo diseño que el botón de escanear y el "Añadir al carrito" del aside
   (blanco, borde gris, icono rojo): coherencia entre página y aside */
.busca-articulo__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 10px;
  min-width: 46px;
  background: #fff;
  border: 1px solid var(--gC, #ccc);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  color: var(--r, #8e1f30);
  transition: all 0.3s;
}
.busca-articulo__btn::after{ content: ""; position: absolute; inset: -6px; }
.busca-articulo__btn .icono{ width: 26px; height: 26px; fill: currentColor; display: block; }
.busca-articulo__btn:hover{
  background: #fff;
  border-color: var(--r, #8e1f30);
  box-shadow: 0 0 0 3px rgba(142, 31, 48, 0.1);
}
.busca-articulo--aside{ margin-bottom: var(--eM); }

/* Botón "Histórico" (añadir artículos del histórico del cliente): junto al
   nombre del cliente en el aside y a la dirección de envío en /carrito.php,
   siempre alineado a la derecha y con altura táctil. */
.ab-historico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: auto;
  flex-shrink: 0;
  margin-left: auto;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--gC);
  border-radius: 8px;
  background: white;
  color: var(--r);
  font-size: var(--fS);
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}
.ab-historico:hover{ border-color: var(--r); background: white; }
.ab-historico .icono{ width: 20px; height: 20px; fill: currentColor; }

/* Botón-lupa "cambiar cliente" (página y aside): mismas dimensiones que
   .ab-historico; despliega el buscador rápido de cliente. */
.cliente-cambiar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  flex-shrink: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--gC);
  border-radius: 8px;
  background: white;
  color: var(--g);
  cursor: pointer;
  vertical-align: middle;
}
.cliente-cambiar:hover{ border-color: var(--r); color: var(--r); background: white; }
.cliente-cambiar .icono{ width: 20px; height: 20px; fill: currentColor; }

/* Botón-ficha del cliente (página y aside): icono de cliente + textos en
   columna (aside: nombre; página: código / nombre / razón social). Enlace a
   clientes.php para staff, span estático para el portal. */
.ab-cliente{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--gC);
  border-radius: 8px;
  background: white;
  color: var(--gO);
  font-size: var(--fS);
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
}
a.ab-cliente{ cursor: pointer; }
a.ab-cliente:hover{ border-color: var(--r); }
a.ab-cliente:hover .ab-cliente__nombre{ color: var(--r); }
.ab-cliente .icono{ width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; color: var(--r); }
.ab-cliente__textos{
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.ab-cliente__textos > span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ab-cliente__nombre{ font-weight: 600; }
.ab-cliente__sub{ font-size: var(--fXS); color: var(--g); }
#cart .info-row--direccion{ display: flex; align-items: center; gap: var(--eS); flex-wrap: wrap; }
#cart .info-row--direccion > *{ min-width: 0; }
/* La fila del cliente del aside: lupa · ficha · Histórico SIEMPRE en una sola
   línea (nowrap) — la ficha .ab-cliente encoge con elipsis por largo que sea
   el nombre — con Histórico empujado a la derecha y solo-icono (sin texto). */
.aside-carrito__cliente{ display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; width: 100%; box-sizing: border-box; }
/* margin-left repetido aquí: el reset ".lateral button{margin:0}" gana por
   especificidad al margin-left:auto de la regla base .ab-historico */
.aside-carrito__cliente .ab-historico{ padding: 8px 10px; margin-left: auto; }
.aside-carrito__cliente .ab-historico span{ display: none; }

/* Fila cliente + Histórico de la ficha del aside de AGENDA (agenda-relay):
   mismo tratamiento que la del aside carrito — una sola línea, la ficha
   encoge y el Histórico va solo-icono al borde derecho. */
.aside-agenda__cliente-fila{ display: flex; align-items: center; flex-wrap: nowrap; gap: var(--eS); width: 100%; box-sizing: border-box; }
.aside-agenda__cliente-fila .aside-agenda__cliente{ flex: 1 1 auto; min-width: 0; }
.aside-agenda__cliente-fila .ab-historico{ padding: 8px 10px; margin-left: auto; }
.aside-agenda__cliente-fila .ab-historico span{ display: none; }

/* ══ Impresión: solo debe quedar el logo de la cabecera ══ */
@media print{
  /* sin fondo de página: la impresora no tiene que pintar el gris del body */
  html, body{ background: #fff !important; }
  .cabecera-top,
  .cabecera-hamburguesa,
  .cabecera-buscador,
  .cabecera-acciones,
  .lateral,
  .lateral-overlay{ display: none !important; }
  .cabecera{ box-shadow: none; border-bottom: 0; margin-bottom: 0; }
  .cabecera-contenido{ border-bottom: 0; }
}