@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ===== Tema oscuro (por defecto) ===== */
:root{
  --bg1:#1a2430; --bg2:#0f1419; --panel1:#1a222c; --panel2:#151b23;
  --line:#2a3542; --line2:#202a34; --ink:#c9d4df; --head:#eef3f8; --dim:#7d8b99;
  --amber:#f59e0b; --accion:#ef5350; --ok:#34d399; --cyan:#38bdf8;
  --inp:#0e141b; --btn:#1b232d; --code:#0e141b; --shadow:0 6px 18px rgba(0,0,0,.35);
  --sel:#04140d; --offdot:#3a444f;
  /* Alias: nombres que el codigo ya usaba y que nunca se definieron.
     --text se usa 22 veces y --muted 17; sin definirlas, var(--text)
     resolvia a heredado (negro sobre fondo oscuro). */
  --text:var(--ink); --muted:var(--dim); --accent:var(--cyan);
  --panel:var(--panel1); --bg:var(--bg1);
  --warn-bg:#3b2e10; --warn-line:#7a5a12;
  --ok-bg:#0d2a20;  --ok-line:#1c6b52;
}
:root[data-theme=light]{
  --bg1:#eef2f6; --bg2:#e3e9f0; --panel1:#ffffff; --panel2:#f6f9fc;
  --line:#d3dbe4; --line2:#e6ebf0; --ink:#26333f; --head:#0f1a29; --dim:#5b6b7c;
  --amber:#b26a00; --accion:#d64545; --ok:#12855a; --cyan:#0a6ebd;
  --inp:#f4f7fa; --btn:#eef3f8; --code:#eef2f6; --shadow:0 4px 14px rgba(30,50,80,.12);
  --sel:#d6f5e6; --offdot:#9aa7b4;
  /* Avisos: en claro necesitan fondo propio, si no el texto --ink (#26333f)
     sobre un amarillo palido se queda en ~1.6:1 y es ilegible. */
  --warn-bg:#fde9c0; --warn-line:#d9a441;
  --ok-bg:#d3f5e6;  --ok-line:#7ac9a9;
}
*{box-sizing:border-box}
body{font-family:'JetBrains Mono',monospace;max-width:1040px;margin:0 auto;padding:18px;color:var(--ink);background:radial-gradient(1100px 480px at 50% -12%,var(--bg1) 0%,var(--bg2) 62%) fixed;font-size:13.5px;line-height:1.55}
a{color:var(--cyan);text-decoration:none}
h1{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:26px;letter-spacing:2px;text-transform:uppercase;color:var(--head);margin:6px 0 2px}
h3{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:17px;letter-spacing:1px;text-transform:uppercase;color:var(--head);margin:0}
.card{border:1px solid var(--line);border-radius:6px;padding:15px;margin:12px 0;background:linear-gradient(180deg,var(--panel1),var(--panel2));position:relative;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--ok),#0e7a52);border-radius:6px 0 0 6px;opacity:.6}
.dev{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.on{background:var(--ok);box-shadow:0 0 8px var(--ok)} .off{background:var(--offdot)} .warn{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.meta{color:var(--dim);font-size:12.5px;margin:7px 0}
button{padding:7px 12px;margin:3px 4px 3px 0;border:1px solid var(--line);border-radius:5px;background:var(--btn);color:var(--ink);cursor:pointer;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
button:hover{border-color:var(--ok);color:var(--head);box-shadow:0 0 0 1px rgba(52,211,153,.25)}
.del{border-color:#7a3a3a;color:var(--accion)} .del:hover{border-color:var(--accion);color:var(--accion);box-shadow:0 0 0 1px rgba(214,69,69,.3)}
.iconbtn{padding:6px 8px;margin:0}
input{padding:9px;border:1px solid var(--line);border-radius:5px;font-size:13px;font-family:'JetBrains Mono';background:var(--inp);color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.usolist{list-style:none;padding:0;margin:6px 0;font-size:12.5px}
.usolist li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line2);padding:4px 0}
.g{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.g img{height:60px;width:60px;border:1px solid var(--line);border-radius:4px;object-fit:cover}
.badge{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;letter-spacing:.8px;text-transform:uppercase;padding:2px 9px;border-radius:11px;border:1px solid var(--line);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.bl{color:var(--cyan);border-color:var(--cyan)}
.cbar{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:12px;padding:12px 18px;background:linear-gradient(180deg,var(--panel1),var(--panel2));box-shadow:var(--shadow);margin:6px 0 15px}
.cbar .title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:26px;letter-spacing:2px;text-transform:uppercase;color:var(--head);line-height:1}
.tiles{display:flex;gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--inp)}
.tnum{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:24px;line-height:1}
.tlab{font-size:10px;letter-spacing:1.2px;color:var(--dim);margin-top:4px}
.mstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:11px 0}
.mtile{border:1px solid var(--line2);border-radius:8px;padding:9px;text-align:center;background:var(--inp)}
.mtile .mv{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;color:var(--head);margin-top:2px}
.mtile .ml{font-size:9.5px;color:var(--dim);letter-spacing:.5px;margin-top:2px;text-transform:uppercase}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid var(--line2)} .kv .k{color:var(--dim);display:flex;align-items:center;gap:5px}
.sos-alert { background: linear-gradient(45deg, #ef4444, #b91c1c); color: white; padding: 15px; border-radius: 8px; margin-bottom: 15px; animation: pulse-red 2s infinite; display: flex; align-items: center; gap: 15px; }
@keyframes pulse-red { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;background:rgba(4,8,12,.6);backdrop-filter:blur(2px);padding:8vh 16px 16px}
.modal.open{display:flex}
.tab-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--btn);
  color: var(--dim);
  border-radius: 4px;
  cursor: pointer;
}
.tab-btn.active {
  background: var(--cyan);
  color: #0b131f;
  border-color: var(--cyan);
  font-weight: bold;
}
input::placeholder{color:var(--dim);opacity:.7}
select{padding:9px;border:1px solid var(--line);border-radius:5px;background:var(--inp);color:var(--ink);font-family:'JetBrains Mono';font-size:13px}
code{background:var(--code);padding:2px 6px;border-radius:4px;color:var(--amber);border:1px solid var(--line)}
small{color:var(--dim)} b{color:var(--ink)}
summary{color:var(--head);font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.5px;cursor:pointer}
table{color:var(--ink);width:100%;border-collapse:collapse} th{color:var(--dim);text-align:left;font-weight:600} td{border-top:1px solid var(--line2);padding:4px 6px}
::selection{background:var(--ok);color:var(--sel)}
.ok{color:var(--ok)} .err{color:var(--accion)}
.meta b{color:var(--ink)} .meta svg{vertical-align:-3px;opacity:.85;margin-right:2px;width:16px;height:16px} button svg{width:20px;height:20px}
.addbtn{display:inline-flex;align-items:center;gap:7px}
.badge.am{color:var(--amber);border-color:var(--amber)}
.badge.cy{color:var(--cyan);border-color:var(--cyan)}
.badge.dim{color:var(--dim)}
.st-pending{color:var(--amber)}.st-done{color:var(--ok)}.st-failed{color:var(--accion)}.st-delivered{color:var(--cyan)}
.divv{width:1px;height:42px;background:var(--line)}
@media(max-width:760px){.cbar{flex-wrap:wrap} .tiles{order:3;width:100%;justify-content:space-between}}

/* ===== Toast Popup Notifications ===== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel1), var(--panel2));
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  animation: toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.3s ease;
}
.toast.ok { border-left: 4px solid var(--ok); }
.toast.alert { border-left: 4px solid var(--accion); }
.toast.info { border-left: 4px solid var(--cyan); }
.toast .toast-icon { font-size: 22px; flex-shrink: 0; }
.toast .toast-body { flex: 1; }
.toast .toast-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; color: var(--head); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.toast .toast-sub { font-size: 11.5px; color: var(--dim); }
.toast .toast-close { background: none; border: none; color: var(--dim); cursor: pointer; padding: 2px 6px; font-size: 14px; margin: 0; }
.toast .toast-close:hover { color: var(--head); }
@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

/* ========================================================
   SUITE v6.2: TIMELINE, OMNI-SEARCH, MEDIA FILTERS
   ======================================================== */
.omni-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}
.omni-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  margin: 0;
}
.omni-search-box input:focus {
  outline: none;
}

