/* ============ FONTS (self-hosted, SIL Open Font License) ============ */
@font-face{font-family:'Jost'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/assets/fonts/jost-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/assets/fonts/jost-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============ TOKENS — On Set: chocolate, cream and warm neutrals ============ */
:root{
  color-scheme:light;
  --paper:#F6EFE4;
  --paper-raised:#FFFBF5;
  --paper-sunken:#EDE3D4;
  --ink:#2A1A12;
  --ink-soft:#6B5546;
  --ink-faint:#7E6857;
  --line:#DECFBC;
  --line-soft:#EADFD0;
  --accent:#7A4A2E;
  --accent-ink:#FFF8EF;
  --accent-soft:#EFDFCF;
  --on:#C98B4E;
  --on-glow:rgba(201,139,78,0.35);
  --danger:#A8432F;
  --danger-soft:#F4DDD5;
  --gold:#8F6420;
  --gold-soft:#F1E3C4;
  --green:#3D6B4C;
  --green-soft:#DDE8DA;
  --amber:#8F6420;
  --amber-soft:#F3E4C3;
  --blue:#3F5C70;
  --blue-soft:#DEE6EA;
  --grey:#76685C;
  --grey-soft:#E8DFD3;
  --radius-s:8px;
  --radius:14px;
  --radius-l:22px;
  --shadow-sm:0 1px 2px rgba(42,26,18,0.06), 0 1px 1px rgba(42,26,18,0.04);
  --shadow-md:0 6px 20px -6px rgba(42,26,18,0.18);
  --shadow-lg:0 20px 50px -12px rgba(42,26,18,0.28);
  --font-display:'Jost', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html.dark{
  color-scheme:dark;
  --paper:#1B1410;
  --paper-raised:#251B15;
  --paper-sunken:#150F0C;
  --ink:#F4EADD;
  --ink-soft:#BFAE9C;
  --ink-faint:#9C8A78;
  --line:#3A2D24;
  --line-soft:#2E231C;
  --accent:#D7A77C;
  --accent-ink:#1B120C;
  --accent-soft:#3A2A1F;
  --on:#E3A867;
  --on-glow:rgba(227,168,103,0.35);
  --danger:#E8836D;
  --danger-soft:#3D221C;
  --gold:#E2B566;
  --gold-soft:#3A2F1E;
  --green:#86C79C;
  --green-soft:#1F3127;
  --amber:#E2B566;
  --amber-soft:#382D1B;
  --blue:#98B7CB;
  --blue-soft:#1F2B33;
  --grey:#A4978A;
  --grey-soft:#2B221C;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 6px 20px -6px rgba(0,0,0,0.5);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background .25s ease, color .25s ease;
}
::selection{background:var(--accent); color:var(--accent-ink);}
a{color:inherit;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px;}

/* ============ APP SHELL ============ */
#app{
  display:flex;
  min-height:100vh;
  width:100%;
}

/* app shell — layout adapts automatically to real viewport width via the
   @media query at the bottom of this stylesheet. No manual device toggle. */
.stage{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  background:var(--paper-sunken);
  padding:0;
}
.device{
  width:100%;
  min-height:100vh;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ============ TOPBAR ============ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  gap:12px;
}
/* header (top bar, banners and, on phones, the menu) stays fixed at the top */
.app-header{position:sticky; top:0; z-index:30; background:var(--paper);}
.brand{display:flex; align-items:center; text-decoration:none; color:var(--ink); min-width:0;}
.brand:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:6px;}

/* ---- On Set wordmark: the ON switch, then ON SET ---- */
.os-word{display:inline-flex; align-items:baseline; gap:.38em; font-family:var(--font-display); font-weight:500; font-size:21px; letter-spacing:.2em; line-height:1; color:var(--ink); white-space:nowrap;}
/* pill in the text color with the knob cut out, so the background shows through in light and dark */
.os-switch{flex:none; align-self:center; width:1.42em; height:.8em; margin-right:.06em; border-radius:.4em; background:currentColor;
  -webkit-mask:radial-gradient(circle at calc(100% - .4em) 50%, transparent .27em, #000 calc(.27em + .5px));
  mask:radial-gradient(circle at calc(100% - .4em) 50%, transparent .27em, #000 calc(.27em + .5px));}
.os-on{display:inline-flex; align-items:baseline; font-weight:600;}
.os-set{font-weight:400;}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.icon-btn{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s ease;
  flex:none;
}
.icon-btn:hover{border-color:var(--ink); transform:translateY(-1px);}
.preview-banner{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:9px 16px;
  background:var(--accent); color:var(--accent-ink);
  font-size:12.5px; font-weight:700;
}
.preview-banner .btn{background:var(--accent-ink); color:var(--accent); border-color:var(--accent-ink);}
.offline-banner{
  padding:9px 16px;
  background:var(--ink); color:var(--paper);
  font-size:12.5px; font-weight:600; line-height:1.45; text-align:center;
}
.offline-banner[hidden]{display:none;}
.notif-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--paper);
}
.notif-panel{
  display:none;
  position:absolute; top:44px; right:0;
  width:300px; max-height:360px; overflow-y:auto;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:10px;
  z-index:80;
}
.notif-panel.open{display:block;}
.notif-panel-title{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); font-weight:700; padding:4px 6px 8px 6px;}
.notif-item{
  display:flex; align-items:center; gap:9px;
  padding:8px 6px; border-radius:9px; cursor:pointer;
}
.notif-item:hover{background:var(--paper-sunken);}
.notif-item .ni-dot{width:7px; height:7px; border-radius:50%; flex:none;}
.notif-item .ni-info{flex:1; min-width:0;}
.notif-item .ni-name{font-size:12px; font-weight:700;}
.notif-item .ni-sub{font-size:10px; color:var(--ink-faint);}
.notif-item .ni-amt{font-family:var(--font-mono); font-size:11.5px; font-weight:700; flex:none;}
.notif-empty{padding:16px 8px; text-align:center; font-size:12px; color:var(--ink-faint);}

.icon-btn svg{width:16px;height:16px;}
.seg{
  display:flex;
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px;
  background:var(--paper-raised);
  gap:2px;
}
.seg button{
  border:none;
  background:transparent;
  color:var(--ink-soft);
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.03em;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  transition:all .15s ease;
}
.seg button.active{
  background:var(--ink);
  color:var(--paper);
}
.seg svg{width:13px;height:13px;}

/* ============ LAYOUT: NAV ============ */
.body-row{
  display:flex;
  flex:1;
  min-height:0;
  width:100%;
}
.sidenav{
  width:196px;
  flex:none;
  border-right:1px solid var(--line);
  padding:20px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.navlink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--ink-soft);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  border:none;
  background:transparent;
  text-align:left;
  width:100%;
  transition:all .15s ease;
}
.navlink svg{width:16px;height:16px; flex:none; opacity:0.8;}
.navlink:hover{background:var(--paper-sunken); color:var(--ink);}
.navlink.active{background:var(--ink); color:var(--paper);}
.navlink.active svg{opacity:1;}
.nav-footer{
  margin-top:auto;
  padding:12px;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-faint);
  line-height:1.6;
}

.main{
  flex:1;
  min-width:0;
  padding:26px 30px 80px 30px;
  overflow-y:auto;
}

/* phone menu: one row fixed at the bottom, always visible (hidden on computers) */
.topnav{display:none;}
.topnav button{
  border:none; background:transparent; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:700; letter-spacing:0.01em;
  padding:6px 2px; min-height:46px; border-radius:10px; cursor:pointer; min-width:0;
  -webkit-tap-highlight-color:transparent;
}
.topnav button svg{width:18px; height:18px;}
.topnav button span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topnav button.active{background:var(--ink); color:var(--paper);}
.topnav button.is-off{opacity:.55;}

/* "Install app" button in the header */
.install-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 14px; border-radius:999px;
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.install-btn svg{width:16px; height:16px; flex:none;}
.install-btn .install-short{display:none;}

/* ============ TYPOGRAPHY HELPERS ============ */
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin:0 0 6px 0;
}
h1.page-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:32px;
  margin:0;
  letter-spacing:-0.01em;
}
.page-sub{
  color:var(--ink-soft);
  font-size:13.5px;
  margin-top:4px;
  max-width:520px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.btn svg{width:14px;height:14px;}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm);}
.btn.secondary{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn.secondary:hover{border-color:var(--ink);}
.btn.accent{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn.small{padding:7px 12px; font-size:12px;}
.btn.danger{background:transparent; border-color:var(--line); color:var(--danger);}
.btn.danger:hover{border-color:var(--danger); background:var(--danger-soft);}
.btn:disabled{opacity:0.4; cursor:not-allowed; transform:none;}
.btn.block{width:100%; justify-content:center;}

/* ============ CARDS / KPI ============ */
.grid{display:grid; gap:14px;}
.kpi-grid{grid-template-columns:repeat(5,1fr); margin-bottom:20px;}
.card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.kpi{
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  overflow:hidden;
}
.kpi .kpi-label{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-faint);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
}
.kpi .kpi-dot{width:6px;height:6px;border-radius:50%; flex:none;}
.kpi .kpi-value{
  font-family:var(--font-display);
  font-size:25px;
  font-weight:600;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.kpi .kpi-sub{font-size:11px; color:var(--ink-soft);}

.section-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  margin:0 0 12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.section-title .tag{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-faint);
  font-weight:500;
}
.panel-row{display:grid; grid-template-columns:1.3fr 1fr; gap:14px; margin-bottom:14px; align-items:start;}

/* ---- contact-sheet frame marks (signature element) ---- */
.frame-mark{
  width:30px;height:30px;
  border-radius:50%;
  border:1.5px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-faint);
  position:relative;
  background:var(--paper);
}
.frame-mark.status-cobrado{border-color:var(--green); color:var(--green);}
.frame-mark.status-pendiente,.frame-mark.status-factura{border-color:var(--amber); color:var(--amber);}
.frame-mark.status-confirmado{border-color:var(--blue); color:var(--blue);}
.frame-mark.status-opcion{border-color:var(--ink-faint); color:var(--ink-faint); border-style:dashed;}
.frame-mark.status-cancelado{border-color:var(--ink-faint); color:var(--ink-faint);}
.frame-mark.marked::after{
  content:'';
  position:absolute;
  inset:-4px;
  border:1.5px solid currentColor;
  border-radius:50%;
  border-top-color:transparent;
  transform:rotate(-18deg);
  opacity:0.7;
}

