/* dvb 29/08/2026 - Modulo IA: estilos del widget de chat "Buscador de IA".
   Se incluye desde libs/_footer.php junto con js/gv-ia-widget.js.
   El color de marca llega por la variable --gvia-color (config del CRM). */

/* dvb 18/09/2026 - TODOS los border-radius llevan !important: propiedades.php carga components.css de Metronic
   (version cuadrada), que pone border-radius:0 !important a div/button/img/span... y el chat salia cuadrado */
#gvIaWidget { --gvia-color: #be272d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
#gvIaWidget * { box-sizing: border-box; }

/* Burbuja flotante */
#gvIaBtn {
    position: fixed; right: 22px; bottom: 22px; z-index: 99990;
    /* dvb 24/09/2026 - mas grande: con foto de perfil el recorte redondo se comia la cara */
    width: 72px; height: 72px; border-radius: 50% !important; border: none; cursor: pointer;
    background: var(--gvia-color); color: #fff; font-size: 30px; line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .15s ease;
    display: flex; align-items: center; justify-content: center;
}
#gvIaBtn:hover { transform: scale(1.07); }
#gvIaBtn .gvia-dot {
    position: absolute; top: 2px; right: 2px; width: 13px; height: 13px;
    background: #26C281; border: 2px solid #fff; border-radius: 50% !important;
}

/* Aside del chat */
#gvIaAside {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: 99991;
    width: 380px; max-width: 100vw; background: #f5f6f8;
    box-shadow: -8px 0 30px rgba(0,0,0,.25);
    display: flex; flex-direction: column;
    transform: translateX(105%); transition: transform .25s ease;
}
#gvIaAside.gvia-abierto { transform: translateX(0); }
@media (max-width: 480px) { #gvIaAside { width: 100vw; } }

#gvIaHeader {
    background: var(--gvia-color); color: #fff; padding: 14px 16px;
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
#gvIaHeader .gvia-avatar {
    /* dvb 24/09/2026 - avatar del encabezado mas grande */
    width: 48px; height: 48px; border-radius: 50% !important; background: rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    /* dvb 29/09/2026 - sin esto el flex del encabezado lo encogia a lo ancho (titulo + botones) y la foto salia ovalada */
    flex: 0 0 48px; min-width: 48px;
}
#gvIaHeader .gvia-titulo { font-weight: 700; font-size: 15px; }
#gvIaHeader .gvia-sub { font-size: 11.5px; opacity: .85; }
#gvIaHeader .gvia-sub .gvia-dot-mini {
    display: inline-block; width: 8px; height: 8px; border-radius: 50% !important;
    background: #26C281; margin-right: 4px;
}
#gvIaCerrar {
    margin-left: auto; background: none; border: none; color: #fff;
    font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1;
}

/* Mensajes */
#gvIaMensajes {
    flex: 1; overflow-y: auto; padding: 14px 12px; display: flex;
    flex-direction: column; gap: 8px; scroll-behavior: smooth;
}
.gvia-msg { max-width: 84%; padding: 9px 12px; border-radius: 14px !important; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; position: relative; }
.gvia-msg.gvia-bot { background: #fff; color: #2b2b2b; align-self: flex-start; border-bottom-left-radius: 4px !important; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.gvia-msg.gvia-user { background: var(--gvia-color); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px !important; }
.gvia-msg .gvia-hora { display: block; font-size: 10px; opacity: .55; margin-top: 4px; text-align: right; }
.gvia-msg a { color: inherit; text-decoration: underline; }

/* Indicador escribiendo */
.gvia-typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border-radius: 14px !important; border-bottom-left-radius: 4px !important; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.gvia-typing span { width: 7px; height: 7px; border-radius: 50% !important; background: #b9b9b9; animation: gviaTyping 1.2s infinite ease-in-out; }
.gvia-typing span:nth-child(2) { animation-delay: .18s; }
.gvia-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes gviaTyping { 0%, 70%, 100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-5px); opacity: 1; } }

