/* ==========================================================
   FLORES EL GATO
   ASISTENTE VIRTUAL - DISEÑO PROFESIONAL
   Archivo: asistente_ia/assets/css/asistente.css
   ========================================================== */

/* VARIABLES Y AISLAMIENTO */

#feg-asistente {
    --feg-azul: #1577d5;
    --feg-azul-oscuro: #075eac;
    --feg-azul-claro: #edf7ff;
    --feg-fondo: #f5f8fc;
    --feg-texto: #21364d;
    --feg-secundario: #718096;
    --feg-borde: #e1e9f2;
    --feg-blanco: #ffffff;

    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483000;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--feg-texto);
    line-height: 1.45;
}

#feg-asistente *,
#feg-asistente *::before,
#feg-asistente *::after {
    box-sizing: border-box;
}

#feg-asistente button,
#feg-asistente input,
#feg-asistente select,
#feg-asistente textarea {
    font-family: inherit;
}

#feg-asistente button {
    cursor: pointer;
}

#feg-asistente [hidden] {
    display: none !important;
}

#feg-asistente button:focus-visible,
#feg-asistente input:focus-visible,
#feg-asistente select:focus-visible,
#feg-asistente textarea:focus-visible {
    outline: 3px solid rgba(21, 119, 213, .25);
    outline-offset: 2px;
}

/* ==========================================================
   BOTÓN FLOTANTE DEL GATITO
   ========================================================== */

#feg-asistente .feg-boton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;
    padding: 0;

    border: 4px solid #fff;
    border-radius: 50%;

    background: var(--feg-azul);
    box-shadow: 0 8px 30px rgba(16, 44, 78, .30);

    overflow: visible;
    transition: transform .2s, box-shadow .2s;
}

#feg-asistente .feg-boton:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 35px rgba(16, 44, 78, .36);
}

#feg-asistente .feg-boton img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#feg-asistente .feg-enlinea {
    position: absolute;
    right: 1px;
    bottom: 1px;

    width: 16px;
    height: 16px;

    border: 3px solid #fff;
    border-radius: 50%;

    background: #28c86c;
    box-shadow: 0 0 0 2px rgba(40, 200, 108, .12);
}

/* ==========================================================
   VENTANA PRINCIPAL
   ========================================================== */

#feg-asistente .feg-ventana {
    position: absolute;
    right: 0;
    bottom: 94px;

    display: flex;
    flex-direction: column;

    width: 390px;
    max-width: calc(100vw - 24px);
    height: min(620px, calc(100dvh - 130px));
    min-height: 0;

    background: var(--feg-blanco);
    border: 1px solid var(--feg-borde);
    border-radius: 22px;

    box-shadow:
        0 18px 60px rgba(12, 42, 76, .20),
        0 5px 15px rgba(12, 42, 76, .08);

    overflow: hidden;
    isolation: isolate;

    animation: feg-aparecer .22s ease-out;
}

@keyframes feg-aparecer {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================
   ENCABEZADO AZUL
   ========================================================== */

#feg-asistente .feg-cabecera {
    display: flex;
    align-items: center;
    gap: 11px;

    flex-shrink: 0;
    min-height: 78px;
    padding: 13px 15px;

    background: linear-gradient(
        120deg,
        #075eac 0%,
        #1577d5 55%,
        #20a0e2 100%
    );

    color: #fff;
}

#feg-asistente .feg-cabecera > img {
    display: block;
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;

    object-fit: cover;
    background: #fff;
}

#feg-asistente .feg-identidad {
    display: flex;
    flex-direction: column;
    gap: 4px;

    flex: 1;
    min-width: 0;
}

#feg-asistente .feg-identidad strong {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

#feg-asistente .feg-identidad span {
    color: #e7f5ff;
    font-size: 11px;
    line-height: 1.4;
}

#feg-asistente #feg-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 32px;
    height: 32px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;

    background: rgba(255, 255, 255, .12);
    color: #fff;

    font-size: 25px;
    line-height: 1;
    transition: background .2s;
}

#feg-asistente #feg-cerrar:hover {
    background: rgba(255, 255, 255, .25);
}

