/* Panel/style.css (MERGE FINAL) — style actual + backup + compat para script nuevo */

/* ===========================
   BASE
=========================== */
body {
    margin: 0;
    background: #05050A;
    color: white;
    font-family: 'Montserrat', sans-serif;
}

/* HEADER */
#header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-bottom: 2px solid rgba(255, 0, 140, 0.4);
    background: linear-gradient(90deg, rgba(255,0,140,0.12), rgba(0,255,255,0.08));
    box-shadow: 0 0 18px rgba(255, 0, 140, .25);
}

#logo { width: 100px; }

/* BOTONES */
.action-btn {
    background: transparent;
    border: 2px solid #ff008c;
    color: #ff008c;
    padding: 5px 12px;
    border-radius: 7px;
    font-weight: 700;
    font-size: 10px;
    cursor: pointer;
}

/* CONTENEDOR */
#container { width: 97%; margin: auto; }

/* FILAS */
.row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}
.row.row-bottom { align-items: stretch; }
.row.row-bottom .card { flex: 1 1 0; min-width: 0; }

/* CUADROS */
.card {
    background: rgba(10,10,22,0.65);
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(0,255,255,0.35);
    overflow: hidden;
}

/* TITULOS */
.card h2 {
    font-size: 10px;
    font-weight: 700;
    margin: 0 0 4px 0;
    text-align: center;
}

/* LISTAS GRID */
#mcList,
#volList,
#launchList,
#mcLowList,
#mcMidList,
#mcHighList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ===========================
   TOKEN CARD
=========================== */
.tokenCard {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 4px 6px;
    padding: 6px;
    background: linear-gradient(160deg, rgba(20,20,40,0.8), rgba(10,10,22,0.6));
    border-radius: 8px;
    border: 1px solid rgba(255,0,140,0.25);
    transition: 0.25s ease;
    text-align: left;
    position: relative;
}

.tokenCard:hover {
    transform: scale(1.04);
    box-shadow: 0 0 18px rgba(255,0,140,.6);
}

/* TOP 1-3 glow */
.tokenCard:nth-child(1),
.tokenCard:nth-child(2),
.tokenCard:nth-child(3) {
    animation: glowTop 2s infinite alternate;
}
@keyframes glowTop {
    from { box-shadow: 0 0 10px #ff008c; }
    to   { box-shadow: 0 0 18px #00faff; }
}

.tokenImg {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.tokenName {
    grid-column: 2;
    grid-row: 1;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tokenStats {
    grid-column: 2;
    grid-row: 2;
    font-size: 8px;
    color: #ccc;
    font-weight: 600;
}

/* rank badge (#1 #2 #3...) */
.rank{
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    font-weight: 900;
    color: #00faff;
    text-shadow: 0 0 8px rgba(0,255,255,.35);
    z-index: 12;
}

.buyBtn {
    grid-column: 1;
    grid-row: 3;
    background: transparent;
    border: 1px solid #ff008c;
    color: #ff008c;
    padding: 3px 6px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 8px;
}

.buyBtn:hover {
    background: #ff33a8;
    color: black;
}

.buyBtn.disabled {
    background: black;
    color: red;
    pointer-events: none;
    opacity: .75;
    filter: grayscale(0.4);
}

/* VELOCIDAD */
.tokenSpeed {
    position: absolute;
    bottom: 3px;
    right: 3px;
    padding: 1px 3px;
    border-radius: 5px;
    font-size: 7px;
    font-weight: 900;
    z-index: 10;
}

.speedSlow {
    color: #ff2b2b;
    background: rgba(255, 0, 0, 0.18);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
}
.speedFast {
    color: #ffe600;
    background: rgba(255, 230, 0, 0.18);
    box-shadow: 0 0 6px rgba(255, 230, 0, 0.8);
}
.speedTurbo {
    color: #00ff8c;
    background: rgba(0, 255, 140, 0.18);
    box-shadow: 0 0 6px rgba(0, 255, 140, 0.85);
}
.speedCrash {
    color: #ff2b2b;
    background: rgba(255, 0, 0, 0.18);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
}
.speedRug {
    color: #ff2b2b;
    background: rgba(255, 0, 0, 0.25);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.9);
}

/* ===========================
   ALARMAS (CLASES EN TOKENCARD)
=========================== */

/* evita que ::after tape el click */
.tokenCard::after { pointer-events: none; }

/* 🟡 HOT */
.hotToken {
    box-shadow: 0 0 20px rgba(255,230,0,0.8) !important;
    border: 1px solid #ffe600 !important;
}
.hotToken::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./alert-yellow.gif") center/45% no-repeat;
    opacity: 0.9;
    z-index: 6;
    pointer-events: none;
}

/* 🔴 CRASH */
.crashToken {
    border: 2px solid red;
    animation: crashBlink 0.5s infinite alternate;
}
@keyframes crashBlink {
    from { box-shadow: 0 0 6px red; }
    to   { box-shadow: 0 0 24px red; }
}
.crashToken::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./siren.gif") center/55% no-repeat;
    opacity: 0.95;
    z-index: 6;
    pointer-events: none;
}

/* 🟢 PUMP */
.pumpToken {
    box-shadow: 0 0 25px rgba(0,255,120,0.9) !important;
    border: 1px solid #00ff78 !important;
}
.pumpToken::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./siren-green.gif") center/55% no-repeat;
    opacity: 0.9;
    z-index: 6;
    pointer-events: none;
}

