/* ==========================
   EL PIE SIEMPRE ABAJO
==========================

   Con poco contenido —una tienda recien creada, una categoria vacia, una
   busqueda sin resultados— el pie quedaba flotando a media pantalla y debajo
   se veia el fondo del navegador. Da la impresion de que la pagina se corto.

   La receta: el body es una columna de alto minimo la pantalla, y el bloque
   central es el unico que crece. Si el contenido es largo, todo empuja hacia
   abajo como siempre; si es corto, el hueco se lo come el centro y el pie
   aterriza justo al borde.

   Va aqui y no en cada plantilla porque las siete cargan este archivo primero
   y ninguna de ellas declara `display` sobre el body — asi que esto no le pisa
   nada a nadie.
*/

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ==========================
   CONTENEDOR PRINCIPAL
========================== */

.site-shell {
    display: grid;
    grid-template-columns: 220px minmax(0,1fr) 270px;
    gap: 24px;
    max-width: 1320px;
    margin: 28px auto;
    padding: 0 20px;
    align-items: start;

    /* Lo que empuja el pie hasta abajo. `1 0 auto`: crece para llenar el
       sobrante, no se encoge por debajo de su contenido. */
    flex: 1 0 auto;

    /* En una columna flex el ancho es el eje transversal y el item se estira
       por defecto; sin esto el max-width de arriba deja de centrar. */
    width: 100%;
}

.col-izq,
.col-der {
    position: sticky;
    top: 20px;
}

/* ==========================
   SECCIONES
========================== */

.seccion {
    margin-bottom: 48px;
}

.seccion-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

    .seccion-head h2 {
        margin: 0;
    }

    .seccion-head a {
        text-decoration: none;
        font-size: .85rem;
        opacity: .7;
    }

/* ==========================
   BADGE OFERTA
========================== */

/* El ancla del badge.
   .badge-oferta es position:absolute y se posiciona contra el ancestro
   posicionado mas cercano. Ninguna de las seis plantillas le daba uno, asi
   que se anclaba al bloque contenedor inicial —la pagina— y aparecia
   flotando sobre el logo, arriba a la izquierda. */
.producto-card,
.producto-img {
    position: relative;
}

.badge-oferta {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #dc2626;
    color: #fff;
    font-size: .7rem;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.precio-anterior {
    text-decoration: line-through;
    opacity: .45;
    font-size: .8em;
    margin-right: 6px;
}

/* ==========================
   MENÚ DESPLEGABLE
========================== */

.menu-item {
    position: relative;
    display: inline-block;
}

    .menu-item .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        min-width: 170px;
        box-shadow: 0 8px 28px rgba(0,0,0,.18);
        border-radius: 8px;
        padding: 8px 0;
        z-index: 50;
    }

    /* :focus-within ademas de :hover.
       En una pantalla tactil NO existe el hover: sin esto, los submenus de
       categorias y el desplegable "Mas" son inalcanzables desde el celular.
       El disparador es un <a>, asi que al tocarlo recibe foco y el submenu
       abre. Cero JavaScript. */
    .menu-item:hover .submenu,
    .menu-item:focus-within .submenu {
        display: block;
    }

    .menu-item .submenu a {
        display: block;
        padding: 9px 18px;
        color: #333 !important;
        opacity: 1 !important;
        margin: 0 !important;
        font-size: .9rem;
        white-space: nowrap;
        text-transform: none;
        letter-spacing: normal;
    }

        .menu-item .submenu a:hover {
            background: #f4f4f8;
        }

.producto-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ==========================
   REDES
========================== */

.red-wa {
    background: #25D366 !important;
}

.red-ig {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}

