/* tipster_profile.css — Perfil público /tipsters/<slug> + tarjeta de jugada (§10/§14).
   Se apoya en los tokens/clases ya definidos en tipsters.css (:root, .tp-card, .tp-tabs,
   .tp-pill, .tp-isolation, .tp-empty, .tp-ver, .tp-follow, .tp-sport-row/.tp-sport-bar):
   este archivo solo agrega lo NUEVO de la página de perfil y de la tarjeta de jugada,
   sin duplicar tokens (DRY). */

.tpp{padding-top:18px;}
.tpp-crumb{margin-bottom:14px;}
.tpp-crumb a{color:var(--mut);font:600 11.5px "JetBrains Mono",monospace;text-decoration:none;letter-spacing:.04em;}
.tpp-crumb a:hover{color:var(--cyan);}

/* ── Encabezado del perfil (v2 — banner grande + avatar grande + tema dinámico
   extraído de las fotos reales del tipster, estilo Twitch/YouTube) ──
   --tpp-accent-rgb lo sobreescribe tipster_profile.js tras muestrear los píxeles
   reales de la portada/avatar (extractPalette). El valor de acá es solo el
   respaldo mientras carga o si la extracción falla (imagen cross-origin, etc). */
.tpp-header{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;margin:16px 0 20px;position:relative;
  --tpp-accent-rgb:124,255,36;}

/* aspect-ratio:3/1 — la MISMA proporción que ya fuerza el recortador de portada
   en tipster_admin.js/tipster_dashboard.js al subir la foto ("Portada panorámica
   3:1"). Si el contenedor calza con esa proporción real, bg-size:contain y
   :cover dan el mismo resultado exacto (cero recorte Y cero franja negra) —
   por eso el banner "grande estilo Twitch" se logra subiendo max-height, NO
   reemplazando el aspect-ratio por una altura fija (eso fue lo que causó la
   franja negra: un 3:1 real metido en una caja mucho más alta que 3:1 deja
   huecos arriba/abajo con contain). El fondo con degradados del color extraído
   solo se ve en el margen que pueda faltar por portadas viejas subidas antes
   de existir el recortador — con las de ahora, prácticamente invisible. */
.tpp-banner{width:100%;aspect-ratio:3/1;max-height:420px;position:relative;overflow:hidden;
  background-color:#0b0f16;
  background-image:
    radial-gradient(120% 140% at 15% -10%,rgba(var(--tpp-accent-rgb),.35),transparent 60%),
    radial-gradient(120% 140% at 85% 110%,rgba(var(--tpp-accent-rgb),.22),transparent 55%),
    linear-gradient(160deg,rgba(var(--tpp-accent-rgb),.16),rgba(8,12,18,.92));
  background-size:cover;background-position:center;
  animation:tppBannerIn .7s ease both;}
.tpp-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8;}
/* El avatar/nombre ya NO se superponen sobre la portada (antes sí, con
   margin-top negativo) — algunos tipsters ponen su Instagram/WhatsApp/lema
   pegado al borde inferior de su propio diseño (caso real: The_king17), y
   ese overlap tapaba justo esa franja. Ahora el header queda siempre debajo,
   así la portada se ve 100% completa sin importar qué tenga cada tipster
   pegado a los bordes. */
.tpp-head-row{display:flex;align-items:flex-end;gap:20px;padding:0 20px;margin-top:16px;
  flex-wrap:wrap;position:relative;z-index:1;}
.tpp-av-wrap{position:relative;width:160px;height:160px;flex:0 0 auto;}
.tpp-av-ring{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--surface2);
  border:4px solid var(--surface);
  box-shadow:0 0 0 3px rgba(var(--tpp-accent-rgb),.9),0 0 28px 5px rgba(var(--tpp-accent-rgb),.4);
  animation:tppAvatarIn .55s .15s cubic-bezier(.2,.8,.2,1) both,
    tppGlowPulse 3.2s ease-in-out .6s infinite;}