/* ============ BAR / DONUT CHARTS (pure CSS) ============ */
.bars{display:flex; align-items:flex-end; gap:10px; height:150px; padding-top:10px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bar-stack{width:100%; max-width:34px; display:flex; flex-direction:column-reverse; border-radius:6px 6px 3px 3px; overflow:hidden; background:var(--paper-sunken);}
.bar-seg{width:100%;}
.bar-col .bar-label{font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint); text-transform:uppercase;}
.bar-col .bar-val{font-family:var(--font-mono); font-size:9.5px; color:var(--ink-soft); font-weight:600;}

.donut-wrap{display:flex; align-items:center; gap:18px;}
.donut{
  width:120px;height:120px;border-radius:50%;
  flex:none;
  position:relative;
}
.donut::after{
  content:'';
  position:absolute; inset:16px;
  border-radius:50%;
  background:var(--paper-raised);
}
.donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); z-index:2; text-align:center; line-height:1.3;
}
.donut-center b{font-family:var(--font-display); font-size:19px; color:var(--ink); display:block;}
.legend{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;}
.legend-item{display:flex; align-items:center; gap:8px; font-size:12px;}
.legend-dot{width:9px;height:9px;border-radius:2px; flex:none;}
.legend-item .lg-name{flex:1; color:var(--ink-soft); font-weight:500;}
.legend-item .lg-val{font-family:var(--font-mono); font-weight:600; font-size:11.5px;}

/* ============ TABLE / LIST ============ */
.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.chip-select{
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23716B5E' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:26px;
}
.search-input{
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink);
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  flex:1;
  min-width:140px;
}
.search-input:focus,.chip-select:focus{outline:2px solid var(--accent); outline-offset:1px;}

.job-list{display:flex; flex-direction:column; gap:8px;}
.job-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper-raised);
  cursor:pointer;
  transition:all .15s ease;
}
.job-row:hover{border-color:var(--ink); box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.job-main{flex:1; min-width:0;}
.job-title-row{display:flex; align-items:center; gap:8px; margin-bottom:2px; flex-wrap:wrap;}
.job-client{font-weight:700; font-size:13.5px;}
.job-type-tag{
  font-family:var(--font-mono);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  background:var(--paper-sunken);
  padding:2px 7px;
  border-radius:5px;
  font-weight:600;
}
.job-meta{font-size:11.5px; color:var(--ink-faint); display:flex; gap:8px; flex-wrap:wrap;}
.job-reimb-row{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px;}
.job-reimb-chip{
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  padding:2px 7px; border-radius:5px;
  background:var(--blue-soft); color:var(--blue);
}
.job-reimb-chip.is-reimbursed{background:var(--green-soft); color:var(--green);}
.job-reimb-chip.is-pending-amount{background:var(--paper-sunken); color:var(--ink-faint);}
.job-amounts{text-align:right; flex:none;}
.job-amounts .amt{font-family:var(--font-mono); font-weight:700; font-size:14px;}
.job-amounts .amt-sub{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint);}
.status-pill{
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:4px 9px;
  border-radius:999px;
  flex:none;
  white-space:nowrap;
}
.status-pill.st-cobrado{background:var(--green-soft); color:var(--green);}
.status-pill.st-pendiente{background:var(--amber-soft); color:var(--amber);}
.status-pill.st-factura{background:var(--blue-soft); color:var(--blue);}
.status-pill.st-confirmado{background:var(--blue-soft); color:var(--blue);}
.status-pill.st-opcion{background:var(--grey-soft); color:var(--grey);}
.status-pill.st-cancelado{background:var(--grey-soft); color:var(--ink-faint); text-decoration:line-through;}

.empty-state{
  text-align:center;
  padding:50px 20px;
  color:var(--ink-faint);
  border:1px dashed var(--line);
  border-radius:var(--radius);
}
.empty-state .es-icon{font-family:var(--font-display); font-size:30px; margin-bottom:8px; color:var(--ink-faint);}
.empty-state p{font-size:13px; max-width:280px; margin:6px auto 0 auto;}

/* ============ AGENCY CARDS ============ */
.agency-grid{grid-template-columns:repeat(3,1fr);}
.agency-card{
  border:1px solid var(--line);
  background:var(--paper-raised);
  border-radius:var(--radius-l);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  transition:all .15s ease;
  position:relative;
}
.agency-card:hover{border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.agency-head{display:flex; align-items:center; gap:10px;}
.agency-avatar{
  width:42px;height:42px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  flex:none;
  color:var(--accent-ink);
}
.agency-name{font-weight:700; font-size:15px;}
.agency-country{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em;}
.agency-stats{display:flex; gap:14px; margin-top:4px;}
.agency-stat{flex:1;}
.agency-stat .as-label{font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint); text-transform:uppercase;}
.agency-stat .as-val{font-family:var(--font-mono); font-weight:700; font-size:14px; margin-top:2px;}
.chip-row{display:flex; gap:5px; flex-wrap:wrap; margin-top:2px;}
.mini-chip{
  font-size:10.5px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--paper-sunken);
  color:var(--ink-soft);
  font-weight:600;
}
.cur-chip{
  border:1px solid var(--line);
  font-family:var(--font-mono);
  transition:all .12s ease;
}
.cur-chip input{ position:absolute; opacity:0; width:0; height:0; }
.cur-chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.curr-rates-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.curr-rates-head .btn svg{width:12px;height:12px;}
.curr-rates-table{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-sunken);
}
.curr-rate-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--line-soft); font-size:12.5px;
}
.curr-rate-row:last-child{border-bottom:none;}
.curr-rate-row .cr-code{font-family:var(--font-mono); font-weight:700; width:44px; flex:none;}
.curr-rate-row .cr-eq{color:var(--ink-faint); flex:1;}
.curr-rate-row .cr-val{font-family:var(--font-mono); font-weight:600;}

