/* =============================================================
   Panel Sistema Capilar — diseño "Glass" (estilo iOS)
   Todo va dentro de html.glass: en "Clásico" no cambia nada.
   ============================================================= */
html.glass{
  --g-bg:rgba(255,255,255,.58);
  --g-bg2:rgba(255,255,255,.8);
  --g-brd:rgba(255,255,255,.75);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3);
  --g-sh:var(--g-hi),0 1px 2px rgba(60,30,80,.05),0 14px 36px -22px rgba(70,30,95,.4);
  --g-sh-lg:var(--g-hi),0 2px 6px rgba(60,30,80,.06),0 30px 70px -28px rgba(70,30,95,.5);
  --g-blur:blur(24px) saturate(185%);
  --line:rgba(60,30,80,.08); --line-2:rgba(60,30,80,.12);
  --card:var(--g-bg); --r:22px;
  --sh:var(--g-sh);
}
html.glass body{background:#F3EEF5}
html.glass body::before{content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 34% at 6% 4%,rgba(156,86,196,.26),transparent 70%),
    radial-gradient(32% 30% at 94% 6%,rgba(236,178,74,.26),transparent 70%),
    radial-gradient(40% 38% at 88% 86%,rgba(110,40,140,.18),transparent 72%),
    radial-gradient(38% 34% at 4% 94%,rgba(255,168,196,.24),transparent 72%),
    linear-gradient(180deg,#F7F3F9 0%,#F1EBF2 100%)}

/* ---------- menú lateral: vidrio oscuro flotante ---------- */
html.glass .app{grid-template-columns:272px 1fr}
html.glass .side{margin:12px 0 12px 12px;top:12px;height:calc(100vh - 24px);border-radius:28px;
  background:linear-gradient(180deg,rgba(40,28,48,.86),rgba(22,16,27,.9));-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -30px rgba(30,10,40,.7)}
html.glass .logo-tag{border-bottom-color:rgba(255,255,255,.06)}
html.glass .nav a{border-radius:14px}
html.glass .nav a:hover{background:rgba(255,255,255,.07)}
html.glass .nav a.on{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px -12px rgba(0,0,0,.6)}
html.glass .nav a.on::before{left:-8px}
html.glass .nav a .cnt{background:linear-gradient(180deg,#F0BE57,#D9951F);color:#1F1A20}
html.glass .side .me,html.glass .side-av{background:rgba(255,255,255,.07);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html.glass .side-help{border-radius:16px!important}

/* ---------- barra superior flotante ---------- */
html.glass .top{margin:12px 16px 0;top:12px;border-radius:24px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-brd);box-shadow:var(--g-sh)}
html.glass .top .search input{border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 3px rgba(60,30,80,.08)}
html.glass .top .search .res{background:rgba(255,255,255,.86);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);border-radius:20px;box-shadow:var(--g-sh-lg)}
html.glass .top .search .res a{border-radius:12px}
html.glass .top .search .res a:hover{background:rgba(255,255,255,.9)}

/* ---------- tarjetas, botones y controles ---------- */
html.glass .card{background:var(--g-bg);border:1px solid var(--g-brd);box-shadow:var(--g-sh);border-radius:22px}
html.glass .btn{border-radius:999px}
html.glass .btn-dark{background:linear-gradient(180deg,#43384A,#221B25);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -12px rgba(31,26,32,.7)}
html.glass .btn-dark:hover{background:linear-gradient(180deg,#4F4256,#2A222E)}
html.glass .btn-gold{background:linear-gradient(180deg,#F0BE57,#D9951F);color:#1F1A20;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px -12px rgba(217,149,31,.8)}
html.glass .btn-line{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.95);box-shadow:var(--g-sh)}
html.glass .btn-line:hover{background:#fff;border-color:#fff}
html.glass .btn-ghost:hover{background:rgba(255,255,255,.7)}
html.glass .btn-wa{background:linear-gradient(180deg,#34C66B,#1FAF55);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px -12px rgba(31,175,85,.7)}
html.glass .btn-sm{border-radius:999px}
html.glass .kpi .lbl svg{background:rgba(255,255,255,.75);box-shadow:var(--g-hi),0 4px 10px -6px rgba(60,30,80,.3)}
html.glass .kpi.alert{background:linear-gradient(135deg,var(--g-bg) 50%,rgba(255,236,200,.7))}
html.glass .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
html.glass .tag{background:rgba(255,255,255,.7)}
/* control segmentado tipo iOS */
html.glass .seg{background:rgba(118,110,128,.13);border:0;border-radius:12px;padding:3px}
html.glass .seg button{border-radius:9px;color:var(--ink)}
html.glass .seg button.on{background:#fff;color:var(--ink);box-shadow:0 3px 8px -2px rgba(60,30,80,.22),0 1px 1px rgba(60,30,80,.06)}
/* campos */
html.glass :is(.f input,.f select,.f textarea,.filters input,.filters select,.chips-input){background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:12px;box-shadow:inset 0 1px 3px rgba(60,30,80,.08)}
html.glass :is(.f input,.f select,.f textarea,.filters input):focus{background:#fff;border-color:rgba(94,28,120,.35);box-shadow:0 0 0 4px rgba(94,28,120,.10)}
html.glass .switch input:not(:checked){background:rgba(118,110,128,.25)}
/* tablas */
html.glass th{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.glass tr.click:hover td{background:rgba(255,255,255,.55)}
/* ventanas */
html.glass .overlay{background:rgba(30,16,36,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.glass .modal{background:rgba(255,255,255,.84);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);border-radius:28px;box-shadow:var(--g-sh-lg)}
html.glass .drawer-o{background:rgba(30,16,36,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.glass .drawer{background:rgba(246,241,248,.86);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-left:1px solid var(--g-brd);border-radius:28px 0 0 28px}
html.glass .toast{background:rgba(31,26,32,.74);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:11px 18px}
/* CRM */
html.glass .col{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.6);border-radius:22px;box-shadow:var(--g-hi)}
html.glass .col.over{background:rgba(255,255,255,.6)}
html.glass .lead{background:rgba(255,255,255,.8);border-radius:16px;box-shadow:var(--g-hi),0 6px 16px -10px rgba(60,30,80,.35)}
html.glass .tl .bx,html.glass .composer{background:rgba(255,255,255,.66);border:1px solid var(--g-brd);border-radius:16px;box-shadow:var(--g-hi)}
html.glass .composer .types button.on{box-shadow:var(--g-hi)}
/* conversaciones */
html.glass .wa-wrap{gap:16px}
html.glass .wa-item.on{background:rgba(255,255,255,.7)}
html.glass .wa-item:hover{background:rgba(255,255,255,.5)}
html.glass .wa-fil button{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9)}
html.glass .wa-fil button.on{background:linear-gradient(180deg,#43384A,#221B25);color:#fff}
html.glass .wa-sum{background:linear-gradient(135deg,rgba(247,241,250,.85),rgba(251,248,244,.85));border-color:rgba(255,255,255,.8)}
html.glass .wa-draft{background:rgba(236,250,240,.85);border-color:rgba(205,239,217,.9)}
html.glass .wa-foot{background:rgba(255,255,255,.55)}
html.glass .wa-body.has-side .wa-side{background:rgba(255,255,255,.35)}
/* ingreso */
html.glass .login .box{background:transparent}
html.glass .login .lbox{background:var(--g-bg2);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);border-radius:30px;padding:34px 30px;box-shadow:var(--g-sh-lg)}
html.glass .login .lbox :is(.f input,input:not([type=checkbox]):not([type=radio])){background:rgba(118,110,128,.09);border:1px solid rgba(60,30,80,.1);box-shadow:inset 0 1px 2px rgba(60,30,80,.06)}
html.glass .login .lbox input:focus{background:#fff;border-color:rgba(94,28,120,.35);box-shadow:0 0 0 4px rgba(94,28,120,.10)}
html.glass .login .art{margin:14px 0 14px 14px;border-radius:30px;overflow:hidden}

/* ---------- portal de clientes (tipo app) ---------- */
html.glass .ptop{background:rgba(255,255,255,.55);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-bottom:1px solid rgba(255,255,255,.7)}
html.glass .pnav a{border-radius:999px}
html.glass :is(.pquick>*,.pstats div,.pseller,.pord,.pempty,.pedu>*,.pprod,.pmenu,.pmov,.phow>div){background:var(--g-bg);border:1px solid var(--g-brd);box-shadow:var(--g-sh)}
html.glass .pquick>*{border-radius:22px}
html.glass .pord:hover,html.glass .pprod:hover{background:rgba(255,255,255,.8)}
html.glass .pnote{background:rgba(255,247,230,.75);border-color:rgba(241,221,176,.9)}
html.glass .psheet-in{background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);border-radius:24px}
html.glass .pwal{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 50px -26px rgba(31,26,32,.75)}
@media (max-width:900px){
  html.glass .app{grid-template-columns:1fr}
  html.glass .side{margin:0;top:0;height:100vh;border-radius:0 28px 28px 0}
  html.glass .top{margin:10px 10px 0;top:10px}
  html.glass .login .art{display:none}
  html.glass .ptabs{background:rgba(255,255,255,.6)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid rgba(255,255,255,.8)!important;border-radius:28px!important;
    box-shadow:var(--g-hi),0 20px 40px -18px rgba(70,30,95,.55)!important}
  html.glass .ptabs .pmain b{background:linear-gradient(180deg,#43384A,#221B25)}
}
@media (prefers-reduced-transparency:reduce){html.glass{--g-bg:rgba(255,255,255,.95);--g-bg2:#fff}}
/* tarjeta Wallet */
html.glass .wsec{border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 20px 40px -22px rgba(42,26,51,.85)}
html.glass .wsec.ok{background:rgba(233,247,239,.75);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-color:rgba(255,255,255,.8)}
html.glass .wl-img{background:rgba(255,255,255,.55);border-color:rgba(60,30,80,.15)}
html.glass .wl-pop-prev{background:rgba(255,255,255,.35)}
html.glass .wbtn{border-radius:14px}
/* catálogo de canjes */
html.glass :is(.prw,.rw){background:var(--g-bg);border:1px solid var(--g-brd);box-shadow:var(--g-sh);border-radius:24px}
html.glass .prw-cash{background:rgba(255,247,230,.75);border-color:rgba(241,221,176,.9);border-radius:22px}
html.glass .qk-o{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);border-radius:20px}
html.glass .rv-item{background:var(--g-bg);border-color:var(--g-brd);box-shadow:var(--g-sh);border-radius:20px}
html.glass .rv-cta{border-radius:20px;background:rgba(255,249,236,.8)}