/* ===== Tokens ===== */
:root{
  --ol-blue:#00528A;
  --ol-sky:#2DD0F8;
  --ol-text:#0F172A;
  --ol-muted:#6B7280;
  --ol-card:#FFFFFF;
  --ol-bg:#F6F8FB;
  --ol-border:#E7EEF6;
  --ol-r:16px;
  --ol-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* ===== Contenedor alineado al ancho de tu theme/Elementor ===== */
.oqs-container{
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline:auto;
  padding: clamp(12px,2vw,20px);
}

/* ===== Toolbar ===== */
.oqs-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  background:linear-gradient(90deg, #003D67, var(--ol-blue));
  color:#fff;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 10px 22px rgba(0,82,138,.25);
  margin-bottom:14px;
}
.oqs-headings .oqs-title{
  margin:0; font-family:Montserrat,system-ui,sans-serif; font-weight:900; letter-spacing:.2px;
}
.oqs-headings .oqs-subtitle{
  margin:2px 0 0; opacity:.85; font-weight:600;
}
.oqs-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:#0b2f47; color:#e8f6ff; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:.45rem .85rem; font-weight:800; cursor:pointer;
  transition:transform .12s ease, filter .15s ease, background .15s ease;
}
.oqs-toggle:hover{ transform: translateY(-1px); filter:saturate(1.08); }
.oqs-toggle[aria-pressed="true"]{ background:#082133; }

/* ===== Widget ===== */
.oqs-widget{
  position:relative; isolation:isolate;
  background:var(--ol-card);
  border:1px solid var(--ol-border);
  border-radius:var(--ol-r);
  padding:16px;
  box-shadow:var(--ol-shadow);
  overflow:hidden;
}
.oqs-techbg{
  position:absolute; inset:-16px; z-index:-1;
  background:
    radial-gradient(1200px 500px at -10% 0%, rgba(45,208,248,.10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 400px at 110% 100%, rgba(0,82,138,.12) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(0,0,0,.02));
  pointer-events:none;
}
.oqs-kpis{
  display:grid; grid-template-columns: repeat(3, minmax(140px,1fr));
  gap:12px; margin-bottom:12px;
}
.oqs-kpi{
  background:#fff; border:1px solid var(--ol-border); border-radius:12px;
  padding:10px 12px;
}
.oqs-kpi__label{ font-size:.85rem; color:var(--ol-muted); font-weight:700; }
.oqs-kpi__value{ font-size:1.4rem; font-weight:900; color:var(--ol-text); display:block; margin-top:2px; }

.oqs-canvas-wrap{ background:var(--ol-bg); border:1px solid var(--ol-border); border-radius:12px; padding:8px; }

/* ===== Responsive ===== */
@media (max-width: 800px){
  .oqs-kpis{ grid-template-columns: 1fr; }
  .oqs-toolbar{ flex-direction:column; align-items:flex-start; }
}

/* ===== Modo Dormilón (oscuro) – aplica sobre el contenedor padre ===== */
.oqs-dark .oqs-toolbar{
  background:linear-gradient(90deg, #071827, #0C2E48);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.oqs-dark .oqs-toggle{ background:#082133; color:#cfeaff; border-color:rgba(173,216,230,.15); }
.oqs-dark .oqs-widget{
  background:#0B1723; border-color:#123047; box-shadow:0 10px 24px rgba(0,0,0,.40);
}
.oqs-dark .oqs-kpi{ background:#0E2233; border-color:#163652; }
.oqs-dark .oqs-kpi__label{ color:#b7c7d6; }
.oqs-dark .oqs-kpi__value{ color:#E7F6FF; }
.oqs-dark .oqs-canvas-wrap{ background:#0E2233; border-color:#163652; }