/*
 * Cuotas (/gestion/cuotas): lo urgente arriba (devoluciones por hacer y
 * recibos devueltos), tres pestañas (cobros, cuentas de los socios y
 * ajustes) y cada cobro con sus pasos y sus recibos (docs/cuotas.md).
 *
 * Solo la carga plantillas/gestion/cuotas.php, después de panel.css y
 * gestion.css (de ahí salen las pestañas, las tarjetas, la tabla, la franja
 * de cifras .franja-cifras, el interruptor .ajuste, las opciones grandes
 * .eleccion, las ventanas .dialogo--formulario, los botones de fila
 * .boton-icono-fila y los avisos; de base.css, la casilla de un importe con
 * su € dentro, .campo-unidad). Las piezas van en el orden en que salen:
 *
 *   1. La pantalla y lo urgente de arriba
 *   2. Los recibos devueltos por el banco
 *   3. Las franjas de cifras y la barra de cobrado
 *   4. Cobros: cómo va el año y la lista de cobros
 *   5. Cuentas de los socios
 *   6. Ajustes: plazos, importes, el banco y los socios
 *   7. Un cobro: los pasos y qué toca ahora
 *   8. Un cobro: lo cobrado y cada recibo
 *   9. Las ventanas
 *  10. Móvil
 *
 * Convenciones:
 * - Verde para lo cobrado o hecho, ámbar para lo que falta y rojo para lo
 *   devuelto; azul para el paso en el que se está.
 * - Los importes, alineados a la derecha y con cifras de igual ancho.
 */

/* #region 1. La pantalla y lo urgente de arriba */

.cuotas,
.cuotas-panel,
.cuotas-panel > .pestanas__panel:not([hidden]) {
    display: grid;
    gap: var(--espacio-5);
}

.cuotas-panel > .pestanas__panel:not([hidden]) {
    gap: var(--espacio-4);
}

/* En las rejillas, el hueco lo pone su gap: sin márgenes propios que lo dupliquen. */
.cuotas > .aviso,
.cuotas-anio > .aviso,
.cuotas-panel > .pestanas__panel > .aviso,
.cuotas-panel .pestanas,
.cuotas-panel .tarjeta,
.cuotas-panel .tarjeta__cabecera {
    margin: 0;
}

.cuotas-panel .tarjeta__cabecera {
    margin-bottom: var(--espacio-4);
}

.cuotas .aviso .enlace-flecha {
    min-height: 0;
    margin-left: var(--espacio-1);
}

/* Explicación corta de una pestaña, encima de su contenido. */
.cuotas-ayuda-pestana {
    max-width: var(--ancho-lectura);
    margin: 0;
}
/* #endregion */

/* #region 2. Los recibos devueltos por el banco */

/* Lo más urgente: la raya roja a la izquierda y su icono; cada fila lleva a resolverlo. */
.cuotas-devueltos {
    display: grid;
    gap: var(--espacio-3);
}

/*
 * La raya, dibujada aparte: un border-left lo pisa el canto de cristal de la
 * tarjeta del panel (gestion.css), que además ya es position: relative.
 */
.app-panel .contenido-gestion .cuotas-devueltos::before {
    content: "";
    position: absolute;
    inset: var(--espacio-4) auto var(--espacio-4) -1px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--rs-peligro);
}

.cuotas-devueltos__cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
}

.cuotas-devueltos__cabecera h2 {
    margin: 0;
    font-size: var(--texto-grande);
}

.cuotas-devueltos__cabecera .ayuda-campo {
    margin: var(--espacio-1) 0 0;
}

.cuotas-devueltos__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rs-peligro) 14%, transparent);
    color: var(--rs-peligro-texto);
}

.cuotas-devueltos__lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cuotas-devuelto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 6.5rem auto;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-sm);
    transition: background-color var(--duracion-hover) var(--curva);
}

.cuotas-devuelto:hover {
    background: var(--rs-hover-fila);
}

