/* ============================================================================
   FUND & WATCH — CRM design system
   ----------------------------------------------------------------------------
   One stylesheet for the business dashboard and the order kiosk.

   Shape of the product: a workspace, not a website. A fixed rail of sections on
   the left, one working surface on the right, and an assistant docked at the
   bottom of that surface. Light is the default because this runs on a counter
   under fluorescent light at midday; dark is a toggle, not the identity.

   Rules this file keeps:
     · ONE surface recipe (.card), ONE glass recipe (.glass), ONE elevation
       scale. No component invents its own shadow.
     · Colour carries meaning: blue = the product, green = money in,
       amber = money out, red = destructive. Nothing is coloured for decoration.
     · Numbers are tabular-lining everywhere they can be compared.
     · Type scale is 11 / 12.5 / 13.5 / 15 / 18 / 22 / 30. Nothing in between.

   Tokens are defined once on :root in light values and overridden as a set
   under html[data-theme="dark"] — never define a colour only inside the dark block.
============================================================================ */

:root{
  /* ---- brand ---- */
  --blue:#1668C4;         /* the interactive colour: links, focus, primary */
  --blue-600:#1257A8;
  --blue-100:#E3EFFB;
  --cyan:#0E9BC9;
  --brand-grad:linear-gradient(135deg,#1E9BF0,#0E7FC4);

  /* ---- semantic ---- */
  --pos:#0E8A5F;  --pos-bg:#E4F5ED;      /* revenue, gains, live */
  --neg:#B4443C;  --neg-bg:#FBEAE8;      /* destructive, losses */
  --warn:#9A6206; --warn-bg:#FDF2E0;     /* costs, pending */
  --info:#1668C4; --info-bg:#E9F1FC;

  /* ---- surfaces & ink (LIGHT is the default) ---- */
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --surface-sunken:#F1F5F9;
  --ink:#0C1826;
  --ink-2:#475869;
  --ink-3:#7C8CA0;
  --line:#E3E9F0;
  --line-strong:#CFD8E3;

  /* ---- glass: a real material, used only where something floats ---- */
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.9);
  --glass-blur:saturate(180%) blur(20px);

  /* ---- elevation: three steps, no more ---- */
  --e1:0 1px 2px rgba(12,24,38,.04),0 1px 3px rgba(12,24,38,.03);
  --e2:0 2px 4px rgba(12,24,38,.04),0 8px 20px rgba(12,24,38,.06);
  --e3:0 8px 16px rgba(12,24,38,.06),0 24px 56px rgba(12,24,38,.12);

  /* ---- chart ink ----
     Five categorical slots, assigned in this fixed order and never cycled;
     a sixth series folds into "Other". Both this set and the dark set below
     pass all six palette checks (lightness band, chroma floor, CVD
     separation, normal-vision floor, contrast) — re-run the validator
     before changing any of them, and keep the ORDER: adjacent slots are
     the pairs that have to stay tellable apart. */
  --c1:#1D66C9; --c2:#B4690E; --c3:#0F8F72; --c4:#8250DF; --c5:#BE3455;
  --grid:#EDF1F6; --axis:#93A3B5;


  /* ---- legacy bridge ----
     business.html still carries ~146 page-specific components (viewer
     analytics, poll editor, event preview, profile form…) written against the
     old Pollos token names. Rewriting all of them buys nothing, so the old
     names are kept alive here as aliases onto the new scale. crm.css loads
     AFTER that block, so these win. Do not author new rules against them. */
  --bg-soft:var(--surface-sunken);
  --card:var(--surface);
  --surface-raised:var(--surface);
  --cream:var(--surface-2);
  --ink-soft:var(--ink-2);
  --ink-mute:var(--ink-3);
  --red:var(--neg);        --red-dark:var(--neg);
  --orange:var(--warn);    --orange-dark:var(--warn);
  --green:var(--pos);
  --shadow-soft:var(--e1); --shadow-hover:var(--e2);

  --rail:236px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --pad:clamp(16px,2.2vw,28px);
}

html[data-theme="dark"]{
  --bg:#080C13;
  --surface:#101822;
  --surface-2:#141D29;
  --surface-sunken:#0C1420;
  --ink:#E9EFF6;
  --ink-2:#9FB0C3;
  --ink-3:#6E8095;
  --line:#1E2A38;
  --line-strong:#2B3B4D;

  --blue:#4FA9F5; --blue-600:#7BC2FF; --blue-100:#12283D;
  --cyan:#4FC9EE;
  --pos:#3ED39B;  --pos-bg:#0C2B22;
  --neg:#FF7A78;  --neg-bg:#2E1518;
  --warn:#F0B44C; --warn-bg:#2C2010;
  --info:#4FA9F5; --info-bg:#10243A;

  --glass:rgba(20,29,41,.72);
  --glass-line:rgba(255,255,255,.10);

  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 2px 6px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.34);
  --e3:0 10px 24px rgba(0,0,0,.46),0 30px 70px rgba(0,0,0,.5);

  /* dark is re-stepped against the dark surface, not an automatic flip */
  --c1:#4A93E0; --c2:#BC8129; --c3:#2AA37B; --c4:#9075E8; --c5:#DE6079;
  --grid:#1B2634; --axis:#5E7188;
}

/* ============================== reset ============================== */
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);-webkit-text-size-adjust:100%;}
body{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;overflow-x:hidden;
  font-variant-numeric:tabular-nums lining-nums;
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
img,svg{display:block;max-width:100%;}
h1,h2,h3,h4{font-weight:650;letter-spacing:-.014em;line-height:1.25;}
::selection{background:var(--blue-100);color:var(--ink);}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}
[hidden]{display:none!important;}

/* the one glass recipe — used by the assistant dock and floating bars only */
.glass{
  background:var(--glass);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
}

/* ============================== app shell ==============================
   Rail + surface. The rail is the only navigation; there is no second row of
   tabs, which is what made the old dashboard feel like a settings page. */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh;}

.rail{
  position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line);
  padding:14px 12px;gap:2px;z-index:60;
}
.rail-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;min-width:0;}
.rail-brand img{width:30px;height:30px;object-fit:contain;border-radius:8px;flex:0 0 auto;}
.rail-brand .rb-t{min-width:0;}
.rail-brand .rb-n{font-size:13.5px;font-weight:680;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rail-brand .rb-s{font-size:11px;color:var(--ink-3);font-weight:550;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.rail-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;
  scrollbar-width:thin;}
.rail-label{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 10px 6px;}

.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13px;font-weight:560;color:var(--ink-2);cursor:pointer;
  border:0;background:none;width:100%;text-align:left;min-width:0;
  transition:background .12s,color .12s;
}
.nav-item .ni-ico{width:17px;height:17px;flex:0 0 auto;color:var(--ink-3);}
.nav-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-item:hover{background:var(--surface-sunken);color:var(--ink);}
.nav-item:hover .ni-ico{color:var(--ink-2);}
.nav-item.active{background:var(--blue-100);color:var(--blue);font-weight:640;}
.nav-item.active .ni-ico{color:var(--blue);}
.nav-item .ni-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);
  background:var(--surface-sunken);border-radius:999px;padding:1px 7px;}

.rail-foot{border-top:1px solid var(--line);padding-top:10px;margin-top:8px;display:grid;gap:2px;}
.rail-user{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-sm);min-width:0;}
.rail-user .ru-av{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--brand-grad);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;}
.rail-user .ru-t{min-width:0;flex:1 1 auto;}
.rail-user .ru-n{font-size:12.5px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rail-user .ru-r{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ============================== surface ============================== */
.surface{min-width:0;display:flex;flex-direction:column;min-height:100dvh;}

.top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:0 var(--pad);height:60px;flex:0 0 auto;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);
}
.top h1{font-size:18px;font-weight:660;letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top .sp{flex:1 1 auto;}
.burger{display:none;}

.page{flex:1 1 auto;padding:var(--pad);padding-bottom:180px;max-width:1440px;width:100%;}

/* ============================== controls ============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:8px 14px;min-height:36px;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  background:var(--blue);color:#fff;
  transition:filter .14s,box-shadow .14s,transform .06s,background .14s,border-color .14s;
}
.btn:hover{filter:brightness(1.06);box-shadow:var(--e1);}
.btn:active{transform:translateY(.5px);}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none;}
.btn-soft{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.btn-soft:hover{background:var(--surface-sunken);filter:none;}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:transparent;}
.btn-ghost:hover{background:var(--surface-sunken);color:var(--ink);filter:none;}
.btn-red{background:var(--neg);color:#fff;}
.btn-full{width:100%;}
.btn-sm{min-height:30px;padding:5px 11px;font-size:12px;}
.btn-lg{min-height:46px;padding:12px 22px;font-size:14.5px;border-radius:var(--r);}

.ico-btn{
  display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-2);cursor:pointer;transition:background .14s,color .14s;
}
.ico-btn:hover{background:var(--surface-sunken);color:var(--ink);}
.ico-btn svg{width:16px;height:16px;}

.chip-btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .14s,color .14s,border-color .14s;
}
.chip-btn:hover{background:var(--surface-sunken);color:var(--ink);}

.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.filter-btn{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .14s,color .14s,border-color .14s;
}
.filter-btn:hover{background:var(--surface-sunken);color:var(--ink);}
.filter-btn.active{background:var(--ink);border-color:var(--ink);color:var(--surface);}

/* ---- fields ---- */
.field{display:grid;gap:5px;min-width:0;}
.field label{font-size:12px;font-weight:600;color:var(--ink-2);}
.field input,.field select,.field textarea,input[type=date],input[type=text],input[type=search],
input[type=number],input[type=email],input[type=password],input[type=tel],select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:8px 11px;min-height:36px;font-size:13px;color:var(--ink);
  outline:none;transition:border-color .14s,box-shadow .14s,background .14s;
}
.field textarea,textarea{min-height:76px;resize:vertical;line-height:1.55;}
input::placeholder,textarea::placeholder{color:var(--ink-3);}
input[type=search]{-webkit-appearance:none;appearance:none;}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;}
.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100);
}
.field .hint,.req-opt{font-size:11.5px;color:var(--ink-3);}
.row-2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));}
.row-3{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));}
.grid-2{display:grid;gap:var(--pad);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}

/* switch */
.switch{position:relative;display:inline-block;width:40px;height:23px;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--line-strong);border-radius:999px;
  cursor:pointer;transition:background .18s;}
.slider:before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .18s;box-shadow:var(--e1);}
.switch input:checked + .slider{background:var(--pos);}
.switch input:checked + .slider:before{transform:translateX(17px);}
.check-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px;
  border-bottom:1px solid var(--line);}
.check-row:last-child{border-bottom:0;}

/* ============================== surfaces ============================== */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--e1);min-width:0;
}
.card + .card{margin-top:var(--pad);}
.card-title{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:14px;font-weight:650;letter-spacing:-.01em;margin:0 0 14px;
}
.card-title .left{display:flex;align-items:center;gap:8px;min-width:0;}
.card-title .filters{margin-left:auto;}
.card-sub{font-size:12.5px;color:var(--ink-2);margin:-8px 0 14px;line-height:1.55;}

.section-head{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;flex-wrap:wrap;}
.section-head h2{font-size:15px;font-weight:650;}
.section-head .sh-sub{font-size:12.5px;color:var(--ink-3);}

