:root{
  --sigep-green:#2e9e44;
  --sigep-green-dark:#237a35;
  --sigep-green-soft:#eef8f0;
  --sigep-border:#dfe5e9;
  --sigep-muted:#6b7280;
  --sigep-ink:#2f3742;
  --sigep-bg:#f4f7f5;
}

/* ===== Centro de acceso autenticado ===== */
body.access-page{
  margin:0;
  min-height:100vh;
  background:var(--sigep-bg);
  color:var(--sigep-ink);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.access-shell{
  width:min(980px,calc(100% - 32px));
  margin:32px auto;
}
.access-card{
  background:#fff;
  border:1px solid var(--sigep-border);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(20,45,30,.08);
  overflow:hidden;
}
.access-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 28px;
  border-bottom:1px solid #edf1ef;
  background:linear-gradient(180deg,#fff,#fbfdfb);
}
.access-title{margin:0;font-size:1.45rem;font-weight:700;}
.access-subtitle{margin-top:4px;color:var(--sigep-muted);font-size:.95rem;}
.access-brand{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.access-brand img{display:block;max-height:48px;max-width:190px;object-fit:contain;}
.access-body{padding:26px 28px 30px;}
.access-intro{
  border:1px solid #d9eadf;
  background:var(--sigep-green-soft);
  border-radius:10px;
  padding:13px 16px;
  margin-bottom:22px;
  color:#31583a;
}
.access-section{
  border:1px solid #e7ebee;
  border-radius:12px;
  padding:20px;
  margin-bottom:18px;
}
.access-section-title{
  margin:0 0 16px;
  font-size:1rem;
  font-weight:700;
  color:#364152;
}
.access-section-title small{font-weight:400;color:var(--sigep-muted);display:block;margin-top:3px;}
.access-page label{font-weight:600;color:#394450;}
.access-page .form-control{height:44px;border-color:#ccd5db;border-radius:8px;}
.access-page .form-control:focus{border-color:#6fba7b;box-shadow:0 0 0 .2rem rgba(46,158,68,.13);}
.field-note{display:block;margin-top:6px;color:var(--sigep-muted);font-size:.85rem;}
.required{color:#b42318;}
.phone-hint{font-variant-numeric:tabular-nums;}
.password-wrap{position:relative;}
.password-wrap .form-control{padding-right:44px;}
.password-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:#6b7280;cursor:pointer;padding:5px 7px;
  font-size:.85rem;
}
.password-rules{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.password-rule{padding:5px 9px;border-radius:999px;background:#f1f3f5;color:#69727d;font-size:.8rem;}
.password-rule.ok{background:#e8f6eb;color:#267338;}
.access-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px;}
.access-actions .btn{min-width:150px;border-radius:8px;font-weight:600;}
.access-user-chip{display:inline-flex;gap:7px;align-items:center;padding:5px 9px;border-radius:999px;background:#f1f4f2;color:#56605a;font-size:.82rem;margin-top:7px;}

/* ===== Login / recuperación ===== */
.login-page .input-wrap{position:relative;width:100%;}
.login-page .input-field{padding-right:46px;}
.login-page .eye-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;cursor:pointer;opacity:.8;z-index:1;}
.login-page .eye-icon:hover{opacity:1;}
.login-page .sigep-toast-area{position:fixed;top:16px;right:16px;z-index:2000;width:min(390px,calc(100vw - 32px));}
.login-page .sigep-toast{display:none;padding:13px 15px;border-radius:9px;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18);margin-bottom:8px;}
.login-page .sigep-toast.show{display:block;}
.login-page .sigep-toast.success{background:#2e9e44;}
.login-page .sigep-toast.error{background:#c23b3b;}
.login-page .sigep-toast.warning{background:#b7791f;}
.login-page .sigep-toast.info{background:#168ca3;}
.login-page .modal-content{border:0;border-radius:12px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.25);}
.login-page .modal-header{border-bottom:0;padding:17px 20px;}
.login-page .modal-body{padding:20px;}
.login-page .modal-footer{padding:14px 20px;border-top:1px solid #eceff1;}
.login-page .modal .form-control{height:46px;border-radius:8px;}
.login-page .modal .modal-note{color:#6c757d;font-size:.9rem;line-height:1.45;}
.login-page .modal .password-rules{margin-bottom:0;}
.login-page [hidden]{display:none!important;}

@media(max-width:760px){
  .access-shell{width:min(100% - 20px,980px);margin:12px auto;}
  .access-header{padding:18px;align-items:flex-start;}
  .access-brand{display:none;}
  .access-body{padding:18px;}
  .access-section{padding:16px;}
  .access-actions{flex-direction:column-reverse;}
  .access-actions .btn{width:100%;}
}
.login-page .aviso-cache{display:none;position:fixed;top:16px;right:16px;z-index:1030;width:clamp(260px,30vw,380px);box-shadow:0 6px 18px rgba(0,0,0,.15);}
.login-page .aviso-cache.show{display:block;}
.login-page .hp-field{position:absolute!important;left:-9999px!important;opacity:0!important;}
.login-page .captcha-input{max-width:160px;text-align:center;font-weight:600;}


/* ===== Login: modales de recuperación, sin reglas de layout de la tarjeta ===== */
body.login-page > .modal{
  position:fixed!important;
  inset:0!important;
  z-index:1050!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body.login-page > .modal-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:1040!important;
}
body.login-page .modal.show{
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:20px 12px;
}
body.login-page .modal-dialog{
  width:min(100%,620px);
  max-width:620px;
  margin:auto!important;
}
body.login-page .modal-content{
  width:100%;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(17,35,22,.28);
}
body.login-page #modalForgot .modal-header,
body.login-page #modalReset .modal-header{padding:18px 22px}
body.login-page #modalForgot .modal-body,
body.login-page #modalReset .modal-body{padding:22px}
body.login-page #modalForgot .modal-footer,
body.login-page #modalReset .modal-footer{
  padding:14px 22px 18px;
  justify-content:flex-end;
  gap:8px;
}
body.login-page .modal-footer .btn{min-width:118px;border-radius:8px}
body.login-page.modal-open{overflow:hidden!important;padding-right:0!important}
@media(max-width:576px){
  body.login-page .modal.show{padding:10px}
  body.login-page .modal-dialog{max-width:100%}
  body.login-page .modal-footer{flex-wrap:wrap}
  body.login-page .modal-footer .btn{flex:1 1 130px}
}