/* =====================================================================
   CORTE DE CAJA — Sistema de diseño "libro contable"
   Paleta: papel cálido + tinta esmeralda + acentos de sello dorado
   v2: iconos SVG, resumen fijo, filtros, animaciones y comparador
   ===================================================================== */

:root {
    --paper:        #FAF7F0;
    --paper-raised: #FFFFFF;
    --paper-line:   #E7E0D0;
    --ink:          #1F2A24;
    --ink-soft:     #5B6B61;
    --ink-faint:    #97A399;

    --emerald:       #1B6B54;
    --emerald-dark:  #114A39;
    --emerald-light: #EAF3EF;

    --gold:       #B08D57;
    --gold-light: #F4ECDD;

    --red-ink:       #A13D3D;
    --red-ink-light: #F7EAE9;

    --amber:       #96631E;
    --amber-light: #FBF0DC;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-card: 0 1px 2px rgba(31,42,36,0.04), 0 8px 24px -12px rgba(31,42,36,0.18);
    --shadow-modal: 0 24px 64px -16px rgba(31,42,36,0.35);
    --shadow-sticky: 0 12px 28px -18px rgba(31,42,36,0.35);

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
    --topbar-h: 66px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

a { color: inherit; }

/* ---------------------------------------------------------------- */
/* Iconos SVG — reemplazan cualquier símbolo de texto (✓ ✕ ✎)        */
/* ---------------------------------------------------------------- */

.icon {
    width: 15px;
    height: 15px;
    stroke-width: 2.1;
    vertical-align: -2.5px;
    flex-shrink: 0;
}
.icon-inline {
    width: 13px;
    height: 13px;
    stroke-width: 2.3;
    vertical-align: -2px;
    margin-right: 2px;
}
.btn .icon, .btn .icon-inline { margin-right: 5px; }

/* ---------------------------------------------------------------- */
/* Topbar                                                            */
/* ---------------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 28px;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--paper-line);
    position: sticky;
    top: 0;
    z-index: 30;
    flex-wrap: wrap;
    min-height: var(--topbar-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--emerald);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand-text strong {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
}

.brand-text span {
    font-size: 12px;
    color: var(--ink-soft);
}

.base-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.topbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

select {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 9px 12px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
    min-width: 220px;
    transition: border-color 0.15s var(--ease-suave);
}
select:focus { outline: none; border-color: var(--emerald); }

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* ---------------------------------------------------------------- */

.btn {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s var(--ease-suave), background 0.18s var(--ease-suave), border-color 0.18s var(--ease-suave), box-shadow 0.18s var(--ease-suave);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
    background: var(--emerald);
    color: var(--paper);
}
.btn-primary:hover:not(:disabled) { background: var(--emerald-dark); box-shadow: 0 6px 16px -6px rgba(27,107,84,0.5); }

.btn-secondary {
    background: var(--emerald-light);
    color: var(--emerald-dark);
}
.btn-secondary:hover:not(:disabled) { background: #DCEDE6; }

.btn-ghost {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--paper-line);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); }

.btn-danger {
    background: var(--red-ink);
    color: #fff;
}
.btn-danger:hover { background: #8A3232; box-shadow: 0 6px 16px -6px rgba(161,61,61,0.5); }

.btn-add {
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    box-shadow: 0 2px 8px -3px rgba(31,42,36,0.3);
}
.btn-add[data-tipo="INGRESO"] { background: var(--emerald); }
.btn-add[data-tipo="INGRESO"]:hover:not(:disabled) {
    background: var(--emerald-dark);
    box-shadow: 0 8px 18px -6px rgba(27,107,84,0.55);
    transform: translateY(-1px);
}
.btn-add[data-tipo="EGRESO"] { background: var(--red-ink); }
.btn-add[data-tipo="EGRESO"]:hover:not(:disabled) {
    background: #8A3232;
    box-shadow: 0 8px 18px -6px rgba(161,61,61,0.55);
    transform: translateY(-1px);
}
.btn-add:disabled { background: var(--paper-line); color: var(--ink-faint); box-shadow: none; }

.btn-icon {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s var(--ease-suave), color 0.15s var(--ease-suave), transform 0.12s var(--ease-suave);
}
.btn-icon .icon { width: 15px; height: 15px; margin: 0; }
.btn-icon:hover { background: var(--paper-line); color: var(--ink); transform: translateY(-1px); }
.btn-icon:active { transform: scale(0.92); }
.btn-icon.danger:hover { background: var(--red-ink-light); color: var(--red-ink); }
.btn-icon.success:hover { background: var(--emerald-light); color: var(--emerald-dark); }

/* ---------------------------------------------------------------- */
/* Layout                                                             */
/* ---------------------------------------------------------------- */

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 28px 80px;
}

