/*
 * Chatbot flotante (inc/chatbot/class-chatbot-widget.php).
 *
 * Paleta tomada de las variables globales del tema (style.css) — mismo azul
 * institucional que el resto del sitio, en la estética "monitor oscuro" que
 * ya usan el panel de citas (kickoff.css) y el panel del diagnóstico
 * (servicios/diagnostico.css), no una paleta nueva inventada para este
 * widget.
 */

.dr-chatbot,
.dr-chatbot *,
.dr-chatbot *::before,
.dr-chatbot *::after {
    box-sizing: border-box;
}

.dr-chatbot {
    --chat-azul: var(--color-azul-digital, #2c3fcd);
    --chat-azul-2: #4f5ff0;
    --chat-cielo: var(--color-azul-cielo, #378de2);
    --chat-oscuro: var(--color-azul-oscuro, #0a1444);
    --chat-online: #17c384;

    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 8500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ===== BOTÓN FLOTANTE ===== */
.dr-chatbot__toggle {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(155deg, #101c5e 0%, var(--chat-oscuro) 60%, #060b2c 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(10, 20, 68, 0.45), 0 0 0 1px rgba(79, 95, 240, 0.25), 0 0 24px rgba(55, 141, 226, 0.35);
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.dr-chatbot__toggle:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 36px rgba(10, 20, 68, 0.5), 0 0 0 1px rgba(79, 95, 240, 0.35), 0 0 30px rgba(55, 141, 226, 0.5);
}
.dr-chatbot__toggle:focus-visible {
    outline: 2px solid var(--chat-cielo);
    outline-offset: 3px;
}

.dr-chatbot__toggle-icon {
    position: absolute;
    display: flex;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.dr-chatbot__toggle-icon--close { opacity: 0; transform: scale(0.5) rotate(-45deg); }
.dr-chatbot__toggle[aria-expanded="true"] .dr-chatbot__toggle-icon--chat { opacity: 0; transform: scale(0.5) rotate(45deg); }
.dr-chatbot__toggle[aria-expanded="true"] .dr-chatbot__toggle-icon--close { opacity: 1; transform: scale(1) rotate(0); }

.dr-chatbot__toggle-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--chat-online);
    border: 2px solid var(--chat-oscuro);
    box-shadow: 0 0 0 0 rgba(23,195,132,0.55);
    animation: drChatbotDotPulse 2.2s ease-out infinite;
}
.dr-chatbot__toggle[aria-expanded="true"] .dr-chatbot__toggle-dot { opacity: 0; }

@keyframes drChatbotDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(23,195,132,0.55); }
    70% { box-shadow: 0 0 0 8px rgba(23,195,132,0); }
    100% { box-shadow: 0 0 0 0 rgba(23,195,132,0); }
}

/* ===== BURBUJA DE SALUDO PROACTIVO ===== */
/* Aparece sola unos segundos después de cargar la página (ver chatbot.js:
   mostrarSaludo()) para anunciar que el chat existe, sin esperar a que el
   usuario repare en el botón flotante. Solo se agenda si el webhook está
   configurado (dr_chatbot_params.disponible) — nunca se invita a chatear
   con algo que va a responder "no disponible". */
.dr-chatbot__saludo {
    position: absolute;
    right: 72px;
    bottom: 8px;
    /* Ancho fijo (no max-content): con max-content, ".dr-chatbot__saludo-abrir"
       (flex:1 dentro de esta fila) competía por espacio contra el tamaño
       "al contenido" del contenedor y el texto terminaba cortándose en vez
       de hacer wrap — ver también min-width:0 más abajo. */
    width: 268px;
    max-width: calc(100vw - 112px);
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(10, 20, 68, 0.28), 0 0 0 1px rgba(10, 20, 68, 0.05);
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(.34,1.56,.64,1), transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.dr-chatbot__saludo.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Colita apuntando hacia el botón flotante. */
.dr-chatbot__saludo::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 20px;
    width: 12px; height: 12px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Mascota "asomándose" por encima de la burbuja, como si fuera ella quien
   saluda (mismo recurso que usan los mensajes de bienvenida de WhatsApp/
   Intercom). Sin overflow:hidden en .dr-chatbot__saludo (mismo motivo que
   el botón de cerrar, que también sobresale del borde), el top negativo la
   deja sobresalir hacia arriba sin recortarse. La animación de entrada es
   propia (no solo hereda la opacidad de .is-visible): un pequeño
   fade+scale con una curva "spring" (mismo cubic-bezier que ya usa el
   botón flotante al hacer hover) y un ligero delay de 0.08s para que
   aparezca justo después de la burbuja, no exactamente al mismo tiempo —
   sensación juguetona sin ser exagerada. */
.dr-chatbot__saludo-mascota {
    position: absolute;
    top: -30px;
    left: 14px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px rgba(10, 20, 68, 0.3), 0 0 0 1px rgba(10, 20, 68, 0.06);
    object-fit: cover;
    background: #fff;
    opacity: 0;
    transform: translateY(10px) scale(0.5);
    transition: opacity 0.4s cubic-bezier(.34,1.56,.64,1) 0.08s, transform 0.45s cubic-bezier(.34,1.56,.64,1) 0.08s;
    pointer-events: none;
}
.dr-chatbot__saludo.is-visible .dr-chatbot__saludo-mascota {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dr-chatbot__saludo-abrir {
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    /* Los flex items tienen min-width:auto implícito (= al ancho de su
       contenido sin wrap), y esa misma trampa se repetía un nivel más
       adentro con flex-direction:column para apilar strong+span — por eso
       ahora es simplemente "display:block" (ver strong/span abajo): un
       botón en bloque envuelve su texto al ancho del contenedor sin ningún
       ajuste extra de min-width. */
    min-width: 0;
    display: block;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    /* padding-top 38px (no 14px): .dr-chatbot__saludo-mascota sobresale
       -30px hacia arriba y mide 60px, así que sus 30px inferiores quedan
       DENTRO de la burbuja — este padding evita que "¡Hola! 👋" arranque
       tapado debajo de ella. */
    padding: 38px 20px 14px 16px;
    font-family: inherit;
    color: var(--chat-oscuro);
    border-radius: 14px;
    /* CAUSA REAL del texto cortado: hello-elementor/assets/css/reset.css
       trae "[type=button],[type=submit],button { white-space: nowrap; }"
       para TODO <button> (este botón tiene type="button") — sin esto el
       texto se queda en una sola línea y se sale del contenedor sin
       importar cuánto width/max-width/overflow-wrap se le ponga aquí. La
       especificidad de "[type=button]" (0,1,0) empata con ".dr-chatbot__
       saludo-abrir" (0,1,0); !important evita depender del orden de carga
       entre este archivo y el reset del tema padre — mismo patrón que ya
       usa .dr-chatbot__cerrar más abajo en este archivo para el mismo tipo
       de conflicto con el CSS del tema padre. */
    white-space: normal !important;
}
.dr-chatbot__saludo-abrir strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    color: var(--chat-oscuro);
}
.dr-chatbot__saludo-abrir span {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(10, 20, 68, 0.72);
    overflow-wrap: break-word;
    word-break: break-word;
}
/* hello-elementor/assets/css/reset.css impone globalmente
   "button:hover, button:focus { background-color: rgb(204,51,102); color:
   #fff; }" a CUALQUIER <button> sin sus propios background-color/color en
   esos estados — de ahí el rosa (y, si solo se pisa background-color, un
   texto casi blanco sobre fondo claro apenas legible: <strong> no tenía
   color propio y heredaba ese blanco). Se reemplaza por el mismo tinte azul
   sutil que ya usa .dr-doctor-card:hover en style.css, manteniendo SIEMPRE
   el texto en el azul oscuro de marca. Se cubre tanto :hover como :focus
   (no solo :focus-visible) porque el reset del tema padre también dispara
   en :focus simple, incluido el foco por click de mouse. */
.dr-chatbot__saludo-abrir:hover,
.dr-chatbot__saludo-abrir:focus {
    background-color: rgba(44, 63, 205, 0.07);
    color: var(--chat-oscuro);
}
.dr-chatbot__saludo-abrir:focus-visible { outline: 2px solid var(--chat-cielo); outline-offset: -2px; }

.dr-chatbot__saludo-cerrar {
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    top: -8px; right: -8px;
    /* reset.css del tema padre trae "[type=button]{padding:.5rem 1rem}"
       para TODO <button> — este círculo nunca declaraba su propio padding,
       así que ese 8px/16px entraba sin oponente y, al ser un flex item
       dentro de .dr-chatbot__saludo, su tamaño mínimo automático (dictado
       por ese padding) terminaba ganándole al width:22px de abajo y
       agrandando el botón. padding:0 + min-width/min-height:0 lo evitan. */
    padding: 0;
    min-width: 0;
    min-height: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: rgba(10, 20, 68, 0.55);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(10, 20, 68, 0.25), 0 0 0 1px rgba(10, 20, 68, 0.06);
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
/* Auditoría a11y: el círculo visible se queda en 22px (agrandarlo de verdad
   se ve desproporcionado junto a la burbuja de saludo), pero el área táctil
   real en mobile debe ser de al menos 48x48px — un ::before invisible,
   centrado sobre el mismo botón, amplía la zona de clic sin mover ni
   agrandar nada visible. inset:-13px sobre un botón de 22px da 22+13*2=48px. */
.dr-chatbot__saludo-cerrar::before {
    content: "";
    position: absolute;
    inset: -13px;
}
/* Mismo motivo que .dr-chatbot__saludo-abrir arriba: sin declarar
   background-color explícito aquí, el rosa de reset.css ganaba en :hover Y
   en :focus (no solo :focus-visible) porque tiene más especificidad que el
   "background: #fff" de la regla base. */
.dr-chatbot__saludo-cerrar:hover,
.dr-chatbot__saludo-cerrar:focus {
    background-color: #fff;
    color: var(--chat-azul);
    transform: scale(1.08);
}
.dr-chatbot__saludo-cerrar:focus-visible { outline: 2px solid var(--chat-cielo); outline-offset: 1px; }

/* Sin overrides de posición para .dr-chatbot__saludo en mobile a propósito:
   la regla base ya es responsiva (max-width: calc(100vw - 112px)) y
   mantener la burbuja AL COSTADO del botón (no arriba, como antes) es lo
   que evita que se solape con el botón de WhatsApp del footer — ese botón
   vive más arriba y más a la izquierda en mobile (.dr-whatsapp-bot:
   bottom:84px, right:16px), justo en la franja que ocupaba la burbuja
   cuando se reposicionaba "arriba" del toggle aquí. */

/* ===== PANEL ===== */
.dr-chatbot__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 16px);
    width: min(380px, calc(100vw - 32px));
    height: min(600px, 75vh);
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, #101c5e 0%, var(--chat-oscuro) 55%, #060b2c 100%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(3, 7, 36, 0.5), 0 0 0 1px rgba(79, 95, 240, 0.2);
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.dr-chatbot__panel:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* [hidden] ya quita el elemento del flujo/accesibilidad; las reglas de
   arriba solo animan la transición mientras JS retira el atributo un
   frame después de agregar la clase de apertura — ver chatbot.js. */

.dr-chatbot__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.dr-chatbot__header-info { display: flex; align-items: center; gap: 12px; }
.dr-chatbot__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--chat-azul), var(--chat-azul-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(44,63,205,0.4);
}
.dr-chatbot__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
}
.dr-chatbot__header-titulo { margin: 0; font-size: 14.5px; font-weight: 700; color: #fff; }
.dr-chatbot__header-estado {
    margin: 2px 0 0; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55);
    display: flex; align-items: center; gap: 6px;
}
.dr-chatbot__header-estado-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--chat-online); flex-shrink: 0;
}
.dr-chatbot__cerrar {
    -webkit-tap-highlight-color: transparent;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}
