/* ============================================================================
   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;}
/* overflow-x:CLIP, not hidden. With hidden on both html and body, body becomes
   a scroll container that never scrolls, so every position:sticky inside it —
   the rail and the top bar — scrolled away with the page. clip trims the same
   overflow without making a scroll container; hidden stays as the fallback for
   browsers that predate clip. */
html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;}
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;overflow-x:clip;
  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 0%;width:0;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);margin-bottom:10px;padding:0;
  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;min-height:0;overflow:hidden;
}
.dock-sheet.on{display:flex;}
html[data-theme="dark"] .dock-sheet{border-color:var(--line-strong);}
/* The head holds the only way to close the chat, so it must never scroll away.
   The sheet is the flex column; ONLY the log scrolls under a pinned head. */
.dock-sheet-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding:13px 16px 11px;border-bottom:1px solid var(--glass-line);}
.dock-sheet-head .ico-btn{margin-left:auto;width:28px;height:28px;flex:0 0 auto;}
.dock-sheet #aiLog{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 18px 16px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;}

.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;}

/* charts and their frames share the card's rhythm */
.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;}
.filter-row > .fr-field{flex:1 1 145px;max-width:100%;}
.fr-field input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;}
.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;}
}

/* ------------------------------------------- 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 .ico-btn.ico-danger{color:var(--neg)!important;}
.app .ico-btn{flex-shrink:0;}
.app .ico-btn svg{display:block;flex-shrink:0;width:16px;height:16px;}
.app .menu-row{display:grid;grid-template-columns:24px minmax(0,1fr) 100px repeat(3,34px);gap:8px;align-items:center;}
.app .menu-row .ci-name{white-space:normal;overflow-wrap:anywhere;}
.app .menu-row .menu-price{width:100%;min-width:0;padding:6px 8px;}
.app .menu-row .ico-btn{width:34px;height:34px;}
.order-actions{display:inline-flex;gap:8px;align-items:center;}
@media(max-width:540px){
  .app .menu-row{grid-template-columns:24px minmax(0,1fr) repeat(3,34px);gap:7px;}
  .app .menu-row .ci-name{grid-column:2 / -1;}
  .app .menu-row .menu-price{grid-column:1 / 3;}
  .app #invList .item-card{flex-wrap:wrap;}
  .app #invList .item-body{flex:1 1 160px;min-width:0;}
  .app #invList .item-actions{margin-left:auto;flex:0 0 auto;}
}
.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;}
/* 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);
}

/* ══════════════════════════════════════════════════════════════════════════
   REGISTER — order date + "Agregar artículo"
   Both are glass over the page, both are .app-scoped: an unscoped rule
   appended down here still loses to the .app-prefixed ones above it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the trigger, styled to sit level with the <select> beside it ── */
/* ---- register meta row -----------------------------------------------------
   Four controls of three different kinds sit side by side here (a popover
   trigger, two inputs and a select). Each brought its own padding and font
   size, so they rendered at three different heights and did not share a
   baseline. One height, one padding, bottom-aligned. */
/* Labels align at the top, so all four controls share one baseline no matter
   how much helper text sits under any of them. */
.app .pos-meta{align-items:start;}
.app .pos-meta .field{margin-bottom:0;}
/* The date popover trigger is a <button>, so the app-wide control sizing rule
   (which only matches input/select/textarea) never reached it and it rendered
   taller than everything beside it. Match the same 42px. */
.app .pos-meta .date-trigger{
  box-sizing:border-box;height:42px;min-height:42px;
  padding:0 12px;font-size:14px;line-height:normal;}
.app .pos-meta .field-hint{margin-top:6px;}
.app .pos-date{position:relative;}
.app .date-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--glass);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1.5px solid var(--line);border-radius:10px;
  padding:9px 12px;cursor:pointer;text-align:left;
  transition:border-color .14s,box-shadow .14s;
}
.app .date-trigger:hover{border-color:var(--blue);}
.app .date-trigger[aria-expanded="true"]{
  border-color:var(--blue);box-shadow:0 0 0 3px var(--sel);
}
.app .date-trigger svg{flex:0 0 auto;color:var(--ink-3);}
/* a back-dated ticket is the one thing worth flagging in this row */
.app .date-trigger.past{border-color:var(--blue);color:var(--blue);}
.app .date-trigger.past svg{color:var(--blue);}

/* ── the popover ── */
.date-pop{
  position:fixed;z-index:700;display:none;
  margin:0;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--glass-line);
  box-shadow:0 18px 46px rgba(6,14,26,.18);
}
html[data-theme="dark"] .date-pop{
  background:rgba(23,32,45,.96);box-shadow:0 18px 46px rgba(0,0,0,.5);}
.date-pop.show{display:block;}
.date-type{
  width:100%;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:10px;
  padding:9px 11px;outline:none;margin-bottom:9px;
}
.date-type:focus{border-color:var(--blue);}
.date-type.bad{border-color:#E5484D;}
.date-quick{display:flex;gap:6px;margin-bottom:11px;}
.date-quick button{
  flex:1 1 0;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2);
  background:var(--sel);border:0;border-radius:8px;padding:7px 4px;cursor:pointer;
}
.date-quick button:hover{color:var(--blue);}
.date-cal-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;font-weight:700;margin-bottom:7px;
}
.date-cal-head button{
  width:26px;height:26px;font-size:15px;line-height:1;color:var(--ink-2);
  background:transparent;border:0;border-radius:7px;cursor:pointer;
}
.date-cal-head button:hover:not(:disabled){background:var(--sel);color:var(--blue);}
.date-cal-head button:disabled{opacity:.28;cursor:default;}
.date-dow,.date-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
}
.date-dow{
  font-size:10px;font-weight:700;color:var(--ink-mute);text-align:center;
  margin-bottom:3px;
}
.dc-day{
  aspect-ratio:1/1;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.dc-day:hover:not(:disabled){background:var(--sel);}
.dc-day:disabled{opacity:.22;cursor:default;}
.dc-day.now{color:var(--blue);font-weight:800;}
.dc-day.sel,.dc-day.sel:hover{background:var(--blue);color:#fff;}

/* ── the add tile: the last cell of the menu grid, never its own row ── */
.app .pos-item.pos-add,html[data-theme="dark"] .app .pos-item.pos-add{
  background:transparent!important;
  border:1.5px dashed var(--line)!important;
  color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.app .pos-item.pos-add:hover{
  border-color:var(--blue)!important;color:var(--blue);
}
.app .pos-item.pos-add .pi-emoji{font-size:24px;font-weight:300;margin-bottom:6px;}

/* ── the "Agregar artículo" sheet ── */
.app .art-overlay,.art-overlay{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(8,14,24,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .18s;
}
/* display:flex above beats the UA rule for [hidden], so say it explicitly */
.app .art-overlay[hidden],.art-overlay[hidden]{display:none!important;}
.app .art-overlay.show{opacity:1;}
.app .art-card{
  width:min(460px,100%);max-height:min(88vh,720px);
  display:flex;flex-direction:column;overflow:hidden;
  padding:20px;border-radius:20px;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--glass-line);
  box-shadow:0 26px 60px rgba(6,14,26,.24);
  transform:translateY(8px) scale(.985);transition:transform .18s;
}
html[data-theme="dark"] .app .art-card{
  background:rgba(23,32,45,.96);box-shadow:0 26px 60px rgba(0,0,0,.6);}
.app .art-overlay.show .art-card{transform:none;}
.app .art-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.app .art-head h3{font-size:16px;font-weight:750;margin:0;}
.app .art-preview{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;margin-bottom:14px;border-radius:13px;
  background:var(--sel);
}
.app .art-preview .ap-emoji{font-size:24px;line-height:1;}
.app .art-preview .ap-name{
  flex:1 1 auto;min-width:0;font-size:13px;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app .art-preview .ap-price{font-size:13px;font-weight:750;color:var(--blue);}
.app .art-emoji-label{
  font-size:11.5px;font-weight:700;color:var(--ink-mute);
  margin:16px 0 8px;
}
/* only the icon list scrolls — "Agregar al pedido" must never be below the
   fold of its own sheet */
.app .art-emoji{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px;}
.app .art-head,.app .art-preview,.app .art-card .row-2,
.app .art-emoji-label,.app .art-keep,.app #artAdd{flex:0 0 auto;}
.app .ae-group + .ae-group{margin-top:11px;}
.app .ae-label{font-size:10.5px;font-weight:700;color:var(--ink-mute);margin-bottom:5px;}
.app .ae-row{display:flex;flex-wrap:wrap;gap:4px;}
.app .ae-pick{
  width:34px;height:34px;font-size:18px;line-height:1;
  background:transparent;border:1.5px solid transparent;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.app .ae-pick:hover{background:var(--sel);}
.app .ae-pick.sel{border-color:var(--blue);background:var(--sel);}
.app .art-keep{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  margin:0 0 14px;padding-top:14px;cursor:pointer;
  border-top:1px solid var(--line);
}
.app .art-keep input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;}

@media (max-width:640px){
  .app .art-card{padding:16px;border-radius:18px;}
  .app .ae-pick{width:31px;height:31px;font-size:17px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   GASTOS — split wizard, sliding pickers, inline catalogue
   On a laptop every control in the form column is the SAME width. Rows of
   mismatched boxes were the whole complaint; there is one column token.
   ══════════════════════════════════════════════════════════════════════════ */
.app .panel[data-panel="expenses"]{--gwcol:420px;padding-bottom:88px;}

/* ── step rail ── */
.app .gw-rail{display:flex;gap:6px;margin:0 0 20px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.app .gw-rail::-webkit-scrollbar{display:none;}
.app .gw-step{
  flex:1 1 0;min-width:104px;display:flex;align-items:center;gap:8px;
  font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink-3);
  background:transparent;border:0;border-top:2px solid var(--line);
  padding:9px 2px 0;text-align:left;cursor:default;}
.app .gw-step:not(:disabled){cursor:pointer;}
.app .gw-step .gs-n{width:19px;height:19px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;background:var(--sel);color:var(--ink-3);}
.app .gw-step.now{color:var(--ink);border-top-color:var(--blue);}
.app .gw-step.now .gs-n{background:var(--blue);color:#fff;}
.app .gw-step.done{color:var(--ink-2);border-top-color:var(--blue);}
.app .gw-step.done .gs-n{background:var(--blue-100);color:var(--blue);}
.app .gw-step .gs-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── split: tighter gutter, the divider no longer floats in dead space ── */
.app .gw-split{display:grid;grid-template-columns:1fr;gap:22px;}
@media (min-width:1000px){
  .app .gw-split{grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:0;}
  .app .gw-side{border-left:1px solid var(--line);padding-left:24px;margin-left:24px;}
  .app .gw-receipt{position:sticky;top:14px;}
}
.app .gw-body{min-width:0;}

/* ONE width for everything in the form column */
.app .gw-form{display:flex;flex-direction:column;gap:14px;max-width:var(--gwcol);}
.app .gw-form > *{width:100%;margin:0;}
.app .gw-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.app .gw-body .gx-searchwrap,.app .gw-nav,.app .gw-confirm,
.app .gw-hint,.app .gw-selline{max-width:var(--gwcol);}
.app .gw-form .field input,.app .gw-form .field select,
.app .gw-form .date-trigger{width:100%;}

.app .gw-q{font-size:19px;font-weight:750;letter-spacing:-.01em;margin:0 0 14px;}
.app .gw-hint{font-size:11.5px;color:var(--ink-3);line-height:1.5;}
.app .gw-selline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.app .gw-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;
  background:var(--sel);border-radius:999px;padding:6px 13px;}
.app .gw-chip small{color:var(--ink-3);font-weight:600;}

/* ── search, with an icon so it reads as a search box ── */
.app .gx-searchwrap{position:relative;margin-bottom:16px;}
.app .gx-searchico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);pointer-events:none;}
.app .gx-searchwrap .gx-search{padding-left:34px;margin-bottom:0;}
.app .gx-search{width:100%;font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:10px;
  padding:9px 12px;outline:none;margin-bottom:12px;}
.app .gx-search:focus{border-color:var(--blue);}

/* ── pickers: a row you slide, expandable to the full grid ── */
.app .gw-group + .gw-group{margin-top:22px;}
.app .gw-glabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:11.5px;font-weight:750;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:9px;}
.app .gw-glabel small{text-transform:none;letter-spacing:0;font-weight:600;
  color:var(--ink-3);margin-left:6px;}
.app .gw-expand{flex:0 0 auto;font-family:inherit;font-size:11px;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--blue);
  background:transparent;border:0;padding:2px 0;cursor:pointer;white-space:nowrap;}
.app .gw-expand:hover{text-decoration:underline;}
.app .gw-grid.is-row{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;}
.app .gw-grid.is-row > .pos-item{flex:0 0 146px;scroll-snap-align:start;}
.app .gw-grid.is-row::-webkit-scrollbar{height:6px;}
.app .gw-grid.is-row::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.app .gw-cats{margin-bottom:12px;}

/* ── money field: $ and figure the same size, real padding, right-aligned ── */
.app .gw-money > label,.app .gw-form .field > label{
  display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:7px;}
.app .money-in{display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--line);border-radius:11px;
  padding:11px 16px;background:var(--surface);
  transition:border-color .14s,box-shadow .14s;}
.app .money-in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--sel);}
.app .money-in .mi-cur{font-size:19px;font-weight:700;color:var(--ink-3);line-height:1.2;}
.app .money-in input{flex:1 1 auto;min-width:0;font-family:inherit;
  font-size:19px;font-weight:750;letter-spacing:-.01em;color:var(--ink);
  text-align:right;background:transparent;border:0;padding:0;outline:none;line-height:1.2;}