/* ============ MODAL / FORM ============ */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(20,18,15,0.5);
  backdrop-filter:blur(2px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  z-index:100;
  padding:30px 16px;
  overflow-y:auto;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--paper-raised);
  border-radius:var(--radius-l);
  width:100%;
  max-width:560px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  margin:auto 0;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px 14px 22px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  margin:0;
}
.modal-body{padding:18px 22px; max-height:65vh; overflow-y:auto;}
.modal-foot{
  padding:16px 22px 20px 22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.close-x{
  width:30px;height:30px;
  border-radius:50%;
  border:none;
  background:var(--paper-sunken);
  color:var(--ink-soft);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.close-x:hover{background:var(--danger-soft); color:var(--danger);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.f-field{display:flex; flex-direction:column; gap:5px;}
.f-field.full{grid-column:1/-1;}
.f-field label{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  font-weight:600;
}
.f-field input, .f-field select, .f-field textarea{
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:9px;
  padding:9px 11px;
  font-size:13px;
  width:100%;
}
.f-field textarea{resize:vertical; min-height:56px; font-family:var(--font-body);}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent);}
.amount-row{display:flex; gap:8px;}
.amount-row select{flex:0 0 78px;}
.calc-preview{
  margin-top:6px;
  background:var(--paper-sunken);
  border-radius:var(--radius);
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.calc-item{display:flex; flex-direction:column; gap:2px;}
.calc-item .ci-label{font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--ink-faint);}
.calc-item .ci-val{font-family:var(--font-mono); font-weight:700; font-size:14px;}
.calc-item.highlight .ci-val{color:var(--green);}
.helper-text{font-size:11px; color:var(--ink-faint); margin-top:8px; line-height:1.5;}
.legal-text h4{font-size:13px; font-weight:700; margin:16px 0 6px 0;}
.legal-text h4:first-child{margin-top:0;}
.legal-text p{font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 4px 0;}
.legal-text hr{border:none; border-top:1px solid var(--line); margin:16px 0;}
.legal-link{background:none; border:none; padding:0; color:var(--ink); font-weight:600; font-size:inherit; font-family:inherit; text-decoration:underline; cursor:pointer;}
.app-footer-links{text-align:center; padding:14px 0 6px 0; font-size:12px; color:var(--ink-faint); line-height:2;}
.app-footer-links a{color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;}
.app-footer-links a:hover{color:var(--ink);}
.app-footer-links button{background:none; border:none; padding:0; color:var(--ink-faint); font-size:inherit; font-family:inherit; text-decoration:underline; cursor:pointer;}

/* chips for multi-value bookers input */
.token-input{
  border:1px solid var(--line);
  border-radius:9px;
  padding:6px 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  background:var(--paper);
}
.token{
  background:var(--paper-sunken);
  border-radius:999px;
  padding:4px 6px 4px 10px;
  font-size:11.5px;
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:600;
}
.token button{border:none; background:transparent; cursor:pointer; color:var(--ink-faint); font-size:13px; line-height:1; padding:2px;}
.token-input input{border:none; outline:none; background:transparent; flex:1; min-width:80px; font-size:12.5px; padding:4px;}

.expense-cats-block{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.expense-cats-block > label{
  font-size:13px; font-weight:700; color:var(--ink); line-height:1.4; display:block;
}
.workdates-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin-top:6px;}
.workdate-row{display:flex; flex-direction:column; gap:4px;}
.workdate-row label{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); font-weight:700;}
.installments-block{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.installment-row{
  display:flex; align-items:center; gap:7px;
  padding:8px 0; border-bottom:1px solid var(--line-soft);
}
.installment-row:first-child{padding-top:0;}
.inst-sum{margin-top:8px;}
.inst-sum.warn{color:var(--danger, #A3412F); font-weight:500;}
.installment-row .inst-label{flex:1.3; min-width:0; border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:7px 9px; font-size:12.5px; color:var(--ink);}
.installment-row .inst-amount{flex:0.8; min-width:0; border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:7px 9px; font-size:12.5px; color:var(--ink);}
.installment-row .inst-date{flex:1; min-width:0; border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:7px 9px; font-size:12px; color:var(--ink);}
.inst-collected-check{
  display:flex; align-items:center; gap:4px; flex:none;
  font-size:10.5px; color:var(--ink-faint); font-weight:600; white-space:nowrap;
}
.inst-collected-check input{width:13px; height:13px; accent-color:var(--green); cursor:pointer;}
.inst-remove{border:none; background:transparent; color:var(--ink-faint); cursor:pointer; flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:6px;}
.inst-remove:hover{color:var(--danger); background:var(--danger-soft);}
.inst-remove svg{width:12px;height:12px;}

/* ============ COBROS TABLE ============ */
.cobros-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.cobros-table th{
  text-align:left;
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:600;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.cobros-table td{
  padding:10px 10px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono);
  white-space:nowrap;
}
.cobros-table tr:last-child td{border-bottom:none;}
.cobros-table td.month-cell{font-family:var(--font-body); font-weight:700; text-transform:capitalize;}
.table-scroll{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper-raised);}
.table-scroll .cobros-table{margin:0;}
.table-scroll th:first-child, .table-scroll td:first-child{padding-left:16px;}

.upcoming-item{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.upcoming-item:last-child{border-bottom:none;}
.upcoming-date{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  width:58px;
  flex:none;
  color:var(--ink-soft);
  text-align:center;
  background:var(--paper-sunken);
  border-radius:8px;
  padding:6px 4px;
}
.upcoming-date.overdue{background:var(--danger-soft); color:var(--danger);}
.upcoming-date.soon{background:var(--amber-soft); color:var(--amber);}
.upcoming-info{flex:1; min-width:0;}
.upcoming-info .ui-name{font-weight:700; font-size:12.5px;}
.upcoming-info .ui-sub{font-size:10.5px; color:var(--ink-faint);}
.upcoming-amt{font-family:var(--font-mono); font-weight:700; font-size:13px; flex:none;}
.inst-tag{
  font-family:var(--font-mono); font-size:9.5px; font-weight:600; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); padding:1px 6px; border-radius:5px; letter-spacing:0.02em;
}
.mark-collected-btn{color:var(--ink-faint); border-color:var(--line);}
.mark-collected-btn:hover{color:var(--green); border-color:var(--green); background:var(--green-soft);}

/* ---- ¿trabajaste esto? banner ---- */
.confirm-work-banner{
  display:flex; gap:14px;
  padding:14px 16px;
  border-radius:var(--radius-l);
  border:1.5px solid var(--blue);
  background:var(--blue-soft);
  margin-bottom:20px;
}
.cwb-icon{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-raised); color:var(--blue);
}
.cwb-icon svg{width:17px;height:17px;}
.cwb-list{flex:1; display:flex; flex-direction:column; gap:10px;}
.cwb-item{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.cwb-q{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--blue); font-weight:700;}
.cwb-name{font-size:13px; font-weight:700; margin-top:1px;}
.cwb-actions{display:flex; gap:6px; flex:none;}

/* ---- recordatorio de mañana (calendario nativo) ---- */
.reminder-banner{
  display:flex; gap:14px;
  padding:14px 16px;
  border-radius:var(--radius-l);
  border:1.5px solid var(--gold);
  background:var(--gold-soft);
  margin-bottom:20px;
}
.reminder-banner .cwb-q{color:var(--gold);}

/* ============ CALENDARIO NATIVO ============ */
.cal-notif-prompt{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--blue-soft); border:1.5px solid var(--blue);
  border-radius:var(--radius-l); padding:14px 16px; margin-bottom:16px;
}
.cal-notif-text strong{font-size:13px; display:block; margin-bottom:2px;}
.cal-notif-text p{margin:0; font-size:11.5px; color:var(--ink-soft);}
.cal-legend{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px;}
.cal-legend-item{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); font-weight:600;}
.cal-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:start;}
.cal-card{padding:18px;}
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.cal-month-title{font-family:var(--font-display); font-size:18px; font-weight:600; text-transform:capitalize;}
.cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ink-faint); font-weight:700;
  text-align:center; padding:8px 0 6px 0;
}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.cal-day{
  background:var(--paper-raised); min-height:64px; padding:6px;
  cursor:pointer; transition:background .12s ease;
  display:flex; flex-direction:column; gap:4px;
}
.cal-day:hover{background:var(--paper-sunken);}
.cal-day.other-month{opacity:0.35;}
.cal-day.is-today .cal-daynum{
  background:var(--ink); color:var(--paper); border-radius:50%;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
}
.cal-day.is-selected{background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent);}
.cal-daynum{font-family:var(--font-mono); font-size:11.5px; font-weight:700;}
.cal-dots{display:flex; gap:3px; flex-wrap:wrap; align-items:center;}
.cal-dot{width:6px; height:6px; border-radius:50%; flex:none;}
.cal-extra{font-family:var(--font-mono); font-size:8.5px; color:var(--ink-faint); font-weight:700;}
.cal-detail{padding:18px; max-height:520px; overflow-y:auto;}
.cal-event-row{display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft);}
.cal-event-row:last-child{border-bottom:none;}
.cal-event-info{flex:1; min-width:0;}
.cal-event-title{font-size:13px; font-weight:700;}
.cal-event-sub{font-size:11px; color:var(--ink-faint); margin-top:1px;}
.cal-event-notes{font-size:11px; color:var(--ink-soft); margin-top:5px; background:var(--paper-sunken); border-radius:8px; padding:7px 9px; line-height:1.5;}
.cal-event-actions{display:flex; flex-direction:column; gap:4px; flex:none;}
.cal-event-actions .icon-btn{width:26px; height:26px;}
.cal-event-actions .icon-btn svg{width:12px;height:12px;}
@media (max-width:860px){
  .cal-layout{grid-template-columns:1fr;}
  .cal-day{min-height:44px; padding:4px;}
}

/* ---- próximo cobro banner (light, clear colors) ---- */
.next-cobro-banner{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border-radius:var(--radius-l);
  border:1.5px solid var(--line);
  margin-bottom:4px;
}
.next-cobro-banner.is-ok{background:var(--green-soft); border-color:var(--green);}
.next-cobro-banner.is-soon{background:var(--amber-soft); border-color:var(--amber);}
.next-cobro-banner.is-overdue{background:var(--danger-soft); border-color:var(--danger);}
.ncb-icon{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-raised);
}
.next-cobro-banner.is-ok .ncb-icon{color:var(--green);}
.next-cobro-banner.is-soon .ncb-icon{color:var(--amber);}
.next-cobro-banner.is-overdue .ncb-icon{color:var(--danger);}
.ncb-icon svg{width:19px;height:19px;}
.ncb-info{flex:1; min-width:0;}
.ncb-label{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; opacity:0.75;}
.ncb-main{font-family:var(--font-display); font-size:16.5px; font-weight:600; margin-top:2px;}
.ncb-sub{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}

/* ---- light-tinted KPI variants ---- */
.kpi-green{background:var(--green-soft); border-color:var(--green);}
.kpi-amber{background:var(--amber-soft); border-color:var(--amber);}
.kpi-red{background:var(--danger-soft); border-color:var(--danger);}

/* ---- table row tints + mini pills ---- */
.cobros-table tr.row-green td{background:var(--green-soft);}
.cobros-table tr.row-amber td{background:var(--amber-soft);}
.mini-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; padding:1px 7px; border-radius:999px;
  font-family:var(--font-mono); font-weight:700; font-size:11px;
}
.mini-pill-green{background:var(--green); color:var(--paper-raised);}
.mini-pill-amber{background:var(--amber); color:var(--paper-raised);}

/* ---- expandable month breakdown ---- */
.month-row{cursor:pointer; transition:background .12s ease;}
.month-row:hover td{background:var(--paper-sunken);}
.month-row.row-green:hover td{background:var(--green-soft);}
.month-row.row-amber:hover td{background:var(--amber-soft);}
.month-chevron{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-right:5px;
  color:var(--ink-faint);
  transition:transform .15s ease;
}
.month-chevron svg{width:11px;height:11px;}
.month-row.expanded .month-chevron{transform:rotate(90deg); color:var(--ink);}
.month-detail-row td{padding:0 !important; border-bottom:1px solid var(--line-soft);}
.month-breakdown{padding:6px 16px 12px 16px; background:var(--paper-sunken);}
.mb-group-label{
  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em;
  font-weight:700; padding:8px 4px 4px 4px;
}
.mb-group-green{color:var(--green);}
.mb-group-amber{color:var(--amber);}
.mb-item{
  display:flex; align-items:center; gap:10px;
  padding:6px 4px;
  border-bottom:1px solid var(--line-soft);
}
.mb-item:last-child{border-bottom:none;}
.mb-date{
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--ink-soft);
  width:42px; flex:none; text-align:center;
}
.mb-info{flex:1; min-width:0;}
.mb-name{font-size:12px; font-weight:600;}
.mb-sub{font-size:10px; color:var(--ink-faint);}
.mb-amt{font-family:var(--font-mono); font-weight:700; font-size:12px; flex:none;}
.mb-check{color:var(--green); display:flex; align-items:center; flex:none;}
.mb-check svg{width:15px;height:15px;}

/* ============ EXPENSES ============ */
.expense-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); margin-bottom:8px;}
.expense-icon{width:32px;height:32px;border-radius:8px; background:var(--paper-sunken); display:flex;align-items:center;justify-content:center; flex:none; font-size:14px;}
.expense-info{flex:1; min-width:0;}
.expense-info .e-name{font-weight:700; font-size:13px;}
.expense-info .e-sub{font-size:10.5px; color:var(--ink-faint); font-family:var(--font-mono);}
.expense-amt{font-family:var(--font-mono); font-weight:700; font-size:13.5px;}

/* ============ TOAST ============ */
.toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  box-shadow:var(--shadow-lg);
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:all .25s ease;
  display:flex;
  align-items:center;
  gap:8px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast .t-dot{width:7px;height:7px;border-radius:50%; background:var(--green); flex:none;}

.rates-pop .form-grid{grid-template-columns:1fr;}

