/* Tienda — HU-CAR-001.
 *
 * ## UX-R2.8d — lo que este archivo estaba haciendo
 *
 * Tres cosas, todas invisibles en una captura y todas reales:
 *
 * 1. **Un selector `*` global.** El archivo abria con
 *
 *        * { margin: 0; padding: 0; box-sizing: border-box;
 *            font-family: 'Segoe UI', Tahoma, …; }
 *
 *    en una hoja de UNA vista. Eso pisa la tipografia del sistema de diseno
 *    en toda la pagina —incluida la cabecera compartida— y deja la Tienda
 *    con otra letra que el resto de la aplicacion. `base.css` ya hace el
 *    reset, y lo hace con las fichas.
 *
 * 2. **`body { background: #e6ecf3; color: #333 }`.** Dos colores inventados
 *    encima de `--fondo` y `--texto`. Ademas rompia el modo de alto
 *    contraste: `tokens.css` redefine las fichas bajo
 *    `prefers-contrast: more`, pero un hex escrito a mano no cambia. Es el
 *    mismo defecto que PR-UX-5 encontro en otros cuatro archivos.
 *
 * 3. **Sesenta y siete lineas para una barra que ya no existe.** `.navbar`,
 *    `.nav-left`, `.search-bar` venian de la maqueta original; la pagina
 *    monta `montarCabecera()` desde P3.1. Eran clases fantasma que el
 *    guardian de UX-R2.4 no vio porque solo mira el HTML.
 *
 * Lo que queda son las clases propias de la vitrina y del carrito, sobre
 * fichas del kit. Los valores de la paleta no se tocan: se usan.
 */

/* --- Disposicion ----------------------------------------------------- */

.main-container {
  display: flex;
  /* UX-R2.8d — sin `wrap`, a 375 px el documento media 670 px y el carrito
     se salia por la derecha (laboratorio visual, vista `tienda`). Ahora el
     carrito baja debajo de la vitrina en vez de empujar la pagina. */
  flex-wrap: wrap;
  gap: var(--e-6);
  padding: var(--e-8);
  max-width: 1400px;
  margin: 0 auto;
}

/* --- Productos -------------------------------------------------------- */

.store-section {
  flex: 2 1 420px;
  /* Sin esto, un `flex` no baja de su contenido y la rejilla desborda. */
  min-width: 0;
}

.store-header {
  margin-bottom: var(--e-6);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e-5);
}

/* El motivo por el que «Pagar» esta apagado, junto al boton. */
.aviso-pago {
  margin-top: var(--e-2);
  font-size: var(--t-meta-tam);
  color: var(--texto-2);
}

/* --- UXC-4: cabecera, buscar y filtrar -------------------------------- */

.store-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
}

.store-header__textos {
  display: grid;
  gap: var(--e-1);
  min-width: 0;
  flex: 1 1 320px;
}

.store-header__textos p {
  margin: 0;
}

.store-header__carrito {
  display: grid;
  justify-items: end;
  gap: var(--e-1);
}

/* La insignia: icono + unidades. Superficie clara sobre la atmosfera, como
   las tarjetas, para que el numero se lea. */
.insignia-carrito {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--boton-mediano);
  padding: 0 var(--e-4);
  border: 1px solid var(--borde-int);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-weight: var(--t-cuerpo-peso-enfasis);
  cursor: pointer;
}

.insignia-carrito:hover {
  border-color: var(--primaria);
}

.insignia-carrito:focus-visible {
  outline: var(--foco-grosor) solid var(--interaccion-foco-anillo);
  outline-offset: 2px;
}

.insignia-carrito .icono {
  width: 20px;
  height: 20px;
  color: var(--primaria);
}

.insignia-carrito__texto {
  white-space: nowrap;
}

.insignia-carrito__cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--e-1);
  border-radius: var(--radio-pildora);
  background: var(--primaria-relleno);
  color: var(--texto-sobre-color);
  font-size: var(--t-meta-tam);
  font-variant-numeric: var(--cifras-tabulares);
}

.insignia-carrito[aria-expanded='false'] {
  border-color: var(--primaria);
}

.insignia-carrito__aviso {
  min-height: 1.2em;
  margin: 0;
  font-size: var(--t-meta-tam);
  font-weight: var(--t-cuerpo-peso-enfasis);
  color: var(--texto-sobre-color);
}

.filtros-tienda {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-5) 0 var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
}

.filtros-tienda .campo {
  margin: 0;
  min-width: 0;
}

.filtros-tienda__busqueda {
  flex: 2 1 240px;
}

