/* Huésped Manager — Pantallas de ingreso y cierre de sesión.
   Ingreso: bienvenida con marca (G2) + transición lateral (H2).
   Cierre: tarjeta que se retira (C3).
   Usa la paleta activa (variables del tema) y funciona también sin ella. */

.hm-ses,
.hm-ses * { box-sizing: border-box; }

.hm-ses {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  font-family: var(--hm-font, 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

/* ---------- Ingreso: bienvenida ---------- */
.hm-ses-bienvenida {
  background: var(--hm-surface, #FFFFFF);
  opacity: 0;
  transition: opacity .28s ease, transform .55s cubic-bezier(.65, 0, .35, 1);
}
.hm-ses-bienvenida.hm-ses-visible { opacity: 1; }
.hm-ses-bienvenida.hm-ses-fuera { transform: translateX(-100%); }

.hm-ses-caja { width: min(86%, 340px); text-align: center; }
.hm-ses-caja svg { display: block; margin: 0 auto; }
.hm-ses-titulo {
  font: 700 21px/1.25 var(--hm-display, 'Sora', 'Manrope', sans-serif);
  color: var(--hm-ink, #23303D);
  margin: 16px 0 3px;
}
.hm-ses-sub {
  font: 500 13.5px var(--hm-font, sans-serif);
  color: var(--hm-muted, #56667A);
  margin: 0 0 18px;
}
.hm-ses-barra {
  height: 4px;
  border-radius: 4px;
  background: var(--hm-line-2, #E7EEF5);
  overflow: hidden;
}
.hm-ses-barra i {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--hm-accent, #1789BE), var(--hm-accent-line, #26A9B5));
  transition: width .35s ease;
}
.hm-ses-paso {
  font: 600 12.5px var(--hm-font, sans-serif);
  color: var(--hm-accent-ink, #0F5580);
  margin-top: 10px;
  min-height: 19px;
}

/* Capa del panel entrante (evita ver el formulario durante el corte) */
.hm-ses-siguiente {
  background: var(--hm-bg, #F1F6FA);
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
  z-index: 100000;
}
.hm-ses-siguiente.hm-ses-dentro { transform: none; }

/* Franja con los colores del logo que cruza en el corte */
.hm-ses-franja {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 6px;
  z-index: 100001;
  background: linear-gradient(180deg, #6CCCD8, #26A9B5, #1B98D8);
  box-shadow: 0 0 26px rgba(38, 169, 181, .85);
  opacity: 0;
}
.hm-ses-franja.hm-ses-cruza {
  opacity: 1;
  left: 100%;
  transition: left .55s cubic-bezier(.65, 0, .35, 1), opacity .25s ease .45s;
}



/* ---------- Cierre: tarjeta que se retira ---------- */
.hm-ses-salida { background: rgba(12, 52, 74, .42); opacity: 0; transition: opacity .3s ease; }
.hm-ses-salida.hm-ses-visible { opacity: 1; }

.hm-ses-tarjeta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hm-surface, #FFFFFF);
  border-radius: 14px;
  box-shadow: 0 22px 46px rgba(9, 31, 45, .34);
  padding: 15px 22px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
  max-width: min(92%, 420px);
}
.hm-ses-salida.hm-ses-visible .hm-ses-tarjeta { opacity: 1; transform: none; }
.hm-ses-salida.hm-ses-yendo .hm-ses-tarjeta {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.5, 0, .8, .4);
}
.hm-ses-ini {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hm-avatar, #D6ECF8);
  color: var(--hm-avatar-ink, #0F5580);
  display: grid;
  place-items: center;
  font: 700 14px var(--hm-font, sans-serif);
  flex-shrink: 0;
}
.hm-ses-tarjeta b {
  display: block;
  font: 700 15px var(--hm-display, sans-serif);
  color: var(--hm-ink, #23303D);
}
.hm-ses-tarjeta small {
  font: 600 12px var(--hm-font, sans-serif);
  color: var(--hm-muted, #56667A);
}
.hm-ses-visto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hm-ok-soft, #E6F4EC);
  border: 1px solid var(--hm-ok-line, #A9D8BC);
  display: grid;
  place-items: center;
  margin-left: 4px;
  opacity: 0;
  transition: opacity .3s ease;
  flex-shrink: 0;
}
.hm-ses-visto.hm-ses-visible { opacity: 1; }
.hm-ses-visto svg { width: 14px; height: 14px; stroke: var(--hm-ok, #15803D); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 480px) {
  .hm-ses-tarjeta { flex-direction: column; text-align: center; gap: 10px; }
}

/* Si el equipo tiene animaciones reducidas, todo se muestra sin movimiento */
@media (prefers-reduced-motion: reduce) {
  .hm-ses, .hm-ses *, .hm-ses-franja { transition: none !important; animation: none !important; }
  
}

/* Respaldo: ventana «Cerrando sesión» con la misma apariencia de la tarjeta */
.hm-salida-respaldo { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.hm-salida-respaldo b { display: block; font: 700 15px var(--hm-display, sans-serif); color: var(--hm-ink, #23303D); }
.hm-salida-respaldo small { font: 600 12px var(--hm-font, sans-serif); color: var(--hm-muted, #56667A); }