/* Menú global (perfil + navegación). Lo cargan todas las páginas de Next (app/layout.jsx)
   y la documentación estática (public/blog). Autocontenido: no depende de Tailwind ni de
   las variables de cada página. Solo anima opacity/transform. */

.sm {
    position: relative;
    flex: none;
    font-family: inherit;
    --sm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.sm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    max-width: 15rem;
    padding: 0 0.7rem 0 0.35rem;
    border: 1px solid #262626;
    border-radius: 0.8rem;
    background: rgba(23, 23, 23, 0.72);
    color: #e5e5e5;
    font: inherit;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.sm-toggle.is-guest { padding-left: 0.7rem; }
.sm-toggle:hover,
.sm.is-open .sm-toggle {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
    color: #fafafa;
}
.sm.is-open .sm-toggle { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); }
.sm-toggle:focus-visible { outline: 2px solid rgba(139, 154, 255, 0.6); outline-offset: 2px; }

.sm-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sm-avatar-fb { background: #262626; color: #a3a3a3; font-size: 0.72rem; font-weight: 900; }
.sm-avatar-lg { width: 36px; height: 36px; font-size: 0.9rem; }

.sm-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 14px; }
.sm-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }

.sm-name {
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sm-toggle.is-guest .sm-name { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.sm-caret { flex: none; color: #737373; font-size: 0.55rem; transition: transform 0.25s var(--sm-ease); }
.sm.is-open .sm-caret { transform: rotate(180deg); }

.sm-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    width: 16rem;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(13, 13, 13, 0.98));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 30px 70px -24px rgba(0, 0, 0, 0.95),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -6px, 0) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.28s var(--sm-ease), visibility 0s linear 0.28s;
}
.sm.is-open .sm-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.28s var(--sm-ease), visibility 0s;
}

.sm-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.55rem 0.6rem 0.75rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sm-head-text { display: flex; flex-direction: column; min-width: 0; }
.sm-head-text b { overflow: hidden; color: #fafafa; font-size: 0.9rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sm-head-text span { color: #737373; font-size: 0.7rem; font-weight: 600; }

.sm-login {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.2rem 0.15rem 0.35rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.8rem;
    background: #5865f2;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s ease;
}
.sm-login:hover { background: #4752c4; color: #fff; }

.sm-group { display: flex; flex-direction: column; padding: 0.3rem 0; }
.sm-group + .sm-group { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.sm-label {
    padding: 0.45rem 0.7rem 0.3rem;
    color: #525252;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.sm-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.58rem 0.7rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: #d4d4d4;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sm-item:hover, .sm-item:focus-visible { background: rgba(255, 255, 255, 0.06); color: #fafafa; outline: none; }
.sm-item.is-active { background: rgba(255, 255, 255, 0.07); color: #fafafa; }
.sm-item.is-active::before {
    content: '';
    position: absolute;
    top: 0.55rem;
    bottom: 0.55rem;
    left: 0.2rem;
    width: 3px;
    border-radius: 3px;
    background: #8b9aff;
}
.sm-out { margin-top: 0.15rem; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0 0 0.75rem 0.75rem; color: #fca5a5; }
.sm-out:hover, .sm-out:focus-visible { background: rgba(239, 68, 68, 0.1); color: #fecaca; }

@media (max-width: 640px) {
    .sm-toggle { padding-right: 0.55rem; }
    .sm-toggle:not(.is-guest) .sm-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-menu, .sm.is-open .sm-menu, .sm-caret { transition: none; }
}