/* Las piezas de las pantallas del socio (socio/filas-lista.js): las filas con su línea fina, como las de un banco, y la cifra en grande. */

/* #region Una lista agrupada y su título */
.lista-agrupada__titulo {
    margin: 0 0 var(--espacio-3);
    font-family: var(--fuente-display);
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

/* Sin caja: unas líneas finas ordenan (5 nov 2026, «demasiado IA»). */
.lista-agrupada {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    border-bottom: 1px solid var(--rs-borde-sutil);
    list-style: none;
}

.lista-agrupada[hidden],
.lista-agrupada:empty {
    display: none;
}
/* #endregion */

/* #region Cada fila */
.fila-lista {
    --tono: var(--marca-acento);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 56px;
    padding: var(--espacio-3) 0;
    border: 0;
    background: none;
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    text-decoration: none;
    transition: background-color var(--duracion-hover) var(--curva);
}

button.fila-lista {
    width: 100%;
    cursor: pointer;
}

.fila-lista + .fila-lista {
    border-top: 1px solid var(--rs-borde-sutil);
}

.fila-lista:hover {
    color: var(--rs-texto);
    text-decoration: none;
}

.fila-lista:hover .fila-lista__titulo {
    color: var(--marca-acento);
}

.fila-lista:focus-visible {
    outline: none;
    box-shadow: inset var(--anillo-foco);
}

.fila-lista[data-tono="0"] { --tono: var(--rs-texto-secundario); }
.fila-lista[data-tono="1"] { --tono: var(--tono-1); }
.fila-lista[data-tono="2"] { --tono: var(--tono-2); }
.fila-lista[data-tono="3"] { --tono: var(--tono-3); }
.fila-lista[data-tono="4"] { --tono: var(--tono-4); }
.fila-lista[data-tono="5"] { --tono: var(--tono-5); }
.fila-lista[data-tono="6"] { --tono: var(--tono-6); }
.fila-lista[data-tono="peligro"] { --tono: var(--rs-peligro); }
.fila-lista[data-tono="aviso"] { --tono: var(--rs-aviso); }

.fila-lista__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    color: var(--tono);
}

.fila-lista__icono .icono {
    width: 22px;
    height: 22px;
}

.fila-lista__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.fila-lista__titulo {
    font-size: var(--texto-base);
    font-weight: 600;
    line-height: 1.3;
    transition: color var(--duracion-hover) var(--curva);
}

/* Dos líneas como mucho: lo demás está dentro. */
.fila-lista__detalle {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Sin cortar: lo que dice un aviso se lee entero. */
.fila-lista__detalle--entero {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
}

.fila-lista--peligro .fila-lista__detalle,
.fila-lista--peligro .fila-lista__cifra {
    color: var(--rs-peligro-texto);
}

.fila-lista--urgente .fila-lista__detalle,
.fila-lista--aviso .fila-lista__detalle {
    color: var(--rs-aviso-texto);
}

.fila-lista--exito .fila-lista__detalle {
    color: var(--rs-exito-texto);
}

.fila-lista__cifra {
    flex: none;
    font-family: var(--fuente-display);
    font-size: var(--texto-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fila-lista__cifra--entra {
    color: var(--rs-exito-texto);
}

.fila-lista__contador {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radio-pildora);
    background: var(--rs-peligro-solido);
    color: #FFFFFF;
    font-size: var(--texto-pequeno);
    font-weight: 700;
}

.fila-lista__flecha {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--rs-texto-tenue);
}
/* #endregion */

/* #region La cifra en grande de una pantalla: el saldo, el próximo cargo */
.cifra-socio {
    display: grid;
    justify-items: start;
    gap: var(--espacio-2);
}

.cifra-socio[hidden] {
    display: none;
}

.cifra-socio > * {
    margin: 0;
}

.cifra-socio__rotulo {
    color: var(--rs-texto-secundario);
    font-family: inherit;
    font-size: var(--texto-base);
    font-weight: 500;
}

.cifra-socio__numero {
    font-family: var(--fuente-display);
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
    line-height: 1;
}

/* Los céntimos, más pequeños: se lee de un vistazo, como en la app de un banco. */
.cifra-socio__numero small {
    font-size: 0.45em;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.cifra-socio__dato {
    margin-top: var(--espacio-2);
    font-size: var(--texto-grande);
    font-weight: 600;
}

.cifra-socio__nota {
    color: var(--rs-texto-secundario);
    line-height: 1.45;
}

.cifra-socio__aviso {
    color: var(--rs-peligro-texto);
    font-weight: 600;
}

.cifra-socio__aviso[hidden] {
    display: none;
}

/* Si no debe nada, se le dice: también es una buena noticia. */
.al-dia-socio {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0;
    color: var(--rs-exito-texto);
    font-family: var(--fuente-display);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.al-dia-socio[hidden] {
    display: none;
}

.al-dia-socio .icono {
    flex: none;
    width: 1em;
    height: 1em;
}
/* #endregion */