/* El botón flotante de WhatsApp del sitio se oculta: el único lanzador es el
   del asistente, que ya ofrece WhatsApp dentro de la conversación. Se hace
   desde aquí y no desde el tema, así que desactivar el complemento lo
   devuelve tal cual estaba. */
#cpneumatics-whatsapp-footer {
    display: none !important;
}

/* Único botón flotante: el del asistente. */
.floating-chatbot-button {
    bottom: 24px !important;
    right: 24px !important;
    width: 60px !important;
    height: 60px !important;
    /* MxChat usa send_button_font_color tanto para el icono del lanzador como
       para el botón de enviar dentro del chat. El naranja de marca funciona
       sobre el fondo blanco del chat, pero sobre el azul del lanzador da 3.9:1.
       Aquí se fuerza blanco solo en el lanzador: 13:1 y el botón de enviar
       conserva su naranja. */
    color: #ffffff !important;
}

.pre-chat-message {
    display: none !important;
}

@media (max-width: 480px) {
    #floating-chatbot-button-default.floating-chatbot-button {
        bottom: 18px !important;
        right: 18px !important;
        width: 64px !important;
        height: 64px !important;
    }
    #floating-chatbot-button-default.floating-chatbot-button > svg {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Preguntas rápidas: colores de marca y espaciado compacto.
   MxChat las pinta en gris genérico (#f5f5f5 sobre borde #bbb) con un anillo
   de foco azul cornflower, y acumula 32px de relleno y margen bajo el grupo
   más una fila entera para la flecha de plegado. Con cuatro opciones eso
   rozaba el límite de 200px de alto y aparecía barra de desplazamiento. */
.mxchat-popular-questions {
    padding: 0 10px 2px !important;
    margin-bottom: 2px !important;
}

.mxchat-popular-questions-container {
    padding: 0 !important;
    gap: 6px !important;
    max-height: 280px !important;
}

.mxchat-popular-question {
    background-color: #ffffff !important;
    border: 1px solid #ccd9e5 !important;
    border-radius: 10px !important;
    color: #00305d !important;
    font-weight: 500 !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}

/* La flecha de plegado ocupaba una fila de 32px encima de las opciones.
   Se reduce y se alinea a la derecha para que no robe espacio vertical. */
.questions-collapse-btn,
.questions-toggle-btn {
    width: 22px !important;
    height: 18px !important;
    align-self: flex-end !important;
    opacity: 0.55;
}

.questions-collapse-btn:hover,
.questions-toggle-btn:hover {
    opacity: 1;
}

.questions-collapse-btn svg,
.questions-toggle-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.mxchat-popular-question:hover {
    background-color: #eef3f8 !important;
    border-color: #00305d !important;
    box-shadow: none !important;
    transform: none !important;
}

.mxchat-popular-question:active {
    background-color: #e2ebf3 !important;
    border-color: #00305d !important;
    box-shadow: none !important;
}

.mxchat-popular-question:focus-visible {
    outline: 2px solid #00305d !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* La flecha de plegado también venía en gris oscuro. */
.questions-collapse-btn svg,
.questions-toggle-btn svg {
    stroke: #00305d !important;
}

.mxchat-popular-questions-container {
    scrollbar-color: #ccd9e5 transparent !important;
}

/* Avatar de marca en la barra del chat.
   MxChat no tiene opción de logo ni avatar, así que se inyecta aquí. El
   isotipo va dentro de un círculo blanco: sus azules quedan cerca del
   #00305d de la barra y sin el círculo apenas se distinguirían.
   La imagen llega en --cpn-avatar desde el PHP, tomada del icono del sitio;
   si no hay icono definido la variable no existe y no se pinta nada. */
.chatbot-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.chatbot-title-group::before {
    /* Sin icono de sitio, el PHP no define --cpn-avatar-on y el círculo no
       llega a pintarse. No sirve @supports: los navegadores dan var() por
       válida en tiempo de análisis aunque la variable no exista. */
    display: var(--cpn-avatar-on, none);
    content: "";
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ffffff;
    background-image: var(--cpn-avatar);
    background-size: 22px 22px;
    background-position: center;
    background-repeat: no-repeat;
}

/* El avatar respira mientras el asistente redacta.
   El compás es el mismo 1,4 s de los puntos de «escribiendo» de MxChat, así
   que los dos elementos laten juntos en vez de pelearse. Escala el círculo,
   que el navegador compone en GPU; una sombra animada obligaría a repintar
   la barra en cada fotograma. */
@keyframes cpn-avatar-respira {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09); }
}

