/*
 * ============================================================
 *  EL CHINO SPORTS — carrito.css
 *  Estilos del pseudo-carrito de pedido por WhatsApp
 *  Depende de: css/global.css
 * ============================================================
 */


/* ============================================================
   BOTÓN FLOTANTE
   ============================================================ */

.carrito-flotante {
  /* Posición fija, esquina inferior izquierda
     (lado opuesto al scroll-top que está a la derecha) */
  position:        fixed;
  bottom:          24px;
  left:            24px;
  z-index:         1100;

  display:         flex;
  align-items:     center;
  justify-content: center;

  width:           56px;
  height:          56px;
  border-radius:   50%;
  border:          none;
  cursor:          pointer;

  background-color: var(--color-verde);
  color:           var(--color-blanco);
  box-shadow:      0 4px 16px rgba(27, 94, 32, .45);

  font-size:       1.3rem;

  /* Oculto por defecto — aparece cuando hay artículos */
  opacity:         0;
  transform:       scale(.7) translateY(8px);
  pointer-events:  none;
  transition:
    opacity          .25s ease,
    transform        .25s ease,
    background-color .15s ease,
    box-shadow       .15s ease;
}

.carrito-flotante--visible {
  opacity:        1;
  transform:      scale(1) translateY(0);
  pointer-events: auto;
}

.carrito-flotante:hover {
  background-color: var(--color-verde-hover);
  box-shadow:       0 6px 20px rgba(27, 94, 32, .55);
  transform:        scale(1.07) translateY(-2px);
}

.carrito-flotante:active {
  transform: scale(.97);
}

/* Contador de artículos */
.carrito-flotante__contador {
  position:         absolute;
  top:              -4px;
  right:            -4px;
  min-width:        20px;
  height:           20px;
  padding:          0 5px;
  border-radius:    var(--radio-pill);
  background-color: var(--color-rojo);
  color:            var(--color-blanco);
  font-family:      var(--fuente-cuerpo);
  font-weight:      800;
  font-size:        .7rem;
  line-height:      20px;
  text-align:       center;
  box-shadow:       0 2px 6px rgba(0,0,0,.25);
  pointer-events:   none;
  transition:       transform .2s ease;
}

/* Pequeño rebote al actualizar el contador */
.carrito-flotante--visible .carrito-flotante__contador {
  animation: rebote-contador .3s ease;
}

@keyframes rebote-contador {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}


/* ============================================================
   OVERLAY
   ============================================================ */

.carrito-overlay {
  position:         fixed;
  inset:            0;
  z-index:          1200;
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter:  blur(2px);

  opacity:          0;
  pointer-events:   none;
  transition:       opacity .25s ease;
}

.carrito-overlay.activo {
  opacity:        1;
  pointer-events: auto;
}


/* ============================================================
   MODAL
   ============================================================ */

.carrito-modal {
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  z-index:          1300;

  background-color: var(--color-blanco);
  border-radius:    var(--radio-lg) var(--radio-lg) 0 0;
  box-shadow:       0 -8px 40px rgba(0,0,0,.18);

  display:          flex;
  flex-direction:   column;
  max-height:       85vh;

  /* Animación: desliza desde abajo */
  transform:        translateY(100%);
  transition:       transform .3s cubic-bezier(.32, .72, 0, 1);
}

.carrito-modal.activo {
  transform: translateY(0);
}

/* En pantallas grandes: panel lateral derecho */
@media (min-width: 640px) {
  .carrito-modal {
    top:           0;
    left:          auto;
    right:         0;
    bottom:        0;
    width:         400px;
    border-radius: var(--radio-lg) 0 0 var(--radio-lg);
    max-height:    100vh;

    /* Animación: desliza desde la derecha */
    transform:     translateX(100%);
  }

  .carrito-modal.activo {
    transform: translateX(0);
  }
}

/* ── Header del modal ── */
.carrito-modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--espacio-md) var(--espacio-lg);
  border-bottom:   2px solid var(--color-borde);
  flex-shrink:     0;
}

