/* ====== Tracknel Polished UI (2025) ======
   Pulido visual sin cambiar layout: bordes, sombras,
   colores consistentes, corrección de doble fondo en panel. */
:root{
  --tn-brand:#0b3d91; --tn-brand-2:#1e40af;
  --tn-ok:#10b981; --tn-warn:#f59e0b; --tn-err:#ef4444;
  --tn-radius-xs:10px; --tn-radius-sm:12px; --tn-radius-md:14px;
  --tn-shadow-1:0 4px 16px rgba(0,0,0,.12);
  --tn-shadow-2:0 12px 34px rgba(0,0,0,.20);
}
@media (prefers-color-scheme: dark){
  :root{
    --tn-bg:#0b1220; --tn-surface:#101826; --tn-surface-2:#0f172a; --tn-border:#1f2937;
    --tn-text:#e5e7eb; --tn-text-dim:#9ca3af; --tn-accent:var(--tn-brand); --tn-hover:rgba(59,130,246,.12);
  }
}
@media (prefers-color-scheme: light){
  :root{
    --tn-bg:#f8fafc; --tn-surface:#ffffff; --tn-surface-2:#f1f5f9; --tn-border:#e5e7eb;
    --tn-text:#0f172a; --tn-text-dim:#475569; --tn-accent:var(--tn-brand-2); --tn-hover:rgba(30,64,175,.10);
  }
}

