/* ══════════════════════════════════════════════════════════════════════════
   ancho.css · el ancho de la columna del comprador, en un solo lugar
   ──────────────────────────────────────────────────────────────────────────
   Existe por lo mismo que foto-url.js, menu.js y carrito-local.js: la regla
   del ancho estaba copiada 24 veces en 13 archivos, y cambiarla queria decir
   acordarse de 13 lugares. Acá se cambia en uno.

   SE ENLAZA DESPUÉS DEL <style> DE CADA PÁGINA, a propósito: así le gana por
   orden sin editar ninguna de las reglas que ya están. Sacar el link devuelve
   la página exacto a como estaba.

   EN EL TELÉFONO NO CAMBIA NADA. Todos los cortes son `min-width` arriba de
   760px. Abajo de eso esta hoja no dice una palabra y manda el `max-width:480px`
   que cada página ya tiene.

   CADA PÁGINA PIDE SU ANCHO POR SU CLASE, y la que no pide no cambia:
     .ancho-vitrina  → el catálogo. Crece hasta 1080 y la grilla gana columnas.
     .ancho-lectura  → ficha de producto, ficha de combo y carrito. Topa en 720.

   POR QUÉ LA LECTURA TOPA EN 720 Y NO SIGUE. La ficha es texto corrido. A 1080
   una línea llega a ~160 caracteres; lo cómodo son 60 a 90. A 720 queda en
   ~105, que es el techo aceptable, y ya es 50% más aire que los 480 de hoy.
   Ensancharla más se ve mejor en una captura y se lee peor de verdad.

   LOS MUEBLES FIJOS NO SE TOCAN. La barra del carrito y las hojas que suben
   desde abajo están clavadas al viewport con position:fixed, no al body, así
   que ensanchar la columna no las mueve: quedan centradas en 480 y se leen
   como una pastilla flotante. Es un idioma normal de escritorio y no pide
   rediseñar nada.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────── tableta y laptop angosta · 760 y más ───────────────── */
