/* ============================================
   DASHBOARD - GRID
   ============================================ */

.dashboard {
    --unidad-card: 148px;
    --gap-card: 16px;
    display: block;
    column-width: 260px;
    column-gap: var(--gap-card);
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dashboard > * {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
    margin-bottom: var(--gap-card);
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

/* Tarjetas con gráficos: altura fija para contener el canvas de Chart.js.
   Especificidad (0,3,0) para ganar a `.dashboard .card`, que fija
   height:auto, max-height:none y overflow:visible. */
.dashboard .card.grafico-patrimonio-card {
    overflow: hidden;
}

.grafico-patrimonio-card canvas,
.distribucion-dona canvas,
.divisa-dona canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
}

.dashboard.dashboard-cargando {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.dashboard-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--gap-card);
}

.dashboard-edicion-bar {
    position: fixed;
    left: 50%;
    bottom: 78px;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
}

.dashboard-edicion-bar[hidden] {
    display: none;
}

.dashboard-edicion-acciones {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px;
}

.dashboard-card-edicion {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 4px;
}

.dashboard-edicion-activo {
    /* Disolver al entrar/salir del modo edición */
    transition: opacity 0.25s ease, filter 0.25s ease;
    opacity: 1;
}

.dashboard-edicion-activo .dashboard > * {
    /* Las cards se desvanecen ligeramente para que los controles de edición resalten */
    opacity: 0.92;
    transition: opacity 0.25s ease, transform 0.22s ease;
}

/* Al entrar a modo edición, las cards hacen un micro-salto de disolver */
.dashboard-edicion-activo .dashboard-card-entra {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Cuando sale del modo edición, las cards vuelven a su estado normal con disolver */
.dashboard:not(.dashboard-edicion-activo) .dashboard-card-entra {
    animation: tarjeta-entra 0.2s ease forwards;
}

.dashboard-card-edicion > * {
    min-width: 26px;
    min-height: 26px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background: var(--background);
    color: var(--text);
    cursor: pointer;
}

.dashboard-card-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    cursor: grab;
}

.dashboard-card-handle:active {
    cursor: grabbing;
}

.dashboard-card-mover {
    display: inline-flex;
}

.dashboard-card-arrastrando {
    opacity: 0.6;
    transform: scale(1.02);
    box-shadow: 0 8px 24px var(--shadow);
    cursor: grabbing;
    z-index: 100;
}

/* Las cards se desplazan con transición al reordenar: el masonry las
   reubica por appendChild y sin transición el salto es brusco. */
