/*
 * Sistema de diseño de Rasedia (sección 103 de CLAUDE.md y
 * RASEDIA_CLAUDE_CODE_UI_REDESIGN_SPEC.md): tokens, base y componentes
 * compartidos por todas las áreas (socio, panel, panel técnico, puerta).
 *
 * Reglas de uso:
 * - Ninguna pantalla escribe colores, radios, sombras ni espacios sueltos:
 *   todo sale de las variables de la región "Tokens".
 * - El azul es el color funcional (acciones, foco, selección); en las
 *   pantallas de una asociación, su propio color (3 nov 2026). El oro es
 *   acento de marca/premium y se usa poco. Éxito/aviso/peligro conservan
 *   su significado y nunca se sustituyen por el oro.
 * - El color propio de cada organización (sección 104) llega como
 *   --marca-principal / --marca-secundaria y personaliza la interfaz en
 *   pequeñas dosis (línea superior, apartado activo del menú, avatar,
 *   pantalla de entrada, carnet) mediante las versiones legibles que se
 *   derivan en "Tokens: marca de la organización". No pinta los botones.
 *
 * Regiones, en el orden en que van:
 *
 *   - Fuentes (servidas desde el propio dominio: la CSP solo admite font-src 'self')
 *   - Tokens: modo oscuro (experiencia principal)
 *   - Tokens: marca de la organización (sección 104)
 *   - Tokens: modo claro (secundario)
 *   - Tokens: lo funcional en el color de la asociación
 *   - Base
 *   - Iconos (sprite Lucide en /assets/iconos/iconos.svg)
 *   - Marca Rasedia
 *   - Botones
 *   - Formularios: campos
 *   - Formularios: casillas, opciones e interruptores
 *   - Buscador de personas
 *   - Selector de idioma
 *   - Tarjetas y secciones
 *   - Cabecera de página
 *   - Etiquetas de estado
 *   - Avisos (mensajes junto al formulario o la sección)
 *   - Estados: cargando, vacío, error
 *   - Tablas
 *   - Paginación
 *   - Selección de varias filas
 *   - Pantalla mientras arranca (interfaz.js, pintarSinSaltos)
 *   - Llegar al punto justo desde un enlace (comun.js, irAlPuntoJusto)
 *   - Conmutador: dos o tres botones que se excluyen entre sí
 *   - Tiempo para terminar una compra (plazo-compra.js, docs/compras-con-tiempo.md)
 *   - Casilla de un número con su unidad dentro («2,00 €», «10 %»), alineado a la derecha
 *   - Diálogos (dialogo.js)
 *   - Visor de fotos (visor-fotos.js): una foto de la plataforma en grande, encima y sin otra pestaña
 *   - Pantallas de acceso (entrar, alta, contraseña, errores)
 *   - Responsive: base
 *   - Tarjeta centrada (errores, baja de promociones)
 *   - Portada de la plataforma (dominio base)
 *   - Estado vacío suelto en la página: dentro de su propia tarjeta
 *   - Panel técnico: segundo factor
 *   - Un texto largo con sus saltos de línea (las traducciones)
 *   - Menú de usuario y desplegables (paneles y área de socio)
 *   - Plano de la sala (editor de la Junta y vista del socio, plano-sala.js)
 *   - Rasi: el botón
 *   - Rasi: la ventana
 *   - Rasi: la bienvenida
 *   - Rasi: la conversación
 *   - Rasi: la tarjeta de la guía
 *   - Rasi: escribir y soporte
 *   - Rasi: móvil y movimiento reducido
 *   - Plegables: un desplegable con su icono, su título, cuántos lleva y la flecha
 *   - Ayuda: las piezas de las guías (socio y Junta; la pantalla de Ayuda, en ayuda.css)
 *   - Ayuda: la guía de la pantalla, encima
 *   - Comprar entradas, como en una tienda
 *   - Comprar entradas: la de otro socio, buscándolo por su nombre
 *   - Comprar entradas: el plato y las alergias de cada uno
 *   - Comprar entradas: quien ya vino con él, con un toque
 *   - Paginación con números (11 oct 2026): ir directo a una página
 *   - Estrellas de la encuesta después del evento
 *   - «Guardado», un momento al lado de su botón (sin una ventana que haya que cerrar; en el panel y en el área del socio)
 *   - Esqueleto de carga (17 oct 2026): la forma de lo que va a salir, con un brillo que pasa, mientras llegan los datos
 */

/* #region Fuentes (servidas desde el propio dominio: la CSP solo admite font-src 'self') */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fuentes/inter.woff2") format("woff2");
}

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/assets/fuentes/sora.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/assets/fuentes/jetbrains-mono.woff2") format("woff2");
}
/* #endregion */

/* #region Tokens: modo oscuro (experiencia principal) */
/* .ambito-marca[data-theme]: una vista previa en el otro tema dentro de la página (Configuración → General, 19 oct 2026). */
:root, .ambito-marca[data-theme="dark"] {
    color-scheme: dark;

    /* Superficies */
    --rs-fondo: #07090D;
    --rs-superficie-1: #0D1117;
    --rs-superficie-2: #121821;
    --rs-superficie-3: #18212C;
    --rs-superficie-4: #1D2733;
    --rs-control-fondo: #0A0E14;
    --rs-lateral-fondo: #0D1117;
    --rs-velo: rgb(3 5 8 / 0.72);

    /* Bordes */
    --rs-borde: #25303D;
    --rs-borde-sutil: #1B242F;
    --rs-borde-fuerte: #324152;
    --rs-borde-tarjeta: #1E2935;
    --rs-borde-control: #27323F;

    /* Texto */
    --rs-texto: #F6F8FA;
    --rs-texto-secundario: #A7B0BC;
    --rs-texto-tenue: #84909E;
    --rs-texto-desactivado: #4F5965;
    --rs-texto-sobre-color: #FFFFFF;

    /* Marca y funcional */
    --rs-azul: #258CFF;
    --rs-azul-suave: rgb(37 140 255 / 0.10);
    --rs-azul-suave-fuerte: rgb(37 140 255 / 0.16);
    --rs-cian: #29D5FF;
    --rs-cian-suave: rgb(41 213 255 / 0.10);
    --rs-oro: #DCA94F;
    --rs-oro-claro: #F1C76E;
    --rs-oro-oscuro: #A87524;
    --rs-oro-suave: rgb(220 169 79 / 0.12);
    --rs-plata: #C9D1DB;

    /* Semánticos */
    --rs-exito: #31C48D;
    --rs-aviso: #F6B94A;
    --rs-peligro: #F05D67;
    --rs-info: #45A3FF;
    --rs-inactivo: #77818D;
    /* Rellenos sólidos con texto blanco encima (puerta, botones de peligro, contadores): contraste AA. */
    --rs-exito-solido: #13865A;
    --rs-peligro-solido: #C8323D;
    /* Texto de color sobre su propio fondo suave (etiquetas de estado): contraste AA. */
    --rs-exito-texto: var(--rs-exito);
    --rs-aviso-texto: var(--rs-aviso);
    --rs-peligro-texto: var(--rs-peligro);
    --rs-azul-texto: var(--rs-azul);
    /* Su fondo suave (el resultado de pasar un carnet, lo que se juega ahora). */
    --rs-exito-suave: color-mix(in srgb, var(--rs-exito) 12%, transparent);
    --rs-aviso-suave: color-mix(in srgb, var(--rs-aviso) 12%, transparent);
    --rs-peligro-suave: color-mix(in srgb, var(--rs-peligro) 12%, transparent);
    --rs-oro-texto: var(--rs-oro-claro);
    --rs-cian-texto: var(--rs-cian);

    /* Interacción */
    --rs-hover: rgb(255 255 255 / 0.06);
    --rs-hover-fila: rgb(255 255 255 / 0.025);
    --rs-rejilla-grafico: rgb(255 255 255 / 0.06);

    /* Organización (sección 104): la sobrescribe cabecera-html.php */
    --marca-principal: #258CFF;
    --marca-secundaria: #DCA94F;

    /* Tipografía */
    --fuente-display: "Sora", "Inter", system-ui, sans-serif;
    --fuente-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --texto-display: 3.25rem;
    --texto-h1: 2rem;
    --texto-h2: 1.5rem;
    --texto-h3: 1.25rem;
    --texto-grande: 1rem;
    --texto-base: 0.875rem;
    --texto-etiqueta: 0.8125rem;
    --texto-pequeno: 0.75rem;

    /* Espacios: base 4px, ritmo 8px */
    --espacio-1: 4px;
    --espacio-2: 8px;
    --espacio-3: 12px;
    --espacio-4: 16px;
    --espacio-5: 20px;
    --espacio-6: 24px;
    --espacio-8: 32px;
    --espacio-10: 40px;
    --espacio-12: 48px;
    --espacio-16: 64px;

    /* Radios */
    --radio-xs: 6px;
    --radio-sm: 8px;
    --radio-md: 10px;
    --radio-lg: 14px;
    --radio-xl: 18px;
    --radio-2xl: 24px;
    --radio-pildora: 999px;

    /* Profundidad */
    --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.22);
    --sombra-md: 0 8px 24px rgb(0 0 0 / 0.24);
    --sombra-lg: 0 20px 50px rgb(0 0 0 / 0.34);
    --anillo-foco: 0 0 0 3px rgb(37 140 255 / 0.28);

    /* Movimiento */
    --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duracion-hover: 140ms;
    /* Lo que se desliza (la pastilla de los conmutadores, la pieza de las pestañas): suave, sin rebote. */
    --curva-deslizar: cubic-bezier(0.25, 1, 0.5, 1);
    --duracion-deslizar: 320ms;
    --duracion-menu: 180ms;
    --duracion-modal: 220ms;

    /* Armazón */
    --ancho-lateral: 256px;
    --ancho-lateral-plegado: 72px;
    --alto-superior: 64px;
    --alto-control: 44px;
    --alto-boton: 40px;
    --ancho-formulario: 880px;
    --ancho-lectura: 720px;
}
/* #endregion */

/* #region Tokens: marca de la organización (sección 104) */
/*
 * Cada organización elige sus colores (--marca-principal y
 * --marca-secundaria, los pone cabecera-html.php). A partir de ellos se
 * derivan, sin que nadie tenga que hacer nada, las versiones que se leen
 * bien sobre el fondo de cada tema:
 * - --marca-acento: el color para detalles (menú activo, línea superior),
 *   aclarado en oscuro y oscurecido en claro si hace falta contraste;
 * - --marca-sobre: blanco o grafito, el que se lea encima del color tal cual;
 * - --marca-boton (y -hover, -activo, --marca-sobre-boton): el color de los
 *   botones principales, con la luz justa para que el botón se distinga
 *   del fondo y su texto se lea (revisión del 24 sep 2026: el color de la
 *   organización llega también a los botones).
 * Así un granate muy oscuro o un amarillo pálido siguen siendo legibles.
 * .ambito-marca permite recalcularlo dentro de una vista previa.
 *
 * La familia de tonos (15 oct 2026, «cada asociación con su identidad, pero
 * con más color»): de sus dos colores salen seis tonos legibles para
 * distinguir de un vistazo qué es cada cosa en cifras, iconos y gráficas:
 * - --tono-1 su principal y --tono-2 su secundario (si no eligió ninguno,
 *   un acompañante de su principal girado en la rueda del color: del
 *   granate sale un dorado);
 * - --tono-3 y --tono-4, sus vecinos en la rueda del color (+40°);
 * - --tono-5 y --tono-6, los otros vecinos (−40°).
 * Y por área, siempre los mismos: --color-personas (1), --color-dinero (2),
 * --color-eventos (3), --color-tienda (4), --color-comunicar (5) y
 * --color-secretaria (6). Lo que va bien o mal no es de nadie: verde,
 * ámbar y rojo (--rs-exito, --rs-aviso, --rs-peligro).
 */
