/* =====================================================================
   Longbox · Viñeta Nocturna · componentes

   Los valores salen de `static/css/tokens.css` (copia de
   `.contexto-ia/tokens.css`) y el criterio de `.contexto-ia/identidad_visual.md`.
   Esta hoja **no declara colores, medidas, duraciones ni curvas**: lee los
   semánticos (`--fondo`, `--texto`, `--acento`…) que define cada superficie,
   así un mismo componente sirve sobre noche y sobre papel. Lo vigila
   `apps/core/tests/test_estilo_vineta.py`.

   Orden: base · disposición · texto · cáscara operativa · cáscara pública ·
   botones · formularios · bloques · tablas y listas · indicadores · tienda ·
   catálogo de animaciones.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
html { background: var(--noche); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

h1, h2, h3, h4 { color: var(--texto-fuerte); letter-spacing: var(--tracking-titulo); }

.modo-operativo h1 {
  font: 800 var(--op-titulo-1) / 1.1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
}
.modo-operativo h2 {
  font: 700 var(--op-titulo-2) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
}
.modo-operativo h3 { font: 700 var(--op-titulo-3) / 1.3 var(--fuente-interfaz); }
.modo-operativo h4 { font: 700 var(--op-base) / 1.5 var(--fuente-interfaz); }

.modo-publico h1 {
  font: italic 800 var(--pub-titulo-1) / 0.95 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
}
.modo-publico h2 {
  font: 800 var(--pub-titulo-2) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
}
.modo-publico h3 {
  font: 700 var(--pub-titulo-3) / 1.15 var(--fuente-display);
  font-stretch: var(--ancho-semi);
}

a {
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

code, kbd, samp, pre { font-family: var(--fuente-datos); }
pre {
  margin: 0;
  padding: var(--esp-4);
  border: var(--trazo) var(--linea);
  background: var(--fondo-2);
  font: 500 var(--op-dato) / 1.45 var(--fuente-datos);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

hr { border: 0; border-top: var(--trazo) var(--linea); margin: 0; }

strong, b { font-weight: 700; color: var(--texto-fuerte); }
em, i { font-style: normal; }

[hidden], .hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Las tramas de tokens.css se resuelven en `:root`, con el color de trama de
   la noche. Se vuelven a declarar por superficie —con la misma fórmula— para
   que sobre papel tomen su propio `--trama-color`. */
.superficie-noche,
.superficie-papel {
  --trama-puntos: radial-gradient(circle, var(--trama-color) 1.1px, transparent 1.5px) 0 0 / 8px 8px;
  --trama-puntos-grande: radial-gradient(circle, var(--trama-color) 2.2px, transparent 2.8px) 0 0 / 14px 14px;
  --trama-rayas: repeating-linear-gradient(0deg, var(--trama-color) 0 1px, transparent 1px 4px);
}

/* ---------------------------------------------------------------------
   Disposición
   --------------------------------------------------------------------- */
.pila { display: flex; flex-direction: column; gap: var(--esp-4); }
.pila-1 { display: flex; flex-direction: column; gap: var(--esp-1); }
.pila-2 { display: flex; flex-direction: column; gap: var(--esp-2); }
.pila-3 { display: flex; flex-direction: column; gap: var(--esp-3); }
.pila-4 { display: flex; flex-direction: column; gap: var(--esp-4); }
.pila-5 { display: flex; flex-direction: column; gap: var(--esp-5); }
.pila-6 { display: flex; flex-direction: column; gap: var(--esp-6); }

.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.fila-2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.fila-5 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-5); }
.fila-arriba { align-items: flex-start; }
.fila-base { align-items: baseline; }
.fila-abajo { align-items: flex-end; }
.fila-entre { justify-content: space-between; }
.fila-fin { justify-content: flex-end; }
.sin-envolver { flex-wrap: nowrap; }

.crece { flex: 1 1 auto; min-width: 0; }
.min-0 { min-width: 0; }
.ancho-completo { width: 100%; }
.ancho-lectura { max-width: var(--ancho-lectura); }
.al-fondo { margin-top: auto; }

.rejilla { display: grid; gap: var(--esp-5); }
.rejilla-2, .rejilla-3, .rejilla-4 {
  display: grid;
  gap: var(--esp-4) var(--esp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abarca-2 { grid-column: span 2; }
  .abarca-todo { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .abarca-3 { grid-column: span 3; }
}

.dos-columnas { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .dos-columnas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .dos-columnas--lateral-izquierda { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
}

.separado-arriba { margin-top: var(--esp-4); }
.separado-abajo { margin-bottom: var(--esp-4); }
.seccion-siguiente { margin-top: var(--esp-6); }

/* ---------------------------------------------------------------------
   Texto
   --------------------------------------------------------------------- */
.titulo-1 { font: 800 var(--op-titulo-1) / 1.1 var(--fuente-display); font-stretch: var(--ancho-condensado); text-transform: uppercase; }
.titulo-2 { font: 700 var(--op-titulo-2) / 1.2 var(--fuente-display); font-stretch: var(--ancho-condensado); text-transform: uppercase; }
.titulo-3 { font: 700 var(--op-titulo-3) / 1.3 var(--fuente-interfaz); }
.texto-base { font-size: var(--op-base); }
.texto-chico { font-size: var(--op-chico); line-height: 1.45; }
.modo-publico .texto-chico { font-size: var(--pub-chico); }
.texto-cifra { font: 800 var(--op-cifra) / 1 var(--fuente-display); font-stretch: var(--ancho-condensado); }
.secundario { color: var(--texto-2); }
.fuerte { font-weight: 700; color: var(--texto-fuerte); }
.normal { font-weight: 400; }
.datos { font-family: var(--fuente-datos); font-weight: 500; }
.numero { font-family: var(--fuente-datos); font-weight: 500; text-align: right; white-space: nowrap; }
.derecha { text-align: right; }
.centro { text-align: center; }
.sin-cortar { white-space: nowrap; }
.cortar-palabras { overflow-wrap: anywhere; }
.recortado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lectura { font-size: var(--pub-cuerpo); line-height: 1.6; }
.parrafo { max-width: var(--ancho-lectura); }

/* Rótulo: antetítulos, encabezados de tabla, etiquetas de campo. */
.rotulo {
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.modo-publico .rotulo { font-size: var(--pub-rotulo); }

/* Un estado se dice con una palabra. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--op-chico);
  white-space: nowrap;
}
.estado--atencion { font-weight: 700; color: var(--acento-texto); }
.estado--apagado { color: var(--texto-2); }

/* Rótulo de estado (chip): corte chico, borde y la palabra. */
.marca-estado {
  display: inline-block;
  align-self: flex-start;
  padding: 1px var(--esp-2);
  border: var(--trazo) currentColor;
  clip-path: var(--forma-corte-chico);
  font: 700 var(--op-rotulo) / 1.6 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto);
}
/* En una fila, la marca se centra con lo que acompaña; el `flex-start` es para
   las pilas, donde evita que se estire a todo el ancho. */
:is(.fila, .fila-2, .fila-5) > .marca-estado { align-self: center; }
/* Los colores funcionales, siempre con la palabra (guía, «Últimos ingresos»). */
.marca-estado--ok { color: var(--ok); }
.marca-estado--dato { color: var(--dato); }
.marca-estado--atencion { color: var(--acento-texto); }
.marca-estado--apagado { color: var(--texto-2); }
.marca-estado--error { color: var(--error); }
/* Sobre papel, lima y celeste no se leen: el estado queda en la palabra. */
.superficie-papel :is(.marca-estado--ok, .marca-estado--dato) { color: var(--texto); }

/* Iconos: trazo cuadrado, del color del texto que acompañan. */
.icono { width: 20px; height: 20px; flex-shrink: 0; }
.tabla .icono, .boton-menor .icono { width: 16px; height: 16px; }
.icono-grande .icono { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------
   Cáscara del modo operativo · Mostrador
   --------------------------------------------------------------------- */
.modo-operativo { display: flex; flex-direction: column; min-height: 100vh; }

.encabezado-operativo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--alto-encabezado-op);
  padding: var(--esp-2) var(--esp-5);
  background: var(--trama-rayas), var(--fondo-2);
  border-bottom: var(--trazo) var(--linea);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font: 800 var(--op-titulo-2) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
  text-decoration: none;
}
/* El rombo sesgado delante del nombre: en el mostrador y en la tienda sin logo. */
.marca::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: var(--acento);
  transform: skewX(var(--sesgo)) rotate(45deg);
}
.marca--con-logo::before { content: none; }
.encabezado-operativo .seccion-actual {
  padding-left: var(--esp-4);
  border-left: var(--trazo) var(--linea);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.encabezado-operativo .cuenta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--op-chico);
  color: var(--texto-2);
}
/* El rol, en texto dentro de un rótulo con borde. */
.rol {
  padding: 2px var(--esp-2);
  border: var(--trazo) var(--borde-control);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto);
}

.cuerpo-operativo { display: flex; flex: 1 1 auto; }

.area-de-trabajo {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--esp-5) var(--esp-5) var(--esp-7);
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}
@media (min-width: 1024px) {
  .area-de-trabajo { padding-inline: var(--esp-6); }
}

/* Menú lateral. */
.menu-lateral {
  display: none;
  width: var(--ancho-menu);
  flex-shrink: 0;
  border-right: var(--trazo) var(--linea);
  background: var(--fondo-2);
}
.menu-lateral nav {
  position: sticky;
  top: var(--alto-encabezado-op);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--alto-encabezado-op));
  overflow-y: auto;
  padding: var(--esp-4) 0;
}
@media (min-width: 768px) {
  .menu-lateral { display: flex; flex-direction: column; }
  .solo-angosto { display: none !important; }
}
.menu-lateral.menu-abierto {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  animation: aparece var(--dur-3) var(--curva-golpe) both;
}

.menu-rotulo {
  margin: 0 var(--esp-4) var(--esp-2);
  padding-bottom: var(--esp-2);
  border-bottom: var(--trazo) var(--linea);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}

.menu-enlace,
.menu-titulo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  color: var(--texto);
  font-size: var(--op-base);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--curva-golpe);
}
.menu-enlace:hover, .menu-titulo:hover { background: var(--fondo-3); }
.menu-enlace--hijo { padding-left: var(--esp-6); font-size: var(--op-chico); }
.menu-enlace--hijo .icono { width: 16px; height: 16px; }
.menu-enlace--actual { font-weight: 700; color: var(--texto-fuerte); }
/* El marcador del ítem actual: una barra sesgada que entra al cambiar de pantalla. */
.menu-enlace--actual::before {
  content: "";
  position: absolute;
  left: var(--esp-1);
  top: var(--esp-2);
  bottom: var(--esp-2);
  width: 4px;
  background: var(--acento);
  transform: skewY(var(--sesgo));
  transform-origin: top;
  animation: marcador-entra var(--dur-2) var(--curva-golpe) both;
}

.menu-grupo { padding-block: var(--esp-1); border-bottom: var(--trazo) var(--linea); }
/* El título de un grupo es un rótulo, como en la guía: el que se lee es el ítem. */
.menu-titulo {
  cursor: pointer;
  list-style: none;
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.menu-titulo .icono { width: 16px; height: 16px; }
.menu-grupo[open] > .menu-titulo { color: var(--texto); }
.menu-titulo::-webkit-details-marker { display: none; }
.menu-titulo::after {
  content: "›";
  margin-left: auto;
  color: var(--texto-2);
  transition: transform var(--dur-2) var(--curva-golpe);
}
.menu-grupo[open] > .menu-titulo::after { transform: rotate(90deg); }

.menu-cuenta {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin: var(--esp-5) var(--esp-4) 0;
  padding-top: var(--esp-4);
  border-top: var(--trazo) var(--linea);
  font-size: var(--op-chico);
  overflow-wrap: anywhere;
}
.menu-lateral nav > .menu-cuenta { margin-top: auto; }

/* ---------------------------------------------------------------------
   Cáscara del modo público · Escaparate
   Es el único lugar que lee las variables `--tienda-*` (tokens.css, capa 5).
   --------------------------------------------------------------------- */
.modo-publico {
  --tienda-fondo-imagen: none;
  display: flex;
  flex-direction: column;
  background-color: var(--fondo);
  background-image: var(--tienda-fondo-imagen);
  background-size: cover;
  background-attachment: fixed;
}
/* ---------------------------------------------------------------------
   El mapa de colores de la tienda (plan 00 de interfaz, cuarta parte; B-17-019)
   Cada rol apunta a un color de la paleta (`apps/core/colores.py`) y sus
   variantes salen de ese color: un acento azul tiene el hover azul claro. Los
   valores de acá son los iniciales; la hoja de la tienda los reemplaza. El
   `-sobre` y el `-texto` los calcula el servidor por contraste.
   --------------------------------------------------------------------- */
.modo-publico {
  --rol-boton: var(--tienda-primario);
  --rol-boton-sobre: var(--tienda-sobre-primario);
  --rol-enlaces: var(--tienda-acento);
  --rol-enlaces-sobre: var(--noche);
  --rol-enlaces-texto: var(--tienda-acento);
  --rol-precios-texto: var(--texto-fuerte);
  --rol-marcas: var(--tienda-acento);
  --rol-marcas-sobre: var(--noche);
  --rol-marcas-texto: var(--tienda-acento);
  --rol-titulos: var(--tienda-acento);
  --rol-titulos-texto: var(--tienda-acento);
  --rol-tarjetas: var(--tienda-acento);
  --rol-encabezado: var(--tienda-fondo);

  --rol-boton-vivo: color-mix(in oklch, var(--rol-boton), var(--blanco) 20%);
  --rol-boton-hondo: color-mix(in oklch, var(--rol-boton), var(--noche) 30%);
  --rol-enlaces-vivo: color-mix(in oklch, var(--rol-enlaces), var(--blanco) 20%);
  --rol-enlaces-hondo: color-mix(in oklch, var(--rol-enlaces), var(--noche) 30%);
  --rol-enlaces-suave: color-mix(in srgb, var(--rol-enlaces) 14%, transparent);
  /* La cinta se resolvía en la raíz, con el naranja: acá toma el de los rótulos. */
  --cinta: repeating-linear-gradient(-45deg, var(--rol-marcas) 0 14px, var(--noche) 14px 28px);
}
/* Las superficies del escaparate toman la familia del rol «enlaces» y la sombra
   del rol «tarjetas». El backoffice no pasa por acá: su paleta es fija (P-07). */
.modo-publico .superficie-noche,
.modo-publico.superficie-noche {
  --acento: var(--rol-enlaces);
  --acento-vivo: var(--rol-enlaces-vivo);
  --acento-texto: var(--rol-enlaces-texto);
  --acento-suave: var(--rol-enlaces-suave);
  --sobre-acento: var(--rol-enlaces-sobre);
  --foco: var(--rol-enlaces);
  --golpe: var(--rol-tarjetas);
  /* Las sombras se resolvían en la raíz con el naranja: se redefinen donde
     `--golpe` ya es el del rol. */
  --sombra-golpe-1: 3px 3px 0 var(--golpe);
  --sombra-golpe-2: 6px 6px 0 var(--golpe);
  --sombra-golpe-3: 10px 10px 0 var(--golpe);
}
.modo-publico .superficie-papel {
  --acento: var(--rol-enlaces);
  --acento-vivo: var(--rol-enlaces);
  --acento-texto: var(--rol-enlaces-hondo);
  --acento-suave: color-mix(in srgb, var(--rol-enlaces) 22%, transparent);
  --sobre-acento: var(--rol-enlaces-sobre);
}
.modo-publico .tarjeta-producto__agregar button { color: var(--rol-boton-sobre); }
.modo-publico .tarjeta-producto__agregar button::before { background: var(--rol-boton); }
.modo-publico .tarjeta-producto__agregar button:hover::before { background: var(--rol-boton-vivo); }
.modo-publico :is(.tarjeta-producto__precio, .ficha-publica__precio) { color: var(--rol-precios-texto); }
.modo-publico .rotulo-estado--pre-venta {
  background: repeating-linear-gradient(-45deg, var(--rol-marcas) 0 6px, var(--noche) 6px 12px);
}
.modo-publico .rotulo-estado--pre-venta > span { color: var(--rol-marcas-texto); }
.modo-publico .cartel-tomo--primero { background: var(--rol-marcas); color: var(--rol-marcas-sobre); }
.modo-publico .antetitulo { color: var(--rol-titulos-texto); }
.modo-publico .titulo-seccion::after { background: var(--rol-titulos); }

/* Una sola capa de grano para todo el escaparate. */
.modo-publico::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grano);
  opacity: var(--grano-opacidad);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 100;
}

