/* ============================================================
   El shell del vendedor — cabecera, chips, cápsula y barra (Tarea 2).
   Fuente: docs/specs/2026-09-21-tienda-liquid-glass.md, "Estructura de
   pantalla" y "Pantallas" › Catálogo.

   Los CUATRO CORTES son de VENTANA, no de aparato (spec, "Cortes"):
     · Horizontal            (orientation: landscape)
     · Horizontal bajo       landscape + max-height: 500px  (teléfono acostado)
     · Vertical              (orientation: portrait)
     · Compacto              portrait  + max-width: 599px   (teléfono de pie)
   `tienda/00-tokens.css` ya aprieta la geometría (--margen, --hueco...) bajo
   la unión de "horizontal bajo" + "compacto"; aquí solo cambia la FORMA de
   la cápsula y la posición de la barra, que sí son distintas por corte.
   ============================================================ */

/* LA REJILLA ÚNICA (spec, Geometría, regla 2: "cabecera, chips, parrilla y
   paneles comparten el mismo borde izquierdo y derecho"). Los dos bordes se
   declaran UNA vez aquí y los consumen cabecera, chips, cuerpo y barra: así
   ninguno puede desalinearse del otro al afinar un corte. En horizontal el
   borde derecho se corre para dejarle su columna al riel de la cápsula —
   sigue siendo un solo borde, no cuatro reglas sueltas.

   El `padding-top` iguala el `top` de la cabecera pegajosa. Sin él la
   cabecera nace en 0, `sticky` la baja --margen para respetar su `top` y
   termina PINTADA ENCIMA de las chips, que sí cuentan desde 0 — era el
   renglón de chips pegado a la cabecera que se veía en las capturas. */
body.tablet .shell {
  --borde-izq: calc(var(--margen) + env(safe-area-inset-left));
  --borde-der: calc(var(--margen) + env(safe-area-inset-right));
  position: relative;
  min-height: 100dvh;
  padding-top: calc(var(--margen) + env(safe-area-inset-top));
}