/* Timeline Feed */
.timeline-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 10px;
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.timeline-item:hover {
  border-color: var(--cyan);
  background: var(--panel1);
}
.timeline-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.timeline-content {
  flex: 1;
  min-width: 0;
}
.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.timeline-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.timeline-time {
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
}
.timeline-body {
  font-size: 13px;
  color: var(--ink);
  word-break: break-word;
  line-height: 1.4;
}

/* Media Filter Tabs */
.media-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.media-filter-btn {
  padding: 5px 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.media-filter-btn.active, .media-filter-btn:hover {
  background: var(--panel1);
  color: var(--ok);
  border-color: var(--ok);
}
.media-dl-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
}
.media-dl-btn:hover {
  background: var(--ok);
}

/* Alert Blinking */
@keyframes alertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.blink-alert {
  animation: alertPulse 1s infinite;
}

/* LAYOUT: estas clases ya se usaban en el panel pero no existian */
.top-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;max-width:1040px;margin:0 auto 10px;padding:10px 18px;
  border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(180deg,var(--panel1),var(--panel2))}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.container-fluid{width:100%}
.main-content{padding-bottom:40px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;margin:0;
  border:1px solid var(--line);border-radius:5px;background:var(--btn);
  color:var(--ink);cursor:pointer;font-family:'Rajdhani',sans-serif;
  font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase}