.encabezado-publico {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rol-encabezado);
  border-bottom: var(--trazo) var(--linea);
}
/* Pasada la portada queda más bajo y marca el borde con una sombra dura
   (B-07-011). El alto no se anima: cambia de golpe, como un corte. */
.encabezado-publico--compacto { box-shadow: 0 3px 0 var(--noche); }
.encabezado-publico__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-5);
  min-height: 64px;
  padding-block: var(--esp-2);
}
.encabezado-publico--compacto .encabezado-publico__barra { min-height: 52px; padding-block: var(--esp-1); }
.encabezado-publico .marca {
  font: 800 var(--op-titulo-2) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  letter-spacing: var(--tracking-titulo);
  color: var(--texto-fuerte);
}
.encabezado-publico .marca img { max-height: 40px; width: auto; }
.encabezado-publico nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-5); }
/* Los enlaces del menú público: rótulos, sin íconos. El actual lleva una
   barra sesgada de 3px debajo, separada del texto. */
.encabezado-publico nav :is(a, .boton-texto) {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--esp-1) 0;
  border: 0;
  background: none;
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva-golpe);
}
.encabezado-publico nav :is(a, .boton-texto):hover,
.encabezado-publico nav a[aria-current="page"] { color: var(--texto-fuerte); }
.encabezado-publico nav :is(a, .boton-texto)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--acento);
  transform: skewX(var(--sesgo)) scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--curva-golpe);
}
.encabezado-publico nav a[aria-current="page"]::after,
.encabezado-publico nav :is(a, .boton-texto):hover::after { transform: skewX(var(--sesgo)) scaleX(1); }
.encabezado-publico__carrito,
.encabezado-publico__puntos { gap: var(--esp-1); }
/* El encabezado ocupa todo el ancho: en una pantalla ancha la marca va al borde
   izquierdo y el menú al derecho, no encerrados en la columna (B-07-026). */
.encabezado-publico > .encabezado-publico__barra { max-width: none; }

/* Búsqueda del catálogo en el encabezado: el marco sesgado va en una capa
   detrás, para que el texto del campo no se incline. */
.buscador-publico {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: var(--esp-2);
  max-width: 640px;
  padding-left: var(--esp-3);
  color: var(--texto-2);
}
.buscador-publico::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--trazo-fuerte) var(--borde-control);
  background: var(--fondo-3);
  transform: skewX(var(--sesgo));
  transition: border-color var(--dur-1) var(--curva-golpe);
}
.buscador-publico:hover::before { border-color: var(--texto); }
/* El foco lo marca el propio marco, que pasa al acento y engrosa: sin un
   segundo recuadro alrededor (B-07-022). */
.buscador-publico:focus-within::before { border: var(--trazo-grueso) var(--acento); }
/* El campo va sin el recuadro de los campos comunes: el marco es la capa
   sesgada. La regla general de `input[type="search"]` está más abajo en la
   hoja, por eso el selector lleva el tipo. */
:is(.buscador-publico, .buscador-catalogo) input[type="search"],
:is(.buscador-publico, .buscador-catalogo) input[type="search"]:hover,
:is(.buscador-publico, .buscador-catalogo) input[type="search"]:focus-visible {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--texto-fuerte);
  font: 400 var(--pub-chico) / 1.2 var(--fuente-interfaz);
  outline: none;
}
:is(.buscador-publico, .buscador-catalogo) input[type="search"]::placeholder { color: var(--texto-2); }
/* «Buscar» va dentro del marco de la barra y comparte sus bordes: la capa
   sesgada tiene el mismo alto y el mismo sesgo, y deja ver el borde del marco.
   Relleno noche y letras de acento, para no confundir el borde con el relleno;
   al puntero se llena de acento (B-07-026). */
.buscador-publico__ir {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  padding-inline: var(--esp-5);
  border: 0;
  background: none;
  color: var(--acento-texto);
  font: 700 var(--pub-rotulo) / 1 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-1) var(--curva-golpe);
}
.buscador-publico__ir::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--trazo-fuerte) var(--borde-control);
  background: var(--noche);
  transform: skewX(var(--sesgo));
  transition: background-color var(--dur-1) var(--curva-golpe), border-color var(--dur-1) var(--curva-golpe);
}
.buscador-publico:hover .buscador-publico__ir::before { border-color: var(--texto); }
.buscador-publico:focus-within .buscador-publico__ir::before { border: var(--trazo-grueso) var(--acento); }
.buscador-publico__ir:hover,
.buscador-publico__ir:focus-visible { color: var(--sobre-acento); }
.buscador-publico__ir:hover::before,
.buscador-publico__ir:focus-visible::before { background: var(--acento); }
.buscador-publico__ir:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
@media (max-width: 860px) {
  .buscador-publico { order: 3; flex-basis: 100%; max-width: none; }
}

/* Menú de la cuenta: un <details> nativo. Sin el margen de los bloques. */
.encabezado-publico .menu-de-cuenta { position: relative; display: block; margin: 0; }
.menu-de-cuenta > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2);
  border: var(--trazo-fuerte) var(--borde-control);
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto);
  list-style: none;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
.menu-de-cuenta > summary::-webkit-details-marker { display: none; }
.menu-de-cuenta > summary:hover,
.menu-de-cuenta[open] > summary { border-color: var(--texto-fuerte); color: var(--texto-fuerte); }
.menu-de-cuenta[open] > summary { background: var(--acento-suave); }
.menu-de-cuenta__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--esp-3));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  min-width: 240px;
  padding: var(--esp-4);
  border: var(--trazo-fuerte) var(--texto-fuerte);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-2);
  animation: dialogo-entra var(--dur-2) var(--curva-golpe) both;
}
.menu-de-cuenta__correo {
  width: 100%;
  margin: 0;
  padding-bottom: var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
  font-size: var(--pub-chico);
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

.encabezado-publico .cuenta-publica {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--pub-chico);
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

.columna-publica {
  width: 100%;
  max-width: var(--ancho-escaparate);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}
@media (min-width: 1024px) {
  .columna-publica { padding-inline: var(--esp-7); }
}
.columna-publica--angosta { max-width: calc(var(--ancho-lectura) + 2 * var(--esp-7)); }
.columna-publica--ancha { max-width: var(--ancho-escaparate); }

.contenido-publico {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* El contenido de las pantallas públicas comunes va en su propia sección. */
.contenido-publico > .columna-publica,
.seccion-publica {
  padding-block: var(--esp-8);
}
@media (min-width: 1024px) {
  .contenido-publico > .columna-publica,
  .seccion-publica { padding-block: var(--esp-9); }
}
.contenido-publico > .columna-publica { display: flex; flex-direction: column; gap: var(--esp-6); }
.seccion-publica > .columna-publica { display: flex; flex-direction: column; gap: var(--esp-6); }
.seccion-publica--trama { position: relative; }
.seccion-publica--trama::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--trama-puntos);
  mask-image: var(--desvanecer-trama);
  pointer-events: none;
}
.seccion-publica--trama > * { position: relative; z-index: 1; }
/* Entre una sección noche y una papel: la franja de cinta. */
.union-cinta { height: 12px; background: var(--cinta); }

.modo-publico .pie-publico {
  padding-bottom: var(--esp-7);
  font-size: var(--pub-chico);
  color: var(--texto-2);
}
.pie-publico .pie-publico__cinta { margin-bottom: var(--esp-7); }
/* El pie (B-07-012): marca grande, tres columnas y una base con el año. */
.pie-publico__contenido {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: start;
}
@media (min-width: 1024px) {
  .pie-publico__contenido { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.pie-publico__marca { display: flex; flex-direction: column; gap: var(--esp-3); max-width: 42ch; }
.pie-publico__marca .marca {
  font: italic 800 var(--pub-titulo-1) / 0.95 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  letter-spacing: var(--tracking-titulo);
}
.pie-publico__marca .marca::before { width: 22px; height: 22px; }
.pie-publico__columna { display: flex; flex-direction: column; gap: var(--esp-3); }
.pie-publico__columna ul { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.pie-publico__columna a {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color var(--dur-1) var(--curva-golpe), text-decoration-color var(--dur-1) var(--curva-golpe);
}
.pie-publico__columna a:hover { color: var(--texto-fuerte); text-decoration-color: var(--acento); }
.pie-publico .pie-publico__redes { flex-direction: row; flex-wrap: wrap; }
.pie-publico__redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--trazo-fuerte) var(--borde-control);
  color: var(--texto);
  transition: border-color var(--dur-1) var(--curva-golpe), transform var(--dur-2) var(--curva-golpe);
}
.pie-publico__redes a:hover { border-color: var(--texto-fuerte); transform: translate(-2px, -2px); box-shadow: var(--sombra-golpe-1); }
.pie-publico__redes span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pie-publico__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-top: var(--esp-7);
  padding-top: var(--esp-4);
  border-top: var(--trazo) var(--linea);
}

/* El globo de preguntas frecuentes (B-07-012, B-07-016): un bloque sesgado con
   el ícono y, a su izquierda, un globo de papel con su cola. Pasada la portada
   el globo se pliega y queda el ícono; vuelve al pasar el puntero o con foco. */
.globo-ayuda {
  position: fixed;
  right: var(--esp-5);
  bottom: calc(var(--esp-5) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--esp-4);
  color: var(--noche);
  text-decoration: none;
  animation: aparece var(--dur-3) var(--curva-golpe) 900ms both;
}
.globo-ayuda__icono {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--sobre-acento);
  transition: transform var(--dur-2) var(--curva-golpe);
}
.globo-ayuda__icono::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--trazo-fuerte) var(--noche);
  background: var(--acento);
  transform: skewX(var(--sesgo));
}
.globo-ayuda__icono .icono { width: 26px; height: 26px; }
.globo-ayuda__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--esp-2) var(--esp-3);
  border: var(--trazo-fuerte) var(--noche);
  background: var(--blanco);
  font: 400 var(--pub-titulo-3) / 1 var(--fuente-grito);
  letter-spacing: 0.02em;
  transform-origin: right center;
  transition: opacity var(--dur-2) var(--curva-golpe), transform var(--dur-2) var(--curva-golpe);
}
.globo-ayuda__mas {
  margin-top: 2px;
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
/* La cola, a la derecha y hacia el ícono: dos capas, borde y relleno. */
.globo-ayuda__texto::after,
.globo-ayuda__texto::before {
  content: "";
  position: absolute;
  top: 50%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.globo-ayuda__texto::after { right: -14px; width: 14px; height: 18px; margin-top: -9px; background: var(--noche); }
.globo-ayuda__texto::before { z-index: 1; right: -9px; width: 10px; height: 12px; margin-top: -6px; background: var(--blanco); }
.globo-ayuda--plegado .globo-ayuda__texto { opacity: 0; transform: translateX(8px) scale(0.9); pointer-events: none; }
.globo-ayuda:hover .globo-ayuda__texto,
.globo-ayuda:focus-visible .globo-ayuda__texto { opacity: 1; transform: none; }
.globo-ayuda:hover .globo-ayuda__icono,
.globo-ayuda:focus-visible .globo-ayuda__icono { transform: translate(-2px, -2px); filter: drop-shadow(3px 3px 0 var(--blanco)); }
.globo-ayuda:active .globo-ayuda__icono { transform: none; filter: none; }
@media (max-width: 600px) {
  .globo-ayuda { right: var(--esp-4); bottom: calc(var(--esp-4) + env(safe-area-inset-bottom, 0px)); }
  .globo-ayuda__texto { display: none; }
}

/* Avisos de lo que se hace sin cambiar de pantalla (B-07-014). */
.avisos-flotantes {
  position: fixed;
  top: calc(var(--esp-9) + var(--esp-3) + env(safe-area-inset-top, 0px));
  right: var(--esp-5);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  width: min(380px, calc(100vw - 2 * var(--esp-4)));
  pointer-events: none;
}
.avisos-flotantes .mensaje {
  pointer-events: auto;
  border: var(--trazo-fuerte) var(--texto-fuerte);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-1);
  animation: aviso-entra var(--dur-3) var(--curva-golpe) both;
}
.contador.rebota { animation: rebote-numero var(--dur-2) var(--curva-resorte); }

/* Pantallas de acceso (B-07-018): partidas en diagonal, noche con una portada a
   la izquierda y papel con el formulario a la derecha. */
.acceso { display: grid; min-height: calc(100vh - 2 * var(--esp-8)); }
@media (min-width: 900px) {
  .acceso { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.acceso__escena { position: relative; display: none; overflow: clip; background: var(--fondo); }
@media (min-width: 900px) {
  .acceso__escena {
    display: block;
    padding: var(--esp-8) var(--esp-7);
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  }
}
.acceso__escena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--trama-puntos-grande);
  mask-image: var(--desvanecer-trama);
  pointer-events: none;
}
/* La imagen del ingreso llena la escena, con sus colores (B-07-020). */
.acceso__escena--imagen { padding: 0; }
.acceso__escena--imagen::before { content: none; }
.acceso__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Logo o nombre: acompañan al bajar en los formularios largos (registro). */
.acceso__cuadro {
  position: sticky;
  top: calc(var(--esp-9) + var(--esp-7));
  display: grid;
  place-items: center;
  width: min(44rem, 88%);
  margin: var(--esp-8) auto 0;
}
.acceso__logo { position: relative; width: 100%; max-height: 360px; object-fit: contain; }
/* El nombre entra entero en una línea: el tamaño sigue al ancho de la escena
   (que es 5/12 de la pantalla) entre los extremos de `--pub-mega`, y nunca se
   corta en medio de una palabra (B-07-029). */
.acceso__nombre {
  position: relative;
  font: italic 900 var(--pub-mega) / 0.9 var(--fuente-display);
  font-size: clamp(48px, 7vw, 120px);
  font-stretch: var(--ancho-apretado);
  letter-spacing: var(--tracking-titulo);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-fuerte);
}
.acceso__sticker { position: absolute; z-index: 2; top: -42%; right: -8%; }
.acceso__formulario { position: relative; display: flex; justify-content: center; padding: var(--esp-8) var(--esp-4); background: var(--fondo); }
@media (max-width: 899px) {
  .acceso__formulario::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: var(--cinta); }
}
.acceso__columna { display: flex; flex-direction: column; gap: var(--esp-6); width: 100%; max-width: 40rem; }

/* ---------------------------------------------------------------------
   Botones: cuatro niveles
   --------------------------------------------------------------------- */
.boton-primario,
.boton-seccion,
.boton-menor,
.boton-texto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  cursor: pointer;
  font-family: var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  font-weight: 700;
  font-size: var(--op-base);
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radio);
  -webkit-tap-highlight-color: transparent;
}

/* Nivel 1. El corte va en una capa detrás: `clip-path` recortaría el foco. */
.boton-primario {
  position: relative;
  isolation: isolate;
  min-height: 40px;
  padding: var(--esp-2) var(--esp-5);
  border: 0;
  background: none;
  color: var(--sobre-acento);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: transform var(--dur-2) var(--curva-golpe), filter var(--dur-2) var(--curva-golpe);
}
.boton-primario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--acento);
  clip-path: var(--forma-corte-chico);
  transition: background-color var(--dur-1) var(--curva-golpe);
}
.boton-primario:hover::before { background: var(--acento-vivo); }
.modo-operativo .boton-primario:active { transform: translateY(1px); }
.modo-publico .boton-primario { min-height: 48px; padding: var(--esp-2) var(--esp-5); font-size: var(--op-titulo-3); }
.modo-publico .boton-primario::before { background: var(--rol-boton); }
.modo-publico .boton-primario { color: var(--rol-boton-sobre); }
.modo-publico .boton-primario:hover::before { background: var(--rol-boton-vivo); }
.modo-publico .boton-primario:active::before { background: var(--rol-boton-hondo); }
.modo-publico .boton-primario:hover {
  transform: translate(-2px, -2px);
  filter: drop-shadow(3px 3px 0 var(--texto-fuerte));
}
.modo-publico .boton-primario:active { transform: none; filter: none; }

