/* =====================================================
   LIGOL — Hoja de estilos principal
   Base: font-size 10px en :root => 1rem = 10px
   Diseño: estilo SaaS moderno — azul oscuro + blanco
   ===================================================== */

:root {
    font-size: 10px;

    /* Paleta de color — azul oscuro como marca, blanco/gris como base */
    --color-azul-950: #0a1128;
    --color-azul-900: #0f1b3d;
    --color-azul-800: #14265a;
    --color-azul-700: #1a327a;
    --color-azul-600: #2545a3;
    --color-azul-500: #3b5fd9;
    --color-azul-400: #6b8af0;
    --color-azul-100: #e8edfc;
    --color-azul-50: #f3f6fe;

    --color-marca: var(--color-azul-700);
    /* Texto de marca fuerte (se aclara en modo oscuro) */
    --color-marca-oscuro: var(--color-azul-900);
    /* Fondo azul oscuro de cabecera, botones y marcadores (oscuro en los dos modos) */
    --color-marca-profundo: var(--color-azul-900);
    --color-marca-claro: var(--color-azul-400);
    --color-marca-suave: var(--color-azul-50);

    --color-acento: #2dd4bf;
    --color-acento-oscuro: #0f9c8b;
    --color-acento-suave: #e6fbf8;

    --color-texto: #101828;
    --color-texto-suave: #667085;
    --color-texto-tenue: #98a2b3;
    --color-blanco: #ffffff;
    --color-fondo: #f7f8fb;
    --color-superficie: #ffffff;
    --color-borde: #e4e7ec;
    --color-borde-fuerte: #d0d5dd;

    --color-exito: #12875a;
    --color-exito-suave: #e7f8f1;
    --color-error: #d92d20;
    --color-error-suave: #fef1f0;
    --color-aviso: #b54708;
    --color-aviso-suave: #fef6e6;

    --sombra-suave: 0 0.1rem 0.3rem rgba(16, 24, 40, 0.06), 0 0.1rem 0.2rem rgba(16, 24, 40, 0.04);
    --sombra-media: 0 0.4rem 0.8rem rgba(16, 24, 40, 0.08), 0 0.2rem 0.4rem rgba(16, 24, 40, 0.06);
    --sombra-grande: 0 1.2rem 2.4rem rgba(16, 24, 40, 0.12), 0 0.4rem 0.8rem rgba(16, 24, 40, 0.06);
    --sombra-marca: 0 0.4rem 1.2rem rgba(20, 38, 90, 0.18);

    --radio-borde: 1.2rem;
    --radio-borde-chico: 0.8rem;
    --radio-borde-grande: 1.6rem;

    --espaciado-xs: 0.4rem;
    --espaciado-sm: 0.8rem;
    --espaciado-md: 1.6rem;
    --espaciado-lg: 2.4rem;
    --espaciado-xl: 3.2rem;
}

/* --- Reset básico --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.55;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

/* Cualquier elemento oculto vía el atributo `hidden` debe permanecer oculto
   incluso si su clase define su propio `display` (flex, grid, etc.). */
[hidden] {
    display: none !important;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: 1.6rem;
}

a {
    color: var(--color-marca);
    text-decoration: none;
}

ul {
    list-style: none;
}

::selection {
    background-color: var(--color-azul-100);
    color: var(--color-marca-oscuro);
}

/* =====================================================
   CABECERA
   ===================================================== */
.cabecera {
    background: var(--color-marca-profundo);
    color: var(--color-blanco);
    padding: var(--espaciado-xs) var(--espaciado-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--sombra-media);
    position: sticky;
    top: 0;
    z-index: 50;
}

.cabecera__marca {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: -0.02rem;
}

.cabecera__logo {
    height: 5.6rem;
    width: auto;
    border-radius: var(--radio-borde-chico);
}

.cabecera__nav {
    display: flex;
    gap: var(--espaciado-xs);
}

.boton-icono {
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.boton-icono img {
    width: 2.1rem;
    height: 2.1rem;
    object-fit: contain;
}

.boton-icono:hover,
.boton-icono:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--color-blanco);
    outline: none;
}

.boton-icono--perfil {
    padding: 0;
    overflow: hidden;
}

.boton-icono__avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 0.15rem solid rgba(255, 255, 255, 0.4);
}

.boton-icono__avatar-defecto {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-blanco);
    font-weight: 700;
    font-size: 1.4rem;
    border: 0.15rem solid rgba(255, 255, 255, 0.4);
}

.boton-icono__badge {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background-color: var(--color-acento);
    color: var(--color-marca-oscuro);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 0.2rem var(--color-marca-oscuro);
}

/* =====================================================
   CONTENIDO PRINCIPAL
   ===================================================== */
.contenido {
    flex: 1;
    width: 100%;
    max-width: 104rem;
    margin: 0 auto;
    padding: var(--espaciado-lg);
}

/* =====================================================
   BOTONES
   ===================================================== */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaciado-xs);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    font-size: 1.5rem;
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.boton:active {
    transform: scale(0.97);
}

.boton--primario {
    background-color: var(--color-marca);
    color: var(--color-blanco);
    box-shadow: var(--sombra-suave);
}

.boton--primario:hover,
.boton--primario:focus-visible {
    background-color: var(--color-marca-profundo);
    box-shadow: var(--sombra-marca);
}

.boton--secundario {
    background-color: var(--color-acento);
    color: var(--color-marca-oscuro);
}

.boton--secundario:hover,
.boton--secundario:focus-visible {
    background-color: var(--color-acento-oscuro);
    color: var(--color-blanco);
    box-shadow: var(--sombra-suave);
}

.boton--fantasma {
    background-color: var(--color-superficie);
    color: var(--color-marca);
    border: 0.1rem solid var(--color-borde-fuerte);
}

.boton--fantasma:hover,
.boton--fantasma:focus-visible {
    background-color: var(--color-marca-suave);
    border-color: var(--color-marca-claro);
}

.boton--peligro {
    background-color: var(--color-error);
    color: var(--color-blanco);
}

.boton--peligro:hover {
    background-color: #a91d13;
}

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

.boton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.boton--chico {
    padding: var(--espaciado-xs) var(--espaciado-sm);
    font-size: 1.3rem;
}

/* =====================================================
   FORMULARIOS
   ===================================================== */
.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-xs);
}

.campo__etiqueta {
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--color-texto);
}

.campo__control {
    padding: var(--espaciado-sm) var(--espaciado-md);
    border: 0.1rem solid var(--color-borde-fuerte);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-superficie);
    color: var(--color-texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo__control:focus {
    outline: none;
    border-color: var(--color-marca-claro);
    box-shadow: 0 0 0 0.35rem var(--color-marca-suave);
}

.campo__control--error {
    border-color: var(--color-error);
}

.campo__control--textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1.5;
}

.campo__ayuda {
    font-size: 1.2rem;
    color: var(--color-texto-suave);
}

.campo__error {
    font-size: 1.2rem;
    color: var(--color-error);
}

.campo--fila {
    flex-direction: row;
    align-items: center;
    gap: var(--espaciado-sm);
}

/* =====================================================
   TARJETAS
   ===================================================== */
.tarjeta {
    background-color: var(--color-superficie);
    border-radius: var(--radio-borde);
    border: 0.1rem solid var(--color-borde);
    box-shadow: var(--sombra-suave);
    padding: var(--espaciado-lg);
}

.tarjeta--clicable {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tarjeta--clicable:hover,
.tarjeta--clicable:focus-visible {
    transform: translateY(-0.3rem);
    box-shadow: var(--sombra-grande);
    border-color: var(--color-marca-claro);
    outline: none;
}

.tarjeta--angosta {
    max-width: 48rem;
}

/* =====================================================
   PANTALLA DE AUTENTICACIÓN
   ===================================================== */
.pantalla-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 120% at 15% 10%, var(--color-azul-700) 0%, var(--color-azul-900) 45%, var(--color-azul-950) 100%);
    padding: var(--espaciado-md);
}

.tarjeta-auth {
    background-color: var(--color-superficie);
    border-radius: var(--radio-borde-grande);
    box-shadow: var(--sombra-grande);
    padding: var(--espaciado-xl) var(--espaciado-lg);
    width: 100%;
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg);
}

.tarjeta-auth__marca {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaciado-sm);
}

.tarjeta-auth__logo {
    height: auto;
    width: 100%;
    max-width: 34rem;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-marca);
}

.tarjeta-auth__titulo {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03rem;
    color: var(--color-marca-oscuro);
}

.tarjeta-auth__subtitulo {
    color: var(--color-texto-suave);
    font-size: 1.4rem;
}

.tarjeta-auth__cambio {
    text-align: center;
    font-size: 1.4rem;
    color: var(--color-texto-suave);
}

.enlace-boton {
    color: var(--color-marca);
    font-weight: 700;
}

.enlace-boton:hover {
    text-decoration: underline;
}

.tarjeta-auth__olvide {
    display: inline-block;
    font-size: 1.3rem;
    margin-top: -0.4rem;
}

.tarjeta-auth__ayuda {
    font-size: 1.4rem;
    color: var(--color-texto-suave);
    margin-bottom: var(--espaciado-md);
    text-align: center;
}

/* =====================================================
   GRUPOS (LISTADO)
   ===================================================== */
.cabecera-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    margin-bottom: var(--espaciado-lg);
    flex-wrap: wrap;
}

.cabecera-seccion__titulo {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03rem;
    color: var(--color-texto);
}

.cabecera-seccion__acciones {
    display: flex;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
}

.rejilla-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: var(--espaciado-md);
}

.tarjeta-grupo {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.tarjeta-grupo--eliminado {
    opacity: 0.55;
    background-color: var(--color-fondo);
}

.tarjeta-grupo--eliminado:hover {
    box-shadow: none;
}

/* Temporada terminada: todo en gris salvo el aviso de dinero pendiente */
.tarjeta-grupo--terminada {
    background-color: var(--color-fondo);
    box-shadow: none;
    border-color: var(--color-borde);
}

.tarjeta-grupo--terminada > :not(.tarjeta-grupo__pendiente) {
    filter: grayscale(1);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.tarjeta-grupo--terminada:hover > :not(.tarjeta-grupo__pendiente) {
    opacity: 0.85;
}

.tarjeta-grupo--con-pendiente {
    box-shadow: 0 0 0 0.2rem var(--color-error-suave), 0 0 0 0.3rem var(--color-error);
}

.tarjeta-grupo__pendiente {
    display: flex;
    align-items: flex-start;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-error-suave);
    color: var(--color-error);
}

.tarjeta-grupo__pendiente-punto {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-error);
    animation: latido-pendiente 1.8s ease-out infinite;
}

.tarjeta-grupo__pendiente-titulo {
    font-size: 1.4rem;
    font-weight: 800;
}

.tarjeta-grupo__pendiente-detalle {
    font-size: 1.2rem;
    color: var(--color-texto-suave);
}

@keyframes latido-pendiente {
    0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.45); }
    70% { box-shadow: 0 0 0 0.8rem rgba(217, 45, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-grupo__pendiente-punto {
        animation: none;
    }
}

.tarjeta-grupo__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
}

.tarjeta-grupo__imagen {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-marca-suave);
    border: 0.2rem solid var(--color-superficie);
    box-shadow: 0 0 0 0.1rem var(--color-borde);
}

.tarjeta-grupo__imagen-defecto {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
}

.tarjeta-grupo__nombre {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01rem;
}

.tarjeta-grupo__meta {
    font-size: 1.3rem;
    color: var(--color-texto-suave);
}

.tarjeta-grupo__bote {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-marca-suave);
    border-radius: var(--radio-borde-chico);
    padding: var(--espaciado-sm) var(--espaciado-md);
}

.tarjeta-grupo__bote-etiqueta {
    font-size: 1.2rem;
    color: var(--color-marca);
    font-weight: 600;
}

.tarjeta-grupo__bote-importe {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-marca-oscuro);
}

.insignia-rol {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}

.insignia-rol--master {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.insignia-rol--admin {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.insignia-rol--jugador {
    background-color: var(--color-fondo);
    color: var(--color-texto-suave);
}

.insignia-rol--expulsado,
.insignia-rol--eliminado {
    background-color: var(--color-borde);
    color: var(--color-texto-suave);
}

.estado-vacio {
    text-align: center;
    padding: var(--espaciado-xl) var(--espaciado-md);
    color: var(--color-texto-suave);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaciado-sm);
}

.estado-vacio__icono {
    width: 7.2rem;
    height: 7.2rem;
    object-fit: contain;
    opacity: 0.85;
}

/* =====================================================
   DETALLE DE GRUPO — PESTAÑAS
   ===================================================== */
.grupo-detalle__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    margin-bottom: var(--espaciado-md);
    flex-wrap: wrap;
}