/* Card de propiedad recomendada */
.gvia-card { align-self: flex-start; width: 92%; background: #fff; border-radius: 12px !important; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.gvia-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: #eee; }
.gvia-card .gvia-card-body { padding: 10px 12px; }
.gvia-card .gvia-card-nombre { font-weight: 700; font-size: 13.5px; color: #2b2b2b; margin-bottom: 3px; }
.gvia-card .gvia-card-precio { color: var(--gvia-color); font-weight: 700; font-size: 15px; }
.gvia-card .gvia-card-datos { color: #777; font-size: 12px; margin: 4px 0 8px; }
.gvia-card .gvia-card-botones { display: flex; gap: 8px; }
.gvia-card .gvia-card-botones a, .gvia-card .gvia-card-botones button {
    flex: 1; text-align: center; padding: 8px 6px; border-radius: 7px !important; font-size: 12.5px;
    font-weight: 600; cursor: pointer; text-decoration: none; border: none;
}
.gvia-card .gvia-btn-ver { background: var(--gvia-color); color: #fff; }
.gvia-card .gvia-btn-interes { background: #f0f0f0; color: #444; }

/* Formulario de registro (pre-chat obligatorio) */
#gvIaRegistro { padding: 18px 16px; overflow-y: auto; flex: 1; } /* dvb 18/09/2026 - con video vertical el form baja: que haga scroll */
#gvIaRegistro .gvia-reg-titulo { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 4px; }
#gvIaRegistro .gvia-reg-sub { font-size: 12px; color: #888; margin-bottom: 14px; }
#gvIaRegistro input {
    width: 100%; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px;
    border: 1px solid #ddd; border-radius: 8px !important; outline: none; background: #fff;
}
#gvIaRegistro input:focus { border-color: var(--gvia-color); }
#gvIaRegistro button {
    width: 100%; padding: 11px; border: none; border-radius: 8px !important; cursor: pointer;
    background: var(--gvia-color); color: #fff; font-weight: 700; font-size: 14px;
}
#gvIaRegistro .gvia-reg-error { color: #e7505a; font-size: 12px; margin-bottom: 8px; min-height: 15px; }
#gvIaRegistro .gvia-reg-aviso { font-size: 10.5px; color: #999; margin-top: 10px; text-align: center; }
#gvIaRegistro .gvia-reg-aviso a { color: #777; }

/* Input del chat */
#gvIaInputBar {
    display: flex; gap: 8px; padding: 10px 12px; background: #fff;
    border-top: 1px solid #e5e5e5; flex-shrink: 0;
}
#gvIaInput {
    flex: 1; border: 1px solid #ddd; border-radius: 20px !important; padding: 9px 14px;
    font-size: 13.5px; outline: none; resize: none; max-height: 90px;
}
#gvIaInput:focus { border-color: var(--gvia-color); }
#gvIaEnviar {
    width: 40px; height: 40px; border-radius: 50% !important; border: none; cursor: pointer;
    background: var(--gvia-color); color: #fff; font-size: 16px; flex-shrink: 0;
}
#gvIaEnviar:disabled { opacity: .5; cursor: default; }

/* dvb 18/09/2026 - notas de voz: microfono, barra "Grabando..." (reemplaza al textarea) y burbuja de audio */
#gvIaMic {
    width: 40px; height: 40px; border-radius: 50% !important; border: 1px solid #ddd; cursor: pointer;
    background: #fff; font-size: 17px; flex-shrink: 0; line-height: 1;
}
#gvIaMic:hover { border-color: var(--gvia-color); }
#gvIaGrabBar { display: none; flex: 1; align-items: center; gap: 8px; padding: 0 6px; font-size: 13.5px; color: #444; }
#gvIaGrabCancelar { border: none; background: #f1f1f1; color: #666; width: 30px; height: 30px; border-radius: 50% !important; cursor: pointer; font-size: 13px; }
#gvIaGrabBar .gvia-grab-dot { width: 10px; height: 10px; border-radius: 50% !important; background: #e7505a; animation: gviaParpadeo 1s infinite; }
/* dvb 29/09/2026 - el aviso "se manda sola" es mas largo: en pantallas angostas se recorta en vez de partir la barra */
#gvIaGrabBar .gvia-grab-txt { color: #999; font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gvIaInputBar.gvia-grabando #gvIaGrabBar { display: flex; }
#gvIaInputBar.gvia-grabando #gvIaInput,
#gvIaInputBar.gvia-grabando #gvIaMic { display: none; }
@keyframes gviaParpadeo { 50% { opacity: .25; } }
.gvia-msg.gvia-pendiente { opacity: .7; font-style: italic; }
.gvia-msg.gvia-audio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gvia-msg.gvia-audio .gvia-hora { width: 100%; margin-top: 0; }
.gvia-audio-btn {
    width: 34px; height: 34px; border-radius: 50% !important; border: none; cursor: pointer; flex-shrink: 0;
    background: var(--gvia-color); color: #fff; font-size: 13px; line-height: 1;
}
.gvia-audio-txt { font-size: 13px; color: #555; }

/* dvb 01/09/2026 - boton Finalizar (terminar conversacion) y botones mini de confirmacion */
#gvIaTerminar {
    margin-left: auto; background: rgba(255,255,255,.18); border: none; color: #fff;
    font-size: 11.5px; padding: 5px 11px; border-radius: 12px !important; cursor: pointer;
}
#gvIaTerminar:hover { background: rgba(255,255,255,.32); }
#gvIaCerrar { margin-left: 4px; }