/* ==========================================================
   PANTALLAS INTERNAS
   ========================================================== */

#feg-asistente .feg-inicio,
#feg-asistente .feg-explorar,
#feg-asistente .feg-chat {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

#feg-asistente .feg-inicio,
#feg-asistente .feg-explorar {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    padding: 17px;
    background: var(--feg-fondo);
}

#feg-asistente .feg-chat {
    display: flex;
    flex-direction: column;
    background: var(--feg-fondo);
}

/* ==========================================================
   MENÚ PRINCIPAL
   ========================================================== */

#feg-asistente .feg-inicio-bienvenida {
    padding: 17px;
    margin-bottom: 16px;

    border: 1px solid #dcecff;
    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #eaf5ff 100%
    );

    box-shadow: 0 4px 16px rgba(21, 119, 213, .04);
}

#feg-asistente .feg-inicio-bienvenida strong {
    display: block;

    font-size: 15px;
    line-height: 1.5;
    font-weight: 800;
    color: #1c3e60;
}

#feg-asistente .feg-inicio-bienvenida p {
    margin: 9px 0 0;
    padding: 0;

    font-size: 12px;
    line-height: 1.6;
    color: #647b93;
}

#feg-asistente .feg-menu-opciones {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;

    margin: 0;
    padding: 0;
}

/* TARJETAS DEL MENÚ */

#feg-asistente .feg-menu-opcion {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-width: 0;
    min-height: 82px;
    padding: 13px;

    border: 1px solid var(--feg-borde);
    border-radius: 15px;

    background: #fff;
    color: var(--feg-texto);

    text-align: left;

    box-shadow: 0 4px 14px rgba(20, 55, 90, .045);

    transition:
        border-color .2s,
        box-shadow .2s,
        transform .2s;
}

#feg-asistente .feg-menu-opcion:hover {
    border-color: #a9d4f7;
    box-shadow: 0 8px 20px rgba(21, 119, 213, .10);
    transform: translateY(-2px);
}

#feg-asistente .feg-menu-opcion:active {
    transform: translateY(0);
}

#feg-asistente .feg-menu-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 48px;
    width: 48px;
    height: 48px;

    border-radius: 13px;
    background: #eaf5ff;

    font-size: 23px;
}

#feg-asistente .feg-menu-texto {
    display: flex;
    flex-direction: column;
    gap: 5px;

    flex: 1;
    min-width: 0;
}

#feg-asistente .feg-menu-texto strong {
    display: block;

    color: #263d55;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

#feg-asistente .feg-menu-texto small {
    display: block;

    color: #718096;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 400;
}

#feg-asistente .feg-menu-flecha {
    flex-shrink: 0;

    color: var(--feg-azul);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}

/* ==========================================================
   NAVEGACIÓN INTERNA
   ========================================================== */

#feg-asistente .feg-navegacion {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
    padding: 12px 0 15px;

    border-bottom: 1px solid var(--feg-borde);
    margin-bottom: 14px;
}

#feg-asistente .feg-navegacion button {
    flex-shrink: 0;
    padding: 8px 10px;

    border: 1px solid #cfe3f6;
    border-radius: 9px;

    background: #fff;
    color: var(--feg-azul);

    font-size: 12px;
    font-weight: 700;
}

#feg-asistente .feg-navegacion button:hover {
    background: var(--feg-azul-claro);
}

#feg-asistente .feg-navegacion strong {
    flex: 1;
    min-width: 0;

    color: #243c55;
    font-size: 13px;
    font-weight: 800;

    overflow-wrap: anywhere;
}

/* Navegación específica del chat */

#feg-asistente .feg-chat > .feg-navegacion {
    flex-shrink: 0;
    padding: 12px 15px;
    margin: 0;

    background: #fff;
}

/* ==========================================================
   CATEGORÍAS
   ========================================================== */

#feg-asistente .feg-panel-categorias > p {
    margin: 0 0 13px;
    padding: 0;

    color: #697f95;
    font-size: 12px;
    line-height: 1.5;
}