.cpn-redactando .chatbot-title-group::before {
    animation: cpn-avatar-respira 1.4s ease-in-out infinite;
}

/* Enlaces dentro de los mensajes del bot.
   MxChat los pinta en blanco porque su burbuja por defecto es gris oscuro.
   Con la burbuja clara de la paleta de marca quedaban invisibles. */
.bot-message a,
.bot-message a:visited {
    color: #005596 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    font-weight: 500;
}

.bot-message a:hover,
.bot-message a:focus {
    color: #00305d !important;
    text-decoration: underline !important;
}

.bot-message a:focus-visible {
    outline: 2px solid #00305d;
    outline-offset: 2px;
    border-radius: 2px;
}

/* La burbuja del usuario sí es azul oscuro: ahí el enlace va claro. */
.user-message a,
.user-message a:visited {
    color: #b4d5e8 !important;
    text-decoration: underline !important;
}

/* ---------------------------------------------------------------------
   Animaciones. Solo transform y opacity, que el navegador compone en GPU
   y no provocan recálculo de diseño. Duraciones cortas: una animación
   lenta se percibe como lentitud del chat, no como elegancia.
   Todo se desactiva con prefers-reduced-motion al final del bloque.
   --------------------------------------------------------------------- */

/* Entrada de cada mensaje. MxChat no anima los mensajes, aparecen de golpe.
   El desplazamiento lateral es mínimo y opuesto según quién habla, lo que
   refuerza de quién es la burbuja sin resultar llamativo. */
@keyframes cpn-msg-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

/* Colgado de .visible, que es la clase que MxChat pone al abrir el panel.
   Sin ese anclaje la animación se gastaría invisible: el widget está en el
   DOM desde que carga la página, solo que transparente, así que el saludo
   inicial habría terminado de animarse mucho antes de que nadie lo abra.
   Al colgarla de la apertura, además, los mensajes ya escritos reaparecen
   con un fundido cuando se vuelve a abrir el chat. */
.floating-chatbot.visible .chat-box .bot-message,
.floating-chatbot.visible .chat-box .user-message {
    animation: cpn-msg-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.chat-box .bot-message {
    transform-origin: left bottom;
}

.chat-box .user-message {
    transform-origin: right bottom;
}

/* El recuadro de solicitud aparece después del texto, con un respiro. */
.cpn-solicitud {
    animation: cpn-msg-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

/* Lanzador: anillo de atención que se expande desde el borde.
   Son dos pseudoelementos desfasados, así que hay una onda saliendo cada
   1,4 s en lugar de un parpadeo. Escalan un borde de 2px desde el propio
   contorno hacia fuera, de modo que nunca tapan el icono ni hace falta
   pelearse con el z-index del botón. Solo transform y opacity. */
@keyframes cpn-halo {
    0%   { transform: scale(1);    opacity: 0.5; }
    70%  { transform: scale(1.75); opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
}

.floating-chatbot-button::before,
.floating-chatbot-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #00305d;
    opacity: 0;
    pointer-events: none;
    animation: cpn-halo 2.8s ease-out infinite;
}

.floating-chatbot-button::after {
    animation-delay: 1.4s;
}

/* Con el cursor encima el anillo sobra: ya hay respuesta al hover. */
.floating-chatbot-button:hover::before,
.floating-chatbot-button:hover::after {
    animation-play-state: paused;
    opacity: 0;
}

/* Lanzador: crece un poco al pasar el cursor y la sombra acompaña. */
.floating-chatbot-button {
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    will-change: transform;
}

.floating-chatbot-button:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(0, 48, 93, 0.35) !important;
}

.floating-chatbot-button:active {
    transform: scale(0.97);
}

/* Preguntas rápidas: elevación apenas perceptible. */
.mxchat-popular-question {
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}

.mxchat-popular-question:hover {
    transform: translateY(-1px);
}

.mxchat-popular-question:active {
    transform: translateY(0);
}

/* Preguntas rápidas: mismo escalonado al abrir el chat. Se acota al
   contenedor inferior porque las fichas de un mensaje comparten la clase
   .mxchat-popular-question y ya tienen su propio escalonado.

   El índice lo pone el JS y no :nth-child, porque el contenedor empieza con
   los dos botones de plegar y desplegar: contando hijos, la primera pregunta
   sería la tercera y el escalonado saldría desordenado. Un cambio de marcado
   del plugin volvería a romperlo en silencio. */
.floating-chatbot.visible .mxchat-popular-questions-container > .mxchat-popular-question {
    animation: cpn-msg-in 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--cpn-i, 0) * 50ms);
}

