.dt-tool{
  --bg: #e9eeea;
  --surface: #ffffff;
  --ink: #142019;
  --muted: #56655c;
  --line: #d3dcd6;
  --sign: #0a5c3a;
  --sign-ink: #ffffff;
  --ok: #17803f;   --ok-bg: #dcf1e3;
  --warn: #9a6a00; --warn-bg: #fbefcf;
  --bad: #b8262a;  --bad-bg: #f9dede;
  --off: #6b7570;  --off-bg: #e6eae7;
  --focus: #1b6fd1;
  --display: "Overpass", "Highway Gothic", "Arial Narrow", system-ui, sans-serif;
  --body: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media  (prefers-color-scheme: dark) {.dt-tool:not([data-theme="light"]){
    --bg: #0e1411; --surface: #161f1a; --ink: #e5ece7; --muted: #9babA1; --line: #2a3630;
    --sign: #0d6a44; --sign-ink: #ffffff;
    --ok: #4cc77d; --ok-bg: #173323; --warn: #e5b440; --warn-bg: #3a2f12;
    --bad: #f07070; --bad-bg: #3d1a1b; --off: #8d9891; --off-bg: #222b26; --focus: #6aa9ff;
    color-scheme: dark;
  }}
.dt-tool[data-theme="dark"]{
  --bg: #0e1411; --surface: #161f1a; --ink: #e5ece7; --muted: #9babA1; --line: #2a3630;
  --sign: #0d6a44; --sign-ink: #ffffff;
  --ok: #4cc77d; --ok-bg: #173323; --warn: #e5b440; --warn-bg: #3a2f12;
  --bad: #f07070; --bad-bg: #3d1a1b; --off: #8d9891; --off-bg: #222b26; --focus: #6aa9ff;
  color-scheme: dark;
}
.dt-tool *{ box-sizing: border-box; }
.dt-tool [hidden]{ display: none !important; }
.dt-tool{ -webkit-text-size-adjust: 100%; }
.dt-tool{
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(14px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-bottom, 0px));
}
.dt-tool img{ max-width: 100%; display: block; }
.dt-tool a{ color: inherit; }
.dt-tool :focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }
.dt-tool .wrap{ max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; }
.dt-tool .top{ display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; }
.dt-tool .top h1{ margin: 0; font: 900 clamp(1.6rem, 4vw, 2.2rem)/1 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.dt-tool .top .sub{ margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.dt-tool .refresh{ display: grid; gap: 6px; min-width: 210px; font: 400 .8rem/1.2 var(--mono); color: var(--muted); }
.dt-tool .refresh .row{ display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.dt-tool .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 6px; }
.dt-tool .dot.off{ background: var(--bad); }
.dt-tool .bar{ height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.dt-tool .bar i{ display: block; height: 100%; width: 100%; background: var(--sign); transform-origin: left; transition: transform 1s linear; }
.dt-tool .btn-refresh{ font: 600 .78rem var(--body); border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.dt-tool .demo-banner{ background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 12px; font-weight: 600; font-size: .88rem; }
.dt-tool .grid{ display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch; }
@media  (min-width: 900px) {.dt-tool .grid{ grid-template-columns: 1fr 1fr; }}
.dt-tool .lado{ background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.dt-tool .letrero{ background: var(--sign); color: var(--sign-ink); padding: 10px; }
.dt-tool .letrero .marco{ border: 2px solid var(--sign-ink); border-radius: 7px; padding: 10px 14px 9px; display: flex; align-items: center; gap: 14px; }
.dt-tool .flecha{ font: 900 2.4rem/1 var(--display); width: 1.1em; text-align: center; flex: none; }
.dt-tool .letrero .txt{ min-width: 0; }
.dt-tool .letrero .eyebrow{ font: 600 .74rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.dt-tool .letrero h2{ margin: 3px 0 2px; font: 800 1.55rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.dt-tool .letrero .ciudad{ font: 600 .95rem/1.2 var(--display); opacity: .95; }
.dt-tool .cuerpo{ padding: 16px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.dt-tool .cuerpo > .acciones{ margin-top: auto; }
.dt-tool .bloque h3{ margin: 0 0 8px; font: 800 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dt-tool .principal{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.dt-tool .cifra{ font: 900 clamp(3.2rem, 11vw, 4.4rem)/.9 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dt-tool .cifra small{ font-size: .38em; font-weight: 800; letter-spacing: 0; margin-left: 4px; }
.dt-tool .principal .detalle{ display: grid; gap: 4px; min-width: 0; }
.dt-tool .principal .detalle .linea{ color: var(--muted); font-size: .93rem; }
.dt-tool .pill{ display: inline-flex; align-items: center; gap: 6px; width: fit-content; font: 800 .78rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 6px 9px 5px; border-radius: 999px; }
.dt-tool .pill::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dt-tool .s-ok{ color: var(--ok);   background: var(--ok-bg); }
.dt-tool .s-warn{ color: var(--warn); background: var(--warn-bg); }
.dt-tool .s-bad{ color: var(--bad);  background: var(--bad-bg); }
.dt-tool .s-off{ color: var(--off);  background: var(--off-bg); }
.dt-tool .carriles{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.dt-tool .carriles td{ padding: 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.dt-tool .carriles tr:first-child td{ border-top: 0; }
.dt-tool .carriles .n{ font-weight: 600; }
.dt-tool .carriles .m{ text-align: right; font: 800 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-tool .carriles .c{ text-align: right; color: var(--muted); font: 400 .8rem/1 var(--mono); white-space: nowrap; padding-left: 12px; width: 1%; }
.dt-tool .tira{ display: inline-block; width: 4px; height: 1.1em; border-radius: 2px; vertical-align: -2px; margin-right: 9px; background: currentColor; }
.dt-tool .nota{ font-size: .86rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.dt-tool .nota.alerta{ color: var(--warn); background: var(--warn-bg); padding: 8px 10px; border-radius: 8px; font-weight: 600; }
.dt-tool .nota.error{ color: var(--bad); background: var(--bad-bg); padding: 8px 10px; border-radius: 8px; font-weight: 600; }
.dt-tool .reportes{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dt-tool .reportes li{ display: flex; gap: 10px; align-items: baseline; font-size: .95rem; }
.dt-tool .reportes .hace{ flex: none; font: 400 .78rem/1 var(--mono); color: var(--muted); width: 5.5em; }
.dt-tool .vacio{ color: var(--muted); font-size: .9rem; margin: 0; }
.dt-tool .fotos{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.dt-tool .foto{ margin: 0; position: relative; border-radius: 8px; overflow: hidden; background: var(--off-bg); aspect-ratio: 4 / 3; max-width: 100%; }
.dt-tool .foto a{ display: block; height: 100%; }
.dt-tool .foto img{ width: 100%; height: 100%; object-fit: cover; }
.dt-tool .foto figcaption{ position: absolute; inset: auto 0 0 0; padding: 14px 8px 6px; font: 600 .74rem/1.2 var(--body); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.dt-tool .foto .credito{ display: block; font-weight: 400; opacity: .85; font-size: .68rem; margin-top: 2px; }
.dt-tool .foto .cam{ position: absolute; top: 6px; left: 6px; font: 800 .66rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: var(--bad); color: #fff; padding: 4px 6px 3px; border-radius: 4px; }
.dt-tool .videos{ display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media  (min-width: 700px) {.dt-tool .videos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.dt-tool .video{ margin: 0; display: grid; grid-template-rows: auto auto; gap: 8px; min-width: 0; }
@media  (min-width: 700px) {.dt-tool .video.impar{ grid-column: 1 / -1; width: calc((100% - 16px) / 2); justify-self: center; }}
.dt-tool .video .marco-video{ position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0b0f0d; }
.dt-tool .video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dt-tool .video .vivo{ position: absolute; top: 8px; left: 8px; z-index: 1; pointer-events: none; font: 800 .68rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: var(--bad); color: #fff; padding: 5px 7px 4px; border-radius: 4px; }
.dt-tool .video .num{ position: absolute; top: 8px; right: 8px; z-index: 1; pointer-events: none; font: 800 .72rem/1 var(--mono); background: rgba(0,0,0,.6); color: #fff; padding: 5px 7px 4px; border-radius: 4px; }
.dt-tool .video figcaption{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; height: 2.4rem; }
.dt-tool .video figcaption strong{ font-weight: 600; font-size: .9rem; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-tool .btn-mini{ flex: none; font: 800 .78rem/1 var(--display); letter-spacing: .02em; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px 6px; background: var(--surface); }
.dt-tool .btn-mini:hover{ border-color: var(--sign); color: var(--sign); }
.dt-tool .camaras .flecha{ font-size: 1.9rem; }
.dt-tool .nota-cam{ margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
.dt-tool .foto.rota{ display: grid; place-items: center; text-align: center; padding: 10px; color: var(--muted); font-size: .8rem; }
.dt-tool .acciones{ display: flex; flex-wrap: wrap; gap: 8px; }
.dt-tool .btn{ font: 800 .92rem/1 var(--display); letter-spacing: .02em; border-radius: 8px; padding: 12px 14px 10px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.dt-tool .btn.prim{ background: var(--sign); color: var(--sign-ink); border-color: var(--sign); }
.dt-tool .btn:hover{ filter: brightness(1.06); }
.dt-tool .pie{ color: var(--muted); font-size: .8rem; line-height: 1.5; }
.dt-tool dialog{ border: 0; border-radius: 14px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
.dt-tool dialog::backdrop{ background: rgba(8, 14, 11, .55); }
.dt-tool dialog form{ padding: 18px; display: grid; gap: 14px; }
.dt-tool dialog h2{ margin: 0; font: 800 1.25rem/1.1 var(--display); }
.dt-tool .seg{ display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dt-tool .seg input{ position: absolute; opacity: 0; pointer-events: none; }
.dt-tool .seg label{ text-align: center; padding: 10px 6px 8px; font: 800 .9rem/1 var(--display); cursor: pointer; color: var(--muted); }
.dt-tool .seg input:checked + label{ background: var(--sign); color: var(--sign-ink); }
.dt-tool .seg input:focus-visible + label{ outline: 3px solid var(--focus); outline-offset: -3px; }
.dt-tool .campo{ display: grid; gap: 6px; }
.dt-tool .campo label{ font-weight: 600; font-size: .9rem; }
.dt-tool .campo input[type=text], .dt-tool .campo input[type=password]{ font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
.dt-tool .campo .ayuda{ font-size: .8rem; color: var(--muted); }
.dt-tool #vista-previa{ border-radius: 8px; max-height: 180px; object-fit: cover; width: 100%; }
.dt-tool .msg{ font-size: .88rem; font-weight: 600; margin: 0; min-height: 1.2em; }
.dt-tool .msg.err{ color: var(--bad); }
.dt-tool .msg.ok{ color: var(--ok); }
.dt-tool .fila-btn{ display: flex; gap: 8px; justify-content: flex-end; }
@media  (prefers-reduced-motion: reduce) {.dt-tool .bar i{ transition: none; }}

.dt-tool{--bg:var(--paper);--panel:var(--sheet);--panel-2:var(--rule-2);--line:var(--rule);--fg:var(--ink);--sign:var(--accent);--sign-ink:#fff;--surface:var(--sheet);--font-ui:var(--f-sans);--font-data:var(--f-mono);--body:var(--f-sans);--display:var(--f-sans);--mono:var(--f-mono);--focus:var(--accent);color:var(--ink);background:transparent;color-scheme:normal;max-width:none;width:100%;padding:0;font-family:var(--f-sans)}
.dt-tool .wrap{max-width:none;padding-inline:0}
.dt-tool .card,.dt-tool .lado,.dt-tool figure{box-shadow:none}
.dt-tool .top{margin-bottom:16px}
.dt-tool button{cursor:pointer}
.dt-tool .letrero{background:var(--accent)}
.dt-tool .letrero .marco{border-color:#fff}
.dt-tool .letrero,.dt-tool .letrero *{color:#fff}
.dt-tool .btn.prim{background:var(--accent);color:#fff;border-color:var(--accent)}
.dt-tool .bar i{background:var(--accent)}
.dt-tool a{color:var(--accent)}
.dt-tool .btn.prim,.dt-tool .letrero{color:#fff}
.dt-tool .top h1,.dt-tool .brand h1{color:var(--ink)}
.dt-tool .brand h1 span{color:var(--accent)}
.dt-tool .now,.dt-tool .chip{border:1px solid var(--rule)}
.dt-tool .nws{border-left-color:var(--accent)}
.dt-tool .ring::after{background:var(--paper)}
.dt-tool .ring{background:conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--rule) 0)}
.dt-tool .btn-refresh{background:var(--sheet);color:var(--ink)}
.dt-tool .stat-v,.dt-tool .zone .clock{color:var(--ink)}
.dt-tool .zone .clock{color:var(--accent)}
.dt-tool .cifra{color:var(--ink)}
.dt-tool .cuerpo{color:var(--ink)}
.dt-tool .video iframe{max-width:100%}
@media(max-width:720px){.dt-tool{padding:0}.dt-tool .card{padding:12px}.dt-tool .wrap{gap:12px}}