/*
 * Las cifras y los gráficos del panel (gestion/cifras.js y graficos.js): las
 * cifras en fila y con gráfica, la franja de cifras, las barras y los donuts.
 */

/* #region Cifras en fila: Estadísticas, Cuotas y ficha del evento */
/* Un número grande con su nombre debajo, de dos en dos; la destacada, en azul. */
.cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-5) var(--espacio-4);
}

.cifra {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    min-width: 0;
}
/* #endregion */

/* #region Cifras con gráfica (gestion/cifras.js): Inicio, Estadísticas y Deudores */
/* Una cifra (a menudo un enlace), con su gráfica pequeña o su anillo arriba a la derecha. */
.kpi--grafica {
    color: inherit;
    text-decoration: none;
    transition: transform var(--duracion-hover) var(--curva), border-color var(--duracion-hover) var(--curva);
}

.kpi--grafica:hover {
    border-color: color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 45%, var(--rs-borde-sutil));
    transform: translateY(-2px);
}

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

.kpi__cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.kpi__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}

.kpi__extra .kpi__variacion {
    margin-top: 0;
}

/* Lo que pide atención (deudas graves, dinero por cobrar): el icono y el canto en rojo (por encima del cristal de las cifras). */
.app-panel .contenido-gestion .kpi.kpi--peligro {
    border-color: color-mix(in srgb, var(--rs-peligro) 45%, transparent);
}

.app-panel .contenido-gestion .kpi.kpi--peligro .kpi__icono {
    background: color-mix(in srgb, var(--rs-peligro) 18%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--rs-peligro) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rs-peligro) 30%, transparent);
    color: var(--rs-peligro-texto);
}

:root[data-theme="light"] .app-panel .contenido-gestion .kpi.kpi--peligro .kpi__icono {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-peligro) 30%, transparent);
}

/* La gráfica pequeña: la línea en el color de la asociación, con su sombra y el último punto. */
.minigrafica {
    width: 96px;
    height: 34px;
    overflow: visible;
}

.minigrafica__linea {
    fill: none;
    stroke: var(--tono-cifra, var(--marca-acento));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.minigrafica__area {
    fill: color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 16%, transparent);
}

.minigrafica__punto {
    fill: var(--tono-cifra, var(--marca-acento));
    stroke: var(--rs-superficie-2);
    stroke-width: 2;
}

/* Un anillo de progreso: 64 px suelto, 40 en la cabeza de una cifra. */
.anillo {
    width: 64px;
    height: 64px;
    transform: rotate(-90deg);
}

.kpi__cabeza .anillo {
    width: 40px;
    height: 40px;
}

.anillo circle {
    fill: none;
    stroke-width: 5;
}

.anillo__fondo {
    stroke: rgb(255 255 255 / 0.08);
}

:root[data-theme="light"] .anillo__fondo {
    stroke: rgb(16 20 26 / 0.08);
}

.anillo__lleno {
    stroke: var(--tono-cifra, var(--marca-acento));
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 60%, transparent));
}

/* Un porcentaje («Cuotas cobradas»): la barra bajo el número. */
.kpi__barra {
    display: block;
    height: 6px;
    margin: var(--espacio-1) 0;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: rgb(255 255 255 / 0.08);
}

:root[data-theme="light"] .kpi__barra {
    background: rgb(16 20 26 / 0.07);
}

.kpi__barra > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 70%, transparent), var(--tono-cifra, var(--marca-acento)));
    box-shadow: 0 0 12px color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 50%, transparent);
}

/* Al cargar, una sola vez: la línea se dibuja, el anillo y la barra se llenan. */
@media (prefers-reduced-motion: no-preference) {
    .minigrafica__linea {
        stroke-dasharray: 1;
        animation: cifra-dibuja 1100ms 200ms var(--curva) both;
    }

    .minigrafica__area,
    .minigrafica__punto {
        animation: cifra-funde 600ms 900ms both;
    }

    .anillo__lleno {
        animation: cifra-anillo 1100ms 200ms var(--curva) both;
    }

    .kpi__barra > i {
        animation: cifra-llena 1000ms 250ms var(--curva) both;
    }
}