/* ---- KPI tiles: the money row ---- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-bottom:var(--pad);}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 16px;box-shadow:var(--e1);min-width:0;position:relative;overflow:hidden;
  transition:box-shadow .16s,border-color .16s,transform .16s;
}
.tile[data-tile]{cursor:pointer;}
.tile[data-tile]:hover{box-shadow:var(--e2);border-color:var(--line-strong);transform:translateY(-1px);}
.t-label{font-size:11.5px;font-weight:620;color:var(--ink-3);letter-spacing:.01em;
  display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.t-value{font-size:26px;font-weight:660;letter-spacing:-.032em;line-height:1.1;color:var(--ink);}
.t-sub{font-size:11.5px;color:var(--ink-3);margin-top:5px;display:flex;align-items:center;gap:5px;}
.t-delta{font-size:11.5px;font-weight:680;display:inline-flex;align-items:center;gap:3px;}
.t-delta.up{color:var(--pos);} .t-delta.down{color:var(--neg);} .t-delta.flat{color:var(--ink-3);}
.tile.accent-pos .t-value{color:var(--pos);}
.tile.accent-warn .t-value{color:var(--warn);}

/* ---- list rows ---- */
.item-card{
  display:flex;align-items:flex-start;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);min-width:0;
}
.item-card:last-child{border-bottom:0;}
.item-thumb{width:40px;height:40px;border-radius:10px;flex:0 0 auto;object-fit:cover;
  background:var(--surface-sunken);border:1px solid var(--line);}
.item-body{min-width:0;flex:1 1 auto;}
.item-title{font-size:13.5px;font-weight:620;letter-spacing:-.005em;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.item-sub{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.5;}
.item-actions{display:flex;gap:6px;flex:0 0 auto;align-items:center;flex-wrap:wrap;}

.badge{
  display:inline-flex;align-items:center;gap:4px;border-radius:6px;
  padding:2px 7px;font-size:11px;font-weight:680;letter-spacing:.01em;
  background:var(--surface-sunken);color:var(--ink-2);border:1px solid var(--line);
}
.badge.b-live,.badge.b-featured{background:var(--pos-bg);color:var(--pos);border-color:transparent;}
.badge.b-cancelled{background:var(--neg-bg);color:var(--neg);border-color:transparent;}
.badge.b-warn{background:var(--warn-bg);color:var(--warn);border-color:transparent;}
.badge.b-info{background:var(--info-bg);color:var(--info);border-color:transparent;}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}

.empty-state{
  text-align:center;padding:34px 18px;color:var(--ink-3);font-size:13px;
  border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);
}
.warn-box{
  background:var(--warn-bg);border:1px solid transparent;border-radius:var(--r);
  padding:12px 14px;font-size:12.5px;color:var(--warn);line-height:1.55;
}
.unlock-box{background:var(--info-bg);border-radius:var(--r);padding:14px;font-size:12.5px;color:var(--info);}

/* ---- tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.tbl th{
  text-align:left;font-size:11px;font-weight:680;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);padding:0 12px 9px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:0;}
.tbl tbody tr{transition:background .12s;}
.tbl tbody tr:hover{background:var(--surface-2);}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;}
.tbl .strong{color:var(--ink);font-weight:620;}
.tbl-wrap{overflow-x:auto;margin:0 -18px;padding:0 18px;}

/* ============================== calendar ============================== */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.cal-title{font-size:13.5px;font-weight:640;text-transform:capitalize;}
.cal-head .filters{margin-left:auto;}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.cal-cell{
  aspect-ratio:1;border:1px solid var(--line);border-radius:9px;padding:5px 6px;
  font-size:11.5px;color:var(--ink-2);background:var(--surface);cursor:pointer;
  display:flex;flex-direction:column;gap:3px;min-width:0;transition:background .12s,border-color .12s;
}
.cal-cell:hover{background:var(--surface-sunken);border-color:var(--line-strong);}
.cal-cell.other{opacity:.34;}
.cal-cell.today{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);}
.cal-cell .cd-n{font-weight:620;color:var(--ink);}
.cal-cell .cd-dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:auto;}
.cal-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--ink-3);}
.cd-evento{background:var(--info);} .cd-compra{background:var(--warn);} .cd-ausencia{background:var(--neg);}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--ink-3);}
.cal-legend span{display:inline-flex;align-items:center;gap:6px;}

/* ============================== charts ============================== */
/* The chart module owns its internals; this is only the frame it sits in. */
.chart{position:relative;width:100%;min-width:0;}
.chart svg{width:100%;height:auto;display:block;overflow:visible;}
.chart-tip{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  background:var(--ink);color:var(--surface);border-radius:8px;padding:7px 10px;
  font-size:11.5px;font-weight:560;line-height:1.45;white-space:nowrap;z-index:5;
  box-shadow:var(--e2);transition:opacity .1s;
}
.chart-tip b{font-weight:700;font-size:12.5px;display:block;}
.chart-tip.on{opacity:1;}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--ink-2);}
.chart-legend span{display:inline-flex;align-items:center;gap:6px;}
.chart-legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto;}
.chart-empty{display:grid;place-items:center;min-height:150px;color:var(--ink-3);font-size:12.5px;
  border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);}

/* ============================== POS / orders ============================== */
.pos-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,124px),1fr));}
.pos-item{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
  padding:13px 10px;cursor:pointer;text-align:center;min-width:0;
  transition:border-color .14s,box-shadow .14s,transform .1s;
}
.pos-item:hover{border-color:var(--blue);box-shadow:var(--e2);transform:translateY(-1px);}
.pos-item:active{transform:translateY(0);}
.pi-emoji{font-size:26px;line-height:1;margin-bottom:8px;}
.pi-name{font-size:12.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pi-price{font-size:12px;color:var(--ink-3);margin-top:4px;font-weight:600;}

.cart-item{
  display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px;min-width:0;
}
.cart-item:last-child{border-bottom:0;}
.ci-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560;}
.ci-sub{font-weight:640;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.qty-btn{
  width:26px;height:26px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:7px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:14px;line-height:1;
  display:grid;place-items:center;transition:background .12s;
}
.qty-btn:hover{background:var(--surface-sunken);color:var(--ink);}
.pos-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:13px;margin-top:4px;border-top:1px solid var(--line);}
.pos-total .pt-l{font-size:12.5px;color:var(--ink-3);font-weight:600;}
.pos-total .pt-v{font-size:24px;font-weight:680;letter-spacing:-.03em;}

/* ============================== assistant dock ==============================
   The one genuinely floating element in the product, so it is the one place
   that earns the glass. It sits over the working surface, never inside a card,
   because it belongs to the whole page rather than to any one section. */
.dock{
  position:fixed;left:var(--rail);right:0;bottom:0;z-index:70;
  padding:0 var(--pad) 18px;pointer-events:none;
}
.dock-inner{max-width:840px;margin:0 auto;pointer-events:auto;}

/* suggestion chips — what this page can be asked, right now */
.dock-chips{display:flex;gap:7px;overflow-x:auto;padding:0 2px 9px;scrollbar-width:none;
  mask-image:linear-gradient(90deg,#000 92%,transparent);}
.dock-chips::-webkit-scrollbar{display:none;}
.dock-chip{
  flex:0 0 auto;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:580;
  color:var(--ink-2);cursor:pointer;white-space:nowrap;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--line);box-shadow:var(--e1);
  transition:color .14s,border-color .14s,transform .1s;
}
.dock-chip:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-1px);}

.dock-bar{
  display:flex;align-items:flex-end;gap:9px;padding:9px 9px 9px 15px;
  border-radius:var(--r-xl);box-shadow:var(--e3);
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  transition:box-shadow .18s,border-color .18s;
}
html[data-theme="dark"] .dock-bar{border-color:var(--line-strong);}
.dock-bar:focus-within{border-color:var(--blue);box-shadow:var(--e3),0 0 0 3px var(--blue-100);}
.dock-input{
  flex:1 1 auto;min-width:0;border:0;background:none;outline:none;resize:none;
  font-size:14px;line-height:1.5;padding:7px 0;max-height:132px;color:var(--ink);
}
.dock-input::placeholder{color:var(--ink-3);}
.dock-send{
  width:34px;height:34px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink);color:var(--surface);display:grid;place-items:center;
  transition:opacity .14s,transform .1s,background .14s;
}
.dock-send:disabled{opacity:.3;cursor:not-allowed;}
.dock-send:not(:disabled):hover{transform:scale(1.05);}
.dock-send svg{width:15px;height:15px;}
.dock-mic{
  width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:50%;
  background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:background .14s,color .14s,border-color .14s;
}
.dock-mic:hover{background:var(--surface-sunken);color:var(--ink);}
.dock-mic.live{background:var(--neg);border-color:var(--neg);color:#fff;animation:micPulse 1.5s infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(180,68,60,.5);}50%{box-shadow:0 0 0 7px rgba(180,68,60,0);}}
.dock-hint{font-size:11px;color:var(--ink-3);text-align:center;margin-top:7px;}

/* ---- the conversation, as a sheet that grows upward from the dock ---- */
.dock-sheet{
  max-height:min(62vh,560px);overflow-y:auto;margin-bottom:10px;padding:16px 18px;
  border-radius:var(--r-xl);box-shadow:var(--e3);
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  display:none;flex-direction:column;gap:14px;scrollbar-width:thin;
}
.dock-sheet.on{display:flex;}
html[data-theme="dark"] .dock-sheet{border-color:var(--line-strong);}
.dock-sheet-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.dock-sheet-head .ico-btn{margin-left:auto;width:26px;height:26px;}

.msg{display:flex;gap:10px;min-width:0;font-size:13.5px;line-height:1.6;}
.msg-av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#fff;background:var(--brand-grad);}
.msg.me .msg-av{background:var(--ink-3);}
.msg-body{min-width:0;flex:1 1 auto;}
.msg-body p{margin:0 0 8px;} .msg-body p:last-child{margin:0;}
.msg-body strong{font-weight:680;color:var(--ink);}
.msg-body ul{margin:6px 0 8px;padding-left:18px;} .msg-body li{margin:3px 0;}
.msg-body code{background:var(--surface-sunken);border-radius:5px;padding:1px 5px;font-size:12px;}

/* thinking: a real state, not a spinner. Shows what it is weighing. */
.msg-think{
  font-size:12px;color:var(--ink-3);line-height:1.55;border-left:2px solid var(--line-strong);
  padding:2px 0 2px 10px;margin-bottom:8px;max-height:88px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.think-dots{display:inline-flex;gap:3px;align-items:center;vertical-align:middle;margin-left:2px;}
.think-dots i{width:4px;height:4px;border-radius:50%;background:var(--ink-3);
  animation:thinkBounce 1.2s infinite ease-in-out;}
.think-dots i:nth-child(2){animation-delay:.15s;} .think-dots i:nth-child(3){animation-delay:.3s;}
@keyframes thinkBounce{0%,70%,100%{transform:translateY(0);opacity:.4;}35%{transform:translateY(-3px);opacity:1;}}
.think-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2);}
.think-shimmer{
  background:linear-gradient(90deg,var(--ink-3) 20%,var(--ink) 45%,var(--ink-3) 70%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 1.9s linear infinite;
}
@keyframes shimmer{to{background-position:-200% 0;}}

/* an action the assistant actually performed */
.msg-act{
  display:flex;align-items:center;gap:8px;margin-top:8px;padding:9px 12px;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;box-shadow:var(--e1);
}
.msg-act .ma-ico{width:22px;height:22px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--pos-bg);color:var(--pos);}
.msg-act .ma-ico svg{width:13px;height:13px;}
.msg-act.pending .ma-ico{background:var(--info-bg);color:var(--info);}
.msg-act.failed .ma-ico{background:var(--neg-bg);color:var(--neg);}
.msg-act .ma-t{min-width:0;flex:1 1 auto;font-weight:580;}
.msg-act .ma-t small{display:block;font-weight:500;color:var(--ink-3);font-size:11.5px;}

