/* ============================================================================
   LX-AUTH — Paneles de acceso / registro / recuperar contrasena (diseno de Rafa).
   Prefijo .lxa- A PROPOSITO: .lx-btn / .lx-modal / .lx-campo YA existen en
   libroox-ui.css (componentes del editor); renombrar evita colisiones.
   Se montan DENTRO del modal Bootstrap: Bootstrap aporta overlay + apertura;
   aqui va la TARJETA (.lxa-modal como .modal-content) y su contenido.
   ========================================================================== */
.modals-home .modal-dialog.lxa-dialog{max-width:520px;margin-left:auto;margin-right:auto}
/* fondo GRIS de marca; !important vence a new-style.css `.modals-home .modal-content{background:transparent}` */
.lxa-modal{position:relative;background:#F6F5F7!important;border:0;border-radius:16px!important;box-shadow:0 40px 100px rgba(0,0,0,.5);overflow:hidden auto;max-height:92vh;font-family:'Montserrat',system-ui,sans-serif}
.lxa-cerrar{position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(13,16,49,.06);color:#0D1031;cursor:pointer;z-index:2}
.lxa-cerrar:hover{background:rgba(13,16,49,.12)}
.lxa-cuerpo{padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;gap:16px;text-align:left}
.lxa-cab{display:flex;flex-direction:column;gap:8px}
.lxa-titulo{font-size:22px;font-weight:400;letter-spacing:-.01em;color:#0D1031;margin:0}
.lxa-intro{font-size:15px;font-weight:400;line-height:1.6;color:#3a3950;margin:0}
.lxa-form{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.lxa-campo{display:flex;flex-direction:column;gap:7px}
.lxa-campo>span{font-size:13px;font-weight:400;color:#0D1031}
.lxa-campo input{display:block;width:100%;height:50px!important;min-height:0!important;padding:0 14px;box-sizing:border-box!important;border:1px solid #E3E2E8;border-radius:6px;background:#fff!important;font-family:inherit;font-size:14px;font-weight:300;color:#0D1031;transition:border-color .16s,background .16s}
.lxa-campo input:focus,.lxa-campo input:focus-visible{outline:none;border-color:#AE419C;background:#fff;box-shadow:none}
.lxa-campo input[aria-invalid="true"]{border-color:#B3261E;background:#fff}
.lxa-clave{position:relative;display:block}
.lxa-clave input{padding-right:46px}
/* Ojo centrado en el eje vertical del campo (50px) con top:50% + translate:
   no depende de line-height, padding ni baseline del boton/svg. */
.lxa-ojo{position:absolute;top:25px;right:8px;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:none;color:#8a8996;cursor:pointer;line-height:0}
.lxa-ojo svg{display:block}
.lxa-error{display:none;font-size:12px;font-weight:400;color:#B3261E}
.lxa-error[data-visible]{display:block}
.lxa-btn{height:52px;border:0;border-radius:6px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .16s,border-color .16s,color .16s;display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
.lxa-btn-magenta,.lxa-btn-magenta:hover,.lxa-btn-magenta:focus{background:#AE419C;color:#fff}
.lxa-btn-magenta:hover{background:#9A3689}
.lxa-btn-borde,.lxa-btn-borde:focus,.lxa-btn-borde:hover{background:#fff;border:1px solid #DAD8E0;color:#0D1031!important;font-size:14px;gap:11px;padding:0 18px}
.lxa-btn-borde:hover{border-color:#0D1031}
.lxa-sep{display:flex;align-items:center;gap:12px}
.lxa-sep span{flex:1 1 0;height:1px;background:#E9E8EE}
.lxa-sep em{font-style:normal;font-size:12px;font-weight:300;color:#8a8996}
.lxa-enlace,.lxa-enlace:hover,.lxa-enlace:focus{padding:0;border:0;background:none;font-family:inherit;font-size:13px;font-weight:500;color:#0D1031!important;text-decoration:underline;cursor:pointer}
.lxa-enlace-magenta,.lxa-enlace-magenta:hover,.lxa-enlace-magenta:focus{color:#AE419C!important;font-weight:400;text-decoration:none}
.lxa-enlace-magenta:hover{text-decoration:underline}
/* "¿Olvidaste tu contraseña?" 3px mas abajo SIN anadir hueco (desplazamiento visual). */
.lxa-pie .lxa-enlace-magenta{position:relative;top:5px}
.lxa-pie{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.lxa-pie-fila{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lxa-pie-fila>span{font-size:13px;font-weight:300;color:#6b6a79}
.lxa-modal :focus-visible{outline:2px solid #AE419C;outline-offset:2px}

/* --- Pagina "Restablecer contrasena" (paso 2 del olvido): tarjeta .lxa-modal
   centrada en una pagina clara (no hay overlay/backdrop como en los modales). --- */
.lxa-page{display:flex;align-items:flex-start;justify-content:center;min-height:58vh;padding:clamp(32px,6vw,72px) 16px;background:#F4F2EF}
.lxa-page .lxa-modal{width:100%;max-width:520px;max-height:none;box-shadow:0 20px 60px rgba(13,16,49,.12)!important}

/* --- Registro: barra de fuerza (usa la logica real de login.js:
   #progress-security / .progress-bar / #percent-sec) + legal/consentimiento --- */
.lxa-fuerza{display:flex;flex-direction:column;gap:9px}
.lxa-fuerza-fila{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lxa-fuerza-fila>span:first-child{font-size:11px;font-weight:400;color:#6b6a79}
.lxa-fuerza-nivel{font-size:11px;font-weight:500;color:#8a8996}
.lxa-modal .progress{height:4px;background:#E9E8EE;border-radius:0;overflow:hidden;margin:0}
.lxa-modal .progress-bar{transition:width .18s;border-radius:0}
.lxa-aviso{padding:12px 14px;background:#F0F8FB;border-left:3px solid #6ECAE4;font-size:12px;font-weight:300;line-height:1.65;color:#0D1031}
/* Consentimiento: clase .lx-consent OBLIGATORIA (login.js valida `.lx-consent input`). */
.lxa-modal .lx-consent{display:flex;flex-direction:column;gap:12px;text-align:left}
.lxa-modal .lx-consent__item{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:300;line-height:1.5;color:#3a3950;cursor:pointer}
.lxa-modal .lx-consent__item input{margin:3px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:#AE419C}
.lxa-modal .lx-consent__item a,.lxa-modal .lx-consent__item a:hover{color:#AE419C!important;text-decoration:underline}
.lxa-modal .lx-consent__item.is-missing{color:#B3261E}
.lxa-modal .lx-consent__item.is-missing input{outline:2px solid #B3261E}