:root, .ambito-marca {
    --marca-acento: var(--rs-azul);
    --marca-fondo: var(--marca-principal);
    --marca-secundaria-visible: var(--marca-secundaria);
    /* El segundo color en los detalles de los objetos (cintas, filetes, marcos); si no ha elegido ninguno, oro. */
    --marca-detalle: var(--marca-secundaria-elegida, #C49236);
    --marca-sobre: #FFFFFF;
    --marca-boton: var(--marca-principal);
    --marca-boton-hover: var(--marca-principal);
    --marca-boton-activo: var(--marca-principal);
    --marca-sobre-boton: #FFFFFF;
    /* Sin colores calculados (navegadores antiguos): los de siempre. */
    --tono-1: var(--marca-acento);
    --tono-2: var(--rs-oro);
    --tono-3: #9B7BFF;
    --tono-4: var(--rs-exito);
    --tono-5: #2EC4C4;
    --tono-6: var(--rs-azul);
    --color-personas: var(--tono-1);
    --color-dinero: var(--tono-2);
    --color-eventos: var(--tono-3);
    --color-tienda: var(--tono-4);
    --color-comunicar: var(--tono-5);
    --color-secretaria: var(--tono-6);
}

@supports (color: oklch(from red l c h)) {
    /*
     * - acento: para texto, iconos y líneas finas sobre el fondo del tema;
     * - fondo / secundaria-visible: el color como superficie (banda del
     *   carnet, avatar, línea superior), con lo justo de luz para no
     *   desaparecer sobre el fondo (un negro corporativo pasa a grafito);
     * - sobre: blanco o grafito, según se lea mejor encima de "fondo".
     */
    :root, .ambito-marca, :root[data-theme="light"] .ambito-marca[data-theme="dark"] {
        --marca-acento: oklch(from var(--marca-principal) clamp(0.72, l, 0.9) min(c, 0.19) h);
        --marca-fondo: oklch(from var(--marca-principal) max(l, 0.34) c h);
        --marca-secundaria-visible: oklch(from var(--marca-secundaria) max(l, 0.42) c h);
        --marca-sobre: oklch(from var(--marca-fondo) clamp(0.16, (0.66 - l) * 1000, 1) 0 0);
        --marca-boton: oklch(from var(--marca-principal) clamp(0.45, l, 0.8) c h);
        --marca-boton-hover: oklch(from var(--marca-boton) calc(l + 0.06) c h);
        --marca-boton-activo: oklch(from var(--marca-boton) calc(l - 0.05) c h);
        --marca-sobre-boton: oklch(from var(--marca-boton) clamp(0.16, (0.66 - l) * 1000, 1) 0 0);
        /* La familia: con la luz de los detalles sobre fondo oscuro y color suficiente para distinguirse. */
        --marca-companera: var(--marca-secundaria-elegida, oklch(from var(--marca-principal) l c calc(h + 70)));
        --tono-1: var(--marca-acento);
        --tono-2: oklch(from var(--marca-companera) clamp(0.74, l, 0.88) clamp(0.09, c, 0.17) h);
        --tono-3: oklch(from var(--marca-principal) 0.74 clamp(0.1, c, 0.16) calc(h + 40));
        --tono-4: oklch(from var(--marca-companera) 0.78 clamp(0.1, c, 0.15) calc(h + 40));
        --tono-5: oklch(from var(--marca-principal) 0.76 clamp(0.09, c, 0.15) calc(h - 40));
        --tono-6: oklch(from var(--marca-companera) 0.74 clamp(0.09, c, 0.15) calc(h - 40));
    }

    :root[data-theme="light"], :root[data-theme="light"] .ambito-marca, .ambito-marca[data-theme="light"] {
        --marca-acento: oklch(from var(--marca-principal) clamp(0.3, l, 0.52) min(c, 0.2) h);
        --marca-fondo: oklch(from var(--marca-principal) min(l, 0.9) c h);
        --marca-secundaria-visible: oklch(from var(--marca-secundaria) min(l, 0.82) c h);
        --marca-boton: oklch(from var(--marca-principal) clamp(0.3, l, 0.72) c h);
        /* En claro, más oscuros: que se lean sobre blanco. */
        --tono-2: oklch(from var(--marca-companera) clamp(0.45, l, 0.6) clamp(0.1, c, 0.17) h);
        --tono-3: oklch(from var(--marca-principal) 0.5 clamp(0.1, c, 0.17) calc(h + 40));
        --tono-4: oklch(from var(--marca-companera) 0.52 clamp(0.1, c, 0.15) calc(h + 40));
        --tono-5: oklch(from var(--marca-principal) 0.5 clamp(0.09, c, 0.15) calc(h - 40));
        --tono-6: oklch(from var(--marca-companera) 0.5 clamp(0.09, c, 0.15) calc(h - 40));
    }
}
/* #endregion */

/* #region Tokens: modo claro (secundario) */
:root[data-theme="light"], .ambito-marca[data-theme="light"] {
    color-scheme: light;

    --rs-fondo: #F6F8FB;
    --rs-superficie-1: #FFFFFF;
    --rs-superficie-2: #F0F3F7;
    --rs-superficie-3: #E8EDF3;
    --rs-superficie-4: #DEE5ED;
    --rs-control-fondo: #FFFFFF;
    --rs-lateral-fondo: #FFFFFF;
    --rs-velo: rgb(16 20 26 / 0.45);

    --rs-borde: #E1E6ED;
    --rs-borde-sutil: #E9EDF2;
    --rs-borde-fuerte: #CBD3DD;
    --rs-borde-tarjeta: #E1E6ED;
    --rs-borde-control: #CBD3DD;

    --rs-texto: #10141A;
    --rs-texto-secundario: #4E5967;
    --rs-texto-tenue: #5A6471;
    --rs-texto-desactivado: #A8B0BA;

    --rs-azul: #147DE1;
    --rs-azul-suave: rgb(20 125 225 / 0.08);
    --rs-azul-suave-fuerte: rgb(20 125 225 / 0.14);
    --rs-cian: #0AA5CC;
    --rs-cian-suave: rgb(10 165 204 / 0.10);
    --rs-oro: #B98428;
    --rs-oro-claro: #D9A443;
    --rs-oro-oscuro: #8C6118;
    --rs-oro-suave: rgb(185 132 40 / 0.12);
    --rs-plata: #5A6573;

    --rs-exito: #17865B;
    --rs-aviso: #A15F00;
    --rs-peligro: #C42E3A;
    --rs-info: #147DE1;
    --rs-inactivo: #6B7582;
    --rs-exito-texto: #126B49;
    --rs-aviso-texto: #814C00;
    --rs-peligro-texto: #A62E37;
    --rs-azul-texto: #1064B4;
    --rs-oro-texto: var(--rs-oro-oscuro);
    --rs-cian-texto: #0A6A84;

    --rs-hover: rgb(16 20 26 / 0.05);
    --rs-hover-fila: rgb(16 20 26 / 0.025);
    --rs-rejilla-grafico: rgb(16 20 26 / 0.06);

    --sombra-sm: 0 1px 2px rgb(16 20 26 / 0.06);
    --sombra-md: 0 8px 24px rgb(16 20 26 / 0.08);
    --sombra-lg: 0 20px 50px rgb(16 20 26 / 0.14);
    --anillo-foco: 0 0 0 3px rgb(20 125 225 / 0.22);
}
/* #endregion */

/* #region Tokens: lo funcional en el color de la asociación */
/*
 * Revisión del 3 nov 2026 (CLAUDE.md §104): en las pantallas de una
 * asociación (las que llevan su color, <html class="con-marca">), lo que
 * era azul o cian de Rasedia —interruptores, casillas, lo elegido, foco,
 * enlaces y los números que informan— sale de su propio color, con la
 * misma luz legible que --marca-acento. El panel técnico, sin color propio,
 * sigue con el azul de Rasedia. Solo con colores calculados: sin ellos,
 * se queda el azul de siempre.
 */
@supports (color: oklch(from red l c h)) {
    :root.con-marca, .con-marca .ambito-marca, .con-marca .ambito-marca[data-theme="dark"] {
        --rs-azul: oklch(from var(--marca-principal) clamp(0.72, l, 0.9) min(c, 0.19) h);
    }

    :root.con-marca[data-theme="light"], :root.con-marca[data-theme="light"] .ambito-marca, .con-marca .ambito-marca[data-theme="light"] {
        --rs-azul: oklch(from var(--marca-principal) clamp(0.3, l, 0.52) min(c, 0.2) h);
    }

    :root.con-marca, .con-marca .ambito-marca, .con-marca .ambito-marca[data-theme] {
        --rs-azul-suave: color-mix(in srgb, var(--rs-azul) 9%, transparent);
        --rs-azul-suave-fuerte: color-mix(in srgb, var(--rs-azul) 15%, transparent);
        --rs-azul-texto: var(--rs-azul);
        --rs-cian: var(--rs-azul);
        --rs-cian-suave: var(--rs-azul-suave);
        --rs-cian-texto: var(--rs-azul);
        --rs-info: var(--rs-azul);
        --anillo-foco: 0 0 0 3px color-mix(in srgb, var(--rs-azul) 24%, transparent);
    }
}
/* #endregion */

/* #region Base */
*, *::before, *::after {
    box-sizing: border-box;
}

/*
 * Un elemento con el atributo `hidden` se oculta SIEMPRE, lo pinte como lo
 * pinte cualquier otra regla: sustituye a las guardas :not([hidden]) que
 * antes había que acordarse de poner en cada componente con `display`.
 */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rs-fondo);
    color: var(--rs-texto);
    font-family: var(--fuente-ui);
    font-size: var(--texto-base);
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Sin palabras huérfanas al final de un texto («…de 11 a 13 / h.»), en todo el producto (9 oct 2026). */
    text-wrap: pretty;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--espacio-3);
    color: var(--rs-texto);
    text-wrap: balance;
}

/* Sora tiene el espacio estrecho y, con las letras tan juntas, las palabras se pegaban (5 nov 2026). */
h1, h2 {
    word-spacing: 0.08em;
}

h1 {
    font-family: var(--fuente-display);
    font-size: var(--texto-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h2 {
    font-family: var(--fuente-display);
    font-size: var(--texto-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--texto-grande);
    font-weight: 600;
    line-height: 1.35;
}

h4 {
    font-size: var(--texto-base);
    font-weight: 600;
}

p {
    margin: 0 0 var(--espacio-3);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--rs-azul);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--duracion-hover) var(--curva);
}

/*
 * Al pasar el ratón: nada de subrayado, nunca (16 oct 2026, Sergi: «No
 * quiero text decoration NUNCA»; antes, 9 oct, se subrayaba el enlace de
 * texto normal). El enlace de texto se pone en el color de la asociación;
 * los que hacen de botón, fila o tarjeta (los que llevan clase) tienen su
 * propio hover.
 */
a:not([class]):hover {
    color: var(--marca-acento);
}

ul, ol {
    margin: 0 0 var(--espacio-3);
    padding-left: var(--espacio-5);
}

img, svg, video, canvas {
    max-width: 100%;
}

code, kbd, samp, pre {
    font-family: var(--fuente-mono);
    font-size: 0.92em;
}

strong {
    font-weight: 600;
}

hr {
    border: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    margin: var(--espacio-6) 0;
}

::selection {
    background: var(--rs-azul-suave-fuerte);
}

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

