/* Milqia authentication: explicit theme so SmartAdmin's white cards cannot override the original glass layout. */
html,body{min-height:100%;margin:0}
body:has(.milqia-auth-glass){background-color:#073e35;color:#fff}
body:has(.milqia-auth-glass) .auth-nav{position:fixed!important;top:0;left:0;right:0;z-index:1050!important;display:block!important;background:linear-gradient(180deg,rgba(3,37,33,.80),rgba(3,37,33,0))!important}
body:has(.milqia-auth-glass) .auth-nav .container{display:flex!important;align-items:center!important;justify-content:space-between!important;max-width:1140px;margin:auto}
body:has(.milqia-auth-glass) .auth-nav .navbar-brand{display:block!important}
body:has(.milqia-auth-glass) .auth-nav .navbar-brand img{display:block;max-width:150px;max-height:60px}
body:has(.milqia-auth-glass) .auth-nav .btn-link{display:inline-block!important;color:white!important;white-space:nowrap}
body:has(.milqia-auth-glass) .auth-nav .auth-lang{display:block!important;min-width:160px;position:relative;z-index:1100}
body:has(.milqia-auth-glass) .auth-nav .select2-container{width:100%!important}
body:has(.milqia-auth-glass) .auth-nav .select2-selection--single{background:rgba(7,60,51,.75)!important;border:1px solid rgba(255,255,255,.55)!important;color:#fff!important;border-radius:9px!important;min-height:40px!important}
body:has(.milqia-auth-glass) .auth-nav .select2-selection__rendered{color:white!important;line-height:38px!important}
body:has(.milqia-auth-glass) .auth-nav select.lang-switcher{display:block;color:white;background:#174f45;min-height:40px;border:1px solid #8cbcb0;border-radius:9px}
body:has(.milqia-auth-glass) .hero-section{min-height:100vh!important;display:flex!important;align-items:center!important;position:relative!important;background:transparent!important}
body:has(.milqia-auth-glass) .hero-section>.container{position:relative!important;z-index:2!important;width:100%}
body:has(.milqia-auth-glass) .milqia-auth-glass{background:rgba(8,53,47,.65)!important;background-color:rgba(8,53,47,.65)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 24px 70px rgba(0,23,20,.42)!important;border-radius:22px!important;color:white!important}
body:has(.milqia-auth-glass) .milqia-auth-glass h1,body:has(.milqia-auth-glass) .milqia-auth-glass label{color:white!important}
body:has(.milqia-auth-glass) .milqia-auth-glass .form-control{background:rgba(255,255,255,.93)!important;color:#183b34!important;border:1px solid rgba(255,255,255,.55)!important}
body:has(.milqia-auth-glass) .milqia-auth-glass .form-control:focus{border-color:#6bc1ae!important;box-shadow:0 0 0 .22rem rgba(107,193,174,.25)!important}
body:has(.milqia-auth-glass) .milqia-auth-glass .btn-primary{background:#6bc1ae!important;border-color:#6bc1ae!important;color:#073e35!important;font-weight:700}
body:has(.milqia-auth-glass) .milqia-auth-glass .auth-links a{color:#e5fff7!important}
@media(max-width:575px){body:has(.milqia-auth-glass) .auth-nav{padding:.55rem 0!important}body:has(.milqia-auth-glass) .auth-nav .navbar-brand{display:none!important}body:has(.milqia-auth-glass) .auth-nav .container{padding:0 12px}body:has(.milqia-auth-glass) .auth-nav .auth-lang{min-width:125px}body:has(.milqia-auth-glass) .auth-nav .btn-link{font-size:.83rem;padding:.3rem!important}body:has(.milqia-auth-glass) .milqia-auth-glass{padding:1.5rem!important}}

/* Milqia 2026 login — tactile iOS-inspired credential selector. */
body:has(.milqia-auth-glass) .login-card{max-width:460px;margin:auto;padding:34px!important;border-radius:32px!important;background:linear-gradient(145deg,rgba(9,58,50,.72),rgba(6,43,38,.60))!important;box-shadow:0 32px 90px rgba(0,25,21,.48),inset 0 1px 0 rgba(255,255,255,.18)!important}
.mq-auth-field{min-height:56px;border-radius:16px!important;padding:0 17px!important;font-size:16px!important}.mq-login-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:4px 0 20px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);border-radius:14px}.mq-login-switch button{height:40px;border:0;border-radius:11px;background:transparent;color:rgba(255,255,255,.72);font-weight:650;transition:.18s ease}.mq-login-switch button.active{background:rgba(255,255,255,.94);color:#12483f;box-shadow:0 3px 12px rgba(0,0,0,.16)}.mq-login-panel{margin-bottom:20px}.mq-password-wrap{position:relative}.mq-password-wrap input{padding-right:52px!important}.mq-eye{position:absolute;right:8px;top:8px;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:#37655c;display:grid;place-items:center}.mq-pin-dots{display:flex;justify-content:center;gap:13px;margin:17px 0 23px}.mq-pin-dots span{width:14px;height:14px;border-radius:50%;border:1.7px solid rgba(255,255,255,.72);background:rgba(255,255,255,.08);transition:.12s}.mq-pin-dots span.filled{background:#fff;transform:scale(1.08);box-shadow:0 0 0 4px rgba(255,255,255,.08)}.mq-pin-pad{display:grid;grid-template-columns:repeat(3,64px);justify-content:center;gap:11px 18px;margin-bottom:4px}.mq-pin-pad button{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.13);color:#fff;font-size:24px;font-weight:500;backdrop-filter:blur(8px);transition:transform .08s,background .12s}.mq-pin-pad button:hover{background:rgba(107,193,174,.22);border-color:rgba(107,193,174,.65)}.mq-pin-pad button:focus,.mq-pin-pad button:focus-visible{outline:none!important;border-color:#6bc1ae!important;background:rgba(107,193,174,.24)!important;box-shadow:0 0 0 3px rgba(107,193,174,.24)!important}.mq-pin-pad button:active{outline:none!important;transform:scale(.91);background:#6bc1ae!important;border-color:#6bc1ae!important;color:#073e35!important;box-shadow:0 0 0 3px rgba(107,193,174,.20)!important}.mq-pin-pad .mq-pin-delete{background:transparent;border-color:transparent}.mq-login-submit{min-height:54px;border-radius:16px!important;margin-top:4px}.mq-shake{animation:mqShake .38s ease}@keyframes mqShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media(max-width:575px){body:has(.milqia-auth-glass) .login-card{padding:24px 20px!important;border-radius:26px!important}.mq-pin-pad{grid-template-columns:repeat(3,60px);gap:9px 17px}.mq-pin-pad button{width:60px;height:60px}}


/* Mobile: center the authentication card against the real viewport,
   independently of Bootstrap container/row/column gutters. */
@media (max-width: 575px) {
  body:has(.milqia-auth-glass) .hero-section > .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:has(.milqia-auth-glass) .hero-section > .container > .row {
    --bs-gutter-x: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
  }

  body:has(.milqia-auth-glass) .hero-section > .container > .row > [class*="col-"] {
    flex: 0 0 auto !important;
    width: calc(100% - 32px) !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:has(.milqia-auth-glass) .login-card {
    width: 100% !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* Mobile compact login: keep the complete PIN screen inside the real viewport. */
@media (max-width: 575px) {
  html, body { min-height: 100%; }
  body:has(.milqia-auth-glass) .auth-nav { padding: .38rem 0 !important; }
  body:has(.milqia-auth-glass) .auth-nav .container { padding: 0 14px !important; }
  body:has(.milqia-auth-glass) .auth-nav .auth-lang { min-width: 0 !important; width: 156px !important; }
  .auth-lang-trigger { min-height: 40px !important; padding: 7px 10px !important; }
  .auth-lang-trigger .lang-name { font-size: 12px !important; }
  body:has(.milqia-auth-glass) .auth-nav .auth-header-login { display: none !important; }
  body:has(.milqia-auth-glass) .auth-nav .btn-link { font-size: .86rem !important; padding: .35rem .15rem !important; }

  body:has(.milqia-auth-glass) .hero-section {
    min-height: 100dvh !important;
    height: auto !important;
    align-items: flex-start !important;
  }
  body:has(.milqia-auth-glass) .hero-section > .container {
    padding-top: 70px !important;
    padding-bottom: 12px !important;
  }
  body:has(.milqia-auth-glass) .hero-section > .container > .row > [class*="col-"] {
    width: calc(100% - 28px) !important;
  }
  body:has(.milqia-auth-glass) .login-card {
    padding: 17px 18px 16px !important;
    border-radius: 23px !important;
  }
  .auth-mobile-logo { margin-bottom: 8px !important; }
  .auth-mobile-logo img { max-width: 190px !important; max-height: 86px !important; }
  body:has(.milqia-auth-glass) .login-card h1 { font-size: 1.55rem !important; margin-bottom: 2px !important; line-height: 1.15 !important; }
  body:has(.milqia-auth-glass) .login-card h1 + p { font-size: .93rem !important; margin-bottom: 13px !important; }
  body:has(.milqia-auth-glass) .login-card .form-label { font-size: .91rem !important; margin-bottom: 5px !important; }
  body:has(.milqia-auth-glass) .login-card .mb-3 { margin-bottom: 10px !important; }
  .mq-auth-field { min-height: 48px !important; height: 48px !important; border-radius: 14px !important; padding: 0 14px !important; font-size: 15px !important; }
  .mq-login-panel { margin-bottom: 9px !important; }
  .mq-pin-dots { gap: 11px !important; margin: 8px 0 12px !important; }
  .mq-pin-dots span { width: 12px !important; height: 12px !important; }
  .mq-pin-pad { grid-template-columns: repeat(3, 54px) !important; gap: 7px 16px !important; margin-bottom: 1px !important; }
  .mq-pin-pad button { width: 54px !important; height: 54px !important; font-size: 21px !important; }
  .mq-login-submit { min-height: 47px !important; height: 47px !important; border-radius: 14px !important; margin-top: 2px !important; }
  .auth-links { margin-top: 8px !important; }
}

/* Extra compression for short phones / landscape browser chrome. */
@media (max-width: 575px) and (max-height: 760px) {
  body:has(.milqia-auth-glass) .hero-section > .container { padding-top: 62px !important; padding-bottom: 8px !important; }
  body:has(.milqia-auth-glass) .login-card { padding: 13px 17px 12px !important; }
  .auth-mobile-logo { margin-bottom: 4px !important; }
  .auth-mobile-logo img { max-width: 160px !important; max-height: 68px !important; }
  body:has(.milqia-auth-glass) .login-card h1 { font-size: 1.35rem !important; }
  body:has(.milqia-auth-glass) .login-card h1 + p { font-size: .84rem !important; margin-bottom: 8px !important; }
  .mq-auth-field { min-height: 43px !important; height: 43px !important; }
  .mq-pin-dots { margin: 5px 0 8px !important; }
  .mq-pin-pad { grid-template-columns: repeat(3, 49px) !important; gap: 5px 15px !important; }
  .mq-pin-pad button { width: 49px !important; height: 49px !important; font-size: 19px !important; }
  .mq-login-panel { margin-bottom: 6px !important; }
  .mq-login-submit { min-height: 43px !important; height: 43px !important; }
  .auth-links { margin-top: 5px !important; }
}

/* Mobile login: the page context already makes the action clear; hide the duplicated title. */
@media (max-width: 575px) {
  body:has(.milqia-auth-glass) .login-card > h1 {
    display: none !important;
  }
}

/* v58 — mobile viewport-centred authentication and Safari-responsive keypad. */
@media (max-width: 575px) {
  body:has(.milqia-auth-glass) .hero-section {
    display: flex !important;
    align-items: stretch !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: auto !important;
  }
  body:has(.milqia-auth-glass) .hero-section > .container {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: max(76px, calc(env(safe-area-inset-top) + 62px)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    min-height: 100svh !important;
  }
  body:has(.milqia-auth-glass) .hero-section > .container > .row {
    flex: 0 0 auto !important;
    align-items: center !important;
  }
  body:has(.milqia-auth-glass) .login-card .form-label {
    display: block !important;
    margin-bottom: 7px !important;
    line-height: 1.3 !important;
  }
  body:has(.milqia-auth-glass) #mq-login-form > .mb-3,
  body:has(.milqia-auth-glass) #mq-login-form > .mq-login-panel {
    margin-bottom: 15px !important;
  }
  body:has(.milqia-auth-glass) .mq-login-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    padding: 0 16px !important;
    margin: 0 !important;
  }
  body:has(.milqia-auth-glass) .mq-pin-pad button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color .08s ease, transform .08s ease !important;
  }
  body:has(.milqia-auth-glass) .mq-pin-dots span {
    transition: background-color .08s ease !important;
  }
}
@media (max-width: 575px) and (max-height: 760px) {
  body:has(.milqia-auth-glass) .hero-section > .container {
    padding-top: max(62px, calc(env(safe-area-inset-top) + 54px)) !important;
    padding-bottom: 12px !important;
  }
  body:has(.milqia-auth-glass) #mq-login-form > .mb-3,
  body:has(.milqia-auth-glass) #mq-login-form > .mq-login-panel {
    margin-bottom: 10px !important;
  }
}

/* v59 — equal visual gap between the password field and submit button.
   The email-to-password input gap includes the second field label. */
@media (max-width: 575px) {
  body:has(.milqia-auth-glass) #mq-login-form > #password-panel:not([hidden]) {
    margin-bottom: 36px !important;
  }
  body:has(.milqia-auth-glass) #mq-login-form > #pin-panel:not([hidden]) {
    margin-bottom: 15px !important;
  }
}
@media (max-width: 575px) and (max-height: 760px) {
  body:has(.milqia-auth-glass) #mq-login-form > #password-panel:not([hidden]) {
    margin-bottom: 30px !important;
  }
}

/* v60 — PIN móvil: teclado más cómodo y respiración vertical equilibrada.
   Solo afecta al panel PIN en móviles; el formulario con contraseña no cambia. */
@media (max-width: 575px) {
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots {
    margin-top: 12px !important;
    margin-bottom: 23px !important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad {
    grid-template-columns: repeat(3, 64px) !important;
    gap: 11px 20px !important;
    margin-bottom: 0 !important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button {
    width: 64px !important;
    height: 64px !important;
    font-size: 24px !important;
  }
  body:has(.milqia-auth-glass) #mq-login-form > #pin-panel:not([hidden]) {
    margin-bottom: 27px !important;
  }
}
/* En móviles pequeños se mantiene la comodidad táctil sin forzar desbordamientos. */
@media (max-width: 575px) and (max-height: 760px) {
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots {
    margin-top: 7px !important;
    margin-bottom: 13px !important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad {
    grid-template-columns: repeat(3, 56px) !important;
    gap: 7px 16px !important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button {
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
  }
  body:has(.milqia-auth-glass) #mq-login-form > #pin-panel:not([hidden]) {
    margin-bottom: 18px !important;
  }
}

/* v61 — larger mobile PIN keys and two-way credential method switching. */
.mq-password-to-pin{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 0;padding:7px 12px;border:1px solid rgba(255,255,255,.32);border-radius:12px;background:rgba(255,255,255,.10);color:#fff;font:inherit;cursor:pointer}
.mq-password-to-pin:hover,.mq-password-to-pin:focus-visible{background:rgba(107,193,174,.25);outline:2px solid #6bc1ae;outline-offset:2px}
.mq-pin-pad .mq-method-key{display:grid;place-items:center;background:rgba(107,193,174,.16);border-color:rgba(107,193,174,.42);color:#d4fff4}
.mq-pin-pad .mq-method-key:focus-visible{outline:2px solid #6bc1ae;outline-offset:2px}
@media(max-width:575px){
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots{margin-top:8px!important;margin-bottom:14px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad{grid-template-columns:repeat(3,76px)!important;gap:12px 22px!important;margin-bottom:0!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button{width:76px!important;height:76px!important;font-size:28px!important}
 body:has(.milqia-auth-glass) #mq-login-form > #pin-panel:not([hidden]){margin-bottom:19px!important}
 .mq-password-to-pin{margin-top:12px}
}
@media(max-width:575px) and (max-height:760px){
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad{grid-template-columns:repeat(3,62px)!important;gap:7px 16px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button{width:62px!important;height:62px!important;font-size:24px!important}
 body:has(.milqia-auth-glass) #mq-login-form > #pin-panel:not([hidden]){margin-bottom:12px!important}
}
@media(max-width:350px){
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad{grid-template-columns:repeat(3,68px)!important;gap:9px 15px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button{width:68px!important;height:68px!important}
}

/* v62: method switch only in password panel; key is visually identical to delete. */
.mq-pin-pad .mq-method-key,
.mq-pin-pad .mq-method-key:hover,
.mq-pin-pad .mq-method-key:focus,
.mq-pin-pad .mq-method-key:focus-visible {
 background:transparent!important;border-color:transparent!important;
 box-shadow:none!important;color:#fff!important;outline:none!important;
}
.mq-pin-pad .mq-method-key:active {
 background:transparent!important;border-color:transparent!important;box-shadow:none!important;
 color:#fff!important;
}

/* v63: password action icons inside the input; consistent spacing and PIN viewport. */
.mq-password-wrap input{padding-right:100px!important}
.mq-password-wrap .mq-password-to-pin{position:absolute!important;right:49px;top:50%;transform:translateY(-50%);display:grid!important;place-items:center;width:40px;height:40px;padding:0!important;margin:0!important;border:0!important;border-radius:12px;background:transparent!important;color:#37655c!important;box-shadow:none!important;white-space:nowrap}
.mq-password-wrap .mq-password-to-pin span{display:none!important}
.mq-password-wrap .mq-password-to-pin svg{width:21px;height:21px}
.mq-password-wrap .mq-password-to-pin:hover,.mq-password-wrap .mq-password-to-pin:focus-visible{background:rgba(55,101,92,.12)!important;outline:none!important}
@media(max-width:575px){
 body:has(.milqia-auth-glass) #mq-login-form > #password-panel:not([hidden]){margin-bottom:42px!important}
 body:has(.milqia-auth-glass) .hero-section:has(#pin-panel:not([hidden])) > .container{justify-content:flex-start!important;padding-top:max(91px,calc(env(safe-area-inset-top) + 72px))!important;padding-bottom:max(35px,env(safe-area-inset-bottom))!important}
 body:has(.milqia-auth-glass) .hero-section:has(#pin-panel:not([hidden])){overflow:visible!important}
}
@media(max-width:575px) and (max-height:760px){
 body:has(.milqia-auth-glass) #mq-login-form > #password-panel:not([hidden]){margin-bottom:36px!important}
 body:has(.milqia-auth-glass) .hero-section:has(#pin-panel:not([hidden])) > .container{padding-top:max(75px,calc(env(safe-area-inset-top) + 60px))!important;padding-bottom:28px!important}
}

/* v64 — compact mobile PIN and ordered, vertically centered password actions. */
.mq-password-wrap .mq-eye,.mq-password-wrap .mq-password-to-pin{top:50%!important;transform:translateY(-50%)!important;display:grid!important;place-items:center!important;line-height:1!important}
.mq-password-wrap .mq-eye{right:49px!important}
.mq-password-wrap .mq-password-to-pin{right:8px!important}
.mq-password-wrap .mq-eye svg,.mq-password-wrap .mq-password-to-pin svg{display:block;flex:none}
@media(max-width:575px){
 body:has(.milqia-auth-glass) .hero-section:has(#pin-panel:not([hidden])) > .container{justify-content:flex-start!important;padding-top:65px!important;padding-bottom:16px!important;min-height:0!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad{grid-template-columns:repeat(3,66px)!important;gap:8px 19px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button{width:66px!important;height:66px!important;font-size:25px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots{margin-top:6px!important;margin-bottom:10px!important}
 body:has(.milqia-auth-glass) #mq-login-form > #pin-panel:not([hidden]){margin-bottom:12px!important}
}
@media(max-width:575px) and (max-height:760px){
 body:has(.milqia-auth-glass) .hero-section:has(#pin-panel:not([hidden])) > .container{padding-top:58px!important;padding-bottom:12px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad{grid-template-columns:repeat(3,58px)!important;gap:6px 15px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button{width:58px!important;height:58px!important;font-size:23px!important}
}

/* iOS-style PIN rejection: shake the four dots, then clear them. */
.mq-pin-reject .mq-pin-dots{animation:mqPinReject .43s cubic-bezier(.36,.07,.19,.97) both}
@keyframes mqPinReject{0%,100%{transform:translateX(0)}15%,45%,75%{transform:translateX(-10px)}30%,60%,90%{transform:translateX(10px)}}
@media(prefers-reduced-motion:reduce){.mq-pin-reject .mq-pin-dots{animation:none}}

/* v66 — mobile PIN: slightly larger number keys and more space below PIN dots. */
@media (max-width:575px) {
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad {
    grid-template-columns:repeat(3,72px)!important;
    gap:10px 19px!important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button {
    width:72px!important;
    height:72px!important;
    font-size:27px!important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots {
    margin-top:8px!important;
    margin-bottom:20px!important;
  }
}
@media (max-width:575px) and (max-height:760px) {
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad {
    grid-template-columns:repeat(3,62px)!important;
    gap:8px 15px!important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button {
    width:62px!important;
    height:62px!important;
    font-size:24px!important;
  }
  body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots {margin-bottom:14px!important;}
}


/* MilQIA — Nuevo teclado PIN responsive para móvil */
@media (max-width: 575px) {
  
  body:has(.milqia-auth-glass)
  #pin-panel:not([hidden]) .mq-pin-pad {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(18px, 5vw, 30px) !important;
    row-gap: clamp(15px, 2.5vh, 23px) !important;
    justify-items: center !important;
    align-items: center !important;
  }
  
  body:has(.milqia-auth-glass)
  #pin-panel:not([hidden]) .mq-pin-pad button {
    width: min(100%, 88px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    font-size: clamp(25px, 7vw, 32px) !important;
    touch-action: manipulation;
  }
  
  body:has(.milqia-auth-glass)
  #pin-panel:not([hidden]) .mq-pin-dots {
    margin-top: 14px !important;
    margin-bottom: 26px !important;
    gap: 15px !important;
  }
  
  body:has(.milqia-auth-glass)
  #mq-login-form > #pin-panel:not([hidden]) {
    margin-bottom: 24px !important;
  }
}

/* Ajuste para móviles con poca altura */
@media (max-width: 575px) and (max-height: 760px) {
  
  body:has(.milqia-auth-glass)
  #pin-panel:not([hidden]) .mq-pin-pad {
    row-gap: 12px !important;
    column-gap: 18px !important;
  }
  
  body:has(.milqia-auth-glass)
  #pin-panel:not([hidden]) .mq-pin-pad button {
    width: min(100%, 72px) !important;
  }
  
  body:has(.milqia-auth-glass)
  #pin-panel:not([hidden]) .mq-pin-dots {
    margin-bottom: 17px !important;
  }
}


/* MilQia 2026-10-22: compact PIN layout on mobile; overrides previous keypad rules. */
@media (max-width:575px){
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad{
  display:grid!important;grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  width:min(100%, 238px)!important;max-width:238px!important;
  column-gap:12px!important;row-gap:9px!important;margin:0 auto!important;
 }
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button{
  width:62px!important;height:62px!important;max-width:62px!important;min-height:0!important;
  aspect-ratio:1!important;font-size:24px!important;border-radius:50%!important;
 }
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots{
  margin-top:4px!important;margin-bottom:11px!important;gap:12px!important;
 }
 body:has(.milqia-auth-glass) #mq-login-form > #pin-panel:not([hidden]){margin-bottom:11px!important}
 body:has(.milqia-auth-glass) .hero-section:has(#pin-panel:not([hidden])) > .container{
  padding-top:max(65px,env(safe-area-inset-top))!important;padding-bottom:12px!important;
 }
 body:has(.milqia-auth-glass) .auth-mobile-logo{margin-bottom:10px!important}
}
@media(max-width:575px) and (max-height:720px){
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad{width:214px!important;max-width:214px!important;column-gap:8px!important;row-gap:6px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-pad button{width:57px!important;height:57px!important;max-width:57px!important;font-size:22px!important}
 body:has(.milqia-auth-glass) #pin-panel:not([hidden]) .mq-pin-dots{margin-bottom:7px!important}
}