/* ============================================================
   FERMITESLA · Asesor Fermitesla — Chatbot flotante
   Estilo premium industrial · azul oscuro + ámbar + gris técnico
   Todo el CSS está namespaced bajo #fermibot para no chocar
   con theme.css. Editable: variables al inicio.
   ============================================================ */

/* El botón verde de WhatsApp del theme se mantiene visible, pero se reubica
   abajo-IZQUIERDA para no superponerse con el lanzador del chatbot (abajo-derecha). */
body.fermibot-active .wa-float { right: auto; left: 1.25rem; bottom: 1.25rem; }
@media (max-width: 480px) {
    body.fermibot-active .wa-float { left: 1rem; bottom: 1rem; }
}
@media (max-width: 767px) {
    body.fermibot-active .wa-float { display: none; }
}

#fermibot {
    /* ---- Paleta (edítala aquí) ---- */
    --fb-navy:      #0a2540;
    --fb-navy-2:    #0d2c4d;
    --fb-navy-3:    #0f3358;
    --fb-panel:     #081d33;
    --fb-amber:     #F59E0B;
    --fb-amber-2:   #FB923C;
    --fb-amber-ink: #1a1206;
    --fb-text:      #eef4fb;
    --fb-muted:     #9fb4cc;
    --fb-line:      rgba(255, 255, 255, .10);
    --fb-line-2:    rgba(255, 255, 255, .16);
    --fb-bot:       #11304f;
    --fb-wa:        #25D366;
    --fb-wa-2:      #1ebe5a;
    --fb-radius:    18px;
    --fb-shadow:    0 24px 70px rgba(2, 10, 25, .55), 0 6px 20px rgba(2, 10, 25, .35);
    --fb-ease:      cubic-bezier(.19, 1, .22, 1);
    --fb-ease-spring: cubic-bezier(.175, .885, .32, 1.275);

    position: fixed;
    inset: auto 1.25rem 1.25rem auto;
    z-index: 2147483000;            /* por encima de casi todo */
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--fb-text);
}
#fermibot, #fermibot * { box-sizing: border-box; }

/* ============================================================
   LAUNCHER (botón flotante)
   ============================================================ */
.fb-launcher {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .95rem .55rem .6rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    background: linear-gradient(135deg, var(--fb-navy-3), var(--fb-navy));
    box-shadow: var(--fb-shadow);
    transition: transform .35s var(--fb-ease-spring), box-shadow .35s var(--fb-ease);
    position: relative;
}
.fb-launcher:hover { transform: translateY(-3px) scale(1.02); }
.fb-launcher:active { transform: translateY(-1px) scale(.99); }
.fb-launcher__avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, var(--fb-amber), var(--fb-amber-2));
    color: var(--fb-amber-ink);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}
