/* Cash count (corte de caja) on the green copy. Screen prefix py-cc-. */
.py-screen.py-cc .py-cc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--py-5); align-items: start; }
.py-screen.py-cc .py-cc-count { padding: var(--py-5); display: grid; gap: var(--py-3); }
.py-screen.py-cc .py-cc-count h2, .py-screen.py-cc .py-cc-side h2 { font-family: var(--py-f-display); font-stretch: 105%; font-weight: 750; font-size: var(--py-s-1); }
.py-screen.py-cc .py-cc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.py-screen.py-cc .py-cc-table th, .py-screen.py-cc .py-cc-table td { padding: 0.15rem var(--py-2); border-bottom: 1px solid color-mix(in oklch, var(--py-ok) 22%, transparent); }
.py-screen.py-cc .py-cc-group th { text-align: start; font-size: var(--py-s--1); color: var(--py-print); padding-top: var(--py-3); font-weight: 650; border-bottom-width: 2px; }
.py-screen.py-cc .py-cc-den { text-align: end; font-family: var(--py-f-display); font-stretch: 75%; font-weight: 700; font-size: var(--py-s-1); width: 6rem; }
.py-screen.py-cc .py-cc-x { color: var(--py-ink-soft); width: 1.5rem; text-align: center; }
.py-screen.py-cc .py-cc-n { inline-size: 5.5rem; min-height: 2.5rem; text-align: end; font-size: var(--py-s-1); font-weight: 650; }
.py-screen.py-cc .py-cc-sub { font-weight: 650; }
.py-screen.py-cc .py-cc-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--py-ink); padding-top: var(--py-2); }
.py-screen.py-cc .py-cc-total b { font-family: var(--py-f-display); font-stretch: 68%; font-weight: 750; font-size: var(--py-s-4); line-height: 1; }

.py-screen.py-cc .py-cc-side { display: grid; gap: var(--py-4); position: sticky; top: var(--py-4); }
.py-screen.py-cc .py-cc-exp { padding: var(--py-5); display: grid; gap: var(--py-3); }
.py-screen.py-cc .py-cc-exp dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-2) var(--py-4); align-items: baseline; }
.py-screen.py-cc .py-cc-exp dt small { display: block; color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-cc .py-cc-exp dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; font-weight: 650; }
.py-screen.py-cc .py-cc-exp .py-cc-sum { border-top: 2px solid var(--py-ink); padding-top: var(--py-2); }
.py-screen.py-cc .py-cc-exp .py-cc-sum dd { font-family: var(--py-f-display); font-stretch: 70%; font-size: var(--py-s-2); font-weight: 750; }
.py-screen.py-cc .py-cc-diff { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-2) var(--py-4); align-items: center; padding: var(--py-4); border-radius: var(--py-r-ctl); background: var(--py-danger-bg); }
.py-screen.py-cc .py-cc-diff b { font-family: var(--py-f-display); font-stretch: 70%; font-size: var(--py-s-4); line-height: 1; color: var(--py-danger); font-weight: 750; }
.py-screen.py-cc .py-cc-diff p { color: var(--py-ink); }
.py-screen.py-cc .py-cc-diff .py-field { grid-column: 1 / -1; }
.py-screen.py-cc .py-cc-other { padding: var(--py-4) var(--py-5); display: grid; gap: var(--py-2); font-size: var(--py-s--1); }
.py-screen.py-cc .py-cc-other p { display: flex; justify-content: space-between; gap: var(--py-3); max-width: none; }
.py-screen.py-cc .py-cc-other b { font-variant-numeric: tabular-nums; }
.py-screen.py-cc .py-cc-close { display: flex; flex-wrap: wrap; gap: var(--py-3); align-items: center; }
.py-screen.py-cc .py-cc-close .py-btn--ink { min-height: 3.25rem; padding-inline: var(--py-6); }
.py-screen.py-cc .py-cc-blind { padding: var(--py-6) var(--py-5); display: grid; gap: var(--py-3); justify-items: start; text-align: start; }
.py-screen.py-cc .py-cc-blind p:first-child { --py-casl: 1; font-size: var(--py-s-2); font-weight: 650; }
.py-screen.py-cc .py-cc-closed-stamp { font-size: var(--py-s-1); justify-self: start; --py-stamp: var(--py-ok); }