/* Barras de desplazamiento discretas en escritorio. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--rs-borde-fuerte) transparent;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Solo para lectores de pantalla (texto de botones de icono, etc.). */
/* Solo para lectores de pantalla: mide 1 px aunque otra regla le dé ancho (un input a lo ancho empujaba la ventana). */
.solo-lector {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.texto-mono {
    font-family: var(--fuente-mono);
    font-size: var(--texto-etiqueta);
    letter-spacing: -0.01em;
}

.texto-tenue {
    color: var(--rs-texto-tenue);
}

/* Logo propio de la organización (sección 104), en vez del nombre en texto. */
.cabecera__logo {
    max-height: 2.25rem;
    max-width: 10rem;
    display: block;
    object-fit: contain;
}
/* #endregion */

/* #region Iconos (sprite Lucide en /assets/iconos/iconos.svg) */
.icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.icono--nav {
    width: 20px;
    height: 20px;
}

.icono--grande {
    width: 24px;
    height: 24px;
}
/* #endregion */

/* #region Marca Rasedia */
.marca-rasedia {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
}

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

.marca-rasedia__simbolo {
    width: auto;
    height: 28px;
    flex-shrink: 0;
}

/* El logotipo "rasedia" es una imagen (negro y oro en claro, blanco y oro en oscuro): la altura manda, el ancho sale solo. */
.marca-rasedia__logotipo {
    display: block;
    width: auto;
    height: 16px;
}

/* Cada versión del símbolo y del logotipo, solo en su tema. */
:root:not([data-theme="light"]) .solo-claro,
:root[data-theme="light"] .solo-oscuro {
    display: none !important;
}
/* #endregion */

/* #region Botones */
/*
 * Un único sistema: .boton (primario, en el color de la organización; en
 * el panel técnico, el azul de Rasedia) y sus variantes. Las clases
 * antiguas (.boton-secundario, .boton-enlace...) se conservan porque las
 * pintan pantallas y scripts; aquí solo cambia su aspecto.
 */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: var(--alto-boton);
    padding: 0 var(--espacio-4);
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
    font-size: var(--texto-base);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--duracion-hover) var(--curva),
        border-color var(--duracion-hover) var(--curva),
        color var(--duracion-hover) var(--curva),
        box-shadow var(--duracion-hover) var(--curva);
}

.boton:hover {
    background: var(--marca-boton-hover);
    color: var(--marca-sobre-boton);
    text-decoration: none;
}

.boton:active {
    background: var(--marca-boton-activo);
}

.boton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 40%, transparent);
}

.boton:disabled, .boton[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Botón mientras espera al servidor: sigue ocupando lo mismo, con un giro. */
.boton[aria-busy="true"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.boton[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--marca-sobre-boton) 35%, transparent);
    border-top-color: var(--marca-sobre-boton);
    animation: girar 0.7s linear infinite;
}

/*
 * Secundario (17 oct 2026: «QUE NO QUIERO QUE USES BOTONES GRISES»): ya no
 * es gris. Va con el contorno en el color de la asociación, igual que
 * .boton--contorno, para que nunca compita con la principal (rellena) ni
 * parezca apagado. Lo que no debe verse como botón va en .boton--fantasma.
 */
.boton-secundario,
.boton--contorno {
    background: transparent;
    border-color: color-mix(in srgb, var(--marca-acento) 55%, var(--rs-borde));
    color: var(--marca-acento);
}

.boton-secundario:hover,
.boton--contorno:hover {
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
    border-color: var(--marca-acento);
    color: var(--marca-acento);
}

.boton-secundario:active,
.boton--contorno:active {
    background: color-mix(in srgb, var(--marca-acento) 16%, transparent);
}

.boton-secundario[aria-busy="true"]::after,
.boton--contorno[aria-busy="true"]::after {
    border-color: color-mix(in srgb, var(--marca-acento) 35%, transparent);
    border-top-color: var(--marca-acento);
}

.boton--fantasma {
    background: transparent;
    border-color: transparent;
    color: var(--rs-texto-secundario);
}

.boton--fantasma:hover, .boton--fantasma:active {
    background: var(--rs-hover);
    color: var(--rs-texto);
}

.boton--peligro {
    background: var(--rs-peligro-solido);
    color: var(--rs-texto-sobre-color);
}

.boton--peligro:hover {
    background: color-mix(in srgb, var(--rs-peligro-solido) 90%, white);
}

.boton--peligro:active {
    background: color-mix(in srgb, var(--rs-peligro-solido) 85%, black);
}

/* En una lista de cosas por decidir (3 nov 2026): el sí con contorno verde y el no sin caja, en rojo; el único relleno, «Aprobar las N». */
.boton.boton--contorno-exito {
    border-color: color-mix(in srgb, var(--rs-exito) 55%, transparent);
    background: transparent;
    color: var(--rs-exito-texto);
}

.boton.boton--contorno-exito:hover {
    background: color-mix(in srgb, var(--rs-exito) 10%, transparent);
}

.boton.boton--fantasma-peligro {
    color: var(--rs-peligro-texto);
}

.boton.boton--fantasma-peligro:hover {
    background: color-mix(in srgb, var(--rs-peligro) 10%, transparent);
}

/* Aprobar (15 oct 2026): en las pantallas de decidir sí o no, el sí en verde, sea cual sea el color de la asociación. */
.boton--exito {
    background: var(--rs-exito-solido);
    color: var(--rs-texto-sobre-color);
}

.boton--exito:hover {
    background: color-mix(in srgb, var(--rs-exito-solido) 90%, white);
}

.boton--exito:active {
    background: color-mix(in srgb, var(--rs-exito-solido) 85%, black);
}

/*
 * Jerarquía de botones (15 oct 2026, docs/diseno.md; en toda la plataforma
 * desde el 17 oct): en la barra de acciones de un formulario, «Volver» y
 * «Cancelar» van sin caja, para que «Guardar» se vea solo.
 */
:is(.formulario-acciones, .acciones-formulario) > :is(a.boton.boton-secundario, .boton-secundario:is([data-cancelar], [id*="cancelar"], [id*="volver"])) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--rs-texto-secundario);
}

:is(.formulario-acciones, .acciones-formulario) > :is(a.boton.boton-secundario, .boton-secundario:is([data-cancelar], [id*="cancelar"], [id*="volver"])):hover {
    background: var(--rs-hover);
    color: var(--rs-texto);
}

/* Secundario con intención destructiva (dar de baja, revocar, rechazar): no grita, pero se distingue. */
.boton-secundario.boton--peligro {
    background: transparent;
    border-color: color-mix(in srgb, var(--rs-peligro) 45%, transparent);
    color: var(--rs-peligro);
}

.boton-secundario.boton--peligro:hover {
    background: color-mix(in srgb, var(--rs-peligro) 10%, transparent);
}

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

.boton--grande {
    min-height: 48px;
    padding: 0 var(--espacio-6);
    font-size: var(--texto-grande);
}

.boton--bloque {
    width: 100%;
}

.boton--icono {
    min-width: var(--alto-boton);
    padding: 0;
}

.boton--icono.boton--pequeno {
    min-width: 32px;
}

/*
 * Botón con aspecto de enlace, dentro de tablas y listas. Rojo por
 * defecto porque así lo usan las acciones que deshacen algo (anular,
 * revocar, cancelar); --neutro para las que no (editar, duplicar).
 */
.boton-enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    min-height: 32px;
    padding: 0 var(--espacio-2);
    margin: 0 calc(-1 * var(--espacio-2));
    background: none;
    border: 0;
    border-radius: var(--radio-sm);
    /* El color de la asociación (15 oct 2026: era el rojo de peligro y «Ver todos» parecía un aviso); lo que borra o anula lleva --peligro. */
    color: var(--marca-acento);
    font-size: var(--texto-base);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

.boton-enlace:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    text-decoration: none;
}

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

.boton-enlace:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.boton-enlace--neutro {
    color: var(--rs-azul);
}

.boton-enlace--peligro {
    color: var(--rs-peligro);
}

/* Lo que solo lleva a otra pantalla (16 oct 2026, jerarquía de botones): un enlace con flecha, no otro botón. */
.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 40px;
    color: var(--marca-acento);
    font-weight: 600;
    text-decoration: none;
}

.enlace-flecha .icono {
    width: 16px;
    height: 16px;
    transition: translate var(--duracion-hover) var(--curva);
}

.enlace-flecha:hover .icono {
    translate: 3px 0;
}

.enlace-flecha:focus-visible {
    outline: none;
    border-radius: var(--radio-sm);
    box-shadow: var(--anillo-foco);
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* Escribir por WhatsApp (socio y Mostrador; movido de socio.css el 19 oct 2026): verde de WhatsApp, oscurecido para que el texto blanco se lea bien (contraste AA). */
.boton-whatsapp {
    justify-content: center;
    min-height: 48px;
    max-width: 100%;
    /* «Escribir a Encargado de ropería por WhatsApp» no cabe en una línea en el móvil. */
    white-space: normal;
    text-align: center;
    border-color: #0F7A55;
    background: #0F7A55;
    color: #FFFFFF;
}

.boton-whatsapp:hover {
    border-color: #0C6646;
    background: #0C6646;
    color: #FFFFFF;
}
/* #endregion */

/* #region Formularios: campos */
.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--espacio-4);
    min-width: 0;
}

.campo > label, .campo__etiqueta {
    font-size: var(--texto-etiqueta);
    font-weight: 500;
    line-height: 1.35;
    color: var(--rs-texto);
}

/* Campo obligatorio: se marca junto a la etiqueta, no solo con el color. */
.campo:has(> input[required], > select[required], > textarea[required], > .campo-contrasena > input[required]) > label::after {
    content: " *";
    color: var(--rs-texto-tenue);
    font-weight: 400;
}

/*
 * Todos los controles de texto de la aplicación comparten aspecto, estén
 * o no dentro de .campo (filas repetibles, buscadores, direcciones...).
 */
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
    width: 100%;
    min-height: var(--alto-control);
    padding: 0 var(--espacio-3);
    background: var(--rs-control-fondo);
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-md);
    color: var(--rs-texto);
    font-size: var(--texto-base);
    line-height: 1.4;
    transition:
        border-color var(--duracion-hover) var(--curva),
        box-shadow var(--duracion-hover) var(--curva),
        background-color var(--duracion-hover) var(--curva);
}

:where(textarea) {
    min-height: 96px;
    padding: var(--espacio-3);
    resize: vertical;
}

:where(input, select, textarea)::placeholder {
    color: var(--rs-texto-tenue);
    opacity: 1;
}

:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"]), select, textarea):hover {
    border-color: var(--rs-borde-fuerte);
}

:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"]), select, textarea):focus,
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"]), select, textarea):focus-visible {
    outline: none;
    border-color: var(--rs-azul);
    box-shadow: var(--anillo-foco);
}

/* Solo el color: con «background» a secas, un desplegable desactivado repetía su flecha a lo ancho en el modo claro (17 oct 2026). */
:where(input, select, textarea):disabled, :where(input, textarea)[readonly] {
    background-color: var(--rs-superficie-2);
    color: var(--rs-texto-secundario);
    cursor: not-allowed;
}

:where(input, textarea)[readonly] {
    cursor: text;
}

:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--rs-peligro);
}

select {
    appearance: none;
    padding-right: var(--espacio-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7B0BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

:root[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366717F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select[multiple] {
    background-image: none;
    padding: var(--espacio-2);
}

input[type="search"] {
    padding-left: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7B89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
}

input[type="search"]::-webkit-search-cancel-button {
    filter: grayscale(1);
    cursor: pointer;
}

input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* El selector de color: una muestra grande, no un campo de texto. */
input[type="color"] {
    width: 56px;
    height: var(--alto-control);
    padding: 4px;
    background: var(--rs-control-fondo);
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-md);
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: var(--radio-sm);
}

input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: var(--radio-sm);
}

/* Subida de ficheros: el botón nativo, con aspecto de botón secundario. */
input[type="file"] {
    width: 100%;
    max-width: 100%;
    padding: var(--espacio-3);
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    background: var(--rs-control-fondo);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    cursor: pointer;
}

input[type="file"]:hover {
    border-color: var(--rs-azul);
}

input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--rs-azul);
    box-shadow: var(--anillo-foco);
}

input[type="file"]::file-selector-button {
    margin-right: var(--espacio-3);
    min-height: 34px;
    padding: 0 var(--espacio-3);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 55%, transparent);
    border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
    color: var(--marca-acento);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

input[type="file"]:hover::file-selector-button {
    background: color-mix(in srgb, var(--marca-acento) 20%, transparent);
}

/* Un segundo control dentro del mismo campo (nombre y apellidos): su etiqueta, separada del anterior. */
.campo > :is(input, select, textarea) + label {
    margin-top: var(--espacio-2);
}

.ayuda-campo {
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    line-height: 1.45;
}

/* Varios campos en una fila; en móvil se apilan solos. */
.fila-campos {
    display: flex;
    gap: var(--espacio-4);
    flex-wrap: wrap;
}

