/*
 * months.css -- the only styling app.css does not already carry.
 *
 * Nothing here invents a colour. Every value is a token from app.css, because
 * the point of sharing that file with Human Spaces Antolaketa is that both
 * co-ops read the same visual language; a second palette defined here would
 * quietly end that.
 *
 * One idea, and it is the reason this file exists at all: a visible rule
 * between the accrual columns and the cash columns. Invoiced, labour, admin,
 * external and profit answer "what was the work worth". Income, cash and
 * running answer "what reached the bank". They are different questions, they
 * disagree in most months, and a reader whose eye runs straight across the row
 * will add them together. The rule is there to stop that happening.
 */

/* The department picker in the card head. Matches planning.css's field in the
   sister app rather than being a new control. */
.ix-field {
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px 6px;
  max-width: 220px;
}
.ix-field:focus-visible {
  outline: 2px solid var(--accent-purple);
  outline-offset: 1px;
  background: var(--field-focus);
}

/* The boundary. Left edge only, so it reads as a division between two groups
   rather than as a border around a cell. */
.grid.months th.cash-edge,
.grid.months td.cash-edge {
  border-left: 1px solid var(--hairline);
  padding-left: 12px;
}

/* A month with nothing invoiced is not a bad month -- it is the August
   shutdown, or a course that bills in bursts. Recede it rather than hide it:
   the wages were still paid and the row still carries them. */
.grid.months tr.idle td {
  color: var(--faint);
}
.grid.months tr.idle td.neg {
  color: var(--alarm);
}

/* Sign. Positive stays plain ink -- a number being normal is not news, and
   colouring both directions spends the one accent the table has on nothing. */
.grid.months td.pos { color: var(--ink); }
.grid.months td.neg { color: var(--alarm); }

.grid.months tfoot td {
  border-top: 1px solid var(--hairline);
  font-weight: 600;
  color: var(--ink);
  padding-top: 8px;
}

/* Figures line up or they are not a column. */
.grid.months td.num,
.grid.months tfoot td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* --- the departments dashboard -------------------------------------------
 * Generic: it styles whatever the document returns. No department, business
 * or year appears anywhere in here.
 */

.pd-cellname { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }

/* --- department drill-down ------------------------------------------------
 * Every flex child carries min-width: 0 AND max-width: 100%. min-width alone
 * was not enough on 2026-09-22 -- main came out 1103px wide inside a 1024px
 * window and the page scrolled sideways.
 */
.dd { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.dd > .card { margin-bottom: 14px; max-width: 100%; }

.dd-back { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; color: var(--link);
  text-decoration: underline; align-self: flex-start; margin-bottom: 10px; }

.dd-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dd-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--ink);
  background: var(--surface-2); }
.dd-name { font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 0; }
.dd-sub-note { font-family: var(--mono); font-size: 10px; color: var(--faint);
  margin: 4px 0 14px; }

/* the waterfall */
.dd-waterfall { display: flex; flex-direction: column; }
.dd-row { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule);
  width: 100%; min-width: 0; }
