:root {
      --bg-light: #f8fafc;
      --card-bg: #ffffff;
      --card-border: #e2e8f0;
      --primary: #4f46e5;
      --primary-hover: #4338ca;
      --primary-glow: rgba(79, 70, 229, 0.15);
      --accent: #9333ea;
      --accent-glow: rgba(147, 51, 234, 0.15);
      --success: #059669;
      --success-glow: rgba(5, 150, 105, 0.15);
      --warning: #d97706;
      --text-main: #0f172a;
      --text-sub: #64748b;
    }

    /* OCULTAR COMPLETAMENTE LAS BARRAS DESLIZADORAS EN TODA LA WEB (SCROLL FLUIDO INVISIBLE) */
    *, *::before, *::after {
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    *::-webkit-scrollbar,
    ::-webkit-scrollbar,
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background-color: var(--bg-light);
      background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.08) 0px, transparent 50%);
      color: var(--text-main);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      padding-bottom: 90px;
    }

    header:not(.vortex-topbar) {
      width: 100%;
      max-width: 600px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
      margin-bottom: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .brand-img {
      height: 54px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
      transition: transform 0.2s ease;
    }

    .brand:hover .brand-img {
      transform: scale(1.05);
    }

    .brand-title {
      font-weight: 900;
      font-size: 22px;
      color: var(--text-main);
      letter-spacing: -0.5px;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .yt-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      flex-shrink: 0;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      border-radius: 50%;
      transition: all 0.2s ease;
      text-decoration: none;
    }

    .yt-icon-btn:hover {
      background: #dc2626;
      color: #ffffff;
      transform: scale(1.08);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    }

    .discord-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      flex-shrink: 0;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      color: #5865f2;
      border-radius: 50%;
      transition: all 0.2s ease;
      text-decoration: none;
    }

    .discord-icon-btn:hover {
      background: #5865f2;
      color: #ffffff;
      transform: scale(1.08);
      box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
    }

    .notif-icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      flex-shrink: 0;
      background: #e0e7ff;
      border: 1px solid #c7d2fe;
      color: var(--primary);
      border-radius: 50%;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .notif-icon-btn:hover {
      background: var(--primary);
      color: #ffffff;
      transform: scale(1.08);
      box-shadow: 0 4px 12px var(--primary-glow);
    }

    @media (max-width: 480px) {
      header:not(.vortex-topbar) {
        padding: 10px 14px;
      }
      .brand-img {
        height: 44px;
      }
      .brand-title {
        font-size: 19px;
      }
      .header-actions {
        gap: 8px;
      }
      .yt-icon-btn, .discord-icon-btn, .notif-icon-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
      }
    }

    .status-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .status-online {
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: var(--success);
    }

    .status-offline {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #ef4444;
    }

    main {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 1;
    }

    /* BANNER ANIMADO DE MIEMBROS DE YOUTUBE */
    .member-banner-box {
      width: 100%;
      border-radius: 22px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
      border: 2px solid transparent;
      background: linear-gradient(135deg, #1e3a8a, #3b82f6);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      animation: bannerGlow 3s infinite alternate ease-in-out;
      margin-bottom: 4px;
      text-decoration: none;
      display: block;
    }

    @keyframes bannerGlow {
      0% {
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
        border-color: #60a5fa;
      }
      50% {
        box-shadow: 0 12px 32px rgba(234, 179, 8, 0.35);
        border-color: #facc15;
      }
      100% {
        box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
        border-color: #818cf8;
      }
    }

    .member-banner-box:hover {
      transform: translateY(-3px) scale(1.01);
    }

    .member-banner-box img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      border-radius: 20px;
    }

    /* BUSCADOR Y CONTROLES DEL CATÁLOGO */
    .catalog-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }

    .search-box {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-input {
      width: 100%;
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 10px 38px 10px 38px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main);
      outline: none;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
      transition: border-color 0.2s;
      -webkit-appearance: none;
      appearance: none;
    }

    .search-input::-webkit-search-cancel-button,
    .search-input::-webkit-search-decoration,
    .search-input::-webkit-search-results-button,
    .search-input::-webkit-search-results-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
      -webkit-appearance: none;
      appearance: none;
      display: none !important;
    }

    .search-box-form {
      display: contents;
    }

    .search-input:focus {
      border-color: var(--primary);
    }

    .search-clear-btn {
      position: absolute;
      right: 12px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      border: none;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: all 0.2s ease;
      outline: none;
      z-index: 2;
    }

    .search-clear-btn:hover {
      background: #cbd5e1;
      color: #0f172a;
      transform: scale(1.08);
    }

    .search-clear-btn:active {
      transform: scale(0.95);
    }

    .search-icon {
      position: absolute;
      left: 12px;
      color: var(--text-sub);
      pointer-events: none;
    }

    .view-toggle-btn {
      width: 40px;
      height: 40px;
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 16px;
      color: var(--text-sub);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
      transition: all 0.2s;
    }

    .view-toggle-btn:hover {
      background: #f1f5f9;
      color: var(--text-main);
    }

    /* FILTROS DESPLEGABLES PERSONALIZADOS */
    .filters-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
      width: 100%;
      box-sizing: border-box;
      margin-top: 2px;
      margin-bottom: 4px;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
      position: relative;
    }

    .filter-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-sub);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-left: 4px;
    }

    .custom-dropdown {
      position: relative;
      width: 100%;
      user-select: none;
    }

    .custom-dropdown-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      color: var(--text-main);
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      box-sizing: border-box;
      transition: all 0.2s ease;
      gap: 6px;
    }

    .custom-dropdown-btn:hover,
    .custom-dropdown.open .custom-dropdown-btn {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .custom-dropdown-btn .dd-arrow {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      stroke: var(--text-sub);
      transition: transform 0.2s ease;
    }

    .custom-dropdown.open .dd-arrow {
      transform: rotate(180deg);
    }

    .custom-dropdown-list {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      z-index: 999;
      overflow: hidden;
      animation: ddFadeIn 0.15s ease;
    }

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

    .custom-dropdown.open .custom-dropdown-list {
      display: block;
    }

    .custom-dropdown-item {
      padding: 11px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .custom-dropdown-item:not(:last-child) {
      border-bottom: 1px solid #f1f5f9;
    }

    .custom-dropdown-item:hover {
      background: #f8fafc;
    }

    .custom-dropdown-item.selected {
      color: var(--primary);
      font-weight: 800;
      background: #f5f3ff;
    }

    .game-tab.active {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
      box-shadow: 0 4px 12px var(--primary-glow);
    }

    .game-tab-count {
      background: #f1f5f9;
      color: var(--text-sub);
      padding: 2px 7px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 800;
    }

    .game-tab.active .game-tab-count {
      background: rgba(255, 255, 255, 0.25);
      color: #ffffff;
    }

    /* VISTAS DEL CATÁLOGO: CUADRÍCULA Y LISTA COMPACTA */
    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 16px;
      width: 100%;
    }

    .catalog-grid.list-view {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .catalog-card {
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 22px;
      padding: 16px 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .catalog-card.claimed {
      border-color: #a7f3d0;
      background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.06);
    }

    .catalog-grid.list-view .catalog-card {
      flex-direction: row;
      text-align: left;
      padding: 10px 16px;
      gap: 14px;
      border-radius: 18px;
    }

    .catalog-card:hover {
      transform: translateY(-4px);
      border-color: var(--primary);
      box-shadow: 0 12px 28px var(--primary-glow);
    }

    .catalog-grid.list-view .catalog-card:hover {
      transform: translateX(4px);
    }

    .catalog-sprite {
      width: 95px;
      height: 95px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }

    .catalog-grid.list-view .catalog-sprite {
      width: 54px;
      height: 54px;
      margin: 0;
    }

    .catalog-sprite img {
      width: 90px;
      height: 90px;
      object-fit: contain;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,0.1));
      transition: transform 0.25s ease;
    }

    .catalog-grid.list-view .catalog-sprite img {
      width: 50px;
      height: 50px;
    }

    .catalog-card:hover .catalog-sprite img {
      transform: scale(1.1);
    }

    .catalog-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .catalog-grid.list-view .catalog-info {
      align-items: flex-start;
      flex: 1;
    }

    .catalog-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-main);
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      text-align: center;
      letter-spacing: -0.2px;
      line-height: 1.25;
    }

    .catalog-grid.list-view .catalog-title {
      margin-top: 0;
      text-align: left;
      font-size: 14px;
    }

    .badge-game-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 800;
      z-index: 2;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .catalog-grid.list-view .badge-game-tag {
      position: static;
      display: inline-block;
      margin-bottom: 2px;
    }

    .badge-shiny-small {
      position: absolute;
      top: 12px;
      right: 12px;
      background: #fffbeb;
      border: 1px solid #fcd34d;
      color: #d97706;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 800;
    }

    /* INSIGNIA DE REGALO RECLAMADO / CONSEGUIDO POR EL USUARIO */
    .badge-claimed {
      position: absolute;
      top: 36px;
      left: 12px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: #059669;
      padding: 2px 7px;
      border-radius: 10px;
      font-size: 9.5px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      z-index: 2;
    }

    .catalog-grid.list-view .badge-claimed {
      position: static;
      display: inline-flex;
      margin-bottom: 2px;
    }

    .catalog-grid.list-view .badge-shiny-small {
      position: static;
      display: inline-block;
    }

    .badge-claims-counter {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-sub);
      margin-top: 4px;
    }

    /* SKELETON SHIMMER LOADERS */
    .skeleton-card {
      background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 22px;
      height: 180px;
      width: 100%;
    }

    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .change-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 12px 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
      margin-bottom: 8px;
    }

    .change-btn {
      background: #e0e7ff;
      color: var(--primary);
      border: 1px solid #c7d2fe;
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .change-btn:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

    .card {
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 24px;
      padding: 22px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.25s ease;
    }

    .card.selected {
      border-color: var(--primary);
      box-shadow: 0 10px 30px var(--primary-glow);
      overflow: visible !important;
    }

    .badge-shiny {
      position: absolute;
      top: 16px;
      right: 16px;
      background: #fffbeb;
      border: 1px solid #fcd34d;
      color: #d97706;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
    }

    .pokemon-preview {
      width: 150px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }

    .pokemon-preview img {
      width: 140px;
      height: 140px;
      object-fit: contain;
      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
    }

    .pokemon-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--text-main);
    }

    .qr-icon-btn {
      width: 38px;
      height: 38px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .qr-icon-btn:hover {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
      transform: scale(1.06);
      box-shadow: 0 4px 12px var(--primary-glow);
    }

    .showdown-toggle {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: var(--text-sub);
      font-size: 13px;
      font-weight: 700;
      padding: 9px 16px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .showdown-toggle:hover {
      color: var(--text-main);
      background: #e2e8f0;
    }

    .showdown-box {
      width: 100%;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 14px;
      padding: 14px;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      text-align: left;
      white-space: pre-wrap;
      margin-top: 10px;
      display: none;
      max-height: 180px;
      overflow-y: auto;
      line-height: 1.6;
    }

    .form-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-align: left;
      margin-bottom: 12px;
    }

    .form-label {
      font-size: 12px;
      font-weight: 800;
      color: var(--text-sub);
      text-transform: uppercase;
    }

    .form-input, .form-select {
      width: 100%;
      background: #f8fafc;
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 12px 14px;
      color: var(--text-main);
      font-size: 14px;
      font-weight: 700;
      outline: none;
      transition: border-color 0.2s;
    }

    .form-input:focus, .form-select:focus {
      border-color: var(--primary);
    }

    .btn-submit {
      width: 100%;
      background: var(--primary);
      border: none;
      color: white;
      padding: 14px;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 16px var(--primary-glow);
      transition: transform 0.2s, opacity 0.2s;
    }

    .btn-submit:hover {
      opacity: 0.95;
      transform: translateY(-1px);
    }

    .single-game-badge {
      background: #e0e7ff;
      border: 1px solid #c7d2fe;
      color: var(--primary);
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .trade-code-display {
      font-size: 34px;
      font-weight: 900;
      letter-spacing: 4px;
      color: var(--success);
      margin: 12px 0;
    }

    .instructions-box {
      background: #f8fafc;
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 14px;
      font-size: 13px;
      text-align: left;
      line-height: 1.5;
      margin-bottom: 14px;
    }

    .instructions-box ol {
      margin-left: 18px;
      margin-top: 6px;
    }

    .status-box {
      background: #f5f3ff;
      border: 1px solid #c4b5fd;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      transition: all 0.3s ease;
    }

    @keyframes alertPulseLight {
      0% {
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4);
        border-color: #059669;
        background: #ecfdf5;
      }
      50% {
        box-shadow: 0 0 20px 6px rgba(5, 150, 105, 0.3);
        border-color: #10b981;
        background: #d1fae5;
      }
      100% {
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4);
        border-color: #059669;
        background: #ecfdf5;
      }
    }

    .status-box-searching {
      animation: alertPulseLight 1.2s infinite ease-in-out !important;
    }

    .status-text-searching {
      color: #047857 !important;
      font-size: 18px !important;
      font-weight: 900 !important;
    }

    @keyframes alertPulseBlue {
      0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
        border-color: #3b82f6;
        background: #eff6ff;
      }
      50% {
        box-shadow: 0 0 20px 6px rgba(59, 130, 246, 0.3);
        border-color: #60a5fa;
        background: #dbeafe;
      }
      100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
        border-color: #3b82f6;
        background: #eff6ff;
      }
    }

    .status-box-initializing {
      animation: alertPulseBlue 1.5s infinite ease-in-out !important;
    }

    .status-text-initializing {
      color: #1d4ed8 !important;
      font-size: 17px !important;
      font-weight: 800 !important;
    }

    .status-box-trading {
      animation: alertPulseLight 0.9s infinite ease-in-out !important;
    }

    .status-text-trading {
      color: #0d9488 !important;
      font-size: 17px !important;
      font-weight: 800 !important;
    }

    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 100010 !important;
      align-items: center;
      justify-content: center;
      padding: 16px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }

    .modal-content {
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 24px;
      padding: 24px;
      max-width: 340px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .qr-container {
      position: relative;
      width: 260px;
      height: 260px;
      background: white;
      padding: 12px;
      border-radius: 20px;
      border: 1px solid var(--card-border);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .qr-overlay-logo {
      position: absolute;
      width: 72px;
      height: 72px;
      background: #ffffff;
      border: none;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
      padding: 4px;
      box-sizing: border-box;
    }

    .qr-overlay-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .offline-card {
      padding: 40px 20px;
      border-color: #fecaca;
    }

    .offline-title {
      font-size: 20px;
      font-weight: 800;
      color: #ef4444;
      margin-bottom: 8px;
    }

    .offline-desc {
      font-size: 14px;
      color: var(--text-sub);
      line-height: 1.5;
    }

    .toast-msg {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: #0f172a;
      color: white;
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      z-index: 100050 !important;
      animation: fadeIn 0.3s ease;
    }

    /* LÍNEA SUTIL DE ESTADÍSTICAS EN EL PIE DE PÁGINA (FOOTER) */
    footer {
      width: 100%;
      max-width: 600px;
      margin-top: 18px;
      margin-bottom: 8px;
      display: flex;
      justify-content: center;
    }

    .stats-subtle-bar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(226, 232, 240, 0.8);
      border-radius: 20px;
      padding: 6px 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-sub);
      white-space: nowrap;
    }

    .stat-item b {
      color: var(--text-main);
      font-weight: 800;
    }

    .stat-divider {
      color: #cbd5e1;
      font-size: 12px;
    }

    /* ESTILOS DE TARJETAS DE REDES SOCIALES EN MODAL */
    .social-link-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--card-border);
      background: #f8fafc;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .social-link-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    }
    .social-icon-box {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #ffffff;
    }
    .yt-box { background: linear-gradient(135deg, #ef4444, #dc2626); }
    .discord-box { background: linear-gradient(135deg, #6366f1, #4f46e5); }
    .wa-box { background: linear-gradient(135deg, #22c55e, #16a34a); }
    .social-text-box {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .social-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-main);
    }
    .social-desc {
      font-size: 11px;
      color: var(--text-sub);
      font-weight: 600;
    }
    /* TICKER DE TEXTO SCROLL PROMOCIONAL DE YOUTUBE */
    .promo-ticker-bar {
      width: 100%;
      max-width: 600px;
      margin: 12px auto 0 auto;
      background: linear-gradient(135deg, #1e1b4b, #312e81);
      border: 1px solid rgba(99, 102, 241, 0.4);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(49, 46, 129, 0.25);
    }

    .promo-ticker-link {
      display: block;
      text-decoration: none;
      padding: 8px 0;
    }

    .promo-ticker-track {
      display: flex;
      width: max-content;
      animation: marqueeScroll 22s linear infinite;
    }

    .promo-ticker-track:hover {
      animation-play-state: paused;
    }

    .promo-ticker-content {
      display: flex;
      align-items: center;
      gap: 16px;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 800;
      color: #ffffff;
      padding-right: 16px;
    }

    .promo-ticker-highlight {
      color: #fde047;
      text-shadow: 0 0 8px rgba(253, 224, 71, 0.4);
    }

    /* BOTÓN MEJORADO DE REGRESAR AL CATÁLOGO */
    .back-nav-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid var(--card-border);
      color: var(--primary);
      padding: 9px 16px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .back-nav-btn:hover {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
      box-shadow: 0 4px 14px var(--primary-glow);
      transform: translateY(-1px);
    }
    .back-nav-btn:active {
      transform: scale(0.97);
    }

    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* BARRA DE NAVEGACIÓN INFERIOR ESTILO APP MÓVIL (CATÁLOGO, ESTADO Y AJUSTES) */
    .mobile-bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      border-top: 1px solid var(--card-border);
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
      z-index: 900;
    }

    .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 10.5px;
      font-weight: 800;
      color: var(--text-sub);
      cursor: pointer;
      border: none;
      background: none;
      padding: 4px 6px;
      border-radius: 12px;
      transition: all 0.2s ease;
      flex: 1;
      max-width: 90px;
    }

    .bottom-nav-item.active {
      color: var(--primary);
    }

    .bottom-nav-item svg {
      width: 22px;
      height: 22px;
    }

    .nav-cart-badge {
      position: absolute;
      top: -6px;
      right: -10px;
      background: #ef4444;
      color: #ffffff;
      font-size: 10px;
      font-weight: 900;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
      line-height: 1;
      pointer-events: none;
      box-sizing: border-box;
      animation: badgePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 15;
    }

    .nav-cart-badge[style*="none"],

    @keyframes badgePop {
      0% { transform: scale(0); }
      80% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translate(-50%, 10px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    /* SLIDER HERO DE BANNERS */
    .banner-slider-container {
      width: 100%;
      border-radius: 22px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12);
      border: 1.5px solid var(--card-border);
      background: #ffffff;
    }
    .banner-slider-track {
      display: flex;
      width: 100%;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .banner-slide {
      flex: 0 0 100%;
      width: 100%;
      min-width: 100%;
      cursor: pointer;
      display: block;
      text-decoration: none;
      position: relative;
    }
    .banner-slide img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }
    .banner-slider-dots {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      z-index: 10;
    }
    .banner-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .banner-dot.active {
      width: 20px;
      border-radius: 10px;
      background: var(--primary);
    }

    /* MODAL DE INSTALACIÓN PWA MÓVIL */
    .pwa-install-bottom-sheet {
      background: #ffffff;
      border-radius: 24px 24px 0 0;
      width: 100%;
      max-width: 440px;
      padding: 16px 20px 24px 20px;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      animation: pwaSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      box-sizing: border-box;
    }
    @media (min-width: 600px) {
      #pwaMobileInstallModal {
        align-items: center !important;
      }
      .pwa-install-bottom-sheet {
        border-radius: 24px !important;
        margin: 20px;
      }
    }
    @keyframes pwaSlideUp {
      0% { transform: translateY(100%); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }
    .pwa-drag-handle {
      width: 40px;
      height: 4px;
      border-radius: 2px;
      background: #cbd5e1;
      margin-bottom: 4px;
    }
    .pwa-install-header {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      position: relative;
    }
    .pwa-app-icon-wrap {
      width: 58px;
      height: 58px;
      border-radius: 16px;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      padding: 2px;
      box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pwa-app-logo {
      width: 100%;
      height: 100%;
      border-radius: 14px;
      object-fit: contain;
      background: #ffffff;
    }
    .pwa-app-details {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .pwa-app-name-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .pwa-app-title {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
    }
    .pwa-app-sub {
      font-size: 11.5px;
      color: #64748b;
      font-weight: 600;
    }
    .pwa-app-verified-url {
      font-size: 10px;
      color: #10b981;
      font-weight: 700;
    }
    .pwa-close-btn {
      background: #f1f5f9;
      border: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      align-self: flex-start;
      transition: all 0.15s ease;
    }
    .pwa-close-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .pwa-benefits-list {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 9px;
      box-sizing: border-box;
    }
    .pwa-benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .pwa-benefit-icon {
      font-size: 16px;
      line-height: 1.2;
    }
    .pwa-benefit-title {
      font-size: 12px;
      font-weight: 800;
      color: #1e293b;
    }
    .pwa-benefit-desc {
      font-size: 11px;
      color: #64748b;
      line-height: 1.3;
    }
    .pwa-install-btn {
      width: 100%;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      color: #ffffff;
      border: none;
      padding: 13px 20px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }
    .pwa-install-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
    }
    .pwa-install-btn:active {
      transform: scale(0.98);
    }
    .pwa-ios-instructions {
      width: 100%;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 14px;
      padding: 12px 14px;
      box-sizing: border-box;
    }
    .pwa-ios-title {
      font-size: 12px;
      font-weight: 800;
      color: #1d4ed8;
      margin-bottom: 6px;
    }
    .pwa-ios-steps {
      margin: 0;
      padding-left: 18px;
      font-size: 11.5px;
      color: #1e3a8a;
      line-height: 1.5;
    }
    .pwa-later-btn {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 8px;
      transition: color 0.15s ease;
    }
    .pwa-later-btn:hover {
      color: #64748b;
    }

    /* SELECTOR DE JUEGOS FIX OT */
    .game-grid-selector {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
      box-sizing: border-box;
    }
    .game-select-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      cursor: pointer;
      transition: all 0.15s ease;
      box-sizing: border-box;
    }
    .game-select-card:hover {
      border-color: #a855f7;
      background: #faf5ff;
      transform: translateY(-1px);
    }
    .game-select-card.active {
      border-color: #9333ea;
      background: #faf5ff;
      box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.25);
    }
    .game-code {
      font-size: 13px;
      font-weight: 900;
      color: #9333ea;
      letter-spacing: 0.5px;
    }
    .game-name {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }

    /* MODAL DE AUTENTICACIÓN / REGISTRO / LOGIN */
    .auth-tabs {
      display: flex;
      border-bottom: 2px solid #e2e8f0;
      margin-bottom: 16px;
      gap: 8px;
    }
    .auth-tab-btn {
      flex: 1;
      background: none;
      border: none;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-sub);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all 0.2s ease;
    }
    .auth-tab-btn.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    .auth-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-align: left;
    }
    .auth-form-group label {
      font-size: 12px;
      font-weight: 800;
      color: var(--text-main);
    }
    .auth-input {
      background: #f8fafc;
      border: 1.5px solid var(--card-border);
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text-main);
      outline: none;
      transition: all 0.2s ease;
      width: 100%;
      box-sizing: border-box;
    }
    .auth-input:focus {
      border-color: var(--primary);
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }
    .auth-avatar-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-top: 6px;
      max-height: 175px;
      overflow-y: auto;
      padding: 6px;
      border: 1px solid var(--card-border);
      border-radius: 16px;
      background: #f8fafc;
    }
    .auth-avatar-option {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      border: 2px solid var(--card-border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: #ffffff;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      margin: 0 auto;
    }
    .auth-avatar-option:hover {
      border-color: var(--primary);
      transform: scale(1.06);
    }
    .auth-avatar-option.selected {
      border-color: var(--primary);
      background: #eef2ff;
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    }
    .auth-avatar-option img {
      width: 38px;
      height: 38px;
      object-fit: contain;
      image-rendering: pixelated;
    }
    .user-profile-icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1px solid var(--card-border);
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      padding: 0;
      position: relative;
      font-size: 18px;
    }
    .user-profile-icon-btn:hover {
      background: #e2e8f0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      color: var(--primary);
    }
    .user-profile-icon-btn.logged-in {
      background: #eef2ff;
      border-color: #c7d2fe;
      color: #4f46e5;
    }

    /* ========================================================
       SISTEMA DE DISEÑO UNIFICADO - MODAL DE PERFIL MODERNO (DESKTOP & MOBILE FIRST)
       ======================================================== */
    .profile-modern-modal {
      width: 520px !important;
      max-width: calc(100% - 20px) !important;
      height: auto !important;
      max-height: 90vh !important;
      background: #ffffff !important;
      color: #0f172a !important;
      border-radius: 24px !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
      padding: 18px 20px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      box-sizing: border-box !important;
      text-align: left !important;
      position: relative !important;
      overflow: hidden !important;
    }

    .profile-scroll-body {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 2px 2px 2px 0;
      width: 100%;
      box-sizing: border-box;
      max-height: calc(90vh - 150px);
    }

    .profile-scroll-body::-webkit-scrollbar {
      width: 5px;
    }
    .profile-scroll-body::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
    }
    .profile-scroll-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .profile-header-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 12px;
      gap: 12px;
      width: 100%;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .profile-header-left {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .profile-avatar-wrapper {
      position: relative;
      width: 54px;
      height: 54px;
      flex-shrink: 0;
    }

    .profile-avatar-img {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      object-fit: contain;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      image-rendering: pixelated;
    }

    .profile-status-dot {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #10b981;
      border: 2.5px solid #ffffff;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
    }

    .profile-header-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .profile-nick-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .profile-nick-text {
      font-size: 17px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }

    .profile-verified-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
      font-size: 10.5px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 12px;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }

    .profile-role-tag {
      font-size: 10.5px;
      font-weight: 800;
      color: #7e22ce;
      background: #faf5ff;
      border: 1px solid #e9d5ff;
      padding: 2px 8px;
      border-radius: 8px;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }

    .profile-email-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .profile-email-row svg {
      flex-shrink: 0;
      color: #94a3b8;
    }

    .profile-close-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      padding: 0;
      align-self: flex-start;
      flex-shrink: 0;
    }

    .profile-close-btn:hover {
      background: #fee2e2;
      color: #dc2626;
      border-color: #fca5a5;
    }

    .profile-nav-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 14px;
      width: 100%;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .profile-tab-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 6px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      border-radius: 10px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .profile-tab-pill svg {
      flex-shrink: 0;
    }

    .profile-tab-pill:hover {
      color: #0f172a;
    }

    .profile-tab-pill.active {
      background: #ffffff;
      color: #4f46e5;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      font-weight: 800;
    }

    .profile-purchases-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }

    .profile-section-title {
      font-size: 13.5px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .profile-btn-refresh {
      background: #eff6ff;
      border: 1px solid #dbeafe;
      color: #3b82f6;
      font-size: 11.5px;
      font-weight: 800;
      padding: 5px 10px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.15s ease;
    }

    .profile-btn-refresh:hover {
      background: #dbeafe;
      color: #1d4ed8;
      transform: translateY(-1px);
    }

    /* TOOLBAR DE BUSCADOR Y FILTROS MODERNO */
    .profile-purchases-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }

    .profile-search-wrap {
      position: relative;
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
    }

    .profile-search-icon {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      pointer-events: none;
      display: flex;
      align-items: center;
    }

    .profile-search-input {
      width: 100% !important;
      height: 38px !important;
      padding: 0 32px 0 34px !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      background: #f8fafc !important;
      border: 1.5px solid #e2e8f0 !important;
      border-radius: 11px !important;
      color: #0f172a !important;
      outline: none !important;
      box-sizing: border-box !important;
      transition: all 0.2s ease !important;
      font-family: inherit !important;
    }

    .profile-search-input:focus {
      background: #ffffff !important;
      border-color: #6366f1 !important;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    }

    .profile-search-clear-btn {
      position: absolute;
      right: 9px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      border: none;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: all 0.15s ease;
    }

    .profile-search-clear-btn:hover {
      background: #cbd5e1;
      color: #0f172a;
    }

    .profile-filter-wrap {
      flex-shrink: 0;
      width: 120px;
    }

    .profile-filter-select {
      width: 100% !important;
      height: 38px !important;
      padding: 0 8px 0 10px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      background: #f8fafc !important;
      border: 1.5px solid #e2e8f0 !important;
      border-radius: 11px !important;
      color: #334155 !important;
      outline: none !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      font-family: inherit !important;
      box-sizing: border-box !important;
    }

    .profile-filter-select:focus {
      border-color: #6366f1 !important;
      background: #ffffff !important;
    }

    /* CARD DE HISTORIAL DE SOLICITUDES REDISEÑADA */
    .profile-history-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #ffffff;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1.5px solid #e2e8f0;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
    }

    .profile-history-card:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    }

    .history-card-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    .history-poke-avatar-wrap {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
    }

    .history-poke-avatar-img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .history-meta-box {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 0;
    }

    .history-title-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .history-poke-title {
      font-size: 13.5px;
      font-weight: 900;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .history-serial-tag {
      font-size: 10px;
      font-weight: 800;
      color: #6366f1;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      padding: 1px 6px;
      border-radius: 6px;
      font-family: monospace;
    }

    .history-game-tag {
      font-size: 10px;
      font-weight: 800;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 1px 5px;
      border-radius: 6px;
    }

    .history-info-subrow {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: #64748b;
      flex-wrap: wrap;
    }

    .history-type-badge {
      font-size: 10px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .history-type-badge.gift { background: #fdf2f8; color: #db2777; border: 1px solid #fbcfe8; }
    .history-type-badge.shop { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
    .history-type-badge.fixot { background: #faf5ff; color: #9333ea; border: 1px solid #e9d5ff; }

    .history-code-val {
      font-family: monospace;
      font-weight: 900;
      color: #4f46e5;
      letter-spacing: 0.5px;
    }

    .history-time-val {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 500;
    }

    /* BADGES DE ESTADO MODERNAS */
    .profile-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 9px;
      border-radius: 8px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .profile-status-badge.status-completed {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }
    .profile-status-badge.status-progress {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }
    .profile-status-badge.status-cancelled {
      background: #f8fafc;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }
    .profile-status-badge.status-failed {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .profile-purchase-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .profile-purchase-card:hover {
      border-color: #cbd5e1;
      background: #fafbfc;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .purchase-card-main {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0;
    }

    .purchase-meta-row-top {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .purchase-poke-title {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
    }

    .purchase-game-badge {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
      background: #eef2ff;
      color: #4f46e5;
      border: 1px solid #c7d2fe;
    }

    .purchase-order-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
      font-family: monospace;
    }

    .purchase-meta-row-sub {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: #64748b;
      font-weight: 600;
    }

    .purchase-price-tag {
      color: #d97706;
      font-weight: 800;
    }

    .purchase-dot-sep {
      color: #cbd5e1;
    }

    .purchase-status-row {
      margin-top: 2px;
    }

    .purchase-card-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .btn-claim-direct {
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      border: none;
      font-size: 11.5px;
      font-weight: 800;
      padding: 7px 12px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .btn-claim-direct:hover {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-1px);
    }

    /* EMPTY STATES */
    .profile-empty-state {
      text-align: center;
      padding: 28px 16px;
      color: #64748b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .profile-empty-icon-wrap {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }

    .profile-empty-title {
      font-size: 13.5px;
      font-weight: 800;
      color: #1e293b;
    }

    .profile-empty-sub {
      font-size: 12px;
      color: #94a3b8;
      max-width: 280px;
      line-height: 1.4;
    }

    .profile-btn-empty-action {
      margin-top: 8px;
      background: #eef2ff;
      color: #4f46e5;
      border: 1px solid #c7d2fe;
      font-size: 12px;
      font-weight: 800;
      padding: 7px 14px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }

    .profile-btn-empty-action:hover {
      background: #4f46e5;
      color: #ffffff;
      transform: translateY(-1px);
    }

    @media (max-width: 640px) {
      .profile-modern-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 94vh !important;
        border-radius: 26px 26px 0 0 !important;
        padding: 18px 16px !important;
        position: fixed !important;
        bottom: 0 !important;
        margin: 0 !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        gap: 12px !important;
      }
      .profile-scroll-body {
        max-height: calc(94vh - 150px) !important;
      }
      .profile-nav-tabs {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
        padding: 3px !important;
      }
      .profile-tab-pill {
        padding: 8px 2px !important;
        font-size: 10.5px !important;
        flex-direction: column !important;
        gap: 3px !important;
      }
      .profile-tab-pill svg {
        width: 15px !important;
        height: 15px !important;
      }
      .profile-history-card {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
      }
      .history-card-left {
        width: 100% !important;
      }
      .profile-status-badge {
        align-self: flex-end !important;
        font-size: 11px !important;
      }
      .profile-purchase-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
      }
      .purchase-card-actions {
        width: 100% !important;
        justify-content: flex-end !important;
      }
    }

    .profile-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      box-sizing: border-box;
    }

    .profile-form-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .profile-form-label svg {
      color: #6366f1;
    }

    .profile-form-input {
      width: 100%;
      padding: 10px 14px;
      font-size: 13px;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      background: #ffffff;
      color: #0f172a;
      outline: none;
      font-family: inherit;
      transition: all 0.15s ease;
      box-sizing: border-box;
    }

    .profile-form-input:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .profile-trainers-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 13px;
      border: 1px solid #c7d2fe;
      border-radius: 16px;
      background: linear-gradient(145deg, #eef2ff, #ffffff);
    }

    .profile-trainers-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .profile-trainers-header > div { display: flex; flex-direction: column; gap: 2px; }
    .profile-trainers-header strong { color: #1e1b4b; font-size: 12.5px; font-weight: 900; }
    .profile-trainers-header span { color: #64748b; font-size: 10.5px; line-height: 1.35; }
    .profile-trainers-header button {
      min-height: 32px;
      padding: 0 11px;
      border: 1px solid #a5b4fc;
      border-radius: 10px;
      background: #fff;
      color: #4f46e5;
      font: inherit;
      font-size: 11px;
      font-weight: 850;
      cursor: pointer;
    }
    .profile-trainers-header button:disabled { opacity: .45; cursor: default; }
    .profile-trainers-list { display: flex; flex-direction: column; gap: 8px; }
    .profile-trainers-empty {
      padding: 13px;
      border: 1px dashed #cbd5e1;
      border-radius: 11px;
      color: #64748b;
      background: rgba(255,255,255,.72);
      text-align: center;
      font-size: 11px;
      font-weight: 700;
    }
    .profile-trainer-row {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) 28px;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
    }
    .profile-trainer-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 7px; }
    .profile-trainer-fields input {
      min-width: 0;
      min-height: 35px;
      padding: 0 9px;
      border: 1px solid #cbd5e1;
      border-radius: 9px;
      color: #0f172a;
      font: inherit;
      font-size: 11px;
      font-weight: 750;
      outline: none;
    }
    .profile-trainer-fields input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.1); }
    .profile-trainer-default {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border: 1.5px solid #cbd5e1;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
    }
    .profile-trainer-default span { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
    .profile-trainer-default.active { border-color: #4f46e5; }
    .profile-trainer-default.active span { background: #4f46e5; }
    .profile-trainer-remove {
      width: 28px;
      height: 28px;
      border: 1px solid #fecaca;
      border-radius: 9px;
      background: #fff7f7;
      color: #dc2626;
      font-size: 16px;
      cursor: pointer;
    }
    .profile-trainers-help { margin: 0; color: #64748b; font-size: 10px; line-height: 1.4; }

    @media (max-width: 520px) {
      .profile-trainer-fields { grid-template-columns: 1fr; }
    }

    .profile-avatar-grid-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 8px;
      display: grid !important;
      grid-template-columns: repeat(5, 1fr) !important;
      gap: 6px !important;
      max-height: 140px;
      overflow-x: hidden !important;
      overflow-y: auto;
      width: 100%;
      box-sizing: border-box;
    }

    .profile-avatar-card {
      width: 100%;
      max-width: 48px;
      aspect-ratio: 1 / 1;
      height: auto;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      margin: 0 auto;
      padding: 3px;
      box-sizing: border-box;
    }

    .profile-avatar-card:hover {
      border-color: #a5b4fc;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .profile-avatar-card.selected {
      border-color: #6366f1;
      background: #eef2ff;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
      transform: scale(1.05);
    }

    .profile-avatar-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
    }

    /* SCROLLBARS SLIM Y LIMPIAS SIN DESBORDE */
    .profile-modern-modal::-webkit-scrollbar,
    .profile-avatar-grid-box::-webkit-scrollbar,
    .profile-purchases-scroll-list::-webkit-scrollbar,
    #profilePurchasesList::-webkit-scrollbar,
    #profileHistoryContainer::-webkit-scrollbar {
      width: 5px;
      height: 0px;
    }
    .profile-modern-modal::-webkit-scrollbar-thumb,
    .profile-avatar-grid-box::-webkit-scrollbar-thumb,
    .profile-purchases-scroll-list::-webkit-scrollbar-thumb,
    #profilePurchasesList::-webkit-scrollbar-thumb,
    #profileHistoryContainer::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
    }
    .profile-modern-modal::-webkit-scrollbar-track,
    .profile-avatar-grid-box::-webkit-scrollbar-track,
    .profile-purchases-scroll-list::-webkit-scrollbar-track,
    #profilePurchasesList::-webkit-scrollbar-track,
    #profileHistoryContainer::-webkit-scrollbar-track {
      background: transparent;
    }

    .profile-btn-save {
      width: 100%;
      background: linear-gradient(135deg, #4f46e5, #6366f1);
      color: #ffffff;
      border: none;
      font-size: 13px;
      font-weight: 800;
      padding: 12px;
      border-radius: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.15s ease;
      box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
      margin-top: 4px;
    }

    .profile-btn-save:hover {
      background: linear-gradient(135deg, #4338ca, #4f46e5);
      transform: translateY(-1px);
    }

    .profile-card-section {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .profile-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
    }

    .profile-card-header svg {
      color: #4f46e5;
    }

    .profile-card-sub {
      font-size: 11px;
      color: #64748b;
      line-height: 1.4;
      margin-top: -6px;
    }

    .profile-admin-card {
      background: linear-gradient(135deg, #faf5ff, #f3e8ff);
      border: 1px solid #e9d5ff;
      border-radius: 16px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .profile-admin-card-title {
      font-size: 13px;
      font-weight: 800;
      color: #7e22ce;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .profile-admin-card-sub {
      font-size: 11px;
      color: #a855f7;
      margin-top: 2px;
    }

    .profile-btn-admin {
      background: #a855f7;
      color: #ffffff;
      border: none;
      font-size: 12px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(168, 85, 247, 0.25);
    }

    .profile-btn-admin:hover {
      background: #9333ea;
      transform: translateY(-1px);
    }

    .profile-history-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      transition: all 0.15s ease;
    }

    .profile-history-item:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    .profile-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #f1f5f9;
      padding-top: 14px;
      margin-top: 4px;
    }

    .profile-btn-logout {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
      font-size: 12px;
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }

    .profile-btn-logout:hover {
      background: #fee2e2;
      border-color: #f87171;
    }

    .profile-btn-done {
      background: #f8fafc;
      color: #334155;
      border: 1px solid #cbd5e1;
      font-size: 12px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .profile-btn-done:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    /* ========================================================
       WORKSPACE ADMIN PORTAL (OVERLAY FULL-PAGE ENLIGHTENED)
       ======================================================== */
    .vortex-admin-overlay {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      z-index: 99999 !important;
      background: rgba(15, 23, 42, 0.8) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      display: none !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    .vortex-admin-overlay.open {
      display: flex !important;
    }

    .vortex-workspace {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      background: #f8fafc !important;
      color: #0f172a !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: row !important;
      overflow: hidden !important;
      position: relative !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    .vortex-sidebar {
      width: 260px !important;
      min-width: 260px !important;
      max-width: 260px !important;
      height: 100vh !important;
      flex-shrink: 0 !important;
      background: #ffffff !important;
      border-right: 1px solid #e2e8f0 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      padding: 20px 16px !important;
      user-select: none !important;
      z-index: 10 !important;
      box-sizing: border-box !important;
      overflow-y: auto !important;
    }

    .vortex-brand-box {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 18px;
      border-bottom: 1px solid #f1f5f9;
    }

    .vortex-logo-badge {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 18px;
      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
      font-weight: 900;
    }

    .vortex-brand-title {
      font-size: 15px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.3px;
      line-height: 1.2;
    }

    .vortex-brand-sub {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .vortex-nav-section {
      margin-top: 16px;
    }

    .vortex-nav-label {
      font-size: 10px;
      font-weight: 800;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.9px;
      padding: 0 10px 8px;
    }

    .vortex-nav-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .vortex-nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .vortex-nav-item:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .vortex-nav-item.active {
      background: #eef2ff;
      color: #4f46e5;
      font-weight: 700;
    }

    .vortex-nav-item-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .vortex-pill-badge {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 12px;
    }

    .vortex-pill-live {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .vortex-pill-count {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
    }

    .vortex-admin-profile-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
    }

    .vortex-admin-avatar {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: #e0e7ff;
      color: #4338ca;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .vortex-main {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: calc(100vw - 260px) !important;
      max-width: calc(100vw - 260px) !important;
      height: 100vh !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      background: #f8fafc !important;
      box-sizing: border-box !important;
    }

    .vortex-topbar {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 64px !important;
      min-height: 64px !important;
      max-height: 64px !important;
      background: #ffffff !important;
      border: none !important;
      border-bottom: 1px solid #e2e8f0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 24px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 20px !important;
      flex-wrap: nowrap !important;
      box-sizing: border-box !important;
      flex-shrink: 0 !important;
      z-index: 10 !important;
    }

    .vortex-search-box {
      flex: 1 1 auto !important;
      max-width: 440px !important;
      min-width: 220px !important;
      height: 38px !important;
      position: relative !important;
      display: flex !important;
      align-items: center !important;
    }

    .vortex-search-input {
      width: 100% !important;
      height: 100% !important;
      padding: 0 46px 0 36px !important;
      font-size: 13px !important;
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 8px !important;
      color: #0f172a !important;
      outline: none !important;
      transition: all 0.2s ease !important;
      font-family: inherit !important;
      box-sizing: border-box !important;
    }

    .vortex-search-input:focus {
      background: #ffffff !important;
      border-color: #6366f1 !important;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    }

    .vortex-search-icon {
      position: absolute !important;
      left: 11px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      align-items: center !important;
      font-size: 14px !important;
      color: #94a3b8 !important;
      pointer-events: none !important;
    }

    .vortex-search-shortcut {
      position: absolute !important;
      right: 8px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      background: #e2e8f0 !important;
      color: #64748b !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      pointer-events: none !important;
    }

    .vortex-topbar-actions {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      flex-shrink: 0 !important;
      white-space: nowrap !important;
      margin-left: auto !important;
    }

    .vortex-online-chip {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      height: 36px !important;
      padding: 0 12px !important;
      border-radius: 8px !important;
      background: #ecfdf5 !important;
      border: 1px solid #a7f3d0 !important;
      color: #059669 !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }

    .vortex-clock-chip {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      height: 36px !important;
      padding: 0 12px !important;
      border-radius: 8px !important;
      background: #f1f5f9 !important;
      border: 1px solid #e2e8f0 !important;
      color: #475569 !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }

    .vortex-btn-primary {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      height: 36px !important;
      padding: 0 16px !important;
      background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
      color: #ffffff !important;
      border: none !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      border-radius: 8px !important;
      cursor: pointer !important;
      box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25) !important;
      transition: all 0.15s ease !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }

    .vortex-btn-primary:hover {
      background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35) !important;
    }

    .vortex-btn-close {
      width: 36px !important;
      height: 36px !important;
      border-radius: 8px !important;
      background: #f1f5f9 !important;
      border: 1px solid #e2e8f0 !important;
      color: #64748b !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      transition: all 0.15s ease !important;
      box-sizing: border-box !important;
    }

    .vortex-btn-close:empty::before {
      content: "×";
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
      color: #64748b;
    }

    .vortex-btn-close:hover {
      background: #fee2e2 !important;
      color: #dc2626 !important;
      border-color: #fca5a5 !important;
    }

    .vortex-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      color: #334155;
      border: 1px solid #cbd5e1;
      font-size: 12px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap !important;
    }

    .vortex-btn-secondary:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .vortex-copy-icon-btn {
      background: transparent !important;
      border: 1px solid #e2e8f0 !important;
      cursor: pointer !important;
      width: 24px !important;
      height: 24px !important;
      padding: 0 !important;
      border-radius: 6px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #64748b !important;
      transition: all 0.15s ease !important;
    }

    .vortex-copy-icon-btn:hover {
      background: #e0e7ff !important;
      border-color: #c7d2fe !important;
      color: #4f46e5 !important;
      transform: scale(1.08) !important;
    }

    .vortex-action-icon-btn {
      width: 32px !important;
      height: 32px !important;
      border-radius: 8px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: all 0.15s ease !important;
      border: 1px solid transparent !important;
      background: #f8fafc !important;
      box-sizing: border-box !important;
      padding: 0 !important;
    }

    .vortex-action-icon-btn.verified {
      background: #ecfdf5 !important;
      color: #059669 !important;
      border-color: #a7f3d0 !important;
    }
    .vortex-action-icon-btn.verified:hover {
      background: #d1fae5 !important;
      color: #047857 !important;
      transform: scale(1.05) !important;
    }

    .vortex-action-icon-btn.unverified {
      background: #f8fafc !important;
      color: #94a3b8 !important;
      border-color: #cbd5e1 !important;
    }
    .vortex-action-icon-btn.unverified:hover {
      background: #eff6ff !important;
      color: #2563eb !important;
      border-color: #bfdbfe !important;
      transform: scale(1.05) !important;
    }

    .vortex-action-icon-btn.banned {
      background: #ecfdf5 !important;
      color: #059669 !important;
      border-color: #a7f3d0 !important;
    }
    .vortex-action-icon-btn.banned:hover {
      background: #d1fae5 !important;
      transform: scale(1.05) !important;
    }

    .vortex-action-icon-btn.unbanned {
      background: #fef2f2 !important;
      color: #dc2626 !important;
      border-color: #fecaca !important;
    }
    .vortex-action-icon-btn.unbanned:hover {
      background: #fee2e2 !important;
      color: #b91c1c !important;
      transform: scale(1.05) !important;
    }

    .vortex-action-icon-btn.delete {
      background: #fef2f2 !important;
      color: #dc2626 !important;
      border-color: #fecaca !important;
    }
    .vortex-action-icon-btn.delete:hover {
      background: #dc2626 !important;
      color: #ffffff !important;
      border-color: #dc2626 !important;
      transform: scale(1.05) !important;
    }

    /* ========================================================
       MODAL DE CONFIRMACIÓN ELEGANTE (CENTERED TOAST MODAL)
       ======================================================== */
    .vortex-confirm-overlay {
      position: fixed !important;
      inset: 0 !important;
      z-index: 200000 !important;
      background: rgba(15, 23, 42, 0.65) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      display: none !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 16px !important;
    }

    .vortex-confirm-overlay.open {
      display: flex !important;
    }

    .vortex-confirm-box {
      background: #ffffff !important;
      border-radius: 20px !important;
      padding: 24px !important;
      width: 100% !important;
      max-width: 380px !important;
      text-align: center !important;
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 12px !important;
      animation: vortexPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .vortex-confirm-icon-wrap {
      width: 52px !important;
      height: 52px !important;
      border-radius: 16px !important;
      background: #fef2f2 !important;
      color: #ef4444 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-bottom: 2px !important;
    }

    .vortex-confirm-title {
      font-size: 16px !important;
      font-weight: 800 !important;
      color: #0f172a !important;
    }

    .vortex-confirm-msg {
      font-size: 13px !important;
      color: #64748b !important;
      line-height: 1.5 !important;
      margin-bottom: 6px !important;
    }

    .vortex-confirm-actions {
      display: flex !important;
      gap: 10px !important;
      width: 100% !important;
    }

    .vortex-confirm-btn-cancel {
      flex: 1 !important;
      padding: 10px 16px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      background: #f1f5f9 !important;
      color: #475569 !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 10px !important;
      cursor: pointer !important;
      transition: all 0.15s ease !important;
    }
    .vortex-confirm-btn-cancel:hover {
      background: #e2e8f0 !important;
      color: #1e293b !important;
    }

    .vortex-confirm-btn-danger {
      flex: 1 !important;
      padding: 10px 16px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      background: #ef4444 !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 10px !important;
      cursor: pointer !important;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
      transition: all 0.15s ease !important;
    }
    .vortex-confirm-btn-danger:hover {
      background: #dc2626 !important;
      transform: translateY(-1px) !important;
    }

    .vortex-btn-delete {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
      background: #fef2f2 !important;
      color: #dc2626 !important;
      border: 1px solid #fca5a5 !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      padding: 4px 8px !important;
      border-radius: 8px !important;
      cursor: pointer !important;
      transition: all 0.15s ease !important;
      white-space: nowrap !important;
    }

    .vortex-btn-delete:hover {
      background: #dc2626 !important;
      color: #ffffff !important;
      border-color: #dc2626 !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
    }

    .vortex-content-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      box-sizing: border-box;
    }

    #vortexViewUsers,
    #vortexViewTrades,
    #vortexViewBroadcast,
    #vortexViewIps,
    #vortexViewRoles {
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .vortex-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      width: 100%;
    }

    .vortex-metric-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: all 0.2s ease;
    }

    .vortex-metric-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .vortex-metric-title {
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .vortex-metric-value {
      font-size: 24px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.1;
    }

    .vortex-metric-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      margin-top: 4px;
    }

    .badge-growth-green {
      color: #059669;
    }

    .badge-status-green {
      color: #059669;
    }

    .badge-status-amber {
      color: #d97706;
    }

    .vortex-filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      background: #ffffff;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
    }

    .vortex-filter-pills {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .vortex-filter-pill {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .vortex-filter-pill:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .vortex-filter-pill.active {
      background: #4f46e5;
      color: #ffffff;
      border-color: #4f46e5;
      box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
    }

    .vortex-filter-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .vortex-dropdown {
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #0f172a;
      outline: none;
      font-family: inherit;
      cursor: pointer;
    }

    .vortex-split-layout {
      display: block;
      width: 100%;
    }

    .vortex-table-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
    }

    .vortex-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 13px;
    }

    .vortex-table th {
      background: #f8fafc;
      padding: 12px 16px;
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      border-bottom: 1px solid #e2e8f0;
    }

    .vortex-th-sortable {
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .vortex-th-sortable:hover {
      background-color: #f1f5f9;
      color: #1e293b;
    }

    .vortex-th-sortable.sorted-active {
      background-color: #eef2ff !important;
      color: #4f46e5 !important;
    }

    .trade-sort-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 4px;
      font-size: 11px;
      color: #94a3b8;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .vortex-th-sortable:hover .trade-sort-icon {
      color: #64748b;
    }

    .vortex-th-sortable.sorted-active .trade-sort-icon {
      color: #4f46e5;
      background: #e0e7ff;
      font-weight: 900;
    }

    .vortex-table td {
      padding: 12px 16px;
      border-bottom: 1px solid #f1f5f9;
      color: #0f172a;
      vertical-align: middle;
    }

    .vortex-table tr:hover td {
      background: #f8fafc;
    }

    .vortex-table tr.selected td {
      background: #f5f3ff;
      border-color: #ede9fe;
    }

    .vortex-user-cell {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .vortex-table-avatar {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      object-fit: contain;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      image-rendering: pixelated;
    }

    .vortex-user-name {
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
    }

    .vortex-user-id {
      font-size: 11px;
      color: #64748b;
      font-family: monospace;
    }

    .vortex-email-box {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #475569;
      font-size: 12px;
    }

    .vortex-copy-btn {
      background: transparent;
      border: none;
      cursor: pointer;
      color: #94a3b8;
      padding: 2px;
      border-radius: 4px;
      display: flex;
      align-items: center;
    }

    .vortex-copy-btn:hover {
      color: #4f46e5;
    }

    .vortex-role-pill {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      background: #f1f5f9;
      color: #475569;
    }

    .vortex-role-admin {
      background: #faf5ff;
      color: #7e22ce;
      border: 1px solid #e9d5ff;
    }

    .vortex-role-verified {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .vortex-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 800;
    }

    .status-online {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .status-active {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .status-away {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .status-offline {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    .status-suspended {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .vortex-inspector-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: sticky;
      top: 0;
    }

    .vortex-inspector-profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f1f5f9;
    }

    .vortex-inspector-avatar-wrapper {
      position: relative;
      width: 72px;
      height: 72px;
    }

    .vortex-inspector-avatar {
      width: 72px;
      height: 72px;
      border-radius: 18px;
      object-fit: contain;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      image-rendering: pixelated;
    }

    .vortex-inspector-status-dot {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #10b981;
      border: 3px solid #ffffff;
    }

    .vortex-inspector-name {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.2;
    }

    .vortex-inspector-role {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    .vortex-inspector-badge-admin {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      background: #faf5ff;
      color: #7e22ce;
      border: 1px solid #e9d5ff;
      padding: 2px 8px;
      border-radius: 6px;
      margin-top: 4px;
      letter-spacing: 0.5px;
    }

    .vortex-progress-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .vortex-progress-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
    }

    .vortex-progress-bar {
      height: 8px;
      background: #f1f5f9;
      border-radius: 4px;
      overflow: hidden;
    }

    .vortex-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981, #059669);
      border-radius: 4px;
    }

    .vortex-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .vortex-stat-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .vortex-stat-label {
      font-size: 10px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
    }

    .vortex-stat-num {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
    }

    .vortex-inspector-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .vortex-action-row {
      display: flex;
      gap: 6px;
    }

    .vortex-action-btn-sm {
      flex: 1;
      padding: 8px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .vortex-action-btn-sm:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    .vortex-action-btn-sm.active-verify {
      background: #ecfdf5;
      color: #059669;
      border-color: #a7f3d0;
    }

    .vortex-action-btn-sm.active-ban {
      background: #fef2f2;
      color: #dc2626;
      border-color: #fca5a5;
    }

    .modal,
    #adminCartDetailModal,
    #adminPopupConfigModal,
    #welcomePromoModal,
    #adminCouponModal,
    #adminCreateUserModal,
    #adminAuditModal,
    #invoiceModal,
    #orderSuccessModal,
    #userProfileModal,
    #settingsModal,
    #authModal,
    #fixOtModal,
    #qrModal,
    #socialModal,
    #paypalModal,
    #cartModal {
      z-index: 100010 !important;
    }

    #vortexConfirmModal,
    #adminConfirmModalOverlay {
      z-index: 100025 !important;
    }

    .vortex-modal-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 24px;
      max-width: 480px;
      width: 95%;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      box-sizing: border-box;
    }

    #adminAuditModal .vortex-modal-box {
      max-width: 780px !important;
      width: 95vw !important;
      max-height: 88vh !important;
      overflow-y: auto !important;
    }

    .vortex-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .vortex-form-label {
      font-size: 11px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .vortex-form-input {
      width: 100%;
      padding: 10px 14px;
      font-size: 13px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      background: #ffffff;
      color: #0f172a;
      outline: none;
      font-family: inherit;
      transition: all 0.15s ease;
      box-sizing: border-box;
    }

    .vortex-form-input:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .vortex-metric-label {
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .vortex-metric-val {
      font-size: 24px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.1;
    }

    .vortex-metric-sub {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      margin-top: 4px;
    }

    .vortex-sub-green { color: #059669; }
    .vortex-sub-blue { color: #2563eb; }
    .vortex-sub-amber { color: #d97706; }

    .vortex-pill-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .vortex-select-control {
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #0f172a;
      outline: none;
      font-family: inherit;
      cursor: pointer;
    }

    .vortex-tool-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .vortex-records-count {
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
    }

    .vortex-table-responsive {
      width: 100%;
      overflow-x: auto;
    }

    .vortex-inspector-avatar-wrap {
      position: relative;
      width: 68px;
      height: 68px;
      margin: 0 auto;
    }

    .vortex-inspector-avatar-img {
      width: 68px;
      height: 68px;
      border-radius: 18px;
      object-fit: contain;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      image-rendering: pixelated;
    }

    .vortex-inspector-pill {
      font-size: 10px;
      font-weight: 800;
      background: #faf5ff;
      color: #7e22ce;
      border: 1px solid #e9d5ff;
      padding: 3px 10px;
      border-radius: 8px;
      display: inline-block;
      letter-spacing: 0.5px;
    }

    .vortex-inspector-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .vortex-inspector-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 800;
      color: #334155;
    }

    .vortex-inspector-tier-tag {
      font-size: 10px;
      font-weight: 800;
      color: #059669;
      background: #ecfdf5;
      padding: 1px 6px;
      border-radius: 6px;
    }

    .vortex-stats-duo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .vortex-stat-box-label {
      font-size: 10px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
    }

    .vortex-stat-box-val {
      font-size: 17px;
      font-weight: 900;
      color: #0f172a;
    }

    .vortex-btn-full-audit {
      width: 100%;
      background: #f8fafc;
      color: #334155;
      border: 1px solid #cbd5e1;
      font-size: 12px;
      font-weight: 800;
      padding: 10px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .vortex-btn-full-audit:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .vortex-quick-actions-row {
      display: flex;
      gap: 6px;
      width: 100%;
    }

    .vortex-btn-action-small {
      flex: 1;
      padding: 8px;
      font-size: 11px;
      font-weight: 800;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .vortex-btn-action-small:hover {
      background: #f8fafc;
    }

    .btn-action-ban {
      background: #fef2f2;
      color: #dc2626;
      border-color: #fecaca;
    }

    .btn-action-ban:hover {
      background: #fee2e2;
    }

    .btn-action-ip {
      background: #fff7ed;
      color: #ea580c;
      border-color: #fed7aa;
    }

    .btn-action-ip:hover {
      background: #ffedd5;
    }

    @media (max-width: 1080px) {
      .vortex-split-layout {
        grid-template-columns: 1fr;
      }
      .vortex-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .vortex-sidebar {
        display: none;
      }
      .vortex-metrics-grid {
        grid-template-columns: 1fr;
      }
      .catalog-analytics-grid {
        grid-template-columns: 1fr !important;
      }
      .vortex-workspace {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
      }
    }

    /* ========================================================
       CATALOG MODE SWITCHER (REGALOS GRATIS VS TIENDA VIP)
       ======================================================== */
    .catalog-mode-switcher {
      display: flex;
      align-items: center;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 5px;
      gap: 6px;
      margin-bottom: 8px;
      width: 100%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .mode-tab-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: transparent;
      color: #64748b;
      font-size: 13.5px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }

    .mode-tab-btn:hover {
      color: #0f172a;
      background: rgba(255, 255, 255, 0.7);
    }

    .mode-tab-btn.active {
      background: #ffffff;
      color: var(--primary, #4f46e5);
      border-color: #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .mode-tab-btn.active.shop-active {
      color: #d97706;
      border-color: #fde68a;
      background: #fffbeb;
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
    }

    .mode-tab-svg-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;
    }

    .mode-badge-count {
      font-size: 11px;
      font-weight: 900;
      background: #e2e8f0;
      color: #475569;
      padding: 2px 8px;
      border-radius: 20px;
      transition: all 0.2s;
    }

    .mode-tab-btn.active .mode-badge-count {
      background: #e0e7ff;
      color: var(--primary, #4f46e5);
    }

    .mode-tab-btn.active.shop-active .mode-badge-count {
      background: #fef3c7;
      color: #d97706;
    }

    /* ========================================================
       CARD TOP ICONS & BADGES (SHINY & ALPHA)
       ======================================================== */
    .card-top-icons {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      align-items: center;
      gap: 5px;
      z-index: 5;
    }

    .catalog-heart-btn {
      width: 26px;
      height: 26px;
      border: none;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #cbd5e1;
      padding: 0;
      transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: none;
      pointer-events: auto;
      outline: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .catalog-heart-btn:hover {
      background: transparent;
      color: #94a3b8;
      transform: scale(1.2);
    }

    .catalog-heart-btn.active {
      background: transparent;
      color: #ef4444;
      box-shadow: none;
    }

    .catalog-heart-btn.active svg {
      filter: drop-shadow(0 2px 6px rgba(239, 68, 68, 0.35));
    }

    .catalog-heart-btn.animate-pop svg {
      animation: heartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes heartPop {
      0% { transform: scale(0.6); }
      50% { transform: scale(1.35); }
      100% { transform: scale(1); }
    }

    .badge-icon-img {
      width: 22px !important;
      height: 22px !important;
      max-width: 22px !important;
      max-height: 22px !important;
      object-fit: contain !important;
      flex-shrink: 0;
      display: block !important;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
      pointer-events: none;
    }

    .badge-game-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 10px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
      text-transform: uppercase;
      z-index: 4;
    }

    .badge-claimed {
      position: absolute;
      top: 10px;
      left: 56px;
      font-size: 10px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
      z-index: 4;
    }

    .catalog-card {
      position: relative;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      overflow: hidden;
    }

    .catalog-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
      border-color: #cbd5e1;
    }

    .catalog-sprite {
      width: 100%;
      height: 125px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }

    .catalog-sprite img {
      max-width: 110px !important;
      max-height: 110px !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain;
      filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.12));
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .catalog-card:hover .catalog-sprite img {
      transform: scale(1.08);
    }

    /* ========================================================
       FOOTER DE LA TARJETA CON PRECIO CENTRADO Y BOTÓN EN DERECHA INFERIOR
       ======================================================== */
    .catalog-card-footer {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      margin-top: 5px;
    }

    .catalog-card-price {
      height: 26px;
      padding: 0 10px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 800;
      color: #b45309;
      background: #fffbeb;
      border: 1.5px solid #fde68a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      white-space: nowrap;
      transition: all 0.2s ease;
      box-sizing: border-box;
      z-index: 1;
    }

    .catalog-card-price.incart {
      background: #dc2626 !important;
      color: #ffffff !important;
      border: 1.5px solid #dc2626 !important;
      font-size: 11.5px !important;
      font-weight: 800 !important;
      padding: 0 8px !important;
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
    }

    .catalog-card-price.unlocked {
      background: #ecfdf5 !important;
      color: #059669 !important;
      border: 1.5px solid #a7f3d0 !important;
      font-size: 12px !important;
      font-weight: 800 !important;
    }

    .catalog-quick-add-btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 26px;
      height: 26px;
      min-width: 26px;
      border-radius: 8px;
      background: #0f172a;
      color: #ffffff;
      border: 1.5px solid #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(15, 23, 42, 0.15);
      transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
      box-sizing: border-box;
      padding: 0;
      z-index: 2;
    }

    .catalog-quick-add-btn:hover {
      background: #d97706;
      border-color: #d97706;
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
    }

    .catalog-quick-add-btn.in-cart {
      background: #dc2626;
      border-color: #dc2626;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
    }

    .catalog-quick-add-btn.in-cart:hover {
      background: #b91c1c;
      border-color: #b91c1c;
      transform: translateY(-50%) scale(1.1);
    }

    /* BOTÓN Y BADGES DE MÚLTIPLES VARIANTES EN CATÁLOGO */
    .catalog-variants-select-btn {
      height: 26px;
      padding: 0 10px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 800;
      color: #3b82f6;
      background: #eff6ff;
      border: 1.5px solid #bfdbfe;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-sizing: border-box;
      gap: 4px;
    }

    .catalog-variants-select-btn:hover {
      background: #3b82f6;
      color: #ffffff;
      border-color: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
    }

    .catalog-card-variants-tag {
      font-size: 10px;
      font-weight: 800;
      background: #f1f5f9;
      color: #475569;
      padding: 2px 6px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    /* ========================================================
       DETAIL VIEW CUSTOM MODERN DROPDOWNS & FIX OVERFLOW
       ======================================================== */
    #selectedPokemonContainer {
      position: relative;
      z-index: 50;
      overflow: visible !important;
    }

    #selectedPokemonContainer .card {
      overflow: visible !important;
    }

    .variant-selectors-container {
      position: relative;
      z-index: 40;
      overflow: visible !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    }

    #tradeFormCard {
      position: relative;
      z-index: 10;
    }

    #deliveryFlowSection {
      position: relative;
      z-index: 5;
    }

    .detail-custom-dropdown {
      position: relative;
      width: 100%;
      user-select: none;
    }

    .detail-custom-dropdown.open {
      z-index: 1050;
    }

    #detailGameDropdown.open {
      z-index: 1060;
    }

    #detailVariantDropdown.open {
      z-index: 1055;
    }

    .detail-dd-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #1e293b;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      box-sizing: border-box;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      gap: 8px;
      text-align: left;
    }

    .detail-dd-btn:hover,
    .detail-custom-dropdown.open .detail-dd-btn {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.15);
    }

    .detail-dd-btn.warning-border {
      border-color: #f59e0b !important;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
    }

    .detail-dd-arrow {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      stroke: #64748b;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .detail-custom-dropdown.open .detail-dd-arrow {
      transform: rotate(180deg);
    }

    .detail-dd-list {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
      z-index: 1100;
      max-height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
      animation: ddSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .detail-custom-dropdown.open .detail-dd-list {
      display: block;
    }

    /* Buscador integrado dentro del menú desplegable */
    .detail-dd-search-wrap {
      position: sticky;
      top: 0;
      background: #ffffff;
      padding: 8px 10px;
      border-bottom: 1px solid #e2e8f0;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 6px;
      border-radius: 14px 14px 0 0;
    }

    .detail-dd-search-box {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 10px;
      transition: all 0.2s ease;
    }

    .detail-dd-search-box:focus-within {
      background: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .detail-dd-search-icon {
      width: 14px;
      height: 14px;
      stroke: #64748b;
      flex-shrink: 0;
    }

    .detail-dd-search-input {
      border: none;
      background: transparent;
      outline: none;
      font-size: 12.5px;
      font-weight: 600;
      color: #1e293b;
      width: 100%;
      padding: 0;
      font-family: inherit;
    }

    .detail-dd-search-input::placeholder {
      color: #94a3b8;
      font-weight: 500;
    }

    .detail-dd-search-clear {
      background: #e2e8f0;
      border: none;
      border-radius: 50%;
      width: 17px;
      height: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
      padding: 0;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .detail-dd-search-clear:hover {
      background: #cbd5e1;
      color: #1e293b;
    }

    .detail-dd-items-scroll {
      max-height: 250px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    .detail-dd-empty-state {
      padding: 20px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #64748b;
      font-size: 12.5px;
      font-weight: 600;
      text-align: center;
    }

    .detail-dd-item {
      padding: 11px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.15s ease;
    }

    .detail-dd-item:not(:last-child) {
      border-bottom: 1px solid #f1f5f9;
    }

    .detail-dd-item:hover {
      background: #f8fafc;
      color: #2563eb;
    }

    .detail-dd-item.selected {
      background: #eff6ff;
      color: #1d4ed8;
      font-weight: 800;
    }

    /* Layout dos columnas: texto izquierda | badges+check derecha */
    .detail-dd-item-content {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
    }

    .detail-dd-item-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }

    /* Zona fija derecha: siempre ocupa el mismo espacio (40px) */
    .detail-dd-item-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      min-width: 40px;
      flex-shrink: 0;
    }

    .variant-selectors-container {
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    }

    .selector-shake-highlight {
      animation: shakeHighlight 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
      border-color: #f59e0b !important;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25) !important;
    }

    @keyframes shakeHighlight {
      10%, 90% { transform: translate3d(-1px, 0, 0); }
      20%, 80% { transform: translate3d(2px, 0, 0); }
      30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
      40%, 60% { transform: translate3d(3px, 0, 0); }
    }

    .variant-prompt-card {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
      border: 1.5px solid #fde68a;
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: left;
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.08);
      animation: fadeInPrompt 0.25s ease-out;
    }

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

    /* PÍLDORAS RÁPIDAS DE VARIANTES (QUICK CHIPS) */
    .quick-chips-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }

    .quick-variant-chip {
      padding: 6px 12px;
      border-radius: 10px;
      font-size: 11.5px;
      font-weight: 700;
      background: #ffffff;
      color: #475569;
      border: 1.5px solid #cbd5e1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    .quick-variant-chip:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
      transform: translateY(-1px);
    }

    .quick-variant-chip.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
    }

    /* ========================================================
       SHOP ACTION BUTTONS & DETAIL VIEW STYLES
       ======================================================== */
    .shop-action-buttons-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin-top: 4px;
    }

    .btn-shopify-cart {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 18px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #0f172a;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      user-select: none;
    }

    .btn-shopify-cart:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    }

    .btn-shopify-cart:active {
      transform: translateY(1px);
    }

    .btn-shopify-cart.in-cart {
      background: #ecfdf5;
      color: #059669;
      border-color: #a7f3d0;
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
    }

    .btn-shopify-cart.in-cart:hover {
      background: #d1fae5;
      border-color: #6ee7b7;
    }

    .btn-shopify-buy {
      flex: 1.2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      border-radius: 16px;
      font-size: 14.5px;
      font-weight: 900;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      border: none;
      background: linear-gradient(135deg, #0070ba 0%, #003087 100%);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(0, 112, 186, 0.35);
      user-select: none;
    }

    .btn-shopify-buy:hover {
      background: linear-gradient(135deg, #0079c1 0%, #002c7c 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 112, 186, 0.45);
    }

    .btn-shopify-buy:active {
      transform: translateY(1px);
      box-shadow: 0 2px 8px rgba(0, 112, 186, 0.3);
    }

    .btn-unlocked-claim {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      border: none;
      background: linear-gradient(135deg, #059669 0%, #10b981 100%);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
    }

    .btn-unlocked-claim:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
    }

    .btn-submit {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      border: none;
      background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
    }

    .btn-submit:hover {
      background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4);
    }

    .btn-submit:active {
      transform: translateY(1px);
    }

    .back-nav-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #0f172a;
      border-radius: 12px;
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .back-nav-btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    .showdown-toggle {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      color: #334155;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .showdown-toggle:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .qr-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      color: #334155;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .qr-icon-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    @media (max-width: 480px) {
      .shop-action-buttons-row {
        flex-direction: column;
        gap: 8px;
      }
      .btn-shopify-cart, .btn-shopify-buy {
        width: 100%;
        flex: unset;
      }
    }

    /* ========================================================
       CART BOTTOM DRAWER & SHOP CART ITEMS
       ======================================================== */
    /* ========================================================
       CART RESPONSIVE DRAWER (SLIDE-OVER DESKTOP / BOTTOM SHEET MOBILE)
       ======================================================== */
    .cart-drawer-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      z-index: 99999 !important;
      box-sizing: border-box !important;
    }

    @media (min-width: 769px) {
      .cart-drawer-modal {
        align-items: stretch !important;
        justify-content: flex-end !important;
        padding: 0 !important;
      }
      .cart-drawer-content {
        width: 100% !important;
        max-width: 480px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 24px 0 0 24px !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: 1.5px solid #e2e8f0 !important;
        margin: 0 0 0 auto !important;
        animation: drawerSlideRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 20px 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: #ffffff !important;
        box-shadow: -12px 0 45px rgba(0, 0, 0, 0.2) !important;
      }
      .drawer-drag-handle {
        display: none !important;
      }
    }

    @media (max-width: 768px) {
      .cart-drawer-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
      }
      .cart-drawer-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 28px 28px 0 0 !important;
        padding: 14px 16px 20px 16px !important;
        height: 92vh !important;
        max-height: 92vh !important;
        overflow: hidden !important;
        animation: drawerSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.25) !important;
      }
      .drawer-drag-handle {
        display: block !important;
        width: 44px;
        height: 5px;
        background: #cbd5e1;
        border-radius: 10px;
        margin: 0 auto 8px auto;
        cursor: grab;
      }
    }

    @keyframes drawerSlideRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes drawerSlideUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .cart-game-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      margin-bottom: 6px;
    }

    .cart-game-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 6px 12px;
      margin-bottom: 2px;
    }

    .cart-game-header-left {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 800;
      color: #1e293b;
    }

    .cart-game-header-left svg {
      color: #4f46e5;
      flex-shrink: 0;
    }

    .cart-game-count-badge {
      font-size: 10.5px;
      font-weight: 800;
      color: #4338ca;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      padding: 2px 7px;
      border-radius: 999px;
    }

    .cart-game-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .cart-item-card {
      overflow: hidden;
      background: #ffffff;
      border: 1px solid #dfe7f2;
      border-radius: 17px;
      box-shadow: 0 3px 12px rgba(15, 23, 42, 0.035);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .cart-item-card:hover,
    .cart-item-card.is-expanded {
      border-color: #c7d2fe;
      box-shadow: 0 7px 22px rgba(79, 70, 229, 0.09);
    }

    .cart-item-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      padding: 10px 11px 10px 12px;
    }

    .cart-item-main {
      appearance: none;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      padding: 0;
      margin: 0;
      min-width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: left;
      cursor: pointer;
      border-radius: 12px;
    }

    .cart-item-main:focus-visible {
      outline: 3px solid rgba(79, 70, 229, 0.22);
      outline-offset: 3px;
    }

    .cart-item-sprite {
      width: 62px !important;
      height: 62px !important;
      max-width: 62px !important;
      max-height: 62px !important;
      object-fit: contain !important;
      flex-shrink: 0 !important;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      padding: 3px;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
    }

    .cart-item-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .cart-item-name {
      font-size: 13.75px;
      font-weight: 850;
      color: #0f172a;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }

    .cart-item-variant {
      font-size: 11.5px;
      font-weight: 750;
      color: #475569;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cart-item-game {
      font-size: 10.5px;
      font-weight: 750;
      color: #4f46e5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cart-item-expand-icon {
      width: 25px;
      height: 25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 25px;
      color: #64748b;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
    }

    .cart-item-main[aria-expanded="true"] .cart-item-expand-icon {
      transform: rotate(180deg);
      color: #4338ca;
      background: #eef2ff;
    }

    .cart-item-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .cart-item-price {
      font-size: 13.5px;
      font-weight: 900;
      color: #d97706;
      white-space: nowrap;
    }

    .cart-item-remove-btn {
      background: #fee2e2;
      border: 1px solid #fecaca;
      color: #dc2626;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .cart-item-remove-btn:hover {
      background: #fca5a5;
      color: #991b1b;
      transform: scale(1.08);
    }

    .cart-item-details {
      border-top: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 12px 14px 14px;
      animation: cartDetailsIn 0.18s ease-out;
    }

    .cart-item-details[hidden] {
      display: none !important;
    }

    .cart-item-details-heading {
      margin-bottom: 8px;
      color: #475569;
      font-size: 10.5px;
      font-weight: 850;
      letter-spacing: 0.055em;
      text-transform: uppercase;
    }

    .cart-item-showdown,
    .cart-item-detail-fallback {
      margin: 0;
      padding: 11px 12px;
      max-height: 220px;
      overflow: auto;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      border: 1px solid #dbe4f0;
      border-radius: 12px;
      background: #ffffff;
      color: #334155;
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.55;
    }

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

    @media (max-width: 600px) {
      .cart-item-row {
        align-items: stretch;
        padding: 9px 9px 9px 10px;
      }

      .cart-item-main {
        gap: 9px;
      }

      .cart-item-sprite {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
      }

      .cart-item-name {
        font-size: 13px;
      }

      .cart-item-game,
      .cart-item-variant {
        max-width: min(44vw, 190px);
      }

      .cart-item-expand-icon {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
      }

      .cart-item-actions {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        gap: 5px;
      }

      .cart-item-price {
        font-size: 12.5px;
      }

      .cart-item-details {
        padding: 11px 10px 12px;
      }
    }

    .cart-summary-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cart-summary-box-unified {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .cart-summary-unified-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .cart-summary-unified-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cart-summary-unified-label {
      font-size: 15px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

    .cart-summary-count-badge {
      font-size: 12px;
      font-weight: 800;
      color: #4338ca;
      background: #e0e7ff;
      border: 1px solid #c7d2fe;
      padding: 2px 9px;
      border-radius: 999px;
    }

    .cart-summary-unified-price {
      font-size: 18px;
      font-weight: 900;
      color: #d97706;
      letter-spacing: -0.3px;
    }

    /* ========================================================
       DESGLOSE DE PAGO COMPACTO Y PROFESIONAL (CHECKOUT)
       ======================================================== */
    .checkout-breakdown-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      box-sizing: border-box;
      width: 100%;
    }

    .checkout-breakdown-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
      line-height: 1.3;
      color: #64748b;
    }

    .checkout-breakdown-label {
      color: #64748b;
      font-weight: 600;
      white-space: nowrap;
    }

    .checkout-breakdown-val {
      color: #334155;
      font-weight: 700;
      white-space: nowrap;
      text-align: right;
    }

    .checkout-breakdown-row.discount {
      color: #059669;
    }

    .checkout-breakdown-row.discount .checkout-breakdown-label,
    .checkout-breakdown-row.discount .checkout-breakdown-val {
      color: #059669;
      font-weight: 700;
    }

    .checkout-breakdown-row.tip {
      color: #0284c7;
    }

    .checkout-breakdown-row.tip .checkout-breakdown-label,
    .checkout-breakdown-row.tip .checkout-breakdown-val {
      color: #0284c7;
      font-weight: 700;
    }

    .checkout-breakdown-divider {
      height: 1px;
      background: #e2e8f0;
      margin: 3px 0 2px 0;
    }

    .checkout-breakdown-row.total {
      padding-top: 1px;
    }

    .checkout-breakdown-total-label {
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
    }

    .checkout-breakdown-total-val {
      font-size: 14.5px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

    .cart-summary-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
      color: #64748b;
      font-weight: 600;
    }

    /* ========================================================
       CUPONES DE DESCUENTO SHOPIFY-STYLE EN EL CARRITO
       ======================================================== */
    .cart-coupon-section {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .cart-coupon-input-wrap {
      display: flex;
      gap: 6px;
      align-items: center;
      width: 100%;
    }

    .cart-coupon-field {
      flex: 1;
      height: 36px;
      display: flex;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .cart-coupon-field:focus-within {
      border-color: #6366f1;
      background: #ffffff;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
    }

    .cart-coupon-input {
      width: 100%;
      border: none;
      background: transparent;
      padding: 6px 10px;
      font-size: 11.5px;
      font-weight: 700;
      color: #0f172a;
      text-transform: uppercase;
      outline: none;
      font-family: inherit;
    }

    .cart-coupon-input::placeholder {
      text-transform: none;
      color: #94a3b8;
      font-weight: 500;
      font-size: 11px;
    }

    .cart-coupon-btn {
      height: 36px;
      padding: 0 14px;
      background: #1e1b4b;
      color: #ffffff;
      border: none;
      border-radius: 10px;
      font-size: 11.5px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .cart-coupon-btn:hover {
      background: #312e81;
      transform: translateY(-1px);
    }

    .cart-active-coupon-tag {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ecfdf5;
      border: 1.5px solid #a7f3d0;
      padding: 8px 12px;
      border-radius: 12px;
      color: #065f46;
      animation: ddFadeIn 0.2s ease;
    }

    .cart-coupon-tag-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.5px;
    }

    .cart-coupon-tag-badge {
      font-size: 11px;
      font-weight: 800;
      background: #059669;
      color: #ffffff;
      padding: 2px 7px;
      border-radius: 6px;
    }

    .cart-coupon-remove-btn {
      background: rgba(6, 95, 70, 0.1);
      border: none;
      color: #065f46;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .cart-coupon-remove-btn:hover {
      background: #fee2e2;
      color: #dc2626;
    }

    .cart-coupon-feedback {
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 6px;
      border-radius: 6px;
      line-height: 1.3;
    }

    .cart-coupon-feedback.error {
      color: #dc2626;
      background: #fef2f2;
      border: 1px solid #fee2e2;
    }

    .cart-coupon-feedback.success {
      color: #059669;
      background: #f0fdf4;
      border: 1px solid #dcfce7;
    }

    .btn-cart-proceed-checkout {
      width: 100%;
      background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
      color: #ffffff;
      border: none;
      border-radius: 16px;
      padding: 14px 20px;
      font-size: 14.5px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 6px 20px -4px rgba(79, 70, 229, 0.45);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      font-family: inherit;
      position: relative;
      overflow: hidden;
    }

    .btn-cart-proceed-checkout:hover {
      background: linear-gradient(135deg, #4338ca 0%, #312e81 100%);
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -4px rgba(79, 70, 229, 0.55);
    }

    .btn-cart-proceed-checkout:active {
      transform: translateY(0) scale(0.99);
    }

    .btn-cart-proceed-arrow-wrap {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, background 0.2s ease;
      margin-left: 4px;
    }

    .btn-cart-proceed-checkout:hover .btn-cart-proceed-arrow-wrap {
      transform: translateX(4px);
      background: rgba(255, 255, 255, 0.28);
    }

    .cart-back-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #334155;
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.15s ease;
    }

    .cart-back-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    /* ESTILOS DEL PANEL ADMIN: CUPONES */
    .admin-coupon-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
    }

    .admin-coupon-card-item {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: all 0.2s ease;
      position: relative;
    }

    .admin-coupon-card-item:hover {
      border-color: #c7d2fe;
      box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.1);
    }

    .admin-coupon-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .admin-coupon-code-pill {
      font-family: monospace;
      font-size: 15px;
      font-weight: 900;
      background: #eef2ff;
      color: #4338ca;
      border: 1px solid #c7d2fe;
      padding: 4px 10px;
      border-radius: 8px;
      letter-spacing: 1px;
    }

    .admin-coupon-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 11.5px;
      color: #64748b;
    }

    .admin-coupon-meta-badge {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 700;
      color: #334155;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    /* ========================================================
       MODAL DE COMPRA / CHECKOUT VIP ULTRA MODERNO
       ======================================================== */
    /* ========================================================
       MODAL DE COMPRA / CHECKOUT VIP ULTRA MODERNO & ESPACIOSO
       ======================================================== */
    .checkout-modal-content {
      max-width: 470px !important;
      width: calc(100% - 24px) !important;
      max-height: calc(100vh - 36px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      border-radius: 24px !important;
      padding: 22px 22px 26px 22px !important;
      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
      background: #ffffff !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      text-align: left !important;
      gap: 14px !important;
      box-sizing: border-box !important;
      margin: auto !important;
    }

    .checkout-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 12px;
      border-bottom: 1px solid #f1f5f9;
    }

    .checkout-header-title-wrap {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .checkout-header-shield-icon {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: #eff6ff;
      border: 1px solid #dbeafe;
      color: #2563eb;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .checkout-header-title {
      font-size: 17.5px;
      font-weight: 900;
      color: #0f172a;
      margin: 0;
      letter-spacing: -0.3px;
    }

    .checkout-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
      padding: 0;
    }

    .checkout-close-btn:hover {
      background: #fee2e2;
      border-color: #fca5a5;
      color: #dc2626;
      transform: rotate(90deg);
    }

    .checkout-game-group {
      display: flex;
      flex-direction: column;
      gap: 7px;
      width: 100%;
      box-sizing: border-box;
    }

    .checkout-game-header {
      display: flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
      border: 1px solid #c7d2fe;
      padding: 5px 11px;
      border-radius: 11px;
      width: fit-content;
    }

    .checkout-game-header svg {
      color: #4f46e5;
      flex-shrink: 0;
    }

    .checkout-game-title {
      font-size: 11.5px;
      font-weight: 800;
      color: #3730a3;
      letter-spacing: -0.1px;
    }

    .checkout-product-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 18px;
      padding: 11px 14px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
      width: 100%;
      box-sizing: border-box;
    }

    .checkout-product-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    .checkout-sprite-wrap {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 2px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .checkout-sprite-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .checkout-product-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      overflow: hidden;
    }

    .checkout-product-name {
      font-size: 14.5px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.2;
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .checkout-product-variant {
      font-size: 11.5px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .checkout-item-price-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      border: 1.5px solid #fde68a;
      padding: 5px 10px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 900;
      color: #b45309;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .checkout-product-game {
      font-size: 11.5px;
      font-weight: 700;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .checkout-price-block {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      border: 1.5px solid #fde68a;
      padding: 6px 12px;
      border-radius: 13px;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.08);
      min-width: 85px;
      text-align: right;
    }

    .checkout-price-label {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #b45309;
    }

    .checkout-price-val {
      font-size: 17.5px;
      font-weight: 900;
      color: #b45309;
      line-height: 1.15;
    }

    /* BANNER ENTREGA INMEDIATA DESTACADO Y ELEGANTE */
    .shop-vip-banner-compact {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 2px 6px rgba(22, 101, 52, 0.04);
      width: 100%;
      box-sizing: border-box;
    }

    .shop-vip-banner-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: #dcfce7;
      color: #16a34a;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .shop-vip-banner-text-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .shop-vip-banner-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #15803d;
      line-height: 1.25;
    }

    .shop-vip-banner-desc {
      font-size: 11.5px;
      color: #166534;
      line-height: 1.35;
      font-weight: 600;
    }

    /* ACORDEÓN DE REQUISITOS / DISCLAIMER COLAPSABLE (ROBUSTO Y ELEGANTE) */
    .checkout-disclaimer-accordion {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      transition: all 0.25s ease;
      width: 100%;
      box-sizing: border-box;
    }

    .checkout-disclaimer-accordion:hover {
      border-color: #cbd5e1;
    }

    .checkout-disclaimer-accordion.open {
      border-color: #fde68a;
      background: #fffdf5;
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
    }

    .checkout-disclaimer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      box-sizing: border-box;
      cursor: pointer;
      user-select: none;
      gap: 8px;
    }

    .checkout-disclaimer-title-wrap {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 800;
      color: #334155;
      min-width: 0;
      flex: 1;
    }

    .checkout-disclaimer-title-wrap svg {
      flex-shrink: 0;
    }

    .checkout-disclaimer-title-wrap span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .checkout-disclaimer-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #e2e8f0;
      color: #334155;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .checkout-disclaimer-accordion.open .checkout-disclaimer-toggle-btn {
      background: #fef08a;
      color: #854d0e;
    }

    .disclaimer-arrow {
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      flex-shrink: 0;
    }

    .checkout-disclaimer-accordion.open .disclaimer-arrow {
      transform: rotate(180deg);
    }

    .checkout-disclaimer-content {
      padding: 10px 12px 12px 12px;
      border-top: 1px dashed #fde68a;
      background: rgba(255, 255, 255, 0.7);
      text-align: left !important;
      animation: disclaimerFadeIn 0.22s ease-out;
    }

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

    .checkout-guide-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: left !important;
    }

    .checkout-guide-item {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      font-size: 11.5px;
      color: #475569;
      line-height: 1.35;
      text-align: left !important;
    }

    .checkout-guide-item span {
      text-align: left !important;
      flex: 1;
      display: inline-block;
    }

    .checkout-guide-item svg {
      color: #16a34a;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .checkout-guide-item b {
      color: #0f172a;
      font-weight: 800;
    }

    /* CONTENEDORES PARA EL DRAWER EN 2 PASOS */
    .cart-drawer-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }

    .cart-drawer-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 10px 2px 32px 2px;
    }

    .cart-drawer-footer {
      margin-top: auto;
      border-top: 1.5px solid #f1f5f9;
      padding-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #ffffff;
      flex-shrink: 0;
      z-index: 10;
    }

    .shop-price-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      font-weight: 900;
      border-radius: 10px;
      padding: 4px 8px;
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
    }

    .shop-cart-bar {
      position: fixed;
      bottom: 74px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 480px;
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
      color: #ffffff;
      border-radius: 20px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 10px 30px rgba(30, 27, 75, 0.4);
      z-index: 998;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .shop-cart-bar:hover {
      transform: translateX(-50%) translateY(-3px);
      box-shadow: 0 14px 36px rgba(30, 27, 75, 0.5);
    }

    .shop-cart-bar-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .shop-cart-bar-badge {
      background: #f59e0b;
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      padding: 2px 8px;
      border-radius: 10px;
    }

    .shop-cart-bar-total {
      font-size: 15px;
      font-weight: 900;
      color: #fde047;
    }

    .shop-cart-bar-btn {
      background: #ffffff;
      color: #1e1b4b;
      font-size: 13px;
      font-weight: 900;
      padding: 8px 16px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
    }

    /* ========================================================
       ADMIN MARQUEE / TEXTO DESLIZANTE CONFIG PANEL
       ======================================================== */
    .admin-marquee-wrap {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      box-sizing: border-box;
    }

    .admin-marquee-preview-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 18px 22px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .admin-marquee-preview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }

    .admin-marquee-preview-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
    }

    .admin-marquee-stage {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .admin-marquee-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 22px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .admin-marquee-section-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .admin-marquee-section-title {
      margin: 0;
      font-size: 15px;
      font-weight: 900;
      color: #0f172a;
    }

    .admin-marquee-section-sub {
      margin: 2px 0 0 0;
      font-size: 12px;
      color: #64748b;
    }

    .admin-marquee-icon-badge {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .admin-marquee-icon-badge.emerald {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .admin-marquee-icon-badge.amber {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .admin-marquee-icon-badge.rose {
      background: #fff1f2;
      color: #e11d48;
      border: 1px solid #fecdd3;
    }

    /* iOS Switch */
    .admin-ios-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }

    .admin-ios-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .admin-ios-slider {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 26px;
      background-color: #cbd5e1;
      border-radius: 34px;
      transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .admin-ios-slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .admin-ios-switch input:checked + .admin-ios-slider {
      background-color: #10b981;
    }

    .admin-ios-switch input:checked + .admin-ios-slider:before {
      transform: translateX(20px);
    }

    /* Enhanced Inputs & Field Groups */
    .admin-field-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .admin-field-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }

    .admin-field-label {
      font-size: 13px;
      font-weight: 800;
      color: #334155;
    }

    .admin-field-hint {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.4;
    }

    .admin-quick-chips {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .admin-quick-chip {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #475569;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .admin-quick-chip:hover {
      background: #e2e8f0;
      color: #0f172a;
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }

    .admin-textarea-enhanced {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 14px;
      padding: 12px 14px;
      font-size: 13px;
      font-family: inherit;
      color: #0f172a;
      outline: none;
      resize: vertical;
      box-sizing: border-box;
      transition: all 0.15s ease;
    }

    .admin-textarea-enhanced:focus {
      background: #ffffff;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .admin-input-enhanced {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 13px;
      font-family: inherit;
      color: #0f172a;
      outline: none;
      box-sizing: border-box;
      transition: all 0.15s ease;
    }

    .admin-input-enhanced:focus {
      background: #ffffff;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    /* Theme Grid & Cards */
    .admin-theme-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }

    .admin-theme-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .admin-theme-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    }

    .admin-theme-card.active {
      border-color: #6366f1;
      background: #f5f3ff;
      box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
    }

    .admin-theme-card-preview {
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    .admin-theme-card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
    }

    .theme-check-icon {
      font-weight: 900;
      color: #6366f1;
      font-size: 14px;
    }

    /* Color Pickers */
    .admin-color-picker-box {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .admin-color-swatch-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .admin-color-input {
      width: 40px;
      height: 38px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      cursor: pointer;
      padding: 2px;
      background: #ffffff;
      flex-shrink: 0;
    }

    .admin-color-hex-text {
      flex: 1;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12.5px;
      font-weight: 700;
      font-family: monospace;
      color: #0f172a;
      outline: none;
    }

    /* Speed Grid & Cards */
    .admin-speed-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 12px;
    }

    .admin-speed-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 14px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 3px;
      transition: all 0.2s ease;
    }

    .admin-speed-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-2px);
    }

    .admin-speed-card.active {
      border-color: #6366f1;
      background: #f5f3ff;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    }

    .admin-speed-title {
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
    }

    .admin-speed-desc {
      font-size: 11px;
      color: #64748b;
    }

    /* Footer Action Bar */
    .admin-footer-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      border-top: 1px solid #e2e8f0;
      padding-top: 16px;
      margin-top: 4px;
    }

    /* ========================================================
       ADMIN VIP SALES & ORDERS ADVANCED STYLES
       ======================================================== */
    .admin-sales-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 14px;
      width: 100%;
    }

    .admin-sales-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .admin-sales-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
      border-color: #cbd5e1;
    }

    .admin-sales-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .admin-sales-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
    }

    .admin-sales-card-icon.emerald {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .admin-sales-card-icon.purple {
      background: #f5f3ff;
      color: #7c3aed;
      border: 1px solid #ddd6fe;
    }

    .admin-sales-card-icon.amber {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .admin-sales-card-icon.blue {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .admin-sales-card-label {
      font-size: 12px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .admin-sales-card-val {
      font-size: 24px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.1;
      letter-spacing: -0.5px;
    }

    .admin-sales-card-sub {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 600;
    }

    .badge-order-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }

    .badge-order-status.pending {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .badge-order-status.claimed {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .badge-order-status.refunded {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .btn-invoice-view {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 10px;
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #cbd5e1;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .btn-invoice-view:hover {
      background: #e2e8f0;
      color: #0f172a;
      border-color: #94a3b8;
      transform: translateY(-1px);
    }

    /* ========================================================
       MODAL DE RECIBO / FACTURA OFICIAL VIP (ENHANCED DESIGN)
       ======================================================== */
    .invoice-modal-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      padding: 24px 26px;
      max-width: 480px;
      width: 95%;
      box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      box-sizing: border-box;
      animation: ddFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      text-align: left;
      align-items: stretch;
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    #invoiceModal {
      align-items: flex-start;
      padding-block: 16px;
    }

    #invoiceModal .invoice-modal-box { margin-block: auto; }

    .invoice-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 12px;
    }

    .invoice-modal-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .invoice-modal-logo {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: #eef2ff;
      border: 1px solid #e0e7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .invoice-modal-title {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
      margin: 0;
      letter-spacing: -0.2px;
    }

    .invoice-modal-sub {
      font-size: 11.5px;
      color: #64748b;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .invoice-info-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr 1.1fr;
      gap: 8px;
    }

    .invoice-info-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .invoice-info-lbl {
      font-size: 10px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .invoice-info-val {
      font-size: 12.5px;
      font-weight: 900;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .invoice-status-pill {
      font-size: 10.5px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      width: fit-content;
      margin-top: 1px;
    }

    .invoice-status-pill.claimed {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .invoice-status-pill.pending {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fef3c7;
    }

    .invoice-customer-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .invoice-customer-avatar {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      background: #e2e8f0;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .invoice-paypal-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #edf2f7;
      padding-top: 6px;
      font-size: 11.5px;
    }

    .invoice-paypal-code {
      font-family: monospace;
      font-weight: 800;
      color: #2563eb;
      background: #eff6ff;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #bfdbfe;
      cursor: pointer;
      transition: all 0.15s ease;
      font-size: 11px;
    }

    .invoice-paypal-code:hover {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .invoice-items-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .invoice-items-header {
      font-size: 10.5px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .invoice-item-row {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      border: 1.5px solid #f1f5f9;
      border-radius: 14px;
      padding: 10px 12px;
    }

    .invoice-item-sprite {
      width: 42px;
      height: 42px;
      object-fit: contain;
      flex-shrink: 0;
      background: #f8fafc;
      border-radius: 8px;
      padding: 2px;
      border: 1px solid #e2e8f0;
    }

    .invoice-item-info {
      flex: 1;
      min-width: 0;
    }

    .invoice-item-name-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .invoice-item-name {
      font-size: 13.5px;
      font-weight: 900;
      color: #0f172a;
    }

    .invoice-item-sub {
      font-size: 10.5px;
      color: #64748b;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .invoice-item-price {
      font-size: 14px;
      font-weight: 900;
      color: #059669;
      flex-shrink: 0;
    }

    /* Estado único de pedidos pagados pendientes de entrega */
    .catalog-card.pending-delivery {
      border: 2px solid #86efac !important;
      background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 58%) !important;
      box-shadow: 0 8px 22px rgba(16, 185, 129, 0.12) !important;
    }

    .catalog-card.pending-delivery .catalog-sprite img {
      filter: drop-shadow(0 8px 12px rgba(16, 185, 129, 0.18));
    }

    .catalog-receive-btn,
    .invoice-claim-btn {
      border: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      font-family: inherit;
      font-size: 11px;
      font-weight: 900;
      padding: 7px 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      box-shadow: 0 5px 12px rgba(5, 150, 105, 0.22);
      transition: transform .16s ease, box-shadow .16s ease;
    }

    .catalog-receive-btn { width: 100%; }
    .invoice-claim-btn { flex: 1.25; padding: 11px 14px; font-size: 12.5px; }
    .catalog-receive-btn:hover,
    .invoice-claim-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(5, 150, 105, 0.28); }

    .purchase-selection-line {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #64748b;
      font-size: 11px;
      line-height: 1.35;
    }

    .purchase-selection-line strong { color: #334155; }

    .profile-purchase-card:has(.badge-order-status.pending) {
      border-color: #a7f3d0;
      background: linear-gradient(135deg, #f0fdf4, #ffffff 66%);
    }

    .profile-purchase-card .history-poke-avatar-wrap {
      width: 58px;
      height: 58px;
      background: #ffffff;
    }

    .profile-purchase-card .history-poke-avatar-img {
      width: 52px;
      height: 52px;
      image-rendering: auto;
    }

    .invoice-item-row {
      padding: 14px !important;
      border-color: #dbeafe !important;
      background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
    }

    .invoice-item-sprite {
      width: 72px !important;
      height: 72px !important;
      border-radius: 16px !important;
      padding: 6px !important;
      background: #ffffff !important;
    }

    .invoice-item-name { font-size: 16px !important; }
    .invoice-item-sub { font-size: 11.5px !important; margin-top: 5px !important; }

    @media (max-width: 640px) {
      #invoiceModal { padding: 10px; }
      .invoice-modal-box {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 18px 16px;
        border-radius: 20px;
        gap: 11px;
      }
      .invoice-footer-actions { flex-wrap: wrap; }
      .invoice-claim-btn { flex-basis: 100%; }
      .invoice-item-row { align-items: center !important; gap: 10px !important; }
      .invoice-item-sprite { width: 54px !important; height: 54px !important; }
      .invoice-item-row { padding: 10px !important; }
      .invoice-item-name { font-size: 14px !important; }
      .invoice-item-price { font-size: 12px !important; }
      .profile-purchase-card .history-card-left { align-items: flex-start !important; }
      .purchase-card-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
      .purchase-card-actions button { justify-content: center; }
    }

    .invoice-breakdown-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .invoice-breakdown-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #64748b;
      font-weight: 700;
    }

    .invoice-breakdown-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      font-weight: 900;
      color: #0f172a;
      border-top: 1px dashed #cbd5e1;
      padding-top: 8px;
      margin-top: 2px;
    }

    .invoice-footer-actions {
      display: flex;
      gap: 10px;
      margin-top: 2px;
    }

    .order-pokemon-thumb {
      width: 36px;
      height: 36px;
      object-fit: contain;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 2px;
      flex-shrink: 0;
    }

    .order-avatar-mini {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      object-fit: contain;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      flex-shrink: 0;
    }

    /* ========================================================
       SISTEMA DE PROPINAS / ADD TIP (ESTILO SHOPIFY CHECKOUT)
       ======================================================== */
    .tip-section-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      width: 100%;
      box-sizing: border-box;
      transition: all 0.2s ease;
    }

    .tip-section-header {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      user-select: none;
    }

    .tip-section-header input[type="checkbox"] {
      width: 14px;
      height: 14px;
      accent-color: #4f46e5;
      cursor: pointer;
    }

    .tip-controls-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .tip-options-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      width: 100%;
      box-sizing: border-box;
    }

    .tip-option-btn {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 9px;
      padding: 5px 3px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      font-family: inherit;
      width: 100%;
      box-sizing: border-box;
    }

    .tip-option-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .tip-option-btn.active {
      background: #eef2ff;
      border-color: #6366f1;
      box-shadow: 0 0 0 1.5px rgba(99, 102, 241, 0.25);
    }

    .tip-option-pct {
      font-size: 11.5px;
      font-weight: 800;
      color: #0f172a;
    }

    .tip-option-btn.active .tip-option-pct {
      color: #4338ca;
    }

    .tip-option-val {
      font-size: 9.5px;
      font-weight: 700;
      color: #64748b;
      margin-top: 1px;
    }

    .tip-custom-row {
      display: flex;
      align-items: center;
      gap: 4px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 9px;
      padding: 2px 4px;
      width: 100%;
      height: 32px;
      box-sizing: border-box;
    }

    .tip-custom-input-wrap {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      gap: 2px;
      padding-left: 4px;
    }

    .tip-currency-symbol {
      font-size: 11.5px;
      font-weight: 800;
      color: #64748b;
    }

    .tip-custom-input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      padding: 4px 2px;
      font-size: 11.5px;
      font-weight: 700;
      color: #0f172a;
      outline: none;
      font-family: inherit;
    }

    .tip-custom-input::placeholder {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 500;
    }

    .tip-stepper-btn {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: #e2e8f0;
      border: none;
      color: #334155;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .tip-stepper-btn:hover {
      background: #cbd5e1;
      color: #0f172a;
    }

    .tip-apply-btn {
      background: #1e1b4b;
      color: #ffffff;
      border: none;
      padding: 0 10px;
      height: 24px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .tip-apply-btn:hover {
      background: #312e81;
    }

    .tip-appreciate-text {
      font-size: 10.5px;
      color: #64748b;
      font-weight: 500;
      text-align: center;
      margin-top: 1px;
    }


    .checkout-paypal-container {
      width: 100%;
      min-height: 110px;
      box-sizing: border-box;
      margin-top: 2px;
    }

    /* ========================================================
       SECCIÓN CÓMO FUNCIONA LA ENTREGA (HOW DELIVERY WORKS) - MODO CLARO
       ======================================================== */
    .delivery-flow-container {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      padding: 24px 20px;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    }

    .delivery-flow-header {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
      z-index: 2;
    }

    .delivery-flow-title {
      font-size: 20px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.4px;
      margin: 0;
    }

    .delivery-flow-subtitle {
      font-size: 13px;
      color: #64748b;
      max-width: 540px;
      line-height: 1.45;
      margin: 0;
      font-weight: 500;
    }

    .delivery-flow-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      position: relative;
      z-index: 2;
    }

    @media (max-width: 768px) {
      .delivery-flow-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
    }

    @media (max-width: 480px) {
      .delivery-flow-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    .delivery-flow-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      transition: all 0.2s ease;
      position: relative;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    .delivery-flow-card:hover {
      background: #ffffff;
      border-color: #6366f1;
      transform: translateY(-2px);
      box-shadow: 0 10px 22px -4px rgba(99, 102, 241, 0.12);
    }

    .delivery-flow-num {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
      flex-shrink: 0;
    }

    .delivery-flow-step-name {
      font-size: 13.5px;
      font-weight: 900;
      color: #0f172a;
    }

    .delivery-flow-step-desc {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.4;
      font-weight: 500;
    }

    /* ========================================================
       SELECTOR DE IDIOMA BILINGÜE [ ES | EN ]
       ======================================================== */
    .lang-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(241, 245, 249, 0.85);
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 4px 8px;
      cursor: pointer;
      font-size: 11.5px;
      font-weight: 800;
      color: #334155;
      transition: all 0.15s ease;
      user-select: none;
    }

    .lang-toggle-btn:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }

    .lang-pill-item {
      padding: 2px 5px;
      border-radius: 6px;
      transition: all 0.15s ease;
    }

    .lang-pill-item.active {
      background: #1e1b4b;
      color: #ffffff;
    }

    /* ========================================================
       BOTÓN Y DRAWER DEL MENÚ HAMBURGUESA
       ======================================================== */
    .burger-menu-btn {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1px solid var(--card-border);
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      padding: 0;
      flex-shrink: 0;
    }

    .burger-menu-btn:hover {
      background: #e2e8f0;
      color: var(--primary);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .burger-menu-btn:active {
      transform: scale(0.95);
    }

    .burger-drawer-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      z-index: 99999 !important;
      box-sizing: border-box !important;
    }

    @media (min-width: 769px) {
      .burger-drawer-modal {
        align-items: stretch !important;
        justify-content: flex-end !important;
        padding: 0 !important;
      }
      .burger-drawer-content {
        width: 100% !important;
        max-width: 370px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 24px 0 0 24px !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: 1.5px solid #e2e8f0 !important;
        margin: 0 0 0 auto !important;
        animation: drawerSlideRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 22px 20px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        box-shadow: -12px 0 45px rgba(0, 0, 0, 0.18) !important;
      }
    }

    @media (max-width: 768px) {
      .burger-drawer-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
      }
      .burger-drawer-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 28px 28px 0 0 !important;
        padding: 16px 18px 28px 18px !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        animation: drawerSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.22) !important;
      }
    }

    .burger-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 12px;
      border-bottom: 1px solid #f1f5f9;
    }

    .burger-drawer-title {
      font-size: 18px;
      font-weight: 900;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.3px;
    }

    .burger-user-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
      border: 1px solid #e0e7ff;
    }

    .burger-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .burger-user-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      object-fit: contain;
      image-rendering: pixelated;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      padding: 2px;
      flex-shrink: 0;
    }

    .burger-user-nick {
      font-weight: 800;
      font-size: 14px;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .burger-user-sub {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .burger-menu-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .burger-menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 14px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      color: #1e293b;
      font-weight: 700;
      font-size: 13.5px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
      width: 100%;
      text-align: left;
      box-sizing: border-box;
    }

    .burger-menu-item:hover {
      background: #eef2ff;
      border-color: #c7d2fe;
      color: #4338ca;
      transform: translateX(3px);
    }

    .burger-menu-item:active {
      transform: scale(0.98);
    }

    .burger-item-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .burger-item-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #4f46e5;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .burger-social-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 4px;
    }

    .burger-social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 12.5px;
      text-decoration: none;
      transition: all 0.18s ease;
      cursor: pointer;
      box-sizing: border-box;
    }

    .burger-social-btn.discord {
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      color: #5865f2;
    }

    .burger-social-btn.discord:hover {
      background: #5865f2;
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(88, 101, 242, 0.25);
    }

    .burger-social-btn.youtube {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
    }

    .burger-social-btn.youtube:hover {
      background: #dc2626;
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    }

    /* ========================================================
       PAGINACIÓN DEL CATÁLOGO (20 POKÉMON POR PÁGINA)
       ======================================================== */
    .catalog-pagination-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      margin-bottom: 12px;
      width: 100%;
    }

    .catalog-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .pagination-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 12.5px;
      font-weight: 800;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      color: #334155;
      cursor: pointer;
      transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      user-select: none;
    }

    .pagination-btn:hover:not(:disabled) {
      background: #eef2ff;
      border-color: #c7d2fe;
      color: var(--primary);
      transform: translateY(-1px);
    }

    .pagination-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }

    .pagination-page-btn {
      min-width: 36px;
      height: 36px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      color: #334155;
      cursor: pointer;
      transition: all 0.18s ease;
      padding: 0 6px;
      user-select: none;
    }

    .pagination-page-btn:hover:not(.active) {
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: var(--primary);
      transform: translateY(-1px);
    }

    .pagination-page-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
    }

    .pagination-ellipsis {
      padding: 0 4px;
      color: #94a3b8;
      font-weight: 800;
      font-size: 14px;
    }

    .pagination-info {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    /* =========================================================================
       SYSBOT LIVE TRADE ACTIVITY TERMINAL & GLOBAL APPLICATION LOCK
       ========================================================================= */
    body.trade-locked {
      overflow: hidden !important;
    }

    body.trade-locked #onlineContainer,
    body.trade-locked header,
    body.trade-locked .sidebar,
    body.trade-locked .navbar-brand {
      pointer-events: none !important;
      user-select: none !important;
    }

    .trade-hud-overlay {
      position: fixed !important;
      inset: 0 !important;
      z-index: 99999 !important;
      background:
        radial-gradient(circle at 18% 12%, rgba(139, 92, 246, 0.12), transparent 32%),
        radial-gradient(circle at 84% 88%, rgba(16, 185, 129, 0.10), transparent 34%),
        rgba(241, 245, 249, 0.88) !important;
      backdrop-filter: blur(14px) saturate(115%) !important;
      -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .trade-hud-modal {
      background: rgba(255, 255, 255, 0.98) !important;
      border: 1px solid rgba(203, 213, 225, 0.82) !important;
      border-radius: 28px !important;
      box-shadow: 0 28px 80px -28px rgba(51, 65, 85, 0.30), 0 8px 24px -14px rgba(99, 102, 241, 0.16) !important;
      max-width: 510px !important;
      width: 100% !important;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 24px !important;
      position: relative;
      animation: tradeHudPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      max-height: 92vh;
      overflow-y: auto;
    }

    @keyframes tradeHudPop {
      0% { opacity: 0; transform: scale(0.94) translateY(12px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    .trade-hud-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 0;
      padding-bottom: 2px;
    }

    .trade-hud-type-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .trade-hud-type-badge.gift { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
    .trade-hud-type-badge.shop { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
    .trade-hud-type-badge.fixot { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }

    .trade-hud-pulse-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #059669;
      background: #ecfdf5;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid #a7f3d0;
    }

    .trade-hud-pulse-dot {
      width: 7px;
      height: 7px;
      background: #10b981;
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      animation: tradePulse 1.8s infinite;
    }

    @keyframes tradePulse {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
      70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    .trade-hud-target-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 13px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .trade-hud-target-img {
      width: 52px;
      height: 52px;
      object-fit: contain;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 2px;
    }

    .trade-hud-target-info {
      flex: 1;
      min-width: 0;
    }

    .trade-hud-target-title {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }

    .trade-hud-target-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #64748b;
      font-weight: 700;
    }

    .trade-hud-variant-label {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      margin-top: 6px;
      padding: 4px 8px;
      border-radius: 8px;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      color: #4338ca;
      font-size: 10.5px;
      font-weight: 800;
      line-height: 1.3;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .trade-hud-req-id {
      background: #e2e8f0;
      color: #334155;
      padding: 2px 6px;
      border-radius: 6px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 10.5px;
    }

    /* CÓDIGO PRINCIPAL: tipografía limpia, sin tarjeta oscura */
    .trade-hud-code-card {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 8px 12px;
      color: #0f172a;
      text-align: center;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .trade-hud-code-card::after {
      display: none;
    }

    .trade-hud-code-label {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #64748b;
    }

    .trade-hud-code-number-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .trade-hud-code-number {
      font-size: 36px;
      font-weight: 900;
      letter-spacing: 5px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: #312e81;
      text-shadow: none;
      user-select: all;
    }

    .trade-hud-copy-btn {
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: all 0.15s ease;
      align-self: center;
    }

    .trade-hud-copy-btn:hover {
      background: rgba(255, 255, 255, 0.25);
      transform: translateY(-1px);
    }

    .trade-hud-code-help {
      font-size: 11px;
      color: #a5b4fc;
      line-height: 1.3;
    }

    /* FEED DE MENSAJES EN TEMA CLARO */
    .trade-hud-console-card {
      background: #f8fafc;
      border-radius: 18px;
      border: 1px solid #e2e8f0;
      padding: 13px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .trade-hud-console-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #475569;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 8px;
    }

    .trade-hud-messages-box {
      max-height: 150px;
      min-height: 100px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-right: 4px;
      font-family: inherit;
      font-size: 12.5px;
      line-height: 1.5;
    }

    .trade-hud-messages-box::-webkit-scrollbar {
      width: 4px;
    }
    .trade-hud-messages-box::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
    }

    .trade-hud-msg-entry {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      animation: msgFadeIn 0.25s ease;
      color: #334155;
      padding: 3px 0;
    }

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

    .trade-hud-msg-time {
      color: #94a3b8;
      font-size: 10px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .trade-hud-msg-bot-tag {
      color: #6d28d9;
      font-weight: 800;
      flex-shrink: 0;
    }

    .trade-hud-msg-text {
      color: #334155;
      word-break: break-word;
    }

    .trade-hud-msg-text.searching {
      color: #047857;
      font-weight: 800;
    }

    .trade-hud-msg-text.completed {
      color: #059669;
      font-weight: 800;
    }

    .trade-hud-msg-text.cancelled,
    .trade-hud-msg-text.rejected {
      color: #dc2626;
      font-weight: 800;
    }

    /* BOTONES DE ACCIÓN DEL MODAL */
    .trade-hud-action-box {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .btn-hud-progress {
      width: 100%;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 12px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 800;
      cursor: not-allowed;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      user-select: none;
    }

    .btn-hud-complete {
      width: 100%;
      background: linear-gradient(135deg, #059669, #10b981) !important;
      border: none !important;
      color: #ffffff !important;
      padding: 14px 18px !important;
      border-radius: 14px !important;
      font-size: 14px !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35) !important;
      transition: all 0.18s ease !important;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-hud-complete:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(16, 185, 129, 0.45) !important;
    }

    .btn-hud-cancel {
      width: 100%;
      background: #64748b !important;
      border: none !important;
      color: #ffffff !important;
      padding: 12px 18px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .trade-hud-modal .instructions-box {
      background: #ffffff !important;
      color: #334155 !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 8px 24px -22px rgba(15, 23, 42, 0.45);
    }

    @media (max-width: 600px) {
      .trade-hud-overlay {
        padding: 8px;
        align-items: center;
      }

      .trade-hud-modal {
        max-height: 96dvh;
        border-radius: 22px !important;
        padding: 17px 16px !important;
        gap: 12px;
      }

      .trade-hud-topbar {
        align-items: flex-start !important;
      }

      .trade-hud-pulse-wrapper {
        max-width: 260px;
        line-height: 1.25;
      }

      .trade-hud-target-card {
        padding: 10px 12px;
      }

      .trade-hud-target-img {
        width: 48px;
        height: 48px;
      }

      .trade-hud-code-card {
        padding: 5px 8px !important;
      }

      .trade-hud-code-number {
        font-size: 32px;
        letter-spacing: 4px;
      }

      .trade-hud-messages-box {
        min-height: 88px;
        max-height: 125px;
      }
    }

    /* ========================================================================== */
    /* BARRA DINÁMICA DE PROGRESO DE OFERTAS EN EL CARRITO (MINIMALISTA Y PRO) */
    /* ========================================================================== */
    .cart-progress-bar-wrap {
      background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
      border: 1px solid #d1fae5;
      border-radius: 14px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 6px;
      box-shadow: 0 1px 4px rgba(16, 185, 129, 0.05);
      transition: all 0.25s ease;
      box-sizing: border-box;
      width: 100%;
    }

    .cart-progress-bar-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .cart-progress-msg-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 1;
    }

    .cart-progress-icon {
      font-size: 14px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .cart-progress-text {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cart-progress-text strong {
      color: #059669;
      font-weight: 900;
    }

    .cart-progress-badge {
      font-size: 10.5px;
      font-weight: 900;
      padding: 2.5px 8px;
      border-radius: 999px;
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: 0 1px 2px rgba(5, 150, 105, 0.08);
      letter-spacing: 0.1px;
    }

    .cart-progress-bar-track {
      width: 100%;
      height: 11px;
      background: #e2e8f0;
      border-radius: 999px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    .cart-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #6366f1 0%, #4f46e5 45%, #10b981 100%);
      border-radius: 999px;
      transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
    }

    .cart-progress-bar-fill::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      animation: cartShimmer 2s infinite linear;
      transform: translateX(-100%);
    }

    @keyframes cartShimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .cart-progress-bar-fill.complete {
      background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    }

    .cart-volume-discount-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #059669;
      font-weight: 800;
      font-size: 12.5px;
      padding: 4px 0;
    }

    /* ========================================================================== */
    /* BANNER PRINCIPAL DE OFERTAS POR VOLUMEN (UBICACIÓN DEL SLIDER EN TIENDA) */
    /* ========================================================================== */
    .shop-hero-top-banner {
      width: 100%;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 45%, #6d28d9 100%);
      box-shadow: 0 8px 26px rgba(67, 56, 202, 0.32), 0 3px 10px rgba(29, 78, 216, 0.2);
      border: 1.5px solid rgba(255, 255, 255, 0.28);
      color: #ffffff;
      box-sizing: border-box;
      animation: bannerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .shop-hero-bg-rays {
      position: absolute;
      top: -50%;
      left: -20%;
      width: 140%;
      height: 200%;
      background: radial-gradient(ellipse at 80% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(253, 224, 71, 0.18) 35%, transparent 70%);
      pointer-events: none;
      z-index: 1;
    }

    .shop-hero-bg-glow {
      position: absolute;
      right: 3%;
      top: 50%;
      transform: translateY(-50%);
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, rgba(253, 224, 71, 0.4) 0%, rgba(147, 197, 253, 0.25) 50%, transparent 75%);
      filter: blur(18px);
      pointer-events: none;
      z-index: 1;
      animation: heroPulseGlow 4s ease-in-out infinite alternate;
    }

    @keyframes heroPulseGlow {
      0% { transform: translateY(-50%) scale(0.9); opacity: 0.75; }
      100% { transform: translateY(-50%) scale(1.2); opacity: 1; }
    }

    .shop-hero-sparkle {
      position: absolute;
      color: #fde047;
      font-size: 14px;
      pointer-events: none;
      z-index: 2;
      animation: sparkleFloat 3s ease-in-out infinite alternate;
    }
    .shop-hero-sparkle.sp-1 { top: 10px; left: 30%; animation-delay: 0.2s; }
    .shop-hero-sparkle.sp-2 { bottom: 12px; left: 38%; font-size: 11px; animation-delay: 1.1s; }
    .shop-hero-sparkle.sp-3 { top: 12px; right: 26%; font-size: 15px; animation-delay: 1.8s; }

    @keyframes sparkleFloat {
      0% { transform: translateY(0) scale(0.8) rotate(0deg); opacity: 0.5; }
      100% { transform: translateY(-6px) scale(1.2) rotate(20deg); opacity: 1; text-shadow: 0 0 8px #fde047; }
    }

    .shop-hero-inner {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 22px;
      gap: 16px;
    }

    .shop-hero-content-col {
      flex: 1;
      min-width: 240px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .shop-hero-main-title {
      font-size: 19px;
      font-weight: 900;
      letter-spacing: -0.3px;
      margin: 0;
      line-height: 1.2;
      color: #ffffff;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    /* Contenedor simétrico de tarjetas de descuento */
    .shop-hero-tiers-grid {
      display: flex;
      align-items: stretch;
      gap: 10px;
      margin-top: 2px;
      flex-wrap: nowrap;
    }

    .shop-hero-tier-card {
      background: rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(10px);
      border: 1.5px solid rgba(255, 255, 255, 0.32);
      border-radius: 15px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 2px;
      flex: 1;
      min-width: 100px;
      max-width: 130px;
      height: 86px;
      box-sizing: border-box;
      text-align: center;
      position: relative;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .shop-hero-tier-card:hover {
      transform: translateY(-2px);
      border-color: #ffffff;
      background: rgba(255, 255, 255, 0.24);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    }

    .shop-hero-tier-card.tier-standard {
      background: rgba(255, 255, 255, 0.14);
    }

    .shop-hero-tier-card.tier-trio {
      background: rgba(16, 185, 129, 0.26);
      border-color: rgba(110, 231, 183, 0.65);
    }
    .shop-hero-tier-card.tier-trio:hover {
      border-color: #a7f3d0;
      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    }

    .shop-hero-tier-card.tier-team {
      background: rgba(245, 158, 11, 0.26);
      border-color: rgba(253, 224, 71, 0.75);
      box-shadow: 0 3px 12px rgba(245, 158, 11, 0.25);
    }
    .shop-hero-tier-card.tier-team:hover {
      border-color: #fde047;
      box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
    }

    .shop-hero-tier-tag {
      font-size: 8.5px;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1.2;
      display: inline-block;
    }
    .shop-hero-tier-tag.standard {
      background: rgba(255, 255, 255, 0.25);
      color: #ffffff;
    }
    .shop-hero-tier-tag.trio {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
    }
    .shop-hero-tier-tag.team {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
    }

    .shop-hero-tier-name {
      font-size: 11.5px;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.1;
    }

    .shop-hero-tier-price-row {
      display: flex;
      align-items: baseline;
      gap: 2px;
      line-height: 1;
    }

    .shop-hero-tier-price {
      font-size: 17px;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -0.3px;
    }
    .shop-hero-tier-price.gold {
      color: #fde047;
      text-shadow: 0 0 8px rgba(253, 224, 71, 0.5);
    }

    .shop-hero-tier-currency {
      font-size: 9.5px;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.8);
    }

    .shop-hero-tier-note {
      font-size: 9.5px;
      color: #e0e7ff;
      font-weight: 600;
      line-height: 1;
    }

    /* Arte Animado de Rayquaza Shiny Ampliado y Desplazado a la Derecha */
    .shop-hero-art-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 155px;
      height: 110px;
      flex-shrink: 0;
      margin-right: -10px;
      margin-left: auto;
    }

    .shop-hero-rayquaza-img {
      width: 150px;
      height: 150px;
      max-width: none;
      object-fit: contain;
      filter: drop-shadow(0 0 20px rgba(253, 224, 71, 0.95)) drop-shadow(0 0 36px rgba(16, 185, 129, 0.65)) drop-shadow(0 6px 14px rgba(0,0,0,0.35));
      animation: heroFloatRayquaza 3s ease-in-out infinite alternate;
      z-index: 2;
      transform: translateX(10px) scale(1.38);
    }

    @keyframes heroFloatRayquaza {
      0% { transform: translateX(10px) translateY(0) scale(1.35) rotate(-1deg); }
      100% { transform: translateX(10px) translateY(-8px) scale(1.42) rotate(3deg); }
    }

    .shop-hero-art-glow-ring.rayquaza {
      position: absolute;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(253, 224, 71, 0.45) 0%, rgba(16, 185, 129, 0.35) 50%, transparent 75%);
      pointer-events: none;
      animation: heroRingPulse 2.5s infinite;
    }

    /* Partículas Shiny de Destello Estelar */
    .rayquaza-sparkle {
      position: absolute;
      color: #fef08a;
      pointer-events: none;
      z-index: 4;
      filter: drop-shadow(0 0 6px #fde047) drop-shadow(0 0 12px #34d399);
      animation: rayquazaShinyGlint 2.4s ease-in-out infinite alternate;
    }

    .rayquaza-sparkle.star-1 {
      top: -6px;
      right: 16px;
      font-size: 19px;
      color: #fde047;
      animation-delay: 0.1s;
    }

    .rayquaza-sparkle.star-2 {
      bottom: 6px;
      left: 0px;
      font-size: 16px;
      color: #6ee7b7;
      animation-delay: 0.8s;
    }

    .rayquaza-sparkle.star-3 {
      top: 38%;
      left: -8px;
      font-size: 22px;
      color: #ffffff;
      animation-delay: 1.4s;
    }

    .rayquaza-sparkle.star-4 {
      bottom: -8px;
      right: 28px;
      font-size: 15px;
      color: #fde047;
      animation-delay: 0.5s;
    }

    .rayquaza-sparkle.star-5 {
      top: 14%;
      right: -8px;
      font-size: 18px;
      color: #a7f3d0;
      animation-delay: 1.9s;
    }

    @keyframes rayquazaShinyGlint {
      0% {
        transform: scale(0.6) rotate(0deg);
        opacity: 0.3;
      }
      50% {
        transform: scale(1.35) rotate(45deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px #fde047) drop-shadow(0 0 20px #6ee7b7);
      }
      100% {
        transform: scale(0.8) rotate(90deg);
        opacity: 0.4;
      }
    }

    @media (max-width: 680px) {
      .shop-hero-inner {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
      }
      .shop-hero-art-col {
        display: none;
      }
      .shop-hero-main-title {
        font-size: 15px;
      }
      .shop-hero-tiers-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .shop-hero-tier-card {
        min-width: unset;
        max-width: unset;
        height: 74px;
        padding: 5px 3px;
      }
      .shop-hero-tier-name {
        font-size: 10px;
      }
      .shop-hero-tier-price {
        font-size: 14px;
      }
      .shop-hero-tier-note {
        font-size: 8.5px;
      }
    }

    @media (max-width: 680px) {
      .shop-hero-inner {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
      }
      .shop-hero-art-col {
        display: none;
      }
      .shop-hero-main-title {
        font-size: 15px;
      }
      .shop-hero-main-desc {
        font-size: 11px;
      }
      .shop-hero-tiers-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .shop-hero-tier-card {
        min-width: unset;
        max-width: unset;
        height: 74px;
        padding: 5px 3px;
      }
      .shop-hero-tier-name {
        font-size: 10px;
      }
      .shop-hero-tier-price {
        font-size: 14px;
      }
      .shop-hero-tier-note {
        font-size: 8.5px;
      }
    }
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 800;
      color: #ffffff;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .shop-hero-tier-pill strong {
      color: #fde047;
    }

    /* ========================================================================== */
    /* MODAL DE BIENVENIDA / POPUP DE OFERTAS FLASH                            */
    /* ========================================================================== */
    .welcome-promo-modal-box {
      background: #ffffff;
      border-radius: 24px;
      max-width: 520px;
      width: 92%;
      padding: 24px;
      box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
      position: relative;
      animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
    }

    .welcome-promo-banner-glow {
      position: absolute;
      top: -60px;
      right: -60px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
      pointer-events: none;
    }

    .welcome-promo-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .welcome-promo-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      color: #4f46e5;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .welcome-promo-title {
      font-size: 20px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.4px;
      margin: 8px 0 4px 0;
      line-height: 1.25;
    }

    .welcome-promo-subtitle {
      font-size: 13px;
      color: #64748b;
      margin: 0;
      line-height: 1.4;
    }

    .welcome-promo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 18px 0;
    }

    @media (max-width: 480px) {
      .welcome-promo-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    .welcome-promo-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
      transition: all 0.2s ease;
    }

    .welcome-promo-card.highlight {
      background: #eef2ff;
      border-color: #818cf8;
      box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15);
    }

    .welcome-promo-card-badge {
      font-size: 9.5px;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 6px;
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
      text-transform: uppercase;
    }

    .welcome-promo-card.highlight .welcome-promo-card-badge {
      background: #4f46e5;
      color: #ffffff;
      border-color: #4338ca;
    }

    .welcome-promo-card-name {
      font-size: 11.5px;
      font-weight: 800;
      color: #334155;
    }

    .welcome-promo-card-price {
      font-size: 18px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.3px;
    }

    .welcome-promo-card-sub {
      font-size: 10px;
      color: #64748b;
    }

    .welcome-promo-cta-btn {
      width: 100%;
      background: linear-gradient(135deg, #4f46e5, #6366f1);
      color: #ffffff;
      border: none;
      border-radius: 14px;
      padding: 14px;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
      transition: all 0.15s ease;
    }

    .welcome-promo-cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45);
    }

    /* ========================================================================== */
    /* ATRIBUCIÓN DE TRÁFICO Y BADGES DE FUENTE (YOUTUBE / DISCORD / GOOGLE)   */
    /* ========================================================================== */
    .traffic-source-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 800;
      white-space: nowrap;
    }

    .traffic-source-badge.youtube {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .traffic-source-badge.discord {
      background: #f5f3ff;
      color: #5865f2;
      border: 1px solid #ddd6fe;
    }

    .traffic-source-badge.google {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .traffic-source-badge.direct {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .traffic-source-badge.social {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    /* ========================================================================== */
    /* PANEL DE CARRITOS SHOPIFY-STYLE EN VORTEX ADMIN                         */
    /* ========================================================================== */
    .admin-cart-user-cell {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .admin-cart-user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      object-fit: contain;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      image-rendering: pixelated;
    }

    .admin-cart-user-details {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .admin-cart-sprites-stack {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      max-width: 320px;
    }

    .admin-cart-sprite-item {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 3px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
      cursor: pointer;
    }

    .admin-cart-sprite-item:hover {
      transform: translateY(-2px) scale(1.08);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      border-color: #cbd5e1;
      z-index: 5;
    }

    .admin-cart-sprite-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .admin-cart-sprite-shiny {
      position: absolute;
      bottom: -3px;
      right: -3px;
      width: 17px;
      height: 17px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      z-index: 3;
      pointer-events: none;
    }

    .admin-cart-sprite-shiny img {
      width: 13px;
      height: 13px;
      object-fit: contain;
    }

    .admin-cart-sprite-alpha {
      position: absolute;
      top: -3px;
      left: -3px;
      width: 16px;
      height: 16px;
      background: #dc2626;
      color: #ffffff;
      border-radius: 50%;
      font-size: 10.5px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px rgba(220, 38, 38, 0.4);
      z-index: 3;
      pointer-events: none;
    }

    .admin-cart-sprite-more {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: #f1f5f9;
      border: 1.5px dashed #cbd5e1;
      font-size: 12px;
      font-weight: 800;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .admin-cart-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .admin-cart-status-badge.active {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .admin-cart-status-badge.checkout {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .admin-cart-status-badge.abandoned {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .admin-cart-status-badge.converted {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .admin-live-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      animation: pulseLiveDot 1.6s infinite ease-in-out;
    }

    @keyframes pulseLiveDot {
      0% { transform: scale(0.9); opacity: 0.7; }
      50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 6px rgba(16, 185, 129, 0.7); }
      100% { transform: scale(0.9); opacity: 0.7; }
    }

    .admin-traffic-pills-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .admin-traffic-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      font-size: 11.5px;
      font-weight: 800;
      color: #334155;
    }

    .admin-traffic-chip strong {
      color: #0f172a;
    }

    .admin-cart-actions-row {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
    }

    .admin-cart-btn-detail {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 32px;
      padding: 0 11px;
      background: #ffffff;
      color: #334155;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      box-sizing: border-box;
    }

    .admin-cart-btn-detail:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #0f172a;
      transform: translateY(-1px);
    }

    .admin-cart-btn-recover {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 32px;
      padding: 0 12px;
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
      box-sizing: border-box;
    }

    .admin-cart-btn-recover:hover {
      background: linear-gradient(135deg, #059669, #047857);
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
      transform: translateY(-1px);
    }

    .admin-cart-btn-delete {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: #ffffff;
      color: #94a3b8;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .admin-cart-btn-delete:hover {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #dc2626;
      transform: translateY(-1px);
    }

    /* ==========================================================================
       TAMAÑOS DINÁMICOS DEL TICKER SCROLL CONFIGURABLES
       ========================================================================== */
    .promo-ticker-bar.size-small .promo-ticker-content { font-size: 10.5px; }
    .promo-ticker-bar.size-normal .promo-ticker-content { font-size: 12.5px; }
    .promo-ticker-bar.size-large .promo-ticker-content { font-size: 15px; }
    .promo-ticker-bar.size-xlarge .promo-ticker-content { font-size: 17.5px; }

    /* ==========================================================================
       SISTEMA DE DISEÑO MODULAR UNIFICADO (DESIGN SYSTEM & UI PRIMITIVES)
       ========================================================================== */
    .ui-btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, #4f46e5, #6366f1);
      color: #ffffff;
      border: none;
      border-radius: 16px;
      font-weight: 800;
      font-size: 14px;
      padding: 13px 22px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
      user-select: none;
    }
    .ui-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4);
    }
    .ui-btn-primary:active {
      transform: scale(0.98);
    }

    .ui-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      color: var(--text-main);
      border: 1.5px solid var(--card-border);
      border-radius: 16px;
      font-weight: 800;
      font-size: 14px;
      padding: 13px 20px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
      user-select: none;
    }
    .ui-btn-secondary:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }
    .ui-btn-secondary:active {
      transform: scale(0.98);
    }

    /* BARRA DE ORDENACIÓN UNIFICADA (SORT TOOLBAR) */
    .ui-sort-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      padding: 4px 0;
      scrollbar-width: none;
    }
    .ui-sort-toolbar::-webkit-scrollbar {
      display: none;
    }
    .ui-sort-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 12px;
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      color: var(--text-sub);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ui-sort-btn:hover {
      border-color: #cbd5e1;
      color: var(--text-main);
      background: #f8fafc;
    }
    .ui-sort-btn.active {
      background: #eef2ff;
      border-color: #c7d2fe;
      color: var(--primary);
      box-shadow: 0 2px 6px rgba(79, 70, 229, 0.12);
    }

    /* ==========================================================================
       LANDING PAGE DINÁMICA Y MODULAR (DISEÑO VISUAL Y COMPACTO DE ALTA CONVERSIÓN)
       ========================================================================== */
    .landing-section {
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
    }

    /* HERO COMPACTO Y DINÁMICO */
    .landing-hero {
      position: relative;
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      border-radius: 26px;
      padding: 26px 18px 22px 18px;
      text-align: center;
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.03);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .landing-hero::before {
      content: "";
      position: absolute;
      top: -70px;
      left: 50%;
      transform: translateX(-50%);
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(79, 70, 229, 0.09) 0%, rgba(147, 51, 234, 0.04) 50%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }

    .landing-hero-badge {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px;
      border-radius: 9999px;
      background: rgba(248, 250, 252, 0.95);
      border: 1.5px solid #e2e8f0;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
      font-size: 11.5px;
      font-weight: 800;
      color: #334155;
      letter-spacing: 0.2px;
    }

    .landing-pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
      animation: pulseLiveGreen 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
      display: inline-block;
      flex-shrink: 0;
    }

    @keyframes pulseLiveGreen {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
      }
    }

    .landing-hero-title {
      position: relative;
      z-index: 1;
      font-size: 26px;
      font-weight: 900;
      line-height: 1.18;
      color: #0f172a;
      letter-spacing: -0.6px;
      margin: 0;
      max-width: 480px;
    }

    @media (min-width: 480px) {
      .landing-hero-title {
        font-size: 32px;
      }
    }

    .landing-hero-gradient {
      background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline;
    }

    .landing-hero-desc {
      position: relative;
      z-index: 1;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-sub);
      font-weight: 600;
      max-width: 440px;
      margin: 0;
    }

    .landing-hero-footnote {
      position: relative;
      z-index: 1;
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-top: 2px;
    }

    /* =========================================================================
       BANNERS PUBLICITARIOS GRANDES (ESTILO BANNER BUTTON)
       ========================================================================= */
    .landing-promo-banner-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    @media (max-width: 640px) {
      .landing-promo-banner-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .landing-promo-banner-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 20px;
      border-radius: 22px;
      cursor: pointer;
      text-decoration: none;
      user-select: none;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
      border: 1.5px solid transparent;
    }
    .landing-promo-banner-btn:hover {
      transform: translateY(-3px) scale(1.01);
    }
    .landing-promo-banner-btn:active {
      transform: scale(0.98);
    }

    /* BANNER 1: REGALOS GRATIS */
    .landing-promo-banner-btn.banner-btn-gifts {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
      border-color: #34d399;
    }
    .landing-promo-banner-btn.banner-btn-gifts:hover {
      box-shadow: 0 10px 28px rgba(16, 185, 129, 0.45);
      background: linear-gradient(135deg, #059669 0%, #047857 100%);
    }

    /* BANNER 2: TIENDA VIP */
    .landing-promo-banner-btn.banner-btn-shop {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.38);
      border-color: #fbbf24;
    }
    .landing-promo-banner-btn.banner-btn-shop:hover {
      box-shadow: 0 10px 28px rgba(245, 158, 11, 0.48);
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    }

    .promo-banner-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .promo-banner-icon {
      font-size: 28px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }
    .promo-banner-title {
      font-size: 14.5px;
      font-weight: 900;
      letter-spacing: -0.01em;
      line-height: 1.25;
      text-transform: uppercase;
      text-shadow: 0 1px 2px rgba(0,0,0,0.12);
    }
    @media (min-width: 480px) {
      .promo-banner-title {
        font-size: 15.5px;
      }
    }

    .promo-banner-arrow {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #ffffff;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .landing-promo-banner-btn:hover .promo-banner-arrow {
      transform: translateX(4px);
      background: rgba(255, 255, 255, 0.35);
    }

    /* MINI HUB DE ACCESO RÁPIDO FIX OT */
    .landing-quick-hub {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .landing-quick-chip {
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      border-radius: 16px;
      padding: 11px 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }
    .landing-quick-chip:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    .landing-quick-chip:active {
      transform: scale(0.98);
    }
    .landing-quick-chip-left {
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .landing-quick-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .landing-quick-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
    }

    /* FLUJO EN 3 PASOS HORIZONTAL Y DINÁMICO */
    .landing-steps-strip {
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      border-radius: 20px;
      padding: 14px 16px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .landing-steps-strip-title {
      font-size: 13px;
      font-weight: 900;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .landing-steps-flow {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    @media (max-width: 520px) {
      .landing-steps-flow {
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }
    .landing-flow-step {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 9px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .landing-flow-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--primary);
      color: #ffffff;
      font-size: 11px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .landing-flow-text {
      font-size: 11.5px;
      font-weight: 800;
      color: #1e293b;
      line-height: 1.2;
    }

    /* JUEGOS Y GARANTÍAS EN CHIPS DINÁMICOS */
    .landing-chips-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .landing-chip {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 800;
      color: #334155;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }
    .landing-chip-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* BOTÓN VOLVER AL INICIO EN CATÁLOGO */
    .catalog-back-to-landing-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 12px;
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      color: var(--primary);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s ease;
      width: fit-content;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    .catalog-back-to-landing-btn:hover {
      background: #eef2ff;
      border-color: #c7d2fe;
      transform: translateX(-2px);
    }

    /* =========================================================================
       BOTONES DE ORDENACIÓN COMPACTOS CON ICONOS (ESTILO IMAGEN 3)
       ========================================================================= */
    .ui-icon-sort-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #ffffff;
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    }

    .ui-icon-sort-label {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--text-sub);
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .ui-icon-sort-group {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .ui-icon-sort-group::-webkit-scrollbar {
      display: none;
    }

    .ui-icon-sort-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      flex-shrink: 0;
      font-weight: 900;
      font-size: 13px;
    }
    .ui-icon-sort-btn:hover {
      background: #f1f5f9;
      color: var(--text-main);
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }
    .ui-icon-sort-btn.active {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

    /* =========================================================================
       CARRUSEL DE POKÉMON DESTACADOS EN LA LANDING (PRODUCT SHOWCASE)
       ========================================================================= */
    .landing-featured-section {
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      border-radius: 22px;
      padding: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: column;
      gap: 12px;
      contain: layout style;
    }

    .landing-featured-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .landing-featured-title {
      font-size: 14px;
      font-weight: 900;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.3px;
    }

    .landing-featured-scroll {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      padding: 6px 4px 14px 4px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scroll-behavior: smooth;
    }
    .landing-featured-scroll::-webkit-scrollbar {
      height: 5px;
    }
    .landing-featured-scroll::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 6px;
    }
    .landing-featured-scroll::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    /* Cartas idénticas a la tienda en el carrusel */
    .landing-featured-scroll .catalog-card {
      flex: 0 0 175px;
      min-width: 175px;
      max-width: 185px;
      scroll-snap-align: start;
      margin: 0;
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
      user-select: none;
      -webkit-user-select: none;
    }

    .landing-featured-scroll .catalog-card:hover {
      transform: translateY(-4px);
      border-color: var(--primary);
      box-shadow: 0 10px 24px var(--primary-glow);
    }

    .landing-featured-scroll .catalog-card.carousel-card {
      cursor: pointer;
    }

    @media (max-width: 640px) {
      .landing-featured-scroll {
        gap: 10px;
        padding-bottom: 10px;
      }
      .landing-featured-scroll .catalog-card {
        flex: 0 0 152px;
        min-width: 152px;
        max-width: 160px;
        padding: 12px 8px;
        border-radius: 18px;
      }
      .landing-featured-scroll .catalog-card .catalog-sprite {
        width: 80px;
        height: 80px;
      }
      .landing-featured-scroll .catalog-card .catalog-sprite img {
        width: 75px;
        height: 75px;
      }
      .landing-featured-scroll .catalog-card .catalog-title {
        font-size: 12px;
      }
      .landing-featured-scroll .catalog-card-price {
        font-size: 11.5px;
      }
    }

    /* ESTILOS DEL GESTOR MODULAR DE LANDING EN PANEL ADMIN */
    .admin-module-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: all 0.2s ease;
    }
    .admin-module-card.disabled {
      background: #f8fafc;
      border-color: #cbd5e1;
      opacity: 0.65;
    }
    .admin-module-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .admin-module-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
    }
    .admin-module-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .admin-btn-icon-sm {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      transition: all 0.15s ease;
    }
    .admin-btn-icon-sm:hover:not(:disabled) {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }
    .admin-btn-icon-sm:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .admin-module-body {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .admin-input-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .admin-input-group label {
      font-size: 11px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .admin-input-control {
      padding: 8px 12px;
      border-radius: 10px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      font-size: 12.5px;
      font-weight: 600;
      color: #0f172a;
      outline: none;
      transition: border-color 0.15s ease;
    }
    .admin-input-control:focus {
      border-color: #6366f1;
    }

    /* =========================================================================
       SECCIÓN FAQ EN MODO CLARO (TROUBLESHOOTING & FAQ)
       ========================================================================= */
    .landing-faq-section {
      background: #ffffff;
      border: 1.5px solid var(--card-border);
      border-radius: 22px;
      padding: 20px 18px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .landing-faq-header-block {
      text-align: left;
    }
    .landing-faq-main-title {
      font-size: 18px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.02em;
      margin: 0 0 4px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .landing-faq-subtitle {
      font-size: 12px;
      color: var(--text-sub);
      line-height: 1.45;
      margin: 0;
    }

    .landing-faq-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .landing-faq-item {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .landing-faq-item.open {
      border-color: #cbd5e1;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .landing-faq-question-btn {
      width: 100%;
      padding: 13px 14px;
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
      user-select: none;
    }
    .landing-faq-question-btn:hover {
      color: var(--primary);
    }

    .landing-faq-toggle-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      flex-shrink: 0;
      transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
    }
    .landing-faq-item.open .landing-faq-toggle-icon {
      transform: rotate(45deg);
      background: var(--primary);
      color: #ffffff;
    }

    .landing-faq-answer {
      display: none;
      padding: 0 14px 13px 14px;
      font-size: 12px;
      color: #475569;
      line-height: 1.55;
      border-top: 1px solid #f1f5f9;
      margin-top: -2px;
      padding-top: 10px;
    }
    .landing-faq-item.open .landing-faq-answer {
      display: block;
      animation: fadeInFaq 0.2s ease-out;
    }
    @keyframes fadeInFaq {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ========================================================================= */
    /* HEYHANS UNIFIED DESIGN SYSTEM & THEME ENGINE (ZERO EMOJIS, 100% SVG/CLEAN) */
    /* ========================================================================= */

    /* 1. BOTONES DEL SISTEMA DE DISEÑO */
    .hh-btn,
    .vortex-btn-primary,
    .vortex-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 16px;
      min-height: 38px;
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 13px;
      font-weight: 700;
      border-radius: 12px;
      border: 1.5px solid transparent;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      box-sizing: border-box;
      line-height: 1.2;
      text-decoration: none;
      white-space: nowrap;
    }

    .hh-btn:active,
    .vortex-btn-primary:active,
    .vortex-btn-secondary:active {
      transform: scale(0.97);
    }

    .hh-btn-primary,
    .vortex-btn-primary {
      background: #4f46e5;
      color: #ffffff;
      border-color: #4f46e5;
      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
    }

    .hh-btn-primary:hover,
    .vortex-btn-primary:hover {
      background: #4338ca;
      border-color: #4338ca;
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    }

    .hh-btn-secondary,
    .vortex-btn-secondary {
      background: #ffffff;
      color: #334155;
      border-color: #cbd5e1;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .hh-btn-secondary:hover,
    .vortex-btn-secondary:hover {
      background: #f8fafc;
      border-color: #94a3b8;
      color: #0f172a;
    }

    .hh-btn-outline {
      background: transparent;
      color: #4f46e5;
      border-color: #c7d2fe;
    }

    .hh-btn-outline:hover {
      background: #eff6ff;
      border-color: #818cf8;
      color: #3730a3;
    }

    .hh-btn-danger {
      background: #ef4444;
      color: #ffffff;
      border-color: #ef4444;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
    }

    .hh-btn-danger:hover {
      background: #dc2626;
      border-color: #dc2626;
    }

    .hh-btn-success {
      background: #10b981;
      color: #ffffff;
      border-color: #10b981;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    }

    .hh-btn-success:hover {
      background: #059669;
      border-color: #059669;
    }

    .hh-btn-sm {
      padding: 5px 12px;
      min-height: 30px;
      font-size: 11.5px;
      border-radius: 9px;
      gap: 5px;
    }

    .hh-btn-lg {
      padding: 12px 24px;
      min-height: 46px;
      font-size: 15px;
      border-radius: 14px;
      gap: 9px;
    }

    .hh-btn-icon {
      padding: 0;
      width: 36px;
      height: 36px;
      min-height: 36px;
      min-width: 36px;
      border-radius: 10px;
    }

    .hh-btn-icon.hh-btn-sm {
      width: 28px;
      height: 28px;
      min-height: 28px;
      min-width: 28px;
      border-radius: 8px;
    }

    /* 2. SELECTS Y LISTAS DESPLEGABLES UNIFICADAS */
    .hh-select-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-width: 140px;
    }

    .hh-select {
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 11px;
      padding: 8px 34px 8px 12px;
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      color: #0f172a;
      cursor: pointer;
      outline: none;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .hh-select:hover {
      border-color: #94a3b8;
    }

    .hh-select:focus {
      border-color: #4f46e5;
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    }

    .hh-select-wrap.hh-select-sm .hh-select {
      padding: 5px 28px 5px 10px;
      font-size: 11px;
      border-radius: 9px;
    }

    .hh-select-arrow {
      position: absolute;
      right: 11px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      transition: transform 0.2s ease;
    }

    /* 3. BADGES Y PÍLDORAS UNIFICADAS */
    .hh-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 800;
      border-radius: 20px;
      line-height: 1.2;
      letter-spacing: 0.2px;
      border: 1px solid transparent;
      user-select: none;
    }

    .hh-badge-primary {
      background: #eff6ff;
      color: #2563eb;
      border-color: #bfdbfe;
    }

    .hh-badge-success {
      background: #ecfdf5;
      color: #059669;
      border-color: #a7f3d0;
    }

    .hh-badge-warning {
      background: #fef3c7;
      color: #b45309;
      border-color: #fde68a;
    }

    .hh-badge-danger {
      background: #fef2f2;
      color: #dc2626;
      border-color: #fecaca;
    }

    .hh-badge-neutral {
      background: #f1f5f9;
      color: #475569;
      border-color: #e2e8f0;
    }

    /* 4. TARJETAS DEL CATÁLOGO ADMINISTRATIVO (PRODUCTOS / REGALOS) */
    .hh-admin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 12px;
      max-height: 520px;
      overflow-y: auto;
      padding: 6px 2px;
    }

    .hh-admin-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      position: relative;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .hh-admin-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .hh-admin-card.featured {
      border-color: #f59e0b;
      background: #fffdfa;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
    }

    .hh-star-toggle-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
    }

    .hh-star-toggle-btn:hover {
      background: #fef3c7;
      border-color: #fde68a;
      color: #d97706;
    }

    .hh-star-toggle-btn.active {
      background: #fef3c7;
      border-color: #fde68a;
      color: #d97706;
    }

    .hh-admin-card-sprite-wrap {
      width: 68px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
    }

    .hh-admin-card-sprite-wrap img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
    }

    .hh-admin-card-number {
      font-size: 10px;
      font-weight: 800;
      color: #94a3b8;
      letter-spacing: 0.5px;
    }

    .hh-admin-card-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
      max-width: 145px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hh-admin-card-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .hh-admin-price-tag {
      font-size: 11px;
      font-weight: 800;
      color: #4f46e5;
      background: #eef2ff;
      padding: 2px 7px;
      border-radius: 6px;
    }

    .hh-admin-free-tag {
      font-size: 11px;
      font-weight: 800;
      color: #059669;
      background: #ecfdf5;
      padding: 2px 7px;
      border-radius: 6px;
    }

    .hh-admin-claims-tag {
      font-size: 10.5px;
      font-weight: 700;
      color: #64748b;
    }

    .hh-admin-games-tag {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 6px;
    }

    .hh-admin-variants-tag {
      font-size: 9.5px;
      font-weight: 700;
      color: #6366f1;
    }

    /* 5. CABECERAS DE TABLA ORDENABLES Y MOTOR DE ORDENAMIENTO (TableSorter) */
    .vortex-th-sortable,
    .hh-th-sortable {
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .vortex-th-sortable:hover,
    .hh-th-sortable:hover {
      background: #e2e8f0 !important;
      color: #0f172a !important;
    }

    .vortex-th-sortable.sorted-active,
    .hh-th-sortable.sorted-active {
      background: #eff6ff !important;
      color: #1d4ed8 !important;
      font-weight: 900 !important;
    }

    .hh-svg-icon {
      display: inline-block;
      vertical-align: middle;
      flex-shrink: 0;
    }

    /* 6. BARRA DE ORDENACIÓN ESTILO PROOAK PARA CATÁLOGO */
    .hh-prooak-sort-bar {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      padding: 2px 4px;
      border-radius: 14px;
      position: relative;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      height: 38px;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .hh-prooak-sort-btn {
      position: relative;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      border: none;
      background: transparent;
      color: #94a3b8;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      outline: none;
      user-select: none;
    }

    .hh-prooak-sort-btn:hover {
      color: #334155;
      background: #f1f5f9;
    }

    .hh-prooak-sort-btn.active {
      color: #dc2626 !important;
    }

    .hh-prooak-sort-active-pill {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      border-radius: 11px;
      z-index: 1;
    }

    .hh-prooak-sort-icon {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hh-prooak-tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(2px);
      background: #0f172a;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      padding: 5px 10px;
      border-radius: 8px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s ease, transform 0.15s ease;
      z-index: 1000;
      box-shadow: 0 6px 18px rgba(0,0,0,0.28);
      letter-spacing: 0.2px;
    }

    .hh-prooak-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px;
      border-style: solid;
      border-color: #0f172a transparent transparent transparent;
    }

    .hh-prooak-sort-btn:hover .hh-prooak-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    /* ========================================================
       PEDIDOS PAGADOS: CATÁLOGO, PERFIL, RECIBO Y POSTPAGO
       ======================================================== */
    .catalog-receive-btn {
      width: auto !important;
      min-width: 78px;
      min-height: 26px;
      padding: 5px 12px !important;
      border-radius: 8px !important;
      font-size: 11px !important;
      line-height: 1 !important;
      box-shadow: 0 2px 7px rgba(5, 150, 105, 0.2) !important;
    }

    .catalog-card.pending-delivery .catalog-card-footer {
      justify-content: center;
    }

    .catalog-grid.list-view .catalog-card.pending-delivery .catalog-card-footer {
      width: auto;
      min-width: 86px;
      margin: 0 0 0 auto;
      flex: 0 0 auto;
      justify-content: flex-end;
    }

    .catalog-grid.list-view .catalog-receive-btn {
      width: auto !important;
      min-width: 82px;
      min-height: 26px;
      padding: 5px 12px !important;
      margin: 0;
    }

    .profile-purchase-card {
      cursor: pointer;
      outline: none;
    }

    .profile-purchase-card:focus-visible {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
    }

    .purchase-compatible-game {
      max-width: 290px;
      color: #64748b;
      font-size: 10.5px;
      font-weight: 650;
      line-height: 1.35;
    }

    .purchase-card-actions {
      width: 92px;
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 7px;
    }

    .purchase-card-actions .btn-claim-direct,
    .purchase-card-actions .btn-invoice-view {
      width: 100%;
      min-height: 34px;
      padding: 7px 10px;
      justify-content: center;
      box-sizing: border-box;
    }

    .profile-footer {
      width: 100%;
      gap: 18px;
      padding: 16px 2px 0;
      box-sizing: border-box;
    }

    .profile-btn-logout,
    .profile-btn-done {
      min-height: 38px;
      border-radius: 12px;
    }

    .profile-btn-done {
      min-width: 92px;
      margin-left: auto;
      background: #eef2ff;
      border-color: #c7d2fe;
      color: #4338ca;
    }

    .invoice-action-btn,
    .invoice-claim-btn {
      min-height: 42px;
      flex: 1 1 116px;
      justify-content: center;
      box-sizing: border-box;
      white-space: nowrap;
    }

    .invoice-variant-name {
      margin-top: 5px;
      color: #334155;
      font-size: 11.5px;
      font-weight: 800;
      line-height: 1.35;
    }

    .invoice-compatible-game {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 7px;
      color: #334155;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.35;
    }

    .invoice-compatible-game span {
      color: #94a3b8;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .45px;
    }

    .order-success-modal-content {
      position: relative;
      width: min(92vw, 470px) !important;
      max-height: min(88vh, 720px);
      overflow: auto;
      padding: 26px !important;
      border-radius: 26px !important;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
      display: flex;
      flex-direction: column;
      align-items: stretch !important;
      gap: 14px !important;
      text-align: left !important;
    }

    .order-success-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 34px;
      height: 34px;
      border: 1px solid #e2e8f0;
      border-radius: 11px;
      background: #f8fafc;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .order-success-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-right: 38px;
    }

    .order-success-icon-badge {
      width: 54px;
      height: 54px;
      border-radius: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
      border: 1px solid #a7f3d0;
      box-shadow: 0 8px 20px rgba(16, 185, 129, .14);
    }

    .order-success-header h3 {
      margin: 13px 0 4px;
      color: #0f172a;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.35px;
    }

    .order-success-header p {
      margin: 0;
      color: #64748b;
      font-size: 12.5px;
      line-height: 1.55;
    }

    .order-summary-meta-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 13px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 15px;
      background: #f8fafc;
    }

    .order-meta-col { display: flex; flex-direction: column; gap: 4px; }
    .order-meta-label { color: #94a3b8; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
    .order-meta-val-badge { color: #4338ca; font-family: monospace; font-size: 12px; font-weight: 900; }

    .order-success-items-scroll {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 190px;
      overflow: auto;
    }

    .order-success-item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 11px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #ffffff;
    }

    .order-success-item-variant { color: #475569; font-size: 10.5px; font-weight: 750; line-height: 1.3; }
    .order-success-item-game { max-width: 265px; color: #94a3b8; font-size: 9.5px; font-weight: 650; line-height: 1.3; }

    .order-success-actions {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .btn-order-claim-now,
    .btn-order-secondary {
      min-height: 44px;
      padding: 10px 14px;
      border-radius: 13px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 850;
      cursor: pointer;
    }

    .btn-order-claim-now {
      border: 0;
      color: #ffffff;
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 9px 20px rgba(5, 150, 105, .22);
    }

    .btn-order-secondary {
      border: 1px solid #cbd5e1;
      color: #334155;
      background: #ffffff;
    }

    .btn-free-checkout {
      width: 100%;
      min-height: 48px;
      border: 0;
      border-radius: 14px;
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      font-family: inherit;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(5, 150, 105, .24);
      transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
    }

    .btn-free-checkout:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 13px 28px rgba(5, 150, 105, .3);
    }

    .btn-free-checkout:disabled { opacity: .68; cursor: wait; }

    .free-checkout-note,
    .free-checkout-minimum-note {
      margin-top: 9px;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 10.5px;
      font-weight: 650;
      line-height: 1.45;
      text-align: center;
    }

    .free-checkout-note {
      color: #166534;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }

    .free-checkout-minimum-note {
      color: #92400e;
      background: #fffbeb;
      border: 1px solid #fde68a;
    }

    @media (max-width: 640px) {
      .purchase-card-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
      }
      .purchase-card-actions button { width: 100% !important; }
      .invoice-footer-actions { gap: 8px; }
      .invoice-claim-btn { flex-basis: 100%; }
      .order-success-modal-content { width: calc(100vw - 24px) !important; padding: 21px !important; border-radius: 22px !important; }
      .order-success-item-game { max-width: 190px; }
    }

    @media print {
      body * { visibility: hidden !important; }
      #invoiceModal, #invoiceModal * { visibility: visible !important; }
      #invoiceModal {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        background: #ffffff !important;
      }
      .invoice-modal-box {
        width: 100% !important;
        max-width: 180mm !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 auto !important;
      }
      .invoice-footer-actions, .invoice-modal-header .vortex-btn-close { display: none !important; }
    }
.abandoned-cart-recovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #c7d2fe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.1);
}

.abandoned-cart-recovery-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #4f46e5;
  background: #fff;
  border: 1px solid #e0e7ff;
}

.abandoned-cart-recovery-copy {
  flex: 1 1 210px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.abandoned-cart-recovery-copy strong {
  color: #1e1b4b;
  font-size: 13px;
  font-weight: 900;
}

.abandoned-cart-recovery-copy span {
  color: #6366f1;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
}

.abandoned-cart-recovery-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

/* Una compra pendiente representa un SKU inmutable: los selectores permanecen
   visibles como comprobante, pero ya no se comportan como controles editables. */
.detail-custom-dropdown.purchase-selection-locked .detail-dd-btn:disabled {
  cursor: default;
  opacity: 1;
  color: #334155;
  background: #f1f5f9;
  border-color: #cbd5e1;
  box-shadow: none;
}

.detail-custom-dropdown.purchase-selection-locked .detail-dd-arrow {
  display: none;
}

.purchase-readonly-selection {
  background: linear-gradient(145deg, #f8fafc, #ffffff) !important;
  border-color: #cbd5e1 !important;
}

.purchase-readonly-selection label > span:last-child {
  display: none !important;
}

.purchase-readonly-selection .detail-custom-dropdown.purchase-selection-locked .detail-dd-btn:disabled {
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.purchase-readonly-selection .detail-dd-list {
  display: none !important;
}

.purchase-selection-sealed {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 13px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
}

.purchase-selection-sealed svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.shop-trainer-verification {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: linear-gradient(145deg, #f0fdf4, #ffffff);
}

.shop-trainer-verification label {
  color: #14532d;
  font-size: 12.5px;
  font-weight: 900;
}

.shop-trainer-verification input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1.5px solid #86efac;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  outline: none;
}

.shop-trainer-verification select {
  width: 100%;
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1.5px solid #86efac;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
}

.shop-trainer-verification input[readonly] {
  color: #166534;
  background: #f0fdf4;
  cursor: default;
}

.shop-trainer-manual {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.shop-trainer-manual[hidden] {
  display: none;
}

.shop-trainer-verification .btn-unlocked-claim:disabled {
  opacity: .52;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.18);
  transform: none;
}

.shop-trainer-verification .btn-unlocked-claim:disabled:hover {
  transform: none;
  box-shadow: none;
}

.shop-trainer-profile-note {
  padding: 9px 11px;
  border: 1px dashed #86efac;
  border-radius: 10px;
  color: #166534;
  background: rgba(240,253,244,.8);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
}

.shop-trainer-verification input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

.shop-trainer-verification input.input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

.shop-trainer-verification p {
  margin: 0;
  color: #475569;
  font-size: 10.8px;
  font-weight: 650;
  line-height: 1.45;
}

/* El modal activo es una pantalla de proceso, no una ventana descartable. */
#modalTradeCloseButton {
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
  color: #64748b;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.trade-hud-topbar.shop-flow {
  justify-content: center !important;
}

.trade-hud-topbar.shop-flow > div {
  width: 100%;
  justify-content: center;
}

.trade-hud-target-info .trade-hud-req-id {
  display: inline-flex;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .trade-hud-topbar {
    justify-content: center !important;
  }
  .trade-hud-topbar > div {
    width: 100%;
    justify-content: center;
  }
  .trade-hud-pulse-wrapper {
    max-width: 100% !important;
    justify-content: center;
    text-align: center;
    padding: 7px 12px;
  }
  .trade-hud-target-card {
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px !important;
  }
  .trade-hud-target-img {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px;
  }
  .trade-hud-target-title {
    white-space: normal !important;
    font-size: 17px !important;
    line-height: 1.2;
  }
  .trade-hud-target-meta {
    margin-top: 7px;
    line-height: 1.35;
  }
  .trade-hud-variant-label {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 11.5px !important;
  }
  .trade-hud-target-info .trade-hud-req-id {
    margin-top: 9px;
    color: #64748b;
    background: #f1f5f9;
  }
}

.abandoned-cart-recovery-actions button {
  min-height: 38px;
  border-radius: 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.abandoned-cart-secondary {
  color: #475569;
  background: #fff;
  border: 1px solid #cbd5e1;
}

.abandoned-cart-primary {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  border: 1px solid #4338ca;
  box-shadow: 0 7px 16px rgba(79, 70, 229, 0.2);
}

@media (min-width: 560px) {
  .abandoned-cart-recovery-actions {
    width: auto;
    grid-template-columns: auto auto;
  }
}