.fila-campos > .campo {
    flex: 1 1 12rem;
}

/* Un desplegable pide más sitio: si no cabe entero, baja de línea antes que cortar su texto. */
.fila-campos > .campo:has(> select) {
    flex-basis: 15rem;
}

/* Grupos de campos (fieldset) con su título. */
fieldset {
    margin: 0 0 var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-lg);
    min-width: 0;
}

legend {
    padding: 0 var(--espacio-2);
    margin-left: calc(-1 * var(--espacio-2));
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    color: var(--rs-texto);
}

.formulario-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    margin-top: var(--espacio-6);
}

/* Un buscador con su lupa dentro, a la izquierda (tienda, notificaciones...). */
.campo-buscar {
    position: relative;
    margin: 0;
}

.campo-buscar .icono {
    position: absolute;
    top: 50%;
    left: var(--espacio-3);
    color: var(--rs-texto-tenue);
    pointer-events: none;
    transform: translateY(-50%);
}

.campo-buscar input {
    padding-left: calc(var(--espacio-3) * 2 + 18px);
}
/* #endregion */

/* #region Formularios: casillas, opciones e interruptores */
input[type="checkbox"], input[type="radio"] {
    appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    display: inline-grid;
    place-content: center;
    background: var(--rs-control-fondo);
    border: 1.5px solid var(--rs-borde-fuerte);
    border-radius: var(--radio-xs);
    cursor: pointer;
    transition:
        background-color var(--duracion-hover) var(--curva),
        border-color var(--duracion-hover) var(--curva);
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--rs-texto-sobre-color);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scale(0);
    transition: transform var(--duracion-hover) var(--curva);
}

input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rs-texto-sobre-color);
    transform: scale(0);
    transition: transform var(--duracion-hover) var(--curva);
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: var(--rs-azul);
    border-color: var(--rs-azul);
}

input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:hover, input[type="radio"]:hover {
    border-color: var(--rs-azul);
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Casilla con su texto: toda la fila es pulsable (objetivo táctil ≥ 44px en móvil). */
.campo-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
    min-height: 24px;
    font-size: var(--texto-base);
    font-weight: 500;
    line-height: 1.45;
    color: var(--rs-texto);
    cursor: pointer;
}

.campo-checkbox > input {
    margin-top: 1px;
}

/* Interruptor: la misma casilla con aspecto de encendido/apagado. */
.campo-checkbox--interruptor > input[type="checkbox"] {
    width: 36px;
    height: 20px;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-4);
    border-color: var(--rs-borde-fuerte);
    place-content: center start;
    padding: 0 2px;
}

.campo-checkbox--interruptor > input[type="checkbox"]::before {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    mask: none;
    background: var(--rs-texto-secundario);
    transform: translateX(0);
    transition: transform var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.campo-checkbox--interruptor > input[type="checkbox"]:checked {
    background: var(--rs-azul);
    border-color: var(--rs-azul);
}

.campo-checkbox--interruptor > input[type="checkbox"]:checked::before {
    background: #fff;
    transform: translateX(16px);
}

/* Campo de contraseña con botón de mostrar/ocultar. */
.campo-contrasena {
    position: relative;
    display: flex;
}

.campo-contrasena input {
    flex: 1;
    padding-right: 48px;
}

.boton-mostrar-contrasena {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: var(--rs-texto-tenue);
    font-size: 0;
    cursor: pointer;
    transition: color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

/* El ojo se dibuja aquí (antes era un emoji en la plantilla): mismo trazo que el resto de iconos. */
.boton-mostrar-contrasena::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.boton-mostrar-contrasena--activo::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

.boton-mostrar-contrasena:hover {
    color: var(--rs-texto);
    background: var(--rs-hover);
}

.boton-mostrar-contrasena:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}
/* #endregion */

/* #region Buscador de personas */
.buscador-resultados {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--espacio-1);
}

.buscador-resultados:not(:empty) {
    padding: 4px;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.buscador-resultados .boton-enlace {
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0 var(--espacio-3);
    color: var(--rs-texto);
    text-align: left;
}

.buscador-resultados .boton-enlace:hover {
    background: var(--rs-azul-suave);
}
/* #endregion */

/* #region Selector de idioma */
.selector-idioma {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--rs-superficie-2);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
}

.selector-idioma button {
    min-width: 34px;
    min-height: 30px;
    padding: 0 var(--espacio-2);
    border: 0;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.selector-idioma button:hover {
    color: var(--rs-texto);
}

.selector-idioma button[aria-current="true"] {
    background: var(--rs-superficie-4);
    color: var(--rs-texto);
    box-shadow: var(--sombra-sm);
}

.selector-idioma button:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}
/* #endregion */

/* #region Tarjetas y secciones */
.tarjeta {
    background: var(--rs-superficie-1);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    padding: var(--espacio-5) var(--espacio-6);
    min-width: 0;
}

.tarjeta > h2:first-child, .tarjeta > h3:first-child {
    margin-top: 0;
}

.tarjeta > h2 {
    font-size: var(--texto-grande);
    margin-bottom: var(--espacio-4);
}

/*
 * Explicación bajo el título de una tarjeta: pegada al título y en tono
 * secundario. Un aviso de «sin datos» no es una explicación: va centrado y
 * a todo el ancho (15 oct 2026).
 */
.tarjeta > h2 + p:not(.estado-vacio), .tarjeta > h2 + .ayuda-campo {
    margin-top: calc(-1 * var(--espacio-2));
    margin-bottom: var(--espacio-4);
    color: var(--rs-texto-secundario);
    max-width: 72ch;
}

/* Tarjeta dentro de tarjeta (formulario desplegado en una sección): sin doble marco. */
.tarjeta .tarjeta {
    background: var(--rs-superficie-2);
    border-color: var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    padding: var(--espacio-4) var(--espacio-5);
}

/* Cabecera de una sección o tarjeta: título a la izquierda, acción a la derecha. */
.cabecera-seccion, .eventos-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3) var(--espacio-4);
    flex-wrap: wrap;
    margin-bottom: var(--espacio-4);
}

.cabecera-seccion > h2, .eventos-cabecera > h2, .eventos-cabecera > h1 {
    margin: 0;
}

.cabecera-seccion > h2, .eventos-cabecera > h2 {
    font-size: var(--texto-grande);
}

.separador {
    border: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    margin: var(--espacio-5) 0;
}
/* #endregion */

/* #region Cabecera de página */
.cabecera-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-4);
    flex-wrap: wrap;
    margin-bottom: var(--espacio-6);
}

.cabecera-pagina__textos {
    min-width: 0;
    flex: 1 1 20rem;
}

.cabecera-pagina h1 {
    margin: 0;
}

.cabecera-pagina__descripcion {
    margin: var(--espacio-2) 0 0;
    max-width: 72ch;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-base);
}

.cabecera-pagina__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.enlace-volver {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    margin-bottom: var(--espacio-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.enlace-volver:hover {
    color: var(--rs-texto);
    text-decoration: none;
}
/* #endregion */

/* #region Etiquetas de estado */
/*
 * Siempre texto + punto de color: el color nunca es la única señal. Nunca
 * en gris (19 oct 2026): .etiqueta sola informa (Traspaso, Menor, un cargo)
 * en el cian de Rasedia; lo que es bueno, pendiente, anulado, en marcha o
 * especial lleva su color (--exito, --aviso, --peligro, --proceso, --premium).
 */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--espacio-2) 2px 7px;
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    border: 1px solid color-mix(in srgb, var(--rs-cian) 24%, transparent);
    color: var(--rs-cian-texto);
    font-size: var(--texto-pequeno);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.etiqueta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.etiqueta-activo, .etiqueta--exito {
    background: color-mix(in srgb, var(--rs-exito) 12%, transparent);
    border-color: color-mix(in srgb, var(--rs-exito) 24%, transparent);
    color: var(--rs-exito-texto);
}

.etiqueta-borrador, .etiqueta--aviso {
    background: color-mix(in srgb, var(--rs-aviso) 12%, transparent);
    border-color: color-mix(in srgb, var(--rs-aviso) 24%, transparent);
    color: var(--rs-aviso-texto);
}

.etiqueta-cancelado, .etiqueta--peligro {
    background: color-mix(in srgb, var(--rs-peligro) 12%, transparent);
    border-color: color-mix(in srgb, var(--rs-peligro) 24%, transparent);
    color: var(--rs-peligro-texto);
}

.etiqueta--proceso {
    background: var(--rs-azul-suave);
    border-color: var(--rs-azul-suave-fuerte);
    color: var(--rs-azul-texto);
}

.etiqueta--premium {
    background: var(--rs-oro-suave);
    border-color: color-mix(in srgb, var(--rs-oro) 35%, transparent);
    color: var(--rs-oro-texto);
}

/*
 * La que solo informa (sin modificador: un cargo, «Convocada», «Vence el…», «2 veces»), en las pantallas de una
 * asociación: su punto de color y el texto, sin caja (3 nov 2026). Antes iba en cian; en el color de la asociación
 * (rojo o granate en muchas) parecía un aviso. Las que avisan (éxito, aviso, peligro, en curso) siguen con su caja.
 */
.con-marca .etiqueta:not(.etiqueta-activo, .etiqueta--exito, .etiqueta-borrador, .etiqueta--aviso, .etiqueta-cancelado, .etiqueta--peligro, .etiqueta--proceso, .etiqueta--premium) {
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
    color: var(--rs-texto-secundario);
}

.con-marca .etiqueta:not(.etiqueta-activo, .etiqueta--exito, .etiqueta-borrador, .etiqueta--aviso, .etiqueta-cancelado, .etiqueta--peligro, .etiqueta--proceso, .etiqueta--premium)::before {
    background: var(--tono-seccion, var(--marca-acento));
}

/* «En curso» («En 4 días», «Socios avisados»), igual pero más marcado: en el color de la asociación se leía como peligro. */
.con-marca .etiqueta--proceso {
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
    color: var(--rs-texto);
    font-weight: 600;
}

.con-marca .etiqueta--proceso::before {
    background: var(--tono-seccion, var(--marca-acento));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 22%, transparent);
}
/* #endregion */

/* #region Avisos (mensajes junto al formulario o la sección) */
.aviso {
    position: relative;
    display: block;
    margin: 0 0 var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) 44px;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    color: var(--rs-texto);
    font-size: var(--texto-base);
    line-height: 1.5;
    text-align: left;
}

.aviso::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 13px;
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--rs-texto-secundario);
}

.aviso:last-child {
    margin-bottom: 0;
}

.aviso.aviso-info {
    background: var(--rs-azul-suave);
    border-color: var(--rs-azul-suave-fuerte);
}
/* Lo que solo informa, en neutro: en el color de la asociación parecería un aviso (3 nov 2026). */
.con-marca .aviso.aviso-info {
    background: var(--rs-superficie-2);
    border-color: var(--rs-borde);
}

.aviso.aviso-info::before {
    color: var(--rs-info);
}

/* Y su icono también: en el color de la asociación, un rojo parecía una alarma (4 nov 2026). */
.con-marca .aviso.aviso-info::before {
    color: var(--rs-texto-secundario);
}

.aviso.aviso-exito {
    background: color-mix(in srgb, var(--rs-exito) 10%, transparent);
    border-color: color-mix(in srgb, var(--rs-exito) 26%, transparent);
}

.aviso.aviso-exito::before {
    color: var(--rs-exito);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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");
}

.aviso.aviso-error {
    background: color-mix(in srgb, var(--rs-peligro) 10%, transparent);
    border-color: color-mix(in srgb, var(--rs-peligro) 28%, transparent);
    color: var(--rs-texto);
}

