/* sesion.css — Identidad: avatar, bloque de usuario en el encabezado y pantalla de entrada. */

/* ── Avatar ──
   Con foto, la foto. Sin foto, las iniciales sobre un color derivado del propio nombre,
   para que cada persona vea siempre el mismo y no uno distinto en cada carga. */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:50%;background:var(--blue);color:#fff;overflow:hidden;
  font-weight:700;letter-spacing:.5px;line-height:1;user-select:none;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.av-sm{width:28px;height:28px;font-size:11px;}
.av-md{width:42px;height:42px;font-size:15px;}
.av-lg{width:72px;height:72px;font-size:25px;}

/* ── Bloque de usuario en el encabezado ── */
#hdr-user{position:relative;}
#hdr-user[hidden]{display:none;}
.hu-btn{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:4px 11px 4px 4px;color:#fff;
  font-family:inherit;font-size:12.5px;font-weight:600;
  transition:background .15s,border-color .15s;
}
.hu-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);}
.hu-n{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hu-ch{
  width:7px;height:7px;border-right:2px solid rgba(255,255,255,.6);
  border-bottom:2px solid rgba(255,255,255,.6);transform:rotate(45deg) translateY(-2px);
}

.hu-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:300;width:250px;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 44px rgba(10,18,32,.26);overflow:hidden;padding:6px;
}
.hu-menu[hidden]{display:none;}
.hu-cab{display:flex;align-items:center;gap:11px;padding:12px 10px 13px;border-bottom:1px solid var(--smoke);margin-bottom:6px;}
.hu-cab-t{min-width:0;}
.hu-cab-t b{display:block;font-size:13px;color:var(--navy);line-height:1.25;}
.hu-cab-t span{display:block;font-size:11px;color:var(--stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hu-i{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:11px 10px;border-radius:9px;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--slate);
}
.hu-i .ico{font-size:17px;color:var(--stone);}
.hu-i:hover{background:var(--smoke);}
.hu-salir{color:var(--red);}
.hu-salir .ico{color:var(--red);}
.hu-salir:hover{background:#FDF1F0;}

/* ── Pantalla de entrada ── */
.ses{min-height:calc(100vh - var(--hdr-h));display:flex;align-items:center;justify-content:center;padding:26px 18px 40px;}
.ses-caja{width:100%;max-width:400px;text-align:center;}
.ses-logo{width:66px;height:66px;margin-bottom:18px;}
.ses-caja h2{font-size:21px;font-weight:700;color:var(--navy);line-height:1.25;}
.ses-caja > p{font-size:13px;color:var(--stone);line-height:1.55;margin:7px 0 22px;}
.ses-caja form{text-align:left;}
.ses-caja .field{margin-bottom:14px;}
.ses-caja .btn-p{width:100%;}
.ses-olvide{margin-top:14px;font-size:12px;}
.ses-demo{
  margin-top:16px;font-size:11.5px;line-height:1.55;color:#8A6D1F;
  background:#FDF8EC;border:1px solid rgba(184,149,58,.35);border-radius:10px;padding:11px 13px;text-align:left;
}
.ses-demo b{color:#6E5616;}
.ses-sep{position:relative;margin:22px 0 16px;color:var(--stone);font-size:11px;}
.ses-sep::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border);}
.ses-sep span{position:relative;background:var(--smoke);padding:0 12px;}
.ses-pie{margin-top:20px;font-size:11px;}
.ses-ic{
  width:60px;height:60px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.ses-ic-aviso{background:#FDF1F0;color:var(--red);}
.ses-plazo{
  font-size:12.5px;line-height:1.6;color:var(--slate);
  background:var(--smoke);border-radius:11px;padding:13px 15px;margin:14px 0 18px;text-align:left;
}

/* ── Foto en Ajustes ── */
.cfg-foto{display:flex;align-items:center;gap:15px;padding:4px 0 16px;border-bottom:1px solid var(--smoke);margin-bottom:16px;}
.cfg-foto-t{flex:1;min-width:0;}
.cfg-foto-t b{display:block;font-size:13px;color:var(--navy);}
.cfg-foto-t > span{display:block;font-size:11px;color:var(--stone);line-height:1.45;margin-top:2px;}
.cfg-foto-acts{display:flex;gap:8px;margin-top:10px;}
.cfg-foto-acts .btn-p{width:auto;padding:8px 15px;font-size:12px;margin:0;}
#lbl-foto{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}

/* Lista dentro de los diálogos */
.dq-lista{text-align:left;margin:10px 0 0;padding-left:20px;}
.dq-lista li{font-size:13px;line-height:1.55;color:var(--stone);margin-bottom:8px;}
.dq-lista li b{color:var(--slate);}
.dq-nota{font-size:12.5px;color:var(--stone);margin-top:14px;padding-top:12px;border-top:1px solid var(--smoke);}

.ses-ic-ok{background:#E8F8EF;color:var(--green);}
.ses-aviso{font-size:11.5px;line-height:1.55;color:var(--stone);margin-top:12px;}

.ses-ic-info{background:#EAF3FB;color:var(--blue);}
.ses-pasos{text-align:left;margin:18px 0 16px;}
.ses-pasos > div{
  display:flex;align-items:flex-start;gap:11px;padding:10px 0;
  border-top:1px solid var(--border);font-size:12.5px;line-height:1.5;color:var(--slate);
}
.ses-pasos > div:first-child{border-top:none;}
.ses-pasos span{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.ses-nota{
  font-size:11.5px;line-height:1.55;color:var(--stone);
  background:var(--smoke);border-radius:10px;padding:11px 13px;margin-bottom:14px;text-align:left;
}

/* ── Panel visual de las pantallas de cuenta ──
   Mismo lenguaje que la portada: fondo navy con retícula, dos luces que flotan y las
   escenas de línea rotando. Solo aparece cuando hay ancho para él: en un teléfono robaría
   la pantalla al formulario, que es a lo que la persona vino. */
.ses-art{display:none;}

.vs-bg{position:absolute;inset:0;overflow:hidden;}
.vs-grid{position:absolute;inset:0;width:100%;height:100%;}
.vs-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;}
.vs-o1{width:360px;height:360px;top:-90px;left:-80px;
  background:radial-gradient(circle,rgba(46,91,154,.9),transparent 68%);
  animation:vsFlota 24s ease-in-out infinite;}
.vs-o2{width:320px;height:320px;bottom:-100px;right:-70px;
  background:radial-gradient(circle,rgba(184,149,58,.55),transparent 68%);
  animation:vsFlota 30s ease-in-out infinite reverse;}
@keyframes vsFlota{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(38px,-28px) scale(1.08);}
}

.vs-escenas{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 72% 40% at 50% 46%, transparent 34%, #000 86%);
          mask-image:radial-gradient(ellipse 72% 40% at 50% 46%, transparent 34%, #000 86%);}
.vs-esc{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transform:scale(1.05);transition:opacity 1.1s ease,transform 6s ease-out;}
.vs-esc.on{opacity:.42;transform:scale(1);}

.vs-in{position:relative;z-index:1;}
.vs-logo{width:60px;height:60px;margin-bottom:22px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));}
.vs-eyebrow{font-size:10px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:12px;}
.vs-h{font-size:clamp(23px,2.1vw,31px);font-weight:700;line-height:1.18;letter-spacing:-.6px;color:#fff;}
.vs-sub{font-size:13.5px;line-height:1.65;color:rgba(232,238,247,.66);margin-top:12px;}
.vs-puntos{list-style:none;margin:26px 0 0;padding:0;}
.vs-puntos li{
  position:relative;padding:10px 0 10px 26px;font-size:12.5px;line-height:1.5;
  color:rgba(232,238,247,.78);border-top:1px solid rgba(255,255,255,.09);
}
.vs-puntos li::before{
  content:"";position:absolute;left:2px;top:17px;width:10px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);
}
.vs-pie{position:relative;z-index:1;margin-top:auto;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:10.5px;letter-spacing:.3px;color:rgba(232,238,247,.42);}

@media (prefers-reduced-motion:reduce){
  .vs-orb{animation:none;}
  .vs-esc{transition:opacity .3s;transform:none;}
}

/* ── Alternativa para quien aún no tiene diagnóstico ──
   El inicio de sesión es una puerta para quien ya entró antes; esta es la otra puerta y
   tiene que verse, pero sin pelearle el primer lugar a "Entrar". Por eso va en una caja
   aparte con el oro de la marca: distinta, no más fuerte. */
.ses-nuevo{
  border:1px solid rgba(201,168,76,.42); background:rgba(201,168,76,.07);
  border-radius:14px; padding:16px 16px 14px; text-align:center;
}
.ses-nuevo-t{font-size:13px; font-weight:800; color:var(--navy); margin-bottom:10px;}
.ses-nuevo-s{font-size:12px; color:var(--gris); margin-top:9px;}
.ses-btn-nuevo{
  width:100%; background:#fff; color:var(--navy);
  border:1.5px solid var(--gold); box-shadow:0 2px 10px rgba(201,168,76,.22);
}

/* ── Campo de código de 6 dígitos ──
   Se escribe mirando el correo en otra ventana, dígito por dígito: letra grande, bien
   separada y centrada para poder comparar de un vistazo sin perder la cuenta. */
.cod-in{
  text-align:center; font-size:26px; font-weight:700; letter-spacing:.42em;
  text-indent:.42em;                      /* compensa el espacio que sobra a la derecha */
  font-variant-numeric:tabular-nums; padding:14px 10px;
}
.cod-in::placeholder{letter-spacing:.3em; font-weight:400; opacity:.35;}

/* El aviso de correo no deseado se ve, pero no sermonea: es la razón número uno por la
   que alguien se queda esperando un código que sí llegó. Una línea basta. */
.ses-nota.ses-spam{
  background:rgba(201,168,76,.09); border:1px solid rgba(201,168,76,.34);
  border-radius:11px; padding:11px 14px; text-align:center; margin:14px 0 4px;
}

/* ── Medidor de contraseña ──
   Las reglas van siempre visibles, no en un aviso que aparece cuando ya fallaste. El
   gris dice "todavía no", el verde dice "listo": nada rojo mientras se escribe, porque
   escribir a medias no es un error. */
.cl-medidor{margin-top:10px;}
.cl-barra{height:5px; border-radius:99px; background:var(--border); overflow:hidden;}
.cl-barra span{display:block; height:100%; width:0; border-radius:99px; transition:width .25s, background .25s;}
.cl-barra span.bajo {background:#C2502F;}
.cl-barra span.medio{background:var(--gold);}
.cl-barra span.ok   {background:#2E8B57;}

.cl-reglas{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:5px;}
.cl-reglas li{
  display:flex; align-items:center; gap:8px;
  font-size:12.2px; line-height:1.35; color:var(--gris); transition:color .2s;
}
.cl-reglas li.ok{color:#2E8B57; font-weight:600;}
.cl-mk{
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--border); position:relative; transition:all .2s;
}
.cl-reglas li.ok .cl-mk{background:#2E8B57; border-color:#2E8B57;}
/* La palomita se dibuja con dos bordes girados: un carácter ✓ cambia de forma según la
   fuente que tenga instalada cada quien. */
.cl-reglas li.ok .cl-mk::after{
  content:''; position:absolute; left:4px; top:1px; width:4px; height:7px;
  border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(42deg);
}

/* ── Casilla anti-robots ── */
.dq-captcha{margin:4px 0 14px; display:flex; justify-content:center; min-height:0;}
.dq-captcha:empty{display:none; margin:0;}

/* ── Ojo para ver la contraseña ──
   El botón vive dentro del campo, no al lado: al lado empuja el ancho del input y
   rompe la alineación con los demás campos del formulario. */
.pw{position:relative;}
.pw input{padding-right:46px;}
.pw-ojo{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:8px; cursor:pointer;
  color:var(--stone); font-size:18px; padding:0;
  transition:color .15s, background .15s;
}
.pw-ojo:hover{color:var(--navy); background:var(--smoke);}
.pw-ojo[aria-pressed="true"]{color:var(--sky);}
.pw-ojo:focus-visible{outline:2px solid var(--sky); outline-offset:1px;}

/* ── Botón ocupado ──
   El giro no es decoración: sin él, un botón deshabilitado con otro texto parece un
   botón roto. Con el giro se lee como "está pasando algo, espera". */
.btn-p:disabled{opacity:.72; cursor:progress;}
.spin{
  display:inline-block; width:15px; height:15px; margin-right:9px; vertical-align:-2px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:dq-girar .7s linear infinite;
}
@keyframes dq-girar{to{transform:rotate(360deg);}}
/* A quien pide menos movimiento se le muestra el estado, no la animación. */
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:2.4s;} }