.cuotas-devuelto__quien {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cuotas-devuelto__quien a {
    color: var(--rs-texto);
    font-weight: 600;
    text-decoration: none;
}

.cuotas-devuelto:hover .cuotas-devuelto__quien a {
    color: var(--marca-acento);
}

.cuotas-devuelto__quien span {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* Columna fija para el importe y para «Resolver»: sin motivo, la suya se queda vacía y nada se corre. */
.cuotas-devuelto__importe {
    grid-column: 3;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cuotas-devuelto__ir {
    grid-column: 4;
    min-height: 0;
    font-size: var(--texto-etiqueta);
}

.cuotas-devueltos > .boton {
    justify-self: start;
}
/* #endregion */

/* #region 3. Las franjas de cifras y la barra de cobrado */

/* Arriba siempre, aunque al lado otra lleve una línea más. */
.cuotas-franja .franja-cifra {
    align-content: start;
}

/* Debajo de cada cifra, a veces, un detalle pequeño (el importe, de cuánto). */
.cuotas-franja .franja-cifra small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-variant-numeric: tabular-nums;
}

a.franja-cifra {
    text-decoration: none;
}

/* La barra de cobrado, por cobrar y devuelto, en proporción. */
.cuotas-barra {
    display: flex;
    gap: 2px;
    height: 0.5rem;
    border-radius: var(--radio-pildora);
    overflow: hidden;
    background: var(--rs-superficie-3);
}

.cuotas-barra:empty {
    display: none;
}

.cuotas-barra__parte--cobrado {
    background: var(--rs-exito);
}

.cuotas-barra__parte--pendiente {
    background: var(--rs-aviso);
}

.cuotas-barra__parte--devuelto {
    background: var(--rs-peligro);
}

.cuotas-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-5);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.cuotas-leyenda:empty {
    display: none;
}

.cuotas-leyenda li {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.cuotas-leyenda strong {
    color: var(--rs-texto);
    font-variant-numeric: tabular-nums;
}

.cuotas-leyenda__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cuotas-leyenda__punto--cobrado {
    background: var(--rs-exito);
}

.cuotas-leyenda__punto--pendiente {
    background: var(--rs-aviso);
}

.cuotas-leyenda__punto--devuelto {
    background: var(--rs-peligro);
}
/* #endregion */

/* #region 4. Cobros: cómo va el año y la lista de cobros */

.cuotas-anio {
    display: grid;
    gap: var(--espacio-3);
}

/* El título, el año a su lado y «Ver más en Estadísticas» a la derecha. */
.cuotas-anio__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}

.cuotas-anio__cabecera h2 {
    margin: 0;
    font-size: var(--texto-grande);
}

.cuotas-anio__elegir {
    margin: 0;
}

.cuotas-anio__elegir select {
    min-height: 34px;
    padding-block: 0;
    font-weight: 600;
}

.cuotas-anio__mas {
    margin-left: auto;
    min-height: 0;
    font-size: var(--texto-etiqueta);
}

.cuotas-anio__vacio {
    padding: var(--espacio-6) var(--espacio-4);
    border: 1px dashed var(--rs-borde);
    border-radius: var(--radio-lg);
}

/* Por tipo de socio: plegado, se abre si hace falta. */
.cuotas-desglose > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 36px;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.cuotas-desglose > summary::-webkit-details-marker {
    display: none;
}

.cuotas-desglose > summary:hover {
    color: var(--marca-acento);
}

.cuotas-desglose > summary:focus-visible {
    outline: none;
    border-radius: var(--radio-sm);
    box-shadow: var(--anillo-foco);
}

.cuotas-desglose > summary .icono {
    width: 16px;
    height: 16px;
    transition: rotate var(--duracion-hover) var(--curva);
}

.cuotas-desglose[open] > summary .icono {
    rotate: 90deg;
}

.cuotas-desglose .tabla-desplazable {
    margin: var(--espacio-2) 0 0;
    padding: 0;
}

/* Tablas compactas (por tipo, la hoja subida): filas bajas. */
.cuotas-tabla-compacta td,
.cuotas-tabla-compacta th {
    padding-block: var(--espacio-2);
}

/* Números e importes: a la derecha y con cifras del mismo ancho. */
.cuotas .cuotas-numero,
.dialogo .cuotas-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Cada cobro: su concepto y, debajo, el día del cargo. */
.cuotas-cobros__concepto {
    display: block;
    color: var(--rs-texto);
    font-weight: 600;
    text-decoration: none;
}

.fila-enlazada:hover .cuotas-cobros__concepto {
    color: var(--marca-acento);
}

.cuotas-cobros__fecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

.cuotas-cobros__fecha .icono {
    width: 13px;
    height: 13px;
}

/* Lo cobrado de cada cobro, con su barrita. */
.cuotas-avance {
    display: grid;
    gap: 6px;
    min-width: 9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cuotas-avance__barra {
    display: block;
    height: 4px;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
    overflow: hidden;
}

.cuotas-avance__barra i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--rs-exito);
}