#feg-asistente .feg-lista-categorias {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

#feg-asistente .feg-categoria-item {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-height: 88px;
    padding: 9px;

    border: 1px solid var(--feg-borde);
    border-radius: 14px;

    background: #fff;
    text-align: left;

    box-shadow: 0 3px 12px rgba(20, 55, 90, .04);

    transition:
        border-color .2s,
        transform .2s,
        box-shadow .2s;
}

#feg-asistente .feg-categoria-item:hover {
    border-color: #a9d4f7;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(21, 119, 213, .10);
}

#feg-asistente .feg-categoria-item img {
    display: block;
    flex-shrink: 0;

    width: 74px;
    height: 74px;

    border-radius: 10px;
    object-fit: cover;
    background: #edf3f8;
}

#feg-asistente .feg-cat-texto {
    display: flex;
    flex-direction: column;
    gap: 5px;

    flex: 1;
    min-width: 0;
}

#feg-asistente .feg-cat-texto strong {
    font-size: 13px;
    font-weight: 800;
    color: #263d55;
    overflow-wrap: anywhere;
}

#feg-asistente .feg-cat-texto small {
    color: #8190a0;
    font-size: 11px;
}

#feg-asistente .feg-cat-flecha {
    flex-shrink: 0;
    color: var(--feg-azul);
    font-size: 24px;
}

/* ==========================================================
   BUSCADOR
   ========================================================== */

#feg-asistente #feg-busqueda-formulario {
    display: flex;
    gap: 8px;

    padding: 0;
    margin: 0 0 14px;
}

#feg-asistente #feg-busqueda-texto {
    flex: 1;
    min-width: 0;

    padding: 12px;

    border: 1px solid #d6e3ef;
    border-radius: 11px;

    background: #fff;
    color: var(--feg-texto);

    font-size: 12px;
    outline: none;
}

#feg-asistente #feg-busqueda-texto:focus {
    border-color: var(--feg-azul);
    box-shadow: 0 0 0 3px rgba(21, 119, 213, .10);
}

#feg-asistente #feg-busqueda-formulario button {
    flex-shrink: 0;

    padding: 0 14px;

    border: 0;
    border-radius: 11px;

    background: var(--feg-azul);
    color: #fff;

    font-size: 12px;
    font-weight: 800;
}

/* ==========================================================
   RESULTADOS Y TARJETAS DE PRODUCTOS
   ========================================================== */

#feg-asistente .feg-resultados {
    min-width: 0;
}

#feg-asistente .feg-productos-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;

    width: 100%;
    min-width: 0;
    margin: 12px 0;
}

#feg-asistente .feg-producto-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    border: 1px solid var(--feg-borde);
    border-radius: 14px;

    background: #fff;
    box-shadow: 0 4px 15px rgba(20, 55, 90, .055);
}

#feg-asistente .feg-producto-imagen {
    display: block;
    width: 100%;
    height: 138px;

    object-fit: cover;
    background: #edf3f8;
}

#feg-asistente .feg-producto-info {
    display: flex;
    flex-direction: column;
    gap: 7px;

    flex: 1;
    min-width: 0;
    padding: 11px;
}

#feg-asistente .feg-producto-titulo {
    color: #263d55;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

#feg-asistente .feg-producto-sku {
    color: #8392a3;
    font-size: 10px;
}

#feg-asistente .feg-producto-precio {
    color: var(--feg-azul);
    font-size: 17px;
    font-weight: 800;
}

#feg-asistente .feg-producto-minimo {
    color: #a46c19;
    font-size: 10px;
    line-height: 1.4;
}

#feg-asistente .feg-producto-seleccionar {
    width: 100%;
    margin-top: auto;
    padding: 11px 8px;

    border: 0;
    border-radius: 9px;

    background: var(--feg-azul);
    color: #fff;

    font-size: 12px;
    font-weight: 800;
}

#feg-asistente .feg-producto-seleccionar:hover {
    background: var(--feg-azul-oscuro);
}

/* ==========================================================
   BOTONES DE EXPLORACIÓN
   ========================================================== */