@media (max-width: 64rem) { .py-screen.py-cc .py-cc-grid { grid-template-columns: minmax(0, 1fr); } .py-screen.py-cc .py-cc-side { position: static; } }
@media (max-width: 47.99rem) { .py-screen.py-cc .py-cc-count, .py-screen.py-cc .py-cc-exp { padding: var(--py-4) var(--py-3); } .py-screen.py-cc .py-cc-den { width: 4.5rem; font-size: var(--py-s-0); } .py-screen.py-cc .py-cc-n { inline-size: 4rem; } }
.py-screen.py-cc .py-cc-table .py-r { text-align: end; }
.py-screen.py-cc .py-cc-exp .py-cc-sum { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }

/* ---------- What the product draws beyond the design ---------- */

/* Each in its resting state, plain. */
/* Every row of what should be there is its own group, on the list's two columns. */
.py-screen.py-cc .py-cc-exp dl > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
.py-screen.py-cc .py-cc-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-1); font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-cc .py-cc-outs li { display: flex; justify-content: space-between; gap: var(--py-3); }

/* The count's total is a term and its amount. */
.py-screen.py-cc .py-cc-total { margin: 0; }
.py-screen.py-cc .py-cc-total dd { margin: 0; font-family: var(--py-f-display); font-stretch: 68%; font-weight: 750; font-size: var(--py-s-4); line-height: 1; }
.py-screen.py-cc .py-cc-form { display: grid; gap: var(--py-3); justify-items: start; }
.py-screen.py-cc .py-cc-form .py-cc-table { justify-self: stretch; }
.py-screen.py-cc .py-cc-form td .py-error-text { margin-bottom: var(--py-1); }

/* The difference: short in the danger's colors, even or over on quiet paper; closing below it. */
.py-screen.py-cc .py-cc-diff.py-is-even { background: var(--py-paper-2); }
.py-screen.py-cc .py-cc-diff.py-is-even b { color: var(--py-ink); }
.py-screen.py-cc .py-cc-diff form { grid-column: 1 / -1; }
.py-screen.py-cc .py-cc-close .py-field { flex: 1 1 100%; }

/* The other payments: each a term and its count, as the design's lines. */
.py-screen.py-cc .py-cc-other dl { margin: 0; display: grid; gap: var(--py-2); }
.py-screen.py-cc .py-cc-other dl > div { display: flex; justify-content: space-between; gap: var(--py-3); }
.py-screen.py-cc .py-cc-other dd { margin: 0; font-variant-numeric: tabular-nums; }

/* *Registrar una salida*: the design's button, its form folded under it. */
.py-screen.py-cc .py-cc-out { padding: var(--py-4) var(--py-5); display: grid; gap: var(--py-3); }
.py-screen.py-cc .py-cc-out summary { list-style: none; justify-self: start; }
.py-screen.py-cc .py-cc-out summary::-webkit-details-marker { display: none; }
.py-screen.py-cc .py-cc-out form { display: grid; gap: var(--py-3); justify-items: start; margin-top: var(--py-3); }
.py-screen.py-cc .py-cc-out .py-field { justify-self: stretch; }

/* The day's balance: the closes' sum under their table, on the green copy. */
.py-screen.py-cc .py-cc-exp h2 { font-family: var(--py-f-display); font-stretch: 105%; font-weight: 750; font-size: var(--py-s-1); }
.py-screen.py-cc .py-cc-closes { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-2) var(--py-4); }
.py-screen.py-cc .py-cc-closes > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
.py-screen.py-cc .py-cc-closes dd { margin: 0; text-align: end; font-weight: 650; }
.py-screen.py-cc .py-cc-count .py-table { font-size: var(--py-s--1); }

/* A closed register: the line that says so, the float to open it with. */
.py-screen.py-cc .py-cc-lead { --py-casl: 1; font-size: var(--py-s-2); font-weight: 650; }
.py-screen.py-cc .py-cc-open { display: flex; flex-wrap: wrap; align-items: end; gap: var(--py-3); }
.py-screen.py-cc .py-cc-open .py-cc-n { inline-size: 9rem; }