/* Perla Dental: the books (conta slot). Ciruela top bar, Perla page, white invoices; Orquídea acts, Rubor marks what is paid,
   Lila marks what is selected. Colours and faces come only from the brand tokens. Layout: container queries on `demo`. */

.d-conta { height: 100%; background: var(--b-paper); color: var(--b-ink); font: 400 13px/1.45 var(--b-font-body); }
.d-conta .x-num, .d-conta td.num, .d-conta dd { font-variant-numeric: tabular-nums; }
.c-app { height: 100%; display: flex; flex-direction: column; }
.c-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-conta h4 { font: var(--b-display-weight) 19px/1.15 var(--b-font-display); letter-spacing: 0; }

/* top bar */
.c-top { flex: none; display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 10px 20px; background: var(--b-secondary); color: var(--b-on-secondary); }
.c-brand { display: flex; align-items: center; gap: 14px; flex: none; }
.c-place { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--b-on-secondary) 25%, var(--b-secondary)); color: color-mix(in srgb, var(--b-on-secondary) 78%, var(--b-secondary)); font-size: 12.5px; white-space: nowrap; }
.c-tabs { flex: 1; display: flex; justify-content: center; gap: 4px; min-width: 0; }
.c-tabs button { flex: none; min-height: 38px; padding: 8px 14px; border-radius: 999px; color: color-mix(in srgb, var(--b-on-secondary) 80%, var(--b-secondary)); font-weight: 500; font-size: 14px; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out; }
.c-tabs button:hover { background: color-mix(in srgb, var(--b-on-secondary) 10%, var(--b-secondary)); color: var(--b-on-secondary); }
.c-tabs button[aria-pressed="true"] { background: var(--b-c2); color: var(--b-secondary); font-weight: 600; }
.c-user { flex: none; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.c-user b { display: block; font-weight: 600; }
.c-user small { display: block; font-size: 12.5px; color: color-mix(in srgb, var(--b-on-secondary) 78%, var(--b-secondary)); }
.c-av { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--b-accent); color: var(--b-on-accent); font-weight: 700; font-size: 13px; }

