/* ==========================================================================
   Invoice app styles. Irving Lopez brand: near-black + sky blue, Inter.
   Light working surface (readable outdoors), dark top bar.
   Mobile-first; on desktop the same phone-width column is centered.
   ========================================================================== */

:root {
  --sky: #0ea5e9;          /* brand accent (on dark) */
  --sky-light: #38bdf8;
  --blue: #0369a1;         /* accent on light: 5.9:1 on white */
  --blue-hover: #075985;
  --blue-tint: #e0f2fe;
  --bg-dark: #080808;
  --card-dark: #141414;
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #111418;
  --ink-soft: #4a5059;
  --mute: #6b7280;         /* 4.8:1 on white */
  --line: #e3e6ea;
  --danger: #b42318;
  --ok: #157f3c;
  --gold: #f5a623;
  --radius: 14px;
  --radius-sm: 10px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bar-h: 64px;
}

/* One rule for every [hidden], so component display rules can never
   override it (this bug hit the old tool three times). */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
body.is-locked { overflow: hidden; }
input, textarea, select, button { font: inherit; color: inherit; }
/* 16px+ inputs stop iOS Safari from zooming on focus. */
input, textarea, select { font-size: 16px; }
a { color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Tables ignore width:1px; make it a block so it can't widen the page. */
table.sr-only { display: block; }
/* Nothing may ever make the page wider than the phone. */
html, body { overflow-x: clip; }
em { font-style: normal; color: var(--mute); font-weight: 400; }

/* --- Brand mark (the "IL" tile) ------------------------------------------- */
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--sky); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}
.mark--sm { width: 30px; height: 30px; border-radius: 7px; font-size: 12px; flex: none; }