.tpp-av-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.tpp-av-wrap .tpp-av-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font:800 48px "Inter",sans-serif;color:#06140e;}
.tpp-av-dot{position:absolute;right:8px;bottom:10px;width:20px;height:20px;border-radius:50%;
  border:3px solid var(--surface);background:var(--mut);
  animation:tppScaleIn .4s .55s cubic-bezier(.2,.8,.2,1) both;}
.tpp-av-dot.active{background:var(--green);box-shadow:0 0 10px 1px rgba(124,255,36,.7);}
.tpp-av-dot.paused{background:var(--amber);}
.tpp-av-dot.suspended{background:var(--red);}
.tpp-id{flex:1;min-width:220px;padding-bottom:10px;animation:tppFadeUp .5s .2s both;}
.tpp-name-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.tpp-name-row h1{font:800 27px "Inter",sans-serif;letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 1px 10px rgba(0,0,0,.35);}
.tp-ver{animation:tppScaleIn .4s .5s cubic-bezier(.2,.8,.2,1) both;}
.tpp-status-pill{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);color:var(--mut);background:var(--surface2);
  border:1px solid var(--line);text-shadow:0 1px 2px rgba(0,0,0,.5);}
.tpp-status-pill.active{color:var(--green);background:var(--green-soft);border-color:var(--green-line);}
.tpp-status-pill.paused{color:var(--amber);background:rgba(255,181,71,.12);border-color:rgba(255,181,71,.3);}
.tpp-status-pill.suspended{color:var(--red);background:rgba(255,77,94,.12);border-color:rgba(255,77,94,.3);}
.tpp-user{font:600 13px "JetBrains Mono",monospace;color:var(--mut);margin-top:4px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);}
.tpp-meta{font-size:11.5px;color:var(--mut2);margin-top:6px;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.tpp-specs{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.tpp-chip{font:600 10.5px "Inter",sans-serif;color:var(--mut);background:var(--surface2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;}

/* ── Acciones del header (Seguir/Mensaje/Donar/Compartir/Ver picks) ── */
.tpp-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 20px 14px;
  margin-top:10px;animation:tppFadeUp .5s .3s both;}
.tpp-ic{width:15px;height:15px;flex:0 0 auto;}
.tpp-actions .tp-follow{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;font-size:11.5px;}
.tpp-follow-count{font:600 10.5px "JetBrains Mono",monospace;color:var(--mut2);white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.5);}
.tpp-sub-btn{padding:9px 18px;border-radius:var(--r-pill);border:none;
  font:700 11.5px "Inter",sans-serif;cursor:pointer;white-space:nowrap;
  background:linear-gradient(90deg,var(--green,#7cff24),#2bd0e0);color:#04141c;}
.tpp-sub-btn.on{background:var(--surface2);border:1px solid var(--green-line);color:var(--green);}
.tpp-act-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);
  border:1px solid var(--line);color:var(--mut);
  border-radius:var(--r-pill);padding:9px 16px;font:700 11.5px "Inter",sans-serif;cursor:pointer;
  white-space:nowrap;transition:color .15s,border-color .15s,background .15s;}
.tpp-act-btn:hover:not(:disabled){color:var(--txt);border-color:rgba(var(--tpp-accent-rgb),.55);}
.tpp-act-btn:disabled{opacity:.65;cursor:not-allowed;}
/* Donar: mismo tratamiento "CTA sólido" que Ver picks, con el color de tema
   real del tipster (no un dorado fijo inventado). */
.tpp-act-donate{background:linear-gradient(90deg,rgba(var(--tpp-accent-rgb),.9),rgba(var(--tpp-accent-rgb),.5));
  color:#04140c;border-color:transparent;}
.tpp-act-primary{background:linear-gradient(90deg,rgba(var(--tpp-accent-rgb),1),rgba(var(--tpp-accent-rgb),.55));
  color:#04140c;border-color:transparent;}
.tpp-act-primary:hover{filter:brightness(1.08);color:#04140c;}

/* ── Estadísticas integradas en el header (datos reales, mismos campos que
   la sección Récord — nunca cifras nuevas, solo se muestran también acá) ── */
.tpp-hstats{display:flex;flex-wrap:wrap;margin:0 20px 4px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);animation:tppFadeUp .5s .4s both;}
.tpp-hstat{flex:1 1 108px;text-align:center;padding:14px 8px;border-right:1px solid var(--line);}
.tpp-hstat:last-child{border-right:none;}
.tpp-hstat-ic{width:15px;height:15px;color:rgba(var(--tpp-accent-rgb),.9);margin-bottom:5px;}
.tpp-hstat b{display:block;font:800 19px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpp-hstat b.pos{color:var(--green);} .tpp-hstat b.neg{color:var(--red);} .tpp-hstat b.mut{color:var(--mut);}
.tpp-hstat span{display:block;margin-top:5px;font:600 8.6px "JetBrains Mono",monospace;letter-spacing:.07em;
  color:var(--mut2);text-transform:uppercase;}

.tpp-bio{padding:14px 20px 20px;color:var(--txt);font-size:13px;line-height:1.6;max-width:760px;white-space:pre-wrap;}
.tpp-socials{display:none;gap:8px;padding:0 20px 18px;flex-wrap:wrap;}
.tpp-social{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--surface2);border:1px solid var(--line);color:var(--mut);
  transition:color .15s,border-color .15s,background .15s;}
.tpp-social:hover{color:var(--accent,var(--green));border-color:var(--accent,var(--green));background:rgba(124,255,36,.08);}
.tpp-social svg{width:16px;height:16px;}

/* ── Animaciones de entrada del header (banner/avatar/badges/stats) ── */
@keyframes tppBannerIn{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:scale(1);}}
@keyframes tppAvatarIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
@keyframes tppScaleIn{from{opacity:0;transform:scale(.3);}to{opacity:1;transform:scale(1);}}
@keyframes tppFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes tppGlowPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(var(--tpp-accent-rgb),.9),0 0 26px 4px rgba(var(--tpp-accent-rgb),.35);}
  50%{box-shadow:0 0 0 3px rgba(var(--tpp-accent-rgb),.9),0 0 38px 9px rgba(var(--tpp-accent-rgb),.6);}
}
@media (prefers-reduced-motion:reduce){
  .tpp-banner,.tpp-av-ring,.tpp-av-dot,.tp-ver,.tpp-id,.tpp-actions,.tpp-hstats{animation:none!important;}
}

/* ── Récord ── */
.tpp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px;margin-bottom:20px;}
.tpp-record-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.tpp-rtile{background:var(--surface2);border:1px solid var(--line);border-radius:12px;
  padding:13px 10px;text-align:center;}
