/* ─────────────────────────────────────────────────────────────────────
   Página de aterrizaje de una ficha (producto.php).

   Es chico a propósito: la página carga app.css completo antes de este
   archivo, así que hereda los tokens (--primary, --surface, --radius,
   --header-h…), el modo oscuro, el fondo animado, el header, los botones
   (.btn-checkout / .btn-ver-carrito), las clases .product-detail-* del modal
   y la grilla .seo-grid / .seo-card de los relacionados.

   Acá va SÓLO lo que la SPA no necesitaba: el layout de una página con
   scroll normal (la app es una shell de alto fijo con header fijo y nav
   inferior) y los ajustes de los controles que en la app son `<button>` y
   acá son enlaces de verdad.
   ───────────────────────────────────────────────────────────────────── */

/* La app bloquea el scroll del body y maneja todo con paneles; acá el
   documento scrollea como una página cualquiera. */
body.pagina-ficha {
  overflow-y: auto;
  /* El header y la barra inferior son `position: fixed` (vienen de app.css),
     así que el documento se corre con padding para no quedar tapado. El
     `safe-area` es por el gesto de home del iPhone, que se come la franja
     de abajo. */
  padding-top: var(--header-h);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ── Controles que en la app son `<button>` y acá son `<a href>` ─────
   app.css está escrito para una SPA: sus controles son botones con onclick.
   En esta página son enlaces de verdad (navegaciones reales), y el navegador
   les pone subrayado — que aparecía como una rayita debajo de cada ícono del
   header.

   La regla apunta a las clases DE LA APP (.btn-icon, .nav-tab, …), no a los
   modificadores `ficha-*` de este archivo: así sigue valiendo aunque se
   renombre un modificador. Justamente ese fue el bug — la regla decía
   `.ficha-btn-carrito` y el HTML ya usaba `ficha-btn-header`.

   Los enlaces de texto (breadcrumb, categoría) NO entran acá: ahí el
   subrayado es correcto y ayuda a que se lean como enlaces. */
.pagina-ficha a.btn-icon,
.pagina-ficha a.nav-tab,
.pagina-ficha a.btn-checkout,
.pagina-ficha a.btn-back,
.pagina-ficha a.header-logo,
.pagina-ficha a.pd-fav-btn {
  text-decoration: none;
}

.bottom-nav .nav-tab { justify-content: center; }
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* El header de app.css es `position: fixed` y espera que el contenido se
   corra con el padding de arriba (lo pone body.pagina-ficha). El logo acá es
   un `<a>` y no un `<div onclick>`: en una página de aterrizaje tiene que
   ser un enlace real y rastreable a la home. */
.ficha-logo {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.ficha-logo img { height: 30px; width: auto; }

/* `.header-logo` de app.css lleva `flex: 1`, así que empuja los botones
   contra el borde derecho igual que en la app. El `flex-shrink: 0` evita que
   se achiquen cuando son cuatro en una pantalla angosta. */
.ficha-btn-header { flex: 0 0 auto; }

.ficha-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 15px 32px;
}

/* ── Migas de pan en píldoras ─────────────────────────────────────────
   El markup lo genera seoBreadcrumbHtml() en lib/seo.php y lo comparte con
   el bloque server-rendered de index.php, así que no se toca: esto es sólo
   presentación y va scopeado a `.pagina-ficha`.

   Además del look, arregla un color: `app.css` sólo pinta los enlaces con
   `.seo-content a`, y acá el breadcrumb vive dentro de `.ficha-wrap`, así que
   los `<a>` caían al azul/violeta por defecto del navegador — muy visible en
   modo oscuro. Las píldoras fijan color propio con tokens, que funcionan en
   los dos temas. */
/* Un solo renglón con desplazamiento horizontal: el `flex-wrap: wrap` de
   app.css partía la ruta en dos o tres líneas en el celular (una categoría
   larga como "Proteccion Femenina" no entra junto a las de arriba) y eso
   empujaba la ficha hacia abajo con alto variable según el producto. Ahora
   las píldoras siguen en fila y se arrastran con el dedo.

   El sangrado negativo + el padding del mismo valor que `.ficha-wrap` hacen
   que la primera píldora quede alineada con el resto de la ficha pero el
   recorte caiga en el borde de la pantalla: así se ve que hay más a la
   derecha en lugar de cortar contra un margen en blanco.

   La barra de scroll se oculta (en el celular no se dibuja, y en escritorio
   robaría alto y se vería sucia debajo de las píldoras); el gesto, la rueda
   con shift y el foco por teclado siguen desplazando igual.
   `overscroll-behavior-x: contain` evita que al llegar al final el gesto se
   lo coma el navegador y dispare el "atrás" por deslizamiento. */
.pagina-ficha .seo-breadcrumb ol {
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pagina-ficha .seo-breadcrumb ol::-webkit-scrollbar { display: none; }
/* Separador: un triángulo que apunta a la derecha, para que se lea que cada
   categoría está DENTRO de la anterior. Reemplaza al `›` de app.css.

   Es un triángulo de bordes CSS y no un ícono de Font Awesome a propósito:
   no depende de que el glifo esté en el subset crítico (que se regenera
   escaneando clases `fa-*`, y un `content: "\f0da"` suelto no se detectaría),
   y al no tener contenido de texto no hay carácter raro que un lector de
   pantalla pueda anunciar. El breadcrumb ya tiene su `aria-label`. */
/* `flex: 0 0 auto`: sin eso, dentro de un contenedor que ya no envuelve, los
   ítems se comprimirían para entrar en el ancho visible y las píldoras
   quedarían apretadas en vez de salirse y generar el scroll. */
.pagina-ficha .seo-breadcrumb li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.pagina-ficha .seo-breadcrumb li + li::before {
  content: '';
  flex: 0 0 auto;
  width: 0; height: 0;
  margin-right: 6px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--text3);
}

/* Sólo `a`: desde que la miga del producto no se pinta (ver producto.php),
   todas las que quedan son enlaces a una categoría o a la home. */
.pagina-ficha .seo-breadcrumb a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: color .15s, border-color .15s;
}
.pagina-ficha .seo-breadcrumb a:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* Tarjeta contenedora, con el mismo tratamiento de superficie que usan los
   paneles de la app. */
