/* ==========================================================================
 * /cash -- the cash-flow forecast.
 *
 * Follows the department pages' language rather than inventing one: the same
 * card, the same hairlines, the same serif for figures. The only thing new
 * here is the basis chip, which has to be legible at a glance in three
 * states, because the whole page depends on nobody mistaking a trailing
 * average for a fact.
 * ========================================================================== */

.cf { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.cf > .card { margin-bottom: 14px; max-width: 100%; }

.cf-cardhead {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cf-title {
  font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
}

/* --- the head card -------------------------------------------------------- */
.cf-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
.cf-kpi { border: 1px solid var(--hairline); padding: 10px 12px; min-width: 0; }
.cf-kpi-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2);
}
.cf-kpi-value {
  font-family: var(--serif); font-size: 25px; font-weight: 700;
  margin: 4px 0 2px; line-height: 1.1;
}
.cf-kpi-note { font-size: 11px; color: var(--muted-2); }

.cf-accts { display: flex; flex-wrap: wrap; gap: 18px; }
.cf-acct { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.cf-acct-n { color: var(--muted-2); font-family: var(--mono, monospace); font-size: 11px; }
.cf-acct-v { font-variant-numeric: tabular-nums; }

.cf-warn { color: #a8452f; }

/* --- the chart ------------------------------------------------------------ */
.cf-svgwrap { width: 100%; overflow: hidden; }
.cf-svg { width: 100%; height: auto; display: block; }
.cf-axis {
  font-family: var(--mono, ui-monospace, monospace); font-size: 9px; fill: #8A8578;
}




/* --- the basis chip ------------------------------------------------------- */
.cf-basis {
  display: inline-block; font-family: var(--mono, monospace); font-size: 9px;
  letter-spacing: 0.04em; padding: 1px 5px; border: 1px solid; border-radius: 2px;
  white-space: nowrap;
}
.cf-b-actual  { color: #2d6b5c; border-color: #2d6b5c; }
.cf-b-known   { color: #2A4FD6; border-color: #2A4FD6; }
.cf-b-derived { color: #8B7355; border-color: #8B7355; }
.cf-b-average { color: #a8452f; border-color: #a8452f; }
.cf-b-mixed   { color: #6b6558; border-color: #6b6558; }

/* --- the tax calendar ----------------------------------------------------- */
.cf-taxes { display: flex; flex-direction: column; }
/* Three columns, because the row has three children. It was five -- date,
   label, provenance chip, source, amount -- and when the card was cut back to
   when / what / how much, the amount stayed parked in the third track with two
   empty ones to its right. The template has to match what is actually put in
   it, or the last column is wherever the leftovers land. */
.cf-tax {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) 92px;
  gap: 10px; align-items: baseline; padding: 5px 0;
  border-bottom: 1px solid #eeebe3; font-size: 12px;
}
.cf-tax-d { font-size: 11px; color: var(--muted-2); }
.cf-tax-s { font-size: 11px; color: var(--muted-2); }
.cf-tax-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cf-tax-v.neg { color: #a8452f; }

.cf-check { margin: 10px 0; border-top: 1px solid #dde3e0; padding-top: 8px; }
.cf-check-head, .cf-check-row {
  display: grid; grid-template-columns: 1.4fr 70px 1fr 1fr; gap: 8px;
  font-size: 11px; padding: 2px 0;
}
.cf-check-head {
  color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px;
}
.cf-check-row .mono { font-variant-numeric: tabular-nums; }

/* --- the two editors ------------------------------------------------------ */
.cf-pair { display: flex; gap: 14px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.cf-pair > .card { flex: 1 1 400px; min-width: 320px; max-width: 100%; margin-bottom: 14px; }

.cf-list { display: flex; flex-direction: column; margin-bottom: 10px; }
.cf-item {
  display: grid; grid-template-columns: 1.3fr 1.7fr 96px 22px;
  gap: 8px; align-items: baseline; padding: 5px 0;
  border-bottom: 1px solid #eeebe3; font-size: 12px;
}
.cf-item.off { opacity: 0.5; }
.cf-item-s { font-size: 11px; color: var(--muted-2); }
.cf-item-v { text-align: right; font-variant-numeric: tabular-nums; }
.cf-item-v.neg { color: #a8452f; }
.cf-x {
  border: none; background: none; cursor: pointer; color: var(--muted-2);
  font-size: 15px; line-height: 1; padding: 0;
}
.cf-x:hover { color: #a8452f; }

.cf-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-form input[type="text"], .cf-form input:not([type]), .cf-form input[type="number"],
.cf-form select {
  border: 1px solid var(--hairline); background: var(--panel-figure, #fff);
  padding: 5px 7px; font: inherit; font-size: 12px; min-width: 0; flex: 1 1 120px;
}
.cf-form input[type="number"] { flex: 0 1 92px; }
.cf-check-lbl {
  display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--muted-2);
}
.cf-add {
  border: 1px solid var(--ink); background: var(--ink); color: var(--panel-figure, #fff);
  padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer;
}
.cf-add:hover { opacity: 0.85; }

@media (max-width: 760px) {
        .cf-tax { grid-template-columns: 86px 1fr 90px; }
  .cf-tax-s, .cf-tax .cf-basis { display: none; }
}


/* ==========================================================================
 * The Prevision, to the artboard.
 *
 * One table: the cash flow and the month minimum are rows at the top of it,
 * black bands split income from cost, and every cell carries the colour of
 * what kind of figure it is. That last part is the whole design -- a page
 * that cannot tell "it happened" from "somebody guessed" is worse than no
 * page, and colour says it without a word per cell.
 * ========================================================================== */
.cf-grid-card { max-width: 100%; }
.cg-top { align-items: flex-start; justify-content: space-between; }
.cg-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.cf-gstatus { color: var(--muted-2); }
.cf-gstatus.bad { color: #a8452f; }

.cg-legend { display: flex; gap: 7px; flex-shrink: 0; flex-wrap: wrap; }
.cg-leg { width: 112px; padding: 7px 9px; border: 1px solid; }
.cg-leg-n {
  font-family: var(--mono, monospace); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cg-leg-w { font-size: 10.5px; line-height: 1.35; margin-top: 3px; }

.cg { min-width: 940px; border: 1px solid var(--ink); background: #fff; }
.cg-row { display: grid; align-items: stretch; }

.cg-c {
  padding: 5px 8px; font-size: 11.5px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; border-bottom: 1px solid #EEEBE3;
  border-left: 1px solid #EEEBE3; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end; min-width: 0;
}
.cg-c.fut { background: #FDFDFB; }
/* Where the record stops and the typing starts. */
.cg-c.cut { border-left: 2px solid #2A4FD6; }
.cg-c.neg { color: #a8452f; }
.cg-c.cg-lab {
  text-align: left; align-items: baseline; border-left: none;
  flex-direction: row; justify-content: space-between; gap: 6px;
}

.cg-head {
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #55534A; background: #ECEBE3;
  border-bottom: 1px solid var(--ink); padding: 7px 8px;
}
.cg-head.fut { color: #2A4FD6; background: #E4E8F2; }

/* The four states. The fills are the artboard's, not approximations. */
.cg-c.s-real     { background: #ECEBE3; color: #141413; }
.cg-c.s-cobrado  { background: #DCE8DF; color: #1f4f36; }
.cg-c.s-estimado { background: #F2EAD8; color: #7a5c16; }
.cg-c.s-posible  { background: #E6E5F2; color: #3a3a7a; }

.cg-flow { font-weight: 700; font-size: 12px; background: #fff; }
.cg-flow.fut { background: #FDFDFB; }
.cg-low { background: #FFF8F6; color: #a8452f; font-size: 10.5px; }
/* A modelled low is a test, not a record. */
.cg-low.modelled { border-bottom-style: dotted; color: #b58a6a; }

.cg-band {
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--ink); color: var(--panel-figure, #fff);
  border-bottom: none; border-left-color: var(--ink);
}
.cg-tot {
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: 0.04em;
  font-weight: 700; background: #ECEBE3; color: #141413;
  border-top: 1px solid #C7C6BC;
}
.cg-tot.fut { background: #ECEBE3; }
.cg-diff {
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: 0.04em;
  font-weight: 700; background: var(--ink); color: #bfe0cd; border-left-color: #333;
}
.cg-diff.neg { color: #e8a79b; }
.cg-diff.fut { background: var(--ink); }

.cg-name { font-size: 11.5px; color: var(--ink); }
.cg-src {
  font-family: var(--mono, monospace); font-size: 8.5px; font-style: normal;
  letter-spacing: 0.04em; flex-shrink: 0;
}
.cg-src.deriv { color: #2d6b5c; }
.cg-src.mano { color: #C08A2E; }

.cg-act { font-size: 11.5px; }
.cg-act.neg { color: #a8452f; }
/* The estimate and the miss, under the figure that settled it. */
.cg-plan { font-size: 9px; color: #8A8578; }
.cg-var { font-size: 9px; font-family: var(--mono, monospace); }
.cg-var.under { color: #a8452f; }
.cg-var.over { color: #2d6b5c; }

.cg-in {
  width: 100%; border: 1px solid transparent; background: transparent;
  padding: 2px 3px; font: inherit; font-size: 11.5px; text-align: right;
  font-variant-numeric: tabular-nums; min-width: 0; box-sizing: border-box;
  color: inherit;
}
.cg-in:hover { border-color: var(--hairline); background: #fff; }
.cg-in:focus { border-color: #2A4FD6; background: #fff; outline: none; }

/* --- the chart, as two rows of the same grid ------------------------------
 * Not an SVG with its own coordinate system: a cell per month, with the line
 * segment and the bars placed as a percentage of the cell's height. The grid
 * imposes the alignment, so it survives a change of width or of month count.
 * That is the whole reason the chart moved inside the table.
 */
.cg-c.cg-plot {
  position: relative; padding: 0; overflow: visible;
  border-left: 1px solid #F4F1EA; border-bottom: 1px solid #EEEBE3;
}
.cg-c.cg-axis {
  flex-direction: column; align-items: flex-end; justify-content: space-between;
  padding: 2px 8px 2px 10px; border-bottom: 1px solid #EEEBE3;
}
.cg-axis i {
  font-family: var(--mono, monospace); font-size: 8.5px; font-style: normal;
  color: var(--muted-2);
}
/* The bar band's own axis: +scale, what the band is, -scale. It had only the
   middle line, which meant the heights stood for nothing a reader could name. */
/* `.cg-c.cg-barlab`, not `.cg-barlab`: the cell already carries `.cg-c.cg-lab`,
   which sets a row direction at specificity 0,2,0. A single class lost to it
   silently -- the three labels ran together on one line and the first was
   pushed out of the cell. `.cg-c.cg-axis` beside it had the right shape all
   along, which is the tell I walked past. */
.cg-c.cg-barlab {
  font-family: var(--mono, monospace); font-size: 8.5px; letter-spacing: 0.04em;
  color: var(--muted-2);
  flex-direction: column; align-items: flex-end; justify-content: space-between;
  padding: 2px 8px 2px 10px;
  border-bottom: 1px solid #EEEBE3;
}
.cg-barlab i { font-style: normal; }
.cg-barlab-n { color: var(--faint, #a3a296); }

/* A bar past the end of the scale is drawn to the edge and SAYS so, with a
   sawtooth along its cut edge. The alternative -- scaling everything to the
   one PERTE instalment, forty times the median month -- turned every trading
   month into a hairline, which hides them without admitting it. */
/* A bar past the end of the scale STOPS SQUARE at the band edge. Paul's call,
   2026-09-23, after two attempts at marking the cut on the bar itself: a dashed
   sawtooth that read as a row of dots, then a fade. Both had to be explained,
   which is the one thing such a mark cannot need.

   So the fact is stated in words instead -- the bar axis carries "N fuera de
   escala" and the hover label carries the real figure. `.cg-bar.cut` is still
   set in the markup and is deliberately unstyled; it is what the axis counts. */

/* The cash line: horizontal and vertical only. A balance does not slope
   between two month-ends, it sits and then jumps. */
.cg-seg {
  position: absolute; left: 0; right: 0;
  border-top: 1.6px solid #1a1a18;
}
.cg-jump {
  position: absolute; left: 0;
  border-left: 1.6px solid #1a1a18;
}

/* The bars touch inside a month and are separated between months, so a month
   reads as one block rather than six loose marks. */
.cg-bar { position: absolute; }
.cg-bar-t {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}

.cg-legends { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.cg-dleg { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cg-dleg-i {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--mono, monospace); font-size: 8.5px; color: var(--body);
}
.cg-dleg-i i { width: 8px; height: 8px; flex-shrink: 0; display: block; }

/* The year switch, in the Prevision header where the explanatory sentence was.
   "Ahora" is the rolling window the page opens on; a year pins it to that
   calendar year. */
.cg-years { display: inline-flex; gap: 4px; align-items: center; margin-left: 4px; }

/* The accounts, inside Caja hoy rather than on a strip under the card. They are
   what the figure is made of, so they belong in the same box as it. */
.cf-kpi-accts {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
}
.cf-kpi-accts .cf-acct { display: inline-flex; gap: 6px; align-items: baseline; }

/* The name in the middle of either axis is quieter than the figures around it:
   it is read once, the numbers are read every time. */
.cg-axis-n { color: var(--faint, #a3a296); letter-spacing: 0.04em; }

/* Zero. It is the one reference a reader needs and neither band had it: the
   only rule visible was the cell's bottom border, which is the FLOOR of the
   scale -- -10.588 on the line band -- so a balance heading below zero crossed
   nothing. Drawn darker than the band separators so it reads as the axis and
   they read as edges. */
.cg-zero {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid #C7C6BC;
  pointer-events: none;
}

/* --- the cash line: a close, and how far it dipped ------------------------
 *
 * A month-end is a point. The full-width flat segment that used to be drawn
 * here said the balance sat at 24.912 for the whole of January; it dipped to
 * 14.081 on the way, and on a runway chart that dip is the half that matters.
 * It was already computed and shown as a table row, with nothing connecting it
 * to the chart.
 */

/* The close: short, solid, centred. The thing you read. */
.cg-close {
  position: absolute; left: 22%; right: 22%;
  border-top: 2px solid #1a1a18;
}
/* The drop to the month's low, and a lighter tick where it bottomed out. */
.cg-range {
  position: absolute; left: 50%; width: 0;
  border-left: 1px solid #8a887e;
}
.cg-lowtick {
  position: absolute; left: 34%; right: 34%;
  border-top: 1px solid #8a887e;
}
/* A faint connector so the closes read as a series without a line being drawn
   through months the balance never actually held. */
.cg-link {
  position: absolute; left: 50%; width: 0;
  border-left: 1px dotted #c7c6bc;
}
.cg-close.fut { border-top-style: dashed; border-top-width: 1.5px; }
.cg-range.fut, .cg-lowtick.fut { border-color: #b3b1a6; }

/* The dip marker in the legend. */
.cg-dleg-dip {
  display: inline-block; width: 9px; height: 9px;
  border-top: 2px solid #1a1a18; border-bottom: 1px solid #8a887e;
  background: none !important;
}

/* ==========================================================================
   The chart: ONE band, ONE range
   ==========================================================================
   It was two stacked bands with two scales -- two graphs sharing a month axis
   and nothing else, where the same height meant different amounts depending on
   which half you were looking at. Both series are euros and they fit one
   range, so there is now one band, one axis, and exactly one horizontal line
   on it: zero. */

.cg-c.cg-plot1 {
  position: relative;
  padding: 0;
  /* No bottom border. Every cell having one drew a horizontal rule across the
     chart at the floor of the scale, which read as the axis and is not. */
  border-bottom: none;
  border-left: none;
  overflow: hidden;
}

/* --- the y axis ---------------------------------------------------------- */
/*
 * Absolutely positioned against the same height as the plot, so a label sits
 * at the value it names instead of being spaced evenly and hoping. 10px, not
 * 8.5px: it is the key to every height on the chart and it was unreadable.
 */
.cg-c.cg-yaxis {
  position: relative;
  display: block;
  padding: 0 8px 0 10px;
  border-bottom: none;
}
.cg-tick {
  position: absolute; right: 8px;
  transform: translateY(-50%);
  font-family: var(--mono, monospace); font-size: 10px; font-style: normal;
  color: var(--muted-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cg-tick.zero { color: var(--ink); font-weight: 700; }

/* --- the bars ------------------------------------------------------------ */
/*
 * Full width, so neighbouring months TOUCH and the year reads as one
 * continuous shape. Translucent, so the zero rule and the minimum line stay
 * visible through them rather than being interrupted -- which is also why the
 * original chart's colours read as calm and the solid ones did not.
 */
.cg-nbar {
  position: absolute; left: 0; right: 0;
  border: none;
}
.cg-nbar.up { background: rgba(47, 82, 51, 0.42); }
.cg-nbar.down { background: rgba(180, 55, 43, 0.42); }
/* A forecast month is the same shape, lighter. Dashes at this width turned
   into noise. */
.cg-nbar.fut.up { background: rgba(47, 82, 51, 0.17); }
.cg-nbar.fut.down { background: rgba(180, 55, 43, 0.17); }

/* --- the line: the lowest the balance got that month --------------------- */
/*
 * Not the month-end close. A close says nothing about whether payroll could be
 * paid on the 14th, and the closes were what made the old line look healthy in
 * a year that repeatedly dipped near the floor.
 */
.cg-mline {
  position: absolute; left: 0; right: 0;
  border-top: 1.8px solid #141413;
}
.cg-mjump {
  position: absolute; left: 0; width: 0;
  border-left: 1.8px solid #141413;
}
.cg-mline.fut { border-top-style: dashed; border-top-width: 1.5px; }
.cg-mjump.fut { border-left-style: dashed; border-left-width: 1.5px; }

/* Zero: the main horizontal line, and the only one. */
.cg-c.cg-plot1 .cg-zero { border-top: 1px solid #8a887e; }

/* The line in the legend: a plain black rule, because that is what it is. */
.cg-dleg-min {
  display: inline-block; width: 12px; height: 0;
  border-top: 1.8px solid #141413;
  background: none !important;
  align-self: center;
}

/* --- the chart card's header: the position, and where it is going ---------
 *
 * Caja hoy and Se acaba en used to sit in a band of their own above this card,
 * with "Previsión" as a title here. The title said nothing the chart beneath it
 * does not say better, and the figure and the forecast of that figure were two
 * cards apart. Now the header IS the position.
 */
.cg-top { align-items: flex-start; gap: 22px 32px; flex-wrap: wrap; }

.cg-now { display: flex; flex-direction: column; gap: 3px; min-width: 210px; }
.cg-out { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.cg-yearrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px;
}
.cg-legends { margin-left: auto; }

@media (max-width: 760px) {
  .cg-legends { margin-left: 0; }
}

/* --- room around the chart ------------------------------------------------
 *
 * The axis labels sat hard against the plot and the top bar against the card
 * edge. The vertical room is in the JS (PAD, inside the cell, so the drawing
 * keeps its own height); this is the horizontal half.
 */
.cg-c.cg-yaxis { padding-right: 14px; }
.cg-tick { right: 14px; }
/* A hairline between the axis and the plot, so the numbers read as a scale
   belonging to the chart rather than a column of figures next to it. */
.cg-c.cg-plot1:first-of-type { border-left: 1px solid #DDDAD0; }

/* ==========================================================================
   Grouped grid, department picker, and the dialog a cell opens
   ========================================================================== */

/* A group heading inside a section: quieter than the INGRESOS / GASTOS band,
   louder than a line. Three levels, because there are three. */
.cg-c.cg-group {
  background: #F4F2EC;
  font-family: var(--mono, monospace); font-size: 9.5px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-2);
  border-top: 1px solid #E4E1D8;
}
/* justify-content, not just text-align. `.cg-c.cg-lab` sets space-between, so
   the caret went to the left edge and the name was pushed to the right against
   the figures -- which is exactly where a group name must not be. */
.cg-lab.cg-group {
  text-align: left; align-items: baseline;
  justify-content: flex-start; gap: 0;
}
/* A line inside a group is indented, so the hierarchy is visible without a
   second font or a bullet. */
.cg-lab.cg-sub { padding-left: 20px; }

/* The subtotal of one group. Lighter than the section total under it: two
   totals at the same weight is how a reader loses which one is which. */
.cg-c.cg-sub-tot {
  font-weight: 600; background: #FAF9F5;
  border-top: 1px solid #E4E1D8;
}
.cg-lab.cg-sub-tot {
  text-align: left; align-items: baseline;
  justify-content: flex-start; padding-left: 20px;
}

/* --- the department picker ----------------------------------------------- */
.cg-depts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cg-pick { display: flex; flex-direction: column; gap: 5px; min-width: 220px; max-width: 460px; }

/* --- a future cell: a button, not a box ---------------------------------- */
/*
 * It used to be a bare number input. A number with no allocation behind it and
 * no reason written down is exactly the figure nobody can check six months
 * later, so the cell opens a dialog that asks for all three.
 */
.cg-cell-btn {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  width: 100%; height: 100%; cursor: pointer; padding: 2px 0;
}
.cg-cell-btn:hover { background: rgba(42, 79, 214, 0.06); }
.cg-cell-btn:focus-visible { outline: 2px solid var(--link, #2A4FD6); outline-offset: -2px; }
.cg-add { color: var(--faint, #a3a296); font-size: 13px; }
.cg-cell-btn:hover .cg-add { color: var(--link, #2A4FD6); }
/* How many departments it is split between, when it is split. */
.cg-cdepts {
  font-family: var(--mono, monospace); font-size: 8.5px;
  color: var(--accent-purple, #4e4e8a);
}

/* --- the dialog ----------------------------------------------------------- */
.cd-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 20, 19, 0.38);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cd-box {
  background: var(--card, #fff); border: 1px solid var(--hairline, #141413);
  width: min(460px, 100%); max-height: 90vh; overflow-y: auto;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 13px;
}
.cd-head { display: flex; flex-direction: column; gap: 2px; }
.cd-title { font-size: 16px; font-weight: 600; }
.cd-f { display: flex; flex-direction: column; gap: 5px; }
.cd-in {
  font: inherit; font-family: var(--mono, monospace); font-size: 15px;
  padding: 7px 9px; border: 1px solid var(--rule, #c7c6bc);
  background: var(--card, #fff); color: var(--ink, #141413);
}
.cd-in:focus { outline: none; border-color: var(--hairline, #141413); }
.cd-note {
  font: inherit; font-size: 13px; padding: 7px 9px; resize: vertical;
  border: 1px solid var(--rule, #c7c6bc);
  background: var(--card, #fff); color: var(--ink, #141413);
}
.cd-note:focus { outline: none; border-color: var(--hairline, #141413); }
.cd-hint { margin: 0; max-width: 46ch; }
.cd-msg { margin: 0; min-height: 1em; }
.cd-msg.bad { color: var(--alarm, #b4372b); }
.cd-act { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

/* ==========================================================================
   Two thirds and one third
   ==========================================================================
   The grid is read across -- fifteen months of it -- so it takes the width.
   The position and the tax calendar are glanced at, so they sit beside it
   instead of underneath, where checking the balance cost a scroll past the
   whole table. */
/* A `full` route: html.is-full locks the window, so this fills what it is
   given and lets each pane scroll itself. The table is fifteen months wide and
   the side panel is a column of figures; on a page that scrolls as a whole,
   reaching the bottom of one means losing sight of the other.

   No cards floating on paper either. Paul wants this to read like /planning,
   where the elements ARE the page. So the surfaces run to the edges, share
   hairlines instead of gaps, and the background stops showing between them. */
html.is-full .cf { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
html.is-full .cf-split {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  gap: 0; height: 100%;
  /* stretch, NOT the base rule's `start`. With `start` each pane is as tall as
     its own content, so nothing ever overflows and nothing ever scrolls --
     which is why the table could not be scrolled at all. */
  align-items: stretch;
}
html.is-full .cf-main {
  min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--hairline, #141413);
  /* White the whole way down. The paper showed under the table wherever the
     rows ran out, so the pane looked like a card that had stopped rather than
     a surface that continues. */
  background: var(--card, #fff);
}
html.is-full .cf-main > .card {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border: none; margin: 0;
}
/* The table scrolls both ways inside its own pane. The side panel scrolls
   itself, separately, only if it overruns -- so reading down the table never
   moves the position out of sight, which is the whole point of the split. */
html.is-full .cf-main .cf-scroll {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto;
  background: var(--card, #fff);
}
html.is-full .cf-side { min-height: 0; height: 100%; gap: 0; }
html.is-full .cf-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* The two right-hand cards are one surface now: sections of a panel that
   scrolls as one, not two objects with paper between them. */
.cf-panel { display: flex; flex-direction: column; }
/* The 1cm of white down the left. On the panel's children rather than the
   panel, so the hairline between the two sections still runs edge to edge. */

/* Each section in its own box inside the white panel, the way the planning
   page draws External costs and Estimated payment schedule: a thin dark rule
   around each, white between them. A shared hairline made the two read as one
   long list with a line through it rather than as two things. */
/* Beige, so the boxes inside it read as objects ON something rather than as
   more of the same white the table is made of. */
.cf-panel { padding: 14px 19px 14px 38px; gap: 14px; background: var(--paper, #e9e9e4); }
/* White under the last row. The grid only paints the rows it has, so the paper
   showed through beneath them and the pane looked like it had run out. */
.cf-main, .cf-main > .card, .cg-grid { background: var(--card, #fff); }
.cf-panel > .card {
  border: 1px solid var(--hairline, #141413);
  margin: 0; border-radius: 0;
  padding: 11px 13px;
}

.cf-split {
  display: grid;
  /* The left column takes everything the right does not need. The right holds
     two cards of figures whose width is set by the longest of them, about
     300px; the left holds fifteen months that have to fit or scroll. Giving
     the table a FRACTION meant it scrolled at every window size; giving the
     cards a fixed width means it scrolls only when the window is genuinely too
     narrow for it. */
  /* 395px: 300 of content, plus 1,5cm (57px) so a client name and its figure
     stay on one line, plus 1cm (38px) of white down the left of the panel so
     the column does not start hard against the table's edge. The table gets
     narrower for it, which is the trade Paul asked for. */
  grid-template-columns: minmax(0, 1fr) 395px;
  gap: 14px;
  align-items: start;
}
/* Both columns end level. The card in the left column carried the shared
   16px bottom margin while the right column's spacing came from its gap, so
   the two finished at different heights for no reason anybody chose. */
.cf-main { min-width: 0; }
.cf-main > .card { margin-bottom: 0; }
.cf-side > .card:last-child { margin-bottom: 0; }
.cf-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cf-pos { display: flex; flex-direction: column; gap: 16px; padding: 14px 16px; }
@media (max-width: 1000px) {
  .cf-split { grid-template-columns: 1fr; }
}

/* The chart card's header keeps only the controls now. */
.cg-hidden { display: none; }

/* --- a collapsible cost group -------------------------------------------- */
/*
 * Collapsed by default. The four group totals are what somebody reads; twelve
 * rows of bank categories underneath is what they scroll past to reach them.
 * The header carries its own subtotal, so a closed group still says its number.
 */
.cg-lab.cg-group.open { cursor: pointer; }
.cg-lab.cg-group.open:hover { background: #EDEAE2; }
.cg-caret { font-size: 9px; margin-right: 5px; color: var(--muted-2); }
.cg-c.cg-group { font-variant-numeric: tabular-nums; }

/* --- a figure that can say who it belongs to ------------------------------ */
/*
 * A dotted underline is the long-standing sign for "there is more here on
 * hover". Cheap, and it does not turn every number on the page into a control.
 */
.cg-act.has-alloc {
  border-bottom: 1px dotted var(--faint, #a3a296);
  cursor: help;
}

/* --- the three future states --------------------------------------------- */
/*
 * Italic on both figures, because neither has happened. The COLOUR is what
 * separates a number somebody stands behind from one the page invented, and
 * that distinction is the whole reason the forecast is trustworthy at all.
 */
.cg-typed {
  font-style: italic; color: var(--ink, #141413); font-weight: 600;
}
.cg-est {
  font-style: italic; color: var(--muted, #5a5950); font-weight: 400;
}
/* From the department's plan (Plans): somebody stood behind it, but in the plan, not in this table -- ink, not bold,
   with a thin line under it. */
.cg-fromplan {
  font-style: italic; color: var(--ink); font-weight: 400;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* --- the period ---------------------------------------------------------
 *
 * The same chips as the departments. It was a tab strip -- a different control
 * for the same kind of choice, ten centimetres apart, which asks somebody to
 * learn two things where there is one. Whatever these look like, they should
 * look like each other.
 */
/* `.cg-years`, not `.cg-yearrow`. The markup is .cg-period > .cg-years >
   buttons; there is no .cg-yearrow inside it, so every rule written against
   that name styled nothing. Two dead tab-strip versions of this block were
   also still in the file and, being later, were what actually rendered --
   which is why these buttons kept not changing. */
.cg-period { display: flex; margin: 0 0 0 auto; border: none; background: none; }
.cg-period .cg-years {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 0; width: 100%;
  align-items: center;
}
.cg-period .lm-fbtn {
  flex: 0 1 auto; width: auto;
  border: 1px solid var(--rule, #c7c6bc);
  background: var(--card, #fff); color: var(--muted, #5a5950);
  font-family: var(--mono, monospace);
  padding: 4px 10px; font-size: 10.5px; line-height: 1.3;
  text-align: center; white-space: nowrap; cursor: pointer;
}
.cg-period .lm-fbtn:hover { color: var(--ink, #141413); border-color: var(--hairline, #141413); }
.cg-period .lm-fbtn.active {
  background: var(--ink, #141413); color: var(--card, #fff);
  border-color: var(--ink, #141413);
}

/* --- Caja hoy and Se acaba en, side by side ------------------------------
 *
 * Two boxes on one line, half each. Stacked, the second sat below the fold of
 * a narrow panel and you scrolled to find out when the money runs out -- which
 * is the one thing on this page nobody should have to look for.
 */
/* The position card wears the planning page's Labor split: the dark panel,
   Courier caps in periwinkle for the labels, the figure in Georgia on cream.
   Same tokens -- --panel, --panel-label, --panel-figure, --panel-dim -- so it
   follows if that palette ever moves, rather than being a second copy of it.

   It earns the darkest surface on the page: how much money there is and when
   it runs out is what somebody opens this page to see. */
.cf-panel > .card.cf-pos {
  background: var(--panel, #14142b);
  border: none;
  /* Out to both edges: from the black rule between the panes to the right of
     the window, cancelling the panel's own padding. A band, not a card sitting
     on beige -- it is the state of the co-op, not one item among several. */
  margin: -14px -19px 0 -38px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 12px; align-items: start;
  padding: 12px 14px;
}
.cf-pos > .cg-period { grid-column: 1 / -1; }
.cf-pos > .cg-now,
.cf-pos > .cg-out { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.cf-pos .cf-kpi-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--panel-label, #8a8ac8);
}
/* Georgia, on the panel's cream. The inline colour the JS sets for
   green/red would fight the dark ground, so it is overridden here. */
.cf-pos .cf-kpi-value {
  font-family: var(--serif); font-size: 23px; line-height: 1.1;
  color: var(--panel-figure, #f2f1e8) !important;
}
.cf-pos .cf-kpi-note,
.cf-pos .cf-acct-n { font-family: var(--mono); font-size: 11px; color: var(--panel-dim, #b7b6e0); }
.cf-pos .cf-acct-v { font-family: var(--mono); font-size: 11px; color: var(--panel-figure, #f2f1e8); }
.cf-pos .cf-kpi-accts { flex-direction: column; gap: 2px; margin-top: 4px; }
.cf-pos .cf-acct {
  display: flex; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid var(--panel-rule, #23233f); padding: 2px 0;
}

/* The dark-ground chip rules went with the period control when it moved out
   of this card and onto the department row. It wears the same light chips as
   the departments there, which is the point of them sharing a row. */

/* --- departments, across the top ----------------------------------------
 *
 * A horizontal row above the chart. They were vertical in the gap beside the y
 * axis, which fitted but read as part of the axis: a filter that applies to
 * the whole page belongs above the whole page, not tucked into one corner of
 * one of its parts.
 */
.cg-toprow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 9px 12px;
  /* No rule under it, and the page's own beige behind it. The buttons already
     read as a group; a hairline under them drew a second boundary a hand's
     width from the card's own edge, and two edges that close to each other
     read as a mistake. */
  /* White, like the table below it: the left pane is ONE surface from top to
     bottom, not a strip sitting on top of a sheet. */
  background: var(--card, #fff);
  flex: 0 0 auto;
}
.cg-toprow .cg-depts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; }
.cg-viewnote { margin: 0; padding: 0 12px 8px; color: var(--muted, #5a5950); }
/* Where the Waterfall's result ends and the cash chapter starts. */
.cg-chapter {
  min-width: 940px; margin-top: 18px; padding: 7px 8px;
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: 0.08em;
  background: var(--ink); color: var(--panel-figure, #fff);
}
/* Caja / Rentabilidad / Waterfall: first in the row, set off from the
   department chips by a rule because it changes what the table IS. */
.cg-views {
  display: flex; gap: 5px; padding-right: 9px; margin-right: 4px;
  border-right: 1px solid var(--hairline, #C7C6BC);
}
.cg-toprow .lm-fbtn {
  display: inline-block; width: auto;
  padding: 4px 10px; font-size: 10.5px; line-height: 1.3;
  white-space: nowrap; text-align: center;
}

/* The four cell fills are gone with their key. A grid where every cell is
   tinted has no colour left to spend on the one thing that matters. */
.cg-c.s-real, .cg-c.s-cobrado, .cg-c.s-estimado, .cg-c.s-posible {
  background: none; color: inherit;
}

/* --- departments, inside the chart box -----------------------------------
 *
 * In the empty left half of the axis cell: between the box's left edge and the
 * tick numbers, which are right aligned against the plot. That space was doing
 * nothing, and the separate column outside the box was taking width from the
 * chart to hold a list that fits in a gap.
 *
 * Absolutely positioned so it cannot push the ticks around: the ticks are
 * placed by value, and a list that changed the cell's layout would move them
 * off the numbers they name.
 */
/* .cg-axpicks held the departments inside the axis cell. Gone: they are a
   row above the chart now. */

/* The four cell fills are gone with their key. A grid where every cell is
   tinted has no colour left to spend on the one thing that matters. */
.cg-c.s-real, .cg-c.s-cobrado, .cg-c.s-estimado, .cg-c.s-posible {
  background: none; color: inherit;
}

/* --- the lookout card ----------------------------------------------------
 *
 * Three blocks, each with its own total, because the three are different kinds
 * of certain: a tax date is derivable, a hand-entered cost is somebody's
 * decision, and a committed project line has no date at all. One flat list
 * would have implied they are the same kind of fact.
 */
.lo-blocks { display: flex; flex-direction: column; }
.lo-block { border-top: 1px solid var(--thin, #EEEBE3); padding: 8px 0 4px; }
.lo-block:first-child { border-top: none; }
.lo-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 4px;
}
.lo-tot {
  font-family: var(--mono, monospace); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lo-tot.neg { color: var(--alarm, #b4372b); }
.lo-note { margin: 4px 0 0; max-width: 44ch; }

/* A cost shown as one department's share of it, rather than the whole figure.
   Marked, because 68.845 and "Bizieskola's bit of 68.845" must not look alike
   in a column somebody reads down. */
.cg-act.part { font-style: italic; }

/* One line, ellipsis, full text on hover. A concept like "PERTE red de
   economia social / Coordinacion" wrapping to three lines turns eight rows
   into twenty and they stop scanning as rows. */
.cf-tax-l {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: help;
}

/* --- the position, in the filter row --------------------------------------
 *
 * Caja hoy and Se acaba en between the two filters, because they are what the
 * filters change -- and on the row somebody is already looking at rather than
 * in a panel off to the side. The dark card keeps the fuller version; this is
 * the same two figures where the eye already is.
 */
/* FULL HEIGHT OF THE BAND, grey rule above to black rule below.
   A small pill floating in the middle of a white strip is still a small pill:
   it has the right colour but not the weight, and it sat in a row of grey
   buttons reading as one more button. Filling the strip top to bottom makes
   it a block of colour rather than a label with a background.

   The negative margin cancels .cg-toprow's own 9px of vertical padding. The
   chip has to reach the edges of the STRIP, not the edges of the padding box
   inside it -- without this it stops 9px short at both ends and the gap reads
   as a mistake rather than as breathing room. If that padding changes, this
   number changes with it; they are one measurement in two places. */
.cg-posline {
  display: flex; align-items: stretch; gap: 20px; margin-left: 22px;
  align-self: stretch; margin-block: -9px;
}
.cg-posbit { display: flex; align-items: stretch; gap: 7px; white-space: nowrap; }
.cg-poslab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2);
  /* The label does not stretch with the chip -- a 9.5px caption sitting at
     the top of a 40px box looks detached from the figure it names. */
  align-self: center;
}
/* A filled chip, not coloured text. Two figures in a row of grey buttons
   disappeared into it; reversed out of a solid green or red they are the first
   thing the eye lands on, which is what they are for. Cream rather than pure
   white, so they sit in the same family as the rest of the page. */
.cg-posfig {
  font-family: var(--serif); font-size: 16px; line-height: 1;
  /* No vertical padding: the height now comes from the band. Horizontal
     padding grows a little, because a taller block needs more air beside the
     figure or the colour crowds it. */
  display: flex; align-items: center;
  padding: 0 13px;
  color: var(--panel-figure, #f2f1e8);
  background: var(--paul, #2f5233);
  white-space: nowrap;
}
.cg-posfig.bad { background: var(--alarm, #b4372b); }
.cg-posfig.good { background: var(--paul, #2f5233); }

@media (max-width: 900px) {
  .cg-posline { margin-left: 0; width: 100%; margin-block: 0; align-self: auto; }
  .cg-posfig { padding: 4px 11px; }
}

/* A month whose statement does not reach the end of the month. Real figures,
   but not all of them yet -- and read as a whole month it looks like a quiet
   one, which is the opposite of what it is. */
.cg-head.cg-half { font-style: italic; color: var(--muted-2); cursor: help; white-space: normal; line-height: 1.1; }
.cg-byhand { background: #fff3c4; padding: 0 2px; }
.cg-goto { cursor: pointer; }
.cg-goto:hover { background: rgba(20, 20, 19, .06); }
.cg-posfig { cursor: pointer; }
.cf-tax-open { cursor: pointer; }
.cf-tax-open:hover { background: rgba(20, 20, 19, .06); }
.lo-title { display: inline-flex; align-items: center; gap: 3px; }
.lo-tot { white-space: nowrap; }

/* "Cobrado (banco, con IVA)": cash, shown for reference and outside every total
   of the fiscal table, so it reads quieter than the rows that add up. */
.cg-received, .cg-received .cg-act { color: var(--muted, #5a5950); font-style: normal; }

/* Rentabilidad (the Waterfall table): long labels wrap instead of being cut
   ("Resultado de explotación", "Reparto de comida (cerrado)"), the title bar
   runs over its empty black cells, and figures on the black result row stay
   readable when they are forecasts. */
.cg-wf .cg-c.cg-lab { white-space: normal; line-height: 1.25; }
.cg-wf .cg-c.cg-lab.cg-band { white-space: nowrap; overflow: visible; position: relative; z-index: 1; }
.cg-wf .cg-diff .cg-est { color: inherit; opacity: 0.75; }
.cg-wf .cg-diff { color: #bfe0cd; }

/* Rentabilidad's chart (option A): one SVG over all the month columns, and a
   small legend in its top-right corner. Slate and ochre, never the green/red
   of the Dinero usable chart. */
.cg-c.cg-plotA { display: block; overflow: hidden; }
.cg-legA {
  position: absolute; top: 4px; right: 8px; display: flex; align-items: center; gap: 6px;
  font-family: var(--mono, monospace); font-size: 9.5px; color: var(--muted-2, #6b6a62);
  background: rgba(255, 255, 255, 0.85); padding: 1px 4px;
}
.cg-legA i { display: inline-block; width: 14px; border-top: 2px solid; margin-left: 6px; }
.cg-legA b { display: inline-block; width: 9px; height: 9px; opacity: 0.35; margin-left: 6px; }

/* The chart's key, in the table: Ingresos underlined in the income line's
   slate, the two Gastos rows in the cost line's ochre (Paul, 2026-10-07). */
.cg-wf .cg-lab.cg-u-inc > span > span:last-child { border-bottom: 2px solid #4A6E8A; padding-bottom: 1px; }
.cg-wf .cg-lab.cg-u-cost > span > span:last-child { border-bottom: 2px solid #C08A2E; padding-bottom: 1px; }

/* The year's close column: a total, not another month. A strong rule on its
   right where the year ends, a medium one on its left, a light fill. */
.cg-c.cg-closecol {
  border-left: 1.5px solid #8a887e;
  border-right: 3px solid var(--ink, #141413);
  background: #F3F1EA;
}
.cg-c.cg-closecol.cg-head { color: var(--ink, #141413); font-weight: 700; background: #E6E3D8; }
.cg-c.cg-closecol.cg-band, .cg-c.cg-closecol.cg-diff { background: var(--ink); }

/* TOTAL COBROS reads green the way TOTAL PAGOS reads red (Paul, 2026-10-07).
   The same green as the "cobrado" state, a shade darker than the rust. */
.cg-c.pos { color: #1f6b40; }

/* COMPACT (Paul, 2026-10-07: "shrink the vertical height so everything fits").
   The rows carried 5px of padding plus the page's loose line-height, so a
   one-line figure took ~30px; ~20px now. Money tables only. */
.cf-grid-card .cg-c { padding-top: 2px; padding-bottom: 2px; line-height: 1.25; }
.cf-grid-card .cg-c.cg-head { padding-top: 4px; padding-bottom: 4px; }
.cf-grid-card .cg-cell-btn { padding: 0; }
.cf-grid-card .cg-viewnote { padding-bottom: 4px; line-height: 1.3; }