@media screen and (min-width: 760px) {

  /* Las dos piden lo mismo en este tramo: 720. La vitrina recién se despega
     en el corte siguiente, cuando hay lugar de verdad. */
  body.ancho-lectura { max-width: 720px; }
  body.ancho-vitrina { max-width: 720px; }

  /* tulma-barra-fuera-y-fotos-20261001 */

  /* ── EN LA VITRINA LA BARRA NO APARECE ──────────────────────────────────
     Pablo, 01/10: "en pc no deberia aparecer la barra de meu carrinho porque
     achica mucho la vista de la pantalla".

     Acá se puede porque lo único que lleva adentro es "Ver carrinho", y el
     encabezado del catálogo ya tiene el carrito con su contador. En la ficha y
     en el carrito NO se puede: ahí la barra ES el botón de "Adicionar" y el
     único camino al pago, y esas pantallas no tienen carrito en el encabezado.

     Y se devuelve el hueco que la reservaba: el cuerpo trae padding-bottom:120px
     para que la barra no tape el último producto. Sin barra son 120px de nada. */
  body.ancho-vitrina .ticket-bar { display: none; }
  body.ancho-vitrina { padding-bottom: 40px; }

  /* Tres columnas en vez de dos. Las fotos son aspect-ratio 1/1, así que la
     tarjeta sigue cuadrada y nada se deforma. */
  body.ancho-vitrina .prods { grid-template-columns: repeat(3, 1fr); }

  /* ── LAS FOTOS DEJAN DE QUEDAR CORTADAS ─────────────────────────────────
     La galería venía con alto FIJO —280px en la ficha de producto, 250px en la
     de combo— y `background-size: cover`. Ensanchar la columna sin tocar el
     alto recorta más: a 480 era 1,7:1 y a 720 pasó a 2,6:1. La foto no se
     agrandó, se aplastó. Lo causó mi cambio de esta mañana.

     Se pasa a proporción, la misma que tenía en el teléfono —480:280 = 12:7—,
     así que a 720 mide 411px en vez de 280 y recorta lo mismo que recortaba
     antes en el teléfono. */
  body.ancho-lectura .gallery { height: auto; aspect-ratio: 12 / 7; }

  /* El hero del combo va por min-height y NO por aspect-ratio, a propósito: el
     29/09 se cambió de alto fijo a min-height porque un combo de cuatro
     componentes desbordaba hacia arriba y el título quedaba ilegible.
     aspect-ratio volvería a fijar el alto y a traer el mismo problema.
     172px a 480 de ancho es 2,79:1; a 720 eso da 258. */
  body.ancho-vitrina .combo-hero { min-height: 258px; }

  /* ── LA LETRA, PARA MIRAR DE LEJOS ──────────────────────────────────────
     tulma-pantalla-y-letra-20261001
     Marketing dice que el 20% consulta en pareja mirando la laptop. La
     tipografía está calibrada para un teléfono a un brazo de distancia: el
     título del producto mide 13,5px, las etiquetas 9,5px y el "à vista" 10px.
     Ensanchar sin esto hace entrar cuatro productos por fila con letra de
     teléfono: entra más y se lee peor.

     SON DOCE REGLAS, NO LAS 244 que hay de texto en estas pantallas. Se suben
     las que se leen DE LEJOS PARA DECIDIR —el título, el precio, las etiquetas
     y la descripción—, no cada cartelito. Enumerar las 244 sería un parche
     enorme y frágil, y `zoom` sobre el body escala también las cajas y desarma
     el centrado de los muebles fijos.

     El carrito y el checkout quedan afuera a propósito: ahí ya no se mira
     juntos, se confirma, y se hace de cerca. */

  /* la tarjeta de la vitrina · lo que se compara de un vistazo */
  body.ancho-vitrina .prod .info h3        { font-size: 15.5px; }
  body.ancho-vitrina .prod .info .mc       { font-size: 11px; }
  body.ancho-vitrina .prod .price-col .p6  { font-size: 19.5px; }
  body.ancho-vitrina .prod .price-col .p6 small { font-size: 12.5px; }
  body.ancho-vitrina .prod .price-col .p12 { font-size: 12px; }
  body.ancho-vitrina .prod .price-col .pc  { font-size: 11.5px; }
  body.ancho-vitrina .prod .add-mini       { font-size: 15px; }

  /* la ficha de producto · lo que se lee cuando ya eligieron cuál mirar */
  body.ancho-lectura #fDesc p              { font-size: 15.5px; }
  body.ancho-lectura .inc-list li          { font-size: 15px; }
  body.ancho-lectura .cond .ct p           { font-size: 13px; }

  /* la ficha de combo · su descripción y el nombre de cada componente */
  body.ancho-lectura #cDesc p              { font-size: 15.5px; }
  body.ancho-lectura .prod-top .pn h4      { font-size: 15.5px; }

  /* ── LA BARRA DEL TOTAL ─────────────────────────────────────────────────
     tulma-barra-total-20261001
     Pablo, 01/10: "quedo muy chico el recuadro de abajo donde figura el monto".
     La había dejado afuera del escalón de letra a propósito, avisando que podía
     notarse. Se notó, y es el renglón que dos personas miran desde el otro lado
     de la mesa: tenía "Seu carrinho" en 10-11px y el "sem juros" en 9px.

     Los selectores son los mismos en las cuatro pantallas, con diferencias de
     medio píxel entre sí —lab 11 / 10,5 / 10— que nadie eligió a propósito.
     Acá quedan iguales: unificar es mejor que arrastrar el ruido. */
  body.ancho-lectura .ticket-total .lab,
  body.ancho-vitrina .ticket-total .lab     { font-size: 12.5px; }
  body.ancho-lectura .ticket-total .val .n,
  body.ancho-vitrina .ticket-total .val .n  { font-size: 27px; }
  body.ancho-lectura .ticket-total .val .x,
  body.ancho-vitrina .ticket-total .val .x,
  body.ancho-lectura .ticket-total .val .x6,
  body.ancho-vitrina .ticket-total .val .x6 { font-size: 14px; }
  body.ancho-lectura .ticket-total .val .sj,
  body.ancho-vitrina .ticket-total .val .sj { font-size: 10.5px; }
  body.ancho-lectura .ticket-total .sub,
  body.ancho-vitrina .ticket-total .sub     { font-size: 12.5px; }
  body.ancho-lectura .ticket-total .calc,
  body.ancho-vitrina .ticket-total .calc    { font-size: 15px; }
  body.ancho-lectura .cont-btn,
  body.ancho-vitrina .cont-btn              { font-size: 17px; padding: 15px 26px; }

  /* Y que respire: venía con 14-16px arriba y abajo, calibrado para no comerse
     una pantalla de teléfono. El env() se deja porque en una tableta con muesca
     sigue valiendo, y en una laptop da cero. */
  /* MAS BAJA, no más alta. La subí a 18px en la corrección anterior y Pablo
     avisó que "achica mucho la vista": 12px la deja más compacta incluso que
     los 14px originales, conservando la letra grande. Ya no hace falta
     nombrar la vitrina, que no la muestra. tulma-barra-fuera-y-fotos-20261001 */
  body.ancho-lectura .ticket-bar {
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  }

  /* ── LOS MUEBLES FIJOS SIGUEN A LA COLUMNA ──────────────────────────────
     tulma-muebles-siguen-columna-20261001
     Estan clavados al viewport con position:fixed y venian topados en 480,
     que es lo que medía la columna hasta hoy: coincidían exactas. Al ensanchar
     la columna a 720 quedaron 120px cortas de cada lado, o sea desalineadas por
     culpa del cambio de ancho. Esto las vuelve a hacer coincidir.

     TOPAN EN 720 Y NO SIGUEN hasta 1080 en la vitrina: el contenido de la barra
     es un total a la izquierda y un botón a la derecha, y estirarla más sólo los
     aleja. Ahí queda centrada, que es la pastilla flotante de siempre.

     Los cinco salieron de listar el árbol, no de la memoria. Los overlays no
     entran: cubren la pantalla entera a propósito. */
  body.ancho-lectura .ticket-bar,
  body.ancho-lectura .sheet,
  body.ancho-lectura .pinfo-sheet,
  body.ancho-lectura .info-sheet,
  body.ancho-lectura .dlg,
  body.ancho-lectura .footer-bar,
  body.ancho-vitrina .ticket-bar,
  body.ancho-vitrina .sheet,
  body.ancho-vitrina .pinfo-sheet,
  body.ancho-vitrina .info-sheet,
  body.ancho-vitrina .dlg,
  body.ancho-vitrina .footer-bar { max-width: 720px; }
}