/* ============================== toast ============================== */
.toast{
  position:fixed;left:50%;bottom:120px;transform:translate(-50%,14px);z-index:200;
  background:var(--ink);color:var(--surface);border-radius:999px;padding:9px 18px;
  font-size:13px;font-weight:560;box-shadow:var(--e3);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(90vw,420px);
  text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ============================== responsive ============================== */
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr);}
  .rail{
    position:fixed;top:0;left:0;bottom:0;width:min(82vw,290px);z-index:100;
    box-shadow:var(--e3);visibility:hidden;transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s;
  }
  .rail.open{visibility:visible;transform:translateX(0);
    transition:transform .24s cubic-bezier(.22,1,.36,1),visibility 0s;}
  .rail-scrim{position:fixed;inset:0;z-index:95;background:rgba(8,14,22,.5);
    opacity:0;pointer-events:none;transition:opacity .24s;}
  .rail-scrim.on{opacity:1;pointer-events:auto;}
  .burger{display:grid;}
  .dock{left:0;padding-bottom:14px;}
  .page{padding-bottom:170px;}
  .tbl-wrap{margin:0 -14px;padding:0 14px;}
}
@media (max-width:560px){
  .card{padding:15px;border-radius:var(--r);}
  .t-value{font-size:23px;}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .top h1{font-size:16px;}
  .dock-bar{padding:8px 8px 8px 13px;border-radius:var(--r-lg);}
  .dock-sheet{border-radius:var(--r-lg);max-height:56vh;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}
@media print{
  .rail,.dock,.top,.toast{display:none!important;}
  .app{grid-template-columns:1fr;}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid;}
}

/* ============================================================================
   OVERRIDES — the last word in the cascade
   ----------------------------------------------------------------------------
   Everything below exists to beat two older stylesheets that this page still
   loads: the page's own <style> block and css/theme.css. Both predate the
   design system, and theme.css writes html[data-theme="dark"], so these rules
   carry the same selector weight and come last on purpose.
============================================================================ */

/* ------------------------------- surfaces -------------------------------
   In dark mode a 1px line on every card turned the page into a wireframe of
   boxes inside boxes — the panel is a container, not a surface, and it was
   being painted like one. Surfaces are separated by tone and shadow here,
   never by an outline. */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel > .grid-2,
html[data-theme="dark"] .tiles{
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .tile{
  background:var(--surface)!important;
  border:1px solid transparent!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.035),var(--e2)!important;
}
html[data-theme="dark"] .card .card{
  /* a card inside a card gets tone, not a second edge */
  background:var(--surface-2)!important;box-shadow:none!important;
}
html[data-theme="dark"] .item-card,
html[data-theme="dark"] .campause-row,
html[data-theme="dark"] .check-row{background:transparent!important;border-color:var(--line)!important;}
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .chart-empty{
  background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--ink-3)!important;
}
html[data-theme="dark"] .warn-box{background:var(--warn-bg)!important;border-color:transparent!important;}
html[data-theme="dark"] .unlock-box{background:var(--info-bg)!important;}
html[data-theme="dark"] body{background:var(--bg)!important;}

/* every control keeps its own surface, never the old near-black */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--surface-2)!important;border-color:var(--line-strong)!important;color:var(--ink)!important;
}
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .chip-btn,
html[data-theme="dark"] .ico-btn,
html[data-theme="dark"] .btn-soft{
  background:var(--surface-2)!important;border-color:var(--line-strong)!important;color:var(--ink-2)!important;
}
html[data-theme="dark"] .filter-btn.active{background:var(--blue)!important;border-color:var(--blue)!important;color:#04121F!important;}

/* -------------------------------- calendar --------------------------------
   The cells were hardcoded #fff, so dark mode rendered a sheet of white
   stickers. Accent moves off Pollos red onto the product blue. */
.cal-day{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink-2);}
.cal-day:hover{border-color:var(--blue)!important;background:var(--surface-sunken)!important;}
.cal-day.other{opacity:.32;}
.cal-day.today{border-color:var(--blue)!important;background:var(--blue-100)!important;}
.cal-day.selected{box-shadow:0 0 0 2px var(--blue)!important;}
.cal-num{color:var(--ink)!important;}
.cal-day.other .cal-num{color:var(--ink-3)!important;}
.cal-dow{color:var(--ink-3)!important;}
.cc-evento{background:var(--info-bg)!important;color:var(--info)!important;}
.cc-compra{background:var(--warn-bg)!important;color:var(--warn)!important;}
.cc-ausencia{background:var(--neg-bg)!important;color:var(--neg)!important;}
.cc-nota{background:var(--surface-sunken)!important;color:var(--ink-2)!important;}
.cc-more{background:transparent!important;color:var(--ink-3)!important;}
.cal-item{color:var(--ink);}
.cal-item .ci-del{background:var(--surface-sunken)!important;color:var(--ink-2)!important;}

/* ------------------------------ camera pills ------------------------------
   The active pill was --ink on #fff text: in dark mode --ink is near-white, so
   the label vanished into its own background. PRINCIPAL was a green chip
   competing with the pill it sat inside — it is a state, so it reads as one. */
.cam-pill{
  background:var(--surface-2)!important;border:1px solid var(--line-strong)!important;
  color:var(--ink-2)!important;font-weight:620!important;padding:8px 14px!important;
  transition:background .14s,border-color .14s,color .14s;
}
.cam-pill:hover{border-color:var(--blue)!important;color:var(--ink)!important;}
.cam-pill.active{
  background:var(--blue-100)!important;border-color:var(--blue)!important;color:var(--blue)!important;
}
.cam-pill .cp-paused{
  background:transparent!important;color:var(--ink-3)!important;
  font-size:10px!important;font-weight:700!important;letter-spacing:.05em;
  padding:0 0 0 2px!important;border:0!important;
}
.cam-pill .cp-primary{
  display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;
  letter-spacing:.05em;color:var(--pos);padding-left:2px;
}
.cam-pill .cp-primary::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--pos);flex:0 0 auto;
}

/* ------------------------------- rail drawer -------------------------------
   Off-canvas it floats over the page, so it takes the glass the dock uses. */
@media (max-width:960px){
  .rail{
    background:var(--glass)!important;
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    border-right:1px solid var(--glass-line);
  }
  html[data-theme="dark"] .rail{border-right-color:var(--line-strong);}
}

/* ================================ the dock ================================ */

/* The field is the bar. There is no second box inside it — the generic
   textarea rule was giving it a border, a fill and a 76px floor, which is the
   outlined container that appeared on focus. */
.dock-bar .dock-input,
html[data-theme="dark"] .dock-bar .dock-input{
  background:transparent!important;border:0!important;box-shadow:none!important;
  min-height:0!important;height:auto;padding:8px 0!important;border-radius:0!important;
  font-size:14.5px;line-height:1.5;
}
.dock-bar .dock-input:focus{box-shadow:none!important;border:0!important;}

/* the lifted chip was being clipped by its own scroller */
.dock-chips{padding:8px 2px 10px!important;}

/* messages need air between them: the gap lived on the sheet, so every bubble
   inside the log was flush against the next one */
#aiLog{display:flex;flex-direction:column;gap:18px;}
.msg-av{width:26px;height:26px;}

/* the mic: a thin glyph, and a real recording state instead of a red blob */
.dock-mic{width:32px;height:32px;border-radius:50%;}
.dock-mic svg{width:15px;height:15px;}
.dock-mic.live{
  background:var(--neg)!important;border-color:var(--neg)!important;color:#fff!important;
  animation:none;
}
.mic-wave{display:none;align-items:flex-end;gap:2px;height:13px;}
.dock-mic.live .mic-ico{display:none;}
.dock-mic.live .mic-wave{display:flex;}
.mic-wave i{width:2px;border-radius:1px;background:currentColor;animation:micBar .9s ease-in-out infinite;}
.mic-wave i:nth-child(1){height:5px;animation-delay:0s;}
.mic-wave i:nth-child(2){height:11px;animation-delay:.12s;}
.mic-wave i:nth-child(3){height:8px;animation-delay:.24s;}
.mic-wave i:nth-child(4){height:12px;animation-delay:.36s;}
@keyframes micBar{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}

/* The workspace background is a flat surface. An ambient particle field lived
   here for one revision; it read as decoration on a page whose job is numbers,
   so it is gone. js/crm-fx.js is unreferenced — delete it if it stays unused. */

/* ============================================================================
   ALIGNMENT & CALM  —  the Stripe pass
   ----------------------------------------------------------------------------
   Two things were making this look busy: cards inside a grid were being pushed
   out of line by a stacking margin, and every container was drawing its own
   edge. Stripe's dashboard is quiet because surfaces are separated by SPACE and
   a whisper of tone, not by outlines, and because everything sits on one grid.
============================================================================ */

/* THE alignment bug: `.card + .card` was written for cards stacked in a column,
   but a grid's children are adjacent siblings too — so the second card in every
   row started 28px lower than the first. That is why "Dinero ganado" and
   "Tendencia" (and "Tu transmisión" / "Audiencia") never lined up. */
.grid-2 > .card + .card,
.tiles > .card + .card,
.stream-overview-grid > .card + .card,
.row-2 > .card + .card,
.row-3 > .card + .card{margin-top:0!important;}

/* one grid, everything stretched to it, no orphan gaps */
.grid-2,.stream-overview-grid{align-items:stretch;}
.grid-2 > *,.stream-overview-grid > *{min-width:0;}
.grid-2 > .card,.stream-overview-grid > .card{display:flex;flex-direction:column;}
/* the chart is what should absorb the slack, so the card bottoms line up */
.grid-2 > .card > .chart,
.grid-2 > .card > .vchart{flex:1 1 auto;min-height:0;}
.panel > .grid-2 + .grid-2,
.panel > .card + .grid-2,
.panel > .grid-2 + .card{margin-top:var(--pad);}

/* --------------------------- quieter surfaces ---------------------------
   Light gets a hairline because white-on-white needs one; dark gets tone and
   shadow instead, because a light line on a dark ground reads as a wireframe. */