.cuotas-faltan {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}

.cuotas-al-dia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rs-exito-texto);
    font-weight: 500;
}

.cuotas-al-dia .icono {
    width: 14px;
    height: 14px;
}
/* Las cuotas de un socio (turno 2 de pruebas): buscar por nombre o número y, en su ventana, sus recibos de todos los cobros. */
.cuotas-buscar-socio h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-grande);
}

.cuotas-buscar-socio .campo {
    max-width: 32rem;
    margin: 0;
}

.cuotas-buscar-socio__resultados {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin: var(--espacio-2) 0 0;
    padding: 0;
    list-style: none;
}

.cuotas-buscar-socio__resultados:empty {
    display: none;
}

.cuotas-socio-recibos {
    display: grid;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-4);
    padding: 0;
    list-style: none;
}

.cuotas-socio-recibo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-3);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
}

.cuotas-socio-recibo--falta {
    border-color: color-mix(in srgb, var(--rs-aviso) 40%, transparent);
    background: var(--rs-aviso-suave);
}

.cuotas-socio-recibo__que {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.cuotas-socio-recibo__importe {
    font-variant-numeric: tabular-nums;
}

.cuotas-socio-recibo .enlace-flecha {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: var(--texto-etiqueta);
}

.cuotas-persona__nombre {
    text-align: left;
}

/* #endregion */

/* #region 5. Cuentas de los socios */

/* Encima de la tabla: el buscador a la izquierda y los botones a la derecha. */
.cuotas-barra-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.cuotas-barra-herramientas__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.cuotas-buscar {
    flex: 1 1 16rem;
    max-width: 24rem;
    margin: 0;
}

/* El nombre de un socio y, a su lado, su número en pequeño. */
.cuotas-persona {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--espacio-2);
    font-weight: 600;
}

.cuotas-persona small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.cuotas-iban {
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.cuotas-cuentas td:nth-child(4) {
    white-space: nowrap;
}

/* Los socios sin cuenta: para quien gestiona, cada nombre es un botón que abre su cuenta para ponerla. */
.cuotas-personas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Quien solo mira: los nombres en columnas de texto, sin nada que parezca un botón. */
.cuotas-personas--lectura {
    display: block;
    columns: 14rem;
    column-gap: var(--espacio-6);
    color: var(--rs-texto-secundario);
}

.cuotas-personas--lectura li {
    padding-block: var(--espacio-1);
    break-inside: avoid;
}

/* Con un toque del color de la asociación ya en reposo: se ve que se puede tocar. */
.cuotas-persona-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 36px;
    padding: 0 var(--espacio-3);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 35%, var(--rs-borde));
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.cuotas-persona-chip .icono {
    width: 14px;
    height: 14px;
    color: var(--marca-acento);
}

.cuotas-persona-chip:hover {
    border-color: color-mix(in srgb, var(--marca-acento) 50%, var(--rs-borde));
    background: color-mix(in srgb, var(--marca-acento) 8%, var(--rs-superficie-1));
    color: var(--marca-acento);
}

.cuotas-persona-chip:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

