/* kts.css — KTS design system (remodel phase 1a). Tokens from the approved prototype
   (docs/REMODEL-PLAN.md S1). Light is the default; dark follows the phone unless
   html[data-theme] says otherwise (set by /assets/theme-boot.js from localStorage
   kts_theme = system | light | dark). The public /p/ page and the PDF stay light.

   DARK MODE RULE: every background and text color below is a var(--token). Never
   give a box a light background while its text color is inherited — pair it with
   a token text color. test/ui-dark.test.js checks this file and every style=. */

:root {
  color-scheme: light;
  /* surfaces and text */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EEF1F5;
  --border: #DDE2EA;          /* decorative dividers */
  --border-input: #8792A6;    /* control borders, 3.14:1 */
  --text: #1F2430;            /* 14.3:1 on --bg */
  --text-2: #4B5563;          /* 7.56:1 */
  --text-3: #646B78;          /* 4.73:1 on --surface-2 (its worst surface); the minimum for any text */
  /* brand and actions */
  --primary: #0637B2;
  --primary-hover: #052B8A;  /* darker than --primary in both themes (white text) */
  --on-primary: #FFFFFF;      /* 9.56:1 */
  --link: #0637B2;
  --accent: #F5A623;          /* amber = money coming in */
  --accent-hover: #E4951A;
  --on-accent: #0B1F4D;       /* 7.86:1; never white on amber */
  --accent-text: #8F5B00;     /* amber as text, 5.73:1 */
  --night: #0B1F4D;           /* login background, sheet backdrop */
  --on-night: #FFFFFF;
  --on-night-2: #A9B4CC;
  --focus: #0637B2;
  /* status (StatusPill: neutral, info, warn, ok, bad) */
  --ok: #085041;      --ok-bg: #E1F5EE;
  --warn: #7A4B00;    --warn-bg: #FFF4DB;
  --bad: #791F1F;     --bad-bg: #FCEBEB;
  --info: #0C447C;    --info-bg: #E6F1FB;
  --neutral: #4B5563; --neutral-bg: #EEF1F5;
  /* data */
  --track: #E4E8EF;
  --bar: #0637B2;
  --bar-2: #F5A623;
  --overlay: rgba(11, 31, 77, .45);
  --shadow: 0 1px 2px rgba(11, 31, 77, .06), 0 8px 24px rgba(11, 31, 77, .08);
  --shadow-sheet: 0 -8px 32px rgba(11, 31, 77, .18);
  --toast-bg: #1F2430;
  --toast-text: #FFFFFF;
  --shadow-fab: 0 0 0 4px var(--bg), 0 6px 16px rgba(11, 31, 77, .28);
  /* "paper": the signature pad and signature images are white in both themes
     (the stored PNG is drawn in dark ink on white, like the PDF) */
  --paper: #FFFFFF;
  --paper-ink: #1F2430;
  --photo-bg: #000000;
  /* logo */
  --logo-a: #0637B2; --logo-b: #2F3542;
  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-caption: 12px; --fs-small: 13px; --fs-body: 15px; --fs-input: 16px;
  --fs-section: 18px; --fs-page: 22px; --fs-amount: 28px; --fs-hero: 34px;
  --fw-text: 400; --fw-label: 600; --fw-title: 700;
  --lh-body: 1.45; --lh-title: 1.2;
  /* shape and space */
  --r-tag: 6px; --r-control: 10px; --r-card: 14px; --r-sheet: 20px; --r-pill: 999px;
  --hit: 44px;
  --tab-h: 64px;
}