.aviso.aviso-error::before {
    color: var(--rs-peligro);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

.aviso.aviso-pendiente {
    background: color-mix(in srgb, var(--rs-aviso) 10%, transparent);
    border-color: color-mix(in srgb, var(--rs-aviso) 28%, transparent);
    color: var(--rs-texto);
}

.aviso.aviso-pendiente::before {
    color: var(--rs-aviso);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* Aviso que acompaña a un campo (p. ej. "no editable"): más compacto. */
.campo > .aviso {
    margin: var(--espacio-1) 0 0;
    font-size: var(--texto-etiqueta);
}

/*
 * Un aviso con su acción al final («Volver a intentar», «Revisarlo»,
 * «Ponerles cuenta»…): el texto y el botón en una línea si caben y, si no,
 * el botón debajo (19 oct 2026; antes, una copia en cada pantalla).
 */
.aviso--con-accion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
}

.aviso--con-accion > * {
    margin: 0;
}

.aviso--con-accion > p {
    flex: 1 1 22rem;
}

.aviso--con-accion .enlace-flecha {
    min-height: 0;
}
/* #endregion */

/* #region Estados: cargando, vacío, error */
/*
 * Cargando: esqueleto de filas bajo el texto, en vez de un "Cargando..."
 * suelto. Mientras el contenido llega, la pantalla ya tiene su forma.
 */
.estado-cargando {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    margin: 0;
    padding: var(--espacio-2) 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

.estado-cargando::after {
    content: "";
    display: block;
    height: 148px;
    border-radius: var(--radio-sm);
    background:
        linear-gradient(90deg, transparent 0, rgb(255 255 255 / 0.04) 40%, transparent 80%) 0 0 / 200% 100% no-repeat,
        repeating-linear-gradient(180deg, var(--rs-superficie-3) 0 14px, transparent 14px 44px);
    animation: brillo-esqueleto 1.4s var(--curva) infinite;
    opacity: 0.7;
}

@keyframes brillo-esqueleto {
    from { background-position: 150% 0, 0 0; }
    to { background-position: -50% 0, 0 0; }
}

.giro {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--rs-borde-fuerte);
    border-top-color: var(--rs-azul);
    animation: girar 0.7s linear infinite;
    vertical-align: middle;
}

/* Vacío: qué falta y qué se puede hacer, centrado y con un icono discreto. */
.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0;
    padding: var(--espacio-10) var(--espacio-4);
    text-align: center;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-base);
}

.estado-vacio::before {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: var(--radio-md);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7B89' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / 22px no-repeat,
        var(--rs-superficie-3);
    border: 1px solid var(--rs-borde);
}

/* En una línea (3 nov 2026): para «no hay nada» dentro de una tarjeta, sin una caja grande. */
.estado-vacio--linea {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 0;
    text-align: left;
    font-size: var(--texto-etiqueta);
}

.estado-vacio--linea::before {
    flex: none;
    width: 30px;
    height: 30px;
    background-size: 16px;
}

/* Sin permiso / error de sección: mismo patrón, con icono de candado. */
.aviso-sin-permiso {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--espacio-2);
    padding: var(--espacio-12) var(--espacio-6);
}

.aviso-sin-permiso::before {
    content: "";
    width: 48px;
    height: 48px;
    margin-bottom: var(--espacio-2);
    border-radius: var(--radio-lg);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F05D67' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / 24px no-repeat,
        color-mix(in srgb, var(--rs-peligro) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rs-peligro) 24%, transparent);
}

.aviso-sin-permiso h2 {
    margin: 0;
    font-size: var(--texto-h3);
    color: var(--rs-texto);
}

.aviso-sin-permiso p {
    margin: 0;
    max-width: 48ch;
    color: var(--rs-texto-secundario);
}
/* #endregion */

/* #region Tablas */
/*
 * Una sola tabla para toda la aplicación (la clase se sigue llamando
 * .tabla-eventos porque la pintan muchas pantallas y scripts). En móvil
 * cada fila pasa a ser una tarjeta con la cabecera de cada dato al lado
 * (data-etiqueta, que pone interfaz.js a partir del <th>).
 */
.tabla-eventos {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-base);
    font-variant-numeric: tabular-nums;
}

.tabla-eventos th, .tabla-eventos td {
    text-align: left;
    padding: var(--espacio-3) var(--espacio-4);
    border-bottom: 1px solid var(--rs-borde-sutil);
    vertical-align: middle;
}

.tabla-eventos th:first-child, .tabla-eventos td:first-child {
    padding-left: 0;
}

.tabla-eventos th:last-child, .tabla-eventos td:last-child {
    padding-right: 0;
}

.tabla-eventos td {
    height: 52px;
}

/*
 * El color de las celdas y de sus enlaces, con :where() (sin peso, 19 oct
 * 2026): así la clase que ponga cada pantalla en su celda (.conta-entrada,
 * .fila-apagada td, .texto-tenue...) gana siempre, sin selectores largos.
 */
:where(.tabla-eventos) td {
    color: var(--rs-texto);
}

.tabla-eventos th {
    padding-top: var(--espacio-2);
    padding-bottom: var(--espacio-2);
    border-bottom-color: var(--rs-borde);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabla-eventos tbody tr {
    transition: background-color var(--duracion-hover) var(--curva);
}

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

.tabla-eventos tbody tr:last-child td {
    border-bottom: 0;
}

/* Una columna de importes o cantidades: a la derecha, con cifras del mismo ancho y sin partirse (en el móvil, como las demás). */
.tabla-eventos :is(th, td).numero {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/*
 * Una fila que lleva a su ficha (19 oct 2026: «no hace falta el botón de
 * abrir, al hacer clic encima debe llevar al lugar»): el nombre es el enlace
 * de verdad (teclado y lectores) y su ::after cubre toda la fila; lo que
 * haya que pulsar dentro (la casilla, un menú) queda por encima.
 */
.fila-enlazada {
    position: relative;
    cursor: pointer;
}

.fila-enlazada__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
}

.fila-enlazada :is(input, button, label, select, details, a:not(.fila-enlazada__enlace)) {
    position: relative;
    z-index: 1;
}

:where(.tabla-eventos td) a:not(.boton) {
    font-weight: 500;
}

/* Sin display: flex en la propia celda: la sacaría de la tabla. */
.tabla-eventos__acciones {
    white-space: nowrap;
    text-align: right !important;
}

.tabla-eventos__acciones > * + * {
    margin-inline-start: var(--espacio-3);
}

/* Botón de ordenar en la cabecera: flecha gris; la del orden activo, azul. */
.tabla-eventos__orden {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.tabla-eventos__orden::after {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    opacity: 0.4;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tabla-eventos__orden:hover {
    color: var(--rs-texto);
}

.tabla-eventos__orden--activo {
    color: var(--rs-texto);
}

.tabla-eventos__orden--activo::after {
    opacity: 1;
    background: var(--rs-azul);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.tabla-eventos__orden[aria-sort="descending"]::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.tabla-eventos__orden:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
    border-radius: var(--radio-xs);
}

/* La tabla, dentro de su tarjeta, puede deslizarse de lado si no cabe. */
.tabla-desplazable {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--espacio-6));
    padding: 0 var(--espacio-6);
}

@media (max-width: 767px) {
    .tabla-desplazable {
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .tabla-eventos thead {
        display: none;
    }

    /* La fila del total (tfoot, con su «Total» en un th) se convierte en ficha como las demás. */
    .tabla-eventos, .tabla-eventos tbody, .tabla-eventos tfoot, .tabla-eventos tr, .tabla-eventos td, .tabla-eventos tfoot th {
        display: block;
        width: 100%;
    }

    .tabla-eventos tr {
        padding: var(--espacio-3) 0;
        border-bottom: 1px solid var(--rs-borde-sutil);
    }

    .tabla-eventos tbody tr:last-child {
        border-bottom: 0;
    }

    .tabla-eventos tbody tr:hover {
        background: none;
    }

    .tabla-eventos td, .tabla-eventos td:first-child, .tabla-eventos td:last-child {
        height: auto;
        padding: 3px 0;
        border: 0;
        text-align: left !important;
    }

    .tabla-eventos td:empty {
        display: none;
    }

    .tabla-eventos td:first-child {
        font-weight: 600;
        padding-bottom: var(--espacio-1);
    }

    .tabla-eventos td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones) {
        display: grid;
        grid-template-columns: minmax(7rem, 38%) 1fr;
        gap: var(--espacio-3);
    }

    .tabla-eventos td[data-etiqueta]:not(:first-child):not(.tabla-eventos__acciones)::before {
        content: attr(data-etiqueta);
        color: var(--rs-texto-tenue);
        font-size: var(--texto-etiqueta);
    }

    .tabla-eventos td[data-etiqueta] > * {
        justify-self: start;
    }

    /* Una celda vacía no sale con su título suelto («Salida» y nada al lado). */
    .tabla-eventos td[data-etiqueta]:empty:not(:first-child):not(.tabla-eventos__acciones) {
        display: none;
    }

    .tabla-eventos__acciones {
        white-space: normal;
        padding-top: var(--espacio-2) !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: var(--espacio-1) var(--espacio-4);
    }

    .tabla-eventos__acciones > * + * {
        margin-inline-start: 0;
    }

    /* Sin botones, sin línea en blanco al pie de la ficha (el display de arriba ganaba a td:empty). */
    .tabla-eventos__acciones:empty {
        display: none !important;
    }
}
/* #endregion */

/* #region Paginación */
/* Un solo bloque en el centro: anterior, las páginas y siguiente juntos, y cuántos hay al lado. */
/* Con una sola página no hay nada que pasar: ni «Página 1 de 1» ni dos botones apagados. */
.paginacion:has(> .boton:first-child:disabled):has(> .boton:last-child:disabled) {
    display: none;
}

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2) var(--espacio-4);
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}
/* #endregion */

/* #region Selección de varias filas (seleccion.js, 6 oct 2026) */
.casilla-fila,
.casilla-todas {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--rs-azul);
    cursor: pointer;
    vertical-align: middle;
}

th.columna-casilla,
td.columna-casilla {
    width: 2.5rem;
    padding-inline-end: 0;
}

.fila--marcada,
.fila--marcada > td {
    background: var(--rs-azul-suave);
}

.barra-seleccion {
    position: sticky;
    bottom: var(--espacio-4);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-top: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-2);
    box-shadow: var(--sombra-lg);
    animation: aparecer-dialogo var(--duracion-modal) var(--curva);
}

.barra-seleccion[hidden] {
    display: none;
}

.barra-seleccion__cuenta {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.barra-seleccion__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

/* «Más»: las acciones de vez en cuando, en un menú que se abre hacia arriba (la barra está abajo). */
.barra-seleccion__mas {
    position: relative;
}

.barra-seleccion__mas[hidden] {
    display: none;
}

.barra-seleccion__mas > summary {
    list-style: none;
}

.barra-seleccion__mas > summary::-webkit-details-marker {
    display: none;
}

.barra-seleccion__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--espacio-2));
    z-index: 5;
    display: grid;
    min-width: 14rem;
    padding: var(--espacio-1);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    box-shadow: var(--sombra-lg);
}

.barra-seleccion__menu .boton {
    justify-content: flex-start;
    width: 100%;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.barra-seleccion__menu .boton:hover {
    background: var(--rs-superficie-2);
}

.barra-seleccion__menu .boton--peligro {
    color: var(--rs-peligro);
}

.barra-seleccion__menu .boton--peligro:hover {
    background: color-mix(in srgb, var(--rs-peligro) 10%, transparent);
}

/* En el móvil, «Más» queda a la izquierda: el menú se abre hacia la derecha para no salirse. */
@media (max-width: 767px) {
    .barra-seleccion__menu {
        right: auto;
        left: 0;
    }
}
/* #endregion */

/* #region Pantalla mientras arranca (interfaz.js, pintarSinSaltos) */
/*
 * El contenido no se enseña hasta que el JS lo ha colocado: así no asoman
 * un segundo las otras pestañas ni los bloques que aún no saben si van. Si
 * el JS fallase, aparece igual a los 4 s.
 */
:where(.contenido-gestion, .contenido-socio) {
    opacity: 0;
    animation: pantalla-aparece 0.2s ease-out 4s forwards;
}

:where(.pantalla-lista) :where(.contenido-gestion, .contenido-socio) {
    opacity: 1;
    animation: pantalla-aparece 0.2s ease-out;
}

/* Con un solo idioma activo, nada que traducir: los botones de traducciones no salen (gestion/comun.js). */
.un-solo-idioma .solo-varios-idiomas {
    display: none !important;
}

/* Lo que ya se ha pintado una vez y se pone al día solo (mantenerAlDia): sin volver a animar la entrada. */
.sin-animar,
.sin-animar * {
    animation: none !important;
}

@keyframes pantalla-aparece {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.pantalla-lista) :where(.contenido-gestion, .contenido-socio) {
        animation: none;
    }
}
/* #endregion */