#sin-cuenta-mas {
    margin: var(--espacio-4) 0 0;
}
/* Subir una hoja con cuentas: la plantilla en blanco, a la vista antes de elegir el fichero (turno 2 de pruebas). */
.cuotas-plantilla {
    display: grid;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.cuotas-plantilla p {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0;
}

.cuotas-plantilla p .icono {
    flex: none;
    margin-top: 0.15rem;
}

.cuotas-plantilla__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* #endregion */

/* #region 6. Ajustes: plazos, importes, el banco y los socios */

.cuotas-ajustes {
    display: grid;
    gap: var(--espacio-4);
}

.cuotas-ajustes .tarjeta > h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-1);
    font-size: var(--texto-grande);
}

.cuotas-ajustes .tarjeta > h2 .icono {
    width: 18px;
    height: 18px;
    color: var(--rs-texto-tenue);
}

.cuotas-ajustes .tarjeta > .ayuda-campo {
    max-width: var(--ancho-lectura);
    margin: 0 0 var(--espacio-4);
}

/* Cada plazo, una fila: su número, «Se cobra el día [15] de [febrero]», «Cada año, el 15 de febrero» y quitarlo. */
.cuotas-plazos {
    display: grid;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-4);
    padding: 0;
    list-style: none;
}

.cuotas-plazos:empty {
    display: none;
}

.cuotas-plazo {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3) var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.cuotas-plazo__numero {
    font-weight: 600;
}

.cuotas-plazo__fecha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cuotas-plazo__fecha select {
    width: auto;
    min-width: 8rem;
}

.cuotas-plazo__fecha .cuotas-plazo__dia {
    min-width: 4.5rem;
}

.cuotas-plazo__vista {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-width: 0;
    margin: 0;
    color: var(--rs-texto-secundario);
    font-weight: 600;
}

.cuotas-plazo__vista .icono {
    flex: none;
    width: 16px;
    height: 16px;
}

#plazos-vacio {
    padding: var(--espacio-5) var(--espacio-4);
}

/* Lo que paga cada tipo: el importe en su casilla con el € dentro (.campo-unidad) y el total del año, a la derecha. */
.cuotas-importes th small {
    display: block;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.cuotas-total-anio {
    font-weight: 600;
}

.cuotas-no-paga {
    color: var(--rs-texto-tenue);
    font-weight: 400;
}

/* La tabla de lo que paga cada tipo necesita su sitio: a lo ancho hasta que todos sus plazos caben en media pantalla. */
@media (max-width: 1699px) {
    .ajustes-rejilla .cuotas-tarifas {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

#tarifas-sin-tipos {
    padding: var(--espacio-5) var(--espacio-4);
}

/* Los datos del banco, en dos columnas si caben. */
.cuotas-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--espacio-4) var(--espacio-5);
}

.cuotas-campos .campo {
    margin: 0;
}

.cuotas-preaviso {
    max-width: 22rem;
    margin: var(--espacio-3) 0 var(--espacio-4);
}

.cuotas-ajustes .cuotas-preaviso > input[type="number"] {
    max-width: 8rem;
}

.cuotas-enlace-avisos {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: var(--espacio-4) 0 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.cuotas-enlace-avisos .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

/* Guardar, al final; con algo cambiado, flota abajo para tenerlo siempre a mano. */
.cuotas-ajustes__pie {
    display: grid;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
}

.cuotas-ajustes__pie--cambios {
    position: sticky;
    bottom: var(--espacio-3);
    z-index: 2;
    box-shadow: var(--sombra-md);
}

.cuotas-ajustes__pie .aviso,
.cuotas-ajustes__pie .formulario-acciones {
    margin: 0;
}
/* #endregion */

/* #region 7. Un cobro: los pasos y qué toca ahora */

.cuotas-cobro-subtitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.cuotas-cobro-subtitulo .icono {
    width: 16px;
    height: 16px;
}

.cuotas-progreso {
    display: grid;
    gap: var(--espacio-5);
}

.cuotas-progreso > .aviso {
    margin: 0;
}

/* Los cuatro pasos, unidos por una línea: hechos en verde, el de ahora en azul. */
.cuotas-pasos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.cuotas-paso {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
    text-align: center;
}

.cuotas-paso + .cuotas-paso::before {
    content: "";
    position: absolute;
    top: 15px;
    right: calc(50% + 22px);
    left: calc(-50% + 22px);
    height: 2px;
    border-radius: 1px;
    background: var(--rs-borde);
}

.cuotas-paso__marca {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--rs-borde);
    border-radius: 50%;
    background: var(--rs-superficie-1);
    font-variant-numeric: tabular-nums;
}

