/* Menú de la cuenta (Perfil, Estadísticas, Suscripción, Seguridad, Preferencias…) con el mismo estilo de las
   ventanas de planes y de la vista previa Premium: negro, redondeado, letra Inter y botones redondos.
   Va encima de las clases de Tailwind del HTML (por eso usa !important). Lo cargan Inicio y NamiChats. */
#userDashboardModal { background: rgba(0,0,0,.62) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#userDashboardModal .dash-shell { background: #0e0e10 !important; border: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6) !important; font-family: 'Inter', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #fafafa; animation: dash2In .25s ease-out; }
@keyframes dash2In { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) { #userDashboardModal .dash-shell { border-radius: 24px !important; } }
#userDashboardModal .dash-side { background: rgba(255,255,255,.02) !important; border-color: rgba(255,255,255,.07) !important; }

/* Foto y nombre */
#userDashboardModal #dashboardAvatar, #userDashboardModal #dashboardAvatarMobile { box-shadow: 0 0 0 3px #0e0e10, 0 0 0 4px rgba(255,255,255,.14) !important; }
#userDashboardModal #dashboardName { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
#userDashboardModal #dashboardEmail { color: #a1a1aa !important; }

/* Menú de escritorio: botones redondos; el elegido en blanco */
#userDashboardModal .dash-side > div.md\:flex { padding: 0 12px !important; gap: 4px !important; }
#userDashboardModal .dash-side button[data-tab]:not(.dash-m-item) { border-radius: 999px !important; padding: 10px 16px !important; font-size: 13.5px !important; font-weight: 500 !important; color: #a1a1aa !important; background: transparent !important; border: 0 !important; letter-spacing: 0 !important; text-transform: none !important; transition: background-color .15s, color .15s; }
#userDashboardModal .dash-side button[data-tab]:not(.dash-m-item):hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
#userDashboardModal .dash-side button[data-tab]:not(.dash-m-item).bg-white\/10 { background: #fafafa !important; color: #0a0a0a !important; font-weight: 600 !important; }
#userDashboardModal .dash-side button[data-tab]:not(.dash-m-item) i { color: inherit; opacity: .85; }
#userDashboardModal #dash-tab-admin-btn:not(.bg-white\/10) { color: #facc15 !important; }
#userDashboardModal #dash-notif-dot { top: 50% !important; transform: translateY(-50%); right: 14px !important; }
/* Pie: contacto y cerrar sesión */
#userDashboardModal .dash-side > div.mt-auto { background: transparent !important; border-color: rgba(255,255,255,.07) !important; }
@media (min-width: 768px) { #userDashboardModal .dash-side > div.mt-auto { padding: 10px 12px 14px !important; } }
#userDashboardModal .dash-side > div.mt-auto a { border-radius: 999px !important; }
#userDashboardModal button[onclick="Auth.logout()"] { border-radius: 999px !important; font-weight: 600 !important; font-size: 13.5px !important; }

/* Menú del celular */
#userDashboardModal .dash-m-list { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); border-radius: 18px; }
#userDashboardModal .dash-m-item { padding: 13px 14px; }
#userDashboardModal .dash-m-ico { border-radius: 12px; }
#userDashboardModal .dash-m-txt b { font-weight: 600; }
#userDashboardModal .dash-m-txt small { color: #8b8b93; }
#userDashboardModal .dash-m-bar { background: rgba(14,14,16,.95) !important; border-color: rgba(255,255,255,.08) !important; }
#userDashboardModal .dash-side > div.md\:hidden.flex button, #userDashboardModal .dash-m-bar button { border-radius: 999px !important; }

/* Botón de cerrar (escritorio) */
#userDashboardModal .dash-shell > button[aria-label="Cerrar"] { border-radius: 999px !important; background: transparent !important; color: #a1a1aa !important; }
#userDashboardModal .dash-shell > button[aria-label="Cerrar"]:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

/* Contenido */
#userDashboardModal .dash-content h2.text-2xl { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.025em; margin-bottom: 22px !important; }
#userDashboardModal .dash-content h3, #userDashboardModal .dash-content h4 { letter-spacing: -.01em; }
/* Etiquetas: "NOMBRE PÚBLICO" → "Nombre público" */
#userDashboardModal .dash-content label.block { font-size: 13.5px !important; font-weight: 500 !important; color: #e4e4e7 !important; letter-spacing: 0 !important; text-transform: lowercase !important; margin-bottom: 7px !important; }
#userDashboardModal .dash-content label.block::first-letter { text-transform: uppercase; }
/* Campos */
#userDashboardModal .dash-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
#userDashboardModal .dash-content select { background: transparent !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; min-height: 44px; padding-left: 14px !important; padding-right: 14px !important; font-size: 14px !important; color: #fafafa !important; transition: border-color .15s, box-shadow .15s; }
#userDashboardModal .dash-content select { padding-right: 8px !important; }
#userDashboardModal .dash-content input#editUsername { padding-left: 30px !important; } /* deja lugar a la "@" */
#userDashboardModal .dash-content select option { background: #0e0e10; color: #fafafa; }
#userDashboardModal .dash-content textarea { background: transparent !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; }
#userDashboardModal .dash-content input:focus, #userDashboardModal .dash-content select:focus, #userDashboardModal .dash-content textarea:focus { border-color: rgba(255,255,255,.55) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.07) !important; outline: none !important; }
#userDashboardModal .dash-content input:disabled { color: #71717a !important; border-style: dashed !important; }
#userDashboardModal .dash-content input::placeholder { color: #52525b; }
/* Botones redondos */
#userDashboardModal .dash-content button.rounded-lg, #userDashboardModal .dash-content a.rounded-lg,
#userDashboardModal .dash-content button.rounded-xl:not(.pref-lang), #userDashboardModal .dash-content a.rounded-xl { border-radius: 999px !important; }
#userDashboardModal .dash-content button.bg-white { min-height: 44px; padding-left: 24px !important; padding-right: 24px !important; font-weight: 600 !important; font-size: 14px !important; background: #fafafa !important; border-color: #fafafa !important; color: #0a0a0a !important; }
#userDashboardModal .dash-content button.bg-white:hover { background: #e4e4e7 !important; }
#userDashboardModal .dash-content button.bg-white:disabled { opacity: .45; }
#userDashboardModal #btn-manage-paypal { min-height: 44px; font-size: 14px !important; font-weight: 600 !important; border-color: rgba(255,255,255,.16) !important; }
/* Tarjetas */
#userDashboardModal .dash-content .rounded-2xl, #userDashboardModal .dash-content div.rounded-xl { border-radius: 18px !important; }
#userDashboardModal .dash-content .bg-\[\#121212\], #userDashboardModal .dash-content .bg-black\/40 { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.09) !important; }
/* Números y títulos pequeños de Estadísticas */
#userDashboardModal .dash-content .font-\[Arial\] { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -.03em !important; }
#userDashboardModal .dash-content p.uppercase { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 12px !important; color: #a1a1aa !important; }
/* Idioma */
#userDashboardModal .pref-lang { border-radius: 16px !important; background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.1) !important; }
#userDashboardModal .pref-lang.is-on { border-color: #fafafa !important; background: rgba(255,255,255,.07) !important; }
/* Zona de peligro */
#userDashboardModal #tab-security .border-t { border-color: rgba(255,255,255,.08) !important; }
/* Más compacto para que "Cerrar sesión" se vea sin desplazar */
@media (min-width: 768px) {
    #userDashboardModal .dash-side > div.hidden.md\:block { padding-top: 22px !important; margin-bottom: 12px !important; }
    #userDashboardModal .dash-side > div.hidden.md\:block > div.relative { width: 72px !important; height: 72px !important; margin-bottom: 8px !important; }
    #userDashboardModal .dash-side button[data-tab]:not(.dash-m-item) { padding-top: 8.5px !important; padding-bottom: 8.5px !important; }
    #userDashboardModal .dash-side > div.mt-auto > div:first-child { padding-top: 2px !important; padding-bottom: 2px !important; }
}

/* ===== Menú de tu nombre (arriba a la derecha, PC) con el mismo estilo ===== */
#nav-user-menu > div.absolute { width: 252px !important; padding-top: 10px !important; }
#nav-user-menu > div.absolute > div { background: #0e0e10 !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 18px !important; box-shadow: 0 24px 60px rgba(0,0,0,.6) !important; padding: 6px; font-family: 'Inter', 'Montserrat', system-ui, sans-serif; --tw-ring-shadow: 0 0 #0000 !important; animation: navMenuIn .16s ease-out; }
@keyframes navMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#nav-user-menu > div.absolute > div > div:first-child { background: transparent !important; border-color: rgba(255,255,255,.08) !important; padding: 8px 10px 10px !important; margin-bottom: 4px; }
#nav-user-menu > div.absolute > div > div:first-child p { font-size: 12px !important; color: #a1a1aa !important; }
#nav-user-menu > div.absolute > div > div.py-1 { padding: 0 !important; }
#nav-user-menu > div.absolute a { border-radius: 12px !important; padding: 7px 10px !important; font-size: 13.5px !important; font-weight: 500 !important; color: #e4e4e7 !important; gap: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }
#nav-user-menu > div.absolute a:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
#nav-user-menu > div.absolute a i, #nav-user-menu > div.absolute a > span > i { width: 28px !important; height: 28px; border-radius: 9px; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(255,255,255,.06); font-size: 12.5px; flex-shrink: 0; }
#nav-user-menu > div.absolute a > span { gap: 11px !important; }
#nav-user-menu #nav-user-menu-admin-link { color: #facc15 !important; font-weight: 600 !important; }
#nav-user-menu > div.absolute > div > div.border-t { background: transparent !important; border-color: rgba(255,255,255,.08) !important; margin-top: 4px; padding: 4px 0 0 !important; }
#nav-user-menu > div.absolute > div > div.border-t a { color: #f87171 !important; }
#nav-user-menu > div.absolute > div > div.border-t a i { background: rgba(248,113,113,.1); }
#nav-user-menu > div.absolute > div > div.border-t a:hover { background: rgba(248,113,113,.08) !important; }

/* ===== Menú de las tres rayas (celular) con el mismo estilo ===== */
#mobile-menu { width: 286px !important; background: #0e0e10 !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 22px !important; box-shadow: 0 24px 60px rgba(0,0,0,.65) !important; font-family: 'Inter', 'Montserrat', system-ui, sans-serif; max-height: calc(100dvh - 76px); overflow-y: auto; }
#mobile-menu > div { padding: 8px !important; }
#mobile-menu button, #mobile-menu a { border-radius: 12px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
#mobile-menu a:hover, #mobile-menu button:hover { background: rgba(255,255,255,.07) !important; }
#mobile-menu #mobile-upgrade-btn { border-radius: 999px !important; border: 0 !important; justify-content: center; font-weight: 700 !important; color: #fff !important; background: linear-gradient(90deg, #b026ff, #ff2bd6) !important; box-shadow: 0 10px 28px rgba(176,38,255,.4) !important; padding-top: 11px !important; padding-bottom: 11px !important; }
#mobile-menu #mobile-upgrade-btn i { color: #fde047 !important; width: auto !important; }
#mobile-menu #mobile-login-btn { border-radius: 999px !important; justify-content: center; font-weight: 600 !important; background: #fafafa !important; color: #0a0a0a !important; border-color: #fafafa !important; box-shadow: none !important; }
#mobile-menu #mobile-login-btn i { color: #0a0a0a !important; width: auto !important; }
#mobile-menu #mobile-user-menu { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important; border-radius: 16px !important; padding: 8px !important; }
#mobile-menu #mobile-user-menu > div:first-child { border-color: rgba(255,255,255,.08) !important; padding: 4px 4px 10px; }
#mobile-menu #mobile-user-menu > div:first-child p.text-sm { font-size: 15px !important; font-weight: 600 !important; }
#mobile-menu #mobile-user-menu button { color: #e4e4e7 !important; padding: 7px 8px !important; gap: 11px !important; }
#mobile-menu #mobile-user-menu button > span { gap: 11px !important; }
#mobile-menu #mobile-user-menu button i, #mobile-menu > div > div.flex-col.space-y-1:last-child a i { width: 28px !important; height: 28px; border-radius: 9px; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(255,255,255,.06); font-size: 12.5px; flex-shrink: 0; }
#mobile-menu #mobile-user-menu-admin-link { color: #facc15 !important; font-weight: 600 !important; border-color: rgba(250,204,21,.25) !important; }
#mobile-menu #mobile-user-menu button[onclick="Auth.logout()"] { color: #f87171 !important; }
#mobile-menu #mobile-user-menu button[onclick="Auth.logout()"] i { background: rgba(248,113,113,.1); }
#mobile-menu > div > div.flex-col.space-y-1:last-child a { color: #e4e4e7 !important; padding: 7px 10px !important; gap: 11px !important; }
#mobile-menu > div > div.border-t, #mobile-menu > div > div.px-4.border-t { border-color: rgba(255,255,255,.08) !important; }
#mobile-menu > div > div.px-4.py-2.border-t { font-size: 12px !important; letter-spacing: 0 !important; text-transform: lowercase !important; color: #71717a !important; font-weight: 600 !important; }
#mobile-menu > div > div.flex.items-center.justify-between > span { font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; color: #a1a1aa !important; font-weight: 500 !important; }
#mobile-menu > div > div.px-4.py-2.border-t::first-letter { text-transform: uppercase; }