/* #region Llegar al punto justo desde un enlace (comun.js, irAlPuntoJusto) */
.punto-justo {
    scroll-margin-top: calc(var(--espacio-8) * 3);
    animation: punto-justo 2.6s var(--curva);
}

@keyframes punto-justo {
    0%,
    60% {
        box-shadow: 0 0 0 3px var(--rs-azul);
    }

    100% {
        box-shadow: 0 0 0 3px transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .punto-justo {
        animation: none;
        outline: 3px solid var(--rs-azul);
    }
}
/* #endregion */

/* #region Conmutador: dos o tres botones que se excluyen entre sí (socio y panel; movido de socio.css el 7 oct 2026) */
.conmutador {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    border: 1px solid var(--rs-borde-sutil);
}

.conmutador button {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 34px;
    padding: 0 var(--espacio-3);
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: var(--rs-texto-secundario);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.conmutador button .icono {
    width: 16px;
    height: 16px;
}

.conmutador button[aria-pressed="true"] {
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    box-shadow: var(--sombra-sm);
}

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

.conmutador button[aria-pressed="true"] .icono {
    color: var(--rs-azul);
}

/*
 * Con conmutador.js (todos, solo), el fondo del elegido es una pastilla que
 * se desliza de un botón a otro; los botones quedan transparentes encima.
 * Un conmutador con el elegido de otro color o forma lo cambia con
 * --conmutador-pastilla y --conmutador-radio.
 */
.conmutador--animado {
    position: relative;
    isolation: isolate;
}

.conmutador--animado button,
.conmutador--animado button[aria-pressed="true"] {
    position: relative;
    background: none;
    box-shadow: none;
    transition: color 0.25s var(--curva);
}

.conmutador--animado button:focus-visible {
    box-shadow: var(--anillo-foco);
}

.conmutador--animado button .icono {
    transition: color 0.25s var(--curva);
}

.conmutador__pastilla {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--conmutador-radio, var(--radio-sm));
    background: var(--conmutador-pastilla, var(--rs-superficie-1));
    box-shadow: var(--sombra-sm);
    pointer-events: none;
}

/*
 * Un solo movimiento, suave y sin rebote, igual en los conmutadores del
 * socio y en las pestañas del panel (15 oct 2026: «no es limpia, marea»).
 * Solo se desliza y se estira; el alto y el color no se animan.
 */
.conmutador--listo .conmutador__pastilla {
    transition: transform var(--duracion-deslizar) var(--curva-deslizar), width var(--duracion-deslizar) var(--curva-deslizar);
    will-change: transform, width;
}

@media (prefers-reduced-motion: reduce) {
    .conmutador--listo .conmutador__pastilla {
        transition: none;
    }
}

/* Lo que enseña la pestaña elegida entra con un fundido corto, mientras la pieza se desliza. */
@media (prefers-reduced-motion: no-preference) {
    .pestanas__panel:not([hidden]) {
        animation: aparecer-suave 0.24s ease-out;
    }
}

/* Lo que enseña cada botón aparece con un fundido corto al cambiar (lo pone quien lo usa). */
.aparecer-suave {
    animation: aparecer-suave 0.3s var(--curva);
}

@keyframes aparecer-suave {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}
/* #endregion */

/* #region Tiempo para terminar una compra (plazo-compra.js, docs/compras-con-tiempo.md) */
.plazo-compra {
    position: sticky;
    top: var(--espacio-2);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid color-mix(in srgb, var(--rs-azul) 35%, var(--rs-borde));
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--rs-azul) 10%, var(--rs-superficie-2));
    color: var(--rs-texto);
    font-variant-numeric: tabular-nums;
}

.plazo-compra[hidden] {
    display: none;
}

.plazo-compra > .icono {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--rs-azul);
}

/* El texto ocupa lo que sobra: lo que venga detrás (el botón de la caja) queda a la derecha. */
.plazo-compra strong {
    flex: 1;
    font-size: var(--texto-etiqueta);
}

.plazo-compra--poco {
    border-color: color-mix(in srgb, var(--rs-aviso) 55%, var(--rs-borde));
    background: color-mix(in srgb, var(--rs-aviso) 14%, var(--rs-superficie-2));
}

.plazo-compra--poco > .icono {
    color: var(--rs-aviso);
}
/* #endregion */

/* #region Casilla de un número con su unidad dentro («2,00 €», «10 %»), alineado a la derecha (17 oct 2026; panel y socio, movido de gestion.css el 19 oct) */
.campo-unidad {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Dentro de un campo (en columna), a su medida: si no, ocupaba todo el ancho y la unidad se iba lejos. */
.campo > .campo-unidad {
    align-self: flex-start;
}

.campo-unidad input {
    width: 7.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.campo-unidad:has(.campo-unidad__unidad) input {
    padding-right: 2rem;
}

/* Sin las flechitas de subir y bajar del navegador: tapaban el número al lado de su unidad. */
.campo-unidad input::-webkit-inner-spin-button,
.campo-unidad input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.campo-unidad input[type="number"] {
    appearance: textfield;
}

.campo-unidad__unidad {
    position: absolute;
    right: var(--espacio-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    pointer-events: none;
}

/* «7 días»: la unidad es una palabra, así que necesita más sitio que «€». */
.campo-unidad--palabra {
    justify-self: start;
    width: fit-content;
    gap: var(--espacio-2);
}

.campo-unidad--palabra input {
    width: 7rem;
}

.campo-unidad.campo-unidad--palabra:has(.campo-unidad__unidad) input {
    padding-right: var(--espacio-3);
}

/* La palabra, fuera del campo y a su lado: «días antes» no cabía dentro y se montaba encima del número. */
.campo-unidad--palabra > .campo-unidad__unidad {
    position: static;
    white-space: nowrap;
}
/* #endregion */

/* #region Diálogos (dialogo.js) */
.dialogo {
    width: min(520px, calc(100vw - 2 * var(--espacio-4)));
    max-height: calc(100dvh - 2 * var(--espacio-8));
    padding: 0;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-2);
    color: var(--rs-texto);
    box-shadow: var(--sombra-lg);
}

.dialogo[open] {
    animation: aparecer-dialogo var(--duracion-modal) var(--curva);
}

.dialogo::backdrop {
    background: var(--rs-velo);
    backdrop-filter: blur(2px);
}

.dialogo__formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    padding: var(--espacio-6);
    margin: 0;
}

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

.dialogo__icono {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radio-md);
    background: var(--rs-azul-suave);
    color: var(--rs-azul);
}

.dialogo--peligro .dialogo__icono {
    background: color-mix(in srgb, var(--rs-peligro) 12%, transparent);
    color: var(--rs-peligro);
}

.dialogo__mensaje {
    margin: 0;
    padding-top: var(--espacio-2);
    font-size: var(--texto-grande);
    line-height: 1.5;
    white-space: pre-line;
    /* Un enlace largo (el del registro por WhatsApp) parte línea en vez de salirse. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.dialogo__error {
    margin: 0;
    color: var(--rs-peligro);
    font-size: var(--texto-base);
}

.dialogo__acciones {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-top: var(--espacio-2);
}

@keyframes aparecer-dialogo {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
    .dialogo {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: var(--radio-xl) var(--radio-xl) 0 0;
        border-bottom: 0;
    }

    .dialogo__acciones {
        flex-direction: column-reverse;
    }

    .dialogo__acciones .boton {
        width: 100%;
        min-height: 48px;
    }
}
/* #endregion */

/* #region Visor de fotos (visor-fotos.js): una foto de la plataforma en grande, encima y sin otra pestaña */
/* El visor: la foto en grande sobre fondo oscuro, con su pie, cuántas van y las flechas. */
/* Sin la clase .dialogo (no se confunde con los demás diálogos): lo suyo, aquí. */
.visor {
    width: min(88rem, calc(100vw - 2 * var(--espacio-4)));
    margin: auto;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-xl);
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.4);
    animation: aparecer-dialogo 220ms var(--curva);
    padding: 0;
    overflow: hidden;
    background: #0B0F15;
    color: #FFFFFF;
}

.visor__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-4);
}

.visor__titulo {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.visor__contador {
    color: rgb(255 255 255 / 0.7);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

.visor__cabecera .boton--fantasma {
    color: #FFFFFF;
}

.visor__cabecera .boton--fantasma:hover {
    background: rgb(255 255 255 / 0.12);
}

.visor::backdrop {
    background: var(--rs-velo);
    backdrop-filter: blur(2px);
}

/*
 * Un tamaño fijo: la foto se ajusta dentro sin deformarse y el visor no salta
 * mientras carga. Las filas no crecen con ella (4 nov 2026: una foto alta hacía
 * la fila más alta que el visor, y se veía cortada).
 */
.visor__marco {
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    height: calc(100dvh - 8rem);
    padding: 0 var(--espacio-3) var(--espacio-3);
}

/* En el móvil no es una hoja de abajo como los formularios: centrado, con margen y todas sus esquinas. */
@media (max-width: 767px) {
    .visor {
        width: calc(100vw - 2 * var(--espacio-4));
        margin: auto;
        border-bottom: 1px solid var(--rs-borde);
        border-radius: var(--radio-xl);
    }

    .visor__marco {
        height: 72dvh;
    }

    .visor__flecha {
        width: 2.25rem;
        height: 2.25rem;
    }
}

.visor__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.visor__flecha {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.5);
    color: #FFFFFF;
    transform: translateY(-50%);
}

.visor__flecha:hover {
    background: rgb(0 0 0 / 0.75);
}

.visor__flecha--anterior {
    left: var(--espacio-3);
}

.visor__flecha--siguiente {
    right: var(--espacio-3);
}

.visor__flecha[hidden] {
    display: none;
}
/* #endregion */

/* #region Responsive: base */
@media (max-width: 767px) {
    :root {
        --texto-h1: 1.625rem;
        --texto-h2: 1.375rem;
        --texto-h3: 1.125rem;
    }

    .tarjeta {
        padding: var(--espacio-4);
        border-radius: var(--radio-md);
    }

    .boton {
        min-height: var(--alto-control);
    }

    .boton--pequeno {
        min-height: 36px;
    }

    .boton-enlace {
        min-height: 40px;
    }

    .campo-checkbox {
        min-height: 32px;
        align-items: center;
    }

    .campo-checkbox > input {
        margin-top: 0;
    }

    fieldset {
        padding: var(--espacio-3) var(--espacio-4);
    }

    .formulario-acciones .boton {
        flex: 1 1 auto;
    }

    /* Evita que iOS amplíe la página al tocar un campo (necesita ≥ 16px). */
    :where(input, select, textarea) {
        font-size: 16px;
    }
}
/* #endregion */

/* #region Tarjeta centrada (errores, baja de promociones) */
.tarjeta--centrada {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tarjeta--centrada > h1 {
    margin-bottom: var(--espacio-2);
}

.tarjeta--centrada > p, .tarjeta--centrada > div {
    width: 100%;
    color: var(--rs-texto-secundario);
}

.tarjeta--centrada .aviso {
    text-align: left;
}

.tarjeta__icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--espacio-5);
    border-radius: var(--radio-lg);
    background: var(--rs-azul-suave);
    border: 1px solid var(--rs-azul-suave-fuerte);
    color: var(--rs-azul);
}
/* #endregion */

/* #region Portada de la plataforma (dominio base) */
.portada {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: var(--espacio-12) max(var(--espacio-6), calc((100% - 1120px) / 2));
    overflow: hidden;
    background:
        radial-gradient(48rem 32rem at 78% 45%, rgb(37 140 255 / 0.18), transparent 65%),
        radial-gradient(30rem 20rem at 90% 10%, rgb(41 213 255 / 0.08), transparent 70%),
        linear-gradient(160deg, #0B1017 0%, #05070A 100%);
    color: #F6F8FA;
}

.portada::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 70% 50%, black 15%, transparent 70%);
    pointer-events: none;
}

