/* ══════════════════════════════════════════════════════════════
   baddies · CAPA GLASSMORPHISM COMPARTIDA  ·  v2 quirúrgica
   ──────────────────────────────────────────────────────────────
   Se incluye en todas las páginas públicas (no en el admin).
   REGLA: el vidrio va SOLO en superficies grandes (tarjetas,
   paneles, modales). NUNCA en iconos pequeños, chips ni tags
   (eso los deformaba). Inputs: fondo translúcido sutil, sin blur.
   Fondo gris/grafito (sin azul). Una sola fuente de verdad.
   ══════════════════════════════════════════════════════════════ */

:root{
  --g-card:rgba(16,17,21,.64);     /* tarjetas: 64% opaco, texto siempre legible */
  --g-panel:rgba(20,22,28,.72);    /* paneles/menús: 72% */
  --g-modal:rgba(17,18,23,.76);    /* modales: 76% */
  --g-line:rgba(201,207,217,.13);  /* borde plata sutil */
  --g-line-2:rgba(201,207,217,.20);/* borde acento plata */
  --blur:18px;
}

/* ── Fondo: aurora gris/grafito (sin azul) ── */
body{
  background:
    radial-gradient(60% 50% at 12% 6%,  rgba(201,207,217,.055), transparent 62%),
    radial-gradient(54% 46% at 88% 12%, rgba(150,156,168,.045), transparent 64%),
    radial-gradient(50% 44% at 84% 90%, rgba(120,125,135,.035), transparent 66%),
    #07070a !important;
  background-attachment:fixed !important;
}

/* grano finísimo (muy tenue, sin halo animado para evitar artefactos) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;mix-blend-mode:overlay;
}

/* ════════════════════════════════════════════════════════════
   SOLO SUPERFICIES GRANDES reciben vidrio.
   Listadas explícitamente — nada de iconos/chips pequeños.
   ════════════════════════════════════════════════════════════ */

/* — Tarjetas y contenedores principales (con desenfoque real) — */
.card, .rcard, .dcard, .fcard, .pcard, .ln-card, .rev-card, .boost-pack,
.tut-card, .qa, .acct, .prefs, .draft, .kpi, .review, .clientv,
.plan-opt, .niv-card, .pm-sheet{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 40%),
    var(--g-card) !important;
  border:1px solid var(--g-line) !important;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(110%);
  backdrop-filter:blur(var(--blur)) saturate(110%);
  box-shadow:
    0 10px 34px -16px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* — Paneles flotantes / hojas / dropdowns (más opaco para flotar) — */
.fpanel, .modal, .ovf-dd, .citysheet, .drop.open{
  background:var(--g-panel) !important;
  border:1px solid var(--g-line-2) !important;
  -webkit-backdrop-filter:blur(24px) saturate(115%);
  backdrop-filter:blur(24px) saturate(115%);
  box-shadow:0 30px 70px -28px #000, inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* — Modales: lo más opaco — */
.modal{ background:var(--g-modal) !important; }

/* — Header translúcido (sutil, sin tocar su layout) — */
header, .topbar, .hbar{
  -webkit-backdrop-filter:blur(18px) saturate(112%);
  backdrop-filter:blur(18px) saturate(112%);
}

/* — Inputs grandes: fondo translúcido SUTIL, SIN blur (no se deforman) — */
.inp, .aminput, .qbox{
  background:rgba(18,20,26,.5) !important;
  border:1px solid var(--g-line) !important;
}

/* NOTA: a propósito NO tocamos .ic, .chip, .vtag, .seal, .stat, .loc,
   .copt, .segmented y demás controles pequeños. El vidrio en piezas
   chicas las deformaba. Conservan su estilo original del sistema. */