html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ===================== LOCALIZAPP LOGIN ===================== */
/* Pantalla de inicio de sesion: fondo negro, logo grande animado arriba, formulario al centro */
main:has(> [class*="-sidebar"]) {
  flex-direction: column !important;
  background: #000 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
}

main:has(> [class*="-sidebar"]) > [class*="-sidebar"] {
  background: #000 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 90vw !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

main:has(> [class*="-sidebar"]) [class*="-image"] {
  width: 300px !important;
  max-width: 72vw !important;
  height: auto !important;
  max-height: none !important;
}

main:has(> [class*="-sidebar"]) > .MuiPaper-root {
  background: #000 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 460px !important;
  min-height: 0 !important;
  padding-top: 8px !important;
}

main:has(> [class*="-sidebar"]) form {
  width: 100% !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

main:has(> [class*="-sidebar"]) [class*="-container"] {
  width: 340px !important;
  max-width: 82vw !important;
}

main:has(> [class*="-sidebar"]) [class*="-container"] > .MuiFormControl-root,
main:has(> [class*="-sidebar"]) [class*="-container"] > .MuiButtonBase-root {
  width: 100% !important;
}

/* ---- Fondo de estrellas (efecto espacio) solo en el login ---- */
main:has(> [class*="-sidebar"]) {
  position: relative !important;
  overflow: hidden !important;
}
main:has(> [class*="-sidebar"])::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 25px 35px, #ffffff, transparent),
    radial-gradient(1px 1px at 120px 90px, #d8ffe0, transparent),
    radial-gradient(1px 1px at 210px 160px, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 305px 55px, #bfeecf, transparent),
    radial-gradient(1px 1px at 380px 210px, #ffffff, transparent),
    radial-gradient(1px 1px at 70px 250px, #ffffff, transparent),
    radial-gradient(2px 2px at 345px 305px, #7ED957, transparent),
    radial-gradient(1px 1px at 160px 340px, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 250px 30px, #eafff0, transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: laTwinkleA 6s ease-in-out infinite alternate;
}
main:has(> [class*="-sidebar"])::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 80px 120px, #ffffff, transparent),
    radial-gradient(2px 2px at 300px 200px, #ffffff, transparent),
    radial-gradient(1.6px 1.6px at 180px 60px, #9fe6ff, transparent),
    radial-gradient(2px 2px at 40px 330px, #7ED957, transparent);
  background-repeat: repeat;
  background-size: 550px 550px;
  animation: laTwinkleB 4.5s ease-in-out infinite alternate;
}
@keyframes laTwinkleA { from { opacity: .45; } to { opacity: .95; } }
@keyframes laTwinkleB { from { opacity: .25; } to { opacity: .8; } }
main:has(> [class*="-sidebar"]) > * { position: relative; z-index: 1; }

/* ===================== LOCALIZAPP · PANEL DE VEHÍCULO ===================== */
#la-panel{
  position:fixed; right:16px; bottom:26px; z-index:1200; width:322px; max-width:calc(100vw - 32px);
  display:none; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#121d16,#0b140e); border:1px solid #22362a; border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); font-family:inherit; color:#eaf3ee;
  transform:translateY(16px); opacity:0;
  transition:opacity .28s ease, transform .28s cubic-bezier(.34,1.4,.5,1);
}
#la-panel.show{ display:flex; opacity:1; transform:translateY(0); }
#la-panel .la-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:13px 14px 11px; border-bottom:1px solid #1a2b21; }
#la-panel .la-veh b{ display:block; font-size:14.5px; font-weight:700; letter-spacing:.01em; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#la-panel .la-conn{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; margin-top:3px; }
#la-panel .la-conn i{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
#la-panel .la-conn.on{ color:#7ED957; } #la-panel .la-conn.on i{ background:#7ED957; box-shadow:0 0 8px #7ED957; }
#la-panel .la-conn.off{ color:#9fb4a7; } #la-panel .la-conn.off i{ background:#6f8579; }
#la-panel .la-close{ flex:0 0 auto; background:transparent; border:none; color:#6f8579; font-size:22px; line-height:1; cursor:pointer; padding:0 2px; transition:color .15s; }
#la-panel .la-close:hover{ color:#eaf3ee; }
#la-panel .la-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#1a2b21; }
#la-panel .la-metrics > div{ background:#0e1712; padding:12px 15px; }
#la-panel .la-metrics b{ font-size:25px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
#la-panel .la-metrics span{ font-size:12px; color:#9fb4a7; margin-left:4px; }
#la-panel .la-metrics i{ display:block; font-style:normal; font-size:10.5px; color:#6f8579; margin-top:5px; text-transform:uppercase; letter-spacing:.09em; }
#la-panel .la-alert{ display:flex; align-items:center; gap:9px; padding:10px 14px; background:rgba(226,59,46,.15); color:#ff9a8f; font-size:12.5px; font-weight:600; border-bottom:1px solid rgba(226,59,46,.28); }
#la-panel .la-alert svg{ flex:0 0 auto; }
#la-panel .la-sensors{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; }
#la-panel .s{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#9fb4a7; padding:7px 9px; border-radius:9px; background:#16241b; border:1px solid #22362a; }
#la-panel .s svg{ flex:0 0 auto; opacity:.92; }
#la-panel .s span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#la-panel .s.on{ color:#a6e58a; border-color:rgba(126,217,87,.32); }
#la-panel .s.warn{ color:#f0c56a; border-color:rgba(240,182,74,.32); }
#la-panel .s.bad{ color:#ff9a8f; border-color:rgba(226,59,46,.38); background:rgba(226,59,46,.09); }

/* botón de motor integrado */
#la-panel #la-motor{ display:flex; align-items:center; justify-content:center; gap:11px;
  margin:0 14px 14px; padding:13px; border:none; border-radius:12px; cursor:pointer; font-family:inherit;
  color:#08140b; background:linear-gradient(135deg,#8fe86a,#5bb84a);
  box-shadow:0 6px 18px rgba(126,217,87,.28); transition:filter .15s, background .3s; }
#la-panel #la-motor:hover{ filter:brightness(1.05); }
#la-panel #la-motor:active{ transform:translateY(1px); }
#la-panel #la-motor:focus-visible{ outline:3px solid rgba(255,255,255,.55); outline-offset:2px; }
#la-panel #la-motor.off{ color:#fff; background:linear-gradient(135deg,#ff7466,#e23b2e); box-shadow:0 6px 18px rgba(226,59,46,.3); }
#la-panel #la-motor .la-tx{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; text-align:left; }
#la-panel #la-motor .la-tx b{ font-size:14.5px; font-weight:700; }
#la-panel #la-motor .la-tx i{ font-size:11px; font-style:normal; opacity:.85; font-weight:600; }

/* modal de confirmación */
#la-modal{ position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center;
  background:rgba(4,8,6,.66); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#la-modal.show{ display:flex; animation:laFade .18s ease; }
@keyframes laFade{ from{opacity:0} to{opacity:1} }
#la-modal .la-box{ width:min(370px,90vw); text-align:center; padding:26px 24px 22px;
  background:linear-gradient(180deg,#121d16,#0b140e); border:1px solid #22362a; border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.6); }
#la-modal .la-mic{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  color:#7ED957; background:rgba(126,217,87,.12); border:1px solid rgba(126,217,87,.34); }
#la-modal.danger .la-mic{ color:#ff7466; background:rgba(226,59,46,.13); border-color:rgba(226,59,46,.4); }
#la-modal h3{ margin:0 0 8px; color:#eaf3ee; font-size:20px; font-weight:700; }
#la-modal p{ margin:0 0 20px; color:#9fb4a7; font-size:14px; line-height:1.55; }
#la-modal p b{ color:#eaf3ee; }
#la-modal .la-acts{ display:flex; gap:11px; }
#la-modal .la-acts button{ flex:1; padding:12px; border-radius:11px; cursor:pointer; font-family:inherit;
  font-weight:600; font-size:14px; border:1px solid #2a4033; transition:filter .15s; }
#la-modal .la-acts button:hover{ filter:brightness(1.08); }
#la-modal .la-cancel{ background:transparent; color:#9fb4a7; }
#la-modal .la-ok.danger{ background:#e23b2e; color:#fff; border-color:#e23b2e; }
#la-modal .la-ok.go{ background:#7ED957; color:#08140b; border-color:#7ED957; }

/* aviso (toast) */
#la-toast{ position:fixed; bottom:92px; left:50%; transform:translateX(-50%) translateY(10px); z-index:1400;
  padding:11px 18px; border-radius:12px; background:#16241b; color:#eaf3ee; border:1px solid #22362a;
  font-family:inherit; font-size:13.5px; font-weight:500; opacity:0; pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45); transition:opacity .25s, transform .25s; }
#la-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#la-toast.ok{ border-color:rgba(126,217,87,.55); }
#la-toast.err{ border-color:rgba(226,59,46,.55); }