:root{
  --background:#0b0d12;
  --foreground:#ffffff;
  --card:#11131a;
  --border:rgba(255,255,255,.10);
  --input:#0e1016;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
}

/* Reset */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  height:100%;
  background:var(--background);
  color:var(--foreground);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Layout */
.auth-page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}

/* Video */
.video-bg-wrapper{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.bg-video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.55);
}
.video-overlay{
  position:absolute;
  inset:0;
  background:rgba(11,13,18,.70);
  backdrop-filter: blur(2px);
}

/* Content centering */
.auth-content{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}

/* Shell */
.login-shell{
  max-width:520px !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* Brand */
.brand{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.brand-logo{
  width:220px;
  height:auto;
  display:block;
}

/* Card */
.card{
  background:transparent;
  border:0px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Header */
.card-header{
  padding:22px 22px 10px 22px;
  text-align:center;
}
.card-title{
  margin:0;
  font-size:1.4rem;
  letter-spacing:.2px;
}
.card-subtitle{
  margin:6px 0 0 0;
  color:var(--muted2);
  font-size:.95rem;
}

/* Body */
.card-body{
  padding:16px 22px 22px 22px;
}

/* Remove any legacy white boxes */
#formlogin,
#lost-pass #formlogin,
#lost-pass .box-content,
.box-content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Inputs */
.inputForm{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background:transparent !important;
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:12px;
}
.inputForm .icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.70);
}
.inputForm input{
  width:100%;
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  color:var(--foreground) !important;
  font-size:1.45rem;
  padding:6px 0;
}

/* Error */
input.error{
  border-color: rgba(255,0,0,.35) !important;
}

/* Buttons */
.btn-primary{
  width:100%;
  border:0;
  cursor:pointer;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  color:#000;
  font-weight:700;
  letter-spacing:.2px;
}
.btn-primary:hover{ opacity:.92; }

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  width:100%;
  border:1px solid var(--border);
  cursor:pointer;
  padding:12px 14px;
  border-radius:12px;
  background:transparent;
  color:#fff;
  font-weight:600;
}
.btn-secondary:hover{ background:rgba(255,255,255,.06); }

/* Small texts */
.ssl-note{
  margin:12px 0 0 0;
  text-align:center;
  color:var(--muted2);
}
.ssl-note a{ color:#fff; opacity:.85; text-decoration:none; }
.ssl-note a:hover{ opacity:1; }

.links{
  margin-top:14px;
  text-align:center;
}
.link{
  color:#fff;
  opacity:.78;
  text-decoration:none;
  font-size:.9rem;
}
.link:hover{ opacity:1; }

/* Footer inside card */
.card-footer{
  padding:14px 22px;
  border-top:0px solid var(--border);
  color:var(--muted2);
  font-size:.85rem;
  text-align:center;
}
.footer-row{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.footer-row a{ color:#fff; opacity:.85; text-decoration:none; }
.footer-row a:hover{ opacity:1; }
.footer-row.small{ margin-top:6px; opacity:.8; }

/* TwoFA */
.twofa-title{
  margin:0 0 8px 0;
  text-align:center;
  font-size:1.2rem;
}
.twofa-sub{
  margin:0 0 12px 0;
  text-align:center;
  color:var(--muted2);
}
.twofa-label{
  margin:0 0 8px 0;
  color:var(--muted);
}
.twofa-input{
  width:100%;
  border:1px solid var(--border);
  background:var(--input);
  color:#fff;
  border-radius:12px;
  padding:12px 12px;
  text-align:center;
  font-size:1.4rem;
  letter-spacing:6px;
  outline:none;
}
.twofa-help{
  margin:12px 0 0 0;
  text-align:center;
}
.twofa-help a{ color:#fff; opacity:.85; text-decoration:none; }
.twofa-help a:hover{ opacity:1; }

/* Messages */
.center{ text-align:center; }
.msg-title{ margin:10px 0 6px; }
.msg-sub{ margin:0; color:var(--muted2); }
.ok{ margin-bottom:6px; }

/* Bottom floating links */
.float-links{
  position:absolute;
  bottom:18px;
  width:100%;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:18px;
  font-size:.85rem;
  padding:0 12px;
}
.float-links a{
  color:#fff;
  opacity:.7;
  text-decoration:none;
}
.float-links a:hover{ opacity:1; }

/* Responsive */
@media (max-width:520px){
  .card-header{ padding:20px 18px 10px; }
  .card-body{ padding:14px 18px 18px; }
  .card-footer{ padding:12px 18px; }
  .brand-logo{ width:200px; }
}

/* === iPhone / iOS Safari FIX: evita “saltos” y corrimiento al enfocar inputs === */
@supports (-webkit-touch-callout: none) {

  /* 1) Evita el auto-zoom (causa reflow raro si font < 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* 2) Evita que el viewport horizontal “baile” */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  /* 3) En iOS, 100vh cambia con la barra del navegador; usa svh/dvh */
  .auth-page,
  .auth-content {
    min-height: 100svh;
    min-height: 100dvh;
  }

  /* 4) Evita que Safari reajuste el ancho de inputs dentro de flex */
  .field,
  .field input {
    min-width: 0;
    width: 100%;
  }

  /* 5) Evita cambios de estilo automáticos del input */
  input, textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
  }

  /* 6) Evita “scroll” raro al enfocar (si el contenedor está centrado) */
  body {
    overscroll-behavior: none;
  }
}