@media (orientation: landscape) {
  body.tablet .shell {
    --borde-der: calc(var(--riel) + var(--margen) * 2 + env(safe-area-inset-right));
  }
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
/* Píldora que flota (spec, "Cabecera"): `position: sticky` porque es un
   renglón propio del flujo, no una capa sobre el contenido (Geometría,
   regla 3) — lo que hace que el contenido nunca quede debajo es que la
   cabecera ocupa su propio espacio en el documento. */
body.tablet .cabecera {
  position: sticky;
  top: calc(var(--margen) + env(safe-area-inset-top));
  z-index: 40;
  margin-inline: var(--borde-izq) var(--borde-der);
  height: var(--cabecera);
  padding: 0 var(--space-4);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-control);
  box-shadow: var(--vidrio-relieve);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

body.tablet .cabecera__marca { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
body.tablet .cabecera__logo { display: flex; flex: none; color: var(--tinta-1); }
body.tablet .cabecera__logo svg { display: block; height: 20px; width: auto; }
body.tablet .cabecera__divisor { width: 1px; height: var(--space-6); background: var(--vidrio-borde); flex: none; }

body.tablet .cabecera__id { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
body.tablet .cabecera__tienda {
  display: block;
  color: var(--tinta-1);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* `.quien__lugar` es la clase del contrato viejo (la afirma
   `costuras_bloque_b_test.rb`, I-6: "la identidad nombra la pantalla a la
   que de verdad se transmite") — sigue existiendo, solo que ahora es el
   segundo renglón de la cabecera y ya no vive dentro de `.quien`. */
body.tablet .cabecera__id .quien__lugar {
  display: block;
  color: var(--tinta-2);
  font-size: var(--text-s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El menú de perfil: mismo `details.quien` de siempre (contrato intacto),
   otra piel — la `summary` es solo el círculo de iniciales (spec,
   "Cabecera"). */
body.tablet .cabecera .quien { position: relative; flex: none; }
body.tablet .cabecera .quien__resumen { list-style: none; cursor: pointer; display: flex; }
body.tablet .cabecera .quien__resumen::-webkit-details-marker { display: none; }
body.tablet .cabecera .quien__av {
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-control);
  background: var(--vidrio-2);
  border: 1px solid var(--vidrio-borde);
  color: var(--tinta-1);
  font: var(--weight-medium) var(--text-s) var(--font-sans);
}
body.tablet .cabecera .quien__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  width: 260px;
  padding: var(--space-2);
  display: grid;
  gap: var(--space-1);
  background: var(--vidrio-flota);
  -webkit-backdrop-filter: var(--vidrio-desenfoque);
  backdrop-filter: var(--vidrio-desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--vidrio-relieve), var(--shadow-pop);
  z-index: 50;
}
body.tablet .cabecera .quien__op {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  width: 100%;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radio-control);
  background: none;
  color: var(--tinta-1);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: var(--weight-regular) var(--text-m) var(--font-sans);
}
body.tablet .cabecera .quien__op:active { background: var(--vidrio-2); }
body.tablet .cabecera .quien__op--off { color: var(--tinta-3); cursor: default; }
body.tablet .cabecera .quien__op--off:active { background: none; }
body.tablet .cabecera .quien__op--peligro { color: var(--color-danger); }
body.tablet .cabecera .quien__op--peligro:active { background: var(--color-danger-soft); }
body.tablet .cabecera .quien__sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--vidrio-borde); }

/* Compacto: el wordmark se queda, el divisor y el segundo renglón se
   ocultan, la tienda se trunca con elipsis (spec, "Cabecera"). */
@media (orientation: landscape) and (max-height: 500px),
       (orientation: portrait) and (max-width: 599px) {
  body.tablet .cabecera__divisor,
  body.tablet .cabecera__id .quien__lugar { display: none; }
}

/* ── Chips de categoría ───────────────────────────────────────────────── */
/* Fuera del frame, hijas directas de `.shell` (spec, "Contratos que no se
   rompen"). Sin desenfoque: no pasan por encima de nada que se desplace,
   son parte del flujo — a diferencia de cabecera/cápsula/barra (decisión
   3, "Desenfoque solo en lo que flota"). */
body.tablet .chips {
  display: flex;
  gap: var(--space-2);
  margin: var(--hueco) var(--borde-der) 0 var(--borde-izq);
  /* En vertical y compacto la fila se desplaza en horizontal sin barra
     visible y sin partir renglón (spec, "Catálogo"). Vale también en
     horizontal: con muchas categorías, se desplaza igual en vez de partir. */
  overflow-x: auto;
  scrollbar-width: none;
}
body.tablet .chips::-webkit-scrollbar { display: none; }
body.tablet .chips .chip { flex: none; white-space: nowrap; }

/* ── Cuerpo: lo único que el frame reemplaza ─────────────────────────── */
/* Reserva el espacio de la cápsula y de la barra con PADDING, nunca con
   suerte (Geometría, regla 3). La altura real de la barra es la de su
   botón (--control) más su propio relleno vertical (--space-2 arriba y
   abajo); eso, más --hueco de aire y --margen del borde, es lo mínimo para
   que nada se encime con el contenido que se desplaza debajo. */
body.tablet .shell__cuerpo {
  --alto-barra: calc(var(--control) + var(--space-2) * 2);
  padding: var(--hueco) var(--borde-der)
           calc(var(--margen) + var(--alto-barra) + var(--hueco) + env(safe-area-inset-bottom))
           var(--borde-izq);
}

/* Vertical y compacto: la barra vive ENCIMA de la cápsula (spec, "Barra de
   transmisión"), así que el contenido tiene que dejar libre esa pila
   entera — cápsula + hueco + barra + hueco — y no solo la barra. */
@media (orientation: portrait) {
  body.tablet .shell__cuerpo {
    padding-bottom: calc(var(--margen) + var(--barra-nav) + var(--hueco) +
                          var(--alto-barra) + var(--hueco) + env(safe-area-inset-bottom));
  }
}

/* ── Cápsula de navegación ────────────────────────────────────────────── */
/* Hija directa de `.shell`, fuera de `turbo-frame#contenido` (spec,
   "Cápsula de navegación"). El fondo con desenfoque llega por la clase de
   átomo `.vidrio--flota` (10-base.css) puesta en el HTML; aquí solo va la
   geometría, que sí cambia por corte. */
body.tablet .capsula {
  position: fixed;
  z-index: 40;
  display: flex;
  padding: var(--space-2);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-control);
  box-shadow: var(--vidrio-relieve);
}
/* El relleno lateral parte APRETADO y solo se abre donde de verdad sobra
   ancho (la cápsula horizontal de tablet). Al revés —ancho por omisión y
   apretado por excepción— las etiquetas más largas («BedMatch»,
   «Pantallas») se salían de su caja en el riel de 88 px y en el teléfono de
   pie, y se leían encimadas con el borde de la píldora. */
body.tablet .capsula__item,
body.tablet .capsula__cliente {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-radius: var(--radio-control);
  background: none;
  color: var(--tinta-2);
  text-decoration: none;
  cursor: pointer;
  font: var(--weight-medium) var(--texto-capsula) var(--font-sans);
  transition: background var(--transicion), color var(--transicion);
}
/* El activo: `aria-current="page"` es la única fuente de verdad, tanto
   para la prueba como para el estilo (spec: "el activo lleva
   aria-current=page, --vidrio-activo e icono solid"). */
body.tablet .capsula__item[aria-current="page"] {
  background: var(--vidrio-activo);
  color: var(--tinta-1);
}
body.tablet .capsula__item i,
body.tablet .capsula__cliente i { font-size: var(--text-l); line-height: 1; }
body.tablet .capsula__etiqueta { line-height: 1; white-space: nowrap; }
body.tablet .capsula__cliente--off { opacity: .4; cursor: not-allowed; }

/* ── Qué etiqueta se dibuja, por corte (Geometría, regla 6: "una etiqueta,
   una línea") ─────────────────────────────────────────────────────────────
   El orden de estas tres reglas ES la lógica; se leen de arriba abajo.
   «Modo cliente» arranca en su forma corta —«Cliente»— porque el nombre
   completo (72 px) no cabe ni en el riel de 88 px ni en un quinto de la
   cápsula de un teléfono de pie: solo cabe en la cápsula horizontal de
   tablet, que reparte 640 px entre cinco destinos. */
body.tablet .capsula__cliente > .capsula__etiqueta:not(.capsula__etiqueta--compacta) { display: none; }
body.tablet .capsula__cliente > .capsula__etiqueta--compacta { display: block; }

/* Vertical de tablet (no el teléfono de pie): ahí sí cabe el nombre completo. */
@media (orientation: portrait) and (min-width: 600px) {
  body.tablet .capsula__cliente > .capsula__etiqueta:not(.capsula__etiqueta--compacta) { display: block; }
  body.tablet .capsula__cliente > .capsula__etiqueta--compacta { display: none; }
}

/* Horizontal bajo: solo iconos (spec, "Cortes"). El nombre del destino sigue
   en el `aria-label` de cada uno. */
@media (orientation: landscape) and (max-height: 500px) {
  body.tablet .capsula .capsula__etiqueta { display: none; }
}

/* Horizontal (y horizontal bajo, ya con `--riel: 64px` desde los tokens):
   riel vertical a la derecha, centrado en altura, icono SOBRE etiqueta
   (spec, "Cortes"). Vive en su propia columna — el hueco que deja a su
   izquierda lo reserva `--borde-der` de la rejilla, arriba. */
@media (orientation: landscape) {
  body.tablet .capsula {
    flex-direction: column;
    gap: var(--hueco);
    right: calc(var(--margen) + env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
    width: var(--riel);
  }
}

/* Vertical y compacto: cápsula horizontal abajo. `left`/`right` con `max()`
   (no `left: 50%` + `transform`) es lo que de verdad centra con un tope de
   640px: cuando la pantalla es más ancha que 640px + los dos márgenes,
   `50% - 320px` gana y dan el mismo hueco simétrico a cada lado (640px de
   caja); cuando es más angosta —el teléfono de pie— `--borde-*` gana y la
   caja ocupa todo el ancho menos los márgenes, que es justo lo que pide el
   corte compacto: sin punto de quiebre aparte para eso. */
@media (orientation: portrait) {
  body.tablet .capsula {
    flex-direction: row;
    gap: var(--space-1);
    left: max(var(--borde-izq), calc(50% - 320px));
    right: max(var(--borde-der), calc(50% - 320px));
    bottom: calc(var(--margen) + env(safe-area-inset-bottom));
    height: var(--barra-nav);
  }
  body.tablet .capsula__item,
  body.tablet .capsula__cliente { flex: 1 1 0; }
}

/* Vertical de tablet: los 640 px alcanzan para poner icono y etiqueta EN
   LÍNEA y para abrir el relleno lateral (spec, "Cortes"). El teléfono de pie
   se queda con la forma de omisión —icono sobre etiqueta, apretada— porque
   ahí cinco destinos no caben en línea. */
@media (orientation: portrait) and (min-width: 600px) {
  body.tablet .capsula__item,
  body.tablet .capsula__cliente {
    flex-direction: row;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    font-size: var(--text-s);
  }
}

/* ── Barra de transmisión ─────────────────────────────────────────────── */
/* `#barra` y `#barra_cta` conservan id, estructura y contrato de Turbo
   Stream (spec, "Contratos que no se rompen"); solo cambian de sitio y de
   piel. El botón "Cliente" ya no vive aquí (ver `.capsula__cliente`). */
body.tablet .barra {
  position: fixed;
  z-index: 39;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-control);
  box-shadow: var(--vidrio-relieve);
  /* Centrada respecto al CONTENIDO, no a la pantalla: en horizontal el riel
     de la cápsula se lleva su columna a la derecha, y una barra centrada
     sobre el ancho total quedaría corrida bajo el riel. Los mismos dos
     bordes de la rejilla resuelven los cuatro cortes de una vez. */
  left: calc((var(--borde-izq) + 100% - var(--borde-der)) / 2);
  transform: translateX(-50%);
  /* Nunca más ancha que el hueco disponible: junto con el `flex-basis: 0`
     de `.barra__cta`, es lo que evita que un título largo empuje la píldora
     de pantalla fuera del margen. */
  max-width: calc(100% - var(--borde-izq) - var(--borde-der));
}

/* Sin pieza, sin transmisión viva y sin pantalla elegida la barra se queda
   sin nada que mostrar: el `#barra` tiene que seguir en el DOM (es el
   destino de los Turbo Stream, contrato de siempre), pero dibujar la píldora
   vacía deja una gota de vidrio flotando en medio de la pantalla. */
body.tablet .barra:not(:has(.barra__cta, .barra__pantalla)) { display: none; }
/* La zona que depende de la ficha necesita quedar fuera del layout del
   flex para que `#barra_cta` siga siendo hijo directo a efectos de Turbo
   Stream, sin insertar un nivel extra (C-1, contrato de siempre). */
body.tablet .barra__zona { display: contents; }
body.tablet .barra__cta,
body.tablet .barra__pantalla {
  height: var(--control);
  min-width: 0;
  border: 0;
  border-radius: var(--radio-control);
  padding: 0 var(--space-5);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  line-height: 1;
  font: var(--weight-medium) var(--text-m) var(--font-sans);
  /* Geometría, regla 4: alto fijo SIEMPRE — un título largo trunca con
     elipsis, nunca parte el botón en dos líneas ni lo alarga. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El CTA es el que se encoge y trunca cuando falta aire: el título de la
   pieza («Transmitir "Signature Cooling Tech®"») es el único de los dos que
   puede ser largo, y la píldora de pantalla ("Vitrina 1") tiene que caber
   entera siempre — es lo que el vendedor toca para cambiar de pantalla, no
   puede ser lo primero en desaparecer. `flex-basis: 0` (no `auto`) es lo
   que lo logra: el CTA se lleva TODO el espacio que sobra después de que
   la píldora rígida (`flex: none`) toma el suyo, en vez de partir de su
   ancho de contenido — así no hace falta calcular un tope aparte por
   corte, y el resultado es exacto sea cual sea el ancho disponible. */
body.tablet .barra__cta {
  background: var(--solido);
  color: var(--solido-tinta);
  flex: 1 1 0%;
}
body.tablet .barra__cta--live { background: var(--color-ok); color: var(--solido-tinta); }
body.tablet .barra__cta--parar { background: var(--vidrio-2); color: var(--tinta-1); padding: 0 var(--space-4); }
body.tablet .barra__pantalla { flex: none; }
body.tablet .barra__punto {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radio-control);
  background: currentColor;
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .25; } }
/* El latido es decoración, no dato: se apaga entero con el resto del
   movimiento (spec, "Material"). */
