/* ============================================================
   MENÚ — Catálogo, filtros y buscador
   El armador de pedido vive en pedido.css
   Depende de tokens.css
   ============================================================ */

.ta-menu {
    background: var(--ta-crema);
}

/* ---- Controles pegajosos ----
   Se quedan bajo el nav para que filtrar no obligue a subir. */

.ta-menu__controles {
    position: sticky;
    inset-block-start: var(--alto-nav);
    z-index: var(--capa-sticky);
    background: rgba(255, 251, 245, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ta-borde);
    padding-block: var(--esp-3);
    margin-bottom: var(--esp-6);
}

.ta-menu__controles-interior {
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--esp-4);
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
}

@media (min-width: 768px) {
    .ta-menu__controles-interior {
        padding-inline: var(--esp-6);
        flex-direction: row-reverse;
        align-items: center;
        gap: var(--esp-5);
    }
}

/* ---- Buscador ---- */

.ta-menu__buscador {
    position: relative;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .ta-menu__buscador {
        width: 260px;
    }
}

.ta-menu__buscador svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--esp-3);
    transform: translateY(-50%);
    color: var(--ta-texto-suave);
    pointer-events: none;
}

.ta-menu__campo {
    width: 100%;
    min-height: 44px;
    padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-8);
    border: 2px solid var(--ta-borde);
    border-radius: var(--radio-full);
    background: var(--ta-blanco);
    font-size: var(--txt-base);
    transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.ta-menu__campo::placeholder {
    color: var(--ta-texto-suave);
}

.ta-menu__campo:focus {
    outline: none;
    border-color: var(--ta-naranja);
    box-shadow: 0 0 0 4px rgba(242, 109, 29, 0.16);
}

/* Botón para limpiar la búsqueda. */
.ta-menu__limpiar {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--esp-2);
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--ta-arena-honda);
    color: var(--ta-texto-medio);
    cursor: pointer;
    font-size: var(--txt-sm);
    line-height: 1;
}

.ta-menu__limpiar--visible {
    display: flex;
}

.ta-menu__limpiar:hover {
    background: var(--ta-naranja);
    color: var(--ta-blanco);
}

/* ---- Pestañas de categoría ---- */

.ta-menu__tabs {
    display: flex;
    gap: var(--esp-2);
    overflow-x: auto;
    scrollbar-width: none;
    /* Encaja el scroll horizontal en el borde del contenedor. */
    margin-inline: calc(var(--esp-4) * -1);
    padding-inline: var(--esp-4);
    scroll-padding-inline: var(--esp-4);
    flex: 1;
}

.ta-menu__tabs::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .ta-menu__tabs {
        margin-inline: 0;
        padding-inline: 0;
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.ta-menu__tab {
    flex-shrink: 0;
    padding: var(--esp-2) var(--esp-4);
    min-height: 40px;
    border: 2px solid var(--ta-borde);
    border-radius: var(--radio-full);
    background: var(--ta-blanco);
    color: var(--ta-texto-medio);
    font-size: var(--txt-sm);
    font-weight: var(--peso-fuerte);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--trans-rapida),
                color var(--trans-rapida),
                border-color var(--trans-rapida);
}

.ta-menu__tab:hover {
    border-color: var(--ta-naranja-claro);
    color: var(--ta-naranja-honda);
}

.ta-menu__tab[aria-selected="true"] {
    background: var(--ta-carbon);
    border-color: var(--ta-carbon);
    color: var(--ta-blanco);
}

.ta-menu__tab-conteo {
    opacity: 0.6;
    font-weight: var(--peso-medio);
    margin-inline-start: var(--esp-1);
}

/* ---- Grupos y rejilla ---- */

.ta-menu__grupo {
    margin-bottom: var(--esp-8);
    scroll-margin-top: calc(var(--alto-nav) + 84px);
}

.ta-menu__grupo[hidden] {
    display: none;
}

.ta-menu__grupo-titulo {
    display: flex;
    align-items: baseline;
    gap: var(--esp-3);
    margin-bottom: var(--esp-5);
    text-transform: uppercase;
    color: var(--ta-carbon);
}