.dr-chatbot__cerrar:hover { background: rgba(255,255,255,0.16); color: #fff; }
.dr-chatbot__cerrar:focus-visible { outline: 2px solid var(--chat-cielo); outline-offset: 2px; }

.dr-chatbot__cerrar {
    color: #ffffff !important;
}

.dr-chatbot__cerrar svg {
    stroke: #ffffff !important;
}

/* ===== MENSAJES ===== */
.dr-chatbot__mensajes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dr-chatbot__mensajes::-webkit-scrollbar { width: 6px; }
.dr-chatbot__mensajes::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }

.dr-chatbot__mensaje {
    max-width: 82%;
    padding: 11px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    animation: drChatbotMensajeIn 0.3s cubic-bezier(.16,1,.3,1);
}
.dr-chatbot__mensaje p { margin: 0; }
.dr-chatbot__mensaje--bot {
    align-self: flex-start;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    border-bottom-left-radius: 4px;
}
.dr-chatbot__mensaje--usuario {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--chat-azul), var(--chat-cielo));
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 6px 16px rgba(44,63,205,0.3);
}

@keyframes drChatbotMensajeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Indicador "escribiendo…" */
.dr-chatbot__typing {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
}
.dr-chatbot__typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.55);
    animation: drChatbotTyping 1.1s ease-in-out infinite;
}
.dr-chatbot__typing span:nth-child(2) { animation-delay: 0.15s; }
.dr-chatbot__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes drChatbotTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.dr-chatbot__error {
    margin: 0 18px 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
    font-size: 12.5px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ===== FORMULARIO ===== */
.dr-chatbot__form {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.12);
}
.dr-chatbot__sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.dr-chatbot__input {
    flex: 1;
    resize: none;
    max-height: 100px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.dr-chatbot__input::placeholder { color: rgba(255,255,255,0.4); }
.dr-chatbot__input:focus {
    outline: none;
    border-color: var(--chat-cielo);
    background: rgba(255,255,255,0.09);
    box-shadow: 0 0 0 3px rgba(55,141,226,0.2);
}
.dr-chatbot__input:disabled { opacity: 0.5; cursor: not-allowed; }

.dr-chatbot__enviar {
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--chat-azul), var(--chat-azul-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(44,63,205,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.dr-chatbot__enviar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(44,63,205,0.5); }
.dr-chatbot__enviar:focus-visible { outline: 2px solid var(--chat-cielo); outline-offset: 2px; }
.dr-chatbot__enviar:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ===== RESPONSIVO ===== */
/* ===== RESPONSIVO MÓVIL ===== */
@media (max-width: 480px) {
    .dr-chatbot {
        right: 12px;
        bottom: 12px;
    }

    .dr-chatbot__toggle {
        width: 54px;
        height: 54px;
    }

    .dr-chatbot__panel {
        /* Se usa fixed directo al viewport para independizarlo del wrapper flotante */
        position: fixed;
        top: 12px;
        left: 12px;
        right: 12px;
        /* dynamic viewport height (dvh) se adapta al teclado sin saltos bruscos */
        bottom: 80px;
        width: auto;
        height: auto;
        /* Se usa dvh como límite máximo para evitar desbordamiento */
        max-height: calc(100dvh - 92px);
        overscroll-behavior: contain;
    }

    /* Asegura que el área de mensajes mantenga la estabilidad del scroll */
    .dr-chatbot__mensajes {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dr-chatbot * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== COORDINACIÓN CON EL BOTÓN DE WHATSAPP DEL FOOTER ===== */
/* #drWhatsBot/.dr-whatsapp-bot no es de este tema — vive en la plantilla de
   footer del plugin header-footer-elementor (editable en wp-admin, no en
   archivos del tema) con su propio z-index:9999 y su propio efecto de
   ocultar/mostrar en scroll. Como 9999 > el z-index de este widget (8500),
   se dibuja encima del panel del chat sin importar si está abierto o no.
   chatbot.js agrega/quita "dr-chat-abierto" en <body> exactamente cuando el
   panel se abre/cierra (abrirPanel()/cerrarPanel()) — mientras esa clase
   está presente, el botón de WhatsApp se manda detrás y se hace invisible
   (nunca se toca su marcado, su CSS propio ni su listener de scroll: sigue
   funcionando igual en cuanto el chat se cierra). La especificidad de
   "body.dr-chat-abierto .dr-whatsapp-bot" (1 elemento + 2 clases) ya gana
   sobre el selector original ".dr-whatsapp-bot" (1 clase) sin necesidad de
   !important, sin importar el orden de carga entre este archivo y el
   <style> inline del footer. */
body.dr-chat-abierto .dr-whatsapp-bot {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}