/* El menú de la cuenta (menu-cuenta.js): una pastilla arriba a la derecha que se abre en un panel de cristal con el perfil, los textos legales y «Cerrar sesión». */
/* Una fila propia arriba de la página, a la derecha: así nunca se encima con los botones de la cabecera ni de los controles. El panel se abre sobre lo de abajo. */
.menu-cuenta {
    position: relative;
    z-index: 7;
    display: flex;
    justify-content: flex-end;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.75rem 0;
}

/* Vidrio de la página: reflejo claro sobre una película del color del fondo, esmerilado fuerte, canto de luz y resplandor del acento (como la barra inferior y las tarjetas) */
.menu-cuenta-boton,
.menu-cuenta-panel {
    position: relative;
    isolation: isolate;
    background-color: color-mix(in srgb, var(--fondo) 58%, transparent);
    background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.08) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--vidrio-borde);
    box-shadow: inset 0 1px 0 var(--vidrio-luz), var(--brillo-panel);
    color: var(--texto);
}

.menu-cuenta-boton {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 14rem;
    padding: 0.3rem 0.5rem 0.3rem 0.3rem;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
}

.menu-cuenta-boton:focus-visible,
.menu-cuenta-item:focus-visible {
    outline: 3px solid var(--texto);
    outline-offset: -3px;
}

.menu-cuenta-nombre {
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-cuenta-icono {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.menu-cuenta-avatar {
    display: grid;
    flex: none;
    place-items: center;
    overflow: hidden;
    font-weight: 700;
    color: var(--activo-texto);
    background: var(--activo-fondo);
    border-radius: 50%;
    user-select: none;
}

.menu-cuenta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-cuenta-avatar-chico {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

.menu-cuenta-avatar-grande {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.95rem;
}

/* El panel se abre desde la esquina de la pastilla */
/* El panel lleva más película que el botón: tiene texto largo encima de lo que pase detrás */
.menu-cuenta-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0.75rem;
    background-color: color-mix(in srgb, var(--panel) 82%, transparent);
    width: min(18rem, calc(100vw - 1.5rem));
    padding: 0.4rem;
    border-radius: 1.1rem;
    transform-origin: top right;
    animation: menu-cuenta-abre 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-cuenta-panel[hidden] {
    display: none;
}

@keyframes menu-cuenta-abre {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-0.3rem);
    }
}

.menu-cuenta-cabecera {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.6rem 0.75rem;
}

.menu-cuenta-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-cuenta-textos strong,
.menu-cuenta-textos span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-cuenta-textos span {
    font-size: 0.8rem;
    opacity: 0.75;
}

.menu-cuenta-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    font: inherit;
    font-size: 0.95rem;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 0.7rem;
    transition: background-color 0.1s;
}

.menu-cuenta-item:hover,
.menu-cuenta-item:focus {
    background: var(--boton-vidrio);
}

.menu-cuenta-item > span:first-of-type,
.menu-cuenta-relleno > span {
    flex: 1;
}

.menu-cuenta-item small {
    font-size: 0.75rem;
    opacity: 0.65;
}

.menu-cuenta-separador {
    height: 1px;
    margin: 0.35rem 0.65rem;
    background: var(--vidrio-borde);
    border: 0;
}

/* «Cerrar sesión»: una copia en rojo de la fila que se revela de izquierda a derecha mientras se mantiene pulsada */
.menu-cuenta-salir {
    touch-action: none;
    user-select: none;
}

.menu-cuenta-relleno {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    color: #fff;
    pointer-events: none;
    background: var(--peligro);
    border-radius: 0.7rem;
    clip-path: inset(0 100% 0 0 round 0.7rem);
    transition: clip-path 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-cuenta-salir.sujetando .menu-cuenta-relleno {
    clip-path: inset(0 0 0 0 round 0.7rem);
    transition: clip-path 1.2s linear; /* = MS_PARA_SALIR en menu-cuenta.js */
}

/* Texto solo para lectores de pantalla */
.menu-cuenta .solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .menu-cuenta-nombre,
    .menu-cuenta-boton > .menu-cuenta-icono {
        display: none;
    }

    .menu-cuenta-boton {
        padding: 0.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-cuenta-panel {
        animation: none;
    }

    .menu-cuenta-relleno,
    .menu-cuenta-salir.sujetando .menu-cuenta-relleno {
        transition: none;
    }
}