/* Nivel 2. El relleno entra de izquierda a derecha: es la marca del sistema. */
.boton-seccion {
  min-height: 40px;
  padding: var(--esp-2) var(--esp-4);
  border: var(--trazo-fuerte) var(--texto);
  background: linear-gradient(to right, var(--texto) 50%, transparent 50%) right / 200% 100% no-repeat;
  color: var(--texto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-position var(--dur-2) var(--curva-golpe), color var(--dur-2) var(--curva-golpe);
}
.boton-seccion:hover { background-position: left; color: var(--fondo); }
.boton-seccion:active { background-position: left; color: var(--fondo); transform: translate(1px, 1px); }
.boton-seccion--tenue { border-color: var(--borde-control); }
.modo-publico .boton-seccion { min-height: 48px; padding: var(--esp-2) var(--esp-5); font-size: var(--op-titulo-3); }

/* Nivel 3: acción de fila. */
.boton-menor {
  padding: 0;
  border: 0;
  background: none;
  color: var(--acento-texto);
  font-family: var(--fuente-interfaz);
  font-stretch: var(--ancho-normal);
  font-weight: 500;
  font-size: var(--op-chico);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.boton-menor:hover { text-decoration-thickness: 2px; }

/* Nivel 4: navegación. Un subrayado `--acento` crece de izquierda a derecha. */
.boton-texto {
  padding: var(--esp-1) 0;
  border: 0;
  background: linear-gradient(to right, var(--acento) 50%, transparent 50%) right bottom / 200% 2px no-repeat;
  color: var(--texto);
  font-family: var(--fuente-interfaz);
  font-stretch: var(--ancho-normal);
  font-weight: 500;
  transition: background-position var(--dur-2) var(--curva-golpe);
}
.boton-texto:hover { background-position: left bottom; }
.boton-texto--atras > span[aria-hidden] { transition: transform var(--dur-1) var(--curva-golpe); }
.boton-texto--atras:hover > span[aria-hidden] { transform: translateX(-3px); }

/* Acción destructiva: el acento pasa a error. El texto nombra la consecuencia. */
.boton-primario--critico,
.boton-seccion--critico,
.boton-menor--critico,
.boton-texto--critico {
  --acento: var(--error);
  --acento-vivo: var(--error);
  --acento-texto: var(--error);
  --sobre-acento: var(--sobre-error);
  /* En la tienda el botón principal lee su rol (B-17-019): también pasa a error. */
  --rol-boton: var(--error);
  --rol-boton-vivo: var(--error);
  --rol-boton-hondo: var(--error);
  --rol-boton-sobre: var(--sobre-error);
}
.boton-seccion--critico { border-color: var(--error); color: var(--error); --texto: var(--error); }

.boton-primario:disabled,
.boton-seccion:disabled,
.boton-menor:disabled,
.boton-texto:disabled {
  cursor: not-allowed;
  color: var(--texto-2);
  background: var(--fondo-2);
  border: var(--trazo) dotted var(--borde-control);
  transform: none;
  filter: none;
}
.boton-primario:disabled::before { background: var(--fondo-2); }

/* Botón cargando: «Guardando…» y una franja de cinta que corre por el borde. */
.boton-primario[aria-busy="true"],
.boton-seccion[aria-busy="true"] {
  cursor: progress;
  background-image: var(--cinta);
  background-size: 40px 4px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  animation: cinta-corre 600ms linear infinite;
}

:is(.pila, .pila-1, .pila-2, .pila-3, .pila-4, .pila-5, .pila-6, .campo, .contenido-publico)
  > :is(.boton-primario, .boton-seccion, .boton-menor, .boton-texto) { align-self: flex-start; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-5);
  padding-top: var(--esp-5);
  border-top: var(--trazo) var(--linea);
}
.acciones--sin-filete { padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: var(--esp-5); }
.formulario--angosto { max-width: var(--ancho-lectura); }

.campo { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }

.etiqueta {
  display: block;
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.modo-publico .etiqueta { font-size: var(--pub-rotulo); }
.obligatorio { color: var(--acento-texto); }

.ayuda { font-size: var(--op-chico); line-height: 1.45; color: var(--texto-2); }
.modo-publico .ayuda { font-size: var(--pub-chico); }
.ayuda ul { list-style: disc; padding-left: var(--esp-5); }
.error-de-campo { font-size: var(--op-chico); font-weight: 700; color: var(--error); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="file"],
textarea,
select,
.desplegable__boton {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: var(--esp-2) var(--esp-3);
  border: var(--trazo) var(--borde-control);
  border-radius: var(--radio);
  background-color: var(--fondo-3);
  color: var(--texto);
  font: 400 var(--op-base) / 1.4 var(--fuente-interfaz);
  transition: border-color var(--dur-1) var(--curva-golpe), box-shadow var(--dur-1) var(--curva-golpe);
}
.modo-publico :is(input, textarea, select, .desplegable__boton):not([type="checkbox"]):not([type="radio"]) {
  min-height: 48px;
  font-size: var(--pub-cuerpo);
}
.superficie-papel :is(input, textarea, select, .desplegable__boton):not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--fondo-2);
  border: var(--trazo-fuerte) var(--texto);
}
:is(input, textarea, select, .desplegable__boton):hover { border-color: var(--texto); }
/* Al tomar foco, además del contorno, el borde inferior pasa al acento. */
:is(input, textarea, select, .desplegable__boton):focus-visible { box-shadow: inset 0 -2px 0 var(--acento); }

input[type="file"] { padding: var(--esp-2); }
input[type="file"]::file-selector-button {
  margin-right: var(--esp-3);
  padding: var(--esp-1) var(--esp-3);
  border: var(--trazo-fuerte) var(--texto);
  background: transparent;
  color: var(--texto);
  font: 700 var(--op-chico) / 1.4 var(--fuente-display);
  text-transform: uppercase;
  cursor: pointer;
}
select,
.desplegable__boton {
  appearance: none;
  padding-right: var(--esp-6);
  /* La flecha del desplegable, dibujada con dos triángulos de trazo. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position:
    right var(--esp-4) top 50%,
    right var(--esp-3) top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select[multiple] { min-height: 8em; background-image: none; padding-right: var(--esp-3); }
textarea { min-height: 6em; resize: vertical; }

/* La lista que se abre del desplegable, con el diseño del sistema. Mejora
   progresiva: donde el navegador no admite `appearance: base-select` (hoy, fuera
   de Chrome y Edge), queda la lista nativa y el desplegable cerrado sigue igual. */
@supports (appearance: base-select) {
  select:not([multiple]),
  select:not([multiple])::picker(select) { appearance: base-select; }
  select:not([multiple]) { background-image: none; padding-right: var(--esp-3); }
  select:not([multiple])::picker-icon {
    color: var(--texto-2);
    transition: transform var(--dur-1) var(--curva-golpe);
  }
  select:not([multiple]):open::picker-icon { transform: rotate(180deg); }
  select:not([multiple])::picker(select) {
    margin-top: var(--esp-1);
    padding: var(--esp-1) 0;
    border: var(--trazo-grueso) var(--texto-fuerte);
    border-radius: var(--radio);
    background: var(--fondo-2);
    box-shadow: var(--sombra-golpe-2);
  }
  select:not([multiple]) option {
    padding: var(--esp-2) var(--esp-3);
    color: var(--texto);
  }
  select:not([multiple]) option:hover,
  select:not([multiple]) option:focus-visible { background: var(--fondo-3); color: var(--texto-fuerte); }
  select:not([multiple]) option:checked { background: var(--acento); color: var(--sobre-acento); }
  select:not([multiple]) option::checkmark { content: "◆"; }
}

/* El desplegable propio donde el navegador no tiene `base-select` (B-00-011):
   el botón se dibuja con las reglas de los campos; la lista, como la de arriba. */
.desplegable { position: relative; min-width: 0; }
.desplegable__nativo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.desplegable__boton { display: block; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.desplegable__boton:disabled { border-style: dotted; color: var(--texto-2); cursor: not-allowed; }
.desplegable__boton[aria-expanded="true"] { border-color: var(--texto); }
.desplegable__lista {
  position: absolute;
  top: calc(100% + var(--esp-1));
  left: 0;
  z-index: 80;
  min-width: 100%;
  max-height: 18rem;
  margin: 0;
  padding: var(--esp-1) 0;
  overflow-y: auto;
  list-style: none;
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-2);
  animation: dialogo-entra var(--dur-2) var(--curva-golpe) both;
}
.desplegable__lista [role="option"] {
  display: flex;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  color: var(--texto);
  cursor: pointer;
}
.desplegable__lista [role="option"]::before { content: "◆"; visibility: hidden; color: inherit; }
.desplegable__lista [role="option"][aria-selected="true"]::before { visibility: visible; }
.desplegable__lista [role="option"]:hover,
.desplegable__lista .desplegable__activa { background: var(--fondo-3); color: var(--texto-fuerte); }
.desplegable__lista [role="option"][aria-selected="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: 700; }
.desplegable__lista [aria-disabled="true"] { color: var(--texto-2); cursor: not-allowed; }
.desplegable__grupo {
  padding: var(--esp-3) var(--esp-3) var(--esp-1);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}

/* Barras de desplazamiento con los colores del sistema: angostas, sin bordes
   redondeados y con el acento al pasar el puntero. */
* { scrollbar-width: thin; scrollbar-color: var(--borde-control) var(--fondo-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo-2); }
::-webkit-scrollbar-thumb { background: var(--borde-control); border: 2px solid var(--fondo-2); }
::-webkit-scrollbar-thumb:hover { background: var(--acento); }

/* Cantidad con flechas (tienda: ficha y carrito). */
.selector-cantidad { display: inline-flex; align-items: stretch; }
.selector-cantidad input[type="number"] {
  width: 4.5rem;
  text-align: center;
  appearance: textfield;
}
.selector-cantidad input[type="number"]::-webkit-inner-spin-button,
.selector-cantidad input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.selector-cantidad__paso {
  min-width: 2.75rem;
  border: var(--trazo) var(--borde-control);
  background: var(--fondo-3);
  color: var(--texto-fuerte);
  font: 700 var(--op-titulo-3) / 1 var(--fuente-datos);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
.selector-cantidad__paso:hover,
.selector-cantidad__paso:focus-visible { background: var(--acento); color: var(--sobre-acento); }

input:disabled, textarea:disabled, select:disabled,
input[readonly], textarea[readonly] {
  background-color: var(--fondo-2);
  border-style: dotted;
  color: var(--texto-2);
  cursor: not-allowed;
}
input[readonly], textarea[readonly] { cursor: default; }

[aria-invalid="true"] {
  border: var(--trazo-fuerte) var(--error) !important;
  animation: sacudon 240ms var(--curva-golpe) 1;
}

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

input[inputmode="decimal"],
input[inputmode="numeric"] { text-align: right; font-family: var(--fuente-datos); }

/* Casillas y opciones: nativas, cuadradas. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: var(--trazo-fuerte) var(--borde-control);
  background: var(--fondo-3);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--curva-golpe), border-color var(--dur-2) var(--curva-golpe);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--acento); border-color: var(--acento); }
/* La tilde aparece con el resorte. */
input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-left: var(--trazo-fuerte) var(--sobre-acento);
  border-bottom: var(--trazo-fuerte) var(--sobre-acento);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-2) var(--curva-resorte);
}
input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
/* Opción elegida: un cuadrado interior, no un círculo. */
input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--fondo-3); }

/* El interruptor de estado: una pista rectangular con un bloque que se desliza. */
input[role="switch"] { display: inline-block; width: 44px; height: 22px; }
input[role="switch"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 0;
  background: var(--texto-2);
  transform: none;
  transition: transform var(--dur-2) var(--curva-golpe), background-color var(--dur-2) var(--curva-golpe);
}
input[role="switch"]:checked::after { transform: translateX(22px); background: var(--sobre-acento); }

.campo-con-prefijo { display: flex; align-items: center; gap: var(--esp-2); }
.campo-con-prefijo > .prefijo { font-family: var(--fuente-datos); color: var(--texto-2); white-space: nowrap; }
.campo-con-prefijo > input { flex: 1 1 6rem; min-width: 0; }

.grupo-de-campos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding-top: var(--esp-5);
  border-top: var(--trazo) var(--linea);
}
.grupo-de-campos > legend,
.grupo-de-campos > .grupo-de-campos__titulo {
  float: left;
  width: 100%;
  margin-bottom: var(--esp-4);
  font: 700 var(--op-titulo-2) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.grupo-de-campos > legend + * { clear: both; }

.casilla { display: flex; align-items: flex-start; gap: var(--esp-3); cursor: pointer; }
.casilla > input { margin-top: 2px; }
.casilla--critica > span { font-weight: 700; color: var(--texto-fuerte); }
.casilla--critica > input { border-color: var(--error); }
/* Una opción con su explicación debajo (CU-PED-OPC). */
.casilla--opcion { padding: var(--esp-3); border: var(--trazo) var(--linea); }
.casilla--opcion:has(> input:checked) { border-color: var(--acento); }
.casilla-estado {
  min-width: 6ch;
  font-weight: 700;
  font-size: var(--op-chico);
  color: var(--texto-fuerte);
}

/* Valor que puso el sistema: «ƒ» antes del valor, borde punteado. */
.calculado {
  display: inline-block;
  padding: 0 var(--esp-1);
  border: var(--trazo) dashed var(--dato);
  background: var(--fondo-2);
  color: var(--dato);
  font-family: var(--fuente-datos);
  font-weight: 500;
}
.calculado::before { content: "ƒ "; opacity: 0.8; }

/* Control de ámbito. */
.ambito { border: var(--trazo) var(--linea); padding: var(--esp-4); background: var(--fondo-2); }
.ambito-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: var(--trazo) var(--linea);
}
.ficha-opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: var(--trazo) var(--borde-control);
  background: var(--fondo-3);
  cursor: pointer;
  font-size: var(--op-chico);
}
.ficha-opcion:has(input:checked) { background: var(--acento-suave); border-color: var(--acento); font-weight: 700; }
.ficha-opcion:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Selector de etiquetas. */
.selector-etiquetas { border: var(--trazo) var(--borde-control); background: var(--fondo-3); }
.selector-etiquetas:focus-within { box-shadow: inset 0 -2px 0 var(--acento); }
.selector-etiquetas__fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
}
.selector-etiquetas__buscador {
  flex: 1 1 8rem;
  min-width: 8rem;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: var(--esp-1) !important;
}
.selector-etiquetas__lista {
  max-height: 16rem;
  overflow-y: auto;
  border-top: var(--trazo) var(--linea);
  background: var(--fondo-2);
  animation: aparece var(--dur-3) var(--curva-golpe) both;
}
.selector-etiquetas__grupo {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.selector-etiquetas__opcion {
  display: block;
  width: 100%;
  padding: var(--esp-2) var(--esp-4);
  border: 0;
  border-bottom: var(--trazo) var(--linea);
  background: transparent;
  color: var(--texto);
  text-align: left;
  font: 400 var(--op-base) / 1.4 var(--fuente-interfaz);
  cursor: pointer;
}
.selector-etiquetas__opcion:hover,
.selector-etiquetas__opcion--resaltada {
  background: var(--fondo-3);
  box-shadow: inset 3px 0 0 var(--acento);
  font-weight: 700;
}
.selector-etiquetas__vacio { padding: var(--esp-3) var(--esp-4); color: var(--texto-2); }

.ficha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2);
  border: var(--trazo) var(--borde-control);
  background: var(--fondo-3);
  clip-path: var(--forma-corte-chico);
  font-size: var(--op-chico);
  animation: ficha-entra var(--dur-2) var(--curva-resorte) both;
}
.ficha button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--texto-2);
  font: 700 var(--op-base) / 1 var(--fuente-interfaz);
  transition: color var(--dur-1) var(--curva-golpe);
}
.ficha button:hover { color: var(--error); }

/* Autocompletado propio sobre un `<datalist>`. */
.caja-autocompletado { position: relative; }
.lista-autocompletado {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  border: var(--trazo-fuerte) var(--texto);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-1);
}
.lista-autocompletado li {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
  cursor: pointer;
}
.lista-autocompletado li[aria-selected="true"] { background: var(--fondo-3); box-shadow: inset 3px 0 0 var(--acento); font-weight: 700; }

.aviso-duplicado { padding: var(--esp-4); border: var(--trazo-fuerte) var(--acento); background: var(--fondo-2); }
.aviso-duplicado:not([data-visible]) { display: none; }