/* 🛑 RUG */
.rugToken {
    box-shadow: 0 0 30px rgba(0,0,0,0.95) !important;
    border: 2px solid red !important;
    background: rgba(60, 0, 0, 0.85) !important;
    filter: grayscale(0.9);
}
.rugToken::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./rug.gif") center/65% no-repeat;
    opacity: 0.9;
    z-index: 7;
    pointer-events: none;
}

/* GIF SOBRE CARD (script) */
.signalGif{
    border-radius: 10px;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.25));
}

/* ============================
   ✅ LISTA LIVE (RANKINGS)
=========================== */

#liveList,
#liveListCurrent,
#liveListHistory {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.itemLive {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 6px;
    padding: 6px;
    background: linear-gradient(160deg, rgba(20,20,40,0.8), rgba(10,10,22,0.6));
    border-radius: 8px;
    border: 1px solid rgba(255,0,140,0.25);
    transition: 0.25s ease;
    text-align: left;
    max-height: 58px;
    overflow: hidden;
    box-sizing: border-box;
}

.itemLive:hover {
    transform: scale(1.04);
    box-shadow: 0 0 18px rgba(255,0,140,.6);
}

.liveAvatar {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.liveName {
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
}

.liveF {
    font-size: 8px;
    font-weight: 700;
    color: #ff4b4b;
}

/* ================================
   ✅ CARRUSEL (ANTI ROMPE PANEL)
================================ */

/* El contenedor NUNCA puede crecer en altura */
.carousel-container {
    width: 100%;
    max-height: 70px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: block;
}

/* El carrusel SIEMPRE es horizontal */
.carousel,
#carouselCrypto {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    max-height: 70px;
    width: max-content;
}

/* Cada item JAMÁS puede crecer */
.carousel .item,
#carouselCrypto .item {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;

    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

/* Imágenes del carrusel SIEMPRE chicas */
.carousel .item img,
#carouselCrypto .item img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain;
}

/* ===========================
🚀 NUEVOS LANZAMIENTOS PRO UX
=========================== */

.newLaunchAnim {
  animation: launchGlow 1.2s ease;
  box-shadow: 0 0 18px #00ff9c;
  border: 1px solid #00ff9c;
}

@keyframes launchGlow {
  0%   { transform: scale(0.9); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

.newBadge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #00ff9c;
  color: #000;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 0 10px #00ff9c;
  z-index: 20;
}

#liveListHistory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

#liveListHistory > div {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 10px;
}

/* ===========================
   🟠 WARMUP (pre HOT / pre PUMP)
=========================== */
.warmToken{
  box-shadow: 0 0 22px rgba(255,140,0,0.85) !important;
  border: 1px solid #ff8c00 !important;
}
.warmToken::after{
  content:"";
  position:absolute;
  inset:0;
  background: url("./warmup.gif") center/55% no-repeat;
  opacity: 0.92;
  z-index: 6;
  pointer-events:none;
}

/* velocidad WARM */
.speedWarm{
  color:#ff8c00;
  background: rgba(255,140,0,0.18);
  box-shadow: 0 0 8px rgba(255,140,0,0.85);
}

/* =======================================================================
   ✅ PATCH FINAL (NO BORRA NADA): HISTÓRICO COMPACTO COMO TOP
   - Mantiene TODO lo existente
   - SOLO overridea al final con !important para que el histórico no sea “largo”
   - Más columnas en histórico porque su cuadro ocupa todo el ancho
======================================================================= */

/* 1) Forzar ancho “chico” real por cantidad de columnas */
#liveListHistory{
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important; /* 8 = parecido a TOP (4 cuadros x 2 col) */
  gap: 6px !important;
}

/* 2) Responsive (por si la pantalla es más chica) */
@media (max-width: 1600px){
  #liveListHistory{ grid-template-columns: repeat(6, 1fr) !important; }
}
@media (max-width: 1200px){
  #liveListHistory{ grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 820px){
  #liveListHistory{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* 3) El bloque viejo (#liveListHistory > div) te estaba “pisando” el look de .tokenCard.
      No lo borramos: lo alineamos a tokenCard para que no lo rompa. */
#liveListHistory > div{
  background: linear-gradient(160deg, rgba(20,20,40,0.8), rgba(10,10,22,0.6)) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,0,140,0.25) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* 4) Que el texto nunca “estire” visualmente la card */
#liveListHistory .tokenStats{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* ✅ HISTÓRICO: MC Señal en verde neón */
#liveListHistory .mcSigGreen{
  color:#00ff00;
  font-weight:900;
  text-shadow: 0 0 10px rgba(0,255,0,.65);
}
#liveListHistory .mcSigNeon{
  color:#00ff00 !important;
  font-weight:900 !important;
  text-shadow: 0 0 10px rgba(0,255,0,.65) !important;
}