/* conciliar.css -- Dinero › conciliación (conciliar.js). Every value from the tokens in app.css; no colour of
   its own except the three state tints, each drawn from an existing token (--paul green, --alarm rust,
   --juan amber, --accent-purple). The list on the left, the panel on the right (Paul, 2026-11-02: "a bit
   thinner, then have space on the right"). */

.cz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 32%); }
/* wide (the ⤢): the panel takes about two thirds; the list keeps a third and cuts its concepts shorter */
.cz.is-wide, html.is-full main > div.cz.is-wide { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); }
html.is-full main > div.cz { display: grid; }
.cz-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--hairline); }
.cz-right { min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface-2); padding: 12px 18px 40px; }
.cz-pad { padding: 14px 16px; }
.cz-err { color: var(--alarm); font: 13px var(--sans); }

.cz-top { padding: 10px 14px 6px; border-bottom: 1px solid var(--hairline); background: var(--paper); }
.cz-tabs { display: flex; gap: 18px; margin-bottom: 8px; }
.cz-tab { font: 600 15px var(--sans); background: none; border: 0; padding: 2px 0 4px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.cz-tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.cz-bar { display: flex; gap: 6px; align-items: center; }
.cz-q { flex: 1; min-width: 0; font: 13px var(--sans); padding: 6px 9px; border: 1px solid var(--hairline); background: var(--card); }
.cz-sel, .cz-num { font: 12px var(--sans); padding: 5px 6px; border: 1px solid var(--hairline); background: var(--card); }
.cz-num { width: 80px; }
.cz-btn { font: 12px var(--sans); padding: 5px 9px; border: 1px solid var(--hairline); background: var(--card); color: var(--ink); cursor: pointer; white-space: nowrap; }
.cz-btn.is-on { background: var(--ink); color: var(--card); }
.cz-btn[disabled] { opacity: .5; cursor: default; }
.cz-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.cz-filters label { display: flex; flex-direction: column; gap: 2px; }
.cz-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.cz-chip { font: 12px var(--sans); border: 1px solid var(--rule); background: var(--card); padding: 3px 9px; border-radius: 12px; color: var(--ink); cursor: pointer; }
.cz-chip b { font-weight: 600; margin-left: 5px; color: var(--muted); }
.cz-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--card); }
.cz-chip.is-on b { color: var(--rule); }

