/* taso-inv - vista de cliente (tienda). Colores SOLO de tokens.css: sirve con cualquier paleta. Pensada primero para el celular (pulgar). */
body.tienda .side, body.tienda .top, body.tienda .scrim { display: none; }
body.tienda #app { max-width: 1100px; padding-bottom: 104px; } /* aire para la barra fija «Mi pedido» */

/* cabecera: el saludo vive en un panel con un baño suave del color de marca */
.tienda-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(120deg, var(--accent-soft), transparent 65%), var(--card); }
.tienda-top .btn2 { flex: none; width: var(--tap); padding: 0; border-radius: 50%; }
.tienda-marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tienda-marca .brand-logo { width: 48px; height: 48px; border-radius: 14px; }
.tienda-marca h1 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tienda-marca p { margin: 4px 0 0; font-size: 0.875rem; }

/* pestañas «Tienda / Mis pedidos»: control segmentado, la activa va rellena con el color de marca */
.tienda-tabs { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.tienda-tabs .chip { min-height: 40px; padding: 0 18px; border-color: transparent; color: var(--text2); font-size: 0.875rem; font-weight: 500; }
.tienda-tabs .chip[aria-pressed="true"] { background: var(--brand); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.tienda-nov { display: inline-block; min-width: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--on-accent); font-size: 0.6875rem; font-weight: 700; line-height: 20px; text-align: center; } /* pedidos del cliente cuyo estado cambió desde la última vez que los miró */

/* categorías: fila que se desliza de lado (no gasta ancho del celular) */
.tienda-grid { display: grid; gap: 14px; }
.tienda-rail { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
.tienda-rail::-webkit-scrollbar { display: none; }
.tienda-rail .chip { flex: none; white-space: nowrap; min-height: 40px; padding: 0 16px; border-color: var(--border); background: var(--card); color: var(--text2); font-size: 0.875rem; }
.tienda-rail .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent); font-weight: 600; }

/* tarjetas: 2 por fila en celular; el «+» flota sobre la foto, al alcance del pulgar. Radios concéntricos: 22 de la tarjeta - 8 de aire = 14 de la foto */
.tienda-lista { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .tienda-lista { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
.tienda-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 14px; border-radius: 22px; animation: tienda-in .4s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s, border-color .2s; }
@media (hover: hover) { .tienda-item:hover { transform: translateY(-3px); border-color: var(--border-accent); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.45); } }
@keyframes tienda-in { from { opacity: 0; transform: translateY(10px); } }
.tienda-abrir { all: unset; cursor: pointer; display: grid; gap: 10px; border-radius: 14px; }
.tienda-abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tienda-abrir h2 { margin: 0; padding: 0 6px; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tienda-mas { position: absolute; top: 16px; right: 16px; width: var(--tap); height: var(--tap); padding: 0; border-radius: 50%; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5); }
.tienda-precio { margin-top: auto; padding: 0 6px; } /* precio y estado quedan alineados abajo aunque los nombres ocupen distinto */
.tienda-precio strong { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tienda-meta { display: grid; gap: 4px; padding: 0 6px; }
/* Disponibilidad: punto de color + texto, sin pastilla (la pastilla se rompía en varias líneas dentro de la tarjeta) */
.tienda-estado { display: inline-flex; align-items: baseline; gap: 7px; font-size: 0.8125rem; color: var(--text2); overflow-wrap: anywhere; }
.tienda-estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text2); transform: translateY(-1px); }
.tienda-estado.ok::before { background: var(--ok); }
.tienda-estado.warn::before { background: var(--warn); }
.tienda-ins { position: absolute; top: 16px; left: 16px; min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--brand); color: var(--on-accent); font-size: 0.8125rem; font-weight: 700; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4); } /* cuántos llevas, sobre la foto: no mueve el precio ni descuadra la fila */
.tienda-ins[hidden] { display: none; }

.tienda-foto, .tienda-grande { width: 100%; object-fit: cover; border-radius: 14px; background: var(--accent-soft); display: block; }
.tienda-foto { aspect-ratio: 1 / 1; }
.tienda-grande { aspect-ratio: 4 / 3; border-radius: 18px; }
.tienda-foto.sin, .tienda-grande.sin { display: grid; place-items: center; font-weight: 600; color: var(--accent); background: var(--accent-soft); font-size: 2.5rem; }

body.tienda #toasts { bottom: 84px; } /* los avisos no tapan la barra «Mi pedido» */

