/* ===========================================================================
   tienda.css — TIENDA-PUBLICA-002 (2026-09-11) · TIENDA-PRO-001 (2026-09-14).
   Listado, ficha y carrito. Se apoya en los tokens del sitio (tokens-base /
   tokens-wscover / sistema.css): aquí NO se define ni un color de marca
   nuevo, solo la disposición de la tienda.

   TIENDA-PRO-001 (Florin): «que la web siga la misma configuración que
   cualquier tienda online, fácil de usar y comprar». Lo que se ve aquí es lo
   que se ve en cualquier tienda: rejilla de tarjetas con foto, precio y botón;
   ficha en dos columnas con galería, opciones, cantidad y botón grande;
   carrito con foto, cantidad ± y resumen a la derecha.
   =========================================================================== */

:root {
  /* Valores LITERALES a propósito (copiados de tokens-base / tokens-wscover):
     en /carrito/ el bundle React carga además publico.css, que redefine
     --gris/--linea/--fondo al tema OSCURO del configurador. Si estos tokens
     dependieran de aquellos, el carrito saldría con líneas y grises del tema
     oscuro sobre fondo claro (medido el 14-09: fondo rgb(11,20,28)). */
  --tienda-fondo: #f6f9fb;
  --tienda-blanco: #ffffff;
  --tienda-linea: #e3e8ef;
  --tienda-texto: #10222b;
  --tienda-gris: #5b6675;
  --tienda-marino: #125268;
  --tienda-marca: #1cb3e3;
  --tienda-ok: #1f8a4c;
  --tienda-error: #b42318;
  --tienda-radio: 14px;
}

body.ws-tienda {
  background: var(--tienda-fondo); color: var(--tienda-texto);
  /* Y los alias del configurador (publico.css) vuelven al tema claro dentro
     de la tienda, para que cualquier componente compartido que los lea
     (botones, avisos, inputs de ui.css) no pinte oscuro sobre claro. */
  --tinta: var(--tienda-texto); --texto: var(--tienda-texto);
  --gris: var(--tienda-gris); --linea: var(--tienda-linea);
  --fondo: var(--tienda-fondo); --blanco: var(--tienda-blanco);
  --marino: var(--tienda-marino); --marca: var(--tienda-marca);
}

/* La cabecera del sitio es absoluta y mide 73 px: todo lo que va al principio
   del <main> de la tienda tiene que arrancar por debajo. */
.ws-tienda main > :first-child { padding-top: clamp(84px, 9vw, 112px) !important; }

/* ── Cabecera: carrito con contador ─────────────────────────────────────── */
.tienda-nav-carrito a { font-weight: 700; white-space: nowrap; }
/* CARRITO-MOVIL-001: en el móvil el resto del menú se oculta y la hamburguesa
   de la tienda no abre nada, así que este enlace es el ÚNICO camino al
   carrito. Se le da sitio propio a la izquierda de la hamburguesa para que no
   se monte con ella ni con el logo. */
@media (max-width: 920px) {
  .tienda-nav-carrito { display: inline-block !important; margin-left: auto; padding-right: 8px; }
  .tienda-nav-carrito a { font-size: 15px; }
  .ws-tienda header.sitio .nav { gap: 6px; }
}
[data-carrito-contador] {
  display: inline-block; min-width: 1.4em; padding: 1px 6px; margin-left: 4px;
  border-radius: 999px; background: var(--tienda-marca); color: #fff;
  font-size: 12px; font-weight: 700; text-align: center; line-height: 1.4;
}

/* ── Botones de la tienda (propios, sin depender del CSS del configurador) ── */
.tienda-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; border: 2px solid var(--tienda-marca);
  background: var(--tienda-marca); color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tienda-btn:hover, .tienda-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(28, 179, 227, .28); }
.tienda-btn--secundario { background: transparent; color: var(--tienda-marino); border-color: var(--tienda-marino); }
.tienda-btn--secundario:hover { box-shadow: none; background: rgba(18, 82, 104, .06); }
.tienda-btn--grande { padding: 15px 26px; font-size: 17px; }
.tienda-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Listado ────────────────────────────────────────────────────────────── */
.tienda-intro { max-width: 1100px; margin: 0 auto; padding: 32px 20px 8px; }
.ws-tienda .tienda-intro h1 { margin: 0 0 8px; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; }
.tienda-intro p { margin: 0; color: var(--tienda-gris); max-width: 62ch; }
.tienda-familias-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tienda-familias-nav a {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--tienda-linea);
  background: var(--tienda-blanco); color: var(--tienda-marino); font-size: 14px; font-weight: 600; text-decoration: none;
}
.tienda-familias-nav a:hover { border-color: var(--tienda-marca); }