.app .gw-money .gw-hint{margin-top:7px;}

/* a price the catalogue already knows: shown, not asked */
.app .gw-known{display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);border-radius:11px;padding:11px 16px;
  background:var(--surface-sunken);}
.app .gw-known .gk-l{flex:1 1 auto;min-width:0;font-size:12px;font-weight:650;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app .gw-known .gk-v{font-size:15px;font-weight:780;}
.app .gw-known .gk-edit{flex:0 0 auto;font-family:inherit;font-size:11.5px;font-weight:700;
  color:var(--blue);background:transparent;border:0;padding:2px 0;cursor:pointer;}
.app .gw-known .gk-edit:hover{text-decoration:underline;}

.app .gw-linetotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:13px;
  font-size:12px;font-weight:650;color:var(--ink-2);}
.app .gw-linetotal b{font-size:19px;font-weight:780;color:var(--ink);letter-spacing:-.02em;}

/* ── emoji dropdown ── */
.app .emoji-field{position:relative;}
.app .emoji-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:inherit;font-size:17px;line-height:1;
  background:var(--surface);border:1.5px solid var(--line);border-radius:10px;
  padding:8px 12px;cursor:pointer;min-height:38px;}
.app .emoji-trigger:hover{border-color:var(--blue);}
.app .emoji-trigger svg{color:var(--ink-3);flex:0 0 auto;}
.app .emoji-pop{display:none;position:absolute;z-index:60;margin-top:6px;
  width:min(320px,84vw);max-height:266px;overflow-y:auto;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--glass-line);box-shadow:0 18px 46px rgba(6,14,26,.18);}
html[data-theme="dark"] .app .emoji-pop{
  background:rgba(23,32,45,.97);box-shadow:0 18px 46px rgba(0,0,0,.5);}
.app .emoji-pop.show{display:block;}

/* ── receipt column ── */
.app .gw-receipt{border:1px solid var(--line);border-radius:14px;padding:16px;
  background:var(--surface-sunken);}
.app .gr-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:11px;border-bottom:1px dashed var(--line);}
.app .gr-title{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.app .gr-date{font-size:11.5px;font-weight:650;color:var(--ink-3);}
.app .gr-blank{font-size:12px;color:var(--ink-3);padding:22px 0;text-align:center;}
.app .gr-item{display:flex;align-items:center;gap:9px;padding:10px 0;
  border-bottom:1px solid var(--line);}
.app .gr-item:last-child{border-bottom:0;}
.app .gr-i-emoji{font-size:18px;line-height:1;flex:0 0 auto;}
.app .gr-i-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.app .gr-i-name{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app .gr-i-sub{font-size:10.5px;color:var(--ink-3);font-weight:600;}
.app .gr-i-amt{font-size:12.5px;font-weight:750;flex:0 0 auto;}
.app .gr-i-del{flex:0 0 auto;opacity:.45;}
.app .gr-i-del:hover{opacity:1;color:var(--neg);}
.app .gr-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:11.5px;color:var(--ink-2);padding:9px 0 0;}
.app .gr-line b{font-weight:700;color:var(--ink);}
.app .gr-total{display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px dashed var(--line);margin-top:10px;padding-top:13px;
  font-size:12.5px;font-weight:700;}
.app .gr-total b{font-size:20px;font-weight:800;letter-spacing:-.02em;}

/* ── confirm ── */
.app .gw-confirm{border:1.5px solid var(--blue);border-radius:14px;
  background:var(--blue-100);padding:18px;text-align:center;margin:16px 0 0;}
.app .gw-confirm .gc-n{font-size:11.5px;font-weight:700;color:var(--ink-2);}
.app .gw-confirm .gc-t{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:5px 0 3px;}
.app .gw-confirm .gc-d{font-size:11.5px;font-weight:650;color:var(--ink-3);}

/* ── nav: equal buttons, side by side, never flung to opposite edges ── */
.app .gw-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;}
.app .gw-nav.one{grid-template-columns:1fr;}
.app .gw-nav .btn{min-width:0;width:100%;}
.app .gw-final{grid-template-columns:repeat(3,1fr);}
.app .btn-back,.app .btn-back:hover{
  background:var(--surface)!important;color:var(--ink-2)!important;
  border:1.5px solid var(--line-strong)!important;box-shadow:none!important;}
.app .btn-back:hover{color:var(--ink)!important;border-color:var(--ink-3)!important;}
.app .gw-discard,.app .gw-discard:hover{
  background:var(--neg-bg)!important;color:var(--neg)!important;
  border:1.5px solid var(--neg)!important;box-shadow:none!important;}

/* ── history + catalogue ── */
.app .gx-sep{border-top:1px solid var(--line);margin:24px 0 18px;}
.app .gh-sup{color:var(--ink-3);font-weight:600;font-size:11.5px;margin-left:5px;}
.app .gx-emoji{font-size:15px;}
.app .gx-muted{color:var(--ink-3);}
.app tr.gx-clickable{cursor:pointer;}
.app tr.gx-clickable:hover td{background:var(--sel);}
.app th.gx-section{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);padding-top:18px;}
.app th.gx-section small{text-transform:none;letter-spacing:0;font-weight:600;
  color:var(--ink-3);margin-left:6px;}
.app .gx-cell{padding-top:5px!important;padding-bottom:5px!important;}
.app .gx-in{width:112px;max-width:100%;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--ink);text-align:right;
  background:transparent;border:1.5px solid transparent;border-radius:8px;
  padding:7px 10px;outline:none;transition:border-color .14s,background .3s;}
.app .gx-in:hover{border-color:var(--line);}
.app .gx-in:focus{border-color:var(--blue);background:var(--surface);}
.app .gx-in.saving{border-color:var(--line-strong);opacity:.6;}
.app .gx-in.saved{border-color:var(--pos);background:var(--pos-bg);}
.app .gx-detail-card .gw-receipt{border:0;padding:0;background:transparent;}

@media (max-width:860px){
  .app .gw-q{font-size:17px;}
  .app .gw-step{min-width:88px;font-size:10.5px;}
  .app .gw-step .gs-l{display:none;}
  .app .gw-step.now .gs-l{display:inline;}
  .app .gw-final{grid-template-columns:1fr 1fr;}
  .app .gw-final .btn:first-child{grid-column:1 / -1;}
  .app .gx-in{width:92px;}
}

/* ── register: open tabs ─────────────────────────────────────────────────── */
.app .pos-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.app .pos-actions .btn{width:100%;min-width:0;}
.app .tab-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1.5px solid var(--blue);background:var(--blue-100);
  border-radius:11px;padding:10px 14px;margin-bottom:12px;font-size:12.5px;}
.app .tab-banner .tb-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app .tab-banner b{font-weight:750;}
.app .tab-banner .tb-x{flex:0 0 auto;font-family:inherit;font-size:11.5px;font-weight:700;
  color:var(--blue);background:transparent;border:0;cursor:pointer;padding:2px 0;}
.app .tab-banner .tb-x:hover{text-decoration:underline;}
.app .badge.b-open{background:var(--blue-100);color:var(--blue);}
.app tr.o-open{cursor:pointer;}
.app tr.o-open td{background:color-mix(in srgb,var(--blue) 5%,transparent);}
.app tr.o-open:hover td{background:var(--sel);}
/* the number spinner was flush against the border — give it room, and keep
   the digits clear of the arrows */
.app .money-in{padding:11px 22px 11px 16px;}
.app .money-in input{padding-right:7px;}

/* ── assistant dock: Ozzy in the bottom-right corner, always ──────────────
   The dock is appended to <body>, NOT inside .app, so these rules must stay
   unscoped — an .app prefix here silently matches nothing.
   The button never moves: same corner whether the assistant is open or shut.
   Its eye is lit while the assistant is up and dark while it is folded away,
   so the state is readable without any text. */
.dock-inner{position:relative;}
.dock-toggle{
  position:fixed;right:16px;bottom:16px;z-index:540;
  width:52px;height:52px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 8px 26px rgba(6,14,26,.18);
  cursor:pointer;pointer-events:auto;
  transition:border-color .16s,box-shadow .16s,transform .16s;}
.dock-toggle:hover{border-color:var(--blue);transform:translateY(-1px);}
.dock-toggle:active{transform:translateY(0);}
.dock-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
html[data-theme="dark"] .dock-toggle{
  background:var(--surface-2);box-shadow:0 8px 26px rgba(0,0,0,.55);}

/* Ozzy, and the flash pinned to his iris by percentage — the same 70.8%/35.2%
   measured off the trimmed artwork on the homepage, so it stays on the eye at
   any size. Scaled up here because 7% of 40px is invisible. */
.dt-pet{position:relative;display:block;height:78%;}
.dt-pet img{height:100%;width:auto;display:block;-webkit-user-drag:none;}
.dt-flash{
  position:absolute;left:70.8%;top:35.2%;transform:translate(-50%,-50%) scale(.4);
  width:26%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0%,#CFF2FF 26%,#4FC0FF 48%,rgba(30,155,240,.55) 66%,rgba(30,155,240,0) 74%);
  transition:opacity .22s,transform .22s;}
/* assistant up → the light stays on, with a slow breath */
.dock:not(.is-hidden) .dt-flash{opacity:1;transform:translate(-50%,-50%) scale(1);
  animation:dtGlow 2.6s ease-in-out infinite;}
@keyframes dtGlow{
  0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.28);}}
@media (prefers-reduced-motion:reduce){
  .dock:not(.is-hidden) .dt-flash{animation:none;}}

.dock-content{transform-origin:bottom right;opacity:1;transform:translateY(0) scale(1);visibility:visible;
  transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s;}
.dock.is-hidden .dock-content{opacity:0;transform:translateY(18px) scale(.94);visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .28s cubic-bezier(.4,0,1,1),visibility 0s .28s;}
.dock.is-hidden{pointer-events:none;background:transparent!important;}
/* the dock is centred and narrower than the viewport on a laptop, so the
   corner button clears it; on a phone the bar is full width and has to yield */
@media (max-width:860px){
  .dock{left:0;padding:0 10px calc(10px + env(safe-area-inset-bottom));}
  .dock:not(.is-hidden) .dock-inner{padding-right:0;min-width:0;}
  .dock-bar{flex-wrap:nowrap;align-items:center;gap:5px;padding:6px 7px 6px 12px;min-width:0;}
  .dock-bar .dock-input{flex:1 1 0%;width:0;min-width:0;min-height:34px!important;max-height:40px;overflow-y:auto;font-size:16px;line-height:24px;}
  .dock-bar .dock-photo,.dock-bar .dock-mic,.dock-bar .dock-send{flex:0 0 30px;width:30px;height:30px;}
  .dock-hint{display:none;}
  .dock-chips{padding-right:56px!important;}
  .dock-toggle{width:46px;height:46px;right:12px;bottom:12px;}
  .dock:not(.is-hidden) .dock-toggle{bottom:calc(65px + env(safe-area-inset-bottom));}
}

/* Siguiente rides the search row on the Gastos picker */
.app .gw-top{display:flex;align-items:flex-start;gap:10px;max-width:var(--gwcol);margin-bottom:16px;}
.app .gw-top .gx-searchwrap{flex:1 1 auto;min-width:0;margin-bottom:0;}
.app .gw-nextsm{flex:0 0 auto;width:auto;min-width:0;padding:9px 18px;font-size:12.5px;}

/* ── consistent controls and quiet publishing flows ───────────────────── */
.app input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]),
.app select,.app textarea{box-sizing:border-box;min-width:0;max-width:100%;min-height:42px;border-radius:10px;
  border:1px solid var(--line-strong);font-family:inherit;color:var(--ink);background:var(--surface);}