.carrito-modal__titulo {
  font-family:    var(--fuente-titulo);
  font-size:      1.5rem;
  color:          var(--color-texto);
  letter-spacing: .04em;
  display:        flex;
  align-items:    center;
  gap:            var(--espacio-sm);
  margin:         0;
}

.carrito-modal__titulo i {
  color: var(--color-verde);
}

.carrito-modal__cerrar {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          none;
  background-color: var(--color-fondo);
  color:           var(--color-texto-secundario);
  font-size:       1rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background-color var(--transicion-rapida), color var(--transicion-rapida);
  flex-shrink:     0;
}

.carrito-modal__cerrar:hover {
  background-color: var(--color-rojo);
  color:            var(--color-blanco);
}

/* ── Cuerpo del modal ── */
.carrito-modal__cuerpo {
  flex:       1;
  overflow-y: auto;
  padding:    var(--espacio-md) var(--espacio-lg);
  -webkit-overflow-scrolling: touch;
}

/* ── Footer del modal ── */
.carrito-modal__footer {
  padding:       var(--espacio-md) var(--espacio-lg);
  border-top:    2px solid var(--color-borde);
  flex-shrink:   0;
  display:       flex;
  flex-direction: column;
  gap:           var(--espacio-sm);
  background-color: var(--color-blanco);
}

.carrito-modal__total {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  padding-bottom:  var(--espacio-sm);
}

.carrito-modal__total-label {
  font-family:  var(--fuente-cuerpo);
  font-size:    .88rem;
  font-weight:  700;
  color:        var(--color-texto-secundario);
}

.carrito-modal__total-precio {
  font-family:    var(--fuente-titulo);
  font-size:      1.5rem;
  color:          var(--color-verde);
  letter-spacing: .02em;
}

.carrito-modal__acciones {
  display: flex;
  gap:     var(--espacio-sm);
}

.carrito-modal__btn-vaciar {
  flex-shrink: 0;
}

.carrito-modal__btn-enviar {
  flex:            1;
  justify-content: center;
  text-align:      center;
}

.carrito-modal__btn-catalogo {
  width:           100%;
  justify-content: center;
  text-align:      center;
}


/* ============================================================
   LISTA DE ARTÍCULOS
   ============================================================ */

.carrito-lista {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        var(--espacio-sm);
}

.carrito-item {
  display:         flex;
  align-items:     center;
  gap:             var(--espacio-md);
  padding:         var(--espacio-sm) var(--espacio-md);
  background-color: var(--color-fondo);
  border-radius:   var(--radio-md);
  border:          1.5px solid var(--color-borde);
  transition:      border-color var(--transicion-rapida);
}

.carrito-item:hover {
  border-color: var(--color-verde);
}

.carrito-item__info {
  flex: 1;
  min-width: 0;
}