/* dvb 30/09/2026 - HOJA INFERIOR EN CELULAR (peticion GVIA: al ir a la lista de propiedades el chat tapaba los
   resultados y habia que cerrar y abrir). Tres tamaños del aside: completa (como siempre), media (mitad de la
   pantalla, la pagina se ve atras) y barra (encabezado + caja de escribir / esfera chica). Boton ⌄/⌃ y arrastre
   del encabezado. En PC nada cambia: el boton no se ve y las clases no aplican. */
#gvIaHeader .gvia-head-txt { min-width: 0; }
#gvIaHeader .gvia-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gvIaHoja {
    display: none; margin-left: 6px; background: rgba(255,255,255,.18); border: none; color: #fff; cursor: pointer;
    width: 32px; height: 28px; border-radius: 14px !important; font-size: 18px; line-height: 1; padding: 0 0 4px;
}
@media (max-width: 767px) {
    #gvIaHoja { display: inline-block; }
    #gvIaHeader { touch-action: none; cursor: grab; }
    #gvIaAside.gvia-hoja-media, #gvIaAside.gvia-hoja-barra {
        top: auto; border-radius: 16px 16px 0 0 !important; overflow: hidden;
        box-shadow: 0 -8px 30px rgba(0,0,0,.28);
    }
    #gvIaAside.gvia-hoja-media { height: 55vh; }
    #gvIaAside.gvia-hoja-barra { height: auto; max-height: 45vh; }
    #gvIaAside.gvia-hoja-barra #gvIaMensajes,
    #gvIaAside.gvia-hoja-barra #gvIaRegistro,
    #gvIaAside.gvia-hoja-barra #gvIaVozHist,
    #gvIaAside.gvia-hoja-barra #gvIaVozTirador,
    #gvIaAside.gvia-hoja-barra #gvIaVozVista { display: none !important; }
    #gvIaAside.gvia-hoja-barra #gvIaVozPantalla { flex: 0 0 auto; }
    /* en barra el subtitulo es lo ultimo que dijo el asistente: que se lea */
    #gvIaAside.gvia-hoja-barra #gvIaHeader .gvia-sub { white-space: normal; font-size: 12px; line-height: 1.3; max-height: 2.6em; }
}
.gvia-btn-mini {
    border: 1px solid #ccc; background: #f7f7f7; border-radius: 5px !important;
    padding: 4px 11px; cursor: pointer; font-size: 12px;
}
.gvia-btn-mini-p { border-color: var(--gvia-color); background: var(--gvia-color); color: #fff; }

/* dvb 11/09/2026 - boton(es) "Ver la lista" (resultados en propiedades.php) */
.gvia-lista-botones { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.gvia-msg a.gvia-btn-lista {
    display: inline-block; background: var(--gvia-color); color: #fff; text-decoration: none;
    padding: 8px 14px; border-radius: 18px !important; font-weight: 600; font-size: 13px;
}
.gvia-msg a.gvia-btn-lista:hover { opacity: .9; }

/* dvb 11/09/2026 - globito sobre el boton flotante (movil, al volver de la redireccion) */
#gvIaGlobito {
    position: fixed; right: 22px; bottom: 90px; z-index: 99990; max-width: 230px;
    background: #fff; color: #2b2b2b; font-size: 13px; line-height: 1.4; cursor: pointer;
    padding: 10px 28px 10px 12px; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
#gvIaGlobito::after {
    content: ''; position: absolute; right: 22px; bottom: -7px; width: 14px; height: 14px;
    background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 5px rgba(0,0,0,.06);
}
/* dvb 11/09/2026 - imagen con el chat cerrado (se sube en CRM > IA > Configuracion; ancho configurable) */
#gvIaTeaser {
    position: fixed; right: 22px; bottom: 90px; z-index: 99990; max-width: calc(100vw - 44px);
    cursor: pointer; animation: gviaTeaserIn .35s ease;
}
#gvIaTeaser img {
    display: block; width: 100%; height: auto; border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#gvIaTeaser .gvia-teaser-x {
    position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50% !important;
    border: none; background: #fff; color: #555; font-size: 15px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.25); padding: 0;
}
@keyframes gviaTeaserIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#gvIaGlobito .gvia-globito-x {
    position: absolute; top: 2px; right: 4px; background: none; border: none; color: #999;
    font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px;
}

