/*
 * Lo que comparten los listados del panel: la barra de filtros, las descargas,
 * las tablas y las listas en líneas.
 */

/* #region Sus colores, en oscuro y en claro */
:root {
    --ayuda-info-texto: #FFFFFF;
    --ayuda-info-fondo: rgb(255 255 255 / 0.08);
    --burbuja-borde: rgb(255 255 255 / 0.1);
    --burbuja-fondo: rgb(20 23 29 / 0.97);
    --burbuja-sombra: 0 18px 40px rgb(0 0 0 / 0.5);
    --burbuja-texto: #D5DBE2;
    --tabla-cabeza-linea: rgb(255 255 255 / 0.07);
    --tabla-cabeza-texto: #7D8793;
    --tabla-linea: rgb(255 255 255 / 0.045);
    --tabla-texto: #C9D1DA;
    --tabla-dato: #F4F6F8;
    --tabla-fila-encima: linear-gradient(90deg, color-mix(in srgb, var(--marca-acento) 9%, transparent), rgb(255 255 255 / 0.018) 45%);
    --tabla-accion-borde: rgb(255 255 255 / 0.08);
    --tabla-accion-fondo: transparent;
    --tabla-accion-texto: #AEB7C2;
    --tabla-accion-fila-borde: rgb(255 255 255 / 0.16);
    --tabla-accion-fila-fondo: rgb(255 255 255 / 0.05);
    --tabla-accion-fila-texto: #FFFFFF;
    --tabla-accion-encima-borde: color-mix(in srgb, var(--marca-acento) 55%, transparent);
    --fila-boton-encima: rgb(255 255 255 / 0.05);
}

:root[data-theme="light"] {
    --ayuda-info-texto: var(--rs-texto);
    --ayuda-info-fondo: rgb(16 20 26 / 0.06);
    --burbuja-borde: rgb(16 20 26 / 0.1);
    --burbuja-fondo: #FFFFFF;
    --burbuja-sombra: 0 18px 40px rgb(16 20 26 / 0.14);
    --burbuja-texto: var(--rs-texto-secundario);
    --tabla-cabeza-linea: rgb(16 20 26 / 0.09);
    --tabla-cabeza-texto: var(--rs-texto-tenue);
    --tabla-linea: rgb(16 20 26 / 0.06);
    --tabla-texto: var(--rs-texto-secundario);
    --tabla-dato: var(--rs-texto);
    --tabla-fila-encima: linear-gradient(90deg, color-mix(in srgb, var(--marca-boton) 6%, transparent), rgb(16 20 26 / 0.015) 45%);
    --tabla-accion-borde: rgb(16 20 26 / 0.12);
    --tabla-accion-fondo: #FFFFFF;
    --tabla-accion-texto: var(--rs-texto-secundario);
    --tabla-accion-fila-borde: color-mix(in srgb, var(--marca-boton) 45%, rgb(16 20 26 / 0.12));
    --tabla-accion-fila-fondo: color-mix(in srgb, var(--marca-boton) 7%, #FFFFFF);
    --tabla-accion-fila-texto: var(--rs-texto);
    --tabla-accion-encima-borde: color-mix(in srgb, var(--marca-boton) 45%, rgb(16 20 26 / 0.12));
    --fila-boton-encima: rgb(16 20 26 / 0.04);
}
/* #endregion */

/* #region Filtros y descargas de un listado */
/* Filtros de un listado: en fila, alineados abajo con sus etiquetas. */
.eventos-filtros {
    display: flex;
    align-items: flex-end;
    gap: var(--espacio-4);
    flex-wrap: wrap;
    padding: var(--espacio-4) var(--espacio-5);
}

.eventos-filtros .campo {
    margin-bottom: 0;
    flex: 1 1 12rem;
    max-width: 18rem;
}

/* El buscador de texto, más ancho que los desplegables. */
.eventos-filtros .campo:has(input[type="search"]) {
    flex: 2 1 18rem;
    max-width: none;
}

.eventos-filtros .campo-checkbox {
    margin: 0;
    min-height: var(--alto-control);
    align-items: center;
}

/* Barra de descarga de informes: CSV / Excel / PDF. */
.socios-exportar, .informe-exportar {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-wrap: wrap;
    margin: 0 0 var(--espacio-4);
}

.socios-exportar > span, .informe-exportar > span {
    margin-right: var(--espacio-1);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

.socios-exportar .boton, .informe-exportar .boton {
    min-height: 32px;
    padding: 0 var(--espacio-3);
    font-size: var(--texto-etiqueta);
    border-radius: var(--radio-sm);
}

#actividad-total {
    margin-left: auto;
}
/* #endregion */

/* #region Móvil: los filtros de un listado */
@media (max-width: 767px) {
    .eventos-filtros {
        padding: var(--espacio-4);
    }

    .eventos-filtros .campo {
        max-width: none;
        flex-basis: 100%;
    }

    #actividad-total {
        margin-left: 0;
        width: 100%;
    }
}
/* #endregion */