.carrito-item__nombre {
  font-family:   var(--fuente-cuerpo);
  font-weight:   700;
  font-size:     .9rem;
  color:         var(--color-texto);
  margin:        0 0 2px;
  /* Truncar si es muy largo */
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.carrito-item__talla {
  font-family:  var(--fuente-cuerpo);
  font-size:    .82rem;
  color:        var(--color-texto-secundario);
  margin:       0 0 2px;
}

.carrito-item__precio {
  font-family:  var(--fuente-cuerpo);
  font-size:    .85rem;
  font-weight:  700;
  color:        var(--color-verde);
  margin:       0;
}

.carrito-item__quitar {
  width:           32px;
  height:          32px;
  border-radius:   var(--radio-sm);
  border:          1.5px solid var(--color-borde);
  background-color: transparent;
  color:           var(--color-texto-claro);
  font-size:       .8rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:
    background-color var(--transicion-rapida),
    color            var(--transicion-rapida),
    border-color     var(--transicion-rapida);
}

.carrito-item__quitar:hover {
  background-color: var(--color-rojo);
  border-color:     var(--color-rojo);
  color:            var(--color-blanco);
}


/* ============================================================
   ESTADO VACÍO DEL MODAL
   ============================================================ */

.carrito-vacio {
  text-align:  center;
  padding:     var(--espacio-xxl) var(--espacio-md);
}

.carrito-vacio__icono {
  font-size:     3.5rem;
  color:         var(--color-borde);
  display:       block;
  margin-bottom: var(--espacio-md);
  line-height:   1;
}

.carrito-vacio__texto {
  font-family:   var(--fuente-cuerpo);
  font-weight:   700;
  font-size:     1rem;
  color:         var(--color-texto-secundario);
  margin-bottom: var(--espacio-xs);
}

.carrito-vacio__sub {
  font-family: var(--fuente-cuerpo);
  font-size:   .88rem;
  color:       var(--color-texto-claro);
  margin:      0;
}


/* ============================================================
   TOAST DE CONFIRMACIÓN
   ============================================================ */

.carrito-toast {
  position:         fixed;
  bottom:           90px;      /* encima del botón flotante */
  left:             16px;
  z-index:          1400;

  background-color: var(--color-verde);
  color:            var(--color-blanco);
  font-family:      var(--fuente-cuerpo);
  font-weight:      700;
  font-size:        .88rem;
  padding:          10px 18px;
  border-radius:    var(--radio-pill);
  box-shadow:       0 4px 16px rgba(27, 94, 32, .4);
  pointer-events:   none;
  white-space:      nowrap;

  opacity:          0;
  transform:        translateY(8px);
  transition:
    opacity   .2s ease,
    transform .2s ease;
}

.carrito-toast--visible {
  opacity:   1;
  transform: translateY(0);
}


/* ============================================================
   BLOQUEAR SCROLL DEL BODY CUANDO EL MODAL ESTÁ ABIERTO
   ============================================================ */

body.carrito-abierto {
  overflow: hidden;
}


/* ============================================================
   BOTÓN "AGREGAR AL PEDIDO" EN TARJETAS
   ============================================================ */

/* Estilo del botón en el footer de la tarjeta */
.producto-card__cta--agregar {
  background-color: transparent;
  color:            var(--color-verde);
  border:           2px solid var(--color-verde);
  font-size:        .82rem;
  padding:          8px 14px;
  flex-shrink:      0;
}

.producto-card__cta--agregar:hover {
  background-color: var(--color-verde);
  color:            var(--color-blanco);
}

/* Estado: ya agregado */
.producto-card__cta--agregado {
  background-color: rgba(27, 94, 32, .1);
  color:            var(--color-verde);
  border-color:     var(--color-verde);
  cursor:           default;
  opacity:          .75;
}

/* Footer de tarjeta en dos columnas cuando hay dos botones */
.producto-card__footer--dos-btns {
  display: flex;
  gap:     6px;
}

.producto-card__footer--dos-btns .producto-card__cta {
  flex: 1;
  justify-content: center;
  font-size: .82rem;
  padding:   8px 10px;
}


/* ============================================================
   SELECTOR DE TALLA INLINE EN TARJETA (catálogo)
   ============================================================ */

.carrito-selector-talla {
  padding:          var(--espacio-sm) var(--espacio-md);
  background-color: rgba(27, 94, 32, .05);
  border-top:       1px solid var(--color-borde);
  animation:        aparecer-selector .2s ease both;
}

@keyframes aparecer-selector {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.carrito-selector-talla__label {
  font-family:   var(--fuente-cuerpo);
  font-size:     .75rem;
  font-weight:   700;
  color:         var(--color-texto-secundario);
  margin:        0 0 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.carrito-selector-talla__botones {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.carrito-selector-talla__btn {
  cursor:  pointer;
  border:  none;
  padding: 4px 10px;
}

.carrito-selector-talla__btn:hover {
  background-color: var(--color-verde);
  color:            var(--color-blanco);
  border-color:     var(--color-verde);
}