.app input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]),.app select{height:42px;padding:9px 12px;}
.app textarea{padding:10px 12px;}
.app .field,.app .row-2 > *,.app .row-3 > *{min-width:0;}
.app .field input:not([type=checkbox]):not([type=radio]),.app .field select,.app .field textarea{width:100%;}
.app .order-money strong,.app .order-money .cost,.app .order-money small{display:block;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;}
.app .order-money .cost{color:var(--ink-2);font-size:12px;}
.app .order-money small{font-size:11px;}
.app .positive{color:var(--pos);}.app .negative{color:var(--neg);}
.app .order-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 22px;}
.app .order-summary span,.app .order-summary strong{display:block;}
.app .order-summary span{font-size:12px;color:var(--ink-2);margin-bottom:6px;}
.app .order-summary strong{font-size:clamp(15px,2vw,22px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.app .compose-card{max-width:720px;margin-inline:auto;width:100%;box-sizing:border-box;}
.app .compose-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.app .compose-title{margin:0;font-size:18px;letter-spacing:-.025em;color:var(--ink);outline:none;}
.app .compose-count{margin-left:auto;white-space:nowrap;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.app .compose-progress{display:flex;gap:6px;margin-bottom:26px;}
.app .compose-progress span{height:3px;flex:1;border-radius:3px;background:var(--line);transition:background .25s;}
.app .compose-progress span.on{background:var(--blue);}
.app .compose-step:not([hidden]){animation:composeIn .28s cubic-bezier(.22,1,.36,1) both;}
.app .compose-body{min-width:0;}
.app .compose-foot{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:18px;margin-top:20px;}
.app .compose-foot .btn{min-width:140px;}
.app .compose-upload{display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:230px;margin:0;}
.app .compose-upload-target{width:120px;height:120px;border-radius:24px;background:var(--surface-sunken);border:1px dashed var(--line-strong);cursor:pointer;}
.app .compose-upload-target:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}
.app .compose-upload-target:not(.filled)::after{content:'＋';display:grid;place-items:center;position:absolute;inset:0;font-size:30px;color:var(--ink-2);}
/* This target draws its own ＋ above. The picker's own glyph (added so the three
   plain circles stop rendering blank) would be a SECOND plus stacked under it,
   so hide the label's text here and let the ::after be the only one. */
.app .compose-upload-target{font-size:0;}
/* business.html styles .pick-circle from its own unscoped <style>, so every
   .app-prefixed rule in this file outranked it and the glyph came out at 12px.
   See the crm.css specificity note: new rules need the .app prefix to win. */
.app .pick-circle{display:grid;place-items:center;line-height:1;font-size:24px;
  font-weight:400;color:var(--ink-3);text-align:center;}
.app .pick-circle.filled{color:transparent;}
/* two classes, so this holds whatever the source order is: the compose target
   draws its own ＋ via ::after and must not also render the label's glyph */
.app .pick-circle.compose-upload-target{font-size:0;}
.app .compose-upload-label{font-size:14px;color:var(--ink-2);}
.app .post-preview{max-width:380px;margin:0 auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--e2);}
.app .post-preview header{display:flex;align-items:center;gap:10px;padding:14px;font-size:14px;}
.app .post-avatar{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--blue-100);color:var(--blue);font-weight:700;}
.app .post-media{display:block;width:100%;max-height:360px;object-fit:contain;background:var(--surface-sunken);}
.app .post-caption{font-size:15px;line-height:1.55;padding:16px;margin:0;overflow-wrap:anywhere;white-space:pre-wrap;}
.app .post-detail{font-size:13px;color:var(--ink-2);padding:0 16px 16px;overflow-wrap:anywhere;}
.app .post-poll-option{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:10px;padding:12px;margin:0 14px 10px;overflow-wrap:anywhere;font-size:14px;}
.app .post-poll-option:last-child{margin-bottom:16px;}
.app .post-poll-option img{width:38px;height:38px;object-fit:cover;border-radius:7px;}
.app .reward-preview{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:32px 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2);max-width:360px;margin:auto;}
.app .reward-preview h3,.app .reward-preview p{margin:0;overflow-wrap:anywhere;}
.app .reward-preview p{font-size:14px;line-height:1.5;color:var(--ink-2);}
.app .reward-symbol{font-size:48px;line-height:1.4;}
.app .reward-points{color:var(--blue);font-size:20px;margin-top:8px;}
.app .reward-emoji{height:42px;width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;font-size:23px;cursor:pointer;}
.app .reward-emojis{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);max-height:220px;overflow:auto;margin-top:8px;}
.app .reward-emojis button{height:36px;border:0;border-radius:8px;font-size:23px;background:transparent;cursor:pointer;}
.app .reward-emojis button:hover{background:var(--surface-sunken);}
.app .reward-catalogue .card-title{justify-content:space-between;flex-wrap:wrap;}
.app #rwAdminList{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;}
.app #rwAdminList .item-card{margin:0;align-items:center;border-radius:14px;padding:18px;}
.dock-chips{background:var(--surface);flex-wrap:wrap;overflow:visible;border:1px solid var(--line-strong);border-radius:16px 16px 0 0;mask-image:none!important;
  padding:10px 12px!important;box-shadow:0 -8px 24px rgba(12,24,38,.07);}
.dock-chip{background:var(--surface-2)!important;color:var(--ink)!important;backdrop-filter:none!important;border-color:var(--line-strong);box-shadow:none;}
.dock-bar,.dock-sheet{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.dock-bar{border-radius:0 0 18px 18px;}
.dock-toggle{transition:bottom .32s cubic-bezier(.22,1,.36,1),transform .25s;}
.dock-toggle:active{transform:scale(.92);}
@keyframes composeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media(min-width:861px){.app .top .burger{display:none!important;}}
@media(max-width:860px){
 .app input:not([type=checkbox]):not([type=radio]),.app select,.app textarea{font-size:16px;}
 .dock-chips{padding-right:58px!important;}
 .app .compose-card{padding:18px 14px;}
 .app .compose-title{font-size:16px;}
 .app .compose-progress{margin-bottom:20px;}
 .app .compose-upload{min-height:190px;}
}
@media(max-width:540px){
 .app #gxCatalog,.app #gxCatalog thead,.app #gxCatalog tbody{display:block;width:100%;}
 .app #gxCatalog thead tr:first-child{display:block;}
 .app #gxCatalog thead tr:nth-child(2){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 .app #gxCatalog .gx-section{display:block;white-space:normal;padding:14px 0;}
 .app #gxCatalog .gx-section small{display:block;}
 .app #gxCatalog tbody tr{display:grid;grid-template-columns:minmax(0,1fr) 94px 34px;gap:4px 8px;border-bottom:1px solid var(--line);padding:10px 0;}
 .app #gxCatalog td{display:block;border:0;padding:4px 0;min-width:0;white-space:normal;}
 .app #gxCatalog td:first-child{grid-column:1/-1;}
 .app #gxCatalog td:nth-child(2){text-align:left;font-size:12px;align-self:center;}
 .app #gxCatalog td:last-child{align-self:center;}
 .app #gxCatalog .gx-in{width:94px;padding:8px;}
}
@media(prefers-reduced-motion:reduce){.app *, .dock *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

/* ── assistant: receipt photos ────────────────────────────────────────────
   Unscoped on purpose — the dock is appended to <body>, not inside .app. */
.dock-photo{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;padding:0;
  color:var(--ink-3);background:transparent;border:0;cursor:pointer;
  transition:color .14s,background .14s;}
.dock-photo:hover{color:var(--blue);background:var(--sel);}
.dock-photo svg{width:19px;height:19px;}
.dock-photo:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
/* the photo the owner sent, in their own bubble */
.msg-shot{
  display:block;max-width:200px;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line);margin-bottom:6px;}

/* the transcribed receipt, before anything is written */
.msg-receipt{
  margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:14px;
  background:var(--surface-sunken);font-size:12.5px;}
.msg-receipt .mr-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--line);}
.msg-receipt .mr-title{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.msg-receipt .mr-sub{font-size:11px;color:var(--ink-3);font-weight:650;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-receipt .mr-line{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--line);}
.msg-receipt .mr-line:last-child{border-bottom:0;}
.msg-receipt .mr-n{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-weight:650;overflow:hidden;}
.msg-receipt .mr-n small{font-size:10.5px;color:var(--ink-3);font-weight:600;}
.msg-receipt .mr-a{flex:0 0 auto;font-weight:750;}
.msg-receipt .mr-x{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  font-size:15px;line-height:1;color:var(--ink-3);
  background:transparent;border:0;cursor:pointer;opacity:.5;}
.msg-receipt .mr-x:hover{opacity:1;color:var(--neg);background:var(--neg-bg);}
.msg-receipt .mr-total{display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px dashed var(--line);margin-top:8px;padding-top:11px;font-weight:700;}
.msg-receipt .mr-total b{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.msg-receipt .mr-note{margin-top:9px;font-size:11px;color:var(--ink-3);line-height:1.5;}
.msg-receipt .mr-add{
  width:100%;margin-top:13px;font-family:inherit;font-size:12.5px;font-weight:700;
  color:#fff;background:var(--blue);border:0;border-radius:10px;
  padding:10px 14px;cursor:pointer;transition:opacity .14s;}
.msg-receipt .mr-add:hover{opacity:.9;}
.msg-receipt .mr-add:disabled{cursor:default;}
.msg-receipt.done{border-color:var(--pos);}
.msg-receipt.done .mr-add{background:var(--pos-bg);color:var(--pos);}

/* Expense register: immediate entry on the left, editable receipt on the right. */
.app .gw-quick-form{padding:22px;margin-bottom:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);}
.app .gw-quick-form h3{font-size:19px;letter-spacing:-.025em;margin:0 0 18px;}
.app .gw-quick-fields{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(130px,.75fr);gap:14px;}
.app .gw-quick-fields .field{margin:0;}
.app .gw-quick-fields .field > span{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:8px;}
.app .gw-quick-fields input{min-height:46px;font-size:16px;}
.app .gw-quick-add{margin-top:16px;min-height:44px;}
.app .gw-mobile-save{display:none;}
.app .gw-frequent .gw-selected{border-color:var(--blue);background:var(--blue-100);}
.app .gw-frequent{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;}
.app .gw-frequent .pos-item{min-height:122px;padding:16px 12px;}
.app .gw-frequent .pi-name{font-size:14px;line-height:1.35;}
.app .gw-frequent .pi-price{font-size:13px;}
.app .gw-frequent.is-row{display:flex;flex-wrap:nowrap;max-height:none;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;}
.app .gw-frequent.is-row > .pos-item{flex:0 0 140px;min-height:110px;}
.app .gw-frequent:not(.is-row){animation:composeIn .25s ease both;}
.app .gw-glabel .gw-expand{font-size:13px;min-height:36px;padding:6px 0;}
.app .gw-body .gw-top,.app .gw-body .gx-searchwrap{max-width:none;width:100%;}
.app .gw-glabel{font-size:15px;letter-spacing:0;text-transform:none;margin-bottom:12px;}
.app .gw-plate-options{margin-top:22px;}
.app .gw-plate-options summary,.app .gr-supplier summary{cursor:pointer;color:var(--ink-2);font-size:14px;padding:10px 0;}
.app .gw-plate-options .gw-frequent{margin-top:12px;}
.app .gr-entry{padding:12px 0;border-bottom:1px solid var(--line);}
.app .gr-entry .gr-item{border:0;padding:0 0 10px;gap:7px;}
.app .gr-entry .gr-i-name{font-size:14px;white-space:normal;line-height:1.35;}
.app .gr-entry .gr-i-amt{font-size:14px;}
.app .gr-entry .gr-i-del{opacity:1;min-width:30px;min-height:34px;color:var(--ink-2);}
.app .gr-entry-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
.app .gr-entry-fields label{min-width:0;}
.app .gr-entry-fields label > span{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px;}
.app .gr-entry-fields input{width:100%;font-size:16px;min-height:44px;padding:8px!important;}
.app .gr-quick-preview{display:flex;justify-content:space-between;gap:12px;padding:16px 0;font-size:14px;}
.app .gr-quick-preview span{overflow-wrap:anywhere;min-width:0;}
.app .gr-quick-preview b{white-space:nowrap;}
.app .gr-checkout{padding-top:20px;}
.app .gr-date-label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:8px;}
.app .gr-checkout .date-trigger{width:100%;min-height:44px;}
.app .gr-checkout .btn{min-height:48px;margin-top:14px;font-size:16px;}
.app .gr-checkout .field{margin:6px 0 0;}
.app .gr-title{font-size:14px;}.app .gr-total{font-size:15px;}.app .gr-total b{font-size:26px;}
.app .gw-quick-form + .gw-glabel{margin-top:0;}
@media(min-width:1100px){
 .app .gw-split{grid-template-columns:minmax(0,1fr) 370px;align-items:start;}
 .app .gw-side{position:sticky;top:82px;}
 .app .gw-side .gw-receipt{position:static;}
 .app .gw-side .gr-items{max-height:42vh;overflow-y:auto;scrollbar-width:thin;}
}
@media(max-width:999px){
 .app .gw-mobile-save{display:block;min-height:46px;font-size:15px;}
 .app .gw-quick-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;}
 .app .gw-quick-actions .btn{margin:0;flex:1;white-space:normal;}
 .app .gw-split{gap:22px;}
 .app .gw-frequent{max-height:290px;overflow-y:auto;padding:2px;scrollbar-width:thin;}
}
@media(max-width:540px){
 .app .gw-quick-form{padding:18px 14px;margin-bottom:24px;}
 .app .gw-quick-fields{grid-template-columns:1fr;gap:14px;}
 .app .gw-quick-add{width:100%;}
 .app .gw-frequent{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:250px;}
 .app .gw-frequent .pos-item{min-height:110px;}
 .app .gw-side{margin:0;padding:0;border:0;}
}