.cuotas-paso__marca .icono {
    display: none;
    width: 16px;
    height: 16px;
}

.cuotas-paso--hecho {
    color: var(--rs-texto-secundario);
}

.cuotas-paso--hecho .cuotas-paso__marca {
    border-color: var(--rs-exito);
    background: var(--rs-exito);
    color: var(--rs-texto-sobre-color);
}

.cuotas-paso--hecho .cuotas-paso__numero {
    display: none;
}

.cuotas-paso--hecho .cuotas-paso__marca .icono:first-of-type {
    display: block;
}

.cuotas-paso--hecho + .cuotas-paso::before {
    background: var(--rs-exito);
}

.cuotas-paso--actual {
    color: var(--rs-texto);
    font-weight: 700;
}

.cuotas-paso--actual .cuotas-paso__marca {
    border-color: var(--rs-azul);
    background: var(--rs-azul);
    color: var(--rs-texto-sobre-color);
    box-shadow: 0 0 0 4px var(--rs-azul-suave);
}

/*
 * En espera (turno 2 de pruebas, 10 nov 2026: «se queda en rojo cerrar y da la
 * impresión de que queda algo por hacer»): cuando solo toca esperar al día del
 * cargo, el paso no lleva el color de la asociación (que puede ser rojo y
 * parecer un fallo), sino ámbar suave con un reloj: «aún no, pero ya llegará».
 */
.cuotas-paso--espera {
    color: var(--rs-texto-secundario);
    font-weight: 600;
}

.cuotas-paso--espera .cuotas-paso__marca {
    border-style: dashed;
    border-color: var(--rs-aviso);
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

.cuotas-paso--espera .cuotas-paso__numero {
    display: none;
}

.cuotas-paso--espera .cuotas-paso__marca .icono:last-of-type {
    display: block;
}

.cuotas-ahora[data-toca="esperar"] .cuotas-ahora__icono {
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

/* Qué toca ahora: su icono, una frase y la explicación. */
.cuotas-ahora {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-4);
    padding-top: var(--espacio-5);
    border-top: 1px solid var(--rs-borde-sutil);
}

.cuotas-ahora__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--rs-azul-suave);
    color: var(--rs-azul-texto);
}

.cuotas-ahora[data-toca="cerrado"] .cuotas-ahora__icono {
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-exito-texto);
}

.cuotas-ahora__textos {
    display: grid;
    gap: var(--espacio-1);
    min-width: 0;
    max-width: var(--ancho-lectura);
}

.cuotas-ahora__textos h2 {
    margin: 0;
    font-size: var(--texto-grande);
}

.cuotas-ahora__textos p {
    margin: 0;
    color: var(--rs-texto-secundario);
}

.cuotas-ahora__textos .aviso {
    margin-top: var(--espacio-2);
    color: var(--rs-texto);
}

/* «¿Algo mal?»: cómo se corrige en este paso, en pequeño y sin alarmar. */
.cuotas-ahora__textos .cuotas-ahora__corregir {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin-top: var(--espacio-1);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

.cuotas-ahora__corregir .icono {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 0.1rem;
}

/* Sus botones, bajo la explicación (alineados con su texto). */
.cuotas-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-top: calc(-1 * var(--espacio-2));
    padding-left: calc(2.5rem + var(--espacio-4));
}
/* #endregion */

/* #region 8. Un cobro: lo cobrado y cada recibo */

.cuotas-cobrado {
    display: grid;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.cuotas-cobrado__linea {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espacio-1) var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
}

.cuotas-cobrado__linea strong {
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cuotas-cobrado__falta {
    margin-left: auto;
    color: var(--rs-aviso-texto);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cuotas-cobrado__falta.cuotas-al-dia {
    color: var(--rs-exito-texto);
}

#recibos-filtros {
    margin-bottom: var(--espacio-4);
}

#recibos-filtros + .cuotas-buscar {
    margin-bottom: var(--espacio-4);
}