/* dvb 18/09/2026 - foto de perfil del asistente (boton flotante, encabezado y nubecita) */
#gvIaBtn.gvia-con-foto { padding: 0; overflow: visible; background: #fff; }
/* dvb 24/09/2026 - object-position arriba: en fotos de personas el centro deja fuera la cara */
#gvIaBtn.gvia-con-foto img { width: 100%; height: 100%; border-radius: 50% !important; object-fit: cover; object-position: 50% 22%; display: block; }
#gvIaBtn.gvia-con-foto .gvia-dot { animation: gviaLatido 2s infinite; }
@keyframes gviaLatido { 0%, 100% { box-shadow: 0 0 0 0 rgba(38,194,129,.6); } 50% { box-shadow: 0 0 0 6px rgba(38,194,129,0); } }
#gvIaHeader .gvia-avatar.gvia-con-foto { background: #fff; overflow: hidden; position: relative; }
#gvIaHeader .gvia-avatar.gvia-con-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
#gvIaGlobito { animation: gviaTeaserIn .35s ease; }
#gvIaGlobito .gvia-globito-foto {
    float: left; width: 44px; height: 44px; margin: 0 9px 0 0; border-radius: 50% !important; overflow: hidden;
}
#gvIaGlobito .gvia-globito-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

/* dvb 18/09/2026 - boton voz/texto del encabezado */
#gvIaModo {
    margin-left: auto; background: rgba(255,255,255,.18); border: none; color: #fff; cursor: pointer;
    width: 32px; height: 28px; border-radius: 14px !important; font-size: 14px; line-height: 1; padding: 0;
}
#gvIaModo + #gvIaTerminar { margin-left: 6px; }

/* dvb 18/09/2026 - video de bienvenida y eleccion voz/texto en el registro */
/* dvb 18/09/2026 - el video toma SU forma: vertical tipo reels/TikTok (sin franjas negras) u horizontal a lo ancho */
/* dvb 24/09/2026 - el video vive DENTRO de la conversacion (mockup v1, hoja 2): tarjeta alineada a la
   izquierda como un mensaje del asistente, con boton de play encima (no arranca solo) */
#gvIaVideo { margin: 2px 0 4px; align-self: flex-start; max-width: 78%; position: relative; }
#gvIaVideo video {
    display: inline-block; max-width: 100%; width: auto; height: auto; max-height: min(58vh, 520px);
    border-radius: 16px !important; background: #000; box-shadow: 0 6px 18px rgba(0,0,0,.18); vertical-align: top;
}
#gvIaVideo.gvia-horizontal video { width: 100%; max-height: none; }
/* dvb 24/09/2026 - dentro del chat la tarjeta es chica (antes ocupaba medio alto de pantalla) */
#gvIaVideo.gvia-vertical video { width: 180px; max-height: none; }
#gvIaVideo video, #gvIaVideo iframe, #gvIaVideo .gvia-video-cartel { display: block; }
#gvIaVideo .gvia-video-cartel {
    width: 180px; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 16px !important;
    background: linear-gradient(160deg, #2f3947, #161c25);
}
#gvIaVideo:not(.gvia-vertical) .gvia-video-cartel { width: 260px; aspect-ratio: 16 / 9; }
#gvIaVideo .gvia-video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 54px; height: 54px; border-radius: 50% !important; border: none; cursor: pointer;
    background: rgba(255,255,255,.92); box-shadow: 0 4px 16px rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center; padding: 0;
}
#gvIaVideo .gvia-video-play:hover { background: #fff; }
#gvIaVideo .gvia-video-tri {
    width: 0; height: 0; margin-left: 4px;
    border-left: 17px solid var(--gvia-color); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}

