/* * ================================================== */
/* * 1. COMPONENTE: MENÚ DE NAVEGACIÓN Y DROPDOWN       */
/* * ================================================== */

/* ? Tokens locales del menú. Reutilizan las variables globales del */
/* ? proyecto (tema-global.css / Pantalla principal.css) cuando la */
/* ? página las define; el valor de respaldo es el mismo color que */
/* ? ya se usa en el resto del sitio (no es paleta nueva). */
.dropdown-user {
    --menu-acento: var(--accent-global, #0ff0fc);
    --menu-acento-rgb: 15, 240, 252;
    --menu-magenta: #ff2ec4;
    --menu-magenta-rgb: 255, 46, 196;
    --menu-superficie: var(--surface-dark, #121215);
}

/* ? Contenedor principal del menú desplegable */
.menu-oscuro {
    background: linear-gradient(180deg, rgba(20, 22, 26, 0.98), rgba(13, 14, 17, 0.98));
    border: 1px solid rgba(var(--menu-acento-rgb), 0.22);
    border-radius: 16px;
    overflow: hidden;
    min-width: 240px;
    /* ! Nunca se sale horizontalmente del viewport (móviles angostos). */
    max-width: min(300px, calc(100vw - 24px));
    padding: 6px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 26px rgba(var(--menu-acento-rgb), 0.07);
}

/* ? Elementos de la lista del menú */
.menu-oscuro .dropdown-item {
    color: #e9ecef;
    padding: 10px 14px;
    border-radius: 10px;
    /* Transición suave para dar sensación fluida/gaming */
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

/* ? Efecto al pasar el cursor (Hover) y foco por teclado */
.menu-oscuro .dropdown-item:hover,
.menu-oscuro .dropdown-item:focus-visible {
    background-color: rgba(var(--menu-acento-rgb), 0.09);
    color: #fff;
    /* Pequeño desplazamiento horizontal interactivo */
    transform: translateX(4px);
}

.menu-oscuro .dropdown-item:focus-visible {
    outline: 2px solid rgba(var(--menu-acento-rgb), 0.55);
    outline-offset: -2px;
}

/* ! Alerta: Asegura alto contraste en acciones destructivas (ej. Cerrar Sesión) */
.menu-oscuro .dropdown-item.text-danger:hover,
.menu-oscuro .dropdown-item.text-danger:focus-visible {
    background-color: rgba(220, 53, 69, 0.12);
    color: #ff4d4d !important;
}

/* ? Fila del Panel Admin: acento dorado de autoridad, integrado al tema */
.menu-oscuro .menu-item-admin {
    color: #ffc107;
}

.menu-oscuro .menu-item-admin:hover,
.menu-oscuro .menu-item-admin:focus-visible {
    background-color: rgba(255, 193, 7, 0.12);
    color: #ffd43b;
}

.menu-oscuro .dropdown-divider {
    margin: 6px 4px;
    opacity: 0.5;
}

/* ? Iconos de las opciones: mismo ancho para que el texto quede alineado */
.menu-oscuro .dropdown-item i {
    width: 18px;
    text-align: center;
}

.menu-icono-perfil,
.menu-icono-pedidos {
    color: var(--menu-acento);
}

.menu-icono-puntos {
    color: #ffc107;
}

.menu-icono-favoritos {
    color: var(--menu-magenta);
}

/* * ================================================== */
/* * CABECERA DEL MENÚ (TARJETA DE IDENTIDAD)           */
/* * ================================================== */

.user-header {
    position: relative;
    margin: 2px 2px 8px;
    padding: 18px 14px 16px;
    border-radius: 12px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--menu-acento-rgb), 0.1), transparent 70%),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.user-header [data-navbar-nombre] {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    max-width: 100%;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* * ================================================== */
/* * TAMAÑOS DE AVATARES (MENÚ Y NAVEGACIÓN)            */
/* * ================================================== */

/* ? Avatar pequeño (Botón de la barra de navegación) */
/* ! Regla única del avatar de la navbar: antes existía una segunda */
/* ! definición de 32px que provocaba tamaños distintos entre páginas. */
.avatar-sm {
    width: 35px;
    height: 35px;
    object-fit: cover;
    /* Evita que la imagen se estire o deforme */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ? Avatar mediano (Interior del menú desplegable) */
.avatar-md {
    width: 76px;
    height: 76px;
    object-fit: cover;
    /* Mantiene la proporción perfecta */
    border: 2px solid rgba(var(--menu-acento-rgb), 0.6);
    /* Halo controlado, propio del proyecto, sin saturar */
    box-shadow:
        0 0 0 4px rgba(var(--menu-acento-rgb), 0.12),
        0 8px 20px rgba(0, 0, 0, 0.45);
}


/* * ================================================== */
/* * PUNTOS DE RECOMPENSA DEL USUARIO */
/* * ================================================== */

.user-reward-points {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 8px;

    max-width: 100%;

    padding:
        5px 10px;

    border:
        1px solid rgba(255, 193, 7, 0.18);

    border-radius: 50px;

    background:
        rgba(255, 193, 7, 0.08);

    color: #ffc107;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.2px;
}

/* ? Evita que un saldo de puntos muy largo rompa el ancho del menú */
.user-reward-points span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* * ================================================== */
/* * ICONO */
/* * ================================================== */

.user-reward-points i {
    font-size: 0.7rem;
    flex: 0 0 auto;
}