/* barra fija «Mi pedido»: solo aparece con algo en la bolsa (y entra desde abajo al aparecer) */
.tienda-barra { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); width: min(560px, calc(100% - 24px)); min-height: 54px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 999px; background: var(--brand); color: var(--on-accent); font: 600 0.9375rem var(--font-ui); cursor: pointer; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.45); animation: tienda-barra .35s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes tienda-barra { from { opacity: 0; transform: translate(-50%, 18px); } }
.tienda-barra[hidden] { display: none; }
.tienda-barra:hover { filter: brightness(1.06); }
.tienda-barra:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.tienda-barra-t { display: inline-flex; align-items: center; gap: 10px; }
.tienda-cuenta { min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--on-accent); color: var(--brand); font-size: 0.75rem; font-weight: 700; }

/* detalle y bolsa: en celular suben desde abajo como una hoja; el botón de agregar queda pegado abajo aunque la descripción sea larga */
dialog:has(.tienda-detalle) { padding-bottom: 0; }
dialog:has(.tienda-detalle) h2 { padding-right: 48px; font-size: 1.25rem; letter-spacing: -0.01em; }
dialog:has(.tienda-lineas) label.lbl { flex: none; } /* en un formulario en columna, el «flex: 1 1 160px» de label.lbl estiraba cada campo a 160px de alto */
@media (max-width: 560px) {
  dialog:has(.tienda-detalle), dialog:has(.tienda-lineas) { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 28px 28px 0 0; animation: tienda-hoja .32s cubic-bezier(.16, 1, .3, 1); }
  dialog:has(.tienda-lineas) { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@keyframes tienda-hoja { from { opacity: 0; transform: translateY(40px); } }
.tienda-detalle { display: grid; gap: 14px; }
.tienda-x { position: absolute; top: 14px; right: 14px; border-radius: 50%; }
.tienda-detalle-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.tienda-detalle-cab strong { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tienda-detalle p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.tienda-compra { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 2px -22px 0; padding: 14px 22px max(18px, env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); }
.tienda-compra .btn { min-height: 52px; font-size: 1rem; border-radius: 16px; }
@media (max-width: 380px) { .tienda-compra { grid-template-columns: 1fr; } .tienda-compra .paso { justify-content: space-between; } } /* celulares angostos: el botón con su total no cabe al lado del selector */

/* selector «− 1 +» (pastilla con botones redondos) y bolsa */
.paso { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-high); }
.paso .btn2 { width: 36px; padding: 0; border-radius: 50%; border-color: transparent; background: transparent; }
.paso .btn2:hover { background: var(--accent-soft); }
.paso output { min-width: 2.5ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.tienda-lineas { display: grid; gap: 0; }
.tienda-linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.tienda-linea > span { flex: 1 1 0; min-width: 0; } /* nombre y precio a la izquierda en dos líneas, el selector siempre a la derecha */
.tienda-linea small { display: block; margin-top: 2px; }
.tienda-linea:last-child { border-bottom: 0; }

/* Mis pedidos: fecha y estado arriba, líneas con su precio a la derecha y el total al pie */
.tienda-pedidos { display: grid; gap: 14px; }
.tienda-pedidos .card { padding: 16px 18px; border-radius: 22px; }
.tienda-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tienda-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tienda-items li { display: flex; justify-content: space-between; gap: 12px; }
.tienda-pedidos .card p { margin: 8px 0 0; }
.tienda-pedidos .card > p:last-child { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 1rem; }

/* Estrellas (web/js/estrellas.js): la elegida va rellena y siempre hay texto «4 de 5», asi que no dependen solo del color */
.estrellas-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.estrellas { display: inline-flex; gap: 2px; }
.estrella { display: inline-flex; align-items: center; justify-content: center; color: var(--text2); }
.estrella.on { color: var(--accent); }
.estrella.on svg { fill: currentColor; }
.estrellas.editable { gap: 8px; }
.estrellas.editable .estrella { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.estrellas.editable .estrella:hover:not(:disabled) { background: var(--card-high); }
.estrellas.editable .estrella:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.estrellas[aria-busy="true"] .estrella { cursor: progress; }
.tienda-items li { flex-wrap: wrap; } /* la nota de cada producto va debajo de su linea */
.tienda-valorar { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.tienda-valorar > small { flex: 1 0 100%; }
.tienda-valorar-pedido { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Buscador de la tienda y mensaje cuando nada coincide */
.tienda-buscar { width: 100%; min-height: 44px; font-size: 1rem; } /* 16 px: iOS no hace zoom al enfocar */
.tienda-lista > .tienda-nada { grid-column: 1 / -1; margin: 6px 0; }