/* =============================================================================
   REPORTE DE CAJA · /reportes/caja
   -----------------------------------------------------------------------------
   La pantalla tomaba prestadas clases de tres hojas a la vez
   (reports-special-plans, screens-informes y legacy/screens-extra) y las
   remataba con utilidades de Bootstrap. Nada estaba pensado para convivir, así
   que los filtros no se alineaban entre sí y la barra se salía por la derecha.

   Aquí está lo que la pantalla necesita y no era un componente. Todo sale de
   tokens.css: ni un color, ni un radio, ni una medida en crudo.
   ========================================================================== */

/* --------------------------------------------------------------- Filtros
   Dos niveles con papeles distintos:
   - Arriba, lo que va al servidor: rango de fechas y el botón Filtrar pegado a
     las fechas, porque es lo único que dispara una consulta.
   - Pegado a la tabla, lo que filtra en el navegador al instante: método y
     buscador. Actúan sobre lo ya cargado; cifras y tabla se recalculan solos. */

.caja-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sb-space-3) var(--sb-space-4);
    padding-bottom: var(--sb-space-4);
    margin-bottom: var(--sb-space-5);
    border-bottom: 1px solid var(--sb-border-subtle);
}

.caja-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sb-space-3);
}

/* El botón se alinea con la base de los campos de fecha, no con sus etiquetas. */
.caja-field--action {
    justify-content: flex-end;
}

.caja-field {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 0;
}

.caja-field__label {
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.caja-field--date {
    width: 10.5rem;
}

.caja-field--method {
    width: 11rem;
}

.caja-field--search {
    flex: 0 1 auto;
    width: 20rem;
}

/* Atajos de rango. Un reporte de caja se consulta casi siempre por "hoy" o
   "este mes"; tenerlos a un clic ahorra abrir dos calendarios cada vez. */
.caja-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-1);
}

.caja-quick__btn {
    padding: var(--sb-space-1) var(--sb-space-3);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-full);
    background: var(--sb-surface);
    color: var(--sb-text-muted);
    font: inherit;
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-semibold);
    cursor: pointer;
    transition: background var(--sb-duration-fast) var(--sb-ease);
}

.caja-quick__btn:hover {
    background: var(--sb-surface-muted);
    color: var(--sb-text-strong);
}

.caja-quick__btn.is-on {
    background: var(--sb-brand);
    border-color: var(--sb-brand);
    color: var(--sb-text-on-brand);
}

/* Buscador de la tabla: filtra según se escribe, sin botón. */
.caja-search {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    min-height: var(--sb-control-height);
    padding: 0 var(--sb-space-3);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    color: var(--sb-text-subtle);
}

.caja-search:focus-within {
    border-color: var(--sb-brand);
}

.caja-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--sb-text);
    font: inherit;
    font-size: var(--sb-text-md);
    outline: none;
}

.caja-search button {
    border: 0;
    background: transparent;
    color: var(--sb-text-subtle);
    cursor: pointer;
    padding: 0;
}

.caja-search button:hover {
    color: var(--sb-text-strong);
}

/* ---------------------------------------------------------------- Cifras
   Se calculan sobre lo que se está viendo, no sobre todo lo que devolvió el
   servidor. Antes las tarjetas sumaban el total y la tabla mostraba el
   subconjunto buscado: dos importes distintos en la misma pantalla. */

.caja-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--sb-space-3);
    margin-bottom: var(--sb-space-5);
}

.caja-stat {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    padding: var(--sb-space-4);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
}

.caja-stat--total {
    background: var(--sb-surface-inverse);
    border-color: var(--sb-surface-inverse);
    color: var(--sb-text-on-inverse);
}

.caja-stat__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--sb-space-10);
    height: var(--sb-space-10);
    border-radius: var(--sb-radius-md);
    font-size: var(--sb-text-lg);
}

.caja-stat--cash .caja-stat__icon {
    background: var(--sb-success-surface);
    color: var(--sb-success);
}

