/*
 * «Lo mío» (socio/lo-mio.js): lo de cada uno en un sitio. Arriba, lo que debe y lo que lleva guardado; debajo, tres
 * columnas. Tanto arriba como abajo, lo que no tiene una asociación no deja hueco: lo que queda se reparte el ancho.
 */

/* #region Lo primero: lo que debe y lo que lleva guardado */
.lo-mio__arriba {
    display: grid;
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-6);
}

.lo-mio-pendiente {
    display: grid;
    align-content: start;
    gap: var(--espacio-4);
    min-width: 0;
}

.lo-mio-pendiente[hidden],
.lo-mio-objetos[hidden] {
    display: none;
}

.lo-mio-objetos .objeto {
    min-height: 180px;
}

@media (min-width: 1100px) {
    .lo-mio__arriba {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: clamp(20px, 2.4vw, 40px);
    }

    /* El monedero y el montepío, cada uno en su columna, junto a lo que debe. */
    .lo-mio-objetos:not([hidden]) {
        display: contents;
    }

    .lo-mio-pendiente .cifra-socio__numero {
        font-size: clamp(3.4rem, 4.8vw, 5.4rem);
    }
}
/* #endregion */

/* #region Las columnas */
.lo-mio__columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: var(--espacio-6) clamp(20px, 2.4vw, 40px);
    align-items: start;
}

.lo-mio__columna {
    display: grid;
    align-content: start;
    gap: var(--espacio-5);
    min-width: 0;
}
/* #endregion */

/* #region El idioma */
.lo-mio-ajustes {
    display: grid;
    gap: var(--espacio-3);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.lo-mio-ajuste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-3);
    min-height: 44px;
    font-weight: 600;
}

/* #endregion */