.card{border-color:#EDF1F6;box-shadow:0 1px 2px rgba(12,24,38,.05);}
.tile{border-color:#EDF1F6;box-shadow:0 1px 2px rgba(12,24,38,.05);}
.card-title{margin-bottom:16px;}
.card-title .left{font-weight:650;}

/* ------------------------------- the rail -------------------------------
   It sits on the page, not in a panel of its own. Same ground as the content,
   no border — the only thing that should read as a container here is the
   active item, and that one is blue. */
.rail{background:var(--bg);border-right:0;}
html[data-theme="dark"] .rail{background:var(--bg);border-right:0;}
.rail-foot{border-top:1px solid var(--line);}
html[data-theme="dark"] .rail-foot{border-top-color:rgba(255,255,255,.07);}
.nav-item.active{background:var(--blue);color:#fff;font-weight:640;}
.nav-item.active .ni-ico{color:#fff;}
html[data-theme="dark"] .nav-item.active{background:var(--blue);color:#06121F;}
html[data-theme="dark"] .nav-item.active .ni-ico{color:#06121F;}
.nav-item:hover:not(.active){background:rgba(127,150,180,.12);}
html[data-theme="dark"] .nav-item:hover:not(.active){background:rgba(255,255,255,.055);}

/* the top bar belongs to the surface, not to a chrome strip */
.top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line);}
html[data-theme="dark"] .top{border-bottom-color:rgba(255,255,255,.06);}

/* -------------------------- fewer nested boxes --------------------------
   A card inside a card is two edges saying the same thing. The inner one keeps
   only its padding. */
.card .card{border:0!important;box-shadow:none!important;padding:0!important;
  background:transparent!important;}
.card .card + .card{margin-top:18px!important;}

/* KPI strips inside a card are part of that card, not four more objects */
.card > .vw-kpis .vw-kpi,
.stream-overview-grid .vw-kpi{
  background:var(--surface-sunken)!important;border:0!important;box-shadow:none!important;
}
html[data-theme="dark"] .vw-kpi{background:var(--surface-2)!important;}
.vw-kpi b{color:var(--ink)!important;}
.vw-kpi.primary{background:var(--blue-100)!important;}
.vw-kpi.primary b{color:var(--blue)!important;}

/* charts and their frames share the card's rhythm */
.vw-chart-wrap{border:0!important;background:transparent!important;padding:0!important;}
.chart-legend{margin-top:14px;}

/* ------------------------------ mobile fit ------------------------------ */
@media (max-width:700px){
  .grid-2,.stream-overview-grid{grid-template-columns:minmax(0,1fr);}
  .card{padding:16px;}
  .tiles{gap:10px;}
  .card-title{margin-bottom:13px;}
}

/* ============================================================================
   STRIPE PASS
   ----------------------------------------------------------------------------
   The brief, in the owner's words: "there can't be so many damn containers
   that are rounded and what not — everything is just blended in", and the
   selected blue "looks horrendous, use a transparent glass look blue".

   Three ideas, applied everywhere:

     1. SELECTION IS LIGHT, NOT PAINT. A solid blue block is the loudest thing
        on the screen and it is attached to the least important information
        (where you already are). It becomes a translucent wash plus blue ink
        plus a 2.5px marker — legible on any surface, in either theme.

     2. A BOX IS A LAST RESORT. Stripe groups by whitespace, a hairline rule
        and alignment; it draws a border only where something genuinely floats.
        Stat tiles lose their boxes and become columns divided by one rule.
        Cards keep a surface but lose the outline — in dark, tone and shadow
        separate them; an outline turns the page into a wireframe.

     3. TABS INSTEAD OF SCROLL. A long panel gets a row of underline tabs at
        the top, the way Transactions does — Payments / Payouts / Top-ups.

   This block is last in the file on purpose: it has to beat business.html's
   own <style> and the dark overrides above it.
============================================================================ */

/* ---------------------------------------------------------- 1. selection */
:root{
  --sel:rgba(22,104,196,.085);
  --sel-2:rgba(22,104,196,.13);
  --sel-line:rgba(22,104,196,.22);
}
html[data-theme="dark"]{
  --sel:rgba(79,169,245,.13);
  --sel-2:rgba(79,169,245,.19);
  --sel-line:rgba(79,169,245,.30);
}

.rail .nav-item.active,
html[data-theme="dark"] .rail .nav-item.active{
  background:var(--sel)!important;color:var(--blue)!important;position:relative;
}
.rail .nav-item.active .ni-ico{color:var(--blue)!important;}
/* the marker sits in the rail's own 12px padding, so it reads as an edge
   indicator rather than as one more rounded thing */
.rail .nav-item.active::before{
  content:"";position:absolute;left:-12px;top:5px;bottom:5px;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--blue);
}
.rail .nav-item:hover:not(.active),
html[data-theme="dark"] .rail .nav-item:hover:not(.active){
  background:color-mix(in srgb,var(--ink) 5%,transparent)!important;
}

.filter-btn.active,
html[data-theme="dark"] .filter-btn.active{
  background:var(--sel-2)!important;
  border-color:var(--sel-line)!important;
  color:var(--blue)!important;
  font-weight:640;
}
.tbl tbody tr.sel,
.item-card.sel{background:var(--sel)!important;}

/* ------------------------------------------------------ 2. fewer boxes */
/* Stat row: columns divided by one hairline, no box per number. */
.app .tiles{
  gap:0!important;background:transparent!important;border:0!important;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0!important;box-shadow:none!important;padding:0!important;
}
.app .tile,
html[data-theme="dark"] .app .tile{
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;padding:16px 22px 16px 0!important;
  border-right:1px solid var(--line)!important;
  transition:background .14s;
}
.tiles > .tile:last-child{border-right:0!important;}
.tile[data-tile]:hover{
  background:color-mix(in srgb,var(--ink) 3.5%,transparent)!important;
  transform:none!important;box-shadow:none!important;
}
.t-label{text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink-3);}
.t-value{font-size:23px;letter-spacing:-.03em;margin-top:3px;}

/* Cards keep a surface, lose the outline. In dark the old rule painted a
   1px white ring on every card, which is what read as "you can see the
   edges of the container in the background". */
.app .card,
html[data-theme="dark"] .app .card{
  border:0!important;
  box-shadow:none!important;
  border-radius:14px;
}
html[data-theme="dark"] .app .card{background:var(--surface-2)!important;}
.app .card{background:var(--surface);}
/* a card that really floats above the page asks for it */
.app .card.raised,html[data-theme="dark"] .app .card.raised{box-shadow:var(--e2)!important;}
/* and a card inside a card gets nothing at all — no second surface */
.app .card .card,html[data-theme="dark"] .app .card .card{
  background:transparent!important;box-shadow:none!important;padding-inline:0;
}

/* Rows are separated by a rule, not by a box each. */
.app .item-card,html[data-theme="dark"] .app .item-card{
  background:transparent!important;border:0!important;
  border-bottom:1px solid var(--line)!important;border-radius:0!important;
  transition:background .14s;
}
.item-card:last-child{border-bottom:0!important;}
.item-card:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)!important;}

/* THE GAP the owner circled on Resumen. The overview panel reorders its
   children with `order:`, but `+` sibling selectors match DOM order, so
   `.panel > .card + .grid-2 {margin-top}` was adding 28px between two blocks
   that are not visually adjacent. The flex `gap` already spaces them and it
   IS order-aware — these rules only ever added a hole. */
.panel > .grid-2 + .grid-2,
.panel > .card + .grid-2,
.panel > .grid-2 + .card{margin-top:0!important;}

/* The .panel is a flex column with its own gap; .tiles carrying a
   margin-bottom on top of that is what left a 52px hole under the stat row
   where the gap says 24. */
.panel > .tiles{margin-bottom:0!important;}

/* A quiet, one-line page notice. Two full-width amber bars stacked at the top
   of Resumen is two warnings competing; only one of them is actually a
   warning. This is the other one. */
.page-note{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:10px;margin-bottom:var(--pad);
  background:var(--surface-sunken);color:var(--ink-2);
  font-size:12.5px;line-height:1.5;
}
html[data-theme="dark"] .page-note{background:var(--surface-2);color:var(--ink-2);}
.page-note svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-3);}
.page-note .x{
  margin-left:auto;flex:0 0 auto;border:0;background:none;cursor:pointer;
  color:var(--ink-3);font-size:16px;line-height:1;padding:2px 4px;border-radius:6px;
}
.page-note .x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);}

/* --------------------------------------------------- 3. in-page tab bar */
/* Underline tabs, the shape Transactions uses. Scrolls sideways on a phone
   instead of wrapping into two rows. */
.subtabs{
  display:flex;gap:2px;align-items:center;
  border-bottom:1px solid var(--line);margin:0 0 var(--pad);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.subtabs::-webkit-scrollbar{display:none;}
.subtab{
  position:relative;flex:0 0 auto;border:0;background:none;cursor:pointer;
  padding:10px 12px 12px;font-size:13.5px;font-weight:580;color:var(--ink-3);
  white-space:nowrap;transition:color .14s;
}
.subtab:hover{color:var(--ink);}
.subtab.active{color:var(--blue);font-weight:650;}
.subtab.active::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;background:var(--blue);
}
.subtab .n{
  margin-left:7px;font-size:11.5px;font-weight:700;color:var(--ink-3);
  background:var(--surface-sunken);border-radius:999px;padding:1px 7px;
}
.subtab.active .n{background:var(--sel-2);color:var(--blue);}
.subpane{display:none;}
.subpane.active{display:block;animation:subIn .22s cubic-bezier(.2,.8,.2,1) both;}
@keyframes subIn{from{opacity:0;transform:translateY(4px);}}

/* ------------------------------------------------------- icon buttons */
/* The emoji-stripping pass left every one of these empty; they now carry an
   SVG from ICO_PATHS in business.html. These are the states that set. */
.ico-btn svg{width:15px;height:15px;}
.ico-btn.on,html[data-theme="dark"] .ico-btn.on{
  background:var(--sel-2)!important;border-color:var(--sel-line)!important;color:var(--blue)!important;
}
.ico-btn.ico-danger:hover,html[data-theme="dark"] .ico-btn.ico-danger:hover{
  background:var(--neg-bg)!important;border-color:transparent!important;color:var(--neg)!important;
}
.ico-btn.ico-ok:hover,html[data-theme="dark"] .ico-btn.ico-ok:hover{
  background:var(--pos-bg)!important;border-color:transparent!important;color:var(--pos)!important;
}
/* a list row's leading glyph — never an empty rounded box again */
.item-thumb.ico-thumb,html[data-theme="dark"] .item-thumb.ico-thumb{
  display:grid;place-items:center;background:var(--surface-sunken)!important;
  border:0!important;color:var(--ink-3);
}
.item-thumb.ico-thumb svg{width:17px;height:17px;}

@media (max-width:860px){
  /* stacked, the vertical rule is wrong — they become stacked rows */
  .tile,html[data-theme="dark"] .tile{
    border-right:0!important;border-bottom:1px solid var(--line)!important;
    padding:13px 0!important;
  }
  .tiles > .tile:last-child{border-bottom:0!important;}
}

/* ============================================================================
   STRIPE PASS — round two
   Feedback, verbatim: the stat row has no proper spacing; clicking a container
   must not highlight it ("it looks like poor UI") and should surface real
   information instead; the bar-chart blue looks bad; the dashboard should open
   in dark; the rail is still painted a different colour; and the assistant's
   mark should be an outline of our own logo, animated while it thinks.
============================================================================ */

/* ------------------------------------------------- 1. the stat row spacing */
/* It was 16px of padding hard against a 1px rule, so the numbers sat on the
   divider. Stripe gives a metric room on both sides of its rule and lets the
   row breathe above and below. */
.tiles{
  padding:4px 0!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))!important;
}
.tile,html[data-theme="dark"] .tile{
  padding:18px 26px!important;
}
.tiles > .tile:first-child{padding-left:0!important;}
.tiles > .tile:last-child{padding-right:0!important;}
.t-label{font-size:12.5px;line-height:1.35;}
.t-value{margin-top:6px;line-height:1.15;}
.t-sub{margin-top:6px!important;}