/* «Filtros y orden»: abierto en escritorio, recogido en el teléfono. */
.filtros-tienda__mas {
  min-width: 0;
}

.filtros-tienda__resumen {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--boton-pequeno);
  width: fit-content;
  font-weight: var(--t-cuerpo-peso-enfasis);
  font-size: var(--t-meta-tam);
  cursor: pointer;
}

.filtros-tienda__resumen:focus-visible {
  outline: var(--foco-grosor) solid var(--interaccion-foco-anillo);
  outline-offset: 2px;
}

.filtros-tienda__campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-3) var(--e-4);
  margin-top: var(--e-2);
}

.filtros-tienda__tipo {
  flex: 1 1 150px;
}

.filtros-tienda__orden {
  flex: 1 1 200px;
}

.filtros-tienda__precio {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filtros-tienda__precio legend {
  float: left;
  width: 100%;
  margin-bottom: var(--e-1);
}

.filtros-tienda__precio .campo__control {
  width: 7.5rem;
}

.filtros-tienda__guion {
  color: var(--texto-2);
}

/* `tema-cuentas.css` pone todo `label` en columna y separa con margen los
   hijos directos de un formulario: la casilla vuelve a su fila. */
.filtros-tienda .filtros-tienda__promocion,
.filtros-tienda .filtros-tienda__deseos {
  flex-direction: row;
  align-items: center;
  min-height: var(--campo-alto);
  margin-bottom: 0;
}

.filtros-tienda__limpiar {
  margin-left: auto;
}

.filtros-tienda .filtros-tienda__limpiar {
  align-self: flex-end;
}

.resultado-tienda {
  min-height: 1.4em;
  margin: 0 0 var(--e-3);
  font-size: var(--t-meta-tam);
}

.paginacion-tienda {
  margin-top: var(--e-5);
}

/* --- Carrito ---------------------------------------------------------- */

.cart-section {
  /* `flex-basis` en vez de `min-width: 350px`: a 375 px de pantalla aquel
     minimo obligaba al contenedor a medir mas que el viewport. */
  flex: 1 1 320px;
  min-width: 0;
}

.cart-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-6);
}

.cart-items-container {
  margin: var(--e-5) 0;
  min-height: 100px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}

.item-info {
  min-width: 0;
}

.item-derecha {
  display: grid;
  justify-items: end;
  gap: var(--e-2);
}

.item-acciones {
  display: flex;
  gap: var(--e-1);
}

.item-unitario {
  font-size: var(--t-meta-tam);
  color: var(--texto-2);
}

.carrito-vacio__siguiente {
  margin-top: var(--e-1);
}

/* UXC-4 — cabecera del panel con «Minimizar». */
.cart-card__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.cart-card__cabecera h2 {
  margin: 0;
  font-size: var(--t-subtitulo-tam);
}

.cart-card__cabecera h2:focus-visible {
  outline: var(--foco-grosor) solid var(--interaccion-foco-anillo);
  outline-offset: 2px;
}

/* Minimizado: la vitrina ocupa todo el ancho. */
.main-container[data-carrito='minimizado'] .store-section {
  flex-basis: 100%;
}

.item-info h5 {
  font-size: var(--t-cuerpo-tam);
}

.item-info span {
  font-size: var(--t-meta-tam);
  color: var(--texto-3);
}

.item-price {
  font-variant-numeric: var(--cifras-tabulares);
}

/* HU-CAR-00x — quitar un item ya agregado. Mismo tratamiento tipografico que
   `.btn-add`, pero en el tono de borde: no es la accion principal de la fila
   y no debe competir con «Pagar». */