.tpp-rtile b{display:block;font:800 18px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpp-rtile b.pos{color:var(--green);} .tpp-rtile b.neg{color:var(--red);} .tpp-rtile b.mut{color:var(--mut);}
.tpp-rtile span{display:block;margin-top:6px;font:600 8.4px "JetBrains Mono",monospace;letter-spacing:.08em;
  color:var(--mut2);text-transform:uppercase;}
.tpp-last10{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);flex-wrap:wrap;}
.tpp-last10>span{font:700 10px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--mut);
  text-transform:uppercase;}
.tpp-dots{display:flex;gap:5px;flex-wrap:wrap;}
.tpp-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 10px "JetBrains Mono",monospace;}
.tpp-dot.W{background:var(--green-soft);color:var(--green);}
.tpp-dot.L{background:rgba(255,77,94,.14);color:var(--red);}

/* ── Rendimiento por deporte/mercado/cuota ── */
.tpp-breakdowns{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px;}
.tpp-bd-sub{font:500 10px "JetBrains Mono",monospace;color:var(--mut2);margin-top:4px;}

/* ── Pestañas del perfil (Resumen/Picks/Estadísticas/Mercados/Logros/Seguidores) ── */
.tpp-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);
  padding-bottom:0;}
.tpp-tabbtn{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--mut);
  padding:10px 4px;margin-right:16px;font:700 12.5px "Inter",sans-serif;cursor:pointer;
  transition:color .15s,border-color .15s;}