/* --------------------------------------------- 2. no highlight on a metric */
/* A tile is a number, not a button. Painting a grey block behind it on hover
   made a read-only figure look pressable and dirtied the row. The affordance
   is the cursor plus the value going blue — and, where a tile really does
   drill down, a small hint that appears only on that tile. */
.tile[data-tile]:hover,
.tile[data-tile]:active,
.tile[data-tile]:focus,
html[data-theme="dark"] .tile[data-tile]:hover{
  background:transparent!important;box-shadow:none!important;transform:none!important;
}
.tile[data-tile]{position:relative;}
.tile[data-tile] .t-value{transition:color .14s;}
.tile[data-tile]:hover .t-value{color:var(--blue);}
/* the Stripe move: a quiet affordance that only shows when you are on it */
.tile[data-tile]::after{
  content:"Ver detalle →";
  position:absolute;right:26px;top:18px;
  font-size:11px;font-weight:650;color:var(--blue);
  opacity:0;transform:translateX(-3px);transition:opacity .16s,transform .16s;
  pointer-events:none;white-space:nowrap;
}
.tile[data-tile]:hover::after{opacity:1;transform:none;}
.tiles > .tile[data-tile]:last-child::after{right:0;}
/* rows in a list are navigable, so they keep a hover — but a tenth of what
   they had, and no rounded block */
.item-card:hover{background:color-mix(in srgb,var(--ink) 2.2%,transparent)!important;}

/* ------------------------------------------------------ 3. the chart blue */
/* The old --c1 is the same blue as every button and every active tab, so a
   chart full of it read as a wall of UI chrome. These are a distinct, cooler
   data blue plus the rest of the categorical ramp, still inside the validated
   lightness band for each theme. */
:root{
  --c1:#3B7DD8;                     /* data blue — cooler and lighter than --blue */
  --grid:#EEF2F7; --axis:#8E9FB2;
}
html[data-theme="dark"]{
  --c1:#5FA8FF;
  --grid:#1A2534; --axis:#61748C;
}

/* -------------------------------------------------------- 5. the rail again */
/* Off-canvas it took a glass fill and a border. On a phone that reads as a
   second panel floating over the page, which is exactly the painted container
   in the screenshot. It gets the page's own background and a shadow to say it
   is above the content, not a different surface. */
@media (max-width:960px){
  .rail,html[data-theme="dark"] .rail{
    background:var(--bg)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border-right:0!important;
    box-shadow:22px 0 60px rgba(0,0,0,.34)!important;
  }
}
.rail,html[data-theme="dark"] .rail{border-right:0!important;}
.rail-foot{border-top-color:var(--line)!important;}

/* ------------------------------------------------- 6. the assistant's mark */
.msg-av .fw-mark{width:100%;height:100%;display:block;}
.msg-av:has(.fw-mark){background:transparent!important;color:var(--ink);padding:2px;}
html[data-theme="dark"] .msg-av:has(.fw-mark){color:var(--ink);}
/* thinking: the aperture turns, the lens breathes. Slow on purpose — a fast
   spinner reads as "loading", this should read as "considering". */
.msg-av.thinking .fw-ring{
  transform-origin:32px 32px;animation:fwTurn 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
.msg-av.thinking .fw-lens{
  transform-origin:32px 32px;animation:fwFocus 1.5s ease-in-out infinite;
}
@keyframes fwTurn{to{transform:rotate(360deg);}}
@keyframes fwFocus{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.62);opacity:.55;}}
@media (prefers-reduced-motion:reduce){
  .msg-av.thinking .fw-ring,.msg-av.thinking .fw-lens{animation:none;}
}

@media (max-width:860px){
  .tile,html[data-theme="dark"] .tile{padding:15px 0!important;}
  .tile[data-tile]::after{right:0;}
}

/* ============================================================================
   STRIPE PASS — round three: the surfaces go away
   ----------------------------------------------------------------------------
   "The whole portal must be pure white, not that grey. The containers must be
   fully minimised — Tu transmisión, Audiencia — they must all blend in with
   the main background. If you will add lines to separate things, do that for
   ALL the pages."

   So: there is no card any more. A section is a title, its content, and a
   hairline where one section ends and the next begins. The page is one sheet.
   What still gets a surface is only what genuinely floats above the sheet —
   the assistant dock, a modal, a dropdown — and inputs, which have to look
   like something you can type into.
============================================================================ */

:root{
  --bg:#FFFFFF;            /* the sheet. Not grey. */
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-sunken:#F5F7FA;   /* only for a hover wash and a chip fill */
  --line:#E7EBF0;
  --line-strong:#D4DBE4;
}
html[data-theme="dark"]{
  --bg:#0A0E15;
  --surface:#0A0E15;
  --surface-2:#0A0E15;
  --surface-sunken:#141A24;
  --line:#1C2534;
  --line-strong:#2A3547;
}

/* ------------------------------------------------------------ no more cards */
.app .card,html[data-theme="dark"] .app .card,
.app .card.raised,html[data-theme="dark"] .app .card.raised{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
}
.app .card + .card{margin-top:0!important;}

/* A section title now carries the section, so it needs to look like a heading
   rather than a label stuck to the top of a box. */
.app .card-title{
  font-size:14.5px;font-weight:660;letter-spacing:-.012em;
  margin:0 0 14px!important;padding:0;
}
.app .card-sub{margin:-8px 0 16px;}

/* Stacked sections are divided by one hairline and real air. This is the
   "lines to separate things" — everywhere, not just on Resumen. */
.panel > .card + .card,
.panel > .subpane > .card + .card,
.subpane > .card + .card{
  border-top:1px solid var(--line)!important;
  margin-top:30px!important;padding-top:30px!important;
}

/* Two columns are divided by air and a rule, not by two boxes. */
.app .grid-2,.app .stream-overview-grid{gap:clamp(24px,3vw,44px)!important;}
@media (min-width:900px){
  .app .grid-2 > * + *,
  .app .stream-overview-grid > * + *{
    border-left:1px solid var(--line);
    padding-left:clamp(24px,3vw,44px);
  }
}
/* the columns stack on a phone, where a left rule would be nonsense */
@media (max-width:899px){
  .app .grid-2 > * + *,.app .stream-overview-grid > * + *{
    border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:26px;
  }
}

/* Things that still float, because they are actually above the page. */
.dock,.dock-sheet,.modal,.ins-box,.settings-modal,.auth-modal,
.stamp-modal,.post-box{background:var(--surface)!important;}
html[data-theme="dark"] .dock-sheet,
html[data-theme="dark"] .ins-box{background:#141A24!important;}

/* An input has to read as a field on a white sheet. */
.field input,.field select,.field textarea,
input[type=date],input[type=text],input[type=search],input[type=number],
input[type=email],input[type=password],input[type=tel],input[type=url],select,textarea,
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:var(--surface)!important;
  border:1px solid var(--line-strong)!important;
  border-radius:9px!important;
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:var(--surface-sunken)!important;
}

/* Empty states and notices stop being boxes too — a dotted rule says "nothing
   here" without adding a rectangle. */
.app .empty-state,html[data-theme="dark"] .app .empty-state,
.app .chart-empty,html[data-theme="dark"] .app .chart-empty{
  background:transparent!important;border:0!important;
  border-top:1px dashed var(--line)!important;border-radius:0!important;
  padding:20px 0!important;text-align:left;color:var(--ink-3)!important;
}
.warn-box,html[data-theme="dark"] .warn-box{
  border-radius:10px!important;border:0!important;
}

/* The stat row divider matches the new hairline weight. */
.tiles{border-color:var(--line)!important;}
.tile{border-right-color:var(--line)!important;}

/* The tab bar sits on the sheet, so its rule is the only edge it needs. */
.subtabs{border-bottom-color:var(--line);}

/* ---------------------------------------------------- fewer, quieter pills */
/* A card header carrying Día/Semana/Mes/Año AND COP/USD/GTQ is seven pills
   before the chart even starts. A choice between four things is a select;
   pills are for two or three, where seeing all the options at once is worth
   the room they take. */
.sel-inline,html[data-theme="dark"] .sel-inline{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--line-strong)!important;background:transparent!important;
  border-radius:999px!important;padding:5px 30px 5px 12px!important;
  font-size:12.5px;font-weight:600;color:var(--ink-2)!important;cursor:pointer;
  min-height:0!important;width:auto!important;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%)!important;
  background-position:calc(100% - 15px) 51%,calc(100% - 11px) 51%!important;
  background-size:4px 4px,4px 4px!important;background-repeat:no-repeat!important;
}
.sel-inline:hover{border-color:var(--blue)!important;color:var(--blue)!important;}

/* one ink on the totals line; a colour only where it is a warning */
.fin-totals{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);}
.fin-totals span{display:inline-flex;gap:6px;align-items:baseline;}
.fin-totals b{font-weight:600;color:var(--ink-3);}
.fin-totals span{color:var(--ink);font-variant-numeric:tabular-nums;}
.fin-totals .pos,html[data-theme="dark"] .fin-totals .pos{color:var(--ink)!important;}
.fin-totals .neg,html[data-theme="dark"] .fin-totals .neg{color:var(--neg)!important;}

/* The chart legend was three coloured chips restating the axis. Keep it, but
   at the weight of a caption rather than a traffic light. */
.chart-legend{color:var(--ink-3);font-size:11px;}
.chart-legend i{width:7px;height:7px;border-radius:2px;}

/* Green was doing decorative work in a dozen places. It now means exactly one
   thing — live/positive state on a badge — and everything else is ink. */
.tile .t-value,html[data-theme="dark"] .tile .t-value{color:var(--ink)!important;}
.tile.accent-pos .t-value,.tile.accent-warn .t-value{color:var(--ink)!important;}

/* --------------------------------------------------------- filters on top */
/* The two questions an owner asks a list of orders are "when" and "who".
   Both were buried in a grey sub-line; they are now controls sitting above
   the table, always visible, the way Transactions puts its filter row above
   the rows rather than behind a menu. */
