/* ─── OVERLAY ────────────────────────────────────────────────────────────────── */
.carrito-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.35);
  z-index:    200;
}

.carrito-overlay.activo { display: block; }

/* ─── PANEL ──────────────────────────────────────────────────────────────────── */
.carrito-panel {
  position:       fixed;
  top:            0;
  right:          0;
  width:          500px;
  max-width:      100vw;
  height:         100vh;
  background:     #FFF7E7;
  z-index:        1000;
  display:        flex;
  flex-direction: column;
  transform:      translateX(100%);
  transition:     transform 0.58s cubic-bezier(0.4, 0, 0.2, 1);
  border-left:    none;
}

.carrito-panel.abierto { transform: translateX(0); }

/* ─── HEADER DEL PANEL ───────────────────────────────────────────────────────── */
.carrito-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px 12px;
  border-bottom:   1px solid #e8e8e8;
  flex-shrink:     0;
}

.carrito-titulo {
  font-family:    'ArialNarrow';
  font-size:      18px;
  font-weight:    700;
  transform: scaleY(1.6);
 
  text-transform: uppercase;
  color:          green;
}

.carrito-cerrar {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   18px;
  color:       #282828;
  line-height: 1;
  padding:     0;
  transition:  color 0.15s;
}

.carrito-cerrar:hover { color: #e52a00; }

.carrito-subtitulo {
  font-family:    helvetica, sans-serif;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #aaa;
  padding:        10px 24px 0;
  flex-shrink:    0;
}

/* ─── LISTA DE PRODUCTOS ─────────────────────────────────────────────────────── */
.carrito-lista {
  flex:           1;
  overflow-y:     auto;
  padding:        12px 24px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.carrito-vacio {
  font-family: helvetica, sans-serif;
  font-size:   13px;
  font-weight: 600;
  color:       #aaa;
  text-align:  center;
  margin-top:  40px;
}

.carrito-item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.carrito-item img {
  width:       56px;
  height:      56px;
  object-fit:  cover;
  flex-shrink: 0;
}

.carrito-item-info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.carrito-item-nombre {
  font-family:   helvetica, sans-serif;
  font-size:     13px;
  font-weight:   700;
  color:         #282828;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   17px;
}

.carrito-item-precio {
  font-family: helvetica, sans-serif;
  font-size:   13px;
  font-weight: 600;
  color:       #aaa;
}

.carrito-item-eliminar {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   14px;
  color:       #ccc;
  flex-shrink: 0;
  padding:     4px;
  transition:  color 0.15s;
  line-height: 1;
}

.carrito-item-eliminar:hover { color: #e52a00; }

/* ─── RESUMEN / TOTALES ──────────────────────────────────────────────────────── */
.carrito-resumen {
  flex-shrink: 0;
  padding:     16px 24px;
  border-top:  1px solid #e8e8e8;
  display:     flex;
  flex-direction: column;
  gap:         10px;
}

.carrito-zona-selector {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.carrito-zona-selector label {
  font-family:    helvetica, sans-serif;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          #282828;
  white-space:    nowrap;
}

.carrito-zona-selector select {
  flex:        1;
  font-family: helvetica, sans-serif;
  font-size:   12px;
  font-weight: 600;
  border:      1px solid black;
  padding:     6px 8px;
  color:       #282828;
  background:  #FFF7E7;
  cursor:      pointer;
  outline:     none;
}

.carrito-zona-selector select:focus { border-color: #282828; }

.carrito-linea {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-family:     helvetica, sans-serif;
  font-size:       13px;
  font-weight:     600;
  color:           #282828;
}

.carrito-total-linea {
  font-weight:  800;
  font-size:    15px;
  padding-top:  6px;
  border-top:   1px solid #e8e8e8;
  margin-top:   4px;
}

/* ─── BOTÓN PAGAR ────────────────────────────────────────────────────────────── */
.carrito-pagar {
  flex-shrink:    0;
  font-family:    helvetica, sans-serif;
  font-size:      13px;
  font-weight:    800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background:     #282828;
  color:          #FFF7E7;
  border: 1px solid black;
  padding:        18px 24px;
  cursor:         pointer;
  width:          100%;
  transition:     background-color 0.15s;
}

.carrito-pagar:hover:not(:disabled) { 
  background-color: green;
  border: 1px solid green;
  color: #FFF7E7; 

}

.carrito-pagar:disabled {
  background-color: #ccc;
  cursor:           not-allowed;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .carrito-panel { width: 100vw; }
}