.dd-row.strong { font-weight: 700; border-bottom: 0; padding-top: 10px; }
.dd-label { display: flex; align-items: center; gap: 8px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.dd-sw { width: 10px; height: 10px; flex: 0 0 10px; }
.dd-amt { white-space: nowrap; }
.dd-amt.neg { color: var(--alarm); }
.dd-row.strong .dd-amt { font-size: 15px; }

.dd-foldhead { background: none; border: 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; font: inherit; color: inherit; text-align: left; }
.dd-caret { font-size: 9px; color: var(--muted-2); display: inline-block;
  transition: transform 0.12s; }
.dd-caret.open { transform: rotate(90deg); }
.dd-fold-body { padding: 2px 0 8px 28px; }
.dd-sub { display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  font-size: 11px; color: var(--muted-2); min-width: 0; }
.dd-subname { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.dd-subextra { flex: 1 1 auto; font-family: var(--mono); font-size: 10px;
  color: var(--faint); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.dd-subamt { flex: 0 0 auto; white-space: nowrap; }

/* the two-up pair, which stacks rather than squeezing */
.dd-pair { display: flex; gap: 14px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.dd-pair > .card { flex: 1 1 340px; min-width: 300px; max-width: 100%;
  margin-bottom: 14px; }

.dd-figs { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.dd-fig { display: flex; flex-direction: column; min-width: 0; }
.dd-prov { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--faint); }
.dd-stored { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--rule); opacity: 0.75; }
.dd-stored .dd-row { border-bottom: 0; padding: 3px 0; font-size: 11px; }

/* the client ledger */
.dd-lhead, .dd-lrow { display: flex; align-items: center; gap: 8px; width: 100%;
  min-width: 0; padding: 7px 0; }
.dd-lhead { border-bottom: 1px solid var(--ink); }
.dd-lhead .dd-lc { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted-2); }
.dd-lrow { background: none; border: 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; font: inherit; color: inherit; text-align: left; }
.dd-lc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-lc.name { flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; }
.dd-lhead .dd-lc.name { font-weight: 700; }
.dd-lc.num { flex: 0 0 96px; width: 96px; text-align: right; font-size: 12px; }
.dd-lc.num.neg { color: var(--alarm); font-weight: 700; }
.dd-invs { padding: 4px 0 12px 20px; }
.dd-inv { display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--hairline); font-size: 10px; min-width: 0; }
.dd-ivstate { flex: 0 0 84px; color: var(--muted-2); }
.dd-ivstate.pending { color: var(--alarm); }
.dd-ivmonth { flex: 0 0 60px; color: var(--faint); }
.dd-ivnum { flex: 1 1 auto; min-width: 0; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-ivbase, .dd-ivamt { flex: 0 0 80px; text-align: right; }
.dd-ivamt.neg { color: var(--alarm); }

/* The ledger tail. Dimmer than the rows above it: these are settled, and the
 * eye should land on what is owed first. */
.dd-more { background: var(--surface-2); padding-left: 6px; padding-right: 6px; }
.dd-more .dd-lc.name { font-weight: 400; color: var(--muted-2); }
.dd-tail .dd-lrow { opacity: 0.72; }

/* Hard right: margin-left auto rather than space-between, so the figures stay
 * together as a pair instead of spreading across the head. */

/* --- the monthly history table, to the penpot spec -----------------------
 * Fixed 920px, not fluid. No boxes: plain columns with hairline rules,
 * #dde3e0 between data rows and #c0cac5 at section boundaries. Both Plex
 * families are loaded in index.html -- the generic fallbacks are a large part
 * of why an earlier build of this table looked wrong.
 */
.plex-sans { font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; }
.plex-mono { font-family: 'IBM Plex Mono', 'Courier New', monospace; }

.hist-scroll { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.hist-scroll::-webkit-scrollbar { height: 9px; }
.hist-scroll::-webkit-scrollbar-thumb { background: #c0cac5; }
.hist-table { width: 920px; border-top: 1px solid #c0cac5; }

.hist-kpis { display: flex; padding: 12px 0 16px 0; border-bottom: 1px solid #c0cac5; }
.hist-kpi { width: 215px; flex: 0 0 215px; margin-right: 16.5px; }
.hist-kpi-label { font-size: 10px; letter-spacing: 1.3px; color: #8e9d97; text-transform: uppercase; }
.hist-kpi-value { font-size: 25px; font-weight: 500; margin-top: 4px; }
.hist-kpi-note { font-size: 12.5px; color: #5b6a65; margin-top: 2px; }

.hist-row { display: flex; align-items: center; height: 26px; border-bottom: 1px solid #dde3e0; font-size: 13px; }
.hist-row.hist-head { height: 23px; border-bottom: 1px solid #c0cac5; font-size: 11px; letter-spacing: 0.7px; }
.hist-row.hist-total { height: 30px; margin-top: 4px; border-top: 1px solid #c0cac5; border-bottom: none; }

.hist-plot { position: relative; }
.hist-barwrap { position: relative; display: block; height: 10px; width: 100%; }
.hist-bar { position: absolute; top: 0; height: 10px; display: block; }
/* One continuous rule down the column, spanning every row and the total. A
 * tick per row reads as a dashed line, which reads as broken. */
.hist-axis { position: absolute; top: 0; bottom: 0; width: 1px; background: #c0cac5; pointer-events: none; }
.hist-source { font-size: 9px; color: #8e9d97; margin-top: 10px; }

/* ==========================================================================
 * The departments dashboard, to ErramanDashboard.dc.html.
 *
 * Values here are the artboard's, not chosen: card padding 16px 18px, grid
 * gaps 12px, the chart/donut row gap 16px, card-title 11px/0.07em, the 24px
 * total figures, the 10px sub-lines, the department card's 20px devengo and
 * 14px caja, its #E4E3DC rule, the donut at 190px and its legend's 7px gap.
 * ========================================================================== */

.card-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #7A7970; }

/* period control -- one card, buttons left, stepper right */
.per-bar { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.per-grans { display: flex; align-items: center; gap: 4px; }
.per-gran { font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 6px 12px; border: 1px solid var(--rule); background: var(--card);
  color: #55534A; cursor: pointer; }
.per-gran.on { border-color: var(--ink); background: var(--ink); color: var(--card); }
.per-nav { display: flex; align-items: center; gap: 14px; }
.per-step { border: none; background: none; padding: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: #55534A; }
.per-step[disabled] { opacity: 0.3; cursor: default; }
.per-label { font-family: var(--mono); font-size: 13px; font-weight: 700;
  min-width: 90px; text-align: center; }

/* four-cell total bar */
.tot-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 20px; }
.tot-cell { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
  min-width: 0; }
.tot-fig { font-family: var(--mono); font-size: 24px; font-weight: 700; }
.tot-sub { font-family: var(--mono); font-size: 10px; color: #A3A296; }

/* chart and donut, half and half */
.pd-extras { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
  align-items: stretch; }
.dash-card { padding: 16px 18px; box-sizing: border-box; flex: 1 1 420px;
  min-width: 340px; max-width: 100%; display: flex; flex-direction: column; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.cf-figs { text-align: right; }
.cf-fig { font-family: var(--mono); font-size: 10px; color: #7A7970;
  white-space: nowrap; }

.cf-plot { position: relative; margin-top: 8px; }
.cf-ylab { position: absolute; left: 0; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: #55534A; white-space: nowrap; }
.cf-xlabs { position: relative; margin-top: 4px; height: 14px; }
.cf-xlab { position: absolute; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; color: #55534A; white-space: nowrap; }

/* donut: 190px, legend beside it, name and number 7px apart */
.dn-wrap { display: flex; align-items: center; gap: 18px; margin-top: 8px;
  flex-wrap: wrap; }
.dn-ring { width: 190px; height: 190px; flex: 0 0 auto; }
.dn-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dn-row { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.dn-sw { width: 10px; height: 10px; flex: 0 0 10px; }
.dn-name { font-family: var(--mono); font-size: 12px; color: #55534A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-amt { font-family: var(--mono); font-size: 12px; color: #A3A296;
  white-space: nowrap; }

/* department cards: three across, the ruled block pinned to the bottom so it
 * lines up across cards of different heights */
.pd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 20px; }
.dept-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit; cursor: pointer; min-width: 0; }
.dept-card:hover { background: #F4F4EF; }
.dept-top { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; }
.dept-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--ink);
  background: #EFEEE7; }
.dept-note { font-family: var(--mono); font-size: 9px; color: #A3A296;
  white-space: nowrap; }
.dept-fig { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; }
.dept-basis { font-family: var(--mono); font-size: 10px; color: #7A7970; }
.dept-big { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.dept-small { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.dept-lines { border-top: 1px solid #E4E3DC; padding-top: 8px; display: flex;
  flex-direction: column; gap: 4px; margin-top: auto; }
.dept-line { display: flex; justify-content: space-between; gap: 8px; }
.dept-lname { font-family: var(--mono); font-size: 11px; color: #55534A; }
.dept-lval { font-family: var(--mono); font-size: 11px; }
.dept-warn { font-family: var(--mono); font-size: 10px; color: #B4372B; }

@media (max-width: 1100px) {
  .tot-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .tot-bar, .pd-cards { grid-template-columns: minmax(0, 1fr); }
}
.per-plan { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #B4372B; }
.cf-note { font-family: var(--mono); font-size: 9px; color: #A3A296; margin: 8px 0 0; }

/* --- Libro Mayor, to ComercioLocalDetail.dc.html ------------------------ */
.lm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 18px; }
.lm-kpi { border: 1px solid #E4E3DC; padding: 12px 14px; border-radius: 3px;
  min-width: 0; }
.lm-kpi-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  color: #7A7970; text-transform: uppercase; }
.lm-kpi-gloss { font-style: italic; color: #A3A296; text-transform: none;
  letter-spacing: 0; }
.lm-kpi-value { font-family: var(--mono); font-size: 20px; font-weight: 700;
  margin-top: 2px; white-space: nowrap; }

/* the Spanish gloss beside each Basque heading */
.lm-gloss { font-style: normal; text-transform: none; letter-spacing: 0;
  color: #A3A296; }
.dd-lhead .lm-gloss { font-style: italic; }

/* the department chip before each client name */
.lm-tag { font-family: var(--mono); font-size: 9px; color: #2A4FD6;
  border: 1px solid #2A4FD6; padding: 1px 5px; flex: 0 0 auto;
  text-transform: uppercase; letter-spacing: 0.04em; }
.lm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; }

/* the invoice sub-table's own header and Guztira row */
.dd-inv.head { border-bottom: 1px solid var(--ink); font-family: var(--mono);
  font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #7A7970; }
.dd-inv.total { border-bottom: none; padding-top: 8px; font-family: var(--mono);
  font-size: 10px; }
.lm-tot { flex: 1 1 auto; font-weight: 700; text-transform: uppercase; }
.lm-tot-mid { flex: 0 0 auto; color: #7A7970; margin-right: 12px; }
.lm-tot-end { flex: 0 0 auto; font-weight: 700; color: #a8452f; font-size: 11px; }

@media (max-width: 900px) {
  .lm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* edit2 (Paul): every department in one row, tall and narrow, and plainly clickable. */
.pd-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dept-card { min-height: 280px; border: 1px solid var(--ink); transition: transform .08s, box-shadow .08s; }
.dept-card:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.dept-card .dept-fig { flex-direction: column; align-items: flex-start; gap: 2px; }
.dept-open { font-family: var(--mono); font-size: 10.5px; color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; margin-top: 4px; }
@media (max-width: 900px) { .pd-cards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pd-cards { grid-template-columns: minmax(0, 1fr); } }
.dd-owing .dd-lc.name span:last-child { font-weight: 600; color: var(--alarm, #b4372b); }

/* Departamentos, 2026-11-03: door marks beside the names, every card's lines the same, the
 * history across the full width, a pointer to the cash page instead of a copy of its chart. */
.dept-chip { display: inline-flex; align-items: center; gap: 6px; }
.dept-chip .tab-ico { width: 14px; height: 14px; flex: 0 0 14px; }
.dd-name { display: inline-flex; align-items: center; gap: 10px; }
.dd-name .tab-ico { width: 24px; height: 24px; flex: 0 0 24px; }
.dept-line-cash { border-top: 1px solid #E4E3DC; padding-top: 4px; margin-top: 2px; }
.pd-cashlink { flex: 0 1 280px; min-width: 220px; gap: 8px; text-decoration: none; color: inherit; }
.pd-cashlink:hover { background: #F4F4EF; }
.hist-table { width: 100%; min-width: 920px; }
.dd ~ .tk-section { margin-top: 28px; }
.dd-title { margin-bottom: 10px; }

/* Departamentos, second pass (Paul's page rules, 2026-11-03). */
.dd-subamt { margin-left: auto; }                       /* every amount in its column, with or without a note */
a.dd-subname { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dd-foldhead { cursor: pointer; }
.dd-label .cm-note, .card-head .cm-note, .hist-source .cm-note { margin-left: 4px; vertical-align: middle; }
.dd-headl { display: inline-flex; align-items: center; }
.hist-source { text-align: right; margin-top: 6px; }
.per-gran.is-press { animation: per-press .22s ease-out; }
@keyframes per-press { 45% { transform: translateY(2px); } }
/* The Panel on one screen. */
.dn-ring { width: 128px; height: 128px; }
.dn-legend { gap: 4px; }
.pd-cashlink { flex: 0 1 180px; min-width: 150px; }
.pd-extras { margin-bottom: 12px; }
.dept-card { min-height: 0; padding: 12px 14px; gap: 6px; }
.pd-cards { margin-bottom: 8px; }

/* A month not closed: real upright, the plan in italics in its own column (Paul, 2026-11-04). */
.is-plan { font-style: italic; }
/* A provisional month: what rests on estimated labour is in italics, what is invoiced is not. */
.per-provisional .dept-card .dept-figs .dept-big, .per-provisional .tot-cell:nth-child(2) .tot-fig, .per-provisional .tot-cell:nth-child(3) .tot-fig { font-style: italic; }
.tot-figs, .dept-figs { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tot-plan { font-family: var(--mono); font-size: 16px; color: #55534A; }
.dept-small.is-beside, .dept-big.is-beside { font-weight: 400; font-size: 13px; }
.dept-line.is-both { display: grid; grid-template-columns: minmax(0, 1fr) 66px 66px; gap: 6px; }
.dept-line.is-both .dept-lval, .dept-line.is-plan .dept-lval { text-align: right; white-space: nowrap; }
.dept-line-head .dept-lval { font-size: 9px; color: #7A7970; }
.dd-waterfall.is-both .dd-label, .dd-waterfall.is-plan .dd-label { flex: 1 1 auto; }
.dd-waterfall.is-both .dd-amt { width: 110px; text-align: right; }
.dd-plan { width: 110px; text-align: right; white-space: nowrap; color: #55534A; }
.dd-plan.neg { color: var(--alarm); }
.dd-waterfall.is-plan .dd-row > .dd-amt { display: none; }
.dd-colhead { font-size: 10px; color: #7A7970; padding-top: 0; }
.per-plan .cm-note { margin-left: 4px; vertical-align: middle; }
.dn-ring { width: 116px; height: 116px; }

/* Departamentos: the money states on the top boxes and the cards, and the drawers (Paul, 2026-11-04). */
.tot-open, .dept-card { cursor: pointer; }
.tot-open:hover { background: #F4F4EF; }
.tot-cell .tot-fig small { font-size: 10px; font-weight: 400; color: #7A7970; }
.money-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: 6px; font-family: var(--mono); font-size: 11px; padding: 1.5px 0; }
.money-row.mst { border-top: 1px solid #E4E3DC; margin-top: 3px; padding-top: 4px; font-weight: 600; }
.money-row .mn, .money-3 .mn { text-align: right; white-space: nowrap; }
.money-row .mnote { grid-column: 1 / -1; font-size: 9.5px; color: #7A7970; line-height: 1.1; }
.msw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; text-decoration: none; vertical-align: -1px; }
.msw.s-plan { border: 1px dashed #7A7970; background: repeating-linear-gradient(45deg, #fff, #fff 2px, #D8D7CE 2px, #D8D7CE 4px); }
.msw.s-done, .money-bar .s-done { background: #8B7355; }
.msw.s-fact, .money-bar .s-fact { background: #C08A2E; }
.msw.s-rec, .money-bar .s-rec { background: #2F5233; }
.money-bar { display: flex; height: 10px; border: 1px dashed #7A7970; background: repeating-linear-gradient(45deg, #fff, #fff 3px, #E4E3DC 3px, #E4E3DC 6px); margin: 0 0 6px; }
.money-bar b { display: block; height: 100%; }
.money-3 { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; gap: 4px; font-family: var(--mono); font-size: 11px; padding: 1.5px 0; }
.money-3.hd { font-size: 9.5px; color: #7A7970; }
.money-3.mst { border-top: 1px solid #E4E3DC; margin-top: 3px; padding-top: 4px; font-weight: 600; }
.dept-sec { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #7A7970; padding-top: 6px; border-top: 1px solid #E4E3DC; margin-top: 2px; }
.dept-figs { display: flex; gap: 14px; align-items: baseline; }
.dept-card .dept-figs .dept-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.dept-cash { border-top: 1px solid #E4E3DC; padding-top: 4px; margin-top: auto; }
.pd-extras .dash-card { flex: 1 1 340px; min-width: 300px; }
.pd-extras .cf-note { display: none; }
.pd-extras .cf-plot svg { max-height: 104px; }
.pd-extras .cf-ylab, .pd-extras .cf-xlabs { display: none; }
.drw-title .tab-ico { display: inline-block; width: 22px; height: 22px; vertical-align: -3px; }
.pnl-kind { font: 11px var(--mono); border: 1px solid var(--ink); background: #EFEEE7; padding: 2px 7px; margin-left: 8px; letter-spacing: .04em; text-transform: uppercase; vertical-align: 4px; }
.pnl-per { margin: 0 0 4px; }
.pnl-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.pnl-2 .pnl-t, .drw-body > .pnl-t { width: 100%; }
.pnl-ladder { background: var(--card); border: 1px solid var(--rule); padding: 10px 12px; }
.pnl-link .tab-ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.drw-body .dash-card { min-width: 0; padding: 8px 10px; }
@media (max-width: 900px) { .pnl-2 { grid-template-columns: minmax(0, 1fr); } }
.tot-open.tot-cell { padding: 10px 14px; gap: 2px; justify-content: flex-start; }
.tot-open .tot-fig { font-size: 21px; margin-bottom: 3px; }
.tot-bar { margin-bottom: 10px; }
.money-row { align-items: baseline; }
.dept-card { gap: 3px; }
.dept-card .dept-top { margin-bottom: 3px; }
/* The cards' five parts share their row heights (2026-11-08): Falta por recibir and Rentabilidad line up across the
   departments, whatever lines each card has above them. Each card spans five rows of the cards' grid. */
.pd-cards { grid-auto-rows: auto; row-gap: 0; }
.pd-cards > .dept-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; margin-bottom: 12px; }
.dept-part { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dept-part-4 { justify-content: flex-end; }
.dept-part-4 .dept-cash { margin-top: 0; }
.dept-card .money-bar { margin: 2px 0 4px; }
.pd-extras { margin-bottom: 10px; }
.pd-extras .dash-card { padding: 10px 14px; }
.pd-extras .cf-plot { margin-top: 2px; }
.pd-extras .cf-plot svg { width: 100%; height: 84px; max-height: none; }
.pd-extras .dn-ring { width: 96px; height: 96px; }
.pd-extras .dn-legend { gap: 2px; }
.pd-extras .dn-wrap { margin-top: 2px; }
.pd-extras .cf-plot svg { height: 84px !important; }
.drw-body .cf-plot svg { height: 110px !important; }
/* Costes previstos: every cost beside the ring, in columns of five; Caja: months and today's line. */
.dn-legend, .pd-extras .dn-legend { flex-direction: row; flex-wrap: wrap; gap: 2px 26px; }
.dn-col { display: grid; grid-template-columns: 10px auto auto; gap: 2px 7px; align-items: baseline; align-content: start; }
.dn-col .dn-amt { text-align: right; justify-self: end; }
.pd-extras .cf-xlabs { display: block; }
.pd-extras .cf-plot svg { height: 66px !important; }
.cf-today { position: absolute; top: -2px; transform: translateX(-50%); padding: 0 3px; background: var(--card);
  font-family: var(--mono); font-size: 9px; color: var(--remote); }

/* How a figure was made: the recipe drawer (panels.js P.receta, Paul 2026-11-08, version A). */
.rcp-label { margin: 0; }
.rcp-fig { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 14px; }
.rcp-fig b { font: 700 34px var(--sans); color: var(--paul); font-variant-numeric: tabular-nums; }
.rcp-fig b.is-neg { color: var(--alarm); }
.rcp-t { width: 100%; }
.rcp-t td:first-child { width: 22px; padding-right: 0; }
.rcp-t .rcp-op { font: 600 13px var(--mono); color: var(--muted); }
.rcp-t tr.rcp-step td { cursor: pointer; }
.rcp-t tr.rcp-step:hover td { background: var(--field-focus); }
.rcp-t tr.rcp-line td { font-size: 12px; background: var(--surface-2); border-bottom-color: var(--rule); }
.rcp-t tr.rcp-line td.rcp-name { padding-left: 22px; }
.rcp-t tr.rcp-lh td { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rcp-t td.rcp-what { color: var(--muted); font: 11px var(--mono); white-space: nowrap; }
.rcp-t td.rcp-tot { color: var(--muted); }
.rcp-t tr.is-total td { background: var(--card); }
.rcp-t tr.is-total.rcp-end td { border-top: 2px solid var(--ink); font-size: 14px; }
.rcp-t tr.is-total.rcp-end td.num:not(.is-neg) { color: var(--paul); }
.rcp-foot { margin-top: 10px; font: 11px var(--mono); color: var(--muted); letter-spacing: .03em; }
.rcp-foot .rcp-ok { color: var(--paul); }
.rcp-foot .rcp-bad { color: var(--alarm); }

.rcp-hold [data-recipe] { cursor: help; outline: 1px dashed currentColor; outline-offset: 3px; }
/* A step's Grist tables, and the rows they open beside the recipe. */
.rcp-tabs { display: block; margin-top: 2px; }
.rcp-tab { font: 10.5px var(--mono); color: var(--muted); border: 1px solid var(--rule); padding: 0 5px; margin-right: 4px; text-decoration: none; }
.rcp-tab:hover { color: var(--ink); border-color: var(--ink); }
.rcp-scroll { overflow-x: auto; max-width: 100%; }
.rcp-scroll .pnl-t td { white-space: nowrap; }
.rcp-about { font-size: 13px; max-width: 640px; margin: 14px 0 10px; }
.rcp-links { margin: 4px 0 0; padding-left: 18px; font-size: 13px; max-width: 640px; }
.rcp-links li { margin: 3px 0; }
.rcp-links b { font: 600 12px var(--mono); }
.drw-title .pnl-kind { white-space: nowrap; display: inline-block; }