.filter-row{
  display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  padding:0 0 16px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.fr-field{display:grid;gap:5px;min-width:0;}
.fr-field.grow{flex:1 1 220px;}
.fr-field > span{font-size:11.5px;font-weight:600;color:var(--ink-3);}
.fr-field input{min-height:34px!important;padding:6px 11px!important;font-size:13px;}
.count-chip{
  font-size:11.5px;font-weight:700;color:var(--ink-3);
  background:var(--surface-sunken);border-radius:999px;padding:1px 8px;margin-left:7px;
}

/* table: readable at a glance, no zebra, one rule per row */
.tbl th{
  font-size:11.5px;font-weight:650;letter-spacing:.02em;color:var(--ink-3);
  text-transform:none;padding:0 12px 10px 0;border-bottom:1px solid var(--line-strong);
}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);}
.tbl tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover,html[data-theme="dark"] .tbl tbody tr:hover{
  background:color-mix(in srgb,var(--ink) 2.5%,transparent)!important;
}
.tbl .nowrap{white-space:nowrap;}
.tbl .clip{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tbl th:last-child,.tbl td:last-child{padding-right:0;}
.tbl .num{text-align:right;}

/* The tile sub-label was green and 700-weight, so every metric shouted a
   caption in the "money in" colour — four greens in a row that mean nothing.
   It is a caption: grey, normal weight. */
.tile .t-sub,html[data-theme="dark"] .tile .t-sub{
  color:var(--ink-3)!important;font-weight:500!important;
}
.tile .t-sub .t-delta.up{color:var(--pos)!important;font-weight:650!important;}
.tile .t-sub .t-delta.down{color:var(--neg)!important;font-weight:650!important;}

/* ============================================================================
   STRIPE PASS — round four
   Feedback, verbatim: "THERE NEEDS TO BE PADDING HERE, THE LINE CAN BE SO
   CLOSE TO THE DAMN TEXT … THAT IS NOT THE ONLY PAGE THAT HAS THAT PADDING
   MISSING ADD IT ACROSS THE ENTIRE DASHBOARD. The container surrounding all
   the settings options that is like a dark grey should be removed and it
   should just blend with the rest of the website."

   The stat-row rule that was supposed to fix this was written as `.tile`,
   while `.app .tile` above it set `padding:16px 22px 16px 0`. Two `!important`
   declarations, and the more specific one won — so every tile had
   padding-left:0 and its neighbour's vertical rule landed 0px from the label.
   Everything below is `.app`-scoped so it is the last word for the workspace
   and never touches the sales page's demo panels.

   One number governs the whole thing: --gut is the air a divider gets on both
   sides, everywhere it appears.
============================================================================ */
.app{--gut:26px;--gut-y:20px;}
@media (max-width:1100px){ .app{--gut:20px;--gut-y:16px;} }

/* ---------------------------------------------------- 1. the stat row */
.app .tiles{
  padding:6px 0!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))!important;
}
.app .tile,
html[data-theme="dark"] .app .tile{
  /* air above and below the horizontal rules, air on BOTH sides of the
     vertical one. This is the padding the owner circled. */
  padding:var(--gut-y) var(--gut)!important;
}
.app .tiles > .tile:first-child{padding-left:0!important;}
.app .tiles > .tile:last-child{padding-right:0!important;}
.app .tile[data-tile]::after{right:var(--gut);top:var(--gut-y);}
.app .tiles > .tile:last-child[data-tile]::after{right:0;}
/* ---------------------------------------- the stat row on a phone -------
   `auto-fit, minmax(210px, 1fr)` collapses to ONE column at 375px, so four
   metrics became four full rows and the page scrolled forever. Two per row,
   divided by the same hairlines. */
@media (max-width:860px){
  .app .tiles{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:0!important;
  }
  .app .tile,html[data-theme="dark"] .app .tile{
    padding:14px 14px!important;
    border-right:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
  }
  .app .tiles > .tile:nth-child(2n){border-right:0!important;padding-right:0!important;}
  .app .tiles > .tile:nth-child(2n+1){padding-left:0!important;}
  .app .tiles > .tile:nth-last-child(-n+2){border-bottom:0!important;}
  .app .t-value{font-size:20px;}
  .app .t-label{font-size:11.5px;}
  .app .t-sub{font-size:11px;}
  /* every other metric grid in the workspace follows the same rule */
  .app .vw-kpis,.app .vw-time-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .app .vw-kpi,.app .vw-time-stat{
    padding:13px 14px!important;border-right:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
  }
  .app .vw-kpis > .vw-kpi:nth-child(2n),
  .app .vw-time-summary > .vw-time-stat:nth-child(2n){
    border-right:0!important;padding-right:0!important;
  }
  .app .vw-kpis > .vw-kpi:nth-child(2n+1),
  .app .vw-time-summary > .vw-time-stat:nth-child(2n+1){padding-left:0!important;}
  .app .vw-kpi b,.app .vw-time-stat b{font-size:19px!important;}
}

/* ------------------------------------------- 2. every other divider, too */
/* Same rule, same air: a hairline never sits against a glyph anywhere in the
   workspace. */
.app .subtabs{margin:0 0 var(--gut)!important;}
.app .subtab{padding:12px 14px 14px!important;}
.app .subtabs .subtab:first-child{padding-left:0!important;}
.app .subtab.active::after{left:0;right:14px;}
.app .subtabs .subtab:first-child.active::after{left:0;}

.app .filter-row{padding:2px 0 var(--gut-y)!important;margin-bottom:var(--gut-y)!important;}

.app .tbl th{padding:0 var(--gut) 14px 0!important;}
.app .tbl td{padding:15px var(--gut) 15px 0!important;}
.app .tbl th:last-child,.app .tbl td:last-child{padding-right:0!important;}
.app .tbl-wrap{margin-top:2px;}

.app .item-card{padding:16px 0!important;gap:14px;}
.app .cart-item{padding:12px 0!important;}
.app .cal-item{padding:11px 0!important;}
.app .cal-side .cal-item + .cal-item{border-top:1px solid var(--line);}
.app .pos-total{padding-top:18px!important;margin-top:6px!important;}
.app .rail-foot{padding-top:14px!important;margin-top:12px!important;}

/* a section heading needs room under it before its content starts */
.app .card-title{margin:0 0 16px!important;}
.app .card-title + .filters,.app .card-title + .filter-row{margin-top:0;}

/* ------------------------------------ 3. no grey container anywhere in here */
/* The rail, the settings sections and every list sit on the SAME sheet as the
   page. Nothing in the workspace is allowed its own fill except things that
   genuinely float (the dock, a modal, a dropdown) and inputs. */
.app .rail,html[data-theme="dark"] .app .rail{
  background:var(--bg)!important;border-right:0!important;box-shadow:none!important;
  border-radius:0!important;
}
.app .rail-scroll,.app .rail-brand,.app .rail-foot,.app .rail-user{
  background:transparent!important;box-shadow:none!important;
}
@media (max-width:960px){
  /* off-canvas it does float, so it keeps a scrim-side edge — but still no
     rounded grey panel */
  .app .rail,html[data-theme="dark"] .app .rail{
    background:var(--bg)!important;backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border-right:1px solid var(--line)!important;border-radius:0!important;
  }
}
/* A nav row is a label, not a filled box. Hover moves the ink, not the
   background; the active row is blue text plus one marker. */
.app .rail .nav-item:hover:not(.active),
html[data-theme="dark"] .app .rail .nav-item:hover:not(.active){
  background:transparent!important;color:var(--ink)!important;
}
.app .rail .nav-item:hover:not(.active) .ni-ico{color:var(--ink-2)!important;}
.app .rail .nav-item.active,
html[data-theme="dark"] .app .rail .nav-item.active{
  background:transparent!important;color:var(--blue)!important;
}
.app .rail .nav-item{padding:9px 10px!important;}

/* Settings is a stack of sections on the sheet, like every other page. */
.app .panel[data-panel="settings"] .card,
html[data-theme="dark"] .app .panel[data-panel="settings"] .card{
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;
}
.app .bp-grid{gap:var(--gut)!important;}
.app .bp-actions{margin-top:var(--gut-y)!important;padding-top:var(--gut-y);
  border-top:1px solid var(--line);}

/* --------------------------------- 4. the icon buttons that render blank */
.app .ci-del,.app .qty-btn,.app .mm-btn{display:grid;place-items:center;}
.app .ci-del svg,.app .qty-btn svg{width:14px;height:14px;}
.app .mm-btn svg{width:13px;height:13px;}
.app .cal-item .ci-del,html[data-theme="dark"] .app .cal-item .ci-del{
  background:transparent!important;color:var(--ink-3)!important;opacity:0;
  transition:opacity .12s,color .12s;
}
.app .cal-item:hover .ci-del,.app .cal-item .ci-del:focus-visible{opacity:1;}
.app .cal-item .ci-del:hover{color:var(--neg)!important;}

/* ------------------------------------------- 5. the bars that never drew */
/* `.meal-bar` is a <span> inside a non-flex wrapper, so it stayed
   display:inline and width/height/min-width were all ignored: "Platos más
   populares" and "Gastos por categoría" have been rendering as five empty
   grey troughs. Both charts share this class. */
.app .meal-bar{display:block!important;}
.app .meal-bar-wrap{
  background:var(--surface-sunken)!important;height:8px!important;
  border-radius:99px;overflow:hidden;
}
.app .meal-row{gap:14px!important;margin-bottom:0!important;padding:9px 0;}
.app .meal-row + .meal-row{border-top:1px solid var(--line);}
.app .meal-name{width:40%;font-weight:560!important;font-size:12.5px;color:var(--ink);}
.app .meal-count{
  font-weight:620!important;font-size:12.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;min-width:46px;
}
/* one blue for data, the amber only where the row IS a cost */
.app #mealsChart .meal-bar,.app #aMealsChart .meal-bar{background:var(--c1)!important;}

/* ------------------------------------ 6. a field, not a filled grey block */
/* In dark the inputs were painted --surface-sunken, which is the only grey
   left on the sheet — a column of them reads as "a dark grey container round
   all the settings". Stripe's field is the page colour with one hairline;
   focus is what fills it in. */
html[data-theme="dark"] .app .field input,
html[data-theme="dark"] .app .field select,
html[data-theme="dark"] .app .field textarea,
html[data-theme="dark"] .app input,
html[data-theme="dark"] .app select,
html[data-theme="dark"] .app textarea,
html[data-theme="dark"] .app .bp-fields input,
html[data-theme="dark"] .app .bp-fields textarea{
  background:transparent!important;border-color:var(--line-strong)!important;
}
html[data-theme="dark"] .app .field input:focus,
html[data-theme="dark"] .app .field select:focus,
html[data-theme="dark"] .app .field textarea:focus,
html[data-theme="dark"] .app input:focus,
html[data-theme="dark"] .app select:focus,
html[data-theme="dark"] .app textarea:focus,
html[data-theme="dark"] .app .bp-fields input:focus,
html[data-theme="dark"] .app .bp-fields textarea:focus{
  background:var(--surface-sunken)!important;
}
/* the dock is the one thing that genuinely floats — it keeps its fill */
html[data-theme="dark"] .app .dock-bar .dock-input{background:transparent!important;}

/* ------------------------------- 7. checkboxes stopped being checkboxes */
/* The generic "an input has to read as a field" rule matched input[type=
   checkbox] too, so every checkbox in the workspace grew a 9px-radius border
   and a fill and rendered as a 34px slab — the salmon square on Eventos. A
   checkbox is a checkbox: native box, brand accent, 16px. */
.app input[type=checkbox],.app input[type=radio],
html[data-theme="dark"] .app input[type=checkbox],
html[data-theme="dark"] .app input[type=radio]{
  appearance:auto;-webkit-appearance:auto;
  width:16px!important;height:16px!important;min-height:0!important;
  flex:0 0 auto;margin:0;padding:0!important;
  background:none!important;border:0!important;border-radius:0!important;
  accent-color:var(--blue);box-shadow:none!important;
}
.app .switch input{width:0!important;height:0!important;}
/* a check row inside a form field is one line, not a bordered list item */
.app .field .check-row,.app .check-row[style*="margin:0"]{
  border-bottom:0!important;padding:4px 0!important;gap:9px!important;
  justify-content:flex-start;font-size:12.5px;color:var(--ink-2);
}
.app .check-row label{cursor:pointer;}

/* ------------------------------------- 8. the last filled box on Eventos */
/* "¿Cómo se desbloquea este evento?" was a blue panel inside a form — one more
   container, and the only blue surface in the workspace. It is a section of
   the form, so it reads like one. */