.grupo-detalle__volver {
    font-size: 1.4rem;
    color: var(--color-texto-suave);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.15s ease;
}

.grupo-detalle__volver:hover {
    color: var(--color-marca);
}

/* Pestañas del grupo: mismo estilo y colores que el menú de Configuración
   (.ajustes__enlace), en horizontal. En móvil solo se ven los iconos. */
.pestañas {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.4rem;
    margin-bottom: var(--espaciado-lg);
    background-color: var(--color-superficie);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    overflow-x: auto;
    scrollbar-width: none;
}

.pestañas::-webkit-scrollbar {
    display: none;
}

.pestañas__boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pestañas__boton:hover,
.pestañas__boton:focus-visible {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    outline: none;
}

.pestañas__boton--activo,
.pestañas__boton--activo:hover {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.pestañas__icono {
    width: 1.8rem;
    height: 1.8rem;
    transition: color 0.15s ease;
}

.pestañas__boton--activo .pestañas__icono {
    color: var(--color-acento-oscuro);
}

.pestañas__badge {
    min-width: 2rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color-acento);
    color: var(--color-marca-oscuro);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6rem;
    text-align: center;
}

/* Tablet: las seis pestañas repartidas a lo ancho, con el texto bajo el icono */
@media (max-width: 900px) {
    .pestañas {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
    }

    .pestañas__boton {
        flex-direction: column;
        justify-content: center;
        gap: 0.4rem;
        padding: var(--espaciado-sm) var(--espaciado-xs);
        font-size: 1.2rem;
    }

    .pestañas__badge {
        position: absolute;
        top: 0.2rem;
        right: calc(50% - 2.6rem);
        min-width: 1.7rem;
        padding: 0 0.4rem;
        font-size: 1rem;
        line-height: 1.7rem;
    }
}

/* =====================================================
   JORNADA / PARTIDOS
   ===================================================== */
.aviso-jornada {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    background-color: var(--color-marca-suave);
    color: var(--color-marca-oscuro);
    border-radius: var(--radio-borde-chico);
    padding: var(--espaciado-sm) var(--espaciado-md);
    margin-bottom: var(--espaciado-md);
    font-size: 1.4rem;
    font-weight: 600;
}

.aviso-jornada__icono,
.aviso-saldo__icono {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

.aviso-saldo {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    border-radius: var(--radio-borde-chico);
    padding: var(--espaciado-sm) var(--espaciado-md);
    margin-bottom: var(--espaciado-md);
    font-size: 1.4rem;
    font-weight: 600;
}

.aviso-saldo--ok {
    background-color: var(--color-exito-suave);
    color: var(--color-exito);
}

.aviso-saldo--insuficiente {
    background-color: var(--color-error-suave);
    color: var(--color-error);
}

.lista-partidos {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.tarjeta-partido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tarjeta-partido:hover {
    box-shadow: var(--sombra-media);
    border-color: var(--color-borde-fuerte);
}

.tarjeta-partido__equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--espaciado-xs);
    flex: 1;
    min-width: 9rem;
    text-align: center;
}

.tarjeta-partido__escudo {
    width: 5.6rem;
    height: 5.6rem;
    object-fit: contain;
    filter: drop-shadow(0 0.2rem 0.4rem rgba(16, 24, 40, 0.12));
}

.tarjeta-partido__nombre-equipo {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}

.tarjeta-partido__control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaciado-xs);
}

.tarjeta-partido__prediccion {
    display: flex;
    align-items: center;
    gap: var(--espaciado-xs);
}

.entrada-gol {
    width: 4.4rem;
    height: 4.4rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    border: 0.15rem solid var(--color-borde-fuerte);
    border-radius: var(--radio-borde-chico);
}

.entrada-gol:focus {
    outline: none;
    border-color: var(--color-marca);
    box-shadow: 0 0 0 0.3rem var(--color-marca-suave);
}

.separador-marcador {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-texto-tenue);
}

.grupo-1x2 {
    display: flex;
    gap: var(--espaciado-xs);
}

.opcion-1x2 {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: var(--radio-borde-chico);
    border: 0.15rem solid var(--color-borde-fuerte);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-texto);
    background-color: var(--color-superficie);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.opcion-1x2:hover {
    border-color: var(--color-marca-claro);
}

.opcion-1x2--activo {
    background-color: var(--color-marca);
    border-color: var(--color-marca);
    color: var(--color-blanco);
    transform: scale(1.05);
}

.tarjeta-partido__fecha {
    font-size: 1.2rem;
    color: var(--color-texto-tenue);
    width: 100%;
}

.barra-guardado {
    position: sticky;
    bottom: 0;
    background-color: var(--color-superficie);
    padding: var(--espaciado-md);
    margin-top: var(--espaciado-md);
    border-radius: var(--radio-borde);
    border: 0.1rem solid var(--color-borde);
    box-shadow: var(--sombra-grande);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
}

/* =====================================================
   HISTÓRICO
   ===================================================== */
.historico {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg);
}

/* --- Cifras de la temporada --- */
.historico__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--espaciado-md);
}

.historico__cifra {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-md);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-suave);
}

.historico__cifra--destacada {
    border-color: var(--color-acento);
    background: linear-gradient(135deg, var(--color-acento-suave), var(--color-superficie));
}

.historico__cifra-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.historico__cifra--destacada .historico__cifra-icono {
    background-color: var(--color-acento);
    color: var(--color-marca-oscuro);
}

.historico__cifra-valor {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-marca-oscuro);
    line-height: 1.1;
}

.historico__cifra-etiqueta {
    display: block;
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

/* --- Racha: una píldora por jornada --- */
.historico__racha {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.historico__pildoras {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.historico__pildora {
    width: 3.6rem;
    height: 3.6rem;
    border: none;
    border-radius: var(--radio-borde-chico);
    font-size: 1.4rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.historico__pildora:hover {
    transform: translateY(-0.2rem);
    box-shadow: var(--sombra-suave);
}

.historico__pildora--ganador {
    background-color: var(--color-exito);
    color: var(--color-blanco);
}

.historico__pildora--acumulado {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.historico__pildora--en-juego {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.historico__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaciado-md);
    font-size: 1.2rem;
    color: var(--color-texto-suave);
}

.historico__leyenda-elemento {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.historico__leyenda-punto {
    width: 1rem;
    height: 1rem;
    border-radius: 0.3rem;
}

/* --- Tarjeta de jornada --- */
.jornada-hist {
    animation: aparecer-hist 0.2s ease;
    border: 0.1rem solid var(--color-borde);
    border-left: 0.4rem solid var(--color-borde-fuerte);
    border-radius: var(--radio-borde);
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    scroll-margin-top: 8rem;
    transition: box-shadow 0.2s ease;
}

.jornada-hist:hover {
    box-shadow: var(--sombra-media, var(--sombra-suave));
}

.jornada-hist--ganador {
    border-left-color: var(--color-exito);
}

.jornada-hist--acumulado {
    border-left-color: var(--color-aviso);
}

.jornada-hist--en-juego {
    border-left-color: var(--color-marca-claro);
}

.jornada-hist__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    padding: var(--espaciado-md) var(--espaciado-lg);
}

.jornada-hist__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    font-size: 1.7rem;
    font-weight: 800;
}

.jornada-hist__datos {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.jornada-hist__titulo {
    font-size: 1.6rem;
    font-weight: 700;
}

.jornada-hist__meta {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

.jornada-hist__estado {
    flex-shrink: 0;
    padding: 0.4rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 700;
}

.jornada-hist__estado--acumulado {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.jornada-hist__estado--en-juego {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.jornada-hist__ganadores {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    flex-shrink: 0;
    padding: 0.4rem var(--espaciado-sm) 0.4rem 0.4rem;
    border-radius: 999px;
    background-color: var(--color-exito-suave);
}

.jornada-hist__avatares {
    display: flex;
}

.jornada-hist__avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 0.2rem solid var(--color-exito-suave);
    object-fit: cover;
    background-color: var(--color-marca-suave);
}

.jornada-hist__avatar + .jornada-hist__avatar {
    margin-left: -0.8rem;
}

.jornada-hist__avatar--defecto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    font-size: 1.2rem;
    font-weight: 700;
}

.jornada-hist__premio {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.jornada-hist__premio-nombre {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-texto);
}

.jornada-hist__premio-importe {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-exito);
}

.jornada-hist__navegacion {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.jornada-hist__flecha-nav {
    width: 3.4rem;
    height: 3.4rem;
    border: 0.1rem solid var(--color-borde);
    border-radius: 50%;
    background-color: var(--color-superficie);
    color: var(--color-marca);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.jornada-hist__flecha-nav:hover:not(:disabled) {
    background-color: var(--color-marca-suave);
    border-color: var(--color-marca-claro);
}

.jornada-hist__flecha-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.historico__pildora--elegida {
    outline: 0.3rem solid var(--color-acento);
    outline-offset: 0.2rem;
    transform: translateY(-0.2rem);
}
.jornada-hist__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg);
    padding: var(--espaciado-md) var(--espaciado-lg) var(--espaciado-lg);
    border-top: 0.1rem solid var(--color-borde);
}

@keyframes aparecer-hist {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to { opacity: 1; transform: none; }
}

.jornada-hist__subtitulo {
    margin-bottom: var(--espaciado-sm);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

/* --- Resultados --- */
.resultados-hist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: var(--espaciado-sm);
}

.resultado-hist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-fondo);
}

.resultado-hist__equipo {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    min-width: 0;
    color: var(--color-texto-suave);
}

.resultado-hist__equipo--visitante {
    flex-direction: row-reverse;
    text-align: right;
}

.resultado-hist__equipo--ganador {
    color: var(--color-texto);
    font-weight: 700;
}

.resultado-hist__escudo {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    object-fit: contain;
}

.resultado-hist__nombre {
    font-size: 1.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resultado-hist__marcador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.resultado-hist__goles {
    padding: 0.3rem var(--espaciado-sm);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-profundo);
    color: var(--color-blanco);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.1rem;
    white-space: nowrap;
}

.resultado-hist__goles--pendiente {
    background-color: var(--color-borde);
    color: var(--color-texto-suave);
}

.resultado-hist__signo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-texto-suave);
}

/* --- Matriz de pronósticos --- */
.matriz-hist__envoltorio {
    overflow-x: auto;
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
}

.matriz-hist {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.35rem;
}

.matriz-hist th,
.matriz-hist td {
    padding: var(--espaciado-sm);
    text-align: center;
    border-bottom: 0.1rem solid var(--color-borde);
    white-space: nowrap;
}

.matriz-hist thead th {
    background-color: var(--color-fondo);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-texto-suave);
}

.matriz-hist tbody tr:last-child td {
    border-bottom: none;
}

.matriz-hist .matriz-hist__jugador {
    text-align: left;
}

.matriz-hist__identidad {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
}

.matriz-hist__cruce {
    display: inline-flex;
    gap: 0.2rem;
}

.matriz-hist__escudo {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
}

.matriz-hist__avatar {
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-marca-suave);
}

.matriz-hist__avatar--defecto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    font-size: 1.2rem;
    font-weight: 700;
}

.matriz-hist__nick {
    font-weight: 600;
}

.matriz-hist__fila--mia td {
    background-color: var(--color-marca-suave);
}

.matriz-hist__fila--ganador td {
    background-color: var(--color-exito-suave);
}

.matriz-hist__fila--ganador .matriz-hist__nick::after {
    content: ' 🏆';
}

.matriz-hist__fila--no-jugo td {
    color: var(--color-texto-tenue);
}

.matriz-hist__aciertos {
    font-weight: 700;
}

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

.matriz-hist__premio--ganado {
    color: var(--color-exito);
    font-weight: 800;
}

.chip-pronostico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 4.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background-color: var(--color-fondo);
    font-weight: 800;
}

.chip-pronostico--acierto {
    background-color: var(--color-exito-suave);
    color: var(--color-exito);
}

.chip-pronostico--fallo {
    background-color: var(--color-error-suave);
    color: var(--color-error);
}