.caja-stat--card .caja-stat__icon {
    background: var(--sb-info-surface);
    color: var(--sb-info);
}

.caja-stat--total .caja-stat__icon {
    background: rgb(255 255 255 / 0.12);
    color: var(--sb-text-on-inverse);
}

.caja-stat__label {
    display: block;
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    color: var(--sb-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.caja-stat--total .caja-stat__label {
    color: var(--sb-text-on-inverse);
    opacity: 0.75;
}

.caja-stat__value {
    display: block;
    font-size: var(--sb-text-2xl);
    font-weight: var(--sb-weight-black);
    color: var(--sb-text);
    font-variant-numeric: tabular-nums;
    line-height: var(--sb-leading-tight);
}

.caja-stat--total .caja-stat__value {
    color: var(--sb-text-on-inverse);
}

/* ----------------------------------------------------------------- Tabla */

.caja-tablebar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sb-space-3);
    margin-bottom: var(--sb-space-3);
}

/* Método y buscador viven junto a la tabla: filtran lo cargado sin volver al servidor. */
.caja-tablebar__filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--sb-space-3);
    margin-left: auto;
}

.caja-tablebar__count {
    font-size: var(--sb-text-sm);
    color: var(--sb-text-muted);
}

.caja-tablebar__count strong {
    color: var(--sb-text-strong);
    font-weight: var(--sb-weight-bold);
}

/* Icono que abre el recibo de la fila. */
.caja-receipt {
    text-align: center;
    white-space: nowrap;
}

.caja-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-1);
    min-width: var(--sb-space-8);
    height: var(--sb-space-8);
    padding: 0 var(--sb-space-2);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    background: var(--sb-surface);
    color: var(--sb-brand);
    font-size: var(--sb-text-sm);
    cursor: pointer;
    transition: background var(--sb-duration-fast) var(--sb-ease),
                border-color var(--sb-duration-fast) var(--sb-ease);
}

.caja-row-btn:hover,
.caja-row-btn:focus-visible {
    background: var(--sb-brand);
    border-color: var(--sb-brand);
    color: var(--sb-text-on-brand);
    outline: none;
}

.caja-row-btn__num {
    font-size: var(--sb-text-xs);
    font-weight: var(--sb-weight-bold);
    font-variant-numeric: tabular-nums;
}

.caja-receipt__none {
    color: var(--sb-text-subtle);
}

/* La tabla del sistema, encajada en el panel sin que asome la cabecera roja
   por la esquina redondeada. */
.caja-table-wrap {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
}

.caja-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--sb-weight-bold);
    white-space: nowrap;
}

.caja-index {
    width: var(--sb-space-12);
    text-align: center;
    color: var(--sb-text-subtle);
    font-variant-numeric: tabular-nums;
}

.caja-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.caja-tag {
    display: inline-block;
    padding: var(--sb-space-1) var(--sb-space-3);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.caja-tag--cash {
    background: var(--sb-success-surface);
    border: 1px solid var(--sb-success-border);
    color: var(--sb-success-text);
}

.caja-tag--card {
    background: var(--sb-info-surface);
    border: 1px solid var(--sb-info-border);
    color: var(--sb-info-text);
}

/* Fila de total: se lee como cierre de la tabla, no como una fila más. */
.caja-total td {
    background: var(--sb-surface-subtle);
    border-top: 2px solid var(--sb-border-strong);
    font-weight: var(--sb-weight-bold);
}

.caja-total__label {
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-black);
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.caja-total__value {
    text-align: right;
    font-size: var(--sb-text-lg);
    font-weight: var(--sb-weight-black);
    color: var(--sb-brand);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ------------------------------------------------------------ Adaptativo */

@media (max-width: 760px) {
    .caja-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .caja-field--date,
    .caja-field--method,
    .caja-field--search {
        width: auto;
        max-width: none;
    }

    .caja-toolbar__group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .caja-field--action {
        grid-column: 1 / -1;
    }

    .caja-tablebar__filters {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .caja-field--search {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .caja-quick__btn {
        transition: none;
    }
}