.portada__contenido {
    position: relative;
    z-index: 1;
    max-width: 36rem;
}

.portada__logo {
    display: block;
    width: min(320px, 80%);
    height: auto;
    margin-bottom: var(--espacio-12);
}

.portada__titulo {
    margin: 0 0 var(--espacio-5);
    font-size: clamp(2.25rem, 5vw, var(--texto-display));
    line-height: 1.08;
    color: #F6F8FA;
}

.portada__lema {
    margin: 0 0 var(--espacio-8);
    color: #A7B0BC;
    font-size: 1.125rem;
}

.portada__asociaciones {
    margin: 0 0 var(--espacio-3);
    padding-left: var(--espacio-4);
    border-left: 2px solid var(--rs-oro);
    color: #F6F8FA;
}

.portada__contacto {
    margin: var(--espacio-6) 0 0;
    color: #84909E;
}

.portada__visor {
    position: absolute;
    right: max(var(--espacio-6), calc((100% - 1120px) / 2));
    top: 50%;
    width: min(380px, 30vw);
    height: auto;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 48px rgb(41 213 255 / 0.2)) drop-shadow(0 24px 48px rgb(0 0 0 / 0.55));
    opacity: 0.95;
}

@media (max-width: 1023px) {
    .portada__visor {
        position: static;
        display: none;
    }
}
/* #endregion */

/* #region Estado vacío suelto en la página: dentro de su propia tarjeta */
:is(.contenido-socio, .contenido-gestion) > .estado-vacio {
    background: var(--rs-superficie-1);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
}
/* #endregion */

/* #region Panel técnico: segundo factor */
.alta-segundo-factor {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.alta-segundo-factor > p {
    margin: 0;
    color: var(--rs-texto-secundario);
}

/* El QR siempre sobre blanco: lo leen mejor las apps. */
.alta-segundo-factor__qr {
    align-self: center;
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    background: #fff;
    line-height: 0;
}

.alta-segundo-factor__secreto {
    display: block;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-md);
    background: var(--rs-control-fondo);
    font-family: var(--fuente-mono);
    font-size: var(--texto-etiqueta);
    letter-spacing: 0.06em;
    word-break: break-all;
    user-select: all;
}

#campo-codigo {
    font-family: var(--fuente-mono);
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-align: center;
}

.codigos-recuperacion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-2) var(--espacio-4);
    margin: var(--espacio-4) 0;
    padding: var(--espacio-4) var(--espacio-4) var(--espacio-4) var(--espacio-8);
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    background: var(--rs-control-fondo);
    font-family: var(--fuente-mono);
    font-size: var(--texto-base);
    letter-spacing: 0.04em;
}

#seccion-codigos-recuperacion > p {
    color: var(--rs-texto-secundario);
}

#seccion-codigos-recuperacion .formulario-acciones {
    margin: 0 0 var(--espacio-4);
}
/* #endregion */

/* #region Un texto largo con sus saltos de línea (las traducciones) */
.texto-seccion {
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* #endregion */

/* #region Menú de usuario y desplegables (paneles y área de socio) */
.menu-desplegable {
    position: relative;
}

.menu-desplegable > summary {
    list-style: none;
    cursor: pointer;
}

.menu-desplegable > summary::-webkit-details-marker {
    display: none;
}

.menu-usuario__boton {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: var(--alto-boton);
    padding: 0 var(--espacio-2) 0 4px;
    border-radius: var(--radio-pildora);
    color: var(--rs-texto-secundario);
    transition: background-color var(--duracion-hover) var(--curva);
}

.menu-usuario__boton:hover, .menu-desplegable[open] > .menu-usuario__boton {
    background: var(--rs-hover);
    color: var(--rs-texto);
}

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

.menu-usuario__nombre {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.menu-usuario__flecha {
    width: 16px;
    height: 16px;
    transition: transform var(--duracion-menu) var(--curva);
}

.menu-desplegable[open] .menu-usuario__flecha {
    transform: rotate(180deg);
}

.avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rs-superficie-4);
    border: 1px solid var(--rs-borde-fuerte);
    color: var(--rs-texto);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Su foto, si la tiene (redonda, en todos los paneles); si no, sus iniciales. */
.avatar--foto {
    overflow: hidden;
    padding: 0;
}

.avatar--foto img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.menu-desplegable__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--espacio-2));
    z-index: 50;
    min-width: 240px;
    padding: 6px;
    background: var(--rs-superficie-2);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
    animation: aparecer-menu var(--duracion-menu) var(--curva);
}

@keyframes aparecer-menu {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.menu-desplegable__titulo {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-desplegable__opcion {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    min-height: 38px;
    padding: 0 var(--espacio-3);
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: var(--rs-texto);
    font-size: var(--texto-base);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-desplegable__opcion .icono {
    width: 16px;
    height: 16px;
    color: var(--rs-texto-tenue);
}

.menu-desplegable__opcion:hover {
    background: var(--rs-hover);
    color: var(--rs-texto);
    text-decoration: none;
}

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

.menu-desplegable__opcion--peligro, .menu-desplegable__opcion--peligro .icono {
    color: var(--rs-peligro);
}

.menu-desplegable__separador {
    margin: 6px 0;
}
/* #endregion */

/* #region Plegables: un desplegable con su icono, su título, cuántos lleva y la flecha (19 oct 2026) */
/*
 * <details class="plegable"><summary>[icono]<span>Título</span><small>3 puntos</small>[chevron-down]</summary>…</details>
 * Para lo que se abre dentro de una tarjeta (el orden del día, los
 * resultados, la explicación de algo): sin el triángulo del navegador, con
 * la flecha que gira al abrirlo. Se abre sin saltos (desplegar.js).
 */
.plegable {
    border-top: 1px solid var(--rs-borde-sutil);
}

.plegable > summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 44px;
    padding: var(--espacio-2) 0;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
}

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

.plegable > summary > .icono {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--rs-texto-tenue);
}

/* El título ocupa lo que sobre (una .etiqueta a su lado, a su medida). */
.plegable > summary > span:not(.etiqueta) {
    flex: 1;
    min-width: 0;
}

.plegable > summary > small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.plegable > summary > .icono:last-child {
    transition: transform var(--duracion-menu) var(--curva);
}

.plegable[open] > summary > .icono:last-child {
    transform: rotate(180deg);
}

.plegable > summary:hover > span {
    color: var(--marca-acento);
}

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

@media (prefers-reduced-motion: reduce) {
    .plegable > summary > .icono:last-child {
        transition: none;
    }
}
/* #endregion */

/* #region Ayuda: las piezas de las guías (socio y Junta; la pantalla de Ayuda, en ayuda.css) */
/*
 * Lo que sale también fuera de la Ayuda: en la guía rápida de cada pantalla
 * del socio («¿Cómo funciona?», guia-rapida.js) y en el enlace «¿Cómo
 * funciona?» del panel. La pantalla de Ayuda en sí (Rasi con el buscador,
 * los grupos y cada guía) está en ayuda.css (19 oct 2026).
 */

/* Bocadillo de cómic: lo que "dice" la mascota. */
.ayuda-bocadillo {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: var(--espacio-4) var(--espacio-5);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
    border: 1px solid var(--rs-borde);
}

.ayuda-bocadillo::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -8px;
    width: 14px;
    height: 14px;
    background: inherit;
    border-left: 1px solid var(--rs-borde);
    border-bottom: 1px solid var(--rs-borde);
    transform: rotate(45deg);
}

.ayuda-bocadillo > :first-child {
    margin-top: 0;
}

.ayuda-bocadillo > :last-child {
    margin-bottom: 0;
}

.ayuda-bocadillo--grande p {
    font-size: var(--texto-grande);
    line-height: 1.5;
}

/* El icono de una guía, en su cuadro. */
.ayuda-guia__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--marca-acento) 12%, transparent);
}

.ayuda-guia__icono .icono {
    width: 22px;
    height: 22px;
    color: var(--marca-acento);
    flex-shrink: 0;
}

/* Pasos con número grande: se siguen con el dedo. */
.ayuda-pasos {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-5);
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.ayuda-pasos li {
    position: relative;
    min-height: 36px;
    padding: 6px 0 0 52px;
    counter-increment: paso;
    font-size: var(--texto-grande);
    line-height: 1.5;
}

.ayuda-pasos li::before {
    content: counter(paso);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--marca-fondo);
    color: var(--marca-sobre);
    font-family: var(--fuente-display);
    font-weight: 700;
}

/* Cada paso: la primera frase (lo que hay que hacer) destacada; el resto, más suave. */
.ayuda-paso__accion {
    font-weight: 600;
}

.ayuda-paso__detalle {
    color: var(--rs-texto-secundario);
}

.ayuda-truco {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-4);
}

.ayuda-truco__mascota {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}

/* "¿Cómo funciona?" junto al título de cada pantalla. */
.cabecera-pagina:has(.enlace-ayuda) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espacio-3);
}

.enlace-ayuda {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: 2px var(--espacio-3) 2px 2px;
    border-radius: var(--radio-pildora);
    border: 1px solid var(--rs-borde);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    text-decoration: none;
}

.enlace-ayuda:hover {
    background: var(--rs-hover);
    text-decoration: none;
}

.enlace-ayuda img {
    width: 36px;
    height: 36px;
}

@media (max-width: 767px) {
    .ayuda-pasos li,
    .ayuda-bocadillo--grande p {
        font-size: var(--texto-base);
    }

    .ayuda-truco__mascota {
        width: 56px;
        height: 56px;
    }
}
/* #endregion */

/* #region Ayuda: la guía de la pantalla, encima (guia-rapida.js; socio desde el 10 oct 2026, Junta desde el 19 oct; movido de socio.css) */
/*
 * «¿Cómo funciona?»: la guía de la pantalla, encima, sin salir. En el
 * ordenador, un panel centrado; en el móvil, una hoja que sube desde abajo.
 */
.guia-rapida {
    width: min(40rem, calc(100vw - 2 * var(--espacio-4)));
    max-height: min(46rem, calc(100dvh - 2 * var(--espacio-5)));
    padding: 0;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    box-shadow: var(--sombra-lg);
    overflow: hidden;
}

.guia-rapida[open] {
    display: flex;
    flex-direction: column;
    animation: guia-rapida-entra 0.26s var(--curva);
}

.guia-rapida::backdrop {
    background: rgb(0 0 0 / 0.4);
}

.guia-rapida__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-5);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.guia-rapida__cabecera h2 {
    flex: 1;
    margin: 0;
    font-size: var(--texto-grande);
}

.guia-rapida__cuerpo {
    display: grid;
    flex: 1;
    gap: var(--espacio-4);
    padding: var(--espacio-5);
    overflow-y: auto;
}

.guia-rapida__cuerpo .ayuda-pasos {
    margin: 0;
}

.guia-rapida__pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-5);
    border-top: 1px solid var(--rs-borde-sutil);
}

@keyframes guia-rapida-entra {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@media (max-width: 767px) {
    .guia-rapida {
        width: 100vw;
        max-width: 100vw;
        max-height: 88dvh;
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    }

    .guia-rapida__cuerpo {
        padding: var(--espacio-4);
    }

    .guia-rapida__pie {
        padding: var(--espacio-3) var(--espacio-4) calc(var(--espacio-3) + env(safe-area-inset-bottom));
    }

    .guia-rapida__pie .boton {
        flex: 1;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guia-rapida[open] {
        animation: none;
    }
}
/* #endregion */

/* #region Las guías de los puestos: pantallazos y el «¿Cómo funciona?» de las apps (29 oct 2026) */
/* Aquí y no en ayuda.css: el «¿Cómo funciona?» de cada pantalla trae los pasos de la Ayuda con sus pantallazos. */
.ayuda-paso__captura,
.guia-app__captura {
    display: block;
    max-width: min(100%, 26rem);
    max-height: 26rem;
    margin-top: var(--espacio-2);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
}

.guia-app-enlace {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: var(--espacio-2);
    margin-inline: auto;
}
/* #endregion */

/* #region Paginación con números (11 oct 2026): ir directo a una página */
.paginacion__pasos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Anterior y siguiente, del mismo tamaño que los números; en el móvil, solo la flecha. */
.paginacion__paso {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--rs-texto);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    cursor: pointer;
}

.paginacion__paso .icono {
    width: 16px;
    height: 16px;
}

.paginacion__paso:hover:not(:disabled) {
    border-color: var(--marca-acento);
    color: var(--marca-acento);
}

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

.paginacion__paso:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 560px) {
    .paginacion__paso {
        padding: 0 8px;
    }

    .paginacion__paso span {
        display: none;
    }
}

