/* ─────────────────────────────────────────────────────────────────────────
   BeaconDroid · Demo pública
   Réplica visual del panel con datos falsos. Misma paleta que producción.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#0A111E;
  --card:#0E1A2E;
  --raised:#16283F;
  --line:#1A2E4C;
  --line-2:#23405f;
  --ink:#F0F6FC;
  --ink2:#8B9BB4;
  --dim:#8B9BB4;
  --brand:#00F0C2;
  --brand2:#2A82B9;
  --on-brand:#04121A;
  --sel:rgba(0,240,194,.10);
  --green:#4ADE80;
  --green-bg:rgba(74,222,128,.12);
  --blue:#5FB6E8;
  --blue-bg:rgba(42,130,185,.16);
  --amber:#F5C451;
  --amber-bg:rgba(245,196,81,.12);
  --red:#FF6B6B;
  --red-bg:rgba(255,107,107,.12);
  --pink:#F472B6;
  --pink-bg:rgba(244,114,182,.12);
  --violet:#A78BFA;
  --violet-bg:rgba(167,139,250,.12);
  --radio:15px;
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--fuente);font-size:14px;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input{font:inherit}
button{color:inherit}
a{color:var(--brand2);text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3,p{margin:0}
::selection{background:rgba(0,240,194,.28);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:7px}
.sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
[hidden]{display:none!important}
.ic{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sin-scroll{overflow:hidden}

/* ── FRANJA DEMO ─────────────────────────────────────────────────────── */
.demo-bar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(90deg,rgba(0,240,194,.12),rgba(42,130,185,.12));
  border-bottom:1px solid rgba(0,240,194,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.demo-bar-in{
  max-width:1600px;margin:0 auto;padding:8px 18px;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
}
.demo-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;
  letter-spacing:1.2px;color:var(--on-brand);background:var(--brand);
  padding:4px 9px;border-radius:7px;
}
.live{width:6px;height:6px;border-radius:50%;background:#04121A;animation:latir 1.6s infinite}
@keyframes latir{50%{opacity:.35}}
.demo-texto{font-size:11.5px;color:var(--ink2)}
.demo-links{margin-left:auto;display:flex;align-items:center;gap:14px}
.demo-links a{font-size:11.5px;font-weight:600;color:var(--ink2)}
.demo-links a:hover{color:var(--brand)}
.demo-links .destacado{
  color:var(--on-brand);background:var(--brand);padding:5px 11px;border-radius:7px;
}
.demo-links .destacado:hover{filter:brightness(1.08);color:var(--on-brand)}

/* ── ESTRUCTURA ──────────────────────────────────────────────────────── */
.app{display:flex;min-height:calc(100vh - 38px);max-width:1600px;margin:0 auto}

.side{
  width:252px;flex-shrink:0;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;height:calc(100vh - 38px);
  position:sticky;top:38px;overflow-y:auto;z-index:40;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.brand img{border-radius:10px}
.brand b{display:block;font-size:15.5px;line-height:1.2}
.brand span{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.3px}
.cerrar-menu{margin-left:auto;display:none;background:none;border:0;color:var(--dim);
  font-size:18px;cursor:pointer;padding:4px}

.devsel{padding:14px 12px 0}
.cap{font-size:10.5px;letter-spacing:1.4px;color:var(--dim);text-transform:uppercase;
  font-weight:700;padding:16px 12px 7px}
.devsel .cap{padding:0 12px 8px}
.lista-dispositivos{display:flex;flex-direction:column;gap:4px}
.dev{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:9px 12px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--ink2);font-size:13px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.dev:hover{background:var(--raised);color:var(--ink)}
.dev.on{background:var(--sel);color:var(--brand);font-weight:700;border-color:var(--line)}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.dot.verde{background:var(--green);box-shadow:0 0 0 3px rgba(74,222,128,.12)}
.dot.gris{background:var(--dim)}
.dev-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nav{padding:2px 10px 18px;display:flex;flex-direction:column;gap:3px}
.nav .cap{padding-left:12px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 12px;border:0;border-radius:9px;background:none;
  color:var(--ink2);font-size:13.5px;cursor:pointer;transition:.14s;
}
.nav-item:hover{background:var(--raised);color:var(--ink)}
.nav-item.activo{background:var(--sel);color:var(--brand);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand)}
.nav-item .ic{opacity:.9}
.nav-badge{
  margin-left:auto;font-size:10px;font-weight:700;color:var(--brand);
  background:rgba(0,240,194,.1);border:1px solid rgba(0,240,194,.2);
  min-width:20px;text-align:center;padding:1px 6px;border-radius:10px;
}
.side-pie{margin-top:auto;padding:16px 18px 20px;border-top:1px solid var(--line)}
.mock-chip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:1.1px;
  color:var(--amber);background:var(--amber-bg);border:1px solid rgba(245,196,81,.25);
  padding:3px 8px;border-radius:6px;margin-bottom:9px}
.side-pie p{font-size:11px;color:var(--dim);line-height:1.6;margin-bottom:10px}
.side-pie a{font-size:11.5px;font-weight:600}

/* ── PRINCIPAL ───────────────────────────────────────────────────────── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{
  position:sticky;top:38px;z-index:30;
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:13px 26px;background:var(--card);border-bottom:1px solid var(--line);
}
.abrir-menu{display:none;background:var(--raised);border:1px solid var(--line);
  color:var(--ink);border-radius:9px;width:38px;height:38px;font-size:17px;cursor:pointer}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--raised);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.devinfo b{display:block;font-size:14.5px}
.devinfo span{font-size:11.5px;color:var(--dim)}
.online{
  margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;
  font-weight:600;color:var(--green);background:var(--green-bg);
  padding:6px 12px;border-radius:20px;
}
.online .dot{background:var(--green);animation:latir 2s infinite}
.online.off{color:var(--amber);background:var(--amber-bg)}
.online.off .dot{background:var(--amber);animation:none}
.demo-pill{
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--dim);border:1px dashed var(--line-2);padding:5px 9px;border-radius:8px;
}

.content{padding:24px 26px 40px;max-width:1180px;width:100%}
.vista{display:none}
.vista.activa{display:block;animation:entrar .28s ease}
@keyframes entrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pagetitle{font-size:22px;font-weight:700;margin-bottom:4px}
.pagesub{color:var(--ink2);font-size:13px;margin-bottom:22px}

/* ── KPIs ────────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.kpi{
  display:flex;align-items:center;gap:13px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radio);padding:17px;
}
.kpi-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi.b .kpi-ic{background:var(--blue-bg);color:var(--blue)}
.kpi.g .kpi-ic{background:var(--green-bg);color:var(--green)}
.kpi.a .kpi-ic{background:var(--amber-bg);color:var(--amber)}
.kpi.p .kpi-ic{background:var(--violet-bg);color:var(--violet)}
.kpi b{display:block;font-size:23px;line-height:1.1}
.kpi span{font-size:11px;color:var(--dim)}

/* ── TARJETAS ────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);
  padding:20px;margin-bottom:20px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}
.card-head h2{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-head h2 .ic{color:var(--brand)}
.card-head.mini{margin-top:18px;margin-bottom:10px}
.card-head.mini h2{font-size:12px;color:var(--ink2);text-transform:uppercase;letter-spacing:.8px}
.chip{
  margin-left:auto;font-size:10.5px;color:var(--ink2);background:var(--raised);
  border:1px solid var(--line);padding:3px 10px;border-radius:14px;
  text-decoration:none;cursor:pointer;transition:.14s;white-space:nowrap;
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.suave{color:var(--dim);background:transparent}
.chip.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);font-weight:700}

.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.ficha .d{background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ficha .d i{display:block;font-style:normal;font-size:9.5px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}
.ficha .d b{font-size:12.5px;font-weight:600;word-break:break-word}

/* ── ACCIONES RÁPIDAS ────────────────────────────────────────────────── */
.qgroups{display:flex;flex-direction:column;gap:14px}
.qlab{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ink2);font-weight:700;margin-bottom:7px}
.qlab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(0,240,194,.1)}
.qrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.qa{
  display:flex;align-items:center;gap:8px;background:var(--raised);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  color:var(--ink2);font-size:12px;cursor:pointer;text-align:left;transition:.14s;
}
.qa span{font-size:14px}
.qa:hover{border-color:var(--brand);color:var(--brand);background:rgba(0,240,194,.06)}