.item-acciones {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.btn-quitar {
  min-height: var(--boton-pequeno);
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background-color: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: var(--t-meta-tam);
  cursor: pointer;
}

.btn-quitar:hover {
  border-color: var(--error);
  color: var(--error);
}

.btn-quitar:focus-visible {
  outline: var(--foco-grosor) solid var(--interaccion-foco-anillo);
  outline-offset: 2px;
}

.btn-quitar[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cart-summary {
  margin-bottom: var(--e-5);
  padding-top: var(--e-4);
  border-top: 2px solid var(--borde);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
  font-size: var(--t-cuerpo-tam);
}

.total-row {
  font-size: 1.2rem;
  font-weight: var(--t-cuerpo-peso-enfasis);
}

.total-price {
  /* El total a pagar no es un error: va en la primaria, como cualquier
     cifra que manda (UX-GAME-5). */
  color: var(--primaria);
  font-variant-numeric: var(--cifras-tabulares);
}

.warning-box {
  margin-bottom: var(--e-5);
  padding: var(--e-3);
  border: 1px solid var(--error);
  border-radius: var(--radio-chico);
  background-color: var(--error-insignia, var(--superficie));
  color: var(--error);
  font-size: var(--t-meta-tam);
}

.hidden {
  display: none;
}

/* El azul claro que traia del Figma (#8ea2e8) deja el texto blanco en 2,48:1,
   muy por debajo del 4,5:1 de WCAG AA — y es el boton que cierra la compra. Lo
   midio el laboratorio visual (UX-R2.1).

   No se inventa un color: se usa `--primaria-relleno`, que el kit documenta en
   8,54:1 con blanco y que ya es el azul de los botones primarios de toda la
   aplicacion. El claro de antes pasa a ser el estado deshabilitado, que es lo
   que en realidad estaba comunicando: un boton apagado hasta que hay carrito.
   Los deshabilitados quedan fuera de 1.4.3, asi que ahi si vale. */
.btn-pagar {
  width: 100%;
  min-height: var(--boton-grande);
  padding: var(--e-4);
  border: none;
  border-radius: var(--radio-chico);
  background-color: var(--primaria-relleno);
  color: var(--texto-sobre-color);
  font: inherit;
  font-size: 1.1rem;
  font-weight: var(--t-cuerpo-peso-enfasis);
  cursor: pointer;
}

.btn-pagar[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-pagar:not([disabled]):hover {
  background-color: var(--interaccion-foco-anillo);
}

.btn-pagar:focus-visible {
  outline: var(--foco-grosor) solid var(--interaccion-foco-anillo);
  outline-offset: 2px;
}

/* --- B5: moneda, lista de deseos, cantidad, pagar y mis compras ------- */

/* El selector va sobre la atmosfera, junto a la insignia: la etiqueta y la
   nota usan la tinta contextual; el control, la superficie clara del kit. */
.selector-moneda {
  flex: 0 1 220px;
  min-width: 180px;
}

.selector-moneda__nota {
  min-height: 1.2em;
  margin: 0;
  font-size: var(--t-meta-tam);
  color: var(--tinta-2);
}

/* Lo que paso al pulsar un corazon. Sobre la atmosfera: el tono se dice con
   el peso, no con un color que ahi no tendria contraste. */
.aviso-deseos {
  min-height: 1.2em;
  margin: 0 0 var(--e-2);
  font-size: var(--t-meta-tam);
}

.aviso-deseos[data-tono='advertencia'] {
  font-weight: var(--t-cuerpo-peso-enfasis);
}

/* La imagen del producto en su linea (§7.5: imagen, nombre, precio unitario,
   cantidad y subtotal). */
.item-imagen {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radio-chico);
}

.cart-item .item-info {
  flex: 1 1 auto;
}

/* Una linea que ya no se puede pagar: franja lateral y el motivo escrito. */
.cart-item[data-disponible='no'] {
  padding-left: var(--e-2);
  border-left: 3px solid var(--advertencia);
}

.item-aviso {
  margin: var(--e-1) 0 0;
  font-size: var(--t-meta-tam);
  font-weight: var(--t-cuerpo-peso-enfasis);
  color: var(--advertencia);
}

.mis-compras {
  width: 100%;
  margin-top: var(--e-3);
}

/* El resumen y el formulario de pago, en el dialogo del kit. */
.dialogo--pago,
.dialogo--compras {
  max-height: calc(100vh - var(--e-8));
  overflow-y: auto;
}

.pago {
  display: grid;
  gap: var(--e-5);
}

.pago__subtitulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-cuerpo-tam);
  font-weight: var(--t-cuerpo-peso-enfasis);
}

