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

.dashboard {
    --unidad-card: 148px;
    --gap-card: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-card);
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: start;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.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 .dashboard-card-edicion {
    display: flex;
}

.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.5;
}

/* 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 que marca en qué hueco caerá la card que se arrastra. Va como hermano
   dentro de la columna del masonry, con el ancho de la columna, para que se
   lea como "aquí" y no como un borde pegado a una card. Aparece con
   transición en vez de golpe seco. */
.dashboard-card-insercion {
    display: block;
    height: 3px;
    margin: 2px 0;
    border-radius: 999px;
    background: var(--positive);
    box-shadow: 0 0 10px var(--positive);
    pointer-events: none;
    opacity: 0;
    transform: scaleY(0.4);
    animation: insercion-entra 0.22s ease forwards;
}

@keyframes insercion-entra {
    to { opacity: 1; transform: scaleY(1); }
}

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 200px;
    width: 100%;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    min-width: 0;
    position: relative;
    margin-top: 8px;
    cursor: pointer;
}

.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;
}

.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;
}

.grafico-patrimonio-card canvas {
    width: 100% !important;
    height: 100% !important;
}

#app-content:has(.dashboard) {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 32px 40px;
    overflow-x: visible;
    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(--border);
    --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(--borderAlt);
    border-top: 1px solid var(--borderAlt);
}

.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: 1199px) and (min-width: 900px) {
    .dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 899px) and (min-width: 600px) {
    .dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .dashboard {
        grid-template-columns: 1fr;
        --gap-card: 16px;
    }

    #app-content:has(.dashboard) {
        padding: 32px 40px;
    }

    .dashboard .card {
        padding: 18px;
    }

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

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

@media (max-width: 520px) {
    .patrimonio-modal-stats {
        grid-template-columns: 1fr;
    }
}

@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;
}

/* 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;
}

.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;
}

/* 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;
}

.distribucion-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;
}

.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 {
    height: 7px;
    overflow: hidden;
    border-radius: 40px;
    background: var(--background);
}

.distribucion-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--neutral);
}

.distribucion-barra span.inversiones {
    background: var(--positive);
}

.distribucion-barra span.deudas {
    background: var(--negative);
}

/* 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.accion {
    background: var(--positive);
}

.distribucion-barra span.etf {
    background: var(--positiveAlt);
}

.distribucion-barra span.cripto {
    background: var(--ambar);
}

.distribucion-barra span.bono,
.distribucion-barra span.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.pen {
    background: var(--positive);
}

.distribucion-barra span.usd {
    background: var(--positiveAlt);
}

.distribucion-barra span.eur {
    background: var(--ambar);
}

.distribucion-barra span.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;
}

.favorito-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;
}

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

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

.favorito-nombre {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorito-simbolo {
    color: var(--textSecondary);
    font-size: 11px;
}

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

/* ============================================
   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;
}

.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;
}

/* --------------------------------------------
   COMPRIMIR / EXPANDIR
   -------------------------------------------- */
/* Estado normal (por defecto): la card ocupa su altura y muestra el resumen
   completo. Al comprimirla solo quedan los números en pequeño —el título que
   identifica la card, la cifra y el badge de estado—, que es lo que interesa
   de un vistazo al ordenar muchas cards. El masonry recalcula la altura al
   alternar, así que la card encoge de verdad y no deja un hueco. */

.card-header-controles {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.card-comprimir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    color: var(--textSecondary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.card-comprimir:hover {
    color: var(--text);
    background: var(--lightHover);
}

.card-comprimir svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

/* Comprimida: el chevron gira para apuntar hacia abajo (a "desplegar"). */
.dashboard .card.card-comprimida .card-comprimir svg {
    transform: rotate(180deg);
}

.dashboard .card.card-comprimida {
    min-height: 0;
    padding: 12px 14px;
    gap: 2px;
    justify-content: center;
}

.dashboard .card.card-comprimida .card-title {
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.4px;
}

.dashboard .card.card-comprimida .card-value {
    font-size: 15px;
    line-height: 1.3;
}

.dashboard .card.card-comprimida .badge {
    min-width: 0;
    padding: 1px 6px;
    font-size: 10px;
}

/* Lo que no cabe en una fila se oculta: subtítulo, barra de uso y desglose. */
.dashboard .card.card-comprimida .card-sub,
.dashboard .card.card-comprimida .card-uso,
.dashboard .card.card-comprimida .card-datos {
    display: none;
}

/* ============================================
   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;
}