@keyframes cifra-dibuja {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes cifra-funde {
    from { opacity: 0; }
}

@keyframes cifra-anillo {
    from { stroke-dasharray: 0 100; }
}

@keyframes cifra-llena {
    from { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .kpi--grafica,
    .kpi--grafica:hover {
        transition: none;
        transform: none;
    }
}
/* #endregion */

/* #region Gráfico de barras (graficos.js) */
/* "Todo en orden": el mismo estado vacío, con una marca de visto bueno. */
.estado-vacio--bien::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331C48D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 22px no-repeat,
        color-mix(in srgb, var(--rs-exito) 10%, transparent);
    border-color: color-mix(in srgb, var(--rs-exito) 24%, transparent);
}

.grafico {
    margin: 0;
}

.grafico__lienzo {
    position: relative;
}

.grafico__lienzo svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.grafico__zona {
    fill: transparent;
}

.grafico__columna {
    cursor: default;
    outline: none;
}

.grafico__columna--activa .grafico__zona {
    fill: var(--rs-hover-fila);
}

.grafico__columna:focus-visible .grafico__zona {
    stroke: var(--rs-azul);
    stroke-width: 2;
}

.grafico__barra {
    fill: color-mix(in srgb, var(--rs-azul) 55%, transparent);
    transition: opacity var(--duracion-hover) var(--curva);
}

.grafico__barra--actual, .grafico__columna--activa .grafico__barra {
    fill: var(--rs-azul);
}

.grafico__detalle {
    position: absolute;
    top: -8px;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-3);
    box-shadow: var(--sombra-md);
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.grafico__detalle-periodo {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}
/* #endregion */

/* #region Gráficos y cifras (graficos.js) */
/*
 * Colores de las gráficas, siempre de la familia de tonos de cada
 * asociación (base.css, «marca de la organización»): por orden
 * (--grafico-…, el primero su color principal) y, para lo que sale en
 * varias pantallas, uno fijo por concepto (--serie-…, graficos.js colorDe):
 * «Cuotas» es del mismo color en el Inicio que en Estadísticas. Las altas,
 * en verde, y las bajas, en rojo: eso no es de nadie.
 */
:root {
    --grafico-1: var(--tono-1);
    --grafico-2: var(--tono-2);
    --grafico-3: var(--tono-3);
    --grafico-4: var(--tono-4);
    --grafico-5: var(--tono-5);
    --grafico-6: var(--tono-6);
    --serie-cuotas: var(--color-dinero);
    --serie-entradas: var(--color-eventos);
    --serie-tienda: var(--color-tienda);
    --serie-loteria: var(--tono-5);
    --serie-barra: var(--tono-6);
    --serie-altas: var(--rs-exito);
    --serie-bajas: var(--rs-peligro);
}

/* Las cifras llenan su fila sean cuantas sean (en una pantalla grande, sin medio ancho vacío). */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--espacio-3);
}

/* Cada cifra mide su ancho (container-type) para que el número encoja hasta caber entero. */
.kpi {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    min-width: 0;
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
}

.kpi--destacada {
    border-color: color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 40%, var(--rs-borde-sutil));
    background: linear-gradient(160deg, color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 14%, var(--rs-superficie-2)), var(--rs-superficie-2) 70%);
}

.kpi__icono {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--espacio-1);
    border-radius: 10px;
    background: color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 14%, transparent);
    color: var(--tono-cifra, var(--marca-acento));
}

.kpi__icono .icono {
    width: 18px;
    height: 18px;
}

