/* ============================================================
   FINTAXS FINANCIERO — Refined Financial Design System
   Primary color: var(--bs-purple) / --bs-purple-active / --bs-purple-light
   Hoja global (no scoped) compartida por las 6 paginas del modulo
   Financiero. Todos los selectores llevan el prefijo "fin-" o
   quedan anidados bajo ".fin-page" / ".fin-modal" para no filtrar
   estilos al resto de la aplicacion.
   ============================================================ */

/* ── Animations ── */
@keyframes finFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page heading ── */
.fin-page-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1A1A2E !important;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 !important;
}

.fin-page-title small {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: #9CA3AF;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 2px;
}

.fin-page-subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #6B7280;
}

/* ── KPI cards ── */
.fin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.fin-kpi-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #EBEBEB;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 10px rgba(0,0,0,0.04);
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    animation: finFadeUp 0.4s ease both;
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}

.fin-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--fin-accent, var(--bs-purple));
    opacity: 0.9;
}

.fin-kpi-card.clickable { cursor: pointer; }

.fin-kpi-card.clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
}

.fin-kpi-card.accent-purple { --fin-accent: var(--bs-purple); }
.fin-kpi-card.accent-teal   { --fin-accent: #0891B2; }
.fin-kpi-card.accent-red    { --fin-accent: #DC2626; }
.fin-kpi-card.accent-amber  { --fin-accent: #D97706; }
.fin-kpi-card.accent-green  { --fin-accent: #059669; }

.fin-kpi-grid > .fin-kpi-card:nth-child(1) { animation-delay: 0.03s; }
.fin-kpi-grid > .fin-kpi-card:nth-child(2) { animation-delay: 0.08s; }
.fin-kpi-grid > .fin-kpi-card:nth-child(3) { animation-delay: 0.13s; }
.fin-kpi-grid > .fin-kpi-card:nth-child(4) { animation-delay: 0.18s; }

.fin-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--fin-accent, var(--bs-purple)) 14%, white);
}

/* Metronic's .ki-outline/.ki-duotone/.ki-solid set color/font-size directly
   on the icon glyph itself (plugins.bundle.css) — a rule that targets the
   element directly always wins over one inherited from this card's own
   wrapper, no matter the wrapper's specificity. Target the glyph directly
   too, or every KPI icon renders as Metronic's default washed-out grey. */
.fin-kpi-icon i {
    color: var(--fin-accent, var(--bs-purple)) !important;
    font-size: 1.15rem !important;
}

.fin-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 8px;
}

.fin-kpi-value {
    font-family: 'DM Mono', 'Cascadia Code', 'Fira Mono', 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1A1A2E;
    letter-spacing: -0.02em;
    line-height: 1.1;
    white-space: nowrap;
}

.fin-kpi-foot {
    font-size: 0.78rem;
    color: #6B7280;
    margin-top: 9px;
}

.fin-kpi-foot.danger { color: #DC2626; font-weight: 700; }
.fin-kpi-foot.good    { color: #059669; font-weight: 700; }

/* ── Filter card ── */
.fin-filter-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #EBEBEB;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.03);
    padding: 18px 20px;
    animation: finFadeUp 0.4s ease both;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.fin-filter-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bs-purple);
    border-radius: 16px 16px 0 0;
}

.fin-label {
    display: block;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    margin-bottom: 6px !important;
}

.fin-input {
    border: 1px solid #E5E7EB !important;
    border-radius: 9px !important;
    font-size: 0.875rem !important;
    padding: 9px 13px !important;
    color: #1A1A2E !important;
    background: #FAFAFA !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    height: auto !important;
    width: 100%;
}

.fin-input:focus {
    border-color: var(--bs-purple) !important;
    box-shadow: 0 0 0 3px rgba(172, 30, 166, 0.15) !important;
    outline: none !important;
    background: #fff !important;
}