.chip-pronostico--vacio {
    background: none;
    color: var(--color-texto-tenue);
}

.chip-pronostico__marca {
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .jornada-hist__cabecera {
        flex-wrap: wrap;
        padding: var(--espaciado-md);
    }

    .jornada-hist__datos {
        flex-basis: calc(100% - 9rem);
    }

    .jornada-hist__ganadores,
    .jornada-hist__estado {
        order: 3;
        margin-left: 5.6rem;
    }

    .jornada-hist__navegacion {
        order: 2;
    }

    .jornada-hist__cuerpo {
        padding: var(--espaciado-md);
    }

    .resultados-hist {
        grid-template-columns: 1fr;
    }

    .resultado-hist__nombre {
        font-size: 1.25rem;
    }
}

/* =====================================================
   CLASIFICACIÓN
   ===================================================== */
.lista-clasificacion {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.fila-clasificacion {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
}

.fila-clasificacion__puesto {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--color-fondo);
    color: var(--color-texto-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.fila-clasificacion--primero .fila-clasificacion__puesto {
    background: linear-gradient(135deg, var(--color-azul-500), var(--color-marca));
    color: var(--color-blanco);
}

.fila-clasificacion__imagen {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.fila-clasificacion__imagen-defecto {
    /* No se encoge dentro de filas flexibles (p. ej. Participantes) */
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.fila-clasificacion__nick {
    flex: 1;
    font-weight: 600;
}

.fila-clasificacion__datos {
    display: flex;
    gap: var(--espaciado-lg);
}

.fila-clasificacion__dato {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.fila-clasificacion__etiqueta {
    font-size: 1.1rem;
    color: var(--color-texto-tenue);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.fila-clasificacion__importe {
    font-weight: 700;
    color: var(--color-exito);
    font-size: 1.7rem;
}

/* =====================================================
   CONFIGURACIÓN
   ===================================================== */
.seccion-config {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    margin-bottom: var(--espaciado-lg);
}

.seccion-config__titulo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-texto);
    border-bottom: 0.1rem solid var(--color-borde);
    padding-bottom: var(--espaciado-xs);
}

.seccion-config--peligro {
    border-color: var(--color-error);
}

.seccion-config--peligro .seccion-config__titulo {
    color: var(--color-error);
    border-bottom-color: var(--color-error-suave);
}

.seccion-config--plegable {
    gap: 0;
}

.seccion-config__titulo--clicable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin: -0.4rem;
    padding: var(--espaciado-sm) var(--espaciado-xs) var(--espaciado-sm);
    border-radius: var(--radio-borde-chico);
    transition: background-color 0.15s ease;
}

.seccion-config__titulo--clicable:hover,
.seccion-config__titulo--clicable:focus-visible {
    background-color: var(--color-fondo);
    outline: none;
}

.seccion-config__flecha {
    font-size: 1.3rem;
    color: var(--color-texto-suave);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.seccion-config--abierta .seccion-config__flecha {
    transform: rotate(180deg);
}

.seccion-config__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}

.seccion-config--abierta .seccion-config__cuerpo {
    max-height: 200rem;
    opacity: 1;
    margin-top: var(--espaciado-md);
}

.rejilla-equipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--espaciado-sm);
}

.opcion-equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaciado-xs);
    width: 100%;
    padding: var(--espaciado-md) var(--espaciado-sm);
    border: 0.15rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-superficie);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

.opcion-equipo:hover {
    border-color: var(--color-marca-claro);
}

.opcion-equipo:active {
    transform: scale(0.97);
}

.opcion-equipo--seleccionado {
    border-color: var(--color-marca);
    background-color: var(--color-marca-suave);
}

.opcion-equipo__texto {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.opcion-equipo__escudo {
    width: 4.4rem;
    height: 4.4rem;
    object-fit: contain;
    flex-shrink: 0;
}

.opcion-equipo__escudo-defecto {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

.opciones-modo {
    display: flex;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
}

.tarjeta-modo {
    flex: 1;
    min-width: 20rem;
    border: 0.15rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
    padding: var(--espaciado-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tarjeta-modo:hover {
    border-color: var(--color-marca-claro);
}

.tarjeta-modo--seleccionado {
    border-color: var(--color-marca);
    background-color: var(--color-marca-suave);
}

.tarjeta-modo__titulo {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: var(--espaciado-xs);
}

.tarjeta-modo__descripcion {
    font-size: 1.3rem;
    color: var(--color-texto-suave);
}

.espacio-superior {
    margin-top: var(--espaciado-md);
}

.lista-solicitudes {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.fila-solicitud {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
}

.fila-solicitud__cuerpo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
}

.fila-solicitud__grupo {
    display: flex;
    align-items: center;
    gap: var(--espaciado-xs);
    padding-bottom: var(--espaciado-xs);
    border-bottom: 0.1rem solid var(--color-borde);
}

.fila-solicitud__grupo-imagen,
.fila-solicitud__grupo-imagen-defecto {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.fila-solicitud__grupo-imagen {
    object-fit: cover;
    background-color: var(--color-marca-suave);
}

.fila-solicitud__grupo-imagen-defecto {
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.fila-solicitud__grupo-nombre {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-texto-suave);
}

.fila-solicitud__nick {
    font-weight: 600;
}

.fila-solicitud__acciones {
    display: flex;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
}

.interruptor {
    position: relative;
    display: inline-block;
    width: 4rem;
    height: 2.2rem;
    flex-shrink: 0;
}

.interruptor input {
    opacity: 0;
    width: 0;
    height: 0;
}

.interruptor__deslizador {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--color-borde-fuerte);
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.interruptor__deslizador::before {
    content: "";
    position: absolute;
    width: 1.8rem;
    height: 1.8rem;
    left: 0.2rem;
    bottom: 0.2rem;
    background-color: var(--color-superficie);
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: var(--sombra-suave);
}

.interruptor input:checked + .interruptor__deslizador {
    background-color: var(--color-marca);
}

.interruptor input:checked + .interruptor__deslizador::before {
    transform: translateX(1.8rem);
}

.interruptor input:focus-visible + .interruptor__deslizador {
    box-shadow: 0 0 0 0.3rem var(--color-marca-suave);
}

.selector-imagen {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
}

.selector-imagen__vista-previa {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    border: 0.2rem solid var(--color-superficie);
    box-shadow: 0 0 0 0.1rem var(--color-borde);
    background-color: var(--color-marca-suave);
}

/* =====================================================
   PERFIL
   ===================================================== */
.tarjeta-perfil {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg);
    max-width: 56rem;
    margin: 0 auto;
}

/* =====================================================
   NOTIFICACIONES (feedback visual, sin alert/confirm)
   ===================================================== */
.contenedor-notificaciones {
    position: fixed;
    bottom: var(--espaciado-lg);
    right: var(--espaciado-lg);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--espaciado-sm);
    z-index: 200;
    width: min(38rem, calc(100% - 2 * var(--espaciado-md)));
    pointer-events: none;
}

.notificacion {
    /* Color del tipo: se redefine en cada variante */
    --color-notificacion: var(--color-marca);
    --color-notificacion-suave: var(--color-marca-suave);

    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--espaciado-sm) var(--espaciado-md);
    padding: var(--espaciado-md) var(--espaciado-md) calc(var(--espaciado-md) + 0.2rem);
    border-radius: var(--radio-borde-grande);
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(0.8rem);
    border: 0.1rem solid var(--color-borde);
    box-shadow:
        0 0.2rem 0.4rem rgba(16, 24, 40, 0.04),
        0 1.2rem 3.2rem rgba(16, 24, 40, 0.14);
    color: var(--color-texto);
    overflow: hidden;
    pointer-events: auto;
    animation: entrar-notificacion 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Toque de color sutil del tipo en la esquina */
.notificacion::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0 0, var(--color-notificacion-suave), transparent 55%);
    pointer-events: none;
}

.notificacion--exito {
    --color-notificacion: var(--color-exito);
    --color-notificacion-suave: var(--color-exito-suave);
}

.notificacion--error {
    --color-notificacion: var(--color-error);
    --color-notificacion-suave: var(--color-error-suave);
}

.notificacion--aviso {
    --color-notificacion: var(--color-aviso);
    --color-notificacion-suave: var(--color-aviso-suave);
}

.notificacion__icono {
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-notificacion-suave);
    color: var(--color-notificacion);
    box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.9);
}

.notificacion__icono .icono {
    width: 1.9rem;
    height: 1.9rem;
    stroke-width: 2.4;
}

/* El icono de éxito se "dibuja" al aparecer */
.notificacion--exito .notificacion__icono path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: dibujar-trazo 0.45s 0.2s ease forwards;
}

.notificacion__textos {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.2rem;
}

.notificacion__titulo {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-texto);
    line-height: 1.3;
}

.notificacion__mensaje {
    font-size: 1.35rem;
    color: var(--color-texto-suave);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notificacion__cerrar {
    position: relative;
    width: 2.8rem;
    height: 2.8rem;
    margin: -0.2rem -0.2rem 0 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-tenue);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notificacion__cerrar:hover,
.notificacion__cerrar:focus-visible {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    outline: none;
}

/* Barra de tiempo restante: al terminar su animación se cierra la
   notificación. Se detiene mientras el ratón está encima. */
.notificacion__tiempo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.3rem;
    width: 100%;
    background-color: var(--color-notificacion);
    opacity: 0.7;
    transform-origin: left center;
    animation: consumir-tiempo var(--duracion-notificacion, 4000ms) linear forwards;
}

.notificacion:hover .notificacion__tiempo,
.notificacion:focus-within .notificacion__tiempo {
    animation-play-state: paused;
}

.notificacion--saliendo {
    animation: salir-notificacion 0.3s ease forwards;
}

