/* Asistente flotante "Hipo" (el caballito de mar) y la mascota de /entrar/.
   Marcado en internal/ui/asistente.templ, comportamiento en asistente.js (el
   asistente) y en el bloque "Hipo en /entrar/" de vlm.js (la mascota).
   Paleta del sitio: #243746 tinta, #F7F2E8 arena, #DBC27A dorado, #6B8FA8 mar. */

/* ---------- El personaje ---------- */
.cab{display:block;overflow:visible}
.cab-burbuja{fill:#F7F2E8;fill-opacity:0}
.cab-cola,.cab-aleta,.cab-cabeza,.cab-pupila,.cab-parpado,.cab-pectoral,.cab-burbuja{transform-box:fill-box}
.cab-cola{transform-origin:72% 2%}
.cab-aleta{transform-origin:0 50%}
.cab-cabeza{transform-origin:62% 88%}
.cab-parpado{transform-origin:50% 0;transform:scaleY(0)}
.cab-pectoral{transform-origin:50% 50%}

@keyframes cab-flota{0%,100%{transform:translateY(1.5px) rotate(-1.5deg)}50%{transform:translateY(-2.5px) rotate(1.5deg)}}
@keyframes cab-cola{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(8deg)}}
@keyframes cab-aleta{from{transform:scaleX(.8) skewY(-5deg)}to{transform:scaleX(1.06) skewY(4deg)}}
@keyframes cab-parpadeo{0%,91%,100%{transform:scaleY(0)}94%,97%{transform:scaleY(1)}}
@keyframes cab-burbuja{0%{transform:translateY(10px) scale(.4);fill-opacity:0}18%{fill-opacity:.8}75%{fill-opacity:.45}100%{transform:translateY(-26px) scale(1.15);fill-opacity:0}}
@keyframes cab-saluda{0%,100%{transform:rotate(0)}20%{transform:rotate(-11deg)}45%{transform:rotate(8deg)}70%{transform:rotate(-6deg)}}
@keyframes asis-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes asis-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes asis-punto{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

@media (prefers-reduced-motion:no-preference){
  .vlm-asis-boton .cab,.vlm-cab-login .cab{animation:cab-flota 4.2s ease-in-out infinite}
  .vlm-asis-boton .cab-cola,.vlm-cab-login .cab-cola{animation:cab-cola 2.8s ease-in-out infinite}
  .vlm-asis-boton .cab-aleta,.vlm-cab-login .cab-aleta{animation:cab-aleta .55s ease-in-out infinite alternate}
  .vlm-asis-boton .cab-parpado,.vlm-cab-login .cab-parpado{animation:cab-parpadeo 4.6s infinite}
  .vlm-asis-boton .cab-burbuja,.vlm-cab-login .cab-burbuja{animation:cab-burbuja 5.2s ease-in infinite}
  .vlm-asis-boton .cab-b2,.vlm-cab-login .cab-b2{animation-delay:1.3s}
  .vlm-asis-boton .cab-b3,.vlm-cab-login .cab-b3{animation-delay:2.7s}
  .vlm-asis.is-saludando .vlm-asis-boton{animation:cab-saluda 1.1s ease-in-out}
  .vlm-asis-globo{animation:asis-entra .32s ease-out}
  .vlm-asis-panel{animation:asis-entra .24s ease-out}
  .vlm-asis-msg,.vlm-asis-ops,.vlm-asis-card{animation:asis-entra .26s ease-out}
  .vlm-asis-puntos i{animation:asis-punto 1.1s infinite}
  .vlm-asis-boton{transition:transform .18s ease,box-shadow .18s ease}
  .vlm-asis-boton:hover{transform:scale(1.06)}
  .vlm-asis{transition:opacity .25s ease,transform .25s ease}
  .vlm-cab-login .cab-pupila{transition:transform .18s ease-out}
  .vlm-cab-login .cab-cabeza{transition:transform .3s ease}
  .vlm-cab-login .cab-pectoral{transition:transform .45s cubic-bezier(.34,1.2,.64,1)}
}

/* ---------- Botón flotante y globo de saludo ---------- */
.vlm-asis{position:fixed;right:18px;bottom:18px;z-index:75;display:flex;align-items:flex-end;gap:10px;font-family:'Poppins',system-ui,sans-serif;pointer-events:none}
.vlm-asis>*{pointer-events:auto}
.vlm-asis[hidden],.vlm-asis [hidden],.vlm-asis-panel[hidden],.vlm-asis-fondo[hidden],.vlm-asis-panel [hidden]{display:none !important}
.vlm-asis-boton{width:62px;height:62px;flex:none;padding:0;border-radius:50%;border:2px solid #DBC27A;background:radial-gradient(circle at 34% 28%,#35536B,#243746 72%);box-shadow:0 10px 26px rgba(16,27,36,.4);cursor:pointer;display:grid;place-items:center;overflow:hidden}
.vlm-asis-boton .cab{width:40px;height:50px;margin-top:2px}
.vlm-asis-boton:focus-visible,.vlm-asis-globo button:focus-visible{outline:3px solid #6B8FA8;outline-offset:3px}
.vlm-asis-globo{display:flex;align-items:center;margin-bottom:16px;max-width:min(250px,calc(100vw - 110px));background:#FCFAF5;color:#243746;border:1px solid rgba(36,55,70,.16);border-radius:14px 14px 4px 14px;box-shadow:0 10px 26px rgba(16,27,36,.22);padding:3px 3px 3px 4px}
.vlm-asis-globo-txt{border:0;background:none;font:600 13.5px/1.3 'Poppins',system-ui,sans-serif;color:#243746;padding:9px 4px 9px 10px;cursor:pointer;text-align:left;border-radius:10px}
.vlm-asis-globo-x{flex:none;border:0;background:none;width:32px;height:32px;border-radius:50%;color:#5C5A54;cursor:pointer;display:grid;place-items:center}
.vlm-asis-globo-x:hover{background:rgba(36,55,70,.08);color:#243746}

/* ---------- Panel de conversación ---------- */
.vlm-asis-fondo{display:none}
.vlm-asis-panel{position:fixed;right:18px;bottom:94px;z-index:90;box-sizing:border-box;width:388px;max-width:calc(100vw - 24px);height:clamp(340px,calc(100vh - 224px),600px);display:flex;flex-direction:column;overflow:hidden;background:#F7F2E8;color:#243746;border-radius:18px;box-shadow:0 30px 80px -20px rgba(16,27,36,.6),0 0 0 1px rgba(36,55,70,.14);font-family:'Poppins',system-ui,sans-serif}
.vlm-asis-panel *{box-sizing:border-box}
.vlm-asis-cab{flex:none;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;background:#243746;color:#F7F2E8}
.vlm-asis-avatar{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid #DBC27A;background:#1A2833;display:grid;place-items:center;overflow:hidden}
.vlm-asis-avatar .cab{width:29px;height:36px;margin-top:2px}
.vlm-asis-titulo{flex:1;min-width:0}
.vlm-asis-titulo h2{margin:0;font-size:16px;font-weight:700;line-height:1.2;color:#F7F2E8;letter-spacing:-.01em}
.vlm-asis-titulo p{margin:2px 0 0;font-size:12px;line-height:1.3;color:rgba(247,242,232,.72)}
.vlm-asis-cerrar{flex:none;width:38px;height:38px;border:0;border-radius:10px;background:rgba(247,242,232,.1);color:#F7F2E8;cursor:pointer;display:grid;place-items:center}
.vlm-asis-cerrar:hover{background:rgba(247,242,232,.2)}
.vlm-asis-cab button:focus-visible{outline:3px solid #DBC27A;outline-offset:2px}

.vlm-asis-log{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 6px;display:flex;flex-direction:column;gap:10px}
.vlm-asis-charla{display:flex;flex-direction:column;gap:10px}
.vlm-asis-msg{max-width:88%;padding:10px 13px;font-size:14px;line-height:1.45;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid rgba(36,55,70,.1);align-self:flex-start;overflow-wrap:anywhere}
.vlm-asis-msg.es-yo{align-self:flex-end;background:#243746;border-color:#243746;color:#F7F2E8;border-radius:14px 14px 4px 14px}
.vlm-asis-msg.es-bloque{max-width:100%;width:100%;padding:0;background:none;border:0;display:flex;flex-direction:column;gap:8px}
.vlm-asis-puntos{display:inline-flex;gap:5px;align-items:center;height:20px}
.vlm-asis-puntos i{width:7px;height:7px;border-radius:50%;background:#5C5A54;opacity:.5}
.vlm-asis-puntos i:nth-child(2){animation-delay:.18s}
.vlm-asis-puntos i:nth-child(3){animation-delay:.36s}

.vlm-asis-ops{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 12px}
.vlm-asis-op{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border:1.5px solid rgba(36,55,70,.24);border-radius:999px;background:#fff;color:#243746;font:600 13.5px/1.25 'Poppins',system-ui,sans-serif;text-decoration:none;text-align:left;cursor:pointer}
.vlm-asis-op:hover{border-color:#243746;background:#FBF5E3}
.vlm-asis-op small{font-size:11.5px;font-weight:600;color:#6A675F}
.vlm-asis-op.es-suave{border-style:dashed;color:#47637A}
.vlm-asis-op[aria-pressed="true"]{background:#243746;border-color:#243746;color:#F7F2E8}
.vlm-asis-op[aria-pressed="true"] small{color:rgba(247,242,232,.75)}
.vlm-asis-primario{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:11px 16px;border:0;border-radius:12px;background:#DBC27A;color:#243746;font:700 14.5px/1.2 'Poppins',system-ui,sans-serif;text-decoration:none;text-align:center;cursor:pointer}
.vlm-asis-primario:hover{background:#E4CE8E}
.vlm-asis-panel .vlm-asis-log :focus-visible,.vlm-asis-pie :focus-visible{outline:3px solid #6B8FA8;outline-offset:2px}

.vlm-asis-card{display:flex;align-items:center;gap:12px;padding:8px;background:#fff;border:1px solid rgba(36,55,70,.12);border-radius:12px;color:#243746;text-decoration:none}
.vlm-asis-card:hover{border-color:#243746;box-shadow:0 6px 16px rgba(36,55,70,.12)}
.vlm-asis-foto{flex:none;width:68px;height:68px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#47637A,#243746);display:grid;place-items:center;color:#DBC27A;font-size:24px;font-weight:700}
.vlm-asis-foto img{width:100%;height:100%;object-fit:cover;display:block}
.vlm-asis-card-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vlm-asis-card-txt strong{font-size:14.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlm-asis-card-meta{font-size:12.5px;line-height:1.3;color:#5C5A54;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlm-asis-card-fila{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;line-height:1.3;color:#5C5A54}
.vlm-asis-nota{color:#243746;font-weight:700}
.vlm-asis-nota::before{content:"\2605";color:#B8963A;margin-right:3px}
.vlm-asis-estado{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.vlm-asis-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:#A9A59B}
.vlm-asis-estado.es-abierto{color:#0E6B4A;font-weight:600}
.vlm-asis-estado.es-abierto::before{background:#2FA57A}

.vlm-asis-pie{flex:none;padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:#FCFAF5;border-top:1px solid rgba(36,55,70,.12)}
.vlm-asis-nav{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.vlm-asis-nav button{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:4px 8px;border:0;border-radius:8px;background:none;color:#47637A;font:600 12.5px/1.2 'Poppins',system-ui,sans-serif;cursor:pointer}
.vlm-asis-nav button:hover:not(:disabled){background:rgba(36,55,70,.07);color:#243746}
.vlm-asis-nav button:disabled{opacity:.4;cursor:default}
.vlm-asis-form{display:flex;gap:8px}
.vlm-asis-form input{flex:1;min-width:0;height:44px;padding:0 13px;border:1px solid rgba(36,55,70,.22);border-radius:11px;background:#fff;color:#243746;font:400 14.5px 'Poppins',system-ui,sans-serif}
.vlm-asis-form input::placeholder{color:#7A776E}
.vlm-asis-form button{flex:none;width:44px;height:44px;border:0;border-radius:11px;background:#243746;color:#F7F2E8;cursor:pointer;display:grid;place-items:center}
.vlm-asis-form button:hover{background:#33506A}
.vlm-asis-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Móvil: por encima del menú inferior, hoja inferior ---------- */
@media (max-width:640px){
  /* El menú inferior (.vlm-bottom-nav) mide ~54px: el botón se sube para
     no pisarlo, y se aparta cuando el pie de página entra en pantalla
     (clase is-pie, la pone asistente.js) para no tapar sus enlaces. */
  .vlm-asis{right:12px;bottom:calc(66px + env(safe-area-inset-bottom))}
  .vlm-asis-boton{width:54px;height:54px}
  .vlm-asis-boton .cab{width:35px;height:44px}
  .vlm-asis.is-pie,.vlm-asis.is-abierto{opacity:0;transform:translateY(16px);pointer-events:none}
  .vlm-asis.is-pie>*,.vlm-asis.is-abierto>*{pointer-events:none}
  .vlm-asis-fondo{display:block;position:fixed;inset:0;z-index:89;background:rgba(16,27,36,.55)}
  .vlm-asis-panel{left:0;right:0;bottom:0;width:100%;max-width:none;height:min(88vh,680px);height:min(88dvh,680px);border-radius:18px 18px 0 0;box-shadow:0 -18px 50px rgba(16,27,36,.4)}
  .vlm-asis-form input{font-size:16px}
  html.vlm-asis-bloqueo,html.vlm-asis-bloqueo body{overflow:hidden}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .vlm-asis-panel{animation:asis-sube .28s ease-out}
}

/* ---------- Mascota de /entrar/ ---------- */
.vlm-cab-login{width:140px;height:140px;flex-shrink:0;box-sizing:border-box;border-radius:50%;border:3px solid #DBC27A;background:radial-gradient(circle at 34% 26%,#35536B,#243746 72%);display:grid;place-items:center;overflow:hidden;pointer-events:none}
.vlm-cab-login .cab{width:94px;height:118px;margin-top:4px}
/* --px/--py (mirada) y --giro (cabeceo) los calcula vlm.js según por dónde
   va el cursor de texto del correo. */
.vlm-cab-login .cab-pupila{transform:translate(var(--px,0px),var(--py,0px))}
.vlm-cab-login .cab-cabeza{transform:rotate(var(--giro,0deg))}
/* Contraseña: gira la cabeza y se tapa el ojo con la aleta pectoral... */
.vlm-cab-login.is-tapado .cab-cabeza{transform:rotate(8deg)}
.vlm-cab-login.is-tapado .cab-pectoral{transform:translate(-25px,-18.5px) rotate(-30deg) scale(1.7)}
.vlm-cab-login.is-tapado .cab-parpado{animation:none}
/* ...y al pulsar "mostrar" la baja lo justo para espiar por encima. */
.vlm-cab-login.is-tapado.is-espiando .cab-cabeza{transform:rotate(-4deg)}
.vlm-cab-login.is-tapado.is-espiando .cab-pectoral{transform:translate(-22px,-6px) rotate(-8deg) scale(1.6)}
.vlm-cab-login.is-tapado.is-espiando .cab-pupila{transform:translate(0,2.6px)}

/* Opciones en una sola columna, cada botón con el ancho de su texto y
   pegado a la derecha (el lado de las respuestas de la persona). Antes eran
   píldoras de ancho desigual que saltaban de línea donde caían. */
.vlm-asis-ops{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:6px}
.vlm-asis-op{display:inline-flex;gap:10px;max-width:88%;min-height:40px;padding:8px 14px;border-radius:14px 14px 4px 14px;border-width:1px;border-color:rgba(36,55,70,.18);box-shadow:0 1px 2px rgba(16,27,36,.05);text-align:right}
.vlm-asis-op>span{min-width:0;overflow-wrap:anywhere}
.vlm-asis-op small{flex:none;background:rgba(36,55,70,.07);border-radius:999px;padding:2px 8px}
.vlm-asis-op[aria-pressed="true"] small{background:rgba(247,242,232,.16)}
.vlm-asis-op.es-suave{background:transparent;box-shadow:none}
.vlm-asis-ops>.vlm-asis-primario{align-self:stretch}