/* Dark by system preference, unless light was chosen explicitly (no-JS fallback:
   theme-boot.js normally sets data-theme to the resolved theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #08132E;
    --surface: #0F1F45;
    --surface-2: #15295A;
    --border: #2A3D6E;
    --border-input: #6878A0;
    --text: #E8ECF5;
    --text-2: #A9B4CC;
    --text-3: #8C99B5;
    --primary: #2F5BE0;
    --primary-hover: #2549B8;
    --on-primary: #FFFFFF;
    --link: #8FAEFF;
    --accent: #F5A623;
    --accent-hover: #FFB938;
    --on-accent: #0B1F4D;
    --accent-text: #F5A623;
    --night: #050C1F;
    --on-night: #FFFFFF;
    --on-night-2: #A9B4CC;
    --focus: #FFC24D;
    --ok: #6EE7B7;      --ok-bg: #0B3A2C;
    --warn: #FFC96B;    --warn-bg: #3D2C08;
    --bad: #FF9B9B;     --bad-bg: #461A1E;
    --info: #93C5FD;    --info-bg: #102C55;
    --neutral: #C6CEDD; --neutral-bg: #22335C;
    --track: #22335C;
    --bar: #8FAEFF;
    --bar-2: #F5A623;
    --overlay: rgba(0, 0, 0, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, .5);
    --toast-bg: #E8ECF5;
    --toast-text: #08132E;
    --logo-a: #8FAEFF; --logo-b: #E8ECF5;
  }
}

/* Dark chosen by hand (Ajustes → Apariencia) or resolved by theme-boot.js */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08132E;
  --surface: #0F1F45;
  --surface-2: #15295A;
  --border: #2A3D6E;
  --border-input: #6878A0;
  --text: #E8ECF5;
  --text-2: #A9B4CC;
  --text-3: #8C99B5;
  --primary: #2F5BE0;
  --primary-hover: #2549B8;
  --on-primary: #FFFFFF;
  --link: #8FAEFF;
  --accent: #F5A623;
  --accent-hover: #FFB938;
  --on-accent: #0B1F4D;
  --accent-text: #F5A623;
  --night: #050C1F;
  --on-night: #FFFFFF;
  --on-night-2: #A9B4CC;
  --focus: #FFC24D;
  --ok: #6EE7B7;      --ok-bg: #0B3A2C;
  --warn: #FFC96B;    --warn-bg: #3D2C08;
  --bad: #FF9B9B;     --bad-bg: #461A1E;
  --info: #93C5FD;    --info-bg: #102C55;
  --neutral: #C6CEDD; --neutral-bg: #22335C;
  --track: #22335C;
  --bar: #8FAEFF;
  --bar-2: #F5A623;
  --overlay: rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, .5);
  --toast-bg: #E8ECF5;
  --toast-text: #08132E;
  --logo-a: #8FAEFF; --logo-b: #E8ECF5;
}
/* the logo on the night background (login) */
.logo-inv { --logo-a: #8FAEFF; --logo-b: #FFFFFF; }

/* ================= base ================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: var(--fw-text) var(--fs-body)/var(--lh-body) var(--font); padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
a { color: var(--link); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { width: 100%; min-width: 0; min-height: var(--hit); padding: 10px 12px; font-size: var(--fs-input); color: var(--text); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-control); }
input:disabled, select:disabled, textarea:disabled { color: var(--text-2); background: var(--surface-2); border-color: var(--border); opacity: 1; }
/* a locked document (void, converted) is still read: no faded select, no hint text */
:disabled::placeholder { color: transparent; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type="checkbox"] { accent-color: var(--primary); }
textarea { min-height: 72px; resize: vertical; line-height: var(--lh-body); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--focus); }
[hidden] { display: none !important; }
.money, table, .totals, .metric .v, .t, .lamt { font-variant-numeric: tabular-nums; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic.sm { width: 18px; height: 18px; }

label.f, div.f { display: block; font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--text-2); margin: 12px 0 6px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; min-width: 0; }
.row > .w-auto { flex: 0 0 auto; width: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid2 > * { min-width: 0; }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.pagehead > h1 { min-width: 0; }
.pagehead select { width: auto; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.spread > :first-child { min-width: 0; }

/* ================= header + nav ================= */
.top { position: sticky; top: 0; z-index: 30; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 6px 16px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: var(--hit); color: var(--text); font-weight: var(--fw-title); font-size: var(--fs-section); }
.brand .logo-mark { width: 36px; height: 23px; flex: none; }
/* the logo's two colors reach the sprite's shapes by inheritance (logo.svg: no style attribute, CSP) */
svg.logo-mark, svg.login-logo { fill: var(--logo-a); color: var(--logo-b); }

main { max-width: 860px; margin: 0 auto; padding: 16px 16px 96px; }
h1 { font-size: var(--fs-page); font-weight: var(--fw-title); line-height: var(--lh-title); letter-spacing: -.01em; }
h2 { font-size: var(--fs-body); font-weight: var(--fw-title); line-height: var(--lh-title); margin: 24px 4px 8px; display: flex; align-items: baseline; gap: 8px; }
h2 .muted { font-weight: var(--fw-text); }
.muted { color: var(--text-2); font-size: var(--fs-small); }
.faint { color: var(--text-3); }
.neg { color: var(--bad); }
.nowrap { white-space: nowrap; }
.pos { color: var(--ok); }

/* ================= cards, lists ================= */
.card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.card.flush { padding: 4px 16px; }
.card.list { padding: 0; overflow: hidden; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 64px; color: var(--text); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.lrow + .lrow { border-top: 1px solid var(--border); }
a.lrow:hover, button.lrow:hover, .lrow.tap:hover { background: var(--surface-2); }
.lmain { flex: 1; min-width: 0; }
.ltitle { font-weight: var(--fw-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsub { font-size: var(--fs-small); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsub.wrap { white-space: normal; }
.lend { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.lamt { font-weight: var(--fw-title); white-space: nowrap; }
.lbal { font-size: var(--fs-caption); font-weight: var(--fw-label); color: var(--accent-text); white-space: nowrap; }
.lrow .chev { width: 18px; height: 18px; color: var(--text-3); }
.lrow .lic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info); font-weight: var(--fw-title); font-size: var(--fs-small); }
.avatar.lg { width: 56px; height: 56px; font-size: var(--fs-section); }

/* ================= buttons ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--hit); padding: 0 16px; border-radius: var(--r-control); border: 1px solid var(--border-input); background: var(--surface); color: var(--text); font-weight: var(--fw-label); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn .ic { width: 18px; height: 18px; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.money { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.money:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--link); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--bad-bg); border-color: var(--bad-bg); color: var(--bad); }
.btn.sm { padding: 0 12px; font-size: var(--fs-small); }
.btn.icon { width: var(--hit); padding: 0; flex: 0 0 auto; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.actions .btn { flex: 1 1 auto; }
.linkbtn { display: inline-flex; align-items: center; min-height: var(--hit); border: none; background: none; color: var(--link); font-size: var(--fs-small); font-weight: var(--fw-label); cursor: pointer; padding: 0 6px; white-space: nowrap; }
.x { display: inline-flex; align-items: center; justify-content: center; width: var(--hit); height: var(--hit); flex: none; border: none; border-radius: var(--r-control); background: none; color: var(--text-3); cursor: pointer; padding: 0; }
.x .ic { width: 20px; height: 20px; }
.x:hover { color: var(--bad); background: var(--surface-2); }

/* ================= pills, chips, metrics ================= */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-label); white-space: nowrap; line-height: 1; background: var(--neutral-bg); color: var(--neutral); vertical-align: middle; }
.pill.draft { background: var(--neutral-bg); color: var(--neutral); }
.pill.sent { background: var(--info-bg); color: var(--info); }
.pill.partial { background: var(--warn-bg); color: var(--warn); }
.pill.paid, .pill.accepted, .pill.converted { background: var(--ok-bg); color: var(--ok); }
.pill.void, .pill.lost, .pill.late { background: var(--bad-bg); color: var(--bad); }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.metric { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.metric .l { font-size: var(--fs-caption); font-weight: var(--fw-label); color: var(--text-2); }
.metric .v { font-size: 20px; font-weight: var(--fw-title); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric .v.warn { color: var(--accent-text); }
.metric .v.bad { color: var(--bad); }
.metric .v.ok { color: var(--ok); }
.metric .muted { font-size: var(--fs-caption); color: var(--text-3); }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 8px; margin: 4px -16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filters::-webkit-scrollbar { display: none; }
.filters button { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--border-input); background: var(--surface); color: var(--text-2); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-label); cursor: pointer; white-space: nowrap; }
.filters button::after { content: ""; position: absolute; inset: -4px 0; }
.filters button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.filters button .n { font-weight: var(--fw-text); }
.search { position: relative; margin-bottom: 4px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.search input { padding-left: 40px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--r-control); background: var(--surface-2); }
.seg button { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-label); cursor: pointer; padding: 0 6px; white-space: nowrap; }
.seg button .ic { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ================= empty, toast ================= */
.empty { text-align: center; padding: 36px 16px; color: var(--text-2); }
.empty .empty-ic { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-3); }
.empty .empty-ic .ic { width: 28px; height: 28px; }
.empty p { margin-bottom: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); background: var(--toast-bg); color: var(--toast-text); padding: 12px 16px; min-height: 44px; border-radius: var(--r-control); font-size: var(--fs-small); font-weight: var(--fw-label); z-index: 70; box-shadow: var(--shadow-sheet); }

/* ================= document list ================= */
.doc-n { font-weight: var(--fw-label); color: var(--text-2); }

/* ================= editor ================= */
.edhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
/* the title column shrinks (min-width 0), so a long job title under it ellipsizes instead
   of widening the page past the phone's screen (phase 4 review: the tab bar and «Enviar»
   ended up below the visible screen) */
.edhead > div:first-child { min-width: 0; flex: 1 1 auto; }
.edhead h1 { font-size: var(--fs-page); }
.edhead .muted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.newnote { margin: -4px 0 12px; }
.savestate { font-size: var(--fs-caption); color: var(--text-3); text-align: right; padding-top: 6px; }
.clientmeta { margin-top: 6px; }
.clientmeta a { display: inline-flex; align-items: center; min-height: 32px; }
.line { border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px 12px 6px; margin-bottom: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.line-top { display: flex; align-items: flex-start; gap: 4px; }
.line-top textarea { flex: 1; min-height: 44px; font-weight: var(--fw-label); }
.line-top .x { margin-right: -6px; }
.line .meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1fr) auto; gap: 6px; margin-top: 8px; align-items: end; }
.mini { display: block; min-width: 0; }
.mini > span { display: block; font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-label); margin-bottom: 2px; }
.mini input, .mini select { padding: 8px 8px; }
.line .foot { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-top: 4px; gap: 4px 8px; }
.line .foot .tot { font-weight: var(--fw-title); margin-left: auto; white-space: nowrap; }
.chk { display: inline-flex; align-items: center; gap: 8px; min-height: var(--hit); font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--text-2); white-space: nowrap; cursor: pointer; }
.chk input { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; flex: none; }
.cost { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-3); }
.cost input { width: 104px; padding: 8px; }
.line input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.line-err { margin: 6px 0 2px; padding: 6px 10px; border-radius: var(--r-control); background: var(--bad-bg); color: var(--bad); font-size: var(--fs-small); font-weight: var(--fw-label); }
.line-err[hidden] { display: none; }
.pill.unusable { background: var(--bad-bg); color: var(--bad); }
.totals { margin-top: 12px; }
.totals .tr { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; color: var(--text-2); }
.totals .tr > :last-child { color: var(--text); }
.totals .tr.big { font-size: 20px; font-weight: var(--fw-title); color: var(--text); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
.totals .tr.bal { font-weight: var(--fw-title); color: var(--text); }
.totals .tr.bal > :last-child { color: var(--accent-text); font-size: 20px; }
.margin { font-size: var(--fs-small); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-control); padding: 8px 12px; margin-top: 10px; }
.clientpick { position: relative; }
.dd { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-control); box-shadow: var(--shadow-sheet); max-height: 280px; overflow: auto; }
.dd > div { padding: 10px 12px; min-height: var(--hit); border-bottom: 1px solid var(--border); cursor: pointer; }
.dd > div:last-child { border-bottom: 0; }
.dd > div:active, .dd > div:hover { background: var(--surface-2); }
.dd .sub { font-size: var(--fs-caption); color: var(--text-3); }
.dd .dd-new { color: var(--link); font-weight: var(--fw-label); }
.dd .dd-none { color: var(--text-3); cursor: default; }
.edbar { position: sticky; bottom: calc(var(--tab-h) + 8px + env(safe-area-inset-bottom)); z-index: 25; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); padding: 8px; display: flex; gap: 8px; margin-top: 16px; box-shadow: var(--shadow-sheet); }
.edbar .btn { flex: 1; padding: 0 10px; }
.edbar .btn.icon { flex: 0 0 auto; }
.pay { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; min-height: 56px; border-bottom: 1px solid var(--border); }
.pay:last-child { border-bottom: none; }
.pay > :first-child { min-width: 0; }
.pay .m { color: var(--text-3); font-size: var(--fs-small); }
.pay.tap { cursor: pointer; }
.pay.newrow { color: var(--link); font-weight: var(--fw-label); cursor: pointer; justify-content: flex-start; }
.rowval { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--fs-small); }
.rowval > :first-child { min-width: 0; }