/* #region Un filtro con su nombre delante */
/* Un filtro con su nombre delante, en una línea («Año [Todos ▾]»): el nombre, más suave que el valor. */
.campo.campo--en-linea {
    flex-direction: row;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

.campo--en-linea > label {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-base);
    white-space: nowrap;
}

.campo--en-linea select {
    width: auto;
    min-width: 8rem;
}
/* #endregion */

/* #region Filtros en píldora, con su número */
/* Filtros de pedidos con su número: de un vistazo, cuánto falta por cobrar o preparar. */
.tienda-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/*
 * Cada filtro, una píldora con el texto centrado (17 oct 2026: el relleno
 * era para el número y, sin él, el texto quedaba torcido). El elegido, en el
 * color de la asociación, como la pestaña activa de al lado.
 */
.tienda-filtro {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 36px;
    padding: 0 var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-1);
    color: var(--rs-texto-secundario);
    font: inherit;
    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);
}

.tienda-filtro:hover {
    border-color: color-mix(in srgb, var(--marca-acento) 45%, var(--rs-borde));
    color: var(--rs-texto);
}

.tienda-filtro[aria-pressed="true"] {
    border-color: var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 10%, var(--rs-superficie-1));
    color: var(--marca-acento);
    font-weight: 600;
}

.tienda-filtro:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.tienda-pedidos,
.tienda-categorias,
.tienda-cesta-sede {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* #endregion */

/* #region Filas de total y apagadas (Estadísticas, Cuadre, Montepío, Quién viene) */
.fila-total td {
    font-weight: 700;
    border-top: 2px solid var(--rs-borde-fuerte);
}

.fila-apagada td {
    color: var(--rs-texto-tenue);
}
/* #endregion */

/* #region Píldoras para elegir (chips) */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

ul.chips {
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 2.25rem;
    padding: var(--espacio-1) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: 999px;
    background: var(--rs-superficie-1);
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva), border-color var(--duracion-hover) var(--curva);
}

.chip:hover {
    color: var(--rs-texto);
    border-color: var(--rs-borde-fuerte);
}

.chip:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

.chip--activo {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
    color: var(--rs-texto);
}

.chip[hidden] {
    display: none;
}