.empty-state {
    text-align: center;
    padding: 100px 20px;
    color: var(--ink-soft);
    animation: apareceSuave 0.5s var(--ease-suave);
}
.empty-seal-icon {
    width: 46px;
    height: 46px;
    color: var(--gold);
    margin-bottom: 14px;
    stroke-width: 1.4;
}
.empty-state h2 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 8px;
}
.empty-state p { max-width: 420px; margin: 0 auto; font-size: 14.5px; }

/* ---------------------------------------------------------------- */
/* Ledger card (resumen) — FIJO para que nunca se pierda en scroll   */
/* ---------------------------------------------------------------- */

.ledger-card {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 22px 30px;
    margin-bottom: 24px;
    animation: apareceSuave 0.45s var(--ease-suave);
}

.sticky-resumen {
    position: sticky;
    top: calc(var(--topbar-h) + 14px);
    z-index: 15;
    box-shadow: var(--shadow-sticky);
}

.ledger-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 16px;
}

.eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 4px;
}

.ledger-card-head h1 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: var(--ink);
}

.rango-detalle {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 5px;
}

.estado-sello {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--emerald);
    color: var(--emerald-dark);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--emerald-light);
}
.estado-sello.cerrado {
    border-color: var(--red-ink);
    color: var(--red-ink);
    background: var(--red-ink-light);
}

/* Banner de mes vencido — "pop" persistente pero discreto */
.banner-vencido {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--amber-light);
    color: var(--amber);
    border: 1px solid #E9CFA0;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 18px;
    animation: bannerEntra 0.4s var(--ease-suave);
}
.banner-vencido .icon { color: var(--amber); width: 17px; height: 17px; }
.banner-vencido span { flex: 1; }
.banner-cerrar {
    background: var(--amber);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s var(--ease-suave), transform 0.12s var(--ease-suave);
}
.banner-cerrar:hover { background: #7C5015; }
.banner-cerrar:active { transform: scale(0.95); }

@keyframes bannerEntra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.resumen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--paper-line);
    padding-top: 16px;
}

.resumen-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 20px;
    border-left: 1px solid var(--paper-line);
}
.resumen-item:first-child { border-left: none; padding-left: 0; }

.resumen-label {
    font-size: 11.5px;
    color: var(--ink-soft);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.resumen-valor {
    font-family: var(--font-mono);
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s var(--ease-suave);
}

.resumen-item.ingreso .resumen-label,
.resumen-item.ingreso .resumen-valor { color: var(--emerald-dark); }
.resumen-item.egreso .resumen-label,
.resumen-item.egreso .resumen-valor { color: var(--red-ink); }
.resumen-item.destacado .resumen-valor { color: var(--ink); font-size: 23px; }

.ledger-card-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* ---------------------------------------------------------------- */
/* Filtros por columna                                               */
/* ---------------------------------------------------------------- */

.filtro-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-line);
    flex-wrap: wrap;
}
.icon-filtro { color: var(--ink-faint); }
.filtro-bar input,
.filtro-bar select {
    font-family: var(--font-body);
    font-size: 12.5px;
    padding: 6px 9px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
    min-width: 0;
}
.filtro-bar .f-desde, .filtro-bar .f-hasta { width: 128px; }
.filtro-bar .f-concepto { flex: 1; min-width: 130px; }
.filtro-bar .f-texto { flex: 1.4; min-width: 120px; }
.filtro-bar input:focus, .filtro-bar select:focus {
    outline: none;
    border-color: var(--emerald);
}
.filtro-bar.activo { background: var(--emerald-light); }
.filtro-bar .f-limpiar { margin-left: auto; }

/* ---------------------------------------------------------------- */
/* Tables — tipografía y espaciados ajustados                        */
/* ---------------------------------------------------------------- */

.columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.ledger-table-wrap {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.ledger-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    border-bottom: 1px solid var(--paper-line);
}
.ledger-table-head h2 {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
}
.ledger-table-head.ingreso h2 .icon-inline { color: var(--emerald); }
.ledger-table-head.egreso h2 .icon-inline { color: var(--red-ink); }

.tabla-scroll {
    max-height: 560px;
    overflow-y: auto;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    table-layout: fixed;
}

