/* MV GDL Sneakers, propuestas (2026-11-12). Estructura y controles comunes; cada propuesta pone sus tokens.
   Copia del base.css de Berman (2ª ronda): mismos controles, tallas siempre visibles, cajón y bolsa; un cambio aquí no llega allá.
   Reglas: el acento (el naranja del sol del logo) es lo único que dice «esto está elegido / tócame»; nada de bordes, sombras ni
   etiquetas que no informen; un solo sistema de esquinas por propuesta (--radio para controles, --radio-tarjeta para tarjetas). */
:root {
  --letra: system-ui, sans-serif; --titulo: var(--letra);
  --fondo: #fff; --superficie: #fff; --hundido: #f4f4f4; --tinta: #111; --suave: #6b6b6b; --linea: #e4e4e4;
  --acento: #f47b16; --acento-tinta: #1c0d02; --foto-fondo: #f3f3f3;
  --radio: 8px; --radio-tarjeta: 12px; --radio-foto: 10px;
  --ancho: 1240px; --alto-control: 44px;
  --sombra-panel: 0 18px 50px -12px rgb(0 0 0 / .28), 0 0 0 1px var(--linea);
  --curva: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.5 var(--letra); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── Botones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--alto-control); padding: 0 22px;
  border: 1px solid var(--acento); border-radius: var(--radio); background: var(--acento); color: var(--acento-tinta);
  font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .12s var(--curva), filter .15s; }