.campo-con-ojo { display: flex; gap: var(--esp-3); align-items: center; }
.campo-con-ojo > input { flex: 1 1 auto; }

/* Vista previa de la imagen elegida: marco grueso y sombra dura. */
.vista-previa {
  width: 120px;
  height: 160px;
  margin-top: var(--esp-2);
  object-fit: cover;
  border: var(--trazo-grueso) var(--texto-fuerte);
  box-shadow: var(--sombra-golpe-1);
}

/* ---------------------------------------------------------------------
   Bloques
   --------------------------------------------------------------------- */
.encabezado-de-pantalla {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: var(--trazo) var(--linea);
}
.encabezado-de-pantalla__textos { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.encabezado-de-pantalla__textos > p { max-width: var(--ancho-lectura); color: var(--texto-2); }
.miga {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--op-chico);
  color: var(--texto-2);
}
.miga a { color: var(--texto-2); }

.seccion { display: flex; flex-direction: column; gap: var(--esp-4); }
.seccion__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-bottom: var(--esp-2);
  border-bottom: var(--trazo) var(--linea);
}
/* Delante del título, una barra `--acento` de 3×16 sesgada. */
.seccion__titulo > h2,
.seccion__titulo > h3 { display: inline-flex; align-items: center; gap: var(--esp-2); }
.seccion__titulo > h2::before,
.seccion__titulo > h3::before {
  content: "";
  width: 3px;
  height: 16px;
  background: var(--acento);
  transform: skewX(var(--sesgo));
}
.seccion__bajada { color: var(--texto-2); max-width: var(--ancho-lectura); }

/* Panel: fondo elevado con la esquina cortada en una capa detrás. */
.panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fondo-2);
  clip-path: var(--forma-corte);
}
/* Aviso crítico: la única cinta del operativo, arriba del panel. */
.panel--atencion { padding-top: calc(var(--esp-5) + 8px); }
.panel--atencion::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: var(--corte);
  height: 8px;
  background: var(--cinta);
}
.superficie { background: var(--fondo-2); padding: var(--esp-5); }
.divisor { border-top: var(--trazo) var(--linea); padding-top: var(--esp-5); }

.barra-de-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-4);
  padding: var(--esp-4);
  background: var(--fondo-2);
  border-left: 3px solid var(--acento);
}
.barra-de-herramientas > .campo { flex: 1 1 12rem; }
.barra-de-herramientas > .campo--principal { flex: 3 1 20rem; }

/* Encabezado de paso: número grande en contorno; el actual, relleno. */
.paso {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding-bottom: var(--esp-2);
  border-bottom: var(--trazo) var(--linea);
}
.paso__numero {
  font: 800 var(--op-titulo-1) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  color: transparent;
  -webkit-text-stroke: 1px var(--texto-2);
}
.paso:focus-within .paso__numero,
.paso--actual .paso__numero { color: var(--acento); -webkit-text-stroke: 0; }

.item-lote {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background: var(--fondo-2);
  border: var(--trazo) var(--linea);
  border-left: 3px solid var(--linea);
  transition: border-color var(--dur-1) var(--curva-golpe);
  animation: aparece var(--dur-3) var(--curva-golpe) both;
}
.item-lote:focus-within { border-left-color: var(--acento); }
.item-lote--con-error { border-color: var(--error); border-left-color: var(--error); }
.item-lote__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
}
.item-lote__numero {
  font: 800 var(--op-titulo-2) / 1 var(--fuente-display);
  color: transparent;
  -webkit-text-stroke: 1px var(--texto-2);
}
.invisible { visibility: hidden; }

/* Gestor de las filas de la portada (B-07-010): tarjetas como los ítems del
   lote, que se reordenan arrastrando el asa o con «Subir» / «Bajar». */
.gestor-filas { display: flex; flex-direction: column; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.tarjeta-fila {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background: var(--fondo-2);
  border: var(--trazo) var(--linea);
  border-left: 3px solid var(--linea);
  transition: border-color var(--dur-1) var(--curva-golpe), opacity var(--dur-2) var(--curva-golpe);
}
.tarjeta-fila:focus-within { border-left-color: var(--acento); }
.tarjeta-fila--con-error { border-color: var(--error); border-left-color: var(--error); }
.tarjeta-fila--arrastrando { opacity: 0.4; border-style: dashed; }
.tarjeta-fila--destino { border-top-color: var(--acento); }
/* Marcada para quitar: punteada y tachada, sin depender del color. */
.tarjeta-fila--quitada { border-style: dotted; opacity: 0.6; }
.tarjeta-fila--quitada [data-nombre-fila] { text-decoration: line-through; }
.tarjeta-fila__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
}
.tarjeta-fila__asa {
  display: inline-flex;
  padding: var(--esp-1);
  border: var(--trazo) var(--borde-control);
  background: var(--fondo-3);
  color: var(--texto-2);
  cursor: grab;
  transition: color var(--dur-1) var(--curva-golpe), border-color var(--dur-1) var(--curva-golpe);
}
.tarjeta-fila__asa:hover { color: var(--texto); border-color: var(--texto); }
.tarjeta-fila--arrastrando .tarjeta-fila__asa { cursor: grabbing; }
.tarjeta-fila__numero {
  font: 800 var(--op-titulo-2) / 1 var(--fuente-display);
  color: transparent;
  -webkit-text-stroke: 1px var(--texto-2);
}
.tarjeta-fila__cuerpo { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .tarjeta-fila__cuerpo { grid-template-columns: 120px 1fr; align-items: start; }
}
.tarjeta-fila__imagen {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  max-width: 120px;
  border: var(--trazo) var(--linea);
  background: var(--fondo-3);
}
.tarjeta-fila__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-fila__sin-imagen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--op-chico);
  color: var(--texto-2);
}

/* Recuadro de cifra. */
.cifras { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.cifra {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  color: var(--texto);
  text-decoration: none;
  animation: aparece var(--dur-3) var(--curva-golpe) both;
}
.cifra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fondo-2);
  clip-path: var(--forma-corte);
}
.cifras > .cifra:nth-child(2) { animation-delay: var(--escalonado); }
.cifras > .cifra:nth-child(3) { animation-delay: calc(2 * var(--escalonado)); }
.cifras > .cifra:nth-child(4) { animation-delay: calc(3 * var(--escalonado)); }
a.cifra:hover .cifra__rotulo { color: var(--texto); }
.cifra__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.cifra__valor {
  font: 800 var(--op-cifra) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  font-variant-numeric: tabular-nums;
  color: var(--texto-fuerte);
}
.cifra__nota { font-size: var(--op-chico); color: var(--texto-2); }
.cifra--atencion { outline: var(--trazo-fuerte) var(--acento); outline-offset: -2px; }
.cifra--atencion .cifra__valor { color: var(--acento-texto); }
.cifra--atencion .cifra__rotulo:first-child { color: var(--acento-texto); font-size: var(--op-chico); letter-spacing: 0; text-transform: none; }

/* Mensajes: «Listo:», «Atención:», «Error:» y un borde de 4px. */
.mensajes { display: flex; flex-direction: column; gap: var(--esp-2); }
.mensaje {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-left: 4px solid var(--acento);
  background: var(--fondo-2);
  font-size: var(--op-chico);
  animation: aviso-entra var(--dur-3) var(--curva-golpe) both;
}
.mensaje > .icono { color: var(--acento-texto); width: 16px; height: 16px; margin-top: 2px; }
.mensaje__prefijo { font-weight: 700; margin-right: var(--esp-1); color: var(--acento-texto); }
.mensaje--listo { border-left-color: var(--ok); }
.mensaje--listo :is(.mensaje__prefijo, .icono) { color: var(--ok); }
.mensaje--error { border-left-color: var(--error); }
.mensaje--error :is(.mensaje__prefijo, .icono) { color: var(--error); }
.mensajes > .mensaje:nth-child(2) { animation-delay: calc(2 * var(--escalonado)); }
.mensajes > .mensaje:nth-child(3) { animation-delay: calc(4 * var(--escalonado)); }
.superficie-papel .mensaje--listo :is(.mensaje__prefijo, .icono) { color: var(--texto-fuerte); }

.aviso-sesion {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--esp-4) var(--esp-5);
  border-top: 4px solid var(--acento);
  background: var(--fondo-2);
}

/* Estado de un servicio: «● En línea» con latido. */
.estado-servicio { font: 700 var(--op-titulo-2) / 1.2 var(--fuente-display); text-transform: uppercase; }
.punto-en-linea { color: var(--ok); animation: latido 2s ease-in-out infinite; }
.punto-sin-conexion { color: var(--error); }

/* Carga: cinco barras por cuadros y la palabra. */
.cargando {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.barras-carga { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; }
.barras-carga > span {
  width: 5px;
  height: 24px;
  background: var(--acento);
  transform-origin: bottom;
  animation: barras-carga 800ms var(--curva-cuadro) infinite;
}
.barras-carga > span:nth-child(2) { animation-delay: 100ms; }
.barras-carga > span:nth-child(3) { animation-delay: 200ms; }
.barras-carga > span:nth-child(4) { animation-delay: 300ms; }
.barras-carga > span:nth-child(5) { animation-delay: 400ms; }
.capa-carga {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  background: var(--fondo);
}
.capa-carga--fija { display: grid; }
.capa-tabla {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
}
.capa-tabla--visible { display: grid; }
.contenedor-tabla { position: relative; }
.contenedor-tabla:has(.capa-tabla--visible) .tabla { opacity: 0.5; }

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-7) var(--esp-5);
  background: var(--trama-puntos), var(--fondo-2);
  text-align: center;
  color: var(--texto-2);
}
.vacio .icono { width: 32px; height: 32px; color: var(--acento); }
.vacio p { max-width: var(--ancho-lectura); }

/* El diálogo nativo: hoja con trazo fuerte y sombra dura. */
.dialogo {
  width: min(28rem, calc(100vw - 2 * var(--esp-4)));
  padding: var(--esp-5);
  border: var(--trazo-fuerte) var(--texto);
  border-radius: var(--radio);
  background: var(--fondo-2);
  color: var(--texto);
  box-shadow: var(--sombra-golpe-2);
  animation: dialogo-entra var(--dur-2) var(--curva-golpe) both;
}
/* El telón: noche al 70 % con la trama y un desenfoque de 4px (plan 00 de
   interfaz, ambigüedad 2). Es el único `backdrop-filter` del sistema; donde el
   navegador no lo soporta, queda el telón sin desenfoque. */
.dialogo::backdrop {
  background: var(--trama-rayas), color-mix(in srgb, var(--noche) 70%, transparent);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------
   Tablas y listas
   --------------------------------------------------------------------- */
.tabla-desplazable { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.tabla { font-size: var(--op-chico); }
.tabla caption { padding-bottom: var(--esp-2); text-align: left; color: var(--texto-2); }
.tabla th {
  text-align: left;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--trazo-fuerte) var(--texto);
  vertical-align: bottom;
  white-space: nowrap;
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.tabla td {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
  /* Al medio: un campo o un botón en la fila queda a la altura del texto. */
  vertical-align: middle;
}
/* Un número que se carga dentro de una fila (unidades recibidas, plan 01). */
.tabla .entrada-cifra { width: 7rem; text-align: right; }
.tabla tbody td { transition: background-color var(--dur-1) var(--curva-golpe), box-shadow var(--dur-1) var(--curva-golpe); }
.tabla tbody tr:hover > td { background: var(--fondo-3); }
.tabla tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.tabla td.numero, .tabla .datos { font: 500 var(--op-dato) / 1.45 var(--fuente-datos); }
.tabla th.numero, .tabla td.numero { text-align: right; }
.tabla .acciones-de-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  justify-content: flex-end;
}
.tabla td.acciones-de-fila { display: table-cell; text-align: right; white-space: nowrap; }
.tabla td.acciones-de-fila > * + * { margin-left: var(--esp-4); }
.tabla .celda-principal { font-size: var(--op-base); color: var(--texto-fuerte); }
.tabla .celda-principal a { font-weight: 700; color: var(--texto-fuerte); text-decoration: none; }
.tabla .celda-principal a:hover { text-decoration: underline; text-decoration-color: var(--acento); }
.tabla tfoot td { border-bottom: 0; border-top: var(--trazo-fuerte) var(--texto); font-weight: 700; }
.tabla-vacia { padding: var(--esp-6) var(--esp-5); text-align: center; color: var(--texto-2); }
.fila-destacada { animation: destello-fila 1200ms var(--curva-golpe) 1; }

.lista-renglones { border-top: var(--trazo) var(--linea); }
.lista-renglones > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-5);
  padding-block: var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
}

.datos-de-ficha {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  border-top: var(--trazo) var(--linea);
}
.datos-de-ficha > dt,
.datos-de-ficha > dd {
  margin: 0;
  padding-block: var(--esp-2);
  border-bottom: var(--trazo) var(--linea);
}
.datos-de-ficha > dt {
  padding-right: var(--esp-5);
  font: 700 var(--op-rotulo) / 2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.datos-de-ficha > dd { overflow-wrap: anywhere; }

.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-top: var(--esp-4);
  font-size: var(--op-chico);
  color: var(--texto-2);
}

/* Portadas: sus colores, con marco y sombra dura. Nunca filtros. */
.portada-chica { width: 48px; height: 64px; object-fit: cover; border: var(--trazo) var(--linea); }
.portada {
  width: 100%;
  max-width: 240px;
  border: var(--trazo-grueso) var(--texto-fuerte);
  box-shadow: var(--sombra-golpe-1);
}
.portada-vacia {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 2 / 3;
  border: var(--trazo-fuerte) dashed var(--borde-control);
  background: var(--trama-puntos), var(--fondo-2);
  color: var(--texto-2);
}

.contenido-extraido {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4) var(--esp-5);
  border: var(--trazo) var(--linea);
  background: var(--fondo-2);
  font: 500 var(--op-dato) / 1.45 var(--fuente-datos);
  overflow-x: auto;
}
.linea-extraida { white-space: pre-wrap; color: var(--texto-2); }
.linea-extraida--fila { color: var(--texto); border-left: var(--trazo-fuerte) var(--acento); padding-left: var(--esp-3); }

.tarjeta {
  display: flex;
  gap: var(--esp-4);
  padding: var(--esp-4);
  border: var(--trazo) var(--linea);
  background: var(--fondo-2);
}
.tarjeta__portada { width: 72px; flex-shrink: 0; }
.tarjeta__portada img { width: 100%; border: var(--trazo) var(--linea); }
.tarjeta__portada .portada-vacia { font-size: var(--op-chico); text-align: center; }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; flex: 1 1 auto; }
.tarjeta__datos { display: grid; gap: var(--esp-2) var(--esp-5); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.tarjeta__datos dt { font: 700 var(--op-rotulo) / 1.4 var(--fuente-display); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--texto-2); }
.tarjeta__datos dd { margin: 0; font-family: var(--fuente-datos); }

.reparo {
  padding-left: var(--esp-3);
  border-left: var(--trazo-fuerte) var(--acento);
  font-size: var(--op-chico);
}

.galeria-producto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: var(--esp-3);
}
.galeria-producto__item { display: flex; flex-direction: column; gap: var(--esp-1); }
.galeria-producto__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--trazo-fuerte) var(--texto-fuerte);
  transition: transform var(--dur-2) var(--curva-golpe), box-shadow var(--dur-2) var(--curva-golpe);
}
a.galeria-producto__item:hover img { transform: translate(-2px, -2px); box-shadow: var(--sombra-golpe-1); }

/* ---------------------------------------------------------------------
   El visor de imágenes de un producto (`_visor_imagenes.html`; B-00-026): la
   imagen grande, la tira de miniaturas y la ampliación en un diálogo propio.
   --------------------------------------------------------------------- */