/* ── TABLAS ──────────────────────────────────────────────────────────── */
.tabla-wrap{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{
  text-align:left;color:var(--dim);font-size:9.5px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;padding:9px 11px;border-bottom:2px solid var(--line);
  white-space:nowrap;
}
.tabla td{padding:11px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover td{background:rgba(255,255,255,.018)}
.tabla small{color:var(--dim);font-size:10.5px}
.tabla .time{color:var(--dim);white-space:nowrap;font-size:11.5px}
.tabla .from{color:var(--brand);font-weight:600;white-space:nowrap}
.tabla .msg{color:var(--ink)}
.badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:10px;
  font-weight:600;white-space:nowrap;background:var(--raised);color:var(--ink2)}
.badge.b-chat,.badge.b-correo{background:var(--green-bg);color:var(--green)}
.badge.b-captura,.badge.b-estado{background:var(--blue-bg);color:var(--blue)}
.badge.b-ubicacion{background:var(--amber-bg);color:var(--amber)}
.badge.b-aviso{background:var(--red-bg);color:var(--red)}

/* ── DISPOSITIVOS ────────────────────────────────────────────────────── */
.rejilla-dispositivos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:13px;margin-bottom:20px}
.device-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radio);padding:17px;cursor:pointer;transition:.15s;
}
.device-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.device-card.on{border-color:var(--brand);box-shadow:0 0 0 1px rgba(0,240,194,.25) inset}
.dc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.dc-avatar{font-size:24px}
.estado-pill{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:10px}
.estado-pill.verde{color:var(--green);background:var(--green-bg)}
.estado-pill.gris{color:var(--dim);background:var(--raised)}
.device-card b{font-size:13.5px}
.dc-modelo{font-size:11px;color:var(--dim)}
.dc-bat{height:5px;border-radius:4px;background:var(--raised);overflow:hidden;margin:6px 0 3px}
.dc-bat span{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--brand2),var(--brand))}
.dc-meta{display:flex;gap:12px;font-size:10.5px;color:var(--ink2)}
.dc-ultima{font-size:10.5px;color:var(--dim)}