.red-fb {
    background: #1877F2 !important;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:1024px) {

    /* minmax(0, 1fr) y NO "1fr" a secas.
       "1fr" equivale a minmax(AUTO, 1fr), y ese auto significa "no te
       encojas por debajo de tu contenido". El carrusel de destacados tiene
       tarjetas de flex:0 0 240px, asi que la columna se negaba a bajar de
       ese ancho y empujaba la pagina entera fuera de la pantalla: en un
       telefono de 390px se perdian el "Ver todas", el tercer icono de redes
       y media tarjeta.

       La regla de escritorio ya usaba minmax(0,1fr) por esta misma razon.
       Al colapsar la grilla habia que conservarlo. */
    .site-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Lo mismo, para cada columna: por defecto un item de grilla tiene
       min-width:auto y se resiste a encogerse. */
    .col-izq,
    .col-centro,
    .col-der {
        min-width: 0;
    }

    /* En movil se oculta la IZQUIERDA, no la derecha.
       La izquierda es contenido de relleno (quienes somos, novedades): en
       una columna sola queda empujando el catalogo hacia abajo. La derecha
       lleva el carrito y el chat del asistente, que son las dos cosas que
       un comprador en el celular si necesita a la mano. */
    .col-izq {
        display: none;
    }

    .col-der {
        display: block;
        position: static;
    }

    /* El carrito, flotante.
       .col-der queda DEBAJO del catalogo (es su orden natural en el DOM), y
       ahi abajo el boton del carrito no le sirve a nadie. Ponerlo arriba
       tampoco: el comprador aterrizaria viendo un carrito vacio antes que
       los productos. Flotante resuelve las dos cosas — siempre a la mano,
       sin robarle el primer golpe de vista al catalogo. El chat se queda
       en la columna, mas abajo. */
    .col-der .carrito-btn {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 50;
        border-radius: 999px;
        padding: 14px 20px;
        box-shadow: 0 6px 20px rgba(0,0,0,.45);
    }

        /* El contador se reubica: con el boton redondo, el "left: 26px" de
           las plantillas lo dejaba encima del texto. */
        .col-der .carrito-btn .carrito-badge {
            left: auto;
            right: -6px;
            top: -6px;
        }
}

/* ==========================
   ENCABEZADO EN PANTALLAS CHICAS

   El bug: .site-header es un flex SIN wrap, con padding lateral de 32px y
   una navegacion de cinco enlaces. Su ancho minimo ronda los 600px. En un
   celular de 390px eso desborda, el navegador hace shrink-to-fit y TODA la
   pagina se ve encogida contra el borde izquierdo con una franja negra al
   lado. No era un problema del ancho de la grilla: era el encabezado
   arrastrando el resto.

   Ninguna de las seis plantillas tenia media query para el encabezado, asi
   que esto estaba roto en todas.
========================== */

@media (max-width:780px) {

    .site-header {
        flex-wrap: wrap;
        gap: 10px 16px;
        padding: 12px 16px;
    }

    .site-brand {
        font-size: 1.05rem;
    }

        .site-brand img {
            height: 32px;
        }

    /* La navegacion pasa a una fila propia.
       Se envuelve (wrap) en vez de desplazarse de lado. Un scroll horizontal
       aqui seria mas compacto, PERO los submenus de categorias son
       position:absolute y un contenedor con overflow los recorta: "Mas" y
       las subcategorias quedarian inalcanzables. Dos lineas de menu son un
       precio barato por un menu que funciona. */
    .site-nav {
        order: 3;
        flex-basis: 100%;
        flex-wrap: wrap;
        gap: 10px 14px;
        overflow: visible;
    }

        .site-nav a {
            white-space: nowrap;
        }

    /* El submenu, en flujo y no flotando.
       Absoluto en un telefono se sale por el borde derecho, y con el
       overflow-x:hidden del body queda inaccesible. Asi se comporta como un
       acordeon: empuja el contenido hacia abajo y siempre cabe. */
    .menu-item {
        display: block;
    }

        .menu-item:hover .submenu,
        .menu-item:focus-within .submenu {
            position: static;
            min-width: 0;
            box-shadow: none;
            border-radius: 6px;
            margin: 6px 0 2px 10px;
        }

    .site-actions {
        gap: 14px;
    }

    .site-shell {
        gap: 18px;
        margin: 18px auto;
        padding: 0 14px;
    }
}

