/* ZarzalBOT — botón flotante y ventana del chat */

:root {
    --zb-marino:     #15294a;
    --zb-marino-2:   #1d3559;
    --zb-marino-3:   #0e1d36;
    --zb-oro:        #c9a24a;
    --zb-oro-claro:  #e6c77e;
    --zb-oro-suave:  rgba(201, 162, 74, .16);
    --zb-lienzo:     #f5f7fb;
    --zb-borde:      #e1e7f0;
    --zb-tinta:      #1f2a3a;
    --zb-tinta-2:    #5b6778;
    --zb-letra:      system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --zb-curva:      cubic-bezier(.22, 1, .36, 1);
}

/* botón flotante */
.zb-lanzador {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 1050;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--zb-letra);
}
.zb-lanzador-texto {
    display: block;
    margin-right: -14px;
    padding: 11px 26px 11px 18px;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(135deg, var(--zb-marino-2), var(--zb-marino-3));
    border: 1px solid rgba(201, 162, 74, .45);
    border-right: 0;
    color: #fff;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(14, 29, 54, .28);
    transition: transform .25s var(--zb-curva), box-shadow .25s ease;
}
.zb-lanzador-texto strong { color: var(--zb-oro-claro); font-weight: 700; }

.zb-lanzador-circulo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--zb-marino-2), var(--zb-marino-3));
    border: 2px solid var(--zb-oro);
    color: var(--zb-oro-claro);
    font-size: 1.55rem;
    box-shadow: 0 8px 22px rgba(14, 29, 54, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .25s var(--zb-curva), box-shadow .25s ease;
}
/* Anillo dorado que se expande: dice «aquí se puede preguntar» sin parpadear. */
.zb-lanzador-pulso {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--zb-oro);
    animation: zb-pulso 2.6s ease-out infinite;
    pointer-events: none;
}
.zb-lanzador:hover .zb-lanzador-texto { transform: translateX(-3px); box-shadow: 0 10px 26px rgba(14, 29, 54, .36); }
.zb-lanzador:hover .zb-lanzador-circulo { transform: scale(1.05); box-shadow: 0 10px 28px rgba(14, 29, 54, .42), 0 0 0 4px var(--zb-oro-suave); }
.zb-lanzador:focus-visible { outline: none; }
.zb-lanzador:focus-visible .zb-lanzador-circulo { box-shadow: 0 0 0 4px rgba(201, 162, 74, .45); }
.zb-lanzador.esta-abierto .zb-lanzador-pulso { display: none; }
.zb-lanzador.esta-abierto .zb-lanzador-circulo { font-size: 1.2rem; }

