/* ============================================================================
   GridYX · web v2 · producto.css
   Estilos propios de producto.html. Se enlaza DESPUÉS de styles.css y solo
   añade composición: ningún hex nuevo (tokens --gx-* y alias --web-*), misma
   escala tipográfica, radios 8/12/16, ritmo 8, duraciones del sistema.
   Secciones: técnico · supervisor
   (mapa grande, capacidades 01–04, segunda captura, evidencia #TK-0401) ·
   estados (chips) · acceso (fotografía fija). La cabecera de página (fotograma fijo + placa, `.phead`)
   vive en styles.css porque la comparte sin-cobertura.html.
   ========================================================================== */

/* Rótulo mono sobre una figura («Tickets · 1 / 3») */
.rotulo {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--gx-brand-ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.rotulo__idx { color: var(--gx-text-secondary); }

/* ---------- 01 · Técnico: tres capturas móviles (carrusel nativo <1024) ----------
   El desplazamiento vive en un envoltorio (.tec__scroller, con data-scroller): app.js le pone tabindex/role/aria-label
   solo cuando desborda, y el <ol> conserva su semántica de lista para el lector de pantalla. */
.tec__scroller {
  margin-top: 48px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
}
.tec__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}
.tec__item {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: grid;
  gap: 12px;
  align-content: start;
}
.tec__item .figura-app { width: 100%; }
.tec__item p { color: var(--gx-text-secondary); }
.tec__foot { margin-top: 32px; }
@media (min-width: 640px) {
  .tec__item { flex-basis: 240px; }
}
@media (min-width: 1024px) {
  .tec__scroller { overflow: visible; padding-bottom: 0; }
  .tec__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    gap: var(--web-gutter);
    justify-content: space-between;
  }
  .tec__item { flex-basis: auto; }
  .rotulo__idx { display: none; }
}

/* ---------- 02 · Supervisor (tema claro) ---------- */
/* Mapa recortado al plano (×1,25, sin barra lateral de la app); la captura completa se abre con «Ampliar» */
.sup__big { margin-top: 48px; --ratio: 4 / 3; --pos: 21% 50%; }

/* Cuadrícula 01–04 de capacidades (texto puro, hairline superior, numeral mono 14) */
.caps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.cap {
  padding-top: 16px;
  border-top: 1px solid var(--web-hairline);
  display: grid;
  gap: 8px;
  align-content: start;
}
.cap__num { margin-bottom: 4px; }
.cap h3 { text-wrap: balance; }
.cap p { color: var(--gx-text-secondary); max-width: 40em; }
@media (min-width: 640px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--web-gutter); }
  .cap h3 { min-height: 2lh; }
}
@media (min-width: 1280px) { .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Segunda captura a 8 columnas + texto de apoyo: 16/10 a todas las anchuras (la captura es 1440×900 y la barra lo dice: no se recorta) */
.sup__row { display: grid; gap: 32px; margin-top: 64px; }
.sup__fig2 { --ratio: 16 / 10; --pos: 0 0; }
.sup__aside p { margin-top: 12px; color: var(--gx-text-secondary); max-width: 40em; }
.sup__aside .small { margin-top: 16px; }
@media (min-width: 1024px) {
  .sup__row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); align-items: end; }
  .sup__fig2 { grid-column: 1 / 9; }
  .sup__aside { grid-column: 9 / 13; padding-bottom: 48px; }
}

/* Evidencia: un mismo ticket en dos pantallas */
.evidencia {
  margin-top: 64px;
  padding: 24px;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-panel);
  background: var(--gx-surface-card);
  display: grid;
  gap: 32px;
}
.evidencia__data { color: var(--gx-brand-ink); }
.evidencia__estados { margin-top: 8px; color: var(--gx-text-secondary); }
.evidencia__text h3 { margin-top: 16px; }
.evidencia__text h3 + p { margin-top: 12px; color: var(--gx-text-secondary); max-width: 40em; }
.evidencia__text p + .small { margin-top: 16px; }
.evidencia__figs {
  display: grid;
  gap: var(--web-gutter);
  grid-template-columns: minmax(0, 280px);
  justify-content: center;
  align-items: start;
}
/* sup-tickets recortada a la columna central «En ejecución»: el visor es 1:2 y la imagen
   se ancla abajo con un 18 % de altura extra para dejar fuera la franja de título de la app */
.evidencia__sup { --ratio: 1 / 2; --pos: 57.7% 100%; }
.evidencia__sup .figura-app__img img { height: 118%; top: auto; bottom: 0; }
@media (min-width: 640px) {
  .evidencia__figs { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: start; }
}
@media (min-width: 1024px) {
  .evidencia { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); padding: 40px 48px; }
  .evidencia__text { grid-column: 1 / 6; }
  .evidencia__figs { grid-column: 6 / 13; justify-content: end; }
}

/* Pareja de capturas de escritorio (averías · parques) */
.sup__pair { display: grid; gap: 32px var(--web-gutter); margin-top: 64px; }
.sup__pair figure { --ratio: 4 / 3; --pos: 0 0; }
.sup__pair .rotulo { margin-bottom: 12px; }
@media (min-width: 640px) {
  .sup__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sup__pair figure { --ratio: 16 / 10; }
}

/* ---------- 03 · Estados: cabecera + figura secundaria y tres filas de chips ---------- */
.estados__head { display: grid; gap: 32px; }
.estados__fig .media__view { --ratio: 16 / 9; }
@media (min-width: 1024px) {
  .estados__head { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); align-items: end; }
  .estados__head .sec-head { grid-column: 1 / 8; }
  .estados__fig { grid-column: 8 / 13; }
}
.estados__rows { margin-top: 48px; }
.estados__row {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--web-hairline);
}
.estados__row:last-child { border-bottom: 1px solid var(--web-hairline); }
.estados__label {
  color: var(--gx-brand-ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.estados__sub { display: block; margin-top: 4px; color: var(--gx-text-secondary); text-transform: none; letter-spacing: 0; }
.estados__row .chip-row { list-style: none; margin: 0; padding: 0; }
.estados__nota { margin-top: 24px; color: var(--gx-text-secondary); max-width: 44em; }
@media (min-width: 1024px) {
  .estados__row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--web-gutter); align-items: start; }
  .estados__label { grid-column: 1 / 3; padding-top: 6px; }
  .estados__row .chip-row { grid-column: 3 / 13; }
}

/* ---------- 04 · Acceso: fotografía fija 3:2 a la izquierda, texto a la derecha (composición espejo de la home) ---------- */
.pcta .cta__media .media__view { --ratio: 3 / 2; }
@media (min-width: 1024px) {
  .pcta .cta__media { grid-column: 1 / 7; order: -1; }
  .pcta .cta__text { grid-column: 8 / 13; }
  .pcta .cta__media .media__view { --ratio: 3 / 2; }
}

/* ---------- Impresión ---------- */
@media print {
  .tec__scroller { overflow: visible; }
  .tec__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}