/* ───────────────────────── laptop · 1100 y más ───────────────────────── */
@media screen and (min-width: 1100px) {

  /* Sólo la vitrina crece. La lectura se queda en 720 a propósito. */
  body.ancho-vitrina { max-width: 1080px; }

  body.ancho-vitrina .prods { grid-template-columns: repeat(4, 1fr); }

  /* Los combos eran una columna de tarjetas con hero de 172px de alto: a 1080
     de ancho quedaban deformados, una franja. En dos columnas vuelven a una
     proporción de tarjeta. `align-items:start` evita que la de al lado se
     estire para igualar a la más alta. El gap de 18px lo hereda del flex que
     ya tenían, porque `gap` vale igual en grid. */
  /* Acá ya no hace falta decirle a la barra que siga a la columna: en la
     vitrina directamente no se muestra. Las hojas siguen topadas en los 720 del
     corte anterior, que es lo correcto: son diálogos, y a 1080 un diálogo es una
     franja. tulma-barra-total-20261001 tulma-barra-fuera-y-fotos-20261001 */

  /* En dos columnas cada combo mide ~517, así que su hero baja de los 258 del
     corte anterior a 190 para conservar la misma proporción de 2,79:1. */
  body.ancho-vitrina .combo-hero { min-height: 190px; }

  body.ancho-vitrina .combos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}