/* ================= photos & signature ================= */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ph { position: relative; cursor: pointer; min-width: 0; }
.ph img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--r-control); border: 1px solid var(--border); display: block; }
.ph .cap { font-size: var(--fs-caption); color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph .nopdf { position: absolute; top: 4px; left: 4px; font-size: 11px; font-weight: var(--fw-label); background: var(--toast-bg); color: var(--toast-text); padding: 1px 6px; border-radius: var(--r-tag); }
.photo-view { width: 100%; max-height: 50vh; object-fit: contain; border-radius: var(--r-control); background: var(--photo-bg); display: block; }
.sig-img { max-height: 90px; max-width: 100%; display: block; background: var(--paper); border-radius: var(--r-control); padding: 4px; }
.sigpad { width: 100%; height: 180px; border: 2px dashed var(--border-input); border-radius: var(--r-control); background: var(--paper); touch-action: none; display: block; margin-top: 12px; }

/* ================= expenses ================= */
.monthnav { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; }
.monthnav b { min-width: 150px; text-align: center; font-size: var(--fs-section); text-transform: capitalize; }
.monthnav button { width: var(--hit); height: var(--hit); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-input); background: var(--surface); color: var(--text); cursor: pointer; }
.monthnav button:disabled { opacity: .45; cursor: default; }
.catbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 0; font-size: var(--fs-small); }
.catbar .bar { grid-column: 1 / -1; height: 6px; margin-top: 2px; }
.daysep { display: flex; justify-content: space-between; font-size: var(--fs-caption); font-weight: var(--fw-title); color: var(--text-2); margin: 18px 4px 6px; text-transform: uppercase; letter-spacing: .04em; }
.exp { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 60px; border-bottom: 1px solid var(--border); cursor: pointer; }
.card.list .exp { padding: 10px 16px; }
.exp:last-child { border-bottom: none; }
.exp:hover { background: var(--surface-2); }
.exp .main { flex: 1; min-width: 0; }
.exp .v { font-weight: var(--fw-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp .d { font-size: var(--fs-small); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp .a { flex: none; text-align: right; font-weight: var(--fw-title); font-variant-numeric: tabular-nums; }
.exp .cat { font-size: 11px; font-weight: var(--fw-label); color: var(--neutral); background: var(--neutral-bg); border-radius: var(--r-tag); padding: 1px 6px; margin-left: 6px; }
.explist { margin-top: 6px; }
.explist .exp { min-height: 48px; padding: 8px 0; }
.amount-in { font-size: var(--fs-amount) !important; font-weight: var(--fw-title); text-align: right; min-height: 60px; font-variant-numeric: tabular-nums; }
.rcpt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rcpt img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-control); border: 1px solid var(--border); }
.doclink { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--info-bg); color: var(--info); border-radius: var(--r-control); padding: 0 0 0 12px; font-size: var(--fs-small); font-weight: var(--fw-label); }

/* ================= Más ================= */
.moremenu .lrow .lic .ic { width: 20px; height: 20px; }

/* ================= sheet ================= */
.sheet { position: fixed; inset: 0; background: var(--overlay); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { position: relative; background: var(--surface); color: var(--text); border-radius: var(--r-sheet) var(--r-sheet) 0 0; width: 100%; max-width: 640px; max-height: 90vh; max-height: 90dvh; overflow: auto; overscroll-behavior: contain; padding: 0 20px calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-sheet); }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--border-input); margin: 8px auto 6px; }
.sheet-x { position: absolute; top: 12px; right: 8px; }
.sheet-card > h2, .sheet-card > .pagehead { margin: 4px 48px 4px 0; font-size: var(--fs-section); }
.sheet-card > .pagehead h2 { margin: 0; font-size: var(--fs-section); }
.sheet-card > .actions:last-child { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 16px -20px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); flex-wrap: nowrap; }
.sheet-card > .actions:last-child .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; white-space: normal; line-height: 1.15; text-align: center; }
.sheet-card > .actions:last-child .btn.primary, .sheet-card > .actions:last-child .btn.money { flex-grow: 1.4; }
.menu { margin-top: 8px; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; text-align: left; padding: 8px 6px; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text); font-size: var(--fs-input); cursor: pointer; }
.menu button:last-child { border-bottom: none; }
.menu button:hover { background: var(--surface-2); }
.menu button .ic { color: var(--link); }
.menu button.danger, .menu button.danger .ic { color: var(--bad); }