.boton:hover { filter: brightness(1.06); }
.boton:active { transform: scale(.98); }
.boton--borde { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton--borde:hover { border-color: var(--tinta); filter: none; }
.boton--chico { min-height: 38px; padding: 0 16px; font-size: 15px; }
.boton--wa { width: 100%; }
.limpiar { min-height: 38px; padding: 0 4px; border: 0; background: none; color: var(--suave); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.limpiar:hover { color: var(--tinta); }
.limpiar[disabled] { opacity: .4; cursor: default; }

/* ── Barra de filtros ── */
.barra__fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.buscar { position: relative; flex: 1 1 320px; min-width: 0; display: flex; align-items: center; }
.buscar > .ico { position: absolute; left: 14px; color: var(--suave); pointer-events: none; }
.buscar input { width: 100%; height: var(--alto-control); padding: 0 40px 0 42px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--superficie); outline-offset: 0; }
.buscar input::placeholder { color: var(--suave); }
.buscar input::-webkit-search-cancel-button { display: none; }
.buscar__borrar { position: absolute; right: 4px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--suave); border-radius: var(--radio); }
.buscar__borrar[hidden] { display: none; }
.disparadores { display: flex; gap: 8px; flex: none; }
.disparador { display: inline-flex; align-items: center; gap: 8px; height: var(--alto-control); padding: 0 14px 0 16px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--superficie); white-space: nowrap; font-weight: 500; transition: border-color .15s; }
.disparador:hover { border-color: var(--tinta); }
.disparador .ico { width: 16px; height: 16px; color: var(--suave); transition: transform .2s var(--curva); }
.disparador[aria-expanded="true"] .ico { transform: rotate(180deg); }
.disparador.es-activo { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.disparador--todos .ico { transform: none !important; color: currentColor; }
.cuenta-burbuja { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--acento);
  color: var(--acento-tinta); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cuenta-burbuja[hidden] { display: none; }
.solo-celular { display: none; }

.activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.activos[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 14px; border: 0; border-radius: 99px;
  background: var(--tinta); color: var(--fondo); font-size: 14px; font-weight: 500; }
.chip .ico { width: 15px; height: 15px; opacity: .7; }
.chip:hover .ico { opacity: 1; }

/* Tira de tallas siempre visible */
.tira { display: flex; align-items: center; gap: 14px; margin-top: 12px; min-width: 0; }
.tira__titulo { flex: none; color: var(--suave); font-size: 14px; }
.grupo--tira { min-width: 0; flex: 1; }
.grupo--tira .tallas { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.grupo--tira .tallas::-webkit-scrollbar { display: none; }
.grupo--tira .talla { flex: none; }

/* ── Contenido de un grupo ── */
.grupo + .grupo { margin-top: 22px; }
.grupo__titulo { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.tallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.talla { min-width: 52px; height: 44px; padding: 0 8px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie);
  font-weight: 600; transition: border-color .12s, background .12s; }
.talla:hover:not([disabled]) { border-color: var(--tinta); }
.talla__sexo { margin-left: 2px; font-size: .64em; font-weight: 700; opacity: .72; }
.talla[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.talla[disabled] { color: var(--suave); opacity: .38; cursor: default; text-decoration: line-through; text-decoration-thickness: 1px; }
.opciones { display: grid; gap: 2px; }
.opcion { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border: 0; border-radius: var(--radio); background: none; text-align: left; }
.opcion:hover:not([disabled]) { background: var(--hundido); }
.opcion[disabled] { opacity: .38; cursor: default; }
.opcion__nombre { flex: 1; min-width: 0; }
.opcion__n { color: var(--suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.casilla { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--linea); border-radius: clamp(2px, calc(var(--radio) / 2), 6px); transition: background .12s, border-color .12s; }
.casilla .ico { width: 14px; height: 14px; stroke-width: 2.5; opacity: 0; color: var(--acento-tinta); }
.opcion[aria-pressed="true"] .casilla { background: var(--acento); border-color: var(--acento); }
.opcion[aria-pressed="true"] .casilla .ico { opacity: 1; }
.opcion[aria-pressed="true"] .opcion__nombre { font-weight: 600; }
.muestra { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); }
.opcion[aria-pressed="true"] .muestra { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); }
.muestra[data-familia="Blanco"] { background: #fff; }
.muestra[data-familia="Negro"] { background: #141414; }
.muestra[data-familia="Gris"] { background: #9a9ea3; }
.muestra[data-familia="Azul"] { background: #2f5fc4; }
.muestra[data-familia="Morado"] { background: #7448bd; }
.muestra[data-familia="Rojo"] { background: #c8372d; }
.muestra[data-familia="Rosa"] { background: #ec9bbb; }
.muestra[data-familia="Verde"] { background: #3b8f57; }
.muestra[data-familia="Naranja"] { background: #ec8a2e; }
.muestra[data-familia="Arena"] { background: #d6bf98; }
.muestra[data-familia="Multicolor"] { background: conic-gradient(#c8372d, #ec8a2e, #f2c94c, #3b8f57, #2f5fc4, #7448bd, #c8372d); }

/* ── Panel bajo el botón ── */
.panel { position: fixed; z-index: 40; width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto; padding: 14px;
  background: var(--superficie); color: var(--tinta); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-panel);
  animation: entrar .16s var(--curva); }
.panel[data-grupo="talla"] { width: min(380px, calc(100vw - 24px)); }
.panel__pie { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
@keyframes entrar { from { opacity: 0; transform: translateY(-4px); } }

/* ── Hoja (celular o modo «hoja») ── */
.hoja { width: 100%; max-width: 560px; max-height: none; margin: auto auto 0; padding: 0; border: 0; background: none; color: var(--tinta); }
.hoja::backdrop { background: rgb(0 0 0 / .5); }
.hoja__caja { display: flex; flex-direction: column; max-height: 86vh; background: var(--superficie); border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  animation: subir .22s var(--curva); }
.hoja__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px; }
.hoja__cabeza h2 { margin: 0; font: 600 19px/1.2 var(--titulo); }
.hoja__cerrar { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--hundido); color: var(--tinta); }
.hoja__cuerpo { overflow: auto; padding: 8px 20px 20px; }
.hoja__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.hoja__pie .boton { flex: 1; max-width: 260px; }
@media (min-width: 720px) { .hoja { margin: auto; } .hoja__caja { border-radius: var(--radio-tarjeta); max-height: 80vh; } }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }

/* ── Columna lateral ── */
.lateral__cabeza { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.lateral__cabeza p { margin: 0; font: 600 17px/1.2 var(--titulo); }

/* ── Catálogo ── */
.cuenta { margin: 0; color: var(--suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 16px; }
.pieza { min-width: 0; }
.pieza__abrir { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; border-radius: var(--radio-foto); }
.pieza__foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radio-foto); background: var(--foto-fondo); }
.pieza__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--curva); }
@media (hover: hover) { .pieza__abrir:hover .pieza__foto img { transform: scale(1.035); } }
.pieza__texto { display: grid; gap: 2px; padding: 12px 2px 0; }
.pieza__marca { color: var(--suave); font-size: 13px; }
.pieza__nombre { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pieza__tallas { margin-top: 2px; color: var(--suave); font-size: 14px; }
.mini-tallas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mini-talla { min-width: 30px; padding: 3px 6px; border: 1px solid var(--linea); border-radius: calc(var(--radio) / 1.5); color: var(--tinta); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; }
.mini-talla.es-elegida { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.mas { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding-top: 16px; }
.mas p { margin: 0; color: var(--suave); font-size: 14px; }
.vacio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 56px 16px; text-align: center; color: var(--suave); }
.vacio p { margin: 0; }
.vacio__titulo { color: var(--tinta); font: 600 19px/1.3 var(--titulo); }
.vacio .boton { margin-top: 12px; }

/* ── Cajón (ficha y bolsa, 2026-11-12) ──
   Entra por la derecha a todo lo alto (en el celular, a pantalla completa). Distinto a propósito de la ficha de Snake,
   que es una ventana al centro con la galería a un lado y el WhatsApp directo: aquí se arma una bolsa y se manda junta. */
.cajon { width: min(460px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0;
  background: var(--superficie); color: var(--tinta); }
.cajon::backdrop { background: rgb(0 0 0 / .55); }
.cajon[open] { animation: deslizar .26s var(--curva); }
@keyframes deslizar { from { transform: translateX(36px); opacity: 0; } }
.cajon__caja { display: flex; flex-direction: column; height: 100%; }
.cajon__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 10px 14px 10px 22px; border-bottom: 1px solid var(--linea); }
.cajon__cabeza h2 { margin: 0; font: 600 18px/1.2 var(--titulo); }
.cajon__cabeza p { margin: 0; color: var(--suave); }
.cajon__cuerpo { flex: 1; overflow: auto; padding: 18px 22px 24px; overscroll-behavior: contain; }
.cajon__pie { display: grid; gap: 10px; padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.cajon__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cerrar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--hundido); color: var(--tinta); }
.boton--ancho { width: 100%; }
.boton[aria-disabled="true"] { background: var(--hundido); border-color: var(--linea); color: var(--suave); cursor: default; filter: none; transform: none; }

/* Ficha */
.ficha__foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio-foto); background: var(--foto-fondo); }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__minis { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.ficha__minis button { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: clamp(4px, var(--radio), 12px); overflow: hidden; background: none; }
.ficha__minis button[aria-current="true"] { border-color: var(--acento); }
.ficha__minis img { width: 100%; height: 100%; object-fit: cover; }
.ficha__nombre { margin: 18px 0 0; font: 700 clamp(24px, 3vw, 30px)/1.12 var(--titulo); text-wrap: balance; }
.ficha__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.ficha__etiqueta { margin: 0; font-weight: 600; }
.ficha__pista { margin: 0; color: var(--suave); font-size: 14px; }
.ficha__pista.es-falta { color: var(--tinta); font-weight: 700; }
.ficha__tallas { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.ficha__tallas .talla { height: 52px; font-size: 17px; }
.ficha__en-bolsa { margin: 16px 0 0; padding: 10px 12px; border-radius: clamp(4px, var(--radio), 12px); background: var(--hundido); font-size: 14px; }
.ficha__listo { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.ficha__listo .ico { width: 20px; height: 20px; stroke-width: 2.5; color: var(--acento); }
.ficha__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--suave); font-size: 13px; }

/* Botón flotante de la bolsa */
.bolsa-boton { position: fixed; right: 16px; bottom: calc(var(--bolsa-abajo, 16px) + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 12px 0 18px; border: 0; border-radius: var(--radio-bolsa, 99px); background: var(--tinta); color: var(--fondo); font-weight: 600;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / .5); }
.bolsa-boton[hidden] { display: none; }
.bolsa-boton .ico { width: 20px; height: 20px; }
.bolsa-boton .cuenta-burbuja { min-width: 26px; height: 26px; font-size: 13px; }
.bolsa-boton--golpe { animation: golpe .45s var(--curva); }
@keyframes golpe { 35% { transform: scale(1.1); } }

/* Bolsa */
.renglones { display: grid; margin: 0; padding: 0; list-style: none; }
.renglon { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.renglon:first-child { padding-top: 0; }
.renglon img { grid-row: span 2; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radio-foto); background: var(--foto-fondo); }
.renglon__texto { display: grid; gap: 1px; min-width: 0; }
.renglon__texto small { color: var(--suave); font-size: 13px; }
.renglon__texto b { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.renglon__talla { font-size: 14px; }
.renglon__quitar { width: 36px; height: 36px; display: grid; place-items: center; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: none; color: var(--suave); }
.renglon__quitar:hover { background: var(--hundido); color: var(--tinta); }
.cantidad { grid-column: 2 / 4; display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--linea); border-radius: clamp(4px, var(--radio), 99px); }
.cantidad button { width: 38px; height: 34px; border: 0; background: none; font-size: 18px; line-height: 1; }
.cantidad button[disabled] { opacity: .35; cursor: default; }
.cantidad span { min-width: 26px; text-align: center; font-weight: 600; }
.entrega { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; border: 0; }
.entrega legend { margin-bottom: 10px; padding: 0; font-weight: 600; }
.entrega label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: clamp(4px, var(--radio), 14px); cursor: pointer; }
.entrega label:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.entrega input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); }
.entrega b { display: block; font-weight: 600; }
.entrega small { display: block; color: var(--suave); font-size: 13px; }
.nota { display: grid; gap: 8px; margin-top: 20px; font-weight: 600; }
.nota small { color: var(--suave); font-weight: 400; }
.nota textarea { padding: 10px 12px; border: 1px solid var(--linea); border-radius: clamp(4px, var(--radio), 14px); background: var(--superficie); color: var(--tinta);
  font: inherit; font-weight: 400; resize: vertical; }
.bolsa__total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.bolsa__total b { font: 700 18px/1 var(--titulo); }
.bolsa__aviso { margin: 0; padding: 10px 12px; border-radius: clamp(4px, var(--radio), 12px); background: var(--hundido); font-size: 14px; }
.bolsa__vacia { display: grid; justify-items: center; gap: 6px; padding: 56px 8px; text-align: center; color: var(--suave); }
.bolsa__vacia p { margin: 0; }
.bolsa__vacia .boton { margin-top: 14px; }

@media (max-width: 719px) {
  .cajon { width: 100%; }
  .solo-celular { display: inline-flex; }
  .barra--menus .disparador:not(.disparador--todos) { display: none; }
}

/* Volver al índice de propuestas (sólo en las maquetas); a la izquierda para no tapar la bolsa */
.volver { position: fixed; left: 14px; bottom: 14px; z-index: 29; padding: 9px 14px; border-radius: 99px; background: #111; color: #fff;
  font: 500 13px/1 system-ui, sans-serif; text-decoration: none; box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }