/* ===========================================================================
   UkuBot - asistente virtual
   ===========================================================================
   Todo el widget es position:fixed, asi que no participa del flujo del
   documento y no puede mover nada: aporta cero al CLS.

   z-index 1035 a proposito: por encima del contenido, POR DEBAJO del backdrop
   de los modales de Bootstrap (1040). Un chat flotando sobre un modal abierto
   es un defecto clasico.
   =========================================================================== */

:root {
    --ukubot-rojo: #E6272C;
    --ukubot-rojo-oscuro: #b81e22;
    --ukubot-tinta: #1f2328;
    --ukubot-gris-texto: #6b7280;
    --ukubot-burbuja: #f2f3f5;
    --ukubot-borde: #e5e7eb;
    --ukubot-fondo: #fafbfc;
    --ukubot-abajo: 24px;
}

/* --------------------------------------------------------------------- */
/* Burbuja                                                               */
/* --------------------------------------------------------------------- */
.ukubot-burbuja {
    position: fixed;
    right: 24px;
    bottom: var(--ukubot-abajo);
    height: 56px;
    padding: 0 18px 0 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef3a3f 0%, var(--ukubot-rojo) 55%, var(--ukubot-rojo-oscuro) 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(230, 39, 44, .32), 0 2px 8px rgba(0, 0, 0, .1);
    cursor: pointer;
    z-index: 1035;
    display: flex;
    align-items: center;
    font-family: 'Rubik', 'Roboto', sans-serif;
    transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), box-shadow .2s ease;
    animation: ukubot-entrar .45s cubic-bezier(.34, 1.4, .64, 1) both;
}

/* Solo el nombre. "Necesitas ayuda?" ocupaba el triple y decia menos: la
   marca es lo que hay que reconocer, la funcion la explica el icono. */
.ukubot-burbuja__texto {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
}