.app .unlock-box,html[data-theme="dark"] .app .unlock-box,
.app .eng-block,html[data-theme="dark"] .app .eng-block{
  background:transparent!important;border:0!important;border-radius:0!important;
  border-top:1px solid var(--line)!important;
  padding:18px 0 0!important;margin:18px 0 0!important;color:var(--ink)!important;
}
.app .ub-title{font-size:12.5px;font-weight:640!important;color:var(--ink-2)!important;margin-bottom:12px;}
.app .ub-hint{color:var(--ink-3)!important;font-weight:500!important;margin:12px 0 22px!important;}
.app .req-opt,html[data-theme="dark"] .app .req-opt{
  background:transparent!important;border:1px solid var(--line-strong)!important;
  color:var(--ink-2)!important;font-weight:580!important;border-radius:8px!important;
  box-shadow:none!important;
}
.app .req-opt:hover{border-color:var(--blue)!important;color:var(--ink)!important;}
.app .req-opt.on,html[data-theme="dark"] .app .req-opt.on{
  background:var(--sel)!important;border-color:var(--blue)!important;
  color:var(--blue)!important;box-shadow:none!important;
}

/* ============================================================================
   STRIPE PASS — round five
   Feedback, verbatim: the Tendencia date pickers must sit in the same row as
   7d/30d/90d as small pills; the metric pop-outs are white with invisible text
   in dark; the assistant's field has a container around it and must have none;
   the bars must be Fund & Watch blue, see-through, and must NOT have rounded
   bottom corners; everything must carry the blurred-glass look; and focusing a
   field on mobile web must not zoom the page.
============================================================================ */

/* ------------------------------------------------- 1. one data colour, glass */
/* Fund & Watch blue, translucent, so overlapping series read as layers rather
   than as five unrelated hues. The bottom corners are squared off in
   js/crm-charts.js (topRoundedBar) — a bar standing on its axis is not a pill. */
:root{
  --c1:rgba(30,155,240,.62); --c2:rgba(216,142,38,.62); --c3:rgba(20,160,120,.58);
  --c4:rgba(140,110,240,.58); --c5:rgba(214,74,110,.58);
}
html[data-theme="dark"]{
  --c1:rgba(79,169,245,.58); --c2:rgba(214,157,64,.55); --c3:rgba(52,190,150,.52);
  --c4:rgba(160,132,255,.52); --c5:rgba(232,110,140,.52);
}
.app .vbar,html[data-theme="dark"] .app .vbar{
  border-radius:6px 6px 0 0!important;
  background:var(--c1)!important;
}
.app .vbar.inc{background:var(--c1)!important;}
.app .vbar.exp{background:var(--c2)!important;}
.app .meal-bar{border-radius:3px!important;}

/* --------------------------------- 2. the metric pop-out, readable in dark */
/* It is appended to <body>, so every .app-scoped rule missed it and it kept a
   hardcoded background:#fff — white card, white text, unreadable. */
.chart-pop,html[data-theme="dark"] .chart-pop{
  background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line-strong)!important;
  border-radius:14px!important;color:var(--ink)!important;
  box-shadow:0 18px 46px rgba(4,10,18,.32)!important;
}
html[data-theme="dark"] .chart-pop{box-shadow:0 18px 46px rgba(0,0,0,.6)!important;}
.chart-pop .cp-title{
  color:var(--ink)!important;font-weight:640!important;font-size:12.5px;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line);
}
.chart-pop .cp-row{color:var(--ink-3)!important;padding:5px 0!important;font-size:12.5px;}
.chart-pop .cp-row b{color:var(--ink)!important;font-weight:620;font-variant-numeric:tabular-nums;}
.chart-pop .cp-x,html[data-theme="dark"] .chart-pop .cp-x{
  background:transparent!important;color:var(--ink-3)!important;font-size:12px;
}
.chart-pop .cp-x:hover{color:var(--ink)!important;}
/* the same treatment for every other floating surface in the workspace */
.chart-tip,html[data-theme="dark"] .chart-tip,
.app .dock-sheet,html[data-theme="dark"] .app .dock-sheet,
.ins-box,html[data-theme="dark"] .ins-box{
  background:color-mix(in srgb,var(--surface) 84%,transparent)!important;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line-strong)!important;color:var(--ink)!important;
}

/* ------------------------------------- 3. the assistant field has NO box */
/* Verbatim: "there should be zero container otherwise when we go over
   anything it will easily show the outline of the container". So the bar has
   no border, no fill and no radius — what separates it from the page is a
   gradient fade in .dock, the way a composer does it. */
/* The composer keeps the rounded pill it has always had — the container that
   had to go was the big filled panel BEHIND it, not this. The pill itself just
   picks up the glass. (The dock is appended to <body>, not into .app, so these
   are deliberately unscoped; the sales page never loads it.) */
.dock{background:transparent!important;padding-top:0!important;}
.dock-bar,html[data-theme="dark"] .dock-bar{
  background:var(--glass)!important;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  box-shadow:0 8px 28px rgba(6,14,26,.10)!important;
}
html[data-theme="dark"] .dock-bar{box-shadow:0 10px 30px rgba(0,0,0,.42)!important;}
.dock-bar:focus-within{border-color:var(--blue)!important;}
/* the FIELD inside the pill has no second box of its own */
.dock-input,.dock-input:focus,.dock-input:focus-visible,
html[data-theme="dark"] .dock-input,html[data-theme="dark"] .dock-input:focus{
  background:transparent!important;border:0!important;outline:0!important;
  box-shadow:none!important;border-radius:0!important;
}
.app .dock-bar .dock-input,
.app .dock-bar .dock-input:hover,
.app .dock-bar .dock-input:focus,
.app .dock-bar .dock-input:focus-visible,
html[data-theme="dark"] .app .dock-bar .dock-input,
html[data-theme="dark"] .app .dock-bar .dock-input:focus{
  background:transparent!important;border:0!important;outline:0!important;
  box-shadow:none!important;border-radius:0!important;
}

/* --------------------------------- 4. Tendencia: one row of small pills */
/* The two native date inputs were full-width blocks stacked under the range
   buttons — three rows of chrome above a chart seven rows tall. */
.app .trend-controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px;
}
.app .trend-controls .filter-btn{flex:0 0 auto;}
.app .trend-controls .tc-sep{
  width:1px;height:18px;background:var(--line);margin:0 4px;flex:0 0 auto;
}
.app .trend-controls .tc-date{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:11.5px;font-weight:580;color:var(--ink-3);
}
.app .trend-controls input[type=date]{
  min-height:0!important;height:28px;padding:0 9px!important;
  font-size:11.5px!important;font-weight:580;border-radius:999px!important;
  border:1px solid var(--line-strong)!important;background:transparent!important;
  color:var(--ink-2)!important;width:auto;min-width:120px;
}
.app .trend-controls input[type=date]:hover{border-color:var(--blue)!important;}
.app .trend-controls input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.45;cursor:pointer;
}

/* --------------------------- 5. mobile web must not zoom on focus */
/* iOS Safari zooms the viewport whenever a focused field is under 16px. Every
   field in the product was 13–13.5px. */
@media (max-width:820px){
  input,select,textarea,
  .field input,.field select,.field textarea,
  .app input,.app select,.app textarea{
    font-size:16px!important;
  }
  .app .trend-controls input[type=date]{font-size:16px!important;height:34px;}
}

/* ============================================================================
   TRANSMISIÓN — the stage IS the page
   Feedback, verbatim: "the camera selection pill should only be in one row …
   there should never be a case where as the user viewer list grows the page
   starts expanding … the livestream container takes up the majority of the
   screen maybe 70% and then the rest is nicely arranged metrics".
============================================================================ */
/* Stage on the left, numbers stacked on the right — the shape the owner
   asked for. The stage no longer eats the whole viewport. */
.app .stream-stage-wrap{
  display:grid;gap:18px;align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .app .stream-stage-wrap{grid-template-columns:minmax(0,1fr) minmax(230px,300px);}
  .app .stream-stage-wrap > .preview-stage{grid-column:1;grid-row:1;}
  .app .stream-stage-wrap > .stream-side{grid-column:2;grid-row:1;}
  .app .stream-stage-wrap > .stream-more{grid-column:1/-1;}
}
.app .preview-stage{
  position:relative;width:100%;aspect-ratio:16/9;height:auto;
  max-height:min(58vh,540px);
  border-radius:16px;overflow:hidden;background:#05080D;
  border:1px solid var(--line);margin:0;
}

/* the metric column: glass, the same treatment as the demo mocks */
.app .stream-side{display:grid;gap:14px;align-content:start;min-width:0;}
.app .ss-metrics{
  display:grid;gap:0;border-radius:14px;overflow:hidden;
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line);
}
.app .ss-m{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 14px;min-width:0;
}
.app .ss-m + .ss-m{border-top:1px solid var(--line);}
.app .ss-m span{
  font-size:12px;color:var(--ink-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app .ss-m b{
  font-size:19px;font-weight:660;letter-spacing:-.03em;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
@media (max-width:899px){
  /* two per row on a phone, never one tall column */
  .app .ss-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .ss-m{display:grid;gap:2px;align-content:start;}
  .app .ss-m + .ss-m{border-top:0;}
  .app .ss-m:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .app .ss-m:nth-child(odd){border-right:1px solid var(--line);}
  .app .ss-m b{font-size:20px;}
}
.app .preview-stage iframe,
.app .preview-stage video,
.app .preview-stage img{width:100%;height:100%;object-fit:cover;border:0;display:block;}
.app .preview-stage .status-badge{position:absolute;top:12px;left:12px;z-index:3;}

/* the camera picker floats on the stage — one row, scrolls sideways, never
   wraps into a second line */
.app .cam-row.stage-cams{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0;margin:0;
}
.app .cam-row.stage-cams::-webkit-scrollbar{display:none;}
.app .cam-row.stage-cams .cam-pill{
  flex:0 0 auto;
  background:rgba(10,16,24,.55)!important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(255,255,255,.16)!important;color:#EAF1F8!important;
}
.app .cam-row.stage-cams .cam-pill.active,
.app .cam-row.stage-cams .cam-pill[aria-pressed="true"]{
  background:rgba(30,155,240,.34)!important;border-color:rgba(120,200,255,.6)!important;
  color:#fff!important;
}

.app .sb-field{display:grid;gap:6px;min-width:0;}
.app .sb-field > span{font-size:11.5px;font-weight:580;color:var(--ink-3);}
.app .sb-field select{
  min-height:0!important;height:34px;padding:0 30px 0 12px!important;
  font-size:12.5px!important;border-radius:10px!important;width:100%;
  border:1px solid var(--line-strong)!important;background:transparent!important;
}
.app .sb-pause{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0 0;border-top:1px solid var(--line);
}
.app .sb-pause .p-text{font-size:12.5px;font-weight:580;color:var(--ink-2);}
.app .stream-more > summary{
  cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-3);
  padding:16px 0 0;list-style:none;
}
.app .stream-more > summary::-webkit-details-marker{display:none;}
.app .stream-more > summary::before{content:"▸ ";}
.app .stream-more[open] > summary::before{content:"▾ ";}
.app .stream-more > summary:hover{color:var(--ink);}

/* -------------------------------- the lists that used to grow the page */
/* A viewer list, a chat and a per-day breakdown all render one row per person.
   With 400 people watching, the page became 400 rows tall. They scroll inside
   a fixed frame instead — the page height is now a constant. */
.app #vwViewerList,.app #lvList,.app .modchat{
  max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
}
.app #vwViewerList::-webkit-scrollbar,
.app #lvList::-webkit-scrollbar,
.app .modchat::-webkit-scrollbar{width:8px;}
.app #vwViewerList::-webkit-scrollbar-thumb,
.app #lvList::-webkit-scrollbar-thumb,
.app .modchat::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:99px;
}