#gvIaVideo iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px !important; }
#gvIaVideo.gvia-vertical iframe { width: 180px; height: auto; aspect-ratio: 9 / 16; margin: 0; }
.gvia-reg-modo { margin: 2px 0 10px; font-size: 13px; }
.gvia-reg-modo-tit { color: #555; margin-bottom: 5px; }
#gvIaRegistro .gvia-reg-modo label { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; cursor: pointer; font-weight: normal; }
#gvIaRegistro .gvia-reg-modo input { margin: 0; width: auto; padding: 0; }

/* dvb 18/09/2026 - MODO VOZ tipo ChatGPT: esfera animada al centro, sin burbujas de texto.
   Estados (clase en #gvIaVozPantalla): listo, escuchando (la esfera late con tu voz), pensando, hablando, pausado */
#gvIaVozPantalla {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 24px 20px; text-align: center;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f1f2f5 70%);
}
#gvIaOrbe {
    width: 170px; height: 170px; border-radius: 50% !important; border: none; padding: 0; cursor: pointer;
    background: transparent; position: relative; transition: transform .09s linear; outline: none;
}
#gvIaOrbe .gvia-orbe-nucleo {
    /* dvb 24/09/2026 - el velo blanco se comia el rojo de marca y la esfera se veia ROSA.
       Se baja el brillo y se sube el encuadre de la foto (cara, no centro). */
    position: absolute; inset: 0; border-radius: 50% !important; background-size: cover; background-position: 50% 22%;
    background-color: var(--gvia-color);
    background-image: radial-gradient(circle at 34% 26%, rgba(255,255,255,.22), rgba(255,255,255,0) 38%);
    box-shadow: 0 10px 40px rgba(0,0,0,.18), inset 0 -12px 30px rgba(0,0,0,.18);
}
#gvIaOrbe::before, #gvIaOrbe::after {
    content: ''; position: absolute; inset: -10px; border-radius: 50% !important; border: 2px solid var(--gvia-color);
    opacity: 0; pointer-events: none;
}
#gvIaVozEstado { font-size: 15px; color: #444; min-height: 22px; font-weight: 600; }
#gvIaVozExtras { display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 100%; }
#gvIaVozExtras .gvia-btn-lista {
    display: inline-block; background: var(--gvia-color); color: #fff; text-decoration: none; font-weight: 600;
    padding: 9px 16px; border-radius: 20px !important; font-size: 13.5px;
}
#gvIaVozExtras .gvia-voz-texto {
    background: #fff; border-radius: 12px !important; padding: 10px 12px; font-size: 13px; color: #333;
    max-height: 30vh; overflow-y: auto; text-align: left; white-space: pre-wrap; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
/* dvb 29/09/2026 - la esfera, su estado y los botones viven en #gvIaVozDock (antes eran hijos directos de la
   pantalla); centrada se ve igual que antes, y en la vista con texto se vuelve la barra de abajo */
#gvIaVozDock { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 100%; }
#gvIaVozBotones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
#gvIaVozTexto, #gvIaVozVista {
    background: #fff; border: 1px solid #ddd; color: #555; cursor: pointer;
    padding: 8px 16px; border-radius: 20px !important; font-size: 13px; line-height: 1.2;
}
#gvIaVozTexto:hover, #gvIaVozVista:hover { border-color: var(--gvia-color); color: var(--gvia-color); }
/* listo: respira despacio */
#gvIaVozPantalla.gvia-e-listo .gvia-orbe-nucleo,
#gvIaVozPantalla.gvia-e-pausado .gvia-orbe-nucleo { animation: gviaRespira 3s ease-in-out infinite; }
@keyframes gviaRespira { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1); } }
/* escuchando: aro que se expande (el tamano de la esfera lo mueve tu voz, desde el JS) */
#gvIaVozPantalla.gvia-e-escuchando #gvIaOrbe::before { animation: gviaOnda 1.6s ease-out infinite; }
/* pensando: la esfera se encoge y un aro punteado gira */
#gvIaVozPantalla.gvia-e-pensando .gvia-orbe-nucleo { transform: scale(.78); transition: transform .3s; opacity: .85; }
#gvIaVozPantalla.gvia-e-pensando #gvIaOrbe::after {
    opacity: .8; border-style: dashed; inset: 4px; animation: gviaGira 1.4s linear infinite;
}
@keyframes gviaGira { to { transform: rotate(360deg); } }
/* hablando: late y emite ondas */
#gvIaVozPantalla.gvia-e-hablando .gvia-orbe-nucleo { animation: gviaHabla .7s ease-in-out infinite alternate; }
#gvIaVozPantalla.gvia-e-hablando #gvIaOrbe::before { animation: gviaOnda 1.2s ease-out infinite; }
#gvIaVozPantalla.gvia-e-hablando #gvIaOrbe::after { animation: gviaOnda 1.2s ease-out .6s infinite; }
@keyframes gviaHabla { from { transform: scale(.96); } to { transform: scale(1.06); } }
@keyframes gviaOnda { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }

/* dvb 24/09/2026 - MODO VOZ: gesto de arriba hacia abajo para ver la conversacion (como ChatGPT).
   El tirador de hasta arriba invita al gesto; se puede arrastrar o tocar. */
#gvIaVozPantalla { position: relative; overflow: hidden; }
#gvIaVozTirador {
    position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 2; border: none; padding: 0;
    background: none; cursor: pointer; touch-action: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
#gvIaVozTirador .gvia-tirador-barra { width: 44px; height: 5px; border-radius: 3px !important; background: rgba(15,31,71,.2); }
#gvIaVozHist {
    position: absolute; inset: 0; z-index: 3; background: #f5f6f8; display: flex; flex-direction: column;
    transform: translateY(-100%); transition: transform .28s ease; box-shadow: 0 12px 34px rgba(0,0,0,.2);
    touch-action: none;
}
#gvIaVozPantalla.gvia-hist-abierta #gvIaVozHist { transform: translateY(0); }
#gvIaVozHist.gvia-arrastrando { transition: none; }
#gvIaVozHist .gvia-hist-tit {
    flex-shrink: 0; padding: 12px 14px 8px; font-size: 13px; font-weight: 700; color: #444;
    border-bottom: 1px solid #e5e5e5; background: #fff;
}
#gvIaVozHistCuerpo {
    /* pan-y: el panel completo bloquea el gesto (touch-action:none), pero la lista si debe poder correrse */
    flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; touch-action: pan-y;
}
#gvIaVozHistCuerpo .gvia-hist-vacio { color: #999; font-size: 13px; text-align: center; margin: auto 0; }
#gvIaVozHistCerrar {
    flex-shrink: 0; border: none; background: #fff; border-top: 1px solid #e5e5e5; cursor: pointer;
    padding: 11px; font-size: 13px; color: #666; display: flex; align-items: center; justify-content: center; gap: 6px;
}
#gvIaVozHistCerrar .gvia-tirador-barra { width: 34px; height: 4px; border-radius: 3px !important; background: rgba(15,31,71,.2); }

/* dvb 29/09/2026 - MODO VOZ, VISTA CON TEXTO (peticion GVIA: ver el texto mientras se habla, sin estar deslizando).
   La conversacion ocupa la pantalla y la esfera queda chica en una barra abajo, con su estado y los botones. */