.cuotas-pagador,
.cuotas-detalle {
    display: block;
    margin-top: 2px;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}

.cuotas-en-mano {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-texto-secundario);
    white-space: nowrap;
}

.cuotas-en-mano .icono {
    width: 14px;
    height: 14px;
    color: var(--rs-texto-tenue);
}

.cuotas-recibos td:first-child {
    min-width: 11rem;
}

/* Lo que se hace con cada recibo, en una línea a la derecha; lo demás tras «⋯». */
.cuotas-recibos .tabla-eventos__acciones > * + * {
    margin-inline-start: var(--espacio-2);
}

.cuotas-recibos .tabla-eventos__acciones > * {
    vertical-align: middle;
}

.cuotas-mas {
    display: inline-block;
}

.cuotas-mas[open] > summary {
    border-color: var(--rs-borde);
    background: var(--rs-hover);
}

/*
 * El menú, fuera del recorte de la tabla (que se desliza de lado si no cabe):
 * cuotas.js lo coloca pegado a su botón y lo mueve con la página.
 */
.cuotas-mas .menu-desplegable__panel {
    position: fixed;
    min-width: 15rem;
    text-align: left;
}

.cuotas .aviso-exito[role="status"] {
    margin: 0 0 var(--espacio-4);
}

.cuotas-progreso > .aviso-exito[role="status"] {
    margin: 0;
}
/* #endregion */

/* #region 9. Las ventanas */

.cuotas-ventana-campos {
    display: grid;
    gap: var(--espacio-4);
}

.cuotas-ventana-campos .aviso {
    margin: 0;
}

.cuotas-formas-pago {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#importar-tabla {
    margin-top: var(--espacio-2);
}
/* #endregion */

/* #region 10. Móvil */