/* Cuántos hay de ese filtro: en el cian de los números que informan (nunca una pastilla gris). */
.chip__numero {
    min-width: 1.5rem;
    padding: 0 var(--espacio-1);
    border-radius: 999px;
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.chip__numero:empty {
    display: none;
}
/* #endregion */

/* #region La barra de filtros: lo que comparten todos los listados */
/* --- Filtros de un listado: una barra limpia --- */
.app-panel .eventos-filtros {
    gap: var(--espacio-3);
    padding: var(--espacio-4);
}

.app-panel .eventos-filtros .campo {
    position: relative;
}

.app-panel .eventos-filtros .campo label,
.app-panel .eventos-filtros .campo__cabeza {
    margin-bottom: 6px;
    color: var(--rs-texto-secundario);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* El buscador ya se explica solo con su texto de ejemplo y su lupa. */
.app-panel .eventos-filtros .campo:has(> input[type="search"]) > label,
.app-panel .eventos-filtros .campo:has(> .campo-busqueda) > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Etiqueta con su «i»: la explicación larga sale al pedirla, no descoloca la barra. */
.campo__cabeza {
    display: flex;
    align-items: center;
    gap: 6px;
}

.campo__cabeza > label {
    margin-bottom: 0 !important;
}

.ayuda-info {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: -2px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--rs-texto-tenue);
    cursor: pointer;
    transition: color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.ayuda-info .icono {
    width: 16px;
    height: 16px;
}

.ayuda-info:hover, .ayuda-info[aria-expanded="true"] {
    color: var(--ayuda-info-texto);
    background: var(--ayuda-info-fondo);
}

.ayuda-info:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.ayuda-campo--burbuja {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    width: max(100%, 20rem);
    max-width: min(24rem, 80vw);
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--burbuja-borde);
    border-radius: 12px;
    background: var(--burbuja-fondo);
    backdrop-filter: blur(16px);
    box-shadow: var(--burbuja-sombra);
    color: var(--burbuja-texto);
    font-size: var(--texto-etiqueta);
    line-height: 1.5;
    white-space: pre-line;
}

.ayuda-campo--burbuja[hidden] {
    display: none;
}
/* #endregion */

/* #region Las tablas del panel */
/* --- Tablas: se leen por contraste, no por rayas --- */
.app-panel .tabla-eventos th {
    padding-bottom: var(--espacio-3);
    border-bottom-color: var(--tabla-cabeza-linea);
    color: var(--tabla-cabeza-texto);
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
}

.app-panel .tabla-eventos td {
    border-bottom-color: var(--tabla-linea);
}

/* El color, sin peso (:where): la clase de cada pantalla en su celda gana (base.css, «Tablas»). */
:where(.app-panel .tabla-eventos) td {
    color: var(--tabla-texto);
}

@media (min-width: 768px) {
    .app-panel .tabla-eventos td {
        height: 58px;
    }

    /* Un poco menos de aire entre columnas, para que las tablas anchas quepan sin deslizarse. */
    .app-panel .tabla-eventos th, .app-panel .tabla-eventos td {
        padding-inline: var(--espacio-3);
    }

    /* Lo último de la fila (sus botones), sin pegarse al borde: si no, se cortaría su fondo. */
    .app-panel .tabla-eventos th:last-child, .app-panel .tabla-eventos td:last-child {
        padding-right: var(--espacio-2);
    }

    .app-panel .tabla-eventos th:first-child, .app-panel .tabla-eventos td:first-child {
        padding-left: var(--espacio-1);
    }
}

/* En el móvil, los filtros de dos en dos (el buscador, a lo ancho) y la «i» más pequeña. */
@media (max-width: 767px) {
    .app-panel .eventos-filtros {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-3);
    }

    .app-panel .eventos-filtros .campo {
        max-width: none;
    }

    .app-panel .eventos-filtros .campo:has(input[type="search"]),
    .app-panel .eventos-filtros .campo:has(.campo-busqueda),
    .app-panel .eventos-filtros .campo:only-child {
        grid-column: 1 / -1;
    }

    .app-panel .socios-exportar, .app-panel .informe-exportar {
        justify-content: flex-start;
    }

    /* La casilla de marcar, a la izquierda de su ficha, no sola en una línea; las fichas sin casilla de esa tabla, alineadas con las demás. */
    .app-panel .tabla-eventos:has(td.columna-casilla) tbody tr {
        position: relative;
        padding-left: 40px;
    }

    .app-panel .tabla-eventos td.columna-casilla {
        position: absolute;
        top: var(--espacio-3);
        left: 0;
        width: auto;
        padding: 0;
    }
}

/* El dato principal de cada fila (el nombre), en blanco; al pasar, en el color de la asociación (sin subrayar, 15 oct 2026). */
:where(.app-panel .tabla-eventos td) a:not(.boton) {
    color: var(--tabla-dato);
    text-decoration: none;
}

:where(.app-panel .tabla-eventos td) a:not(.boton):hover {
    color: var(--marca-acento);
    text-decoration: none;
}

.app-panel .tabla-eventos tbody tr:hover {
    background: var(--tabla-fila-encima);
}