.tienda-familia { max-width: 1100px; margin: 0 auto; padding: 20px; }
.ws-product section.tienda-familia:not(.hero):not(.problema):not(.cta) { padding-block: 16px 20px; }
.ws-product section.tienda-intro:not(.hero):not(.problema):not(.cta) { padding-block: clamp(84px, 9vw, 112px) 8px; }
.ws-tienda .tienda-familia h2 {
  margin: 0 0 14px; font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; letter-spacing: 0;
  padding-bottom: 8px; border-bottom: 1px solid var(--tienda-linea);
}
.ws-tienda .tienda-familia h2 small { font-size: 13px; color: var(--tienda-gris); font-weight: 600; margin-left: 6px; }

.tienda-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

.tienda-card {
  display: flex; flex-direction: column; background: var(--tienda-blanco);
  border: 1px solid var(--tienda-linea); border-radius: var(--tienda-radio); overflow: hidden;
  box-shadow: 0 2px 8px rgba(12, 84, 96, .06); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.tienda-card:hover { box-shadow: 0 10px 26px rgba(12, 84, 96, .14); transform: translateY(-2px); border-color: var(--tienda-marca); }
.tienda-card-foto { display: block; background: #eef2f5; }
.tienda-card-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tienda-card-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.ws-tienda .tienda-card h3 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.tienda-card h3 a { color: inherit; text-decoration: none; }
.tienda-card p { margin: 0; font-size: 13.5px; color: var(--tienda-gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tienda-card .tienda-precio { margin: auto 0 4px; }
.tienda-card .tienda-btn { width: 100%; padding: 10px 14px; font-size: 14.5px; }

.tienda-sinfoto {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #eef2f5, #eef2f5 10px, #e6ecf1 10px, #e6ecf1 20px);
}

.tienda-precio { font-size: 17px; color: var(--tienda-marino); }
.tienda-precio strong { font-size: 19px; }
.tienda-precio small { font-weight: 500; font-size: 12px; color: var(--tienda-gris); }
.tienda-desde { font-size: 12.5px; color: var(--tienda-gris); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tienda-precio--consultar { color: var(--tienda-gris); font-style: italic; }

.tienda-confianza {
  max-width: 1100px; margin: 8px auto 0; padding: 20px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
}
.ws-product section.tienda-confianza:not(.hero):not(.problema):not(.cta) { padding-block: 8px 40px; }
.tienda-confianza div { background: var(--tienda-blanco); border: 1px solid var(--tienda-linea); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.tienda-confianza strong { font-size: 15px; color: var(--tienda-marino); }
.tienda-confianza span { font-size: 13.5px; color: var(--tienda-gris); }

/* ── Ficha ──────────────────────────────────────────────────────────────── */
.tienda-migas { max-width: 1100px; margin: 0 auto; padding: 20px 20px 0; font-size: 13.5px; color: var(--tienda-gris); }
.ws-product nav.tienda-migas { padding-block: clamp(84px, 9vw, 112px) 0; }
.tienda-migas a { color: inherit; }

.tienda-ficha {
  max-width: 1100px; margin: 0 auto; padding: 16px 20px 32px; display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(280px, 1fr); gap: 32px; align-items: start;
}
.ws-product article.tienda-ficha { padding-block: 16px 32px; }
@media (max-width: 760px) { .tienda-ficha { grid-template-columns: 1fr; gap: 20px; } }

.tienda-ficha-galeria { position: sticky; top: 90px; }
@media (max-width: 760px) { .tienda-ficha-galeria { position: static; } }
.tienda-ficha-foto, .tienda-ficha-galeria .tienda-sinfoto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tienda-radio);
  background: var(--tienda-blanco); border: 1px solid var(--tienda-linea);
}
.tienda-ficha-miniaturas { display: flex; gap: 8px; margin-top: 10px; }
.tienda-miniatura { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; width: 76px; height: 57px; }
.tienda-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tienda-miniatura--activa { border-color: var(--tienda-marca); }

.ws-tienda .tienda-ficha-datos h1 { margin: 0 0 10px; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; }
.tienda-precio-grande { font-size: 30px; font-weight: 800; color: var(--tienda-marino); margin: 0 0 6px; }
.tienda-precio-grande small { font-size: 14px; font-weight: 500; color: var(--tienda-gris); }
.tienda-precio-grande .tienda-desde { font-size: 13px; }
.tienda-minimo { margin: 0 0 12px; font-size: 13.5px; color: var(--tienda-gris); }
.tienda-descripcion { margin: 8px 0 12px; line-height: 1.55; }
.tienda-caracteristicas { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.tienda-caracteristicas li { padding-left: 22px; position: relative; font-size: 14.5px; }
.tienda-caracteristicas li::before { content: "✓"; position: absolute; left: 0; color: var(--tienda-ok); font-weight: 700; }
.tienda-material { font-size: 13.5px; color: var(--tienda-gris); }

/* Bloque de compra: opciones, cantidad, precio en vivo, botón. */
.tienda-compra {
  margin: 16px 0 12px; padding: 16px; border: 1px solid var(--tienda-linea); border-radius: var(--tienda-radio);
  background: var(--tienda-blanco); display: grid; gap: 14px;
}
.tienda-opcion { display: grid; gap: 6px; }
.tienda-opcion > label { font-size: 13.5px; font-weight: 700; color: var(--tienda-marino); text-transform: uppercase; letter-spacing: .03em; }
.tienda-opcion select, .tienda-a-medida input, .tienda-stepper input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--tienda-linea); border-radius: 10px; background: #fff; color: inherit; min-height: 44px;
}
.tienda-opcion select { width: 100%; }
.tienda-a-medida { display: grid; gap: 4px; padding: 10px; background: var(--tienda-fondo); border-radius: 10px; }
.tienda-a-medida label { font-size: 14px; display: grid; gap: 4px; }
.tienda-a-medida input { width: 140px; }
.tienda-a-medida small { color: var(--tienda-gris); font-size: 12.5px; }
.tienda-opcion-aviso { margin: 0; color: var(--tienda-error); font-size: 13.5px; font-weight: 600; }
.tienda-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--tienda-linea); border-radius: 10px; overflow: hidden; width: max-content; }
.tienda-stepper button { width: 44px; border: 0; background: var(--tienda-fondo); color: var(--tienda-marino); font-size: 20px; font-weight: 700; cursor: pointer; }
.tienda-stepper button:hover { background: #e7eef3; }
.tienda-stepper input { width: 64px; text-align: center; border: 0; border-left: 1px solid var(--tienda-linea); border-right: 1px solid var(--tienda-linea); border-radius: 0; -moz-appearance: textfield; }
.tienda-stepper input::-webkit-outer-spin-button, .tienda-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tienda-precio-vivo { margin: 0; font-size: 22px; font-weight: 800; color: var(--tienda-marino); min-height: 1.2em; }
.tienda-precio-vivo:empty, .tienda-precio-vivo span:empty { display: none; }
.tienda-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tienda-entrega { margin: 14px 0 0; padding: 12px 0 0 0; list-style: none; border-top: 1px solid var(--tienda-linea); display: grid; gap: 6px; font-size: 13.5px; color: var(--tienda-gris); }
.tienda-entrega strong { color: var(--tienda-texto); }

.tienda-aviso-carrito {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: #eefaf0; border: 1px solid #bfe6c8; color: #14532d;
}
.tienda-aviso-carrito[data-tipo="error"] { background: #fef3f2; border-color: #fecdca; color: var(--tienda-error); }
.tienda-aviso-carrito a { color: inherit; font-weight: 700; }

.tienda-relacionados { max-width: 1100px; margin: 0 auto; padding: 8px 20px 40px; }
.ws-product section.tienda-relacionados:not(.hero):not(.problema):not(.cta) { padding-block: 8px 40px; }
.ws-tienda .tienda-relacionados h2 { font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; margin: 0 0 14px; letter-spacing: 0; }

/* ── Carrito (página React) ─────────────────────────────────────────────── */
.tienda-carrito { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
/* En el carrito el <main> ya lleva 32 px arriba: el hueco bajo la cabecera
   absoluta (73 px) se completa con menos que en listado/ficha. */
.ws-tienda .tienda-carrito > :first-child { padding-top: 56px !important; }
.ws-tienda .tienda-carrito h1 { margin: 0 0 18px; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; }
.carrito-vacio { padding: 32px; text-align: center; background: var(--tienda-blanco); border: 1px dashed var(--tienda-linea); border-radius: var(--tienda-radio); }
.carrito-cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .carrito-cuerpo { grid-template-columns: 1fr; } }

.carrito-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.carrito-linea {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  background: var(--tienda-blanco); border: 1px solid var(--tienda-linea); border-radius: var(--tienda-radio); padding: 12px;
}
@media (max-width: 520px) { .carrito-linea { grid-template-columns: 72px minmax(0, 1fr); } .carrito-linea-importe { grid-column: 2; justify-self: start; } }
.carrito-linea-foto { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #eef2f5; }
.carrito-linea .tienda-sinfoto { width: 96px; border-radius: 10px; }
.carrito-linea-datos { display: grid; gap: 4px; min-width: 0; }
.carrito-linea-datos a { color: var(--tienda-texto); font-weight: 700; text-decoration: none; }
.carrito-linea-variante { font-size: 13.5px; color: var(--tienda-gris); }
.carrito-linea-unitario { font-size: 13px; color: var(--tienda-gris); }
.carrito-linea-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.carrito-quitar { border: 0; background: none; color: var(--tienda-gris); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13.5px; padding: 0; }
.carrito-quitar:hover { color: var(--tienda-error); }
.carrito-linea-importe { font-weight: 800; font-size: 18px; color: var(--tienda-marino); white-space: nowrap; }
.carrito-sin-precio { font-style: italic; color: var(--tienda-gris); font-weight: 500; font-size: 14px; }

.carrito-resumen {
  position: sticky; top: 90px; background: var(--tienda-blanco); border: 1px solid var(--tienda-linea);
  border-radius: var(--tienda-radio); padding: 18px; display: grid; gap: 12px;
}
.ws-tienda .carrito-resumen h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: 0; }
.carrito-entrega { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.carrito-entrega legend { font-weight: 700; font-size: 14px; color: var(--tienda-marino); padding: 0; margin-bottom: 4px; }
.carrito-entrega label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--tienda-linea); border-radius: 10px; cursor: pointer; font-size: 14.5px; }
.carrito-entrega label:has(input:checked) { border-color: var(--tienda-marca); background: rgba(28, 179, 227, .06); }
.carrito-totales { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--tienda-linea); font-size: 14.5px; }
.carrito-totales p { margin: 0; display: flex; justify-content: space-between; gap: 12px; }
.carrito-total { font-size: 20px; font-weight: 800; color: var(--tienda-marino); padding-top: 6px; border-top: 1px solid var(--tienda-linea); }
.carrito-avisos { margin: 0; padding: 10px 12px 10px 28px; background: #fff7e6; border: 1px solid #ffe2a8; border-radius: 10px; font-size: 13.5px; }
.carrito-datos { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--tienda-linea); }
.ws-tienda .carrito-datos h2 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: 0; }
.carrito-datos label, .carrito-direccion label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--tienda-marino); }
.carrito-datos input, .carrito-datos textarea, .carrito-direccion input {
  font: inherit; font-weight: 400; color: var(--tienda-texto); padding: 10px 12px; border: 1px solid var(--tienda-linea); border-radius: 10px; background: #fff; min-height: 44px;
}
.carrito-datos textarea { min-height: 72px; resize: vertical; }
.carrito-direccion { display: grid; gap: 10px; }
.carrito-errores { margin: 0; padding: 10px 12px 10px 28px; background: #fef3f2; border: 1px solid #fecdca; border-radius: 10px; color: var(--tienda-error); font-size: 13.5px; }
.carrito-resumen .tienda-btn { width: 100%; }
.carrito-pago { margin: 0; font-size: 13px; color: var(--tienda-gris); line-height: 1.5; }
.carrito-seguir { font-size: 14px; }

/* La página del carrito monta con el CSS del configurador (tema oscuro, que
   pinta el <body>); se fuerza aquí el tema claro de la tienda para que el
   carrito sea la misma tienda que las fichas. */
html:has(body.ws-tienda--carrito), body.ws-tienda--carrito {
  background: var(--tienda-fondo) !important; color: var(--tienda-texto) !important; color-scheme: light;
}
body.ws-tienda--carrito .tienda-carrito h1, body.ws-tienda--carrito .tienda-carrito h2 { color: var(--tienda-texto); }
body.ws-tienda--carrito .tienda-carrito a { color: var(--tienda-marino); }
body.ws-tienda--carrito .tienda-carrito input, body.ws-tienda--carrito .tienda-carrito textarea, body.ws-tienda--carrito .tienda-carrito select { background: #fff; color: var(--tienda-texto); }