#gvIaVozPantalla.gvia-con-texto {
    justify-content: flex-start; align-items: stretch; padding: 0; gap: 0; text-align: left; background: #f5f6f8;
}
#gvIaVozPantalla.gvia-con-texto #gvIaVozTirador,
#gvIaVozPantalla.gvia-con-texto #gvIaVozHist .gvia-hist-tit,
#gvIaVozPantalla.gvia-con-texto #gvIaVozHistCerrar { display: none; }
#gvIaVozPantalla.gvia-con-texto #gvIaVozHist {
    position: static; transform: none; transition: none; flex: 1; min-height: 0; box-shadow: none;
    touch-action: auto; z-index: auto;
}
#gvIaVozPantalla.gvia-con-texto #gvIaVozDock {
    flex-shrink: 0; display: grid; max-width: none; align-items: center; gap: 8px 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "extras extras extras" "orbe estado botones";
    padding: 12px 14px 12px 20px; background: #fff; border-top: 1px solid #e5e5e5;
}
#gvIaVozPantalla.gvia-con-texto #gvIaOrbe { grid-area: orbe; width: 58px; height: 58px; }
#gvIaVozPantalla.gvia-con-texto #gvIaOrbe::before,
#gvIaVozPantalla.gvia-con-texto #gvIaOrbe::after { inset: -6px; }
#gvIaVozPantalla.gvia-con-texto #gvIaOrbe .gvia-orbe-nucleo {
    box-shadow: 0 3px 10px rgba(0,0,0,.2), inset 0 -5px 12px rgba(0,0,0,.18);
}
#gvIaVozPantalla.gvia-con-texto.gvia-e-pensando #gvIaOrbe::after { inset: 2px; }
#gvIaVozPantalla.gvia-con-texto #gvIaVozEstado { grid-area: estado; font-size: 13.5px; min-height: 0; line-height: 1.3; }
#gvIaVozPantalla.gvia-con-texto #gvIaVozExtras { grid-area: extras; flex-direction: row; flex-wrap: wrap; justify-content: center; }
#gvIaVozPantalla.gvia-con-texto #gvIaVozExtras:empty { display: none; }
/* el texto de respaldo (cuando falla la voz) ya esta en la conversacion de arriba */
#gvIaVozPantalla.gvia-con-texto #gvIaVozExtras .gvia-voz-texto { display: none; }
#gvIaVozPantalla.gvia-con-texto #gvIaVozBotones { grid-area: botones; margin: 0; flex-wrap: nowrap; gap: 6px; }
#gvIaVozPantalla.gvia-con-texto #gvIaVozBotones .gvia-lbl { display: none; }
#gvIaVozPantalla.gvia-con-texto #gvIaVozBotones button {
    width: 38px; height: 38px; padding: 0; border-radius: 50% !important; font-size: 16px;
}

/* dvb 30/09/2026 - BARRIDA CELULAR (reporte GVIA: "algunos circulos salen como ovalos" + uso poco practico).
   _responsive.css del sitio (<= 768px) pone a TODO button min-height: 44px + padding 10px y a los textarea
   min-height: 44px: los botones redondos del widget quedaban de 40x44 (microfono, enviar) y 38x44 (voz). Aqui se
   neutraliza (el id pesa mas que "button") y de paso los botones de toque quedan de 44px, que es lo recomendado. */
#gvIaWidget button, #gvIaWidget a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#gvIaMensajes, #gvIaVozHistCuerpo, #gvIaRegistro { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
    #gvIaWidget button { min-height: 0; }
    /* redondos: mismo ancho que alto, y de 44px los que se tocan seguido */
    #gvIaEnviar, #gvIaMic { width: 44px; height: 44px; padding: 0; }
    #gvIaGrabCancelar { width: 36px; height: 36px; padding: 0; }
    .gvia-audio-btn { width: 36px; height: 36px; padding: 0; }
    #gvIaVozPantalla.gvia-con-texto #gvIaVozBotones button { width: 44px; height: 44px; }
    /* encabezado: botones alcanzables sin que crezca el encabezado. flex-shrink 0: el encabezado los aplastaba
       (el boton de voz quedaba de 19px de ancho) para hacerle lugar al titulo; el que se acomoda es el titulo */
    #gvIaHeader { padding: 10px 12px; gap: 8px; }
    #gvIaHeader button { flex-shrink: 0; }
    #gvIaHeader .gvia-avatar { width: 36px; height: 36px; flex-basis: 36px; min-width: 36px; }
    #gvIaHeader .gvia-head-txt { flex: 1; }
    /* el nombre del asistente puede ser largo: maximo 2 lineas (en 390px cabe "Mía, asistente inteligente VIA") */
    #gvIaHeader .gvia-titulo {
        font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #gvIaModo, #gvIaHoja { width: 32px; height: 32px; margin-left: 4px; border-radius: 16px !important; }
    #gvIaTerminar { margin-left: 4px; padding: 7px 9px; font-size: 11.5px; }
    #gvIaCerrar { width: 34px; height: 34px; margin-left: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
    /* 16px en las cajas de texto: con menos, iOS hace zoom solo al escribir */
    #gvIaInput, #gvIaRegistro input { font-size: 16px; }
    #gvIaInput { min-height: 44px; padding: 10px 14px; }
    /* iPhone: la barra de abajo no queda debajo del indicador de inicio */
    #gvIaInputBar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    #gvIaVozPantalla.gvia-con-texto #gvIaVozDock { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    /* la pagina de atras no se mueve mientras el chat esta a pantalla completa */
    body.gvia-bloqueo { overflow: hidden; }
}