/* ============================================================
   PEDIDO — Barra flotante y panel del armador de orden
   Depende de tokens.css
   ============================================================ */

/* ---- Barra flotante ----
   Aparece cuando hay algo en el pedido y acompaña el scroll. */

.ta-barra {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--capa-barra-pedido);
    background: var(--ta-carbon);
    color: var(--ta-texto-invertido);
    box-shadow: 0 -8px 30px rgba(34, 25, 15, 0.28);
    padding: var(--esp-3) var(--esp-4);
    padding-bottom: max(var(--esp-3), env(safe-area-inset-bottom));
    transform: translateY(110%);
    /* visibility además del transform: sin ella los botones siguen
       siendo alcanzables con tabulador aunque no se vean. */
    visibility: hidden;
    transition: transform var(--trans), visibility var(--trans);
}

.ta-barra--visible {
    transform: translateY(0);
    visibility: visible;
}

.ta-barra__interior {
    max-width: var(--ancho-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--esp-4);
}

.ta-barra__resumen {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-inline-end: auto;
    min-width: 0;
}

.ta-barra__conteo {
    font-size: var(--txt-sm);
    color: rgba(255, 251, 245, 0.72);
}

.ta-barra__total {
    font-family: var(--ta-fuente-titulo);
    font-size: var(--txt-2xl);
    color: var(--ta-amarillo);
    line-height: 1;
}

.ta-barra__ver {
    background: transparent;
    border: 2px solid rgba(255, 251, 245, 0.35);
    color: var(--ta-texto-invertido);
    border-radius: var(--radio-full);
    padding: var(--esp-2) var(--esp-4);
    min-height: 44px;
    font-weight: var(--peso-semi);
    cursor: pointer;
    transition: background-color var(--trans-rapida);
}

.ta-barra__ver:hover {
    background: rgba(255, 251, 245, 0.14);
}

@media (max-width: 479px) {
    /* En pantallas chicas el botón de enviar manda; ver detalle se
       resuelve tocando el resumen. */
    .ta-barra__ver {
        display: none;
    }
}

/* ---- Fondo del panel ---- */

.ta-pedido-fondo {
    position: fixed;
    inset: 0;
    z-index: var(--capa-modal);
    background: rgba(34, 25, 15, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--trans), visibility var(--trans);
}

.ta-pedido-fondo--abierto {
    opacity: 1;
    visibility: visible;
}

/* ---- Panel ---- */

.ta-pedido {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--capa-modal);
    max-height: 86svh;
    display: flex;
    flex-direction: column;
    background: var(--ta-crema);
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    box-shadow: var(--sombra-lg);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--trans-lenta), visibility var(--trans-lenta);
}

.ta-pedido--abierto {
    transform: translateY(0);
    visibility: visible;
}

/* En escritorio se comporta como panel lateral derecho. */
@media (min-width: 768px) {
    .ta-pedido {
        inset-block: 0;
        inset-inline-start: auto;
        width: min(420px, 100%);
        max-height: none;
        border-radius: var(--radio-xl) 0 0 var(--radio-xl);
        transform: translateX(100%);
    }

    .ta-pedido--abierto {
        transform: translateX(0);
    }
}

/* Al imprimir la carta, lo flotante estorba: se va todo. */
@media print {
    .ta-barra,
    .ta-pedido,
    .ta-pedido-fondo {
        display: none !important;
    }
}

.ta-pedido__cabecera {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-5) var(--esp-5) var(--esp-4);
    border-bottom: 1px solid var(--ta-borde);
}

.ta-pedido__titulo {
    font-size: var(--txt-2xl);
    text-transform: uppercase;
    margin-inline-end: auto;
    color: var(--ta-carbon);
}

.ta-pedido__cerrar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--ta-arena-honda);
    color: var(--ta-texto);
    font-size: var(--txt-xl);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--trans-rapida);
}

.ta-pedido__cerrar:hover {
    background: var(--ta-brasa);
    color: var(--ta-blanco);
}

/* Asa visual del panel en móvil. */
.ta-pedido__asa {
    width: 44px;
    height: 5px;
    border-radius: var(--radio-full);
    background: var(--ta-arena-honda);
    margin: var(--esp-3) auto 0;
}

@media (min-width: 768px) {
    .ta-pedido__asa {
        display: none;
    }
}

/* ---- Lista de artículos ---- */

.ta-pedido__lista {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--esp-4) var(--esp-5);
    list-style: none;
    display: grid;
    gap: var(--esp-3);
    align-content: start;
}

.ta-pedido__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--esp-2) var(--esp-3);
    align-items: center;
    padding: var(--esp-3);
    background: var(--ta-blanco);
    border: 1px solid var(--ta-borde);
    border-radius: var(--radio);
}

.ta-pedido__nombre {
    font-weight: var(--peso-semi);
    font-size: var(--txt-sm);
    line-height: 1.35;
}

.ta-pedido__precio-unitario {
    font-size: var(--txt-xs);
    color: var(--ta-texto-suave);
}

.ta-pedido__subtotal {
    font-family: var(--ta-fuente-titulo);
    font-size: var(--txt-lg);
    color: var(--ta-naranja-honda);
    text-align: end;
}

/* ---- Control de cantidad ---- */

.ta-cantidad {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    justify-self: start;
}

.ta-cantidad__boton {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ta-borde);
    border-radius: 50%;
    background: var(--ta-blanco);
    color: var(--ta-texto);
    font-size: var(--txt-lg);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--trans-rapida), background-color var(--trans-rapida);
}

.ta-cantidad__boton:hover {
    border-color: var(--ta-naranja);
    background: var(--ta-arena);
}

.ta-cantidad__valor {
    min-width: 2ch;
    text-align: center;
    font-weight: var(--peso-fuerte);
    font-variant-numeric: tabular-nums;
}

/* ---- Estado vacío ---- */

.ta-pedido__vacio {
    text-align: center;
    padding-block: var(--esp-8);
    color: var(--ta-texto-medio);
}

.ta-pedido__vacio-icono {
    font-size: 3rem;
    margin-bottom: var(--esp-3);
}

/* ---- Pie del panel ---- */

.ta-pedido__pie {
    border-top: 1px solid var(--ta-borde);
    padding: var(--esp-4) var(--esp-5);
    padding-bottom: max(var(--esp-4), env(safe-area-inset-bottom));
    background: var(--ta-blanco);
    display: grid;
    gap: var(--esp-3);
}

.ta-pedido__totales {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.ta-pedido__totales-etiqueta {
    font-weight: var(--peso-semi);
    text-transform: uppercase;
    font-size: var(--txt-sm);
    letter-spacing: 0.06em;
    color: var(--ta-texto-medio);
}

.ta-pedido__totales-valor {
    font-family: var(--ta-fuente-titulo);
    font-size: var(--txt-3xl);
    color: var(--ta-carbon);
    line-height: 1;
}

.ta-pedido__aviso {
    font-size: var(--txt-xs);
    color: var(--ta-texto-suave);
    text-align: center;
    line-height: 1.5;
}

.ta-pedido__vaciar {
    background: none;
    border: none;
    color: var(--ta-texto-suave);
    font-size: var(--txt-sm);
    text-decoration: underline;
    cursor: pointer;
    justify-self: center;
    padding: var(--esp-2);
}

.ta-pedido__vaciar:hover {
    color: var(--ta-brasa);
}