.tpp-tabbtn:hover{color:var(--txt);}
.tpp-tabbtn.on{color:var(--txt);border-bottom-color:rgba(var(--tpp-accent-rgb,124,255,36),1);}
.tpp-tabpanel{animation:tppFadeUp .35s both;}

/* ── Resumen: donut + gráfico de rendimiento + últimos 10 + mejor pick ── */
.tpp-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.tpp-donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.tpp-donut-wrap canvas{flex:0 0 auto;}
.tpp-donut-legend{display:flex;flex-direction:column;gap:6px;flex:1;min-width:120px;}
.tpp-donut-leg-item{display:flex;align-items:center;gap:7px;font:600 11px "Inter",sans-serif;color:var(--mut);}
.tpp-donut-leg-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.tpp-donut-leg-item b{color:var(--txt);font:700 11px "JetBrains Mono",monospace;margin-left:auto;
  font-variant-numeric:tabular-nums;}
.tpp-roi-canvas{width:100%;height:150px;display:block;}
.tpp-bestpick-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tpp-bestpick-row .tpc-logo{width:20px;height:20px;}
.tpp-bestpick-match{font:700 13px "Inter",sans-serif;flex:1;min-width:120px;}
.tpp-bestpick-units{font:800 15px "JetBrains Mono",monospace;color:var(--green);white-space:nowrap;}

/* ── Logros ── */
.tpp-achievements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.tpp-ach{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--green-line);
  border-radius:12px;padding:12px;}
.tpp-ach-ic{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--green-soft);color:var(--green);}
.tpp-ach-ic svg{width:18px;height:18px;}
.tpp-ach b{display:block;font:700 12.5px "Inter",sans-serif;color:var(--txt);}
.tpp-ach span{display:block;font-size:10.5px;color:var(--mut2);margin-top:2px;}

/* ── Seguidores ── */
.tpp-followers-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.tpp-followers-hero b{font:800 34px "JetBrains Mono",monospace;color:var(--txt);font-variant-numeric:tabular-nums;}
.tpp-followers-hero span{font:600 12px "Inter",sans-serif;color:var(--mut);}
.tpp-followers-sub{margin-top:8px;font-size:11.5px;color:var(--mut2);}

/* ── Modal de mensajería directa ── */
.tpp-modal-overlay{position:fixed;inset:0;background:rgba(3,5,9,.72);display:flex;
  align-items:center;justify-content:center;z-index:200;padding:20px;}
/* display:flex de arriba (necesario para centrar el modal cuando SÍ se ve) pisa
   el display:none por defecto de [hidden] — misma especificidad, y esta regla
   cae después en la cascada. Sin este override el modal queda visible desde
   que carga la página en vez de solo al abrirlo. */
.tpp-modal-overlay[hidden]{display:none;}
.tpp-modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  width:100%;max-width:440px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.tpp-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);}
.tpp-modal-head b{font:700 13.5px "Inter",sans-serif;color:var(--txt);}
.tpp-modal-close{background:none;border:none;color:var(--mut);font-size:16px;cursor:pointer;
  padding:4px 8px;line-height:1;}
.tpp-modal-close:hover{color:var(--txt);}
.tpp-msg-thread{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;
  gap:8px;min-height:160px;}
.tpp-msg-bubble{max-width:80%;padding:9px 12px;border-radius:12px;font-size:12.5px;line-height:1.5;
  word-break:break-word;}
