/* B90 (22 oct 2026, ola 2a): Propy en la ficha. El botón vistoso de la caja de contacto y el chat: pantalla completa
   en el celular, una ventana abajo a la derecha desde 768 px. Toma los colores de la marca (--marca, --noche), así en
   la web de la agente va con los suyos. */

/* 26 oct (Roberto, bloque C: «Contactar ahora a Gia»): el botón en el turquesa de la paleta, un poco más claro, SIN SOMBRA
   en ningún estado (ni la sombra de color, ni el brillo de ::before y ::after: el destello de carga salió) y con el
   texto en la tinta de la marca. Contraste WCAG del texto (17 px, peso 800: texto normal, AA ≥ 4,5:1):
   - fondo --marca-claro #33ADB2 (el tramo claro del turquesa de la marca), texto --noche #24234A: 5,5:1 (AA);
   - al pasar el mouse, la capa --ui-turquesa-luz #3FC9CE: 7,4:1 (AAA). Se aclara, no se oscurece: más oscuro (el
     turquesa #00989E) el texto oscuro bajaría a 4,2:1, y el blanco no llega en ninguno (3,5:1 sobre #00989E);
   - el borde --cb-turquesa #00989E contra el blanco de la página: 3,5:1 (el límite del botón se ve, ≥ 3:1).
   Los valores van como variables de la paleta (`nucleo.css`, `ui.css`) con su hexadecimal de respaldo. Antes (25 oct,
   aprobado): la noche de la marca con texto blanco, borde, brillo y destello turquesa (en el histórico de decisiones).
   El objetivo (acta del 24 oct, §2): que el interesado escriba por la web, que sale más barato que WhatsApp. En la web
   de la agente, sus colores (abajo). */