/* the audience block is a section on the sheet, not a second card */
.app .audience-card{background:transparent!important;border:0!important;
  box-shadow:none!important;padding:0!important;}
.app .vw-kpis{
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 20px;
}
.app .vw-kpi,html[data-theme="dark"] .app .vw-kpi{
  background:transparent!important;border:0!important;border-radius:0!important;
  border-right:1px solid var(--line)!important;padding:var(--gut-y) var(--gut)!important;
  display:grid;gap:5px;
}
.app .vw-kpis > .vw-kpi:first-child{padding-left:0!important;}
.app .vw-kpis > .vw-kpi:last-child{border-right:0!important;padding-right:0!important;}
.app .vw-kpi b{font-size:22px;font-weight:660;letter-spacing:-.03em;}
.app .vw-kpi span{font-size:12px;color:var(--ink-3);}
.app .vw-kpi.primary,html[data-theme="dark"] .app .vw-kpi.primary{background:transparent!important;}
.app .vw-kpi.primary b{color:var(--blue)!important;}
/* The three time stats kept their old pill background and a display:block
   label, so the value hung out of the right edge of the pill. Same hairline
   grid as every other stat row in the workspace. */
.app .vw-time-summary{
  display:grid;gap:0;margin:0 0 20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  border-bottom:1px solid var(--line);
}
.app .vw-time-stat,html[data-theme="dark"] .app .vw-time-stat{
  display:grid!important;gap:4px;align-content:start;min-width:0;
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:var(--gut-y) var(--gut)!important;
  border-right:1px solid var(--line);
}
.app .vw-time-summary > .vw-time-stat:first-child{padding-left:0!important;}
.app .vw-time-summary > .vw-time-stat:last-child{border-right:0;padding-right:0!important;}
.app .vw-time-stat span{
  display:block;font-size:12px!important;font-weight:500!important;color:var(--ink-3)!important;
  letter-spacing:0!important;line-height:1.35;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app .vw-time-stat b{
  display:block;margin:0!important;font-size:19px!important;font-weight:660!important;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
/* the legend dot is data, so it is the data colour, not the alert red */
.app .vw-legend .swatch{background:var(--c1)!important;}
/* Interacción: three separate controls that were being collapsed into one
   row by a gap:0 grid — the toggle landed on top of the next block's title.
   They are stacked sections divided by a hairline. */
.app .eng-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;}
.app .eng-block,html[data-theme="dark"] .app .eng-block{
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:16px 0!important;margin:0!important;display:grid;gap:11px;min-width:0;
}
.app .eng-block + .eng-block{border-top:1px solid var(--line)!important;}
.app .eng-block:first-child{padding-top:0!important;}
.app .eng-lab{font-size:12.5px;font-weight:620;color:var(--ink-2);margin:0;}
.app .eng-block > div:first-child{min-width:0;}
.app .challenge-block .row-3{gap:12px;}

/* -------------------------------------------------- glass on the workspace */
.app .top,html[data-theme="dark"] .app .top{
  background:color-mix(in srgb,var(--bg) 74%,transparent)!important;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}
.app .modal,html[data-theme="dark"] .app .modal,
.app .settings-modal,.app .auth-modal{
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}

/* ============================================================================
   "¿Dónde se ve esto?" — the customer-phone mock above Eventos / Encuestas /
   Puntos. Small, animated, and it answers the only question a first-time owner
   actually has on those three screens.
============================================================================ */
/* The mock is a SIDE note, not a banner: it floats to the right of whatever
   is at the top of the page so it costs almost no vertical space. It only
   becomes its own row when there is genuinely no room beside the content. */
/* Closed, it is ONE line — the mock costs no vertical space until somebody
   actually asks the question. Open, it lays out sideways so it still does not
   push the page down much. */
.app .wd-slot{margin:0;}
.app .wd{border:0;padding:0;margin:0;}
.app .panel > .wd-slot{display:contents;}
.app .wd:not([open]) > summary{opacity:.72;}
.app .wd:not([open]) > summary:hover{opacity:1;}
.app .wd[open]{
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:2px;
}
.app .wd > summary{
  cursor:pointer;list-style:none;font-size:13px;font-weight:620;color:var(--ink-2);
  display:flex;align-items:center;gap:8px;padding:2px 0;
}
.app .wd > summary::-webkit-details-marker{display:none;}
.app .wd > summary::before{
  content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);
  transition:transform .2s;flex:0 0 auto;margin-left:2px;
}
.app .wd[open] > summary::before{transform:rotate(45deg);}
.app .wd > summary:hover{color:var(--ink);}
.app .wd-body{
  display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin-top:12px;
  animation:wdIn .34s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes wdIn{from{opacity:0;transform:translateY(-6px);}}
.app .wd-note{
  flex:1 1 0;min-width:0;margin:0;font-size:12px;line-height:1.55;color:var(--ink-3);
}

/* the phone */
.app .wd-phone{
  flex:0 0 auto;width:150px;height:218px;border-radius:20px;padding:5px;
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line-strong);
  box-shadow:0 14px 40px rgba(6,14,26,.16);
}
html[data-theme="dark"] .app .wd-phone{box-shadow:0 14px 40px rgba(0,0,0,.5);}
.app .wd-screen{
  position:relative;width:100%;height:100%;border-radius:17px;overflow:hidden;
  background:#0A1017;display:flex;flex-direction:column;
}
.app .wd-vid{
  flex:1 1 auto;position:relative;
  background:
    radial-gradient(62% 55% at 50% 40%,rgba(255,169,64,.22),transparent 72%),
    radial-gradient(42% 42% at 22% 80%,rgba(30,155,240,.2),transparent 72%),
    linear-gradient(160deg,#16202E,#0A1017);
}
.app .wd-live{
  position:absolute;top:8px;left:8px;font-size:7.5px;font-weight:750;letter-spacing:.04em;
  color:#fff;background:rgba(224,60,60,.9);border-radius:99px;padding:2px 6px;
}
.app .wd-layer{position:absolute;left:8px;right:8px;top:26px;}
.app .wd-chat{position:absolute;left:8px;right:8px;bottom:8px;display:grid;gap:3px;}
.app .wd-chat i{
  height:7px;border-radius:99px;background:rgba(255,255,255,.16);display:block;
  animation:wdChat 3.6s ease-in-out infinite;
}
.app .wd-chat i:nth-child(1){width:62%;animation-delay:0s;}
.app .wd-chat i:nth-child(2){width:44%;animation-delay:.5s;}
.app .wd-chat i:nth-child(3){width:71%;animation-delay:1s;}
@keyframes wdChat{0%,72%{opacity:.18;transform:translateY(4px);}12%,60%{opacity:1;transform:none;}}

/* the three overlays */
.app .wd-ev,.app .wd-poll,.app .wd-rw{
  background:rgba(8,14,22,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 9px;color:#EAF1F8;
  animation:wdPop .6s cubic-bezier(.2,1,.35,1) both;animation-delay:.25s;
}
@keyframes wdPop{from{opacity:0;transform:translateY(-8px) scale(.96);}}
.app .wd-ev-t,.app .wd-poll-q{font-size:9px;font-weight:700;margin-bottom:5px;}
.app .wd-ev-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;}
.app .wd-ev-bar i{
  display:block;height:100%;border-radius:99px;background:var(--blue);
  animation:wdFill 2.6s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes wdFill{0%{width:6%}55%,100%{width:68%}}
.app .wd-ev-s{font-size:7.5px;color:rgba(234,241,248,.66);margin-top:4px;}
.app .wd-opt{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 6px;
  font-size:8px;margin-top:5px;position:relative;
}
.app .wd-opt span{grid-column:1;}
.app .wd-opt b{grid-column:2;font-weight:700;}
.app .wd-opt i{
  grid-column:1/-1;height:4px;border-radius:99px;background:rgba(255,255,255,.16);
  position:relative;overflow:hidden;
}
.app .wd-opt i::after{
  content:"";position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--blue);
  animation:wdOpt 3.2s cubic-bezier(.2,.8,.2,1) infinite;width:var(--w);
}
@keyframes wdOpt{0%{width:4%}50%,100%{width:var(--w)}}
.app .wd-rw-h{display:flex;justify-content:space-between;font-size:8.5px;font-weight:700;
  padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:5px;}
.app .wd-rw-row{display:flex;justify-content:space-between;font-size:8px;padding:3px 0;}
.app .wd-rw-row.dim{opacity:.5;}
.app .wd-rw-cta{
  margin-top:6px;text-align:center;font-size:8px;font-weight:700;border-radius:6px;
  padding:4px;background:var(--blue);color:#04121F;
  animation:wdPulse 2.4s ease-in-out infinite;
}
@keyframes wdPulse{0%,100%{opacity:.82}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .app .wd-chat i,.app .wd-ev-bar i,.app .wd-opt i::after,.app .wd-rw-cta,
  .app .wd-ev,.app .wd-poll,.app .wd-rw,.app .wd-body{animation:none!important;}
  .app .wd-ev-bar i{width:68%;}
  .app .wd-opt i::after{width:var(--w);}
}
@media (max-width:560px){
  .app .wd-body{gap:16px;}
  .app .wd-phone{width:148px;height:214px;}
}

/* ============================================================================
   THE GLASS, EVERYWHERE
   Verbatim: "THE ONLY THING I LIKE IS THE DAMN DEMOS I LOVE THAT GLASS LOOK OF
   THEM I WANT YOU TO DO THAT GLASS LOOK ACROSS OTHER PARTS OF THE ENTIRE CRM".
   Same recipe as the mock's frame: --glass + an 18px saturated blur + one
   hairline. Applied to the things that genuinely sit ON the page — controls,
   chips, floating surfaces — never to the page itself.
============================================================================ */
.app .filter-btn,.app .chip-btn,.app .btn-soft,.app .count-chip,
.app .seg-ctl,.app .cam-pill,.app .badge,.app .subtab .n,
.app .lv-count-pill,.app .status-badge,
html[data-theme="dark"] .app .filter-btn,
html[data-theme="dark"] .app .chip-btn,
html[data-theme="dark"] .app .btn-soft{
  background:var(--glass)!important;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}
.app .filter-btn.active,.app .filter-btn[aria-pressed="true"],
html[data-theme="dark"] .app .filter-btn.active{
  background:var(--sel)!important;border-color:var(--sel-line,var(--blue))!important;
  color:var(--blue)!important;
}
.app .seg-ctl button{background:transparent!important;border:0!important;}
.app .seg-ctl button.active{background:var(--sel)!important;color:var(--blue)!important;}
/* the pieces that float above the sheet get the deeper blur */
.app .ins-overlay,.app .modal-backdrop,.app .rail-scrim{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.app .pos-grid > button,.app .pos-item,
html[data-theme="dark"] .app .pos-grid > button{
  background:var(--glass)!important;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--line)!important;
}
.app .pos-grid > button:hover{border-color:var(--blue)!important;}
.app .warn-box,html[data-theme="dark"] .app .warn-box{
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
}