.accounts{font-size:16px;line-height:1.6;color:#17252a;background:#f4f7f7}.accounts main{background:white;border:1px solid #dce6e5;border-radius:12px;box-shadow:0 5px 24px #17252a09}.accounts main nav{display:flex;gap:12px;flex-wrap:wrap;border-bottom:1px solid #dce6e5;padding-bottom:16px}.accounts h1{font-size:32px;margin:24px 0 12px}.accounts h2{font-size:22px}.accounts main form{margin:16px 0;padding:16px;background:#f7faf9;border:1px solid #dce6e5;border-radius:8px}.accounts main label{margin:10px 0;display:block;font-size:14px}.accounts main button{margin:4px 6px 4px 0;padding:10px 14px;font-size:14px}.accounts main button[value=delete]{color:#a22020;border-color:#d59b9b}.accounts main input,.accounts main select{font-size:16px;padding:10px}.accounts main table{width:100%;border-collapse:collapse;table-layout:fixed}.accounts main th{text-align:left;border-bottom:2px solid #dce6e5}.accounts main td{padding:12px 8px;border-bottom:1px solid #dce6e5;vertical-align:top;overflow-wrap:anywhere}.accounts main td form{padding:12px}.accounts .activity{list-style:none;padding:0}.accounts .activity li{padding:12px;border-bottom:1px solid #dce6e5;font-size:14px;overflow-wrap:anywhere}.accounts [role=status]{background:#e6f6ed;border-left:4px solid #217e50;padding:12px}.accounts main a:focus-visible,.accounts main button:focus-visible,.accounts main input:focus-visible,.accounts main select:focus-visible{outline:3px solid #26768c;outline-offset:3px}@media(max-width:700px){.accounts main{margin:10px!important}.accounts main table,.accounts main thead,.accounts main tbody,.accounts main tr,.accounts main th,.accounts main td{display:block}.accounts main thead{display:none}.accounts main td{padding:8px}.accounts main tr{border:1px solid #dce6e5;margin:12px 0;border-radius:8px}.accounts main td:first-child{font-weight:600}.accounts main nav{font-size:14px}}

/* Formularios de acceso y cuenta: campos apilados y ancho consistente. */
.accounts main form{display:grid;gap:12px}
.accounts main label{display:grid;gap:4px;margin:0;font-weight:600}
.accounts main input,.accounts main select,.accounts main textarea{width:100%;max-width:420px;padding:10px;font-size:16px;border:1px solid #c3d2d0;border-radius:8px;background:#fff}
.accounts main button{justify-self:start;margin:4px 0;padding:10px 18px;font-size:15px;border:1px solid #145b48;background:#145b48;color:#fff;border-radius:8px;cursor:pointer}
.accounts main button:hover{background:#0f4536}
.accounts main button[value=delete]{background:#fff;color:#a22020;border-color:#d59b9b}
button.secondary{background:#fff;color:#145b48}button.secondary:hover{background:#edf5f1}button.danger{background:#fff;color:#a13737;border-color:#a13737}button.danger:hover{background:#fbeeee}.accounts-main{max-width:1000px;margin:2rem auto;padding:1rem}.accounts .login-error{background:#fbeeee;border-left:4px solid #a13737;color:#7d2525;padding:12px;margin:12px 0}
.accounts .login-brand{margin:20px 0 4px}.accounts .login-brand img{display:block;max-width:220px;max-height:72px;width:auto;height:auto}.accounts .login-brand strong{font-size:22px}

/* Contraseña: ojito mostrar/ocultar + validación propia en español (accounts.js).
   Los mensajes van inline bajo el campo con aria-live; nunca tooltips nativos. */
.accounts .password-field{position:relative;display:flex;align-items:center;gap:8px;max-width:420px}
.accounts .password-field input{flex:1;min-width:0;padding-right:46px}
.accounts .password-field button.password-toggle{position:absolute;right:2px;top:2px;bottom:2px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:auto;min-height:0;padding:0;margin:0;border:0;border-radius:4px;background:transparent;color:#55554e;cursor:pointer;box-shadow:none;transform:none;flex:none;overflow:hidden}
.accounts .password-field button.password-toggle:hover{background:var(--ak-lime,#d8ff00);color:var(--ak-ink,#151515);box-shadow:none;transform:none;border:0}
.accounts .password-field button.password-toggle:active{background:var(--ak-lime-hover,#c8ec00);color:var(--ak-ink,#151515);border:0;outline:0;box-shadow:none;transform:none}
.accounts .password-field button.password-toggle[aria-pressed="true"]{background:var(--ak-lime-hover,#c8ec00);color:var(--ak-ink,#151515);border:0;outline:0;box-shadow:none;transform:none}
.accounts .password-field button.password-toggle:focus-visible{outline:2px solid var(--ak-violet,#603de3)!important;outline-offset:-2px!important;box-shadow:none;transform:none}

.accounts .password-field .password-toggle-icon{flex:none;display:block}
.accounts .password-field button.password-toggle[aria-pressed="false"] .eye-closed{display:none}
.accounts .password-field button.password-toggle[aria-pressed="true"] .eye-open{display:none}
.accounts .field-error{color:#a13737;font-size:13px;min-height:1.2em;display:block}
/* Paginas de acceso publicas: tarjeta centrada, mismo layout del login. */
.login-screen .accounts-main{max-width:560px;margin:2rem auto;padding:1.5rem}


/* Estado de error con diseño (pageProblem): tarjeta con el mismo lenguaje del panel; */
/* el color de mensaje es coherente con .field-error (mensajes inline). */
.error-state{border:2px solid var(--ak-ink,#151515);box-shadow:2px 2px 0 var(--ak-ink,#151515);padding:1.25rem;background:#fff}
.error-state-message{color:#a13737;font-weight:700;font-size:1.05rem}
.error-state-links{margin:0.75rem 0 0}
.error-state-links a{margin-right:0.5rem}

/* QA R2 mobile (≤767): áreas táctiles ≥44px (vara del proyecto; WCAG 2.5.8 AA pide 24px).
   El ojo crece junto con el campo: sigue contenido dentro del input (regla del ojo). */
@media(max-width:767px){
 .accounts.login-screen .password-field input{min-height:48px!important}
 .accounts.login-screen .password-field button.password-toggle{width:44px;min-width:44px}
 .accounts.login-screen main button:not(.password-toggle),.accounts.login-screen main input[type="submit"]{min-height:44px!important}
 .accounts.login-screen main a{display:inline-flex;align-items:center;min-height:44px!important}
}


/* Verificación en dos pasos */
.mfa-steps{display:grid;gap:12px;padding-left:20px}
.mfa-qr{display:block;width:200px;height:200px;margin:12px 0;padding:8px;background:#fff;border-radius:8px}
.mfa-secret{word-break:break-all;font-size:15px;letter-spacing:.05em}

/* Casilla con texto (registro: términos). */
.auth-card form label.check,form label.check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;line-height:1.5}
form label.check input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:2px 0 0;flex:none;padding:0}
form label.check span{display:inline}
/* Ojito de contraseña: hover en la paleta de Aloba (no el lima del motor). */
.accounts .password-field button.password-toggle:hover{background:#eee7f5;color:#4c407c}