/* Tienda online de los almacenes (tienda-almacen.js): clara y con tres plantillas que elige cada almacén. */

/* Toda la app pasa a modo claro mientras se navega la tienda de un almacén (también carrito, pago y seguimiento). */
body.tienda-clara {
  --fondo: #F5F6F8; --tarjeta: #FFFFFF; --tarjeta-2: #F0F2F5; --tinta: #16181D; --tinta-2: #4B5160; --tinta-3: #7A8090;
  --linea: rgba(22, 24, 29, .10); --sombra: 0 6px 22px rgba(20, 24, 40, .08); --oro: var(--acento, #1F8A4C); --p: var(--acento, #1F8A4C); --p-suave: rgba(31, 138, 76, .1);
  background: var(--fondo); color: var(--tinta);
}
body.tienda-clara[data-plantilla="barrio"] { --fondo: #FBF5EA; --tarjeta: #FFFDF8; --tarjeta-2: #F5ECDC; --linea: rgba(80, 55, 20, .14); --tinta: #2A2116; --tinta-2: #5E5140; }
body.tienda-clara[data-plantilla="minimal"] { --fondo: #FFFFFF; --tarjeta: #FFFFFF; --tarjeta-2: #F6F6F6; --linea: #ECECEC; --sombra: none; }
body.tienda-clara input, body.tienda-clara textarea, body.tienda-clara select { color: var(--tinta); }
body.tienda-clara .hoja { background: var(--tarjeta); color: var(--tinta); }
body.tienda-clara .hoja textarea { background: var(--tarjeta-2); }
body.tienda-clara .barra-carro a { background: var(--ta-acento, var(--acento)); color: var(--ta-sobre, #fff); box-shadow: 0 10px 28px rgba(20, 24, 40, .25); }
body.tienda-clara .barra-carro .n { background: rgba(255, 255, 255, .25); }
body.tienda-clara .banner-prueba { color: #16181D; }

.ta { --ta-radio: 16px; --ta-titulo: var(--texto); font-family: var(--texto); color: var(--tinta); }
.ta.ta-f-clasica { --ta-titulo: Georgia, 'Times New Roman', serif; }
.ta.ta-f-redonda { --ta-titulo: var(--display); }
.ta h1, .ta h2, .ta h3 { font-family: var(--ta-titulo); font-weight: 700; letter-spacing: -.01em; }

/* Encabezado */
.ta-anuncio { background: var(--ta-acento); color: var(--ta-sobre); text-align: center; font-size: .85rem; font-weight: 700; padding: 8px 16px; }
.ta-cab { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.ta-cab-dentro { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; min-height: 62px; }
.ta-ham { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--linea); background: var(--tarjeta); display: grid; place-content: center; gap: 4px; cursor: pointer; }
.ta-ham span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta); }
.ta-marca { display: flex; align-items: center; text-decoration: none; color: var(--tinta); min-width: 0; }
.ta-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.ta-logo-txt { font-family: var(--ta-titulo); font-weight: 800; font-size: 1.2rem; color: var(--ta-acento); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.ta-buscar { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; background: var(--tarjeta-2); border: 1.5px solid transparent; }
.ta-buscar:focus-within { border-color: var(--ta-acento); background: var(--tarjeta); }
.ta-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0; font: inherit; font-size: .95rem; outline: none; }
.ta-carro { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ta-acento); color: var(--ta-sobre); text-decoration: none; font-weight: 800; }
.ta-carro b { min-width: 22px; height: 22px; border-radius: 99px; background: var(--ta-sobre); color: var(--ta-acento); display: grid; place-items: center; font-size: .78rem; padding: 0 6px; }
.ta-espacio { display: block; }
.ta-subcab { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ta-subcab a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-size: 1.1rem; }
.ta-subcab h1 { font-size: 1.2rem; margin: 0; }
.ta-velo { position: fixed; inset: 0; z-index: 60; background: rgba(15, 18, 30, .4); }
.ta-menu { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); background: var(--tarjeta); padding: 16px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; box-shadow: 10px 0 40px rgba(0, 0, 0, .15); animation: entra-menu .2s ease-out; }
.ta-menu-cab { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--linea); }
.ta-menu a { display: flex; gap: 12px; align-items: center; padding: 13px 10px; border-radius: 12px; color: var(--tinta); text-decoration: none; font-weight: 700; }
.ta-menu a:hover { background: var(--tarjeta-2); }
.ta-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea); background: var(--tarjeta); cursor: pointer; font-size: 1rem; color: var(--tinta); }