:root{
  --propy-fondo:var(--marca-claro, #33ADB2);
  --propy-fondo-hover:var(--ui-turquesa-luz, #3FC9CE);
  --propy-borde:var(--cb-turquesa, #00989E);
  --propy-tinta:var(--noche, #24234A);
  --propy-foco:var(--noche, #24234A);
}

/* 25 oct: sin parpadeo al pasar el mouse. Antes el fondo pasaba con transition de un degradado a un color plano; los
   degradados no se animan y el fondo saltaba o quedaba transparente un instante. Ahora el fondo queda fijo y encima
   aparece una capa (::before, con isolation en el botón queda bajo la foto y el texto) con el color del hover: solo
   cambia su opacity. 26 oct: sin sombra. */
.propy-abrir::before, .propy-lanzador::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:var(--propy-velo, var(--propy-fondo-hover)); box-shadow:none;
  opacity:0; transition:opacity .2s ease;
}
@media (hover: hover){ .propy-abrir:hover::before, .propy-lanzador:hover::before{opacity:1} }

/* ---------- El botón de la caja de contacto ---------- */
.propy-abrir{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:14px; width:100%; min-height:64px;
  padding:9px 18px 9px 9px; border:1px solid var(--propy-borde); border-radius:14px; cursor:pointer;
  background:var(--propy-fondo);
  color:var(--propy-tinta); font:inherit; text-align:left;
  box-shadow:none; text-shadow:none;
  transition:transform .15s ease;
}
@media (hover: hover){
  .propy-abrir:hover{transform:translateY(-1px); box-shadow:none}
}
.propy-abrir:active{transform:scale(.98)}
.propy-abrir:focus-visible{outline:3px solid var(--propy-foco); outline-offset:3px; box-shadow:none}
.propy-abrir .propy-robot{flex:0 0 auto; inline-size:46px; block-size:46px}
.propy-abrir-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.propy-abrir-txt strong{font-size:17px; font-weight:800; letter-spacing:.01em}
/* 26 oct: sin el destello de carga (era un brillo con ::after); sin sombra tampoco ahí. */
.propy-abrir::after{content:none; box-shadow:none}

/* ---------- La foto de Gia (26 oct; _propy.html, macro avatar) ----------
   Redonda, con un aro blanco que la separa del turquesa (y de la noche en la cabecera del chat). Sin sombra. */
.propy-foto{
  display:block; flex:0 0 auto; border-radius:50%; object-fit:cover; background:#E9EDF2;
  border:2px solid #fff; box-shadow:none
}
.propy-abrir .propy-foto{inline-size:46px; block-size:46px}
/* La línea debajo de cada botón de la caja («Asistente inteligente…» y «Lleva la conversación a WhatsApp»). */
.caja-contacto .propy-bajo{margin:-6px 0 0; font-size:13px; line-height:1.4; text-align:center; color:var(--texto-suave)}
.caja-contacto .propy-caja-aviso{margin:0; padding:8px 12px; border-radius:10px; font-size:13px; background:#FFF6E0;
  color:#6B4E00}
.propy-caja-aviso[hidden]{display:none}
/* Las otras puertas (la burbuja, el botón fijo del celular) bajan aquí cuando faltan los datos. */
.caja-contacto{scroll-margin-top:88px}

/* ---------- El robot (25 oct: el humanoide fuerte; _propy.html, macro robot) ----------
   Colores fijos de la paleta, también en la web de la agente (por eso en hexadecimal: allí --cb-morado es su color
   secundario): el disco en la tinta, las placas blancas y gris claro, el visor oscuro con su luz turquesa, las juntas
   del color del disco (se leen como cortes entre placas) y el aro dorado. El emblema (el chevrón dorado), solo en la
   propuesta 2. */
.propy-robot{display:block}
.propy-robot-fondo{fill:#24234A}
.propy-robot-cabeza, .propy-robot-cuerpo{fill:#F4F6F9}
.propy-robot-placa{fill:#D5DCE5}
.propy-robot-traje{fill:#A9B3C1}
.propy-robot-cuello{fill:#8A94A3}
.propy-robot-visor{fill:#0E0D22}
.propy-robot-junta{fill:none; stroke:#24234A; stroke-width:1.3; stroke-linejoin:miter}
.propy-robot-luz{fill:none; stroke:#5CD6DB; stroke-width:1.5}
.propy-robot-emblema{fill:none; stroke:#D4AF37; stroke-width:1.6; stroke-linejoin:miter}
.propy-robot-aro{fill:none; stroke:#D4AF37; stroke-width:1.4}

/* ---------- El chat ---------- */
.propy{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column;
  background:#fff; color:var(--texto); font-family:var(--fuente-ui);
  padding-bottom:env(safe-area-inset-bottom);
}
.propy[hidden]{display:none}
.propy .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (min-width: 768px){
  .propy{
    inset:auto 24px 24px auto; width:400px; height:min(640px, calc(100vh - 48px)); height:min(640px, calc(100dvh - 48px));
    border-radius:18px; overflow:hidden; box-shadow:var(--sombra-fuerte); border:1px solid var(--linea);
  }
}
html.propy-abierto .ui-wa-fija{display:none !important}
@media (max-width: 767px){
  html.propy-abierto, html.propy-abierto body{overflow:hidden}
  html.propy-abierto .barra-movil{display:none !important}
}

.propy-cab{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--noche); color:#fff; border-bottom:2px solid var(--propy-borde);
}
@media (min-width: 768px){ .propy-cab{padding-top:12px} }
.propy-cab .propy-robot, .propy-cab .propy-foto{inline-size:38px; block-size:38px; flex:0 0 auto}
.propy-cab-txt{flex:1 1 auto; min-width:0}
/* El color, explícito: el de los h2 del sitio ganaba y «Propy» salía oscuro sobre la cabecera oscura (22 oct). */
.propy-cab h2{margin:0; font-size:17px; font-weight:700; font-family:var(--fuente-ui); color:#fff}
.propy-cab p{margin:1px 0 0; font-size:12px; opacity:.8}
.propy-cerrar{
  display:grid; place-items:center; inline-size:44px; block-size:44px; border:0; border-radius:12px;
  background:transparent; color:#fff; cursor:pointer
}
@media (hover: hover){ .propy-cerrar:hover{background:rgba(255,255,255,.12)} }
.propy-cerrar:focus-visible{outline:2px solid #fff; outline-offset:-4px}
.propy-cerrar .ui-ic{inline-size:22px; block-size:22px}

.propy-hilo{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:8px; padding:16px 14px;
  background:var(--fondo-suave);
}
.propy-bienvenida{
  margin:0 auto 4px; max-width:300px; text-align:center; font-size:13px; line-height:1.5; color:var(--texto-suave)
}
/* Cada fila del hilo es «yo» o «asistente». Nunca «propy»: esa clase es la del panel (fija, blanca, encima de todo) y
   cada respuesta tapaba el chat entero (bug del 22 oct, CBK-052). */
.propy-msg{max-width:84%; display:flex; flex-direction:column; gap:6px}
.propy-msg.yo{align-self:flex-end; align-items:flex-end}
.propy-msg.asistente{align-self:flex-start; align-items:flex-start}
.propy-burbuja{
  padding:10px 13px; border-radius:16px; font-size:15px; line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.propy-msg.yo .propy-burbuja{background:var(--marca); color:#fff; border-bottom-right-radius:6px}
.propy-msg.asistente .propy-burbuja{background:#fff; border:1px solid var(--linea); border-bottom-left-radius:6px}
.propy-burbuja a{color:var(--marca-texto); text-decoration:underline}
.propy-msg.yo .propy-burbuja a{color:#fff}
.propy-hora{font-size:11px; color:var(--texto-suave)}
.propy-botones{display:flex; flex-wrap:wrap; gap:6px}
.propy-botones button, .propy-sugerencias button{
  min-height:38px; padding:7px 13px; border:1px solid color-mix(in srgb, var(--marca) 55%, #fff); border-radius:999px;
  background:#fff; color:var(--marca-texto); font:inherit; font-size:14px; font-weight:600; cursor:pointer
}
.propy-botones button:disabled{opacity:.5; cursor:default}
@media (hover: hover){ .propy-botones button:not(:disabled):hover, .propy-sugerencias button:hover{background:var(--marca-suave)} }
.propy-enlace{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:12px;
  background:var(--marca); color:#fff !important; font-size:14px; font-weight:700; text-decoration:none
}
.propy-escribiendo{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; border-radius:16px; background:#fff;
  border:1px solid var(--linea)}
.propy-escribiendo i{inline-size:7px; block-size:7px; border-radius:50%; background:var(--texto-suave);
  animation:propy-punto 1.2s infinite ease-in-out}
.propy-escribiendo i:nth-child(2){animation-delay:.15s}
.propy-escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes propy-punto{0%, 80%, 100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .propy-escribiendo i{animation:none; opacity:.6} }

.propy-sugerencias{
  display:flex; gap:6px; padding:8px 12px; overflow-x:auto; background:var(--fondo-suave);
  border-top:1px solid var(--linea); scrollbar-width:none
}
.propy-sugerencias::-webkit-scrollbar{display:none}
.propy-sugerencias button{flex:0 0 auto; white-space:nowrap}
.propy-sugerencias[hidden]{display:none}

.propy-datos{
  display:flex; flex-direction:column; gap:10px; max-height:58%; overflow-y:auto;
  padding:14px; border-top:1px solid var(--linea); background:#fff
}
.propy-datos[hidden]{display:none}
.propy-datos-t{margin:0; font-size:15px; font-weight:700}
.propy-datos .campo{display:flex; flex-direction:column; gap:4px}
.propy-datos label{font-size:13px; font-weight:600}
.propy-datos input[type=text], .propy-datos input[type=tel]{
  min-height:44px; padding:9px 12px; border:1px solid var(--cb-gris-borde, #CFD8DC); border-radius:10px; font:inherit
}
.propy-datos .opcional{font-weight:400; color:var(--texto-suave)}
.propy-datos .campo-check .txt{font-size:13px; font-weight:400; color:var(--texto-suave); line-height:1.5}
.propy-datos .campo-check a{text-decoration:underline}
.propy-datos .campo-error{font-size:13px; color:#B3261E}
.propy-datos-enviar{
  min-height:46px; border:0; border-radius:12px; background:var(--marca); color:#fff; font:inherit; font-weight:700;
  cursor:pointer
}
.propy-datos-enviar:disabled{opacity:.6; cursor:default}

.propy-aviso{margin:0; padding:8px 14px; font-size:13px; background:#FFF6E0; color:#6B4E00; border-top:1px solid var(--linea)}
.propy-aviso[hidden]{display:none}

.propy-barra{display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid var(--linea); background:#fff}
.propy-barra textarea{
  flex:1 1 auto; min-height:44px; max-height:120px; resize:none; padding:11px 14px;
  border:1px solid var(--cb-gris-borde, #CFD8DC); border-radius:22px; font:inherit; font-size:15px; line-height:1.35
}
.propy-barra textarea:focus-visible, .propy-datos input:focus-visible{
  outline:2px solid color-mix(in srgb, var(--marca) 60%, transparent); outline-offset:1px
}
.propy-enviar{
  flex:0 0 auto; display:grid; place-items:center; inline-size:44px; block-size:44px; border:0; border-radius:50%;
  background:var(--marca); color:#fff; cursor:pointer
}
.propy-enviar:disabled{opacity:.5; cursor:default}
.propy-enviar .ui-ic{inline-size:20px; block-size:20px}
.propy-pie{margin:0; padding:0 12px 8px; font-size:11px; color:var(--texto-suave); background:#fff; text-align:center}
.propy-pie a{color:inherit; text-decoration:underline}

/* ---------- Ola 2b (22 oct): la burbuja de todas las páginas del portal ----------
   Abajo a la derecha; en el celular, un círculo de 56 px. Con sesión va encima de la barra de abajo. No tapa los botones
   fijos de cada pantalla: donde hay uno (guardar, editar, el medidor del formulario, «ver como», un modal, escribiendo)
   se esconde. En la ficha, en el celular, no se ve: ahí el botón fijo de abajo es «Contactar ahora a Gia».
   26 oct: el mismo turquesa sin sombra que el botón de la caja; la foto de Gia en lugar del robot. */
.propy-lanzador{
  isolation:isolate; position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:56;
  display:flex; align-items:center; gap:10px; padding:5px 18px 5px 5px; border:1px solid var(--propy-borde);
  border-radius:999px; cursor:pointer;
  background:var(--propy-fondo);
  color:var(--propy-tinta); font:inherit; font-size:15px; font-weight:800;
  box-shadow:none;
  transition:transform .15s ease;
}
.propy-lanzador .propy-robot, .propy-lanzador .propy-foto{inline-size:44px; block-size:44px; flex:0 0 auto}
@media (hover: hover){ .propy-lanzador:hover{transform:translateY(-2px); box-shadow:none} }
.propy-lanzador:active{transform:scale(.96)}
.propy-lanzador:focus-visible{outline:3px solid var(--propy-foco); outline-offset:3px}
html.propy-abierto .propy-lanzador, html.modal-abierto .propy-lanzador, html.escribiendo .propy-lanzador,
body.ui-velo-filtros .propy-lanzador, body:has(.banda-ver-como, .aviso-servicio-caido) .propy-lanzador{display:none}
/* Las pantallas de trabajo con su propio botón fijo abajo (guardar, editar aviso, el medidor del formulario). */
body:has(.ui-guardar-fija, .acciones-editar, .uf-medidor) .propy-lanzador{display:none}
@media (max-width: 767px){
  .propy-lanzador{right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); padding:6px; inline-size:56px; block-size:56px;
    justify-content:center}
  .propy-lanzador .propy-robot, .propy-lanzador .propy-foto{inline-size:44px; block-size:44px}
  .propy-lanzador-txt{display:none}
  /* Con sesión: encima de la barra de abajo (91 px a 375 px con el disco de «Publicar», medido el 22 oct). */
  .propy-lanzador.con-sesion{bottom:calc(102px + env(safe-area-inset-bottom))}
  .propy-lanzador.en-ficha{display:none}
  /* Que el final de la página no quede debajo del círculo. */
  body:has(.propy-lanzador:not(.en-ficha)) .pie-sitio{padding-bottom:76px}
  /* Con la barra: al final de la página, el círculo queda sobre el aire del pie (no sobre un enlace). */
  body.con-barra-movil:has(.propy-lanzador) .pie-sitio{padding-bottom:100px}
}

/* ---------- Ajuste 5: el botón fijo de la ficha en el celular abre a Propy ---------- */
/* Con las dos clases: ui-publico.css se carga después y le ponía el verde de WhatsApp (22 oct) y su sombra verde. Desde el
   26 oct, el mismo turquesa sin sombra que el botón de la caja, con el mismo texto («Contactar ahora a Gia») y la foto. */
.ui-wa-fija.propy-fija{border:1px solid var(--propy-borde); font:inherit; font-size:16px; font-weight:800; cursor:pointer;
  background:var(--propy-fondo); color:var(--propy-tinta); box-shadow:none}
/* En la web de la agente, Propy va con sus dos colores, como antes del 24 oct (B55: su web conserva su diseño), con el
   texto blanco y, desde el 26 oct, sin sombra. Al pasar el mouse, la misma capa de arriba (sin parpadeo), aquí un velo
   oscuro sobre su degradado. */
body:has(.web-agente-top){
  --propy-velo:rgba(0, 0, 0, .16);
}
body:has(.web-agente-top) .propy-abrir, body:has(.web-agente-top) .ui-wa-fija.propy-fija{
  border-color:transparent; background:linear-gradient(135deg, var(--noche) 0%, var(--marca) 100%); color:#fff;
  box-shadow:none}
body:has(.web-agente-top) .propy-cab{border-bottom-color:var(--marca)}
/* En la ficha (computadora) la caja de contacto va fija a la derecha: mientras la burbuja la tocaría, se aparta (el
   botón de la caja es la misma puerta). */
.propy-lanzador.tras-la-caja{display:none}
.propy-fija .propy-robot, .propy-fija .propy-foto{inline-size:32px; block-size:32px; width:32px; height:32px}

/* El prospecto ya dejó sus datos. */
.propy-gracias{margin:0; padding:10px 14px; font-size:14px; font-weight:600; background:var(--marca-suave, #E6F6F6);
  color:var(--marca-texto); border-top:1px solid var(--linea)}
.propy-gracias[hidden]{display:none}