/*
 * Widget Claudio IA. Antes vivia en un <style> dentro del partial y se repetia en
 * el HTML de cada pagina del sitio (6,4 KB). El partial conserva solo la regla
 * critica que oculta la ventana mientras esta hoja termina de cargar.
 */
    .claudio-avatar {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
        color: #fff;
        font-size: 22px;
    }
    /* #claudioTrigger debe ocupar todo el óvalo, igual que los links de Ventas/Soporte
       (que tienen el mismo ancho por defecto al ser el único hijo de su <li>). */
    #claudioTrigger {
        width: 100%;
        cursor: pointer;
    }
    /* Especificidad extra: .chat-pop-up li a i pinta los íconos de rojo (blanco en hover);
       el robot va sobre fondo rojo, así que debe quedar blanco siempre. */
    .chat-pop-up li a .claudio-avatar i,
    .chat-pop-up li a:hover .claudio-avatar i {
        color: #fff;
    }
    .claudio-window {
        position: fixed;
        bottom: 90px;
        right: 20px;
        width: 332px;
        height: 460px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 3px 6px 0 rgba(75, 74, 75, 0.2);
        display: flex;
        flex-direction: column;
        z-index: 1050;
        overflow: hidden;
        opacity: 0;
        transform: translatey(20px);
        transition: opacity .25s ease, transform .25s ease-out;
        pointer-events: none;
    }
    .claudio-window.claudio-visible {
        opacity: 1;
        transform: translatey(0);
        pointer-events: all;
    }
    .claudio-header {
        background-color: #000;
        color: #fff;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .claudio-header-avatar {
        width: 36px; height: 36px;
        background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }
    .claudio-header-info { flex: 1; }
    .claudio-header-info strong { display: block; font-size: 14px; }
    .claudio-header-info span { font-size: 11px; opacity: .85; }
    .claudio-header-close {
        background: none; border: none; color: #fff;
        font-size: 18px; cursor: pointer; opacity: .8; line-height: 1;
    }
    .claudio-header-close:hover { opacity: 1; }
    .claudio-messages {
        flex: 1;
        overflow-y: auto;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #f8f9fb;
    }
    .claudio-msg { display: flex; gap: 8px; max-width: 85%; }
    .claudio-msg.user { align-self: flex-end; flex-direction: row-reverse; }
    .claudio-msg-bubble {
        padding: 9px 13px;
        border-radius: 14px;
        font-size: 13px;
        line-height: 1.5;
        word-break: break-word;
    }
    .claudio-msg.bot .claudio-msg-bubble  { background: #fff; color: #1f2937; border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
    .claudio-msg.user .claudio-msg-bubble { background: var(--rojo); color: #fff; border-bottom-right-radius: 4px; }
    .claudio-msg-avatar {
        width: 26px; height: 26px; border-radius: 50%;
        background: #fde7e4; color: var(--rojo);
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; flex-shrink: 0; align-self: flex-end;
    }
    .claudio-msg.user .claudio-msg-avatar { background: #f1f1f1; color: #333; }
    .claudio-typing { display: flex; gap: 4px; align-items: center; padding: 8px 12px; background:#fff; border-radius:14px; width:fit-content; box-shadow:0 1px 4px rgba(0,0,0,.08); }
    .claudio-typing span { width:7px;height:7px;background:var(--rojo);border-radius:50%;animation:claudio-typing .9s infinite; }
    .claudio-typing span:nth-child(2){animation-delay:.2s}
    .claudio-typing span:nth-child(3){animation-delay:.4s}
    @keyframes claudio-typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
    .claudio-footer {
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid #eee;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .claudio-footer input {
        flex: 1;
        border: 1px solid #e5e7eb;
        border-radius: 22px;
        padding: 8px 14px;
        font-size: 13px;
        outline: none;
        color: #1f2937;
    }
    .claudio-footer input:focus { border-color: var(--rojo); }
    .claudio-send {
        width: 36px; height: 36px;
        background: var(--rojo);
        color: #fff; border: none; border-radius: 50%;
        cursor: pointer; font-size: 15px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .claudio-send:disabled { opacity: .5; cursor: not-allowed; }

    .claudio-gate {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 22px 20px;
        background: #f8f9fb;
        gap: 12px;
    }
    .claudio-gate p { font-size: 13px; color: #555; margin-bottom: 4px; }
    .claudio-gate input {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 22px;
        padding: 10px 16px;
        font-size: 14px;
        outline: none;
        color: #1f2937;
        margin-bottom: 10px;
    }
    .claudio-gate input:focus { border-color: var(--rojo); }
    .claudio-gate button.claudio-gate-btn {
        width: 100%;
        border: none;
        border-radius: 22px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        background: var(--rojo);
        color: #fff;
    }
    .claudio-gate button.claudio-gate-btn:disabled { opacity: .5; cursor: not-allowed; }
    .claudio-gate button.claudio-gate-link {
        background: none;
        border: none;
        color: var(--rojo);
        font-size: 12px;
        text-decoration: underline;
        cursor: pointer;
        margin-top: 8px;
        padding: 0;
    }
    .claudio-gate button.claudio-gate-link:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
    .claudio-gate-error {
        color: #dc2626 !important;
        font-size: 12px !important;
        min-height: 16px;
    }

    @media (max-width: 575px) {
        .claudio-window {
            left: 8px;
            right: 8px;
            bottom: 84px;
            width: auto;
            height: calc(100dvh - 104px);
        }
    }