/* ═══════════════════════════════════════════════════════════════════════════
   cd-global-v3.css — CAPA DE DISEÑO GLOBAL (2026-07-12)
   Corrige inconsistencias visuales, refuerza el lenguaje de diseño,
   añade efectos modernos y repara el responsive. ADITIVA Y REVERSIBLE.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0 · VARIABLES EXTRA ────────────────────────────────────────── */
:root {
  --grad-gold: linear-gradient(135deg,#ffe89a,#f5c842,#f5a623);
  --grad-purple: linear-gradient(135deg,#b89cff,#9d6bff,#6d28d9);
  --grad-surface: linear-gradient(160deg,#1a1a2e,#12121e);
  --glow-purple: 0 0 0 3px rgba(157,107,255,.22);
  --trans-snap: .14s cubic-bezier(.2,.8,.2,1);
  --trans-bounce: .28s cubic-bezier(.2,.85,.25,1.35);
}

/* ── 1 · TOPBAR DE PÁGINA — reemplaza el genérico h1/p plano ────── */
.topbar { margin-bottom:20px; }
.topbar-l h1 {
  font-size:22px; font-weight:900; letter-spacing:-.4px;
  background: var(--grad-gold);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  display:inline-flex; align-items:center; gap:8px;
}
.topbar-l p { font-size:12px; color:var(--tx3); margin:2px 0 0; letter-spacing:.2px; }

/* ── 2 · BOTONES DE TAB (ranking, dropcerdito, etc.) — coherencia */
.btn-sm, .bs-g {
  border-radius:10px !important;
  font-weight:700 !important;
  transition: var(--trans-snap) !important;
}
/* Tab activo del ranking: usa acento dorado en vez del rojo */
#rank-tab-drop.btn-red,
#rank-tab-boost#rank-tab-drop:not(.btn-red),
#rank-tab-boost:not(.btn-red),
.bs-g {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--b2) !important;
  color: var(--tx2) !important;
}
#rank-tab-drop:not(.btn-red):hover,
#rank-tab-boost:not(.btn-red):hover,
.bs-g:hover {
  border-color: rgba(245,200,66,.35) !important;
  color: var(--tx) !important;
}

/* ── 3 · RANKING LIST — tarjetas de posición con diseño real ───── */
#rank-list { padding: 14px 18px; }
.rk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 13px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--b);
  margin-bottom: 6px;
  transition: border-color var(--trans-snap), background var(--trans-snap),
              transform var(--trans-snap);
  cursor: pointer;
}
.rk-item:hover {
  border-color: rgba(245,200,66,.22);
  background: rgba(245,200,66,.04);
  transform: translateX(3px);
}
/* Top 3 dorado/plata/bronce */
.rk-item[data-pos="1"] { border-color: rgba(245,200,66,.38); background: rgba(245,200,66,.06); }
.rk-item[data-pos="2"] { border-color: rgba(192,192,192,.25); }
.rk-item[data-pos="3"] { border-color: rgba(200,120,60,.25); }
.rk-pos {
  width: 28px; text-align: center; font-size: 13px; font-weight:900;
  color: var(--tx3); flex-shrink:0; font-family: var(--fd,'Sora',sans-serif);
}
.rk-item[data-pos="1"] .rk-pos { color: #f5c842; text-shadow: 0 0 12px rgba(245,200,66,.6); }
.rk-item[data-pos="2"] .rk-pos { color: #c0c0c0; }
.rk-item[data-pos="3"] .rk-pos { color: #c87840; }
.rk-av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink:0;
  object-fit: cover; background: var(--sf2);
  border: 1.5px solid var(--b2);
}
.rk-name { flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--tx);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk-val { font-size:12px; font-weight:800; color:#f5c842;
  font-family: var(--fd,'Sora',sans-serif); }

/* ── 4 · SOPORTE — elimina el h1 emoji genérico y uniforme el form */
#page-soporte .topbar-l h1::before { content: none; }
/* El 🎫 se queda como dato — está en HTML, no lo podemos quitar solo con CSS.
   Pero sí podemos mejorar el formulario de ticket */
#form-ticket { padding: 14px 18px; }
#form-ticket > div {
  background: var(--grad-surface) !important;
  border: 1px solid var(--b2) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}
#form-ticket > div > div:first-child {
  font-size: 14px !important; font-weight: 800 !important;
  color: var(--tx) !important; margin-bottom: 16px !important;
  padding-bottom: 12px; border-bottom: 1px solid var(--b);
}