.btn:hover{border-color:var(--ok);color:var(--head)}
.btn-danger{border-color:#7a3a3a;color:var(--accion)}
.btn[aria-current="page"]{border-color:var(--cyan);color:var(--cyan)}
.device-selector{background:var(--line2);color:var(--ink);border:1px solid var(--line);
  padding:7px 10px;border-radius:6px;font-weight:600;cursor:pointer;max-width:220px}
/* El modal de alta de equipo: sin esto el <div class="dlg"> se pintaba
   encima del overlay oscuro, sin fondo ni borde. */
.dlg{background:linear-gradient(180deg,var(--panel1),var(--panel2));
  border:1px solid var(--line);border-radius:10px;padding:20px;
  max-width:440px;width:100%;box-shadow:var(--shadow)}
.dlg h3{margin:0 0 12px}
.dlg input,.dlg select{display:block;width:100%;margin:6px 0;padding:9px 10px;
  border:1px solid var(--line);border-radius:6px;background:var(--inp);
  color:var(--ink);font-family:inherit;font-size:13px}
.dlg button{width:100%;justify-content:center;margin-top:12px;padding:10px 12px}
.box{width:350px;max-width:90vw;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(180deg,var(--panel1),var(--panel2));padding:26px}
.box input{display:block;width:100%;margin:6px 0;padding:9px 10px;
  border:1px solid var(--line);border-radius:6px;background:var(--inp);
  color:var(--ink);font-family:inherit;font-size:13px}
.box button{width:100%;justify-content:center;margin:10px 0 0}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* Login */
.login-body{max-width:none;min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-title{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-align:center;color:var(--head);margin:4px 0 2px;font-size:22px}
.sub{text-align:center;color:var(--dim);font-size:12px;margin-bottom:18px;letter-spacing:.5px}
.err{text-align:center;font-size:13px;color:var(--accion);margin:10px 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.flash-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--ink)}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ink)}
/* Foco visible: antes solo habia el outline por defecto del navegador, y con
   border-radius y fondo propio era dificil de localizar. */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px}
/* Respeta a quien pidio menos movimiento: las animaciones infinitas (alerta
   SOS, barras de audio, latido del live) son nauseantes en el movil. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
}