.c-view { position: relative; flex: 1; min-height: 0; padding: 16px 20px 18px; }
.c-view > * { height: 100%; }
.motion .d-conta .c-view.swap > * { animation: c-in .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes c-in { from { opacity: 0; transform: translateY(8px); } }

/* shared parts */
.c-card { min-width: 0; min-height: 0; padding: 16px 18px; border: 1px solid var(--b-line); border-radius: var(--b-radius); background: var(--b-surface); }
.c-lh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.c-lh > b { font: var(--b-display-weight) 22px/1.1 var(--b-font-display); }
.c-k { color: var(--b-muted); font-size: 12.5px; }
.c-st { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 12.5px; line-height: 1.3; white-space: nowrap; }
.c-st.ok { background: var(--b-accent); color: var(--b-on-accent); }
.c-st.due { background: var(--b-c2); color: var(--b-secondary); }
.c-st.late { background: var(--b-secondary); color: var(--b-on-secondary); }
.c-st.sent { background: color-mix(in srgb, var(--b-primary) 12%, var(--b-surface)); color: var(--b-link); }
.c-st.todo { border: 1px solid var(--b-ink); padding: 2px 9px; color: var(--b-ink); }
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--b-primary); color: var(--b-on-primary); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color .15s ease-out, transform .15s ease-out; }
.c-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--b-secondary) 25%, var(--b-primary)); }
.c-btn:active:not(:disabled) { transform: translateY(1px); }
.c-btn:disabled { cursor: default; background: var(--b-c2); color: var(--b-secondary); }
.c-btn.sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.c-btn.wide { width: 100%; }
.c-btn.ghost { background: var(--b-surface); color: var(--b-link); box-shadow: inset 0 0 0 1.5px var(--b-primary); }
.c-btn.ghost:hover { background: color-mix(in srgb, var(--b-primary) 8%, var(--b-surface)); }
.c-done { display: inline-flex; align-items: center; gap: 8px; color: var(--b-link); font-weight: 600; font-size: 14px; }
.c-done .c-ico { stroke-width: 2.4; }
.c-mute { color: var(--b-muted); }
.c-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--b-paper); border: 1px solid var(--b-line); }
.c-seg button { min-height: 32px; padding: 5px 13px; border-radius: 999px; color: var(--b-muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.c-seg button:hover { color: var(--b-ink); }
.c-seg button[aria-pressed="true"] { background: var(--b-secondary); color: var(--b-on-secondary); }
.c-tbl th { padding: 8px 10px; border-bottom: 1px solid var(--b-line); color: var(--b-muted); font-weight: 600; font-size: 12.5px; text-align: left; white-space: nowrap; }
.c-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--b-line); font-size: 13px; }
.c-tbl .num { text-align: right; white-space: nowrap; }
.c-tbl tbody tr { transition: background-color .15s ease-out; }
.c-tbl tbody tr:hover { background: color-mix(in srgb, var(--b-paper) 70%, var(--b-surface)); }
.c-tbl b { font-weight: 600; }
.c-leg2 { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.c-leg2 li { display: flex; align-items: center; gap: 7px; }
.c-leg2 i { width: 11px; height: 11px; border-radius: 3px; }
.c-leg2 b { font-weight: 600; }
.inc, .ars { --c: var(--b-c1); }
.exp, .pat { --c: var(--b-c3); }
.c-leg2 i, .c-wbt i, .c-agt i, .c-hb i { background: var(--c); }
.motion .d-conta .fresh { animation: c-in .4s cubic-bezier(.2, .7, .2, 1) both; }

/* invoices */
.c-fact { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(280px, 330px); gap: 14px; }
.c-list { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.c-list .c-seg { align-self: flex-start; }
.c-items { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.c-item { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: calc(var(--b-radius) - 4px); text-align: left; transition: background-color .15s ease-out; }
.c-item:hover { background: var(--b-paper); }
.c-item[aria-selected="true"] { background: var(--b-c2); }
.c-it { min-width: 0; }
.c-it b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-it small { display: block; color: var(--b-muted); font-size: 12.5px; }
.c-item[aria-selected="true"] .c-it small { color: var(--b-ink); }
.c-ir { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.c-ir b { font-weight: 600; font-size: 13px; white-space: nowrap; }
.c-doc { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; border-top: 6px solid var(--b-primary); overflow: hidden; }
.c-dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.c-dt { text-align: right; }
.c-dt h3 { font: var(--b-display-weight) 23px/1.1 var(--b-font-display); }
.c-ncf { margin-top: 4px; color: var(--b-link); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.c-dt small { color: var(--b-muted); font-size: 12.5px; }
.c-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 12px 0; border-block: 1px solid var(--b-line); }
.c-parties p { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--b-muted); }
.c-parties b { color: var(--b-ink); font-weight: 600; font-size: 14px; }
.c-parties small { font-size: 12.5px; color: var(--b-link); font-weight: 600; }
.c-lines th { padding: 0 6px 7px; border-bottom: 1.5px solid var(--b-ink); color: var(--b-muted); font-weight: 600; font-size: 12.5px; text-align: left; }
.c-lines td { padding: 9px 6px; border-bottom: 1px solid var(--b-line); font-size: 13px; }
.c-lines .num { text-align: right; white-space: nowrap; }
.c-ex { display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--b-c2) 55%, var(--b-surface)); color: var(--b-secondary); font-size: 12.5px; font-weight: 600; }
.c-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.c-stamp { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--b-accent); color: var(--b-on-accent); font-weight: 700; font-size: 14px; transform: rotate(-3deg); }
.c-stamp .c-ico { stroke-width: 2.6; }
.motion .d-conta .c-stamp.just { animation: c-stamp .45s cubic-bezier(.2, .7, .3, 1.3) both; }
@keyframes c-stamp { from { opacity: 0; transform: rotate(-3deg) scale(1.4); } }
.c-tot { display: grid; grid-template-columns: auto auto; gap: 4px 28px; min-width: 260px; font-size: 13px; }
.c-tot dt { color: var(--b-muted); }
.c-tot dd { text-align: right; font-weight: 500; }
.c-tot .t { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--b-line); color: var(--b-ink); font-weight: 600; font-size: 14px; align-self: end; }
.c-tot dd.t { font: var(--b-display-weight) 24px/1.1 var(--b-font-display); }
.c-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.c-entry { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.c-entry th { padding: 0 4px 6px; border-bottom: 1px solid var(--b-line); color: var(--b-muted); font-weight: 600; font-size: 12.5px; text-align: left; }
.c-entry td { padding: 7px 4px; border-bottom: 1px solid var(--b-line); font-size: 12.5px; vertical-align: top; }
.c-entry .num { text-align: right; white-space: nowrap; width: 84px; }
.c-entry tfoot td { border: 0; border-top: 1.5px solid var(--b-ink); font-weight: 600; }
.c-er-h td { padding-top: 10px; color: var(--b-link); font-weight: 600; font-size: 12.5px; }
.c-pay { display: flex; flex-direction: column; gap: 10px; }
.c-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.c-how button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 58px; padding: 8px 4px; border: 1px solid var(--b-line); border-radius: calc(var(--b-radius) - 4px); font-weight: 600; font-size: 12.5px; color: var(--b-muted); transition: border-color .15s ease-out, background-color .15s ease-out; }
.c-how button .c-ico { width: 20px; height: 20px; }
.c-how button:hover { border-color: var(--b-primary); color: var(--b-ink); }
.c-how button[aria-pressed="true"] { border-color: var(--b-primary); background: color-mix(in srgb, var(--b-primary) 9%, var(--b-surface)); color: var(--b-link); box-shadow: inset 0 0 0 1px var(--b-primary); }
.c-due { color: var(--b-muted); font-size: 13px; }