/* ── CHATS ───────────────────────────────────────────────────────────── */
.chat-card{padding:0;overflow:hidden}
.chat-layout{display:grid;grid-template-columns:310px 1fr;min-height:540px}
.chat-lista{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.buscador{display:flex;align-items:center;gap:8px;padding:12px 12px;border-bottom:1px solid var(--line)}
.buscador .ic{color:var(--dim);flex-shrink:0}
.buscador input{
  flex:1;min-width:0;background:var(--raised);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:8px 10px;font-size:12px;
}
.buscador input:focus{outline:none;border-color:var(--brand)}
.chats{overflow-y:auto;max-height:490px;padding:6px}
.chat-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px;border:1px solid transparent;border-radius:10px;background:none;
  cursor:pointer;transition:.13s;
}
.chat-item:hover{background:var(--raised)}
.chat-item.on{background:var(--sel);border-color:var(--line)}
.chat-avatar{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
  color:var(--ink);border:1px solid rgba(255,255,255,.08);
}
.tono-azul{background:linear-gradient(135deg,#1d4a70,#2A82B9)}
.tono-verde{background:linear-gradient(135deg,#14532d,#22a06b)}
.tono-rosa{background:linear-gradient(135deg,#831843,#be3d7a)}
.tono-ambar{background:linear-gradient(135deg,#78350f,#b7791f)}
.tono-morado{background:linear-gradient(135deg,#3b1d70,#7c3aed)}
.tono-cian{background:linear-gradient(135deg,#0f5257,#0e7490)}
.chat-item-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-item-txt b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item-txt small{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.chat-item-meta small{font-size:9.5px;color:var(--dim)}
.no-leidos{
  font-style:normal;font-size:9.5px;font-weight:700;color:var(--on-brand);
  background:var(--brand);min-width:17px;text-align:center;padding:1px 5px;border-radius:9px;
}
.lista-vacia{padding:34px 18px;text-align:center;color:var(--dim);font-size:12px;line-height:1.6}

.chat-panel{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-vacio{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;color:var(--dim);padding:40px;text-align:center;
}
.chat-vacio .ic{width:40px;height:40px;opacity:.35;margin-bottom:4px}
.chat-vacio b{color:var(--ink2);font-size:13.5px}
.chat-vacio span{font-size:11.5px}
.chat-contenido{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-cabecera{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);flex-shrink:0;
}
.chat-cabecera .chat-avatar{width:34px;height:34px;font-size:11px}
.chat-cabecera b{display:block;font-size:13px}
.chat-cabecera small{display:block;font-size:10.5px;color:var(--dim)}
.chat-cabecera .chip{margin-left:auto}
.volver-chat,.volver-correo{
  display:none;background:var(--raised);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;width:32px;height:32px;font-size:15px;cursor:pointer;flex-shrink:0;
}
.chat-mensajes{
  flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:9px;
  max-height:390px;min-height:300px;
  background:
    radial-gradient(500px 200px at 80% 0%,rgba(42,130,185,.05),transparent 70%),
    rgba(0,0,0,.08);
}
.mensaje{display:flex;justify-content:flex-start}
.mensaje.mia{justify-content:flex-end}
.burbuja{
  max-width:78%;padding:9px 13px;border-radius:13px;border-bottom-left-radius:4px;
  background:var(--raised);border:1px solid var(--line);font-size:12.5px;line-height:1.5;
  position:relative;
}
.mensaje.mia .burbuja{
  background:linear-gradient(135deg,rgba(0,240,194,.16),rgba(42,130,185,.16));
  border-color:rgba(0,240,194,.28);border-radius:13px;border-bottom-right-radius:4px;
}
.burbuja .hora{display:block;font-size:9px;color:var(--dim);text-align:right;margin-top:3px}
.chat-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line);flex-shrink:0}
.chat-form input{
  flex:1;min-width:0;background:var(--raised);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:10px 12px;font-size:12.5px;
}
.chat-form input:focus{outline:none;border-color:var(--brand)}
.chat-form button{
  background:var(--brand);color:var(--on-brand);border:0;border-radius:9px;
  padding:9px 17px;font-size:12px;font-weight:700;cursor:pointer;
}
.chat-form button:hover{filter:brightness(1.06)}

/* ── CORREO ──────────────────────────────────────────────────────────── */
.correo-card{padding:0;overflow:hidden}
.correo-layout{display:grid;grid-template-columns:340px 1fr;min-height:540px}
.correo-lista{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.correos{overflow-y:auto;max-height:490px;padding:6px}
.correo-item{
  position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:11px 10px;border:1px solid transparent;border-radius:10px;background:none;cursor:pointer;
}
.correo-item:hover{background:var(--raised)}
.correo-item.on{background:var(--sel);border-color:var(--line)}
.correo-item.no-leido .correo-item-txt b{color:var(--ink)}
.correo-avatar{
  width:35px;height:35px;border-radius:10px;display:inline-flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);
}
.correo-item-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.correo-item-txt b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.correo-item-txt span{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.correo-item-txt small{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.correo-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.correo-item-meta small{font-size:9.5px;color:var(--dim)}
.punto-nuevo{width:7px;height:7px;border-radius:50%;background:var(--brand);display:block}
.correo-panel{display:flex;flex-direction:column;min-width:0}
.correo-contenido{padding:22px 24px;overflow-y:auto;max-height:540px}
.correo-contenido h3{font-size:18px;line-height:1.3;margin-bottom:16px}
.correo-meta{display:flex;align-items:center;gap:10px;padding-bottom:16px;
  border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.correo-meta b{display:block;font-size:12.5px;word-break:break-all}
.correo-meta small{display:block;font-size:10.5px;color:var(--dim)}
.correo-meta .chip{margin-left:auto}
.correo-texto{font-size:13px;line-height:1.75;color:var(--ink2)}
.correo-texto p{margin-bottom:13px}
.correo-aviso{
  margin-top:22px;padding:9px 12px;border-radius:8px;font-size:10.5px;color:var(--dim);
  background:rgba(255,255,255,.025);border:1px dashed var(--line);
}

/* ── GALERÍA ─────────────────────────────────────────────────────────── */
.filtros{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.filtros .chip{margin-left:0}
.rejilla-capturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px}
.captura{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:0;overflow:hidden;cursor:pointer;text-align:left;transition:.16s;
}
.captura:hover{border-color:var(--brand);transform:translateY(-2px)}
.captura-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:9/13;overflow:hidden;
  background:linear-gradient(160deg,#13243c,#0a1424);
}
.captura-visual::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  opacity:.5;
}
.captura-visual.tono-azul{background:linear-gradient(160deg,#12304a,#0a1b2c)}
.captura-visual.tono-verde{background:linear-gradient(160deg,#0f3528,#0a1f1a)}
.captura-visual.tono-rosa{background:linear-gradient(160deg,#3b1428,#1d0a14)}
.captura-visual.tono-ambar{background:linear-gradient(160deg,#3b2a10,#1d1508)}
.captura-visual.tono-morado{background:linear-gradient(160deg,#2a1a4a,#140d24)}
.captura-visual.tono-cian{background:linear-gradient(160deg,#0c3a40,#061d20)}
.captura-visual[data-tipo="camara"]::before{
  background:
    radial-gradient(circle at 72% 22%,rgba(245,196,81,.55) 0 5%,transparent 6%),
    linear-gradient(165deg,transparent 55%,rgba(74,222,128,.18) 55% 66%,transparent 66%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px);
}
.captura-visual[data-tipo="galeria"]::before{
  background:
    linear-gradient(90deg,transparent 32%,rgba(255,255,255,.06) 32% 33%,transparent 33% 65%,rgba(255,255,255,.06) 65% 66%,transparent 66%),
    linear-gradient(0deg,transparent 32%,rgba(255,255,255,.06) 32% 33%,transparent 33% 65%,rgba(255,255,255,.06) 65% 66%,transparent 66%);
}
.mock-screen{
  position:relative;z-index:1;width:62%;aspect-ratio:9/18;border-radius:9px;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.28);
  padding:14% 10%;display:flex;flex-direction:column;gap:7px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.mock-screen i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.22);width:100%}
.mock-screen i:nth-child(2){width:72%}
.mock-screen i:nth-child(3){width:88%;margin-top:8%}
.mock-screen i:nth-child(4){width:54%}
.captura-tipo{
  position:absolute;left:8px;bottom:8px;z-index:2;font-size:8.5px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:var(--ink);
  background:rgba(4,18,26,.7);border:1px solid rgba(255,255,255,.14);
  padding:2px 6px;border-radius:5px;backdrop-filter:blur(4px);
}
.captura-info{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-top:1px solid var(--line)}
.captura-info b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.captura-info span{font-size:9.5px;color:var(--dim);white-space:nowrap}

/* Visor */
.lightbox{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,16,.86);backdrop-filter:blur(6px);padding:20px;
}
.lightbox[hidden]{display:none}
.lightbox-caja{
  position:relative;width:min(460px,100%);background:var(--card);
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox-cerrar{
  position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;
  border-radius:9px;border:1px solid var(--line);background:rgba(10,17,30,.8);
  color:var(--ink);font-size:15px;cursor:pointer;
}
.lightbox-cerrar:hover{border-color:var(--brand);color:var(--brand)}
.lightbox-visual{
  position:relative;aspect-ratio:9/13;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#13243c,#0a1424);overflow:hidden;
}
.lightbox-visual.tono-azul{background:linear-gradient(160deg,#12304a,#0a1b2c)}
.lightbox-visual.tono-verde{background:linear-gradient(160deg,#0f3528,#0a1f1a)}
.lightbox-visual.tono-rosa{background:linear-gradient(160deg,#3b1428,#1d0a14)}
.lightbox-visual.tono-ambar{background:linear-gradient(160deg,#3b2a10,#1d1508)}
.lightbox-visual.tono-morado{background:linear-gradient(160deg,#2a1a4a,#140d24)}
.lightbox-visual.tono-cian{background:linear-gradient(160deg,#0c3a40,#061d20)}
.lightbox-visual .mock-screen{width:48%;padding:16% 10%}
.lightbox-pie{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 16px;border-top:1px solid var(--line)}
.lightbox-pie b{font-size:12.5px}
.lightbox-pie span{font-size:10.5px;color:var(--dim)}

/* ── MAPA ────────────────────────────────────────────────────────────── */
.mapa-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;align-items:start}
.mapa-card{padding:0;overflow:hidden}
.mapa{
  position:relative;aspect-ratio:16/11;min-height:330px;overflow:hidden;
  background:
    radial-gradient(circle at 30% 40%,rgba(42,130,185,.09),transparent 55%),
    linear-gradient(155deg,#0c1a2b,#08111e);
}
.mapa-calles{
  position:absolute;inset:-20%;
  background:
    repeating-linear-gradient(28deg,transparent 0 42px,rgba(120,170,210,.10) 42px 45px,transparent 45px 90px),
    repeating-linear-gradient(118deg,transparent 0 58px,rgba(120,170,210,.07) 58px 61px,transparent 61px 116px);
}
.mapa-rio{
  position:absolute;left:-10%;top:48%;width:130%;height:36px;
  background:rgba(42,130,185,.14);transform:rotate(-8deg);border-radius:40%;
  box-shadow:0 0 0 6px rgba(42,130,185,.04);
}
.mapa-parque{
  position:absolute;right:8%;top:12%;width:26%;height:30%;border-radius:16px;
  background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.12);
  transform:rotate(6deg);
}
.mapa-pin{
  position:absolute;left:var(--x,48%);top:var(--y,46%);transform:translate(-50%,-100%);
  width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--brand);
  rotate:-45deg;box-shadow:0 0 0 6px rgba(0,240,194,.15),0 8px 20px rgba(0,0,0,.4);
  transition:left .5s ease,top .5s ease;
}
.mapa-pin span{
  position:absolute;inset:7px;border-radius:50%;background:var(--on-brand);
}
.mapa-etiqueta{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-size:10.5px;color:var(--ink2);background:rgba(10,17,30,.8);
  border:1px solid var(--line);border-radius:20px;padding:4px 12px;white-space:nowrap;
}
.mapa-brujula{
  position:absolute;right:12px;top:12px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:rgba(10,17,30,.7);display:flex;
  align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--dim);
}
.ficha-ubicacion{grid-template-columns:1fr 1fr;margin-bottom:14px}
.timeline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.timeline li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.timeline li:last-child{border-bottom:0}
.tl-hora{font-family:var(--mono);font-size:10px;color:var(--brand);flex-shrink:0;width:42px}

/* ── PIE / TOAST ─────────────────────────────────────────────────────── */
.pie-demo{
  margin-top:auto;padding:16px 26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:10.5px;color:var(--dim);background:rgba(14,26,46,.35);
}
.toast{
  position:fixed;left:50%;bottom:24px;z-index:110;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  background:var(--brand);color:var(--on-brand);font-size:12.5px;font-weight:600;
  padding:11px 18px;border-radius:11px;max-width:min(520px,calc(100% - 32px));
  box-shadow:0 16px 40px rgba(0,0,0,.45);transition:.22s;text-align:center;
}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* ── VISTAS AMPLIADAS ────────────────────────────────────────────────── */
.vivo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start}
.vivo-card{padding:18px}
.vivo-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.phone-shell{max-width:290px;margin:0 auto;background:#040811;border:1px solid var(--line-2);
border-radius:34px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.phone-screen{position:relative;aspect-ratio:9/19.2;border-radius:25px;overflow:hidden;
background:linear-gradient(160deg,#12304a 0%,#0b1b2e 55%,#071322 100%);
padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.phone-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);
opacity:.45}
.phone-status{display:flex;justify-content:space-between;font-size:8.5px;color:#cfe3f5;position:relative;z-index:1}
.phone-clock{font-size:42px;font-weight:300;letter-spacing:-.04em;color:#fff;text-align:center;
margin-top:18px;position:relative;z-index:1}
.phone-date{text-align:center;font-size:9.5px;color:#b8cbe0;margin-top:-4px;position:relative;z-index:1}
.phone-widget{display:flex;justify-content:space-between;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:7px 10px;font-size:9px;
color:#dceaf7;margin-top:8px;position:relative;z-index:1}
.phone-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:auto;position:relative;z-index:1}
.phone-apps span{aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:16px}
.phone-dock{display:flex;justify-content:space-around;background:rgba(255,255,255,.08);
border-radius:14px;padding:7px 10px;font-size:16px;position:relative;z-index:1}
.vivo-acciones{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.vivo-acciones .qa{flex:1;justify-content:center}

.archivos-lista{display:flex;flex-direction:column}
.archivo-item{display:flex;align-items:center;gap:12px;padding:11px 6px;border:0;
border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;
cursor:pointer;font-family:inherit;font-size:12px;width:100%}
.archivo-item:last-child{border-bottom:0}
.archivo-item:hover{background:var(--raised)}
.archivo-icono{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
justify-content:center;background:var(--raised);font-size:18px;flex-shrink:0}
.archivo-nombre{flex:1;min-width:0;display:flex;flex-direction:column}
.archivo-nombre b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archivo-nombre small{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.archivo-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;
font-size:10.5px;color:var(--dim);flex-shrink:0}
.archivo-meta span{color:var(--ink2)}

.rejilla-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.app-card{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);
border:1px solid var(--line);border-radius:13px;padding:14px;cursor:pointer;color:var(--ink);
font-family:inherit;transition:.15s}
.app-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.app-icono{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
justify-content:center;font-size:20px;flex-shrink:0;border:1px solid rgba(255,255,255,.08)}
.app-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.app-info b{font-size:12.5px}
.app-info small{font-size:9.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-info span{font-size:10.5px;color:var(--ink2);margin-top:2px}

.notif-feed{display:flex;flex-direction:column}
.notif-item{display:flex;align-items:flex-start;gap:11px;padding:11px 6px;border:0;
border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;
cursor:pointer;font-family:inherit;width:100%}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--raised)}
.notif-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px}
.notif-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-info b{font-size:12.5px}
.notif-info b small{color:var(--brand);font-size:9.5px;font-weight:600;margin-left:5px}
.notif-info span{font-size:11.5px;color:var(--dim);line-height:1.5}
.notif-hora{font-size:9.5px;color:var(--dim);white-space:nowrap;flex-shrink:0}

.config-lista{display:flex;flex-direction:column}
.config-item{display:flex;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line)}
.config-item:last-child{border-bottom:0}
.config-txt{flex:1;min-width:0}
.config-txt b{display:block;font-size:12.5px}
.config-txt span{display:block;font-size:11px;color:var(--dim);line-height:1.5}
.switch{width:44px;height:24px;border-radius:20px;background:var(--raised);
border:1px solid var(--line);position:relative;cursor:pointer;flex-shrink:0;transition:.18s}
.switch span{position:absolute;left:3px;top:2px;width:18px;height:18px;border-radius:50%;
background:var(--dim);transition:.18s}
.switch.on{background:rgba(0,240,194,.2);border-color:rgba(0,240,194,.5)}
.switch.on span{left:21px;background:var(--brand)}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .side{
    position:fixed;left:0;top:38px;bottom:0;height:auto;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 60px rgba(0,0,0,.5);
  }
  .side.abierta{transform:none}
  .cerrar-menu{display:block}
  .abrir-menu{display:block}
  body.menu-abierto::before{
    content:"";position:fixed;inset:38px 0 0;background:rgba(4,8,16,.55);
    z-index:35;backdrop-filter:blur(2px);
  }
  .main{width:100%}
  .top{top:38px}
  .chat-layout{grid-template-columns:280px 1fr}
  .correo-layout{grid-template-columns:300px 1fr}
}

@media (max-width:820px){
  .demo-texto{display:none}
  .mapa-grid{grid-template-columns:1fr}
  .vivo-grid{grid-template-columns:1fr}
  .phone-shell{max-width:260px}
  .chat-layout,.correo-layout{grid-template-columns:1fr;min-height:0}
  .chat-lista,.correo-lista{border-right:0;border-bottom:1px solid var(--line)}
  .chats,.correos{max-height:300px}
  .chat-panel,.correo-panel{display:none;min-height:420px}
  .chat-abierto .chat-lista{display:none}
  .chat-abierto .chat-panel{display:flex}
  .correo-abierto .correo-lista{display:none}
  .correo-abierto .correo-panel{display:flex}
  .volver-chat{display:inline-flex;align-items:center;justify-content:center}
  .volver-correo{display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:14px;width:auto;height:auto;padding:6px 10px;font-size:11px;gap:4px}
  .chat-mensajes{max-height:none;min-height:300px}
  .correo-contenido{max-height:none}
  .correo-contenido h3{font-size:16px}
}

@media (max-width:620px){
  .content{padding:18px 14px 30px}
  .top{padding:11px 14px;gap:9px}
  .demo-pill{display:none}
  .online{font-size:10.5px;padding:5px 9px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:9px}
  .kpi{padding:12px;gap:10px}
  .kpi-ic{width:37px;height:37px;border-radius:10px}
  .kpi b{font-size:18px}
  .kpi span{font-size:9.5px}
  .card{padding:15px}
  .ficha{grid-template-columns:1fr 1fr}
  .ficha-ubicacion{grid-template-columns:1fr 1fr}
  .rejilla-capturas{grid-template-columns:repeat(2,1fr);gap:9px}
  .rejilla-apps{grid-template-columns:1fr}
  .captura-visual{aspect-ratio:3/4}
  .captura-info{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px}
  .pie-demo{padding:13px 14px;flex-direction:column;gap:4px}
  .demo-links{gap:9px}
  .demo-links a:first-child{display:none}
  .chat-item-txt small{max-width:150px}
  .correo-item-txt small{max-width:150px}
  .tabla{font-size:12px}
  .tabla th,.tabla td{padding:8px}
}

@media (max-width:420px){
  .kpis{grid-template-columns:1fr 1fr}
  .rejilla-capturas{grid-template-columns:1fr 1fr}
  .demo-badge{font-size:9px}
  .demo-links .destacado{padding:4px 8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ═════════════════════════════════════════════════════════════════════════
   TEMAS DEL PANEL — mismos nombres y variables que server/temas/*.html
   El atributo data-tema se pone en <html> y se guarda en localStorage.
   ═════════════════════════════════════════════════════════════════════════ */
html[data-tema="windows11"]{
  --bg:#F3F3F3; --card:#FBFBFB; --raised:#F0F0F0; --line:#E0E0E0; --line-2:#D4D4D4;
  --ink:#1A1A1A; --ink2:#5C5C5C; --dim:#7A7A7A; --brand:#0067C0; --brand2:#005FB8;
  --on-brand:#FFFFFF; --sel:rgba(0,103,192,.12);
  --green:#0F7B0F; --green-bg:rgba(15,123,15,.10);
  --blue:#0067C0; --blue-bg:rgba(0,103,192,.10);
  --amber:#9D5D00; --amber-bg:rgba(157,93,0,.12);
  --red:#C42B1C; --red-bg:rgba(196,43,28,.10);
  --pink:#B4009E; --pink-bg:rgba(180,0,158,.10);
  --violet:#6B3FA0; --violet-bg:rgba(107,63,160,.10);
  --sombra:0 2px 10px rgba(0,0,0,.08); --radius:8px; --radio:8px; color-scheme:light;
}
html[data-tema="windows11"] body{
  font-family:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
}
html[data-tema="ubuntu"]{
  --bg:#2C001E; --card:#3B0A2A; --raised:#4A0F35; --line:#5E1B45; --line-2:#6F2A55;
  --ink:#FFF4F9; --ink2:#D6B8C8; --dim:#A98B9B; --brand:#E95420; --brand2:#F08C00;
  --on-brand:#1A050F; --sel:rgba(233,84,32,.20);
  --green:#6BCB77; --green-bg:rgba(107,203,119,.12);
  --blue:#7AB8FF; --blue-bg:rgba(122,184,255,.12);
  --amber:#F6C177; --amber-bg:rgba(246,193,119,.12);
  --red:#FF6B6B; --red-bg:rgba(255,107,107,.12);
  --pink:#F08FC6; --pink-bg:rgba(240,143,198,.12);
  --violet:#C39BE8; --violet-bg:rgba(195,155,232,.12);
  --sombra:0 8px 24px rgba(0,0,0,.35); --radius:10px; --radio:10px; color-scheme:dark;
}
html[data-tema="ubuntu"] body{
  font-family:"Ubuntu","Ubuntu Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
html[data-tema="claro"]{
  --bg:#F3F6FA; --card:#FFFFFF; --raised:#EDF2F8; --line:#D5DEE9; --line-2:#C3CFDD;
  --ink:#12202E; --ink2:#46586A; --dim:#6B7C8E; --brand:#0E9F7C; --brand2:#2A82B9;
  --on-brand:#FFFFFF; --sel:rgba(14,159,124,.13);
  --green:#12855F; --green-bg:rgba(18,133,95,.12);
  --blue:#1F6FB2; --blue-bg:rgba(31,111,178,.12);
  --amber:#A76A12; --amber-bg:rgba(167,106,18,.12);
  --red:#C0392B; --red-bg:rgba(192,57,43,.10);
  --pink:#B83C78; --pink-bg:rgba(184,60,120,.12);
  --violet:#6D5BD0; --violet-bg:rgba(109,91,208,.12);
  --sombra:0 10px 26px rgba(16,32,48,.08); --radius:12px; --radio:12px; color-scheme:light;
}
html[data-tema="windows"]{
  --bg:#F3F3F3; --card:#FFFFFF; --raised:#ECECEC; --line:#D9D9D9; --line-2:#C8C8C8;
  --ink:#1B1B1B; --ink2:#4A4A4A; --dim:#6E6E6E; --brand:#0067C0; --brand2:#005BA1;
  --on-brand:#FFFFFF; --sel:rgba(0,103,192,.12);
  --green:#107C10; --green-bg:rgba(16,124,16,.10);
  --blue:#0067C0; --blue-bg:rgba(0,103,192,.10);
  --amber:#9D5D00; --amber-bg:rgba(157,93,0,.12);
  --red:#C42B1C; --red-bg:rgba(196,43,28,.10);
  --pink:#B4009E; --pink-bg:rgba(180,0,158,.10);
  --violet:#6B3FA0; --violet-bg:rgba(107,63,160,.10);
  --sombra:0 8px 22px rgba(0,0,0,.10); --radius:6px; --radio:6px; color-scheme:light;
}
html[data-tema="mac"]{
  --bg:#F2F2F7; --card:#FFFFFF; --raised:#F5F5F7; --line:#DCDCE0; --line-2:#C8C8CE;
  --ink:#1D1D1F; --ink2:#6E6E73; --dim:#8E8E93; --brand:#007AFF; --brand2:#0062CC;
  --on-brand:#FFFFFF; --sel:rgba(0,122,255,.12);
  --green:#1DA35C; --green-bg:rgba(29,163,92,.12);
  --blue:#007AFF; --blue-bg:rgba(0,122,255,.12);
  --amber:#B25000; --amber-bg:rgba(178,80,0,.12);
  --red:#D93025; --red-bg:rgba(217,48,37,.10);
  --pink:#C2185B; --pink-bg:rgba(194,24,91,.10);
  --violet:#6D5BD0; --violet-bg:rgba(109,91,208,.10);
  --sombra:0 8px 24px rgba(0,0,0,.10); --radius:12px; --radio:12px; color-scheme:light;
}
html[data-tema="legible"]{
  --bg:#1e1e24; --card:#25252d; --raised:#2e2e37; --line:#3a3a44; --line-2:#4a4a55;
  --ink:#e6e6e6; --ink2:#b0b0b8; --dim:#8f8f99; --brand:#4f9cf9; --brand2:#3b82f6;
  --on-brand:#0b1016; --sel:rgba(79,156,249,.16);
  --green:#5bd68a; --green-bg:rgba(91,214,138,.13);
  --blue:#68b6ff; --blue-bg:rgba(104,182,255,.13);
  --amber:#f0c05a; --amber-bg:rgba(240,192,90,.13);
  --red:#ff7a7a; --red-bg:rgba(255,122,122,.12);
  --pink:#f08fc6; --pink-bg:rgba(240,143,198,.12);
  --violet:#b6a4ff; --violet-bg:rgba(182,164,255,.12);
  --sombra:0 10px 28px rgba(0,0,0,.45); --radius:12px; --radio:12px; color-scheme:dark;
}
html[data-tema="matrix"]{
  --bg:#040A05; --card:#08150C; --raised:#0D1F13; --line:#1B3D25; --line-2:#255332;
  --ink:#D6FFDF; --ink2:#79C98D; --dim:#4F8F61; --brand:#33FF88; --brand2:#00B25A;
  --on-brand:#03150A; --sel:rgba(51,255,136,.13);
  --green:#33FF88; --green-bg:rgba(51,255,136,.10);
  --blue:#5AD2FF; --blue-bg:rgba(90,210,255,.10);
  --amber:#E5D45A; --amber-bg:rgba(229,212,90,.10);
  --red:#FF5C5C; --red-bg:rgba(255,92,92,.10);
  --pink:#FF7AD9; --pink-bg:rgba(255,122,217,.10);
  --violet:#7CFFB0; --violet-bg:rgba(124,255,176,.10);
  --sombra:0 10px 30px rgba(0,0,0,.6); --radius:12px; --radio:6px; color-scheme:dark;
  font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
}
html[data-tema="oscuro"]{color-scheme:dark}

/* ── Capa de compatibilidad: todo sale de variables del tema ─────────── */
body{background:var(--bg);background-image:none}
.demo-bar{background:var(--card);border-bottom-color:var(--line)}
.live{background:var(--on-brand)}
.demo-links .destacado{color:var(--on-brand);background:var(--brand)}
.dot.verde{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.nav-badge{background:var(--sel);border-color:var(--line)}
.mock-chip{color:var(--amber);background:var(--amber-bg);border-color:var(--line)}
.ficha .d{background:var(--raised)}
.qa:hover{background:var(--sel)}
.tabla tbody tr:hover td{background:var(--raised)}
.device-card.on{box-shadow:inset 0 0 0 1px var(--brand)}
.chat-avatar,.correo-avatar,.app-icono,.notif-dot{background:var(--tono,var(--brand));
  border-color:var(--line);color:var(--on-brand)}
.tono-azul{--tono:var(--brand2)}
.tono-verde{--tono:var(--green)}
.tono-rosa{--tono:var(--pink)}
.tono-ambar{--tono:var(--amber)}
.tono-morado{--tono:var(--violet)}
.tono-cian{--tono:var(--blue)}
.chat-cabecera{background:var(--card)}
.chat-mensajes{background:var(--bg)}
.mensaje.mia .burbuja{background:var(--sel);border-color:var(--line)}
.correo-aviso{background:var(--raised)}
.captura-visual{background:var(--card)}
.captura-visual::before{background:repeating-linear-gradient(0deg,
  color-mix(in srgb,var(--ink) 4%,transparent) 0 1px,transparent 1px 4px)}
.captura-visual[data-tipo="camara"]::before{background:
  radial-gradient(circle at 72% 22%,color-mix(in srgb,var(--amber) 55%,transparent) 0 5%,transparent 6%),
  linear-gradient(165deg,transparent 55%,color-mix(in srgb,var(--green) 18%,transparent) 55% 66%,transparent 66%),
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 4%,transparent) 0 1px,transparent 1px 5px)}
.captura-visual[data-tipo="galeria"]::before{background:
  linear-gradient(90deg,transparent 32%,color-mix(in srgb,var(--ink) 8%,transparent) 32% 33%,transparent 33% 65%,color-mix(in srgb,var(--ink) 8%,transparent) 65% 66%,transparent 66%),
  linear-gradient(0deg,transparent 32%,color-mix(in srgb,var(--ink) 8%,transparent) 32% 33%,transparent 33% 65%,color-mix(in srgb,var(--ink) 8%,transparent) 65% 66%,transparent 66%)}
.captura-visual.tono-azul,.lightbox-visual.tono-azul{background:color-mix(in srgb,var(--brand2) 22%,var(--card))}
.captura-visual.tono-verde,.lightbox-visual.tono-verde{background:color-mix(in srgb,var(--green) 22%,var(--card))}
.captura-visual.tono-rosa,.lightbox-visual.tono-rosa{background:color-mix(in srgb,var(--pink) 22%,var(--card))}
.captura-visual.tono-ambar,.lightbox-visual.tono-ambar{background:color-mix(in srgb,var(--amber) 22%,var(--card))}
.captura-visual.tono-morado,.lightbox-visual.tono-morado{background:color-mix(in srgb,var(--violet) 22%,var(--card))}
.captura-visual.tono-cian,.lightbox-visual.tono-cian{background:color-mix(in srgb,var(--blue) 22%,var(--card))}
.mock-screen{border-color:var(--line);background:var(--card)}
.mock-screen i{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.captura-tipo{background:var(--card);border-color:var(--line);color:var(--ink)}
.lightbox{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.lightbox-cerrar{background:var(--card);border-color:var(--line)}
.lightbox-caja{box-shadow:var(--sombra)}
.lightbox-visual{background:var(--card)}
.mapa{background:var(--card)}
.mapa-calles{background:
  repeating-linear-gradient(28deg,transparent 0 42px,color-mix(in srgb,var(--ink2) 12%,transparent) 42px 45px,transparent 45px 90px),
  repeating-linear-gradient(118deg,transparent 0 58px,color-mix(in srgb,var(--ink2) 9%,transparent) 58px 61px,transparent 61px 116px)}
.mapa-rio{background:color-mix(in srgb,var(--brand2) 18%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand2) 6%,transparent)}
.mapa-parque{background:color-mix(in srgb,var(--green) 12%,transparent);
  border-color:color-mix(in srgb,var(--green) 20%,transparent)}
.mapa-pin{background:var(--brand);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 15%,transparent),var(--sombra)}
.mapa-etiqueta{background:var(--card);border-color:var(--line)}
.mapa-brujula{background:var(--card);border-color:var(--line)}
.pie-demo{background:var(--card)}
.toast{box-shadow:var(--sombra)}
.phone-shell{background:var(--bg);border-color:var(--line);box-shadow:var(--sombra)}
.phone-screen{background:linear-gradient(160deg,
  color-mix(in srgb,var(--brand2) 22%,var(--card)),var(--card))}
.phone-status,.phone-date{color:var(--ink2)}
.phone-clock{color:var(--ink)}
.phone-widget{background:var(--raised);border-color:var(--line);color:var(--ink2)}
.phone-apps span,.phone-dock{background:var(--raised);border-color:var(--line)}
.switch.on{background:var(--sel);border-color:var(--brand)}
body.menu-abierto::before{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.side{box-shadow:var(--sombra)}

/* Selector de tema de la demo (mismos temas que el panel) */
.tema-demo{display:flex;align-items:center;gap:6px;margin-left:auto;
  font-size:10.5px;color:var(--dim);white-space:nowrap}
.tema-demo select{background:var(--raised);border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:4px 8px;font-size:10.5px;font-family:inherit;cursor:pointer}
.tema-demo select:focus{outline:none;border-color:var(--brand)}
.demo-links{margin-left:10px}
@media (max-width:620px){.tema-demo span{display:none}.tema-demo{margin-left:auto}}
::selection{background:var(--sel);color:var(--ink)}
.mock-screen{box-shadow:var(--sombra)}
.phone-screen::after{background:repeating-linear-gradient(0deg,
  color-mix(in srgb,var(--ink) 4%,transparent) 0 1px,transparent 1px 4px)}

/* ── NUEVAS VISTAS: GALERÍA, AUDIO, DATOS Y KEYLOGGER ───────────────── */
.rejilla-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.foto-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);
padding:0;overflow:hidden;cursor:pointer;text-align:left;color:var(--ink);font-family:inherit;
transition:.16s;min-width:0}
.foto-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.foto-visual{position:relative;display:flex;align-items:center;justify-content:center;
aspect-ratio:4/3;background:color-mix(in srgb,var(--tono,var(--brand)) 22%,var(--card))}
.foto-visual::before{content:"";position:absolute;inset:12px;border:1px solid
color-mix(in srgb,var(--ink) 16%,transparent);border-radius:6px}
.foto-icono{font-size:32px;opacity:.75;position:relative;z-index:1}
.foto-info{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:9px 11px;border-top:1px solid var(--line)}
.foto-info b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto-info span{font-size:9.5px;color:var(--dim);white-space:nowrap}
.foto-grande{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink2)}
.foto-grande>span:first-child{font-size:58px;line-height:1}
.foto-grande small{font-size:12px;color:var(--ink2)}

.audio-lista{display:flex;flex-direction:column}
.audio-item{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line)}
.audio-item:last-child{border-bottom:0}
.audio-play{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
background:var(--raised);color:var(--brand);cursor:pointer;flex-shrink:0;font-size:12px}
.audio-play:hover{border-color:var(--brand);background:var(--sel)}
.audio-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.audio-info b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-info small{font-size:10px;color:var(--dim)}
.audio-wave{display:flex;align-items:center;gap:2px;height:26px;flex-shrink:0}
.audio-wave i{display:block;width:3px;border-radius:2px;background:var(--line-2);height:28%}
.audio-wave i:nth-child(2n){height:62%}
.audio-wave i:nth-child(3n){height:88%}
.audio-wave i:nth-child(5n){height:45%}
.audio-item.playing .audio-wave i{background:var(--brand);animation:audioPulse .9s ease-in-out infinite alternate}
@keyframes audioPulse{to{transform:scaleY(.55)}}
.audio-dur{font-size:10px;color:var(--dim);flex-shrink:0}

.nav-historial{display:flex;flex-direction:column;margin-top:10px}
.nav-hist-item{display:flex;align-items:center;gap:10px;padding:10px 4px;border:0;
border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;
cursor:pointer;font-family:inherit;width:100%}
.nav-hist-item:last-child{border-bottom:0}
.nav-hist-item:hover{background:var(--raised)}
.nav-hist-icono{width:30px;height:30px;border-radius:8px;background:var(--raised);
display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.nav-hist-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nav-hist-txt b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-hist-txt small{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-hist-meta{flex-shrink:0;text-align:right}
.nav-hist-meta small{font-size:9.5px;color:var(--dim);white-space:nowrap}

.contactos-grid{display:grid;grid-template-columns:360px 1fr;gap:14px;align-items:start}
.contactos-lista{display:flex;flex-direction:column;max-height:600px;overflow-y:auto}
.contacto-card{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid transparent;
border-radius:9px;background:none;color:var(--ink);text-align:left;cursor:pointer;font-family:inherit;width:100%}
.contacto-card:hover{background:var(--raised)}
.contacto-card.on{background:var(--sel);border-color:var(--line)}
.contacto-avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;
justify-content:center;font-size:11px;font-weight:700;color:var(--on-brand);flex-shrink:0;
border:1px solid var(--line)}
.contacto-avatar.grande{width:64px;height:64px;font-size:20px;margin-bottom:10px}
.contacto-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.contacto-txt b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contacto-txt small{font-size:10.5px;color:var(--dim)}
.contacto-fav{color:var(--amber);font-size:13px;flex-shrink:0}
.contacto-detalle{min-height:260px}
.contacto-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:7px;color:var(--dim);text-align:center;padding:50px 20px;font-size:12px}
.contacto-vacio .ic{width:34px;height:34px;opacity:.4;margin-bottom:4px}
.contacto-vacio b{color:var(--ink2);font-size:13px}
.contacto-ficha h3{font-size:16px;margin-bottom:4px}

.llamadas-lista{display:flex;flex-direction:column}
.llamada-item{display:flex;align-items:center;gap:11px;padding:11px 4px;border:0;
border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;
cursor:pointer;font-family:inherit;width:100%}
.llamada-item:last-child{border-bottom:0}
.llamada-item:hover{background:var(--raised)}
.llamada-tipo{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:13px;flex-shrink:0;background:var(--raised);color:var(--dim)}
.llamada-tipo.entrante{background:var(--green-bg);color:var(--green)}
.llamada-tipo.saliente{background:var(--blue-bg);color:var(--blue)}
.llamada-tipo.perdida{background:var(--red-bg);color:var(--red)}
.llamada-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.llamada-info b{font-size:12.5px}
.llamada-info small{font-size:10.5px;color:var(--dim)}
.llamada-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.llamada-meta small{font-size:9.5px;color:var(--dim);white-space:nowrap}
.llamada-meta b{font-size:10.5px;color:var(--ink2);font-weight:600}

.calendario-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
.cal-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-semana span{text-align:center;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dia{position:relative;aspect-ratio:1;border:1px solid transparent;border-radius:6px;
background:var(--raised);color:var(--ink2);cursor:pointer;font-family:inherit;font-size:11px}
.cal-dia:hover{border-color:var(--brand)}
.cal-dia.vacio{background:transparent;border:0;cursor:default}
.cal-dia.hoy{background:var(--sel);color:var(--brand);font-weight:700}
.cal-dia.sel{box-shadow:inset 0 0 0 1px var(--brand)}
.cal-punto{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
width:4px;height:4px;border-radius:50%;background:var(--brand)}
.cal-eventos{display:flex;flex-direction:column}
.cal-evento{display:flex;gap:12px;padding:11px 2px;border:0;border-bottom:1px solid var(--line);
background:none;color:var(--ink);text-align:left;cursor:pointer;font-family:inherit;width:100%}
.cal-evento:last-child{border-bottom:0}
.cal-evento:hover{background:var(--raised)}
.cal-evento-hora{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:10px;color:var(--brand);flex-shrink:0;width:42px;padding-top:2px}
.cal-evento b{display:block;font-size:12px}
.cal-evento small{display:block;font-size:10px;color:var(--dim);margin-top:2px}

.wifi-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start}
.wifi-ssid{display:flex;align-items:center;gap:12px;background:var(--raised);
border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:14px}
.wifi-icono{font-size:24px}
.wifi-ssid b{display:block;font-size:14px}
.wifi-ssid span{display:block;font-size:10.5px;color:var(--dim)}
.wifi-ssid .chip{margin-left:auto}
.wifi-hist-item{display:flex;align-items:center;gap:9px;padding:10px 2px;
border-bottom:1px solid var(--line);font-size:12px}
.wifi-hist-item:last-child{border-bottom:0}
.wifi-punto{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.wifi-hist-item>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.wifi-hist-item b{font-size:11.5px}
.wifi-hist-item small{font-size:10px;color:var(--dim)}
.wifi-hist-item>small:last-child{flex-shrink:0;color:var(--dim);font-size:9.5px}

.clip-lista{display:flex;flex-direction:column;gap:8px}
.clip-item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:9px;
padding:10px 12px;cursor:pointer;color:var(--ink);font-family:inherit}
.clip-item:hover{border-color:var(--brand);background:var(--sel)}
.clip-tipo{font-size:8.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
color:var(--brand);grid-column:1/2}
.clip-texto{font-size:12px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap;grid-column:1/2}
.clip-meta{font-size:9.5px;color:var(--dim);grid-column:1/2}
.clip-copiar{grid-column:2/3;grid-row:1/4;font-size:10px;font-weight:700;color:var(--brand);
white-space:nowrap}

.keylogger-card{padding:0;overflow:hidden}
.keylogger-card>.card-head{padding:16px 18px 0;margin-bottom:12px}
.keylogger{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
font-size:11.5px;max-height:420px;overflow-y:auto;padding:10px 16px}
.kl-head,.kl-line{display:grid;grid-template-columns:74px 96px 1fr;gap:10px}
.kl-head{color:var(--dim);font-size:8.5px;text-transform:uppercase;letter-spacing:.8px;
padding-bottom:6px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1}
.kl-line{padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.kl-hora{color:var(--dim)}
.kl-app{color:var(--brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-texto{color:var(--ink2);white-space:pre-wrap;word-break:break-word}
.kl-cursor{color:var(--brand);padding:2px 16px 10px;animation:parpadeo 1.1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.keylogger-pie{padding:9px 16px;font-size:10px;color:var(--dim)}

@media(max-width:900px){
  .contactos-grid,.calendario-grid,.wifi-grid{grid-template-columns:1fr}
  .contactos-lista{max-height:360px}
  .audio-wave{display:none}
}
@media(max-width:620px){
  .rejilla-galeria{grid-template-columns:repeat(2,1fr);gap:9px}
  .kl-head,.kl-line{grid-template-columns:64px 78px 1fr;gap:6px;font-size:10.5px}
  .foto-info{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px}
}

/* ── Mapa interactivo y geocercas (demo) ─────────────────────────────── */
.mapa{cursor:grab;touch-action:none;user-select:none}
.mapa:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.mapa.arrastrando{cursor:grabbing}
.mapa-pick{cursor:crosshair}
.mapa-mundo{position:absolute;inset:-60%;transform-origin:50% 50%;pointer-events:none;
  will-change:transform}
.mapa-capa{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mapa-pin{left:0;top:0;z-index:5}
.mapa-instruccion{position:absolute;left:10px;top:10px;z-index:6;font-size:9.5px;color:var(--ink2);
  background:color-mix(in srgb,var(--card) 84%,transparent);border:1px solid var(--line);
  border-radius:8px;padding:3px 8px;pointer-events:none;max-width:70%}
.mapa-escala{position:absolute;left:10px;bottom:10px;z-index:6;font-size:9px;color:var(--dim);
  background:color-mix(in srgb,var(--card) 84%,transparent);border:1px solid var(--line);
  border-radius:8px;padding:2px 7px;pointer-events:none}
.mapa-controles{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;
  gap:4px;z-index:7}
.mapa-controles button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1;display:flex;align-items:center;justify-content:center}
.mapa-controles button:hover{border-color:var(--brand);color:var(--brand)}
.geo-grid-demo{margin-top:16px}
.geo-zona{position:absolute;border:1.6px solid var(--zcolor,var(--brand));border-radius:50%;
  background:color-mix(in srgb,var(--zcolor,var(--brand)) 13%,transparent);
  transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.geo-zona.off{opacity:.38;border-style:dashed}
.geo-zona-nombre{position:absolute;transform:translate(-50%,-50%);font-size:9px;font-weight:700;
  color:var(--zcolor,var(--brand));background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:1px 6px;white-space:nowrap;pointer-events:none;z-index:3;
  max-width:120px;overflow:hidden;text-overflow:ellipsis}
.geo-pin{--zcolor:var(--brand);position:absolute;left:0;top:0;width:22px;height:22px;
  border-radius:50% 50% 50% 0;background:var(--zcolor);rotate:-45deg;
  transform:translate(-50%,-100%);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--zcolor) 18%,transparent);pointer-events:none;z-index:4}
.geo-pin span{position:absolute;inset:6px;border-radius:50%;background:var(--on-brand)}
.geo-circulo{--zcolor:var(--brand);position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  border:1.6px dashed var(--zcolor);border-radius:50%;
  background:color-mix(in srgb,var(--zcolor) 13%,transparent);pointer-events:none;z-index:2}
.geo-form-demo{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:12px 16px;
  border-top:1px solid var(--line)}
.geo-form-demo label{font-size:10px;color:var(--dim);display:flex;flex-direction:column;gap:4px;
  text-transform:uppercase;letter-spacing:.5px;flex:1;min-width:150px}
.geo-form-demo input,.geo-campos-demo input{background:var(--raised);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);padding:8px 10px;font-size:12.5px;font-family:inherit;width:100%}
.geo-form-demo input:focus,.geo-campos-demo input:focus{outline:none;border-color:var(--brand)}
.geo-campos-demo{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:10px 16px;
  border-top:1px solid var(--line);background:var(--card)}
.geo-campos-demo label{font-size:10px;color:var(--dim);display:flex;flex-direction:column;gap:3px;
  text-transform:uppercase;letter-spacing:.5px}
.geo-campos-demo input{width:130px}
.radios-demo{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:10px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.5px}
.chip.radio.on,.chip.radio[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);
  border-color:var(--brand);font-weight:700}
.mapa-pie-demo{padding:11px 16px;border-top:1px solid var(--line);background:var(--raised);
  font-size:10.5px;color:var(--dim);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.geo-lista-demo{display:flex;flex-direction:column;gap:7px}
.geo-item{display:flex;align-items:center;gap:7px;background:var(--raised);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.geo-item-txt{flex:1;min-width:0}
.geo-item-txt b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-item-txt small{display:block;font-size:10px;color:var(--dim);word-break:break-word}
.geo-color{width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.geo-item .qa{padding:5px 8px;font-size:11px}
.geo-item.pausada{opacity:.72}
.toggle-estado{border-radius:999px;padding:4px 10px;font-size:10px;font-weight:700;
  cursor:pointer;font-family:inherit;border:1px solid transparent;white-space:nowrap}
.toggle-estado.activa{background:var(--green-bg);color:var(--green);
  border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.toggle-estado.pausada{background:var(--red-bg);color:var(--red);
  border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.geo-vacio{text-align:center;color:var(--dim);padding:30px 16px;font-size:12px;line-height:1.6}
.aviso-demo{background:var(--blue-bg);border:1px solid var(--line);color:var(--blue);
  border-radius:9px;padding:9px 12px;font-size:11.5px;line-height:1.5;margin-top:10px}
@media(max-width:900px){.geo-grid-demo{grid-template-columns:1fr}}
@media(max-width:520px){.geo-campos-demo input{width:100%}
  .geo-campos-demo label{flex:1;min-width:110px}}