/* ===== Base Traccar (no tocar) ===== */
html, body { height: 100%; }
body { margin: 0; padding: 0; }
.root { display: flex; flex-direction: column; height: 100%; }

/* =========================================================
   T-Ubike — Rediseño del login (gps.t-ubike.com)
   Scoped SOLO a la pantalla de login: #root > main que
   contiene > .MuiPaper-root > form. La app principal no
   matchea, así que estas reglas no la afectan.
   ========================================================= */

/* Fondo a pantalla completa con overlay para legibilidad */
#root > main:has(> .MuiPaper-root > form) {
  position: relative;
  justify-content: center !important;
  align-items: center !important;
  background-image:
    linear-gradient(135deg, rgba(33,16,54,0.78) 0%, rgba(20,10,35,0.82) 100%),
    url('/login-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ocultar la barra lateral morada */
#root > main:has(> .MuiPaper-root > form) > div:first-child {
  display: none !important;
}

/* Paper (área derecha) → transparente y como contenedor de centrado */
#root > main:has(> .MuiPaper-root > form) > .MuiPaper-root {
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

/* El form = tarjeta de vidrio, centrada de forma determinística */
#root > main:has(> .MuiPaper-root > form) form {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  width: 390px !important;
  max-width: 92vw !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 58px 38px 78px !important;
  background: rgba(255,255,255,0.94) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
  overflow: visible !important;
}

/* Iconografía: badge circular con el pin de marca, flotando arriba */
#root > main:has(> .MuiPaper-root > form) form::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff url('/tubike-logo-small.png') center / 58px 58px no-repeat;
  border: 3px solid #5b2a86;
  box-shadow: 0 10px 26px rgba(91,42,134,0.45);
  z-index: 2;
}

/* Acento superior sutil en la tarjeta */
#root > main:has(> .MuiPaper-root > form) form::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: linear-gradient(90deg, #5b2a86 0%, #8b5cc7 100%);
  border-radius: 20px 20px 0 0;
}

/* Selector de idioma dentro de la tarjeta, abajo y centrado */
#root > main:has(> .MuiPaper-root > form) form > div:first-child {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important;
  right: auto !important;
  z-index: 3;
}
/* Separador sutil arriba del selector de idioma */
#root > main:has(> .MuiPaper-root > form) form > div:first-child::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: 78vw;
  height: 1px;
  background: rgba(91,42,134,0.18);
}
/* Ocultar el botón QR (declutter; se encimaba con el badge) */
#root > main:has(> .MuiPaper-root > form) form > div:first-child > button {
  display: none !important;
}
/* Compactar el selector de idioma */
#root > main:has(> .MuiPaper-root > form) form > div:first-child .MuiInputBase-root {
  font-size: 0.82rem;
}

/* Wordmark de marca dentro de la tarjeta (decorativo, consistente en todo tamaño).
   Traccar pone el logo en el sidebar (oculto) en desktop, así que lo reponemos aquí. */
#root > main:has(> .MuiPaper-root > form) form > div:nth-child(2) {
  padding-top: 4px;
}
#root > main:has(> .MuiPaper-root > form) form > div:nth-child(2)::before {
  content: '';
  display: block;
  width: 210px;
  height: 46px;
  margin: 2px auto 20px;
  background: url('/tubike-logo.png') center / contain no-repeat;
}
/* Ocultar el logo real del DOM (cuando exista) para no duplicar */
#root > main:has(> .MuiPaper-root > form) form > div:nth-child(2) > img {
  display: none !important;
}

/* ===== Campos: superficie clara consistente =====
   Sin esto, el autofill del navegador pinta el campo con fondo oscuro y la mitad
   inferior del label flotante (texto oscuro) queda invisible → "se corta". */
#root > main:has(> .MuiPaper-root > form) form .MuiOutlinedInput-root {
  background-color: rgba(255,255,255,0.7) !important;
  border-radius: 9px !important;
}
/* El label flotante (encogido) se asienta sobre superficie clara → siempre legible */
#root > main:has(> .MuiPaper-root > form) form .MuiInputLabel-root.MuiInputLabel-shrink {
  background: #f6f3fb !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
}
/* Autofill: forzar fondo claro y texto oscuro (mata el fondo oscuro del navegador) */
#root > main:has(> .MuiPaper-root > form) form input:-webkit-autofill,
#root > main:has(> .MuiPaper-root > form) form input:-webkit-autofill:hover,
#root > main:has(> .MuiPaper-root > form) form input:-webkit-autofill:focus,
#root > main:has(> .MuiPaper-root > form) form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #f1edf7 inset !important;
  -webkit-text-fill-color: #1a1a2a !important;
  caret-color: #1a1a2a !important;
  border-radius: 9px;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== Forzar colores legibles sobre la tarjeta clara =====
   Sin esto, si el SO/navegador está en MODO OSCURO, el tema de Traccar pinta el
   texto de inputs y labels en claro → invisible sobre la tarjeta clara ("en blanco"). */
#root > main:has(> .MuiPaper-root > form) form input,
#root > main:has(> .MuiPaper-root > form) form .MuiInputBase-input,
#root > main:has(> .MuiPaper-root > form) form .MuiOutlinedInput-input,
#root > main:has(> .MuiPaper-root > form) form .MuiSelect-select {
  color: #1a1a2a !important;
  -webkit-text-fill-color: #1a1a2a !important;
  caret-color: #5b2a86 !important;
}
#root > main:has(> .MuiPaper-root > form) form .MuiInputLabel-root {
  color: rgba(38,22,58,0.72) !important;
}
#root > main:has(> .MuiPaper-root > form) form .MuiInputLabel-root.Mui-focused {
  color: #5b2a86 !important;
}
#root > main:has(> .MuiPaper-root > form) form .MuiOutlinedInput-notchedOutline {
  border-color: rgba(91,42,134,0.30) !important;
}
#root > main:has(> .MuiPaper-root > form) form .Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #5b2a86 !important;
}
/* Iconos (ojo de contraseña, flecha del selector) en color de marca */
#root > main:has(> .MuiPaper-root > form) form .MuiIconButton-root .MuiSvgIcon-root,
#root > main:has(> .MuiPaper-root > form) form .MuiSelect-icon {
  color: #5b2a86 !important;
}