/* 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; }
#gvIaGrabBar .gvia-grab-txt { color: #999; font-size: 12px; }
#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; }
.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);
}
#gvIaVozTexto {
    margin-top: 6px; background: #fff; border: 1px solid #ddd; color: #555; cursor: pointer;
    padding: 8px 16px; border-radius: 20px !important; font-size: 13px;
}
#gvIaVozTexto: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); }
#gvIaVozTirador .gvia-tirador-txt { font-size: 10.5px; color: #9aa3b2; letter-spacing: .3px; }
#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); }