/* ============ ABOUT / QUÉ ES ============ */
.about-hero{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:20px 22px;
  margin-bottom:6px;
}
.about-hero-icon{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.about-hero-icon svg{width:22px;height:22px;}
.about-hero-text{font-size:14px; line-height:1.6; color:var(--ink); margin:2px 0 0 0;}

.about-feature{display:flex; flex-direction:column; gap:8px;}
.af-icon{
  width:36px; height:36px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.af-icon svg{width:18px;height:18px;}
.af-title{font-family:var(--font-display); font-size:15px; font-weight:600;}
.af-text{font-size:12px; line-height:1.55; color:var(--ink-soft);}

.about-steps{display:flex; flex-direction:column; gap:2px;}
.about-step{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:8px;
}
.as-num{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:12.5px;
}
.as-title{font-weight:700; font-size:13.5px; margin-bottom:2px;}
.as-text{font-size:12px; color:var(--ink-soft); line-height:1.5;}

.about-footnote{
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--paper-sunken);
}
.about-footnote p{font-size:11.5px; color:var(--ink-faint); line-height:1.6; margin:0;}

/* ============ ADMIN ============ */
.admin-prof-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 4px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px; font-weight:600; cursor:pointer;
}
.admin-prof-row:last-child{border-bottom:none;}
.admin-prof-row input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer;}

/* ---- panel de estadísticas de Admin ---- */
.admin-bar-chart{display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:8px;}
.admin-bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; height:100%;}
.admin-bar-col span{font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--ink-soft);}
.admin-bar-col small{font-family:var(--font-mono); font-size:8.5px; color:var(--ink-faint);}
.admin-bar{width:100%; max-width:22px; background:var(--accent); border-radius:3px 3px 0 0; min-height:4px;}
.admin-table{width:100%; border-collapse:collapse; font-size:12px;}
.admin-table th{
  text-align:left; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-faint); font-weight:700; padding:8px 10px; border-bottom:1.5px solid var(--line); white-space:nowrap;
}
.admin-table td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
.admin-table-sub{font-size:10.5px; color:var(--ink-faint);}
.admin-pagination{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; font-size:12.5px; font-weight:600;}
.result-rows{display:flex; flex-direction:column;}
.result-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px;}
.result-row span:first-child{color:var(--ink-soft);}
.result-row span:last-child{font-family:var(--font-mono); font-weight:600;}
.result-total{border-bottom:none; border-top:1.5px solid var(--line); margin-top:4px; padding-top:12px; font-size:15px; font-weight:700;}
.result-total span:last-child{color:var(--green); font-weight:700;}
.referral-link-row{display:flex; gap:8px;}
.referral-link-row input{
  flex:1; border:1px solid var(--line); border-radius:var(--radius-s); padding:9px 12px;
  font-family:var(--font-mono); font-size:12px; background:var(--paper-sunken); color:var(--ink-soft);
}
/* ---- vista pública de disponibilidad (sin login) ---- */
.pub-page{max-width:640px; margin:0 auto; padding:32px 20px 60px 20px;}
.pub-header{text-align:center; margin-bottom:28px;}
.pub-status{width:100%; height:6px; border-radius:4px; margin-top:5px;}
.pub-status.free{background:var(--green);}
.pub-status.option{background:var(--amber);}
.pub-status.busy{background:var(--danger);}
.pub-legend{display:flex; justify-content:center; gap:20px; margin-bottom:24px; font-size:12.5px; font-weight:600;}
.pub-legend-item{display:flex; align-items:center; gap:6px;}
.pub-legend-dot{width:10px; height:10px; border-radius:3px;}
@media (max-width:860px){
  .admin-bar-chart{height:90px;}
}

/* ============ AUTH SCREEN ============ */
.main.auth-mode{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 140px);
  padding-top:30px;
  padding-bottom:30px;
}
.auth-card{
  width:100%;
  max-width:380px;
  text-align:center;
}
.auth-brand{display:flex; justify-content:center; margin-bottom:6px;}
.auth-brand .os-word{font-size:30px;}
.pub-header .auth-brand{margin:0 auto 6px auto;}
.auth-slogan{
  font-size:13px;
  color:var(--ink-soft);
  margin:6px 0 0 0;
  font-style:italic;
}
.auth-seg{display:inline-flex; margin:22px auto 22px auto;}
.auth-seg button{padding:8px 16px;}
.lang-choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;}
.lang-choice-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:22px 10px;
  border:1.5px solid var(--line); border-radius:var(--radius-l);
  background:var(--paper-raised); cursor:pointer; font-family:inherit;
  transition:all .15s ease;
}
.lang-choice-card:hover{border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px);}
.lang-choice-flag{font-size:30px; line-height:1;}
.lang-choice-label{font-size:13.5px; font-weight:700;}
.auth-note{
  background:var(--amber-soft); color:var(--amber);
  border-radius:var(--radius-s); padding:9px 14px; font-size:11.5px; font-weight:600;
  margin-bottom:14px; text-align:left; line-height:1.5;
}
.auth-error{
  background:var(--danger-soft);
  color:var(--danger);
  border-radius:var(--radius-s);
  padding:9px 14px;
  font-size:12.5px;
  font-weight:600;
  margin-bottom:16px;
  text-align:left;
}
.auth-form{display:flex; flex-direction:column; gap:12px; text-align:left;}
.auth-form .f-field input, .auth-form .f-field select{width:100%;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:38px !important;}
.pw-toggle{
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:var(--ink-faint);
  cursor:pointer;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
}
.pw-toggle:hover{color:var(--ink);}
.pw-toggle svg{width:15px;height:15px;}
.auth-row-between{display:flex; align-items:center; justify-content:space-between; font-size:12px;}
.check-row{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); cursor:pointer;}
.check-row input{width:14px; height:14px; accent-color:var(--accent); cursor:pointer;}
.link-btn{
  border:none; background:transparent; color:var(--accent); font-weight:600;
  cursor:pointer; font-size:inherit; padding:0; text-decoration:underline;
}
.prof-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.prof-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper-raised);
  cursor:pointer;
  font-family:inherit;
  transition:all .15s ease;
}
.prof-card:hover{border-color:var(--ink-faint);}
.prof-card.active{border-color:var(--accent); background:var(--accent-soft);}
.prof-icon{font-size:22px; line-height:1;}
.prof-label{font-size:12px; font-weight:700; color:var(--ink);}
.auth-foot-text{margin-top:18px; font-size:12.5px; color:var(--ink-soft);}
.auth-helper{font-size:11px; color:var(--ink-faint); margin-top:14px; line-height:1.5;}
.onb-progress{display:flex; justify-content:center; gap:6px; margin-bottom:18px;}
.onb-dot{width:22px; height:4px; border-radius:999px; background:var(--line);}
.onb-dot.active{background:var(--accent);}
.onb-agency-list{display:flex; flex-direction:column; gap:8px;}
.onb-agency-chip{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-raised); font-size:13px; font-weight:600; text-align:left;
}
.prof-card.compact{padding:10px 6px;}

/* ============ RESPONSIVE — layout adapts to the real device automatically ============ */
@media (max-width: 860px){
  :root{--tabbar-h:62px;}
  .topbar{ padding:16px 18px 12px 18px; }
  .brand{font-size:16px;}
  .notif-panel{width:260px; right:-6px;}
  .sidenav{display:none;}
  .main{padding:16px 16px 90px 16px;}
  .topnav:not(:empty){display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:1px; position:fixed; left:0; right:0; bottom:0; z-index:40; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px)); padding:6px 4px calc(env(safe-area-inset-bottom,0px) + 6px) 4px; border-top:1px solid var(--line); background:var(--paper-raised); box-shadow:0 -4px 16px rgba(20,12,8,0.06);}
  .topnav button{min-height:0; padding:4px 0; gap:3px; font-size:9.5px; letter-spacing:-0.015em;}
  .topnav button span{text-overflow:clip;}
  .topnav.nav-dense button{font-size:8.5px; letter-spacing:-0.02em;}
  .topnav button svg{width:20px; height:20px; flex:none;}
  .page-head{align-items:flex-start; flex-direction:column; gap:10px;}
  h1.page-title{font-size:24px;}
  .kpi-grid{grid-template-columns:1fr 1fr !important;}
  .panel-row{grid-template-columns:1fr !important;}
  .agency-grid{grid-template-columns:1fr !important;}
  .ncb-main{font-size:14px;}
  .about-hero{flex-direction:column;}
  #aboutFeatureGrid{grid-template-columns:1fr !important;}
  .main.auth-mode{min-height:calc(100% - 40px); align-items:flex-start; padding-top:26px;}
  .prof-grid{grid-template-columns:1fr !important;}
}

/* ============ ACCESSIBILITY + LAYOUT FIXES (v1.1) ============ */
.skip-link{position:absolute; left:12px; top:-60px; z-index:300; background:var(--ink); color:var(--paper); padding:10px 14px; border-radius:10px; font-weight:700; font-size:13px; text-decoration:none;}
.skip-link:focus{top:12px;}
:where(button, a, input, select, textarea, [tabindex]):focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.navlink, .icon-btn, .btn{-webkit-tap-highlight-color:transparent;}
img{max-width:100%; height:auto;}
.main{scroll-padding-top:80px;}
.kpi-grid{grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));}
.kpi .kpi-value{overflow-wrap:anywhere;}
.check-row{align-items:flex-start; line-height:1.45;}
.check-row input{margin-top:2px; flex:none;}
.topbar{padding-top:calc(env(safe-area-inset-top, 0px) + 16px);}
html, body{overflow-x:hidden;}
@supports (overflow:clip){ html, body{overflow-x:clip;} } /* clip keeps the header sticky; hidden would break it */
.job-row{flex-wrap:wrap;}
.job-main{min-width:180px;}