/* ================= tables (reports) ================= */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
th { text-align: left; font-size: var(--fs-caption); color: var(--text-2); font-weight: var(--fw-label); padding: 8px 6px; border-bottom: 1px solid var(--border); }
td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
td.r, th.r { text-align: right; white-space: nowrap; }
tr.total td { font-weight: var(--fw-title); border-bottom: 0; }
.tablewrap { overflow-x: auto; }
.bar { height: 8px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; margin: 4px 0 6px; }
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--bar); }
.bar i.alt { background: var(--bar-2); }
.bar i.warn { background: var(--warn); }
.bar i.bad { background: var(--bad); }
details > summary { min-height: var(--hit); display: flex; align-items: center; cursor: pointer; }

/* ================= profile (cliente) ================= */
.profile { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.profile > .btn { position: absolute; top: 12px; right: 12px; }
.profile .lmain h1 { padding-right: 104px; }
.profile .lmain h1 { overflow-wrap: anywhere; }
/* a long web host or name with no spaces wraps instead of widening the page (review 2026-10-07) */
.profile .muted, #sheetCard .muted, .price-row .lsub { overflow-wrap: anywhere; }
/* the vendor list: a long name wraps, so the tipo pills stay on screen */
.vrow .ltitle { white-space: normal; overflow-wrap: anywhere; }
.notes-pre { white-space: pre-wrap; margin-top: 6px; }

/* ================= tab bar ================= */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); color: var(--text-3); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; z-index: 40; }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tab-h); font-size: var(--fs-caption); font-weight: var(--fw-label); color: var(--text-3); }
.tabbar a .ic { width: 24px; height: 24px; }
.tabbar a.on { color: var(--link); }
.tabbar a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--link); }
.tabbar .fab { justify-self: center; width: 56px; height: 56px; min-height: 0; margin-top: -24px; border-radius: 18px; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-fab); }
.tabbar .fab:hover { background: var(--accent-hover); }
.tabbar .fab .ic { width: 28px; height: 28px; stroke-width: 2.6; }

/* ================= login ================= */
body.login { padding: 24px 16px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: var(--night); color: var(--on-night); }
.login .login-logo { width: 180px; height: 120px; }
.login .card { width: 100%; max-width: 360px; padding: 24px 20px; margin: 0; }
.login h1 { font-size: var(--fs-section); text-align: center; }
.login .sub { text-align: center; color: var(--text-2); font-size: var(--fs-small); margin: 4px 0 8px; }
.login .btn { width: 100%; margin-top: 12px; }
.login .err { color: var(--bad); background: var(--bad-bg); border-radius: var(--r-control); padding: 10px 12px; font-size: var(--fs-small); font-weight: var(--fw-label); text-align: center; margin-top: 12px; }

/* ================= phase 2: Hoy, Crear, chips, cobro, gasto rápido =================
   DARK MODE RULE as everywhere: only tokens. */
.desk-only { display: none; }
.tabbar button.fab { border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ic.xs { width: 14px; height: 14px; }
.backlink { display: inline-flex; align-items: center; gap: 2px; min-height: var(--hit); margin: -10px 0 -4px -8px; padding: 0 8px 0 2px; font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--link); }
.backlink .ic { width: 20px; height: 20px; }