@keyframes entrar-notificacion {
    from {
        opacity: 0;
        transform: translateX(3rem) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes salir-notificacion {
    to {
        opacity: 0;
        transform: translateX(3rem) scale(0.96);
    }
}

@keyframes consumir-tiempo {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@keyframes dibujar-trazo {
    to {
        stroke-dashoffset: 0;
    }
}

/* En móvil aparecen arriba, a todo el ancho, deslizándose desde arriba */
@media (max-width: 600px) {
    .contenedor-notificaciones {
        top: var(--espaciado-sm);
        bottom: auto;
        right: 50%;
        transform: translateX(50%);
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .notificacion {
        animation-name: entrar-notificacion-movil;
    }

    .notificacion--saliendo {
        animation: salir-notificacion-movil 0.3s ease forwards;
    }

    @keyframes entrar-notificacion-movil {
        from {
            opacity: 0;
            transform: translateY(-2rem) scale(0.96);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes salir-notificacion-movil {
        to {
            opacity: 0;
            transform: translateY(-2rem) scale(0.96);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .notificacion,
    .notificacion--saliendo,
    .notificacion--exito .notificacion__icono path {
        animation-duration: 0.01ms;
    }

    .notificacion--exito .notificacion__icono path {
        stroke-dashoffset: 0;
    }
}

/* =====================================================
   MODAL (mismo estilo que la web, sin usar alert/confirm)
   ===================================================== */
.contenedor-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 17, 40, 0.55);
    backdrop-filter: blur(0.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
    padding: var(--espaciado-md);
}

.modal {
    background-color: var(--color-superficie);
    border-radius: var(--radio-borde-grande);
    box-shadow: var(--sombra-grande);
    padding: var(--espaciado-lg);
    width: 100%;
    max-width: 48rem;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
}

.modal__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
}

.modal__marca {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    min-width: 0;
}

.modal__icono-app {
    width: 3.6rem;
    height: 3.6rem;
    flex-shrink: 0;
    border-radius: 0.9rem;
    object-fit: cover;
    box-shadow: var(--sombra-suave);
}

.modal__titulo {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-texto);
    line-height: 1.25;
}

.modal__cerrar {
    font-size: 2rem;
    color: var(--color-texto-suave);
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.modal__cerrar:hover {
    background-color: var(--color-fondo);
}

.modal__acciones {
    display: flex;
    justify-content: flex-end;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
}

.modal__subtitulo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin: var(--espaciado-md) 0 var(--espaciado-sm);
}

.modal__subtitulo:first-child {
    margin-top: 0;
}

/* =====================================================
   MODAL DE RECARGA (BIZUM)
   ===================================================== */
.recarga__texto {
    margin-bottom: var(--espaciado-md);
}

/* =====================================================
   CARGA
   ===================================================== */
.cargando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-xl);
    color: var(--color-texto-suave);
}

.cargando__spinner {
    width: 4rem;
    height: 4rem;
    border: 0.4rem solid var(--color-marca-suave);
    border-top-color: var(--color-marca);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}

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

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 600px) {
    :root {
        font-size: 9px;
    }

    .contenido {
        padding: var(--espaciado-sm);
    }

    .cabecera {
        padding: var(--espaciado-sm);
    }

    .tarjeta-partido {
        align-items: center;
        padding: var(--espaciado-md) var(--espaciado-sm);
    }

    .tarjeta-partido__equipo {
        min-width: 0;
    }

    .tarjeta-partido__escudo {
        width: 6.4rem;
        height: 6.4rem;
    }

    .tarjeta-partido__nombre-equipo {
        font-size: 1.15rem;
    }

    .tarjeta-partido__fecha {
        order: 10;
        text-align: center;
    }

    .cabecera-seccion {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Pestañas del grupo: solo iconos, repartidos a lo ancho */
    .pestañas {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
    }

    .pestañas__boton {
        justify-content: center;
        padding: var(--espaciado-sm) 0;
    }

    .pestañas__icono {
        width: 2.2rem;
        height: 2.2rem;
    }

    .pestañas__texto {
        position: absolute;
        width: 0.1rem;
        height: 0.1rem;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pestañas__badge {
        position: absolute;
        top: 0.2rem;
        right: calc(50% - 2.4rem);
        min-width: 1.7rem;
        padding: 0 0.4rem;
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .fila-clasificacion__datos {
        gap: var(--espaciado-md);
    }

    .fila-clasificacion__importe {
        white-space: nowrap;
        font-size: 1.4rem;
    }
}

/* =====================================================
   MENSAJERÍA
   ===================================================== */
.mensajes__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
    margin-bottom: var(--espaciado-lg);
}

.subpestañas {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--color-fondo);
    border: 0.15rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 0.4rem;
}

.subpestañas__boton {
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.subpestañas__boton:hover {
    color: var(--color-texto);
}

.subpestañas__boton--activo,
.subpestañas__boton--activo:hover {
    color: var(--color-blanco);
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
}

.lista-mensajes {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.mensaje-fila {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-xs);
    padding: var(--espaciado-md);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mensaje-fila:hover {
    border-color: var(--color-borde-fuerte);
    box-shadow: 0 0.2rem 0.6rem rgba(15, 23, 42, 0.05);
}

.mensaje-fila--no-leido {
    border-left: 0.3rem solid var(--color-marca);
    background-color: var(--color-marca-suave);
}

.mensaje-fila__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-sm);
}

.mensaje-fila__remitente {
    font-weight: 700;
    color: var(--color-texto);
}

.mensaje-fila__fecha {
    font-size: 1.2rem;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.mensaje-fila__asunto {
    font-weight: 600;
    color: var(--color-texto);
}

.mensaje-fila__cuerpo {
    color: var(--color-texto-suave);
    white-space: pre-wrap;
    padding-top: var(--espaciado-xs);
    border-top: 0.1rem solid var(--color-borde);
    margin-top: var(--espaciado-xs);
}

.formulario-mensaje {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
}

.boton--con-icono {
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-xs);
}

.boton__icono {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
    background-color: var(--color-superficie);
    border-radius: 50%;
    padding: 0.2rem;
}

@media (min-width: 1200px) {
    :root {
        font-size: 10px;
    }
}

/* =====================================================
   COMPETICIONES (insignias y ficha de solo lectura)
   ===================================================== */
.insignia-competicion {
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-xs);
    align-self: flex-start;
    max-width: 100%;
    padding: 0.3rem 1rem 0.3rem 0.4rem;
    border-radius: 999px;
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insignia-competicion__emblema {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    padding: 0.2rem;
    border-radius: 50%;
    background-color: var(--color-superficie);
    flex-shrink: 0;
}

.grupo-detalle__cabecera .insignia-competicion {
    margin: var(--espaciado-xs) 0;
}

.ficha-competicion {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-suave);
}

.ficha-competicion__emblema,
.ficha-competicion__emblema-defecto {
    width: 4.8rem;
    height: 4.8rem;
    flex-shrink: 0;
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-suave);
}

.ficha-competicion__emblema {
    object-fit: contain;
    padding: 0.6rem;
}

.ficha-competicion__emblema-defecto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-marca);
}

.ficha-competicion__textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ficha-competicion__nombre {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-marca-oscuro);
}

.ficha-competicion__pais {
    font-size: 1.3rem;
    color: var(--color-texto-suave);
}

/* =====================================================
   SELECTOR DE EQUIPOS (contador + seleccionar todos)
   ===================================================== */
.selector-equipos {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.selector-equipos__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
}

.selector-equipos__contador {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-texto-suave);
}

.tarjeta-modo__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
    margin-bottom: var(--espaciado-xs);
}

.tarjeta-modo__cabecera .tarjeta-modo__titulo {
    margin-bottom: 0;
}

.tarjeta-modo:focus-visible {
    outline: none;
    border-color: var(--color-marca);
    box-shadow: 0 0 0 0.3rem var(--color-marca-suave);
}

.insignia-recomendado {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}

/* =====================================================
   ASISTENTE DE CREACIÓN DE GRUPO (modal por pasos)
   ===================================================== */
.modal--asistente {
    max-width: 64rem;
}

.asistente {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg);
}

.asistente__pasos {
    list-style: none;
    display: flex;
    gap: var(--espaciado-xs);
}

.asistente__paso {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaciado-xs);
    position: relative;
    min-width: 0;
    color: var(--color-texto-tenue);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

/* Línea que une cada paso con el siguiente */
.asistente__paso:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: calc(50% + 2rem);
    right: calc(-50% + 2rem);
    height: 0.2rem;
    border-radius: 999px;
    background-color: var(--color-borde);
    transition: background-color 0.25s ease;
}

.asistente__paso--completado:not(:last-child)::after {
    background-color: var(--color-acento);
}

.asistente__paso-boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaciado-xs);
    color: inherit;
    font: inherit;
    border-radius: var(--radio-borde-chico);
    cursor: pointer;
}

.asistente__paso-boton:hover .asistente__paso-numero,
.asistente__paso-boton:focus-visible .asistente__paso-numero {
    transform: scale(1.08);
}

.asistente__paso-numero {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    border: 0.2rem solid var(--color-borde);
    background-color: var(--color-superficie);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.asistente__paso--activo {
    color: var(--color-marca);
}

.asistente__paso--activo .asistente__paso-numero {
    border-color: var(--color-marca);
    background-color: var(--color-marca);
    color: var(--color-blanco);
    box-shadow: var(--sombra-marca);
}

.asistente__paso--completado {
    color: var(--color-acento-oscuro);
}

.asistente__paso--completado .asistente__paso-numero {
    border-color: var(--color-acento);
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
}

.asistente__pantalla {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    animation: asistente-entrada 0.25s ease;
}

@keyframes asistente-entrada {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.asistente__cabecera {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-xs);
}

.asistente__titulo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-marca-oscuro);
}

.asistente__descripcion {
    font-size: 1.35rem;
    color: var(--color-texto-suave);
}

/* La lista de equipos puede ser larga (36 en la Champions): se desplaza
   dentro del paso para que los botones del asistente sigan a la vista. */
.asistente .rejilla-equipos {
    max-height: 34rem;
    overflow-y: auto;
    padding: 0.2rem;
}

.rejilla-competiciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--espaciado-sm);
}

.tarjeta-competicion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaciado-xs);
    padding: var(--espaciado-md) var(--espaciado-sm);
    border: 0.15rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-suave);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.tarjeta-competicion:hover {
    border-color: var(--color-marca-claro);
    box-shadow: var(--sombra-media);
    transform: translateY(-0.2rem);
}

.tarjeta-competicion:focus-visible {
    outline: none;
    border-color: var(--color-marca);
    box-shadow: 0 0 0 0.3rem var(--color-marca-suave);
}

.tarjeta-competicion--seleccionada {
    border-color: var(--color-marca);
    background-color: var(--color-marca-suave);
    box-shadow: var(--sombra-marca);
}

.tarjeta-competicion__emblema {
    width: 5.6rem;
    height: 5.6rem;
    object-fit: contain;
    margin-bottom: var(--espaciado-xs);
}

.tarjeta-competicion__nombre {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-texto);
    line-height: 1.25;
}

.tarjeta-competicion__pais {
    font-size: 1.2rem;
    color: var(--color-texto-suave);
}

.chips-importe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaciado-sm);
}

.chip-importe {
    padding: var(--espaciado-sm) var(--espaciado-md);
    border: 0.15rem solid var(--color-borde);
    border-radius: 999px;
    background-color: var(--color-superficie);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-texto);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.chip-importe:hover {
    border-color: var(--color-marca-claro);
}

.chip-importe--seleccionado {
    border-color: var(--color-marca);
    background-color: var(--color-marca);
    color: var(--color-blanco);
}

.resumen-grupo {
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-fondo);
    border: 0.1rem solid var(--color-borde);
    padding: var(--espaciado-md);
}

.resumen-grupo__titulo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-bottom: var(--espaciado-sm);
}

.resumen-grupo__lista {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espaciado-xs) var(--espaciado-md);
    font-size: 1.35rem;
}

.resumen-grupo__lista dt {
    color: var(--color-texto-suave);
}

.resumen-grupo__lista dd {
    font-weight: 700;
    text-align: right;
}

@media (max-width: 600px) {
    .asistente__paso-etiqueta {
        display: none;
    }

    .asistente__paso--activo .asistente__paso-etiqueta {
        display: block;
    }

    .rejilla-competiciones {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asistente .rejilla-equipos {
        max-height: 28rem;
    }
}

/* =====================================================
   ICONOS SVG DE LÍNEA (heredan el color del texto)
   ===================================================== */
.icono {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

.icono--chico {
    width: 1.5rem;
    height: 1.5rem;
}

/* =====================================================
   CABECERA DE GRUPO — ESTADO DE SINCRONIZACIÓN
   ===================================================== */
.estado-sincronizacion {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.estado-sincronizacion__texto {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

.estado-sincronizacion__boton--girando .icono {
    animation: girar 0.9s linear infinite;
}

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

/* =====================================================
   CONFIGURACIÓN — DISEÑO DE AJUSTES (menú lateral + panel)
   ===================================================== */
.ajustes {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: var(--espaciado-xl);
    align-items: start;
}

.ajustes__menu {
    position: sticky;
    top: 8.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ajustes__enlace {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    width: 100%;
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ajustes__enlace:hover,
.ajustes__enlace:focus-visible {
    background-color: var(--color-superficie);
    color: var(--color-texto);
    outline: none;
}

.ajustes__enlace--activo,
.ajustes__enlace--activo:hover {
    background-color: var(--color-superficie);
    color: var(--color-marca);
    box-shadow: var(--sombra-suave);
}

.ajustes__enlace--activo .ajustes__icono {
    color: var(--color-acento-oscuro);
}

.ajustes__enlace--peligro,
.ajustes__enlace--peligro:hover,
.ajustes__enlace--peligro.ajustes__enlace--activo .ajustes__icono {
    color: var(--color-error);
}

.ajustes__enlace-texto {
    flex: 1;
    white-space: nowrap;
}

.ajustes__contador {
    min-width: 2.2rem;
    padding: 0.1rem 0.7rem;
    border-radius: 999px;
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.ajustes__panel {
    min-width: 0;
}

.ajustes__contenido {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg);
    animation: asistente-entrada 0.25s ease;
}

.ajustes__cabecera {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-xs);
}

.ajustes__titulo {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02rem;
    color: var(--color-marca-oscuro);
}

.ajustes__descripcion {
    font-size: 1.4rem;
    color: var(--color-texto-suave);
}

.ajustes__fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaciado-lg);
    align-items: stretch;
}

/* --- Tarjeta de ajuste con pie de guardado --- */
.tarjeta-ajuste {
    display: flex;
    flex-direction: column;
    background-color: var(--color-superficie);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-ajuste--con-cambios {
    border-color: var(--color-marca-claro);
    box-shadow: var(--sombra-media);
}

.tarjeta-ajuste--peligro {
    border-color: rgba(217, 45, 32, 0.35);
}

.tarjeta-ajuste__cabecera {
    padding: var(--espaciado-lg) var(--espaciado-lg) 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tarjeta-ajuste__titulo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-texto);
}

.tarjeta-ajuste--peligro .tarjeta-ajuste__titulo {
    color: var(--color-error);
}

.tarjeta-ajuste__descripcion {
    font-size: 1.3rem;
    color: var(--color-texto-suave);
}

.tarjeta-ajuste__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    padding: var(--espaciado-md) var(--espaciado-lg) var(--espaciado-lg);
}

.tarjeta-ajuste__cuerpo > .boton {
    align-self: flex-start;
}

.tarjeta-ajuste__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    padding: var(--espaciado-sm) var(--espaciado-lg);
    background-color: var(--color-fondo);
    border-top: 0.1rem solid var(--color-borde);
}

.tarjeta-ajuste__estado {
    font-size: 1.25rem;
    color: var(--color-texto-tenue);
}

.tarjeta-ajuste--con-cambios .tarjeta-ajuste__estado {
    color: var(--color-marca);
    font-weight: 600;
}

/* --- General: identidad del grupo --- */
.identidad-grupo {
    display: flex;
    align-items: center;
    gap: var(--espaciado-lg);
}

.identidad-grupo .campo {
    flex: 1;
    min-width: 0;
}

.identidad-grupo__imagen {
    position: relative;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.identidad-grupo__imagen:hover {
    transform: scale(1.03);
}

.identidad-grupo__imagen:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.3rem var(--color-marca-suave);
}

.identidad-grupo__foto,
.identidad-grupo__foto-defecto {
    width: 8.8rem;
    height: 8.8rem;
    border-radius: 50%;
    border: 0.3rem solid var(--color-superficie);
    box-shadow: 0 0 0 0.1rem var(--color-borde), var(--sombra-media);
}

.identidad-grupo__foto {
    object-fit: cover;
    background-color: var(--color-marca-suave);
}

.identidad-grupo__foto-defecto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    font-size: 3.2rem;
    font-weight: 700;
}