#feg-asistente .feg-explorar-acciones {
    display: grid;
    gap: 9px;

    padding: 10px 0 15px;
}

#feg-asistente .feg-explorar-acciones button {
    width: 100%;
    padding: 12px;

    border: 0;
    border-radius: 11px;

    background: var(--feg-azul);
    color: #fff;

    font-size: 12px;
    font-weight: 800;
}

#feg-asistente .feg-explorar-acciones button:last-child {
    background: #eaf5ff;
    color: var(--feg-azul);
}

/* ==========================================================
   CONVERSACIÓN
   ========================================================== */

#feg-asistente .feg-mensajes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 11px;

    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;

    padding: 15px;
    padding-bottom: 22px;

    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    background: var(--feg-fondo);

    scrollbar-width: thin;
    scrollbar-color: #bdd5e9 transparent;
}

#feg-asistente .feg-mensajes::-webkit-scrollbar {
    width: 6px;
}

#feg-asistente .feg-mensajes::-webkit-scrollbar-thumb {
    background: #bdd5e9;
    border-radius: 10px;
}

/* MENSAJES */

#feg-asistente .feg-mensaje {
    display: block;
    position: relative;

    flex: 0 0 auto;
    width: fit-content;
    max-width: 88%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 12px 14px;

    border-radius: 15px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    animation: feg-mensaje .18s ease-out;
}

#feg-asistente .feg-robot,
#feg-asistente .feg-bienvenida {
    align-self: flex-start;
    margin-right: auto;

    background: #fff;
    color: #19314f;

    border: 1px solid #e0eaf5;
    border-radius: 15px 15px 15px 4px;
}

#feg-asistente .feg-usuario {
    align-self: flex-end;
    margin-left: auto;

    background: #d9efff;
    color: #123c60;

    border: 1px solid #c5e3f9;
    border-radius: 15px 15px 4px 15px;
}

#feg-asistente .feg-escribiendo {
    color: #647b93;
    font-size: 12px;
    font-style: italic;
}

/* Las tarjetas y formularios del chat ocupan
   todo el ancho disponible, sin quedar recortados. */

#feg-asistente .feg-mensajes > .feg-productos-lista,
#feg-asistente .feg-mensajes > .feg-panel {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* ==========================================================
   FORMULARIOS DE COMPRA
   ========================================================== */

#feg-asistente .feg-panel {
    width: 100%;
    min-width: 0;

    padding: 14px;
    margin: 7px 0;

    border: 1px solid var(--feg-borde);
    border-radius: 15px;

    background: #fff;
    box-shadow: 0 4px 16px rgba(20, 55, 90, .05);
}

#feg-asistente .feg-panel-titulo {
    margin-bottom: 12px;

    color: #243c55;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

#feg-asistente .feg-panel-producto {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 13px;
}

#feg-asistente .feg-panel-foto {
    flex-shrink: 0;

    width: 75px;
    height: 75px;

    border-radius: 10px;
    object-fit: cover;
}

#feg-asistente .feg-panel-nombre {
    color: #263d55;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

#feg-asistente .feg-panel-precio {
    margin-top: 5px;

    color: var(--feg-azul);
    font-size: 16px;
    font-weight: 800;
}

#feg-asistente .feg-panel-acciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

#feg-asistente .feg-campo {
    margin-bottom: 12px;
}

#feg-asistente .feg-campo label {
    display: block;
    margin-bottom: 5px;

    color: #344b63;
    font-size: 11px;
    font-weight: 800;
}

#feg-asistente .feg-campo input,
#feg-asistente .feg-campo select,
#feg-asistente .feg-campo textarea {
    display: block;

    width: 100%;
    min-width: 0;
    padding: 11px;

    border: 1px solid #d7e3ef;
    border-radius: 10px;

    background: #fff;
    color: #243c55;

    font-size: 12px;
    line-height: 1.5;
}

#feg-asistente .feg-campo textarea {
    resize: vertical;
    min-height: 75px;
}