/* Línea que rellena el espacio a la derecha del título. */
.ta-menu__grupo-titulo::after {
    content: "";
    flex: 1;
    height: 3px;
    border-radius: var(--radio-full);
    background: linear-gradient(90deg, var(--ta-amarillo), transparent);
}

.ta-menu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--esp-4);
}

@media (max-width: 479px) {
    .ta-menu__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--esp-3);
    }
}

/* ---- Tarjeta de producto ---- */

.ta-carta {
    display: flex;
    flex-direction: column;
    background: var(--ta-blanco);
    border: 1px solid var(--ta-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-4);
    box-shadow: var(--sombra-sm);
    transition: transform var(--trans-rapida),
                box-shadow var(--trans-rapida),
                border-color var(--trans-rapida);
}

.ta-carta:hover {
    transform: translateY(-3px);
    border-color: var(--ta-amarillo);
    box-shadow: var(--sombra-md);
}

.ta-carta[hidden] {
    display: none;
}

/* Producto ya agregado al pedido. */
.ta-carta--en-pedido {
    border-color: var(--ta-naranja);
    box-shadow: 0 0 0 2px rgba(242, 109, 29, 0.18), var(--sombra-sm);
}

.ta-carta__nombre {
    font-family: var(--ta-fuente-texto);
    font-size: var(--txt-base);
    font-weight: var(--peso-fuerte);
    line-height: 1.3;
    color: var(--ta-texto);
    margin-bottom: var(--esp-2);
}

.ta-carta__pie {
    margin-top: auto;
    padding-top: var(--esp-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2);
}

.ta-carta__precio {
    font-family: var(--ta-fuente-titulo);
    font-size: var(--txt-xl);
    color: var(--ta-naranja-honda);
    line-height: 1;
}

.ta-carta__agregar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--ta-amarillo);
    color: var(--ta-carbon);
    font-size: var(--txt-xl);
    font-weight: var(--peso-fuerte);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--trans-rapida), transform var(--trans-rapida);
}

.ta-carta__agregar:hover {
    background: var(--ta-naranja);
    color: var(--ta-blanco);
    transform: scale(1.08);
}

.ta-carta__agregar:active {
    transform: scale(0.94);
}

/* Contador cuando el producto ya está en el pedido. */
.ta-carta__cantidad {
    position: absolute;
    inset-block-start: calc(var(--esp-2) * -1);
    inset-inline-end: calc(var(--esp-2) * -1);
    min-width: 22px;
    height: 22px;
    padding-inline: 5px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-full);
    background: var(--ta-brasa);
    color: var(--ta-blanco);
    font-size: var(--txt-xs);
    font-weight: var(--peso-fuerte);
}

.ta-carta__envoltura-boton {
    position: relative;
    flex-shrink: 0;
}

.ta-carta--en-pedido .ta-carta__cantidad {
    display: flex;
}

/* ---- Estado vacío del buscador ---- */

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

.ta-menu__vacio--visible {
    display: block;
}

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

/* ---- Aviso de precios ---- */

.ta-menu__nota {
    margin-top: var(--esp-6);
    padding: var(--esp-4);
    border-radius: var(--radio);
    background: var(--ta-arena);
    border: 1px dashed var(--ta-borde);
    font-size: var(--txt-sm);
    color: var(--ta-texto-medio);
    text-align: center;
}

/* Espacio al final para que la barra de pedido no tape la última fila. */
.ta-menu--con-pedido {
    padding-bottom: 92px;
}

/* ---------- Foto y descripción del producto ----------
   Las fotos vienen del catálogo de WhatsApp, así que la carta de la web y la de
   WhatsApp enseñan exactamente lo mismo. Van a sangre: la tarjeta tiene relleno,
   y sin los márgenes negativos la foto quedaría flotando con un marco blanco. */
.ta-carta__foto {
    display: block;
    width: calc(100% + var(--esp-4) * 2);
    /* El mismo reset trae `max-width: 100%`, que recorta el ancho del sangrado
       y deja una franja blanca a la derecha de cada foto. */
    max-width: none;
    margin: calc(var(--esp-4) * -1) calc(var(--esp-4) * -1) var(--esp-3);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
    /* Es lo que se ve mientras la foto no llega: la carta sale sin src y
       menu.js se lo pone al abrir la categoría, así que este hueco de arena
       existe siempre un momento. Sin él sería un blanco que parece un error. */
    background: var(--ta-arena);
}