.visor { display: grid; gap: var(--esp-5); min-width: 0; }
.visor__principal {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-3);
  box-shadow: var(--sombra-golpe-3);
  cursor: zoom-in;
}
.visor__principal img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.visor__lupa {
  position: absolute;
  right: var(--esp-2);
  bottom: var(--esp-2);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--trazo) var(--texto-fuerte);
  background: var(--noche);
  color: var(--texto-fuerte);
  opacity: 0;
  transition: opacity var(--dur-1) var(--curva-golpe);
}
.visor__principal:hover .visor__lupa,
.visor__principal:focus-visible .visor__lupa { opacity: 1; }
.visor__miniaturas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.visor__tira { display: flex; gap: var(--esp-2); overflow-x: auto; }
.visor__miniatura {
  flex: 0 0 4.5rem;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: var(--trazo) var(--linea);
  background: var(--fondo-3);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity var(--dur-1) var(--curva-golpe), border-color var(--dur-1) var(--curva-golpe);
}
.visor__miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visor__miniatura:hover { border-color: var(--texto); opacity: 1; }
.visor__miniatura[aria-current] { border: var(--trazo-fuerte) var(--acento); opacity: 1; }
.visor__dialogo {
  width: min(72rem, calc(100vw - 2 * var(--esp-4)));
  max-width: none;
  height: min(92vh, 60rem);
  max-height: none;
  padding: 0;
  background: var(--noche);
}
.visor__dialogo[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visor__dialogo-cabeza {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--esp-4);
  border-bottom: var(--trazo) var(--linea);
  color: var(--texto-2);
}
.visor__escenario {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: var(--esp-3) var(--esp-8);
}
/* La imagen llena el escenario y se ajusta adentro: nunca lo desborda. */
.visor__escenario img { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: pan-y; user-select: none; }
.visor__paso {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--trazo-fuerte) var(--borde-control);
  background: var(--fondo-2);
  color: var(--texto-fuerte);
  transform: translateY(-50%);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
.visor__paso:hover { border-color: var(--acento); color: var(--acento-texto); }
.visor__paso--anterior { left: var(--esp-3); }
.visor__paso--siguiente { right: var(--esp-3); }
.visor__tira { justify-content: center; padding: var(--esp-3); border-top: var(--trazo) var(--linea); }
.visor__tira:empty { display: none; }
.visor__tira .visor__miniatura { flex-basis: 3.5rem; }
@media (max-width: 600px) {
  .visor__escenario { padding: var(--esp-2); }
  .visor__paso { width: 40px; height: 40px; background: color-mix(in srgb, var(--noche) 80%, transparent); }
  .visor__tira { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   El gestor de imágenes del producto (plan 00 de interfaz, cuarta parte, C;
   B-00-026): la portada y las adicionales en tarjetas compactas, cada una con
   su barra de acciones, y la zona de soltar para sumar.
   --------------------------------------------------------------------- */
.gestor-imagenes { display: grid; gap: var(--esp-4); }
.gestor-imagenes__cabeza { display: grid; gap: var(--esp-1); }
.gestor-imagenes__cabeza > * { margin: 0; }
.gestor-imagenes__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gestor-imagenes__grilla:empty { display: none; }
.gestor-imagenes__item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-2);
  border: var(--trazo) var(--linea);
  background: var(--fondo-2);
  transition: border-color var(--dur-1) var(--curva-golpe), transform var(--dur-2) var(--curva-golpe);
}
.gestor-imagenes__item[draggable="true"] { cursor: grab; }
.gestor-imagenes__item[draggable="true"]:hover { border-color: var(--borde-control); }
.gestor-imagenes__item--portada { border-color: var(--acento); }
.gestor-imagenes__item--arrastrada { opacity: 0.45; }
.gestor-imagenes__item:has(input[type="checkbox"]:checked) .gestor-imagenes__marco { opacity: 0.35; }
.gestor-imagenes__item:has(input[type="radio"]:checked) { border-color: var(--acento); }
.gestor-imagenes__marco {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: var(--trazo) var(--linea);
  background: var(--fondo-3);
}
.gestor-imagenes__marco img { width: 100%; height: 100%; object-fit: cover; }
.gestor-imagenes__vacio {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3);
  color: var(--texto-2);
  font-size: var(--op-chico);
  text-align: center;
}
.gestor-imagenes__vacio .icono { width: 28px; height: 28px; }
.gestor-imagenes__rotulo,
.gestor-imagenes__numero {
  position: absolute;
  top: var(--esp-1);
  padding: 1px var(--esp-2);
  font: 700 var(--op-rotulo) / 1.6 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.gestor-imagenes__rotulo { left: var(--esp-1); background: var(--acento); color: var(--sobre-acento); }
.gestor-imagenes__numero { right: var(--esp-1); background: var(--noche); color: var(--texto-fuerte); }
.gestor-imagenes__nombre { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gestor-imagenes__acciones { display: flex; flex-wrap: wrap; align-content: start; gap: var(--esp-1); }
.gestor-imagenes__soltar {
  display: grid;
  justify-items: center;
  gap: var(--esp-1);
  padding: var(--esp-5) var(--esp-4);
  border: var(--trazo-fuerte) dashed var(--borde-control);
  background: var(--fondo-2);
  color: var(--texto);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--curva-golpe), background-color var(--dur-1) var(--curva-golpe);
}
.gestor-imagenes__soltar .icono { width: 24px; height: 24px; color: var(--acento); }
.gestor-imagenes__soltar:hover,
.gestor-imagenes__soltar:focus-within,
.gestor-imagenes__soltar--encima { border-color: var(--acento); background: var(--acento-suave); }

/* La acción compacta de una tarjeta: un rótulo que se marca. Envuelve su
   casilla o su archivo, que quedan ocultos; marcada, se llena de acento. */
.ficha-accion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-height: 32px;
  padding: 0 var(--esp-2);
  border: var(--trazo) var(--borde-control);
  background: transparent;
  color: var(--texto);
  font: 700 var(--op-rotulo) / 1 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--curva-golpe), background-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
/* La casilla o el archivo van dentro, ocultos: la acción entera es el control.
   Lleva el tipo en el selector para ganarle a la regla general de las casillas. */
.ficha-accion > input[type] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.ficha-accion .icono { width: 14px; height: 14px; }
.ficha-accion--icono { width: 32px; padding: 0; }
.ficha-accion:hover { border-color: var(--texto); color: var(--texto-fuerte); }
.ficha-accion:focus-within,
.ficha-accion:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ficha-accion:has(input:checked) { border-color: var(--acento); background: var(--acento); color: var(--sobre-acento); }
.ficha-accion--critica:hover { border-color: var(--error); color: var(--error); }
.ficha-accion--critica:has(input:checked) { border-color: var(--error); background: var(--error); color: var(--sobre-error); }

.miniatura-banner {
  display: block;
  width: 12rem;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--trazo-fuerte) var(--texto-fuerte);
}
.miniatura-banner--grande { width: 100%; max-width: var(--ancho-lectura); box-shadow: var(--sombra-golpe-1); }
.miniatura-logo {
  display: block;
  max-width: 8rem;
  max-height: 4rem;
  object-fit: contain;
  border: var(--trazo) var(--linea);
}

/* Cada imagen de la identidad con su vista: la cargada o la predeterminada,
   como la tarjeta «Ver todo» de las filas (B-07-025). */
.imagen-configurable { display: grid; gap: var(--esp-4); grid-template-columns: 9rem minmax(0, 1fr); align-items: start; }
.imagen-configurable__vista {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--trazo-fuerte) var(--texto-fuerte);
  background: var(--fondo-2);
}
.imagen-configurable__vista--alta { aspect-ratio: 2 / 3; }
.imagen-configurable__vista > img { width: 100%; height: 100%; object-fit: contain; }
.imagen-configurable__vista--alta > img { object-fit: cover; }
.imagen-configurable__predeterminada {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  justify-self: stretch;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--trama-puntos-grande), var(--fondo-2);
}
.imagen-configurable__nombre {
  font: 800 var(--op-titulo-2) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
  overflow-wrap: anywhere;
}
.imagen-configurable__logo { max-height: 60%; object-fit: contain; }
.imagen-configurable__rotulo {
  align-self: flex-start;
  padding: 2px var(--esp-2);
  background: var(--acento);
  color: var(--sobre-acento);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  transform: skewX(var(--sesgo));
}

/* La miniatura de la tienda en la identidad visual: lleva `modo-publico`. */
.vista-previa-tienda { min-height: 14rem; border: var(--trazo-fuerte) var(--texto); }
.vista-previa-tienda::before { display: none; }
.vista-previa-tienda .encabezado-publico { position: static; }
.vista-previa-tienda .columna-publica { padding: var(--esp-4); }

/* Cotizaciones de referencia de la carga de importados. */
.cotizaciones-de-referencia { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); }
.cotizaciones-de-referencia > div { display: flex; gap: var(--esp-2); align-items: baseline; }
.cotizaciones-de-referencia dt { font: 700 var(--op-rotulo) / 1.2 var(--fuente-display); letter-spacing: var(--tracking-rotulo); color: var(--texto-2); }
.cotizaciones-de-referencia dd { color: var(--dato); }

/* Contenido Markdown publicado (FAQ). */
.contenido-markdown {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  max-width: var(--ancho-lectura);
  font-size: var(--pub-cuerpo);
  line-height: 1.6;
}
.contenido-markdown h1, .contenido-markdown h2, .contenido-markdown h3 {
  padding-bottom: var(--esp-2);
  border-bottom: var(--trazo) var(--linea);
}
.contenido-markdown ul { list-style: square; padding-left: var(--esp-5); }
.contenido-markdown ol { list-style: decimal; padding-left: var(--esp-5); }
.contenido-markdown li + li { margin-top: var(--esp-2); }
.contenido-markdown li::marker { color: var(--acento-texto); }

/* Globo de diálogo cuadrado: FAQ, citas y reseñas. */
.globo {
  position: relative;
  padding: var(--esp-5);
  border: var(--trazo-fuerte) var(--texto);
  background: var(--fondo-2);
}
.globo::after {
  content: "";
  position: absolute;
  left: var(--esp-6);
  bottom: -14px;
  width: 20px;
  height: 14px;
  background: var(--texto);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ---------------------------------------------------------------------
   Tienda · escaparate (guía `Viñeta Nocturna.html`: portada, ticker,
   estantería, globo y pie)
   --------------------------------------------------------------------- */

/* Rótulo: antetítulo de portada y de sección, en el acento. */
.antetitulo {
  margin: 0;
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--acento-texto);
}

/* Cabeza de sección: rótulo, título y una barra sesgada que crece al entrar. */
.titulo-seccion { display: flex; flex-direction: column; }
.titulo-seccion > h1,
.titulo-seccion > h2 { margin-top: var(--esp-2); text-wrap: balance; }
.titulo-seccion::after {
  content: "";
  width: 72px;
  height: 6px;
  margin-top: var(--esp-3);
  background: var(--acento);
  transform-origin: left;
  transform: skewX(var(--sesgo-suave));
  animation: barra-crece var(--dur-3) var(--curva-golpe) both;
}
.titulo-seccion__bajada { max-width: 60ch; margin-top: var(--esp-4); color: var(--texto-2); }

/* Portada (hero): trama de rayas, corte diagonal abajo. */
.portada-tienda {
  position: relative;
  overflow: hidden;
  padding-block: var(--esp-7) calc(var(--esp-8) + 4vw);
  background: var(--fondo);
  clip-path: var(--forma-diagonal-abajo);
}
.portada-tienda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--trama-rayas);
  pointer-events: none;
}
.portada-tienda > .columna-publica {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--esp-7);
  align-items: center;
}
@media (min-width: 900px) {
  .portada-tienda > .columna-publica { grid-template-columns: 1.3fr 1fr; }
}
.portada-tienda__textos > * {
  animation: portada-entra var(--dur-5) var(--curva-golpe) both;
  animation-delay: calc(var(--i, 0) * 2 * var(--escalonado));
}
.portada-tienda__textos > :nth-child(2) { --i: 1; }
.portada-tienda__textos > :nth-child(3) { --i: 2; }
.portada-tienda__textos > :nth-child(4) { --i: 3; }
.portada-tienda__bajada { max-width: 46ch; margin: 0 0 var(--esp-6); color: var(--texto-2); }
.portada-tienda__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); }

.titulo-mega {
  position: relative;
  display: inline-block;
  margin: var(--esp-3) 0 var(--esp-5);
  font: italic 900 var(--pub-mega) / 0.9 var(--fuente-display);
  font-stretch: var(--ancho-apretado);
  letter-spacing: var(--tracking-titulo);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--texto-fuerte);
}
/* Glitch: dos copias del texto recortadas en bandas. El guion pone
   `glitcheando` al cargar y al pasar el puntero. */
.titulo-glitch::before,
.titulo-glitch::after {
  content: attr(data-texto) / "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.titulo-glitch::before { color: var(--acento); }
.titulo-glitch::after { color: var(--texto-fuerte); }
.titulo-glitch.glitcheando::before { animation: titulo-glitch 360ms var(--curva-cuadro) 1; }
.titulo-glitch.glitcheando::after { animation: titulo-glitch 360ms var(--curva-cuadro) 1 reverse; }

/* La portada destacada: sobre un círculo de trama naranja, girada. */
.portada-tienda__destacada {
  position: relative;
  justify-self: center;
  width: min(320px, 80vw);
  animation: portada-entra var(--dur-5) var(--curva-golpe) calc(6 * var(--escalonado)) both;
}
.portada-tienda__destacada::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -6%;
  width: 115%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--acento) 2.2px, transparent 2.8px) 0 0 / 14px 14px;
  clip-path: circle(50%);
  opacity: 0.9;
}
.portada-tienda__destacada img {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: var(--trazo-grueso) var(--texto-fuerte);
  box-shadow: var(--sombra-golpe-3);
  transform: rotate(var(--giro-sticker));
  view-transition-name: portada-destacada;
}

/* Sticker: Bangers, relleno acento, girado. Nunca en el mostrador. */
.sticker {
  display: inline-block;
  padding: var(--esp-1) var(--esp-3);
  border: var(--trazo-fuerte) var(--noche);
  background: var(--acento);
  color: var(--noche);
  font: 400 var(--pub-grito) / 1 var(--fuente-grito);
  letter-spacing: 0.02em;
  transform: rotate(4deg);
  box-shadow: 4px 4px 0 var(--blanco);
  animation: sticker-pega var(--dur-3) var(--curva-resorte) 700ms both;
}
.portada-tienda__destacada .sticker {
  position: absolute;
  z-index: 3;
  right: -6%;
  top: 6%;
}

/* Ticker: franja acento con bordes negros, inclinada entre secciones. */
.ticker {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  height: 48px;
  margin-block: calc(-1 * var(--esp-6)) var(--esp-6);
  overflow: hidden;
  border-block: var(--trazo-fuerte) var(--noche);
  background: var(--acento);
  color: var(--noche);
  transform: skewY(var(--sesgo-suave));
}
.ticker__pista {
  display: flex;
  width: max-content;
  animation: ticker 30s linear infinite;
}
.ticker__pista > span {
  padding-inline: var(--esp-4);
  white-space: nowrap;
  font: 800 var(--pub-cuerpo) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
}
.ticker__pista > span::after { content: "✦"; padding-left: var(--esp-5); }
.ticker:hover .ticker__pista,
.ticker:focus-within .ticker__pista,
.ticker--pausado .ticker__pista { animation-play-state: paused; }
.ticker__pausa {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding-inline: var(--esp-4);
  border: 0;
  background: var(--noche);
  color: var(--senal);
  font: 700 var(--pub-rotulo) / 1 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
}

/* La sección de papel que entra en diagonal (estantería de la portada). */
.seccion-publica--diagonal {
  clip-path: var(--forma-diagonal-arriba);
  padding-top: calc(var(--esp-9) + 4vw);
}
/* Separador entre una sección noche y una papel. */
.union-cinta { height: 12px; background: var(--cinta); }