#feg-asistente .feg-campo input:focus,
#feg-asistente .feg-campo select:focus,
#feg-asistente .feg-campo textarea:focus {
    border-color: var(--feg-azul);
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 119, 213, .10);
}

#feg-asistente .feg-btn-principal,
#feg-asistente .feg-btn-secundario {
    width: 100%;
    padding: 11px 9px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

#feg-asistente .feg-btn-principal {
    border: 1px solid var(--feg-azul);
    background: var(--feg-azul);
    color: #fff;
}

#feg-asistente .feg-btn-principal:hover {
    background: var(--feg-azul-oscuro);
}

#feg-asistente .feg-btn-secundario {
    border: 1px solid #cce2f6;
    background: #edf7ff;
    color: var(--feg-azul);
}

#feg-asistente .feg-btn-secundario:hover {
    background: #dceeff;
}

#feg-asistente .feg-resumen {
    padding: 12px;
    margin: 12px 0;

    border: 1px solid #dcecff;
    border-radius: 11px;

    background: #f1f8ff;
    color: #344b63;

    font-size: 12px;
}

#feg-asistente .feg-resumen-fila {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    margin: 7px 0;
}

#feg-asistente .feg-resumen-fila strong {
    text-align: right;
    overflow-wrap: anywhere;
}

/* ==========================================================
   AVISOS Y ERRORES
   ========================================================== */

#feg-asistente .feg-aviso {
    margin: 10px 0;
    padding: 0;

    background: transparent;
    color: #718096;

    font-size: 11px;
    line-height: 1.55;
    text-align: left;
}

#feg-asistente .feg-error {
    margin: 10px 0;
    padding: 10px;

    border: 1px solid #ffd5d2;
    border-radius: 9px;

    background: #fff3f2;
    color: #b42318;

    font-size: 11px;
    line-height: 1.5;
}

#feg-asistente .feg-oculto {
    display: none !important;
}

#feg-asistente button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ==========================================================
   FORMULARIO DE ENVÍO DE MENSAJES
   ========================================================== */

#feg-asistente .feg-formulario {
    display: flex;
    align-items: center;
    gap: 9px;

    flex-shrink: 0;
    padding: 12px;

    border-top: 1px solid var(--feg-borde);
    background: #fff;
}

#feg-asistente .feg-formulario input {
    flex: 1;
    min-width: 0;

    padding: 12px 14px;

    border: 1px solid #dce4ec;
    border-radius: 22px;

    background: #fff;
    color: #19314f;

    font-size: 13px;
    outline: none;
}

#feg-asistente .feg-formulario input::placeholder {
    color: #98a8b8;
}

#feg-asistente .feg-formulario input:focus {
    border-color: var(--feg-azul);
    box-shadow: 0 0 0 3px rgba(21, 119, 213, .10);
}

#feg-asistente .feg-formulario button {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: var(--feg-azul);
    color: #fff;

    font-size: 19px;
}

#feg-asistente .feg-formulario button:hover:not(:disabled) {
    background: var(--feg-azul-oscuro);
}

/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

#feg-asistente .feg-sr {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================
   ANIMACIONES
   ========================================================== */

@keyframes feg-mensaje {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================
   RESPONSIVE - CELULARES
   ========================================================== */

@media (max-width: 480px) {

    #feg-asistente {
        right: 12px;
        bottom: 12px;
    }

    #feg-asistente .feg-boton {
        width: 67px;
        height: 67px;
    }

    #feg-asistente .feg-ventana {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: 89px;

        width: auto;
        max-width: none;
        height: min(620px, calc(100dvh - 105px));

        border-radius: 19px;
    }

    #feg-asistente .feg-cabecera {
        min-height: 72px;
        padding: 11px 12px;
    }

    #feg-asistente .feg-cabecera > img {
        width: 43px;
        height: 43px;
    }

    #feg-asistente .feg-identidad strong {
        font-size: 14px;
    }

    #feg-asistente .feg-inicio,
    #feg-asistente .feg-explorar {
        padding: 13px;
    }

    #feg-asistente .feg-menu-opcion {
        min-height: 76px;
        padding: 11px;
    }

    #feg-asistente .feg-menu-icono {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        font-size: 21px;
    }

    #feg-asistente .feg-producto-imagen {
        height: 120px;
    }

    #feg-asistente .feg-producto-info {
        padding: 9px;
    }

    #feg-asistente .feg-mensajes {
        padding: 12px;
        padding-bottom: 20px;
    }

    #feg-asistente .feg-mensaje {
        max-width: 92%;
        font-size: 13px;
    }

    #feg-asistente .feg-formulario {
        padding: 10px;
    }
}