/* payments and the day's close */
.c-cob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 14px; }
.c-paylist { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.c-split { display: flex; gap: 3px; height: 12px; }
.c-split i { border-radius: 4px; }
.m-cash { --m: var(--b-c4); } .m-card { --m: var(--b-c1); } .m-transfer { --m: var(--b-c3); }
.c-split i { background: var(--m); }
.c-mleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.c-mleg li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; padding: 8px 10px 8px 12px; border-radius: calc(var(--b-radius) - 4px); background: var(--b-paper); border-left: 4px solid; font-size: 13px; }
.c-mleg li:nth-child(1) { border-color: var(--b-c4); } .c-mleg li:nth-child(2) { border-color: var(--b-c1); } .c-mleg li:nth-child(3) { border-color: var(--b-c3); }
.c-mleg b { grid-column: 1 / 3; font-weight: 600; font-size: 14px; }
.c-mleg small { grid-row: 1; grid-column: 3; justify-self: end; padding: 0 7px; border-radius: 999px; background: var(--b-surface); color: var(--b-muted); font-size: 12.5px; font-weight: 600; }
.c-m { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-weight: 600; font-size: 12.5px; white-space: nowrap; background: color-mix(in srgb, var(--m) 14%, var(--b-surface)); color: var(--b-ink); }
.c-m .c-ico { width: 15px; height: 15px; }
.c-close { display: flex; flex-direction: column; gap: 14px; }
.c-date { padding: 4px 10px; border-radius: 999px; background: var(--b-c2); color: var(--b-secondary); font-weight: 600; font-size: 12.5px; }
.c-cl { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; font-size: 13.5px; }
.c-cl dt { color: var(--b-muted); }
.c-cl dd { text-align: right; font-weight: 600; }
.c-cl .t { padding-top: 9px; border-top: 1px solid var(--b-line); color: var(--b-ink); }
.c-big { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: calc(var(--b-radius) - 2px); background: var(--b-c2); color: var(--b-secondary); }
.c-big span { font-size: 13px; font-weight: 500; }
.c-big b { font: var(--b-display-weight) 30px/1.1 var(--b-font-display); }
.c-big.dark { background: var(--b-secondary); color: var(--b-on-secondary); }
.c-close .c-btn, .c-close .c-done { margin-top: auto; }