/* Estantería: grilla de viñetas con su «calle». */
.estanteria {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tarjeta-producto {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  color: var(--texto);
  text-decoration: none;
  transition: transform var(--dur-2) var(--curva-golpe), box-shadow var(--dur-2) var(--curva-golpe);
  animation: aparece var(--dur-3) var(--curva-golpe) both;
  animation-delay: calc(min(var(--i, 0), 8) * var(--escalonado));
}
.tarjeta-producto:hover,
.tarjeta-producto:focus-within { transform: translate(-4px, -4px); box-shadow: var(--sombra-golpe-2); }
.tarjeta-producto__enlace { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
.tarjeta-producto__enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
/* Agregar una unidad sin abrir la ficha (B-07-014): a lo ancho, en la base de la
   tarjeta, debajo del precio (B-07-026). */
.tarjeta-producto__agregar { padding: 0 var(--esp-4) var(--esp-4); }
.tarjeta-producto__agregar button {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--esp-3);
  border: 0;
  background: none;
  color: var(--sobre-acento);
  font: 700 var(--pub-rotulo) / 1 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-2) var(--curva-golpe);
}
.tarjeta-producto__agregar button .icono { width: 18px; height: 18px; }
.tarjeta-producto__agregar button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--trazo-fuerte) var(--noche);
  background: var(--acento);
  clip-path: var(--forma-corte-chico);
  transition: background-color var(--dur-1) var(--curva-golpe);
}
.tarjeta-producto__agregar button:hover,
.tarjeta-producto__agregar button:focus-visible { transform: translate(-2px, -2px); filter: drop-shadow(3px 3px 0 var(--noche)); }
.tarjeta-producto__agregar button:hover::before { background: var(--acento-vivo); }
.tarjeta-producto__agregar button:active { transform: none; filter: none; }
.tarjeta-producto__agregar button:disabled { cursor: wait; opacity: 0.6; }
.tarjeta-producto__llegada { font-size: var(--pub-chico); font-weight: 700; color: var(--acento-texto); }
/* «¡TOMO 1!» y «¡ÚLTIMO TOMO!»: carteles de historieta sobre la portada. */
.cartel-tomo {
  position: absolute;
  right: var(--esp-2);
  bottom: var(--esp-3);
  z-index: 2;
  padding: 2px var(--esp-2);
  border: var(--trazo-fuerte) var(--noche);
  background: var(--blanco);
  color: var(--noche);
  font: 400 var(--pub-titulo-3) / 1 var(--fuente-grito);
  letter-spacing: 0.02em;
  transform: rotate(4deg);
  box-shadow: 3px 3px 0 var(--noche);
}
.cartel-tomo--primero { background: var(--senal); transform: rotate(var(--giro-sticker)); }
.tarjeta-producto__portada {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-bottom: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-3);
}
.tarjeta-producto__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-2) var(--curva-golpe);
}
.tarjeta-producto:hover .tarjeta-producto__portada img { transform: scale(1.04); }
.tarjeta-producto__portada .portada-vacia { max-width: none; height: 100%; border: 0; }
.tarjeta-producto__cuerpo { display: flex; flex: 1; flex-direction: column; gap: var(--esp-1); padding: var(--esp-4); }
.tarjeta-producto__titulo {
  font: 700 var(--pub-titulo-3) / 1.15 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  color: var(--texto-fuerte);
}
.tarjeta-producto:hover .tarjeta-producto__titulo {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tarjeta-producto__editorial { font-size: var(--pub-chico); color: var(--texto-2); }
.tarjeta-producto__precio {
  margin-top: auto;
  padding-top: var(--esp-2);
  font: 700 var(--op-titulo-3) / 1.4 var(--fuente-datos);
  color: var(--texto-fuerte);
}
.tarjeta-producto--sin-stock .tarjeta-producto__portada img { opacity: 0.6; }

/* El rótulo de estado sobre la portada, sesgado. */
.rotulo-estado {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-2);
  z-index: 2;
  padding: 2px var(--esp-2);
  font: 700 var(--op-rotulo) / 1.4 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  transform: skewX(var(--sesgo));
}
.rotulo-estado--disponible { border: var(--trazo-fuerte) var(--noche); background: var(--blanco); color: var(--noche); }
.rotulo-estado--pre-venta {
  padding: 3px;
  background: repeating-linear-gradient(-45deg, var(--senal) 0 6px, var(--noche) 6px 12px);
}
.rotulo-estado--pre-venta > span { display: block; padding: 1px var(--esp-2); background: var(--noche); color: var(--senal); }
.rotulo-estado--sin-stock { background: var(--noche); color: var(--humo); }
/* En la ficha, el mismo rótulo pero en el flujo del texto. */
.rotulo-estado--en-linea { position: static; align-self: flex-start; }

/* Catálogo (B-07-013): arriba la búsqueda; al costado, el panel de filtros. */
.catalogo-cabeza > .columna-publica { gap: var(--esp-6); }
.buscador-catalogo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  max-width: 48rem;
  padding-inline: var(--esp-5);
  color: var(--texto-2);
}
.buscador-catalogo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-2);
  transform: skewX(var(--sesgo));
  transition: border-color var(--dur-1) var(--curva-golpe);
}
.buscador-catalogo:focus-within::before { border-color: var(--acento); }
.buscador-catalogo .icono { width: 24px; height: 24px; }
.buscador-catalogo input[type="search"],
.buscador-catalogo input[type="search"]:hover,
.buscador-catalogo input[type="search"]:focus-visible { min-height: 60px; font-size: var(--pub-cuerpo); }

/* La columna de las secciones apila con flex: el catálogo la cambia por grilla.
   En pantallas anchas, el catálogo usa todo el ancho: más tarjetas por renglón
   en lugar de márgenes vacíos (B-07-029). */
.seccion-publica > .columna-publica.catalogo { display: grid; gap: var(--esp-6); max-width: none; }
.catalogo-cabeza > .columna-publica { max-width: none; }
@media (min-width: 900px) {
  .seccion-publica > .columna-publica.catalogo { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}
.catalogo__abrir-panel {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border: var(--trazo-fuerte) var(--texto);
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.catalogo__abrir-panel::-webkit-details-marker { display: none; }
@media (min-width: 900px) {
  .catalogo__abrir-panel { display: none; }
}
.catalogo__panel[open] > .catalogo__abrir-panel { margin-bottom: var(--esp-4); }
.panel-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  padding: var(--esp-5);
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-2);
}
.panel-filtros__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: var(--trazo) var(--linea);
}
.panel-filtros__titulo {
  margin: 0;
  font: 800 var(--op-titulo-2) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.panel-filtros__grupo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.panel-filtros__grupo > legend {
  margin-bottom: var(--esp-2);
  padding: 0;
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--acento-texto);
}
.panel-filtros .casilla { align-items: center; font-size: var(--pub-chico); }
.panel-filtros .casilla > input { flex-shrink: 0; margin-top: 0; }
.catalogo__resultados { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.catalogo__resultados[aria-busy="true"] { opacity: 0.55; transition: opacity var(--dur-1) var(--curva-golpe); }

/* Filtros de la tienda. */
.filtros-tienda {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  align-items: end;
  padding: var(--esp-5);
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-2);
}

/* Ficha pública de producto. */
.ficha-publica { display: grid; gap: var(--esp-7); }
@media (min-width: 900px) {
  .ficha-publica { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}
.ficha-publica__portada img {
  width: 100%;
  border: var(--trazo-grueso) var(--texto-fuerte);
  box-shadow: var(--sombra-golpe-3);
}
.ficha-publica__precio { font: 700 var(--pub-titulo-2) / 1 var(--fuente-datos); color: var(--texto-fuerte); }

/* Carrito (CU-TDA-CRC). Las líneas a la izquierda, el resumen pegado a la derecha. */
.carrito { display: grid; gap: var(--esp-6); }
@media (min-width: 900px) {
  .carrito { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
}
.carrito__lineas { display: grid; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
.linea-carrito {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-4);
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
}
@media (min-width: 640px) {
  .linea-carrito { grid-template-columns: 5.5rem minmax(0, 1fr) auto auto; align-items: center; }
}
.linea-carrito--con-problema { border-color: var(--error); }
.linea-carrito__portada img,
.linea-carrito__portada .portada-vacia { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.linea-carrito__titulo {
  font: 700 var(--pub-titulo-3) / 1.15 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  color: var(--texto-fuerte);
  text-decoration: none;
}
.linea-carrito__titulo:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.linea-carrito__precio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0; }
.linea-carrito__acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); grid-column: 1 / -1; }
.linea-carrito__subtotal {
  grid-column: 1 / -1;
  margin: 0;
  font: 700 var(--op-titulo-2) / 1.2 var(--fuente-datos);
  color: var(--texto-fuerte);
  text-align: right;
}
@media (min-width: 640px) {
  .linea-carrito__acciones,
  .linea-carrito__subtotal { grid-column: auto; }
}
.campo--cantidad input { width: 5.5rem; }

.resumen-carrito {
  padding: var(--esp-5);
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-2);
}
.resumen-carrito__total {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin: 0;
  font: 700 var(--pub-titulo-2) / 1 var(--fuente-datos);
  color: var(--texto-fuerte);
}

/* Línea de tiempo de un pedido (B-08-001): cada estado alcanzado, con su fecha. */
.linea-de-tiempo { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.linea-de-tiempo__paso {
  display: grid;
  gap: var(--esp-1);
  padding-left: var(--esp-4);
  border-left: var(--trazo-grueso) var(--linea);
}
.linea-de-tiempo__paso--actual { border-left-color: var(--acento); }
.linea-de-tiempo__estado { font-weight: 700; color: var(--texto-fuerte); }

/* Barra del envío gratis (B-07-037): un <progress> con el subtotal sobre el monto mínimo. */
.barra-envio__pista {
  display: block;
  width: 100%;
  height: var(--esp-2);
  appearance: none;
  border: var(--trazo) var(--linea);
  background: var(--fondo);
  color: var(--acento);
}
.barra-envio__pista::-webkit-progress-bar { background: var(--fondo); }
.barra-envio__pista::-webkit-progress-value { background: var(--acento); }
.barra-envio__pista::-moz-progress-bar { background: var(--acento); }
.barra-envio__pista--completa { color: var(--ok); }
.barra-envio__pista--completa::-webkit-progress-value { background: var(--ok); }
.barra-envio__pista--completa::-moz-progress-bar { background: var(--ok); }

/* Una fila de la cuenta: un lote de puntos, con su estado y su cifra a la derecha. */
.fila-de-cuenta { flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* Resumen de la compra (CU-TDA-CMP, CU-TDA-INV): concepto a la izquierda, importe a la derecha. */
.resumen-compra { display: grid; gap: var(--esp-2); margin: 0; }
.resumen-compra > div { display: flex; justify-content: space-between; gap: var(--esp-3); }
.resumen-compra dt { color: var(--texto-2); }
.resumen-compra dd { margin: 0; text-align: right; }

/* El precio sin la oferta, tachado y en segundo plano. La guía no lo dibuja (B-03-011). */
.precio-anterior {
  margin-right: var(--esp-1);
  font-size: 0.7em;
  font-weight: 400;
  color: var(--texto-2);
  text-decoration-thickness: 2px;
}

/* Filas de la portada (B-07-009): tarjetas en una sola línea que se recorre de costado. */
.fila-portada { display: grid; gap: var(--esp-4); }
.fila-portada__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 200px);
  gap: var(--esp-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--esp-2) var(--esp-3) var(--esp-5) var(--esp-1);
}
.fila-portada__pista > * { scroll-snap-align: start; }
.fila-portada__pista:focus-visible { outline: var(--trazo-fuerte) var(--acento); }
/* Las flechas (B-07-016, B-07-022): pestañas sesgadas sobre los bordes de la
   pista, a la altura de las portadas. Sólo aparecen si la fila no
   entra entera, y se esconden en cada extremo. Al puntero se llenan de acento
   y suben con sombra dura, como el botón primario. */
.fila-portada__mandos { display: flex; align-items: center; gap: var(--esp-4); }
.fila-portada__marco { position: relative; min-width: 0; }
.fila-portada__flecha {
  position: absolute;
  top: 130px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 92px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto-fuerte);
  cursor: pointer;
  isolation: isolate;
  transform: translateY(-50%);
  transition: transform var(--dur-2) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
.fila-portada__flecha--atras { left: calc(-1 * var(--esp-4)); }
.fila-portada__flecha--adelante { right: calc(-1 * var(--esp-4)); }
.fila-portada__flecha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo);
  transform: skewX(var(--sesgo));
  transition: background-color var(--dur-1) var(--curva-golpe), border-color var(--dur-1) var(--curva-golpe);
}
.fila-portada__flecha .icono { width: 26px; height: 26px; transition: transform var(--dur-2) var(--curva-golpe); }
.modo-publico .fila-portada__flecha:hover,
.modo-publico .fila-portada__flecha:focus-visible {
  color: var(--sobre-acento);
  transform: translate(-2px, calc(-50% - 2px));
  filter: drop-shadow(4px 4px 0 var(--tienda-acento));
}
.fila-portada__flecha:hover::before,
.fila-portada__flecha:focus-visible::before { background: var(--acento); border-color: var(--noche); }
.fila-portada__flecha--adelante:hover .icono { transform: translateX(3px); }
.fila-portada__flecha--atras:hover .icono { transform: translateX(-3px); }
.modo-publico .fila-portada__flecha:active { transform: translateY(-50%); filter: none; }
/* Con el guion, la barra de recorrido reemplaza a la del navegador. */
.fila-portada__pista--guiada { scrollbar-width: none; }
.fila-portada__pista--guiada::-webkit-scrollbar { display: none; }
/* Cuánto de la fila se recorrió. */
.fila-portada__recorrido { height: 4px; overflow: hidden; background: var(--linea); }
.fila-portada__recorrido > span {
  display: block;
  height: 100%;
  background: var(--acento);
  transition: transform var(--dur-2) var(--curva-golpe);
}

/* La tarjeta titular que abre cada fila: con la imagen de la fila (sin
   filtros) o, sin imagen, tipográfica sobre trama. Lleva a «Ver todo». */
.fila-portada__titular {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--esp-2);
  min-height: 100%;
  padding: var(--esp-3);
  overflow: hidden;
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  color: var(--texto-fuerte);
  text-decoration: none;
  transition: transform var(--dur-2) var(--curva-golpe), box-shadow var(--dur-2) var(--curva-golpe);
}
.fila-portada__titular:hover,
.fila-portada__titular:focus-visible { transform: translate(-4px, -4px); box-shadow: var(--sombra-golpe-2); }
.fila-portada__titular img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fila-portada__titular--sin-imagen { justify-content: space-between; background: var(--trama-puntos-grande), var(--fondo-2); }
.fila-portada__titular-nombre {
  position: relative;
  align-self: flex-start;
  padding: var(--esp-2) var(--esp-3);
  background: var(--fondo);
  font: 800 var(--pub-titulo-2) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  letter-spacing: var(--tracking-titulo);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Sobre la imagen, el nombre va en una caja chica para no taparla. */
.fila-portada__titular:not(.fila-portada__titular--sin-imagen) .fila-portada__titular-nombre { font-size: var(--pub-titulo-3); }
.fila-portada__titular--sin-imagen .fila-portada__titular-nombre { padding: 0; background: none; }
.fila-portada__abanico { position: relative; flex: 1; display: block; min-height: 180px; }
.fila-portada__titular .fila-portada__abanico img {
  inset: auto;
  top: 8%;
  left: 6%;
  width: 58%;
  height: auto;
  aspect-ratio: 2 / 3;
  border: var(--trazo-fuerte) var(--noche);
  box-shadow: var(--sombra-golpe-1);
  transform: rotate(-8deg);
  transition: transform var(--dur-2) var(--curva-golpe);
}
.fila-portada__titular .fila-portada__abanico img:nth-child(2) { top: 2%; left: 22%; transform: rotate(4deg); }
.fila-portada__titular .fila-portada__abanico img:nth-child(3) { top: 14%; left: 36%; transform: rotate(-2deg); }
.fila-portada__titular:hover .fila-portada__abanico img:nth-child(1) { transform: rotate(-12deg) translateX(-6px); }
.fila-portada__titular:hover .fila-portada__abanico img:nth-child(3) { transform: rotate(2deg) translateX(6px); }
.fila-portada__titular-ver {
  position: relative;
  align-self: flex-start;
  padding: var(--esp-1) var(--esp-3);
  background: var(--acento);
  color: var(--sobre-acento);
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  transform: skewX(var(--sesgo));
}

/* Cuántas unidades lleva el carrito, junto al enlace del encabezado. */
.contador {
  display: inline-block;
  min-width: 1.5em;
  margin-left: var(--esp-1);
  padding: 0 var(--esp-1);
  background: var(--acento);
  color: var(--sobre-acento);
  font: 700 var(--op-rotulo) / 1.5 var(--fuente-datos);
  text-align: center;
  transform: skewX(var(--sesgo));
}

/* Globo de diálogo cuadrado: FAQ, reseñas. Cola de dos capas. */
.globo {
  position: relative;
  max-width: var(--ancho-lectura);
  margin-bottom: var(--esp-6);
  padding: var(--esp-5);
  border: var(--trazo-fuerte) var(--texto-fuerte);
  background: var(--fondo-2);
}
.globo::after {
  content: "";
  position: absolute;
  left: 40px;
  bottom: -22px;
  width: 28px;
  height: 22px;
  background: var(--texto-fuerte);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.globo::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 43px;
  bottom: -15px;
  width: 20px;
  height: 16px;
  background: var(--fondo-2);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Pie: cinta arriba, marca y datos. */
.pie-publico__cinta { height: 12px; background: var(--cinta); }

/* Carrusel de banners: barrido diagonal entre imágenes. */
.carrusel { position: relative; display: flex; flex-direction: column; gap: var(--esp-3); }
.carrusel__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--trazo-grueso) var(--texto-fuerte);
  box-shadow: var(--sombra-golpe-2);
}
.carrusel__imagen { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.carrusel__marco .carrusel__imagen { position: absolute; inset: 0; }
.carrusel__imagen--entra { animation: barrido-diagonal var(--dur-4) var(--curva-golpe) both; }
.carrusel__controles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  align-items: center;
  justify-content: center;
  font-size: var(--op-chico);
}
.carrusel__indicadores { display: flex; gap: var(--esp-2); }
.carrusel__indicadores > span { width: 10px; height: 10px; border: var(--trazo-fuerte) var(--texto-2); }
.carrusel__indicadores > span[aria-current="true"] { background: var(--acento); border-color: var(--acento); }