.ukubot-burbuja__cara {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El destello de cuatro puntas es hoy el simbolo entendido de IA. Una
   burbujita de chat no distingue esto de un formulario de contacto. */
.ukubot-burbuja__cara svg { width: 25px; height: 25px; fill: #fff; }

.ukubot-burbuja:hover,
.ukubot-burbuja:focus-visible {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(230, 39, 44, .42), 0 3px 10px rgba(0, 0, 0, .14);
    outline: none;
}

.ukubot-burbuja:focus-visible { box-shadow: 0 0 0 3px rgba(230, 39, 44, .4), 0 8px 24px rgba(230, 39, 44, .35); }
.ukubot-burbuja[hidden] { display: none; }

@keyframes ukubot-entrar {
    from { opacity: 0; transform: translateY(16px) scale(.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Latido de atencion, una sola vez: invita sin ser molesto */
.ukubot-burbuja__pulso {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(230, 39, 44, .55);
    animation: ukubot-pulso 2.4s ease-out 3;
    pointer-events: none;
}

@keyframes ukubot-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(230, 39, 44, .5); }
    70%  { box-shadow: 0 0 0 16px rgba(230, 39, 44, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 39, 44, 0); }
}

/* --------------------------------------------------------------------- */
/* Aviso contextual                                                      */
/* --------------------------------------------------------------------- */
/* Aparece solo en las secciones donde el asistente puede aportar algo
   concreto (publicar, planes, mis anuncios...). Es un globo al lado de la
   burbuja, NO el panel abierto de golpe: abrir un chat encima del contenido
   sin que nadie lo pida tapa justo lo que la persona vino a hacer. */
.ukubot-aviso {
    position: fixed;
    right: 24px;
    bottom: calc(var(--ukubot-abajo) + 70px);
    max-width: 268px;
    background: #fff;
    border: 1px solid var(--ukubot-borde);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    padding: 13px 14px 13px 13px;
    z-index: 1035;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: 'Rubik', 'Roboto', sans-serif;
    cursor: pointer;
    animation: ukubot-aviso-entrar .4s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ukubot-aviso-entrar {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ukubot-aviso[hidden] { display: none; }

.ukubot-aviso__cara {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef3a3f, var(--ukubot-rojo-oscuro));
    display: flex;
    align-items: center;
    justify-content: center;
}

.ukubot-aviso__cara svg { width: 15px; height: 15px; fill: #fff; }

.ukubot-aviso__cuerpo { flex: 1; min-width: 0; }

/* Sin text-transform: la marca se escribe UkuBot, con la B mayuscula que
   separa "Uku" de "Bot". Forzar mayusculas la convertia en UKUBOT y perdia
   esa lectura. La forma canonica es la del Plan de Accion, donde aparece
   asi las 35 veces. */
.ukubot-aviso__marca {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ukubot-rojo);
    letter-spacing: .01em;
    margin-bottom: 3px;
}

.ukubot-aviso__texto {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ukubot-tinta);
}

/* Cerrar el aviso debe ser tan facil como abrirlo */
.ukubot-aviso__x {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--ukubot-borde);
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    padding: 0;
}

.ukubot-aviso__x svg { width: 11px; height: 11px; fill: currentColor; }
.ukubot-aviso__x:hover { background: #f3f4f6; color: var(--ukubot-tinta); }

/* Rabito que lo ancla visualmente a la burbuja */
.ukubot-aviso::after {
    content: '';
    position: absolute;
    right: 26px;
    bottom: -7px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-right: 1px solid var(--ukubot-borde);
    border-bottom: 1px solid var(--ukubot-borde);
    transform: rotate(45deg);
}

@media (max-width: 575px) {
    .ukubot-aviso { right: 16px; left: 16px; max-width: none; }
}

/* --------------------------------------------------------------------- */
/* Panel                                                                 */
/* --------------------------------------------------------------------- */
.ukubot-panel {
    position: fixed;
    right: 24px;
    bottom: var(--ukubot-abajo);
    width: 392px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22), 0 2px 10px rgba(0, 0, 0, .08);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Rubik', 'Roboto', sans-serif;
    color: var(--ukubot-tinta);
    animation: ukubot-abrir .28s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ukubot-abrir {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ukubot-panel[hidden] { display: none; }

/* ---- Cabecera ---- */
.ukubot-cab {
    background: linear-gradient(135deg, #ef3a3f 0%, var(--ukubot-rojo) 60%, var(--ukubot-rojo-oscuro) 100%);
    color: #fff;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ukubot-cab__cara {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ukubot-cab__cara svg { width: 21px; height: 21px; fill: #fff; }

/* Punto verde: senal universal de "esta disponible ahora" */
.ukubot-cab__punto {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid var(--ukubot-rojo);
}

.ukubot-cab__datos { flex: 1; min-width: 0; }

.ukubot-cab__nombre {
    margin: 0;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.15;
}

/* Decir "IA" explicitamente: el usuario tiene derecho a saber con que habla */
.ukubot-cab__sub {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    opacity: .9;
    margin-top: 2px;
}

.ukubot-cab__cerrar {
    background: transparent;
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    margin: -6px -8px -6px 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}

.ukubot-cab__cerrar svg { width: 18px; height: 18px; fill: #fff; }
.ukubot-cab__cerrar:hover,
.ukubot-cab__cerrar:focus-visible { background: rgba(255, 255, 255, .2); outline: none; }

/* --------------------------------------------------------------------- */
/* Mensajes                                                              */
/* --------------------------------------------------------------------- */
.ukubot-mensajes {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--ukubot-fondo);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.ukubot-mensajes::-webkit-scrollbar { width: 6px; }
.ukubot-mensajes::-webkit-scrollbar-thumb { background: #d6d9de; border-radius: 3px; }

.ukubot-fila { display: flex; gap: 8px; align-items: flex-end; }
.ukubot-fila--yo { justify-content: flex-end; }

/* Cara pequena junto a cada respuesta: refuerza quien habla sin repetir texto */
.ukubot-mini {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef3a3f, var(--ukubot-rojo-oscuro));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1px;
}

.ukubot-mini svg { width: 14px; height: 14px; fill: #fff; }

.ukubot-msg {
    max-width: 82%;
    padding: 11px 14px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    animation: ukubot-msg-entrar .22s ease-out both;
}

@keyframes ukubot-msg-entrar {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ukubot-msg--bot {
    background: #fff;
    border: 1px solid var(--ukubot-borde);
    border-bottom-left-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ukubot-msg--yo {
    background: var(--ukubot-rojo);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.ukubot-msg--aviso {
    align-self: center;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    font-size: 13px;
    text-align: center;
    max-width: 100%;
    border-radius: 12px;
}

.ukubot-msg strong { font-weight: 600; }

/* Enlace a una seccion del sitio: es el cierre del asesor, asi que tiene que
   verse pulsable de un vistazo, no como texto subrayado cualquiera. */
.ukubot-enlace {
    color: var(--ukubot-rojo);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(230, 39, 44, .3);
    padding-bottom: 1px;
    transition: border-color .15s ease, background-color .15s ease;
}

.ukubot-enlace:hover,
.ukubot-enlace:focus-visible {
    border-bottom-color: var(--ukubot-rojo);
    background: rgba(230, 39, 44, .07);
    outline: none;
}

/* En el globo del visitante el fondo es rojo: el enlace va en blanco */
.ukubot-msg--yo .ukubot-enlace {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .5);
}
.ukubot-msg p      { margin: 0 0 7px; }
.ukubot-msg p:last-child { margin-bottom: 0; }

.ukubot-msg ul { margin: 6px 0 0; padding-left: 16px; }
.ukubot-msg li { margin-bottom: 4px; }
.ukubot-msg li:last-child { margin-bottom: 0; }

/* ---- Presentacion inicial ---- */
/* Rellena el vacio de la primera pantalla y, sobre todo, dice de que sabe.
   Un chat en blanco obliga al visitante a adivinar que preguntar. */
.ukubot-intro {
    background: #fff;
    border: 1px solid var(--ukubot-borde);
    border-radius: 14px;
    padding: 11px 13px;
    margin-left: 35px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ukubot-intro__titulo {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ukubot-gris-texto);
    margin: 0 0 7px;
}

.ukubot-intro__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    font-size: 13.5px;
}

.ukubot-intro__icono {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #fdecec;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ukubot-intro__icono svg { width: 14px; height: 14px; fill: var(--ukubot-rojo); }

/* ---- Escribiendo ---- */
.ukubot-escribiendo {
    background: #fff;
    border: 1px solid var(--ukubot-borde);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    padding: 14px;
    display: flex;
    gap: 4px;
}

.ukubot-escribiendo span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b0b5bd;
    animation: ukubot-latido 1.2s infinite ease-in-out;
}

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

@keyframes ukubot-latido {
    0%, 60%, 100% { transform: translateY(0);    opacity: .4; }
    30%           { transform: translateY(-4px); opacity: 1;  }
}

/* --------------------------------------------------------------------- */
/* Sugerencias                                                           */
/* --------------------------------------------------------------------- */
.ukubot-sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 16px 12px;
    flex-shrink: 0;
    background: var(--ukubot-fondo);
}

.ukubot-sugerencias[hidden] { display: none; }

.ukubot-chip {
    background: #fff;
    border: 1px solid #f0c2c3;
    color: var(--ukubot-rojo);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    font-family: inherit;
    font-weight: 400;
}

.ukubot-chip:hover,
.ukubot-chip:focus-visible {
    background: var(--ukubot-rojo);
    border-color: var(--ukubot-rojo);
    color: #fff;
    outline: none;
}

/* --------------------------------------------------------------------- */
/* Entrada                                                               */
/* --------------------------------------------------------------------- */
.ukubot-entrada {
    border-top: 1px solid var(--ukubot-borde);
    padding: 11px 12px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: #fff;
    flex-shrink: 0;
}

.ukubot-entrada__texto {
    flex: 1;
    border: 1.5px solid var(--ukubot-borde);
    border-radius: 22px;
    padding: 10px 15px;
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.4;
    resize: none;
    max-height: 96px;
    min-height: 44px;
    color: var(--ukubot-tinta);
    background: #fafbfc;
    transition: border-color .15s ease, background-color .15s ease;
}

.ukubot-entrada__texto::placeholder { color: #9ca3af; }

.ukubot-entrada__texto:focus {
    outline: none;
    border-color: var(--ukubot-rojo);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(230, 39, 44, .1);
}

.ukubot-entrada__enviar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef3a3f, var(--ukubot-rojo-oscuro));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, opacity .15s ease;
}

.ukubot-entrada__enviar:hover:not(:disabled) { transform: scale(1.06); }
.ukubot-entrada__enviar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(230, 39, 44, .35); }
.ukubot-entrada__enviar:disabled { background: #d1d5db; cursor: default; }
.ukubot-entrada__enviar svg { width: 18px; height: 18px; fill: #fff; }

/* El aviso de que es automatico va discreto pero siempre visible */
.ukubot-pie {
    font-size: 10.5px;
    color: #9ca3af;
    text-align: center;
    padding: 0 14px 10px;
    line-height: 1.4;
    background: #fff;
    flex-shrink: 0;
    margin: 0;
}

/* --------------------------------------------------------------------- */
/* Cede el sitio en movil                                                */
/* --------------------------------------------------------------------- */
/* En movil el sitio ya tiene un boton flotante de publicar (.btn-float) en
   la misma esquina. Se oculta para que la ocupe el asistente.

   La regla vive en ESTE archivo a proposito: la hoja solo se carga cuando
   UkuBot esta activo, asi que al desactivarlo desde el panel el boton de
   publicar reaparece solo, sin tocar nada.

   El asistente cumple la misma funcion y mas: guia hacia publicar en vez de
   solo enlazar. Aun asi es un cambio en un camino de conversion, no solo
   estetico: si se quiere volver atras, basta con borrar esta regla. */
@media (max-width: 575px) {
    .btn-float { display: none !important; }
}

/* --------------------------------------------------------------------- */
/* Movil: pantalla completa                                              */
/* --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .ukubot-panel {
        right: 0; bottom: 0; left: 0; top: 0;
        width: 100%; max-width: 100%;
        height: 100%; max-height: 100%;
        border-radius: 0;
        animation: ukubot-abrir-movil .25s ease-out both;
    }

    @keyframes ukubot-abrir-movil {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .ukubot-cab  { padding-top: max(15px, env(safe-area-inset-top)); }
    .ukubot-pie  { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

    .ukubot-burbuja { right: 16px; }
    .ukubot-burbuja__texto { display: none; }   /* solo el icono, ocupa menos */
    .ukubot-burbuja { padding-right: 0; }

    .ukubot-chip { min-height: 44px; padding: 12px 15px; }  /* pulgar */
    .ukubot-msg  { max-width: 88%; }
}

/* --------------------------------------------------------------------- */
/* Preferencias del usuario                                              */
/* --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ukubot-burbuja, .ukubot-panel, .ukubot-msg,
    .ukubot-chip, .ukubot-entrada__enviar { animation: none; transition: none; }
    .ukubot-burbuja:hover { transform: none; }
    .ukubot-burbuja__pulso { animation: none; }
    .ukubot-escribiendo span { animation: none; opacity: .55; }
}

@media print {
    .ukubot-burbuja, .ukubot-panel { display: none !important; }
}