.identidad-grupo__camara {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-acento);
    color: var(--color-marca-oscuro);
    border: 0.2rem solid var(--color-superficie);
    box-shadow: var(--sombra-suave);
}

/* --- General: código de invitación --- */
.codigo-invitacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
    padding: var(--espaciado-md) var(--espaciado-lg);
    border: 0.15rem dashed var(--color-marca-claro);
    border-radius: var(--radio-borde);
    background-color: var(--color-marca-suave);
}

.codigo-invitacion__codigo {
    font-family: 'Consolas', 'SFMono-Regular', monospace;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: 0.5rem;
    color: var(--color-marca-oscuro);
}

.codigo-invitacion__acciones {
    display: flex;
    gap: var(--espaciado-sm);
}

/* --- Reglas: competición fija --- */
.competicion-fija {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.competicion-fija__nota {
    display: flex;
    align-items: flex-start;
    gap: var(--espaciado-xs);
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

.competicion-fija__nota .icono {
    margin-top: 0.2rem;
}

.opciones-modo--apiladas {
    flex-direction: column;
}

.opciones-modo--apiladas .tarjeta-modo {
    min-width: 0;
}

/* --- Campo numérico con la moneda Ligol --- */
.campo-con-sufijo {
    position: relative;
    display: flex;
}

.campo-con-sufijo .campo__control {
    width: 100%;
    padding-right: 3.6rem;
}

.campo-con-sufijo__sufijo {
    position: absolute;
    right: var(--espaciado-md);
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--color-texto-suave);
    pointer-events: none;
}

.campo-con-sufijo--chico {
    width: 11rem;
}

.campo-con-sufijo--chico .campo__control {
    padding: var(--espaciado-xs) 3rem var(--espaciado-xs) var(--espaciado-sm);
    font-size: 1.4rem;
}

.campo-con-sufijo--chico .campo-con-sufijo__sufijo {
    right: var(--espaciado-sm);
}

/* --- Participantes --- */
.resumen-miembros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaciado-md);
}

.resumen-miembros__dato {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--espaciado-md) var(--espaciado-lg);
    background-color: var(--color-superficie);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
}

.resumen-miembros__valor {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-marca-oscuro);
}

.resumen-miembros__etiqueta {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}

.lista-miembros {
    display: flex;
    flex-direction: column;
    /* Las filas ocupan todo el ancho de la tarjeta y llegan hasta su borde inferior */
    margin: 0 calc(var(--espaciado-lg) * -1) calc(var(--espaciado-lg) * -1);
}

.miembro {
    display: grid;
    /* La columna del jugador nunca baja de 16rem, para que se lea el nick */
    grid-template-columns: minmax(16rem, 1fr) auto auto;
    align-items: center;
    gap: var(--espaciado-md);
    padding: var(--espaciado-md) var(--espaciado-lg);
    border-top: 0.1rem solid var(--color-borde);
    transition: background-color 0.15s ease;
}

.miembro:hover {
    background-color: var(--color-fondo);
}

.miembro--expulsado {
    grid-template-columns: minmax(0, 1fr) auto;
}

.miembro--expulsado .miembro__identidad {
    opacity: 0.6;
}

.miembro__identidad {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    min-width: 0;
}

.miembro__textos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
}

.miembro__nick {
    font-weight: 700;
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.miembro__saldo,
.miembro__acciones {
    display: flex;
    align-items: center;
    gap: var(--espaciado-xs);
}

.miembro__acciones {
    justify-content: flex-end;
    min-width: 19rem;
}

.miembro__saldo-fijo,
.miembro__nota {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

.boton--peligro-suave {
    background-color: var(--color-error-suave);
    color: var(--color-error);
}

.boton--peligro-suave:hover,
.boton--peligro-suave:focus-visible {
    background-color: var(--color-error);
    color: var(--color-blanco);
}

/* --- Avisos --- */
.contador-caracteres {
    align-self: flex-end;
    font-size: 1.2rem;
    color: var(--color-texto-tenue);
    margin-top: calc(var(--espaciado-sm) * -1);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .ajustes {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaciado-lg);
    }

    /* El menú lateral pasa a ser una barra de pestañas deslizable */
    .ajustes__menu {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--espaciado-xs);
        padding: 0.4rem;
        background-color: var(--color-superficie);
        border: 0.1rem solid var(--color-borde);
        border-radius: var(--radio-borde);
        scrollbar-width: none;
    }

    .ajustes__menu::-webkit-scrollbar {
        display: none;
    }

    .ajustes__enlace {
        width: auto;
        flex-shrink: 0;
        font-size: 1.35rem;
    }

    .ajustes__enlace--activo,
    .ajustes__enlace--activo:hover {
        background-color: var(--color-marca-suave);
        box-shadow: none;
    }

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

@media (max-width: 600px) {
    /* En móvil el menú de Configuración muestra solo iconos, repartidos a lo
       ancho y sin desplazamiento. El texto sigue presente para lectores de
       pantalla y el nombre del apartado aparece en el título del panel. */
    .ajustes__menu {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        overflow: visible;
    }

    .ajustes__enlace {
        position: relative;
        justify-content: center;
        padding: var(--espaciado-sm) 0;
    }

    .ajustes__icono {
        width: 2.2rem;
        height: 2.2rem;
    }

    .ajustes__enlace-texto {
        position: absolute;
        width: 0.1rem;
        height: 0.1rem;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ajustes__contador {
        position: absolute;
        top: 0.2rem;
        right: calc(50% - 2.4rem);
        min-width: 1.7rem;
        padding: 0 0.4rem;
        font-size: 1rem;
        line-height: 1.7rem;
        background-color: var(--color-acento);
        color: var(--color-marca-oscuro);
    }

    .estado-sincronizacion {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .tarjeta-ajuste__cabecera {
        padding: var(--espaciado-md) var(--espaciado-md) 0;
    }

    .tarjeta-ajuste__cuerpo {
        padding: var(--espaciado-md);
    }

    .tarjeta-ajuste__pie {
        padding: var(--espaciado-sm) var(--espaciado-md);
    }

    .identidad-grupo {
        flex-direction: column;
        align-items: stretch;
    }

    .identidad-grupo__imagen {
        align-self: center;
    }

    .codigo-invitacion {
        justify-content: center;
        text-align: center;
    }

    .codigo-invitacion__codigo {
        font-size: 2.4rem;
    }

    .resumen-miembros {
        gap: var(--espaciado-sm);
    }

    .resumen-miembros__dato {
        padding: var(--espaciado-sm) var(--espaciado-md);
    }

    .resumen-miembros__valor {
        font-size: 1.7rem;
    }

    .resumen-miembros__etiqueta {
        font-size: 1rem;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .lista-miembros {
        margin: 0 calc(var(--espaciado-md) * -1) calc(var(--espaciado-md) * -1);
    }

    .miembro,
    .miembro--expulsado {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--espaciado-md);
        row-gap: var(--espaciado-sm);
    }

    .miembro__acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
        min-width: 0;
        flex-wrap: wrap;
    }

    .miembro--expulsado .miembro__acciones {
        justify-content: space-between;
    }

    /* Cada parte en su línea: foto y nombre, saldo y acciones */
    .miembro__identidad,
    .miembro__saldo {
        grid-column: 1 / -1;
    }

    .miembro__saldo {
        justify-content: flex-start;
    }
}

/* =====================================================
   TEXTOS LEGALES — casillas del registro
   ===================================================== */
.bloque-legal {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde);
    background-color: var(--color-fondo);
    border: 0.1rem solid var(--color-borde);
}

.casilla-legal {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.casilla-legal__fila {
    display: flex;
    align-items: flex-start;
    gap: var(--espaciado-sm);
}

.casilla-legal__input {
    width: 1.9rem;
    height: 1.9rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-marca);
    cursor: pointer;
}

.casilla-legal__input:focus-visible {
    outline: 0.3rem solid var(--color-marca-suave);
    outline-offset: 0.2rem;
}

.casilla-legal__texto {
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--color-texto);
    cursor: pointer;
}

.casilla-legal__error {
    font-size: 1.2rem;
    color: var(--color-error);
    padding-left: 2.7rem;
}

.casilla-legal__error:empty {
    display: none;
}

.casilla-legal--error .casilla-legal__input {
    outline: 0.2rem solid var(--color-error);
    outline-offset: 0.1rem;
    border-radius: 0.3rem;
}

.enlace-legal {
    display: inline;
    padding: 0;
    font-size: inherit;
    font-weight: 700;
    color: var(--color-marca);
    text-decoration: underline;
    text-decoration-color: var(--color-marca-claro);
    text-underline-offset: 0.2rem;
    transition: color 0.15s ease;
}

.enlace-legal:hover,
.enlace-legal:focus-visible {
    color: var(--color-acento-oscuro);
    outline: none;
}

/* Primera capa de información sobre protección de datos */
.info-datos {
    border-top: 0.1rem solid var(--color-borde);
    padding-top: var(--espaciado-sm);
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

.info-datos__resumen {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-texto-suave);
    list-style-position: inside;
    transition: color 0.15s ease;
}

.info-datos__resumen:hover {
    color: var(--color-marca);
}

.info-datos__lista {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espaciado-xs) var(--espaciado-md);
    margin-top: var(--espaciado-sm);
}

.info-datos__lista dt {
    font-weight: 700;
    color: var(--color-texto);
}

.info-datos__mas {
    margin-top: var(--espaciado-sm);
}

/* =====================================================
   TEXTOS LEGALES — modal con el documento
   ===================================================== */
.modal--legal {
    max-width: 72rem;
}

.texto-legal {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--color-texto);
}

.texto-legal__version {
    align-self: flex-start;
    padding: 0.3rem 1rem;
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
    font-size: 1.2rem;
    font-weight: 700;
}

.texto-legal__seccion {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.texto-legal__titulo {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-marca-oscuro);
}

.texto-legal__lista {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-xs);
    padding-left: var(--espaciado-md);
}

.texto-legal__lista li {
    position: relative;
    padding-left: var(--espaciado-md);
}

.texto-legal__lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--color-acento);
}

.texto-legal__tabla-envoltorio {
    overflow-x: auto;
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
}

.texto-legal__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.3rem;
}

.texto-legal__tabla th,
.texto-legal__tabla td {
    padding: var(--espaciado-sm) var(--espaciado-md);
    text-align: left;
    vertical-align: top;
    border-bottom: 0.1rem solid var(--color-borde);
}

