/* ============================================================
   Catálogo y ficha de producto (Tarea 3).
   Fuente: docs/specs/2026-09-21-tienda-liquid-glass.md, "Catálogo", "Ficha" y
   "Geometría". El chrome del shell (cabecera, chips, cápsula, barra) es de la
   Tarea 2 y vive en `tienda/20-shell.css`; aquí solo va lo que el frame
   reemplaza: la parrilla, la tarjeta de producto y la ficha.

   `.shell__titulo` vive aquí y no en `10-base.css` porque hoy solo lo pinta
   esta tarea (la ficha) — pero es una clase GENÉRICA de título de página, no
   exclusiva del catálogo: la Tarea 5 (BedMatch, Pantallas) también la vuelve
   a usar, y Propshaft carga TODOS los CSS de tienda en TODA vista de
   `body.tablet` (no hay hojas por página), así que definirla aquí ya la deja
   lista para esas vistas sin que la Tarea 5 tenga que repetirla.
   ============================================================ */

/* El radio de lo que va dentro de una tarjeta (`--radio-interior`) es token
   oficial y vive en `tienda/00-tokens.css` con el resto de la geometría: lo
   usan la imagen de la tarjeta, el marco de la miniatura y el renglón de
   pieza, y así los tres siguen solos al corte de teléfono. */

/* ── Título de página ─────────────────────────────────────────────────────
   Contrato: `.shell__titulo` es dato para las pruebas (protege que la ficha
   muestre el producto correcto), no solo estilo. Sigue el patrón tipográfico
   de títulos de la spec: Medium 500, -0.01em (regla de "Tipografía e
   iconos": "nada más pesado, la marca no tiene Bold"). */
body.tablet .shell__titulo {
  margin: 0 0 var(--hueco);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--tinta-1);
}

/* ── Parrilla ──────────────────────────────────────────────────────────────
   3 columnas en horizontal (default); 2 en horizontal bajo Y en vertical; 1
   en compacto (spec, tabla de "Cortes"). Las dos reglas de abajo se leen
   juntas: la primera baja a 2 todo lo que NO es horizontal de tablet, la
   segunda aprieta a 1 el caso más angosto de los dos — misma técnica de
   "regla ancha + excepción angosta" que ya usa `tienda/20-shell.css` para la
   geometría apretada del teléfono. */
body.tablet .parrilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hueco);
}
@media (orientation: landscape) and (max-height: 500px),
       (orientation: portrait) {
  body.tablet .parrilla { grid-template-columns: repeat(2, 1fr); }
}
@media (orientation: portrait) and (max-width: 599px) {
  body.tablet .parrilla { grid-template-columns: 1fr; }
}

/* ── Tarjeta de producto ──────────────────────────────────────────────────
   `.vidrio` (10-base.css) le da el fondo, el borde, el radio y el relleno —
   por eso la imagen de adentro queda A EXACTAMENTE `--relleno` del borde de
   la tarjeta en los cuatro lados: es lo que hace que los dos radios se vean
   CONCÉNTRICOS (spec, "Geometría", regla 1), no una coincidencia de números. */
body.tablet .producto {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  /* El único realce es de dato, no de preferencia (spec, "Catálogo"): el
     borde por default es el mismo de cualquier `.vidrio`, y solo se engruesa
     cuando ESTE producto es el que `transmision_activa` señala. */
  transition: border-color var(--transicion);
}
/* El borde --solido de 2px es el ÚNICO realce (spec, "Catálogo"): lo manda
   `transmision_activa` en la vista, nunca una clase puesta a mano. */
body.tablet .producto--aire { border: 2px solid var(--solido); }

body.tablet .producto__lienzo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-interior);
  overflow: hidden;
  background: var(--vidrio-2);
}
body.tablet .producto__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
body.tablet span.producto__foto { background: var(--vidrio-2); }
/* Insignia "N miniclips", abajo a la izquierda DE LA IMAGEN (spec,
   "Catálogo") — el átomo `.insignia` (10-base.css) ya trae su tinte opaco y
   su contraste garantizado sea cual sea la foto de abajo, sin pagar un
   desenfoque por tarjeta; aquí solo se posiciona. */
body.tablet .producto__insignia {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
}