.dashboard-column [data-dashboard-card] {
    transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Línea de inserción: aparece con fade suave en vez de golpe seco. */
.dashboard-card-insercion {
    display: block;
    height: 3px;
    margin: 0;
    border-radius: 999px;
    background: var(--positive);
    box-shadow: 0 0 10px var(--positive);
    pointer-events: none;
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dashboard-card-insercion.visible {
    opacity: 1;
    transform: scaleY(1);
}

/* Animación de encaje al soltar la card en su nueva posición. */
.dashboard-card.encajando {
    animation: encajar 0.2s ease-out;
}

@keyframes encajar {
    0% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-card-arrastrando {
        transition: none !important;
        animation: none !important;
    }
    .dashboard-column [data-dashboard-card] {
        transition: none !important;
    }
    .dashboard-card-insercion {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: scaleY(1) !important;
    }
    .dashboard-card-insercion.visible {
        opacity: 1 !important;
        transform: scaleY(1) !important;
    }
    .dashboard-card.encajando {
        animation: none !important;
        transform: scale(1) !important;
    }
}

/* Entrada de tarjeta nueva: aparece con fade + translateY hacia arriba. */
@keyframes tarjeta-entra {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-card-entra {
    animation: tarjeta-entra 0.2s ease forwards;
}

/* Salida de tarjeta: se desvanece antes de que el nodo sea removido del DOM. */
@keyframes tarjeta-sale {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

.dashboard-card-sale {
    animation: tarjeta-sale 0.2s ease forwards;
}

body.dashboard-card-dragging,
body.dashboard-card-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

.dashboard-edicion-activo .card.card-navegable {
    cursor: default;
}

/* ============================================
   CARDS - ESTILO MEJORADO
   ============================================ */

    /* `transition: all` en una card es caro: hay ~20 en pantalla a la vez y
       `all` incluye las propiedades que disparan layout (padding, min-height,
       font-size…), así que cada hover pedía recomponer la página entera. Se
       declaran solo las que de verdad cambian. */
.dashboard .card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--unidad-card);
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 24px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: visible;
}

/* El ::before lleva su propia transición: la del padre no se hereda a los
   pseudo-elementos. */
.dashboard .card::before {
    transition: opacity 0.3s ease;
}

.dashboard .card[hidden] {
    display: none;
}

/* Color de la línea según el tipo de card */
.dashboard .card.positive::before {
    background: var(--positive);
    opacity: 0.6;
}

.dashboard .card.negative::before {
    background: var(--negative);
    opacity: 0.6;
}

.dashboard .card.primary::before {
    background: var(--border);
    opacity: 0.5;
}

/* Hover */
.dashboard .card:hover {
    transform: scale(1.01);
    border-color: var(--border);
    --glow: inset 0 0 10px var(--shadow);
}

.dashboard .card:hover::before {
    opacity: 1;
}

/* Cards navegables: indican que se puede hacer clic */
.dashboard .card.card-navegable {
    cursor: pointer;
    user-select: none;
}

/* Título */
.dashboard .card .card-title {
    font-size: 13px;
    color: var(--textSecondary);
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Valor */
.dashboard .card .card-value {
    font-family: var(--font-secondary);
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.dashboard .card .card-value.positive {
    color: var(--positive);
}

.dashboard .card .card-value.negative {
    color: var(--negative);
}

/* Subtítulo */
.dashboard .card .card-sub {
    font-size: 12px;
    color: var(--textSecondary);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    opacity: 0.7;
    flex-shrink: 0;
}

.dashboard .card .card-header,
.dashboard .card .card-title,
.dashboard .card .card-value {
    min-width: 0;
    flex-shrink: 0;
}

.dashboard .card .card-title {
    overflow-wrap: anywhere;
}

.dashboard .card .card-value {
    overflow-wrap: anywhere;
}

.patrimonio-card .card-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.05em;
}

.grafico-patrimonio-card .grafico-container-dashboard {
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    min-width: 0;
    position: relative;
    margin-top: 8px;
    cursor: pointer;
    overflow: hidden;
}

.grafico-patrimonio-card .grafico-container-dashboard:focus-visible {
    border-radius: 12px;
}

.patrimonio-modal-loading {
    display: grid;
    min-height: 180px;
    place-items: center;
}

.patrimonio-modal-total {
    margin: 8px 0 4px;
    color: var(--positive);
    font-family: var(--font-secondary);
    font-size: 36px;
    font-weight: 700;
    text-align: center;
}

.patrimonio-modal-total.negative {
    color: var(--negative);
}

.patrimonio-modal-caption {
    margin: 0 0 22px;
    color: var(--textSecondary);
    font-size: 13px;
    text-align: center;
}

.patrimonio-modal-owner {
    margin-bottom: 4px;
}

.patrimonio-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.patrimonio-modal-stat {
    display: flex;
    min-height: 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
}

.patrimonio-modal-stat span {
    color: var(--textSecondary);
    font-size: 11px;
}

.patrimonio-modal-stat strong {
    color: var(--text);
    font-family: var(--font-secondary);
    font-size: 15px;
}

.evolucion-modal-grafico {
    position: relative;
    width: 100%;
    height: min(58vh, 520px);
    min-height: 280px;
}

/* Cinco categorías antes del gráfico. En pantallas estrechas se envuelven en
   varias filas en vez de comprimir las píldoras hasta hacerlas ilegibles. */
.grafico-categorias-modal {
    box-sizing: border-box;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 14px;
    justify-content: center;
}

.grafico-categorias-modal .toggle-option {
    flex: 0 1 auto;
    padding: 4px 12px;
    text-align: center;
    white-space: nowrap;
}

.grafico-categorias-modal .toggle-option:hover,
.grafico-categorias-modal .toggle-option:hover:not(.active) {
    padding: 4px 12px;
}

.grafico-periodos-modal {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin: 16px auto 0;
    justify-content: center;
}

.evolucion-modal-periodo {
    margin: 12px 0 0;
    color: var(--textSecondary);
    font-size: 12px;
    text-align: center;
}

#app-content:has(.dashboard) {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 24px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

#app-content:has(.dashboard)::-webkit-scrollbar {
    width: 6px;
}

#app-content:has(.dashboard)::-webkit-scrollbar-track {
    background: transparent;
}

#app-content:has(.dashboard)::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

.patrimonio-card.resaltado-1 {
    background-color: var(--lightHover);
    color: var(--border);
}

.patrimonio-card.resaltado-2 {
    background-color: var(--backgroundAlt);
    --lightBorder: var(--lightGraphite);
    --shadow: var(--lightSlateGrey);
}

.patrimonio-card.resaltado-2 .card-title {
    color: var(--textAlt);
}

.patrimonio-card.resaltado-2 #patrimonio-valor {
    color: var(--positiveAlt);
}

