/* =========================================================================
   CARRITO DE LA CARTA — pedido por WhatsApp
   =========================================================================
   Mismo mecanismo que la carta de enjoyindian.com, pero vestido con la
   paleta de la casa: un solo rosa, el negro calido del logo y las sombras
   de estilo.css. Hoja aparte a proposito, para que el rediseno editorial
   (tarea 02) pueda revestirla sin tocar el resto.

   Va SOLO en /carta. La barra aparece sola en cuanto hay algo dentro.
   ========================================================================= */

/* --- El boton de anadir, uno por linea de la carta -------------------- */
.carta__anadir {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--negro);
    background: var(--negro);
    color: var(--rosa-clara);
    font-size: 1.15rem; line-height: 1;
    display: grid; place-items: center;
    cursor: pointer; padding: 0;
    box-shadow: var(--sombra);
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.carta__anadir:hover { transform: translateY(-2px) scale(1.06); box-shadow: var(--sombra-hover); }
.carta__anadir:active { transform: scale(.9); }
/* Al pulsar, el boton confirma con un pulso: en movil el carrito queda
   abajo y sin esto no se ve que la cosa haya hecho algo. */
.carta__anadir.puesto { animation: carrito-pulso .45s ease; }
@keyframes carrito-pulso {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* La lista de la carta pasa a tener boton al final de cada linea. */
.carta__items li { gap: 10px; }
.carta__precio { margin-left: auto; }

/* --- La barra de abajo ------------------------------------------------- */
.carrito {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--rosa);
    box-shadow: var(--sombra-elevada);
    transform: translateY(110%);
    transition: transform .35s ease;
}
.carrito.visible { transform: translateY(0); }

/* La pestana de arriba, para abrir y cerrar el detalle. */
.carrito__tirador {
    position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
    width: 58px; height: 26px;
    border: none; border-radius: 16px 16px 0 0;
    background: var(--rosa);
    color: var(--negro);
    cursor: pointer; padding: 0;
    display: none; place-items: center;
    box-shadow: 0 -6px 16px rgba(14, 12, 11, .18);
}
.carrito.visible .carrito__tirador { display: grid; }
.carrito__tirador svg { width: 22px; height: 22px; transition: transform .35s ease; }
.carrito.abierto .carrito__tirador svg { transform: rotate(180deg); }

.carrito__fondo {
    position: fixed; inset: 0; z-index: 899;
    background: rgba(14, 12, 11, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease;
}
.carrito__fondo.on { opacity: 1; visibility: visible; }

/* --- La fila siempre visible ------------------------------------------ */
.carrito__barra {
    max-width: 1100px; margin: 0 auto;
    padding: 12px 20px;
    display: flex; align-items: center; gap: 14px;
}
.carrito__resumen {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    background: none; border: none; padding: 0;
    font: inherit; color: var(--negro); cursor: pointer;
    text-align: left;
}
.carrito__cuenta {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--negro); color: var(--rosa-clara);
    display: grid; place-items: center; font-weight: 700;
}
.carrito__texto {
    font-weight: 600; font-size: .95rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carrito__total {
    flex: none;
    font-family: var(--fuente-titulo);
    font-size: 1.25rem; font-weight: 700; color: var(--negro);
}
.carrito__enviar { flex: none; }

/* --- El detalle desplegable ------------------------------------------- */
.carrito__panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.carrito.abierto .carrito__panel {
    max-height: 52vh; overflow: auto;
    border-top: 2px dashed rgba(14, 12, 11, .25);
}
.carrito__lista { max-width: 1100px; margin: 0 auto; padding: 10px 20px 16px; }
.carrito__linea {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(14, 12, 11, .2);
}
.carrito__linea:last-child { border-bottom: none; }
.carrito__nombre { flex: 1; min-width: 0; font-size: .9rem; }
.carrito__nombre small { display: block; opacity: .65; }
.carrito__cantidad { flex: none; display: flex; align-items: center; gap: 8px; }
.carrito__cantidad button {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--negro); background: transparent; color: var(--negro);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
}
.carrito__cantidad button:hover { background: var(--negro); color: var(--rosa-clara); }
.carrito__cantidad span { min-width: 20px; text-align: center; font-weight: 700; }
.carrito__importe { flex: none; width: 72px; text-align: right; font-weight: 700; font-size: .9rem; }
.carrito__vacio { padding: 16px 20px; opacity: .7; font-size: .9rem; }

/* --- Convivencia con lo que ya habia abajo ----------------------------- */
/* La galleta flotante vive en bottom:26px. Con el carrito abierto se
   subiria justo encima de la barra, asi que se aparta. */
.con-carrito .galleta-flota { bottom: 104px; transition: bottom .35s ease; }
/* Y el indice pegajoso de la carta no debe quedar tapado por nada. */
.con-carrito { scroll-padding-bottom: 100px; }

@media (max-width: 560px) {
    .carrito__texto { display: none; }
    .carrito__barra { padding: 10px 14px; gap: 10px; }
    .carrito__enviar { padding: 10px 18px; font-size: .9rem; }
    .carrito__lista { padding: 10px 14px 14px; }
}