@keyframes zb-pulso {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ventana */
.zb-ventana {
    position: fixed;
    right: 20px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 1050;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--zb-borde);
    border-radius: 20px;
    overflow: hidden;
    font-family: var(--zb-letra);
    color: var(--zb-tinta);
    box-shadow: 0 24px 60px rgba(14, 29, 54, .28);
    animation: zb-sube .32s var(--zb-curva);
}
@keyframes zb-sube {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.zb-cab {
    flex: 0 0 auto;
    padding: 16px 18px 14px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 74, .14), transparent 55%),
        linear-gradient(135deg, var(--zb-marino-2), var(--zb-marino-3));
    border-bottom: 2px solid var(--zb-oro);
    color: #fff;
}
.zb-cab-fila { display: flex; align-items: center; gap: 12px; }
.zb-cab-avatar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid var(--zb-oro);
    color: var(--zb-oro-claro);
    font-size: 1.25rem;
}
.zb-cab-nombre { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.zb-cab-nombre strong { font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; }
.zb-cab-nombre small { font-size: .74rem; color: rgba(255, 255, 255, .72); display: flex; align-items: center; gap: 6px; }
.zb-punto {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--zb-oro-claro);
    box-shadow: 0 0 0 3px rgba(230, 199, 126, .22);
}
.zb-cerrar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #fff; font-size: .9rem; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.zb-cerrar:hover { background: rgba(255, 255, 255, .14); border-color: var(--zb-oro); transform: rotate(90deg); }
.zb-cerrar:focus-visible { outline: 2px solid var(--zb-oro-claro); outline-offset: 2px; }
.zb-cab-nota {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    font-size: .8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .86);
}
.zb-cab-nota strong { color: #fff; }

/* «¿Ya te postulaste? Escríbenos» — lo primero bajo la cabecera. */
.zb-yaposte {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid var(--zb-borde);
    color: var(--zb-tinta);
    text-decoration: none;
    transition: background .2s ease;
}
.zb-yaposte:hover { background: #fbf8f0; color: var(--zb-tinta); }
.zb-yaposte:focus-visible { outline: 2px solid var(--zb-oro); outline-offset: -2px; }
.zb-yaposte-icono {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--zb-marino);
    color: var(--zb-oro-claro);
    font-size: 1rem;
}
.zb-yaposte-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.zb-yaposte-txt strong { font-size: .88rem; font-weight: 700; color: var(--zb-marino); }
.zb-yaposte-txt small { font-size: .76rem; color: var(--zb-tinta-2); }
.zb-yaposte-flecha { color: var(--zb-oro); font-size: .9rem; transition: transform .2s ease; }
.zb-yaposte:hover .zb-yaposte-flecha { transform: translateX(3px); }

/* Conversación. */
.zb-mensajes {
    flex: 1 1 auto;
    min-height: 180px;
    height: 280px;
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--zb-lienzo);
    overscroll-behavior: contain;
}
.zb-fila { display: flex; margin-bottom: 10px; }
.zb-fila.es-usuario { justify-content: flex-end; }
.zb-burbuja {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 4px 16px 16px 16px;
    background: #fff;
    border: 1px solid var(--zb-borde);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--zb-tinta);
    box-shadow: 0 1px 2px rgba(14, 29, 54, .05);
    overflow-wrap: anywhere;
}
.zb-burbuja strong { color: var(--zb-marino); }
.zb-fila.es-usuario .zb-burbuja {
    border-radius: 16px 4px 16px 16px;
    background: linear-gradient(135deg, var(--zb-marino-2), var(--zb-marino));
    border-color: var(--zb-marino);
    color: #fff;
}

/* Sugerencias. */
.zb-sugerencias {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid var(--zb-borde);
}
.zb-sugerencias:empty { display: none !important; }
.zb-sugerencia {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, .5);
    background: #fff;
    color: var(--zb-marino);
    font-family: var(--zb-letra);
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.zb-sugerencia i { color: var(--zb-oro); }
.zb-sugerencia:hover { background: var(--zb-marino); border-color: var(--zb-marino); color: #fff; }
.zb-sugerencia:hover i { color: var(--zb-oro-claro); }
.zb-sugerencia:focus-visible { outline: 2px solid var(--zb-oro); outline-offset: 1px; }

/* Entrada. */
.zb-entrada {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    background: #fff;
    border-top: 1px solid var(--zb-borde);
}
.zb-campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 16px;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #fff;
    color: var(--zb-tinta);
    font-family: var(--zb-letra);
    font-size: 16px;   /* 16px: por debajo, Safari en iPhone hace zoom al enfocar */
    transition: border-color .18s ease, box-shadow .18s ease;
}
.zb-campo::placeholder { color: #98a3b3; }
.zb-campo:focus { outline: none; border-color: var(--zb-oro); box-shadow: 0 0 0 3px var(--zb-oro-suave); }
.zb-campo:disabled { background: var(--zb-lienzo); }
.zb-enviar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid var(--zb-oro);
    background: linear-gradient(135deg, var(--zb-marino-2), var(--zb-marino-3));
    color: var(--zb-oro-claro);
    font-size: .95rem;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.zb-enviar:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14, 29, 54, .3); }
.zb-enviar:focus-visible { outline: 2px solid var(--zb-oro); outline-offset: 2px; }

/* móvil */
@media (max-width: 575.98px) {
    .zb-lanzador { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    .zb-lanzador-texto { font-size: .8rem; padding: 10px 22px 10px 14px; }
    .zb-ventana {
        right: 12px; left: 12px; width: auto; max-width: none;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 110px);
    }
    .zb-mensajes { height: auto; }
}
@media (max-width: 380px) {
    /* En pantallas muy estrechas el rótulo taparía media página: queda el círculo. */
    .zb-lanzador-texto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .zb-lanzador-pulso { animation: none; opacity: 0; }
    .zb-ventana { animation: none; }
    .zb-lanzador-texto, .zb-lanzador-circulo, .zb-cerrar, .zb-yaposte-flecha, .zb-enviar { transition: none; }
}