.patrimonio-card.resaltado-2 .card-sub {
    color: var(--surface);
    border-top: 1px solid var(--surface);
}

.patrimonio-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.patrimonio-card .card-header .card-title {
    margin-bottom: 0;
}

.divisa-select {
    background-color: var(--background);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 4px 14px;
    padding-right: 38px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F3F3F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

[data-theme="light"] .divisa-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.divisa-select:hover {
    border-color: var(--text);
    background-color: var(--lightHover);
    color: var(--textSecondary);
    box-shadow: inset 0 0 5px var(--shadow);
}

.divisa-select option {
    background: var(--surface);
    color: var(--text);
}

/* ============================================
   ICONOS DECORATIVOS EN CARDS
   ============================================ */

.dashboard .card .card-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 28px;
    opacity: 0.15;
    pointer-events: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 599px) {
    .dashboard {
        --gap-card: 16px;
    }

    #app-content:has(.dashboard) {
        padding: 24px 16px;
    }

    .dashboard .card {
        padding: 18px;
    }

    .dashboard .card .card-value {
        font-size: 26px;
    }

    .grafico-patrimonio-card .grafico-container-dashboard {
        flex-basis: 160px;
        height: 160px;
        min-height: 160px;
        max-height: 160px;
    }
}

@media (max-width: 400px) {
    .dashboard {
        --gap-card: 12px;
    }

    #app-content:has(.dashboard) {
        padding: 20px 12px;
    }

    .dashboard .card {
        padding: 16px;
    }
}

/* En pantallas anchas las cards pueden hacerse más compactas y ocupar
   exactamente 4 columnas, como se ve en la maqueta del hero. */
@media (min-width: 1024px) {
    #app-content:has(.dashboard) {
        padding: 40px 24px;
    }

    .dashboard .card {
        padding: 20px;
    }

    .dashboard .card .card-value {
        font-size: 28px;
    }

    .grafico-patrimonio-card .grafico-container-dashboard {
        flex-basis: 160px;
        height: 160px;
        min-height: 160px;
        max-height: 160px;
    }

}