.texto-legal__tabla th {
    background-color: var(--color-fondo);
    font-weight: 700;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.texto-legal__tabla tr:last-child td {
    border-bottom: none;
}

/* =====================================================
   PIE DE PÁGINA (enlaces legales permanentes)
   ===================================================== */
.pie-pagina {
    border-top: 0.1rem solid var(--color-borde);
    background-color: var(--color-superficie);
}

.pie-pagina__contenido {
    max-width: 104rem;
    margin: 0 auto;
    padding: var(--espaciado-md) var(--espaciado-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-sm) var(--espaciado-lg);
    flex-wrap: wrap;
    font-size: 1.25rem;
    color: var(--color-texto-tenue);
}

.pie-pagina__enlaces {
    display: flex;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
}

.pie-pagina__enlace {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    transition: color 0.15s ease;
}

.pie-pagina__enlace:hover,
.pie-pagina__enlace:focus-visible {
    color: var(--color-marca);
    text-decoration: underline;
    outline: none;
}

@media (max-width: 600px) {
    .pie-pagina__contenido {
        flex-direction: column-reverse;
        padding: var(--espaciado-md);
        text-align: center;
    }

    .pie-pagina__enlaces {
        justify-content: center;
    }

    .info-datos__lista {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .info-datos__lista dd {
        margin-bottom: var(--espaciado-xs);
    }
}

/* Petición de aceptar textos legales actualizados */
.nueva-aceptacion {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    font-size: 1.45rem;
    line-height: 1.55;
}

.nueva-aceptacion__lista {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-fondo);
    border: 0.1rem solid var(--color-borde);
}

/* =====================================================
   ELIMINAR CUENTA (perfil)
   ===================================================== */
.baja-cuenta {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    font-size: 1.4rem;
}

.baja-cuenta__intro {
    font-weight: 700;
    color: var(--color-error);
}

.baja-cuenta__grupos {
    display: flex;
    flex-direction: column;
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
    overflow: hidden;
}

.baja-cuenta__grupo {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
}

.baja-cuenta__grupo + .baja-cuenta__grupo {
    border-top: 0.1rem solid var(--color-borde);
}

.baja-cuenta__grupo-textos {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.baja-cuenta__grupo-nombre {
    font-weight: 700;
}

.baja-cuenta__grupo-detalle {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

.baja-cuenta__saldo {
    font-weight: 700;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.baja-cuenta__saldo--pendiente {
    color: var(--color-aviso);
}

.baja-cuenta__alerta {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-aviso-suave);
    border: 0.1rem solid rgba(181, 71, 8, 0.25);
    color: var(--color-texto);
}

.baja-cuenta__alerta-titulo {
    font-weight: 700;
    color: var(--color-aviso);
}

.baja-cuenta__grupo-aviso {
    margin-top: 0.2rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-aviso);
}

/* Clasificación: quien eliminó su cuenta aparece atenuado */
.fila-clasificacion--baja {
    opacity: 0.55;
}

.fila-clasificacion__etiqueta-baja {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-texto-suave);
}

/* =====================================================
   MODAL "TU SALDO" (recargar / retirar)
   ===================================================== */
.saldo-grupo {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
}

.saldo-grupo__resumen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde);
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    text-align: center;
}

.saldo-grupo__etiqueta {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    opacity: 0.8;
}

.saldo-grupo__importe {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03rem;
}

.saldo-grupo__pendiente {
    font-size: 1.25rem;
    color: var(--color-acento);
    font-weight: 600;
}

.saldo-grupo__pestañas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.4rem;
    border-radius: var(--radio-borde);
    background-color: var(--color-fondo);
    border: 0.1rem solid var(--color-borde);
}

.saldo-grupo__pestaña {
    padding: var(--espaciado-sm);
    border-radius: var(--radio-borde-chico);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.saldo-grupo__pestaña:hover,
.saldo-grupo__pestaña:focus-visible {
    color: var(--color-texto);
    outline: none;
}

.saldo-grupo__pestaña--activa,
.saldo-grupo__pestaña--activa:hover {
    background-color: var(--color-superficie);
    color: var(--color-marca);
    box-shadow: var(--sombra-suave);
}

.retirada {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
}

.retirada .chip-importe {
    align-self: flex-start;
    font-size: 1.3rem;
}

.retirada__nota {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-left: 0.3rem solid var(--color-acento);
    background-color: var(--color-acento-suave);
    border-radius: 0 var(--radio-borde-chico) var(--radio-borde-chico) 0;
}

/* Petición de Ligoles: formulario para conceder otra cantidad */
.fila-recarga__modificar {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    flex-wrap: wrap;
    margin-top: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-acento-suave);
}

.fila-recarga__etiqueta {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-marca-oscuro);
}

/* =====================================================
   ADMINISTRACIÓN DE LA WEB (cuenta «Ligol»)
   ===================================================== */

/* Cabecera en modo administración: etiqueta junto al logo y sin campana */
.modo-admin #boton-notificaciones {
    display: none;
}

.modo-admin .cabecera__marca {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
}

.modo-admin .cabecera__marca::after {
    content: 'Administración';
    padding: 0.3rem 1rem;
    border-radius: 999px;
    background-color: var(--color-acento);
    color: var(--color-marca-oscuro);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.03rem;
}

.insignia-admin {
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-xs);
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Estados */
.estado-admin {
    display: inline-block;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.estado-admin--activo {
    background-color: var(--color-exito-suave);
    color: var(--color-exito);
}

.estado-admin--bloqueado,
.estado-admin--suspendido {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.estado-admin--eliminado {
    background-color: var(--color-error-suave);
    color: var(--color-error);
}

/* Resumen */
.cifras-admin {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaciado-md);
}

.cifras-admin__enlace {
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cifras-admin__enlace:hover,
.cifras-admin__enlace:focus-visible {
    border-color: var(--color-marca-claro);
    box-shadow: var(--sombra-media);
    transform: translateY(-0.2rem);
    outline: none;
}

.incidencia-admin {
    display: flex;
    align-items: flex-start;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
    font-size: 1.35rem;
    font-weight: 600;
}

.incidencia-admin .icono {
    margin-top: 0.2rem;
}

.incidencia-admin--ok {
    background-color: var(--color-exito-suave);
    color: var(--color-exito);
}

/* Listados */
.barra-admin {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.barra-admin__campo {
    position: relative;
}

.barra-admin__lupa {
    position: absolute;
    left: var(--espaciado-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-texto-tenue);
    pointer-events: none;
}

.barra-admin__busqueda {
    width: 100%;
    padding-left: 4.2rem;
}

.lista-admin__total {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
    margin-bottom: var(--espaciado-sm);
}

.lista-admin {
    display: flex;
    flex-direction: column;
    background-color: var(--color-superficie);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
}

.fila-admin {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    width: 100%;
    padding: var(--espaciado-md) var(--espaciado-lg);
    text-align: left;
    transition: background-color 0.15s ease;
}

.fila-admin + .fila-admin {
    border-top: 0.1rem solid var(--color-borde);
}

.fila-admin:hover,
.fila-admin:focus-visible {
    background-color: var(--color-fondo);
    outline: none;
}

.fila-admin__textos {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fila-admin__nombre {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-texto);
}

.fila-admin__detalle {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fila-admin__datos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.fila-admin__cifra {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

/* Fichas de grupo y usuario */
.ficha-admin {
    padding-bottom: var(--espaciado-lg);
}

.ficha-admin__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    padding: var(--espaciado-lg) var(--espaciado-lg) var(--espaciado-md);
}

.ficha-admin__titulo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaciado-xs);
    min-width: 0;
}

.ficha-admin > .datos-admin,
.ficha-admin > .incidencia-admin,
.ficha-admin__acciones {
    margin: 0 var(--espaciado-lg);
}

.datos-admin dd {
    text-align: left;
    overflow-wrap: anywhere;
}

.ficha-admin > .incidencia-admin {
    margin-top: var(--espaciado-md);
}

.ficha-admin__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaciado-sm);
    margin-top: var(--espaciado-lg);
    padding-top: var(--espaciado-md);
    border-top: 0.1rem solid var(--color-borde);
}

.tabla-admin td {
    white-space: nowrap;
}

.zona-lectura-admin {
    margin-top: var(--espaciado-sm);
}

@media (max-width: 900px) {
    .cifras-admin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .modo-admin .cabecera__marca::after {
        font-size: 1rem;
        padding: 0.2rem 0.7rem;
    }

    .fila-admin {
        flex-wrap: wrap;
        padding: var(--espaciado-md);
    }

    .fila-admin__textos {
        flex-basis: calc(100% - 6rem);
    }

    .fila-admin__datos {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        padding-left: 5rem;
    }

    .fila-admin__detalle {
        white-space: normal;
    }

    .ficha-admin__cabecera {
        padding: var(--espaciado-md);
    }

    .ficha-admin > .datos-admin,
    .ficha-admin > .incidencia-admin,
    .ficha-admin__acciones {
        margin: 0 var(--espaciado-md);
    }

    .datos-admin {
        grid-template-columns: 1fr;
    }
}

/* Mis grupos: aviso de grupo bloqueado por la administración */
.tarjeta-grupo__bloqueo {
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
    font-size: 1.25rem;
    font-weight: 600;
}

/* Administración: menú de gestión de un participante */
.opciones-gestion {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.opcion-gestion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: var(--espaciado-md);
    border: 0.15rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.opcion-gestion:hover,
.opcion-gestion:focus-visible {
    border-color: var(--color-marca-claro);
    background-color: var(--color-marca-suave);
    outline: none;
}

.opcion-gestion__titulo {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-texto);
}

.opcion-gestion__descripcion {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

/* =====================================================
   Comunicaciones de la administración (avisos y mensajes)
   ===================================================== */

.comunicacion .tarjeta-modo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 16rem;
    background-color: var(--color-superficie);
    font: inherit;
    color: inherit;
    text-align: left;
}

.comunicacion .tarjeta-modo:focus-visible {
    outline: 0.2rem solid var(--color-acento);
    outline-offset: 0.2rem;
}

.comunicacion__nota {
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
    font-size: 1.35rem;
}

.comunicacion__contador {
    align-self: flex-end;
}

.comunicacion__pie {
    display: flex;
    justify-content: flex-end;
}

.comunicacion__pie .boton {
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-xs);
}

.comunicacion__resumen {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 36rem;
    white-space: pre-wrap;
}

.destinatarios {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.destinatarios__elegidos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaciado-xs);
}

.destinatarios__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-xs);
    padding: 0.3rem 0.4rem 0.3rem var(--espaciado-sm);
    border-radius: 999px;
    background-color: var(--color-marca-suave);
    border: 0.1rem solid var(--color-azul-100);
    color: var(--color-marca);
    font-size: 1.3rem;
    font-weight: 600;
}

.destinatarios__quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.destinatarios__quitar:hover,
.destinatarios__quitar:focus-visible {
    background-color: var(--color-azul-100);
    outline: none;
}

.destinatarios__resultados {
    display: flex;
    flex-direction: column;
    max-height: 28rem;
    overflow-y: auto;
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
}

.destinatarios__resultados > .campo__ayuda {
    padding: var(--espaciado-sm) var(--espaciado-md);
}

.destinatarios__resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border: none;
    border-bottom: 0.1rem solid var(--color-borde);
    background-color: var(--color-superficie);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.destinatarios__resultado:last-child {
    border-bottom: none;
}

.destinatarios__resultado:hover:not(:disabled),
.destinatarios__resultado:focus-visible {
    background-color: var(--color-marca-suave);
    outline: none;
}

.destinatarios__resultado:disabled {
    cursor: default;
    opacity: 0.6;
}

.destinatarios__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.destinatarios__accion {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-acento-oscuro);
}

.etiqueta-comunicacion {
    display: inline-block;
    padding: 0.2rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 700;
}

.etiqueta-comunicacion--aviso {
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
}