/* sidebar sticky on desktop so the menu never scrolls away */
@media (min-width: 861px){
  .sidenav{position:sticky; top:73px; align-self:flex-start; height:calc(100vh - 73px); overflow-y:auto;}
}
@media (min-width: 861px) and (max-width: 1100px){
  .panel-row{grid-template-columns:1fr;}
  .agency-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 860px){
  .os-word{font-size:17px;}
  .topbar{padding-left:16px; padding-right:16px;}
  .topbar-actions{gap:6px;}
  .icon-btn{width:40px; height:40px;}
  .form-grid{grid-template-columns:1fr;}
  .modal-backdrop{padding:0; align-items:flex-end;}
  .modal{max-width:100% !important; border-radius:22px 22px 0 0; margin:0; max-height:92vh; display:flex; flex-direction:column;}
  .modal-body{max-height:none; flex:1; overflow-y:auto;}
  .modal-foot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px); flex-wrap:wrap;}
  .modal-foot > div{flex-wrap:wrap;}
  .calc-preview{grid-template-columns:1fr 1fr;}
  .installment-row{flex-wrap:wrap;}
  .installment-row .inst-label{flex:1 1 100%;}
  .installment-row .inst-amount, .installment-row .inst-date{flex:1 1 40%;}
  .job-row{gap:10px; padding:12px;}
  .job-amounts{margin-left:auto;}
  .filters .chip-select{flex:1 1 45%;}
  .search-input{flex:1 1 100%;}
  .cwb-item{align-items:flex-start;}
  .notif-panel{position:fixed; top:64px; left:12px; right:12px; width:auto;}
  .cal-day{min-height:46px;}
  .expense-row{flex-wrap:wrap;}
  .upcoming-item{flex-wrap:nowrap;}
  /* el final de cada pestaña queda arriba de la barra de abajo y del botón + */
  .main, #main{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--tabbar-h) + 96px);}
  .install-btn{height:40px; padding:0 12px;}
  .toast{bottom:calc(env(safe-area-inset-bottom,0px) + var(--tabbar-h) + 12px); max-width:calc(100% - 32px); white-space:normal; text-align:center; border-radius:16px;}
}
@media (max-width: 380px){
  .kpi-grid{grid-template-columns:1fr !important;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}
@media (max-width: 860px){
  .kpi-grid > .kpi:last-child:nth-child(odd){grid-column:1 / -1;}
}
.sidenav:empty{display:none;}
.auth-lang{display:flex; justify-content:center; margin-top:8px;}
.lang-chooser-title{font-family:'Jost',sans-serif; font-weight:500; font-size:20px; margin:18px 0 16px;}
.lang-choices{display:flex; flex-direction:column; gap:8px;}
.lang-select{border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); border-radius:999px; padding:8px 14px; font-size:13px; font-family:inherit; min-height:40px;}

/* ============ ONBOARDING + PRIMEROS PASOS (v1.2) ============ */
.onb-card{max-width:460px;}
.onb-title{text-align:center; font-size:24px; margin-top:6px;}
.onb-sub{text-align:center; margin:6px auto 20px auto; max-width:360px;}
.onb-steps-list{list-style:none; margin:0 0 22px 0; padding:0; display:grid; gap:10px; text-align:left; counter-reset:onb;}
.onb-steps-list li{display:flex; flex-direction:column; gap:2px; padding:12px 14px 12px 52px; position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); counter-increment:onb;}
.onb-steps-list li::before{content:counter(onb); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.onb-steps-list strong{font-size:14px;}
.onb-steps-list span{font-size:12.5px; color:var(--ink-soft);}
.onb-more{border:1px dashed var(--line); border-radius:var(--radius); padding:10px 12px;}
.onb-more summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft);}
.onb-more[open] summary{margin-bottom:10px;}
.onb-more .f-field{margin-top:10px;}
.onb-seg{display:flex; width:100%; margin-bottom:4px;}
.onb-seg button{flex:1; justify-content:center; padding:10px 8px; font-size:12.5px;}
.onb-skip{background:transparent; border:none; color:var(--ink-soft); margin-top:2px;}
.getting-started{margin-bottom:20px;}
.gs-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.gs-bar{height:6px; border-radius:6px; background:var(--paper-sunken); margin:12px 0 10px 0; overflow:hidden;}
.gs-bar span{display:block; height:100%; background:var(--on); border-radius:6px; transition:width .4s ease;}
.gs-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:8px;}
.gs-list li{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line-soft); border-radius:12px; font-size:13px;}
.gs-list li.is-done{color:var(--ink-faint); text-decoration:line-through;}
.gs-check{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; color:var(--paper);}
.gs-list li.is-done .gs-check{background:var(--green); border-color:var(--green);}
.gs-check svg{width:12px; height:12px;}
.gs-go{background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; text-decoration:underline; text-underline-offset:3px; min-height:24px;}
.toast.celebrate{background:var(--accent); color:var(--accent-ink); animation:onset-pop .5s ease;}
@keyframes onset-pop{0%{transform:translateX(-50%) scale(.9);} 60%{transform:translateX(-50%) scale(1.04);} 100%{transform:translateX(-50%) scale(1);}}
.onb-wrap{display:flex; flex-direction:column; align-items:center; width:100%;}
.onb-wrap > .auth-card{width:100%;}

/* ======================= v1.5: quick add, suggestions, feature switches, admin ======================= */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft); vertical-align:middle;}
.panel-row > :only-child{grid-column:1 / -1;}

/* quick add (+) */
.quick-add{position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.qa-fab{width:56px; height:56px; border-radius:50%; border:none; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); cursor:pointer; transition:transform .15s ease;}
.qa-fab svg{width:24px; height:24px;}
.qa-fab:hover{transform:translateY(-1px);}
.quick-add.open .qa-fab svg{transform:rotate(45deg); transition:transform .15s ease;}
.qa-fab.is-off{outline:2px dashed var(--danger); outline-offset:3px;}
.qa-menu{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:6px; min-width:210px; display:flex; flex-direction:column;}
.qa-menu[hidden]{display:none;}
.qa-menu button{all:unset; box-sizing:border-box; display:block; padding:11px 14px; border-radius:var(--radius-s); font-size:14px; font-weight:600; color:var(--ink); cursor:pointer;}
.qa-menu button:hover, .qa-menu button:focus-visible{background:var(--paper-sunken);}
@media (max-width: 860px){
  .quick-add{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); right:16px;}
  .qa-fab{width:52px; height:52px;}
}
@media (prefers-reduced-motion: reduce){ .qa-fab, .quick-add.open .qa-fab svg{transition:none;} }

/* suggestions */
.nav-feedback{font-size:12px; padding:0; margin-bottom:8px;}
.fb-form{display:flex; flex-direction:column; gap:14px;}
.fb-mine{margin-top:16px; border-top:1px solid var(--line-soft); padding-top:12px;}
.fb-mine-title{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px;}
.fb-mine-row{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid var(--line-soft);}
.fb-mine-row:last-child{border-bottom:none;}
.fb-mine-text{color:var(--ink-soft); min-width:0; overflow-wrap:anywhere;}

/* feature switches as the admin sees them */
.ff-off{position:relative; outline:2px dashed var(--danger); outline-offset:4px; border-radius:var(--radius); margin:6px 0 18px; opacity:.85;}
.ff-badge{position:absolute; top:-12px; right:10px; z-index:2; background:var(--danger); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;}
.ff-tab-banner{background:var(--danger-soft); color:var(--ink); border:1px solid var(--danger); border-radius:var(--radius); padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:16px;}
.navlink.is-off span:first-of-type{opacity:.6;}
.ff-dot{width:8px; height:8px; border-radius:50%; background:var(--danger); margin-left:auto; flex:0 0 auto;}

