/* «Caja» (Operación › Caja, vista cash-desk-view.js). Solo maquetación de esta pantalla: todo color, letra, alto y radio sale de canon-tokens.css y los componentes son los de
   canon-components.css. Prefijo: cd-. Diseño: 01 Recursos/Diseno pagos/pantallas-pagos.md §0 y §7. Dos reglas de dinero (cifras tabulares, a la derecha) viven aquí, acotadas a .cd. */

.cd { display: grid; gap: var(--sp-3); min-width: 0; }
.cd-stack { display: grid; gap: var(--sp-3); min-width: 0; }
.cd .ui-seg[role="tablist"] { margin-bottom: 0; }

/* Dinero: cifras tabulares y a la derecha */
.cd .money, .cd-dialog .money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cd .money-total { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Barra de sede, día, estado y acciones */
.cd-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.cd-bar .ui-btn { align-self: flex-end; }
.cd-bar > .ui-status { align-self: flex-end; height: var(--ctl-md); }
.cd-pick { display: grid; gap: var(--sp-1); margin: 0; min-width: 0; }
.cd-pick .t-meta { color: var(--text-muted); font-weight: var(--fw-regular); }
.cd-grow { flex: 1; }
.cd-search { flex: 1 1 calc(var(--ctl-lg) * 4.5); min-width: calc(var(--ctl-lg) * 4.5); max-width: calc(var(--ctl-lg) * 7); margin: 0; align-self: flex-end; }

/* Tira de cifras: columnas iguales; las tarjetas solo muestran (los filtros son las cápsulas de abajo) */
.cd-cards { display: grid; gap: var(--sp-3); }
.cd-card { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); margin: 0; min-width: 0; }
.cd-card .t-meta { color: var(--text-muted); }
.cd-card.is-total { background: var(--surface-2); }
.cd-pending, .cd .ui-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--info-soft); color: var(--info-ink); }
.cd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cd-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Tabla de movimientos */
.cd-table-wrap { padding: 0; } /* sin overflow: el menú de una fila se abre fuera de la tarjeta y no debe recortarse */
.cd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.cd-table th { text-align: left; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--text-muted); padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-default); white-space: nowrap; }
.cd-table th.money { text-align: right; }
.cd-table td { padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); vertical-align: middle; }
.cd-table tbody tr:last-child td { border-bottom: 0; }
.cd-table tr.is-voided td { opacity: 0.55; }
.cd-table td.is-negative { color: var(--text-strong); }
.cd-tag { margin-left: var(--sp-2); }
.cd-note { display: block; margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-meta); line-height: var(--lh-body); max-width: 56ch; }
.cd-menu-cell { width: 1%; text-align: right; }
.cd-menu-wrap { position: relative; display: inline-block; }
.cd-row-menu { position: absolute; right: 0; top: calc(100% + var(--sp-1)); min-width: calc(var(--ctl-lg) * 5); text-align: left; }
.cd-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cd-extra small { color: var(--text-muted); }
.cd-skeleton { display: grid; gap: var(--sp-2); padding: var(--sp-3); }

/* Diálogos */
.cd-dialog { width: min(100%, calc(var(--ctl-lg) * 14)); }
.cd-dialog.is-wide { width: min(100%, calc(var(--ctl-lg) * 15)); }
.cd-lead { margin: 0 0 var(--sp-3); color: var(--text-primary); }
.cd-error { margin: var(--sp-2) 0 0; }
.cd-kv { margin: var(--sp-3) 0; }
.cd-kv dd.money { text-align: right; }
.cd-kv dd.is-warning { color: var(--warning-ink); font-weight: var(--fw-medium); }
.cd-steps { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cd-steps-bar { flex: 1; height: var(--sp-1); border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.cd-steps-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-full); transition: width var(--dur-base) var(--ease); }
.cd-count { min-height: var(--lh-body); margin: var(--sp-1) 0 var(--sp-3); font-weight: var(--fw-medium); }
.cd-count.is-match { color: var(--success-ink); }
.cd-count.is-over, .cd-count.is-short { color: var(--warning-ink); }
.cd-review { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-1); padding: 0; list-style: none; }
.cd-review li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); }
.cd-review-name { display: flex; align-items: baseline; gap: var(--sp-3); }
.cd-check { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--text-primary); }
.cd-rec { margin: var(--sp-3) 0; padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: var(--sp-2); }
.cd-rec-title { margin: 0; color: var(--text-muted); font-weight: var(--fw-medium); }
.cd-rec-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.cd-rec-list li.is-ok { color: var(--success-ink); }
.cd-rec-list li.is-diff { color: var(--warning-ink); }
.cd-rec p { margin: 0; }
.cd-warn { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--warning-soft); color: var(--warning-ink); }