.kpi__valor {
    font-family: var(--fuente-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.kpi__etiqueta {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.kpi__variacion {
    align-self: flex-start;
    margin-top: var(--espacio-1);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rs-hover);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

.kpi__variacion--buena {
    background: color-mix(in srgb, var(--rs-exito) 16%, transparent);
    color: var(--rs-exito);
}

.kpi__variacion--mala {
    background: color-mix(in srgb, var(--rs-peligro) 16%, transparent);
    color: var(--rs-peligro);
}

.tarjeta__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
    margin-bottom: var(--espacio-3);
}

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

.grafico-filas + .progreso {
    margin-top: var(--espacio-5);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.tarjeta__cabecera .informe-exportar {
    margin: 0;
}

.grafico svg {
    display: block;
    width: 100%;
    height: auto;
}

svg .grafico__guia {
    stroke: var(--rs-rejilla-grafico);
    stroke-width: 1;
}

svg .grafico__eje {
    fill: var(--rs-texto-tenue);
    font-size: 11px;
    font-family: var(--fuente-ui);
}

/* La línea (graficos.js, linea()): en el color de la asociación, con su área suave y el último mes marcado. */
.grafico__linea {
    fill: none;
    stroke: var(--grafico-1);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.grafico__area {
    fill: color-mix(in srgb, var(--grafico-1) 14%, transparent);
}

.grafico__punto {
    fill: var(--rs-superficie-2);
    stroke: var(--grafico-1);
    stroke-width: 2;
}

/* Cada mes, una franja invisible: al pasar por encima se lee su valor. */
.grafico__zona-mes {
    fill: transparent;
}

.grafico__mes:hover .grafico__zona-mes {
    fill: var(--rs-hover);
}

.grafico__punto--ultimo {
    fill: var(--grafico-1);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--grafico-1) 60%, transparent));
}

@media (prefers-reduced-motion: no-preference) {
    .grafico__linea {
        stroke-dasharray: 1;
        animation: cifra-dibuja 1200ms var(--curva) both;
    }

    .grafico__area,
    .grafico__punto {
        animation: cifra-funde 600ms 800ms both;
    }
}

.grafico__barra:hover,
.grafico__arco:hover {
    opacity: 0.8;
}

.grafico__fondo {
    stroke: var(--rs-superficie-3);
}

.grafico__total {
    fill: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: 22px;
    font-weight: 600;
    dominant-baseline: middle;
}

/* Qué es el número del centro («socios»). */
.grafico__bajo-total {
    fill: var(--rs-texto-tenue);
    font-size: 12px;
    font-family: var(--fuente-ui);
}

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

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

.grafico__muestra {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 3px;
}

.grafico--donut {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    align-items: center;
    gap: var(--espacio-4);
}

.grafico__leyenda--lista {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
}

.grafico__leyenda--lista li {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    gap: var(--espacio-2);
}

.grafico__leyenda--lista strong {
    color: var(--rs-texto);
}

.grafico__leyenda--lista small {
    min-width: 3ch;
    text-align: right;
    color: var(--rs-texto-tenue);
}

.grafico-filas {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grafico-filas li {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) 1fr auto;
    align-items: center;
    gap: var(--espacio-3);
    font-size: var(--texto-etiqueta);
}

.grafico-filas__nombre {
    color: var(--rs-texto-secundario);
}

.grafico-filas__pista {
    height: 10px;
    border-radius: 999px;
    background: var(--rs-superficie-3);
    overflow: hidden;
}

.grafico-filas__barra {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.progreso__cabecera {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--espacio-2);
    font-size: var(--texto-etiqueta);
}

.progreso__pista {
    height: 8px;
    border-radius: 999px;
    background: var(--rs-superficie-3);
    overflow: hidden;
}

.progreso__pista span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--marca-acento) 65%, transparent), var(--marca-acento));
}

@media (max-width: 640px) {
    .grafico--donut {
        grid-template-columns: 1fr;
    }

    .grafico--donut svg {
        max-width: 12rem;
        margin-inline: auto;
    }
}
/* #endregion */

/* #region Franja de cifras (cifraFranja, graficos.js) */
.franja-cifras:empty {
    display: none;
}

/*
 * Las cifras en una franja fina con divisiones, cada una con su número y,
 * debajo, qué es (cifraFranja, graficos.js). La división es una sombra de
 * 1px arriba y a la izquierda de cada cifra: el overflow de la franja recorta
 * la de los bordes, así que pasen a dos filas o no, nunca hay rayas dobles ni
 * filas sin separar.
 */
.franja-cifras {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
}

.franja-cifra {
    --division: -1px -1px 0 var(--rs-borde-sutil);
    display: grid;
    flex: 1 1 8.5rem;
    gap: 2px;
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4);
    border: 0;
    box-shadow: var(--division);
}