/* Cuerpo */
.ta-main { max-width: 1180px; margin: 0 auto; padding: 18px 16px 28px; display: grid; gap: 26px; }
.ta-portada { border-radius: 24px; padding: 34px 30px; background: linear-gradient(135deg, color-mix(in srgb, var(--ta-acento) 16%, #fff), color-mix(in srgb, var(--ta-acento) 6%, #fff)); position: relative; overflow: hidden; background-size: cover; background-position: center; }
.ta-portada.con-foto { min-height: 340px; display: flex; align-items: center; }
.ta-portada.con-foto { background-position: 70% center; }
.ta-portada.con-foto::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 14, 20, .72) 0%, rgba(10, 14, 20, .45) 42%, rgba(10, 14, 20, 0) 68%); }
.ta-portada-txt { position: relative; display: grid; gap: 10px; justify-items: start; max-width: 640px; }
.ta-portada h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin: 0; line-height: 1.08; }
.ta-portada p { margin: 0; color: var(--tinta-2); font-size: 1rem; }
.ta-portada.con-foto, .ta-portada.con-foto p { color: #fff; }
.ta-portada-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ta-portada-chips span { padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .85); color: #16181D; font-size: .85rem; font-weight: 700; }
.ta-portada-chips small { font-weight: 600; color: #4B5160; }
.ta-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; background: var(--ta-acento); color: var(--ta-sobre); font-weight: 800; text-decoration: none; }
.ta-aviso-zona { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FFF4E5; color: #7A4B00; font-size: .9rem; }
.ta-cats { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ta-cats::-webkit-scrollbar { display: none; }
.ta-cats a { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; width: 92px; text-decoration: none; color: var(--tinta); font-size: .82rem; font-weight: 700; text-align: center; line-height: 1.2; }
.ta-cat-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: color-mix(in srgb, var(--ta-acento) 12%, #fff); transition: transform .15s; }
.ta-cats a:hover .ta-cat-ico { transform: translateY(-2px); }
.ta-seccion { display: grid; gap: 14px; scroll-margin-top: 130px; }
.ta-seccion h2 { font-size: 1.35rem; margin: 0; }
.ta-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ta-todo { display: grid; gap: 26px; }
.ta-buscar-cuerpo { display: none; }
.ta-sin, .ta-vacio { color: var(--tinta-2); text-align: center; padding: 20px; }

/* Productos */
.ta-v-cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ta-prod { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 10px; border-radius: var(--ta-radio); background: var(--tarjeta); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.ta-prod.en-carro { border-color: var(--ta-acento); }
.ta-prod.agotado { opacity: .55; }
.ta-prod-foto { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--ta-radio) - 4px); border: 0; padding: 0; overflow: hidden; background: var(--tarjeta-2); cursor: pointer; }
.ta-prod-foto img { width: 100%; height: 100%; object-fit: cover; }
.ta-emoji { font-size: 3rem; }
.ta-dcto { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 99px; background: #E11D48; color: #fff; font-size: .75rem; font-weight: 800; }
.ta-prod-txt { display: grid; gap: 4px; align-content: start; }
.ta-prod-nombre { font-size: .95rem; line-height: 1.25; }
.ta-prod-desc { font-size: .8rem; color: var(--tinta-3); }
.ta-precio { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ta-precio span { font-weight: 800; font-size: 1.1rem; }
.ta-precio s { color: var(--tinta-3); font-size: .85rem; }
.ta-agregar { border: 0; border-radius: 999px; padding: 10px 14px; background: var(--ta-acento); color: var(--ta-sobre); font: inherit; font-weight: 800; cursor: pointer; }
.ta-agotado { justify-self: start; padding: 6px 10px; border-radius: 99px; background: var(--tarjeta-2); color: #B91C1C; font-weight: 800; font-size: .8rem; }
.ta-paso { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; border-radius: 999px; background: color-mix(in srgb, var(--ta-acento) 12%, #fff); overflow: hidden; }
.ta-paso button { height: 40px; border: 0; background: var(--ta-acento); color: var(--ta-sobre); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.ta-paso b { text-align: center; }
/* Lista */
.ta-v-lista { display: grid; }
.ta-v-lista > .ta-prod { grid-template-columns: 76px 1fr auto; grid-template-rows: auto; align-items: center; border-radius: 0; border: 0; border-bottom: 1px solid var(--linea); box-shadow: none; background: transparent; padding: 12px 4px; }
.ta-v-lista > .ta-prod .ta-prod-foto { width: 76px; border-radius: 12px; }
.ta-v-lista > .ta-prod .ta-emoji { font-size: 2rem; }
.ta-v-lista > .ta-prod .ta-agregar { width: 44px; height: 44px; padding: 0; font-size: 1.4rem; }
.ta-v-lista > .ta-prod .ta-paso { width: 124px; }

/* Información y pie */
.ta-info { display: grid; gap: 14px; padding: 24px; border-radius: 24px; background: var(--tarjeta); border: 1px solid var(--linea); }
.ta-info h2 { margin: 0; font-size: 1.35rem; }
.ta-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ta-info-grid > div { display: grid; gap: 2px; }
.ta-info-grid span { font-size: 1.4rem; }
.ta-info-grid small { color: var(--tinta-2); }
.ta-info-grid a { color: var(--ta-acento); font-weight: 800; text-decoration: none; }
.ta-pie { max-width: 1180px; margin: 0 auto; padding: 20px 16px 24px; display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--tinta-2); border-top: 1px solid var(--linea); }
.ta-pie > div { display: grid; gap: 8px; justify-items: center; }
.ta-pie nav { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; }
.ta-pie a { color: var(--tinta); text-decoration: none; font-weight: 700; }
.ta-credito { color: var(--tinta-3); font-size: .78rem; }
.ta-whats { position: fixed; right: 16px; bottom: 96px; z-index: 19; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; font-size: 1.6rem; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }

/* ---------- Plantilla Barrio: crema, letras clásicas, etiquetas de precio ---------- */
.ta-barrio .ta-cab { background: var(--ta-acento); border-bottom: 0; }
.ta-barrio .ta-logo-txt { color: var(--ta-sobre); }
.ta-barrio .ta-ham { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.ta-barrio .ta-ham span { background: var(--ta-sobre); }
.ta-barrio .ta-carro { background: var(--ta-sobre); color: var(--ta-acento); }
.ta-barrio .ta-carro b { background: var(--ta-acento); color: var(--ta-sobre); }
.ta-barrio .ta-buscar { background: rgba(255, 255, 255, .92); }
.ta-barrio .ta-anuncio { background: #2A2116; color: #FBF5EA; }
.ta-barrio .ta-portada { background: #2F3A32; color: #F7F1E3; border-radius: 10px; border: 10px solid #8A6A43; box-shadow: inset 0 0 60px rgba(0, 0, 0, .35); }
.ta-barrio .ta-portada p { color: rgba(247, 241, 227, .8); }
.ta-barrio .ta-portada h1 { font-style: italic; }
.ta-barrio .ta-prod { border-style: dashed; border-width: 1.5px; box-shadow: none; }
.ta-barrio .ta-precio span { display: inline-block; background: #FFD84D; color: #2A2116; padding: 2px 10px; border-radius: 4px; transform: rotate(-2deg); }
.ta-barrio .ta-cat-ico { border-radius: 14px; background: #F2E6CF; }
.ta-barrio .ta-seccion h2 { border-bottom: 2px solid var(--linea); padding-bottom: 6px; }
/* ---------- Plantilla Minimal: blanca, lista, sin sombras ---------- */
.ta-minimal .ta-cab { border-bottom: 1px solid #ECECEC; }
.ta-minimal .ta-portada { background: #fff; border: 0; padding: 30px 0 10px; border-radius: 0; }
.ta-minimal .ta-portada.con-foto { padding: 30px; border-radius: 18px; }
.ta-minimal .ta-portada h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; }
.ta-minimal .ta-cat-ico { background: #F4F4F4; width: 54px; height: 54px; font-size: 1.5rem; }
.ta-minimal .ta-prod { box-shadow: none; }
.ta-minimal .ta-info { background: #FAFAFA; border: 0; }
.ta-minimal .ta-seccion h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 760px) {
  .ta-cab-dentro { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .ta-espacio { display: none !important; }
  .ta-buscar-cab { display: none; }
  .ta-buscar-cuerpo { display: flex; position: sticky; top: 72px; z-index: 5; box-shadow: 0 4px 14px rgba(20, 24, 40, .06); background: var(--tarjeta); border-color: var(--linea); }
  .ta-carro-txt { display: none; }
  .ta-carro { padding: 10px 14px; }
  .ta-portada { padding: 26px 20px; border-radius: 20px; }
  .ta-portada.con-foto { min-height: 230px; background-position: 78% center; }
  .ta-portada.con-foto::before { background: linear-gradient(180deg, rgba(10, 14, 20, .15) 0%, rgba(10, 14, 20, .7) 75%); }
  .ta-v-cuadricula { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ta-fila { grid-auto-columns: 46%; }
  .ta-prod { padding: 8px; }
  .ta-emoji { font-size: 2.4rem; }
  .ta-precio span { font-size: 1rem; }
}
/* Fotos de producto con fondo blanco: se funden con el fondo de la tarjeta */
.ta-prod-foto img { mix-blend-mode: multiply; object-fit: contain; padding: 6%; }
.ta-logo { height: 48px; }

/* Con la barra del carrito abajo, el pie deja espacio solo lo justo para no quedar tapado */
body:has(.barra-carro) .ta-pie { padding-bottom: 92px; }
/* Categorías con imagen (las que eligió la administración) */
.ta-cats a { width: 118px; }
.ta-cat-ico.con-img { width: 104px; height: 104px; padding: 3px; }
.ta-cat-ico img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .12)); }
@media (max-width: 760px) { .ta-cats a { width: 92px; } .ta-cat-ico.con-img { width: 82px; height: 82px; padding: 2px; } }
/* Gift card y wallet */
.ta-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ta-extra { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 24px; border-radius: 24px; text-decoration: none; color: var(--tinta); background: var(--tarjeta); border: 1px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; }
.ta-extra-gift { background: linear-gradient(135deg, color-mix(in srgb, var(--ta-acento) 14%, #fff), #fff 70%); }
.ta-extra-wallet { background: linear-gradient(135deg, #EEF2FF, #fff 70%); }
.ta-extra-txt { display: grid; gap: 8px; justify-items: start; }
.ta-extra-txt small { font-weight: 800; letter-spacing: .12em; color: var(--ta-acento); }
.ta-extra-txt h2 { margin: 0; font-size: 1.35rem; }
.ta-extra-txt p { margin: 0; color: var(--tinta-2); font-size: .92rem; }
.ta-extra-tarjeta { width: 190px; transform: rotate(-6deg); }
.ta-extra-tarjeta > * { max-width: 100%; }
.ta-extra-icono { font-size: 4.2rem; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .15)); }
@media (max-width: 760px) { .ta-extra { grid-template-columns: 1fr; } .ta-extra-tarjeta { width: 200px; justify-self: center; } .ta-extra-icono { display: none; } }