/* GUAYACAN · Guías de talle · 25-sep-2026
   Mismo diseño que las tarjetas de Guayacan En Vivo (y la imagen que se manda por WhatsApp):
   tarjeta blanca, borde #e3e1d5, encabezado verde claro con texto azul, primera columna azul,
   renglones alternados, isotipo arriba a la derecha. Letras de la tienda: Newsreader (nombre) e Inter.
   Se usa en la página Guía de Talles y en la ventana "Guía de talles" de cada producto.
   Lo arma generar_guias.py (no editar a mano: cambiar el generador y volver a subir). */

/* ---- Tarjeta ---- */
.gy-gt{--gt-azul:#4B82BB;--gt-tinta:#2b2b2b;--gt-gris:#8a8a8a;--gt-borde:#e3e1d5;container-type:inline-size;position:relative;box-sizing:border-box;min-width:0;padding:16px;border:1.5px solid var(--gt-borde);border-radius:12px;background:#fff;color:var(--gt-tinta);font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);text-align:left;scroll-margin-top:96px}
.gy-gt *,.gy-gt *::before,.gy-gt *::after{box-sizing:border-box}
.gy-gt .gy-gt__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px}
.gy-gt .gy-gt__nombre{margin:0;padding:0;font-family:var(--font-heading,"Newsreader","Iowan Old Style",Georgia,serif);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--gt-tinta)}
.gy-gt .gy-gt__nota{margin:4px 0 0;padding:0;font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);font-size:12.5px;font-style:normal;line-height:1.45;white-space:normal;color:var(--gt-gris)}
.gy-gt .gy-gt__iso{flex:0 0 30px;width:30px;height:30px;margin-top:-1px;opacity:.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 509.2 509.2'%3E%3Cpath fill='%234B82BB' fill-rule='evenodd' d='M72.6,487.1L1.1,487.1L0,486.3L0.2,22.5L1.1,22L238.6,22L239.1,22.4L239.2,23.8L239.2,73.3L240,75.8L240.2,174L241,175.8L241,250L240.2,251.5L240.2,280.3L240,283.3L239.2,284.5L239.1,287.6L236.6,287.9L235.6,288.7L233.8,288.7L232.3,287.9L228.6,287.8L227.8,287.1L226.4,286.8L221.3,281.6L220,279.3L218.1,277.1L211.3,270.6L209.1,267.1L201.3,259.6L201,258.3L199.1,256.1L192.3,249.6L191,247.3L189.1,245.1L182.3,238.6L182,237.3L164.3,219.6L164,218.3L158.9,213L145.3,199.6L145,198.3L140.9,194L124.9,178L123.8,177.1L122.5,176.8L119.8,173.9L118.4,173.8L116.8,171.9L115.6,171.8L114.8,170.9L113.6,170.8L112.9,170L111,169L109.6,168.8L108.8,167.9L107.3,167.8L105.8,166.9L103.3,166.8L101.8,165.9L94.1,165.9L92.8,166.8L90.6,166.9L89.8,167.8L88.6,167.9L87.8,168.8L86.4,169L79.3,176.1L79.1,177.5L77.4,179.3L77.1,180.5L76.2,181.3L76.1,182.5L75.2,183.3L74.2,187.5L73.3,188.4L73.2,486Z'/%3E%3Cpath fill='%23ABAE55' fill-rule='evenodd' d='M509.1,487L125.1,487.1L124.3,486.7L124.3,300.5L125.2,298.3L125.2,279.3L127,276.5L127.3,275.1L131.6,271.9L135.6,269.9L136.9,270L157.1,290.1L158.6,292.5L164.4,298.8L176.1,310.1L176.6,311.5L179.3,314.6L186.1,321.1L188.3,324.6L193.1,329.1L194.3,331.6L198.1,335.1L198.6,336.5L201.1,339.1L202.3,341.6L204.1,343.1L204.2,344.5L206.1,346.1L206.3,347.5L209,350.3L209.3,351.6L211.1,353.1L212.3,355.6L214.1,357.1L214.3,358.5L217.1,361.1L217.6,362.5L220.1,365.1L221.3,367.6L224.1,370.1L225.3,372.5L229.1,376.1L231.3,379.6L238.1,386.1L238.6,387.5L244.6,393.5L245.9,394L251.4,399.8L253.9,401L255.4,402.8L256.8,403.1L258.6,404.8L259.8,404.9L260.6,405.8L261.8,406.1L262.6,406.8L263.8,406.9L264.6,407.8L266.3,408L267.6,408.9L273.8,408.8L274.6,407.9L276.8,407.8L277.7,407L279.6,406.7L285.8,402.5L290,397.3L291.1,395L291.2,393.3L292.1,392.5L292.2,23.8L292.6,22.1L509.1,22Z'/%3E%3C/svg%3E") center/contain no-repeat}
.gy-gt .gy-gt__tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gy-gt .gy-gt__t{width:100%;margin:0;border:0;border-collapse:separate;border-spacing:0;font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);font-size:13.5px;line-height:1.3;font-variant-numeric:tabular-nums}
.gy-gt .gy-gt__t th{padding:7px 8px;border:0;background:#e8f0e8;color:var(--gt-azul);font-weight:600;text-align:center;vertical-align:middle;white-space:nowrap}
.gy-gt .gy-gt__t th:first-child{border-radius:6px 0 0 6px}
.gy-gt .gy-gt__t th:last-child{border-radius:0 6px 6px 0}
.gy-gt .gy-gt__t td{padding:7px 8px;border:0;border-bottom:1px solid #f0f0f0;background:transparent;color:var(--gt-tinta);font-weight:400;text-align:center;vertical-align:middle;white-space:nowrap}
.gy-gt .gy-gt__t td:first-child{font-weight:600;color:var(--gt-azul)}
.gy-gt .gy-gt__t tbody tr:nth-child(even) td{background:#fafaf7}
.gy-gt .gy-gt__t tbody tr:last-child td{border-bottom:0}
.gy-gt .gy-gt__u{font-weight:500}
/* Tarjeta angosta (ancho interior): la unidad "(cm)" baja a un segundo renglón (4 columnas por debajo de 380 px, cualquiera por debajo de 250 px) */
@container (max-width:380px){
  .gy-gt .gy-gt__t[data-cols="4"] .gy-gt__u{display:block;margin-top:1px;font-size:10.5px;opacity:.8}
  .gy-gt .gy-gt__t[data-cols="4"] th,.gy-gt .gy-gt__t[data-cols="4"] td{padding:6px 5px}
}
@container (max-width:250px){
  .gy-gt .gy-gt__u{display:block;margin-top:1px;font-size:10.5px;opacity:.8}
  .gy-gt .gy-gt__t{font-size:12.5px}
  .gy-gt .gy-gt__t th,.gy-gt .gy-gt__t td{padding:6px 4px}
}
@media (max-width:480px){
  .gy-gt{padding:14px}
  .gy-gt .gy-gt__nombre{font-size:18.5px}
}

/* ---- Página Guía de Talles: tarjetas en grilla (2 por fila en computadora, 1 en el celular) ---- */
.gy-gt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:14px 0 30px}

/* ---- Producto: link "Guía de talles" debajo de Disponible ---- */
.gy-gt-link{margin:10px 0 0}
.gy-gt-link a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:2px 0;font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);font-size:14px;font-weight:500;line-height:1.3;color:var(--color-ink,#1c1917);text-decoration:none;cursor:pointer}
.gy-gt-link a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gy-gt-link a svg{flex:0 0 17px;width:17px;height:17px;color:#5F612E}
.gy-gt-link a:hover span{color:#5F612E;text-decoration-thickness:2px}
.gy-gt-link a:focus-visible{outline:2px solid #ABAE55;outline-offset:3px;border-radius:4px}

/* ---- Producto: ventana con la guía ---- */
/* Mientras la ventana está abierta, la página de atrás no se mueve (solo con CSS: se suelta sola al cerrar) */
html:has(.gy-gt-dlg[open]){overflow:hidden}
.gy-gt-dlg{width:min(540px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:16px;background:transparent;box-shadow:none;color:var(--color-ink,#1c1917);overflow:visible}
.gy-gt-dlg[open]{animation:gyGtEntra .18s ease-out}
.gy-gt-dlg::backdrop{background:rgba(28,25,23,.55)}
@keyframes gyGtEntra{from{transform:translateY(10px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.gy-gt-dlg[open]{animation:none}}
.gy-gt-dlg .gy-gt-dlg__caja{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:14px;border-radius:16px;background:#faf9f4;box-shadow:0 20px 60px rgba(28,25,23,.3)}
.gy-gt-dlg .gy-gt-dlg__barra{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 12px}
.gy-gt-dlg .gy-gt-dlg__rotulo{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6f6a64}
.gy-gt-dlg .gy-gt-dlg__rotulo svg{width:17px;height:17px;color:#5F612E}
.gy-gt-dlg .gy-gt-dlg__cerrar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;margin:0;padding:0;border:1px solid #e3e1d5;border-radius:50%;background:#fff;color:#2b2b2b;cursor:pointer}
.gy-gt-dlg .gy-gt-dlg__cerrar:hover{border-color:#5F612E;color:#5F612E}
.gy-gt-dlg .gy-gt-dlg__cerrar:focus-visible{outline:2px solid #ABAE55;outline-offset:2px}
.gy-gt-dlg .gy-gt-dlg__cerrar svg{width:18px;height:18px}
.gy-gt-dlg .gy-gt-dlg__pie{margin:12px 2px 2px;font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);font-size:13px;line-height:1.5;color:#6f6a64}
.gy-gt-dlg .gy-gt-dlg__pie a{color:var(--color-ink,#1c1917);font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---- 5-oct-2026 (pedido de la familia): la guía emerge SIN fondo oscuro ----
   "El negro alrededor con opacidad no me gusta: a lo sumo una pequeña sombra, algo sutil, o nada."
   Vale para la ventana de la ficha y para la que se abre desde las tarjetas (GY-GUIA, assets/gy-carrito.js).
   La página de atrás no se oscurece: la guía flota con un filo finito y una sombra suave, y aparece
   con un leve crecer y aclarar. Se cierra con la X, tocando afuera o con Esc (como antes).
   Volver atrás: borrar este bloque. (Si se vuelve a correr generar_guias.py, agregarle este bloque.) */
.gy-gt-dlg::backdrop{background:transparent}
.gy-gt-dlg[open]{animation:gyGtEmerge .22s cubic-bezier(.2,.8,.2,1)}
@keyframes gyGtEmerge{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.gy-gt-dlg .gy-gt-dlg__caja{box-shadow:0 0 0 1px rgba(28,25,23,.08),0 2px 6px rgba(28,25,23,.06),0 24px 56px -16px rgba(28,25,23,.34)}
@media (prefers-reduced-motion:reduce){.gy-gt-dlg[open]{animation:none}}