/* =========================================================
   BIEE — mobile.css v2.3  (aplica hasta 768px)
   Cobertura: 360–768px, landscape, safe-area, iOS anti-zoom,
   y accesibilidad (motion/contrast). No requiere cambiar HTML.
   ========================================================= */

/* ===== Base y layout general ===== */
html, body { height:100%; margin:0; padding:0; overflow-x:hidden; background:#f8fafc; }
:root{ --panel-w: min(400px, 92vw); }

.landing-container{
  display:flex; flex-direction:column; min-height:100vh;
}

/* ===== Sección izquierda (texto animado) ===== */
.left-side{
  flex:none; min-height:28vh; padding:clamp(18px,3.5vh,32px) 20px;
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(135deg,#0B2C3F 0%,#238D6A 100%); color:#fff; text-align:center;
  border-bottom:4px solid rgba(255,255,255,.12);
}
.rotating-content{
  font-size:clamp(1.05rem, 2.5vw, 1.3rem);
  line-height:1.4; max-width:95%; min-height:72px;
}
.cursor{ width:8px; height:8px; }

/* ===== Sección derecha (login) ===== */
.right-side{
  flex:1; background:#fff; display:flex; justify-content:center; align-items:flex-start;
  padding: clamp(18px,4vh,30px) 16px 40px;
}

/* ===== Panel de login ===== */
.login-panel{
  width:100%; max-width:var(--panel-w); background:#fff; border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  padding: clamp(22px,3.2vh,32px) 18px 24px;
  margin-top:-18px; /* leve solape con la izquierda */
}
.login-title{ font-size:clamp(1.4rem, 4vw, 1.7rem); color:#134353; margin-bottom:16px; }

/* ===== Formulario ===== */
.login-form{ display:flex; flex-direction:column; gap:14px; }
.login-input{
  font-size:16px; /* evita zoom iOS */
  padding:12px 44px 12px 14px; border-radius:10px; border:1.5px solid #e1e7ef; background:#f9fbfd;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.login-input:focus{ border-color:#1a6c89; background:#fff; box-shadow:0 0 0 2px rgba(26,108,137,.12); }
.input-group{ position:relative; }
.show-pw{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:#777; font-size:1.1rem; padding:4px;
}

.login-btn-main{
  background:#238D6A; color:#fff; border:0; border-radius:10px; padding:13px 0;
  font-size:1.05rem; font-weight:700; cursor:pointer; transition:filter .15s, transform .05s;
}
.login-btn-main:hover{ filter:brightness(.95); }
.login-btn-main:active{ transform:scale(.99); }

.login-error{ color:#c63232; font-size:.94rem; min-height:20px; }
.forgot-link{ display:block; margin-top:12px; font-size:.95rem; text-align:center; color:#1a6c89; text-decoration:underline; }
.login-info{ margin-top:16px; font-size:.9rem; color:#555; text-align:center; line-height:1.35; }

/* ===== Modales base (cambio y recuperación) ===== */
#modalPassword, #modalRecover{
  display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.45);
  justify-content:center; align-items:center; padding:16px;
}
#modalPassword .modal-content, #modalRecover .modal-content{
  width:92vw; max-width:420px; border-radius:12px; background:#fff;
  padding:22px 18px; box-shadow:0 6px 24px rgba(0,0,0,.15); animation:fadeIn .25s ease;
}
#modalPassword h3, #modalRecover h3{ color:#1a6c89; margin:0 0 12px; font-size:clamp(1.2rem, 3.5vw, 1.3rem); }
#modalPassword input, #modalRecover input{
  width:100%; font-size:16px; border:1px solid #e1e7ef; border-radius:10px; padding:11px 12px;
}
#modalPassword input:focus, #modalRecover input:focus{ border-color:#1a6c89; box-shadow:0 0 0 2px rgba(26,108,137,.12); }
#modalPassword .msg, #recoverMsg{ font-size:.9rem; text-align:center; min-height:18px; margin-top:10px; }

/* --- botones en columna para mejor tap en móvil --- */
#modalPassword button, #modalRecover button{
  width:100%; margin-top:10px; padding:12px 0; border-radius:10px; font-weight:700; border:0; cursor:pointer;
}
#modalPassword button[type="submit"], #modalRecover button[type="submit"]{ background:#1a6c89; color:#fff; }
#modalPassword button[type="submit"]:hover, #modalRecover button[type="submit"]:hover{ filter:brightness(.95); }
#btnCancelar, #btnRecoverCancel{ background:#a9b3ba; color:#fff; }

/* ===== Política de contraseña (checks) ===== */
#modalPassword .policy{
  background:#f8fbff; border:1px solid #e1e7ef; border-radius:12px; padding:10px 12px; margin-top:12px;
}
#modalPassword .policy h4{ margin:0 0 6px; color:#134353; font-size:1rem; }
#policyList{ list-style:none; margin:6px 0 0; padding:0; }
#policyList li{ display:flex; align-items:center; gap:8px; font-size:.95rem; margin:6px 0; }
#policyList li.ok{ color:#257d49; }
#policyList li.fail{ color:#c63232; }
#policyList li.ok::before{ content:"✓"; font-weight:700; }
#policyList li.fail::before{ content:"✕"; font-weight:700; }

/* ===== Animación ===== */
@keyframes fadeIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }

/* ===== Safe-area (notch) ===== */
@supports (padding: max(0px)){
  body{ padding-bottom:max(env(safe-area-inset-bottom), 12px); }
}

/* ===== Micro-ajustes por ancho ===== */
@media (max-width: 600px){
  :root{ --panel-w: min(420px, 92vw); }
  .left-side{ min-height:24vh; padding:26px 16px 16px; }
  .right-side{ padding:22px 14px 32px; }
  .login-panel{ margin-top:-16px; padding:26px 16px 22px; }
}

@media (max-width: 480px){
  :root{ --panel-w: min(420px, 92vw); }
  .rotating-content{ font-size:1.1rem; min-height:68px; }
  .login-title{ font-size:1.5rem; }
}

/* Ultra-compactos (p. ej. 360px de ancho) */
@media (max-width: 360px){
  .left-side{ display:none !important; }
  .right-side{ min-height:100vh; justify-content:center; align-items:center; padding:16px 12px 24px; }
  .login-panel{ margin-top:0; max-width:94vw; }
}

/* ===== Alturas bajas / landscape con teclado ===== */
@media (max-height: 540px){
  .left-side{ min-height:20vh; padding:18px 14px; }
}
@media (max-height: 420px) and (orientation: landscape){
  .left-side{ display:none !important; }
  .right-side{ min-height:100vh; align-items:center; padding:14px 12px; }
  .login-panel{ box-shadow:none; margin-top:0; padding:18px 14px; }
  .rotating-content{ display:none; }
}

/* ===== Accesibilidad ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
  .cursor{ display:none !important; }
}
@media (prefers-contrast: more){
  .login-input{ border-color:#9fb5c3; }
  .login-btn-main{ filter:contrast(1.1); }
}


/* En móviles lo centramos para que no se vea “corrido” */
.login-panel .forgot-link{
  justify-content:center !important;
  margin:12px 0 0 !important;
  padding:0 !important;
  text-align:center !important;
}