/* claims to the ARS */
.c-ars { display: flex; flex-direction: column; gap: 14px; }
.c-tiles { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.c-tile { border-top: 5px solid var(--b-c1); }
.c-tile.t2 { border-top-color: var(--b-c3); } .c-tile.t3 { border-top-color: var(--b-c4); }
.c-tile dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin: 10px 0 10px; }
.c-tile dt { color: var(--b-muted); font-size: 12.5px; }
.c-tile dd { font-weight: 600; font-size: 14px; }
.c-bar { display: block; height: 8px; border-radius: 4px; background: var(--b-c2); overflow: hidden; }
.c-bar i { display: block; width: var(--p); height: 100%; border-radius: 4px; background: var(--b-c1); transform-origin: left; transition: transform .8s cubic-bezier(.2, .7, .2, 1) .2s; }
.motion .d-conta:not(.is-open) .c-bar i { transform: scaleX(0); }
.c-arst { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.c-note { display: block; color: var(--b-muted); font-size: 12.5px; }

/* receivables by age */
.c-cxc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.c-aging { display: flex; flex-direction: column; gap: 14px; }
.c-ag-bars { flex: 1; min-height: 170px; display: flex; gap: 14px; padding-top: 26px; }
.c-agb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.c-agt { position: relative; flex: 1; }
.c-agt .stk { position: absolute; inset: 0 16%; display: flex; flex-direction: column-reverse; }
.c-agt i { flex: none; height: var(--h); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 70ms); }
.c-agt i.pat { border-radius: 0 0 2px 2px; }
.c-agt i.ars { border-radius: 6px 6px 0 0; }
.c-agt em { margin-bottom: 5px; text-align: center; font-style: normal; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.motion .d-conta:not(.is-open) .c-agt i { transform: scaleY(0); }
.c-agl { text-align: center; color: var(--b-muted); font-size: 12.5px; font-weight: 500; }
.c-bal { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }

/* results */
.c-res { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "m m" "k k" "w b"; gap: 12px; }
.c-months { grid-area: m; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.c-months button { display: grid; gap: 4px; padding: 8px 12px; border: 1px solid var(--b-line); border-radius: calc(var(--b-radius) - 4px); background: var(--b-surface); text-align: left; transition: background-color .15s ease-out, border-color .15s ease-out; }
.c-months button:hover { border-color: var(--b-primary); }
.c-mn { color: var(--b-muted); font-size: 12.5px; font-weight: 600; }
.c-mb { display: grid; gap: 3px; }
.c-mb i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: var(--c); }
.c-months b { font-weight: 600; font-size: 14px; }
.c-months button[aria-pressed="true"] { background: var(--b-secondary); border-color: var(--b-secondary); color: var(--b-on-secondary); }
.c-months button[aria-pressed="true"] .c-mn { color: color-mix(in srgb, var(--b-on-secondary) 80%, var(--b-secondary)); }
.c-months button[aria-pressed="true"] .c-mb i.inc { background: var(--b-c2); }
.c-rkpis { grid-area: k; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.c-kpi { display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; border: 1px solid var(--b-line); border-radius: var(--b-radius); background: var(--b-surface); }
.c-kpi span { color: var(--b-muted); font-size: 12.5px; }
.c-kpi b { font: var(--b-display-weight) 25px/1.15 var(--b-font-display); white-space: nowrap; }
.c-kpi.k-net { background: var(--b-primary); border-color: var(--b-primary); color: var(--b-on-primary); }
.c-kpi.k-net span { color: var(--b-on-primary); }
.c-kpi.k-margin { background: var(--b-c2); border-color: var(--b-c2); }
.c-kpi.k-margin span { color: var(--b-secondary); }
.c-weeks { grid-area: w; display: flex; flex-direction: column; gap: 10px; }
.c-wbars { flex: 1; min-height: 150px; display: flex; gap: 16px; padding-top: 22px; }
.c-wb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.c-wbt { position: relative; flex: 1; }
.c-wbt .pair { position: absolute; inset: 0 10%; display: flex; align-items: flex-end; gap: 6px; }
.c-wbt i { position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 0 0; transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 70ms); }
.c-wbt em { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-style: normal; font-weight: 600; font-size: 12.5px; white-space: nowrap; color: var(--b-ink); }
.motion .d-conta:not(.is-open) .c-wbt i { transform: scaleY(0); }
.motion .d-conta .c-wbars.swap i { animation: c-grow .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 50ms); }
@keyframes c-grow { from { transform: scaleY(0); } }
.c-brk { grid-area: b; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.c-brk h4 { font-size: 17px; }
.c-hl { display: grid; gap: 5px; margin-bottom: 4px; }
.c-hl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; }
.c-hl b { font-weight: 600; }
.c-hb { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--b-paper); }
.c-hb i { display: block; width: var(--w); height: 100%; border-radius: 3px; }

