/* ===== Paleta original (claro + acento azul marino) – scope #cq-hub ===== */
#cq-hub{
  --ink:#ffffff; --muted:#919191; --brand:#ffffff; /* azul marino */
  --bg:#191919; --panel:#232323; --ring:rgba(10,15,40,.28);
  --rad:16px; --rad-lg:20px;
  --sh:0 12px 26px rgba(0,0,0,.08); --sh-lg:0 18px 40px rgba(0,0,0,.16);
  --bd:rgba(10,15,40,.08); --bd-active:rgba(10,15,40,.16);
}
#cq-hub.cq-hub{ background:var(--bg); color:var(--ink); padding:clamp(36px,5vw,72px) 16px; }

/* Layout */
#cq-hub .cq-hub-shell{ max-width:1180px; margin:0 auto; display:grid; gap:22px; grid-template-columns: 330px 1fr; }
@media (max-width:960px){ #cq-hub .cq-hub-shell{ grid-template-columns:1fr; } }

/* Rail (sin botón) */
#cq-hub .cq-hub-rail{
  background:var(--panel); border:1px solid var(--bd); border-radius:var(--rad-lg);
  box-shadow:var(--sh); padding:22px; position:sticky; top:16px; align-self:start;
}
#cq-hub .cq-hub-title{ margin:0 0 6px; font-size:clamp(26px,3vw,34px); letter-spacing:.3px; }
#cq-hub .cq-hub-sub{ margin:0 0 12px; color:var(--muted); }

#cq-hub .cq-hub-status{ display:flex; align-items:center; gap:10px; margin:12px 0 16px; }
#cq-hub .cq-dot{ width:10px; height:10px; border-radius:50%; background:#18c37e; }
#cq-hub .cq-hub-status.ok .cq-dot{ background:#18c37e; }
#cq-hub .cq-hub-status.later .cq-dot{ background:#f0b429; }
#cq-hub .cq-hub-status.off .cq-dot{ background:#e45858; }
#cq-hub .cq-hub-status-text{ font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.2px; }

#cq-hub .cq-info{ margin-top:14px; font-size:14px; }
#cq-hub .cq-muted{ color:var(--muted); margin:.35rem 0 0; }

/* Grid y tarjetas (look original) */
#cq-hub .cq-hub-grid{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
@media (max-width:1200px){ #cq-hub .cq-hub-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ #cq-hub .cq-hub-grid{ grid-template-columns:1fr; } }

#cq-hub .cq-card{
  background:var(--panel); border-radius:var(--rad); border:1px solid var(--bd);
  box-shadow:var(--sh); transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
#cq-hub .cq-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--bd-active); }

#cq-hub .cq-card-hit{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:22px; color:inherit; text-decoration:none; background:transparent; border:0; cursor:pointer;
}
#cq-hub .cq-card-hit:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:12px; }

#cq-hub .cq-ico{
  flex:0 0 58px; height:58px; display:grid; place-items:center; border-radius:999px;
  background:#000000; color:#fff; font-size:24px;
}

#cq-hub .cq-body h3{ margin:0 0 4px; font-size:18px; color:var(--brand); }
#cq-hub .cq-val{ margin:0; font-weight:400; color:var(--brand); }
#cq-hub .cq-mini{ color:var(--muted); font-size:13px; }

#cq-hub .cq-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(12px);
  background:rgba(10,15,40,.95); color:#fff; border-radius:999px; padding:10px 14px; font-size:14px;
  opacity:0; pointer-events:none; box-shadow:0 10px 28px rgba(0,0,0,.25); z-index:60;
  transition:opacity .25s ease, transform .25s ease;
}
#cq-hub .cq-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Action bar móvil (opcional, misma paleta) */
#cq-hub .cq-hub-bar{
  position:fixed; left:0; right:0; bottom:0; display:none; gap:8px; z-index:55;
  background:rgba(255,255,255,.9); backdrop-filter: blur(6px);
  padding:10px 12px; box-shadow:0 -8px 24px rgba(0,0,0,.08);
}
#cq-hub .cq-hub-bar a{
  flex:1 1 0; text-align:center; text-decoration:none; color:#fff; font-weight:700;
  padding:12px; border-radius:12px; background:#0a0f28;
}
@media (max-width:640px){ #cq-hub .cq-hub-bar{ display:flex; } }