.hello { align-items: flex-end; }
.hello .cap { color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-label); }
.hello h1 { margin-top: 2px; }
.hero { display: block; padding: 16px; color: var(--text); }
.hero:hover { background: var(--surface-2); }
.hero .label { font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--text-2); }
.hero .big { font-size: var(--fs-hero); font-weight: var(--fw-title); line-height: 1.1; color: var(--accent-text); margin: 2px 0 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero .split { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-small); color: var(--text-2); }
.hero .split b { color: var(--text); }
.hero .split b.bad, .days.bad { color: var(--bad); }
.days { font-weight: var(--fw-title); }
.amber { color: var(--accent-text); }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 4px 8px; }
.sec-h h2 { margin: 0; align-items: center; }
.sec-h > a, .sec-h > .money { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--fs-small); font-weight: var(--fw-label); white-space: nowrap; }
.sec-h > .money { color: var(--text); font-weight: var(--fw-title); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--neutral-bg); color: var(--neutral); font-size: var(--fs-caption); font-weight: var(--fw-title); }
.hrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; min-height: 64px; }
.hrow + .hrow, .hrow + .lrow, .lrow + .hrow { border-top: 1px solid var(--border); }
.hrow > .lmain { color: var(--text); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.hrow > .lmain:hover .ltitle { text-decoration: underline; }
.hrow > .btn { flex: none; }
.hrow .lsub { white-space: normal; }
.lsub.rem { color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.card-foot { padding: 10px 16px 14px; border-top: 1px solid var(--border); }
.inline-empty { padding: 14px 16px; font-size: var(--fs-small); color: var(--text-2); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px; box-shadow: var(--shadow); min-width: 0; }
.tile .l { font-size: var(--fs-caption); font-weight: var(--fw-label); color: var(--text-2); }
.tile .v { font-size: 16px; font-weight: var(--fw-title); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tile .v.ok { color: var(--ok); }
.tile .v.bad { color: var(--bad); }
.tile .s { font-size: var(--fs-caption); color: var(--text-3); overflow-wrap: anywhere; }
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--r-card); font-size: var(--fs-small); font-weight: var(--fw-label); margin-bottom: 10px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.info { background: var(--info-bg); color: var(--info); }
.banner > .grow { flex: 1; min-width: 0; }
.banner > .btn { flex: none; }
/* the overdue banner's actions (Recordar pago, Aplicar recargo %): on the phone they wrap under the text */
.banner { flex-wrap: wrap; }
.banner-acts { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
.banner-acts .btn { flex: 1 1 auto; }

/* «Recargo por atraso»: a fee line is its own row (server-managed: removed, never edited) */
.line.fee { border-color: var(--warn); background: var(--surface); color: var(--text); padding-bottom: 8px; }
.fee-top { display: flex; align-items: center; gap: 8px; }
.fee-top .fee-amt { margin-left: auto; font-size: var(--fs-input); color: var(--text); }
.fee-top .x { margin-right: -6px; }
.fee-desc { margin: 4px 0 2px; font-weight: var(--fw-label); color: var(--text); overflow-wrap: anywhere; }
.fee-preview { margin: 10px 0 8px; padding: 12px 14px; border-radius: var(--r-control); background: var(--info-bg); color: var(--info); font-weight: var(--fw-title); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fee-preview.bad { background: var(--bad-bg); color: var(--bad); }
.fee-warn { margin: 10px 0 0; }
.amount-in::selection { background: var(--info-bg); color: var(--text); } /* the % comes selected: readable in both themes */
.hacts { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.hacts .linkbtn { gap: 4px; min-height: 36px; }

/* Crear (the ＋ menu) */
.quick-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.qa { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: var(--fw-label); text-align: left; cursor: pointer; }
.qa:hover { background: var(--surface-2); }
.qa small { display: block; color: var(--text-3); font-weight: var(--fw-text); font-size: var(--fs-caption); }
.qi { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info); }
.qa.money { border-color: var(--accent); }
.qa.money .qi, .photo-first .qi { background: var(--accent); color: var(--on-accent); }
.menu a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 6px; border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--fs-input); }
.menu a:hover { background: var(--surface-2); }
.menu a .ic { color: var(--link); }

/* chips: quick rates in the editor, frequent stores in Gasto */
/* they wrap (no hidden sideways scroll): there are only a few, and every one must show */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; margin: 4px 0 0; }
.chip { position: relative; flex: 0 1 auto; max-width: 100%; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--border-input); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: var(--fs-small); font-weight: var(--fw-label); white-space: nowrap; cursor: pointer; }
.chip::after { content: ""; position: absolute; inset: -2px 0; }
.chip:hover { background: var(--surface-2); }
.chip .ic { width: 16px; height: 16px; flex: none; }
.chip .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip .amt { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip[aria-pressed="true"] .amt { color: var(--on-primary); }

/* Pagada ✔ */
.done-mark { width: 72px; height: 72px; border-radius: 50%; margin: 8px auto 10px; display: flex; align-items: center; justify-content: center; background: var(--ok-bg); color: var(--ok); }
.done-mark .ic { width: 36px; height: 36px; stroke-width: 2.6; }
.sheet-card > h2.center { justify-content: center; margin: 0 48px 4px; }
.center { text-align: center; }
.big-amt { font-size: var(--fs-amount); font-weight: var(--fw-title); font-variant-numeric: tabular-nums; }

/* Gasto rápido: «Recibo primero» */
.photo-first { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin-top: 8px; padding: 10px 14px; border: 2px dashed var(--border-input); border-radius: var(--r-card); background: var(--surface-2); color: var(--text); font-weight: var(--fw-label); text-align: left; cursor: pointer; }
.photo-first small { display: block; color: var(--text-2); font-weight: var(--fw-text); font-size: var(--fs-caption); }
.photo-first.done { border-style: solid; border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.photo-first.done small { color: var(--ok); }
.photo-first .qi { font-size: 22px; }
.photo-first img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }

/* ================= phase 3: shell, search, Trabajos, client ficha, Más screens =================
   DARK MODE RULE as everywhere: only tokens. */
/* header: the phone's search button; the desktop search field (shown ≥900px) */
.hdr-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--hit); height: var(--hit); margin-right: -8px; flex: none; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-2); cursor: pointer; padding: 0; }
.hdr-btn:hover { background: var(--surface-2); color: var(--text); }
.gsearch { display: none; position: relative; flex: 0 1 440px; min-width: 0; }
.gsearch .search { margin: 0; }
.sidenav { display: none; }
.hsearch { margin: 0 0 4px; }
/* search results: inline on Hoy and in the sheet, a dropdown under the header field */
.sr { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; margin: 8px 0 10px; }
.sr.drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; z-index: 35; max-height: min(70vh, 560px); overflow-y: auto; box-shadow: var(--shadow-sheet); }
.sheet-card .sr { box-shadow: none; }
.sr-h { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px 4px; font-size: var(--fs-caption); font-weight: var(--fw-title); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.sr .lrow { min-height: 56px; padding: 8px 16px; }
.sr .lrow:focus-visible { outline-offset: -3px; }
.sr .lrow .lic { width: 36px; height: 36px; }
.sr-none { padding: 14px 16px; color: var(--text-2); font-size: var(--fs-small); }
button.lrow { font: inherit; }
span.ltitle, span.lsub { display: block; }

/* Dinero (phone): Facturas · Estimados · Gastos as one place */
.seg a { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-label); padding: 0 6px; white-space: nowrap; }
.seg a .ic { width: 16px; height: 16px; }
.seg a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.moneynav { margin: -4px 0 12px; }

/* Trabajos: stage pills (stored values, Spanish labels) */
.pill.st-lead, .pill.st-closed, .pill.st-other { background: var(--neutral-bg); color: var(--neutral); }
.pill.st-quoted { background: var(--warn-bg); color: var(--warn); }
.pill.st-won { background: var(--ok-bg); color: var(--ok); }
.pill.st-installed { background: var(--info-bg); color: var(--info); }
.pill.st-lost { background: var(--bad-bg); color: var(--bad); }
.lsub .ic.xs { margin-right: 2px; }
.deal-next { display: flex; align-items: center; gap: 2px; min-width: 0; }
.deal-next > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.deal-next > .due { flex: none; overflow: visible; }
.deal-row .ltitle { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.due { color: var(--text-2); font-weight: var(--fw-label); white-space: nowrap; }
.due.bad { color: var(--bad); }
.lend .m { font-size: var(--fs-caption); color: var(--text-3); white-space: nowrap; }
.sec-h .sum { font-size: var(--fs-small); font-weight: var(--fw-title); color: var(--text); white-space: nowrap; }

/* Trabajo: header, stage stepper, flags */
.dealhead .cap { font-size: var(--fs-small); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.dealhead .cap a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--hit); font-weight: var(--fw-label); }
.title-in { font-size: var(--fs-section) !important; font-weight: var(--fw-title); min-height: var(--hit); resize: none; overflow: hidden; line-height: var(--lh-title); }
.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 12px 0 4px; }
.stepper button { min-height: var(--hit); min-width: 0; border: 0; border-radius: 8px; background: var(--track); color: var(--text-2); font-size: 11.5px; font-weight: var(--fw-label); cursor: pointer; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) { .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stepper button.past { background: var(--info-bg); color: var(--info); }
.stepper button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.stepper button:disabled { cursor: default; opacity: 1; }
.lostrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.flags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.flag { display: inline-flex; align-items: center; max-width: 100%; min-height: 32px; padding: 0 0 0 10px; border-radius: var(--r-pill); background: var(--info-bg); color: var(--info); font-size: var(--fs-small); font-weight: var(--fw-label); }
.flag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the ✕ is a full 44px target; the negative margin keeps the pill itself 32px tall */
.flag .x { width: var(--hit); height: var(--hit); margin: -6px 0; color: var(--info); border-radius: var(--r-pill); }
.flag-add { flex: 1 1 160px; width: auto; }
.deal-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.deal-acts .btn { flex: 1 1 auto; }

/* próximos pasos (actions) */
.task { display: flex; align-items: center; gap: 6px; min-height: 52px; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.task .lmain { padding: 6px 0; }
.task .ltitle { white-space: normal; overflow-wrap: anywhere; font-weight: var(--fw-text); }
.task.done .ltitle { text-decoration: line-through; color: var(--text-2); }
.tick { width: var(--hit); height: var(--hit); flex: none; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ok); cursor: pointer; padding: 0; margin-left: -10px; }
.tick > span { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border-input); display: flex; align-items: center; justify-content: center; }
.tick[aria-pressed="true"] > span { background: var(--ok-bg); border-color: var(--ok); }
.tick .ic { width: 16px; height: 16px; stroke-width: 3; }
.addrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.addrow > input, .addrow > textarea { flex: 1 1 220px; width: auto; }
.addrow > input[type="date"] { flex: 1 1 150px; }
.addrow > .btn { flex: 0 0 auto; }
.card > details > summary { font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--link); }