/* DGII 607 */
.c-dg { display: flex; flex-direction: column; gap: 14px; }
.c-dgh { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.c-dgh > div:first-child { margin-right: auto; }
.c-dgh h4 { font-size: 22px; }
.c-dgs { display: flex; gap: 10px; }
.c-dgs div { padding: 8px 14px; border: 1px solid var(--b-line); border-radius: calc(var(--b-radius) - 4px); background: var(--b-surface); }
.c-dgs dt { color: var(--b-muted); font-size: 12.5px; }
.c-dgs dd { font-weight: 600; font-size: 15px; }
.c-dga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.c-dgt { flex: 1; padding: 6px 8px; overflow: hidden; }
.c-dgt td { font-size: 12.5px; white-space: nowrap; }
.c-dgt tr.sum { background: color-mix(in srgb, var(--b-c2) 40%, var(--b-surface)); }
.c-dgt tfoot td { padding: 10px; border-top: 1.5px solid var(--b-ink); font-weight: 600; }

/* medium */
@container demo (max-width: 1099px) {
  .c-place, .c-user span:last-child { display: none; }
  .c-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .c-tabs button { padding: 8px 11px; font-size: 13px; }
  .c-view { padding: 14px 16px 16px; }
  .c-fact { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "l d" "s d"; }
  .c-list { grid-area: l; } .c-doc { grid-area: d; } .c-side { grid-area: s; }
  .c-entry { display: none; }
  .c-hide-m { display: none; }
  .c-res { grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr); }
  .c-kpi b { font-size: 21px; }
}

/* phone: everything stacks; the invoice list becomes a row of cards */
@container demo (max-width: 599px) {
  .c-app { height: auto; }
  .c-top { flex-wrap: wrap; gap: 10px 12px; padding: 12px 12px 10px; }
  .c-brand { margin-right: auto; }
  .c-tabs { flex: 1 1 100%; order: 3; margin: 0 -12px; padding: 0 12px 2px; }
  .c-tabs button { min-height: 42px; }
  .c-tabs::-webkit-scrollbar { display: none; }
  .c-view { padding: 12px 12px 16px; }
  .c-view > * { height: auto; }
  .c-hide-s { display: none; }
  .c-card { padding: 14px; }
  .c-fact, .c-cob, .c-cxc { display: flex; flex-direction: column; gap: 12px; }
  .c-list .c-lh { flex-wrap: nowrap; }
  .c-items { flex-direction: row; gap: 8px; margin: 0 -14px; padding: 0 14px 4px; overflow-x: auto; scrollbar-width: none; }
  .c-items::-webkit-scrollbar { display: none; }
  .c-item { width: 220px; border: 1px solid var(--b-line); padding: 10px 12px; }
  .c-doc { padding: 16px 14px; gap: 14px; }
  .c-dh { flex-direction: column; gap: 10px; }
  .c-dt { text-align: left; }
  .c-dt h3 { font-size: 21px; }
  .c-parties { grid-template-columns: 1fr; gap: 10px; }
  .c-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .c-tot { min-width: 0; }
  .c-stamp { align-self: flex-start; }
  .c-entry { display: flex; }
  .c-mleg { grid-template-columns: 1fr; gap: 6px; }
  .c-tbl thead { display: none; }
  .c-tbl, .c-tbl tbody { display: block; }
  .c-tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--b-line); }
  .c-tbl td { padding: 0; border: 0; }
  .c-tbl td.num { text-align: right; }
  .c-tbl td[data-l]::before { content: attr(data-l) " "; color: var(--b-muted); font-size: 12.5px; font-weight: 400; }
  .c-tbl tfoot { display: none; }
  .c-tiles { grid-template-columns: 1fr; gap: 8px; }
  .c-tile { padding: 12px 14px; }
  .c-tile .c-k { display: none; }
  .c-tile dl { margin: 6px 0 8px; }
  .c-lh .c-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .c-ag-bars { flex: none; height: 200px; gap: 8px; }
  .c-agt .stk { inset: 0 8%; }
  .c-res { display: flex; flex-direction: column; gap: 12px; }
  .c-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-rkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-kpi { padding: 10px 12px; }
  .c-kpi b { font-size: 20px; }
  .c-wbars { flex-direction: column; gap: 10px; padding-top: 0; min-height: 0; }
  .c-wb { flex-direction: column-reverse; gap: 4px; }
  .c-agl { text-align: left; }
  .c-wbt { flex: none; }
  .c-wbt .pair { position: static; flex-direction: column; align-items: stretch; gap: 4px; padding-right: 64px; }
  .c-wbt i { flex: none; width: var(--h); height: 14px; border-radius: 0 4px 4px 0; transform-origin: left; }
  .c-wbt em { left: calc(100% + 6px); bottom: auto; top: 50%; transform: translateY(-50%); }
  .motion .d-conta .c-wbars.swap i { animation-name: c-grow-x; }
  .motion .d-conta:not(.is-open) .c-wbt i { transform: scaleX(0); }
  .c-dgh { flex-direction: column; align-items: stretch; }
  .c-dgs { flex-wrap: wrap; }
  .c-dgs div { flex: 1 1 140px; }
  .c-dgt { padding: 4px 14px; }
  .c-dgt tbody tr { grid-template-columns: 1fr; gap: 2px; }
  .c-dgt td { display: flex; justify-content: space-between; gap: 12px; white-space: normal; }
  .c-dgt td::before { content: attr(data-l); color: var(--b-muted); font-size: 12.5px; }
  .c-dgt td[data-l="Efectivo"], .c-dgt td[data-l="Tarjeta"], .c-dgt td[data-l="Transf. o cheque"] { display: none; }
}
@keyframes c-grow-x { from { transform: scaleX(0); } }