/* PANTALLAS MUY PEQUEÑAS */

@media (max-width: 350px) {

    #feg-asistente .feg-identidad span {
        font-size: 10px;
    }

    #feg-asistente .feg-menu-texto strong {
        font-size: 12px;
    }

    #feg-asistente .feg-menu-texto small {
        font-size: 10px;
    }

    #feg-asistente .feg-productos-lista {
        gap: 7px;
    }

    #feg-asistente .feg-producto-imagen {
        height: 105px;
    }

    #feg-asistente .feg-panel-acciones {
        grid-template-columns: 1fr;
    }
}

/* MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {

    #feg-asistente *,
    #feg-asistente *::before,
    #feg-asistente *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* ==========================================================
   FLORES EL GATO - MEJORAS VISUALES
   Conserva todos los estilos anteriores
   ========================================================== */

/* Ventana principal */

#feg-asistente .feg-ventana {
    box-shadow:
        0 22px 70px rgba(16, 43, 75, .19),
        0 4px 16px rgba(16, 43, 75, .07);
}

/* Fondo y distribución de mensajes */

#feg-asistente .feg-mensajes {
    gap: 12px;
    background: linear-gradient(
        180deg,
        #f7faff 0%,
        #f2f6fc 100%
    );
}

#feg-asistente .feg-mensaje {
    box-shadow: 0 2px 8px rgba(20, 55, 90, .035);
    line-height: 1.6;
}

#feg-asistente .feg-robot,
#feg-asistente .feg-bienvenida {
    border-color: #e5edf6;
}

/* Paneles y botones */

#feg-asistente .feg-panel {
    border-color: #e3ebf5;
    box-shadow: 0 7px 22px rgba(20, 55, 90, .06);
}

#feg-asistente .feg-btn-principal {
    transition:
        background .2s,
        transform .2s,
        box-shadow .2s;
}

#feg-asistente .feg-btn-principal:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(21, 119, 213, .2);
}

/* ==========================================================
   TARJETA PROFESIONAL DE CARRITO RECUPERADO
   ========================================================== */

#feg-asistente .feg-recuperacion {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding: 16px;
    margin: 2px 0 8px;

    border: 1px solid #dce9f7;
    border-radius: 18px;

    background: #fff;

    box-shadow: 0 8px 26px rgba(18, 61, 105, .075);

    animation: feg-mensaje .2s ease-out;
}

/* Encabezado */

#feg-asistente .feg-recuperacion-encabezado {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

#feg-asistente .feg-recuperacion-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;
    width: 44px;
    height: 44px;

    border-radius: 14px;
    background: #e8f4ff;

    font-size: 23px;
}

#feg-asistente .feg-recuperacion-titulo {
    display: block;
    margin: 0;

    color: #193b5e;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

#feg-asistente .feg-recuperacion-subtitulo {
    display: block;
    margin-top: 3px;

    color: #74879b;
    font-size: 11px;
    line-height: 1.45;
}

/* Descripción */

#feg-asistente .feg-recuperacion-descripcion {
    margin: 0 0 13px;

    color: #506780;
    font-size: 12px;
    line-height: 1.6;
}

/* Resumen del carrito */

#feg-asistente .feg-recuperacion-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-bottom: 13px;
    padding: 11px 12px;

    border: 1px solid #e6eef7;
    border-radius: 11px;

    background: #f6faff;
    color: #314b65;

    font-size: 12px;
}

#feg-asistente .feg-recuperacion-resumen strong {
    color: #183e62;
    font-size: 12px;
    font-weight: 800;
}

/* Etiqueta de carrito guardado */

