/* ==========================================================================
   Asesor Olfativo - widget conversacional de recomendacion
   Usa las variables de styles.css para no duplicar la paleta.
   ========================================================================== */

.asesor-lanzador {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background: linear-gradient(135deg, #dddad4, #dcd9d2);
    color: var(--primary-light);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.asesor-lanzador:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 14px 40px rgba(23, 24, 21, 0.078), 0 0 24px var(--primary-glow);
}

.asesor-lanzador .asesor-chispa {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--acento, #cde3b4);
    color: #171815;
    font-size: 18px;
}

/* Punto pulsante que indica que el asesor esta disponible */
.asesor-lanzador::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: asesor-latido 2.4s infinite;
}

@keyframes asesor-latido {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.asesor-lanzador[hidden] { display: none; }

/* --- Panel --- */

.asesor-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 960;
    display: flex;
    flex-direction: column;
    width: min(410px, calc(100vw - 32px));
    height: min(640px, calc(100dvh - 40px));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: #dcd9d2;
    box-shadow: 0 30px 80px rgba(23, 24, 21, 0.09);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(.97);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}

.asesor-panel.abierto {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.asesor-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(23, 24, 21, 0.049), transparent);
}

.asesor-cabecera h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.25;
}

.asesor-cabecera p {
    font-size: .76rem;
    color: var(--text-muted);
}

.asesor-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--acento, #cde3b4);
    color: #171815;
    font-size: 20px;
}

.asesor-cerrar {
    margin-left: auto;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s;
}

.asesor-cerrar:hover { color: var(--primary); }

/* --- Conversacion --- */

.asesor-hilo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-dark) transparent;
}

.asesor-hilo::-webkit-scrollbar { width: 6px; }
.asesor-hilo::-webkit-scrollbar-thumb {
    background: var(--primary-dark);
    border-radius: 3px;
}

.asesor-msg {
    max-width: 88%;
    padding: 11px 15px;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    animation: asesor-entrada .3s ease both;
}

@keyframes asesor-entrada {
    from { opacity: 0; transform: translateY(6px); }
}

.asesor-msg.de-ia {
    align-self: flex-start;
    border: 1px solid var(--border-subtle);
    border-bottom-left-radius: 5px;
    background: #dddad3;
    color: var(--text-main);
}

.asesor-msg.de-usuario {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #171815;
    font-weight: 500;
}

.asesor-msg.es-error {
    border-color: rgba(248, 113, 113, .4);
    background: rgba(248, 113, 113, .1);
    color: #b42318;
    font-size: .85rem;
}

.asesor-escribiendo {
    display: flex;
    gap: 5px;
    align-self: flex-start;
    padding: 14px 16px;
}

.asesor-escribiendo span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: asesor-rebote 1.3s infinite ease-in-out;
}

.asesor-escribiendo span:nth-child(2) { animation-delay: .18s; }
.asesor-escribiendo span:nth-child(3) { animation-delay: .36s; }

@keyframes asesor-rebote {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-5px); }
}

/* --- Fichas de producto recomendadas --- */

.asesor-fichas {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-self: stretch;
    animation: asesor-entrada .35s ease both;
}

.asesor-ficha {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(23, 24, 21, 0.063), rgba(221, 218, 211, .88));
    transition: var(--transition);
}

.asesor-ficha:hover {
    border-color: var(--primary);
    transform: translateX(3px);
}

.asesor-ficha img {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #dcd9d2;
    object-fit: contain;
}

.asesor-ficha-datos { flex: 1; min-width: 0; }

.asesor-ficha-datos strong {
    display: block;
    font-size: .89rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asesor-ficha-datos small {
    display: block;
    font-size: .74rem;
    color: var(--text-muted);
}

.asesor-ficha-datos .asesor-precio {
    margin-top: 3px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--primary);
}

.asesor-ficha-btn {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid var(--primary);
    border-radius: 50px;
    background: transparent;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.asesor-ficha-btn:hover {
    background: var(--primary);
    color: #171815;
}

/* --- Sugerencias rapidas --- */

.asesor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 18px 12px;
}

.asesor-chip {
    padding: 7px 13px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background: rgba(23, 24, 21, 0.042);
    color: var(--primary-light);
    font-family: var(--font-body);
    font-size: .78rem;
    cursor: pointer;
    transition: var(--transition);
}

.asesor-chip:hover {
    background: var(--primary);
    color: #171815;
}

/* --- Entrada de texto --- */

.asesor-pie {
    display: flex;
    gap: 9px;
    align-items: flex-end;
    padding: 12px 14px;
    border-top: 1px solid var(--border-subtle);
    background: #dcd9d2;
}

