/* Asesor web (visitantes; distinto del asistente IA del admin) */
/* Botón fijo abajo-derecha; ventana encima del botón, sin overlay a pantalla completa. */
.au-la-widget {
position: fixed;
right: 18px;
/* ~20% más arriba: +11.2px (20% de altura mínima del botón 56px) sobre el margen inferior */
bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 11.2px);
z-index: 99999;
font-family: inherit;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 12px;
max-height: calc(100vh - max(18px, env(safe-area-inset-bottom, 0px)) - 19.2px);
max-height: calc(100dvh - max(18px, env(safe-area-inset-bottom, 0px)) - 19.2px);
pointer-events: none;
box-sizing: border-box;
}
.au-la-widget > * {
pointer-events: auto;
}
.au-la-toggle {
display: flex; align-items: center; justify-content: center; gap: 8px;
flex-shrink: 0;
position: relative;
z-index: 2;
min-width: 56px; min-height: 56px; padding: 0 18px;
border: 2px solid rgba(200, 242, 25, 0.85); border-radius: 999px;
background: linear-gradient(145deg, #0d1b2d 0%, #152535 55%, #0d1b2d 100%);
color: #f5fafc; font-size: 0.9rem; font-weight: 800;
box-shadow: 0 8px 0 rgba(200, 242, 25, 0.22), 0 14px 32px rgba(4, 12, 24, 0.5);
cursor: pointer;
}
.au-la-toggle:hover { filter: brightness(1.08); }
.au-la-toggle:focus-visible { outline: 2px solid #c8f219; outline-offset: 3px; }
.au-la-toggle-icon {
width: 22px; height: 22px; flex-shrink: 0;
background: no-repeat center / contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8f219' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.au-la-widget--offline .au-la-toggle { border-color: rgba(148, 163, 184, 0.6); box-shadow: 0 10px 28px rgba(4, 12, 24, 0.45); }
.au-la-panel {
display: none;
flex-direction: column;
flex: 0 1 auto;
min-height: 0;
box-sizing: border-box;
width: min(100vw - 24px, 420px);
max-width: min(100vw - 24px, 420px);
height: min(58vh, 480px);
max-height: min(65vh, 520px);
margin: 0;
border-radius: 16px;
overflow: hidden;
background: #fff;
color: #0d1b2d;
box-shadow: 0 16px 48px rgba(4, 12, 24, 0.4);
border: 2px solid var(--primary, #d7ff1f);
}
.au-la-panel.au-la-open {
display: flex;
position: relative;
z-index: 1;
}
.au-la-head {
padding: 12px 14px; background: #0d1b2d; color: #fff;
font-weight: 700; font-size: 0.95rem;
display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
flex-shrink: 0;
}
.au-la-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-la-head-title { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; }
.au-la-head-sub { font-size: 0.68rem; font-weight: 500; opacity: 0.82; line-height: 1.25; text-transform: none; }
.au-la-link-row a,
.au-la-bubble--bot a.au-la-inline-link {
color: #0d4d8c; font-weight: 700; text-decoration: underline;
text-underline-offset: 2px;
}
.au-la-link-row a:hover,
.au-la-bubble--bot a.au-la-inline-link:hover { color: #0a3a6a; }
.au-la-bubble--bot a.au-la-inline-link:focus-visible {
outline: 2px solid #c8f219; outline-offset: 2px; border-radius: 2px;
}
.au-la-close {
background: transparent; border: none; color: #fff; font-size: 1.35rem;
line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.au-la-close:hover { background: rgba(255,255,255,0.12); }
.au-la-messages {
flex: 1; overflow-y: auto; padding: 12px; background: #f4f7fb;
display: flex; flex-direction: column; gap: 10px;
min-height: 0;
}
.au-la-bubble {
max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 0.9rem;
line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.au-la-user-row {
align-self: flex-end;
display: flex;
flex-direction: column;
align-items: flex-end;
max-width: 94%;
}
.au-la-user-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.au-la-user-head {
display: flex;
align-items: center;
gap: 8px;
padding-right: 2px;
}
.au-la-user-avatar {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(29, 78, 216, 0.35);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center 55% / 14px 14px,
linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
}
.au-la-user-name {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #334155;
}
.au-la-bubble--user {
align-self: flex-end;
max-width: 100%;
margin: 0;
padding: 11px 14px 12px;
border-radius: 16px 16px 4px 16px;
background: linear-gradient(155deg, #1e3a5f 0%, #0d1b2d 55%, #0f2744 100%);
color: #f1f5f9;
border: 1px solid rgba(96, 165, 250, 0.45);
box-shadow: 0 4px 14px rgba(13, 27, 45, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.au-la-bubble--bot { align-self: flex-start; background: #fff; border: 1px solid #dde5ee; color: #0d1b2d; }
.au-la-bubble--typing { position: relative; }
.au-la-thinking {
align-self: flex-start;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
background: #fff;
border: 1px solid #c8d4e0;
box-shadow: 0 1px 0 rgba(13, 27, 45, 0.06);
}
.au-la-thinking-text {
font-weight: 600;
color: #475569;
font-size: 0.88rem;
}
.au-la-thinking-dots {
display: inline-flex;
align-items: center;
gap: 4px;
height: 1.1em;
}
.au-la-thinking-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #0d1b2d;
opacity: 0.35;
animation: auLaDotPulse 1.05s ease-in-out infinite;
}
.au-la-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.au-la-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes auLaDotPulse {
0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
40% { transform: translateY(-4px); opacity: 1; }
}
.au-la-caret {
display: inline-block;
width: 2px;
height: 1em;
margin-left: 2px;
vertical-align: text-bottom;
background: #0d1b2d;
animation: auLaCaretBlink 1s steps(1, end) infinite;
}
@keyframes auLaCaretBlink {
50% { opacity: 0; }
}
.au-la-foot { padding: 10px; border-top: 1px solid #e2e8f0; background: #fff; display: flex; gap: 8px; flex-shrink: 0; }
.au-la-foot input {
flex: 1; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px;
font-size: 0.9rem;
}
.au-la-foot button {
border: none; border-radius: 10px; padding: 10px 14px; font-weight: 700;
background: #0d1b2d; color: #fff; cursor: pointer; font-size: 0.85rem;
}
.au-la-foot button:disabled { opacity: 0.55; cursor: not-allowed; }
.au-la-note { font-size: 0.75rem; color: #64748b; padding: 0 12px 8px; flex-shrink: 0; }