/* ---------- admin ---------- */
.admin-root{
  --viz-1:#7A4A2E; --viz-muted:#B9A795; --viz-grid:#EADFD0; --viz-base:#CDBBA6; --viz-ink:#6B5546;
  --viz-c1:#2a78d6; --viz-c2:#eb6834; --viz-c3:#1baf7a; --viz-c4:#eda100; --viz-c5:#e87ba4; --viz-c6:#4a3aa7;
  --heat-0:#f3ece2; --heat-1:#cde2fb; --heat-2:#9ec5f4; --heat-3:#6da7ec; --heat-4:#3987e5; --heat-5:#256abf; --heat-6:#184f95;
  --good:#006300; --bad:#A8432F;
}
html.dark .admin-root{
  --viz-1:#D7A77C; --viz-muted:#6E5D4F; --viz-grid:#2E231C; --viz-base:#4A3A2E; --viz-ink:#BFAE9C;
  --viz-c1:#3987e5; --viz-c2:#d95926; --viz-c3:#199e70; --viz-c4:#c98500; --viz-c5:#d55181; --viz-c6:#9085e9;
  --heat-0:#2B221C; --heat-1:#104281; --heat-2:#184f95; --heat-3:#1c5cab; --heat-4:#256abf; --heat-5:#2a78d6; --heat-6:#3987e5;
  --good:#0ca30c; --bad:#E8836D;
}
.ad-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin:4px 0 18px; scrollbar-width:thin;}
.ad-tab{flex:0 0 auto; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); font:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;}
.ad-tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.ad-badge{display:inline-block; min-width:18px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; line-height:18px; text-align:center; margin-left:4px;}
.ad-h2{font-family:var(--font-display); font-size:16px; font-weight:600; margin:22px 0 10px; color:var(--ink);}
.ad-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:8px;}
.ad-tile{padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0;}
.ad-tile-label{font-size:12px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}
.ad-tile-value{font-family:var(--font-display); font-size:28px; font-weight:600; line-height:1.1; color:var(--ink);}
.ad-tile-sub{font-size:12px; color:var(--ink-faint);}
.ad-delta{font-size:12px; color:var(--ink-faint);}
.ad-delta.is-good{color:var(--good);}
.ad-delta.is-bad{color:var(--bad);}
.ad-spark{margin-top:4px; max-width:100%;}
.ad-hint{all:unset; cursor:help; width:16px; height:16px; border-radius:50%; border:1px solid var(--line); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint);}
.ad-insights ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.ad-ins{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45;}
.ad-ins-icon{flex:0 0 22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--paper-sunken); color:var(--ink-soft);}
.ad-ins-good .ad-ins-icon{background:var(--green-soft); color:var(--green);}
.ad-ins-bad .ad-ins-icon{background:var(--danger-soft); color:var(--danger);}
.ad-ins-warn .ad-ins-icon{background:var(--amber-soft); color:var(--amber);}
.ad-filter-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:18px 0 12px;}
.ad-filter-label{font-size:12px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-right:4px;}
.chip-btn{border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); font:inherit; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; cursor:pointer;}
.chip-btn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.ad-grid2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;}
.ad-chart{margin:8px 0 0;}
.ad-svg{width:100%; height:auto; display:block; overflow:visible;}
.ad-grid{stroke:var(--viz-grid); stroke-width:1; vector-effect:non-scaling-stroke;}
.ad-base{stroke:var(--viz-base); stroke-width:1; vector-effect:non-scaling-stroke;}
.ad-axis{fill:var(--ink-faint); font-size:11px; font-family:var(--font-body); font-variant-numeric:tabular-nums;}
.ad-val{fill:var(--ink); font-size:11px; font-weight:700; font-family:var(--font-body);}
.ad-cross{stroke:var(--viz-ink); stroke-width:1; vector-effect:non-scaling-stroke;}
.ad-hit{cursor:default; outline:none;}
.ad-hit:hover path, .ad-hit:focus path{opacity:.8;}
.ad-hit:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.ad-tip{position:fixed; z-index:200; pointer-events:none; background:var(--ink); color:var(--paper); font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; box-shadow:var(--shadow-md); max-width:260px;}
.ad-tip[hidden]{display:none;}
.ad-table-view{margin-top:8px; font-size:12px;}
.ad-table-view summary{cursor:pointer; color:var(--ink-faint); font-weight:600;}
.ad-table-view table{margin-top:8px;}
.ad-num td, .ad-num th{font-variant-numeric:tabular-nums;}
.ad-hbars{display:flex; flex-direction:column; gap:8px;}
.ad-hbar-row{display:grid; grid-template-columns:minmax(110px, 38%) 1fr auto; align-items:center; gap:10px; font-size:13px; padding:2px 0; border-radius:6px;}
.ad-hbar-label{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ad-hbar-track{height:10px; background:var(--paper-sunken); border-radius:4px; overflow:hidden;}
.ad-hbar-fill{display:block; height:100%; background:var(--viz-1); border-radius:0 4px 4px 0; min-width:2px;}
.ad-hbar-val{font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;}
.ad-hbar-val small{font-weight:500; color:var(--ink-faint); margin-left:4px;}
.ad-stack{display:flex; gap:2px; height:22px; border-radius:6px; overflow:hidden; margin:10px 0 12px;}
.ad-stack-seg{display:block; min-width:4px;}
.ad-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--ink-soft);}
.ad-legend b{color:var(--ink);}
.ad-legend small{color:var(--ink-faint);}
.ad-swatch{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle;}
.ad-cohorts td.ad-heat{text-align:center; font-weight:700;}
.ad-heat-0{background:var(--heat-0); color:var(--ink-soft);}
.ad-heat-1{background:var(--heat-1); color:#0d366b;}
.ad-heat-2{background:var(--heat-2); color:#0d366b;}
.ad-heat-3{background:var(--heat-3); color:#0b0b0b;}
.ad-heat-4{background:var(--heat-4); color:#fff;}
.ad-heat-5{background:var(--heat-5); color:#fff;}
.ad-heat-6{background:var(--heat-6); color:#fff;}
.ad-heat-na{color:var(--ink-faint);}
html.dark .ad-heat-1, html.dark .ad-heat-2, html.dark .ad-heat-3{color:#fff;}
.ad-users td{white-space:nowrap;}
.ad-sort{all:unset; cursor:pointer; font-weight:700;}
.ad-sort:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.ad-status{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft);}
.ad-status-active{background:var(--green-soft); color:var(--green);}
.ad-status-risk{background:var(--danger-soft); color:var(--danger);}
.ad-status-empty{background:var(--amber-soft); color:var(--amber);}
.ad-err summary{cursor:pointer; max-width:420px; white-space:normal;}
.ad-err-full{font-family:var(--font-mono); font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0;}
.ad-err-list{margin:6px 0 0; padding-left:18px; font-size:12px; color:var(--ink-soft);}
.ad-fb-list{display:flex; flex-direction:column; gap:12px;}
.ad-fb-head{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px;}
.ad-fb-msg{margin:0 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5;}
.ad-fb-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px;}
.ad-fb-thanks{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; font-size:13px;}
.ad-fb-note{flex:1 1 220px; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--paper); color:var(--ink); font:inherit; font-size:13px;}
.ad-ff-intro{margin-bottom:14px;}
.ad-ff-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; margin-bottom:90px;}
.ad-ff.is-off{border-color:var(--danger);}
.ad-ff-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px;}
.ad-ff-tab{border-bottom:1px solid var(--line-soft); padding-bottom:10px; margin-bottom:4px;}
.ad-ff-comps .ad-ff-row{font-size:13px; color:var(--ink-soft);}
.ad-switch{display:inline-flex; align-items:center; gap:8px; cursor:pointer; flex:0 0 auto;}
.ad-switch input{position:absolute; opacity:0; width:1px; height:1px;}
.ad-switch-ui{width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; transition:background .15s;}
.ad-switch-ui::after{content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s;}
.ad-switch input:checked + .ad-switch-ui{background:var(--green);}
.ad-switch input:checked + .ad-switch-ui::after{transform:translateX(16px);}
.ad-switch input:focus-visible + .ad-switch-ui{outline:2px solid var(--accent); outline-offset:2px;}
.ad-switch input:disabled + .ad-switch-ui{opacity:.4;}
.ad-switch.small .ad-switch-ui{width:32px; height:18px;}
.ad-switch.small .ad-switch-ui::after{width:12px; height:12px;}
.ad-switch.small input:checked + .ad-switch-ui::after{transform:translateX(14px);}
.ad-switch-text{font-size:12px; font-weight:600; color:var(--ink-faint); min-width:56px;}
.ad-ff-bar{position:sticky; bottom:12px; z-index:5; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:10px 14px; font-size:13px; font-weight:600;}
.ad-ff-bar.is-dirty{border-color:var(--accent);}
.ad-links{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:14px;}
@media (max-width: 860px){
  .ad-tile-value{font-size:24px;}
  .ad-grid2{grid-template-columns:1fr;}
  .ad-hbar-row{grid-template-columns:minmax(90px, 40%) 1fr auto;}
  .ad-ff-bar{bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion: reduce){ .ad-switch-ui, .ad-switch-ui::after{transition:none;} }

/* ======================= v1.6: per-tab improvements ======================= */
.stat-strip{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:18px;}
.card .stat-strip{margin-bottom:0;}
.ss-item{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; min-width:0;}
.card .ss-item{background:var(--paper); }
.ss-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.ss-value{font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); margin-top:2px; overflow-wrap:anywhere;}
.ss-sub{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.ss-warn{border-color:var(--danger); background:var(--danger-soft);}
.ss-amber{border-color:var(--amber);}
.delta-up{color:var(--green); font-weight:700;}
.delta-down{color:var(--danger); font-weight:700;}
.mini-bars{display:flex; flex-direction:column; gap:9px;}
.mb-row{display:grid; grid-template-columns:minmax(100px, 36%) 1fr auto; gap:10px; align-items:center; font-size:13px;}
.mb-label{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mb-track{height:9px; border-radius:4px; background:var(--paper-sunken); overflow:hidden;}
.mb-fill{display:block; height:100%; background:var(--accent); border-radius:0 4px 4px 0; min-width:2px;}
.mb-val{font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;}
.wa-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.wa-item{display:grid; grid-template-columns:92px auto 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px;}
.wa-item:last-child{border-bottom:none;}
.wa-day{font-weight:700; color:var(--ink); font-size:12px;}
.wa-kind{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft);}
.wa-job{background:var(--blue-soft); color:var(--blue);}
.wa-option{background:var(--grey-soft); color:var(--grey);}
.wa-payment{background:var(--amber-soft); color:var(--amber);}
.wa-main{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft);}
.wa-main strong{color:var(--ink);}
.agency-extra{margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:5px;}
.ae-row{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-soft);}
.ae-row strong{color:var(--ink); font-variant-numeric:tabular-nums;}
.ae-warn strong, .ae-warn span{color:var(--danger);}
.ae-note{margin:0; font-size:12px; color:var(--danger);}
.tag-warn{background:var(--danger-soft) !important; color:var(--danger) !important;}
.list-tools{align-items:center; margin-top:-6px;}
.sort-label{font-size:12px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em;}
.share-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
@media (max-width: 860px){
  .wa-item{grid-template-columns:1fr auto; grid-template-areas:"day btn" "kind btn" "main main";}
  .wa-day{grid-area:day;} .wa-kind{grid-area:kind; justify-self:start;} .wa-main{grid-area:main; white-space:normal;} .wa-open{grid-area:btn;}
  .stat-strip{grid-template-columns:1fr 1fr;}
  .ss-value{font-size:19px;}
}

.month-compare .stat-strip{grid-template-columns:1fr 1fr;}
.month-compare .section-title .cs-toggle{flex-shrink:0; font-family:var(--font-body);}
/* resumen personalizado: la tarjeta gira sobre sí misma y cambia de cara */
.month-compare.cs-anim{transform:perspective(1200px) rotateY(0deg); transition:transform .2s ease-in-out;}
.month-compare.cs-turn-out{transform:perspective(1200px) rotateY(90deg);}
.month-compare.cs-turn-in{transform:perspective(1200px) rotateY(-90deg); transition:none;}
.cs-more{margin:0 0 12px;}
.cs-more-panel{border-top:1px solid var(--line); padding-top:12px; margin-bottom:4px;}
.cs-help{font-size:12.5px; color:var(--ink-soft); margin:-4px 0 12px;}
.month-compare .cs-filters{margin-bottom:12px; grid-template-columns:1fr 1fr;}
.cs-filters .f-field input, .cs-filters .f-field select{width:100%; min-width:0;}
.cs-agencies{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:14px;}
.cs-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-right:4px;}
.cs-chip{border:1px solid var(--line); cursor:pointer; font-size:12px; padding:5px 10px; font-family:var(--font-body);}
.cs-chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.cs-note{font-size:11.5px; color:var(--ink-faint); flex-basis:100%;}
.cs-scope{font-size:12px; color:var(--ink-faint); margin:0 0 8px;}
.cs-warn{font-size:13px; color:var(--danger); background:var(--danger-soft); border-radius:var(--radius); padding:10px 12px; margin:0;}
.cs-breakdown{margin-top:14px;}
.cs-breakdown .cs-label{display:block; margin-bottom:8px;}
.cs-reset{margin-top:14px;}
@media (prefers-reduced-motion: reduce){ .month-compare.cs-anim{transition:none;} }
@media (min-width: 861px){ #main{padding-bottom:96px;} }

/* narrow phones: short label on the install button so the header fits */
@media (max-width: 480px){
  .install-btn .install-long{display:none;}
  .install-btn .install-short{display:inline;}
}

/* Cobros: month table fits a phone screen without sideways scrolling */
.cobros-table .m-short{display:none;}
@media (max-width: 560px){
  .cobros-table{font-size:11.5px;}
  .cobros-table th{padding:8px 5px; font-size:9px; letter-spacing:0; white-space:normal;}
  .cobros-table td{padding:9px 5px;}
  .table-scroll th:first-child, .table-scroll td:first-child{padding-left:12px;}
  .table-scroll th:last-child, .table-scroll td:last-child{padding-right:12px;}
  .cobros-table .m-long{display:none;}
  .cobros-table .m-short{display:inline;}
}

/* Gastos: two expense types, each with its own button */
.gasto-types{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin-bottom:18px;}
.gasto-type{display:flex; flex-direction:column; gap:10px;}
.gasto-type p{margin:0; font-size:13px; line-height:1.55; color:var(--ink-soft);}
.gasto-type .btn{align-self:flex-start;}
.gasto-type .helper-text{margin-top:0;}
.gasto-type-head{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--ink);}
.gasto-type-head svg{width:18px; height:18px;}
.seg-switch{display:inline-flex; gap:4px; padding:4px; margin-bottom:18px; border:1px solid var(--line); border-radius:999px; background:var(--paper-sunken);}
.seg-switch button{border:none; background:transparent; color:var(--ink-soft); font-family:inherit; font-size:13px; font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; min-height:36px;}
.seg-switch button.active{background:var(--ink); color:var(--paper);}
.seg-count{font-weight:600; opacity:.7; margin-left:2px;}
@media (max-width: 860px){
  .gasto-types{grid-template-columns:1fr;}
  .seg-switch{display:flex;}
  .seg-switch button{flex:1; padding:8px 8px;}
}

