:root {
  --bg0: #060B17; --bg1: #0C1530; --panel: rgba(14, 22, 44, .92); --line: rgba(234, 240, 255, .10);
  --ink: #EAF0FF; --dim: rgba(234, 240, 255, .58); --faint: rgba(234, 240, 255, .14);
  --navy: #233C8C; --accent: #3CC8F5;
  --normal: #34D399; --aviso: #FBBF24; --baja: #FF7A59; --alta: #F43F5E; --falla: #A78BFA; --sindato: #64748B;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 20% -10%, #13224a 0%, transparent 60%), var(--bg0);
  color: var(--ink); font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; font-size: 14px;
}
[hidden] { display: none !important; }
h1, h2 { margin: 0; font-weight: 600; }
h2 { font-size: 15px; letter-spacing: .02em; }
.muted { color: var(--dim); }
button {
  font: inherit; color: var(--ink); background: var(--navy); border: 1px solid transparent;
  border-radius: 8px; padding: 7px 12px; cursor: pointer;
}
button:hover { filter: brightness(1.2); }
button.ghost { background: transparent; border-color: var(--faint); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Login */
/* ---------- Portada ---------- */
.login {
  position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 420px);
  align-items: center; gap: clamp(24px, 6vw, 96px); padding: 32px clamp(16px, 6vw, 96px); overflow: hidden; isolation: isolate;
}
.login-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.login-hero { max-width: 620px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 12px; border: 1px solid rgba(60, 200, 245, .35);
  border-radius: 999px; color: var(--accent); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; background: rgba(60, 200, 245, .06);
}
.eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: beat 2s infinite; }
@keyframes beat { 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.hero-title { margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -.02em; font-weight: 800; }
.hero-title span, .login-card h1 span, .brand .connect {
  background: linear-gradient(90deg, #3CC8F5, #7aa7ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-text { margin: 20px 0 28px; max-width: 520px; color: var(--dim); font-size: 17px; line-height: 1.55; }
.hero-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.hero-points li {
  display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(10, 18, 38, .55); backdrop-filter: blur(6px);
}
.hero-points strong { font-size: 14px; }
.hero-points span { font-size: 12px; color: var(--dim); }
.login-card {
  width: 100%; background: rgba(12, 20, 42, .78); border: 1px solid rgba(234, 240, 255, .12); border-radius: 18px;
  padding: 28px; display: grid; gap: 14px; backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.login-card::before {
  content: ''; height: 3px; margin: -28px -28px 6px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #3CC8F5, #233C8C 60%, #34d399);
}
.login-logos { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px; padding: 10px 16px; width: fit-content; }
.login-logos img { height: 40px; display: block; }
.login-logos .sep { width: 1px; height: 32px; background: #d5dbe8; }
.logico2-mark { display: inline-flex; align-items: center; gap: 8px; }
.logico2-mark span { font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: #0b4a9e; line-height: 1; }
.brand-badge.small .logico2-mark { gap: 5px; }
.brand-badge.small .logico2-mark span { font-size: 15px; }
.login-card h1 { font-size: 28px; margin: 4px 0 0; letter-spacing: -.01em; }
.login-sub { margin: -6px 0 4px; font-size: 14px; }
.login-foot { margin: 4px 0 0; font-size: 12px; color: var(--dim); text-align: center; }
@media (max-width: 900px) {
  .login { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 24px 16px; }
  .login-hero { display: none; }
  .login-card { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) { .eyebrow .pulse { animation: none; } }
.login-card label { display: grid; gap: 6px; color: var(--dim); }
.login-card input, .sensor-edit input, .device-form input:not([type=checkbox]), .device-form select {
  font: inherit; color: var(--ink); background: var(--bg1); border: 1px solid var(--faint); border-radius: 8px; padding: 10px; min-width: 0;
}
.login-card button { padding: 10px; margin-top: 6px; }
.error { color: var(--alta); min-height: 1.2em; margin: 0; }
.brand-badge { background: #fff; border-radius: 10px; padding: 8px 12px; width: fit-content; }
.brand-badge img { height: 46px; display: block; }
.brand-badge.small { padding: 4px 8px; border-radius: 8px; }
.brand-badge.small img { height: 30px; }
.brand-badge.small { display: flex; align-items: center; gap: 8px; }

/* Barra superior */
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--topbar); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand .title { font-weight: 600; font-size: 16px; }
.spacer { flex: 1; }
.live { width: 10px; height: 10px; border-radius: 50%; background: var(--sindato); }
.live.on { background: var(--normal); box-shadow: 0 0 8px var(--normal); }
.alarm-badge {
  padding: 6px 14px; border-radius: 999px; background: var(--alta); color: #fff; font-weight: 700; text-decoration: none;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .alarm-badge { animation: none; } }

/* Menu desplegable */
.menu { position: relative; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; z-index: 10; display: grid;
  background: var(--menu-bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.menu-list a, .menu-list button {
  display: block; text-align: left; width: 100%; padding: 9px 12px; border-radius: 6px; background: transparent;
  border: 0; color: var(--ink); text-decoration: none; font: inherit;
}
.menu-list a:hover, .menu-list button:hover { background: var(--faint); filter: none; }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.units { padding: 4px 12px 6px; display: grid; gap: 6px; }
.units-title { color: var(--dim); font-size: 12px; }
.units-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-list .units .seg button { display: inline-block; width: auto; padding: 4px 10px; border-radius: 0; text-align: center; }
.menu-list .units .seg button.on { background: var(--navy); color: #fff; }
.menu-list .dates select { width: auto; padding: 4px 6px; }
.menu-list .date-sample { font-size: 12px; }
.menu-user { padding: 6px 12px 8px; color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }

/* Inicio: zonas a la izquierda, grafico a la derecha (abajo en pantallas angostas) */
.home { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: 20px; padding: 20px; align-items: start; }
.chart-panel { position: sticky; top: 80px; margin: 0; }
.chart-panel h2 { font-size: 20px; }
@media (max-width: 1000px) { .home { grid-template-columns: minmax(0, 1fr); padding: 14px; } .chart-panel { position: static; } }
@media (max-width: 600px) {
  .topbar { padding: 8px 12px; gap: 10px; }
  .brand .brand-badge { display: none; }
  .sensors { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sensor .ppm { font-size: 24px; }
}
.chart { overflow: hidden; }
.chart-stale { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--aviso); background: rgba(255, 190, 60, .08); }
.zone { margin-bottom: 22px; }
.zone h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 0 0 10px; }

/* Vistas del menu */
.more { padding: 16px 20px 32px; max-width: 1100px; margin: 0 auto; }
.more-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.more-head h1 { font-size: 20px; }
.more .events { max-height: none; }
.device-sensors { font-size: 12px; margin: 0 0 6px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }

/* Sitio y equipo */
.site h2 { font-size: 17px; }
.device-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; color: var(--dim); font-size: 13px; }
.device-bar .name { color: var(--ink); font-weight: 600; }
.device-bar .sig { padding: 2px 8px; border-radius: 999px; background: rgba(90,200,140,.10); color: #8fe0b0; }
.device-bar .origen { padding: 2px 8px; border-radius: 999px; background: rgba(120,160,255,.12); color: #a9c1ff; }
.device-bar .origen.o-teltonika { background: rgba(80,200,220,.12); color: #8fdbe8; }
.device-bar .origen.o-communicator { background: rgba(190,140,255,.14); color: #d2b6ff; }
.device-bar .origen.o-externa { background: rgba(234,240,255,.08); color: var(--ink); }
.device-bar .origen.o-simulador { background: rgba(255,59,107,.14); color: #ff8aa6; }
.device-bar .falso { padding: 2px 8px; border-radius: 4px; background: #ff3b6b; color: #fff; font-weight: 700; letter-spacing: .04em; }
.device-bar .falso[hidden] { display: none; }
.device-bar .sig.off { background: rgba(255,190,60,.12); color: var(--aviso); }
.device-bar .health { padding: 2px 8px; border-radius: 999px; background: rgba(234,240,255,.06); }
.device-bar .health.bad { color: var(--aviso); background: rgba(255,190,60,.12); font-weight: 600; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--sindato); }
.status-dot.on { background: var(--normal); box-shadow: 0 0 8px var(--normal); }
.status-dot.off { background: var(--alta); }
.device-bar .actions { margin-left: auto; display: flex; gap: 8px; }
.device-bar button { padding: 5px 10px; font-size: 13px; }
.empty { color: var(--dim); padding: 12px; border: 1px dashed var(--faint); border-radius: 10px; }

/* Sensores */
.sensors { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.sensor {
  --c: var(--sindato);
  text-align: left; background: var(--bg1); border: 1px solid var(--line); border-left: 5px solid var(--c);
  border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; cursor: pointer;
}
.sensor.selected { outline: 2px solid var(--accent); background: var(--card-sel); }
.sensor.stale .ppm { opacity: .5; }
.sensor .sname { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sensor .sloc { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sensor .note { font-size: 11px; color: var(--dim); text-align: right; }
.sensor .note.falso { color: #fff; background: #ff3b6b; padding: 0 6px; border-radius: 4px; font-weight: 700; }
.sensor .note.warn { color: var(--aviso); }
.sensor-edit { display: grid; grid-template-columns: 52px 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.sensor-edit .ch { color: var(--dim); font-variant-numeric: tabular-nums; }
.sensor-edit > span:last-child { grid-column: 2 / -1; font-size: 12px; }
.sensor-edit > span:last-child:empty { display: none; }
@media (max-width: 560px) { .sensor-edit { grid-template-columns: 40px 1fr; } .sensor-edit input:nth-of-type(2), .sensor-edit button { grid-column: 2; } }
.sensor .ppm { margin-top: 6px; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sensor .ppm small { font-size: 13px; font-weight: 400; color: var(--dim); }
.sensor .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; color: var(--dim); }
.sensor .state { color: var(--c); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.st-normal { --c: var(--normal); } .st-aviso { --c: var(--aviso); } .st-baja { --c: var(--baja); }
.st-alta { --c: var(--alta); } .st-falla { --c: var(--falla); } .st-sin-dato { --c: var(--sindato); }
.sensor.st-alta { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { background: rgba(244, 63, 94, .22); } }
@media (prefers-reduced-motion: reduce) { .sensor.st-alta { animation: none; background: rgba(244, 63, 94, .18); } }

/* Grafico */
.chart { width: 100%; min-height: 300px; }
.legend { font-size: 12px; margin: 8px 0 0; }
.seg { display: inline-flex; border: 1px solid var(--faint); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; border-radius: 0; padding: 5px 10px; }
.seg button.on { background: var(--navy); }
.uplot, .u-legend { color: var(--ink); font-family: inherit; }

/* Eventos */
.events { list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.events li { border-left: 3px solid var(--c, var(--faint)); padding: 6px 10px; margin-bottom: 6px; background: var(--bg1); border-radius: 0 8px 8px 0; }
.events .when { color: var(--dim); font-size: 12px; }
.events .what { margin-top: 2px; }
.events .tag { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c, var(--dim)); font-weight: 600; margin-right: 6px; }
.lv-info { --c: var(--accent); } .lv-aviso { --c: var(--aviso); } .lv-baja { --c: var(--baja); }
.lv-alta { --c: var(--alta); } .lv-falla { --c: var(--falla); } .lv-seguridad { --c: #F472B6; }
.events.small li { font-size: 12px; }

/* Dialogo */
dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; width: min(560px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.verdict { font-size: 18px; font-weight: 700; margin: 10px 0; }
.verdict.ok { color: var(--normal); } .verdict.bad { color: var(--alta); }
dialog ul { padding-left: 18px; }
button.danger { color: var(--alta); border-color: rgba(255, 90, 90, .35); }
.device-form { display: grid; gap: 10px; }
.device-form label { display: grid; gap: 4px; font-size: 13px; color: var(--dim); }
.device-form label.check { display: flex; align-items: center; gap: 8px; }
.chart-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chart-tools .ghost { padding: 6px 10px; }
.levels-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.levels-form fieldset legend { color: var(--dim); font-size: 13px; padding: 0 6px; }
.levels-form input:disabled { opacity: .55; }
.levels-form .small { font-size: 12px; margin: 0; }
@media (max-width: 600px) { .levels-form fieldset { grid-template-columns: minmax(0, 1fr); } }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.users { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.users li { background: var(--bg1); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; }
.users li.off { opacity: .55; }
.users .who { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; }
.users .tag { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--aviso); }
.users select, .device-form select { font: inherit; color: var(--ink); background: var(--bg0); border: 1px solid var(--faint); border-radius: 8px; padding: 5px 8px; }
.users button { padding: 5px 10px; font-size: 13px; }
.events .ack { font-size: 12px; color: var(--muted, #8a94a6); margin-top: 4px; }
.events .ack.pending { color: #f59e0b; }
.events li.pending { box-shadow: inset 3px 0 0 #ef4444; }
.events button.small { margin-top: 6px; padding: 3px 10px; font-size: 12px; }
/* Alarma pendiente: el tilde "Reconocer" a la derecha, a la altura de la fecha. */
.events li.pending { position: relative; padding-right: 130px; }
.events .ack-btn { position: absolute; top: 8px; right: 10px; padding: 5px 12px; font-size: 13px; font-weight: 600;
  background: #16a34a; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.events .ack-btn:hover { background: #15803d; }
@media (max-width: 600px) {
  .events li.pending { padding-right: 10px; }
  .events .ack-btn { position: static; margin-top: 6px; }
}
.ack-tools { align-items: center; }
/* Documentos y planos */
.doc-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px; margin: 10px 0 14px; background: var(--bg1); border-radius: 8px; }
.doc-form select { font: inherit; color: var(--ink); background: var(--bg0); border: 1px solid var(--faint); border-radius: 8px; padding: 5px 8px; margin-left: 4px; }
.doc-form .error { flex-basis: 100%; margin: 0; }
.doc-group h3 { font-size: 15px; margin: 14px 0 6px; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-list li { display: flex; align-items: center; gap: 12px; background: var(--bg1); border-radius: 8px; padding: 8px 10px; }
.doc-icon { font-size: 26px; width: 56px; text-align: center; }
.doc-thumb img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; display: block; }
.doc-main { flex: 1; min-width: 0; }
.doc-name { font-weight: 600; overflow-wrap: anywhere; }
.doc-actions { display: flex; gap: 6px; }
.doc-actions .small { padding: 4px 10px; font-size: 13px; }
@media (max-width: 600px) { .doc-list li { flex-wrap: wrap; } .doc-actions { width: 100%; justify-content: flex-end; } }
.ack-tools button.tag { border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.ack-tools #ackAll { padding: 5px 12px; font-size: 13px; font-weight: 600; background: #16a34a; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.ack-tools #ackAll:hover { background: #15803d; }
.tag.alert { background: #7f1d1d; color: #fecaca; }
a.btn-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); border: 1px solid var(--faint); border-radius: 8px; padding: 7px 12px; }
a.btn-link:hover { filter: brightness(1.2); }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; list-style: none; padding: 10px 14px; margin: 0 0 12px;
  font: 600 16px ui-monospace, Consolas, monospace; background: var(--bg1); border-radius: 8px; user-select: all; }
.secret { font: 600 20px ui-monospace, Consolas, monospace; letter-spacing: .06em; background: var(--bg1); padding: 10px 14px; border-radius: 8px; user-select: all; }

/* Origen del dato */
.site h2 .site-origins { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--dim); }
.sensor .sorig { color: var(--dim); font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sensor .sorig.o-simulador { color: #ff8aa6; opacity: 1; }
.origin-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.origin-filter[hidden] { display: none; }
.origin-filter .chip { padding: 4px 12px; border-radius: 999px; font-size: 13px; background: var(--faint); border: 1px solid transparent; color: var(--ink); }
.origin-filter .chip.on { border-color: #7aa2ff; background: rgba(120,160,255,.18); }
.origin-filter .chip.sim.on { border-color: #ff3b6b; background: rgba(255,59,107,.18); }

/* QR del segundo factor: fondo blanco propio para que la camara lo lea tambien con el tema oscuro. */
.qr { display: block; width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; margin: 8px auto 12px; background: #fff; border-radius: 6px; image-rendering: pixelated; }

/* Selector de idioma (i18n.js lo llena) */
.lang-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted, #9aa6bd); }
.lang-pick select { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 5px 8px; font: inherit; cursor: pointer; }
.lang-pick select option { color: #111; }
.login-lang { position: absolute; top: 18px; right: 22px; z-index: 3; color: #cfd8ea; }
.topbar .lang-pick { margin-right: 6px; }

/* Historial por fechas: el formulario desde/hasta y la franja que avisa que no es la vista en vivo. */
.range-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 10px; }
.range-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); }
.range-form input { min-width: 0; }
.range-form .error, .range-form .range-hint { flex-basis: 100%; }
.range-form .range-hint { font-size: 12px; }
.range-form .error:empty { display: none; }
.range-on { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 6px 10px;
  border-radius: 6px; font-size: 13px; background: rgba(90, 160, 255, .1); }
.range-on #rangeText { flex: 1 1 220px; }
.range-on #rangeText .muted { margin-left: 8px; }
.range-on button { padding: 5px 10px; }