.toggle-buttons {
    display: flex;
    gap: 10px;
}
#tableViewBtn:disabled {
    background-color: #333333 !important; /* Gris oscuro */
    border-color: #333333 !important;
    color: #ffffff !important; /* Blanco */
}
#gridViewBtn:disabled {
    background-color: #333333 !important; /* Gris oscuro */
    border-color: #333333 !important;
    color: #ffffff !important; /* Blanco */
}
/* CSS: btnYgoStock se comporta como un alias de .btn */
.btnYgoStock {
  all: unset; /* Reinicia estilos para prevenir conflictos si necesitas solo una parte */
  @apply btn; /* ⚠️ SOLO si estás usando Tailwind con @apply. Si no, sigue abajo. */
}

/* Si no usas Tailwind o SCSS, la mejor opción es esto: */
.btnYgoStock {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out,
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
}

.table .btn-table{
  background-color: #C52110!important;
  border-color: #C52110!important;
  color:#F0F0F0!important ;
}

.table .btn-table-secondary{
  background-color: #5810c5;
  border-color: #5810c5;
  color:#F0F0F0!important ;
}
/* =============================================
       BANNER — mismo lenguaje que el perfil público
       ============================================= */
    .stock-banner {
      position: relative;
      background: linear-gradient(135deg, #C52110 0%, #333 50%, #5810c5 100%);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.35),
                  0 2px 8px rgba(197,33,16,0.25),
                  -5px 0 0 0 rgba(88,16,197,0.9);
      overflow: hidden;
      min-height: 110px;
      margin: 0.75rem 1rem 0 1rem;
      padding: 1.25rem 1.5rem;
    }

    /* Glow esquina superior izquierda */
    .stock-banner::before {
      content: '';
      position: absolute;
      top: -20px; left: -20px;
      width: 100px; height: 100px;
      background: rgba(197,33,16,0.4);
      border-radius: 50%;
      filter: blur(30px);
      pointer-events: none;
      z-index: 0;
    }

    /* Badge esquina superior derecha */
    .stock-banner-badge {
      position: absolute;
      top: 12px; right: 12px;
      z-index: 2;
      background: rgba(255,255,255,0.15);
      color: #fff;
      font-size: 0.7rem;
      padding: 3px 10px;
      border-radius: 8px;
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255,255,255,0.2);
    }

    .stock-banner-inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .stock-banner-icon {
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.2);
      backdrop-filter: blur(4px);
      border-radius: 8px;
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .stock-banner-icon i {
      color: #fff;
      font-size: 1rem;
    }

    .stock-banner h1 {
      color: #fff;
      font-size: 1.3rem;
      font-weight: 700;
      margin: 0 0 0.2rem 0;
      text-shadow:
        1px 0 0 rgba(0,0,0,0.3), -1px 0 0 rgba(0,0,0,0.3),
        0 1px 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(0,0,0,0.3);
    }

    .stock-banner-count {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 20px;
      backdrop-filter: blur(4px);
      margin-left: 6px;
      vertical-align: middle;
    }

    .stock-banner .banner-breadcrumb {
      margin-top: 0.5rem;
    }

    /* =============================================
       BOTONERA DE ACCIÓN — debajo del banner
       ============================================= */
    .stock-action-bar {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      margin: 0.85rem 1rem 0 1rem;
      align-items: center;
    }

    .stock-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 1rem;
      border-radius: 10px;
      font-size: 0.78rem;
      font-weight: 700;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
      white-space: nowrap;
    }

    .stock-action-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
    }

    .stock-action-btn i {
      font-size: 0.85rem;
      color: #fff !important;
    }

    /* Variante primaria — morado */
    .stock-action-btn.primary {
      background: linear-gradient(135deg, #5810c5, #7a30e0);
      color: #fff;
      box-shadow: 0 3px 12px rgba(88,16,197,0.3),
                  0 0 0 2px #fff,
                  0 0 0 4px #5810c5;
    }

    .stock-action-btn.primary:hover {
      box-shadow: 0 5px 18px rgba(88,16,197,0.45),
                  0 0 0 2px #fff,
                  0 0 0 4px #5810c5;
      color: #fff;
    }

    /* Variante éxito — verde */
    .stock-action-btn.success {
      background: linear-gradient(135deg, #008F39, #00b347);
      color: #fff;
      box-shadow: 0 3px 12px rgba(0,143,57,0.3),
                  0 0 0 2px #fff,
                  0 0 0 4px #008F39;
    }

    .stock-action-btn.success:hover {
      box-shadow: 0 5px 18px rgba(0,143,57,0.45),
                  0 0 0 2px #fff,
                  0 0 0 4px #008F39;
      color: #fff;
    }

    /* =============================================
       BARRA DE CONTROLES — filtros + vista
       ============================================= */
    .stock-controls-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0.85rem 1rem 0 1rem;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    /* Switcher de vista */
    .view-switcher {
      display: flex;
      gap: 0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12),
                  0 0 0 2px #fff,
                  0 0 0 4px #333;
      flex-shrink: 0;
    }

    .view-switcher-btn {
      background: #fff;
      border: none;
      padding: 0.45rem 0.85rem;
      font-size: 0.9rem;
      color: #6c757d;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .view-switcher-btn:first-child { border-right: 1px solid #e9ecef; }

    .view-switcher-btn:disabled,
    .view-switcher-btn.active {
      background: linear-gradient(135deg, #5810c5, #7a30e0);
      color: #fff;
      cursor: default;
      pointer-events: none;
    }

    .view-switcher-btn:not(:disabled):hover {
      background: #f0ebff;
      color: #5810c5;
    }

    /* =============================================
       PAGINACIÓN — top y bottom
       ============================================= */
    .stock-pagination {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      flex-wrap: wrap;
      margin: 0.75rem 1rem;
    }

    .stock-pagination.top { justify-content: center; }
    .stock-pagination.bottom { justify-content: center; }

    .pg-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      height: 32px;
      padding: 0 0.5rem;
      border-radius: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
      background: #fff;
      color: #3a3a3a;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1),
                  0 0 0 1px #e9ecef;
    }

    .pg-btn:hover {
      background: #f0ebff;
      color: #5810c5;
      box-shadow: 0 2px 8px rgba(88,16,197,0.15),
                  0 0 0 1px #5810c5;
      transform: translateY(-1px);
    }

    .pg-btn.active {
      background: linear-gradient(135deg, #C52110, #e03030);
      color: #fff;
      box-shadow: 0 3px 10px rgba(197,33,16,0.3),
                  0 0 0 2px #fff,
                  0 0 0 4px #C52110;
      cursor: default;
    }

    .pg-btn.prev-next {
      font-size: 0.9rem;
      background: linear-gradient(135deg, #5810c5, #C52110);
      color: #fff !important;
      box-shadow: 0 3px 10px rgba(88,16,197,0.25);
    }

    .pg-btn.prev-next i { color: #fff !important; }

    .pg-info {
      font-size: 0.72rem;
      color: #6c757d;
      font-weight: 600;
      padding: 0 0.5rem;
    }

    .form-check-input:disabled { opacity: 1; }

  

    .ygo-cards-grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 1.25rem; padding: 1rem 1rem 0.5rem;
  }
  .ygo-card-item {
    position: relative; background: #fff; border-radius: 12px;
    box-shadow: 0 .15rem 1.75rem rgba(33,40,50,0.13); overflow: hidden;
    width: 340px; transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
  }
  .ygo-card-item:hover { transform: translateY(-3px); box-shadow: 0 .5rem 2rem rgba(0,0,0,0.15); }
  .ygo-card-stripe {
    position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, #5810c5, #C52110);
    border-radius: 12px 0 0 12px;
  }
  .ygo-card-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1rem 0.75rem 1.25rem;
    background: #f8f9fa; border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .ygo-card-img-wrap { width: 90px; flex-shrink: 0; }
  .ygo-card-img-wrap img { width: 90px; border-radius: 6px; object-fit: contain; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  .ygo-card-title-block { flex: 1; min-width: 0; }
  .ygo-card-name { font-size: 0.82rem; font-weight: 700; color: #2d2d2d; margin: 0 0 0.35rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ygo-card-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; }
  .ygo-badge { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.04rem; }
  .ygo-badge.rarity {
    background: #1a1a2a;
    border: 1px solid rgba(255,255,255,0.15);
    color: #ccc;
  }
  .ygo-badge.set { background: linear-gradient(135deg, #C52110, #e03030); color: #fff; }
  .ygo-badge.sm { font-size: 0.6rem; padding: 2px 5px; }
  .ygo-card-controls { padding: 0.75rem 1rem 0.85rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
  .ygo-ctrl-row { display: flex; gap: 0.5rem; }
  .ygo-ctrl-group { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
  .ygo-ctrl-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08rem; color: #9a9a9a; margin: 0; }
  .ygo-checks-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
  .ygo-check-item { flex-shrink: 0; }
  .ygo-check-wrap { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; border-radius: 8px; background: #f5f5f5; border: 1px solid #e0e0e0; cursor: pointer; }
  .ygo-check-wrap.featured { background: #fdf5ff; border-color: #d4aaff; }
  .ygo-check-icon { font-size: 0.8rem; color: #555; }
  .ygo-check-icon.featured { color: #5810c5; }
  .ygo-actions-row { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
  .ygo-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.76rem; font-weight: 700; border: none; cursor: pointer; text-decoration: none; transition: transform 0.15s, filter 0.15s; }
  .ygo-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
  .ygo-btn.edit { flex: 1; justify-content: center; background: linear-gradient(135deg, #5810c5, #7a30e0); color: #fff; box-shadow: 0 2px 8px rgba(88,16,197,0.25); }
  .ygo-btn.edit i { color: #fff !important; }
  .ygo-btn.danger { background: linear-gradient(135deg, #C52110, #e03030); color: #fff; box-shadow: 0 2px 8px rgba(197,33,16,0.25); }
  .ygo-btn.danger i { color: #fff !important; }
  .ygo-btn.sm { padding: 0.3rem 0.6rem; font-size: 0.72rem; }
  .ygo-table-wrap { margin: 0.75rem 1rem; border-radius: 12px; overflow: hidden; box-shadow: 0 .15rem 1.75rem rgba(33,40,50,0.12); }
  .ygo-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.8rem; margin: 0; }
  .ygo-table thead tr { background: linear-gradient(135deg, #333 0%, #5810c5 100%); }
  .ygo-table thead th { color: #fff; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06rem; padding: 0.65rem 0.6rem; text-align: center; border: none; white-space: nowrap; position: sticky; top: 0; z-index: 2; }
  .ygo-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
  .ygo-table tbody tr:hover { background: #faf8ff; }
  .ygo-table-row.ygo-row-featured { background: #fdf5ff; border-left: 3px solid #5810c5; }
  .ygo-table tbody td { padding: 0.45rem 0.5rem; vertical-align: middle; text-align: center; }
  .ygo-table-thumb { width: 36px; height: 50px; object-fit: contain; border-radius: 4px; }
  .ygo-table-name { text-align: left !important; font-weight: 600; font-size: 0.78rem; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .ygo-table-input { min-width: 60px; font-size: 0.76rem; }
  .ygo-table-select { min-width: 55px; font-size: 0.76rem; padding: 0.2rem 0.3rem; }