/* Select — usa form-select como base para conservar la flecha de Bootstrap */
.fin-select {
    border: 1px solid #E5E7EB !important;
    border-radius: 9px !important;
    font-size: 0.875rem !important;
    color: #1A1A2E !important;
    background-color: #FAFAFA !important;
    transition: border-color 0.18s, box-shadow 0.18s;
    /* height: auto !important; */
}

.fin-select:focus {
    border-color: var(--bs-purple) !important;
    box-shadow: 0 0 0 3px rgba(172, 30, 166, 0.15) !important;
    outline: none !important;
}

/* Fecha — usa form-control como base para compatibilidad con flatpickr */
.fin-date-input {
    border: 1px solid #E5E7EB !important;
    border-radius: 9px !important;
    font-size: 0.875rem !important;
    color: #1A1A2E !important;
    background-color: #FAFAFA !important;
    transition: border-color 0.18s, box-shadow 0.18s;
    width: 100% !important;
    min-width: 0;
}

.fin-date-input:focus {
    border-color: var(--bs-purple) !important;
    box-shadow: 0 0 0 3px rgba(172, 30, 166, 0.15) !important;
    outline: none !important;
    background-color: #fff !important;
}

/* El calendario se renderiza en el body: debe quedar sobre el modal de Bootstrap */
.flatpickr-calendar {
    z-index: 1060 !important;
}

/* ── Buttons ── */
.fin-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--bs-purple);
    color: var(--bs-purple-inverse, #fff) !important;
    border: none;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
    box-shadow: 0 2px 8px rgba(172, 30, 166, 0.25);
    text-decoration: none !important;
    white-space: nowrap;
}

.fin-btn-primary:hover {
    background: var(--bs-purple-active);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(172, 30, 166, 0.35);
    color: var(--bs-purple-inverse, #fff) !important;
}

.fin-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.fin-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bs-purple-light);
    color: var(--bs-purple) !important;
    border: 1px solid var(--bs-purple-light);
    border-radius: 9px;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
    text-decoration: none !important;
    white-space: nowrap;
}

.fin-btn-outline:hover {
    background: var(--bs-purple);
    color: var(--bs-purple-inverse, #fff) !important;
    border-color: var(--bs-purple);
    transform: translateY(-1px);
}

.fin-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: #6B7280 !important;
    border: 1px solid #E5E7EB;
    border-radius: 9px;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none !important;
}

/* Same Metronic .ki-outline direct-color issue as the KPI icons: without
   this, every icon inside these buttons renders as washed-out grey
   regardless of the button's own (correctly-set) text color. inherit picks
   up whichever variant's color already won above. */
.fin-btn-primary i,
.fin-btn-outline i,
.fin-btn-ghost i {
    color: inherit !important;
    font-size: 0.85em !important;
}

.fin-btn-ghost:hover {
    background: #F3F4F6;
    color: #1A1A2E !important;
}

.fin-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5E7EB;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    padding: 0;
    flex-shrink: 0;
}

.fin-icon-btn:hover {
    background: var(--bs-purple-light);
    border-color: var(--bs-purple-light);
    transform: translateY(-1px);
}

.fin-doc-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    color: var(--bs-purple);
    font-weight: 600;
    cursor: pointer;
}

.fin-doc-link:hover {
    color: var(--bs-purple-active);
    text-decoration: underline;
}

/* ── Segmented control ── */
.fin-segmented {
    display: inline-flex;
    background: #F1F2F4;
    padding: 3px;
    border-radius: 9px;
    gap: 2px;
}

.fin-seg {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6B7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.fin-seg.active {
    background: #fff;
    color: var(--bs-purple);
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.fin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
}

.fin-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Panels ── */
.fin-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #EBEBEB;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
    animation: finFadeUp 0.4s ease 0.06s both;
}

.fin-panel + .fin-panel { margin-top: 16px; }

.fin-panel-header {
    padding: 15px 18px;
    border-bottom: 1px solid #F3F4F6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fin-panel-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #1A1A2E;
    margin: 0;
}

.fin-panel-sub {
    font-size: 0.76rem;
    color: #9CA3AF;
    margin: 3px 0 0;
}

.fin-panel-body { padding: 18px; }

.fin-grid-2 {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 16px;
}