@media (max-width: 767px) {
    .cuotas-anio__mas {
        width: 100%;
        margin-left: 0;
    }

    /* «12.345,00 € de 45.678,00 €» parte de línea en vez de salirse de la ficha. */
    .cuotas-avance {
        min-width: 0;
        white-space: normal;
    }

    .cuotas-devuelto {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--espacio-1) var(--espacio-3);
        padding-inline: 0;
    }

    /* El importe, siempre arriba a la derecha, haya motivo o no. */
    .cuotas-devuelto__importe {
        grid-area: 1 / 2;
    }

    /* Un motivo largo («Sin autorización de domiciliación») baja de línea en vez de pisar «Resolver». */
    .cuotas-devuelto__motivo {
        grid-row: 2;
        justify-self: start;
        white-space: normal;
    }

    .cuotas-devuelto__ir {
        grid-row: 2;
        grid-column: 2;
        justify-self: end;
    }

    .cuotas-pasos {
        font-size: var(--texto-pequeno);
    }

    .cuotas-paso + .cuotas-paso::before {
        right: calc(50% + 20px);
        left: calc(-50% + 20px);
    }

    .cuotas-ahora {
        gap: var(--espacio-3);
    }

    .cuotas-acciones {
        padding-left: 0;
        margin-top: 0;
    }

    .cuotas-acciones .boton {
        flex: 1 1 100%;
    }

    .cuotas-cobrado__falta {
        width: 100%;
        margin-left: 0;
    }

    .cuotas-buscar {
        max-width: none;
    }

    .cuotas-barra-herramientas__acciones,
    .cuotas-barra-herramientas__acciones .boton {
        flex: 1 1 auto;
    }

    .cuotas-plazo {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--espacio-3);
    }

    .cuotas-plazo__fecha,
    .cuotas-plazo__vista {
        grid-column: 1 / -1;
    }

    .cuotas-plazo .boton-icono-fila {
        grid-row: 1;
        grid-column: 2;
    }

    /* Lo que paga cada tipo: su nombre y, debajo, sus plazos de tres en tres, con el total al final. */
    .tabla-eventos.cuotas-importes tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
        gap: var(--espacio-2) var(--espacio-3);
    }

    .tabla-eventos.cuotas-importes td:first-child,
    .tabla-eventos.cuotas-importes td.cuotas-total-anio {
        grid-column: 1 / -1;
    }

    .tabla-eventos.cuotas-importes td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones) {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .tabla-eventos.cuotas-importes td.cuotas-total-anio[data-etiqueta] {
        grid-template-columns: auto minmax(0, 1fr);
        text-align: right !important;
    }

    .cuotas-importes .campo-unidad,
    .cuotas-importes .campo-unidad input {
        width: 100%;
    }

    .cuotas-formas-pago {
        grid-template-columns: minmax(0, 1fr);
    }

    .cuotas .cuotas-numero {
        text-align: left;
    }

    /*
     * Cada recibo, una ficha: quién y cuánto; su tipo y su cuenta; su estado;
     * y, si hay algo que hacer, sus botones en su propia línea (al lado del
     * estado se pisaban). Sin el nombre de cada dato delante (se entiende
     * solo), para que la lista no sea eterna.
     */
    .tabla-eventos.cuotas-recibos tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--espacio-1) var(--espacio-3);
        padding: var(--espacio-3) 0;
    }

    .tabla-eventos.cuotas-recibos td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones) {
        display: block;
    }

    .tabla-eventos.cuotas-recibos td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones)::before {
        content: none;
    }

    .tabla-eventos.cuotas-recibos td {
        padding: 0;
    }

    .cuotas-recibos td:nth-child(1) {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .cuotas-recibos td:nth-child(4) {
        grid-area: 1 / 2;
        font-weight: 600;
        text-align: right !important;
    }

    .cuotas-recibos td:nth-child(2) {
        grid-area: 2 / 1;
        color: var(--rs-texto-secundario);
        font-size: var(--texto-etiqueta);
    }

    .cuotas-recibos td:nth-child(3) {
        grid-area: 2 / 2;
        justify-self: end;
        font-size: var(--texto-etiqueta);
    }

    .cuotas-recibos td:nth-child(5) {
        grid-area: 3 / 1 / 4 / 3;
    }

    /* Qué hacer, a la derecha y en su propia línea. Sin botones, la celda no sale (base.css). */
    .tabla-eventos.cuotas-recibos .tabla-eventos__acciones,
    .tabla-eventos.cuotas-cuentas .tabla-eventos__acciones {
        grid-area: 4 / 1 / 5 / 3;
        justify-content: flex-end;
        align-items: center;
        padding-top: 0 !important;
    }

    /* En una cuenta, sus dos iconos sí caben a la derecha de «Quién la dio» (ocupan la fila entera para no estrecharlo). */
    .tabla-eventos.cuotas-cuentas .tabla-eventos__acciones {
        grid-area: 3 / 1 / 4 / 3;
    }

    /* Cada cuenta, igual: quién y su cuenta; el titular y desde cuándo; quién la dio y cambiarla o quitarla. */
    .tabla-eventos.cuotas-cuentas tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--espacio-1) var(--espacio-3);
        padding: var(--espacio-3) 0;
    }

    .tabla-eventos.cuotas-cuentas td,
    .tabla-eventos.cuotas-cuentas td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones) {
        display: block;
        padding: 0;
        color: var(--rs-texto-secundario);
        font-size: var(--texto-etiqueta);
    }

    .tabla-eventos.cuotas-cuentas td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones)::before {
        content: none;
    }

    /* El titular sí lleva su nombre delante: puede no ser el socio. */
    .tabla-eventos.cuotas-cuentas td:nth-child(2)[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones)::before {
        content: attr(data-etiqueta) ": ";
        color: var(--rs-texto-tenue);
    }

    .cuotas-cuentas td:nth-child(1) {
        grid-area: 1 / 1;
        min-width: 0;
        color: var(--rs-texto);
        font-size: var(--texto-base);
    }

    .cuotas-cuentas td:nth-child(3) {
        grid-area: 1 / 2;
        justify-self: end;
    }

    .cuotas-cuentas td:nth-child(2) {
        grid-area: 2 / 1;
    }

    .cuotas-cuentas td:nth-child(4) {
        grid-area: 2 / 2;
        justify-self: end;
    }

    .cuotas-cuentas td:nth-child(5) {
        grid-area: 3 / 1;
    }
}
/* #endregion */