/* Botón de enviar: el avión de papel acusa el clic y se inclina al pasar el
   cursor. Sin esto el único aviso de que se envió es que el texto desaparece. */
.send-button {
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.send-button:hover {
    transform: translate(1px, -1px) scale(1.08);
}

.send-button:active {
    transform: scale(0.9);
}

/* Botón de envío por WhatsApp. */
.cpn-wa-send {
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cpn-wa-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}

.cpn-wa-send:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Profundidad sutil en las burbujas, para que no floten sobre un plano. */
.chat-box .bot-message,
.chat-box .user-message {
    box-shadow: 0 1px 2px rgba(15, 34, 51, 0.06);
}

/* Barra de desplazamiento del chat, discreta y en la paleta. */
.chat-box {
    scrollbar-width: thin;
    scrollbar-color: #ccd9e5 transparent;
}

.chat-box::-webkit-scrollbar {
    width: 6px;
}

.chat-box::-webkit-scrollbar-thumb {
    background: #ccd9e5;
    border-radius: 3px;
}

.chat-box::-webkit-scrollbar-track {
    background: transparent;
}

/* Quien pide menos movimiento en su sistema no recibe ninguno: las
   animaciones de entrada pueden provocar mareo o distracción. */
@media (prefers-reduced-motion: reduce) {
    .floating-chatbot.visible .chat-box .bot-message,
    .floating-chatbot.visible .chat-box .user-message,
    .cpn-solicitud {
        animation: none !important;
    }

    .floating-chatbot-button::before,
    .floating-chatbot-button::after {
        animation: none !important;
        opacity: 0 !important;
    }

    .floating-chatbot-button,
    .mxchat-popular-question,
    .cpn-wa-send,
    .send-button {
        transition: none !important;
    }

    .floating-chatbot-button:hover,
    .mxchat-popular-question:hover,
    .cpn-wa-send:hover,
    .send-button:hover,
    .send-button:active {
        transform: none !important;
    }

    /* El avatar deja de respirar y las fichas aparecen ya colocadas: los
       puntos de «escribiendo» de MxChat siguen indicando que hay respuesta
       en camino, así que no se pierde información. */
    .cpn-redactando .chatbot-title-group::before,
    .cpn-opciones .cpn-opcion,
    .floating-chatbot.visible .mxchat-popular-questions-container > .mxchat-popular-question {
        animation: none !important;
    }
}

/* Opciones seleccionables dentro de un mensaje del bot.
   Llevan la clase .mxchat-popular-question para reutilizar el manejador de
   MxChat, así que hay que devolverles el ancho automático: la regla del
   contenedor inferior las estira a toda la columna. */
.cpn-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.cpn-opciones .cpn-opcion {
    width: auto !important;
    flex: 0 1 auto !important;
    align-self: flex-start !important;
    padding: 7px 13px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    background-color: #ffffff !important;
    border: 1px solid #00305d !important;
    color: #00305d !important;
    text-align: center !important;
}

/* backwards y no both: con both la animación sigue aplicando su fotograma
   final al terminar y ganaría a la elevación del :hover, dejando las fichas
   sin respuesta al cursor. backwards solo fija el estado inicial durante el
   retardo, que es justo lo que hace falta para escalonarlas.

   Las fichas entran una tras otra, no todas de golpe: el escalonado se lee
   como algo que se está colocando y guía el ojo de izquierda a derecha.
   40 ms es suficiente para percibirlo sin que la última se haga esperar. */
.cpn-opciones .cpn-opcion {
    animation: cpn-msg-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--cpn-i, 0) * 40ms);
}

