/* cart.css — Ficha (modal), carrito lateral, contador flotante */

/* ── Overlays genéricos ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .5);
  backdrop-filter: blur(2px);
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion), visibility var(--transicion);
  z-index: 100;
}
.overlay.is-open { opacity: 1; visibility: visible; }
.overlay:not(.overlay-derecha) { align-items: center; justify-content: center; padding: var(--sp-3); }
.overlay-derecha { justify-content: flex-end; }

.modal-cerrar {
  border: none; background: transparent;
  font-size: 1.8rem; line-height: 1; color: var(--gris);
  transition: var(--transicion);
}
.modal-cerrar:hover { color: var(--negro); }

/* ── Ficha del producto ── */
.detalle-modal {
  position: relative; background: var(--blanco); border-radius: var(--radio);
  max-width: 900px; width: 100%; max-height: 90vh; overflow: auto;
  transform: translateY(16px); transition: transform var(--transicion);
}
.overlay.is-open .detalle-modal { transform: none; }
.detalle-modal .modal-cerrar { position: absolute; top: var(--sp-2); right: var(--sp-3); z-index: 2; }

.detalle-contenido { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: var(--sp-4); }
.detalle-img-wrap { aspect-ratio: 4 / 5; background: var(--crema-2); border-radius: var(--radio); overflow: hidden; }
.detalle-img { width: 100%; height: 100%; object-fit: cover; }
.detalle-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.thumb { width: 56px; height: 70px; border: 1px solid var(--gris-linea); border-radius: var(--radio); overflow: hidden; padding: 0; background: none; transition: var(--transicion); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--oro); }

.detalle-ref { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.detalle-nombre { font-family: var(--font-titulo); font-size: var(--fs-xl); font-weight: 500; margin-top: var(--sp-1); }
.detalle-precio { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); }
.detalle-precio .precio-actual { font-size: var(--fs-xl); font-weight: 600; }
.detalle-precio-nota { font-size: var(--fs-sm); color: var(--gris); margin-top: var(--sp-1); }
.detalle-desc { margin-top: var(--sp-3); color: var(--carbon); font-size: var(--fs-sm); line-height: 1.6; }

.detalle-campo { margin-top: var(--sp-4); }
.detalle-label { display: block; font-size: var(--fs-sm); letter-spacing: .04em; margin-bottom: var(--sp-2); }
.detalle-swatches { display: flex; gap: var(--sp-2); }
.detalle-swatches .swatch { width: 26px; height: 26px; }

.detalle-tallas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.talla-btn { min-width: 44px; padding: var(--sp-2); border: 1px solid var(--gris-linea); border-radius: var(--radio); background: var(--blanco); font-size: var(--fs-sm); transition: var(--transicion); }
.talla-btn:hover:not(.is-agotada) { border-color: var(--negro); }
.talla-btn.is-active { background: var(--negro); color: var(--crema); border-color: var(--negro); }
.talla-btn.is-agotada { color: var(--gris-linea); cursor: not-allowed; text-decoration: line-through; }
.detalle-aviso { display: block; color: var(--alerta); font-size: var(--fs-xs); margin-top: var(--sp-2); }

/* ── Stepper (cantidad) ── */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--gris-linea); border-radius: var(--radio); }
.stepper-btn { width: 36px; height: 36px; border: none; background: transparent; font-size: 1.1rem; color: var(--carbon); }
.stepper-btn:hover { color: var(--oro); }
.stepper-val { min-width: 32px; text-align: center; font-weight: 500; }
.stepper-sm .stepper-btn { width: 28px; height: 28px; }

.detalle-cantidad-fila { display: flex; flex-direction: column; }
.btn-agregar { margin-top: var(--sp-4); width: 100%; padding: var(--sp-3); }

.detalle-meta { list-style: none; padding: 0; margin-top: var(--sp-4); border-top: 1px solid var(--gris-linea); }
.detalle-meta li { display: flex; justify-content: space-between; padding: var(--sp-2) 0; font-size: var(--fs-sm); }
.detalle-meta li span { color: var(--gris); }