.etiqueta-comunicacion--mensaje {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

/* Insignia «Administración» en los mensajes que Ligol envía a un grupo */

.mensaje-fila__insignia {
    margin-left: var(--espaciado-xs);
    padding: 0.1rem var(--espaciado-sm);
    border-radius: 999px;
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
    font-size: 1.1rem;
    font-weight: 700;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .comunicacion .tarjeta-modo {
        min-width: 100%;
    }
}

.destinatarios__grupo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.destinatarios__casilla {
    justify-content: flex-start;
}

.destinatarios__casilla input {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    accent-color: var(--color-marca);
}

/* Imagen de grupo por defecto: el emblema de su competición, entero y
   centrado sobre blanco (sin el recorte de las fotos subidas).
   overflow: visible evita que el navegador recorte el emblema con el
   círculo interior que forman border-radius y el padding. */
.avatar-emblema {
    object-fit: contain;
    overflow: visible;
    padding: 0.6rem;
    background-color: var(--color-superficie);
}

/* Margen de unos 16 % del tamaño para que el emblema quepa en el círculo */
.fila-solicitud__grupo-imagen.avatar-emblema { padding: 0.35rem; }
.fila-clasificacion__imagen.avatar-emblema { padding: 0.6rem; }
.tarjeta-grupo__imagen.avatar-emblema { padding: 0.9rem; }
.selector-imagen__vista-previa.avatar-emblema { padding: 1.3rem; }
.identidad-grupo__foto.avatar-emblema { padding: 1.4rem; }

/* Los emblemas de competición redondeados tampoco se recortan por dentro */
.insignia-competicion__emblema,
.ficha-competicion__emblema,
.tarjeta-competicion__emblema {
    overflow: visible;
}

/* Aviso de la campana mientras se procesa su acción */
.fila-solicitud {
    transition: opacity 0.2s ease;
}

.fila-solicitud--procesando {
    opacity: 0.55;
    pointer-events: none;
}

/* =====================================================
   AMIGOS
   ===================================================== */

/* Clasificación: pedir amistad a un compañero */
.amistad-control {
    display: block;
    margin-top: 0.2rem;
}

.amistad-control__boton,
.amistad-control__insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
}

.amistad-control__boton {
    border: 0.1rem solid var(--color-azul-100);
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.amistad-control__boton:hover,
.amistad-control__boton:focus-visible {
    background-color: var(--color-azul-100);
    border-color: var(--color-marca-claro);
    outline: none;
}

.amistad-control__boton:disabled {
    opacity: 0.6;
    cursor: default;
}

.amistad-control__insignia {
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
}

.amistad-control__pendiente {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-texto-tenue);
}

/* Perfil: lista de amigos y solicitudes */
.amigos {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
    margin-top: var(--espaciado-md);
}

.amigos__titulo {
    margin-bottom: var(--espaciado-sm);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.amigos__lista {
    display: flex;
    flex-direction: column;
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
}

.amigos__fila {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    padding: var(--espaciado-sm) var(--espaciado-md);
}

.amigos__fila + .amigos__fila {
    border-top: 0.1rem solid var(--color-borde);
}

.amigos__imagen,
.amigos__imagen-defecto {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.amigos__imagen {
    object-fit: cover;
}

.amigos__imagen-defecto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    font-weight: 700;
}

.amigos__textos {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.amigos__nick {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.amigos__acciones {
    display: flex;
    gap: var(--espaciado-xs);
    flex-shrink: 0;
}

/* Casillas para invitar a amigos (asistente y Configuración) */
.selector-amigos {
    display: flex;
    flex-direction: column;
    max-height: 32rem;
    overflow-y: auto;
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
}

.selector-amigos__fila {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    padding: var(--espaciado-sm) var(--espaciado-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.selector-amigos__fila + .selector-amigos__fila {
    border-top: 0.1rem solid var(--color-borde);
}

.selector-amigos__fila:hover {
    background-color: var(--color-marca-suave);
}

.selector-amigos__fila input {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    accent-color: var(--color-marca);
}

.selector-amigos__fila--no-disponible {
    cursor: default;
    opacity: 0.65;
}

.selector-amigos__fila--no-disponible:hover {
    background-color: transparent;
}

.selector-amigos__nick {
    flex: 1;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.selector-amigos__situacion {
    font-size: 1.2rem;
    color: var(--color-texto-suave);
}

.asistente__nota {
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-suave);
    color: var(--color-texto-suave);
    font-size: 1.4rem;
}

/* Configuración: invitar a amigos junto al código */
.invitar-amigos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-suave);
}

.invitar-amigos__titulo {
    font-weight: 700;
    color: var(--color-marca);
}

.invitar-amigos__separador {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    margin: var(--espaciado-md) 0 var(--espaciado-sm);
    font-size: 1.2rem;
    color: var(--color-texto-tenue);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.invitar-amigos__separador::before,
.invitar-amigos__separador::after {
    content: '';
    flex: 1;
    height: 0.1rem;
    background-color: var(--color-borde);
}

@media (max-width: 600px) {
    .amigos__fila {
        flex-wrap: wrap;
    }

    .amigos__acciones {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Límites de importes */
.recarga__limite {
    margin-bottom: var(--espaciado-md);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
    font-size: 1.35rem;
    font-weight: 600;
}

.miembro__limite {
    flex-basis: 100%;
    font-size: 1.15rem;
    color: var(--color-texto-tenue);
    text-align: right;
}

.miembro__saldo {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* =====================================================
   REPORTES DE USUARIOS
   ===================================================== */

.boton-reportar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-texto-tenue);
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.boton-reportar:hover,
.boton-reportar:focus-visible {
    color: var(--color-error);
    background-color: var(--color-error-suave);
    outline: none;
}

.fila-clasificacion__acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaciado-xs);
    margin-top: 0.2rem;
}

.fila-clasificacion__acciones .amistad-control {
    display: inline-flex;
    margin-top: 0;
}

.mensaje-fila__pie {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--espaciado-xs);
}

.reporte__motivos {
    display: flex;
    flex-direction: column;
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
}

.reporte__motivo {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.reporte__motivo + .reporte__motivo {
    border-top: 0.1rem solid var(--color-borde);
}

.reporte__motivo:hover {
    background-color: var(--color-marca-suave);
}

.reporte__motivo input {
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    accent-color: var(--color-error);
}

.reporte__motivo:has(input:checked) {
    background-color: var(--color-error-suave);
    font-weight: 600;
}

.reporte__nota {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

/* Panel de administración */
.reporte-admin__persona,
.reporte-admin__motivo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reporte-admin__motivo {
    max-width: 30rem;
}

.estado-reporte {
    display: inline-block;
    padding: 0.2rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 700;
}

.estado-reporte--pendiente {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.estado-reporte--revisado {
    background-color: var(--color-exito-suave);
    color: var(--color-exito);
}

.estado-reporte--descartado {
    background-color: var(--color-fondo);
    color: var(--color-texto-suave);
}

.reportes-admin__filtros {
    margin-bottom: var(--espaciado-md);
}

/* En la tabla de reportes los textos largos sí pueden partirse */
.tabla-admin td .reporte-admin__motivo,
.tabla-admin td .reporte-admin__persona {
    white-space: normal;
}

.reporte-admin__persona .estado-reporte {
    align-self: flex-start;
}

/* =====================================================
   MI PERFIL (mismo diseño que la Configuración de un grupo)
   ===================================================== */

/* Campos en dos columnas dentro de una tarjeta (una en móvil) */
.ajustes__fila.perfil__contacto {
    gap: var(--espaciado-md);
    align-items: start;
}

@media (max-width: 600px) {
    .ajustes__fila.perfil__contacto {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Contador del menú cuando hay solicitudes de amistad por responder */
.ajustes__contador--aviso {
    background-color: var(--color-acento);
    color: var(--color-blanco);
}

/* Mensajes: eliminar de la propia bandeja */
.mensaje-fila__pie {
    gap: var(--espaciado-xs);
}

.mensaje-fila {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mensaje-fila--saliendo {
    opacity: 0;
    transform: translateX(1.6rem);
}

/* =====================================================
   FINAL DE TEMPORADA
   ===================================================== */

/* Selector: cuándo termina y destino del bote */
.fin-temporada {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.fin-temporada__pregunta {
    margin-top: var(--espaciado-sm);
    font-weight: 700;
    color: var(--color-texto);
}

.fin-temporada__extra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaciado-sm);
    margin-top: var(--espaciado-sm);
    font-size: 1.3rem;
    color: var(--color-texto-suave);
}

.fin-temporada__entrada {
    width: 9rem;
}

.fin-temporada__entrada--fecha {
    width: 17rem;
}

/* Insignias de estado de la temporada */
.insignia-temporada {
    display: inline-block;
    margin-left: var(--espaciado-xs);
    padding: 0.2rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 700;
    vertical-align: middle;
}

.insignia-temporada--cerrado {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.insignia-temporada--archivado {
    background-color: var(--color-fondo);
    color: var(--color-texto-suave);
    border: 0.1rem solid var(--color-borde);
}

.insignia-temporada--numero {
    background-color: var(--color-acento-suave);
    color: var(--color-acento-oscuro);
}

.insignia-invitacion {
    display: inline-block;
    padding: 0.2rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 700;
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.miembro--pendiente {
    grid-template-columns: minmax(0, 1fr) auto;
}

.miembro--pendiente .miembro__identidad {
    opacity: 0.85;
}

.fila-solicitud__saldo {
    margin-top: var(--espaciado-xs);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-texto-suave);
}

.fila-solicitud__saldo--positivo {
    color: var(--color-acento-oscuro);
}

.aviso-cierre {
    display: flex;
    align-items: center;
    gap: var(--espaciado-sm);
    margin-bottom: var(--espaciado-md);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
    font-weight: 600;
}

/* Pestaña «Final» */
.fin-portada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaciado-sm);
    margin-bottom: var(--espaciado-lg);
    padding: var(--espaciado-xl) var(--espaciado-lg);
    border-radius: var(--radio-borde-grande);
    background: linear-gradient(135deg, var(--color-azul-900), var(--color-azul-700));
    color: var(--color-blanco);
    text-align: center;
    box-shadow: var(--sombra-media);
}

.fin-portada__trofeo {
    width: 6.4rem;
    height: 6.4rem;
    padding: var(--espaciado-sm);
    border-radius: 50%;
    background-color: var(--color-superficie);
}

.fin-portada__titulo {
    font-size: 2.6rem;
    font-weight: 800;
}

.fin-portada__texto {
    color: var(--color-azul-100);
}

.fin-portada__estado {
    padding: 0.4rem var(--espaciado-md);
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.14);
}

.fin-portada__estado--archivado {
    background-color: var(--color-acento);
    color: var(--color-azul-950);
}

.podio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--espaciado-md);
    max-width: 52rem;
    margin: 0 auto;
}

.podio__puesto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    min-width: 0;
}

.podio__imagen,
.podio__imagen-defecto {
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 50%;
}

.podio__imagen {
    object-fit: cover;
}

.podio__imagen-defecto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-azul-600), var(--color-marca-profundo));
    color: var(--color-blanco);
    font-weight: 800;
    font-size: 1.8rem;
}

.podio__puesto--1 .podio__imagen,
.podio__puesto--1 .podio__imagen-defecto {
    width: 6.8rem;
    height: 6.8rem;
    box-shadow: 0 0 0 0.3rem var(--color-acento);
}

.podio__nick {
    max-width: 100%;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.podio__ganado {
    font-weight: 700;
    color: var(--color-exito);
}

.podio__escalon {
    width: 100%;
    margin-top: var(--espaciado-xs);
    padding: var(--espaciado-sm) 0;
    border-radius: var(--radio-borde-chico) var(--radio-borde-chico) 0 0;
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
    font-size: 2rem;
    font-weight: 800;
}

.podio__puesto--1 .podio__escalon {
    padding: var(--espaciado-lg) 0;
    background: linear-gradient(135deg, var(--color-acento), var(--color-acento-oscuro));
    color: var(--color-blanco);
}

.podio__puesto--2 .podio__escalon {
    padding: var(--espaciado-md) 0;
}

.fin-bote {
    padding: var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-suave);
    font-weight: 600;
}

.fin-bote--barbacoa {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.fin-bote + .boton {
    margin-top: var(--espaciado-md);
}

.fin-saldo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: var(--espaciado-md);
}

.fin-saldo__importe {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-marca);
}

.fin-saldo__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaciado-sm);
}

#zona-pestaña > .tarjeta-ajuste + .tarjeta-ajuste {
    margin-top: var(--espaciado-lg);
}

@media (max-width: 600px) {
    .podio {
        gap: var(--espaciado-sm);
    }

    .fin-portada__titulo {
        font-size: 2.2rem;
    }
}

.podio--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
}

.podio--1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 17rem;
}

/* =====================================================
   Partidos de la quiniela: equipos elegidos o aleatorios
   ===================================================== */