body.tablet .producto__cuerpo { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
/* Dos renglones y, si no cabe, elipsis. El catálogo real trae nombres largos
   ("Base Eléctrica Luuna Rise Pro", "Almohada Ultra Soft Down Alternative") y
   sin tope el nombre empuja los botones hacia abajo: en una parrilla de tres
   columnas basta UNA tarjeta de tres renglones para estirar el renglón entero
   y dejar a las otras dos con un hueco. El tope se escribe en renglones, no
   en píxeles, para que siga al tamaño de letra de cada corte. */
body.tablet .producto__nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--tinta-1);
}
/* Descripción corta: hoy es la CATEGORÍA, no la firmeza que pide el boceto —
   `CatalogItem` no trae ese dato (ver `CatalogoHelper` y el reporte de
   cierre de la tarea). Usar `@categoria`, ya cargado por el controlador, no
   agrega ninguna consulta. */
body.tablet .producto__desc { margin: 0; font-size: var(--text-s); color: var(--tinta-2); }

body.tablet .producto__acciones { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
/* El `<form>` de `button_to` desaparece del layout y deja al `<button>` como
   hijo directo del flex, que es quien tiene que repartirse el ancho. Va aquí
   y no en un `style=` en línea (mismo criterio que `.barra__zona`): una CSP
   sin `style-src 'unsafe-inline'` apagaría el atributo y los dos botones se
   irían a renglones distintos. */
body.tablet .producto__acciones form { display: contents; }
/* Ficha 1 parte, Enviar clip 1.4 partes (spec, "Catálogo"): `flex-basis: 0`
   reparte el espacio SOBRANTE en esa proporción, pero `min-width: auto`
   (el default de un ítem flex) ya protege a cada botón de encogerse más
   allá de lo que su propio texto necesita — sin eso, "Enviar clip ▸" partía
   en dos líneas en la columna de 3 (mismo problema, y misma técnica, que ya
   resolvió `.barra__cta`/`.barra__pantalla` en `tienda/20-shell.css`). */
body.tablet .producto__acciones .btn { white-space: nowrap; }
body.tablet .producto__acciones .producto__ficha { flex: 1 1 0; }
body.tablet .producto__acciones .producto__enviar { flex: 1.4 1 0; }

/* ── Ficha ─────────────────────────────────────────────────────────────────
   Horizontal: lienzo a la izquierda, panel de vidrio a la derecha. Vertical y
   compacto: lienzo arriba, panel abajo (spec, "Ficha"). */
body.tablet .ficha { display: flex; gap: var(--hueco); align-items: flex-start; }
body.tablet .ficha__preview { flex: 0 0 56%; min-width: 0; }
body.tablet .ficha__panel { flex: 1 1 0; min-width: 0; }
@media (orientation: portrait) {
  body.tablet .ficha { flex-direction: column; }
  body.tablet .ficha__preview { flex: none; width: 100%; }
  body.tablet .ficha__panel { width: 100%; }
}

/* El lienzo es su propia superficie de vidrio (radio de tarjeta, spec,
   "Ficha") y no una nested dentro de otra tarjeta, así que lleva
   `--radio-tarjeta` completo, sin restarle el relleno. El fondo es
   `--tienda-fondo` (el mismo navy del fondo de la app, disponible aquí
   porque las custom properties de `html` heredan a todo su árbol) y no
   `--vidrio-*`: es el respaldo de un <video>/<img> con `object-fit: contain`,
   y un tinte blanco translúcido detrás de las barras de un video 16:9 en un
   marco distinto se vería como una caja gris encendida, no como fondo. */
body.tablet .ficha__lienzo {
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--tienda-fondo);
  display: grid;
  place-items: center;
}
body.tablet .ficha__lienzo img,
body.tablet .ficha__lienzo video { width: 100%; height: 100%; object-fit: contain; }
body.tablet .ficha__poster { width: 100%; height: 100%; object-fit: contain; }
body.tablet .ficha__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  color: var(--tinta-3);
  font-size: var(--text-s);
}
body.tablet .ficha__pie b { color: var(--tinta-1); font-weight: var(--weight-medium); }
body.tablet .ficha__pie a { color: var(--tinta-1); }

