/* ============================================
   TRACCAR - ESTILOS BASE (NO MODIFICAR)
   ============================================ */
html, body { height: 100%; }
body { margin: 0; padding: 0; }
.root { display: flex; flex-direction: column; height: 100%; }

/* ============================================
   SAFETRACK - LOGIN PAGE CUSTOM STYLES
   ============================================ */

/* ===========================================
   1. FONDO DE PANTALLA
   =========================================== */
body.safetrack-login {
  background:
    linear-gradient(
      135deg,
      rgba(10, 15, 30, 0.82) 0%,
      rgba(15, 25, 55, 0.72) 40%,
      rgba(40, 20, 60, 0.75) 100%
    ),
    url('/custom/bg-login.png') center center / cover no-repeat fixed !important;
  background-color: #0a0f1e !important;
}

/* ===========================================
   2. OCULTAR SIDEBAR LILA DEL LOGIN
   =========================================== */
body.safetrack-login main > [class*="-sidebar"] {
  display: none !important;
}

/* ===========================================
   3. CONTENEDOR <main> DEL LOGIN
   =========================================== */
body.safetrack-login main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  min-height: 100vh !important;
  background: transparent !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* ===========================================
   4. CARD GLASSMORPHISM (CAJA BLANCA)
   =========================================== */
body.safetrack-login main > div:not([class*="-sidebar"]) {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  border-radius: 24px !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;

  /* caja un poco más compacta */
  max-width: 420px !important;
  width: 100% !important;
  padding: 18px 30px 26px !important;
  margin: 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  position: relative !important;
  flex: none !important;
  animation: safetrackFadeIn 0.5s ease-out !important;
  box-sizing: border-box !important;
}

/* ===========================================
   5. QR + IDIOMA (base)
   =========================================== */
body.safetrack-login [class*="-options"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 5 !important;
}

body.safetrack-login [class*="-options"] > button {
  padding: 6px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.70) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body.safetrack-login [class*="-options"] > button:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.safetrack-login [class*="-options"] .MuiFormControl-root {
  margin: 0 !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

body.safetrack-login [class*="-options"] .MuiOutlinedInput-root {
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body.safetrack-login [class*="-options"] .MuiSelect-select {
  padding: 6px 30px 6px 10px !important;
  font-size: 0.85rem !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

body.safetrack-login [class*="-options"] .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body.safetrack-login [class*="-options"] .MuiSelect-icon {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ===========================================
   6. LOGO CONTAINER
   =========================================== */
body.safetrack-login [class*="-container"] svg { display: none !important; }

body.safetrack-login [class*="-container"] {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 120px !important;
  margin: 4px 0 8px 0 !important;
  position: relative !important;
  padding-bottom: 14px !important;
  box-sizing: border-box !important;
}

body.safetrack-login [class*="-container"]::before {
  content: '' !important;
  display: block !important;
  width: 320px !important;
  height: 110px !important;
  background: url('/custom/logo-safetrack.png') center center / contain no-repeat !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)) !important;
}

body.safetrack-login [class*="-container"]::after {
  content: '' !important;
  display: block !important;
  width: 75% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 12.5% !important;
}

/* ===========================================
   8. FORM - ancho consistente
   =========================================== */
body.safetrack-login [class*="-form"] {
  width: 100% !important;
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
}

/* ===========================================
   9. INPUTS (Email, Contraseña)
   =========================================== */
body.safetrack-login [class*="-form"] .MuiFormControl-root,
body.safetrack-login [class*="-form"] .MuiTextField-root {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 9px 0 !important;
  align-self: stretch !important;
}

body.safetrack-login [class*="-form"] .MuiOutlinedInput-root {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;

  /* altura estable */
  min-height: 44px !important;
}

body.safetrack-login [class*="-form"] .MuiInputBase-input {
  color: #ffffff !important;

  /* padding estable (evita descuadre al escribir) */
  padding: 12px 14px !important;
}

body.safetrack-login [class*="-form"] .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

body.safetrack-login [class*="-form"] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

body.safetrack-login [class*="-form"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: rgba(100, 180, 255, 0.7) !important;
  box-shadow: 0 0 15px rgba(100, 180, 255, 0.15) !important;
}

body.safetrack-login [class*="-form"] .MuiInputLabel-root {
  color: rgba(255, 255, 255, 0.55) !important;

  /* estabiliza label */
  transform: translate(14px, 12px) scale(1) !important;
}

body.safetrack-login [class*="-form"] .MuiInputLabel-root.MuiInputLabel-shrink {
  transform: translate(14px, -8px) scale(0.85) !important;
}

body.safetrack-login [class*="-form"] .MuiIconButton-root {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Autofill fix */
body.safetrack-login [class*="-form"] .MuiInputBase-input:-webkit-autofill,
body.safetrack-login [class*="-form"] .MuiInputBase-input:-webkit-autofill:hover,
body.safetrack-login [class*="-form"] .MuiInputBase-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(30, 40, 70, 0.95) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ===========================================
   10. BOTON "INICIAR SESION"
   =========================================== */
body.safetrack-login .MuiButton-contained,
body.safetrack-login .MuiButton-containedPrimary {
  background: linear-gradient(135deg, #1a3a6b 0%, #2563eb 50%, #1e40af 100%) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  width: 100% !important;
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px !important;
}

/* ===========================================
   11. TEXTOS Y LINKS
   =========================================== */
body.safetrack-login a,
body.safetrack-login .MuiLink-root {
  color: rgba(100, 180, 255, 0.8) !important;
}

body.safetrack-login .MuiTypography-root {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ===========================================
   12. ANIMACION
   =========================================== */
@keyframes safetrackFadeIn {
  from { opacity: 0; transform: translateY(25px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===========================================
   13. LOADER
   =========================================== */
body.safetrack-login .loader {
  display: none !important;
}

/* ===========================================
   14. RESPONSIVE
   =========================================== */
@media (max-width: 520px) {
  body.safetrack-login main > div:not([class*="-sidebar"]) {
    padding: 14px 18px 22px !important;
    margin: 10px !important;
    max-width: 92% !important;
  }

  body.safetrack-login [class*="-container"]::before {
    width: 240px !important;
    height: 85px !important;
  }

  body.safetrack-login [class*="-container"] {
    min-height: 105px !important;
  }

  body.safetrack-login [class*="-form"] {
    max-width: 320px !important;
  }

  body.safetrack-login [class*="-options"] .MuiFormControl-root {
    width: 115px !important;
    min-width: 115px !important;
    max-width: 115px !important;
  }

  body.safetrack-login .MuiButton-contained,
  body.safetrack-login .MuiButton-containedPrimary {
    max-width: 320px !important;
  }
}

/* =========================================================
   OVERRIDE FUERTE (POR SI TRACCAR/MUI SOBREESCRIBE)
   ========================================================= */

/* fuerza QR+idioma incluso si cambia el layout interno */
body.safetrack-login main [class*="-options"] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 10px !important;
}

body.safetrack-login main [class*="-options"] > button {
  flex: 0 0 auto !important;
}

body.safetrack-login main [class*="-options"] .MuiFormControl-root {
  flex: 0 0 auto !important;
}

/* fuerza inputs “rectos” */
body.safetrack-login main [class*="-form"] .MuiOutlinedInput-root {
  min-height: 44px !important;
}

body.safetrack-login main [class*="-form"] .MuiInputBase-input {
  padding: 12px 14px !important;
}