/* Fondo y tipografía global */
html,body{
  background:var(--tn-bg)!important; color:var(--tn-text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ======= MUI (Traccar UI) ======= */
/* Papeles / tarjetas / popups coherentes y sin “doble” fondos */
[class*="MuiPaper-root"]{
  background:var(--tn-surface)!important;
  color:var(--tn-text)!important;
  border:1px solid var(--tn-border)!important;
  border-radius:var(--tn-radius-md)!important;
  box-shadow:var(--tn-shadow-1)!important;
}
[class*="MuiPaper-root"]::before,
[class*="MuiPaper-root"]::after{ content:none!important; }

/* AppBar/Toolbar superior */
[class*="MuiAppBar-root"], [class*="MuiToolbar-root"]{
  background:var(--tn-surface-2)!important;
  color:var(--tn-text)!important;
  border-bottom:1px solid var(--tn-border)!important;
  box-shadow:var(--tn-shadow-1)!important;
  border-radius:0!important;
}

/* Drawer lateral */
[class*="MuiDrawer-paper"]{
  background:var(--tn-surface-2)!important;
  border-right:1px solid var(--tn-border)!important;
  border-radius:0 16px 16px 0!important;
}
[class*="MuiListItem-root"]{
  border-radius:12px!important; margin:6px!important;
}
[class*="MuiInputBase-root"][class*="MuiOutlinedInput-root"]{
  background:var(--tn-surface)!important; border-radius:12px!important;
}

/* Botones */
[class*="MuiButton-root"]{
  border-radius:12px!important; text-transform:none!important; box-shadow:none!important;
  transition:filter .15s ease, transform .02s ease;
}
[class*="MuiButton-containedPrimary"]{ background:var(--tn-accent)!important; color:#fff!important }
[class*="MuiButton-outlined"]{ border-color:var(--tn-border)!important }
[class*="MuiButton-root"]:hover{ filter:brightness(1.06) }

/* Chips/Badges */
[class*="MuiChip-root"], [class*="MuiBadge-root"]{ border-radius:999px!important }

/* Inputs */
[class*="MuiOutlinedInput-notchedOutline"]{ border-color:var(--tn-border)!important }
[class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"]{ border-color:var(--tn-accent)!important }

/* Tabs y tablas */
[class*="MuiTabs-indicator"]{ background:var(--tn-accent)!important; height:3px!important; border-radius:3px!important }
[class*="MuiTableHead-root"] th{ background:var(--tn-surface-2)!important; color:var(--tn-text)!important }
[class*="MuiTableCell-root"]{ border-bottom:1px solid var(--tn-border)!important }

/* Barra inferior (BottomNavigation) separada y “flotante” */
[class*="MuiBottomNavigation-root"]{
  background:var(--tn-surface-2)!important; color:var(--tn-text)!important;
  border-top:1px solid var(--tn-border)!important;
  border-radius:12px 12px 0 0!important;
  margin:0 8px!important;
  box-shadow:var(--tn-shadow-1)!important;
}

/* ======= Leaflet / Mapa ======= */
/* Evitar dobles fondos y hacer popups/controles coherentes */
.leaflet-control, .leaflet-bar a, .leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:var(--tn-surface)!important; color:var(--tn-text)!important;
  border:1px solid var(--tn-border)!important; box-shadow:var(--tn-shadow-1)!important;
}
.leaflet-bar a:hover{ background:var(--tn-hover)!important }
.leaflet-popup-content-wrapper{ border-radius:14px!important }
.leaflet-popup-tip{ background:var(--tn-surface)!important; border:1px solid var(--tn-border)!important }

/* Mueve los controles del mapa para que no tapen la barra inferior */
.leaflet-bottom.leaflet-right{ margin-bottom:80px!important; margin-right:12px!important }

/* ======= Panel flotante de dispositivo =======
   (Traccar lo renderiza como MUI Paper; quitamos “rectángulos” heredados)
*/
.leaflet-bottom.leaflet-right .leaflet-control > div,
.leaflet-container .leaflet-control-container ~ div [class*="MuiPaper-root"]{
  background:var(--tn-surface)!important; border:1px solid var(--tn-border)!important;
  box-shadow:var(--tn-shadow-2)!important; border-radius:16px!important;
}
.leaflet-bottom.leaflet-right .leaflet-control > div::before,
.leaflet-bottom.leaflet-right .leaflet-control > div::after{
  content:none!important;
}

/* Buscador “pill” */
input[type="search"], [role="search"] input{
  border-radius:16px!important;
}

/* Links visibles */
a{ color:var(--tn-accent) }
a:hover{ filter:brightness(1.07) }

/* ===== Tracknel: FIX capas dobles en paneles/drawer/popups ===== */

/* 1) Cualquier Paper inmediatamente dentro de otro Paper: quita el cromo interno */
[class*="MuiPaper-root"] > [class*="MuiPaper-root"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 2) Drawer lateral (lista/buscador): no dupliques fondo/borde */
[class*="MuiDrawer-paper"] [class*="MuiPaper-root"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 3) Paneles dentro del contenedor Leaflet (tarjeta dispositivo): solo un borde */
.leaflet-container [class*="MuiPaper-root"] [class*="MuiPaper-root"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 4) Unifica radios/outline del buscador (OutlinedInput) dentro del panel */
[class*="MuiOutlinedInput-root"]{
  border-radius:12px !important;
  background:var(--tn-surface) !important;
}
[class*="MuiOutlinedInput-notchedOutline"]{
  border-color:var(--tn-border) !important;
  border-radius:12px !important;
}
[class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"]{
  border-color:var(--tn-accent) !important;
}

/* 5) Toolbar superior del panel: bordes/colores consistentes */
[class*="MuiToolbar-root"]{
  border-bottom:1px solid var(--tn-border) !important;
  background:var(--tn-surface) !important;
  border-top-left-radius:12px !important;
  border-top-right-radius:12px !important;
}

/* 6) Asegura que el Paper externo sí tenga el “cromo” */
[class*="MuiPaper-root"]{
  background:var(--tn-surface) !important;
  border:1px solid var(--tn-border) !important;
  border-radius:16px !important;
  box-shadow:var(--tn-shadow-2) !important;
}

/* 7) Evita que algún ::before/::after de MUI re-pinte rectángulos atrás */
[class*="MuiPaper-root"]::before,
[class*="MuiPaper-root"]::after{
  content:none !important;
}

/* ===== Tracknel: fusión de cabecera (Toolbar) + lista =====
   Traccar dibuja dos Paper hermanos; los unificamos visualmente para
   que parezca un solo panel redondeado y sin “doble borde/sombra”. */

/* 1) Si un Paper contiene una Toolbar, lo consideramos CABECERA:
      - Radio sólo arriba, sombra suave */
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: var(--tn-shadow-1) !important;
}

/* 2) El Paper que viene justo después (LISTA):
      - Quita esquinas y borde superior; súbelo un poco para cerrar la unión */
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) + [class*="MuiPaper-root"] {
  margin-top: -8px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top-color: transparent !important;
  box-shadow: var(--tn-shadow-2) !important;
}

/* 3) Ajustes finos del buscador (OutlinedInput) para que no rompa el radio */
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) [class*="MuiOutlinedInput-root"]{
  border-radius: 14px !important;
}
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) [class*="MuiOutlinedInput-notchedOutline"]{
  border-radius: 14px !important;
}

/* 4) Compat “best effort” si el navegador no soporta :has():
      - Panel inmediatamente seguido de otro panel (fallback)
      (Los navegadores modernos de Chromium ya soportan :has()) */