.ficha-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 12px 18px;
  margin-bottom: 18px;
}

/* En pantallas anchas la foto y los datos van lado a lado. En el celular
   —que es de donde llega casi todo el tráfico de un link compartido— queda
   la columna única del modal, que ya es el layout conocido. */
@media (min-width: 720px) {
  .ficha-card {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 18px;
  }
  .ficha-img  { margin: 0; }
  .ficha-body { padding: 4px 0 0; }
}

/* `.product-detail-img` de app.css ya da el cuadrado blanco con aspect-ratio
   1/1 y overflow oculto; acá sólo se le pone el tope de ancho de la página. */
.ficha-img {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.ficha-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.ficha-img-vacia {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--text3);
  font-size: 46px;
}

/* Listón "Oferta", arriba a la izquierda. Reusa `.ribbon-oferta` de app.css
   (el mismo rojo, la misma rotación) y sólo lo reescala: aquel está medido
   para la tarjeta de ~145 px del listado y sobre la foto de 420 px de esta
   página quedaría como una marca diminuta en la esquina. */
.ficha-ribbon {
  top: 30px; left: -62px;
  width: 210px;
  font-size: 15px;
  padding: 5px 0;
}

/* Descuento, abajo a la izquierda. Mismo criterio que el listón: reusa
   `.badge-descuento` de app.css —el círculo oscuro con el porcentaje en
   blanco, exactamente el del listado— y acá sólo se lo reescala para la foto
   de 420 px. Aquel mide 40 px sobre una tarjeta de ~145, o sea más de un
   cuarto del ancho; a tamaño original acá quedaría como una mota.

   Lo que NO se toca es el color ni la forma: si el badge del listado cambia,
   esta página lo hereda. Antes era una píldora roja propia y por eso las dos
   pantallas mostraban el mismo dato de dos maneras distintas. */