.cz-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; outline: none; }
.cz-t { width: 100%; border-collapse: collapse; background: var(--card); }
.cz-t th { position: sticky; top: 0; background: var(--card); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--hairline); white-space: nowrap; z-index: 1; }
.cz-t td { font: 13px var(--sans); padding: 5px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.cz-t tbody tr { cursor: pointer; }
.cz-t tbody tr:hover td { background: var(--field-focus); }
.cz-t tbody tr.is-sel td { background: var(--surface-3); }
.cz-t .cz-cc { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cz-d { color: var(--muted); font-variant-numeric: tabular-nums; }
.cz-n { font-variant-numeric: tabular-nums; }
.cz-sub { color: var(--link); font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.cz-eu { color: var(--muted); padding-left: 0 !important; width: 1%; }
.cz-neg { color: var(--alarm); }
.cz-more { margin: 10px 14px; }
.cz-foot { font: 12px var(--sans); color: var(--muted); padding: 6px 14px; border-top: 1px solid var(--hairline); background: var(--paper); }

.cz-st { font: 11px var(--mono); padding: 1px 6px; border: 1px solid; border-radius: 3px; white-space: nowrap; }
.cz-st-ok { color: var(--paul); border-color: var(--paul); background: #eef3ec; }
.cz-st-no { color: var(--alarm); border-color: var(--alarm); background: #fbefed; }
.cz-st-x { color: var(--accent-purple); border-color: var(--accent-purple); background: #f0f0f7; }
.cz-st-q { color: #8a5a00; border-color: var(--juan); background: #fbf4e6; }

.cz-nav { display: flex; align-items: center; min-height: 24px; }
.cz-x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.cz-link { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-align: left; text-decoration: none; }
.cz-link:hover { text-decoration: underline; }
.cz-empty { padding: 60px 20px; text-align: center; color: var(--muted); font: 14px var(--sans); }
.cz-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cz-big { font: 30px var(--serif); }
.cz-name { font-size: 26px; }
.cz-concept { font: 13px var(--sans); color: var(--body); margin: 4px 0 12px; overflow-wrap: anywhere; }
.cz-sec { background: var(--card); border: 1px solid var(--hairline); padding: 10px 12px; margin-bottom: 12px; }
.cz-sec h3 { display: flex; justify-content: space-between; gap: 10px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.cz-sec > .cz-q { width: 100%; margin-bottom: 6px; }
.cz-mt { width: 100%; border-collapse: collapse; }
.cz-mt th { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 4px 5px; border-bottom: 1px solid var(--hairline); }
.cz-mt th.num { text-align: right; }
.cz-mt td { font: 13px var(--sans); padding: 5px 5px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.cz-mt .cz-cc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.cz-mt .cz-b { font-weight: 600; }
.cz-why { color: var(--muted); font-size: 12px !important; white-space: normal !important; }
.cz-strong { color: var(--ink); font-weight: 600; }
.cz-pick { cursor: pointer; }
.cz-pick:hover td { background: var(--field-focus); }
.cz-pick.is-on td { background: #eef3ec; }
.cz-warn { background: #fbf4e6; color: #8a5a00; white-space: normal !important; font-size: 12px !important; }
.cz-warnt { color: #8a5a00; }
.cz-rest td { color: var(--muted); }
.cz-g { color: var(--muted); font: 13px var(--sans); }
.cz-note { font-size: 12px; margin-top: 8px; }
.cz-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; font: 13px var(--sans); }
.cz-act .cz-q { flex: 1; }
.cz-left-a { justify-content: flex-start; margin: 0 0 10px; }
.cz-pdf-if { width: 100%; height: 70vh; border: 1px solid var(--hairline); background: var(--card); margin-bottom: 12px; }
.cz-dl dt { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 8px; }
.cz-dl dd { margin: 2px 0 0; font: 13px var(--sans); overflow-wrap: anywhere; }
.cz-sum { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--hairline); margin: 8px 0; }
.cz-sum > div { padding: 8px 10px; border-right: 1px solid var(--rule); }
.cz-sum > div:last-child { border-right: 0; }
.cz-sum dt { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cz-sum dd { margin: 4px 0 0; font: 18px var(--serif); text-align: right; font-variant-numeric: tabular-nums; }

/* The comprobante's panel (Paul, 2026-11-04): one or both beside the list. Alone it takes the movement's place; with
   both, each about a third. Where they would leave the list under 300 px it lies over the movement's. */
.cz-pdf { display: none; position: sticky; top: 0; align-self: start; height: min(100%, 100vh); min-width: 0; min-height: 0; flex-direction: column; background: var(--panel); color: var(--panel-figure); border-left: 1px solid var(--hairline); }
.cz.cz-pdf-on .cz-pdf { display: flex; }
.cz.cz-pdf-on:not(.cz-open) .cz-right { display: none; }
.cz.cz-open.cz-pdf-on, html.is-full main > div.cz.cz-open.cz-pdf-on { grid-template-columns: minmax(300px, 1fr) minmax(340px, 32%) minmax(340px, 32%); }
.cz-pdf-h { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--panel-rule); font: 13px var(--sans); }
.cz-pdf-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-pdf .cz-link { flex: none; color: var(--panel-figure); text-decoration: underline; text-decoration-color: var(--panel-label); text-underline-offset: 2px; }
.cz-pdf .cz-x { color: var(--panel-label); }
.cz-pdf .cz-pad { color: var(--panel-dim); }
.cz-pdf-f { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--card); }
@media (max-width: 980px) {
  .cz.cz-open.cz-pdf-on, html.is-full main > div.cz.cz-open.cz-pdf-on { grid-template-columns: minmax(0, 1fr) minmax(340px, 32%); }
  .cz.cz-open.cz-pdf-on .cz-right, .cz.cz-open.cz-pdf-on .cz-pdf { grid-area: 1 / 2; }
  .cz.cz-open.cz-pdf-on .cz-pdf { z-index: 4; }
}

/* a phone: the list alone; the panel covers it when something is open */
@media (max-width: 900px) {
  .cz, html.is-full main > div.cz, .cz.is-wide, html.is-full main > div.cz.is-wide { grid-template-columns: minmax(0, 1fr); position: relative; }
  .cz:not(.cz-open) .cz-right { display: none; }
  .cz-right { position: absolute; inset: 0; z-index: 5; }
  .cz.cz-open.cz-pdf-on, html.is-full main > div.cz.cz-open.cz-pdf-on { grid-template-columns: minmax(0, 1fr); }
  .cz-pdf, .cz.cz-open.cz-pdf-on .cz-pdf { position: fixed; inset: 0; height: auto; z-index: 60; }
  .cz-sum { grid-template-columns: repeat(2, 1fr); }
}

/* The panel wears the dark ground (Paul, 2026-11-02: "the bluer/purpley UI design we have used in a place or
   two") -- the login screen's and the planning page's Labor split: --panel ground, periwinkle Courier caps for
   labels, cream for figures, --panel-dim for what is secondary, --panel-rule for lines. The same tokens, so it
   follows if that palette moves. The list on the left keeps the paper. */
.cz-right { background: var(--panel); color: var(--panel-figure); border-left: 1px solid var(--hairline); }
.cz-right .cz-sec { background: transparent; border: 0; border-top: 1px solid var(--panel-rule); padding: 12px 0 6px; margin: 0; }
.cz-right .cz-sec h3, .cz-right .cz-dl dt, .cz-right .cz-mt th, .cz-right .cz-sum dt, .cz-right .micro { color: var(--panel-label); }
.cz-right .cz-mt th { border-bottom-color: var(--panel-rule); }
.cz-right .cz-mt td { border-bottom-color: var(--panel-rule); color: var(--panel-figure); }
.cz-right .cz-big, .cz-right .cz-dl dd, .cz-right .cz-sum dd { color: var(--panel-figure); }
.cz-right .cz-concept, .cz-right .cz-g, .cz-right .cz-why, .cz-right .cz-eu, .cz-right .cz-rest td, .cz-right .cz-empty { color: var(--panel-dim); }
.cz-right .cz-strong { color: var(--panel-figure); }
.cz-right .cz-link { color: var(--panel-figure); text-decoration: underline; text-decoration-color: var(--panel-label); text-underline-offset: 2px; }
.cz-right .cz-link:hover { text-decoration-color: var(--panel-figure); }
.cz-right .cz-x { color: var(--panel-label); }
.cz-right .cz-q, .cz-right .cz-sel { background: transparent; color: var(--panel-figure); border-color: var(--panel-label); }
.cz-right .cz-q::placeholder { color: var(--panel-label); }
.cz-right .cz-btn { background: transparent; color: var(--panel-figure); border-color: var(--panel-label); }
.cz-right .cz-btn:hover:not([disabled]) { border-color: var(--panel-figure); }
.cz-right .np-create { background: var(--panel-figure); color: var(--panel); border-color: var(--panel-figure); }
.cz-right .cz-chip { background: transparent; color: var(--panel-figure); border-color: var(--panel-label); }
.cz-right .cz-chip.is-on { background: var(--panel-figure); color: var(--panel); border-color: var(--panel-figure); }
.cz-right .cz-pick:hover td { background: var(--panel-rule); }
.cz-right .cz-pick.is-on td { background: #2a2a52; }
.cz-right .cz-warn { background: transparent; color: #e0b25c; border-left: 2px solid var(--juan); }
.cz-right .cz-warnt { color: #e0b25c; }
.cz-right .cz-sum { background: transparent; border: 1px solid var(--panel-rule); }
.cz-right .cz-sum > div { border-right-color: var(--panel-rule); }
.cz-right .cz-pdf-if { border-color: var(--panel-rule); }

/* compact and wide (Paul, 2026-11-02) */
.cz-right .cz-wide { font-size: 18px; margin-right: 6px; }
.cz:not(.is-wide) .cz-concept { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cz:not(.is-wide) .cz-mt .cz-cc { max-width: 150px; }
.cz-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cz-col { min-width: 0; }
.cz-ctx { position: sticky; top: 0; }
.cz-ctx .cz-pdf-if { height: 58vh; }
.cz-more-l { font-size: 12px; margin-top: 4px; }
.cz-hist { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font: 12px var(--sans); padding: 3px 0; border-bottom: 1px solid var(--panel-rule); }
.cz-kv { display: flex; justify-content: space-between; align-items: baseline; font: 13px var(--sans); margin-bottom: 6px; }
.cz-kv b { font: 20px var(--serif); font-variant-numeric: tabular-nums; }
.cz:not(.is-wide) .cz-sum { grid-template-columns: repeat(2, 1fr); }
.cz:not(.is-wide) .cz-sum > div:nth-child(2) { border-right: 0; }
.cz:not(.is-wide) .cz-sum > div:nth-child(-n+2) { border-bottom: 1px solid var(--panel-rule); }
@media (max-width: 1100px) { .cz-cols { grid-template-columns: minmax(0, 1fr); } .cz-ctx { position: static; } }

/* Comentarios (Paul, 2026-11-03): a running note on a movement or an invoice, in the panel; a count in the list */
.cz-ncm { margin-left: 6px; font: 11px var(--sans); color: var(--muted); white-space: nowrap; }
.cz-cm { padding: 6px 0; border-bottom: 1px solid var(--panel-rule); }
.cz-cm-h { display: flex; gap: 8px; align-items: baseline; font: 12px var(--sans); }
.cz-cm-del { margin-left: auto; font-size: 12px; }
.cz-cm-t { font: 13px var(--sans); white-space: pre-wrap; margin-top: 2px; }
.cz-cm-add { align-items: flex-end; }
.cz-cm-in { flex: 1; min-height: 44px; resize: vertical; font: 13px var(--sans); }

/* Tags (Paul, 2026-11-03: "more tags is better than less"). A person's tag is a filled chip; one the platform
   puts and takes off itself ("falta factura") is outlined, dashed, with a ⚙. */
.cz-tag { display: inline-flex; align-items: center; gap: 2px; font: 11px var(--sans); padding: 0 7px; border-radius: 10px; line-height: 18px;
  background: #ecebf5; color: var(--ink); border: 1px solid #c9c7e0; white-space: nowrap; }
.cz-tag.is-sys { background: transparent; border-style: dashed; border-color: var(--muted); color: var(--muted); }
.cz-tag-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 3px; font: 13px/1 var(--sans); }
.cz-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
.cz-tags-in { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; vertical-align: middle; }
.cz-stc { white-space: normal; }
.cz-tagrow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 0 6px; }
.cz-tagrow .micro { margin-right: 2px; }
.cz-tchip.is-sys { border-style: dashed; }
.cz-tagnote { margin: 2px 0; font-size: 12px; }
.cz-tagadd .cz-tagin { flex: 0 1 160px; }
.cz-tagadd .cz-q:not(.cz-tagin) { flex: 1 1 140px; }
.cz-falta { margin: 6px 0 0; font: 12px var(--sans); color: var(--panel-label); }
.cz-fl { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
.cz-right .cz-tag { background: var(--panel-rule); color: var(--panel-figure); border-color: var(--panel-label); }
.cz-right .cz-tag.is-sys { background: transparent; color: var(--panel-dim); border-color: var(--panel-dim); }
/* Categoría (schema v28): what the movement counts as, who said so, and the form to change it */
.cz-cat-v { font: 13px var(--sans); margin: 0 0 6px; }
.cz-catform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cz-catform .cz-sel { width: 100%; }
.cz-catrule { display: flex; align-items: center; gap: 6px; font: 13px var(--sans); margin-top: 10px; }
.cz-catrule-in { justify-content: flex-start; margin-top: 4px; }
.cz-right .cz-sel option, .cz-right .cz-sel optgroup { color: var(--ink); background: var(--card); }
@media (max-width: 900px) { .cz-catform { grid-template-columns: 1fr; } }

/* Periodo (Paul, 2026-11-03): its own line under the search, beside + Filtro; a box with the kind, then the period */
.cz-bar2 { display: flex; gap: 6px; align-items: center; margin-top: 6px; position: relative; }
.cz-per { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; width: 460px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--hairline); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); padding: 10px 12px; font: 13px var(--sans); }
.cz-per button { font: 12px var(--sans); background: var(--card); color: var(--ink); border: 1px solid var(--rule); cursor: pointer; }
.cz-per button:hover { border-color: var(--hairline); }
.cz-per button.is-on, .cz-per button.is-end { background: var(--ink); color: var(--card); border-color: var(--ink); }
.cz-per-k { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.cz-per-k button { padding: 3px 8px; }
.cz-per-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cz-per-nav button { border: 0; font-size: 18px; line-height: 1; padding: 0 8px; }
.cz-per-g { display: grid; gap: 4px; }
.cz-per-g button { padding: 7px 0; }
.cz-per-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cz-per-cal i { font: 10px var(--mono); font-style: normal; color: var(--muted); padding: 2px 0; }
.cz-per-cal button { border-color: transparent; padding: 5px 0; }
.cz-per-cal button.is-out { color: var(--faint); }
.cz-per-cal button.is-in { background: var(--surface-3); }
.cz-per-cal button.is-today { text-decoration: underline; }
.cz-per-h { font-size: 12px; margin: 8px 0 4px; color: var(--muted); }
.cz-per-r { display: flex; gap: 4px; align-items: center; }
.cz-per-r .cz-sel { flex: 1; min-width: 0; }
.cz-per-r .cz-btn { padding: 5px 9px; border-color: var(--hairline); }
.cz-per .cz-link { border: 0; background: none; color: var(--link); padding: 0; }
.cz-per-f { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }

/* The walkthrough (Paul, 2026-11-03): a movement not settled yet shows only one question at a time, its answers as
   full-width buttons; the first answer is the likely one, filled */
.cz-wk { border-top: 1px solid var(--panel-rule); padding-top: 14px; }
.cz-wk-back { font-size: 12px; margin-bottom: 8px; }
.cz-right .cz-wk-q { font: 20px var(--serif); color: var(--panel-figure); margin: 4px 0 6px; line-height: 1.3; }
.cz-wk-s { font-size: 13px; margin: 0 0 12px; }
/* the guess's checklist: white ✓, soft yellow ?, soft red ✗ on the dark panel */
.cz-cks { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 8px; align-items: baseline; margin: 0 0 12px; font-size: 13px; }
.cz-cks b { color: var(--panel-figure); font-weight: 700; letter-spacing: .02em; }
.cz-ck-i { color: var(--panel-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-ck-m { font-weight: 700; text-align: right; }
.cz-ck-m.is-ok { color: #fff; }
.cz-ck-m.is-near { color: #e9d98a; }
.cz-ck-m.is-no { color: #e8978c; }
.cz-wk-o { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.cz-wk-b { font: 14px var(--sans); text-align: left; padding: 10px 12px; cursor: pointer;
  background: transparent; color: var(--panel-figure); border: 1px solid var(--panel-label); }
.cz-wk-b:hover:not([disabled]) { border-color: var(--panel-figure); background: var(--panel-rule); }
.cz-wk-b.is-main { background: var(--panel-figure); color: var(--panel); border-color: var(--panel-figure); font-weight: 600; }
.cz-wk-b[disabled] { opacity: .5; cursor: default; }
.cz-wk > .cz-q, .cz-wk > .cz-sel { display: block; width: 100%; margin: 6px 0; }
.cz-wk .cz-sec { border-top: 0; padding-top: 4px; }
.cz-wk > .cz-falta { margin: 0 0 10px; }

/* Etiquetas and Comprobante as columns (Paul, 2026-11-03): narrow, cut with … when they run long */
.cz-t .cz-tgc { white-space: nowrap; }
.cz-t .cz-cpb { color: var(--link); font-size: 12px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* The list (Paul, 2026-11-03): a thick black line and the month's name where the month changes, the year's where the
   year does; (+) on every row's Etiquetas; a person's tag is taken off by clicking it; the Comprobante numbers open the
   invoice's PDF over the page */
.cz-t tr.cz-msep td, .cz-t tr.cz-ysep td { border-top: 3px solid var(--ink); border-bottom: 0; background: var(--paper);
  font: 600 12px var(--sans); text-transform: capitalize; padding: 8px 8px 3px; cursor: default; }
.cz-t tr.cz-ysep td { border-top-width: 5px; font: 400 20px var(--serif); padding-top: 12px; }
.cz-t tr.cz-ysep + tr.cz-msep td { border-top: 0; }
.cz-t tbody tr.cz-msep:hover td, .cz-t tbody tr.cz-ysep:hover td { background: var(--paper); }
.cz-tag-add { font: 600 12px var(--sans); line-height: 1; width: 20px; height: 20px; margin-left: 4px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--card); color: var(--muted); cursor: pointer; vertical-align: middle; }
.cz-tag-add:hover { border-color: var(--ink); color: var(--ink); }
.cz-tag.is-x { cursor: pointer; }
.cz-tag.is-x:hover { text-decoration: line-through; }
.cz-cpb-a { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.cz-cpb-a:hover { text-decoration: underline; }
.cz-pv { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 19, .45); display: flex; align-items: center; justify-content: center; }
.cz-pv-box { background: var(--card); border: 1px solid var(--hairline); width: min(900px, calc(100vw - 32px)); height: calc(100vh - 48px);
  display: flex; flex-direction: column; }
.cz-pv-h { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); font: 13px var(--sans); }
.cz-pv-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-pv-f { flex: 1; width: 100%; border: 0; }

/* + Filtro's controls on the same line, right of it (Paul, 2026-11-03) */
.cz-bar2 { flex-wrap: wrap; }
.cz-bar2 .cz-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.cz-bar2 .cz-filters .cz-num { width: 110px; }

/* The state chips have a title like the tags' row; a tag's chip up top is coloured like the tag on the rows (Paul, 2026-11-03) */
.cz-chips { align-items: center; }
.cz-chips-k { margin-right: 2px; }
.cz-tchip.is-tag { background: #ecebf5; border-color: #c9c7e0; }
.cz-tchip.is-tag.is-on { background: var(--ink); color: var(--card); border-color: var(--ink); }

/* Reparto (Paul, 2026-11-03): its own column left of Importe, edited in a box over the page */
.cz-t .cz-rp { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.cz-t .cz-rp.is-dim { color: var(--muted); }
.cz-t .cz-rp.is-nc { cursor: pointer; }
.cz-t .cz-rp.is-nc:hover { text-decoration: underline; }
.cz-rp-in { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cz-t .cz-rp, .cz-t .cz-tgc, .cz-t th.cz-ctr { text-align: center; }
.cz-rp-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-rp-mod { flex: none; }
.cz-rp-add { margin-left: 0; }
.cz-rpe { height: auto; max-height: calc(100vh - 48px); overflow-y: auto; width: min(640px, calc(100vw - 32px)); }
.cz-rpe-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.cz-rpe-deps { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.cz-rpe-row .cz-sel { flex: 1; min-width: 0; }
.cz-rpe-row .cz-num { width: 70px; }
/* the seven steps at the top of a movement's panel */
.cz-right { container-type: inline-size; }
.cz-flow { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
.cz-flow-b { flex: 1; min-width: 0; }
/* the line that separated the old strip of steps from the panel: the column does that now, and the first thing starts level with step 1 */
.cz-right .cz-flow-b > :first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.cz-steps { list-style: none; display: flex; flex-direction: column; flex: none; margin: 0; padding: 0; }
.cz-step { position: relative; display: flex; align-items: center; gap: 8px; padding-bottom: 14px; font: 10px var(--mono);
  letter-spacing: .03em; text-transform: uppercase; color: var(--panel-dim); }
.cz-step:last-child { padding-bottom: 0; }
.cz-step:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 20px; bottom: 0; width: 1px; background: var(--panel-label); }
.cz-step.is-na::after, .cz-step.is-off::after { opacity: .6; }
@container (max-width: 460px) {
  .cz-flow { gap: 10px; }
  .cz-step-t { display: none; }
}
.cz-step-n { width: 20px; height: 20px; border-radius: 10px; border: 1px solid var(--panel-label); display: flex; align-items: center;
  justify-content: center; font: 11px var(--sans); color: var(--panel-label); }
.cz-step.is-done .cz-step-n { border-color: var(--panel-figure); color: var(--panel-figure); }
.cz-step.is-part .cz-step-n { border-color: #e0b25c; color: #e0b25c; }
.cz-step.is-now .cz-step-n { background: var(--panel-figure); border-color: var(--panel-figure); color: var(--panel); }
.cz-step.is-now { color: var(--panel-figure); }
.cz-step.is-na, .cz-step.is-off { opacity: .45; }

/* The panel alone, in a drawer (Cierre, 2026-11-04): the drawer's body is the panel */
.drw-body.cz-drw { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.drw-body.cz-drw > .drw-title { display: none; }
.cz.cz-only, html.is-full main > div.cz.cz-only { display: block; flex: 1; min-height: 0; }
.cz-only > .cz-right { height: 100%; border-left: 0; position: static; }

/* The guessed invoice's PDF beside the question (2026-11-04) */
.cz-wk.has-pdf { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.cz-wk.has-pdf .cz-pdfbox { border-top: 0; padding-top: 0; margin: 0; }
@media (max-width: 900px) { .cz-wk.has-pdf { grid-template-columns: minmax(0, 1fr); } }
/* In the 40 % drawer (Paul, 2026-11-08): one column; the PDF under the questions, and where there is none, a warning in its place */
.cz-only .cz-cols, .cz-only .cz-wk.has-pdf { grid-template-columns: minmax(0, 1fr); }
.cz-only .cz-ctx { position: static; }
.cz-only .cz-wk.has-pdf .cz-pdfbox { margin-top: 14px; }
.cz-only .cz-pdf-if { height: 60vh; }
.cz-nopdf { margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--alarm); border-left-width: 4px; color: var(--panel-figure); font: 13px var(--sans); }