/* --- Skeleton loading: grey shapes that shimmer where data is on its way ------------- */
.skel { display: block; border-radius: 12px; background: linear-gradient(90deg, #e6e9ed 25%, #f2f4f6 40%, #e6e9ed 60%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.splash { position: fixed; inset: 0; background: var(--bg); overflow: hidden; }
.skel-app { max-width: 640px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; display: grid; gap: 14px; }
.skel-top { display: flex; align-items: center; gap: 12px; height: 40px; }
.skel-line { height: 18px; border-radius: 6px; }
.skel-w40 { width: 40%; }
.skel-pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skel-pipe .skel { height: 96px; }
.skel-chart { height: 230px; }
.skel-row { height: 64px; }
/* Opening a saved document: its cards show a placeholder until the server answers */
[data-view="editor"].is-loading .card { position: relative; min-height: 110px; overflow: hidden; }
[data-view="editor"].is-loading .card > * { visibility: hidden; }
[data-view="editor"].is-loading .card::after { content: ''; position: absolute; inset: 16px; border-radius: 10px; background: linear-gradient(90deg, #e6e9ed 25%, #f2f4f6 40%, #e6e9ed 60%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-hover); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { border-color: #c9ced5; }
.btn-danger { background: var(--card); color: var(--danger); border-color: #f1c7c3; }
.btn-block { width: 100%; }
.btn-link {
  background: none; border: 0; padding: 6px 2px; color: var(--blue); font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none;
}
:focus-visible { outline: 3px solid var(--sky-light); outline-offset: 2px; }

/* --- Segmented control ------------------------------------------------------- */
.seg { display: flex; gap: 4px; padding: 4px; background: #e9edf1; border-radius: 12px; }
.seg__btn {
  flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font-weight: 600; font-size: 15px; color: var(--ink-soft);
}
/* Colour rule (DESIGN.md): deep blue = a button that DOES something (Save, Send, New). Anything chosen or already answered is light blue, like the active tab. */
.seg__btn.is-active { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1.5px #7dd3fc; font-weight: 700; }
/* Invoice | Quote: bigger, and the chosen one carries a check mark so it never depends on colour alone */
.ed-type .seg__btn { min-height: 46px; font-size: 16px; }
.ed-type .seg__btn.is-active::before { content: "\2713\00a0"; }
.seg--small .seg__btn { min-height: 36px; font-size: 14px; }
.seg--tiny { padding: 3px; border-radius: 9px; }
.seg--tiny .seg__btn { min-height: 34px; min-width: 38px; padding: 0 8px; font-size: 15px; }

/* --- Fields -------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea, textarea, .search {
  width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
textarea { resize: vertical; }
.field input:focus, .field select:focus, textarea:focus, .search:focus, .item select:focus, .item input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
.field__hint { color: var(--mute); font-size: 13px; }
.field--inline { margin: 0; }
.field--inline select { min-height: 40px; padding: 6px 10px; font-weight: 600; }
.field--color input { padding: 4px; height: 48px; width: 80px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- Auth screen --------------------------------------------------------------- */
.auth {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  padding-top: calc(24px + var(--safe-top)); background: var(--bg);
}
.auth__card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 20px; }
.auth__heading { font-size: 20px; margin: 4px 0 8px; }
.auth__help { color: var(--ink-soft); margin: 0 0 16px; }
.auth__link { display: block; margin: 14px auto 0; }
.form-ok { color: var(--ok); font-weight: 600; margin: 0 0 12px; }
.auth__brand { display: flex; align-items: center; gap: 12px; }
.auth__name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.auth__tag { color: var(--ink-soft); margin: 10px 0 18px; }
.auth .seg { margin-bottom: 18px; }
.form-error { color: var(--danger); font-weight: 600; margin: 0 0 12px; }
.lang-switch { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--blue); font-weight: 600; cursor: pointer; padding: 8px; }

/* --- Shell: top bar, main, tab bar ------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  min-height: calc(52px + var(--safe-top)); padding: var(--safe-top) 16px 0;
  background: rgba(244, 246, 248, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.topbar__title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__back {
  display: inline-flex; align-items: center; gap: 2px; margin-left: -8px; padding: 8px 6px;
  background: none; border: 0; color: var(--blue); font-weight: 600; cursor: pointer;
}
.topbar__back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.main {
  max-width: 560px; margin: 0 auto; padding: 12px 16px calc(var(--bar-h) + 32px + var(--safe-bottom));
}

.tabbar, .actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding-bottom: var(--safe-bottom); background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line); backdrop-filter: blur(8px);
}
.tabbar { display: flex; justify-content: space-around; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: var(--bar-h); justify-content: center; text-decoration: none; color: var(--mute); font-size: 12px; font-weight: 600;
}
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-active { color: var(--blue); }
/* Center "+": the one way to start an invoice or quote, from any screen. */
.tab--new { color: var(--ink); }
.tab__plus {
  display: grid; place-items: center; width: 44px; height: 44px; margin-top: -14px; border-radius: 50%;
  background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(3, 105, 161, .35);
}
.tab__plus svg { width: 24px; height: 24px; stroke-width: 2.4; }
.actionbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px calc(10px + var(--safe-bottom)); }
.actionbar__hint { flex: 1 0 100%; margin: 0; font-size: 13px; font-weight: 600; color: #8a5a00; background: #fef3c7; border-radius: 8px; padding: 7px 10px; }
.actionbar__hint.is-nudge { animation: nudge .45s ease; }
@keyframes nudge { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* Send stays tappable (so it can explain itself) but looks unavailable until the document is ready. */
.btn[aria-disabled="true"] { opacity: .5; box-shadow: none; }
.field-missing input, .field-missing .item__type { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.actionbar .btn { flex: 1; padding: 0 10px; white-space: nowrap; font-size: 15px; }
@media (max-width: 420px) { .actionbar .btn svg { display: none; } }
.actionbar .btn-primary { flex: 1.4; }

/* --- Cards ------------------------------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card__title { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.card__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.card--collapse { padding: 0 16px; }
.biz-groups { display: block; }
.card--collapse[open] { padding-bottom: 16px; }
.card__summary { display: flex; align-items: center; gap: 12px; padding: 16px; margin: 0 -16px; cursor: pointer; list-style: none; }
.card__summary::-webkit-details-marker { display: none; }
.card__summary-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card__summary .card__title { margin: 0; }
.card__peek { color: var(--ink-soft); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__peek.is-cta { color: var(--blue); font-weight: 600; }
.card__sub { margin: -6px 0 10px; color: var(--ink-soft); font-size: 14px; }
.card__summary-text .card__sub { margin: 0; }
/* Bill to: same shape as the line items below it. Title, a plain sentence, then a dashed "Add client" button
   while empty, or a filled box (name, phone, place) with an Edit tag once there is a client. */
[data-ed-client-card] .card__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 10px; }
[data-ed-client-card] .card__summary-text { display: contents; }
[data-ed-client-card] .card__title { grid-column: 1 / -1; }
[data-ed-client-card] .card__sub { grid-column: 1 / -1; margin: -6px 0 0; }
[data-ed-client-card] .card__peek { grid-column: 1 / -1; grid-row: 3; box-sizing: border-box; min-height: 48px; line-height: 46px; padding: 0 56px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-size: 16px; font-weight: 600; }
[data-ed-client-card] .chev { grid-column: 2; grid-row: 3; z-index: 1; justify-self: end; margin-right: 8px; }
[data-ed-client-card].is-empty:not([open]) .chev { display: none; }
[data-ed-client-card].is-empty .card__sub { display: block; }
[data-ed-client-card]:not(.is-empty) .card__sub, [data-ed-client-card][open] .card__sub { display: none; }
[data-ed-client-card].is-empty:not([open]) .card__peek { padding: 0 14px; text-align: center; border: 1.5px dashed #b8c2cc; border-radius: var(--radius-sm); background: none; color: var(--blue); }
[data-ed-client-card].is-empty:not([open]) .card__peek::before { content: "+"; margin-right: 8px; font-size: 22px; line-height: 1; font-weight: 500; }
/* Open: the summary box goes away (the form below says it all); only the title and the chevron stay, on one line */
[data-ed-client-card][open] .card__peek { display: none; }
[data-ed-client-card][open] .card__title { grid-column: 1; }
[data-ed-client-card][open] .chev { grid-row: 1; margin-right: 0; }
[data-ed-client-card][open] .card__summary { row-gap: 0; }
/* Every fold-away card ends in a blue chevron in a soft circle: points down = tap to open, up = tap to close */
.chev { box-sizing: border-box; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--blue-tint); fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex: none; }
details[open] .chev { transform: rotate(180deg); }
.eyebrow { font-size: 13px; color: var(--mute); font-weight: 600; }
.docno { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.docno.is-pending { font-size: 15px; font-weight: 500; color: var(--mute); }

/* --- Docs list ------------------------------------------------------------------- */
.setup-banner {
  background: var(--blue-tint); border: 1px solid #bae6fd; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.setup-banner p { margin: 0 0 4px; }
.new-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.search { margin-bottom: 10px; }
.list { list-style: none; margin: 14px 0 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list:empty { display: none; }
.list li + li { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; min-height: 64px;
  background: none; border: 0; text-align: left; text-decoration: none; color: inherit; cursor: pointer;
}
.row:hover { background: #fafbfc; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { color: var(--mute); font-size: 14px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.row__amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.badge--draft { background: #eef0f3; color: #4a5059; }
.badge--sent { background: var(--blue-tint); color: var(--blue); }
.badge--paid { background: #dcfce7; color: var(--ok); }
.badge--quote { background: #fef3c7; color: #8a5a00; }
.empty { text-align: center; color: var(--mute); padding: 32px 12px; }

/* --- Line items ---------------------------------------------------------------- */
.item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; background: #fcfcfd; }
.item__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.item__num { font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.item__remove { background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; color: var(--mute); }
.item__remove svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.item select, .item input, .item textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.item__type.is-empty { color: var(--mute); }
.item__type, .item__input { margin-bottom: 8px; }
.item__desc { margin-bottom: 8px; }
.item__desc textarea { margin-bottom: 0; }
.item__nums { display: grid; grid-template-columns: 0.8fr 1.1fr 1.3fr; gap: 8px; }
.item__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.item__nums select, .item__nums input { height: 46px; box-sizing: border-box; }
.item__field select { padding: 10px 6px; }
.client-done { margin-top: 6px; min-height: 50px; }
.affix-box { position: relative; display: block; }
.affix-box .affix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--mute); pointer-events: none; }
.affix-box input { padding-left: 24px; padding-right: 24px; }
/* The numbers people type (price, quantity, tax, discount, deposit) sit in the middle of their box. */
.item__nums input[type="number"], .tline__input input { text-align: center; }
.item__amount { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; color: var(--ink-soft); font-size: 14px; }
.item__amount strong { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.btn-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
  border: 1.5px dashed #b8c2cc; border-radius: var(--radius-sm); background: none; color: var(--blue); font-weight: 600; cursor: pointer;
}
.btn-add[hidden] { display: none; }
.btn-add--sm { flex: 1 1 auto; width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-add--inline { width: auto; flex: none; min-height: 44px; padding: 0 14px; }
.btn-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* --- Totals --------------------------------------------------------------------- */
.trow { display: flex; justify-content: space-between; padding: 6px 0; font-variant-numeric: tabular-nums; }
.trow--total { border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 12px; font-size: 19px; font-weight: 700; }
.add-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.tline { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label out" "input input"; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.tline__label { grid-area: label; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tline__remove { background: none; border: 0; color: var(--danger); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px; }
.tline__input { grid-area: input; display: flex; align-items: center; gap: 8px; }
.tline__input input { flex: 1; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tline__input .affix { color: var(--mute); font-weight: 600; }
.tline__out { grid-area: out; align-self: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.ed-more { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
.ed-more .btn { flex: 0 1 auto; min-height: 44px; padding: 0 22px; font-size: 15px; }
.status { min-height: 1.4em; margin: 8px 0; font-weight: 600; color: var(--ink-soft); }
.status--error { color: var(--danger); }
.status--ok { color: var(--ok); }

/* --- Business -------------------------------------------------------------------- */
.logo-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-box img { max-width: 160px; max-height: 80px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.logo-box__btns { display: flex; align-items: center; gap: 10px; }
.account-line { text-align: center; color: var(--mute); font-size: 14px; }

/* --- Preview + sheet ---------------------------------------------------------------- */
.preview { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #1f2328; }
.preview__bar { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-top)) 16px 10px; background: var(--bg-dark); color: #fff; }
.preview__title { margin: 0; font-size: 16px; }
.preview__close { background: none; border: 0; color: #fff; padding: 8px; margin: -8px; cursor: pointer; }
.preview__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* touch-action lets people pinch-zoom the preview pages. */
.preview__pages { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; touch-action: pan-x pan-y pinch-zoom; }
.preview__page { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.35); max-width: 100%; height: auto; }
.preview__msg { color: #e5e7eb; margin-top: 40px; }
.preview__msg--error { color: #fca5a5; }
.preview__actions { padding: 10px 16px calc(10px + var(--safe-bottom)); background: var(--bg-dark); }

.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.45); }
.sheet__card { width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; background: var(--card); border-radius: 18px 18px 0 0; padding: 20px 16px calc(16px + var(--safe-bottom)); }
.sheet__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet__btns .btn { flex: 1 1 auto; }

@media (min-width: 700px) {
  .sheet { align-items: center; }
  .sheet__card { border-radius: 18px; }
}

/* --- Feedback: toast, save indicator, pressed and busy states ------------- */
.toast {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  top: calc(64px + var(--safe-top)); max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px; background: #111418; color: #fff;
  font-weight: 600; font-size: 15px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  animation: toast-in .18s ease-out;
}
.toast--ok { background: var(--ok); }
.toast--error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.topbar__icon { display: none; place-items: center; width: 40px; height: 40px; margin: 0 -8px 0 4px; border: 0; border-radius: 10px; background: none; color: var(--blue); cursor: pointer; }
.topbar__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.in-editor .topbar__icon { display: grid; }
.topbar__icon--more svg { fill: currentColor; stroke: none; }
.topbar__icon--more { margin: 0 -8px 0 0; }
.ed-menu { position: fixed; z-index: 30; top: calc(52px + env(safe-area-inset-top, 0px)); right: 12px; min-width: 200px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ed-menu[hidden] { display: none; }
.ed-menu__item { display: block; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ed-menu__item[hidden] { display: none; }
.ed-menu__item:active, .ed-menu__item:hover { background: #f3f5f7; }
.ed-menu__item--danger { color: var(--danger); }
.topbar__icon[hidden] { display: none !important; }
.topbar__cta { display: none; margin-left: auto; min-height: 40px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.topbar__cta:not([hidden]) { display: block; }
.topbar__cta:disabled { opacity: .6; }
.topbar__cta:active { transform: scale(.97); }
.topbar__save { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.topbar__save[data-state="saved"] { color: var(--ok); }
.topbar__save[data-state="saved"]::before { content: "✓ "; }
@media (max-width: 420px) { .topbar__save[data-state="saved"] { font-size: 0; } .topbar__save[data-state="saved"]::before { content: "✓"; font-size: 17px; } } /* phones: just the check, so the title keeps its room */
.topbar__save[data-state="error"] { color: var(--danger); }
body:not(.in-editor) .topbar__save { display: none; }

/* Every tap target reacts instantly; no double-tap zoom delay. */
button, a, .row, .tab, select, label.btn { touch-action: manipulation; }
.btn:active:not(:disabled), .seg__btn:active, .btn-link:active, .btn-add:active, .tab:active, .row:active, .topbar__back:active {
  transform: scale(0.97); opacity: 0.8;
}
.btn, .seg__btn, .btn-add, .tab, .row { transition: transform .08s ease, opacity .08s ease, background-color .15s; }

.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy svg { visibility: hidden; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: var(--ink-soft) transparent var(--ink-soft) transparent;
  animation: spin .7s linear infinite;
}
.btn-primary.is-busy::after { border-color: #fff transparent #fff transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Keyboard open on a phone: hide the fixed bottom bars (see app.js). */
body.kb-open .actionbar, body.kb-open .tabbar { display: none; }

.btn.is-busy:disabled { opacity: 1; }

/* --- Home ----------------------------------------------------------------- */
.kpi-hero { padding: 18px 16px; }
.kpi__label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.kpi-hero__value { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 2px; }
.kpi__sub { color: var(--mute); font-size: 14px; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.kpi-grid .card { margin: 0; padding: 14px; }
.kpi__value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.chart-sub { margin: -8px 0 8px; color: var(--mute); font-size: 13px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-bar { fill: #0284c7; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-base { stroke: #c9ced5; stroke-width: 1; }
.chart-tick { fill: var(--mute); font-size: 11px; font-family: var(--font); }
.chart-val { fill: var(--ink); font-size: 11px; font-weight: 700; font-family: var(--font); }
.chart-hit { fill: transparent; cursor: pointer; outline: none; }
.chart-hit:hover, .chart-hit:focus { fill: rgba(2, 132, 199, 0.06); }
.chart-tip { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.list--flush { margin: 0 -16px -16px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.empty-cta { text-align: center; padding: 8px 0 4px; }
.empty-cta p { color: var(--mute); margin: 0 0 12px; }

/* --- Editor type switch ---------------------------------------------------- */
.ed-type { margin-bottom: 14px; }

/* --- Send sheet ------------------------------------------------------------ */
.send-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.send-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-align: left; cursor: pointer;
}
.send-opt:active:not(:disabled) { transform: scale(0.98); }
.send-opt:disabled { opacity: .55; cursor: default; }
.send-opt__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-tint); color: var(--blue); flex: none; }
.send-opt__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.send-opt__text { display: flex; flex-direction: column; min-width: 0; }
.send-opt__text small { color: var(--mute); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-opt.is-busy .send-opt__icon { animation: spin .8s linear infinite; }
[data-send-add-contact] { display: block; margin: 0 auto 10px; }

/* --- Home pipeline + three-series chart ------------------------------------ */
/* Quotes in light gray (de-emphasized), money in brand blues. Checked for
   color blindness: gray vs sky blue differ in lightness, not just hue. */
:root { --series-quoted: #b4bac4; --series-unpaid: #0ea5e9; --series-paid: #0369a1; }
.pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.pipe__card {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; text-decoration: none;
}
a.pipe__card:active { transform: scale(0.97); }
.pipe__label { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.25; min-height: 30px; }
.pipe__label .swatch { margin-top: 3px; }
.pipe__count { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.pipe__amount { font-size: 14px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pipe__note { color: var(--mute); font-size: 13px; margin: 0 2px 14px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.swatch--quoted { background: var(--series-quoted); }
.swatch--unpaid, .swatch--invoiced { background: var(--series-unpaid); }
.swatch--paid { background: var(--series-paid); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.chart-bar--quoted { fill: var(--series-quoted); }
.chart-bar--unpaid, .chart-bar--invoiced { fill: var(--series-unpaid); }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line--paid { stroke: var(--series-paid); }
.chart-dot--paid { fill: var(--series-paid); stroke: #fff; stroke-width: 2; }
/* Legend key for the line series: a short line with a dot, not a square. */
.swatch--line { width: 16px; height: 2px; border-radius: 1px; position: relative; }
.swatch--line::after { content: ""; position: absolute; left: 4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; }
.chart-hit.is-on { fill: rgba(17, 20, 24, 0.05); }
.chart-tip { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 4px 12px; min-height: 66px; margin-top: 8px; font-size: 13px; color: var(--ink); }
.chart-tip strong { width: 100%; font-size: 14px; }
.chart-tip span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.chart-tip.is-hint { color: var(--mute); }

/* --- Type vs status ---------------------------------------------------------
   Type: icon tile + word ("Factura"/"Cotización"). Status: the badge. */
.row__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex: none; }
.row__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.row__icon--invoice { background: var(--blue-tint); color: var(--blue); }
.row__icon--quote { background: #eef0f3; color: #4a5059; }
.row__type { font-weight: 600; color: var(--ink-soft); }
/* The type/number/date line may wrap instead of being cut off. */
.row .row__sub { white-space: normal; overflow: visible; text-overflow: clip; }
.badge--accepted { background: #dcfce7; color: var(--ok); }
.badge--declined { background: #fde8e6; color: var(--danger); }

.chips { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-soft); font-weight: 600; font-size: 13px; cursor: pointer;
}
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:active { transform: scale(0.97); }

/* --- Status pills (the one action per row) ---------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px;
  border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; border: 1.5px solid transparent;
  background: none; cursor: pointer;
}
.pill--action { border-color: var(--blue); color: var(--blue); background: var(--card); }
.pill--done { background: #dcfce7; color: var(--ok); }
span.pill, .pill:disabled { cursor: default; }
.pill.is-busy { color: transparent; position: relative; }
.pill.is-busy::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--blue); border-color: var(--blue) transparent var(--blue) transparent; animation: spin .7s linear infinite;
}
.card__row .pill { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* --- Rows: ⋯ button and swipe ------------------------------------------------ */
.row__side { gap: 6px; }
.row__side-top { display: flex; align-items: center; gap: 2px; margin-right: -8px; }
.row__more { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: var(--mute); border-radius: 8px; cursor: pointer; }
.row__more svg { width: 20px; height: 20px; fill: currentColor; }
.row__more:active { background: #eef0f3; }
.swipe { position: relative; overflow: hidden; }
.swipe .row { position: relative; background: var(--card); touch-action: pan-y; transition: transform .22s ease; }
.swipe .row.is-dragging { transition: none; }
.swipe__bg {
  /* The strip revealed on the right as the row slides left; its width follows
     the finger. The label sits in the middle of the strip, both ways. */
  position: absolute; top: 0; bottom: 0; right: 0; width: 0; overflow: hidden; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; padding: 0;
  font-weight: 700; font-size: clamp(13px, 3.8vw, 15px); line-height: 1.2; color: #fff; background: #4a5059;
}
.swipe__label { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
.swipe__bg:not(.is-armed) { opacity: .8; }

/* --- ⋯ menu ----------------------------------------------------------------- */
.row-sheet__sub { margin: -6px 0 12px; color: var(--mute); }
.send-opt--plain { min-height: 52px; justify-content: flex-start; font-weight: 600; font-size: 16px; }
.send-opt--danger { color: var(--danger); }
/* A row being pressed or swiped stays solid (the pressed fade would show
   the swipe colors through it). */
.swipe .row:active { opacity: 1; transform: none; }

/* Send sheet: copy-link fallback field and status line */
.send-link { width: 100%; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line, #e3e6ea); border-radius: 10px; background: #f4f6f8; font: inherit; font-size: 14px; }
.send-link[hidden] { display: none; }
.send-status { min-height: 20px; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ok); }
.send-status.is-error { color: var(--danger); }

/* --- Can't-load screen --------------------------------------------------------------- */
.fatal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); overflow: auto; }
.fatal[hidden] { display: none; }
.fatal__box { width: 100%; max-width: 420px; text-align: center; }
.fatal__box h1 { font-size: 24px; margin: 14px 0 8px; letter-spacing: -0.02em; }
.fatal__box p { color: var(--ink-soft); margin: 0 0 16px; }
.fatal__code { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; margin-top: 16px !important; }
.fatal__help { font-size: 14px; }

/* Paid invoices: a small green tag after the client's name (no extra height) */
.row__title--tag { display: flex; align-items: center; gap: 8px; }
.row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__paid { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: var(--ok); font-size: 12px; font-weight: 700; line-height: 1.5; }
.row__paid::before { content: '✓'; font-size: 11px; }

/* Date and PDF language: folded away under the invoice number */
.ed-opts { margin-top: 4px; border-top: 1px solid var(--line); }
.ed-opts__sum { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; min-height: 52px; }
.ed-opts__sum::-webkit-details-marker { display: none; }
.ed-opts__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-opts__title { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.ed-opts .field:last-child { margin-bottom: 0; }

/* iOS Safari sizes date inputs by their content and lets them spill out of the card; pin them to the field width */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }

/* --- Billing: trial note, paywall, plan card ----------------------------------------- */
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #e0f2fe; color: #075985; font-weight: 600; font-size: 14px; }
.trial-banner[hidden] { display: none; }
.trial-banner p { margin: 0; }
.trial-banner .btn-link { white-space: nowrap; font-weight: 700; }
.billing__status { margin: 0 0 4px; font-weight: 700; font-size: 17px; }
.billing__sub { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
.billing__status + .btn { margin-top: 10px; }
.paywall { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--bg); padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); }
.paywall[hidden] { display: none; }
.paywall__box { max-width: 460px; margin: 0 auto; text-align: center; display: grid; gap: 14px; justify-items: stretch; }
.paywall__lang { justify-self: end; min-height: 44px; font-weight: 700; }
.paywall__box h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
.paywall__lead { margin: 0; color: var(--ink-soft); }
.plans { display: grid; gap: 12px; margin: 6px 0; }
.plan { position: relative; display: grid; gap: 4px; padding: 18px 16px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; text-align: center; }
.plan--best { border-color: var(--blue); box-shadow: 0 8px 24px -12px rgba(3, 105, 161, .5); }
.plan__tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.plan__name { font-weight: 700; font-size: 16px; color: var(--ink-soft); }
.plan__price b { font-size: 34px; letter-spacing: -0.02em; }
.plan__price small { font-size: 15px; color: var(--ink-soft); margin-left: 2px; }
.plan__note { font-size: 13px; color: var(--ink-soft); }
.plan__btn { display: grid; place-items: center; min-height: 48px; margin-top: 8px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 700; font-size: 16px; }
.paywall__fine { margin: 0; color: var(--mute); font-size: 13px; }

/* Signup: the free-trial promise, and the plan chosen on the landing page */
.auth__trial { display: grid; gap: 2px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #e0f2fe; color: #075985; font-size: 14px; line-height: 1.35; text-align: left; }
.auth__trial[hidden] { display: none; }
.auth__trial strong { font-size: 15px; }
.paywall__pick { margin: -4px 0 0; color: var(--blue); font-weight: 700; font-size: 15px; }
.plan:not(.plan--best) { border-style: dashed; }
.plan__btn--ghost { background: transparent; color: var(--blue); border: 1px solid var(--blue); }

.auth__bullets { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.auth__bullets li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.3; white-space: nowrap; }
.auth__bullets li::before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #0369a1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.auth__bullets li:first-child { font-weight: 700; }

/* Job type: a button that opens the searchable picker (the real <select> stays hidden underneath) */
.item__typebtn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; text-align: left; cursor: pointer; font-weight: 500;
}
.item__typebtn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item__typebtn.is-empty { color: var(--mute); font-weight: 400; }
.item__relist { display: block; margin: -2px 0 8px; padding: 4px 0; font-size: 14px; }
.item__otherlabel { display: block; margin: 0 0 4px; }
.field-missing .item__typebtn { border-color: var(--danger) !important; }
/* The job type pickers are drawers like every other sheet: they rise from the bottom, leave a strip of the page
   showing above them (tap it to close), and are sized from the visual viewport in app.js so they never shrink
   while you type and never slide under the keyboard. */
.sheet--type { align-items: flex-end; background: rgba(0,0,0,.45); }
.sheet__card--tall { display: flex; flex-direction: column; max-height: none; height: calc(100% - 56px); max-width: 640px; margin: 0 auto; border-radius: 18px 18px 0 0; }
@media (min-width: 640px) { .sheet--type { align-items: center; } .sheet__card--tall { height: min(100% - 48px, 720px); border-radius: 18px; padding-top: 20px; } }
.sheet__card--tall .search { margin-bottom: 8px; }
.type-list { position: relative; flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px 10px; padding: 0 4px; -webkit-overflow-scrolling: touch; }
.type-group { margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.type-opt { display: block; width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 16px; cursor: pointer; }
.type-opt:active { background: #eef0f3; }
/* "Other: type your own" is always the first thing in the list and stays in view while scrolling */
.type-opt--other { margin-top: 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--mute); font-weight: 600; }
.type-opt--other.is-use { position: sticky; top: 0; z-index: 1; margin: 0 0 4px; border: 1px solid var(--sky); border-radius: var(--radius-sm); background: #f0f9ff; color: var(--blue); font-weight: 700; }
.type-opt__main { display: flex; flex-direction: column; min-width: 0; }
.type-opt__main small { color: var(--mute); font-weight: 400; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-hint--top { margin: 0 0 10px; }
.sheet__card--scroll { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.setup-step { margin: 0 0 4px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.type-empty { margin: 14px 4px; color: var(--mute); font-size: 14px; }
.item__nums + .item__input { margin-top: 8px; }

/* --- Job type picker: categories → services (multi-select) --------------------------- */
.tsheet__head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.tsheet__head .card__title { margin: 0; flex: 1; }
.tsheet__back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.tsheet__back[hidden] { display: none; }
.tsheet__back svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.type-opt--cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.type-opt__n { flex: none; color: var(--mute); font-weight: 500; }
.type-opt--svc small { display: block; color: var(--mute); font-size: 13px; }
.type-opt.is-on { position: relative; padding-right: 44px; background: var(--blue-tint); color: var(--blue); font-weight: 700; box-shadow: inset 4px 0 0 #7dd3fc; }
.type-opt.is-on::after { content: "\2713"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid #7dd3fc; color: var(--blue); font-size: 14px; font-weight: 700; }
.type-opt--cat.is-on .type-opt__n { margin-right: 4px; }
.type-now { margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: #f0f9ff; border: 1px solid #bae6fd; color: var(--blue); font-size: 15px; font-weight: 700; }
.type-hint { margin: 10px 4px 4px; color: var(--mute); font-size: 14px; }
.type-svc { display: flex; align-items: center; gap: 12px; }
.type-svc__price { margin-left: auto; color: var(--ink-soft); font-weight: 600; }
.type-check { flex: none; width: 24px; height: 24px; border: 2px solid #b8c0cc; border-radius: 7px; background: #fff; position: relative; }
.type-svc.is-on { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.type-svc.is-on .type-check { border-color: #7dd3fc; background: var(--blue-tint); }
.type-svc.is-on .type-check::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.type-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: #f0f9ff; border: 1px solid #bae6fd; max-height: 28dvh; overflow-y: auto; }
.type-picked[hidden] { display: none; }
.type-picked strong { color: var(--blue); font-size: 14px; margin-right: 4px; }
.type-picked small { flex-basis: 100%; color: var(--ink-soft); font-size: 12.5px; }
.chip--pick { min-height: 32px; padding: 0 10px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font-size: 14px; font-weight: 600; border-radius: 999px; cursor: pointer; }
.type-empty__sub { margin: 4px 0 10px; color: var(--mute); font-size: 14px; }
.type-opt--go { margin-top: 6px; border: 1px solid var(--sky); border-radius: var(--radius-sm); background: #fff; color: var(--blue); font-weight: 700; text-align: center; }
#type-sheet-title, #btype-title { margin: 0; }

/* --- How do you want to be paid (My business): tick the ways you accept; ticked = light blue ---------- */
.pay-list { display: flex; flex-direction: column; gap: 8px; }
.pay { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.pay.is-on { border-color: #7dd3fc; background: var(--blue-tint); }
.pay__head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.pay__text { display: flex; flex-direction: column; min-width: 0; }
.pay__text strong { font-size: 16px; }
.pay__text small { color: var(--ink-soft); font-size: 13px; }
.pay.is-on .pay__text strong { color: var(--blue); }
.pay.is-on .type-check { border-color: #7dd3fc; background: #fff; }
.pay.is-on .type-check::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pay__body { padding: 0 12px 12px 48px; }
.pay__body .field { margin: 0; }
.pay__qr { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 0 10px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pay__qr[hidden] { display: none; }
.pay__up { display: inline-flex; margin-right: 10px; }

/* --- Mis servicios (Mi negocio) ----------------------------------------------------- */
.card__hint { margin: -4px 0 12px; color: var(--ink-soft); font-size: 14px; }
.empty--inline { margin: 8px 0 12px; text-align: left; }
.cat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cat { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fcfcfd; }
.cat summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 12px; cursor: pointer; list-style: none; }
.cat summary::-webkit-details-marker { display: none; }
.cat summary::after { content: "›"; color: var(--mute); font-size: 20px; transition: transform .15s; }
.cat[open] summary::after { transform: rotate(90deg); }
.cat__name { font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cat__count { color: var(--mute); font-size: 13px; }
.cat__label { margin: 6px 0 -2px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.cat__body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.cat__input, .cat-add input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.cat__svc { display: flex; align-items: center; gap: 6px; }
/* My services: two numbered steps, so it is clear the list comes from the kind of work */
.svc-step { display: grid; gap: 8px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.svc-step__title { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; font-size: 17px; }
.svc-step__title b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #e8ecf1; color: var(--ink); font-size: 14px; }
.svc-step .card__hint, .svc-step .field__hint { margin: 0; }
[data-support-form] .seg { margin: 4px 0 14px; }
.cat__price { flex: none; width: 96px; text-align: right; }
.cat__x { flex: none; width: 40px; height: 44px; border: 0; background: none; color: var(--mute); font-size: 24px; line-height: 1; cursor: pointer; }
.cat-add { display: flex; gap: 8px; }
.cat-add .btn { flex: none; min-height: 44px; padding: 0 16px; }
.btn-link--danger { align-self: flex-start; color: var(--danger); }

/* --- Document rows: name + amount on the first line, date + "⋯" on the second ---------------------------
   The "⋯" button used to sit beside the amount and took ~100px, so the "Factura INV-1002 · 10 oct" line wrapped on
   most phones. Now only the amount sits on the first line, and the second line has the whole width less the 34px button. */
.row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.row__icon { grid-row: 1 / span 2; align-self: center; }
.row__main, .row__side, .row__side-top { display: contents; }
.row__title { grid-column: 2; grid-row: 1; }
.row__amount { grid-column: 3; grid-row: 1; justify-self: end; }
.row .row__sub { grid-column: 2 / 4; grid-row: 2; padding-right: 26px; } /* runs under the amount; the last 26px belong to the "⋯" button */
.row__more { grid-column: 3; grid-row: 2; justify-self: end; margin: -9px -8px -8px 0; }
/* Client rows have no icon, so they use two columns (text, ⋯) instead of leaving the icon column empty */
.row[data-kind="client"] { grid-template-columns: minmax(0, 1fr) auto; }
.row[data-kind="client"] .row__title { grid-column: 1; }
.row[data-kind="client"] .row__sub { grid-column: 1; padding-right: 0; }
.row[data-kind="client"] .row__more { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0 -8px 0 0; }

/* --- Guided first-invoice tour (tour.js) ------------------------------------ */
.tour { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.tour__dim { position: fixed; pointer-events: auto; } /* invisible: only stops taps outside the spotlight */
.tour__ring {
  position: fixed; border: 3px solid var(--sky-light); border-radius: 14px; pointer-events: auto; transition: border-radius .15s; /* a walkthrough: taps on the highlighted thing do nothing */
  box-shadow: 0 0 0 100vmax rgba(8, 8, 8, .6); /* the dark around the spotlight, with no seams */
}
.tour__ring::after {
  content: ''; position: absolute; inset: -7px; border-radius: inherit; border: 3px solid rgba(56, 189, 248, .35);
  animation: tour-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-pulse { 50% { transform: scale(1.03); opacity: .35; } }
.tour.is-waiting .tour__dim, .tour.is-waiting .tour__ring, .tour.is-waiting .tour__card { visibility: hidden; }
.tour__card {
  position: fixed; left: 12px; right: 12px; max-width: 460px; margin: 0 auto; pointer-events: auto;
  padding: 14px 16px 12px; background: #fff; border-radius: 16px; box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}
.tour__card { top: 0; }
/* The arrow points at what the card is about (--ax is set from the script). */
.tour__card::before { content: ''; position: absolute; left: var(--ax, 50%); width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); display: none; }
.tour__card.arrow-up::before { display: block; top: -7px; border-radius: 3px 0 0 0; }
.tour__card.arrow-down::before { display: block; bottom: -7px; border-radius: 0 0 3px 0; }
.tour__count { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.tour__title { margin: 2px 0 4px; font-size: 18px; font-weight: 800; color: var(--ink); }
.tour__body { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.tour__need { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--blue); }
.tour__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.tour__skip { font-size: 14px; color: var(--mute); }
.tour__next { min-height: 46px; padding: 0 26px; margin-left: auto; }
.tour__next:disabled { opacity: .45; }

.tour-modal {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8, 8, 8, .66); overflow-y: auto;
}
.tour-modal__card { width: 100%; max-width: 380px; padding: 26px 22px 18px; background: #fff; border-radius: 22px; text-align: center; box-shadow: 0 16px 48px rgba(0, 0, 0, .4); }
.tour-modal__mark {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  background: var(--bg-dark); color: var(--sky-light); font-size: 20px; font-weight: 800;
}
.tour-modal__mark--ok { background: var(--ok); color: #fff; font-size: 28px; }
.tour-modal__title { margin: 0 0 6px; font-size: 23px; font-weight: 800; color: var(--ink); }
.tour-modal__sub { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.tour-modal__list { list-style: none; counter-reset: tour; margin: 0 0 18px; padding: 0; text-align: left; }
.tour-modal__list li {
  counter-increment: tour; display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; font-weight: 600; color: var(--ink);
}
.tour-modal__list li::before {
  content: counter(tour); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue-tint); color: var(--blue); font-size: 14px; font-weight: 800;
}
.tour-modal__card .btn + .btn { margin-top: 10px; }
.tour-modal__later { display: block; margin: 12px auto 4px; color: var(--mute); }

/* ==========================================================================
   Desktop (>= 900px). Mobile-first: everything above is the phone layout and is
   untouched; this block only ever adds a left sidebar and uses the extra width.
   Same markup, same data-* hooks, same components. Keep it that way: a change
   that works on a phone must also look right here, and the other way round.
   ========================================================================== */
.list-head { display: none; }
@media (min-width: 900px) {
  :root { --side-w: 232px; --main-pad: 32px; }
  .shell { padding-left: var(--side-w); }
  .topbar { padding-left: max(var(--main-pad), calc((100% - 1160px) / 2 + var(--main-pad))); padding-right: max(var(--main-pad), calc((100% - 1160px) / 2 + var(--main-pad))); }
  .topbar__title { font-size: 22px; }
  .main { max-width: 1160px; padding: 24px var(--main-pad) 56px; }

  /* The bottom tab bar becomes a sidebar. Same links, same data-tab hooks (the tour points at them). */
  .tabbar {
    top: 0; right: auto; width: var(--side-w); flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 20px 12px; border-top: 0; border-right: 1px solid var(--line); background: #fff;
  }
  .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 15px; }
  .tab:hover { background: #eef2f6; }
  .tab.is-active { background: var(--blue-tint); color: var(--blue); }
  .tab--new { order: -1; justify-content: center; gap: 8px; margin-bottom: 14px; background: var(--blue); color: #fff; }
  .tab--new:hover { background: var(--blue-hover); }
  .tab--new .tab__plus { width: auto; height: auto; margin: 0; background: none; box-shadow: none; }
  .tab--new .tab__plus svg { width: 20px; height: 20px; }

  /* Home: summary cards across the top, the chart and "in progress" side by side. */
  [data-view="home"] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  [data-view="home"] > .trial-banner, [data-view="home"] > .setup-banner, [data-view="home"] > .pipe, [data-view="home"] > .pipe__note { grid-column: 1 / -1; }
  [data-view="home"] > .card { margin-bottom: 0; }
  .pipe { gap: 16px; margin-bottom: 10px; }
  .pipe__count { font-size: 34px; }

  /* Documents: search + filters in one toolbar, then a table-like list with aligned columns. */
  [data-view="docs"] { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 12px 16px; align-items: center; }
  [data-view="docs"] > * { margin: 0; }
  [data-view="docs"] > .chips, [data-view="docs"] > .list-head, [data-view="docs"] > .list, [data-view="docs"] > .empty { grid-column: 1 / -1; }
  .list-head, [data-view="docs"] .list .row { display: grid; grid-template-columns: 40px minmax(160px, 1.3fr) minmax(200px, 1.2fr) 150px 40px; align-items: center; gap: 0 16px; }
  .list-head { display: grid; padding: 4px 16px 0; color: var(--mute); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .list-head span:nth-child(4) { text-align: right; }
  /* One line per document: the phone layout places each part on a two-line grid; here each part gets its own column. */
  [data-view="docs"] .list .row { padding-top: 10px; padding-bottom: 10px; }
  [data-view="docs"] .list .row .row__icon { grid-column: 1; grid-row: 1; }
  [data-view="docs"] .list .row .row__title { grid-column: 2; grid-row: 1; }
  [data-view="docs"] .list .row .row__sub { grid-column: 3; grid-row: 1; padding-right: 0; margin-top: 0; }
  [data-view="docs"] .list .row .row__amount { grid-column: 4; grid-row: 1; justify-self: end; }
  [data-view="docs"] .list .row .row__more { grid-column: 5; grid-row: 1; justify-self: center; margin: 0; }
  [data-view="docs"] > .list { margin-top: 0; }

  /* Editor: the form on the left; the totals follow you on the right. */
  [data-view="editor"] { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); column-gap: 20px; align-items: start; }
  [data-view="editor"] > * { grid-column: 1; }
  [data-view="editor"] > [data-ed-totals] { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 76px; }
  .actionbar { left: var(--side-w); justify-content: flex-end; padding-left: max(var(--main-pad), calc((100% - var(--side-w) - 1160px) / 2 + var(--main-pad))); padding-right: max(var(--main-pad), calc((100% - var(--side-w) - 1160px) / 2 + var(--main-pad))); }
  .actionbar .btn, .actionbar .btn-primary { flex: 0 0 auto; min-width: 150px; }
  .actionbar__hint { flex: 1 0 100%; }

  /* Clients: a comfortable reading width instead of a stretched strip. */
  [data-view="clients"] { max-width: 820px; }

  /* My business: the profile on the left, services and account on the right. */
  [data-view="business"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  [data-view="business"] > .card, [data-view="business"] > .biz-groups:not([data-biz-form]) { grid-column: 2; }
  [data-view="business"] > [data-biz-form] { grid-column: 1; grid-row: 1 / span 6; }
  [data-view="business"] > .account-line { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  :root { --main-pad: 40px; }
}