.pago__lineas {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pago__linea {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
}

.pago__importe {
  white-space: nowrap;
  font-variant-numeric: var(--cifras-tabulares);
}

.pago__total {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  margin: var(--e-3) 0 0;
  padding-top: var(--e-2);
  border-top: 1px solid var(--borde);
  font-weight: var(--t-cuerpo-peso-enfasis);
}

.pago__formulario {
  display: grid;
  gap: var(--e-3);
}

/* D-44 — «¿Cómo quieres pagar?»: dos opciones como tarjetas, igual que la
   duración de una subasta en publicar-subasta.css. */
.pago__formas {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.pago__forma {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--e-2);
  align-items: center;
  padding: var(--e-3);
  border: 1px solid var(--borde-int);
  border-radius: var(--radio);
  cursor: pointer;
}

.pago__forma:has(input:checked) {
  border: 2px solid var(--primaria);
  background: var(--info-insignia);
}

.pago__forma input[type='radio'] {
  accent-color: var(--primaria);
  width: 20px;
  height: 20px;
}

.pago__forma-nombre {
  font-weight: var(--t-cuerpo-peso-enfasis);
}

.pago__forma-pista {
  grid-column: 2;
  font-size: var(--t-meta-tam);
  color: var(--texto-2);
}

.pago__zona {
  display: grid;
  gap: var(--e-3);
}

/* `display: grid` le gana al `hidden` del navegador: sin esto la zona de la
   otra forma de pago seguiría a la vista. */
.pago__zona[hidden],
.pago__resumen[hidden] {
  display: none;
}

/* Saldo actual, precio y saldo después: las cifras del servidor. */
.pago__cuentas {
  display: grid;
  gap: var(--e-1);
  margin: var(--e-3) 0 0;
  padding-top: var(--e-2);
  border-top: 1px solid var(--borde);
}

.pago__cuenta {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
}

.pago__cuenta dt,
.pago__cuenta dd {
  margin: 0;
}

.pago__cuenta dd {
  font-weight: var(--t-cuerpo-peso-enfasis);
  font-variant-numeric: var(--cifras-tabulares);
}

.pago__nota,
.pago__estado {
  margin: 0;
  font-size: var(--t-meta-tam);
  color: var(--texto-2);
}

.pago__estado {
  min-height: 1.2em;
}

.pago__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}

.pago__alerta {
  padding: var(--e-3);
  border: 1px solid var(--advertencia);
  border-radius: var(--radio-chico);
  background: var(--advertencia-insignia);
  color: var(--texto);
}

.pago__alerta p {
  margin: 0;
}

.pago__alerta-titulo {
  font-weight: var(--t-cuerpo-peso-enfasis);
}

.pago__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--e-3);
}

.pago__alerta .pago__acciones {
  margin-top: var(--e-2);
}

.pago__resultado {
  display: grid;
  gap: var(--e-3);
}

.pago__resultado p {
  margin: 0;
}

.pago__resultado-titulo {
  margin: 0;
  font-size: 1.15rem;
}

/* Mis compras. */
.compras__lista {
  display: grid;
  gap: var(--e-3);
}

.compra {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}

.compra__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}

.compra__fecha,
.compra__total,
.compra__medio,
.compra__motivo {
  margin: 0;
}

.compra__lineas {
  margin: 0;
  padding-left: var(--e-5);
}

.compra__total {
  font-weight: var(--t-cuerpo-peso-enfasis);
}

.compra__medio {
  font-size: var(--t-meta-tam);
  color: var(--texto-2);
}

.compra__motivo {
  color: var(--advertencia);
}

/* --- Pantallas estrechas ---------------------------------------------- */

@media (max-width: 599px) {
  .pago__fila {
    grid-template-columns: 1fr;
  }

  .selector-moneda {
    flex-basis: 100%;
  }

  .main-container {
    padding: var(--e-4);
    gap: var(--e-5);
  }

  .store-header__carrito {
    justify-items: start;
  }

  .filtros-tienda {
    padding: var(--e-3);
  }

  /* Desde y hasta en la misma fila, repartida. */
  .filtros-tienda__precio {
    width: 100%;
    flex-wrap: nowrap;
  }

  .filtros-tienda__precio .campo__control {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .filtros-tienda__tipo,
  .filtros-tienda__orden {
    flex-basis: 100%;
  }

  .filtros-tienda__resumen {
    min-height: var(--objetivo-tactil);
  }

  .item-acciones .boton,
  .insignia-carrito,
  .filtros-tienda__limpiar,
  #minimizar-carrito {
    min-height: var(--objetivo-tactil);
  }

  .item-acciones .boton {
    min-width: var(--objetivo-tactil);
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .cart-card {
    padding: var(--e-4);
  }
}

/* =======================================================================
   Superficies claras de esta vista — UX-GAME-1
   Devuelven la tinta a oscuro sobre la atmosfera del Nexo (ver «Tinta
   contextual» en base.css). Son variables de contexto que apuntan a tokens,
   no una copia de la paleta: componen con el alto contraste.
   ======================================================================= */
.cart-card,
.warning-box,
.filtros-tienda {
  --tinta: var(--texto);
  --tinta-2: var(--texto-2);
  --tinta-3: var(--texto-3);
  --tinta-enlace: var(--primaria);
  --tinta-enlace-hover: var(--primaria-relleno);
  color: var(--texto);
}