/* La acción de cada fila («Editar»), un botón discreto que se enciende al pasar por la fila. */
.app-panel .tabla-eventos__acciones a:not(.boton) {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 var(--espacio-3);
    border: 1px solid var(--tabla-accion-borde);
    border-radius: 8px;
    background: var(--tabla-accion-fondo);
    color: var(--tabla-accion-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva), border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.app-panel .tabla-eventos tbody tr:hover .tabla-eventos__acciones a:not(.boton) {
    border-color: var(--tabla-accion-fila-borde);
    background: var(--tabla-accion-fila-fondo);
    color: var(--tabla-accion-fila-texto);
}

.app-panel .tabla-eventos__acciones a:not(.boton):hover,
.app-panel .tabla-eventos tbody tr:hover .tabla-eventos__acciones a:not(.boton):hover {
    border-color: var(--tabla-accion-encima-borde);
    text-decoration: none;
}

.app-panel .tabla-eventos__orden--activo::after {
    background: var(--marca-acento);
}
/* #endregion */

/* #region Botones de icono en una fila y su avatar */
/* Acciones de una fila con solo su icono (Duplicar, Cancelar…): el nombre, al pasar por encima. */
.boton-icono-fila {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--rs-texto-secundario);
    cursor: pointer;
    vertical-align: middle;
    transition: color var(--duracion-hover) var(--curva), border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.boton-icono-fila .icono {
    width: 17px;
    height: 17px;
}

.boton-icono-fila:hover {
    border-color: var(--rs-borde);
    background: var(--fila-boton-encima);
    color: var(--rs-texto);
}

.boton-icono-fila--peligro:hover {
    border-color: color-mix(in srgb, var(--rs-peligro) 45%, transparent);
    color: var(--rs-peligro);
}

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

.tabla-eventos__acciones .boton-icono-fila {
    margin-inline-start: var(--espacio-1);
}

.avatar-fila {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(140deg, hsl(var(--tono, 210) 55% 46%), hsl(var(--tono, 210) 60% 30%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 0 0 1px rgb(255 255 255 / 0.06);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
}

.avatar-fila--baja {
    filter: grayscale(1);
    opacity: 0.55;
}
/* #endregion */

/* #region Las descargas de un listado, en modo claro */
:root[data-theme="light"] .app-panel .socios-exportar .boton,
:root[data-theme="light"] .app-panel .informe-exportar .boton {
    border-color: rgb(16 20 26 / 0.12);
    background: #FFFFFF;
    color: var(--rs-texto-secundario);
}

:root[data-theme="light"] .app-panel .socios-exportar .boton:hover,
:root[data-theme="light"] .app-panel .informe-exportar .boton:hover {
    border-color: color-mix(in srgb, var(--marca-boton) 45%, rgb(16 20 26 / 0.12));
    background: color-mix(in srgb, var(--marca-boton) 7%, #FFFFFF);
    color: var(--rs-texto);
}
/* #endregion */

/* #region Foto en la fila y barra de los marcados */
/* La foto del socio, en el mismo círculo que las iniciales. */
.avatar-fila--foto {
    object-fit: cover;
    background: rgb(255 255 255 / 0.06);
}

/* En el móvil: las cifras de dos en dos; la barra de «marcados», ordenada y sin quedar debajo de Rasi. */
@media (max-width: 767px) {

    /* Por encima de Rasi (abajo a la derecha), para poder usar todo el ancho. */
    .app-panel .barra-seleccion {
        bottom: 84px;
        padding: var(--espacio-3);
    }

    .app-panel .barra-seleccion__acciones {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .app-panel .barra-seleccion__acciones > .boton {
        width: 100%;
        min-width: 0;
        padding: 6px var(--espacio-2);
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    .app-panel .barra-seleccion__acciones > .boton .icono {
        flex-shrink: 0;
    }

    .app-panel .barra-seleccion__acciones > .boton-enlace {
        grid-column: 1 / -1;
        justify-self: center;
    }

    /* «Más», del mismo tamaño que los demás. */
    .app-panel .barra-seleccion__mas,
    .app-panel .barra-seleccion__mas > summary {
        width: 100%;
    }

    .app-panel .barra-seleccion__acciones > .boton,
    .app-panel .barra-seleccion__mas > summary {
        justify-content: center;
        height: auto;
        min-height: 44px;
    }
}

/*
 * La barra de «6 marcados» (15 oct 2026): pegada a la tabla, de su mismo
 * ancho (base.css la deja fija abajo al bajar), con el mismo radio que las
 * tarjetas del panel. La acción principal, en el color de la asociación; el
 * resto, secundarias; todas de la misma altura.
 */
.app-panel .barra-seleccion {
    border-radius: var(--radio-md);
    box-shadow: 0 -2px 0 var(--rs-superficie-1), var(--sombra-lg);
}

@media (min-width: 768px) {
    .app-panel .barra-seleccion__acciones > .boton,
    .app-panel .barra-seleccion__mas > summary {
        height: 36px;
        min-height: 36px;
        white-space: nowrap;
    }

    /* Hueco a la derecha para Rasi, que flota en esa esquina. */
    .app-panel .barra-seleccion {
        padding-right: 84px;
    }
}
/* #endregion */

/* #region Filtros plegados en el móvil */
/* Los filtros de un listado en el móvil: el buscador a la vista y el resto tras «Filtros». */
.boton-filtros {
    display: none;
}

@media (max-width: 767px) {
    .eventos-filtros--plegable .boton-filtros {
        display: inline-flex;
        grid-column: 1 / -1;
        justify-content: center;
    }

    .eventos-filtros--plegable.eventos-filtros--plegado > .campo:not(:has(input[type="search"])):not(:has(.campo-busqueda)),
    .eventos-filtros--plegable.eventos-filtros--plegado > .campo-checkbox {
        display: none;
    }
}
/* #endregion */

/* #region Listas con casillas: toda la celda de la casilla se puede pulsar */
td.columna-casilla,
th.columna-casilla {
    cursor: pointer;
}
/* #endregion */

/* #region Una persona en una celda de tabla */
.persona-celda {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.persona-celda__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}
/* #endregion */

/* #region Listas en líneas */
/*
 * Lo que antes eran tarjetas estrechas (con la fecha y el título partidos y
 * media pantalla vacía), en una tarjeta con una línea por cosa, que se abre
 * entera: .lineas > li > .linea. Piezas: .hoja-fecha (el mes en el tono de la
 * línea y el día en grande), .linea__icono (su icono en su tono), .linea__textos
 * con su título y .linea__datos (iconos pequeños con texto), .linea__barra
 * (cuántos de cuántos) y la flecha del final. Cada línea toma su --tono.
 */
.lineas {
    display: grid;
    margin: var(--espacio-4) 0 0;
    padding: var(--espacio-1) var(--espacio-4);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    list-style: none;
}

.lineas:empty {
    display: none;
}

.lineas > li + li {
    border-top: 1px solid var(--rs-borde-sutil);
}

.linea {
    --tono: var(--marca-acento);
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto 1.25rem;
    align-items: center;
    gap: var(--espacio-4);
    width: 100%;
    margin: 0;
    padding: var(--espacio-3) var(--espacio-2);
    border: 0;
    border-radius: var(--radio-md);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

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

.linea--apagada {
    opacity: 0.65;
}

.linea > .icono:last-child {
    color: var(--rs-texto-tenue);
    transition: transform var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.linea:hover > .icono:last-child {
    transform: translateX(2px);
    color: var(--marca-acento);
}

.hoja-fecha {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--rs-borde);
    border-radius: 10px;
    background: var(--rs-superficie-1);
    text-align: center;
}

.hoja-fecha > span {
    padding: 2px 0;
    background: var(--tono);
    color: var(--rs-superficie-1);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hoja-fecha > strong {
    padding: 2px 0 4px;
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    line-height: 1.1;
}

.linea__icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tono) 14%, transparent);
    color: var(--tono);
}

.linea__icono .icono {
    width: 20px;
    height: 20px;
}

.linea__textos {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.linea__textos > strong {
    font-size: 1.0625rem;
}

.linea__datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-4);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.linea__datos > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.linea__datos .icono {
    width: 15px;
    height: 15px;
}

/* A la derecha: cuánto va (con su barra) y su estado. */
.linea__lado {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-4);
}

.linea__barra {
    display: grid;
    gap: 5px;
    width: 11rem;
    font-size: var(--texto-etiqueta);
}

.linea__barra > span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-texto-secundario);
}

.linea__barra .icono {
    width: 15px;
    height: 15px;
}

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

.linea__barra-pista {
    overflow: hidden;
    height: 6px;
    border-radius: 99px;
    background: var(--rs-superficie-3);
}

.linea__barra-pista > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tono);
}

@media (max-width: 760px) {
    .lineas {
        padding-inline: var(--espacio-2);
    }

    .linea {
        grid-template-columns: 3.25rem minmax(0, 1fr) 1.25rem;
        gap: var(--espacio-2) var(--espacio-3);
    }

    .linea__lado {
        grid-column: 2;
        justify-content: flex-start;
    }

    .linea > .icono:last-child {
        grid-row: 1;
        grid-column: 3;
    }
}
/* #endregion */