.seleccion-partidos {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
}

.seleccion-partidos__extra {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
    margin-top: var(--espaciado-sm);
}

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

.contador-partidos {
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-md);
    align-self: flex-start;
    padding: var(--espaciado-xs);
    border: 0.1rem solid var(--color-borde);
    border-radius: 999px;
    background-color: var(--color-superficie);
}

.contador-partidos__boton {
    width: 3.6rem;
    height: 3.6rem;
    border: none;
    border-radius: 50%;
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.contador-partidos__boton:hover:not(:disabled) {
    background-color: var(--color-azul-100);
    transform: scale(1.05);
}

.contador-partidos__boton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.contador-partidos__valor {
    display: flex;
    align-items: baseline;
    gap: var(--espaciado-xs);
    min-width: 17rem;
    justify-content: center;
}

.contador-partidos__cifra {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-marca-oscuro);
}

.contador-partidos__etiqueta {
    font-size: 1.3rem;
    color: var(--color-texto-suave);
}

/* «Mis grupos»: interruptor para ver también los grupos terminados */
.filtro-grupos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    margin-bottom: var(--espaciado-md);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-superficie);
}

.filtro-grupos__texto {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    cursor: pointer;
}

.filtro-grupos__titulo {
    font-size: 1.4rem;
    font-weight: 700;
}

.filtro-grupos__detalle {
    font-size: 1.25rem;
    color: var(--color-texto-suave);
}

/* Panel de administración → Sistema */
.nivel-sistema {
    display: inline-block;
    padding: 0.2rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.nivel-sistema--error {
    background-color: var(--color-error-suave);
    color: var(--color-error);
}

.nivel-sistema--aviso {
    background-color: var(--color-aviso-suave);
    color: var(--color-aviso);
}

.nivel-sistema--info {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.nivel-sistema__contexto {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.1rem;
    color: var(--color-texto-suave);
    overflow-wrap: anywhere;
}

/* =====================================================
   Marcador destacado del bote (cabecera del grupo e histórico)
   ===================================================== */
.bote-destacado {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-sm) var(--espaciado-md) var(--espaciado-sm) var(--espaciado-sm);
    border-radius: var(--radio-borde);
    background: linear-gradient(135deg, var(--color-azul-700), var(--color-azul-950));
    color: var(--color-blanco);
    box-shadow: var(--sombra-marca);
    overflow: hidden;
    flex-shrink: 0;
}

/* Brillo diagonal sutil */
.bote-destacado::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 0%, rgba(45, 212, 191, 0.35), transparent 55%);
    pointer-events: none;
}

.bote-destacado__icono {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-acento);
    color: var(--color-marca-oscuro);
}

.bote-destacado__textos {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.bote-destacado__etiqueta {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: var(--color-acento);
}

.bote-destacado__importe {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02rem;
    white-space: nowrap;
}

.bote-destacado__detalle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
}

.bote-destacado--grande {
    padding: var(--espaciado-md) var(--espaciado-lg) var(--espaciado-md) var(--espaciado-md);
}

.bote-destacado--grande .bote-destacado__icono {
    width: 5rem;
    height: 5rem;
}

.bote-destacado--grande .bote-destacado__importe {
    font-size: 3.2rem;
}

/* Sin bote pendiente: mismo marcador, menos protagonismo */
.bote-destacado--apagado {
    background: var(--color-superficie);
    color: var(--color-texto);
    border: 0.1rem solid var(--color-borde);
    box-shadow: var(--sombra-suave);
}

.bote-destacado--apagado::after {
    display: none;
}

.bote-destacado--apagado .bote-destacado__icono {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.bote-destacado--apagado .bote-destacado__etiqueta {
    color: var(--color-texto-suave);
}

.bote-destacado--apagado .bote-destacado__detalle {
    color: var(--color-texto-suave);
}

/* En la cabecera del grupo: columna derecha con el bote y la sincronización */
.grupo-detalle__lado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--espaciado-sm);
    margin-left: auto;
}

.grupo-detalle__lado .estado-sincronizacion {
    margin-left: 0;
}

@media (max-width: 600px) {
    .grupo-detalle__lado {
        width: 100%;
        margin-left: 0;
        align-items: stretch;
    }

    .jornada-hist__cabecera .bote-destacado {
        order: 4;
        width: 100%;
    }

    .bote-destacado--grande .bote-destacado__importe {
        font-size: 2.6rem;
    }
}

/* Versión compacta y clara, dentro de una tarjeta (histórico) */
.bote-destacado--compacto {
    gap: var(--espaciado-xs);
    padding: 0.6rem var(--espaciado-sm);
    background: var(--color-marca-suave);
    color: var(--color-marca-oscuro);
    box-shadow: none;
    border: 0.1rem solid var(--color-azul-100);
}

.bote-destacado--compacto::after {
    display: none;
}

.bote-destacado--compacto .bote-destacado__icono {
    width: 2.8rem;
    height: 2.8rem;
    background-color: var(--color-superficie);
    color: var(--color-marca);
}

.bote-destacado--compacto .bote-destacado__icono .icono {
    width: 1.6rem;
    height: 1.6rem;
}

.bote-destacado--compacto .bote-destacado__etiqueta {
    font-size: 1rem;
    color: var(--color-texto-suave);
}

.bote-destacado--compacto .bote-destacado__importe {
    font-size: 1.6rem;
}

.bote-destacado--compacto .bote-destacado__detalle {
    font-size: 1.1rem;
    color: var(--color-texto-suave);
}

/* Moneda Ligol (unidad de juego) */
.icono-ligol {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: -0.25rem;
}

.campo-con-sufijo__sufijo {
    display: flex;
    align-items: center;
}

.campo-con-sufijo__moneda {
    width: 2rem;
    height: 2rem;
}

/* Importes destacados con la moneda Ligol delante */
.importe-ligoles {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.importe-ligoles .icono-ligol {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
}

/* =====================================================
   EN DIRECTO
   ===================================================== */
.pestañas__en-vivo {
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.2rem;
    border-radius: 50%;
    background-color: var(--color-error);
    animation: latido-pendiente 1.8s ease-out infinite;
}

.directo {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-lg);
}

.directo__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    padding: var(--espaciado-md) var(--espaciado-lg);
    border: 0.1rem solid var(--color-borde);
    border-left: 0.4rem solid var(--color-error);
    border-radius: var(--radio-borde);
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-suave);
}

.directo__titulos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.directo__titulo {
    font-size: 1.7rem;
    font-weight: 700;
}

.directo__estado {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem var(--espaciado-sm);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.04rem;
}

.directo__estado--vivo {
    background-color: var(--color-error-suave);
    color: var(--color-error);
    text-transform: uppercase;
}

.directo__estado--cerrada {
    background-color: var(--color-marca-suave);
    color: var(--color-marca);
}

.directo__estado--terminada {
    background-color: var(--color-exito-suave);
    color: var(--color-exito);
}

.directo__punto {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background-color: var(--color-error);
    animation: latido-pendiente 1.8s ease-out infinite;
}

/* Marcadores */
.directo__marcadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr));
    gap: var(--espaciado-md);
}

.marcador-directo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--espaciado-sm);
    padding: var(--espaciado-md);
    border: 0.1rem solid var(--color-borde);
    border-radius: var(--radio-borde);
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-suave);
}

.marcador-directo--juego,
.marcador-directo--descanso {
    border-color: var(--color-error);
    box-shadow: 0 0 0 0.2rem var(--color-error-suave), var(--sombra-suave);
}

.marcador-directo__centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.marcador-directo__goles {
    padding: 0.4rem var(--espaciado-md);
    border-radius: var(--radio-borde-chico);
    background-color: var(--color-marca-profundo);
    color: var(--color-blanco);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.1rem;
    white-space: nowrap;
}

.marcador-directo__goles--pendiente {
    background-color: var(--color-fondo);
    color: var(--color-texto-suave);
}

.marcador-directo__estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.marcador-directo__estado--juego {
    color: var(--color-error);
}

.marcador-directo__estado--descanso {
    color: var(--color-aviso);
}

.marcador-directo__estado--final {
    color: var(--color-exito);
}

/* «Si acabara ahora…» */
.si-acabara {
    padding: var(--espaciado-md) var(--espaciado-lg);
    border-radius: var(--radio-borde);
    border: 0.1rem solid var(--color-borde);
    background-color: var(--color-superficie);
}

.si-acabara--vivo {
    border-color: var(--color-exito);
    background: linear-gradient(135deg, var(--color-exito-suave), var(--color-superficie));
}

.si-acabara--acumula {
    border-color: var(--color-aviso);
    background: linear-gradient(135deg, var(--color-aviso-suave), var(--color-superficie));
}

.si-acabara__etiqueta {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

.si-acabara__titulo {
    margin-top: 0.4rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-marca-oscuro);
}

.si-acabara__detalle {
    font-size: 1.35rem;
    color: var(--color-texto-suave);
}

/* Pronósticos provisionales */
.chip-pronostico--acertando {
    background-color: var(--color-superficie);
    color: var(--color-exito);
    box-shadow: inset 0 0 0 0.15rem var(--color-exito);
}

.chip-pronostico--fallando {
    background-color: var(--color-superficie);
    color: var(--color-error);
    box-shadow: inset 0 0 0 0.15rem var(--color-error-suave);
}

.matriz-hist__fila--vivo td {
    background-color: var(--color-exito-suave);
}

.directo__situacion {
    font-weight: 800;
    color: var(--color-texto-tenue);
}

.directo__situacion--vivo {
    color: var(--color-exito);
}

.directo__situacion--fuera {
    color: var(--color-error);
}

.directo__pie {
    font-size: 1.2rem;
    color: var(--color-texto-tenue);
    text-align: center;
}

@media (max-width: 600px) {
    .directo__cabecera {
        flex-wrap: wrap;
        padding: var(--espaciado-md);
    }

    .directo__cabecera .bote-destacado {
        width: 100%;
    }

    .directo__marcadores {
        grid-template-columns: 1fr;
    }

    .marcador-directo__goles {
        font-size: 1.9rem;
    }
}

/* =====================================================
   MODO OSCURO
   Se activa con data-tema="oscuro" en <html> (assets/js/tema.js): por
   defecto sigue al sistema y recuerda la elección del usuario.
   Solo se redefinen las variables de color.
   ===================================================== */
:root[data-tema="oscuro"] {
    color-scheme: dark;

    --color-azul-100: #22305a;
    --color-azul-50: #18223d;

    --color-marca: #5b7cf0;
    --color-marca-oscuro: #dbe4ff;
    --color-marca-claro: #8ea6ff;
    --color-marca-suave: #18223d;
    --color-marca-profundo: #0f1b3d;

    --color-acento: #2dd4bf;
    --color-acento-oscuro: #5eead4;
    --color-acento-suave: #0e2d2b;

    --color-texto: #e6eaf2;
    --color-texto-suave: #a0abc0;
    --color-texto-tenue: #6f7c95;
    --color-fondo: #0b1120;
    --color-superficie: #131c31;
    --color-borde: #26324d;
    --color-borde-fuerte: #34425f;

    --color-exito: #34c38f;
    --color-exito-suave: #0f2a22;
    --color-error: #f26b62;
    --color-error-suave: #3b1716;
    --color-aviso: #f2a93b;
    --color-aviso-suave: #382810;

    --sombra-suave: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.35), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
    --sombra-media: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.4), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
    --sombra-grande: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.5), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.35);
    --sombra-marca: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.45);
}

/* La cabecera se distingue del fondo con una línea sutil */
:root[data-tema="oscuro"] .cabecera {
    border-bottom: 0.1rem solid var(--color-borde);
}

/* Imágenes y escudos sobre fondo oscuro: un poco menos de brillo */
:root[data-tema="oscuro"] img:not(.cabecera__logo):not([src$=".svg"]) {
    filter: brightness(0.94);
}

/* Botón de la cabecera para cambiar de tema */
.boton-tema svg {
    width: 2.2rem;
    height: 2.2rem;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boton-tema .boton-tema__sol {
    display: none;
}

:root[data-tema="oscuro"] .boton-tema .boton-tema__sol {
    display: block;
}

:root[data-tema="oscuro"] .boton-tema .boton-tema__luna {
    display: none;
}

/* Cambio de tema suave (solo colores, sin mover nada) */
:root.tema-cambiando,
:root.tema-cambiando * {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}