/* One opaque composer. Its suggestion row expands INSIDE the same surface. */
.app .rev-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px;}
.app .rev-range label{min-width:0;}
.app .rev-range label > span{display:block;color:var(--ink-2);font-size:12px;font-weight:600;margin-bottom:6px;}
.app .rev-range input{width:100%;font-size:14px;}
/* Keep icon clearance explicit: generic input shorthands must not erase it. */
.app .gx-searchwrap input.gx-search{padding-left:36px!important;}
.app input[data-field-icon],.app textarea[data-field-icon]{
  background-image:var(--field-icon)!important;background-repeat:no-repeat!important;
  background-size:19px 19px!important;background-position:right 13px center!important;
  padding-right:42px!important;
}
.app input[type=number][data-field-icon]{background-position:right 28px center!important;padding-right:54px!important;}
.app textarea[data-field-icon]{background-position:right 13px top 12px!important;}
.app .gx-searchwrap:has(input[data-field-icon]) .gx-searchico{display:none;}
.app .gx-searchwrap input.gx-search[data-field-icon]{padding-left:12px!important;}
/* Compact numeric editors prioritize the number over decoration. */
.app table input[type=number]{background-image:none!important;padding:9px 10px!important;font-variant-numeric:tabular-nums;}
.app #gxCatalog .gx-in{width:132px;min-width:132px;max-width:none;font-size:16px;}
.app .overview-periods{display:flex;flex-wrap:wrap;gap:8px;order:-2;}
.app .overview-periods .filter-btn{min-height:40px;padding:9px 16px;}
/* Shared, compact controls: one visual language for periods and ledger filters. */
.app .sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.app .filter-btn,.app .sel-inline{
  box-sizing:border-box;min-height:34px!important;height:34px;border-radius:999px!important;
  padding:6px 12px!important;font-size:12px!important;font-weight:600!important;line-height:20px;
  color:var(--ink-2);border:1px solid var(--line)!important;
  background:color-mix(in srgb,var(--surface) 78%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .18s,color .18s,border-color .18s;white-space:nowrap;
}
.app select.sel-inline{padding-right:28px!important;}
.app .filter-btn.active{
  color:var(--blue)!important;background:color-mix(in srgb,var(--blue) 10%,var(--surface))!important;
  border-color:color-mix(in srgb,var(--blue) 24%,var(--line))!important;
}
.app .filter-btn:hover{color:var(--ink);border-color:var(--line-strong)!important;}
.app .subtabs .subtab,.app .subtabs .subtab:hover,.app .subtabs .subtab.active{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.app .filter-btn:disabled{opacity:.4;cursor:default;}
.app .filter-btn:focus-visible,.app .staff-picker summary:focus-visible,.app .insight-check:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.app .top #pageTitle{flex:0 0 auto;margin-right:8px;}
.app #overviewHeaderControls{min-width:0;flex:1;margin-left:auto;}
.app #overviewHeaderControls[hidden]{display:none;}
.app #overviewHeaderControls .overview-periods{flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px;}
.app #overviewHeaderControls .overview-periods>*{flex-shrink:0;}
.app .top:has(#overviewHeaderControls:not([hidden])) .sp{display:none;}
.app .overview-month input,.app .insight-tools input{
  width:152px!important;height:34px!important;min-height:34px!important;border-radius:999px!important;
  padding:5px 10px!important;font-size:12px!important;border:1px solid var(--line)!important;
  background:color-mix(in srgb,var(--surface) 78%,transparent)!important;color:var(--ink);background-image:none!important;
}
.app .card:has(#revChart),.app .card:has(#trendChart),.app .card:has(#ordersTable),.app .card:has(#gxHistory){
  border:1px solid var(--line)!important;border-radius:18px!important;padding:20px!important;background:var(--surface)!important;
}
.app .card:has(#revChart) .card-title,.app .card:has(#trendChart) .card-title{min-height:34px;margin-bottom:14px;gap:10px;}
.app .rev-range,.app .trend-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px;padding:0;}
.app .rev-range label,.app .trend-controls .tc-date{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:11px;color:var(--ink-2);}
.app .rev-range input[type=date],.app .trend-controls input[type=date]{width:100%!important;min-width:0!important;height:34px!important;min-height:34px!important;border-radius:999px!important;padding:6px 10px!important;font-size:12px!important;background-image:none!important;}
.app .filter-row input:not([type=checkbox]),.app .filter-row select{height:34px!important;min-height:34px!important;border-radius:999px!important;font-size:12px!important;}
html[data-theme=dark] .app input[type=date],html[data-theme=dark] .app input[type=month]{color-scheme:dark;}
.app .trend-presets{display:none!important;}
.app .chart-day-action{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0;font-size:12px;color:var(--ink-2);animation:crm-reveal .25s ease both;}
.app .staff-picker{position:relative;}
.app .staff-picker summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:44px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);font-size:14px;}
.app .staff-picker summary::-webkit-details-marker{display:none;}
.app #oStaffCurrent,.app #oStaffOptions button{display:flex;align-items:center;gap:10px;min-width:0;}
.app #oStaffCurrent img,.app #oStaffOptions img,.app .staff-initial{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.app .staff-initial{display:grid;place-items:center;background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--blue);font-weight:650;}
.app #oStaffOptions{position:absolute;top:100%;left:0;right:0;z-index:70;margin-top:5px;padding:6px;max-height:260px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);animation:crm-reveal .18s ease both;}
.app #oStaffOptions button{width:100%;min-height:44px;padding:8px;border:0;border-radius:8px;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer;}
.app #oStaffOptions button:hover,.app #oStaffOptions button[aria-pressed=true]{background:var(--surface-sunken);}
.app #oStaffOptions small{margin-left:auto;color:var(--ink-2);font-size:11px;}
.app .order-staff{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:11px;margin-top:5px;}
.app .order-staff img{width:20px;height:20px;border-radius:50%;object-fit:cover;}
.app #insightsRoot{width:100%;max-width:1100px;margin:auto;}
.app .insight-hero{display:flex;align-items:flex-start;gap:18px;padding:22px 0 28px;}
.app .insight-hero>img{width:68px;height:78px;object-fit:contain;}
.app .insight-hero h2{margin:0 0 18px;font-size:clamp(23px,2.5vw,34px);line-height:1.28;letter-spacing:-.7px;font-weight:650;max-width:850px;}
.app .insight-hero em{color:var(--blue);font-style:normal;}
.app .insight-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.app .insight-tools>span{font-size:11px;color:var(--ink-2);}
.app .insight-reading{padding:20px 24px;margin-bottom:26px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--blue) 4%,var(--surface));}
.app .insight-reading>div{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.app .insight-reading p{font-size:14px;line-height:1.65;margin:14px 0 0;white-space:pre-wrap;color:var(--ink-2);}
.app .insight-reading[aria-busy=true]{animation:insight-pulse 1.5s ease-in-out infinite;}
.app .insight-group{margin-bottom:28px;}
.app .insight-group h3{font-size:13px;font-weight:600;margin:0 0 12px;color:var(--ink-2);}
.app .insight-row{display:flex;align-items:center;gap:24px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-bottom:0;animation:crm-reveal .25s ease both;}
.app .insight-row:nth-child(2){border-radius:20px 20px 0 0;}
.app .insight-row:last-child{border-bottom:1px solid var(--line);border-radius:0 0 20px 20px;}
.app .insight-row:nth-child(2):last-child{border-radius:20px;}
.app .insight-row>div:first-child{flex:1;min-width:0;}
.app .insight-row h4{font-size:15px;font-weight:650;margin:0 0 6px;}
.app .insight-row p{font-size:14px;line-height:1.6;margin:0;color:var(--ink-2);overflow-wrap:anywhere;}
.app .insight-source{background:none;border:0;color:var(--blue);padding:8px 0 0;font-size:12px;font-weight:600;cursor:pointer;}
.app .insight-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.app .insight-check{width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--ink-2);font-size:18px;cursor:pointer;}
.app .insight-check:hover,.app .insight-check[aria-pressed=true]{background:var(--surface-sunken);color:var(--blue);}
.app .insight-row.is-reviewed{opacity:.65;}
.app .insight-empty{padding:20px 24px;border-radius:20px;background:var(--surface);font-size:14px;color:var(--ink-2);}
.app .insight-topic-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-sunken);margin-right:10px;font-size:19px;vertical-align:middle;}
.app .insight-graph{padding:16px 18px;border:1px solid var(--line);border-radius:18px;margin-bottom:22px;background:var(--surface);}
.app .insight-graph .chart,.app .insight-graph #insightChart{max-height:200px;}
.app .insight-saldo{font-size:12px;color:var(--ink-2);margin:8px 0 16px;}
.app .fan-avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--surface-sunken);}
.app .fan-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.app .insight-fans .insight-row>div{flex:1;}.app .insight-fans small{display:block;margin-top:8px;color:var(--blue);}
.app .insight-fans .insight-row{border:1px solid var(--line);border-radius:16px;margin-bottom:10px;}
.app .insight-fans>button{margin-top:8px;}
/* ---------------------------------------------------------------- TURNOS ---
   Three views share one root (Hoy / Historial / Tarifas), so spacing is set
   once here rather than per view. There is deliberately no always-present
   status line: a reserved strip under the date read as a stray blue sentence.
   Feedback appears as .shift-alert only when there is something to say. */
.app #shiftsRoot{width:100%;max-width:1100px;margin:auto;display:grid;gap:20px;}
.app .shift-views{margin:0;}
.app .shift-toolbar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
.app .shift-toolbar label,.app .shift-settings label,.app #shiftTips label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--ink-2);}
.app .shift-alert{margin:0;padding:11px 15px;border-radius:12px;font-size:13px;line-height:1.5;
  background:var(--info-bg);color:var(--info);}
.app .shift-alert.is-bad{background:var(--neg-bg);color:var(--neg);}
.app .shift-alert code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.07);}
html[data-theme="dark"] .app .shift-alert code{background:rgba(255,255,255,.10);}
.app .shift-none{margin:0;padding:18px 2px;font-size:13px;color:var(--ink-3);text-align:center;}
.app .shift-note{margin:16px 0 0;font-size:12px;color:var(--ink-2);}
.app .card-title .is-over{color:var(--neg);font-weight:700;}