.ledger-table thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    font-weight: 600;
    padding: 8px 10px;
    background: var(--paper);
    position: sticky;
    top: 0;
    z-index: 1;
}

.ledger-table th.num, .ledger-table td.num { text-align: right; }
.ledger-table th.acciones, .ledger-table td.acciones { width: 58px; text-align: right; }
.ledger-table th:nth-child(1), .ledger-table td.fecha { width: 74px; }
.ledger-table th:nth-child(4), .ledger-table td.num { width: 92px; }

.ledger-table tbody tr {
    border-top: 1px solid var(--paper-line);
    transition: background 0.15s var(--ease-suave);
    animation: filaEntra 0.3s var(--ease-suave);
}
.ledger-table tbody tr:hover { background: #FBFAF5; }

@keyframes filaEntra {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ledger-table td {
    padding: 9px 10px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ledger-table td.fecha { color: var(--ink-soft); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.ledger-table td.concepto strong { display: block; font-size: 12px; line-height: 1.35; white-space: normal; word-break: break-word; }
.ledger-table td.concepto span { display: block; font-size: 10px; color: var(--ink-faint); font-family: var(--font-mono); margin-top: 1px; }
.ledger-table td.detalles { color: var(--ink-soft); font-size: 12px; white-space: normal; word-break: break-word; }
.ledger-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; white-space: nowrap; }

.ledger-table .fila-vacia td {
    padding: 30px 20px;
    text-align: center;
    color: var(--ink-faint);
    font-style: italic;
    font-size: 12.5px;
}

.fila-acciones { display: flex; gap: 2px; justify-content: flex-end; }

/* ---------------------------------------------------------------- */
/* Modals                                                            */
/* ---------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 42, 36, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
    backdrop-filter: blur(2px);
    animation: overlayEntra 0.2s var(--ease-suave);
}
@keyframes overlayEntra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal {
    background: var(--paper-raised);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: 32px 36px;
    width: 100%;
    max-width: 580px;
    max-height: 88vh;
    overflow-y: auto;
    animation: modalEntra 0.32s var(--ease-suave);
}
@keyframes modalEntra {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1240px; }

.modal h3 {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-hint {
    font-size: 13px;
    color: var(--ink-soft);
    margin: -8px 0 18px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.modal-hint .icon-inline { margin-top: 2px; color: var(--gold); }
.modal-warning { color: var(--red-ink); }
.modal-warning .icon-inline { color: var(--red-ink); }

.modal label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

.modal input[type=text],
.modal input[type=date],
.modal input[type=number],
.modal select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.15s var(--ease-suave), background 0.15s var(--ease-suave);
}
.modal input:focus, .modal select:focus {
    outline: none;
    border-color: var(--emerald);
    background: var(--paper-raised);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.checkbox-row input { width: auto; margin: 0; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-add-row {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    margin-top: 16px;
    align-items: center;
}
.form-add-row input { margin-top: 0; }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}
.modal-actions.center { justify-content: center; }

/* Tabs (catálogo) */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--paper-line); }
.tab {
    background: none; border: none; cursor: pointer;
    padding: 8px 4px 12px;
    font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
    color: var(--ink-faint);
    border-bottom: 2px solid transparent;
    margin-right: 18px;
    transition: color 0.15s var(--ease-suave), border-color 0.15s var(--ease-suave);
}
.tab.active { color: var(--emerald-dark); border-bottom-color: var(--emerald); }

.catalogo-list, .firmantes-lista, .historial-list {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalogo-row, .firmante-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--paper-line);
    animation: filaEntra 0.25s var(--ease-suave);
}
.catalogo-row input[type=text] { margin-top: 0; }
.catalogo-row .codigo-input { max-width: 90px; font-family: var(--font-mono); }
.firmante-row .cargo-label { flex: 0 0 160px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.firmante-row input { margin-top: 0; }

.historial-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    transition: border-color 0.15s var(--ease-suave), background 0.15s var(--ease-suave);
}
.historial-row:hover { border-color: var(--ink-faint); background: var(--paper); }
.historial-row .estado-chip {
    font-size: 10.5px;
    font-family: var(--font-mono);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--emerald-light);
    color: var(--emerald-dark);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.historial-row .estado-chip.cerrado { background: var(--gold-light); color: var(--gold); }

/* ---------------------------------------------------------------- */
/* Modal de confirmación genérico                                    */
/* ---------------------------------------------------------------- */