@media (max-width: 899px) {
    .dashboard {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .dashboard-card-handle {
        display: none;
    }

    .dashboard-card-mover {
        display: inline-flex;
    }
}

/* ============================================
   GRÁFICO VACÍO
   ============================================ */

   .grafico-vacio {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.grafico-vacio-icon {
    font-size: 40px;
    opacity: 0.4;
    margin-bottom: 12px;
}

.grafico-vacio-texto {
    color: var(--textSecondary);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.grafico-vacio-hint {
    color: var(--textSecondary);
    font-size: 12px;
    opacity: 0.6;
    margin: 0;
}

/* ============================================
   SELECTOR DE PERIODO Y ESTADOS DEL GRÁFICO
   ============================================ */

.grafico-periodos {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: stretch;
    /* Sin `margin-top`: el grupo se coloca dentro de la cabecera (que ya tiene
       su propio `gap`), y un margen aquí lo separaba del título. */
    margin: 0;
}

.grafico-periodos .toggle-option {
    flex: 1 1 0;
    padding: 4px 8px;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El hover ya no ensancha la píldora (ver .toggle-option en
   configuracion.css): aquí se reafirma para que las cards del dashboard no
   dependan del orden de carga de las hojas. */
.grafico-periodos .toggle-option:hover,
.grafico-periodos .toggle-option:hover:not(.active) {
    padding: 4px 8px;
}

/* El toggle de las cards Gastado/Ingresado/Balance/Ahorro va DENTRO de la
   cabecera, debajo del título, a todo el ancho de la card y por encima del
   valor.

   Antes era un hermano del `.card-header` en `align-self: flex-start` con
   márgenes negativos: al comprimirse la card quedaba montado sobre la cifra y
   además separado del título. Como cabecera es una columna (título + toggle),
   la posición depende solo del orden de los elementos. */
.metric-card .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.metric-card .card-header .card-title {
    margin-bottom: 0;
}

/* El grupo dentro de la cabecera manda sobre el ancho de la regla general
   `.grafico-periodos { width: 100% }`: aquí es el ancho de la card menos el
   padding, que es justo lo que se busca. */
.metric-card .card-header .grafico-periodos {
    margin: 0;
}

/* 12px y 6px de padding lateral: la card es estrecha y ahora son CINCO
   opciones ("7D 30D 90D 1A Todo"), que con el padding de 16px se montaban en
   dos filas. El hover no cambia el padding (ver .toggle-option en
   configuracion.css): reafirma aquí para que las cards no dependan del orden
   de carga de las hojas. */
.metric-card .grafico-periodos .toggle-option {
    padding: 4px 6px;
    min-width: 0;
    font-size: 12px;
}

.metric-card .grafico-periodos .toggle-option:hover,
.metric-card .grafico-periodos .toggle-option:hover:not(.active) {
    padding: 4px 6px;
}

.grafico-estado {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
}

.grafico-estado[hidden] {
    display: none;
}

/* ============================================
   MODAL DE VENCIMIENTOS
   ============================================ */

.vencimientos-lista {
    max-height: 320px;
    overflow-y: auto;
}

.vencimientos-lista .card-item.vencido {
    border-color: var(--negative);
}

.vencimientos-lista .card-item.clickeable {
    cursor: pointer;
}

/* ============================================
   CARD DE FAVORITOS
   ============================================ */

.favoritos-card .card-header,
.metas-card .card-header,
.pendientes-card .card-header,
.ordenes-card .card-header,
.estrategias-card .card-header,
.distribucion-card .card-header,
.distribucion-activos-card .card-header,
.patrimonio-divisa-card .card-header,
.programados-card .card-header,
.alertas-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.favoritos-card .card-header .card-title,
.metas-card .card-header .card-title,
.pendientes-card .card-header .card-title,
.ordenes-card .card-header .card-title,
.estrategias-card .card-header .card-title,
.distribucion-card .card-header .card-title,
.distribucion-activos-card .card-header .card-title,
.patrimonio-divisa-card .card-header .card-title,
.programados-card .card-header .card-title,
.alertas-card .card-header .card-title {
    margin-bottom: 0;
}
.card-header .card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.btn-meta-nueva {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px 4px 11px !important;
    font-size: 12px;
}

.favoritos-lista,
.metas-lista,
.pendientes-lista,
.ordenes-lista,
.programados-lista,
.alertas-lista {
    display: flex;
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    padding-right: 4px;
}

.dashboard .pendientes-lista {
    height: auto;
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
}

.estrategias-lista {
    display: flex;
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    padding-right: 4px;
}

/* ============================================
   LISTAS CON SCROLL INTERNO DEL DASHBOARD
   ============================================

   Las listas llevan .scroll-fade (puesto por el JS del dashboard al renderizar
   la card). Con la clase se restringen a un alto máximo y scrollan
   internamente; el degradado de borde se controla con .scroll-fade-top y
   .scroll-fade-bottom (definidos en navegacion.css). Cuando el contenido cabe
   sin scroll no hay degradado: la regla base de .scroll-fade deja la máscara
   opaca. Las reglas específicas de .dashboard > * (overflow: visible) no se
   tocan: solo las listas con la clase se restringen. */

.movimientos-lista.scroll-fade,
.favoritos-lista.scroll-fade,
.metas-lista.scroll-fade,
.presupuestos-lista.scroll-fade,
.pendientes-lista.scroll-fade,
.ordenes-lista.scroll-fade,
.estrategias-lista.scroll-fade,
.distribucion-lista.scroll-fade,
.distribucion-activos-lista.scroll-fade,
.patrimonio-divisa-lista.scroll-fade,
.programados-lista.scroll-fade,
.alertas-lista.scroll-fade {
    overflow-y: auto;
    max-height: 220px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Dona de "Distribución patrimonial": cima de la card, centrada y compacta,
   con el listado de barras debajo. Al ser una card estrecha, la dona se apila
   y no compite en ancho con las barras. */
.distribucion-dona {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 170px;
    margin: 0 auto 14px;
    overflow: hidden;
}

.distribucion-dona canvas {
    position: relative;
    z-index: 1;
}

/* Dona de "Patrimonio por divisa": misma estructura que la dona de distribución,
   pero para el desglose en PEN / USD / USDT / EUR. */
.divisa-dona {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 170px;
    margin: 0 auto 14px;
    overflow: hidden;
}

.divisa-dona canvas {
    position: relative;
    z-index: 1;
}

.dona-esqueleto {
    width: 94px;
    height: 94px;
    margin: 10px auto;
    border-radius: 50%;
    border: 28px solid var(--lightHover);
    box-sizing: content-box;
    opacity: 0.7;
    animation: pulse-esqueleto 1.4s ease-in-out infinite;
}

@keyframes pulse-esqueleto {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.8; }
}

.distribucion-lista,
.divisa-lista {
    display: flex;
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    padding-right: 4px;
}

.distribucion-modal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.distribucion-modal-seccion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.distribucion-modal-titulo {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.distribucion-modal-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.distribucion-modal-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.distribucion-modal-item-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.distribucion-modal-item-etiqueta {
    color: var(--text);
    font-size: 13px;
}

.distribucion-modal-item-valor {
    color: var(--text);
    font-family: var(--font-secondary);
    font-size: 13px;
}

.distribucion-modal-item-detalle {
    color: var(--textSecondary);
    font-size: 11px;
}

.dashboard-list-item {
    box-sizing: border-box;
    display: flex;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.dashboard-list-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.dashboard-list-title,
.dashboard-list-detail,
.dashboard-list-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

.dashboard-list-detail {
    color: var(--textSecondary);
    font-size: 11px;
}

.dashboard-list-value {
    flex-shrink: 0;
    color: var(--text);
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 600;
}

.dashboard-list-value.positive {
    color: var(--positive);
}

.dashboard-list-value.negative {
    color: var(--negative);
}

.metric-card .card-value {
    font-size: clamp(22px, 2vw, 28px);
}

.metric-card .card-sub {
    margin-top: auto;
}

.distribucion-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 5px 10px;
}

.distribucion-cabecera {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    color: var(--textSecondary);
    font-size: 11px;
}

.distribucion-cabecera strong {
    color: var(--text);
    font-family: var(--font-secondary);
    font-size: 12px;
}

.distribucion-barra {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 40px;
    background: var(--background);
}

.distribucion-barra span {
    display: block;
    height: 7px;           /* altura fija y visible, no depende del padre */
    border-radius: inherit;
    background: var(--border);
}

/* El ancho de la barra se aplica vía estilo inline con el porcentaje exacto.
   Por defecto empieza en 0% para que nunca se vea llena antes de calcularse. */
.distribucion-barra .barra-progreso {
    width: 0%;
}

/* Distribución patrimonial: los cuatro bloques con color fijo (el mismo en
   los dos temas), para que el anillo y las barras se lean igual. */
.distribucion-barra span[data-clase="liquidez"] {
    background: var(--distribucion-liquidez);
}

.distribucion-barra span[data-clase="inversiones"] {
    background: var(--distribucion-inversiones);
}

.distribucion-barra span[data-clase="inmovil"] {
    background: var(--distribucion-inmovil);
}

.distribucion-barra span[data-clase="deudas"] {
    background: var(--distribucion-deudas);
}

/* Distribución por tipo de activo: cuatro clases de activo, cada una con su
   color para que se comparen de un vistazo sin leer la etiqueta. */
.distribucion-barra span[data-clase="accion"] {
    background: var(--positive);
}

.distribucion-barra span[data-clase="etf"] {
    background: var(--positiveAlt);
}

.distribucion-barra span[data-clase="cripto"] {
    background: var(--ambar);
}

.distribucion-barra span[data-clase="bono"],
.distribucion-barra span[data-clase="otros"] {
    background: var(--border);
}

/* Patrimonio por divisa: el color es de la moneda, no del importe. Las
   divisas sin clase propia (criptos, EUR) caen al neutro de base. */
.distribucion-barra span[data-clase="pen"] {
    background: var(--positive);
}

.distribucion-barra span[data-clase="usd"] {
    background: var(--positiveAlt);
}

.distribucion-barra span[data-clase="eur"] {
    background: var(--ambar);
}

.distribucion-barra span[data-clase="usdt"] {
    background: var(--ambar);
}

.distribucion-valor {
    color: var(--textSecondary);
    font-family: var(--font-secondary);
    font-size: 10px;
    white-space: nowrap;
}

/* Órdenes: una orden a menos del 2% de su precio de disparo está a punto de
   saltar, así que su línea se resalta. */
.dashboard-list-detail.critico {
    color: var(--ambar);
}

.alerta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background: var(--surface);
    color: var(--text);
}

.alerta-item.aviso {
    color: var(--textAct);
}

.alerta-item.critico {
    color: var(--negative);
    border-color: color-mix(in srgb, var(--negative) 45%, var(--border));
}

.alerta-item > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.alerta-item span,
.alerta-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alerta-item span {
    font-size: 12px;
    font-weight: 500;
}

.alerta-item small {
    color: var(--textSecondary);
    font-size: 10px;
}

.modal-lista-dashboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.estrategia-cuenta {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background: var(--background);
    color: var(--textSecondary);
    font-size: 10px;
    cursor: pointer;
}

.estrategia-cuenta:hover {
    border-color: var(--positive);
    color: var(--text);
}

.estrategia-dashboard-item {
    height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.card-vacio {
    margin: 0;
    color: var(--textSecondary);
    font-size: 12px;
    opacity: 0.7;
}

/* ============================================
   CARD DE ÚLTIMOS MOVIMIENTOS
   ============================================ */

.movimientos-card .card-title {
    margin-bottom: 12px;
}

.movimientos-lista {
    display: flex;
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    padding-right: 4px;
}

.movimientos-lista::-webkit-scrollbar,
.favoritos-lista::-webkit-scrollbar,
.metas-lista::-webkit-scrollbar {
    width: 6px;
}

.movimientos-lista::-webkit-scrollbar-track,
.favoritos-lista::-webkit-scrollbar-track,
.metas-lista::-webkit-scrollbar-track {
    background: transparent;
}

.movimientos-lista::-webkit-scrollbar-thumb,
.favoritos-lista::-webkit-scrollbar-thumb,
.metas-lista::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

.dashboard-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dashboard-editor-hint {
    margin: 0;
    color: var(--textSecondary);
    font-size: 13px;
}

.dashboard-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* La card de evolución va a todo el ancho del editor: responde a una serie
   larga de puntos y en media card no se lee el periodo completo. */
.dashboard-editor-grid .dashboard-card-opcion[data-card="grafico"] {
    grid-column: 1 / -1;
}

.dashboard-card-opcion input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--background);
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dashboard-card-opcion input[type="checkbox"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transform: scale(0);
    transition: transform 0.2s ease;
}

.dashboard-card-opcion input[type="checkbox"]:checked {
    border-color: var(--border);
}

.dashboard-card-opcion input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.dashboard-card-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 22px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dashboard-card-opcion:has(input:checked) {
    background: var(--lightHover);
}

/* Opción que no se puede marcar ahora mismo (ya hay una card de ese tipo):
   se atenúa y no admite clic, para que quede claro que el límite existe y no
   que el control esté roto. */
.dashboard-card-opcion.bloqueada {
    opacity: 0.4;
    cursor: not-allowed;
}

.dashboard-card-opcion.bloqueada:hover {
    background: var(--surface);
}

.movimientos-lista .movimiento-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    cursor: pointer;
}

.movimientos-lista .movimiento-item:hover {
    box-shadow: inset 0 0 10px var(--shadow);
    background-color: var(--lightHover);
}

.movimiento-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.movimiento-titulo {
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movimiento-detalle {
    color: var(--textSecondary);
    font-size: 11px;
}

.movimiento-monto {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.movimiento-monto.positive {
    color: var(--positive);
}

.movimiento-monto.negative {
    color: var(--negative);
}

.movimiento-monto.ambar {
    color: var(--ambar);
}

/* ============================================
   CARD DE METAS DE AHORRO
   ============================================ */

.metas-lista {
    max-height: none;
}

/* Fila al estilo de "Últimos movimientos"/"Favoritos": nombre + porcentaje */
.meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.meta-item:hover {
    background-color: var(--lightHover);
    box-shadow: inset 0 0 10px var(--shadow);
}

.meta-item.pausada {
    opacity: 0.6;
}

.meta-item.completada {
    border-color: var(--positive);
}

.meta-nombre {
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.meta-cantidad {
    color: var(--textSecondary);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-porcentaje {
    flex-shrink: 0;
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 600;
    color: var(--textSecondary);
}

.meta-item.completada .meta-porcentaje {
    color: var(--positive);
}

.movimientos-lista .movimiento-item,
.favorito-item,
.meta-item {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.movimiento-titulo,
.favorito-nombre,
.meta-nombre {
    font-size: 13px;
}

/* ============================================
   MODAL APORTAR A META
   ============================================
   La barra de progreso (.aporte-progreso-wrap, .aporte-progreso y
   .aporte-progreso-barra) vive en componentes.css: la usa también la sección
   de uso de crédito de una tarjeta en cuentas, y desde esa página salía sin
   pista ni relleno. */

.aporte-valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.aporte-valor {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 20px;
    border-radius: 40px;
    background: var(--background);
    border: 1px solid var(--border);
}

.aporte-valor-label {
    font-size: 11px;
    color: var(--textSecondary);
}

.aporte-valor-fuerte {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.aporte-proyeccion {
    margin: 12px 0 16px;
    font-size: 12px;
    color: var(--textSecondary);
    min-height: 16px;
}

/* Monto del aporte ocupa todo el espacio sobrante y cuenta de origen
   conserva su ancho normal (el select no queda ancho ni con hueco). */
.aporte-fila {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

.aporte-fila .aporte-monto-flex {
    flex: 1 1 auto;
    min-width: 0;
}

.aporte-fila .aporte-cuenta-flex {
    flex: 0 0 auto;
}

.aporte-fila .aporte-cuenta-flex .form-input {
    width: auto;
}

@media (max-width: 480px) {
    .aporte-valores {
        grid-template-columns: 1fr;
    }

    .aporte-fila {
        flex-direction: column;
    }
}

/* ============================================
   FORMULARIO DE METAS
   ============================================ */

.form-grupo-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Monto actual bloqueado al crear: se atenúa igual que los inputs
   del detalle de movimiento antes de editarlo (se habilita al editar). */
#form-meta .form-input:disabled {
    opacity: 0.7;
    cursor: default;
}

/* Fecha límite llena el espacio sobrante y divisa conserva su ancho natural
   (el select no se estira ni parece vacío). El contenedor es una fila completa. */
.form-fila-fecha-divisa {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    grid-column: 1 / -1;
}

.form-fila-fecha-divisa .form-fecha-flex {
    flex: 1 1 auto;
    min-width: 0;
}

.form-fila-fecha-divisa .form-divisa-auto {
    flex: 0 0 auto;
}

.form-fila-fecha-divisa .form-divisa-auto .form-input {
    width: auto;
}

@media (max-width: 480px) {
    .form-grupo-doble {
        grid-template-columns: 1fr;
    }

    .form-fila-fecha-divisa {
        flex-direction: column;
    }

    .form-fila-fecha-divisa .form-fecha-flex {
        width: 100%;
    }
}

/* ============================================
   CARDS INSTANCIADAS · CUENTA Y ACTIVO
   ============================================ */

.card-cuenta .card-header,
.card-activo .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.card-cuenta .card-header .card-title,
.card-activo .card-header .card-title {
    margin-bottom: 0;
}

.card-cuenta .card-value,
.card-activo .card-value {
    font-size: clamp(22px, 2vw, 28px);
}

.card-cuenta .card-sub,
.card-activo .card-sub {
    margin-top: 10px;
    padding-top: 10px;
}

/* Barra de uso de la línea de crédito */
.card-uso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.card-uso-barra {
    flex: 1 1 auto;
    min-width: 0;
    height: 7px;
    overflow: hidden;
    border-radius: 40px;
    background: var(--background);
}

.card-uso-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--positive);
    transition: width 0.3s ease;
}

/* El ancho de la barra de uso se aplica vía variable CSS. */
.card-uso-barra .barra-progreso {
    width: var(--barra-ancho, 0%);
}

.card-uso-barra span.aviso {
    background: var(--ambar);
}

.card-uso-barra span.critico {
    background: var(--negative);
}

.card-uso-pct {
    flex-shrink: 0;
    color: var(--textSecondary);
    font-family: var(--font-secondary);
    font-size: 11px;
    font-weight: 600;
}

.card-uso-pct.aviso {
    color: var(--ambar);
}

.card-uso-pct.critico {
    color: var(--negative);
}

/* Pares etiqueta/valor al pie de la card */
.card-datos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.card-dato {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.card-dato-label {
    flex-shrink: 0;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.card-dato-valor {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-secondary);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ============================================
   SELECTOR DE CARDS · BLOQUES DINÁMICOS
   ============================================ */

.dashboard-editor-bloque {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.dashboard-editor-titulo {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-card-opcion > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    font-size: 13px;
}

.dashboard-card-opcion small {
    overflow: hidden;
    color: var(--textSecondary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}