.cpn-opciones .cpn-opcion:hover {
    background-color: #00305d !important;
    color: #ffffff !important;
}

/* Resumen de la solicitud y botón de envío dentro del mensaje del chatbot. */
.cpn-solicitud {
    margin-top: 10px;
}

.cpn-solicitud-datos {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #c8d6e2;
    color: #0f2233;
}

/* Ofrecimiento del dato de contacto que falta, encima del botón de enviar.
   Va discreto a propósito: la solicitud ya está lista y el botón de WhatsApp
   es la acción principal; esto es un añadido que se puede ignorar. */
.cpn-anadir {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f8fb;
    border: 1px solid #dbe6ef;
}

.cpn-anadir-texto {
    margin: 0 0 8px !important;
    font-size: 12.5px;
    line-height: 1.35;
    color: #0f2233;
}

.cpn-anadir-fila {
    display: flex;
    gap: 6px;
}

.cpn-anadir-campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.3;
    border-radius: 6px;
    border: 1px solid #c8d6e2;
    background: #ffffff;
    color: #0f2233;
}

/* El campo de fecha reserva su espacio: el icono del calendario que pinta
   el navegador se sale del recuadro si el ancho lo calcula el contenido. */
.cpn-anadir-campo[type="date"] {
    min-height: 34px;
    font-family: inherit;
}

.cpn-anadir-campo:focus {
    outline: 2px solid #00305d;
    outline-offset: 1px;
    border-color: #00305d;
}

.cpn-anadir-campo[aria-invalid="true"] {
    border-color: #b3261e;
}

.cpn-anadir-boton {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #00305d;
    background: #ffffff;
    color: #00305d;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cpn-anadir-boton:hover {
    background: #00305d;
    color: #ffffff;
}

.cpn-anadir-boton:focus-visible {
    outline: 2px solid #00305d;
    outline-offset: 2px;
}

.cpn-anadir-aviso {
    margin: 8px 0 0 !important;
    font-size: 12px;
    line-height: 1.35;
    color: #b3261e;
}

@media (prefers-reduced-motion: reduce) {
    .cpn-anadir-boton { transition: none !important; }
}

.cpn-wa-send {
    display: block;
    text-align: center;
    padding: 11px 16px;
    border-radius: 8px;
    background: #25d366;
    color: #0b3d20 !important;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1.3;
}

.cpn-wa-send:hover,
.cpn-wa-send:focus {
    background: #1fb855;
}

.cpn-wa-send:focus-visible {
    outline: 3px solid #0b3d20;
    outline-offset: 2px;
}

#mxchat-chatbot-wrapper-default #chat-mode-indicator-default[data-ai-text="Conexión segura"] {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    font-size: 9px !important;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    color: #166534 !important;
    background: #dcfce7 !important;
}

#mxchat-chatbot-wrapper-default #chat-mode-indicator-default[data-ai-text="Conexión segura"]::before {
    content: "\f023";
    font-family: FontAwesome;
    font-size: 10px;
    font-weight: normal;
    line-height: 1;
}

@media (max-width: 480px) {
    #mxchat-chatbot-wrapper-default #chat-mode-indicator-default[data-ai-text="Conexión segura"] {
        font-size: 10px !important;
        flex-shrink: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }
}