.modal-confirm {
    max-width: 440px;
    text-align: center;
}
.confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--red-ink-light);
    color: var(--red-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    animation: iconoPop 0.35s var(--ease-suave);
}
.confirm-icon.info { background: var(--emerald-light); color: var(--emerald-dark); }
.confirm-icon .icon { width: 24px; height: 24px; margin: 0; }
@keyframes iconoPop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
.modal-confirm h3 { justify-content: center; }
.modal-confirm p { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 6px; }

/* ---------------------------------------------------------------- */
/* Comparador de periodos                                            */
/* ---------------------------------------------------------------- */

.comparador-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.comp-card {
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    animation: apareceSuave 0.35s var(--ease-suave);
}
.comp-card .comp-label {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}
.comp-card .comp-valor {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
}
.comp-card.positivo .comp-valor { color: var(--emerald-dark); }
.comp-card.negativo .comp-valor { color: var(--red-ink); }
.comp-card .comp-sub { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }

.comparador-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}
.chart-card {
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    padding: 16px;
}
.chart-card h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

.comparador-tabla-wrap {
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    margin-bottom: 40px;
}
.comparador-tabla th, .comparador-tabla td { padding: 8px 12px; }
.comparador-tabla thead th { position: sticky; top: 0; }

@keyframes apareceSuave {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- */
/* Toasts — pila de mensajes modernos con icono                      */
/* ---------------------------------------------------------------- */

.toast-stack {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 300;
    align-items: center;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 14px 34px -10px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 0.3s var(--ease-suave), transform 0.3s var(--ease-suave);
    white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast .icon { width: 16px; height: 16px; }
.toast.success { background: var(--emerald-dark); }
.toast.error { background: var(--red-ink); }
.toast.warning { background: var(--amber); color: #fff; }

/* ---------------------------------------------------------------- */
/* Contadores animados (cuenta suave de números tipo banco)          */
/* ---------------------------------------------------------------- */

.resumen-valor.contando { color: var(--gold); }

/* ---------------------------------------------------------------- */
/* Vistas de página completa (Historial / Comparador / Dashboard)   */
/* En vez de modales chicos, estas secciones ocupan toda la página,  */
/* igual que el corte de caja principal.                             */
/* ---------------------------------------------------------------- */

.vista.vista-entra { animation: vistaEntra 0.4s var(--ease-suave); }
@keyframes vistaEntra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vista-header { margin-bottom: 28px; }
.btn-volver { margin-bottom: 16px; padding: 7px 12px; font-size: 12.5px; }
.btn-volver .icon { transform: rotate(-90deg); }
.vista-header h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}
.vista-hint {
    color: var(--ink-soft);
    font-size: 14px;
    max-width: 760px;
    line-height: 1.55;
    margin: 0;
}

.nav-vista.active {
    background: var(--emerald-light);
    color: var(--emerald-dark);
    border-color: var(--emerald);
}

/* Subtítulos explicativos sobre las tablas de ingresos/egresos */
.tabla-subtitulo {
    padding: 0 18px 12px;
    margin: 0;
    font-size: 12px;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--paper-line);
    background: var(--paper-raised);
}

/* Explicación bajo el resumen del corte */
.resumen-explicacion {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin: -6px 0 16px;
    line-height: 1.5;
}
.resumen-explicacion strong { color: var(--ink); }

/* ---------------------------------------------------------------- */
/* Buscador de gastos (Historial)                                    */
/* ---------------------------------------------------------------- */

.buscador-gastos {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 26px 30px;
    margin-bottom: 34px;
}
.buscador-gastos h3, .historial-periodos h3 {
    font-family: var(--font-display);
    font-size: 18.5px;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.historial-periodos h3 { margin-bottom: 6px; }
.historial-periodos .vista-hint { margin-bottom: 18px; }

.buscador-form {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.buscador-form input {
    flex: 1;
    font-family: var(--font-body);
    font-size: 14.5px;
    padding: 13px 16px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.15s var(--ease-suave), background 0.15s var(--ease-suave);
}
.buscador-form input:focus { outline: none; border-color: var(--emerald); background: var(--paper-raised); }
.buscador-form .btn { padding: 12px 24px; }

.buscador-resultados { margin-top: 24px; }
.resultados-conteo { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; }
.vista-vacio { color: var(--ink-faint); font-style: italic; font-size: 13.5px; padding: 22px 4px; }

.resultado-grupo {
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
    animation: apareceSuave 0.3s var(--ease-suave) both;
}
.resultado-grupo-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-line);
    flex-wrap: wrap;
}
.resultado-grupo-head strong { font-size: 13.5px; }
.resultado-grupo-head .btn-sm { margin-left: auto; padding: 6px 12px; font-size: 11.5px; }

.resultado-grupo-lista { display: flex; flex-direction: column; }
.resultado-fila {
    display: grid;
    grid-template-columns: 78px 74px 1.3fr 1.6fr 120px;
    gap: 14px;
    align-items: center;
    padding: 11px 18px;
    border-top: 1px solid var(--paper-line);
    font-size: 12.5px;
    animation: filaEntra 0.25s var(--ease-suave) both;
}
.resultado-fila:first-child { border-top: none; }
.resultado-fecha { font-family: var(--font-mono); color: var(--ink-soft); font-size: 11.5px; white-space: nowrap; }
.resultado-concepto strong { display: block; font-size: 12.5px; }
.resultado-concepto .resultado-codigo { display: block; font-size: 10px; color: var(--ink-faint); font-family: var(--font-mono); margin-top: 1px; }
.resultado-detalles { color: var(--ink-soft); }
.resultado-importe { font-family: var(--font-mono); font-weight: 700; text-align: right; white-space: nowrap; }
.resultado-importe.ingreso { color: var(--emerald-dark); }
.resultado-importe.egreso { color: var(--red-ink); }

.badge-tipo {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 9px;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
}
.badge-tipo.ingreso { background: var(--emerald-light); color: var(--emerald-dark); }
.badge-tipo.egreso { background: var(--red-ink-light); color: var(--red-ink); }

/* ---------------------------------------------------------------- */
/* Tarjetas grandes de historial (en vez de filas chiquitas)         */
/* ---------------------------------------------------------------- */

.historial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.historial-card {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 22px 24px;
    animation: apareceSuave 0.4s var(--ease-suave) both;
    transition: transform 0.15s var(--ease-suave), box-shadow 0.15s var(--ease-suave);
}
.historial-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(31,42,36,0.3); }
.historial-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--paper-line);
    font-size: 14px;
}
.historial-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    margin-bottom: 20px;
}
.historial-card-grid .mini-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.historial-card-grid .mini-label.ingreso { color: var(--emerald-dark); }
.historial-card-grid .mini-label.egreso { color: var(--red-ink); }
.historial-card-grid .mini-valor {
    display: block;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
}
.historial-card-grid .mini-valor.ingreso { color: var(--emerald-dark); }
.historial-card-grid .mini-valor.egreso { color: var(--red-ink); }
.historial-card-grid .mini-valor.destacado { color: var(--ink); font-size: 17.5px; }
.historial-card-foot { display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------------- */
/* Efecto ripple en botones — un pequeño detalle "banco" al tocar    */
/* ---------------------------------------------------------------- */

.btn { position: relative; overflow: hidden; }
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transform: scale(0);
    animation: rippleAnim 0.6s var(--ease-suave);
    pointer-events: none;
}
.btn-ghost .ripple, .btn-add .ripple { background: rgba(27,107,84,0.18); }
@keyframes rippleAnim {
    to { transform: scale(2.6); opacity: 0; }
}

.icon.spin { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 980px) {
    .comparador-charts { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .columnas { grid-template-columns: 1fr; }
    .resumen-grid { grid-template-columns: 1fr 1fr; row-gap: 16px; }
    .resumen-item { border-left: none; padding-left: 0; }
    .resumen-item:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--paper-line); }
    .sticky-resumen { position: static; }
    .historial-grid { grid-template-columns: 1fr; }
    .resultado-fila { grid-template-columns: 1fr 1fr; row-gap: 4px; }
    .resultado-detalles { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .topbar { padding: 12px 16px; }
    .base-picker { width: 100%; order: 3; }
    select { min-width: 0; flex: 1; }
    .topbar-actions { order: 2; }
    .container { padding: 18px 12px 60px; }
    .resumen-grid { grid-template-columns: 1fr; }
    .resumen-item:nth-child(2n) { border-left: none; padding-left: 0; }
    .ledger-card-head { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .filtro-bar { flex-direction: column; align-items: stretch; }
    .filtro-bar .f-desde, .filtro-bar .f-hasta { width: 100%; }
    .filtro-bar .f-limpiar { margin-left: 0; align-self: flex-end; }
    .buscador-form { flex-direction: column; }
    .resultado-grupo-head .btn-sm { margin-left: 0; }
}