.fb-launcher__avatar svg { width: 1.35rem; height: 1.35rem; }
.fb-launcher__label { display: inline-flex; flex-direction: column; line-height: 1.05; padding-right: .25rem; }
.fb-launcher__label small { font-weight: 500; font-size: .68rem; color: var(--fb-amber); letter-spacing: .02em; }
/* Punto "en línea" + halo pulsante en el avatar */
.fb-launcher__dot {
    position: absolute; top: .5rem; left: 2.45rem;
    width: .7rem; height: .7rem; border-radius: 50%;
    background: #34d399; border: 2px solid var(--fb-navy);
}
.fb-launcher::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, .5);
    animation: fb-pulse 2.8s infinite;
    pointer-events: none;
}
@keyframes fb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
    70%  { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Burbuja inicial tipo "tooltip" */
.fb-greeting {
    position: absolute;
    bottom: calc(100% + .75rem);
    right: 0;
    width: min(20rem, calc(100vw - 2.5rem));
    background: #fff;
    color: #0b1623;
    border-radius: 14px 14px 4px 14px;
    padding: .85rem 2.2rem .85rem 1rem;
    font-size: .9rem;
    line-height: 1.45;
    box-shadow: var(--fb-shadow);
    transform-origin: bottom right;
    animation: fb-pop .5s var(--fb-ease-spring) both;
}
.fb-greeting { display: none; }
.fb-greeting b { color: var(--fb-navy); }
.fb-greeting__close {
    position: absolute; top: .35rem; right: .4rem;
    width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%;
    background: transparent; color: #94a3b8; cursor: pointer;
    font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.fb-greeting__close:hover { background: #f1f5f9; color: #334155; }
.fb-greeting::after {
    content: ''; position: absolute; bottom: -7px; right: 18px;
    border: 7px solid transparent; border-top-color: #fff; border-bottom: 0;
}

/* ============================================================
   PANEL DE CHAT
   ============================================================ */
.fb-panel {
    position: absolute;
    bottom: 0; right: 0;
    width: min(24rem, calc(100vw - 2.5rem));
    height: min(38rem, calc(100vh - 3rem));
    display: flex;
    flex-direction: column;
    background: radial-gradient(120% 80% at 100% 0%, var(--fb-navy-2), var(--fb-panel) 60%);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow);
    overflow: hidden;
    transform-origin: bottom right;
    animation: fb-open .42s var(--fb-ease) both;
}
.fb-panel.fb-closing { animation: fb-close .26s var(--fb-ease) both; }

@keyframes fb-open {
    from { opacity: 0; transform: translateY(16px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fb-close {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(16px) scale(.92); }
}
@keyframes fb-pop {
    from { opacity: 0; transform: translateY(8px) scale(.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Header ---- */
.fb-header {
    display: flex; align-items: center; gap: .7rem;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, var(--fb-navy-3), var(--fb-navy));
    border-bottom: 1px solid var(--fb-line);
    flex: none;
}
.fb-header__avatar {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--fb-amber), var(--fb-amber-2));
    color: var(--fb-amber-ink);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}
.fb-header__avatar svg { width: 1.3rem; height: 1.3rem; }
.fb-header__info { flex: 1; min-width: 0; line-height: 1.2; }
.fb-header__info b { font-size: .95rem; font-weight: 600; display: block; }
.fb-header__status { font-size: .72rem; color: #aee9c4; display: inline-flex; align-items: center; gap: .35rem; }
.fb-header__status::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: #34d399; }
.fb-header__actions { display: flex; gap: .15rem; flex: none; }
.fb-iconbtn {
    width: 2rem; height: 2rem; border: 0; border-radius: 8px;
    background: transparent; color: #cdddf0; cursor: pointer;
    display: grid; place-items: center; transition: background .2s, color .2s;
}
.fb-iconbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.fb-iconbtn svg { width: 1.15rem; height: 1.15rem; }

/* ---- Cuerpo / mensajes ---- */
.fb-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 1rem .9rem .5rem;
    display: flex; flex-direction: column; gap: .55rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.fb-body::-webkit-scrollbar { width: 7px; }
.fb-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; }

.fb-row { display: flex; max-width: 100%; animation: fb-msg .35s var(--fb-ease) both; }
.fb-row--bot { justify-content: flex-start; }
.fb-row--user { justify-content: flex-end; }
@keyframes fb-msg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fb-bubble {
    max-width: 85%;
    padding: .62rem .8rem;
    font-size: .88rem;
    line-height: 1.45;
    border-radius: 14px;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.fb-row--bot .fb-bubble {
    background: var(--fb-bot);
    border: 1px solid var(--fb-line);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.fb-row--user .fb-bubble {
    background: linear-gradient(135deg, var(--fb-amber), var(--fb-amber-2));
    color: var(--fb-amber-ink);
    font-weight: 500;
    border-bottom-right-radius: 4px;
}
.fb-bubble b { font-weight: 700; }
.fb-bubble .fb-help { display: block; margin-top: .35rem; font-size: .78rem; color: var(--fb-muted); }

/* Indicador "escribiendo…" */
.fb-typing { display: inline-flex; gap: .25rem; padding: .7rem .85rem; }
.fb-typing span {
    width: .42rem; height: .42rem; border-radius: 50%; background: var(--fb-muted);
    animation: fb-bounce 1.3s infinite ease-in-out both;
}
.fb-typing span:nth-child(2) { animation-delay: .18s; }
.fb-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes fb-bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* ---- Tarjeta resumen ---- */
.fb-summary {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--fb-line-2);
    border-radius: 14px;
    padding: .9rem;
    font-size: .82rem;
    width: 100%;
}
.fb-summary h4 { margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fb-amber); }
.fb-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; }
.fb-summary dt { color: var(--fb-muted); }
.fb-summary dd { margin: 0; color: var(--fb-text); font-weight: 500; text-align: right; }
.fb-leadtag {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem;
    padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
}
.fb-leadtag--caliente { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.fb-leadtag--medio   { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.fb-leadtag--frio    { background: rgba(56, 189, 248, .16); color: #7dd3fc; }

/* ---- Quick replies ---- */
.fb-quick {
    display: flex; flex-wrap: wrap; gap: .45rem;
    padding: .15rem .15rem .35rem;
    animation: fb-msg .35s var(--fb-ease) both;
}
.fb-chip {
    border: 1px solid var(--fb-line-2);
    background: rgba(255, 255, 255, .03);
    color: var(--fb-text);
    border-radius: 999px;
    padding: .5rem .85rem;
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .15s;
    line-height: 1;
}
.fb-chip:hover { border-color: var(--fb-amber); background: rgba(245, 158, 11, .12); transform: translateY(-1px); }
.fb-chip--primary {
    background: linear-gradient(135deg, var(--fb-amber), var(--fb-amber-2));
    color: var(--fb-amber-ink); border-color: transparent; font-weight: 600;
}
.fb-chip--primary:hover { filter: brightness(1.05); }
.fb-chip--wa { background: var(--fb-wa); color: #fff; border-color: transparent; font-weight: 600; }
.fb-chip--wa:hover { background: var(--fb-wa-2); }
.fb-chip--ghost { color: var(--fb-muted); }

/* Botón grande de cierre / WhatsApp dentro del flujo */
.fb-cta-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .8rem 1rem; margin-top: .15rem;
    border: 0; border-radius: 12px; cursor: pointer;
    background: var(--fb-wa); color: #fff; font-family: inherit; font-weight: 600; font-size: .92rem;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .3);
    transition: background .2s, transform .2s;
}
.fb-cta-wa:hover { background: var(--fb-wa-2); transform: translateY(-2px); }
.fb-cta-wa svg { width: 1.2rem; height: 1.2rem; }

/* ---- Footer / input ---- */
.fb-footer {
    flex: none; padding: .6rem .7rem;
    border-top: 1px solid var(--fb-line);
    background: rgba(0, 0, 0, .18);
}
.fb-inputrow { display: flex; align-items: flex-end; gap: .5rem; }
.fb-input {
    flex: 1; resize: none; max-height: 6rem; min-height: 2.5rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--fb-line-2);
    border-radius: 12px;
    color: var(--fb-text);
    font-family: inherit; font-size: .88rem; line-height: 1.4;
    padding: .6rem .8rem;
    transition: border-color .2s, box-shadow .2s;
}
.fb-input::placeholder { color: var(--fb-muted); }
.fb-input:focus { outline: none; border-color: var(--fb-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
.fb-send {
    flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--fb-amber), var(--fb-amber-2));
    color: var(--fb-amber-ink); display: grid; place-items: center;
    transition: transform .2s, filter .2s;
}
.fb-send:hover { transform: translateY(-2px); filter: brightness(1.05); }
.fb-send:disabled { opacity: .45; cursor: default; transform: none; }
.fb-send svg { width: 1.2rem; height: 1.2rem; }
.fb-foot-note { text-align: center; font-size: .66rem; color: var(--fb-muted); margin: .4rem 0 0; }
.fb-foot-note a { color: var(--fb-amber); }

/* Botón reiniciar conversación */
.fb-restart {
    background: transparent; border: 0; color: var(--fb-muted); cursor: pointer;
    font-family: inherit; font-size: .7rem; text-decoration: underline; padding: 0;
}

/* ============================================================
   RESPONSIVE — móvil a pantalla casi completa
   ============================================================ */
@media (max-width: 480px) {
    #fermibot { inset: auto 0 0 0; }
    .fb-launcher { position: fixed; right: 1rem; bottom: 1rem; }
    .fb-launcher__label { display: none; }      /* círculo en móvil */
    .fb-launcher { padding: .5rem; }
    .fb-launcher__dot { left: 2.35rem; }
    .fb-greeting { position: fixed; right: 1rem; bottom: 5rem; }
    .fb-panel {
        position: fixed; inset: 0;
        width: 100vw; height: 100dvh;
        max-width: none; border-radius: 0; border: 0;
    }
}
@media (max-width: 767px) {
    #fermibot { inset: auto 0 0 0; }
    .fb-launcher {
        position: fixed;
        right: 1rem;
        bottom: 6rem;
        padding: .5rem;
    }
    .fb-launcher__label { display: none !important; }
    .fb-launcher__dot { left: 2.35rem; }
    .fb-greeting { display: none; }
}

/* ============================================================
   Estado: oculto
   ============================================================ */
#fermibot[data-open="false"] .fb-panel { display: none; }
#fermibot[data-open="true"]  .fb-launcher,
#fermibot[data-open="true"]  .fb-greeting { display: none; }

/* ============================================================
   Accesibilidad / reduce motion
   ============================================================ */
#fermibot :focus-visible { outline: 2px solid var(--fb-amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    #fermibot *, #fermibot *::after, #fermibot *::before {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}