/* ==========================================================================
   Panel Meme-IA — CSS.
   Base: el diseño anterior del panel (misma tipografía Segoe UI, mismos
   tamaños: hero 42px, cajas 24px, tabla 13.5px). Se mantiene tal cual porque
   al dueño le gustaba. Lo único que se agrega es lo que la estructura nueva
   necesita (gráfico, badges de filtro, login).
   --acc / --acc2 los inyecta index.php: azul PAPER, ámbar REAL.
   ========================================================================== */

:root{--bg:#0a0c10;--card:#12151c;--bd:#232a38;--bd2:#171c25;--mut:#5b657a;--tx:#e7e9ee;--acc:#4f8cff;--acc2:#7c5cff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:radial-gradient(1400px 700px at 85% -20%,color-mix(in srgb,var(--acc) 9%,#0a0c10) 0%,var(--bg) 60%);color:var(--tx);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;margin:0;padding:0 0 40px;font-size:15px;line-height:1.5}
a{color:var(--acc);text-decoration:none}
::selection{background:var(--acc);color:#0a0c10}

/* ---------- barra superior ---------- */
.bar{position:sticky;top:0;z-index:20;background:#0d1016e6;backdrop-filter:blur(10px);border-bottom:1px solid var(--bd2);padding:10px 16px;display:flex;align-items:center;gap:10px}
.bar .nm{font-weight:800;font-size:16px;letter-spacing:-.3px;flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.bar .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mut);margin:0;flex:none}
.dot.live{background:#34d399;box-shadow:0 0 8px #34d399}
.dot.slow{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
.dot.down{background:#f87171;box-shadow:0 0 8px #f87171}
.barbtn{background:#1a1f29;border:1px solid var(--bd);border-radius:10px;padding:8px 13px;font-size:13.5px;font-weight:700;color:var(--acc)}
.vsel{background:#1a1f29;color:var(--acc);border:1px solid var(--bd);border-radius:10px;padding:8px 11px;font-size:14px;font-weight:800;font-family:inherit}

/* ---------- layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
/* sin esto un item de grid crece hasta el ancho de su tabla interna (min-width
   auto) y el .scrollx nunca scrollea: la página entera desborda en el celular */
.grid > *{min-width:0}
@media(min-width:920px){
    .g2{grid-template-columns:1fr 1fr}
    /* 3 columnas IGUALES: con "1.2fr 1fr 1fr" las cajas de adentro quedaban
       apretadas y el ancho distinto se veía desprolijo */
    .g3{grid-template-columns:repeat(3,1fr)}
    body{font-size:14.5px}
}
.card{background:linear-gradient(180deg,#13161e 0%,#11141b 100%);border:1px solid var(--bd2);border-radius:18px;padding:18px}
.card.hero-card{border-color:color-mix(in srgb,var(--acc) 35%,var(--bd2))}
.lb{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.card > .lb:first-child{margin-top:0}
.hero{font-size:42px;font-weight:800;letter-spacing:-1.8px;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.sub{font-size:14px;color:var(--mut)}
.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.3px}
/* el MODO: es el dato que dice qué está haciendo el bot ahora mismo */
.pill.modo{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.chip{display:inline-block;padding:5px 11px;border-radius:10px;background:#1a1f29;border:1px solid var(--bd2);font-size:12.5px;margin:3px 5px 3px 0;color:#aab3c5;font-variant-numeric:tabular-nums}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
th{color:var(--mut);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:800;text-align:left;padding:8px 7px;border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:10px 7px;border-bottom:1px solid var(--bd2);vertical-align:top}
tr:last-child td{border-bottom:none}
table tr:hover td{background:#161a23}
td.n,th.n{text-align:right;white-space:nowrap}
.s{font-size:11.5px;color:var(--mut);line-height:1.4}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px;padding:0 6px}

/* ---------- tarjetitas de datos (un dato por tarjeta) ---------- */
.tile{background:#0d1016;border:1px solid var(--bd2);border-radius:14px;padding:12px;min-width:0}
.tile .tv{font-size:22px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* saldo: 3 datos. "Ganado y perdido": 4. En pantalla chica, 2 por fila. */
.tile3,.tile4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
/* los 4 datos del saldo REAL en UNA sola línea, también en el celular */
.tilelinea{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
@media(max-width:480px){.tilelinea .tv{font-size:14.5px}.tilelinea .s{font-size:10px}.tilelinea .tile{padding:9px 8px}}
@media(min-width:760px){
    .tile3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .tile4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- cabecera de la tarjeta del saldo (título + modo) ---------- */
.cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- estado del bot dentro de la tarjeta del saldo ---------- */
.estado{margin-top:16px;padding-top:12px;border-top:1px solid var(--bd2)}
.er{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0}
.er .ev{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;min-width:0;overflow-wrap:anywhere}

/* ---------- texto con color ---------- */
.pos{color:#34d399}.neg{color:#f87171}.warn{color:#f59e0b}.mut{color:var(--mut)}
.strong{font-weight:800}

/* ---------- badges de motivo / veredicto ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.badge.pos{background:#34d3991f;color:#34d399}
.badge.neg{background:#f871711f;color:#f87171}
.badge.warn{background:#f59e0b1f;color:#f59e0b}
.badge.info{background:#60a5fa1f;color:#60a5fa}
.badge.mut{background:#1a1f29;color:var(--mut)}

/* ---------- gráfico ---------- */
.chart{width:100%;height:280px}
.leyenda{font-size:12px;color:var(--mut);margin-top:8px}
.leyenda b{color:#aab3c5}

/* ---------- estados / botones ---------- */
.empty{color:var(--mut);font-size:13.5px;padding:16px 0;text-align:center}
.btn{display:block;width:100%;padding:15px;border-radius:14px;border:none;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;text-align:center}
.btn-acc{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#0d1016}
.btn-gh{background:#1a1f29;color:var(--acc);border:1px solid var(--bd)}
.note{font-size:13px;color:var(--mut);line-height:1.7}

/* ---------- paginación ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--bd2);font-size:13.5px;white-space:nowrap}
.pager .off{color:#2f3744;padding:8px 14px}
.pager span.s{padding:8px 0}

/* ---------- modal (wallet) ---------- */
.modal{display:none;position:fixed;inset:0;z-index:50;background:#000000d9;backdrop-filter:blur(4px);padding:16px;overflow-y:auto}
.modal:target{display:flex;align-items:flex-start;justify-content:center}
.modal .inner{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:22px;max-width:540px;width:100%;margin-top:44px;box-shadow:0 40px 100px -20px #000}
.addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;background:#0a0c10;border:1px solid var(--bd);border-radius:12px;padding:12px;margin-top:8px;line-height:1.6}
.x{float:right;color:var(--mut);font-size:24px;line-height:1;padding:0 4px}

/* ---------- login ---------- */
.login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
.login form{background:#12151cf2;border:1px solid var(--bd);padding:34px;border-radius:20px;width:100%;max-width:330px;box-shadow:0 30px 80px -20px #000}
.login h1{margin:0 0 4px;font-size:26px;letter-spacing:-.5px}
.login input{width:100%;padding:14px;margin-top:16px;border-radius:12px;border:1px solid #2a3140;background:var(--bg);color:#fff;box-sizing:border-box;font-size:16px;font-family:inherit}
.login input:focus{outline:none;border-color:var(--acc)}
.login .btn{margin-top:14px}
.err{color:#f87171;margin-top:12px;font-size:13px}

/* ---------- móvil chico: MISMO diseño, solo más aire útil ----------
   En 360-480px el padding doble (wrap 16 + card 18) roba 68px de ancho y el
   hero de 42px con "$10,134.83" queda al borde del corte. Se achican los
   márgenes y una talla los números, nada más — tipografía y estructura
   intactas. */
@media(max-width:480px){
    .wrap{padding:10px}
    .grid{gap:10px;margin-bottom:10px}
    .card{padding:14px;border-radius:16px}
    .hero{font-size:34px;letter-spacing:-1.4px}
    .tile .tv{font-size:19px}
    th{padding:7px 5px}
    td{padding:8px 5px}
    .chart{height:220px}
    .bar{padding:8px 10px}
    .modal .inner{padding:16px;margin-top:16px}
}

/* ---------- etiquetas de carril (edad del token) ----------
   El bot etiqueta cada trade por edad al entrar; el color del chip es el
   mismo en tablas y en la tarjeta de competencia. Mismo markup en PHP y JS. */
.carril{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:1px 7px;border-radius:20px;border:1px solid;margin-left:6px;vertical-align:middle;white-space:nowrap}
.c-bebe{color:#34d399;border-color:#34d39955;background:#34d39914}
.c-medio{color:#4f8cff;border-color:#4f8cff55;background:#4f8cff14}
.c-veterano{color:#f59e0b;border-color:#f59e0b55;background:#f59e0b14}

/* ---------- títulos de sección por carril ---------- */
.sec-title{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:800;padding:4px 18px 8px}

/* ---------- filtros historial ---------- */
.hist-filtros{display:flex;gap:6px;margin:8px 0 10px;flex-wrap:wrap}
.hf-btn{font-size:12px;font-weight:600;padding:3px 12px;border-radius:20px;border:1px solid #ffffff22;color:#999;text-decoration:none;cursor:pointer;transition:opacity .15s}
.hf-btn:hover{opacity:.8}
.hf-btn.hf-act{color:#fff;border-color:#ffffff44;background:#ffffff14}
.hf-btn.carril.hf-act.c-bebe{color:#34d399;border-color:#34d39966;background:#34d39922}
.hf-btn.carril.hf-act.c-medio{color:#4f8cff;border-color:#4f8cff66;background:#4f8cff22}
.hf-btn.carril.hf-act.c-veterano{color:#f59e0b;border-color:#f59e0b66;background:#f59e0b22}

/* ---------- accesibilidad ---------- */
@media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
}

/* semáforo de carriles debajo del gráfico */
.sem-row{display:flex;justify-content:center;gap:14px;margin-top:10px;padding-top:8px;border-top:1px solid var(--bd2)}
.sem{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.3px;cursor:default}
.sem-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sem-on .sem-dot{background:#34d399;box-shadow:0 0 6px #34d39988}
.sem-off .sem-dot{background:#ef5350;box-shadow:0 0 6px #ef535088}
.sem-on{color:#34d399}
.sem-off{color:#ef5350}
#ultimaOp{margin-left:auto}