.asesor-entrada {
    flex: 1;
    max-height: 110px;
    padding: 11px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: #dddad3;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: .92rem;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color .2s;
}

.asesor-entrada:focus { border-color: var(--primary); }
.asesor-entrada::placeholder { color: #8A7B62; }

.asesor-enviar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #171815;
    color: #f4f0e7;
    cursor: pointer;
    transition: var(--transition);
}

.asesor-enviar:disabled { opacity: .4; cursor: not-allowed; }
.asesor-enviar:not(:disabled):hover { transform: scale(1.07); }

.asesor-aviso {
    padding: 0 18px 10px;
    color: #5a5b53;
    font-size: .72rem;
    text-align: center;
}

/* --- Movil: el panel ocupa la pantalla completa --- */

@media (max-width: 560px) {
    .asesor-panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .asesor-lanzador {
        right: 16px;
        bottom: 88px; /* por encima del carrito flotante */
        padding: 12px 17px 12px 13px;
        font-size: .85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .asesor-panel,
    .asesor-msg,
    .asesor-fichas,
    .asesor-lanzador::after,
    .asesor-escribiendo span {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   Asesor en el sistema claro: papel, tinta y acento. Tus mensajes van en tinta
   con letra clara; los del asesor, en papel con borde. Contraste AA en todo.
   ========================================================================== */
.asesor-lanzador {
    background: #171815;
    color: #f4f0e7;
    border: 1px solid #171815;
    border-radius: 6px;
    box-shadow: none;
}
.asesor-lanzador:hover { box-shadow: none; background: #2a2b27; }
.asesor-lanzador::after { background: var(--acento, #cde3b4); animation: none; box-shadow: none; }

.asesor-panel {
    background: #f4f0e7;
    border: 1px solid rgba(23, 24, 21, .22);
    border-radius: 6px;
    box-shadow: 0 20px 50px rgba(23, 24, 21, .14);
}
.asesor-cabecera { background: #f4f0e7; border-bottom: 1px solid rgba(23, 24, 21, .22); }
.asesor-cabecera h3 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; }
.asesor-cabecera p { color: #3a3b36; }
.asesor-cerrar { color: #171815; }
.asesor-hilo { scrollbar-color: rgba(23, 24, 21, .3) transparent; }
.asesor-hilo::-webkit-scrollbar-thumb { background: rgba(23, 24, 21, .3); }

.asesor-msg { border-radius: 6px; font-size: .95rem; line-height: 1.5; }
.asesor-msg.de-ia {
    background: #faf8f3;
    border: 1px solid rgba(23, 24, 21, .16);
    border-bottom-left-radius: 2px;
    color: #171815;
}
.asesor-msg.de-usuario {
    background: #171815;
    border: 1px solid #171815;
    border-bottom-right-radius: 2px;
    color: #f4f0e7;
}
.asesor-msg.de-usuario strong { color: #f4f0e7; }
.asesor-msg.es-error { background: #fff4f2; border: 1px solid #b42318; color: #b42318; }
.asesor-escribiendo span { background: #171815; }

.asesor-ficha {
    background: #faf8f3;
    border: 1px solid rgba(23, 24, 21, .22);
    border-radius: 6px;
}
.asesor-ficha:hover { border-color: #171815; }
.asesor-ficha img { border-radius: 4px; background: #ece7dc; }
.asesor-ficha-datos .asesor-precio { color: #171815; }
.asesor-ficha-btn { border: 1px solid #171815; border-radius: 4px; color: #171815; background: var(--acento, #cde3b4); }
.asesor-ficha-btn:hover { background: #171815; color: #f4f0e7; }

.asesor-chip {
    border: 1px solid rgba(23, 24, 21, .3);
    border-radius: 4px;
    background: #faf8f3;
    color: #171815;
}
.asesor-chip:hover { background: #171815; color: #f4f0e7; border-color: #171815; }

.asesor-pie { background: #f4f0e7; border-top: 1px solid rgba(23, 24, 21, .22); }
.asesor-entrada {
    background: #faf8f3;
    border: 1px solid rgba(23, 24, 21, .3);
    border-radius: 6px;
    color: #171815;
    font-size: 16px; /* 16 px: iPhone no hace zoom al escribir */
}
.asesor-entrada:focus { border-color: #171815; outline: 2px solid var(--acento, #cde3b4); outline-offset: 1px; }
.asesor-entrada::placeholder { color: #5a5b53; }
.asesor-enviar { border-radius: 6px; background: #171815; color: #f4f0e7; }
.asesor-enviar:not(:disabled):hover { transform: none; background: var(--acento, #cde3b4); color: #171815; }
.asesor-aviso a { color: #171815; text-decoration: underline; }