/* ==============================
   ASISTENTE DE PREGUNTAS
   Widget flotante presente en todas las páginas. Se carga siempre desde
   header.php, como el footer, porque no pertenece a ninguna vista concreta.

   Ocupa la esquina inferior derecha, que es donde el usuario la busca. Antes la
   tenía el WhatsApp flotante del footer —un personaje con globo de hasta 270 px
   y z-index 999, que llegó a interceptar el clic del asistente—, pero ese botón
   se retiró: hacían lo mismo. Cuando el asistente no sabe responder ofrece
   "Hablar con un asesor", que lleva al mismo WhatsApp con la consulta ya
   escrita, así que no se pierde el canal — se gana el paso previo.
============================== */

.asistente__fab {
    position: fixed;
    right: 32px;
    bottom: 24px;
    z-index: 1000;

    width: 68px;
    height: 68px;
    border: none;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--transition);
}

.asistente__fab:hover {
    background: var(--gold-500);
    transform: translateY(-2px);
}

.asistente__fab-icono {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* La cruz solo aparece con el panel abierto; se intercambian sin recrear nada
   para que el botón no “salte” al cambiar de estado. */
.asistente__fab-cerrar {
    display: none;
    font-size: 30px;
    color: var(--black-800);
    line-height: 1;
}

.asistente__fab--abierto .asistente__fab-icono { display: none; }
.asistente__fab--abierto .asistente__fab-cerrar { display: block; }

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

.asistente {
    position: fixed;
    right: 32px;
    bottom: 104px;             /* deja libre el FAB */
    z-index: 1000;

    width: 400px;
    max-width: calc(100vw - 64px);
    max-height: min(600px, calc(100vh - 150px));

    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.asistente[hidden] { display: none; }

.asistente__cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--gold-400);
}

.asistente__avatar {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.asistente__titulo {
    margin: 0;
    font-weight: 700;
    font-size: 16.5px;
    color: var(--black-900);
}

.asistente__estado {
    margin: 0;
    font-size: 13px;
    color: var(--black-700);
}

.asistente__cerrar {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--black-800);
    display: grid;
    place-items: center;
}

.asistente__cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--black-50);
}

/* ---------- Burbujas ---------- */

.asistente__burbuja {
    max-width: 86%;
    padding: 11px 14px;
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-line;
}

.asistente__burbuja--bot {
    align-self: flex-start;
    background: var(--white);
    color: var(--black-800);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow);
}

.asistente__burbuja--usuario {
    align-self: flex-end;
    background: var(--gold-400);
    color: var(--black-900);
    border-bottom-right-radius: 4px;
}

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

.asistente__sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 10px;
    background: var(--black-50);
}

.asistente__sugerencias:empty { display: none; }

.asistente__sugerencia {
    border: 1px solid var(--gold-300);
    background: var(--white);
    color: var(--black-700);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13.5px;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}

.asistente__sugerencia:hover {
    background: var(--gold-50);
    border-color: var(--gold-400);
}

/* El enlace al asesor se distingue del resto: es salir del sitio. */
.asistente__asesor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    background: var(--green-400);
    color: var(--white);
    transition: var(--transition);
}

.asistente__asesor:hover { background: var(--green-500); }

/* ---------- Escribir ---------- */

.asistente__form {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--black-50);
    background: var(--white);
}

.asistente__input {
    flex: 1;
    border: 1px solid var(--black-100);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--black-800);
    outline: none;
    transition: var(--transition);
}

.asistente__input:focus { border-color: var(--gold-400); }

.asistente__enviar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--gold-400);
    color: var(--black-900);
    font-size: 16px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--transition);
}

.asistente__enviar:hover { background: var(--gold-500); }

/* ---------- Responsive ---------- */

@media (max-width: 576px) {
    .asistente {
        left: 12px;
        right: 12px;
        bottom: 92px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 120px);
    }

    .asistente__fab {
        right: 16px;
        bottom: 16px;
        width: 60px;
        height: 60px;
    }

    .asistente__fab-icono {
        width: 38px;
        height: 38px;
    }
}

/* ==============================
   CAPTCHA DEL LIBRO DE RECLAMACIONES
   El hueco lo inserta complaints.js justo antes del botón de enviar, solo si
   el API dice que el captcha está activo y en versión v2 (la v3 es invisible).
   Vive aquí y no en un archivo propio porque es una sola regla y este CSS ya
   se carga en todas las vistas.
============================== */
.complaints-form__captcha {
    margin: 0 0 16px;
    display: flex;
    justify-content: center;
}