.franja-cifra strong {
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.franja-cifra span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.franja-cifra .icono {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.franja-cifra--peligro strong {
    color: var(--rs-peligro);
}

.franja-cifra--aviso strong {
    color: var(--rs-aviso-texto);
}

/* Una cifra que se pulsa (filtra la lista de debajo): se nota al pasar por encima y la elegida queda marcada. */
.franja-cifra--boton {
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

.franja-cifra--boton:hover {
    background: var(--rs-hover);
}

.franja-cifra--boton[aria-pressed="true"] {
    background: color-mix(in srgb, var(--marca-acento) 8%, transparent);
    box-shadow: var(--division), inset 0 -2px 0 var(--marca-acento);
}

/* El foco, por dentro: por fuera lo recortaría la franja. */
.franja-cifra--boton:focus-visible {
    outline: none;
    box-shadow: var(--division), inset var(--anillo-foco);
}

@media (max-width: 767px) {

    .franja-cifra {
        flex-basis: 40%;
    }
}
/* #endregion */

/* #region El dinero de una persona (dinero-persona.js, turno 2 del 10 nov 2026) */
/* Lo que debe, lo que aún no ha vencido y sus compras: en la ficha del socio, en Deudores y en el evento. */
.franja-cifra {
    align-content: start;
}

.franja-cifra small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    line-height: 1.35;
}

.franja-cifra--exito strong {
    color: var(--rs-exito-texto);
}

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

/* La franja de la ficha: debajo de la cabecera y visible en todas sus pestañas. */
.ficha-dinero {
    display: grid;
    gap: var(--espacio-3);
    margin-block: var(--espacio-4);
}

.ficha-dinero__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-size: 1.0625rem;
}

.ficha-dinero__acciones,
.dinero-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.dinero-acciones {
    justify-content: flex-end;
}

.dinero-ventana {
    width: min(760px, 100%);
}

.dinero-ventana .dinero-tabla {
    margin-top: var(--espacio-3);
}

@media (max-width: 767px) {

    .dinero-acciones {
        justify-content: stretch;
    }

    .dinero-acciones > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}
/* #endregion */

/* #region Las cifras grandes, con la piel del panel */
/* Las cifras: grandes, con la letra de la marca y su icono iluminado. */
.app-panel .contenido-gestion .kpi {
    gap: var(--espacio-2);
    padding: var(--espacio-5);
    overflow: hidden;
}

.app-panel .contenido-gestion .kpi__icono {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 18%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 30%, transparent);
}

/* El número, nunca partido: encoge con su tarjeta (14cqi caben unos 12 caracteres, «47.625,00 €»). */
.app-panel .contenido-gestion .kpi__valor {
    font-size: clamp(1.125rem, 14cqi, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    background: var(--panel-cifra-fondo);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--panel-titulo-texto);
}

.app-panel .contenido-gestion .kpi--destacada {
    background:
        radial-gradient(18rem 10rem at 0% 0%, color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 26%, transparent), transparent 70%) padding-box,
        linear-gradient(165deg, rgb(23 29 39 / 0.8), rgb(10 12 17 / 0.92)) padding-box,
        linear-gradient(150deg, color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 55%, transparent), rgb(255 255 255 / 0.04) 45%, rgb(241 199 110 / 0.18)) border-box;
}

/* En claro, los halos de luz manchan el blanco (15 oct 2026): el color se queda en el icono y el canto. */
:root[data-theme="light"] .app-panel .contenido-gestion .kpi__icono {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 30%, transparent);
}

:root[data-theme="light"] .app-panel .contenido-gestion .kpi--destacada {
    background:
        linear-gradient(165deg, #FFFFFF, rgb(255 255 255 / 0.9)) padding-box,
        linear-gradient(150deg, color-mix(in srgb, var(--tono-cifra, var(--marca-acento)) 45%, transparent), rgb(16 20 26 / 0.05) 45%, rgb(168 117 36 / 0.2)) border-box;
}
/* #endregion */

/* #region Cifras: seis, en dos filas de tres y no en 4 + 2 */
@media (min-width: 900px) {
    .kpis:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* #endregion */