/* ---- bubbles ---- */
.app .shift-cloud{min-height:250px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:30px;padding:26px 14px 34px;isolation:isolate;}
.app .shift-bubble{width:172px;height:172px;flex-shrink:0;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;cursor:pointer;outline-offset:5px;
  border:1px solid rgba(255,255,255,.85);border-radius:48% 52% 51% 49%;color:#354266;
  background:radial-gradient(ellipse at 28% 18%,#fff 0,rgba(255,255,255,.82) 18%,transparent 46%),linear-gradient(145deg,#edf2ff,#ccd9f3 70%,#adbee5);
  box-shadow:inset 0 5px 12px #ffffffc9,inset 0 -9px 18px #7e91c347,0 15px 30px #6d7dab26;
  animation:shift-float 5s ease-in-out infinite;animation-delay:var(--delay);transition:background .6s,box-shadow .4s,color .4s;}
.app .shift-bubble::after{content:'';position:absolute;inset:5px;border-radius:inherit;border:1px solid #ffffff6b;pointer-events:none;}
.app .shift-bubble.is-working{background:radial-gradient(ellipse at 28% 18%,#edfffc,transparent 49%),linear-gradient(145deg,#b9f1e1,#71ccb5 70%,#419f90);color:#103f35;box-shadow:inset 0 5px 12px #ffffffb0,inset 0 -9px 18px #17695730,0 15px 30px #39987930;}
.app .shift-bubble:active,.app .shift-bubble.is-popping{animation:shift-squish .65s cubic-bezier(.22,1,.36,1) both;}
.app .shift-bubble:focus-visible{outline:3px solid var(--blue);}
.app .bubble-face{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#ffffff7a;font-size:23px;overflow:hidden;}
.app .bubble-face img{width:100%;height:100%;object-fit:cover;}
.app .shift-bubble strong{font-size:16px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app .shift-bubble small{font-size:12px;}.app .shift-bubble:disabled{cursor:wait;}

/* On dark the light glass read as a bright blob. Keep it translucent — the
   workspace shows through — but tint it from the dark surface so the label
   stays legible instead of dark-on-bright. */
html[data-theme="dark"] .app .shift-bubble{
  border-color:rgba(255,255,255,.16);color:#dbe4f5;
  background:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.20) 0,rgba(255,255,255,.06) 26%,transparent 52%),
             linear-gradient(145deg,rgba(122,146,196,.26),rgba(70,88,130,.20) 70%,rgba(38,48,74,.26));
  box-shadow:inset 0 5px 14px rgba(255,255,255,.10),inset 0 -10px 20px rgba(0,0,0,.30),0 14px 30px rgba(0,0,0,.34);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
html[data-theme="dark"] .app .shift-bubble::after{border-color:rgba(255,255,255,.14);}
html[data-theme="dark"] .app .shift-bubble.is-working{
  border-color:rgba(126,231,199,.42);color:#c4f6e6;
  background:radial-gradient(ellipse at 28% 18%,rgba(196,246,230,.26) 0,rgba(120,220,190,.10) 28%,transparent 54%),
             linear-gradient(145deg,rgba(58,160,133,.34),rgba(34,110,94,.26) 70%,rgba(20,66,58,.30));
  box-shadow:inset 0 5px 14px rgba(210,255,240,.14),inset 0 -10px 20px rgba(0,0,0,.28),0 14px 30px rgba(12,80,64,.40);}
html[data-theme="dark"] .app .bubble-face{background:rgba(255,255,255,.10);}

/* ---- cards, sessions, rates ---- */
.app .shift-settings,.app .shift-ledger{padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);}
.app .shift-ledger .card-title,.app .shift-settings .card-title{font-size:14px;margin-bottom:6px;}
.app .shift-ledger .card-title>span,.app .shift-settings .card-title>span{font-size:12px;color:var(--ink-2);}
.app .shift-timeline{display:grid;}
.app .shift-time-row{display:grid;grid-template-columns:minmax(120px,150px) minmax(50px,1fr) auto auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;}
.app .shift-time-row:last-child{border-bottom:0;}
.app .str-who small{display:block;color:var(--ink-2);margin-top:4px;}
.app .str-pay{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.app .str-pay small{display:block;color:var(--ink-2);margin-top:4px;}
.app .shift-del{opacity:.5;transition:opacity .15s,color .15s;}
.app .shift-del:hover,.app .shift-del:focus-visible{opacity:1;color:var(--neg);}
.app .shift-time-track{height:10px;background:var(--surface-sunken);border-radius:12px;overflow:hidden;}
.app .shift-time-track i{display:block;height:100%;background:var(--blue);border-radius:inherit;transition:width .5s;}
.app .shift-day{border-bottom:1px solid var(--line);}
.app .shift-day:last-of-type{border-bottom:0;}
.app .shift-day>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 2px;cursor:pointer;font-size:13px;list-style:none;}
.app .shift-day>summary::-webkit-details-marker{display:none;}
.app .shift-day>summary::after{content:'▾';margin-left:auto;color:var(--ink-3);transition:transform .2s;}
.app .shift-day[open]>summary::after{transform:rotate(180deg);}
.app .shift-day>summary span{color:var(--ink-2);font-size:12px;}
.app .shift-day .shift-timeline{padding:0 0 10px 12px;}
/* Tarifas: a table of rows, because a roster grows. The header labels the
   columns once; each row repeats them only when the layout stacks. */
.app .rate-head,.app .rate-row{display:grid;gap:10px;align-items:center;
  grid-template-columns:minmax(104px,1.3fr) minmax(112px,1.1fr) 104px 104px minmax(110px,1fr) 96px auto;}
.app .rate-head{padding:14px 2px 8px;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.app .rate-row{padding:11px 2px;border-bottom:1px solid var(--line);}
.app .rate-row:last-child{border-bottom:0;}
.app .rate-row>label{display:contents;}
.app .rate-lbl{display:none;}
.app .rate-who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.app .rate-who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app .rate-who small{font-size:11px;color:var(--ink-3);}
.app .rate-who .is-unset{color:var(--warn);}
.app .rate-row input,.app .rate-row select{height:38px;min-width:0;width:100%;
  border:1px solid var(--line-strong);border-radius:9px;padding:6px 9px;
  color:var(--ink);background:var(--surface);font-size:14px;font-variant-numeric:tabular-nums;}
.app .rate-row select{padding-right:24px;}
/* the spinner arrows ate most of a 96px cell and clipped the value; the field
   is numeric-only anyway, and the keyboard still steps it */
.app .rate-row input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.app .rate-row input[type=number]::-webkit-outer-spin-button,
.app .rate-row input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.app .rate-save{height:38px;padding:0 15px;white-space:nowrap;}
@media(max-width:880px){
  /* below this the seven columns stop being readable, so each person becomes
     a small block with its own field labels */
  .app .rate-head{display:none;}
  .app .rate-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 12px;
    padding:15px;margin-bottom:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);}
  .app .rate-row>label{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .app .rate-lbl{display:block;font-size:11px;color:var(--ink-2);}
  .app .rate-who,.app .rate-row>label:first-of-type,.app .rate-save{grid-column:1/-1;}
}
.app .shift-settings input,.app .shift-settings select,.app #shiftTips input,.app .shift-toolbar input{height:42px;min-width:0;width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:8px 12px;color:var(--ink);background:var(--surface);font-size:16px;}
.app #shiftTips{display:flex;align-items:flex-end;gap:14px;margin:22px 0 4px;}.app #shiftTips label{flex:1;max-width:320px;}
@keyframes shift-float{0%,100%{transform:translateY(0) rotate(calc(var(--tilt)*-2deg))}50%{transform:translateY(-14px) rotate(calc(var(--tilt)*2deg))}}
@keyframes shift-squish{0%{transform:scale(1)}30%{transform:scale(.88,1.08);border-radius:44% 56% 43% 57%}65%{transform:scale(1.05,.94)}100%{transform:scale(1)}}
@media(max-width:600px){.app .shift-cloud{gap:16px;min-height:200px;padding:18px 0 26px;}.app .shift-bubble{width:138px;height:138px;}.app .bubble-face{width:44px;height:44px;}.app .shift-settings,.app .shift-ledger{padding:16px;}.app .shift-time-row{grid-template-columns:1fr auto auto;gap:10px;}.app .shift-time-track{grid-column:1/-1;grid-row:2;}.app #shiftTips{flex-wrap:wrap;}.app #shiftTips label{flex-basis:100%;max-width:none;}.app .shift-pay-grid{grid-template-columns:1fr;}.app .insight-fans .insight-row{flex-direction:row;}.app .insight-graph{padding:14px;}}
@media(prefers-reduced-motion:reduce){.app .shift-bubble,.app .shift-bubble.is-popping{animation:none!important;}.app .shift-time-track i{transition:none;}}
@keyframes crm-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes insight-pulse{50%{opacity:.6}}
@media(max-width:880px){
  .app .top:has(#overviewHeaderControls:not([hidden])){gap:5px;flex-wrap:nowrap;}
  .app .top:has(#overviewHeaderControls:not([hidden])) #pageTitle{font-size:18px;margin-right:2px;}
  .app #overviewHeaderControls .overview-periods{justify-content:flex-start;}
  .app .overview-month input,.app .insight-tools input,.app .rev-range input[type=date],.app .trend-controls input[type=date]{font-size:16px!important;}
  .app .filter-row input:not([type=checkbox]),.app .filter-row select{font-size:16px!important;}
  .app .overview-month input,.app .insight-tools input{width:172px!important;}
  .app .card:has(#revChart),.app .card:has(#trendChart),.app .card:has(#ordersTable),.app .card:has(#gxHistory){padding:16px!important;}
  .app .insight-hero{gap:10px;}.app .insight-hero>img{width:44px;height:54px;}
  .app .insight-row{align-items:flex-start;flex-direction:column;gap:12px;padding:18px;}
  .app .insight-actions{align-self:flex-end;}.app .insight-reading{padding:18px;}
}
@media(prefers-reduced-motion:reduce){.app .insight-row,.app .insight-reading,.app .chart-day-action,.app #oStaffOptions{animation:none!important;}}
.app .overview-balance{order:1;padding:18px 0;border-block:1px solid var(--line);}
.app .ob-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.app .ob-head strong{font-size:16px;}.app .ob-head span,.app .ob-foot{font-size:12px;color:var(--ink-2);}
.app .ob-bars > div{display:grid;grid-template-columns:65px minmax(0,1fr) auto;gap:12px;align-items:center;margin:12px 0;font-size:13px;}
.app .ob-bars b{min-width:85px;text-align:right;font-variant-numeric:tabular-nums;}
.app .ob-track{height:10px;border-radius:10px;background:var(--line);overflow:hidden;}
.app .ob-track i{display:block;height:100%;border-radius:inherit;transition:width .3s ease;}
.app .ob-foot{margin-top:14px;}
.app .order-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-size:13px;}
@media(prefers-reduced-motion:reduce){.app .ob-track i{transition:none;}}

.dock .dock-composer{
  --composer-fill:#fff;
  background:var(--composer-fill);border:1px solid var(--line-strong);border-radius:26px;
  box-shadow:0 8px 30px rgba(6,14,26,.14);overflow:hidden;isolation:isolate;
  transition:border-radius .42s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .3s;
}
html[data-theme="dark"] .dock .dock-composer{--composer-fill:#171e28;border-color:#344151;box-shadow:0 12px 36px rgba(0,0,0,.32);}
.dock .dock-composer.is-engaged{border-radius:24px;border-color:var(--blue);box-shadow:0 10px 36px rgba(6,14,26,.18);}
.dock .dock-suggestions{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s .42s;}
.dock .is-engaged .dock-suggestions{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1),opacity .28s .06s,visibility 0s;}
.dock .dock-suggestions-clip{min-height:0;overflow:hidden;}
.dock .dock-composer .dock-chips{margin:0;padding:14px 14px 4px!important;gap:8px;
  background:none!important;border:0;box-shadow:none;border-radius:0;mask-image:none;transform:translateY(10px);
  transition:transform .42s cubic-bezier(.22,1,.36,1);}
.dock .is-engaged .dock-chips{transform:translateY(0);}
.dock .dock-composer .dock-chip{background:var(--composer-fill)!important;border:1px solid var(--line-strong);padding:8px 12px;white-space:normal;text-align:left;font-size:13px;}
.dock .dock-composer .dock-bar,html[data-theme="dark"] .dock .dock-composer .dock-bar{
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:10px 10px 10px 17px;}
.dock .dock-composer .dock-input{font-size:16px;color:var(--ink);max-height:132px;}
.dock .dock-composer .dock-input::placeholder{color:var(--ink-2);opacity:1;}
.dock .dock-composer .dock-mic{background:transparent;border:0;}
.dock .dock-composer .dock-mic.live{background:var(--neg);color:white;}
.app .top,html[data-theme="dark"] .app .top,.reg-top{
  background:var(--bg)!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
@media(max-width:880px){
  .app .top .ico-btn,.app .top .ico-btn:hover,.reg-top .ico-btn,.reg-top .ico-btn:hover{
    background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    min-width:40px;min-height:40px;}
}
@media(max-width:860px){
  .dock .dock-composer .dock-bar{padding:8px 8px 8px 14px;}
  .dock .dock-composer .dock-chips{padding:12px 12px 3px!important;}
  .dock:not(.is-hidden) .dock-toggle{position:absolute;bottom:calc(100% + 10px);right:0;}
  .dock:not(.is-hidden) .dock-inner{padding-right:0;}
}
@media(prefers-reduced-motion:reduce){
  .dock .dock-composer,.dock .dock-suggestions,.dock .dock-composer .dock-chips{transition:none!important;}
}

/* ------------------------------------------------------------- CLIENTES --- */
.app .field-hint{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-3);}
.app #custTiles{margin-bottom:16px;}
.app #custList td b{font-weight:600;}

/* Inventory: a compact counter, a single simple entry surface. */
.app .inventory-entry{max-width:720px;margin-inline:auto;padding:clamp(20px,4vw,36px);}
.app .inventory-entry .card-title{margin-bottom:24px;font-size:20px;}
.app .inventory-identity{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:14px;}
.app .inventory-entry .emoji-trigger{width:100%;justify-content:center;}
.app .inventory-entry .filters .btn:first-child{min-width:180px;}
.app .inventory-details{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;}
.app .inventory-details summary{cursor:pointer;font-weight:600;font-size:13px;margin-bottom:18px;}
.app .inventory-details summary span{font-weight:400;color:var(--ink-3);margin-left:8px;}
.app .inventory-search{max-width:400px;margin-bottom:20px;}
.app .inventory-row{gap:16px;padding:16px 4px;border-radius:0;background:transparent;box-shadow:none;}
.app .inventory-row .item-body{min-width:0;}
.app .inventory-quantity{min-width:72px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.app .inventory-quantity strong{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.app .inventory-quantity small{color:var(--ink-3);font-size:11px;}
.app .inventory-row.is-low .inventory-quantity strong{color:#b76b12;}
.app .inventory-row .ico-btn{font-size:18px;}
.app [data-panel=donations]>.tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.app .tips-search-row{display:grid;grid-template-columns:minmax(160px,1fr) 160px 160px;gap:12px;margin:8px 0 20px;}
.app .tips-table small{display:block;color:var(--ink-3);font-size:11px;max-width:280px;margin-top:5px;white-space:normal;}
.app .tips-table{min-width:640px;}
.app #dStatusFilter{width:auto;min-width:130px;flex:0 0 auto;}
.app .tip-status{font-size:11px;color:var(--ink-3);}
.app .tip-status[data-status=approved]{color:#168467;}
.dock .dock-toggle{overflow:visible;}
.dock-stock-alert{position:absolute;top:-3px;right:-2px;min-width:23px;height:23px;padding:0 5px;display:grid;place-items:center;border-radius:99px;background:#e67824;color:white;border:2px solid var(--surface,#fff);font:700 11px/1 system-ui;box-shadow:0 2px 8px #8b451333;pointer-events:none;}
.dock-stock-alert[hidden]{display:none;}
@media(max-width:620px){
  .app .inventory-entry{padding:20px;}
  .app .inventory-entry .row-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .app .inventory-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;}
  .app .inventory-row .item-actions{grid-column:2/4;justify-content:flex-end;}
  .app .inventory-row .item-title{flex-wrap:wrap;}
  .app .tips-search-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .tips-search-row>.field:first-child{grid-column:1/-1;}
  .app [data-panel=donations]>.tiles .t-value{font-size:clamp(17px,5vw,26px);}
  .app #tipPagination{flex-wrap:wrap;font-size:11px;}
  .app .tips-table{min-width:0;table-layout:fixed;width:100%;}
  .app .tips-table th:nth-child(3),.app .tips-table td:nth-child(3),
  .app .tips-table th:nth-child(4),.app .tips-table td:nth-child(4),
  .app .tips-table th:nth-child(5),.app .tips-table td:nth-child(5){display:none;}
  .app .tips-table th:first-child{width:86px;}
  .app .tips-table th:last-child{width:78px;}
  .app .tips-table td{white-space:normal;overflow-wrap:anywhere;padding-inline:6px;}
  .app .tips-table td:last-child{white-space:nowrap;}
  .app .tips-table td:nth-child(2)::after{content:attr(data-staff);display:block;font-size:10px;color:var(--ink-3);margin-top:6px;}
}

/* ==========================================================================
   RESUMEN + INVENTARIO — redesign, 2026-09-12
   --------------------------------------------------------------------------
   The owner called the first screen horrible, and Inventario failed on every
   save. Both are rebuilt on NEW class names (ov-*, inv-*), every rule carries
   the .app prefix, so no older append block in this file can reach in and
   undo the spacing (see the specificity note on the STRIPE PASS blocks).

   Surfaces come back here — deliberately. The flat "no card" pass left the
   money charts, their date pickers and the tiles floating at one level, and a
   dashboard with no grouping reads as noise. One panel per question: a soft
   surface, one hairline, one radius. Nothing else is boxed.
   ========================================================================== */
.app{
  --ov-panel:#FFFFFF;
  --ov-panel-2:#F5F8FB;
  --ov-line:#E4E9F0;
  --ov-line-soft:#EDF1F5;
  --ov-shadow:0 1px 2px rgba(12,24,38,.04),0 8px 28px -16px rgba(12,24,38,.14);
  --ov-good:#0B7A55; --ov-good-bg:rgba(14,138,95,.10);
  --ov-bad:#B4443C;  --ov-bad-bg:rgba(180,68,60,.10);
  --ov-warn:#9A6206; --ov-warn-bg:rgba(176,112,10,.12);
  --ov-inc:#3B7DD8;  --ov-exp:#C98A2E;
  --ov-r:16px;
}
html[data-theme="dark"] .app{
  --ov-panel:#0E141D;
  --ov-panel-2:#151C27;
  --ov-line:#1F2937;
  --ov-line-soft:#18212D;
  --ov-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 32px -20px rgba(0,0,0,.8);
  --ov-good:#3ED39B; --ov-good-bg:rgba(62,211,155,.12);
  --ov-bad:#FF8A86;  --ov-bad-bg:rgba(255,122,120,.13);
  --ov-warn:#F0B44C; --ov-warn-bg:rgba(240,180,76,.13);
  --ov-inc:#5FA8FF;  --ov-exp:#D6A04A;
}

/* ---------------------------------------------------------- period control */
.app #overviewHeaderControls{display:flex;justify-content:flex-end;min-width:0;}
.app #overviewHeaderControls.is-idle{display:none;}
.app #overviewHeaderControls .overview-periods{
  display:flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:3px;margin:0;
  border-radius:12px;background:var(--ov-panel-2);border:1px solid var(--ov-line);
  max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.app #overviewHeaderControls .overview-periods::-webkit-scrollbar{display:none;}
.app .overview-periods .ov-seg{
  appearance:none;border:0;background:transparent;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  min-height:32px;padding:6px 12px;border-radius:9px;
  font-size:13px;font-weight:560;white-space:nowrap;cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;
}
.app .overview-periods .ov-seg:hover{color:var(--ink);}
.app .overview-periods .ov-seg.active{background:var(--ov-panel);color:var(--ink);box-shadow:0 0 0 1px var(--ov-line),0 1px 2px rgba(12,24,38,.08);}
html[data-theme="dark"] .app .overview-periods .ov-seg.active{background:#1E2836;box-shadow:0 0 0 1px #2B3748;}
.app .overview-periods .ov-seg:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.app .ov-month{display:inline-flex;flex:0 0 auto;}
.app .ov-month-btn svg{width:14px;height:14px;opacity:.8;}
.app .ov-month-pop{
  position:fixed;z-index:140;width:200px;max-height:330px;overflow:auto;
  display:grid;gap:2px;padding:6px;border-radius:14px;
  background:var(--ov-panel);border:1px solid var(--ov-line);box-shadow:var(--e3);
}
.app .ov-month-pop[hidden]{display:none!important;}
.app .ov-month-pop button{
  appearance:none;border:0;background:transparent;text-align:left;cursor:pointer;
  padding:8px 10px;border-radius:9px;font-size:13px;color:var(--ink);text-transform:capitalize;
}
.app .ov-month-pop button:hover,.app .ov-month-pop button:focus-visible{background:var(--sel);outline:none;}
.app .ov-month-pop button.active{color:var(--blue);font-weight:600;}

/* ------------------------------------------------------------------ board */
.app .ov-board{display:grid;gap:16px;min-width:0;}
.app .ov-eyebrow{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.005em;}
.app .ov-eyebrow::first-letter{text-transform:uppercase;}

.app .ov-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;min-width:0;
  background:var(--ov-panel);border:1px solid var(--ov-line);border-radius:20px;
  box-shadow:var(--ov-shadow);overflow:hidden;
}
.app .ov-hero-main{padding:22px 24px 16px;min-width:0;}
.app .ov-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.app .ov-hero-copy{min-width:0;}
.app .ov-figure{
  margin-top:6px;font-size:clamp(34px,4.2vw,50px);font-weight:650;line-height:1.04;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);
  white-space:nowrap;
}
.app .ov-delta-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;min-height:22px;}
.app .ov-delta{
  display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:999px;
  font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;
  background:var(--ov-panel-2);color:var(--ink-2);
}
.app .ov-delta.is-flat{padding-left:8px;}
.app .ov-delta svg{width:12px;height:12px;}
.app .ov-delta.is-good{background:var(--ov-good-bg);color:var(--ov-good);}
.app .ov-delta.is-bad{background:var(--ov-bad-bg);color:var(--ov-bad);}
.app .ov-delta-ctx{font-size:12.5px;color:var(--ink-3);}
.app .ov-toggle{display:inline-flex;flex:0 0 auto;padding:3px;border-radius:10px;background:var(--ov-panel-2);border:1px solid var(--ov-line);}
.app .ov-toggle button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:560;color:var(--ink-2);
}
.app .ov-toggle button:hover{color:var(--ink);}
.app .ov-toggle button.active{background:var(--ov-panel);color:var(--ink);box-shadow:0 0 0 1px var(--ov-line),0 1px 2px rgba(12,24,38,.06);}
html[data-theme="dark"] .app .ov-toggle button.active{background:#1E2836;box-shadow:0 0 0 1px #2B3748;}
.app .ov-toggle button:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.app .ov-hero-chart{margin-top:14px;min-height:170px;}
.app .ov-hero-chart .chart-empty{min-height:170px;display:grid;place-items:center;color:var(--ink-3);font-size:13px;}
.app .ov-hero-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;min-height:20px;margin-top:4px;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.app .ov-hero-foot b{font-weight:600;color:var(--ink-3);margin-right:4px;}
.app .ov-live{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ov-good);}
.app .ov-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:ovPulse 2s ease-out infinite;}
@keyframes ovPulse{0%{box-shadow:0 0 0 0 rgba(62,211,155,.5)}70%{box-shadow:0 0 0 7px rgba(62,211,155,0)}100%{box-shadow:0 0 0 0 rgba(62,211,155,0)}}
.app .chart-now-halo{transform-box:fill-box;transform-origin:center;animation:ovHalo 2.4s ease-out infinite;}
@keyframes ovHalo{0%{transform:scale(.7);opacity:.32}85%,100%{transform:scale(1.7);opacity:0}}

.app .ov-cash{
  display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 22px 18px;
  border-left:1px solid var(--ov-line);
  background:linear-gradient(180deg,var(--ov-panel-2),var(--ov-panel) 78%);
}
.app .ov-cash-value{font-size:30px;font-weight:650;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
.app .ov-cash-value.is-neg{color:var(--ov-bad);}
.app .ov-cash-status{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);}
.app .ov-cash-status i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--ink-3);}
.app .ov-cash-status.is-good i{background:var(--ov-good);}
.app .ov-cash-status.is-bad i{background:var(--ov-bad);}
.app .ov-bars{display:grid;gap:12px;margin-top:6px;}
.app .ov-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;font-size:12.5px;color:var(--ink-2);}
.app .ov-bar b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.app .ov-track{grid-column:1/-1;height:8px;border-radius:99px;overflow:hidden;background:var(--ov-panel-2);box-shadow:inset 0 0 0 1px var(--ov-line-soft);}
.app .ov-track i{display:block;height:100%;width:var(--w);border-radius:inherit;}
.app .ov-track i.is-inc{background:var(--ov-inc);}
.app .ov-track i.is-exp{background:var(--ov-exp);}
.app .ov-cats{display:grid;gap:7px;margin-top:6px;padding-top:12px;border-top:1px solid var(--ov-line-soft);}
.app .ov-cats-label{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.app .ov-cat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-2);}
.app .ov-cat span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app .ov-cat b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.app .ov-cash-note{margin:auto 0 0;padding-top:6px;font-size:11.5px;line-height:1.5;color:var(--ink-3);}
.app .ov-cash-note b{font-weight:600;color:var(--ink-2);}

.app .ov-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-width:0;
  background:var(--ov-panel);border:1px solid var(--ov-line);border-radius:var(--ov-r);
  box-shadow:var(--ov-shadow);overflow:hidden;
}
.app .ov-kpi{
  appearance:none;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;
  display:grid;align-content:start;gap:6px;min-width:0;padding:16px 20px 18px;
  transition:background .15s;
}
.app .ov-kpi+.ov-kpi{box-shadow:inset 1px 0 0 var(--ov-line);}
.app .ov-kpi:hover{background:var(--ov-panel-2);}
.app .ov-kpi:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.app .ov-kpi-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:560;color:var(--ink-2);}
.app .ov-kpi-go{width:14px;height:14px;flex:0 0 auto;color:var(--blue);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s;}
.app .ov-kpi:hover .ov-kpi-go,.app .ov-kpi:focus-visible .ov-kpi-go{opacity:1;transform:none;}
.app .ov-kpi-value{font-size:24px;font-weight:650;line-height:1.15;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app .ov-kpi-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:12px;color:var(--ink-3);}

.app .ov-mod{
  min-width:0;padding:18px 20px 20px;
  background:var(--ov-panel);border:1px solid var(--ov-line);border-radius:var(--ov-r);box-shadow:var(--ov-shadow);
}
.app .ov-mod-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin-bottom:12px;}
.app .ov-mod-head h2{margin:0;font-size:15px;font-weight:620;letter-spacing:-.01em;color:var(--ink);}
.app .ov-mod-tools{display:flex;align-items:center;gap:8px;}
.app .ov-link{appearance:none;border:0;background:transparent;cursor:pointer;padding:4px 8px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--blue);white-space:nowrap;}
.app .ov-link:hover{background:var(--sel);}
.app .ov-link:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.app .ov-empty{padding:28px 8px 18px;text-align:center;font-size:13px;color:var(--ink-3);}

