/* Etapa 2 del rediseño: estilos propios de las pantallas del grupo "cuenta".
   Solo reglas que el sistema de componentes de app.css no cubre. */

/* ---------- ACCESO: panel de marca + tarjeta (Acceso.dc de la maqueta) ----- */
.acceso{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); min-height:calc(100vh - 140px);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-float); background:var(--bg-app); margin-top:var(--e3)}
.acceso-marca{background:var(--dark); color:var(--on-dark); padding:40px 40px 32px; display:flex; flex-direction:column}
.acceso-marca h2{margin:48px 0 0; font-size:30px; line-height:1.2; font-weight:600; letter-spacing:-.02em; color:var(--on-dark)}
.acceso-marca .lead{margin:12px 0 0; color:var(--on-dark-mute); font-size:14.5px}
.acceso-pts{list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:20px}
.acceso-pts li{display:flex; gap:14px; align-items:flex-start}
.acceso-pts .ic{width:40px; height:40px; border-radius:50%; background:var(--on-dark-surface-2); color:var(--on-dark-accent);
  display:flex; align-items:center; justify-content:center; flex:none}
.acceso-pts b{display:block; font-weight:600; font-size:14.5px}
.acceso-pts div > span{color:var(--on-dark-mute); font-size:13px}
.acceso-pie{margin:auto 0 0; padding-top:32px; color:var(--on-dark-mute); font-size:12.5px}
.acceso-stage{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px}
.acceso-stage .auth{width:100%; max-width:440px; margin:0; padding-top:0}
.acceso-stage .auth.auth-ancho{max-width:640px}
.acceso-stage .auth > h1{font-size:26px; margin-bottom:var(--e2)}
.acceso-stage .auth .card{padding:28px}
.acceso-stage .auth label{display:block; font-weight:600; font-size:13px; margin:16px 0 6px}
.acceso-stage .auth .sub{color:var(--mute); margin:0 0 var(--e2)}
.acceso-stage .auth button[type="submit"]{width:100%; margin-top:var(--e3); min-height:44px}
.acceso-stage .pie{text-align:center}
@media (max-width:900px){
  .acceso{grid-template-columns:1fr; min-height:0; box-shadow:none; background:transparent}
  .acceso-marca{border-radius:var(--r-lg); padding:24px}
  .acceso-marca h2{margin-top:0; font-size:22px}
  .acceso-pts, .acceso-marca .lead, .acceso-pie{display:none}
  .acceso-stage{padding:var(--e3) 0}
}

/* ACCESO · ojo de contraseña, código en casillas y reenviar con espera (Etapa 3).
   Todo lo que pinta `acceso.js`; sin JS el formulario es el de siempre. */
.pw{position:relative}
.pw input{padding-right:44px}
.pw-ojo{position:absolute; top:50%; right:4px; transform:translateY(-50%); width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0;
  border-radius:var(--r-sm); color:var(--mute); cursor:pointer}
.pw-ojo[hidden]{display:none}
.pw-ojo:hover, .pw-ojo.on{color:var(--ink)}
.pw-ojo:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.pw-ojo svg{width:18px; height:18px}
.otp{display:flex; gap:8px; justify-content:space-between}
.otp .otp-casilla{width:100%; min-width:0; max-width:56px; padding:12px 0; text-align:center;
  font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}
.pie a[aria-disabled="true"]{color:var(--mute); cursor:default; text-decoration:none; pointer-events:none}

/* ---------- Plan y facturación: pestañas internas ---------- */
.tabs-plan{margin-bottom:var(--e3)}
.tabs-plan a{font-size:13px}
.tabs-plan{margin-top:calc(var(--e2) * -1)}

/* ---------- Confirmaciones de seguridad (rediseño, bloque 4) ----------
   `<details>` nativo: el botón de la acción vive DENTRO del panel, así que sin
   abrirlo no hay forma de dispararla con un clic. Sin JavaScript. */
details.confirmar{display:inline-block; vertical-align:top}
details.confirmar > summary{list-style:none; cursor:pointer; display:inline-block}
details.confirmar > summary::-webkit-details-marker{display:none}
.confirmar-cuerpo{max-width:280px; margin-top:6px; padding:10px 12px; text-align:left; white-space:normal;
  border:1px solid var(--err); border-radius:var(--r-sm); background:var(--err-bg)}
.confirmar-cuerpo p{margin:0 0 8px; font-size:13px}

/* ---------- Ajustes > Cuenta: tarjeta de la cuenta + cambio de contraseña (maqueta Ajustes) ---------- */
.aj-cuenta-pagina .sub{margin:var(--e1) 0 var(--e4)}
.aj-dos{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--e3); align-items:start}
.aj-dos > .card{margin-bottom:0}
.aj-dos .card-title{margin:0 0 var(--e3); font-size:var(--t-lg); font-weight:600}
.aj-datos .kv{margin:0 0 var(--e2)}
@media (max-width:820px){ .aj-dos{grid-template-columns:minmax(0, 1fr)} }

/* Las pantallas de Ajustes (Plan, Comisión, Estado del sistema) arrancan pegadas
   al borde izquierdo, bajo sus pestañas, como en la maqueta: el centrado de
   `.angosto` las despegaba de la barra de pestañas. */
.angosto.aj-izq{margin-left:0}