.ficha-descuento {
  bottom: 10px; left: 10px;
  width: 56px; height: 56px;
  font-size: 15px;
  z-index: 3;
}

/* Favoritos, arriba a la derecha. Hereda `.pd-fav-btn` (el del modal de la
   app): mismo círculo con gradiente y el corazón al 50% de opacidad, que es
   el estado "no marcado". Acá es un `<a>`, así que hay que sacarle el
   subrayado y centrarlo como hace el botón. */
.ficha-fav {
  text-decoration: none;
  z-index: 3;
}

/* Compartir, abajo a la derecha. Hereda `.pd-share-btn` (el del modal de la
   app) sin reescalar: queda del mismo tamaño que el corazón de arriba, que
   tampoco se reescala, y los dos botones de la foto miden igual.

   El `[hidden]` necesita esta regla: `.pd-share-btn` declara `display:flex`, y
   una regla de autor le gana al `[hidden] { display:none }` de la hoja del
   navegador. Sin esto el botón se vería incluso donde no sirve para nada. */
.ficha-share {
  z-index: 3;
}
.ficha-share[hidden] {
  display: none;
}

/* Acá vivía `.ficha-stock-tag`, el cartel rojo "Sin stock" sobre la foto. Se
   quitó junto con su marca en producto.php: las cuatro esquinas quedaron
   tomadas (listón, corazón, descuento y compartir) y el dato ya aparece justo
   debajo, en `.product-detail-stock`, en rojo y con ícono. El modal de la app
   tampoco lo pinta sobre la foto. */

/* El precio reusa .product-detail-price (22px, --primary, peso 800) y acá
   sólo se suma el tachado del precio de lista. */
.ficha-precio {
  display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ficha-precio s {
  color: var(--text3);
  font-size: 15px; font-weight: 500;
}
.ficha-precio strong { font-weight: 800; }

.product-detail-stock i { margin-right: 4px; }

/* La botonera es la del modal de la app: los mismos botones, uno debajo del
   otro. El `margin-bottom` cerró a 0 porque ahora es lo último de la ficha —
   abajo ya no va la lista de ventajas, que se sacó de producto.php. */
.ficha-acciones {
  display: flex; flex-direction: column; gap: 10px;
  margin: 18px 0 0;
}
/* .btn-checkout y .btn-back son `<button>` en la app y acá son `<a>` (navegan
   de verdad: al carrito y al listado). Hay que devolverles el ancho completo
   con el padding adentro; el subrayado lo saca la regla de arriba. */
.ficha-acciones a.btn-checkout,
.ficha-acciones a.btn-back {
  box-sizing: border-box;
}

/* ── 404 ──────────────────────────────────────────────────────────── */
.ficha-404 { text-align: center; padding: 34px 20px 28px; }
.ficha-404-icono {
  font-size: 44px;
  color: var(--text3);
  margin-bottom: 14px;
}
.ficha-404 .product-detail-name { margin-bottom: 10px; }
.ficha-404-texto {
  font-size: 14px; color: var(--text2);
  line-height: 1.55;
  margin: 0 auto 20px;
  max-width: 380px;
}
.ficha-404 a.btn-checkout {
  text-decoration: none;
  box-sizing: border-box;
  max-width: 320px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  /* El 404 no tiene foto: no se parte en dos columnas. */
  .ficha-card.ficha-404 { display: block; }
}

/* ── Buscador ─────────────────────────────────────────────────────── */
/* Reusa `.search-wrap` / `.search-box` de app.css. Lo único propio es que
   acá es un `<form>` en flujo normal y no el `.sticky-bars` fijo de la app:
   en una página de producto el buscador scrollea con el contenido. */
.ficha-search {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 15px 0;
}
/* Sin esto el form arrastra el margen que el navegador le pone por defecto. */
form.ficha-search { margin-block: 0; }