@supports not (selector(:has(*))) {
  /* suposición segura: primer Paper de la columna es cabecera */
  .leaflet-container ~ div [class*="MuiPaper-root"] + [class*="MuiPaper-root"],
  [class*="MuiPaper-root"] + [class*="MuiPaper-root"] {
    margin-top: -8px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top-color: transparent !important;
  }
}
/* ===== Tracknel: fusión cabecera + lista (con contenedor intermedio) =====
   Caso real: <Paper><Toolbar/></Paper>  +  <div class="jssXXX"><Paper>lista</Paper></div>
*/

/* 1) Cabecera: sólo esquinas de arriba */
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: var(--tn-shadow-1) !important;
}

/* 2) Primer Paper dentro del SIGUIENTE contenedor (la lista):
      - quita borde superior y esquinas de arriba
      - solapa 1px para que no se vea la unión */
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) + * [class*="MuiPaper-root"]:first-of-type {
  margin-top: -1px !important;                 /* cierra la “costura” */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top-color: transparent !important;    /* evita línea clara */
  box-shadow: var(--tn-shadow-2) !important;
}

/* 3) Por si existen más envoltorios (dos niveles), intenta también este patrón */
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) + * > * [class*="MuiPaper-root"]:first-of-type {
  margin-top: -1px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top-color: transparent !important;
}

/* 4) Buscador dentro de la cabecera: radios consistentes */
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) [class*="MuiOutlinedInput-root"]{
  border-radius: 14px !important;
}
[class*="MuiPaper-root"]:has(> [class*="MuiToolbar-root"]) [class*="MuiOutlinedInput-notchedOutline"]{
  border-radius: 14px !important;
}

/* 5) Fallback si el navegador no soporta :has() (mejor-esfuerzo):
      toma el primer Paper que haya dentro del siguiente contenedor */
@supports not (selector(:has(*))) {
  [class*="MuiPaper-root"] + * [class*="MuiPaper-root"]:first-of-type {
    margin-top: -1px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top-color: transparent !important;
  }
}

/* auto-include pretty info panel */
@import url("./info-panel.css?v=1755321391");

/* auto-include float card */

/* ===== Tracknel · Login Trim Panel Only =====
   Mantiene selector de idioma y logo. Oculta únicamente el panel/imagen superior del login.
   Usamos :has() para asegurarnos de que sea la pantalla de login. */
.root main:has(form) > div:first-child {
  display: none !important;
}
/* ===== Tracknel · Login Clean =====
   - Oculta panel/imagen del login (primer div dentro de <main>)
   - Centra el formulario
   - Añade título "Tracknel" encima del form
   - Mantiene selector de idioma y resto de controles
*/
.root main:has(form) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* Fondo acorde a modo claro/oscuro si ya definiste variables; si no, usa un neutro */
  background: var(--tn-app-bg, #0b1020);
}

.root main:has(form) > div:first-child {
  /* Panel/imagen lateral del login */
  display: none !important;
}

.root main:has(form) .MuiPaper-root.MuiPaper-elevation {
  /* Tarjeta contenedora del formulario */
  width: 100%;
  max-width: 380px;
  padding: 22px 20px;
  border-radius: 16px !important;
  border: 1px solid var(--tn-card-bd, #1f2937);
  background: var(--tn-card-bg, #111827) !important;
  color: var(--tn-text, #e5e7eb);
  box-shadow: var(--tn-shadow-2, 0 8px 30px rgba(0,0,0,.35));
  margin: 16px;
}

.root main:has(form) form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

/* Título "Tracknel" arriba del formulario */
.root main:has(form) form::before {
  content: "Tracknel";
  display: block;
  text-align: center;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
  color: var(--tn-text, #e5e7eb);
}

/* Ajustes sutiles */
.root main:has(form) .MuiFormControl-root .MuiOutlinedInput-root {
  border-radius: 12px !important;
}
.root main:has(form) .MuiButton-root {
  border-radius: 12px !important;
  font-weight: 700;
}

/* Modo claro (si el usuario lo tiene) */
@media (prefers-color-scheme: light) {
  .root main:has(form) {
    background: var(--tn-app-bg, #f7f8fb);
  }
  .root main:has(form) .MuiPaper-root.MuiPaper-elevation {
    background: var(--tn-card-bg, #ffffff) !important;
    color: var(--tn-text, #111827);
    border-color: var(--tn-card-bd, #e5e7eb);
    box-shadow: var(--tn-shadow-1, 0 6px 18px rgba(0,0,0,.08));
  }
}
/* END Tracknel · Login Clean */