/* ======================================================
   STYLE.CSS (CONECTOR) - carga el CSS global y por sección
   ====================================================== */

   @import url('themes.css');
   @import url('themes-contrast.css');
   @import url('home.css');
   @import url('juegos.css');
   @import url('noticias.css');

   /* ========== RESET COMPLETO ========== */
   * {
       box-sizing: border-box !important;
   }

   html, body {
       margin: 0 !important;
       padding: 0 !important;
       overflow-x: hidden !important;
       width: 100% !important;
       max-width: 100% !important;
       background: var(--gradient);
       background-attachment: fixed;
       background-size: cover;
       background-repeat: no-repeat;
       min-height: 100vh;
       scrollbar-width: none !important;
   }

   html::-webkit-scrollbar,
   body::-webkit-scrollbar {
       display: none !important;
   }

   /* ========== MEJORAS DE CONTRASTE PARA TEXTOS ========== */
   .mobile-modal strong {
       color: var(--primary) !important;
       font-weight: 600;
   }

   #gameSize, #gameTranslators, #gamePlatform, #gameStatus, #gameVersion {
       color: var(--text) !important;
       font-weight: 500;
   }

   .download-history-name {
       color: var(--text) !important;
       font-weight: 500;
   }

   .download-history-date {
       color: var(--muted) !important;
       font-weight: 400;
   }

   .mobile-modal p:not(.text-muted) {
       color: var(--text) !important;
   }

   .mobile-modal .text-muted {
       color: var(--muted) !important;
       opacity: 0.9;
   }

   .mobile-modal .row .col-6 p strong {
       color: var(--primary) !important;
       display: block;
       margin-bottom: 2px;
       font-size: 0.9rem;
   }

   .mobile-modal .row .col-6 p span {
       color: var(--text) !important;
       font-size: 0.95rem;
       font-weight: 500;
   }

   .badge {
       font-weight: 600;
       font-size: 0.8rem;
   }

   .account-section-title {
       color: var(--primary) !important;
       font-weight: 600;
   }

   .faq-question {
       color: var(--primary) !important;
       font-weight: 600;
   }

   .faq-answer {
       color: var(--text) !important;
       opacity: 0.9;
   }

   /* ========== MEJORAS ESPECÍFICAS PARA TEMA CLARO ========== */
   .theme-light .social-btn {
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   }

   .theme-light .mobile-modal strong {
       color: var(--primary) !important;
   }

   .theme-light .badge {
       color: white !important;
   }

   /* ========== MEJORAS PARA TEMA MUY OSCURO ========== */
   .theme-very-dark .social-btn {
       box-shadow: 0 4px 12px rgba(0,0,0,0.4);
   }

   .theme-very-dark .mobile-modal strong {
       color: var(--primary) !important;
   }

   html, body {
       background: var(--gradient);
       background-attachment: fixed;
       background-size: cover;
       background-repeat: no-repeat;
       min-height: 100vh;
       background: var(--gradient);
       background-attachment: fixed;
       background-size: cover;
       background-repeat: no-repeat;
       min-height: 100vh;
   }

   .mobile-header {
       height: 80px;
       padding: 20px;
   }

   .main-content {
       padding: 90px 0 70px 0;
       min-height: 100%;
   }

   .game-card {
       margin-bottom: 5px;
   }

   :root {
       --primary-rgb: 88, 101, 242;
       --primary: #5865F2;
       --primary-2: #4e5d94;
       --bg: #14161d;
       --bg-2: #1a1d26;
       --text: #e9ebff;
       --muted: #b6baf2;
       --card-bg: rgba(16,18,27,.7);
       --search-bg: #1f2330;
       --nav-bg: #0b0c10;
       --modal-bg: rgba(16,18,27,.9);
       --border-color: rgba(255,255,255,.06);
       --gradient: linear-gradient(135deg,#23272a,#5865f2);
   }

   body {
       background: var(--gradient);
       background-attachment: fixed;
       background-size: cover;
       background-repeat: no-repeat;
       min-height: 100vh;
       background: var(--gradient);
       background-attachment: fixed;
       background-size: cover;
       background-repeat: no-repeat;
       min-height: 100vh;
   }

   .pagination-container {
       margin-top: 20px;
   }

   .pagination {
       display: flex;
       gap: 5px;
       flex-wrap: wrap;
   }

   .pagination .page-item .page-link {
       background-color: var(--card-bg);
       color: var(--text);
       border: 1px solid var(--border-color);
       border-radius: 8px;
       padding: 6px 12px;
       transition: all 0.2s ease;
   }

   .pagination .page-item .page-link:hover {
       background: var(--gradient);
       color: #fff;
       border-color: var(--primary);
       transform: translateY(-2px);
   }

   .pagination .page-item.active .page-link {
       background: var(--primary);
       color: #fff;
       border-color: var(--primary);
       font-weight: bold;
   }

   .pagination .page-item.disabled .page-link {
       background-color: transparent;
       color: var(--muted);
       border: none;
       cursor: not-allowed;
   }

   /* ========== LOADING SCREEN (mejorado) ========== */
   #loadingScreen {
       position: fixed;
       inset: 0;
       background: linear-gradient(135deg, #0d0d1e 0%, #10102a 100%);
       display: none;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       animation: lsFadeIn 0.4s ease;
   }
   @keyframes lsFadeIn {
       from { opacity: 0; }
       to   { opacity: 1; }
   }

   .ls-glow-bg {
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 50% 40% at 50% 50%,
           rgba(88,101,242,0.1) 0%, transparent 70%);
       pointer-events: none;
   }

   .ls-card {
       position: relative;
       z-index: 2;
       background: rgba(255,255,255,0.04);
       border: 1px solid rgba(88,101,242,0.18);
       border-radius: 24px;
       padding: 32px 40px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 16px;
       min-width: 240px;
       max-width: 320px;
       width: 80vw;
       backdrop-filter: blur(16px);
       animation: lsCardIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
   }
   @keyframes lsCardIn {
       from { opacity: 0; transform: scale(0.92) translateY(10px); }
       to   { opacity: 1; transform: scale(1) translateY(0); }
   }

   .ls-logo-row {
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .ls-logo-img {
       width: 36px;
       height: 36px;
       border-radius: 10px;
       object-fit: contain;
       filter: drop-shadow(0 0 6px rgba(88,101,242,0.6));
   }
   .ls-logo-text {
       font-size: 1.25rem;
       font-weight: 800;
       background: linear-gradient(90deg, #a78bfa, #5865F2, #60a5fa, #a78bfa);
       background-size: 250% auto;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       animation: ibsShimmer 3.5s linear infinite;
   }

   .ls-status-text {
       font-size: 0.78rem;
       color: rgba(167,139,250,0.7);
       letter-spacing: 0.5px;
       min-height: 18px;
       transition: opacity 0.3s ease;
   }

   .ls-bar-bg {
       width: 100%;
       height: 4px;
       background: rgba(255,255,255,0.06);
       border-radius: 99px;
       overflow: hidden;
   }
   .ls-bar-fill {
       height: 100%;
       border-radius: 99px;
       background: linear-gradient(90deg, #5865F2, #a78bfa, #60a5fa);
       background-size: 200% 100%;
       animation: lsBarPulse 2.5s ease-in-out infinite, lsBarShimmer 2s linear infinite;
   }
   @keyframes lsBarPulse {
       0%   { width: 10%; }
       50%  { width: 85%; }
       100% { width: 10%; }
   }
   @keyframes lsBarShimmer {
       0%   { background-position: 0% 0; }
       100% { background-position: 200% 0; }
   }

   .ls-dots {
       display: flex;
       gap: 7px;
   }
   .ls-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: rgba(88,101,242,0.6);
       animation: lsDotBounce 1.2s ease-in-out infinite var(--dl);
   }
   @keyframes lsDotBounce {
       0%,80%,100% { transform: scale(0.5); opacity: 0.35; }
       40%         { transform: scale(1.1); opacity: 1; background: #a78bfa; }
   }

   /* ========== INITIAL BLACK SCREEN (mejorado) ========== */
   #initialBlackScreen {
       position: fixed;
       inset: 0;
       background: #07071a;
       z-index: 99999;
       display: flex;
       justify-content: center;
       align-items: center;
       transition: opacity 0.6s ease, visibility 0.6s ease;
   }
   #initialBlackScreen.fade-out {
       opacity: 0;
       visibility: hidden;
   }

   .ibs-glow-bg {
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 60% 50% at 50% 50%,
           rgba(88,101,242,0.12) 0%, transparent 70%);
       pointer-events: none;
   }

   .ibs-star {
       position: absolute;
       border-radius: 50%;
       background: #fff;
       animation: ibsTwinkle var(--d) ease-in-out infinite var(--delay);
       opacity: 0;
   }
   @keyframes ibsTwinkle {
       0%, 100% { opacity: 0; }
       50% { opacity: var(--op); }
   }

   .ibs-content {
       position: relative;
       z-index: 2;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;
       animation: ibsFadeIn 0.8s ease forwards;
   }
   @keyframes ibsFadeIn {
       from { opacity: 0; transform: translateY(12px); }
       to   { opacity: 1; transform: translateY(0); }
   }

   .ibs-logo-icon {
       width: 72px;
       height: 72px;
       border-radius: 18px;
       background: linear-gradient(135deg, #5865F2, #a78bfa);
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       animation: ibsLogoGlow 2.5s ease-in-out infinite;
       position: relative;
   }
   .ibs-logo-icon::after {
       content: '';
       position: absolute;
       inset: -8px;
       border-radius: 24px;
       border: 1.5px solid rgba(88,101,242,0.3);
       animation: ibsRing 2.5s ease-in-out infinite;
   }
   .ibs-logo-icon img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       padding: 8px;
   }
   @keyframes ibsLogoGlow {
       0%,100% { box-shadow: 0 0 14px rgba(88,101,242,0.5); }
       50% { box-shadow: 0 0 32px rgba(167,139,250,0.9), 0 0 70px rgba(88,101,242,0.25); }
   }
   @keyframes ibsRing {
       0%,100% { opacity: 0.25; transform: scale(1); }
       50% { opacity: 0.7; transform: scale(1.07); }
   }

   .ibs-logo-text {
       font-size: 2rem;
       font-weight: 800;
       letter-spacing: 0.5px;
       background: linear-gradient(90deg, #a78bfa, #818cf8, #5865F2, #60a5fa, #a78bfa);
       background-size: 250% auto;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       animation: ibsShimmer 3.5s linear infinite;
   }
   @keyframes ibsShimmer {
       0%   { background-position: 0% center; }
       100% { background-position: 250% center; }
   }

   .ibs-tagline {
       font-size: 0.7rem;
       color: rgba(167,139,250,0.55);
       letter-spacing: 2px;
       text-transform: uppercase;
   }

   .ibs-orbit {
       position: relative;
       width: 64px;
       height: 64px;
       margin-top: 14px;
   }
   .ibs-orbit-dot {
       position: absolute;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       top: 50%;
       left: 50%;
       transform-origin: 0 0;
       animation: ibsOrbit 2s linear infinite;
       animation-delay: calc(var(--i) * -0.666s);
   }
   .ibs-orbit-dot:nth-child(1) { background: #5865F2; }
   .ibs-orbit-dot:nth-child(2) { background: #a78bfa; }
   .ibs-orbit-dot:nth-child(3) { background: #60a5fa; }
   @keyframes ibsOrbit {
       from { transform: rotate(0deg) translateX(28px) translateY(-50%); }
       to   { transform: rotate(360deg) translateX(28px) translateY(-50%); }
   }

   .mobile-header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background-color: var(--nav-bg);
       z-index: 1000;
       padding: 14px 18px;
       padding-top: calc(env(safe-area-inset-top) + 14px);
       box-shadow: 0 3px 12px rgba(0,0,0,0.5);
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--border-color);
       height: auto;
       min-height: 65px;
   }

   .search-box {
       background-color: var(--search-bg);
       border-radius: 20px;
       padding: 5px 15px;
       width: 100%;
       border: 1px solid var(--border-color);
   }

   .search-input {
       background-color: transparent;
       border: none;
       color: var(--text);
       width: 100%;
   }

   .mobile-nav {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       background-color: var(--nav-bg);
       z-index: 1000;
       display: flex;
       justify-content: space-around;
       padding: 10px 0;
       padding-bottom: env(safe-area-inset-bottom);
       border-top: 1px solid var(--border-color);
   }

   .mobile-nav-btn {
       color: var(--text);
       text-align: center;
       font-size: 12px;
       padding: 5px;
       border: none;
       background: none;
       transition: all 0.2s ease;
   }

   .mobile-nav-btn i {
       font-size: 24px;
       display: block;
       margin-bottom: 5px;
   }

   .mobile-nav-btn.active {
       color: var(--primary);
   }

   .mobile-nav-btn:hover {
       filter: brightness(1.2);
   }

   .main-content {
       padding: 90px 0 70px 0;
       min-height: 100%;
   }

   .mobile-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: var(--modal-bg);
       z-index: 2000;
       display: none;
       padding: 20px;
       overflow-y: auto;
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
       backdrop-filter: blur(8px);
   }

   .mobile-modal.show {
       display: block;
       opacity: 1;
       pointer-events: auto;
   }

   .mobile-modal .container {
       padding-top: 50px;
       padding-bottom: 80px;
       scroll-behavior: smooth;
   }

   .mobile-modal h4 {
       color: var(--primary);
       font-weight: bold;
   }

   .mobile-modal h5 {
       color: var(--primary);
       border-bottom: 1px solid var(--border-color);
       padding-bottom: 5px;
       margin-top: 20px;
   }

   .category-badge {
       display: inline-block;
       background-color: var(--search-bg);
       color: var(--text);
       padding: 5px 10px;
       border-radius: 20px;
       margin: 3px;
       font-size: 0.9rem;
       transition: all 0.2s;
       border: 1px solid var(--border-color);
   }

   .category-badge.selected {
       background: var(--gradient);
       color: #ffffff;
       font-weight: 500;
       border: 1px solid var(--primary);
   }

   .category-badge i {
       margin-left: 5px;
       font-size: 0.8rem;
   }

   .btn-outline-warning {
       color: var(--primary);
       border-color: var(--primary);
       background-color: transparent;
   }

   .btn-outline-warning:hover {
       color: #ffffff;
       background-color: var(--primary);
   }

   #favoritesGrid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 8px;
   }

   .mobile-header .app-name {
       color: var(--primary);
       font-weight: bold;
       font-size: 1.2rem;
   }

   .bottom-close-btn {
       display: block;
       width: 100%;
       padding: 15px;
       margin-top: 15px;
       font-size: 24px;
       color: var(--primary);
       background: none;
       border: none;
       text-align: center;
       cursor: pointer;
       border-radius: 12px;
       transition: all 0.2s ease;
   }

   .bottom-close-btn:hover {
       background-color: rgba(88, 101, 242, 0.1);
   }

   .carousel {
       width: 100%;
       height: 200px;
       border-radius: 8px;
       overflow: hidden;
       background-color: var(--card-bg);
       margin-bottom: 15px;
       border: 1px solid var(--border-color);
   }

   .carousel-inner {
       width: 100%;
       height: 100%;
   }

   .carousel-item {
       width: 100%;
       height: 100%;
   }

   .carousel-item img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .carousel-control-prev, .carousel-control-next {
       background-color: rgba(0,0,0,0.3);
       width: 40px;
       height: 40px;
       border-radius: 50%;
       top: 50%;
       transform: translateY(-50%);
   }

   #refresh-indicator {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       height: 60px;
       background: var(--gradient);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 2000;
   }


   .btn-primary,
   .btn-warning,
   .btn-info,
   .btn-danger {
       color: #ffffff !important;
   }

   .btn-outline-warning {
       color: var(--primary) !important;
   }

   .empty-favorites {
       grid-column: 1 / -1;
       text-align: center;
       padding: 20px;
       color: var(--muted);
   }

   .header-btn {
       color: var(--text) !important;
       background: none;
       border: none;
       padding: 5px 10px;
       transition: all 0.2s ease;
   }

   .header-btn:hover {
       filter: brightness(1.2);
   }

   .image-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: rgba(0,0,0,0.9);
       z-index: 3000;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 20px;
       backdrop-filter: blur(8px);
   }

   .image-modal img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
       border-radius: 8px;
   }

   .close-image-modal {
       position: absolute;
       top: 20px;
       right: 20px;
       color: white;
       font-size: 30px;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .close-image-modal:hover {
       color: var(--primary);
   }

   #gameGrid, #newsContent, #favoritesContent {
       transition: opacity 0.3s ease, transform 0.3s ease;
   }

   .apk-versions-title {
       color: var(--primary);
       margin-top: 20px;
       margin-bottom: 10px;
       width: 100%;
   }

   /* #initialBlackScreen — ver bloque mejorado en la sección loadingScreen */

   .toast-message {
       position: fixed;
       bottom: 80px;
       left: 50%;
       transform: translateX(-50%);
       background: var(--card-bg);
       color: var(--text);
       padding: 10px 18px;
       border-radius: 24px;
       z-index: 9999;
       box-shadow: 0 4px 20px rgba(0,0,0,0.35);
       border: 1px solid var(--border-color);
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 0.9rem;
       font-weight: 500;
       max-width: 88vw;
       animation: toastIn 0.3s ease;
       white-space: nowrap;
   }

   .toast-message.toast-hide {
       animation: toastOut 0.35s ease forwards;
   }

   .toast-type-success { border-left: 4px solid #28a745; }
   .toast-type-error   { border-left: 4px solid #dc3545; }
   .toast-type-info    { border-left: 4px solid #6ea8fe; }
   .toast-type-warning { border-left: 4px solid #ffc107; }

   @keyframes toastIn {
       from { opacity: 0; transform: translateX(-50%) translateY(16px); }
       to   { opacity: 1; transform: translateX(-50%) translateY(0); }
   }

   @keyframes toastOut {
       from { opacity: 1; transform: translateX(-50%) translateY(0); }
       to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
   }

   /* ── Transición entre secciones ── */
   @keyframes sectionFadeIn {
       from { opacity: 0; transform: translateY(8px); }
       to   { opacity: 1; transform: translateY(0); }
   }

   .section-enter {
       animation: sectionFadeIn 0.28s ease both;
   }

   /* ── Badge de notificaciones en nav ── */
   .notif-badge {
       position: absolute;
       top: 4px;
       right: 4px;
       background: #dc3545;
       color: #fff;
       font-size: 0.6rem;
       font-weight: 700;
       min-width: 16px;
       height: 16px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0 3px;
       animation: pulseBadge 1.8s infinite;
   }

   @keyframes pulseBadge {
       0%, 100% { transform: scale(1); }
       50%       { transform: scale(1.2); }
   }

   /* ── Avatar de cuenta ── */
   .avatar-upload-wrap {
       position: relative;
       display: inline-block;
       cursor: pointer;
       border-radius: 50%;
       overflow: hidden;
       width: 90px;
       height: 90px;
       margin: 0 auto;
       border: 3px solid var(--primary);
       transition: border-color 0.2s;
   }

   .avatar-upload-wrap:hover .avatar-upload-overlay {
       opacity: 1;
   }

   .account-avatar-img {
       width: 90px;
       height: 90px;
       object-fit: cover;
       display: block;
   }

   .avatar-upload-overlay {
       position: absolute;
       inset: 0;
       background: rgba(0,0,0,0.55);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: opacity 0.2s;
       color: #fff;
       font-size: 1.4rem;
   }

   .skeleton {
       background-color: var(--search-bg);
       border-radius: 8px;
       animation: pulse 1.5s infinite;
       border: 1px solid var(--border-color);
   }

   .skeleton-img {
       background-color: var(--nav-bg);
       border-radius: 8px 8px 0 0;
       animation: pulse 1.5s infinite;
       border: 1px solid var(--border-color);
   }

   .skeleton-text {
       background-color: var(--nav-bg);
       border-radius: 8px;
       animation: pulse 1.5s infinite;
       border: 1px solid var(--border-color);
   }

   .section-buttons {
       display: flex;
       justify-content: center;
       gap: 10px;
       margin-bottom: 15px;
       padding: 0 10px;
   }

   .section-btn {
       flex: 1;
       padding: 10px;
       border: none;
       border-radius: 20px;
       background-color: var(--search-bg);
       color: var(--text);
       font-weight: bold;
       transition: all 0.3s;
       border: 1px solid var(--border-color);
   }

   .section-btn.active {
       background: var(--gradient);
       color: #ffffff;
       border: 1px solid var(--primary);
   }

   .favorites-tabs {
       display: flex;
       border-bottom: 1px solid var(--border-color);
       margin-bottom: 15px;
   }

   .favorites-tab {
       padding: 10px 15px;
       cursor: pointer;
       border-bottom: 2px solid transparent;
       transition: all 0.2s ease;
   }

   .favorites-tab.active {
       border-bottom: 2px solid var(--primary);
       color: var(--primary);
       font-weight: bold;
   }

   .favorites-tab-content {
       display: none;
   }

   .favorites-tab-content.active {
       display: block;
   }

   .account-section {
       margin-bottom: 20px;
       border-radius: 12px;
       overflow: hidden;
       border: 1px solid var(--border-color);
   }

   .account-section-title {
       color: var(--primary);
       font-weight: bold;
       margin-bottom: 0;
       display: flex;
       align-items: center;
       cursor: pointer;
       padding: 15px;
       background-color: var(--search-bg);
       transition: all 0.2s ease;
   }

   .account-section-title:hover {
       background-color: rgba(88, 101, 242, 0.1);
   }

   .account-section-title i {
       margin-right: 10px;
   }

   .account-section-content {
       padding: 15px;
       background-color: var(--card-bg);
       display: none;
   }

   .account-section-content.show {
       display: block;
   }

   .faq-item {
       margin-bottom: 15px;
       padding-bottom: 15px;
       border-bottom: 1px solid var(--border-color);
   }

   .faq-item:last-child {
       border-bottom: none;
       margin-bottom: 0;
       padding-bottom: 0;
   }

   .faq-question {
       font-weight: bold;
       color: var(--primary);
       margin-bottom: 5px;
   }

   .faq-answer {
       color: var(--text);
       opacity: 0.8;
       font-size: 0.9rem;
   }

   .download-history-item {
       padding: 10px;
       background-color: var(--card-bg);
       border-radius: 8px;
       margin-bottom: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border: 1px solid var(--border-color);
   }

   .download-history-name {
       font-weight: bold;
   }

   .download-history-date {
       font-size: 0.8rem;
       opacity: 0.7;
       color: var(--muted);
   }

   .btn {
       border-radius: 12px;
       font-weight: 600;
       transition: all 0.2s ease;
       border: none;
   }

   .btn-primary {
       background: var(--gradient);
       color: white !important;
   }

   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
   }

   .btn-outline-primary {
       border: 2px solid var(--primary);
       color: var(--primary) !important;
       background: transparent;
   }

   .btn-outline-primary:hover {
       background: var(--primary);
       color: white !important;
   }

   ::-webkit-scrollbar {
       width: 6px;
   }

   ::-webkit-scrollbar-track {
       background: var(--search-bg);
   }

   ::-webkit-scrollbar-thumb {
       background: var(--primary);
       border-radius: 3px;
   }

   ::-webkit-scrollbar-thumb:hover {
       background: var(--primary-2);
   }

   @keyframes fadeInOut {
       0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
       20% { opacity: 1; transform: translateX(-50%) translateY(0); }
       80% { opacity: 1; transform: translateX(-50%) translateY(0); }
       100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
   }

   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }

   @keyframes pulse {
       0% { opacity: 1; }
       50% { opacity: 0.5; }
       100% { opacity: 1; }
   }

   @media (max-width: 360px) {
       .mobile-header {
           padding: 10px 15px;
           padding-top: calc(env(safe-area-inset-top) + 10px);
       }

       .carousel {
           height: 180px;
       }
   }

   @media (min-width: 768px) {
       .carousel {
           height: 250px;
       }
   }

   @media (min-width: 1024px) {
       .carousel {
           height: 300px;
       }
   }

   /* ========== TEMAS ========== */
   .theme-light .mobile-modal strong,
   .theme-dark .mobile-modal strong,
   .theme-very-dark .mobile-modal strong,
   .theme-discord .mobile-modal strong,
   .theme-amoled .mobile-modal strong,
   .theme-gaming .mobile-modal strong,
   .theme-nature .mobile-modal strong,
   .theme-ocean .mobile-modal strong,
   .theme-sunset .mobile-modal strong,
   .theme-purple .mobile-modal strong,
   .theme-cyberpunk .mobile-modal strong,
   .theme-retro .mobile-modal strong,
   .theme-midnight .mobile-modal strong,
   .theme-candy .mobile-modal strong,
   .theme-gold .mobile-modal strong,
   .theme-space .mobile-modal strong,
   .theme-forest .mobile-modal strong,
   .theme-lavender .mobile-modal strong,
   .theme-fire .mobile-modal strong,
   .theme-ice .mobile-modal strong,
   .theme-chocolate .mobile-modal strong,
   .theme-slate .mobile-modal strong,
   .theme-emerald .mobile-modal strong,
   .theme-rose .mobile-modal strong,
   .theme-sky .mobile-modal strong,
   .theme-mint .mobile-modal strong,
   .theme-peach .mobile-modal strong,
   .theme-grape .mobile-modal strong,
   .theme-sand .mobile-modal strong,
   .theme-twilight .mobile-modal strong,
   .theme-crimson .mobile-modal strong,
   .theme-aqua .mobile-modal strong,
   .theme-cotton-candy .mobile-modal strong,
   .theme-neon .mobile-modal strong,
   .theme-pastel .mobile-modal strong,
   .theme-midnight-purple .mobile-modal strong,
   .theme-sunrise .mobile-modal strong,
   .theme-deep-ocean .mobile-modal strong,
   .theme-berry .mobile-modal strong,
   .theme-honey .mobile-modal strong,
   .theme-lime .mobile-modal strong,
   .theme-silver .mobile-modal strong,
   .theme-royal .mobile-modal strong,
   .theme-violet .mobile-modal strong,
   .theme-cyan .mobile-modal strong,
   .theme-orange .mobile-modal strong,
   .theme-pink .mobile-modal strong,
   .theme-teal .mobile-modal strong,
   .theme-indigo .mobile-modal strong,
   .theme-yellow .mobile-modal strong,
   .theme-amber .mobile-modal strong,
   .theme-red .mobile-modal strong,
   .theme-green .mobile-modal strong,
   .theme-blue .mobile-modal strong,
   .theme-purple .mobile-modal strong,
   .theme-gray .mobile-modal strong,
   .theme-zinc .mobile-modal strong,
   .theme-stone .mobile-modal strong,
   .theme-neutral .mobile-modal strong,
   .theme-warm .mobile-modal strong,
   .theme-cool .mobile-modal strong,
   .theme-spring .mobile-modal strong,
   .theme-summer .mobile-modal strong,
   .theme-autumn .mobile-modal strong,
   .theme-winter .mobile-modal strong,
   .theme-rainbow .mobile-modal strong,
   .theme-galaxy .mobile-modal strong,
   .theme-nord .mobile-modal strong,
   .theme-dracula .mobile-modal strong,
   .theme-gruvbox .mobile-modal strong,
   .theme-solarized .mobile-modal strong,
   .theme-monokai .mobile-modal strong,
   .theme-material .mobile-modal strong,
   .theme-one-dark .mobile-modal strong,
   .theme-tokyo-night .mobile-modal strong,
   .theme-catppuccin .mobile-modal strong,
   .theme-rose-pine .mobile-modal strong,
   .theme-kanagawa .mobile-modal strong,
   .theme-everforest .mobile-modal strong,
   .theme-github-dark .mobile-modal strong,
   .theme-github-light .mobile-modal strong,
   .theme-synthwave .mobile-modal strong,
   .theme-horizon .mobile-modal strong {
       color: var(--primary) !important;
       font-weight: 600;
   }




   ::-webkit-scrollbar {
       width: 0px;
       height: 0px;
   }



   /* =========================================================
      DOWNLOAD INFO MODAL (NUEVO DISEÑO)
      Reemplaza por completo .download-info-item
   ========================================================= */

   /* 1) Shell del modal: más premium */
   #downloadInfoModal .download-modal-shell {
       background: var(--card-bg);
       border: 1px solid var(--border-color);
       border-radius: 22px;
       box-shadow: 0 20px 55px rgba(0,0,0,0.45);
       overflow: hidden;
       animation: downloadModalUp 0.35s ease;
   }

   @keyframes downloadModalUp {
       from { transform: translateY(28px); opacity: 0; }
       to   { transform: translateY(0);    opacity: 1; }
   }

   /* 2) Header con mejor jerarquía */
   #downloadInfoModal .download-modal-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 16px 16px;
       border-bottom: 1px solid var(--border-color);
       background: rgba(255,255,255,0.02);
   }

   #downloadInfoModal .download-modal-header .modal-title {
       display: flex;
       align-items: center;
       gap: 10px;
       margin: 0;
       font-weight: 700;
       color: var(--text);
   }

   #downloadInfoModal .download-modal-header .modal-title i {
       color: var(--primary);
       font-size: 1.1rem;
   }

   /* 3) Body con spacing prolijo */
   #downloadInfoModal .download-modal-body {
       display: flex;
       flex-direction: column;
       gap: 14px;
       padding: 16px;
   }

   /* 4) Tarjetas de info */
   #downloadInfoModal .download-info-card {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 14px;
       border-radius: 16px;
       border: 1px solid rgba(255,255,255,0.06);
       background: linear-gradient(
           135deg,
           rgba(var(--primary-rgb), 0.16),
           rgba(var(--primary-rgb), 0.06)
       );
   }

   #downloadInfoModal .download-info-icon {
       width: 44px;
       height: 44px;
       border-radius: 14px;
       display: grid;
       place-items: center;
       background: rgba(0,0,0,0.18);
       border: 1px solid rgba(255,255,255,0.06);
       flex-shrink: 0;
   }

   #downloadInfoModal .download-info-icon i {
       font-size: 1.25rem;
       color: var(--primary);
   }

   #downloadInfoModal .download-info-text {
       flex: 1;
       min-width: 0;
   }

   #downloadInfoModal .download-info-label {
       font-size: 0.78rem;
       color: var(--muted);
       margin-bottom: 2px;
   }

   #downloadInfoModal .download-info-value {
       font-size: 0.98rem;
       font-weight: 700;
       color: var(--text);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }

   /* 5) Warning */
   #downloadInfoModal .download-warning {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 14px;
       border-radius: 16px;
       border: 1px solid rgba(255,193,7,0.25);
       background: rgba(255,193,7,0.10);
   }

   #downloadInfoModal .download-warning-icon {
       width: 44px;
       height: 44px;
       border-radius: 14px;
       display: grid;
       place-items: center;
       background: rgba(0,0,0,0.18);
       border: 1px solid rgba(255,255,255,0.06);
       flex-shrink: 0;
   }

   #downloadInfoModal .download-warning-icon i {
       font-size: 1.25rem;
       color: #ffc107;
   }

   #downloadInfoModal .download-warning-title {
       font-weight: 800;
       color: #ffc107;
       margin-bottom: 2px;
   }

   #downloadInfoModal .download-warning-desc {
       color: var(--text);
       opacity: 0.9;
       line-height: 1.35;
       font-size: 0.90rem;
   }

   /* 6) Footer: botones grandes, táctiles */
   #downloadInfoModal .download-modal-footer {
       display: flex;
       gap: 10px;
       padding: 14px 16px 16px;
       border-top: 1px solid var(--border-color);
       background: rgba(255,255,255,0.02);
   }

   #downloadInfoModal .download-modal-footer .btn {
       flex: 1;
       border-radius: 14px;
       font-weight: 700;
       padding: 12px 14px;
   }

   /* 7) Ajustes mobile reales */
   @media (max-width: 420px) {
       #downloadInfoModal .download-modal-body {
           padding: 14px;
       }
       #downloadInfoModal .download-modal-footer {
           flex-direction: column;
       }
   }

   /* ========== ESTILOS PARA BÚSQUEDA INTEGRADA ========== */

   .search-container {
       animation: slideDown 0.3s ease;
   }

   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   #toggleSearchBtn.active {
       background: var(--primary);
       color: white;
   }

   #toggleSearchBtn.active:hover {
       background: var(--primary-2);
   }

   /* Ajustes para el input de búsqueda */
   #gamesIntegratedSearch::placeholder {
       color: var(--muted);
   }

   .search-info {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   /* Indicador de búsqueda activa */
   .search-active-indicator {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       background: rgba(var(--primary-rgb), 0.1);
       padding: 2px 8px;
       border-radius: 12px;
       font-size: 0.8rem;
       margin-left: 10px;
   }

   .search-active-indicator i {
       color: var(--primary);
   }

   /* ========== Ajuste opcional para consistencia visual ========== */
   .mobile-modal.show {
       display: flex !important;
       opacity: 1;
       pointer-events: auto;
   }


   .mobile-modal.show {
       display: flex;
       opacity: 1;
       pointer-events: auto;
   }

   .header-actions {
     display: flex;
     align-items: center;
     gap: 8px;
   }

   .header-action-btn {
     background: transparent;
     border: 1px solid var(--primary);
     color: var(--primary);
     border-radius: 999px;
     padding: 6px 12px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: all .2s ease;
   }

   .header-action-btn:hover {
     background: var(--primary);
     color: #fff;
   }

   /* ✅ Global: .text-muted dependiente del tema */
   .text-muted {
     color: var(--muted) !important;
     opacity: 0.9;
   }

   /* Bootstrap -> variables del tema */
   :root, body {
     --bs-body-bg: var(--bg);
     --bs-body-color: var(--text);
     --bs-secondary-color: var(--muted);
     --bs-primary: var(--primary);

     color: var(--text);
   }

   /* ===== Bootstrap -> variables del tema (arreglo global real) ===== */
   body {
     color: var(--text);
   }

   /* Esto arregla específicamente .text-muted de Bootstrap */
   :root, body {
     --bs-secondary-color: var(--muted);
     --bs-body-color: var(--text);
   }

   .text-muted {
     color: var(--muted) !important;
     opacity: 0.9;
   }

   /* ===== Conectar Bootstrap con el sistema de temas ===== */
   :root,
   body {
     --bs-body-color: var(--text);
     --bs-secondary-color: var(--muted);
   }

   /* ===== Social buttons (Discord / YouTube / Twitter) ===== */
   .social-buttons{
     display:flex;
     justify-content:center;
     gap:12px;
     margin:18px 0 8px;
   }

   .social-btn{
     width:54px;
     height:54px;
     border-radius:16px;
     display:grid;
     place-items:center;

     /* sirve para <a> y <button> */
     padding:0;
     text-decoration:none;
     cursor:pointer;

     background: var(--card-bg);
     color: var(--text);
     border: 1px solid var(--border-color);

     transition: transform .2s ease, filter .2s ease, background .2s ease;
   }

   .social-btn i{
     font-size: 1.65rem;   /* tamaño del icono */
     line-height: 1;
   }

   /* Variantes */
   .discord-btn{
     background: rgba(88,101,242,0.14);
     border-color: rgba(88,101,242,0.35);
     color: #5865F2;
   }

   .youtube-btn{
     background: rgba(255,0,0,0.12);
     border-color: rgba(255,0,0,0.30);
     color: #ff2b2b;
   }

   .twitter-btn{
     background: rgba(29,161,242,0.12);
     border-color: rgba(29,161,242,0.30);
     color: #1DA1F2;
   }

   /* Hover */
   .social-btn:hover{
     transform: translateY(-2px);
     filter: brightness(1.08);
   }

   /* === FIX: redes sociales en horizontal y centradas dentro del modal === */
   #accountModal .social-buttons{
     position: static !important;
     inset: auto !important;     /* anula top/right/bottom/left si venían seteados */
     width: 100% !important;

     display: flex !important;
     flex-direction: row !important;
     justify-content: center !important;
     align-items: center !important;

     gap: 12px !important;
     margin: 16px auto 8px !important;
   }

   #accountModal .social-btn{
     display: inline-flex !important;  /* asegura alineación limpia */
     align-items: center !important;
     justify-content: center !important;
   }