/* Gastos personales: yearly forecast fits a phone (job + personal expenses in one column) */
.forecast-table .fc-sum, .forecast-table .m-short{display:none;}
@media (max-width: 560px){
  .forecast-table .fc-split, .forecast-table .m-long{display:none;}
  .forecast-table .fc-sum, .forecast-table .m-short{display:table-cell;}
  .forecast-table td .m-short{display:inline;}
  .forecast-table th, .forecast-table td{padding-left:5px; padding-right:5px; font-size:11.5px; white-space:nowrap;}
  .forecast-table th{white-space:normal;}
}

/* header on phones: logo never squeezed, compact buttons */
.brand{flex:none;}
@media (max-width: 480px){
  .topbar{padding-left:14px; padding-right:14px;}
  .topbar-actions{gap:4px;}
  .icon-btn{width:36px; height:36px;}
  .install-btn{height:36px; padding:0 10px; font-size:12.5px; gap:4px;}
  .install-btn svg{width:14px; height:14px;}
}
@media (max-width: 389px){
  .install-btn svg{display:none;}
  .os-word{font-size:15px;}
}

/* big amounts never break in the middle of a number */
@media (max-width: 560px){
  .kpi .kpi-value{overflow-wrap:normal; word-break:keep-all; font-size:clamp(18px, 6.2vw, 26px);}
}

/* Tu cuenta / Admin sub tabs */

/* phones: behave like an app, not a web page (no pinch or double-tap zoom,
   no zoom when tapping a field: iOS zooms into inputs under 16px) */
@media (max-width: 860px){
  html, body{touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  input, select, textarea{font-size:16px !important;}
}

/* install guide: steps card plus an arrow pointing at the browser button to tap */
.install-guide{position:fixed; inset:0; z-index:120; background:rgba(20,12,8,0.55); display:none; padding:16px; padding-top:calc(env(safe-area-inset-top,0px) + 16px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);}
.install-guide.open{display:flex; flex-direction:column; justify-content:center; align-items:center;}
.install-guide.arrow-bottom.open, .install-guide.arrow-bottom-right.open{justify-content:flex-start;}
.install-guide.arrow-top-right.open{justify-content:flex-end;}
.ig-card{width:100%; max-width:440px; background:var(--paper-raised); color:var(--ink); border-radius:20px; padding:18px 18px 16px 18px; box-shadow:var(--shadow-lg);}
.install-guide.arrow-bottom.open .ig-card, .install-guide.arrow-bottom-right.open .ig-card{margin-top:24px;}
.install-guide.arrow-top-right.open .ig-card{margin-bottom:24px;}
.ig-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.ig-head h3{margin:0; font-family:var(--font-display); font-size:19px; font-weight:600;}
.ig-steps{margin:0 0 12px 0; padding-left:22px; font-size:15px; line-height:1.55;}
.ig-steps li{margin-bottom:8px;}
.ig-actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
.ig-arrow{position:fixed; width:56px; height:56px; color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); animation:igBounce 1.1s ease-in-out infinite;}
.ig-arrow svg{width:100%; height:100%;}
.arrow-bottom .ig-arrow{left:calc(50% - 28px); bottom:calc(env(safe-area-inset-bottom,0px) + 6px);}
.arrow-bottom-right .ig-arrow{right:14px; bottom:calc(env(safe-area-inset-bottom,0px) + 6px);}
.arrow-top-right .ig-arrow{right:14px; top:calc(env(safe-area-inset-top,0px) + 6px); transform:rotate(180deg); animation-name:igBounceUp;}
@keyframes igBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(10px);}}
@keyframes igBounceUp{0%,100%{transform:rotate(180deg) translateY(0);}50%{transform:rotate(180deg) translateY(10px);}}
@media (prefers-reduced-motion: reduce){ .ig-arrow{animation:none;} }

