/* entrar-aux.css — rediseño 2026-10 de las vistas AUXILIARES de acceso:
   verificación 2FA (302), recuperar clave del staff (303), nueva clave del
   staff (304), nueva clave del socio (305) y clave cambiada (306).
   SOLO apariencia. Se carga DESPUÉS de entrar.css y reutiliza sus variables
   (--CARD, --INP, --TX, --ACCENT…, tema claro/oscuro por data-theme), sus
   campos (.inp/.lico/.eye), .btn, .alerta-error y la cinta .ribbons.
   Dos moldes: "split" (foto a la izquierda + formulario, escritorio) y
   "movil" (foto de cabecera + tarjeta que la solapa; 305/306). */

body.aux{min-height:100vh;min-height:100dvh;overflow-x:hidden}
.aux-wrap{
  position:relative;z-index:1;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;
}
.aux-card{
  position:relative;width:100%;max-width:980px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  background:var(--CARD);border:1px solid var(--BD);border-radius:20px;
  box-shadow:var(--SH),inset 0 1px 0 var(--INSETLINE);
}

/* ── Lado foto ── */
.aux-foto{position:relative;min-height:560px;overflow:hidden;background:#1b120d}
.aux-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.aux-foto::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 38%,rgba(0,0,0,.30) 100%)}
.aux-foto::after{
  content:'';position:absolute;left:-90px;bottom:-130px;width:300px;height:300px;border-radius:50%;
  background:linear-gradient(135deg,#EA580C,#C2410C);opacity:.92;
}
.aux-foto-marca{
  position:absolute;z-index:2;top:22px;left:24px;right:24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  font-family:var(--MONO);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.aux-foto-marca svg{width:62px;height:46px}

/* ── Lado formulario (reutiliza .face de entrar.css) ── */
.aux-form.face{height:auto;justify-content:center;padding:44px 48px}
.aux-form .arc{width:64px;height:47px;margin-bottom:12px}
.aux-barra{display:block;width:34px;height:3px;border-radius:3px;background:var(--ACCENT);margin:0 auto 16px}
.aux-form h1{font-size:30px;line-height:1.15;margin-bottom:8px}
.aux-form .hint{font-size:14px;line-height:1.5;margin-bottom:20px;max-width:34ch}
.aux-form form{align-items:stretch;text-align:left}
.aux-lbl{display:block;width:100%;font-size:13px;font-weight:700;margin:12px 0 2px;color:var(--TX)}
.aux-form .alerta-error{margin-bottom:14px}
.aux-form .btn{margin-top:18px}
.aux-volver{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--BD);
  font-size:13.5px;font-weight:600;color:var(--TM);
}
.aux-volver:hover{color:var(--ACCENTd)}
.aux-volver:focus-visible{outline:2px solid var(--ACCENT);outline-offset:3px;border-radius:4px}
.aux-email{
  display:flex;align-items:center;gap:10px;width:100%;margin:6px 0 2px;padding:11px 14px;
  background:var(--INP);border:1px solid var(--BD);border-radius:10px;
  font-size:13.5px;color:var(--TM);overflow-wrap:anywhere;text-align:left;
}
.aux-email [data-lucide]{color:var(--TF)}

/* ── 302: código de 6 casillas sobre UN solo <input id=codigo> (pegar y
   autocompletar one-time-code siguen funcionando; solo cambia el dibujo) ── */
#codigo{
  --cell:clamp(2.2rem,10.5vw,3rem);--gap:.45rem;--pitch:calc(var(--cell) + var(--gap));--bdc:var(--BD);
  --ind:calc((var(--cell) - 1ch)/2);
  /* Más ancho que las 6 casillas (indent + tope del cursor) para que el campo no
     se desplace al llenarse; la máscara recorta lo que sobra del fondo. */
  width:calc(var(--pitch)*6 + var(--ind) + 2px);height:3.5rem;translate:calc(var(--ind)/2) 0;
  -webkit-mask-image:linear-gradient(90deg,#000 0 calc(var(--pitch)*6 - var(--gap)),transparent 0);
  mask-image:linear-gradient(90deg,#000 0 calc(var(--pitch)*6 - var(--gap)),transparent 0);
  margin:8px auto 4px;padding:0;border:0;border-radius:0;
  font-family:ui-monospace,Consolas,'Courier New',monospace;font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:700;color:var(--TX);
  letter-spacing:calc(var(--pitch) - 1ch);text-indent:var(--ind);
  text-align:left;background-color:transparent;box-shadow:none;outline:none;
  background-image:
    linear-gradient(90deg,var(--INP) 0 calc(var(--cell) - 3px),transparent 0),
    linear-gradient(90deg,var(--bdc) 0 var(--cell),transparent 0);
  background-size:var(--pitch) calc(100% - 3px),var(--pitch) 100%;
  background-position:1.5px 50%,0 0;background-repeat:repeat-x;
  transition:none;
}
#codigo:focus{--bdc:var(--ACCENT);outline:none;box-shadow:none;background-color:transparent}
#codigo::placeholder{color:var(--TF);opacity:.45}
.aux-det{width:100%;margin:18px 0 0;padding:14px 16px;background:var(--TINTE);border:1px solid var(--TINTEb);border-radius:12px;text-align:left}
.aux-det summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ACCENTd);list-style:none;display:flex;align-items:center;gap:8px}
.aux-det summary::-webkit-details-marker{display:none}
.aux-det summary::before{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.aux-det[open] summary::before{transform:rotate(45deg)}
.aux-det summary:focus-visible{outline:2px solid var(--ACCENT);outline-offset:3px;border-radius:4px}
.aux-det p{font-size:12.5px;line-height:1.5;color:var(--TM);margin:10px 0 4px}
.aux-det input[type=password]{padding-left:15px}

/* ── Molde móvil (305/306): foto de cabecera + tarjeta que la solapa ── */
body.aux-movil .aux-wrap{justify-content:flex-start;padding:0 0 24px;gap:0}
body.aux-movil .aux-card{display:block;max-width:440px;background:transparent;border:0;box-shadow:none;overflow:visible}
body.aux-movil .aux-foto{min-height:0;height:230px;border-radius:0 0 28px 28px}
body.aux-movil .aux-foto::after{left:-70px;top:-110px;bottom:auto;width:240px;height:240px}
body.aux-movil .aux-form.face{
  position:relative;z-index:3;margin:-64px 16px 0;padding:30px 24px 26px;
  background:var(--CARD);border:1px solid var(--BD);border-radius:22px;box-shadow:var(--SH);
}
body.aux-movil .aux-pie{margin-top:18px}
/* A9 (QA 2026-10-23): en escritorio la foto de cabecera pegada al borde superior y con las esquinas
   de abajo redondeadas se veía recortada: se separa del borde y se redondea entera como una tarjeta. */
@media(min-width:761px){body.aux-movil .aux-wrap{padding:24px}body.aux-movil .aux-foto{border-radius:22px;overflow:hidden}}
.aux-logo-mitic{height:34px;width:auto;margin-bottom:10px}
.aux-logo-mitic.dk{display:none}
html[data-theme="dark"] .aux-logo-mitic.lt{display:none}
html[data-theme="dark"] .aux-logo-mitic.dk{display:inline-block}
.aux-pie{font-size:12.5px;color:var(--TM);text-align:center}
.aux-ok-ring{
  width:84px;height:84px;border-radius:50%;margin:2px auto 18px;display:flex;align-items:center;justify-content:center;
  background:var(--OKb);box-shadow:0 0 0 10px color-mix(in srgb,var(--OK) 9%,transparent),0 0 0 22px color-mix(in srgb,var(--OK) 5%,transparent);
  color:var(--OK);
}
.aux-ok-ring [data-lucide]{width:38px;height:38px;stroke-width:2.6}

/* ── Responsive: en pantallas angostas la foto pasa a cabecera ── */
@media(max-width:760px){
  .aux-wrap{justify-content:flex-start;padding:0 0 24px}
  .aux-card{display:block;max-width:440px;background:transparent;border:0;box-shadow:none;overflow:visible}
  .aux-foto{min-height:0;height:190px;border-radius:0 0 28px 28px}
  .aux-foto::after{left:auto;right:-80px;top:-120px;bottom:auto;width:230px;height:230px}
  .aux-foto-marca svg{width:46px;height:34px}
  .aux-foto-marca{top:16px;left:18px;gap:8px}
  .aux-form.face{position:relative;z-index:3;margin:-48px 16px 0;padding:28px 22px 24px;background:var(--CARD);border:1px solid var(--BD);border-radius:22px;box-shadow:var(--SH)}
  .aux-form.face::before{display:none}
  .aux-form h1{font-size:26px}
  .aux-wrap .aux-pie{margin-top:6px}
}