/* El panel: `.vidrio` (10-base.css) le da fondo, borde, radio y relleno; aquí
   solo se acomoda su contenido en columna (sobrelínea · lista · claim). */
body.tablet .ficha__panel { display: flex; flex-direction: column; gap: var(--space-3); }
body.tablet .ficha__piezas { display: flex; flex-direction: column; gap: var(--space-2); }

/* El claim se queda al pie aunque la lista sea corta (spec, "Ficha": "al pie
   del panel"): `margin-top: auto` en un padre columna es justo eso, sin
   inventar un alto fijo para el panel. */
body.tablet .ficha__claim {
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--vidrio-borde);
  color: var(--tinta-2);
  font-size: var(--text-s);
}

/* ── Renglón de pieza (ficha y, más adelante, Miniclips) ──────────────────
   `.pieza`, `.pieza--on`, `.pieza__aire`, `.pieza__mini` son contrato (spec,
   "Contratos que no se rompen"): los afirman las pruebas de Turbo Stream del
   listón EN EL AIRE. El resto de las clases (`__marco`, `__play`, `__texto`,
   `__meta`) son nuevas, para el renglón horizontal que pide la spec
   ("miniatura 16:9 con botón de reproducir encima, título y duración"). */
body.tablet .pieza {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  /* Renglón dentro del panel de vidrio: radio interior, no píldora (spec,
     "Geometría", regla 1, y los bocetos, que dibujan la lista de miniclips
     como rectángulos redondeados). Con `--radio-control` el renglón se
     curvaba en sus extremos mientras la miniatura de adentro seguía siendo
     un rectángulo: los dos radios dejaban de ser concéntricos. */
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
  border: 1px solid var(--vidrio-borde);
  text-decoration: none;
  color: inherit;
  transition: background var(--transicion);
}
body.tablet .pieza:hover { background: var(--vidrio-activo); }
/* La pieza en el PREVIEW del vendedor (spec: "un toque elige, otro
   transmite"), no la que está en el aire — ese es `.pieza__aire`, un dato
   aparte que puede caer en cualquier renglón, incluido este mismo. */
body.tablet .pieza--on { background: var(--vidrio-activo); outline: 2px solid var(--solido); outline-offset: 2px; }

/* El marco de la miniatura: ancho fijo derivado de `--tap` (2 tocadas, no un
   px suelto) para que el radio concéntrico (regla 1 de Geometría) tenga un
   "exterior" claro del que restarle el relleno del propio marco. */
body.tablet .pieza__marco {
  position: relative;
  flex: none;
  width: calc(var(--tap) * 2);
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-interior);
  overflow: hidden;
  background: var(--vidrio-1);
}
body.tablet .pieza__mini { display: block; width: 100%; height: 100%; object-fit: cover; }
body.tablet span.pieza__mini { background: var(--vidrio-2); }
/* Botón de reproducir, decorativo (spec, "Ficha"): el toque que de verdad
   transmite es el renglón entero (`<a>`), no este icono. Fondo `--vidrio-opaco`
   y no `--vidrio-flota`, por la misma razón que la insignia: va encima de una
   miniatura que puede ser de cualquier color y no puede pagar un
   `backdrop-filter` (decisión 3: el desenfoque es solo para lo que flota sobre
   contenido que se desplaza) — el tinte al 45 % dejaba el glifo blanco sin
   respaldo sobre un póster claro. */
body.tablet .pieza__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--space-6);
  height: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-control);
  background: var(--vidrio-opaco);
  color: var(--tinta-1);
  font-size: var(--text-xs);
}

body.tablet .pieza__texto { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
body.tablet .pieza__texto b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--tinta-1);
}
body.tablet .pieza__meta { display: flex; align-items: center; gap: var(--space-2); color: var(--tinta-2); font-size: var(--text-xs); }

/* Listón EN EL AIRE: la pantalla PROYECTADA, que puede no ser la del preview
   (spec: "un toque elige, otro transmite"). `--color-ok` ya viene aclarado
   para fondo oscuro desde `tienda/00-tokens.css`. */
body.tablet .pieza__aire {
  display: inline-flex;
  align-items: center;
  height: var(--space-5);
  padding: 0 var(--space-2);
  border-radius: var(--radio-control);
  background: var(--color-ok);
  color: var(--solido-tinta);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
}