/* bitácora */
.trail { list-style: none; padding: 0; margin: 0; }
.trail li { display: flex; gap: 8px; align-items: flex-start; border-bottom: 1px solid var(--border); }
.trail li:last-child { border-bottom: 0; }
.trail .when { flex: none; width: 96px; padding: 12px 0; font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--text-2); }
.trail .what { flex: 1; min-width: 0; padding: 11px 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* S4: the job's documents, money, events; the editor's job link and «revisar» lines */
.deal-hint { margin-top: 8px; font-size: var(--fs-small); }
.sugg small { display: block; font-weight: var(--fw-text); }
.sugg .btn { flex: none; }
.only-you { font-size: var(--fs-caption); font-weight: var(--fw-label); color: var(--text-3); white-space: nowrap; }
.pnl { margin-top: 0; }
.pnl .tr small { font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-text); }
.pnl .tr.sep { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 9px; }
.pnl .owe { color: var(--accent-text); font-weight: var(--fw-label); }
.pnl .margin { margin-top: 8px; }
.trail li.ev .what { color: var(--text-2); font-size: var(--fs-small); padding-top: 12px; }
.trail .evic { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--link); }
.trail .x { flex: none; }
.tasks-today { padding-top: 4px; padding-bottom: 4px; }
.tasks-today a.lmain { color: var(--text); }
.tasks-today .lsub { white-space: normal; }
.dealref { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-weight: var(--fw-label); max-width: 100%; }
.dealref > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.line.review { border-color: var(--warn); }
.review-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 8px; padding: 8px 10px; border-radius: var(--r-control); background: var(--warn-bg); color: var(--warn); font-size: var(--fs-small); }
.review-flag > .grow { flex: 1 1 200px; min-width: 0; }
.rv-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-acts .btn { flex: 1 1 auto; }

/* costeo: a quote line (vendor, qty, cost, markup → sell) */
.qline .vsel { margin-top: 8px; }
.qline .meta3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.qline .foot .tot small { font-weight: var(--fw-text); color: var(--text-3); }
.addline { border-style: dashed; box-shadow: none; }
.addline > b { display: block; margin-bottom: 4px; }
.costeo .note { margin-top: 8px; }

/* client ficha tabs */
.tabs { display: flex; overflow-x: auto; margin: 12px -16px 12px; padding: 0 12px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
/* more tabs past an edge (a phone shows four of the five): that edge fades out. The mask
   only reads alpha; var(--text) is opaque in every theme. cliente.js sets the classes and
   scrolls the current tab into view. */
.tabs.more-r { -webkit-mask-image: linear-gradient(to left, transparent, var(--text) 40px); mask-image: linear-gradient(to left, transparent, var(--text) 40px); }
.tabs.more-l { -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 40px); mask-image: linear-gradient(to right, transparent, var(--text) 40px); }
.tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 40px, var(--text) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, var(--text) 40px, var(--text) calc(100% - 40px), transparent); }
.tabs a { min-height: var(--hit); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; flex: 1 0 auto; color: var(--text-2); font-weight: var(--fw-label); font-size: var(--fs-small); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--link); }
.tabs a .n { font-weight: var(--fw-text); color: var(--text-3); }
.ficha-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-acts .btn { flex: 1 1 auto; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: var(--fs-small); }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.list-note { margin: -2px 4px 8px; }
.inact-toggle { margin: 14px 0 10px; }