.app .ov-rank{list-style:none;margin:0;padding:0;}
.app .ov-rank li{display:grid;grid-template-columns:16px 34px minmax(0,1fr) auto 104px;align-items:center;gap:12px;padding:9px 0;}
.app .ov-rank li+li{border-top:1px solid var(--ov-line-soft);}
.app .ov-rank-n{font-size:12px;font-weight:600;text-align:center;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.app .ov-rank-thumb{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;color:var(--ink-3);background:var(--ov-panel-2);}
.app .ov-rank-thumb svg{width:16px;height:16px;}
.app .ov-rank-name{display:grid;gap:6px;min-width:0;}
.app .ov-rank-label{font-size:13.5px;font-weight:560;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app .ov-rank-bar{display:block;height:4px;border-radius:99px;overflow:hidden;background:var(--ov-panel-2);}
.app .ov-rank-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--ov-inc);}
.app .ov-rank-qty{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.app .ov-rank-total{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ------------------------------------------- the hero row is a carousel ----
   Two faces of one row: the day (line + cash) and the history (bars + totals).
   The track slides a full face; the face leaving tilts back on a vertical axis
   and the one arriving swings in, so it reads as a turn, not a page jump. */
.app .ov-carousel{position:relative;min-width:0;}
.app .ov-viewport{
  position:relative;overflow:hidden;border-radius:20px;
  transition:height .55s cubic-bezier(.22,1,.36,1);
}
/* .ov-reel, not .ov-track: .ov-track is already the cash column's 8px bar */
.app .ov-reel{
  display:flex;align-items:flex-start;gap:24px;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.app .ov-carousel[data-at="1"] .ov-reel{transform:translateX(calc(-100% - 24px));}
.app .ov-slide{
  flex:0 0 100%;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .55s ease;
  transform-origin:right center;
}
.app .ov-slide.ov-hist{transform-origin:left center;}
.app .ov-carousel[data-at="1"] #ovSlideDay{transform:perspective(1600px) rotateY(14deg) scale(.92);opacity:.35;}
.app .ov-carousel[data-at="0"] #ovSlideHist{transform:perspective(1600px) rotateY(-14deg) scale(.92);opacity:.35;}
.app .ov-hist-sub{margin-top:8px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.app .ov-hist .ov-hero-top{align-items:center;}
.app .ov-hist .ov-hero-chart{margin-top:18px;}
.app .ov-track i.is-c1{background:var(--c1);}
.app .ov-track i.is-c2{background:var(--c2);}
/* the cash column's numbers keep clear of the arrow that sits on its edge */
.app .ov-slide .ov-cash{padding-right:36px;}

/* The arrow: only its tip, in glass. It sits on the row's right edge, drifts a
   few pixels to say "this moves", and turns half a circle when pressed. */
.app .ov-flip{
  position:absolute;top:50%;right:-22px;z-index:3;width:46px;height:46px;margin-top:-23px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:var(--ink);background:transparent;isolation:isolate;
  animation:ovNudge 3.2s ease-in-out 1.2s infinite;
  -webkit-tap-highlight-color:transparent;
}
.app .ov-flip-glass{
  position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.28) 48%,rgba(255,255,255,.44));
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(12,24,38,.06),
    0 0 0 1px rgba(12,24,38,.08),0 10px 26px -8px rgba(12,24,38,.32);
  transition:transform .25s ease,box-shadow .25s ease;
}
/* the specular highlight — what makes it read as glass rather than a grey dot */
.app .ov-flip-glass::after{
  content:"";position:absolute;left:18%;top:9%;width:52%;height:34%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));opacity:.85;
}
html[data-theme="dark"] .app .ov-flip{color:#F4F7FB;}
html[data-theme="dark"] .app .ov-flip-glass{
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 50%,rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.12),0 12px 30px -8px rgba(0,0,0,.7);
}
html[data-theme="dark"] .app .ov-flip-glass::after{opacity:.35;}
.app .ov-flip svg{width:20px;height:20px;transition:transform .7s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));}
html[data-theme="dark"] .app .ov-flip svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}
.app .ov-carousel[data-at="1"] .ov-flip svg{transform:rotate(180deg);}
.app .ov-flip:hover .ov-flip-glass{transform:scale(1.07);}
.app .ov-flip:active .ov-flip-glass{transform:scale(.95);}
.app .ov-flip:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
/* a press spins the whole button once, on top of the chevron's half turn */
.app .ov-flip.is-spinning{animation:ovSpin .7s cubic-bezier(.22,1,.36,1);}
@keyframes ovNudge{0%,100%{transform:translateX(0)}45%{transform:translateX(3px)}60%{transform:translateX(0)}}
@keyframes ovSpin{0%{transform:rotate(0) scale(1)}40%{transform:rotate(-200deg) scale(.88)}100%{transform:rotate(-360deg) scale(1)}}
.app .ov-carousel[data-at="1"] .ov-flip{animation-name:ovNudgeBack;}
.app .ov-carousel[data-at="1"] .ov-flip.is-spinning{animation:ovSpinBack .7s cubic-bezier(.22,1,.36,1);}
@keyframes ovNudgeBack{0%,100%{transform:translateX(0)}45%{transform:translateX(-3px)}60%{transform:translateX(0)}}
@keyframes ovSpinBack{0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(.88)}100%{transform:rotate(360deg) scale(1)}}

