/* caja.css - estilos dedicados de caja.html (Tier D, 2026-05-27) */

    /* UX rediseño caja 2026-05-20 — Apple-style refinamientos
       Foco: jerarquía clara, money inputs con prefijo, modal accesible,
       cobros como chips de selección rápida. */

    /* Money input con prefijo $ */
    .money-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .money-input-wrap::before {
      content: '$';
      position: absolute;
      left: 12px;
      color: var(--h-muted);
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      pointer-events: none;
      z-index: 1;
    }
    .money-input-wrap .input {
      padding-left: 24px;
      font-variant-numeric: tabular-nums;
      font-weight: 500;
    }
    .money-input-wrap .input:focus { z-index: 2; }

    /* KPI con icono SVG sutil arriba a la derecha */
    .kpi-card { position: relative; }
    .kpi-icon {
      position: absolute;
      top: var(--h-space-3);
      right: var(--h-space-3);
      width: 18px; height: 18px;
      color: var(--h-faint);
      opacity: 0.6;
    }
    .kpi-card.is-ok .kpi-icon  { color: var(--h-ok); opacity: 0.5; }

    /* Modal cierre — replaca inline styles con clases */
    .modal-caja-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.30);
      z-index: var(--h-z-modal);
      display: flex; align-items: center; justify-content: center;
      padding: var(--h-space-4);
    }
    .modal-caja {
      background: var(--h-surface);
      border-radius: var(--h-radius-md);
      max-width: 480px; width: 100%;
      box-shadow: var(--h-shadow-lg);
    }
    .modal-caja-header {
      padding: var(--h-space-4);
      border-bottom: 1px solid var(--h-hairline);
      display: flex; justify-content: space-between; align-items: center;
    }
    .modal-caja-title { font-size: var(--h-text-md); font-weight: 600; }
    .modal-caja-close {
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--h-muted);
      width: 32px; height: 32px;
      border-radius: var(--h-radius-sm);
      display: flex; align-items: center; justify-content: center;
      transition: all 120ms ease;
    }
    .modal-caja-close:hover { background: var(--h-nest); color: var(--h-ink); }
    .modal-caja-body {
      padding: var(--h-space-4);
      display: flex; flex-direction: column;
      gap: var(--h-space-3);
    }
    .modal-caja-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--h-space-2);
      font-size: var(--h-text-sm);
      background: var(--h-nest);
      padding: var(--h-space-3);
      border-radius: var(--h-radius-sm);
    }
    .modal-caja-summary > div.label { color: var(--h-muted); }
    .modal-caja-summary > div.value { text-align: right; font-weight: 600; }
    .modal-caja-summary > div.value.is-total { color: var(--h-brand-primary); font-weight: 700; }
    .modal-caja-footer {
      padding: var(--h-space-3) var(--h-space-4);
      border-top: 1px solid var(--h-hairline);
      display: flex; justify-content: flex-end; gap: var(--h-space-2);
    }

    /* Form cobro: estado loading en botón */
    .btn-registering { pointer-events: none; opacity: 0.7; }