/* ── 5 · PÁGINA DE RANKINGS — cabecera de tabs ───────────────────── */
#page-rankings > div:nth-child(2) {
  padding: 0 18px 14px !important;
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ── 6 · KPIs y cards del admin — superficies más ricas ─────────── */
.kpi {
  background: var(--grad-surface);
  border: 1px solid var(--b2);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color var(--trans-snap), box-shadow var(--trans-snap);
}
.kpi:hover { border-color: rgba(245,200,66,.22); box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.kpi-val { font-size:28px; font-weight:900; font-family:var(--fd,'Sora',sans-serif);
  letter-spacing:-.6px; line-height:1.1; }
.kpi-lbl { font-size:11px; color:var(--tx3); margin-top:4px; letter-spacing:.2px; font-weight:600; }

/* ── 7 · TABLA ADMIN (.tbl) — más aireada y visual ──────────────── */
.tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl thead th {
  text-align:left; padding:9px 12px; font-size:10.5px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase; color:var(--tx3);
  border-bottom: 1px solid var(--b2); background:rgba(255,255,255,.02);
}
.tbl tbody tr { border-bottom:1px solid var(--b); transition:background var(--trans-snap); }
.tbl tbody tr:last-child { border-bottom:none; }
.tbl tbody tr:hover { background:rgba(245,200,66,.04); }
.tbl tbody td { padding:10px 12px; color:var(--tx2); }
.tbl tbody td:first-child { color:var(--tx); }

/* ── 8 · BOTONES ADMIN (.btn, .btn-p, .btn-g, .btn-acc) ─────────── */
/* Base de todos los .btn admin */
/* ── 9 · INPUTS ADMIN (.inp) ─────────────────────────────────────── */
.inp {
  width:100%; padding:9px 12px;
  background:rgba(255,255,255,.04); border:1px solid var(--b2);
  border-radius:10px; color:var(--tx); font-size:13px;
  font-family:var(--fb,'Inter',sans-serif);
  transition:border-color var(--trans-snap), box-shadow var(--trans-snap);
  box-sizing:border-box;
}
.inp:focus { outline:none; border-color:rgba(245,200,66,.5); box-shadow:0 0 0 3px rgba(245,200,66,.14); }

/* ── 10 · TARJETAS DE CAMPAÑA en la lista principal ─────────────── */
.camp-card {
  background: var(--grad-surface);
  border-radius: 16px !important;
  transition: border-color var(--trans-snap), box-shadow var(--trans-snap),
              transform var(--trans-snap) !important;
}
.camp-card:hover {
  border-color: rgba(245,200,66,.28) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(245,200,66,.14) !important;
  transform: translateY(-2px) !important;
}

/* ── 11 · RESPONSIVE: reparaciones específicas ───────────────────── */

/* Mobile: topbar con h1 dorado no se desborda */
@media (max-width:640px) {
  .topbar-l h1 { font-size:17px; }
  .topbar { flex-wrap:wrap; gap:10px; }
  .topbar-r { width:100%; }
  /* Rankings: tabs en columna en mobile */
  #page-rankings > div:nth-child(2) { flex-direction:column; }
  #rank-tab-drop, #rank-tab-boost { width:100% !important; text-align:center; justify-content:center; }
  /* Admin kpi-grid en mobile */
  .kpi-grid { grid-template-columns:1fr 1fr !important; gap:10px !important; }
}
@media (max-width:420px) {
  .kpi-grid { grid-template-columns:1fr !important; }
  .kpi-val { font-size:22px; }
  /* Tabla admin en mobile: scroll horizontal */
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl { min-width:420px; }
}

/* Tablet: rail + contenido */
@media (max-width:820px) {
  .topbar-l h1 { font-size:19px; }
}

/* ── 12 · PÁGINA RANKINGS — cards de posición responsive ─────────── */
@media (max-width:520px) {
  .rk-item { padding:9px 11px; gap:9px; }
  .rk-av { width:30px; height:30px; }
  .rk-name { font-size:12px; }
  .rk-val { font-size:11px; }
}

/* ── 13 · EMPTY STATE (.cd-empty) — ya existe, solo refuerzo ──────── */
.cd-empty { text-align:center; padding:48px 24px; color:var(--tx3); }
.cd-empty-title { font-size:15px; font-weight:700; color:var(--tx2); margin-bottom:6px; }
.cd-empty-hint { font-size:12px; line-height:1.6; max-width:280px; margin:0 auto; }

/* ── 14 · BADGE de plan (FREE/PRO) — más visible ─────────────────── */
.plan-capsule {
  font-size:10px; font-weight:900; letter-spacing:.5px;
  padding:3px 9px; border-radius:999px; cursor:pointer;
  font-family:var(--fd,'Sora',sans-serif);
  transition:filter var(--trans-snap);
}
.plan-capsule:hover { filter:brightness(1.1); }
.plan-capsule.free {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--b2);
  color: var(--tx3);
}
.plan-capsule.pro {
  background: var(--grad-gold);
  border: none;
  color: #1a1205;
  box-shadow: 0 2px 10px rgba(245,166,35,.3);
}