.ta-carta__descripcion {
    margin: 0 0 var(--esp-3);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--ta-texto-suave);
    /* Las descripciones del catálogo son de largo muy dispar; sin tope, una
       tarjeta se estira al triple y descuadra la cuadrícula. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* El pie se pega abajo para que todas las tarjetas alineen precio y botón,
   aunque el nombre ocupe una línea o dos. */
.ta-carta__pie {
    margin-top: auto;
}

/* ---------- Categorías plegables ----------
   Con las 33 tarjetas abiertas el navegador pinta de más y, al estar dentro
   del viewport, las fotos en carga diferida se piden todas. Plegadas, el
   panel mide cero y esas fotos no se piden hasta que se abre la categoría. */
.ta-menu__grupo-titulo {
    margin: 0;
}

.ta-menu__grupo-boton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-4) 0;
    background: none;
    border: none;
    border-block-end: 1px solid var(--ta-borde);
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.ta-menu__grupo-nombre {
    font-family: var(--fuente-titulo, inherit);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.ta-menu__grupo-conteo {
    min-width: 1.6rem;
    padding: .1rem .45rem;
    border-radius: var(--radio-full);
    background: var(--ta-arena);
    color: var(--ta-texto-suave);
    font-size: .78rem;
    text-align: center;
}

/* La flecha empuja al final y gira al abrir. */
.ta-menu__grupo-flecha {
    margin-inline-start: auto;
    flex: none;
    color: var(--ta-texto-suave);
    transition: transform var(--trans);
}

.ta-menu__grupo[data-abierto="true"] .ta-menu__grupo-flecha {
    transform: rotate(180deg);
}

.ta-menu__grupo-boton:hover .ta-menu__grupo-flecha {
    color: var(--ta-naranja, currentColor);
}

/* grid-template-rows de 0fr a 1fr: anima de verdad hasta alto cero, cosa que
   max-height no hace sin inventarse un número que luego se queda corto. */
.ta-menu__panel {
    display: grid;
    grid-template-rows: 0fr;
    /* --trans-lenta ya trae su curva (480ms cubic-bezier). Añadirle "ease"
       dejaba dos funciones de tiempo, el navegador tiraba la regla entera y
       la categoría abría de golpe. */
    transition: grid-template-rows var(--trans-lenta);
}

.ta-menu__grupo[data-abierto="true"] .ta-menu__panel {
    grid-template-rows: 1fr;
}

.ta-menu__panel > .ta-menu__grid {
    overflow: hidden;
    min-height: 0;
    /* Lo que mantiene la carta ligera. Las 33 fotos salen del servidor con su
       src puesto —un crawler no abre categorías, así que sin src no existen—,
       y es este content-visibility el que evita que el navegador las pida
       todas al cargar: el contenido de un panel cerrado no se renderiza, no
       tiene caja, y sin caja no hay imagen que bajar. El loading="lazy" solo
       no bastaba: la foto seguía en el sitio, nada más recortada a cero.

       allow-discrete es lo que salva la animación. Al abrir, el cambio a
       visible ocurre al principio de la transición, así que hay contenido que
       medir cuando el alto crece; al cerrar ocurre al final, así que el panel
       se pliega con sus tarjetas dentro en vez de vaciarse de golpe. Un
       navegador que no lo entienda hace el cambio seco: se pliega sin
       animar, que es feo pero no roto. */
    content-visibility: hidden;
    /* El relleno se anima junto con el alto. Cambiándolo de golpe, la primera
       fila de tarjetas pegaba un brinco al terminar la apertura. */
    padding-block-start: 0;
    opacity: 0;
    transition: padding-block-start var(--trans-lenta), opacity var(--trans),
                content-visibility var(--trans-lenta) allow-discrete;
}

.ta-menu__grupo[data-abierto="true"] .ta-menu__panel > .ta-menu__grid {
    padding-block-start: var(--esp-4);
    opacity: 1;
    content-visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .ta-menu__panel,
    .ta-menu__panel > .ta-menu__grid {
        transition: none;
    }
}