/* NO poner overflow-x:hidden en html/body.
   Se intento como "red de seguridad" y fue peor: no arregla el desborde,
   lo ESCONDE. El contenido que se sale deja de ser alcanzable — ni
   siquiera con scroll — y el sintoma pasa de "la pagina se ve corrida" a
   "faltan cosas", que es mucho mas dificil de diagnosticar.
   Si algo desborda, hay que encontrar que lo hace. */

img {
    max-width: 100%;
}

/* ==========================
   MENU DE LA CUENTA (encabezado)
==========================

   El desplegable del icono de usuario: Mi cuenta, Mis pedidos, Cerrar sesion.

   El panel es una tarjeta BLANCA fija, igual que el submenu de categorias, y
   no un color heredado. Las siete plantillas tienen encabezados de colores
   distintos —unas claras, otras casi negras— y un panel que herede el color
   de alguna de ellas es ilegible en el resto. Una tarjeta flotante blanca se
   lee sobre cualquier fondo, que es justo lo que hace todo el mundo.
*/

.cuenta-menu {
    position: relative;
}

/* El disparador es un <button>: hay que quitarle la pinta de boton para que se
   vea igual que el resto del encabezado. */
.cuenta-menu .cuenta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* ABRE Y CIERRA POR CLIC, no por :hover.
   Estaba con hover y estaba mal donde mas se usa: en un telefono no existe el
   hover, asi que "Cerrar sesion" era inalcanzable desde el encabezado. Ahora
   lo controla el atributo `hidden` que pone el JavaScript del encabezado, y el
   mismo gesto sirve en pantalla tactil y con raton. */
.cuenta-menu .cuenta-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;              /* pegado a la derecha: el icono vive en esa esquina */
    background: #fff;
    min-width: 200px;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    border-radius: 8px;
    padding: 6px 0;
    z-index: 60;
}

    /* Con !important por si alguna plantilla declara `display` sobre este
       selector: sin el, ese display le gana al hidden y el panel se queda
       abierto para siempre. */
    .cuenta-menu .cuenta-panel[hidden] {
        display: none !important;
    }

/* El !important repite el del submenu de categorias y por lo mismo: varias
   plantillas pintan `.site-header a` con su propio color y opacidad, y sin
   esto el texto del panel sale blanco sobre blanco. */
.cuenta-menu .cuenta-panel a,
.cuenta-menu .cuenta-panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 18px;
    color: #333 !important;
    opacity: 1 !important;
    margin: 0 !important;
    font-size: .9rem;
    font-family: inherit;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

    .cuenta-menu .cuenta-panel a:hover,
    .cuenta-menu .cuenta-panel button:hover {
        background: #f3f4f6;
    }

/* Cerrar sesion, separado del resto: es la accion que no se deshace de las
   tres, y pegada a las otras se pulsa por error. */
.cuenta-menu .cuenta-panel form {
    border-top: 1px solid #e5e7eb;
    margin-top: 6px;
    padding-top: 6px;
}

/* ==========================
   PÁGINA CARRITO
========================== */
.carrito-fila {
    display: grid;
    grid-template-columns: 70px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}

.carrito-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    background: #f2f2f4;
}

.carrito-datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carrito-var {
    font-size: .8rem;
    opacity: .6;
}

.carrito-precio {
    font-size: .85rem;
    opacity: .7;
}