/* ── 15 · NOTIFICACIONES PANEL — superficie coherente ────────────── */
#notif-panel {
  border-radius:16px !important;
  border:1px solid var(--b2) !important;
  background:linear-gradient(180deg,#1c1c2e,#141420) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.55) !important;
}

/* ── 16 · SCROLL DE CONTENIDO PRINCIPAL — más fluido ─────────────── */
.main-area { scroll-behavior: smooth; }
.page { animation: pgFadeIn .22s ease; }
@keyframes pgFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce) { .page { animation:none; } }

/* ── 17 · PICKER DE REGALOS: sheet card coherente ─────────────────── */
.sheet-card {
  background: linear-gradient(180deg,#191627,#111020) !important;
  border:1px solid rgba(245,200,66,.18) !important;
  box-shadow: 0 -24px 60px rgba(0,0,0,.55) !important;
}
.sheet-h b { font-family:var(--fd,'Sora',sans-serif); font-size:15px; }

/* ── 18 · FEED DE ACTIVIDAD — rediseño definitivo (resuelve el conflicto ──
       con la capa v2: aquí gana la cascada y define TODO el layout) ── */
.cd-stream{position:relative;padding-left:0!important}
.cd-stream::before{display:none}          /* fuera la línea de timeline: las tarjetas mandan */
.cd-ev{
  position:relative;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--b);
  border-radius:14px;
  padding:10px 13px;
  margin-bottom:7px;
  min-height:52px;                          /* respiro garantizado: nada se encima */
  transition:border-color var(--trans-snap),background var(--trans-snap),transform var(--trans-snap);
}
.cd-ev::before{display:none}               /* fuera el punto del timeline v2 */
.cd-ev:hover{border-color:var(--b2);background:rgba(255,255,255,.045);transform:translateX(3px)}
.cd-ev.fresh{animation:cdEvSlide .45s cubic-bezier(.2,.85,.3,1.15)}
@keyframes cdEvSlide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
/* Avatar: clicable con anillo al pasar; fallback con gradiente vivo (no gris) */
.cd-ev-av{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1.5px solid var(--b2);
  transition:border-color var(--trans-snap),box-shadow var(--trans-snap),transform var(--trans-snap);
}
.cd-ev-av[onclick]{cursor:pointer}
.cd-ev-av[onclick]:hover{border-color:rgba(245,200,66,.65);box-shadow:0 0 0 3px rgba(245,200,66,.18);transform:scale(1.08)}
.cd-ev-av.ph{
  display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,hsl(var(--avh,265),62%,46%),hsl(calc(var(--avh,265) + 40),70%,34%));
  text-shadow:0 1px 3px rgba(0,0,0,.4);letter-spacing:.02em;
}
/* Cuerpo: DOS líneas con elipsis real (line-clamp), nunca cortado a la mitad */
.cd-ev-body{
  flex:1;min-width:0;font-size:12.5px;line-height:1.42;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;white-space:normal;
}
.cd-ev-body b{font-weight:800;color:var(--tx)}
.cd-ev-body b[onclick]{cursor:pointer;transition:color .12s}
.cd-ev-body b[onclick]:hover{color:#f5c842;text-decoration:underline}
.cd-ev-tm{font-size:10px;color:var(--tx3);font-weight:700;flex-shrink:0;align-self:flex-start;margin-top:3px;font-variant-numeric:tabular-nums}
/* Live: punto rojo pulsante integrado en la tarjeta (no flotando fuera) */
.cd-ev.live{border-color:rgba(255,51,85,.22)}
.cd-ev.live::after{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--red);
  flex-shrink:0;order:-1;margin-right:2px;
  box-shadow:0 0 8px rgba(255,51,85,.8);
  animation:cdEvLivePulse 1.8s ease-in-out infinite;
  position:static;opacity:1;
}
@keyframes cdEvLivePulse{0%,100%{box-shadow:0 0 4px rgba(255,51,85,.5)}50%{box-shadow:0 0 12px rgba(255,51,85,1)}}
@media (prefers-reduced-motion:reduce){.cd-ev.fresh,.cd-ev.live::after{animation:none}}