#feg-asistente .feg-recuperacion-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;

    padding: 4px 8px;

    border-radius: 99px;
    background: #e5f7ed;
    color: #23784d;

    font-size: 10px;
    font-weight: 800;
}

/* Botón para continuar la compra */

#feg-asistente .feg-recuperacion .feg-btn-principal {
    min-height: 44px;
    border-radius: 11px;
    font-size: 12px;
}

/* Texto inferior */

#feg-asistente .feg-recuperacion-pie {
    margin: 11px 0 0;

    color: #8a99a9;
    text-align: center;

    font-size: 10px;
    line-height: 1.5;
}

/* Adaptación a celulares */

@media (max-width: 480px) {

    #feg-asistente .feg-recuperacion {
        padding: 13px;
        border-radius: 15px;
    }

    #feg-asistente .feg-recuperacion-encabezado {
        gap: 9px;
    }
}

/* ==========================================================
   AJUSTE FINAL: TARJETA RECUPERADA Y ESPACIO DEL CHAT
   Agregado sin reemplazar reglas anteriores.
   ========================================================== */
#feg-asistente .feg-mensajes > .feg-recuperacion,
#feg-asistente .feg-chat .feg-recuperacion {
    display: block;
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding: 16px;
    margin: 4px 0 12px;
    border: 1px solid #dce9f7;
    border-radius: 17px;
    background: #fff;
    color: #21364d;
    box-shadow: 0 8px 26px rgba(18,61,105,.08);
    white-space: normal;
    overflow-wrap: break-word;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-encabezado {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 12px;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-encabezado > div:last-child {
    flex: 1;
    min-width: 0;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-icono {
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #e8f4ff;
    font-size: 23px;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-titulo {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    color: #193b5e;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-subtitulo {
    display: block;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 400;
    color: #74879b;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-descripcion {
    display: block;
    margin: 0 0 14px;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #506780;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    margin: 0 0 13px;
    border: 1px solid #e6eef7;
    border-radius: 11px;
    background: #f6faff;
    font-size: 12px;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-resumen > div {
    min-width: 0;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-resumen strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #183e62;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-etiqueta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 5px 8px;
    border-radius: 99px;
    background: #e5f7ed;
    color: #23784d;
    font-size: 10px;
    font-weight: 800;
}
#feg-asistente .feg-recuperacion .feg-btn-principal {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 1px solid #1577d5;
    border-radius: 11px;
    background: #1577d5;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    white-space: normal;
}
#feg-asistente .feg-recuperacion .feg-recuperacion-pie {
    display: block;
    margin: 11px 0 0;
    color: #8a99a9;
    text-align: center;
    font-size: 10px;
    line-height: 1.5;
}
#feg-asistente .feg-mensajes {
    scroll-padding-bottom: 20px;
}
@media (max-width: 480px) {
    #feg-asistente .feg-mensajes > .feg-recuperacion,
    #feg-asistente .feg-chat .feg-recuperacion {
        padding: 13px;
        border-radius: 15px;
    }
}

/* GOOGLE MAPS - SUGERENCIAS DE DIRECCIÓN */

.pac-container {
    z-index: 2147483647 !important;
    border-radius: 12px;
    border: 1px solid #dce5ef;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .14);
    font-family: Arial, sans-serif;
}

.pac-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
}

.pac-item:hover,
.pac-item-selected {
    background: #eef6ff;
}

.pac-item-query {
    font-size: 13px;
    color: #24364d;
}

#feg-pedido-direccion_completa {
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================
   GOOGLE MAPS - SUGERENCIAS VISIBLES
   ========================================== */

.pac-container {
    z-index: 2147483647 !important;
    background: #ffffff !important;
    border: 1px solid #dce5ef !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.18) !important;
    font-family: Arial, sans-serif !important;
}

.pac-item {
    padding: 10px 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.pac-item:hover,
.pac-item-selected {
    background: #eef6ff !important;
}

.pac-item-query {
    color: #24364d !important;
    font-size: 13px !important;
}

.pac-matched {
    font-weight: 700 !important;
}