/* rows with their own buttons (proveedores, libro de precios, recurrentes) */
.rowbtn { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border: 0; padding: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.rowbtn:hover .ltitle { text-decoration: underline; }
.rowbtn .lsub.wrap { white-space: normal; }
.vhint { margin-top: 8px; }
.vlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vlinks .btn { flex: 0 1 auto; }

/* ================= S5: catálogo, proveedores y costos =================
   DARK MODE RULE: tokens only. The cost sparkline is an SVG drawn with these classes (no
   color in the markup): the line and dots in --link (readable on --surface in both themes). */
.catnav { margin: -4px 0 12px; }
.spark-wrap { margin: 0 0 10px; }
.spark { display: block; width: 100%; height: 56px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--link); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .dot { fill: none; stroke: var(--link); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .dot.now { stroke-width: 10; }
.spark-cap { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-caption); color: var(--text-3); }
table.costs td .muted, table.purchases td .muted { font-size: var(--fs-caption); }
table.costs .linkbtn { min-height: 32px; padding: 0; }
.vendor-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vendor-line .ltitle { white-space: normal; overflow-wrap: anywhere; }
.vendor-acts { margin-top: 10px; }
.vficha-acts { margin-bottom: 12px; }
.vendor-acts .btn { min-width: 0; overflow-wrap: anywhere; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; }
.price-row + .price-row { border-top: 1px solid var(--border); }
.price-row .ltitle { white-space: normal; overflow-wrap: anywhere; }
.price-acts { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.price-acts .btn { flex: 0 1 auto; }
.pick-list { max-height: 44vh; overflow-y: auto; margin-top: 8px; }
.pick-list .lrow { min-height: 52px; padding: 8px 14px; }
.pick-list .lrow[aria-pressed="true"] { background: var(--info-bg); color: var(--info); }
.pick-list .lrow[aria-pressed="true"] .lsub { color: var(--info); }
.exp-acts { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 14px; margin-top: 6px; }
.exp-acts .linkbtn { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.lrow > .rowbtn { color: var(--text); }
/* a long checkbox label in a sheet («Tarifa rápida: un botón en el editor…», «Usar $38.00 como
   costo actual…») wraps instead of widening the sheet past a 390px screen */
.sheet-card .chk { white-space: normal; }

/* ================= the Agenda (2026-10-06) =================
   DARK MODE RULE as everywhere: only tokens. Kinds: visita = info, trabajo = warn (amber),
   otro = neutral; completada = ok, cancelada = struck through on neutral. */
/* header (phone): the search and «Más» (☰), which left the tab bar for the Agenda */
.hdr-acts { display: flex; align-items: center; margin-right: -8px; }
.hdr-acts .hdr-btn { margin-right: 0; }
.hdr-btn.on { color: var(--link); }
.ag-acts { display: flex; gap: 8px; flex: none; }
.ag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.ag-mode { flex: 1 1 100%; }
.ag-nav { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ag-nav b { min-width: 0; text-align: center; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-arrow { width: var(--hit); height: var(--hit); flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-input); background: var(--surface); color: var(--text); cursor: pointer; padding: 0; }
.ag-arrow:hover { background: var(--surface-2); }
/* the week strip (phone) */
.weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; touch-action: pan-y; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 66px; padding: 6px 0; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--text); cursor: pointer; }
.wday .wd { font-size: var(--fs-caption); font-weight: var(--fw-label); color: var(--text-2); }
.wday .dn { font-size: var(--fs-section); font-weight: var(--fw-title); line-height: 1.15; }
.wday.today { border-color: var(--link); }
.wday.today .dn { color: var(--link); }
.wday[aria-pressed="true"], .mday[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.wday[aria-pressed="true"] .wd, .wday[aria-pressed="true"] .dn, .mday[aria-pressed="true"] .dn { color: var(--on-primary); }
.dots { display: flex; align-items: center; justify-content: center; gap: 3px; height: 8px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--info); }
.dots i.k-trabajo { background: var(--accent); }
.dots i.k-otro, .dots i.t { background: var(--text-3); }
.dots b { font-size: 10px; line-height: 1; color: var(--text-2); }
[aria-pressed="true"] > .dots i { background: var(--on-primary); }
[aria-pressed="true"] > .dots b { color: var(--on-primary); }
/* the month */
.monthgrid { padding: 10px 8px; touch-action: pan-y; }
.mg-head, .mg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mg-head { text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-label); color: var(--text-2); padding-bottom: 4px; }
.mday { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 52px; padding: 6px 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.mday:not([aria-pressed="true"]):hover { background: var(--surface-2); }
.mday .dn { font-weight: var(--fw-label); }
.mday.out .dn { color: var(--text-3); font-weight: var(--fw-text); }
.mday.today .dn { color: var(--link); font-weight: var(--fw-title); }
.mday.today[aria-pressed="true"] .dn, .wday.today[aria-pressed="true"] .dn { color: var(--on-primary); }
.ag-dayhead h2 { text-transform: none; }
/* one item of a day: time · title, client, address · kind / status */
.ag-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px 10px 12px; border: 0; border-left: 4px solid var(--info); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ag-row + .ag-row, .ag-row + .tasks-today, .card.list > .ag-row + details { border-top: 1px solid var(--border); }
button.ag-row:hover { background: var(--surface-2); }
.ag-row.k-trabajo { border-left-color: var(--accent); }
.ag-row.k-otro { border-left-color: var(--border-input); }
.ag-row.task { border-left-color: var(--border); cursor: default; }
.ag-row.task .tick { margin-left: -8px; }
.ag-row.task a.lmain { color: var(--text); }
.ag-row .lsub { white-space: normal; }
.ag-row .ltitle { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ag-time { flex: 0 0 66px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.ag-time b { font-size: var(--fs-small); font-weight: var(--fw-title); white-space: nowrap; }
.ag-time small { font-size: var(--fs-caption); color: var(--text-2); white-space: nowrap; }
.ag-row.st-cancelada .ltitle, .ag-row.task.done .ltitle { text-decoration: line-through; color: var(--text-2); }
.ag-row.st-completada .ltitle { color: var(--text-2); }
.ag-row.st-cancelada { border-left-color: var(--border); }
.pill.k-visita { background: var(--info-bg); color: var(--info); }
.pill.k-trabajo { background: var(--warn-bg); color: var(--warn); }
.pill.k-otro { background: var(--neutral-bg); color: var(--neutral); }
.pill.ag-done { background: var(--ok-bg); color: var(--ok); }
.pill.ag-gone { background: var(--bad-bg); color: var(--bad); }
.ag-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding-top: 8px; padding-bottom: 8px; }
.ag-today .tasks-today { padding: 0 16px; }
.ag-past > summary { padding: 0 16px; border-top: 1px solid var(--border); font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--link); }
.ag-past > .ag-row:first-of-type { border-top: 1px solid var(--border); }
/* the desktop week grid (shown ≥900px) */
.weekgrid { display: none; }
/* «＋ Cita» and the appointment's sheet */
.ap-conf { margin: 10px 0 0; }
.ap-conf .ic { flex: none; }
.ap-head { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ap-when { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ap-when .lic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info); }
.ap-kv { margin: 6px 0 14px; }
.ap-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-links .btn { flex: 1 1 auto; }
.ap-del { margin-top: 8px; }

/* ---------- Planes (S6): the «Activo» switch, the plan list and ficha ---------- */
.switch { position: relative; flex: none; width: 50px; height: 30px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--border-input); background: var(--surface-2); cursor: pointer; }
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text-3); transition: transform .15s ease; }
.switch::after { content: ""; position: absolute; inset: -8px -4px; } /* a 44px tap target */
.switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.switch[aria-checked="true"]::before { transform: translateX(20px); background: var(--on-primary); }
.switch:disabled { opacity: .6; cursor: wait; }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a plan row at 390: the title wraps (two plans of a client told apart), the right column
   stays narrow (amount + «al mes»), «pausado» sits on the sub line — nothing is clipped */
.plan-row .ltitle { white-space: normal; overflow-wrap: anywhere; }
.plan-row .lend .m { font-size: var(--fs-caption); color: var(--text-3); white-space: normal; }
.plan-row .lsub .pill { vertical-align: 1px; }
.lrow .plan-notes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.plan-row.off .ltitle, .plan-row.off .lamt { color: var(--text-2); }
.plan-active { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; }
.plan-active .switch { margin-top: 2px; }
.plan-active .muted { font-size: var(--fs-small); }
.plan-hist .lmain .ltitle { white-space: normal; }
.plan-row .due { white-space: normal; }
.plan-pend > .grow { flex-basis: 100%; } /* the period and amount on one line, Aprobar · Omitir under it */
.pf-active { margin-top: 8px; white-space: normal; }
@media (prefers-reduced-motion: reduce) { .switch::before { transition: none; } }
.linkbtn.danger-link { color: var(--bad); gap: 4px; padding-left: 0; }

@media (min-width: 600px) {
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .ag-mode { flex: 0 0 240px; }
  .ag-nav { flex: 1 1 auto; justify-content: flex-end; }
  .ag-nav b { min-width: 190px; }
}
/* S7 la Bandeja (public/js/bandeja.js): the pending count on the ☰ / Más / sidebar, the cards */
.nbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-caption); font-weight: var(--fw-title); line-height: 1; font-variant-numeric: tabular-nums; vertical-align: middle; }
.hdr-btn { position: relative; }
.hdr-btn .nbadge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; box-shadow: 0 0 0 2px var(--surface); }
.sidenav a .nbadge, .moremenu .ltitle .nbadge { margin-left: 6px; }
.seg a .nbadge { margin-left: 2px; }
.ib-tabs { margin: -4px 0 8px; }
.ib-intro { font-size: var(--fs-small); margin: 0 4px 12px; }
.ib-card { padding: 12px 14px; }
.ib-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ib-src { font-size: var(--fs-caption); color: var(--text-3); overflow-wrap: anywhere; min-width: 0; }
.ib-body { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; min-width: 0; }
.ib-main { flex: 1; min-width: 0; }
.ib-title { font-weight: var(--fw-title); color: var(--text); overflow-wrap: anywhere; }
.ib-main .lsub { margin-top: 2px; overflow-wrap: anywhere; }
.ib-match { color: var(--text-2); }
.ib-match .ic { margin-right: 4px; vertical-align: -2px; }
.ib-note { white-space: pre-line; color: var(--text-2); }
.ib-amt { flex: none; font-size: var(--fs-section); font-weight: var(--fw-title); color: var(--text); white-space: nowrap; }
.ib-thumb { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 64px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); overflow: hidden; font-size: var(--fs-caption); font-weight: var(--fw-label); }
.ib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ib-lines { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-small); color: var(--text-2); overflow-wrap: anywhere; }
.ib-card .banner { margin: 10px 0 0; }
.ib-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ib-acts .btn { flex: 1 1 auto; width: auto; }
.ib-done { margin-top: 10px; font-size: var(--fs-small); color: var(--text-2); overflow-wrap: anywhere; }
.ib-done .linkbtn { display: inline; min-height: 0; padding: 0; font-size: inherit; }
a.ib-hoy { margin: 12px 0 0; min-height: var(--hit); }
.ib-sheet-sum { overflow-wrap: anywhere; margin-bottom: 4px; }