/* ---------- v1.13: ayudas por campo, guías de primera vez y formularios más claros ---------- */
.f-help{display:none; font-size:11.5px; line-height:1.45; color:var(--ink-soft); margin:5px 0 0 0;}
.f-help.always, .show-help .f-help{display:block;}
.form-intro{background:var(--accent-soft); color:var(--ink); border-radius:var(--radius); padding:10px 12px; font-size:12.5px; line-height:1.5; margin-bottom:14px;}
.help-toggle{margin-left:auto; margin-right:8px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); border-radius:999px; padding:5px 10px; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap;}
.help-toggle[aria-pressed="true"]{background:var(--accent-soft); color:var(--ink);}
.opt-tag{font-weight:500; font-size:10.5px; color:var(--ink-faint); text-transform:none; letter-spacing:0; margin-left:4px;}
.token-row{display:flex; gap:8px; align-items:stretch;}
.token-row .token-input{flex:1; min-width:0;}
.token-add{flex:none;}
.inline-add{display:flex; gap:6px; margin-top:8px; align-items:center;}
.inline-add[hidden]{display:none;}
.inline-add input{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; background:var(--paper); color:var(--ink);}
.option-explain{background:var(--amber-soft); color:var(--ink); border-radius:var(--radius); padding:10px 12px; font-size:12.5px; line-height:1.5; margin-bottom:14px;}
.option-explain.is-confirm{background:var(--green-soft, var(--accent-soft));}
.installments-block{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.form-grid > .form-grid.full{grid-column:1/-1; margin:0;}
.agency-title{flex:1; min-width:0;}
.edit-pill{display:inline-flex; align-items:center; gap:5px; flex:none; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); border-radius:999px; padding:5px 10px; font-size:11.5px; font-weight:600; cursor:pointer;}
.edit-pill svg{width:13px; height:13px;}
.edit-pill:hover{color:var(--ink); border-color:var(--ink-faint);}
.mark-wait{width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint);}
.mark-wait svg{width:16px; height:16px;}
.ncb-wait{font-size:11.5px; color:var(--ink-soft); max-width:180px; text-align:right; line-height:1.4;}
.confirm-option-btn svg{width:14px; height:14px;}
.tab-guide{border:1px solid var(--accent); background:var(--accent-soft); border-radius:var(--radius); padding:14px 16px; margin:0 0 18px 0;}
.tg-head{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:14px;}
.tg-badge{background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:2px 8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.tg-list{margin:0 0 12px 0; padding-left:18px; font-size:13px; line-height:1.55; color:var(--ink);}
.tg-list li{margin:3px 0;}
.notice-body{padding-top:26px; text-align:center;}
.notice-icon{margin:0 auto 10px auto;}
.notice-title{font-family:var(--font-display); font-size:20px; margin:0 0 8px 0;}
.notice-text p{font-size:13.5px; line-height:1.55; margin:0 0 8px 0; color:var(--ink);}
.notice-text .notice-muted{font-size:12px; color:var(--ink-faint);}
.notice-foot{flex-direction:column; align-items:stretch;}
.onb-note{text-align:center; margin:10px 0 0 0;}
@media (max-width:640px){
  .next-cobro-banner{flex-wrap:wrap;}
  .ncb-wait{max-width:none; text-align:left; flex-basis:100%;}
  .help-toggle{padding:5px 8px;}
}

/* ---------- v1.14: "Para responder" (ventana, tarjeta del Resumen y campanita) ---------- */
.action-modal{max-width:420px;}
.ap-count{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
.ap-body{text-align:center; padding-top:18px;}
.ap-icon{width:46px; height:46px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 12px auto;}
.ap-icon svg{width:22px; height:22px;}
.ap-q{font-family:var(--font-display); font-size:20px; line-height:1.25; margin:0 0 6px 0;}
.ap-sub{font-size:13px; font-weight:600; color:var(--ink); margin:0 0 10px 0;}
.ap-text{font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin:0;}
.ap-amount{margin-top:14px; text-align:left;}
.ap-foot{flex-direction:column; align-items:stretch; gap:8px;}
.ap-foot .btn svg{width:15px; height:15px;}
.pending-card{border:1px solid var(--accent); margin-bottom:20px;}
.pend-list{list-style:none; margin:12px 0 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.pend-item{width:100%; display:flex; align-items:center; gap:10px; text-align:left; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; cursor:pointer; color:var(--ink); font:inherit;}
.pend-item:hover{border-color:var(--accent);}
.pend-icon{width:30px; height:30px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}
.pend-icon svg{width:16px; height:16px;}
.pend-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.pend-text strong{font-size:13px;}
.pend-text span{font-size:12px; color:var(--ink-soft);}
.pend-go{color:var(--ink-faint); flex:none;}
.pend-go svg{width:16px; height:16px;}
.ad-user-row{cursor:pointer;}
.ad-user-row:hover td, .ad-user-row.is-open td{background:var(--paper-sunken);}
.ad-user-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.ad-user-detail{margin-bottom:16px;}
.ad-user-detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.ad-days{display:grid; grid-template-columns:repeat(30, 1fr); gap:3px; max-width:560px;}
.ad-day{display:block; aspect-ratio:1; border-radius:3px; background:var(--paper-sunken);}
.ad-day.is-on{background:var(--viz-1);}
.ad-facts{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:13px;}
.ad-facts dt{color:var(--ink-faint);}
.ad-facts dd{margin:0; color:var(--ink); font-weight:600; overflow-wrap:anywhere;}

/* Privacidad de los montos */
.money-note{display:flex; gap:10px; align-items:flex-start; margin:14px 0; padding:12px 14px; border-radius:var(--radius-s); background:var(--green-soft); color:var(--ink); font-size:13px; line-height:1.5; text-align:left;}
.money-note svg{flex:0 0 18px; width:18px; height:18px; margin-top:1px; color:var(--green);}
.money-lock-icon{display:flex; justify-content:center; margin-top:16px; color:var(--green);}
.money-lock-icon svg{width:34px; height:34px;}
.money-points{margin:0 0 12px 0; padding-left:18px; font-size:13px; line-height:1.55; color:var(--ink-soft); text-align:left;}
.money-points li{margin-bottom:6px;}
.money-title{display:flex; gap:8px; align-items:center; justify-content:flex-start;}
.money-title svg{width:18px; height:18px; color:var(--green);}
.money-card .notice-muted{font-size:12px; color:var(--ink-faint); margin:0 0 12px 0;}
.money-actions{display:flex; flex-wrap:wrap; gap:8px;}
.recovery-code{margin:14px 0 10px 0; padding:12px; border-radius:var(--radius-s); background:var(--paper-sunken); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:17px; font-weight:600; letter-spacing:0.06em; text-align:center; word-break:break-all; user-select:all;}
.recovery-where{margin:10px 0 0; text-align:left;}
.recovery-accept{margin:14px 0 16px; padding:12px 14px; border-radius:var(--radius-s); background:var(--paper-sunken); font-size:13px; color:var(--ink); text-align:left;}
.recovery-accept input{width:18px; height:18px;}

/* ============ IMPORTAR TRABAJOS ============ */
.page-head-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.imp-modal{max-width:520px;}
.imp-body{display:flex; flex-direction:column; gap:14px; max-height:70vh;}
.imp-lead{margin:0; font-size:15px; line-height:1.5; color:var(--ink);}
.imp-sub{margin:0; font-size:14px; line-height:1.5; color:var(--ink-soft);}
.imp-drop{display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 16px; border:1.5px dashed var(--line); border-radius:var(--radius-l); background:var(--paper); cursor:pointer; text-align:center; transition:border-color .15s ease;}
.imp-drop:hover, .imp-drop:focus-within{border-color:var(--accent);}
.imp-drop.busy{cursor:progress; opacity:.75;}
.imp-drop-icon{width:48px; height:48px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}
.imp-drop-icon svg{width:22px; height:22px;}
.imp-drop-title{font-weight:700; font-size:15px;}
.imp-drop-sub{font-size:13px; color:var(--ink-soft);}
.imp-error{margin:0; padding:10px 12px; border-radius:var(--radius-s); background:var(--danger-soft); color:var(--danger); font-size:13.5px; line-height:1.45;}
.imp-or{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; color:var(--ink-faint);}
.imp-or::before, .imp-or::after{content:''; flex:1; height:1px; background:var(--line);}
.imp-body textarea{width:100%; box-sizing:border-box; min-height:120px;}
.imp-note{display:flex; gap:8px; align-items:flex-start; margin:0; font-size:12.5px; color:var(--ink-faint); line-height:1.45;}
.imp-note svg{width:14px; height:14px; flex:none; margin-top:2px;}
.imp-progress{display:flex; flex-direction:column; gap:6px;}
.imp-progress-row{display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--ink-soft);}
.imp-bar{height:6px; border-radius:999px; background:var(--paper-sunken); overflow:hidden;}
.imp-bar span{display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .25s ease;}
.imp-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); padding:16px; display:flex; flex-direction:column; gap:14px;}
.imp-card.is-dup{border-color:var(--amber);}
.imp-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.imp-src{display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 10px; border-radius:999px; background:var(--paper-sunken); font-size:12px; font-weight:600; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.imp-src svg{width:13px; height:13px; flex:none;}
.imp-tag{font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; white-space:nowrap;}
.imp-tag.ok{background:var(--green-soft); color:var(--green);}
.imp-tag.warn{background:var(--amber-soft); color:var(--amber);}
.imp-tag.dup{background:var(--danger-soft); color:var(--danger);}
.imp-dup{margin:0; padding:10px 12px; border-radius:var(--radius-s); background:var(--amber-soft); color:var(--ink); font-size:13.5px; line-height:1.45;}
.imp-fields{margin:0; display:flex; flex-direction:column; gap:12px;}
.imp-fields dt{font-size:11.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px;}
.imp-fields dd{margin:0; font-size:16px; font-weight:500; overflow-wrap:anywhere;}
.imp-fields dd.empty{color:var(--amber); font-weight:500; font-size:15px;}
.imp-fields .imp-client{font-family:var(--font-display); font-size:22px;}
.imp-fields .imp-amount{font-family:var(--font-display); font-size:28px; letter-spacing:.01em;}
.imp-fields .imp-client.empty, .imp-fields .imp-amount.empty{font-family:var(--font-body); font-size:15px;}
.imp-row2{display:flex; gap:24px; flex-wrap:wrap;}
.imp-mini{display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); vertical-align:middle;}
.imp-mini.ok{background:var(--green-soft); color:var(--green);}
.imp-mini.soft{background:var(--amber-soft); color:var(--amber); text-transform:none; letter-spacing:0;}
.imp-alts{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-soft);}
.imp-chip{min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); font:600 13px var(--font-body); cursor:pointer;}
.imp-chip:hover{border-color:var(--accent);}
.imp-status{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.imp-status-label{font-size:11.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase;}
.imp-seg{display:inline-flex; padding:3px; border-radius:999px; background:var(--paper-sunken); gap:2px;}
.imp-seg button{min-height:38px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--ink-soft); font:600 13.5px var(--font-body); cursor:pointer;}
.imp-seg button[aria-pressed="true"]{background:var(--paper-raised); color:var(--ink); box-shadow:var(--shadow-sm);}
.imp-seg button[data-status="paid"][aria-pressed="true"]{color:var(--green);}
.imp-notes{margin:0; padding:0 0 0 18px; font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
.imp-raw{border-top:1px solid var(--line-soft); padding-top:10px;}
.imp-raw span{font-size:11px; font-weight:600; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase;}
.imp-raw p{margin:4px 0 0 0; font-size:13px; color:var(--ink-soft); line-height:1.45; overflow-wrap:anywhere;}
.imp-hint{margin:0; font-size:13px; color:var(--amber); line-height:1.45;}
.imp-link{align-self:center; border:0; background:none; color:var(--accent); font:600 13.5px var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:40px; padding:0 8px;}
.imp-link.small{align-self:flex-start; font-size:12.5px; min-height:32px; padding:0;}
.imp-ignored{font-size:13px; color:var(--ink-soft);}
.imp-ignored summary{cursor:pointer; font-weight:600;}
.imp-ignored ul{margin:6px 0 0 0; padding-left:18px; max-height:140px; overflow:auto;}
.imp-foot{flex-wrap:wrap;}
.imp-foot-left, .imp-foot-right{display:flex; gap:8px; align-items:center;}
.imp-foot .btn svg{width:14px; height:14px;}
.imp-hidden{display:none;}
.imp-form select, .imp-form input{width:100%; box-sizing:border-box;}
#ie_agencyNew{margin-top:6px;}
.imp-sum{display:flex; flex-direction:column; gap:8px;}
.imp-sum-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper); font-size:14px;}
.imp-sum-label{display:flex; flex-direction:column; gap:2px; font-size:13px; font-weight:600; color:var(--ink-soft);}
.imp-sum-row strong{font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink);}
.imp-sum-row.ok{border-color:var(--green-soft); background:var(--green-soft);}
.imp-sum-row.warn{border-color:var(--amber-soft); background:var(--amber-soft);}
.imp-sum-row.muted{color:var(--ink-soft);}
.imp-sum-amt{font-weight:600; text-align:right;}
.imp-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.imp-list li{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);}
.imp-list-main{display:flex; flex-direction:column; gap:2px; min-width:0;}
.imp-list-main span{font-size:12.5px; color:var(--ink-soft);}
.imp-list-side{display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-weight:600; white-space:nowrap;}
@media (max-width:640px){
  .imp-foot{flex-direction:column-reverse; align-items:stretch;}
  .imp-foot-left, .imp-foot-right{justify-content:space-between;}
  .imp-foot-right .btn, .imp-foot > .btn{flex:1; justify-content:center;}
  .imp-foot-left .btn:not(.small){flex:1; justify-content:center;}
  .page-head-actions{width:100%;}
/* Nuevo en On Set: una tarjeta por función, se pasan deslizando o con los botones */
.wn-modal{max-width:440px; overflow:hidden;}
.wn-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;}
.wn-track::-webkit-scrollbar{display:none;}
.wn-card{flex:0 0 100%; scroll-snap-align:center; box-sizing:border-box; padding:24px 26px 8px 26px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.wn-card .ap-icon{width:54px; height:54px; margin-bottom:10px;}
.wn-card .ap-icon svg{width:25px; height:25px;}
.wn-tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 10px; margin-bottom:10px;}
.wn-card .ap-text{font-size:13.5px; max-width:340px;}
.wn-go{margin-top:16px;}
.thx-card{padding-bottom:4px;}
.thx-quote{align-self:stretch; text-align:left; margin-top:16px; padding:10px 12px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:var(--radius-s);}
.thx-quote-label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:4px;}
.thx-quote p{margin:4px 0 0 0; font-size:13px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink);}
.wn-dots{display:flex; justify-content:center; gap:6px; padding:12px 0 4px 0;}
.wn-dots span{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s, width .2s;}
.wn-dots span.on{background:var(--accent); width:18px; border-radius:999px;}
.wn-foot{display:flex; gap:8px;}
.wn-foot .btn{flex:1; justify-content:center;}
@media (max-width:640px){
  .wn-modal{max-width:100%;}
  .wn-card{padding:22px 20px 6px 20px;}
}