@media (prefers-reduced-motion: reduce) {
  body.tablet .barra__punto { animation: none; }
}
body.tablet .barra__pantalla { background: var(--vidrio-2); color: var(--tinta-1); border: 1px solid var(--vidrio-borde); }

/* Horizontal: abajo, dentro del hueco que deja libre el riel de la cápsula
   (spec, "Barra de transmisión"). El centrado ya lo resolvió la regla base
   con los bordes de la rejilla. */
@media (orientation: landscape) {
  body.tablet .barra { bottom: calc(var(--margen) + env(safe-area-inset-bottom)); }
}

/* Vertical: encima de la cápsula, con --hueco de separación (spec, "Barra
   de transmisión"). */
@media (orientation: portrait) {
  body.tablet .barra {
    bottom: calc(var(--margen) + var(--barra-nav) + var(--hueco) + env(safe-area-inset-bottom));
  }
}

/* Compacto: de pared a pared (como la cápsula que trae debajo), en vez de
   una píldora angosta que tendría que truncar hasta el título más corto —
   en un teléfono de pie el ancho sobra menos que en ningún otro corte, y
   es justo donde más ayuda no depender de que el título quepa. */
@media (orientation: portrait) and (max-width: 599px) {
  body.tablet .barra {
    left: var(--borde-izq);
    right: var(--borde-der);
    transform: none;
    max-width: none;
  }
}