@media (max-width:1180px){
  .app .ov-hero{grid-template-columns:minmax(0,1fr) 264px;}
}
@media (max-width:980px){
  .app .ov-hero{grid-template-columns:minmax(0,1fr);}
  .app .ov-cash{border-left:0;border-top:1px solid var(--ov-line);background:var(--ov-panel);}
  .app .ov-slide .ov-cash{padding-right:22px;}
  .app .ov-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .ov-kpi:nth-child(3){box-shadow:inset 0 1px 0 var(--ov-line);}
  .app .ov-kpi:nth-child(4){box-shadow:inset 1px 0 0 var(--ov-line),inset 0 1px 0 var(--ov-line);}
  /* stacked, the row's middle is the cash block — the arrow moves up beside the chart */
  .app .ov-flip{top:196px;right:-18px;width:40px;height:40px;margin-top:-20px;}
}
@media (max-width:640px){
  /* the period gets its own row on a phone — squeezed beside the title it
     showed "Hoy Semana Mes p…" and nothing said the rest was there */
  .app .top:has(#overviewHeaderControls:not([hidden])){flex-wrap:wrap;height:auto;min-height:60px;padding-top:10px;padding-bottom:10px;row-gap:8px;}
  .app #overviewHeaderControls{flex:1 1 100%;order:9;justify-content:flex-start;}
  .app #overviewHeaderControls .overview-periods{width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .app .ov-board{gap:12px;}
  .app .ov-hero{border-radius:16px;}
  .app .ov-hero-main{padding:16px 16px 10px;}
  .app .ov-hero-top{flex-direction:column;gap:12px;}
  .app .ov-cash,.app .ov-slide .ov-cash{padding:16px;}
  .app .ov-kpi{padding:13px 14px 15px;}
  .app .ov-kpi-value{font-size:20px;}
  .app .ov-mod{padding:15px 14px 16px;border-radius:14px;}
  .app .ov-rank li{grid-template-columns:14px 30px minmax(0,1fr) auto;gap:10px;}
  .app .ov-rank-thumb{width:30px;height:30px;font-size:16px;}
  .app .ov-rank-total{grid-column:3/-1;text-align:left;font-weight:500;color:var(--ink-2);font-size:12px;margin-top:-4px;}
  /* a phone has no gutter to hang the arrow in — it sits inside the top corner */
  .app .ov-viewport{border-radius:16px;}
  .app .ov-flip{top:14px;right:12px;margin-top:0;width:40px;height:40px;}
  .app .ov-slide .ov-hero-copy{padding-right:44px;}
}
@media (prefers-reduced-motion:reduce){
  .app .ov-viewport,.app .ov-reel,.app .ov-slide,.app .ov-flip svg{transition:none!important;}
  .app .ov-flip,.app .ov-flip.is-spinning{animation:none!important;}
}

/* -------------------------------------------------------------- inventory */
.app .inv-stock{display:grid;gap:14px;min-width:0;}
.app .inv-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.app .inv-toolbar-sp{flex:1 1 auto;}
.app .inv-search{position:relative;display:flex;align-items:center;flex:0 1 380px;min-width:min(100%,220px);}
.app .inv-search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--ink-3);pointer-events:none;}
.app .inv-search input{
  width:100%;height:40px;min-height:40px;padding:0 12px 0 36px!important;font-size:14px;
  border:1px solid var(--ov-line)!important;border-radius:11px!important;background:var(--ov-panel)!important;
}
.app .inv-search input:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px var(--sel-2)!important;}
.app .btn.inv-add,.app .btn.inv-csv{min-height:40px;padding:0 14px;border-radius:11px;font-size:13px;}
.app .btn.inv-add svg,.app .btn.inv-csv svg{width:15px;height:15px;}
.app .btn.inv-csv{color:var(--ink-2);}

.app .inv-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;}
.app .inv-summary[hidden],.app .inv-table[hidden],.app .inv-empty[hidden],.app .inv-nomatch[hidden],.app .inv-empty-line[hidden]{display:none!important;}
.app .inv-filters{display:flex;flex-wrap:wrap;gap:6px;}
.app .inv-filter{
  appearance:none;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;
  border:1px solid var(--ov-line);background:var(--ov-panel);color:var(--ink-2);
  font-size:13px;font-weight:560;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.app .inv-filter b{min-width:1ch;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;}
.app .inv-filter i{width:8px;height:8px;border-radius:50%;background:var(--ov-warn);}
.app .inv-filter.is-bad i{background:var(--ov-bad);}
.app .inv-filter:hover{color:var(--ink);border-color:var(--line-strong);}
.app .inv-filter.active{background:var(--sel);border-color:var(--sel-line);color:var(--ink);}
.app .inv-filter:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.app .inv-worth{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-3);}
.app .inv-worth span{font-weight:560;color:var(--ink-2);}
.app .inv-worth b{font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;}

.app .inv-table{background:var(--ov-panel);border:1px solid var(--ov-line);border-radius:var(--ov-r);box-shadow:var(--ov-shadow);overflow:hidden;}
.app .inv-head,.app .inv-row{
  display:grid;align-items:center;gap:16px;padding:0 18px;
  grid-template-columns:minmax(210px,2.2fr) minmax(240px,1.9fr) minmax(76px,.7fr) minmax(92px,.8fr) minmax(104px,.9fr) 80px;
}
.app .inv-head{height:40px;background:var(--ov-panel-2);border-bottom:1px solid var(--ov-line);font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.app .inv-head>span:nth-child(n+3){text-align:right;}
.app .inv-row{min-height:66px;padding-top:10px;padding-bottom:10px;border-top:1px solid var(--ov-line-soft);transition:background .15s;}
.app #invList>.inv-row:first-child{border-top:0;}
.app .inv-row:hover{background:var(--ov-panel-2);}
.app .inv-row.is-new{animation:invNew 1.8s ease-out;}
@keyframes invNew{0%,25%{background:var(--sel-2)}100%{background:transparent}}
.app .inv-cell{min-width:0;}
.app .inv-item{display:flex;align-items:center;gap:12px;}
.app .inv-thumb{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;
  font-size:19px;color:var(--ink-3);background:var(--ov-panel-2);box-shadow:inset 0 0 0 1px var(--ov-line-soft);
}
.app .inv-thumb svg{width:17px;height:17px;}
.app .inv-name{display:grid;gap:2px;min-width:0;flex:1 1 auto;}
.app .inv-name-line{display:flex;align-items:center;gap:8px;min-width:0;}
.app .inv-name b{min-width:0;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app .inv-name small{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;min-width:0;font-size:12px;color:var(--ink-3);}
.app .inv-name small>span:first-child:not(.inv-chip){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app .inv-name small:empty{display:none;}
.app .inv-chip{display:inline-flex;align-items:center;flex:0 0 auto;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:650;white-space:nowrap;}
.app .inv-chip.is-low{background:var(--ov-warn-bg);color:var(--ov-warn);}
.app .inv-chip.is-out{background:var(--ov-bad-bg);color:var(--ov-bad);}
.app .inv-chip.is-local{height:18px;padding:0 6px;font-size:10.5px;font-weight:600;color:var(--ink-3);background:transparent;border:1px dashed var(--line-strong);}
.app .inv-level{display:flex;align-items:center;gap:14px;}
.app .inv-meter{position:relative;flex:1 1 auto;min-width:56px;height:6px;border-radius:99px;background:var(--ov-panel-2);box-shadow:inset 0 0 0 1px var(--ov-line-soft);}
.app .inv-meter i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;background:var(--ov-inc);transition:width .35s cubic-bezier(.2,.8,.2,1);}
.app .inv-row.is-low .inv-meter i{background:var(--ov-warn);}
.app .inv-row.is-out .inv-meter i{background:var(--ov-bad);}
/* the tick marks the alert level; the fill reaches it at one third */
.app .inv-meter em{position:absolute;left:33.333%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:2px;background:var(--line-strong);}
.app .inv-stepper{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid var(--ov-line);border-radius:10px;background:var(--ov-panel);overflow:hidden;}
.app .inv-stepper button{appearance:none;border:0;background:transparent;width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;}
.app .inv-stepper button:hover:not(:disabled){background:var(--ov-panel-2);color:var(--ink);}
.app .inv-stepper button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.app .inv-stepper button:disabled{opacity:.35;cursor:not-allowed;}
.app .inv-stepper button svg{width:14px;height:14px;}
.app .inv-qty{min-width:80px;padding:0 6px;text-align:center;line-height:32px;white-space:nowrap;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;border-inline:1px solid var(--ov-line-soft);}
.app .inv-qty b{display:inline-block;font-size:15px;font-weight:650;color:var(--ink);}
.app .inv-row.is-low .inv-qty b{color:var(--ov-warn);}
.app .inv-row.is-out .inv-qty b{color:var(--ov-bad);}
.app .inv-row.is-bumped .inv-qty b{animation:invBump .42s cubic-bezier(.2,.8,.2,1);}
@keyframes invBump{35%{transform:scale(1.2)}}
.app .inv-min,.app .inv-cost,.app .inv-value{text-align:right;white-space:nowrap;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.app .inv-value{font-weight:600;color:var(--ink);}
.app .inv-mlabel{display:none;}
.app .inv-actions{display:flex;justify-content:flex-end;gap:2px;opacity:.6;transition:opacity .15s;}
.app .inv-row:hover .inv-actions,.app .inv-row:focus-within .inv-actions{opacity:1;}
.app .inv-actions .ico-btn{border-color:transparent;background:transparent;}
.app .inv-actions .ico-btn:hover{border-color:var(--ov-line);background:var(--ov-panel);}
@media (hover:none){.app .inv-actions{opacity:1;}}

.app .inv-nomatch{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:16px 18px;border:1px dashed var(--ov-line);border-radius:var(--ov-r);font-size:13.5px;color:var(--ink-2);}
.app .inv-empty{
  display:grid;justify-items:center;gap:10px;padding:48px 20px 42px;text-align:center;
  background:var(--ov-panel);border:1px solid var(--ov-line);border-radius:20px;box-shadow:var(--ov-shadow);
}
.app .inv-empty-mark{width:56px;height:56px;margin-bottom:4px;border-radius:16px;display:grid;place-items:center;background:var(--sel-2);color:var(--blue);}
.app .inv-empty-mark svg{width:26px;height:26px;}
.app .inv-empty h3{margin:0;font-size:19px;font-weight:650;letter-spacing:-.015em;text-wrap:balance;}
.app .inv-empty p{margin:0 0 6px;max-width:48ch;font-size:14px;line-height:1.55;color:var(--ink-2);text-wrap:pretty;}
.app .btn.inv-add:not(.btn-sm){min-height:42px;padding:0 18px;border-radius:11px;}
.app .inv-suggest{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:12.5px;color:var(--ink-3);}
.app .inv-suggest>span{margin-right:2px;}
.app .inv-suggest button{appearance:none;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ov-line);background:var(--ov-panel-2);color:var(--ink);font-size:12.5px;cursor:pointer;transition:background .15s,border-color .15s;}
.app .inv-suggest button:hover{background:var(--sel);border-color:var(--sel-line);}
.app .inv-suggest button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

.app .inv-pane{padding:20px 22px 22px;background:var(--ov-panel);border:1px solid var(--ov-line);border-radius:var(--ov-r);box-shadow:var(--ov-shadow);}
.app .inv-pane-head{margin-bottom:16px;}
.app .inv-pane-head h2{margin:0;font-size:16px;font-weight:620;letter-spacing:-.01em;}
.app .inv-pane-head p{margin:4px 0 0;max-width:64ch;font-size:13px;line-height:1.5;color:var(--ink-2);}
.app .inv-recipe-form{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) 108px auto;align-items:end;gap:12px;
  margin-bottom:10px;padding:14px;border-radius:12px;background:var(--ov-panel-2);border:1px solid var(--ov-line-soft);
}
.app .inv-recipe-form .btn{min-height:38px;}
.app .inv-recipe{list-style:none;margin:0;padding:0;}
.app .inv-recipe li{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--ov-line-soft);}
.app .inv-recipe li:first-child{border-top:0;}
.app .inv-recipe-cost{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.app .inv-empty-line{padding:14px 4px 4px;font-size:13px;color:var(--ink-3);}
.app .inv-day{margin:20px 0 4px;font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.app .inv-day:first-child{margin-top:0;}
.app .inv-ledger{list-style:none;margin:0;padding:0;}
.app .inv-ledger li{display:grid;grid-template-columns:30px minmax(0,1fr) auto 112px;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--ov-line-soft);}
.app .inv-ledger li:first-child{border-top:0;}
.app .inv-ledger-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);background:var(--ov-panel-2);}
.app .inv-ledger-ico svg{width:14px;height:14px;}
.app .inv-ledger li.is-in .inv-ledger-ico{background:var(--ov-good-bg);color:var(--ov-good);}
.app .inv-ledger-body{display:grid;gap:1px;min-width:0;}
.app .inv-ledger-body b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app .inv-ledger-body small{font-size:12px;color:var(--ink-3);}
.app .inv-ledger-delta{font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;}
.app .inv-ledger li.is-in .inv-ledger-delta{color:var(--ov-good);}
.app .inv-ledger-after{text-align:right;white-space:nowrap;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* the sheet: a side panel on a desk, a bottom sheet on a phone */
.app .inv-sheet{
  position:fixed;inset:0 0 0 auto;margin:0;padding:0;width:min(460px,100vw);max-width:100vw;height:100%;max-height:100dvh;
  border:0;border-left:1px solid var(--ov-line);background:var(--ov-panel);color:var(--ink);box-shadow:var(--e3);
}
.app .inv-sheet[open]{display:flex;animation:invSheetIn .26s cubic-bezier(.2,.8,.2,1);}
/* a scrim, not a blur: the stock list stays readable beside the form */
.app .inv-sheet::backdrop{background:rgba(8,12,19,.34);}
@keyframes invSheetIn{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
.app .inv-sheet .inventory-entry{display:flex;flex-direction:column;width:100%;height:100%;max-width:none;margin:0;padding:0;}
.app .inv-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 16px;border-bottom:1px solid var(--ov-line);}
.app .inv-sheet-head h2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.015em;}
.app .inv-sheet-head p{margin:4px 0 0;font-size:13px;color:var(--ink-2);}
.app .inv-sheet-x{border-color:transparent!important;background:transparent!important;}
.app .inv-sheet-x svg{width:16px;height:16px;}
.app .inv-sheet-body{flex:1 1 auto;overflow-y:auto;display:grid;align-content:start;gap:16px;padding:20px 22px 24px;}
.app .inv-sheet-body .row-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.app .inv-sheet-body .field input,.app .inv-sheet-body .field select{min-height:40px;font-size:14px;}
.app .inv-sheet .inventory-details{margin:0;padding:14px 0 0;border-top:1px solid var(--ov-line-soft);}
.app .inv-sheet .inventory-details summary{margin:0;font-size:13px;cursor:pointer;}
.app .inv-sheet .inventory-details summary span{margin-left:0;font-weight:600;color:var(--ink);}
.app .inv-sheet .inventory-details summary em{font-style:normal;margin-left:6px;font-weight:400;color:var(--ink-3);}
.app .inv-sheet .inventory-details[open] summary{margin-bottom:14px;}
.app .inv-sheet-worth{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--ov-panel-2);font-size:13px;color:var(--ink-2);}
.app .inv-sheet-worth:empty{display:none;}
.app .inv-sheet-worth b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;}
.app .inv-sheet-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ov-line);background:var(--ov-panel);}
.app .inv-sheet-foot .btn{min-height:42px;padding:0 18px;border-radius:11px;font-size:14px;}