/* ── Panel del carrito ── */
.cart-panel { background: var(--crema); width: min(420px, 100%); height: 100%; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--transicion); box-shadow: -8px 0 40px rgba(10, 10, 10, .15); }
.overlay.is-open .cart-panel { transform: none; }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--negro); color: var(--crema); }
.cart-titulo { font-family: var(--font-titulo); font-size: var(--fs-lg); font-weight: 500; }
.cart-titulo #cart-titulo-count { color: var(--oro); }
.cart-header .modal-cerrar { color: var(--crema); }
.cart-cuerpo { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4); }
.cart-vacio { text-align: center; color: var(--gris); padding-block: var(--sp-6); }
.cart-vacio-hint { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.cart-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--gris-linea); }
.ci-media { width: 64px; height: 80px; border-radius: var(--radio); overflow: hidden; background: var(--crema-2); }
.ci-media img { width: 100%; height: 100%; object-fit: cover; }
.ci-nombre { font-family: var(--font-titulo); font-size: var(--fs-md); }
.ci-meta { font-size: var(--fs-xs); color: var(--gris); letter-spacing: .04em; }
.ci-precio-u { font-size: var(--fs-sm); color: var(--carbon); margin-top: var(--sp-1); }
.ci-fila { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.ci-subtotal { font-weight: 600; }
.ci-quitar { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-2); padding: 0; border: none; background: none; font-family: var(--font-texto); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--gris); transition: var(--transicion); }
.ci-quitar:hover { color: var(--alerta); }

/* ── Barra de progreso a mayorista ── */
.price-progress { margin-top: var(--sp-4); padding: var(--sp-3); background: var(--blanco); border-radius: var(--radio); }
.pp-barra { position: relative; height: 8px; background: var(--gris-linea); border-radius: 99px; }
.pp-relleno { height: 100%; border-radius: 99px; background: var(--oro); transition: width var(--transicion); }
.nivel-mayorista .pp-relleno { background: var(--exito); }
.pp-hito { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--carbon); opacity: .4; }
.pp-escala { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--gris); margin-top: var(--sp-2); }
.pp-escala-min { color: var(--carbon); }
.pp-mensaje { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.nivel-mayorista .pp-mensaje { color: var(--exito); }

/* ── Totales y acciones ── */
.cart-pie { border-top: 1px solid var(--gris-linea); padding: var(--sp-3) var(--sp-4); background: var(--crema); }
.cart-totales { margin-bottom: var(--sp-3); }
.ct-fila { display: flex; justify-content: space-between; padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.ct-fila.ct-total { font-size: var(--fs-lg); font-weight: 600; border-top: 1px solid var(--gris-linea); margin-top: var(--sp-2); padding-top: var(--sp-2); }
.ct-nivel { font-weight: 500; }
.ct-ahorro { color: var(--exito); }
.cart-acciones { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); }
.btn-block { width: 100%; }

/* ── Contador flotante ── */
.fab-carrito { position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 90; display: none; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--negro); color: var(--crema); border: 1px solid var(--oro); border-radius: 99px; box-shadow: var(--sombra-hover); transition: var(--transicion); }
.fab-carrito.is-visible { display: flex; animation: fabIn .3s var(--transicion); }
.fab-carrito:hover { background: var(--carbon); }
.fab-icono { font-size: 1.2rem; }
.fab-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.fab-texto b { font-size: var(--fs-sm); }
.fab-texto small { font-size: var(--fs-xs); color: var(--oro-soft); }
@keyframes fabIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Responsive ── */
@media (max-width: 720px) {
  .detalle-contenido { grid-template-columns: 1fr; }
  .cart-panel { width: 100%; }
}

/* ── Checkout ── */
.checkout-modal { position: relative; background: var(--blanco); border-radius: var(--radio); max-width: 460px; width: 100%; max-height: 90vh; overflow: auto; transform: translateY(16px); transition: transform var(--transicion); }
.overlay.is-open .checkout-modal { transform: none; }
.checkout-modal .modal-cerrar { position: absolute; top: var(--sp-2); right: var(--sp-3); z-index: 2; }
.checkout-contenido { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.checkout-titulo { font-family: var(--font-titulo); font-size: var(--fs-xl); font-weight: 500; }
.checkout-sub { color: var(--gris); font-size: var(--fs-sm); margin-top: var(--sp-1); margin-bottom: var(--sp-4); }

.checkout-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-size: var(--fs-sm); letter-spacing: .03em; }
.campo b { color: var(--oro); }
.campo input, .campo textarea {
  font-family: var(--font-texto); font-size: var(--fs-md);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gris-linea); border-radius: var(--radio);
  background: var(--crema); color: var(--negro);
  transition: var(--transicion); resize: vertical;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--oro); background: var(--blanco); }
.checkout-error { color: var(--alerta); font-size: var(--fs-sm); min-height: 1em; }

.checkout-resumen { margin: var(--sp-4) 0; padding: var(--sp-3); background: var(--crema); border-radius: var(--radio); }
.cr-fila { display: flex; justify-content: space-between; padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.cr-fila.cr-total { font-size: var(--fs-lg); font-weight: 600; border-top: 1px solid var(--gris-linea); margin-top: var(--sp-1); padding-top: var(--sp-2); }
.cr-ahorro { color: var(--exito); }

.btn-wa { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); }