/* ---------------------------------------------------------------------
   Plan 00 de interfaz
   --------------------------------------------------------------------- */

/* Tarjeta de opción (4.1): para elegir entre pocas opciones con consecuencias
   distintas. El botón de opción es el nativo; la tarjeta es su <label>.
   Patrón tomado de las «radio cards» brutalistas de Uiverse.io (MIT), pasado por
   la regla de adaptación de RECURSOS_VISUALES.md: sin radios ni sombras difusas. */
.opciones-tarjeta {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 640px) {
  .opciones-tarjeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.opcion-tarjeta {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "opcion icono titulo"
    "opcion icono detalle";
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  padding: var(--esp-4);
  border: var(--trazo-fuerte) var(--borde-control);
  background: var(--fondo-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--curva-golpe), background-color var(--dur-1) var(--curva-golpe),
    transform var(--dur-2) var(--curva-golpe);
}
.opcion-tarjeta:hover { border-color: var(--texto); }
.opcion-tarjeta:active { transform: translate(1px, 1px); }
.opcion-tarjeta > input { grid-area: opcion; }
.opcion-tarjeta__icono { grid-area: icono; display: inline-grid; color: var(--texto-2); }
.opcion-tarjeta__icono .icono { width: 28px; height: 28px; }
.opcion-tarjeta__titulo {
  grid-area: titulo;
  font: 700 var(--pub-titulo-3) / 1.15 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  color: var(--texto-fuerte);
}
.opcion-tarjeta__detalle { grid-area: detalle; font-size: var(--pub-chico); color: var(--texto-2); }
.opcion-tarjeta:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.opcion-tarjeta:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion-tarjeta:has(input:checked) .opcion-tarjeta__icono { color: var(--acento-texto); }
/* La esquina sesgada con la marca: elegida no depende sólo del color. */
.opcion-tarjeta:has(input:checked)::after {
  content: "✓ Elegida";
  position: absolute;
  top: calc(-1 * var(--esp-3));
  right: var(--esp-3);
  padding: 0 var(--esp-2);
  background: var(--acento);
  color: var(--sobre-acento);
  font: 700 var(--pub-rotulo) / 1.6 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  transform: skewX(var(--sesgo));
}

/* Las acciones de un resumen lateral van a lo ancho: dos botones de igual peso
   tienen el mismo tamaño aunque su texto no lo tenga. */
.resumen-carrito--acciones :is(.boton-primario, .boton-seccion) { align-self: stretch; width: 100%; }
.resumen-carrito--acciones .boton-seccion { padding-inline: var(--esp-3); }
.resumen-carrito--acciones form { display: flex; flex-direction: column; gap: var(--esp-2); }

/* Botón de ícono: una acción de fila que se reconoce por su ícono (quitar del
   carrito). Lleva su nombre en `aria-label` y `title`; nunca va solo en una
   acción que no sea evidente. Mide lo mismo que el control de cantidad. */
.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--trazo-fuerte) var(--borde-control);
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--curva-golpe), border-color var(--dur-1) var(--curva-golpe),
    transform var(--dur-2) var(--curva-golpe);
}
.boton-icono .icono { width: 22px; height: 22px; }
.boton-icono:hover { color: var(--texto-fuerte); border-color: var(--texto); }
.boton-icono:active { transform: translate(1px, 1px); }
.boton-icono--critico:hover { color: var(--error); border-color: var(--error); }
.modo-operativo .boton-icono { width: 40px; height: 40px; }
/* Una tabla con un campo y su botón en la misma celda: los dos a la misma altura. */
.tabla--centrada td .fila-2 { align-items: center; flex-wrap: nowrap; }

/* El código del caso, grande para copiarlo o dictarlo; lo devuelto, al lado. */
.codigos-de-solicitud { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.codigos-de-solicitud li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: var(--trazo) dashed var(--borde-control);
}
.codigos-de-solicitud__codigo { font-size: var(--op-cifra); font-weight: 700; line-height: 1; color: var(--texto-fuerte); }
/* El botón de arrepentimiento en el pie: destacado, con el borde del acento. */
.pie-publico .boton-arrepentimiento { border-color: var(--acento); }

/* Caja (segunda parte, 13.5): el total destacado, los medios con su proporción. */
.cifra--total { outline: var(--trazo-fuerte) var(--acento); outline-offset: -2px; }
.cifra--total { grid-column: span 2; }
.cifra--total .cifra__valor { font-size: calc(var(--op-cifra) * 1.3); white-space: nowrap; }
@media (max-width: 639px) { .cifra--total { grid-column: auto; } }
.cifra--vacia .cifra__valor { color: var(--texto-2); }
.barra-proporcion {
  display: block;
  width: 100%;
  height: var(--esp-2);
  appearance: none;
  border: var(--trazo) var(--linea);
  background: var(--fondo);
  color: var(--acento);
}
.barra-proporcion::-webkit-progress-bar { background: var(--fondo); }
.barra-proporcion::-webkit-progress-value { background: var(--acento); }
.barra-proporcion::-moz-progress-bar { background: var(--acento); }
/* Filtro de una lista en fichas: la elegida, con el fondo de lo elegido y su peso. */
.filtro-de-chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.filtro-de-chips a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-1) var(--esp-3);
  border: var(--trazo) var(--borde-control);
  color: var(--texto-2);
  font-weight: 700;
  font-size: var(--op-chico);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
.filtro-de-chips a .icono { width: 16px; height: 16px; }
.filtro-de-chips a:hover { border-color: var(--texto); color: var(--texto-fuerte); }
.filtro-de-chips a[aria-current="true"] { border-color: var(--acento); background: var(--acento-suave); color: var(--texto-fuerte); }

/* Mostrador (segunda parte, 13): el total grande, los medios como tarjetas, el
   vuelto sólo con efectivo. */
.cobro__total {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border: var(--trazo-fuerte) var(--acento);
  font: 800 var(--op-cifra) / 1 var(--fuente-datos);
  white-space: nowrap;
  color: var(--texto-fuerte);
  font-variant-numeric: tabular-nums;
}
.cobro__total .etiqueta { font-family: var(--fuente-display); }
.opciones-tarjeta.opciones-tarjeta--medios { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); }
.opciones-tarjeta--medios > legend { margin-bottom: var(--esp-2); }
.opcion-tarjeta--compacta {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "opcion icono titulo";
  padding: var(--esp-2) var(--esp-3);
}
.opcion-tarjeta--compacta .opcion-tarjeta__titulo { font-size: var(--op-base); }
.opcion-tarjeta--compacta .opcion-tarjeta__icono .icono { width: 20px; height: 20px; }
.opcion-tarjeta--compacta:has(input:checked)::after { content: "✓"; top: calc(-1 * var(--esp-2)); right: var(--esp-2); }
.cobro__recibido { display: none; }
.cobro:has(input[name="medio"][value="efectivo"]:checked) .cobro__recibido { display: flex; }
.cobro__vuelto { margin: 0; font: 800 var(--op-titulo-1) / 1.1 var(--fuente-display); color: var(--ok); }
.cobro__vuelto--falta { color: var(--error); }
.portada-mini--chica { width: 1.75rem; border-width: 1px; }
/* «Venta registrada»: el sello de lo que terminó, girado como sobre el papel. */
.venta-registrada { border: var(--trazo-fuerte) var(--ok); }
.venta-registrada__sello {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  align-self: flex-start;
  margin: 0;
  padding: var(--esp-1) var(--esp-3);
  border: var(--trazo-fuerte) var(--ok);
  color: var(--ok);
  font: 800 var(--op-titulo-2) / 1.2 var(--fuente-display);
  text-transform: uppercase;
  transform: rotate(var(--giro-sticker));
  animation: aparece var(--dur-3) var(--curva-golpe) both;
}