@media (max-width:900px){
  .app .inv-head{display:none;}
  .app .inv-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 16px;}
  .app .inv-item{grid-column:1/3;}
  .app .inv-actions{grid-column:3;grid-row:1;opacity:1;}
  .app .inv-level{grid-column:1/-1;}
  .app .inv-min,.app .inv-cost,.app .inv-value{grid-row:3;display:grid;gap:2px;text-align:left;}
  .app .inv-mlabel{display:block;font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
  /* a phone has no room for "Carne de res (lomo)" AND its chip on one line:
     the name wraps, the chip follows it */
  .app .inv-name-line{flex-wrap:wrap;row-gap:4px;}
  .app .inv-name b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3;}
  .app .inv-recipe-form{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .inv-recipe-form .btn{grid-column:1/-1;}
}
@media (max-width:640px){
  .app .inv-search{flex:1 1 100%;}
  .app .inv-toolbar-sp{display:none;}
  .app .btn.inv-add,.app .btn.inv-csv{flex:1 1 0;}
  .app .inv-summary{align-items:flex-start;}
  .app .inv-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;}
  .app .inv-filters::-webkit-scrollbar{display:none;}
  .app .inv-filter{flex:0 0 auto;}
  .app .inv-pane{padding:16px 14px 18px;}
  .app .inv-ledger li{grid-template-columns:30px minmax(0,1fr) auto;}
  .app .inv-ledger-after{grid-column:2/-1;text-align:left;margin-top:-6px;}
  .app .inv-sheet{inset:auto 0 0 0;width:100vw;height:auto;max-height:92dvh;border-left:0;border-top:1px solid var(--ov-line);border-radius:20px 20px 0 0;}
  .app .inv-sheet[open]{animation:invSheetUp .28s cubic-bezier(.2,.8,.2,1);}
  .app .inv-sheet-body .row-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@keyframes invSheetUp{from{transform:translateY(48px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .app .ov-live i,.app .chart-now-halo,.app .inv-row.is-new,.app .inv-row.is-bumped .inv-qty b{animation:none!important;}
  .app .inv-sheet[open]{animation:none!important;}
  .app .inv-meter i{transition:none;}
}

/* ==========================================================================
   TRANSMISIÓN · AUDIENCIA — restyle, 2026-09-13
   --------------------------------------------------------------------------
   The owner asked for Resumen's look without Resumen's boxes: it stays on the
   page's own background. One figure, one line, one row of six numbers, then
   the visitors. New class names (av-*) so none of the older .vw-* append
   blocks, several of them !important, can reach in.
   ========================================================================== */
.app .av{display:block;min-width:0;}
.app .av-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;}
.app .av-copy{min-width:0;}
.app .av-figure{
  margin-top:6px;font-size:clamp(34px,4.2vw,48px);font-weight:650;line-height:1.04;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;
}
.app .av-chart{position:relative;margin-top:12px;min-height:168px;}
.app .av-chart .chart-empty{min-height:168px;display:grid;place-items:center;color:var(--ink-3);font-size:13px;}
.app .av-chart .chart-day-action{margin:6px 0 0;}
.app .av-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;min-height:20px;margin-top:2px;
  font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.app .av-foot b{font-weight:600;color:var(--ink-3);margin-right:4px;}
.app .av-hint{margin-left:auto;color:var(--ink-3);}
.app .av .av-empty{padding:4px 0 0!important;font-size:12.5px!important;text-align:left!important;color:var(--ink-3);}

.app .av-stats{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:16px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.app .av-stat{display:grid;gap:4px;align-content:start;min-width:0;padding:13px 16px 14px;}
.app .av-stat+.av-stat{box-shadow:inset 1px 0 0 var(--line);}
.app .av-stat:first-child{padding-left:0;}
.app .av-stat span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app .av-stat b{font-size:20px;font-weight:650;line-height:1.2;letter-spacing:-.025em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.app .av-viewers{margin-top:20px;}
.app .av-viewers-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:4px;}
.app .av-viewers-title{font-size:15px;font-weight:620;letter-spacing:-.01em;color:var(--ink);}
.app .av-viewers-day{font-weight:500;color:var(--ink-3);}
.app .av-viewers-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.app .av-date{display:inline-flex;}
.app .av-date input[type=date]{
  min-height:0!important;height:34px!important;padding:0 10px!important;border-radius:10px!important;
  border:1px solid var(--ov-line)!important;background:var(--ov-panel-2)!important;color:var(--ink-2)!important;
  font-size:12.5px;font-weight:560;width:auto;min-width:132px;color-scheme:light;
}
html[data-theme="dark"] .app .av-date input[type=date]{color-scheme:dark;}
.app .av-date input[type=date]:hover{border-color:var(--blue)!important;}
.app .av-date input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;}

.app .av-row{display:grid;grid-template-columns:minmax(180px,1.7fr) repeat(3,minmax(84px,.6fr));align-items:center;gap:12px;padding:10px 0;}
.app .av-row-head{padding:10px 0 8px;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.app #vwViewerList .av-row+.av-row{border-top:1px solid var(--ov-line-soft);}
.app .av-who{display:flex;align-items:center;gap:10px;min-width:0;}
.app .av-avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  font-size:12px;font-weight:650;color:var(--ink-2);background:var(--ov-panel-2);box-shadow:inset 0 0 0 1px var(--ov-line);
}
.app .av-avatar img{width:100%;height:100%;object-fit:cover;}
.app .av-row.is-live .av-avatar{box-shadow:0 0 0 2px var(--ov-good);}
.app .av-name{display:grid;gap:1px;min-width:0;}
.app .av-name b{font-size:13.5px;font-weight:560;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app .av-name>span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app .av-val{font-size:13px;font-weight:560;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.app .av-val small{display:none;}
.app .av-note{margin:10px 0 0;max-width:86ch;font-size:11.5px;line-height:1.5;color:var(--ink-3);}

@media (max-width:1100px){
  .app .av-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .app .av-stat:nth-child(3n+1){padding-left:0;box-shadow:none;}
  .app .av-stat:nth-child(n+4){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line);}
  .app .av-stat:nth-child(4){box-shadow:inset 0 1px 0 var(--line);}
}
@media (max-width:640px){
  .app .av-range{width:100%;}
  .app .av-range button{flex:1 1 0;}
  .app .av-hint{margin-left:0;}
  .app .av-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .av-stat{padding:11px 12px 12px;}
  .app .av-stat:nth-child(3n+1){padding-left:12px;}
  .app .av-stat:nth-child(odd){padding-left:0;box-shadow:none;}
  .app .av-stat:nth-child(even){box-shadow:inset 1px 0 0 var(--line);}
  .app .av-stat:nth-child(n+3):nth-child(odd){box-shadow:inset 0 1px 0 var(--line);}
  .app .av-stat:nth-child(n+3):nth-child(even){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line);}
  .app .av-stat b{font-size:18px;}
  .app .av-viewers-tools{width:100%;}
  .app .av-row-head{display:none;}
  .app .av-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;}
  .app .av-who{grid-column:1/-1;}
  .app .av-val small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1px;}
}

/* ==========================================================================
   OWNER DOOR — 2026-09-13
   The screen an owner-locked business (Casa Almarita) shows instead of the
   CRM: confirm your email, wrong account, or access not switched on yet. It
   sits outside .app (which is hidden while it shows), so it is not .app-scoped.
   ========================================================================== */
.owner-gate{min-height:100dvh;display:grid;place-items:center;padding:32px 18px;background:var(--bg);color:var(--ink);}
.owner-gate .og-card{width:min(100%,440px);display:grid;justify-items:center;gap:0;text-align:center;}
.owner-gate .og-logo{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line);}
.owner-gate .og-biz{margin:12px 0 0;font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.owner-gate h1{margin:18px 0 0;font-size:26px;font-weight:650;letter-spacing:-.025em;line-height:1.2;text-wrap:balance;}
.owner-gate .og-body{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty;overflow-wrap:anywhere;}
.owner-gate .og-body b{font-weight:620;color:var(--ink);}
.owner-gate .og-actions{display:grid;gap:8px;width:100%;margin-top:26px;}
.owner-gate .og-btn{
  appearance:none;width:100%;min-height:46px;padding:11px 18px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--line-strong);
  transition:background .15s,border-color .15s;
}
.owner-gate .og-btn:hover{background:var(--surface-sunken);}
.owner-gate .og-btn.is-primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.owner-gate .og-btn.is-primary:hover{filter:brightness(1.06);background:var(--blue);}
.owner-gate .og-btn:disabled{opacity:.6;cursor:progress;}
.owner-gate .og-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.owner-gate .og-msg{min-height:20px;margin:14px 0 0;font-size:13px;color:var(--ink-2);}

/* ==========================================================================
   INGRESOS · register footer — 2026-09-13
   "Registrado por" left the form grid, where it sat alone on a row, and joins
   the two buttons: who rang it up, keep it open, charge it. The four fields
   left above lay out 4-across or 2×2, so none of them is ever alone either.
   ========================================================================== */
.app .pos-meta{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1240px){ .app .pos-meta{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .app .pos-meta{grid-template-columns:minmax(0,1fr);} }

.app .pos-actions{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch;}
.app .pos-actions .staff-picker{min-width:0;}
.app .pos-actions .staff-picker details{height:100%;}
.app .pos-actions .staff-picker summary{height:100%;min-height:44px;gap:10px;padding:6px 12px;font-size:13.5px;}
.app .pos-actions .sp-lab{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap;}
.app .pos-actions #oStaffCurrent{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.app .pos-actions #oStaffCurrent>span{overflow:hidden;text-overflow:ellipsis;}
.app .pos-actions .sp-caret{flex:0 0 auto;color:var(--ink-3);}
/* it sits at the bottom of the till, so the list opens upward */
.app .pos-actions #oStaffOptions{top:auto;bottom:100%;margin:0 0 6px;}
@media (max-width:640px){
  .app .pos-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .pos-actions .staff-picker{grid-column:1/-1;}
}