.carrito-cant {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .carrito-cant input {
        width: 56px;
        padding: 6px;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

.carrito-subtotal {
    font-weight: 700;
    min-width: 90px;
    text-align: right;
}

.btn-mini {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
}

.btn-eliminar {
    border: none;
    background: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 1rem;
}

.carrito-resumen {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    font-size: 1.2rem;
}

.carrito-acciones {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-secundario {
    padding: 12px 18px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.btn-pagar {
    padding: 12px 22px;
    background: #16a34a;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* ==========================
   CARRUSEL
========================== */
.carrusel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 40px;
}

.carrusel-track {
    display: flex;
    transition: transform .5s ease;
}

.carrusel-slide {
    flex: 0 0 100%;
    position: relative;
    text-decoration: none;
}

    .carrusel-slide img {
        width: 100%;
        height: 340px;
        object-fit: cover;
        display: block;
    }

.carrusel-titulo {
    position: absolute;
    bottom: 24px;
    left: 28px;
    background: rgba(0,0,0,.55);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 700;
}

.carrusel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.4);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.6rem;
    cursor: pointer;
}

    .carrusel-btn.prev {
        left: 16px;
    }

    .carrusel-btn.next {
        right: 16px;
    }

    .carrusel-btn:hover {
        background: rgba(0,0,0,.7);
    }

/* ==========================
   DESTACADOS — carrusel horizontal

   Misma tarjeta que la grilla normal de productos (mismo ancho, misma foto),
   solo que arriba lleva la descripción. Va en una sola fila con scroll a la
   derecha: antes era grilla y con 3+ productos la segunda fila empujaba las
   demás secciones fuera de la pantalla.

   Alturas fijas: es lo que mantiene todas las tarjetas parejas por más que una
   descripción sea larga y otra corta.

   Colores en rgba/inherit a propósito: este archivo lo comparten las 5
   plantillas, así que sirve en el fondo oscuro de Luxury y en los claros.
========================== */
.destacados-wrap {
    position: relative;
}

.destacados-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 10px;
    /* Sin barra de scroll: se navega con las flechas o arrastrando. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .destacados-track::-webkit-scrollbar {
        display: none;
    }

.destacado-card {
    /* Ancho fijo igual al de las tarjetas de la grilla de productos. */
    flex: 0 0 240px;
    max-width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: rgba(128,128,128,.07);
    border: 1px solid rgba(128,128,128,.2);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .destacado-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(0,0,0,.18);
        border-color: rgba(128,128,128,.42);
    }

/* Alto fijo: aquí es donde se emparejan todas las tarjetas. */
.destacado-texto {
    height: 118px;
    padding: 16px 16px 10px;
    overflow: hidden;
}

    .destacado-texto h3 {
        margin: 0 0 7px;
        font-size: .95rem;
        line-height: 1.3;
        /* Un nombre largo no puede empujar la descripción fuera de la caja. */
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.destacado-desc {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    opacity: .7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.destacado-media {
    position: relative;
    height: 220px;
    background: #fff;
}

    .destacado-media img {
        width: 100%;
        height: 100%;
        /* contain y no cover: son fotos recortadas sobre blanco y con cover se
           les corta media suela. Cambiar a cover si algún día son de ambiente. */
        object-fit: contain;
        padding: 10px;
        display: block;
    }

.destacado-precio {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: #fff;
    color: #111;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .88rem;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.destacado-antes {
    opacity: .45;
    font-weight: 400;
    font-size: .74rem;
}

.destacado-oferta {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    background: #dc2626;
    color: #fff;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- Flechas ---- */
.destacados-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    transition: background .18s ease;
}

    .destacados-btn:hover {
        background: rgba(0,0,0,.82);
    }

    .destacados-btn.prev { left: -10px; }
    .destacados-btn.next { right: -10px; }

    /* Se ocultan cuando no hay a dónde desplazarse. */
    .destacados-btn[hidden] {
        display: none;
    }

@media (max-width: 620px) {
    /* La tarjeta ocupa el 78% para que ASOME la siguiente: es la pista
       visual de que hay mas y se puede arrastrar. */
    .destacado-card {
        flex: 0 0 78%;
    }

    /* Las flechas se ocultan (en tactil se arrastra), pero entonces hay que
       devolver la barra de desplazamiento: sin flechas Y sin barra, nada
       indica que la fila continua. */
    .destacados-btn {
        display: none;
    }

    .destacados-track {
        scrollbar-width: thin;
        -ms-overflow-style: auto;
    }

        .destacados-track::-webkit-scrollbar {
            display: block;
            height: 4px;
        }

        .destacados-track::-webkit-scrollbar-thumb {
            background: rgba(128,128,128,.45);
            border-radius: 4px;
        }
}


/* ==========================
   CHAT DEL ASISTENTE

   Base para las cinco plantillas. layout-luxury.css ya trae su propia
   versión de .chat-widget y se carga después, así que la suya manda; lo
   de abajo es lo que ven las otras cuatro, más las piezas nuevas
   (tarjetas de producto y puntos de "escribiendo") que ninguna tenía.

   Los colores van en grises translúcidos a propósito: así el bloque se
   ve bien tanto sobre el fondo claro de Moderno como sobre el oscuro de
   Industrial, sin tener que escribirlo cinco veces.
========================== */

.chat-widget {
    display: flex;
    flex-direction: column;
    height: 440px;
    overflow: hidden;
    border: 1px solid rgba(128,128,128,.28);
    border-radius: 10px;
    background: rgba(127,127,127,.05);
}

.chat-header {
    padding: 12px 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(128,128,128,.28);
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-msg {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .85rem;
    line-height: 1.5;
    max-width: 88%;
    white-space: pre-wrap;
    word-break: break-word;
}

    .chat-msg.bot {
        background: rgba(127,127,127,.16);
        align-self: flex-start;
    }

    .chat-msg.user {
        background: rgba(127,127,127,.32);
        align-self: flex-end;
    }

.chat-input {
    display: flex;
    border-top: 1px solid rgba(128,128,128,.28);
}

    .chat-input input {
        flex: 1;
        min-width: 0;
        border: none;
        padding: 12px;
        background: transparent;
        color: inherit;
        outline: none;
        font: inherit;
        font-size: .88rem;
    }

    .chat-input button {
        border: none;
        background: rgba(127,127,127,.24);
        color: inherit;
        padding: 0 16px;
        cursor: pointer;
        font-size: 1rem;
    }

    .chat-input button:disabled,
    .chat-input input:disabled {
        opacity: .5;
        cursor: default;
    }

/* ---- "Escribiendo..." ----
   Tres puntos en vez de un texto fijo: ocupa poco y no hay que traducirlo. */
.chat-pensando {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 12px;
}

    /* El primer hijo es el texto ("Consultando"); los puntos son los que van
       después. Sin el :not, el texto se convertiría en un cuarto punto. */
    .chat-pensando-txt {
        font-size: .8rem;
        opacity: .7;
        margin-right: 3px;
    }

    .chat-pensando span:not(.chat-pensando-txt) {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: .35;
        animation: chatPunto 1.1s infinite ease-in-out;
    }

    .chat-pensando span:not(.chat-pensando-txt):nth-child(3) { animation-delay: .18s; }
    .chat-pensando span:not(.chat-pensando-txt):nth-child(4) { animation-delay: .36s; }

@keyframes chatPunto {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: .9;  transform: translateY(-3px); }
}

/* ---- Tarjetas de producto dentro del chat ----
   Las dibuja el navegador con los datos que devuelve NUESTRO servidor
   (precio, imagen y enlace reales), no con lo que haya dicho la IA. */
.chat-productos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-producto {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(128,128,128,.28);
    border-radius: 10px;
    background: rgba(127,127,127,.07);
}

    .chat-producto img {
        width: 54px;
        height: 54px;
        object-fit: cover;
        border-radius: 8px;
        flex: 0 0 auto;
    }

.chat-producto-datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.chat-producto-nombre {
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .chat-producto-nombre:hover {
        text-decoration: underline;
    }

.chat-producto-precio {
    font-size: .82rem;
    opacity: .8;
}

.chat-producto-btn,
.chat-agregar-todos {
    border: 1px solid rgba(128,128,128,.45);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .75rem;
    cursor: pointer;
    align-self: flex-start;
    font-family: inherit;
}

    .chat-producto-btn:hover,
    .chat-agregar-todos:hover {
        background: rgba(127,127,127,.22);
    }

    .chat-producto-btn:disabled,
    .chat-agregar-todos:disabled {
        opacity: .6;
        cursor: default;
    }

.chat-agregar-todos {
    align-self: stretch;
    text-align: center;
    padding: 7px 12px;
    font-size: .78rem;
}