/* Bloque plegable (Restock, Pre-ventas): un grupo con su resumen en la cabeza. */
.grupo-plegable { border: var(--trazo) var(--linea); background: var(--fondo-2); }
.grupo-plegable + .grupo-plegable { margin-top: var(--esp-3); }
.grupo-plegable--atencion { border-color: var(--acento); }
/* El grupo que se abrió desde el calendario (cuarta parte, E). */
.grupo-plegable--elegido { outline: 2px solid var(--acento); outline-offset: 2px; }
.grupo-plegable__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  cursor: pointer;
  list-style: none;
}
.grupo-plegable__cabeza::-webkit-details-marker { display: none; }
.grupo-plegable__cabeza::before {
  content: "›";
  color: var(--texto-2);
  transition: transform var(--dur-2) var(--curva-golpe);
}
.grupo-plegable[open] > .grupo-plegable__cabeza::before { transform: rotate(90deg); }
.grupo-plegable__cabeza:hover { background: var(--fondo-3); }
.grupo-plegable__nombre {
  font: 700 var(--op-titulo-2) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.grupo-plegable__cuenta { flex: 1; font-size: var(--op-chico); color: var(--texto-2); }
.grupo-plegable__cuerpo { padding: 0 var(--esp-4) var(--esp-4); }

/* P2: la tapa dibujada de un producto sin imagen. Trama de imprenta, la editorial
   arriba, el título grande y el número en un rombo de señal. */
.portada-vacia--tapa {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--esp-1);
  padding: var(--esp-3);
  border-style: solid;
  border-color: var(--texto-2);
  background: var(--trama-puntos-grande), var(--fondo-3);
  text-align: left;
  overflow: hidden;
}
.portada-vacia__editorial {
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--acento-texto);
}
.portada-vacia__titulo {
  font: 800 var(--pub-titulo-3) / 0.95 var(--fuente-display);
  font-stretch: var(--ancho-apretado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
  overflow-wrap: anywhere;
}
.portada-vacia__numero {
  padding: 0 var(--esp-2);
  background: var(--acento);
  color: var(--sobre-acento);
  font: 800 var(--op-titulo-2) / 1.3 var(--fuente-display);
  transform: skewX(var(--sesgo));
}
.portada-vacia__nota { font-size: var(--pub-chico); color: var(--texto-2); }
/* P6: al hacer clic, la tarjeta se hunde en el papel, como el botón primario. */
.tarjeta-producto:active { transform: none; box-shadow: none; }
/* P5: el estado vacío del escaparate lleva un sticker; el texto sigue sobrio. */
.modo-publico .vacio::before {
  content: "¡NADA POR ACÁ!";
  align-self: center;
  padding: var(--esp-1) var(--esp-3);
  border: var(--trazo-fuerte) var(--noche);
  background: var(--acento);
  color: var(--noche);
  font: 400 var(--pub-grito) / 1 var(--fuente-grito);
  transform: rotate(var(--giro-sticker));
  animation: sticker-pega var(--dur-3) var(--curva-resorte) both;
}

/* U2: el carrito lateral, pegado al borde derecho y a todo el alto. */
.cajon-carrito {
  width: min(24rem, 100vw);
  height: 100vh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border-width: 0 0 0 var(--esp-1);
  border-color: var(--acento);
  overflow: auto;
}
.cajon-carrito > .pila-4 { padding: 0 var(--esp-5) var(--esp-5); }
.cajon-carrito .dialogo__cabeza { padding-inline: 0; }
.cajon-carrito .dialogo__cabeza h2 { display: inline-flex; align-items: center; gap: var(--esp-2); }
.cajon-carrito .dialogo__cabeza h2 .icono { color: var(--ok); }
.cajon-carrito__producto { display: flex; align-items: center; gap: var(--esp-4); }
.cajon-carrito__producto .portada-mini { width: 4rem; }
.cajon-carrito__titulo {
  font: 700 var(--pub-titulo-3) / 1.15 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  color: var(--texto-fuerte);
}

/* U5: lo que espera en cada sección del menú, en un rótulo chico a la derecha. */
.contador-menu {
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0 var(--esp-1);
  background: var(--acento);
  color: var(--sobre-acento);
  font: 700 var(--op-rotulo) / 1.6 var(--fuente-datos);
  text-align: center;
  clip-path: var(--forma-corte-chico);
}

/* P7: el riel reducido debajo del estado, en la fila de la lista de pedidos. */
.riel-de-fila { min-width: 9rem; max-width: 14rem; }

/* P1: los pasos de la compra, numerados como los de una historieta por entregas. */
.pasos-compra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pasos-compra__paso { display: inline-flex; align-items: baseline; gap: var(--esp-2); color: var(--texto-2); }
.pasos-compra__numero {
  font: 800 var(--pub-titulo-3) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  color: transparent;
  -webkit-text-stroke: 1px var(--texto-2);
}
.pasos-compra__nombre {
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.pasos-compra__paso--hecho .pasos-compra__numero { color: var(--texto); -webkit-text-stroke: 0; }
.pasos-compra__paso--actual { color: var(--texto-fuerte); }
.pasos-compra__paso--actual .pasos-compra__numero { color: var(--acento); -webkit-text-stroke: 0; }

/* U1: las sugerencias del buscador, en una hoja que cae debajo del campo. */
.sugerencias-capa {
  position: absolute;
  top: calc(100% + var(--esp-1));
  left: 0;
  right: 0;
  z-index: 30;
  border: var(--trazo-fuerte) var(--texto);
  background: var(--fondo-2);
  box-shadow: var(--sombra-golpe-2) var(--golpe);
}
.sugerencias { margin: 0; padding: var(--esp-1) 0; list-style: none; }
.sugerencias__producto,
.sugerencias__todos {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  color: var(--texto);
  text-decoration: none;
}
.sugerencias__producto:hover,
.sugerencias__producto:focus-visible,
.sugerencias__todos:hover,
.sugerencias__todos:focus-visible { background: var(--fondo-3); outline: none; box-shadow: inset 3px 0 0 var(--acento); }
.sugerencias__producto .portada-mini { width: 2rem; border-width: 1px; }
.sugerencias__datos { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sugerencias__titulo { font-weight: 700; color: var(--texto-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugerencias__precio { font-weight: 700; color: var(--texto-fuerte); }
.sugerencias__todos { justify-content: center; border-top: var(--trazo) var(--linea); font-weight: 700; color: var(--acento-texto); }
.sugerencias__vacio { padding: var(--esp-3); color: var(--texto-2); }

/* Calendario (tercera parte, 22; cuarta parte, E; B-00-026): el mes en una
   grilla de lunes a domingo, con celdas separadas. Hoy lleva su número en una
   ficha de acento; cada llegada es una ficha con una barra de su estado. */
.calendario-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.calendario-cabeza__mes {
  margin: 0;
  font: 800 var(--op-titulo-1) / 1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.calendario-cabeza__nav { display: flex; align-items: stretch; gap: var(--esp-1); }
.calendario-cabeza__nav .boton-icono { width: 40px; height: 40px; }
.calendario-cabeza__hoy {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--esp-4);
  border: var(--trazo-fuerte) var(--borde-control);
  color: var(--texto-fuerte);
  font: 700 var(--op-rotulo) / 1 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
.calendario-cabeza__hoy:hover { border-color: var(--acento); color: var(--acento-texto); }
.calendario-cabeza__hoy[aria-current] { border-color: var(--acento); }
.calendario-leyenda { display: flex; flex-wrap: wrap; gap: var(--esp-4); margin: var(--esp-3) 0; padding: 0; list-style: none; font-size: var(--op-chico); color: var(--texto-2); }
.calendario-leyenda__item { display: inline-flex; align-items: center; gap: var(--esp-2); }
.calendario-leyenda__item::before { content: ""; width: 12px; height: 12px; background: var(--borde-control); }
.calendario-leyenda__item--atrasada::before { background: var(--error); }
.calendario-leyenda__item--cercana::before { background: var(--acento); }
.calendario { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin-inline: -4px; }
.calendario th {
  padding: var(--esp-1) var(--esp-2);
  font: 700 var(--op-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
  text-align: left;
}
.calendario__dia {
  height: 6.75rem;
  padding: var(--esp-2);
  border: var(--trazo) transparent;
  background: var(--fondo-2);
  vertical-align: top;
  transition: border-color var(--dur-1) var(--curva-golpe);
}
.calendario__dia:hover { border-color: var(--linea); }
.calendario__dia--finde { background: color-mix(in srgb, var(--fondo-2) 55%, var(--fondo)); }
.calendario__dia--otro-mes { background: transparent; }
.calendario__dia--otro-mes .calendario__numero { opacity: 0.4; }
.calendario__dia--hoy { border-color: var(--acento); }
.calendario__dia--hoy:focus { outline: 2px solid var(--foco); outline-offset: 2px; }
.calendario__numero {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--esp-1);
  font: 600 var(--op-dato) / 1 var(--fuente-datos);
  color: var(--texto);
}
.calendario__dia--hoy .calendario__numero { background: var(--acento); color: var(--sobre-acento); font-weight: 700; }
.calendario__llegada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
  padding: 2px var(--esp-2) 2px var(--esp-2);
  border-left: 3px solid var(--borde-control);
  background: var(--fondo-3);
  color: var(--texto);
  font-size: var(--op-chico);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--curva-golpe);
}
.calendario__llegada:hover { background: var(--acento-suave); }
.calendario__editorial { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendario__cuenta { flex: none; padding: 0 var(--esp-1); background: var(--fondo); color: var(--texto-fuerte); font-size: var(--op-rotulo); }
.calendario__llegada--cercana { border-left-color: var(--acento); }
.calendario__llegada--atrasada { border-left-color: var(--error); color: var(--error); }
.calendario-lista { display: none; margin: 0; padding: 0; list-style: none; }
.calendario-lista__dia { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-2); background: var(--fondo-2); }
.calendario-lista__dia--hoy { outline: var(--trazo) var(--acento); }
.calendario-lista__fecha { text-transform: uppercase; color: var(--texto-2); }
.calendario-lista__llegadas { display: grid; gap: var(--esp-1); }
.calendario-lista .calendario__llegada { margin-top: 0; }
@media (max-width: 899px) {
  .calendario { display: none; }
  .calendario-lista { display: grid; gap: var(--esp-2); }
}

/* Riel de estados del pedido (4.2). Cada paso es una columna; el tramo que llega
   a un paso es su `::before`, del centro del anterior al centro de éste. */
.riel { display: grid; gap: var(--esp-3); }
.riel__pasos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.riel__paso {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--esp-1);
  text-align: center;
}
.riel__paso:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 19px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: var(--linea);
  transform-origin: left center;
}
.riel__paso--hecho:not(:first-child)::before { background: var(--acento); }
.riel__marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--trazo-fuerte) dashed var(--borde-control);
  background: var(--fondo);
  color: var(--texto-2);
}
.riel__paso--hecho .riel__marca { border-style: solid; border-color: var(--texto); color: var(--texto); }
/* El paso actual: relleno de señal, girado como un sello sobre el papel. */
.riel__paso--actual .riel__marca {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--sobre-acento);
  transform: rotate(var(--giro-sticker));
}
.riel__nombre {
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.riel__paso--hecho .riel__nombre { color: var(--texto); }
.riel__paso--actual .riel__nombre { color: var(--texto-fuerte); }
.riel__fecha { font-size: var(--pub-chico); color: var(--texto-2); }
/* El camión ocupa el tramo que llega al paso actual y lo recorre una vez. */
.riel__vehiculo {
  position: absolute;
  top: -4px;
  right: calc(50% + 24px);
  width: calc(100% - 48px);
  display: flex;
  justify-content: flex-end;
  color: var(--acento-texto);
  pointer-events: none;
}
.riel__vehiculo .icono { width: 24px; height: 24px; }
.riel--animar .riel__paso--actual:not(:first-child)::before {
  animation: riel-llena var(--dur-5) var(--curva-golpe) both;
}
.riel--animar .riel__vehiculo { animation: camion-avanza var(--dur-5) var(--curva-golpe) both; }
.riel--animar .riel__paso--actual .riel__marca {
  animation: sello var(--dur-2) var(--curva-resorte) var(--dur-5) both;
}
/* Una interrupción se dice con su palabra, sobre una franja de cinta. */
.riel__interrupcion {
  justify-self: start;
  margin: 0;
  padding: 3px;
  background: var(--cinta);
  transform: skewX(var(--sesgo));
}
.riel__interrupcion span {
  display: inline-block;
  padding: 0 var(--esp-2);
  background: var(--noche);
  color: var(--senal);
  font: 700 var(--pub-rotulo) / 1.6 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.riel--interrumpido .riel__paso--actual .riel__marca {
  border-color: var(--texto);
  background: var(--fondo-3);
  color: var(--texto);
  transform: none;
}
/* Reducido: las marcas y los tramos, para las listas. */
.riel--reducido .riel__marca { width: 24px; height: 24px; border-width: 2px; }
.riel--reducido .riel__marca .icono { width: 14px; height: 14px; }
.riel--reducido .riel__paso:not(:first-child)::before { top: 11px; height: 2px; }
.riel--reducido .riel__interrupcion { display: none; }
/* En el operativo, el riel habla en voz baja: la escala fija del mostrador. */
.modo-operativo .riel__nombre { font-size: var(--op-rotulo); }
.modo-operativo .riel__fecha { font-size: var(--op-chico); }

/* «Mi cuenta» (4.3): el carnet y la navegación a la izquierda, la sección a la derecha. */
/* Como el catálogo, cambia la columna apilada de las secciones por una grilla. */
.seccion-publica > .columna-publica.cuenta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
  align-items: start;
}
@media (min-width: 900px) {
  .seccion-publica > .columna-publica.cuenta { grid-template-columns: 18rem minmax(0, 1fr); }
  .cuenta__lado { position: sticky; top: calc(64px + var(--esp-4)); }
}
.cuenta__lado { display: grid; gap: var(--esp-4); }
.carnet {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-5) var(--esp-4);
  border-top: var(--esp-3) solid transparent;
}
.carnet::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--esp-3)) 0 0;
  z-index: -1;
  background: var(--fondo-2);
  clip-path: var(--forma-corte);
}
/* La franja de pantalla vieja arriba del carnet. */
.carnet::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--esp-3)) 0 auto;
  height: var(--esp-3);
  background: var(--trama-rayas), var(--acento);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% 100%, 0 100%);
}
.carnet__rotulo {
  margin: 0;
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--acento-texto);
}
.carnet__nombre {
  margin: 0;
  font: 800 var(--pub-titulo-3) / 1.1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
  overflow-wrap: anywhere;
}
.carnet__codigo {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border: var(--trazo) dashed var(--borde-control);
}
.carnet__codigo .datos { font-size: var(--op-cifra); font-weight: 700; line-height: 1; color: var(--texto-fuerte); letter-spacing: 0.08em; }
.carnet__datos { display: grid; gap: var(--esp-3); margin: 0; }
.carnet__datos > div { display: grid; gap: var(--esp-1); }
.carnet__datos dt {
  font: 700 var(--pub-rotulo) / 1.2 var(--fuente-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-2);
}
.carnet__datos dd { display: grid; gap: var(--esp-1); margin: 0; }
.carnet__datos a { font-weight: 700; color: var(--texto-fuerte); }
.secciones-cuenta { display: grid; gap: var(--esp-1); }
.secciones-cuenta a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  color: var(--texto-2);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--dur-1) var(--curva-golpe), background-color var(--dur-1) var(--curva-golpe);
}
.secciones-cuenta a:hover { background: var(--fondo-3); color: var(--texto-fuerte); }
.secciones-cuenta a[aria-current="page"] { color: var(--texto-fuerte); background: var(--fondo-2); }
.secciones-cuenta a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--esp-1);
  bottom: var(--esp-1);
  width: 4px;
  background: var(--acento);
  transform: skewY(var(--sesgo));
  animation: marcador-entra var(--dur-2) var(--curva-golpe) both;
}
/* En el celular: el carnet en una franja y las secciones como pestañas. */
@media (max-width: 899px) {
  .carnet { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .carnet__rotulo, .carnet__datos { grid-column: 1 / -1; }
  .carnet__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secciones-cuenta {
    display: flex;
    overflow-x: auto;
    border-bottom: var(--trazo) var(--linea);
    scrollbar-width: thin;
  }
  .secciones-cuenta a { flex-shrink: 0; }
  .secciones-cuenta a[aria-current="page"]::before {
    top: auto;
    bottom: 0;
    left: var(--esp-3);
    right: var(--esp-3);
    width: auto;
    height: 3px;
    transform: skewX(var(--sesgo));
    animation: none;
  }
}

/* Un pedido en la lista: portadas, número con el riel reducido, y a la derecha
   el estado y lo cobrado. */
.pedidos-de-cuenta { display: grid; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
.pedido-de-cuenta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3) var(--esp-4);
  align-items: center;
  padding: var(--esp-4);
  border: var(--trazo-grueso) var(--texto-fuerte);
  background: var(--fondo-2);
  transition: transform var(--dur-2) var(--curva-golpe), box-shadow var(--dur-2) var(--curva-golpe);
}
.pedido-de-cuenta:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-golpe-1) var(--golpe); }
.pedido-de-cuenta__cierre {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
}
@media (min-width: 640px) {
  .pedido-de-cuenta { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pedido-de-cuenta__cierre { grid-column: auto; flex-direction: column; align-items: flex-end; }
}
.pedido-de-cuenta__numero {
  font: 700 var(--pub-titulo-3) / 1.15 var(--fuente-display);
  font-stretch: var(--ancho-semi);
  color: var(--texto-fuerte);
  text-decoration: none;
}
.pedido-de-cuenta__numero::after { content: ""; position: absolute; inset: 0; }
/* Lo que se puede tocar dentro de la tarjeta queda por encima del enlace que la cubre:
   sin esto, «Cancelar aviso» abría la ficha del producto en vez de enviar. */
.pedido-de-cuenta__cierre :is(a, button, form, label, input) { position: relative; z-index: 1; }
/* Un artículo que se puede elegir: elegido, con el fondo y el borde de lo elegido. */
.pedido-de-cuenta--elegible { cursor: pointer; }
.pedido-de-cuenta--elegible:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.pedido-de-cuenta { position: relative; }
.pedido-de-cuenta__numero:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pedido-de-cuenta__total { font-weight: 700; font-size: var(--op-titulo-2); color: var(--texto-fuerte); }
.pedido-de-cuenta__datos .riel { max-width: 22rem; }
.pedido-de-cuenta__portadas { display: flex; }
.portada-mini {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 2 / 3;
  border: var(--trazo-fuerte) var(--texto-fuerte);
  background: var(--fondo-3);
  overflow: hidden;
}
.portada-mini + .portada-mini { margin-left: calc(-1 * var(--esp-4)); }
.portada-mini:nth-child(2) { transform: rotate(4deg); }
.portada-mini:nth-child(3) { transform: rotate(var(--giro-sticker)); }
.portada-mini img { width: 100%; height: 100%; object-fit: cover; }
.portada-mini__vacia { color: var(--texto-2); }
.portada-mini__vacia .icono { width: 16px; height: 16px; }
.portada-mini--mas {
  font: 700 var(--op-chico) / 1 var(--fuente-datos);
  color: var(--texto-fuerte);
}

/* Diálogo de confirmación (4.4): cabeza con el título y la cruz; el cuerpo es el
   bloque de la pantalla de confirmación. Los destructivos llevan la cinta. */
.dialogo--confirmacion {
  width: min(40rem, calc(100vw - 2 * var(--esp-4)));
  max-height: calc(100vh - 2 * var(--esp-6));
  padding: 0;
  overflow: auto;
}
.dialogo__cabeza {
  position: relative;
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-5) calc(var(--esp-5) + 40px) var(--esp-3) var(--esp-5);
  border-bottom: var(--trazo) var(--linea);
}
.dialogo__cabeza h2 {
  margin: 0;
  font: 800 var(--op-titulo-1) / 1.1 var(--fuente-display);
  font-stretch: var(--ancho-condensado);
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.dialogo__cabeza p { margin: 0; }
.dialogo__cerrar {
  position: absolute;
  top: var(--esp-4);
  right: var(--esp-4);
  width: 32px;
  height: 32px;
  border: var(--trazo) var(--borde-control);
  background: transparent;
  color: var(--texto);
  font: 700 var(--op-titulo-2) / 1 var(--fuente-interfaz);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--curva-golpe), color var(--dur-1) var(--curva-golpe);
}
.dialogo__cerrar:hover { border-color: var(--texto); color: var(--texto-fuerte); }
.dialogo__cuerpo { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-5); }
/* La cinta de la pantalla queda en la cabeza del diálogo, no en el cuerpo. */
.dialogo__cuerpo.panel--atencion { padding-top: var(--esp-5); }
.dialogo__cuerpo.panel--atencion::after,
.dialogo__cuerpo::before { content: none; }
.dialogo--critico { border-color: var(--error); box-shadow: var(--sombra-golpe-2) var(--error); }
.dialogo--critico .dialogo__cabeza { padding-top: calc(var(--esp-5) + 8px); }
.dialogo--critico .dialogo__cabeza::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--cinta);
}
.dialogo--critico .boton-primario::before { background: var(--error); }
.dialogo--critico .boton-primario { color: var(--sobre-error); }

/* ---------------------------------------------------------------------
   Catálogo de animaciones (identidad_visual.md). No se crean otras.
   --------------------------------------------------------------------- */
@keyframes titulo-glitch {
  0%   { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translate(-3px, 0); }
  50%  { opacity: 1; clip-path: inset(55% 0 20% 0); transform: translate(3px, 0); }
  100% { opacity: 0; clip-path: inset(80% 0 0 0); transform: none; }
}
@keyframes portada-entra {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; }
}
@keyframes aparece {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sticker-pega {
  from { opacity: 0; transform: scale(1.4) rotate(var(--giro-sticker)); }
  to   { opacity: 1; }
}
@keyframes barra-crece {
  from { transform: scaleX(0) skewX(var(--sesgo-suave)); }
  to   { transform: scaleX(1) skewX(var(--sesgo-suave)); }
}
@keyframes barrido-diagonal {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ficha-entra {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}
@keyframes sacudon {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@keyframes destello-fila {
  from { background-color: var(--acento-suave); }
  to   { background-color: transparent; }
}
@keyframes marcador-entra {
  from { transform: skewY(var(--sesgo)) scaleY(0); }
  to   { transform: skewY(var(--sesgo)) scaleY(1); }
}
@keyframes rebote-numero {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.15); }
}
@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(-12px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes dialogo-entra {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes barras-carga {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
@keyframes cinta-corre {
  from { background-position: 0 100%; }
  to   { background-position: 40px 100%; }
}
/* Plan 00 de interfaz, ambigüedad 3: el riel de estados del pedido. */
@keyframes riel-llena {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes camion-avanza {
  from { transform: translateX(-100%); }
  to   { transform: none; }
}
@keyframes sello {
  from { opacity: 0; transform: scale(1.3) rotate(0deg); }
  to   { opacity: 1; transform: rotate(var(--giro-sticker)); }
}

/* Con movimiento reducido, además de las duraciones de tokens.css: nada de
   glitch, ticker, grano animado ni transiciones de vista. */
@media (prefers-reduced-motion: reduce) {
  .titulo-glitch::before, .titulo-glitch::after { display: none; }
  .ticker__pista { animation: none; }
  .barras-carga > span { animation: none; transform: none; }
  .punto-en-linea { animation: none; }
  .riel--animar * { animation: none; }
  .riel--animar .riel__paso::before { animation: none; }
}

/* Un ícono que cambia con el estado del botón (Pausar / Reanudar). */
.icono-de-estado { display: inline-flex; }