/* #region Con el montepío y años de cargo (migración 0217) */
.cuotas-desglose-cobro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-4);
    margin: var(--espacio-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.cuotas-desglose-cobro li {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
}

.cuotas-desglose-cobro span {
    color: var(--rs-texto-secundario);
}

.cuotas-montepio {
    color: var(--rs-exito);
}

.cuotas-suplementos {
    display: grid;
    gap: var(--espacio-3);
}

.cuotas-suplemento {
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
}

.cuotas-suplemento__cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-2);
}

.cuotas-suplemento__cabecera h3 {
    margin: 0;
}

.cuotas-suplemento__cabecera p {
    margin: 2px 0 0;
}

.cuotas-suplemento__acciones {
    display: flex;
    gap: var(--espacio-1);
    align-items: center;
}

.cuotas-suplemento-importes,
.cuotas-suplemento-tipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--espacio-2);
}

/* En qué plazos se cobra (migración 0350): lo de cada opción, metido bajo ella, y cómo queda el 1.er año. */
.cuotas-suplemento-reparto__detalle {
    margin: 0 0 var(--espacio-2) 1.75rem;
}

.cuotas-suplemento-reparto__detalle select {
    width: auto;
    min-width: 10rem;
}

/* «Lo que tú pongas en cada plazo» (migración 0363): la tabla año × plazo, con el total del año al final. */
.cuotas-suplemento-a-medida .campo-unidad input {
    width: 6.5rem;
    text-align: right;
}

.cuotas-suplemento-casillas th[scope="row"] {
    white-space: nowrap;
    font-weight: 600;
}

.cuotas-suplemento-reparto__vista {
    margin: var(--espacio-2) 0 0;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-2);
    color: var(--rs-texto-secundario);
}

.cuotas-suplemento-reparto__vista:empty {
    display: none;
}

.cuotas-suplemento-exentos,
.cuotas-suplemento-sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    margin: var(--espacio-1) 0;
    padding: 0;
    list-style: none;
}

.cuotas-suplemento-exentos li {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    padding: 2px var(--espacio-2);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-sm);
}
/* #endregion */

/* #region Lo que hace sola la plataforma y lo que ha visto el banco (migración 0239) */

/* Lo visto en el banco: la raya y el icono en azul (no es un fallo, es algo que confirmar). */
.app-panel .contenido-gestion .cuotas-banco::before {
    background: var(--rs-azul);
}

.cuotas-banco__icono {
    background: var(--rs-azul-suave-fuerte);
    color: var(--rs-azul-texto);
}

/* Quién y de qué cobro · qué ha visto (etiqueta) · importe · Confirmar y «No es esto». */
.cuotas-banco-propuesta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 6.5rem auto;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.cuotas-banco-propuesta__quien {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cuotas-banco-propuesta__quien strong {
    font-weight: 600;
}

.cuotas-banco-propuesta__quien span,
.cuotas-banco-propuesta__quien small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* El texto del banco tal cual, recortado: en qué se ha basado (en la letra de siempre, no de máquina). */
.cuotas-banco-propuesta__quien small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuotas-banco-propuesta__importe {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cuotas-banco-propuesta__acciones {
    display: flex;
    gap: var(--espacio-2);
}

.cuotas-cobros__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* «Tu banco: Banco Sabadell (BSABESBB)», debajo de los datos del banco. */
.cuotas-banco-reconocido {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

@media (max-width: 767px) {
    .cuotas-banco-propuesta {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--espacio-2) var(--espacio-3);
    }

    /* Nombre e importe arriba; lo que ha visto el banco y los botones, a lo ancho debajo. */
    .cuotas-banco-propuesta__quien {
        grid-column: 1;
        grid-row: 1;
    }

    .cuotas-banco-propuesta__importe {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .cuotas-banco-propuesta__etiquetas,
    .cuotas-banco-propuesta__acciones {
        grid-column: 1 / -1;
    }

    .cuotas-banco-propuesta__acciones .boton {
        flex: 1;
    }
}
/* #endregion */