.tpp-msg-bubble.mine{align-self:flex-end;background:var(--green-soft);
  border:1px solid var(--green-line);color:var(--txt);}
.tpp-msg-bubble.theirs{align-self:flex-start;background:var(--surface2);
  border:1px solid var(--line);color:var(--txt);}
.tpp-msg-ts{margin-top:4px;font:600 9px "JetBrains Mono",monospace;color:var(--mut2);}
.tpp-msg-compose{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);}
.tpp-msg-compose textarea{flex:1;resize:none;height:40px;background:var(--surface2);
  border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:9px 11px;
  font:500 12.5px "Inter",sans-serif;}
.tpp-msg-compose textarea:focus{outline:none;border-color:var(--green-line);}

/* ── Modal de donación ── */
.tpp-donate-methods{display:flex;gap:8px;flex-wrap:wrap;padding:16px 16px 0;}
.tpp-donate-method{background:var(--surface2);border:1px solid var(--line);color:var(--mut);
  border-radius:var(--r-pill,999px);padding:7px 14px;font:700 12px "Inter",sans-serif;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.tpp-donate-method:hover{border-color:var(--green-line);color:var(--txt);}
.tpp-donate-method.on{background:var(--green-soft);border-color:var(--green-line);color:var(--green);}
.tpp-donate-direct-warn{margin:14px 16px 0;padding:10px 12px;background:rgba(255,181,71,.08);
  border:1px solid rgba(255,181,71,.28);border-radius:10px;color:var(--amber,#ffb547);
  font-size:11.5px;line-height:1.5;}
.tpp-donate-direct-info{margin:14px 16px 16px;padding:14px;background:var(--surface2);
  border:1px solid var(--line);border-radius:12px;}
.tpp-donate-direct-label{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.08em;
  color:var(--mut);text-transform:uppercase;margin-bottom:8px;}
.tpp-donate-direct-value{font:600 14px "Inter",sans-serif;color:var(--txt);word-break:break-word;
  margin-bottom:12px;white-space:pre-wrap;}
.tpp-donate-support{padding:0 16px 16px;font-size:11px;color:var(--mut2);text-align:center;}
.tpp-donate-support a{color:var(--cyan);text-decoration:none;}
.tpp-donate-support a:hover{text-decoration:underline;}
.tpp-donate-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 16px 4px;}
.tpp-donate-amt{background:var(--surface2);border:1px solid var(--line);color:var(--txt);
  border-radius:11px;padding:11px;font:800 14px "JetBrains Mono",monospace;cursor:pointer;
  transition:border-color .15s,background .15s;}
.tpp-donate-amt:hover{border-color:var(--green-line);}
.tpp-donate-amt.on{background:var(--green-soft);border-color:var(--green-line);color:var(--green);}
.tpp-field{padding:10px 16px 0;}
.tpp-field label{display:block;font:600 11px "Inter",sans-serif;color:var(--mut);margin-bottom:6px;}
.tpp-field input,.tpp-field textarea{width:100%;background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;color:var(--txt);padding:9px 11px;font:500 12.5px "Inter",sans-serif;outline:none;}
.tpp-field input:focus,.tpp-field textarea:focus{border-color:var(--green-line);}
.tpp-field textarea{resize:vertical;min-height:56px;}
.tpp-donate-msg-status{padding:8px 16px 0;font-size:12px;line-height:1.5;min-height:16px;}
.tpp-donate-msg-status.err{color:var(--red);}
.tpp-donate-msg-status.ok{color:var(--green);}
#tpp-donate-go{display:flex;justify-content:center;margin:14px 16px 16px;}

/* ── Filtros del historial ── */
.tpp-filters{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.tpp-selects{display:flex;gap:8px;flex-wrap:wrap;}
.tpp-select{background:var(--surface);border:1px solid var(--line);color:var(--mut);
  border-radius:10px;padding:6px 10px;font:600 11.5px "Inter",sans-serif;cursor:pointer;}
.tpp-select:hover{color:var(--txt);}

/* ── Historial: grilla de tarjetas de jugada ── */
.tpp-plays{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;}
.tpp-history{margin-bottom:10px;}

/* ══════════════════════════════════════════════════════════════
   TARJETA DE JUGADA (§10) — reusable, con sellos de aislamiento (§14)
   Prefijo .tpc- para poder reusarla en otras superficies (compartir, feed).
   ══════════════════════════════════════════════════════════════ */
.tpc-card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 32%),var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
  box-shadow:0 14px 32px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);}