@media (min-width: 900px) {
  body { padding-bottom: 24px; padding-left: 232px; }
  .top { margin-left: -232px; }
  .gsearch { display: block; }
  .phone-only { display: none !important; }
  .moneynav { display: none; }
  /* the sidebar: every destination (the phone has the tab bar + Más) */
  .sidenav { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 57px; left: 0; bottom: 0; width: 232px; padding: 12px; overflow-y: auto; background: var(--surface); color: var(--text); border-right: 1px solid var(--border); z-index: 20; }
  .sidenav > .btn { margin-bottom: 10px; flex: none; }
  .sidenav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-control); color: var(--text-2); font-weight: var(--fw-label); font-size: var(--fs-small); flex: none; }
  .sidenav a .ic { width: 18px; height: 18px; }
  .sidenav a:hover { background: var(--surface-2); color: var(--text); }
  .sidenav a.on { background: var(--surface-2); color: var(--link); }
  .sidenav hr { border: 0; border-top: 1px solid var(--border); margin: 8px 4px; }
  /* costeo: one line per row (description · vendor · qty/cost/markup · totals) */
  .qline:not(.addline) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.9fr) 128px; gap: 4px 10px; align-items: end; padding-bottom: 10px; }
  .qline:not(.addline) .vsel, .qline:not(.addline) .meta3 { margin-top: 0; }
  .qline:not(.addline) .foot { flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 0; margin: 0; padding-bottom: 4px; }
  .qline:not(.addline) .line-err { grid-column: 1 / -1; }
  .addline .addrow3 .vsel, .addline .addrow3 .meta3 { margin-top: 0; }
  .addline .addrow3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.9fr); gap: 10px; align-items: end; }
  .desk-only { display: inline-flex; }
  .tabbar { display: none; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the Agenda: the week grid replaces the strip and takes the width */
  main.wide { max-width: 1180px; }
  .weekstrip { display: none; }
  .weekgrid { display: block; padding: 0; overflow: hidden; }
  .wg-head, .wg-allrow, .wg-body { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); }
  .wg-head, .wg-allrow { border-bottom: 1px solid var(--border); }
  .wg-day { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: var(--hit); padding: 8px 4px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; }
  .wg-day span { font-size: var(--fs-caption); font-weight: var(--fw-label); }
  .wg-day b { font-size: var(--fs-section); color: var(--text); line-height: 1.15; }
  .wg-day.today b { color: var(--link); }
  .wg-day.sel, .wg-ad.sel { background: var(--surface-2); }
  .wg-day:hover { background: var(--surface-2); }
  .wg-lbl { align-self: center; padding: 6px; font-size: 11px; color: var(--text-2); text-align: right; }
  .wg-ad { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 34px; padding: 4px; border-left: 1px solid var(--border); }
  .wg-chip { display: block; width: 100%; min-width: 0; padding: 3px 6px; border: 0; border-radius: 6px; background: var(--info-bg); color: var(--info); font: inherit; font-size: 12px; font-weight: var(--fw-label); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .wg-chip.k-trabajo { background: var(--warn-bg); color: var(--warn); }
  .wg-chip.k-otro, .wg-chip.t { background: var(--neutral-bg); color: var(--neutral); }
  .wg-chip.t { cursor: default; }
  .wg-chip.t.done, .wg-chip.st-cancelada { text-decoration: line-through; }
  .wg-body { position: relative; }
  .wg-hours { position: relative; }
  .wg-hours span { position: absolute; right: 6px; margin-top: 2px; font-size: 11px; color: var(--text-2); white-space: nowrap; }
  .wg-col { position: relative; min-width: 0; border-left: 1px solid var(--border); background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% 48px; cursor: copy; }
  .wg-col.sel { background-color: var(--surface-2); }
  .wg-ev { position: absolute; display: flex; flex-direction: column; min-width: 0; padding: 3px 6px; border: 0; border-left: 3px solid var(--info); border-radius: 6px; background: var(--info-bg); color: var(--info); font: inherit; text-align: left; overflow: hidden; cursor: pointer; }
  .wg-ev b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wg-ev small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wg-ev.short { padding-top: 1px; padding-bottom: 1px; }
  .wg-ev.short small { display: none; }
  .wg-ev.k-trabajo { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
  .wg-ev.k-otro { border-left-color: var(--neutral); background: var(--neutral-bg); color: var(--neutral); }
  .wg-ev.st-completada { border-left-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
  .wg-ev.st-cancelada { border-left-color: var(--border-input); background: var(--neutral-bg); color: var(--neutral); text-decoration: line-through; }
  .wg-ev:hover, .wg-chip:hover { box-shadow: var(--shadow); }
  .wg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); pointer-events: none; }
  .edbar { bottom: 12px; }
  .toast { bottom: 24px; }
  .sheet { align-items: center; padding: 24px; }
  .sheet-card { border-radius: var(--r-sheet); }
  .sheet-card > .actions:last-child { bottom: -16px; margin-bottom: -16px; padding-bottom: 16px; }
  .sheet-handle { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* ================= S8: Ajustes por secciones (public/js/ajustes.js) ================= */
.aj-list .lsub { white-space: normal; }
.aj-intro { margin: 0 0 4px; }
.aj-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: end; }
.aj-f { grid-column: 1 / -1; min-width: 0; }
.aj-f.half { grid-column: auto; }
.aj-f .chk { margin-top: 12px; white-space: normal; }
.aj-hint { margin-top: 4px; font-size: var(--fs-caption); color: var(--text-3); line-height: var(--lh-body); }
.aj-err { margin-top: 6px; font-size: var(--fs-small); font-weight: var(--fw-label); color: var(--bad); }
.aj-f input[aria-invalid="true"], .aj-f textarea[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.aj-note { margin: 12px 0 0; }
.aj-result { margin: 8px 0 0; min-height: 1em; }
.aj-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.aj-dl dt { color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-label); }
.aj-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.aj-backups { margin: 8px -16px 0; }
.aj-backups .lrow { min-height: 52px; cursor: default; }
.aj-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-small); overflow-wrap: anywhere; }
@media (max-width: 380px) { .aj-f.half { grid-column: 1 / -1; } }