/* ── Grid wrapper (contenedor de TelerikGrid) ── */
.fin-grid-wrapper {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #EBEBEB;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
    animation: finFadeUp 0.42s ease 0.05s both;
}

.fin-grid-wrapper .k-grid,
.fin-grid-wrapper .k-grid-header,
.fin-grid-wrapper .k-grid-pager {
    border: none !important;
    font-family: inherit;
}

.fin-grid-wrapper .k-grid-header th {
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    background: #F9FAFB !important;
}

.fin-grid-wrapper .k-grid td {
    font-size: 0.84rem !important;
    color: #374151 !important;
    vertical-align: middle !important;
}

.fin-grid-wrapper .k-grid tr:hover td {
    background-color: var(--bs-purple-light) !important;
    opacity: 0.85;
}

/* Telerik's own empty-state row (already localized to Spanish) — match the
   rest of the module's empty-state look instead of the grid default. */
.fin-grid-wrapper .k-grid-norecords td {
    padding: 32px 16px !important;
    text-align: center;
    color: #9CA3AF !important;
    font-style: italic;
    font-size: 0.85rem !important;
    background: #fff !important;
}

/* ── Badges ── */
.fin-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.fin-badge-pendiente { background: #FEF3C7; color: #92400E; }
.fin-badge-parcial   { background: #DBEAFE; color: #1D4ED8; }
.fin-badge-pagado    { background: #D1FAE5; color: #065F46; }
.fin-badge-vencido   { background: #FEE2E2; color: #991B1B; }
.fin-badge-cobro     { background: #D1FAE5; color: #065F46; }
.fin-badge-pago      { background: #FEF3C7; color: #92400E; }
.fin-badge-activo    { background: #D1FAE5; color: #065F46; }
.fin-badge-anulado   { background: #F1F2F4; color: #646B75; }

/* ── Movimiento del mes ── */
.fin-move-list { display: grid; gap: 10px; }

.fin-move-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    background: #fff;
}

.fin-move-row.is-total {
    background: #FAF5FD;
    border-color: var(--bs-purple-light);
    padding: 14px;
}

.fin-move-icon {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}
.fin-move-icon.accent-green  { background: #D1FAE5; color: #059669; }
.fin-move-icon.accent-teal   { background: #DBEAFE; color: #0891B2; }
.fin-move-icon.accent-purple { background: var(--bs-purple); color: var(--bs-purple-inverse); }

.fin-move-label { font-size: 0.86rem; font-weight: 650; color: #374151; }
.fin-move-row.is-total .fin-move-label { font-weight: 750; color: #1A1A2E; }

.fin-move-amount {
    font-family: 'DM Mono', 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}
.fin-move-row.is-total .fin-move-amount { font-size: 1.5rem; }

.fin-net { color: var(--bs-purple); font-weight: 700; }

/* ── Flow boxes (proximos 30 dias) ── */
.fin-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fin-flow-box {
    padding: 14px;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
}

.fin-flow-box span {
    font-size: 0.72rem;
    color: #9CA3AF;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fin-flow-box strong {
    display: block;
    font-family: 'DM Mono', 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 1.25rem;
    margin-top: 7px;
    color: #1A1A2E;
}

.fin-flow-diff {
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    background: #F7F8FA;
}

.fin-flow-diff span {
    font-size: 0.72rem;
    color: #9CA3AF;
    font-weight: 700;
    text-transform: uppercase;
}

.fin-flow-diff strong {
    display: block;
    font-family: 'DM Mono', 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 1.4rem;
    margin-top: 5px;
}

/* ── List (proximos movimientos) ── */
.fin-list {
    display: grid;
    gap: 12px;
}

.fin-list-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F3F4F6;
}

.fin-list-item:last-child { border-bottom: 0; padding-bottom: 0; }

.fin-list-item strong {
    font-family: 'DM Mono', 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 0.85rem;
}

/* ── Person / avatar ── */
.fin-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fin-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--bs-purple-light);
    color: var(--bs-purple-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.fin-name {
    font-weight: 700;
    font-size: 0.83rem;
    color: #1A1A2E;
    display: block;
}

.fin-subtext {
    display: block;
    color: #9CA3AF;
    font-size: 0.74rem;
    margin-top: 2px;
}

/* ── Monospace amounts ── */
.fin-mono {
    font-family: 'DM Mono', 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 0.85rem;
    color: #374151;
    letter-spacing: -0.01em;
}

.fin-amount { font-weight: 700; }
.fin-danger { color: #DC2626; font-weight: 700; }
.fin-good   { color: #059669; font-weight: 700; }

/* ── Empty state ── */
.fin-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: #9CA3AF;
    font-size: 0.85rem;
    font-style: italic;
}

/* ── Table (usada dentro de modales / paneles sin Telerik) ── */
.fin-table { width: 100%; border-collapse: collapse; }

.fin-table th {
    text-align: left;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    padding: 10px 14px !important;
    background: #F9FAFB !important;
    border-bottom: 1px solid #EBEBEB !important;
    white-space: nowrap;
}

.fin-table td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: 0.83rem !important;
    color: #374151;
    border-bottom: 1px solid #F3F4F6 !important;
}

.fin-table tbody tr:last-child td { border-bottom: none !important; }

.fin-table tbody tr:hover td {
    background-color: var(--bs-purple-light) !important;
    opacity: 0.85;
}

/* ── Skeleton de carga para tablas/grillas ── */
.fin-skeleton-row:hover td { background-color: transparent !important; }

.fin-skeleton-line {
    display: inline-block;
    height: 14px;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #EEF0F4 25%, #E4E7ED 37%, #EEF0F4 63%);
    background-size: 400% 100%;
    animation: finSkeletonShimmer 1.4s ease infinite;
}

@keyframes finSkeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Alert banner ── */
.fin-alert-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    background: var(--bs-purple-light);
    border: 1px solid var(--bs-purple-light);
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--bs-purple-active);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── Amount summary box (modal de registrar movimiento) ── */
.fin-amount-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F7F8FA;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.fin-amount-box span {
    font-size: 0.76rem;
    color: #6B7280;
    font-weight: 600;
}

.fin-amount-box strong {
    font-family: 'DM Mono', 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 1.2rem;
    color: #1A1A2E;
}

/* Stacked variant: the label is too long to share a row with the amount in
   a ~500px modal without crowding — label on top, amount big below, same
   label/value rhythm as .fin-kpi-card elsewhere in the module. */
.fin-amount-box-stacked {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.fin-amount-box-stacked strong {
    font-size: 1.4rem;
}

/* ── Modal styling — scoped bajo .fin-modal para no afectar otros modales ── */
.fin-modal .modal-content {
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.16) !important;
    overflow: hidden;
}

.fin-modal .modal-header {
    padding: 18px 22px 14px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    /* app.css sets a global, unscoped .modal-header background+display for the
       older Ventas/Compras-style modals — without these three, that leaks
       through here too (solid purple header, broken flex layout). */
    background-color: #ffffff !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
}

.fin-modal .modal-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #1A1A2E !important;
    letter-spacing: -0.01em;
    text-align: left !important;
}

.fin-modal .modal-body { padding: 18px 22px 22px !important; }

.fin-section-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1A1A2E;
}

.fin-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
}

.fin-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 20px;
    text-align: center;
    color: #6C7293;
    font-weight: 600;
}

.fin-modal-loading img {
    width: 48px;
    height: 48px;
}

.fin-kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.fin-kv div {
    padding: 10px 12px;
    background: #F8F9FA;
    border-radius: 9px;
}

.fin-kv span {
    display: block;
    font-size: 0.67rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.fin-kv strong {
    font-size: 0.85rem;
    color: #1A1A2E;
}

/* ── Responsive ── */
@media (max-width: 1180px) {
    .fin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .fin-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .fin-kpi-grid { grid-template-columns: 1fr; }
    .fin-toolbar { flex-direction: column; align-items: stretch; }
    .fin-kv { grid-template-columns: 1fr; }
}