.paginacion__numeros {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.paginacion__numero {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

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

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

.paginacion__numero[aria-current="page"] {
    border-color: var(--marca-boton);
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
    font-weight: 700;
    cursor: default;
}

.paginacion__hueco {
    padding: 0 2px;
    color: var(--rs-texto-tenue);
}

.paginacion__total {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region Estrellas de la encuesta después del evento (11 oct 2026) */
/* Cinco estrellas rellenas hasta --valor (de 0 a 1): la media de una opinión. */
.estrellas {
    position: relative;
    display: inline-block;
    color: var(--rs-borde-fuerte);
    font-size: 1.05rem;
    letter-spacing: 2px;
    line-height: 1;
    white-space: nowrap;
}

.estrellas__llenas {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    width: calc(var(--valor, 0) * 100%);
    color: #f5b301;
}
/* #endregion */

/* #region «Guardado», un momento al lado de su botón (sin una ventana que haya que cerrar; en el panel y en el área del socio) */
.guardado-flash {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-exito-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.guardado-flash[hidden] {
    display: none;
}

.guardado-flash .icono {
    width: 16px;
    height: 16px;
}
/* #endregion */

/* #region Esqueleto de carga (17 oct 2026): la forma de lo que va a salir, con un brillo que pasa, mientras llegan los datos */
.esqueleto {
    display: block;
    border-radius: var(--radio-sm);
    background: linear-gradient(90deg, var(--rs-superficie-3) 0%, var(--rs-superficie-4) 50%, var(--rs-superficie-3) 100%) 0 0 / 200% 100%;
    animation: esqueleto-brillo 1.4s ease-in-out infinite;
}

.esqueleto--cifra {
    width: 40%;
    height: 1.75rem;
}

.esqueleto--linea {
    width: 75%;
    height: 0.75rem;
}

.esqueleto--circulo {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

@keyframes esqueleto-brillo {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .esqueleto {
        animation: none;
    }
}
/* #endregion */

/* #region Tiras que no caben de lado (desplazar-lateral.js, 28 oct 2026: «se cortan muchas pantallas»; Rafa eligió «todo a la vista») */
/* En el ordenador, una tira de botones que no cabe baja a otra fila: no se corta nada. */
[data-tira="envuelve"][data-tira="envuelve"] {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: var(--espacio-2);
}

/* Lo que no es una tira de botones (una tabla ancha, una fila de fotos): una barra fina debajo, a la vista. */
[data-tira="barra"][data-tira="barra"] {
    scrollbar-width: thin !important;
    scrollbar-color: var(--rs-borde-fuerte) transparent;
    padding-bottom: max(var(--espacio-1), 4px);
}

[data-tira="barra"][data-tira="barra"]::-webkit-scrollbar {
    display: block !important;
    height: 8px;
}

[data-tira="barra"][data-tira="barra"]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--rs-borde-fuerte);
}

/* En el móvil, una flecha fija en el borde de la tira por donde sigue. */
.desplazar-flecha {
    position: fixed;
    /* Por debajo de la cabecera (20), el menú de abajo y los desplegables: al bajar, se va con la tira. */
    z-index: 18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--rs-borde-fuerte);
    border-radius: 999px;
    background: var(--rs-superficie-3);
    color: var(--rs-texto);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
    cursor: pointer;
    transform: translateY(-50%);
}

.desplazar-flecha--siguiente {
    transform: translate(-100%, -50%);
}

.desplazar-flecha svg {
    pointer-events: none;
}

.desplazar-flecha[hidden] {
    display: none;
}

@media print {
    .desplazar-flecha {
        display: none;
    }
}
/* #endregion */

/* #region Resumen de una importación: las cifras de un vistazo (cuadrar el padrón, importar bajas de correo; panel técnico y Junta) */
.cuadre-padron {
    display: grid;
    gap: var(--espacio-3);
    margin: var(--espacio-3) 0;
}

.cuadre-padron__cifras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--espacio-2);
}

.cuadre-padron__cifra {
    display: grid;
    gap: var(--espacio-1);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    font-size: var(--texto-pequeno);
    color: var(--rs-texto-secundario);
}

.cuadre-padron__cifra strong {
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    color: var(--rs-texto);
}

.cuadre-padron__cifra--error {
    border-color: var(--rs-peligro);
}

.cuadre-padron__cifra--error strong {
    color: var(--rs-peligro);
}
/* #endregion */

/* #region La camiseta con su dorsal (camiseta.js): en el panel, en el puesto y en el área del socio */
/* Del tono de su deporte y con el número en grande. Sin dorsal, en contorno. */
.camiseta {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    background: none;
    /* En oscuro los tonos son claros: el número, oscuro; en claro, al revés. Siempre se lee. */
    color: #0E1116;
}

:root[data-theme="light"] .camiseta {
    color: #FFFFFF;
}

button.camiseta {
    cursor: pointer;
    transition: transform var(--duracion-hover) var(--curva);
}

button.camiseta:hover {
    transform: scale(1.07) rotate(-2deg);
}

button.camiseta:focus-visible {
    outline: none;
    border-radius: 10px;
    box-shadow: var(--anillo-foco);
}

.camiseta__forma {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--tono, var(--marca-acento));
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--tono, var(--marca-acento)) 40%, transparent));
}

.camiseta__numero {
    position: relative;
    margin-top: 0.45rem;
    font-family: var(--fuente-display);
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.camiseta--sin,
:root[data-theme="light"] .camiseta--sin {
    color: var(--tono, var(--marca-acento));
}

.camiseta--sin .camiseta__forma {
    fill: color-mix(in srgb, var(--tono, var(--marca-acento)) 12%, transparent);
    stroke: color-mix(in srgb, var(--tono, var(--marca-acento)) 60%, transparent);
    stroke-dasharray: 3 3;
    stroke-width: 1.5;
    filter: none;
}

.camiseta--sin > .icono {
    position: relative;
    width: 16px;
    height: 16px;
    margin-top: 0.45rem;
}

/* En una fila de móvil. */
.camiseta--pequena {
    width: 2.5rem;
    height: 2.5rem;
}

.camiseta--pequena .camiseta__numero {
    margin-top: 0.3rem;
    font-size: 0.875rem;
}

.camiseta--pequena > .icono {
    width: 13px;
    height: 13px;
    margin-top: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
    button.camiseta {
        transition: none;
    }

    button.camiseta:hover {
        transform: none;
    }
}
/* #endregion */

/* #region Los botones de descarga de cada formato: en el panel y en los puestos */
/* --- Descargar el listado: un grupo compacto, a la derecha --- */
:is(.app-panel, .app-socio) .socios-exportar, :is(.app-panel, .app-socio) .informe-exportar {
    justify-content: flex-end;
    gap: 6px;
}

:is(.app-panel, .app-socio) .socios-exportar > span, :is(.app-panel, .app-socio) .informe-exportar > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: var(--espacio-3);
    color: var(--rs-texto-secundario);
}

:is(.app-panel, .app-socio) .socios-exportar > span::before, :is(.app-panel, .app-socio) .informe-exportar > span::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.app-panel, .app-socio) .socios-exportar .boton, :is(.app-panel, .app-socio) .informe-exportar .boton {
    min-height: 30px;
    border: 1px solid rgb(255 255 255 / 0.09);
    background: rgb(255 255 255 / 0.03);
    box-shadow: none;
    color: #C9D1DA;
    font-weight: 600;
}

:is(.app-panel, .app-socio) .socios-exportar .boton:hover, :is(.app-panel, .app-socio) .informe-exportar .boton:hover {
    border-color: rgb(255 255 255 / 0.18);
    background: rgb(255 255 255 / 0.08);
    color: #FFFFFF;
}

/* En el móvil, «Descargar» en su línea y los tres formatos juntos debajo, a partes iguales (nunca uno suelto). */
@media (max-width: 640px) {
    :is(.app-panel, .app-socio) :is(.socios-exportar, .informe-exportar) > span {
        flex-basis: 100%;
    }

    :is(.app-panel, .app-socio) :is(.socios-exportar, .informe-exportar) .boton {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* Cada formato con su icono y el color con que se reconoce (15 oct 2026), y en
   el mismo orden en todas las pantallas: PDF, Excel y CSV. Cada botón va
   suelto (no pegado a los demás), así el orden no deja esquinas raras. El
   icono lo lleva cualquier botón de descargar del panel, esté donde esté (por
   el final de su id, su data-formato o su enlace), si no trae ya uno. */
:is(.app-panel, .app-socio) :is(.socios-exportar, .informe-exportar) .boton {
    gap: 6px;
    padding-inline: 10px 12px;
    border-radius: 8px;
}

:is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is(:is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"]), :is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"]), :is([id$="-csv"], [data-formato="csv"], [href*="formato=csv"]))::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: var(--formato-color);
    mask: var(--formato-icono) center / contain no-repeat;
}

:is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is(:is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"]), :is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"]), :is([id$="-csv"], [data-formato="csv"], [href*="formato=csv"])) {
    /* Cada formato, con un toque de su color también de fondo y borde: se distinguen de un vistazo. */
    border-color: color-mix(in srgb, var(--formato-color) 35%, var(--rs-borde));
    background: color-mix(in srgb, var(--formato-color) 8%, var(--rs-superficie-1));
}

:is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is(:is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"]), :is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"]), :is([id$="-csv"], [data-formato="csv"], [href*="formato=csv"])):hover {
    border-color: var(--formato-color);
    background: color-mix(in srgb, var(--formato-color) 14%, var(--rs-superficie-1));
}

:is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"]) {
    --formato-color: #F0565B;
    --formato-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
}

:is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"]) {
    --formato-color: #2FB27A;
    --formato-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M8 13h2'/%3E%3Cpath d='M14 13h2'/%3E%3Cpath d='M8 17h2'/%3E%3Cpath d='M14 17h2'/%3E%3C/svg%3E");
}

:is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is([id$="-csv"], [data-formato="csv"], [href*="formato=csv"]) {
    /* El CSV, en azul: ningún botón gris (17 oct 2026, petición de Sergi). */
    --formato-color: var(--rs-azul);
    --formato-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 12.5 8 15l2 2.5'/%3E%3Cpath d='m14 12.5 2 2.5-2 2.5'/%3E%3C/svg%3E");
}

/* El orden, solo donde van juntos (con Excel y PDF al lado): un «PDF» suelto no se mueve. */
:is(.app-panel, .app-socio) :has(> a.boton:is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"])):has(> a.boton:is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"])) > a.boton:is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"]) {
    order: 1;
}

:is(.app-panel, .app-socio) :has(> a.boton:is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"])):has(> a.boton:is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"])) > a.boton:is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"]) {
    order: 2;
}

:is(.app-panel, .app-socio) :has(> a.boton:is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"])):has(> a.boton:is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"])) > a.boton:is([id$="-csv"], [data-formato="csv"], [href*="formato=csv"]) {
    order: 3;
}

:root[data-theme="light"] :is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is([id$="-pdf"], [data-formato="pdf"], [href*="formato=pdf"]) {
    --formato-color: #D93036;
}

:root[data-theme="light"] :is(.app-panel, .app-socio) a.boton:not(:has(.icono)):is([id$="-excel"], [data-formato="excel"], [href*="formato=excel"]) {
    --formato-color: #1A7F55;
}
/* #endregion */