/* added after the first check: list fit, cash destination, 607 checklist, month labels, phone cells */
.c-item[hidden] { display: none; }
.c-dest ul { display: grid; gap: 6px; margin-top: 6px; }
.c-dest li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.c-dest b { font-weight: 600; font-size: 13.5px; }
.c-big small { font-size: 12.5px; color: inherit; }
.c-big.dark small { color: color-mix(in srgb, var(--b-on-secondary) 80%, var(--b-secondary)); }
.c-checks { margin: 16px 10px 6px; padding-top: 14px; border-top: 1px solid var(--b-line); }
.c-checks ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: 8px; }
.c-checks li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--b-muted); }
.c-checks li i { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--b-line); border-radius: 50%; }
.c-checks li.y { color: var(--b-ink); }
.c-checks li.y .c-ico { width: 16px; height: 16px; color: var(--b-link); stroke-width: 2.6; }
.c-mr { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.c-mr small { color: var(--b-muted); font-size: 12.5px; }
.c-months button[aria-pressed="true"] .c-mr small { color: color-mix(in srgb, var(--b-on-secondary) 80%, var(--b-secondary)); }
@container demo (max-width: 599px) {
  .c-parties p:first-child span:nth-of-type(n+2) { display: none; }
  .c-it b { white-space: normal; }
  .c-arst .a-id, .c-arst .a-ars { display: none; }
  .c-arst tbody tr { grid-template-areas: "who st" "proc proc" "cl ok"; }
  .c-arst .a-who { grid-area: who; font-weight: 600; }
  .c-arst .a-st { grid-area: st; justify-self: end; }
  .c-arst .a-proc { grid-area: proc; color: var(--b-muted); font-size: 12.5px; }
  .c-arst td:nth-child(6) { grid-area: cl; text-align: left; }
  .c-arst td:nth-child(7) { grid-area: ok; }
  .c-checks { margin: 12px 0 4px; }
  .c-checks ul { grid-template-columns: 1fr; }
}

/* second check: cash count, folding journal entry, shorter phone tabs */
.c-arq ul { display: grid; gap: 4px; margin-top: 6px; }
.c-arq li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--b-muted); }
.c-arq b { color: var(--b-ink); font-weight: 600; }
.c-entry summary { list-style: none; }
.c-entry summary::-webkit-details-marker { display: none; }
@container demo (min-width: 600px) { .c-entry summary { pointer-events: none; } }
@container demo (max-width: 599px) {
  .c-entry summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; cursor: pointer; }
  .c-entry summary::after { content: "+"; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--b-paper); color: var(--b-link); font-weight: 600; font-size: 18px; }
  .c-entry[open] summary::after { content: "−"; }
  .c-mleg { display: none; }
  .c-paylist tbody tr:nth-child(n+7) { display: none; }
  .c-dgt td[data-l="Fecha"] { display: none; }
}

