/* Remotto Chatbot — widget público. Todo va dentro de .remotto-root para no chocar con el tema. */

.remotto-root, .remotto-root *{ box-sizing:border-box; }
.remotto-root{
    --remotto-dark:#1B2340;
    --remotto-muted:#6B7280;
    --remotto-bubble:#EEF2FB;
    --remotto-border:#DCE1EF;
    font-family: inherit;
    font-size:15px;
    line-height:1.4;
}
.remotto-root button{ font-family:inherit; margin:0; text-transform:none; letter-spacing:normal; }

/* ---------- botón flotante ---------- */
.remotto-root .remotto-launcher{
    position:fixed; bottom:24px; right:24px;
    width:var(--remotto-size,56px); height:var(--remotto-size,56px);
    border-radius:50%; border:none; padding:0; cursor:pointer;
    background:var(--remotto-primary,#2A4494); color:var(--remotto-on-primary,#fff);
    box-shadow:0 10px 24px rgba(20,25,50,.28);
    display:flex; align-items:center; justify-content:center;
    z-index:99998; transition:transform .15s ease;
}
.remotto-root .remotto-launcher svg{ width:46%; height:46%; }
.remotto-root .remotto-launcher.remotto-left{ right:auto; left:24px; }
.remotto-root .remotto-launcher:hover{ transform:translateY(-2px) scale(1.04); }
.remotto-root .remotto-launcher:focus-visible{ outline:3px solid var(--remotto-accent,#F2A93B); outline-offset:3px; }

/* ---------- burbuja de invitación ---------- */
.remotto-root .remotto-teaser{
    position:fixed; right:24px; bottom:calc(24px + var(--remotto-size,56px) + 12px);
    display:flex; align-items:flex-start; gap:4px;
    background:#fff; color:var(--remotto-dark); border-radius:14px; padding:4px 4px 4px 0;
    box-shadow:0 10px 28px rgba(20,25,50,.18); max-width:260px; z-index:99998;
    opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .25s, transform .25s;
}
.remotto-root .remotto-teaser.remotto-left{ right:auto; left:24px; }
.remotto-root .remotto-teaser.remotto-show{ opacity:1; transform:none; pointer-events:auto; }
.remotto-root .remotto-teaser-text{ background:none; border:none; text-align:left; padding:8px 4px 8px 14px; cursor:pointer; color:inherit; font-size:.88rem; }
.remotto-root .remotto-teaser-close{ background:none; border:none; color:var(--remotto-muted); cursor:pointer; font-size:.7rem; padding:6px; border-radius:6px; }

/* ---------- panel ---------- */
.remotto-root .remotto-panel{
    position:fixed; right:24px; bottom:calc(24px + var(--remotto-size,56px) + 14px);
    width:380px; max-width:calc(100vw - 32px);
    height:600px; max-height:calc(100vh - 120px);
    background:#fff; color:var(--remotto-dark);
    border-radius:18px; overflow:hidden;
    box-shadow:0 24px 60px rgba(20,25,50,.24);
    display:flex; flex-direction:column;
    transform:translateY(14px) scale(.97); opacity:0; pointer-events:none;
    transition:transform .2s cubic-bezier(.2,.8,.3,1), opacity .16s ease;
    z-index:99999;
}
.remotto-root .remotto-panel.remotto-left{ right:auto; left:24px; }
.remotto-root .remotto-panel.remotto-open{ transform:none; opacity:1; pointer-events:auto; }

.remotto-root .remotto-header{
    background:var(--remotto-primary,#2A4494); color:var(--remotto-on-primary,#fff);
    padding:14px 16px; display:flex; align-items:center; gap:11px; flex-shrink:0;
}
.remotto-root .remotto-avatar{
    width:36px; height:36px; border-radius:50%; flex-shrink:0; overflow:hidden;
    background:var(--remotto-accent,#F2A93B); color:var(--remotto-on-accent,#1B2340);
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.remotto-root .remotto-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.remotto-root .remotto-header-text{ flex:1; min-width:0; }
.remotto-root .remotto-name{ font-weight:700; font-size:1rem; }
.remotto-root .remotto-status{ font-size:.75rem; opacity:.8; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.remotto-root .remotto-close{
    background:none; border:none; cursor:pointer; color:inherit; opacity:.9;
    width:30px; height:30px; border-radius:8px; font-size:.9rem; padding:0;
}
.remotto-root .remotto-close:hover{ background:rgba(255,255,255,.15); }

/* ---------- mensajes ---------- */
.remotto-root .remotto-messages{
    flex:1; overflow-y:auto; padding:16px 14px 10px;
    display:flex; flex-direction:column; gap:9px;
    overscroll-behavior:contain;
}
.remotto-root .remotto-row{ display:flex; }
.remotto-root .remotto-row.user{ justify-content:flex-end; }
.remotto-root .remotto-bubble{
    max-width:85%; padding:9px 13px; border-radius:15px;
    font-size:.9rem; line-height:1.45; white-space:pre-line; overflow-wrap:anywhere;
    animation:remotto-in .22s ease both;
}
.remotto-root .remotto-row.bot .remotto-bubble{ background:var(--remotto-bubble); border-bottom-left-radius:4px; }
.remotto-root .remotto-row.user .remotto-bubble{ background:var(--remotto-accent,#F2A93B); color:var(--remotto-on-accent,#1B2340); border-bottom-right-radius:4px; }

/* opciones */
.remotto-root .remotto-choices{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-left:2px; animation:remotto-in .25s ease both; }
.remotto-root .remotto-choice{
    border:1.5px solid var(--remotto-border); background:#fff; color:var(--remotto-primary,#2A4494);
    font-size:.84rem; font-weight:600; text-align:left; line-height:1.3;
    padding:8px 13px; border-radius:12px; cursor:pointer; max-width:92%;
    transition:background .12s, border-color .12s;
}
.remotto-root .remotto-choice:hover, .remotto-root .remotto-choice:focus-visible{ border-color:var(--remotto-primary,#2A4494); background:#F4F6FB; outline:none; }

.remotto-root .remotto-choice-ghost{ border-style:dashed; color:var(--remotto-muted); font-weight:500; }

/* campo para escribir */
.remotto-root .remotto-composer{
    display:flex; align-items:center; gap:8px; margin:0;
    padding:10px 12px 4px; border-top:1px solid #EEF0F5; flex-shrink:0;
}
.remotto-root .remotto-composer input{
    flex:1; min-width:0; margin:0; height:auto;
    border:1px solid #E1E5EF; background:#F7F8FB; color:var(--remotto-dark);
    border-radius:20px; padding:10px 14px; font-size:16px; /* 16px evita el zoom automático en iPhone */
    font-family:inherit; line-height:1.3; outline:none; box-shadow:none;
}
.remotto-root .remotto-composer input::placeholder{ color:#9AA1B5; }
.remotto-root .remotto-composer input:focus{ border-color:var(--remotto-primary,#2A4494); background:#fff; }
.remotto-root .remotto-composer button{
    width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none; padding:0; cursor:pointer;
    background:var(--remotto-primary,#2A4494); color:var(--remotto-on-primary,#fff);
    display:flex; align-items:center; justify-content:center;
}
.remotto-root .remotto-composer button svg{ width:17px; height:17px; margin-left:2px; }
.remotto-root .remotto-composer button:focus-visible{ outline:3px solid var(--remotto-accent,#F2A93B); outline-offset:2px; }

/* botones de contacto al final */
.remotto-root .remotto-actions{ display:flex; flex-direction:column; gap:8px; margin-top:4px; animation:remotto-in .25s ease both; }
.remotto-root .remotto-action{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 14px; border-radius:12px; font-weight:700; font-size:.9rem;
    text-decoration:none !important; transition:filter .12s, transform .12s;
}
.remotto-root .remotto-action svg{ width:18px; height:18px; flex-shrink:0; }
.remotto-root .remotto-action:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.remotto-root .remotto-wa{ background:#25D366; color:#0B3D1F !important; }
.remotto-root .remotto-mail{ background:var(--remotto-primary,#2A4494); color:var(--remotto-on-primary,#fff) !important; }

.remotto-root .remotto-warning{ font-size:.78rem; color:#8A5A00; background:#FFF6E0; border-radius:10px; padding:8px 10px; }

/* escribiendo… */
.remotto-root .remotto-typing .remotto-bubble{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.remotto-root .remotto-typing .remotto-bubble span{ width:6px; height:6px; border-radius:50%; background:#9AA6C4; animation:remotto-bounce 1.1s infinite ease-in-out; }
.remotto-root .remotto-typing .remotto-bubble span:nth-child(2){ animation-delay:.15s; }
.remotto-root .remotto-typing .remotto-bubble span:nth-child(3){ animation-delay:.3s; }

/* ---------- navegación inferior ---------- */
.remotto-root .remotto-nav{
    display:flex; gap:6px; padding:9px 12px; border-top:1px solid #EEF0F5; flex-shrink:0; flex-wrap:wrap;
}
.remotto-root .remotto-composer + .remotto-nav{ border-top:none; padding-top:6px; }
.remotto-root .remotto-nav-btn{
    flex:1 1 auto; background:#F4F6FB; border:none; color:var(--remotto-dark);
    font-size:.78rem; font-weight:600; padding:8px 10px; border-radius:9px; cursor:pointer; white-space:nowrap;
}
.remotto-root .remotto-nav-btn:hover{ background:#E8ECF6; }
.remotto-root .remotto-nav-btn:focus-visible{ outline:2px solid var(--remotto-primary,#2A4494); outline-offset:1px; }

.remotto-root .remotto-footnote{ text-align:center; font-size:.68rem; color:#A0A7BA; padding:0 0 8px; flex-shrink:0; }

@keyframes remotto-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes remotto-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion: reduce){
    .remotto-root *{ animation:none !important; transition:none !important; }
}

/* ---------- celular ---------- */
@media (max-width:480px){
    .remotto-root .remotto-panel, .remotto-root .remotto-panel.remotto-left{
        left:8px; right:8px; width:auto; max-width:none;
        bottom:calc(14px + var(--remotto-size,56px) + 10px);
        height:auto; top:12px; max-height:none;
    }
    .remotto-root .remotto-launcher{ right:16px; bottom:16px; }
    .remotto-root .remotto-launcher.remotto-left{ left:16px; }
    .remotto-root .remotto-teaser{ right:16px; bottom:calc(16px + var(--remotto-size,56px) + 10px); }
    .remotto-root .remotto-teaser.remotto-left{ left:16px; }
}

/* ---------- vista previa en wp-admin ---------- */
.remotto-root.remotto-preview .remotto-panel{
    position:relative; right:auto; left:auto; bottom:auto; top:auto;
    width:100%; max-width:380px; height:600px; max-height:none;
    opacity:1; transform:none; pointer-events:auto;
}

.remotto-root .remotto-divider{ font-size:.76rem; color:var(--remotto-muted); margin:6px 2px 0; }