/* assets/css/login.css
   SODI-VOX Login — Responsive real (overlay full en móvil) + sin scroll
   Colores: #005579 -> #001f4d + Amarillo #FBA600
*/

/* =========================
   VARIABLES
========================= */
:root{
  --sodi-blue-1: #005579;
  --sodi-blue-2: #001f4d;
  --sodi-yellow: #FBA600;

  --muted: rgba(255,255,255,.78);
  --surface: rgba(255,255,255,.10);
  --surface-2: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.18);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  --shadow-lg: 0 28px 70px rgba(0,0,0,.35);
  --shadow-md: 0 14px 35px rgba(0,0,0,.22);
}

/* =========================
   RESET + VIEWPORT FIX (móvil)
========================= */
*{ box-sizing: border-box; }

html, body{
  margin: 0;
  height: 100%;
}

/* Imagen de fondo en HTML */
html{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  background: url("../../images/bg_general.png") no-repeat center center;
  background-size: cover;
  background-attachment: scroll; /* mejor en móvil */
}

/* Overlay (tu “capa blanca/velo”) SIEMPRE full screen */
html::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(135deg, rgba(0,31,77,.92), rgba(0,85,121,.78));
}

/* Bloquear scroll (no quieres scroll en teléfono) */
html, body{
  overflow: hidden;
  overscroll-behavior: none;
}

/* Body transparente */
body{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  background: transparent;
}

/* =========================
   WRAPPER
========================= */
.login-wrapper{
  height: 100vh;
  height: 100svh;
  height: 100dvh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow: hidden;

  /* centrado real en móvil */
  padding:
    max(8px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));

  position: relative;
  z-index: 1;
}


/* =========================
   CARD
========================= */
.login-card{
  width: 100%;
  max-width: 460px;

  padding: clamp(18px, 4vw, 30px) clamp(16px, 4vw, 28px) clamp(16px, 3vw, 24px);
  border-radius: var(--r-lg);

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);

  text-align:center;

  /* para evitar cortes si hay poca altura */
  max-height: calc(100dvh - 32px);
  overflow: hidden;

  animation: fadeUp .6s ease forwards;
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* =========================
   LOGO + TITULOS
========================= */
.login-logo{
  width: clamp(110px, 22vw, 160px);
  max-width: 75%;
  height: auto;
  display:block;
  margin: 0 auto clamp(6px, 1.2vw, 10px);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.30));
}

.login-title{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 6.5vw, 44px);
  letter-spacing: clamp(1.5px, .6vw, 3px);
  margin: 4px 0 8px;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 10px 30px rgba(0,0,0,.30);
}

.login-sub{
  margin: 0 0 clamp(14px, 2.6vw, 18px);
  color: var(--muted);
  font-weight: 800;
  font-size: clamp(12px, 2.6vw, 13px);
  letter-spacing: .6px;
}

/* =========================
   FORM + INPUTS
========================= */
form{ width: 100%; }

.login-input{
  width: 100%;
  height: clamp(44px, 6vw, 46px);
  font-size: clamp(14px, 3.2vw, 15px);

  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.22);

  background: rgba(255,255,255,.10);
  color: #fff;

  outline: none;
  padding: 0 14px;
  margin: 0 0 12px 0;

  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.login-input::placeholder{
  color: rgba(255,255,255,.68);
  font-weight: 700;
}

.login-input:focus{
  border-color: rgba(251,166,0,.70);
  box-shadow: 0 0 0 4px rgba(251,166,0,.20);
  background: rgba(255,255,255,.14);
}

/* =========================
   PASSWORD WRAPPER + TOGGLE
========================= */
.password-wrapper{
  position: relative;
  width: 100%;
}

/* espacio para el icono */
.password-wrapper .login-input{
  padding-right: 52px;
}

.pass-toggle{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 10px;
}

.pass-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(251,166,0,.22);
}

.pass-toggle-img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .78;
  transition: opacity .15s ease, transform .15s ease, filter .15s ease;
}

@media (hover:hover){
  .pass-toggle:hover .pass-toggle-img{
    opacity: 1;
    transform: scale(1.06);
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
  }
}

/* =========================
   CAPS HINT
========================= */
.caps-hint{
  margin: -4px 0 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255, 210, 120, .95);
}

/* =========================
   BOTON
========================= */
.login-btn{
  width: 100%;
  height: clamp(46px, 6.4vw, 48px);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;

  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: clamp(14px, 3.3vw, 15px);

  background: linear-gradient(135deg, var(--sodi-yellow), #ffd36a);
  color: #1c1405;

  box-shadow: 0 16px 34px rgba(251,166,0,.22);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}

@media (hover:hover){
  .login-btn:hover{
    filter: brightness(1.02);
    box-shadow: 0 20px 45px rgba(251,166,0,.26);
  }
}

.login-btn:active{ transform: scale(.99); }

.login-btn:disabled{
  cursor: not-allowed;
  opacity: .88;
}

/* =========================
   ALERTA
========================= */
.login-alert{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 70, 70, .35);
  background: rgba(255, 70, 70, .16);
  color: #ffe9e9;
  font-weight: 900;
  font-size: 13px;
  text-align: center;
}

/* =========================
   MEGA SMALL DEVICES
========================= */
@media (max-width: 360px){
  .login-card{ border-radius: 16px; }
  .login-input{ margin-bottom: 10px; }
}

@media (max-width: 480px){
  .login-card{
    margin-top: -6px; /* ajuste fino visual */
  }
}

/* Cuando el teclado esté abierto (lo pone JS) */
html.kbd-open .login-wrapper{
  align-items: flex-start !important;
  padding-top: 18px !important;
  padding-bottom: 45vh !important; /* espacio para teclado */
}

html.kbd-open, html.kbd-open body{
  overflow-y: auto !important;     /* permitir scroll real */
}

/* Evitar recortes */
html.kbd-open .login-card{
  max-height: none !important;
  overflow: visible !important;
}

/* ===== FIX REAL: liberar el layout cuando hay teclado ===== */

/* 1) No cortes el contenido */
html.kbd-open .login-wrapper{
  height: auto !important;       /* <- quita 100vh/100dvh */
  min-height: 100vh !important;
  overflow: visible !important;  /* <- quita overflow:hidden */
}

/* 2) No recortes la tarjeta */
html.kbd-open .login-card{
  max-height: none !important;   /* <- quita calc(100dvh - 32px) */
  overflow: visible !important;  /* <- quita overflow:hidden */
}