.tpc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--mut2),var(--mut));opacity:.6;}
.tpc-card.pending::before{background:linear-gradient(90deg,var(--amber,#ffb547),#ffdca0);opacity:1;}
.tpc-card.live::before{background:linear-gradient(90deg,var(--red),#ff9d9d);opacity:1;}
.tpc-card.won::before{background:linear-gradient(90deg,var(--green),#c6ff8f);opacity:1;}
.tpc-card.lost::before{background:linear-gradient(90deg,var(--red),#ff9d9d);opacity:1;}
.tpc-card.push::before{background:linear-gradient(90deg,var(--cyan),#9be8ff);opacity:1;}
.tpc-card.void::before{background:linear-gradient(90deg,var(--mut2),var(--mut));opacity:1;}
.tpc-card.tpc-late{border-style:dashed;border-color:rgba(255,181,71,.4);}

.tpc-head{display:flex;align-items:center;gap:10px;}
.tpc-av,.tpc-av-ph{width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:var(--surface2);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px rgba(124,255,36,.35);}
.tpc-av{object-fit:cover;}
.tpc-av-ph{display:flex;align-items:center;justify-content:center;font:800 10px "Inter",sans-serif;color:#06140e;}
.tpc-who{flex:1;min-width:0;}
.tpc-who b{display:block;font:700 12px "Inter",sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpc-who span{font:500 10px "JetBrains Mono",monospace;color:var(--mut2);}
.tpc-status{flex:0 0 auto;}

.tpc-match{font:700 13.5px "Inter",sans-serif;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tpc-logo{width:16px;height:16px;object-fit:contain;border-radius:3px;}
.tpc-league{font:600 10px "JetBrains Mono",monospace;color:var(--mut2);text-transform:uppercase;letter-spacing:.05em;}

/* Partido con equipos reales: escudo GRANDE (antes 16px, se veía como un ícono
   suelto) + nombre completo debajo, con VS en medio — el partido es el dato
   principal de la tarjeta. */
.tpc-match-big{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0 2px;}
.tpc-team{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0;max-width:130px;}
.tpc-team-logo-wrap{width:60px;height:60px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,rgba(56,214,255,.1),var(--surface2) 60%);
  border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 auto;box-shadow:0 6px 16px -8px rgba(0,0,0,.6),0 0 0 1px rgba(56,214,255,.12);}
.tpc-team-logo{width:100%;height:100%;object-fit:contain;padding:7px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
.tpc-team-ph{font:800 18px "Inter",sans-serif;color:var(--mut);}
.tpc-team b{font:800 11px "Inter",sans-serif;text-align:center;line-height:1.25;
  overflow-wrap:break-word;color:var(--txt);letter-spacing:.01em;}
.tpc-vs{font:800 11px "JetBrains Mono",monospace;color:var(--mut2);flex:0 0 auto;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--line);
  box-shadow:0 4px 10px -5px rgba(0,0,0,.6);}
.tpc-league-row{text-align:center;font:600 10px "JetBrains Mono",monospace;color:var(--mut2);
  text-transform:uppercase;letter-spacing:.05em;margin-top:-2px;}

.tpc-pick{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;}
.tpc-pick b{display:block;font:700 13px "Inter",sans-serif;color:var(--txt);}
.tpc-pick span{font:600 10.5px "JetBrains Mono",monospace;color:var(--mut2);text-transform:uppercase;
  letter-spacing:.04em;}

.tpc-odds-row{display:flex;gap:16px;flex-wrap:wrap;}
.tpc-odds-row div{text-align:left;}
.tpc-odds-row b{display:block;font:800 13px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--txt);}
.tpc-odds-row span{font:600 8.4px "JetBrains Mono",monospace;letter-spacing:.07em;color:var(--mut2);text-transform:uppercase;}

.tpc-explain{font-size:12px;color:var(--mut);line-height:1.55;}

.tpc-result{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface2);border-radius:10px;padding:8px 11px;font-size:11.5px;}
.tpc-result b{font:800 13px "JetBrains Mono",monospace;}
.tpc-result b.pos{color:var(--green);} .tpc-result b.neg{color:var(--red);} .tpc-result b.mut{color:var(--mut);}

.tpc-seals{display:flex;gap:6px;flex-wrap:wrap;}
.tpc-seal{font:700 8.6px "JetBrains Mono",monospace;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:7px;color:var(--mut);background:var(--surface2);border:1px solid var(--line);
  box-shadow:0 3px 8px -5px rgba(0,0,0,.5);}
.tpc-seal.model{color:var(--amber);background:rgba(255,181,71,.1);border-color:rgba(255,181,71,.28);}
.tpc-seal.role{color:var(--cyan);background:rgba(56,214,255,.08);border-color:rgba(56,214,255,.25);}
.tpc-seal.late{color:var(--red);background:rgba(255,77,94,.1);border-color:rgba(255,77,94,.28);}
.tpc-late-note{font-size:10.5px;color:var(--amber);line-height:1.4;}

.tpc-locked{display:flex;align-items:center;gap:8px;padding:11px;border-radius:10px;
  background:var(--surface2);border:1px dashed rgba(255,181,71,.4);
  color:var(--amber,#ffb547);font:600 12px "Inter",sans-serif;}
.tpc-locked b{font-weight:800;}

.tpc-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.tpc-share{background:var(--surface2);border:1px solid var(--line);color:var(--mut);
  border-radius:var(--r-pill);padding:7px 14px;font:700 10.5px "Inter",sans-serif;cursor:pointer;
  box-shadow:0 4px 12px -8px rgba(0,0,0,.6);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease;}
.tpc-share:hover{color:var(--cyan);border-color:rgba(56,214,255,.4);transform:translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(56,214,255,.3);}

/* Ranking real (por ROI) bajo el nombre en la cabecera de la tarjeta */
.tpc-rank{display:block;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cyan);margin-top:2px;}

/* Pick / Detalle: la jugada, grande y clara, en dos columnas */
.tpc-pickdetail{display:flex;gap:10px;}
.tpc-pick-big,.tpc-detail-big{flex:1;min-width:0;
  background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,0) 60%),var(--surface2);
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.6);}
.tpc-pick-big{border-left:3px solid var(--green);}
.tpc-detail-big{border-left:3px solid var(--cyan);}
.tpc-pick-big span,.tpc-detail-big span{display:block;font:700 9px "JetBrains Mono",monospace;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mut2);margin-bottom:3px;}
.tpc-pick-big b{font:800 16px "Inter",sans-serif;color:var(--green);overflow-wrap:break-word;}
.tpc-detail-big b{font:800 13px "Inter",sans-serif;color:var(--txt);overflow-wrap:break-word;}

/* Confianza real (1-5 -> %), omitida cuando nunca se marcó */
.tpc-conf{background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,0) 60%),var(--surface2);
  border:1px solid var(--line);border-radius:11px;padding:9px 12px;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.6);}
.tpc-conf-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
.tpc-conf-top b{font:800 16px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--txt);}
.tpc-conf-lbl{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--mut2);}
.tpc-conf-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;}
.tpc-conf-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));
  border-radius:4px;box-shadow:0 0 8px rgba(56,214,255,.5);}