/* ── 19 · MENSAJES CHAT — feed 9:16 coherente ───────────────────── */
.bub {
  border-radius:14px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.25) !important;
}

/* ── 20 · BOTÓN "+" nuevo ticket soporte — diseño coherente ──────── */
#page-soporte .topbar-r /* ── 21 · BADGES DE ESTADO (hold/pending/approved/rejected/paid) ─── */
.st { display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:20px; font-size:11px; font-weight:700; }
.st::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.st-pending  { background:rgba(245,200,66,.1); color:#f5c842; }
.st-pending::before { background:#f5c842; box-shadow:0 0 6px #f5c842; }
.st-approved, .st-done { background:rgba(0,232,150,.1); color:#00e896; }
.st-approved::before, .st-done::before { background:#00e896; box-shadow:0 0 6px #00e896; }
.st-rejected, .st-failed { background:rgba(255,51,85,.1); color:#ff3355; }
.st-rejected::before, .st-failed::before { background:#ff3355; box-shadow:0 0 6px #ff3355; }
.st-hold { background:rgba(157,107,255,.1); color:#9d6bff; }
.st-hold::before { background:#9d6bff; }
.st-paid, .st-processing { background:rgba(56,189,248,.1); color:#38bdf8; }
.st-paid::before, .st-processing::before { background:#38bdf8; }

/* ── 22 · TOPBAR emoji 🎫 de soporte: ocultarlo visualmente ──────── */
/* No podemos quitarlo del HTML directamente sin JS, pero podemos hacer
   que el h1 use solo texto; el emoji se oculta con ::first-child si es texto.
   Se usa un truco de color-invisible en el pseudo para no romper accesibilidad */
#page-soporte .topbar-l h1 { -webkit-text-fill-color: transparent; }
/* Restaurar color en los SVG hijos */
#page-soporte .topbar-l h1 svg { -webkit-text-fill-color: initial; }

/* ── 23 · RANKINGS: tab de emoji ⚡🚀 quitar emoji vía CSS ──────── */
/* Se maneja en JS en renderRanking, pero el botón inicial tiene texto fijo */
#rank-tab-drop, #rank-tab-boost {
  font-size: 13px !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}