/* QA round 1: totals under the lines, the tax note at the foot, a journal entry that keeps figures near their accounts,
   and a larger invoice with the next appointment on wide windows (2560, maximised) */
.c-foot { margin-top: 4px; }
.c-pline { display: none; color: var(--b-link); font-weight: 600; font-size: 13.5px; }
.c-inote { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--b-line); color: var(--b-muted); font-size: 12.5px; }
.c-entry table { width: auto; }
.c-entry .num { width: 72px; }
.c-next { display: none; }
/* .c-wide: the window is at least 1500 x 900 (set by demo.js from the demo's own size, so a maximised 1920 window,
   wide but short, keeps the regular layout) */
.c-wide .c-fact { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(380px, 420px); }
.c-wide .c-doc { gap: 20px; padding: 28px 34px; }
.c-wide .c-dt h3 { font-size: 30px; }
.c-wide .c-ncf { font-size: 16px; }
.c-wide .c-parties p { font-size: 14px; }
.c-wide .c-parties b { font-size: 16px; }
.c-wide .c-lines th { font-size: 13.5px; }
.c-wide .c-lines td { padding: 14px 8px; font-size: 15px; }
.c-wide .c-tot { gap: 6px 32px; font-size: 15px; }
.c-wide .c-tot dd.t { font-size: 32px; }
.c-wide .c-pline { display: block; }
.c-wide .c-item { padding: 12px 14px; }
.c-wide .c-it b { font-size: 15px; }
.c-wide .c-ir b { font-size: 14px; }
.c-wide .c-entry th { font-size: 13px; }
.c-wide .c-entry td { padding: 10px 6px; font-size: 14px; }
.c-wide .c-entry .num { width: 88px; }
.c-wide .c-next { display: flex; flex-direction: column; gap: 2px; }
.c-next .c-k { margin-bottom: 4px; }
.c-next b { font: var(--b-display-weight) 20px/1.2 var(--b-font-display); }
.c-next span { color: var(--b-link); font-weight: 600; font-size: 14px; }
.c-next small { color: var(--b-muted); font-size: 12.5px; }
.c-it b { white-space: normal; }
.c-doc { gap: 14px; }
@container demo (max-width: 599px) {
  .c-tabs { flex-wrap: wrap; justify-content: flex-start; overflow: visible; margin: 0; padding: 0; }
  .c-tabs button { min-height: 40px; padding: 7px 12px; }
}

/* QA round 2: at 1500 x 900 and up the invoice grows and shows its payments and balance; the side lists today's payments */
.c-wide .c-doc { gap: 22px; padding: 30px 38px; }
.c-wide .c-dt h3 { font-size: 34px; }
.c-wide .c-parties p { font-size: 15px; }
.c-wide .c-parties b { font-size: 17px; }
.c-wide .c-lines th { font-size: 14px; }
.c-wide .c-lines td { padding: 16px 8px; font-size: 16px; }
.c-wide .c-tot { gap: 8px 36px; font-size: 16px; }
.c-wide .c-tot .t { font-size: 16px; }
.c-wide .c-tot dd.t { font-size: 36px; }
.c-paid, .c-today, .c-wide .c-pline { display: none; }
.c-wide .c-paid { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--b-line); }
.c-wide .c-paid .c-k { font-size: 14px; font-weight: 600; }
.c-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; }
.c-prow.none { display: block; color: var(--b-link); font-weight: 600; }
.c-prow .c-m { font-size: 13px; }
.c-prow b { font-weight: 600; }
.c-pbal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding-top: 12px; border-top: 1px dashed var(--b-line); font-weight: 600; font-size: 15px; }
.c-pbal b { font: var(--b-display-weight) 26px/1.1 var(--b-font-display); }
.c-pbal.zero b { color: var(--b-muted); }
.c-wide .c-today { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; overflow: hidden; }
.c-wide .c-paid[hidden], .c-wide .c-today[hidden], .c-today li[hidden] { display: none; }
.c-today ul { display: grid; }
.c-today li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 42px; padding: 6px 0; border-top: 1px solid var(--b-line); font-size: 14px; }
.c-today li > span:first-child { color: var(--b-muted); font-size: 13px; }
.c-today li b { font-weight: 600; }
.c-mi { padding: 4px; }