.tpc-seal.vip{color:#ffd166;background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.3);}
.tpc-seal.live{color:var(--red);background:rgba(255,77,94,.12);border-color:rgba(255,77,94,.32);}

/* "Ver análisis completo" — abre el Consejo de Atlas real sobre este partido.
   Botón sólido (mismo degradado cian->verde que .tpp-sub-btn en toda la app),
   no una caja translúcida suelta. */
.tpc-consejo{background:linear-gradient(90deg,var(--cyan,#38d8ff),var(--green,#7cff24));
  border:0;color:#04140e;border-radius:var(--r-pill);
  padding:7px 15px;font:800 10.5px "Inter",sans-serif;cursor:pointer;display:inline-flex;
  align-items:center;gap:5px;box-shadow:0 6px 18px -8px rgba(124,255,36,.45);
  transition:transform .15s ease,box-shadow .15s ease;}
.tpc-consejo:hover{transform:translateY(-1px);box-shadow:0 9px 22px -8px rgba(124,255,36,.55);}
.tpc-consejo span{color:#04140e;}

/* Gancho hacia el Consejo de Atlas — visual, no es una barra de progreso real */
.tpc-ai-teaser{display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg,rgba(56,214,255,.05),rgba(255,255,255,0) 60%),var(--surface2);
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.6);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.tpc-ai-teaser:hover{border-color:rgba(56,214,255,.4);transform:translateY(-1px);
  box-shadow:0 8px 20px -8px rgba(56,214,255,.25);}
.tpc-ai-ic{font-size:20px;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(56,214,255,.5));}
.tpc-ai-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.tpc-ai-txt b{font:800 11.5px "Inter",sans-serif;color:var(--txt);}
.tpc-ai-beta{font:700 8px "JetBrains Mono",monospace;letter-spacing:.05em;color:var(--cyan);
  background:rgba(56,214,255,.12);border-radius:5px;padding:1px 5px;margin-left:4px;}
.tpc-ai-txt span{font:500 10.5px "Inter",sans-serif;color:var(--mut);}
.tpc-ai-arrow{font:800 16px "Inter",sans-serif;color:var(--mut2);flex:0 0 auto;}

/* ── Responsive ── */
@media (max-width:900px){
  .tpp-breakdowns{grid-template-columns:1fr;}
  .tpp-record-grid{grid-template-columns:repeat(3,1fr);}
  .tpp-av-wrap{width:128px;height:128px;}
  .tpp-hstat{flex-basis:33.33%;border-bottom:1px solid var(--line);}
  .tpp-summary-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .tpp-banner{max-height:220px;}
  .tpp-head-row{padding:0 14px;gap:12px;}
  .tpp-av-wrap{width:100px;height:100px;}
  .tpp-av-wrap .tpp-av-ph{font-size:32px;}
  .tpp-av-dot{width:16px;height:16px;right:4px;bottom:6px;}
  .tpp-actions{padding:0 14px 12px;}
  .tpp-hstats{margin:0 14px 4px;}
  .tpp-hstat{flex-basis:50%;}
  .tpp-bio{padding:12px 14px 16px;}
  .tpp-record-grid{grid-template-columns:repeat(2,1fr);}
  .tpp-name-row h1{font-size:19px;}
  .tpp-plays{grid-template-columns:1fr;}
  .tpp-filters{flex-direction:column;align-items:stretch;}
  .tpp-selects{flex-direction:column;}
  .tpp-select{width:100%;}
  .tpp-tabbtn{margin-right:10px;font-size:11.5px;padding:8px 2px;}
  .tpp-donut-wrap{flex-direction:column;align-items:flex-start;}
  .tpp-achievements{grid-template-columns:1fr;}
}