/* Sistema compartido de las páginas de Finanzas (fin-).
   Uno por área, como crm.css / mapa.css / renta-form.css.

   POR QUÉ EXISTE ESTE ARCHIVO: estas clases vivían SÓLO en el CSS scoped de Resumen.razor.
   Detalle.razor usa fin-resumen, fin-card(+__head/__title/__more), fin-list, fin-row
   (+__rank/__main/__name/__sub/__amount) y fin-skel — y no le aplicaba NINGUNA, porque el
   scoped de una página no alcanza a otra. Sus tarjetas se renderizaban sin fondo ni borde y
   sus filas sin los 56px de alto táctil. Aquí son globales y las dos páginas se ven igual.

   Lo que NO va aquí: lo exclusivo del Resumen (fin-hero, fin-mini, fin-tools, fin-frase…),
   que sigue scoped en Resumen.razor.css.

   Todo el color sale de los tokens --ic-* (app.css). No duplicar estas clases en <style>
   inline de páginas. */

/* ── Contenedor de página: una columna con aire ──
   El ANCHO ya no vive aquí. Los 1100px que había son ahora
   --ic-content-max-angosto (app.css :root), que el contenedor del layout aplica
   a estas dos rutas por el modo `ic-content-wrap--angosto` (MainLayout.razor).
   Estaban aquí junto a `margin: 0 auto`, y eso es lo que hacía que /finanzas
   (1100) y /lavado (760) no calzaran: cada hoja elegía su número. Si vienes a
   buscar el 1100, está en app.css. */
.fin-resumen {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-5, 18px);
    padding-bottom: var(--ic-space-6, 24px);
}

/* ── Tarjetas de listas ── */
.fin-card {
    background: var(--ic-surface, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--ic-border, rgba(255, 255, 255, 0.10));
    border-radius: 18px;
    padding: var(--ic-space-4, 16px);
    height: 100%;
}

.fin-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fin-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ic-text, #F3F4F6);
}

.fin-card__more {
    margin-top: 10px;
    width: 100%;
    /* 44px = --ic-page-header-touch-min, el piso táctil senior del panel. */
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--ic-primary, #6C7DFF);
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    touch-action: manipulation;
}

.fin-card__more:hover {
    background: var(--ic-primary-dim, rgba(10, 132, 255, 0.08));
}

/* ── Filas tocables ── */
.fin-list {
    display: flex;
    flex-direction: column;
}

/* 56px: por encima del piso de 44px, porque la fila ENTERA es el objetivo. */
.fin-row {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3, 12px);
    width: 100%;
    min-height: 56px;
    padding: 8px 6px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    border-bottom: 1px solid var(--ic-border, rgba(255, 255, 255, 0.06));
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.fin-row:last-child { border-bottom: none; }
.fin-row:hover { background: var(--ic-primary-dim, rgba(10, 132, 255, 0.07)); }

.fin-row__rank {
    flex: 0 0 26px;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
}

.fin-row__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fin-row__name {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ic-text, #F3F4F6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fin-row__sub {
    font-size: var(--ic-text-sm, 0.85rem);
    color: var(--ic-muted, #9CA3AF);
}

.fin-row__amount {
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ic-text, #F3F4F6);
}

/* ── Esqueleto de carga ── */
.fin-skel {
    height: 180px;
    border-radius: 12px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 37%,
        rgba(255, 255, 255, 0.04) 63%);
    background-size: 400% 100%;
    animation: fin-shimmer 1.3s ease infinite;
}

@keyframes fin-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fin-skel { animation: none; }
}