/* Tikitago — pulido superficial canónico.
   Única capa tardía compartida para Inicio/Admin Centro.
   La sección HOME está explícitamente acotada por data-tg-page-kind="home".
   Sustituye las antiguas capas reversibles cd-design-v2.css y cd-global-v3.css. */

/* ===== SUPERFICIES COMPARTIDAS ===== */
/* Superficies compartidas consolidadas.
   Este bloque ya no depende de una hoja versionada histórica. */

/* ── 0 · VARIABLES EXTRA ────────────────────────────────────────── */
:root {
  --grad-gold: linear-gradient(135deg,#ffe89a,var(--n-oro,#f5c842),var(--n-oro,#f5c842));
  --grad-purple: linear-gradient(135deg,#b89cff,var(--n-viol,#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; }

/* ── 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; }

/* ── 6 · KPIs y cards del admin — superficies más ricas ─────────── */
.kpi {
  background: var(--grad-surface);
  border: 1px solid var(--b2);
  border-radius:var(--r-md,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,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); }

/* ── 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%; }
/* 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; }
}

/* ── 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:var(--r-full,999px); cursor:pointer;
  font-family:var(--fd,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,sans-serif); font-size:15px; }

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

/* ── 20 · SOPORTE: reservado para acciones específicas del módulo ───── */
/* ── 21 · BADGES DE ESTADO (hold/pending/approved/rejected/paid) ─── */
.st { display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:var(--r-lg,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:var(--n-oro,#f5c842); }
.st-pending::before { background:var(--n-oro,#f5c842); box-shadow:0 0 6px var(--n-oro,#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:var(--n-viol,#9d6bff); }
.st-hold::before { background:var(--n-viol,#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; }



/* ===== PULIDO EXCLUSIVO DE INICIO ===== */
/* Pulido exclusivo de Inicio, acotado por data-tg-page-kind="home".
   Mantiene las reglas visuales aprobadas dentro de la fuente canónica:

     · Radio único:   12px componentes (--r) · 8px pequeños (--r-s) · 16px hojas (--r-l)
     · Dorado = ACCIÓN (botón primario, foco, selección)
     · Violeta = solo PREMIUM (no se toca aquí; la limpieza por-componente
       se hará con capturas reales de Max, no a ciegas)
     · Verde = solo EN VIVO / éxito
     · Superficies mate: borde 1px rgba + brillo interior sutil (cristal robusto)
     · Estados completos: hover / active / focus-visible / disabled
     · Utilidades nuevas: skeletons (.cd-skel*) y estados vacíos (.cd-empty*)

   Todos los selectores de componentes citados EXISTEN en cd-main.css
   (.btn/.btn-sm/.btn-ghost/.card/.modal/.pill…) — verificado.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Escala de tokens (completa la existente, no la pisa) ─────────────── */
html[data-tg-page-kind="home"]{
  --r-s:8px;            /* radio pequeño: chips, tags, mini-botones            */
  --r-l:16px;           /* radio grande: modales, hojas, tarjetas hero          */
  --bd:rgba(255,255,255,.06);       /* borde estándar (igual a --b)             */
  --bd-hi:rgba(255,255,255,.12);    /* borde en hover/foco de superficie        */
  --glow-gold:0 0 0 3px rgba(245,200,66,.22);   /* anillo de foco (acción)      */
  --sh-1:0 2px 10px rgba(0,0,0,.35);            /* sombra suave (reposo)        */
  --sh-2:0 10px 30px rgba(0,0,0,.45);           /* sombra media (elevado/hover) */
  --sh-in:inset 0 1px 0 rgba(255,255,255,.04);  /* brillo interior mate         */
}

/* ── 2 · Base: selección, foco accesible, scrollbar con presencia ─────────── */
html[data-tg-page-kind="home"] ::selection{background:rgba(245,200,66,.28);color:#fff}
html[data-tg-page-kind="home"] :focus-visible{outline:none;box-shadow:var(--glow-gold)}/* ── 3 · Radio ÚNICO en componentes clave (fin de la dispersión 3–20px) ───── */
html[data-tg-page-kind="home"] .btn, html[data-tg-page-kind="home"] .btn-red, html[data-tg-page-kind="home"] .btn-ghost, html[data-tg-page-kind="home"] input[type="text"], html[data-tg-page-kind="home"] input[type="email"], html[data-tg-page-kind="home"] input[type="password"], html[data-tg-page-kind="home"] input[type="number"], html[data-tg-page-kind="home"] input[type="search"], html[data-tg-page-kind="home"] input[type="url"], html[data-tg-page-kind="home"] select, html[data-tg-page-kind="home"] textarea{border-radius:var(--r)}
html[data-tg-page-kind="home"] .btn-sm, html[data-tg-page-kind="home"] .ar-filter-btn{border-radius:var(--r-s)}
html[data-tg-page-kind="home"] .pill{border-radius:var(--r-full,999px)}   /* la pastilla es cápsula por diseño — se respeta, solo se unifica el valor */
html[data-tg-page-kind="home"] .card{border-radius:var(--r)}
html[data-tg-page-kind="home"] .modal{border-radius:var(--r-l)}

/* ── 4 · Superficies mate "cristal robusto": borde fino + brillo interior ─── */
html[data-tg-page-kind="home"] .card{
  border:1px solid var(--bd);
  box-shadow:var(--sh-1),var(--sh-in);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
html[data-tg-page-kind="home"] .card:hover{border-color:var(--bd-hi);box-shadow:var(--sh-2),var(--sh-in)}
html[data-tg-page-kind="home"] .modal{border:1px solid var(--bd-hi);box-shadow:var(--sh-2),var(--sh-in)}

/* ── 5 · Botones: estados COMPLETOS y consistentes ────────────────────────── */
html[data-tg-page-kind="home"] .btn, html[data-tg-page-kind="home"] .btn-sm, html[data-tg-page-kind="home"] .btn-red, html[data-tg-page-kind="home"] .btn-ghost, html[data-tg-page-kind="home"] .cc-btn, html[data-tg-page-kind="home"] .ar-action-btn{
  transition:transform .12s ease,filter .15s ease,box-shadow .15s ease,border-color .15s ease;
}
html[data-tg-page-kind="home"] .btn:hover, html[data-tg-page-kind="home"] .btn-sm:hover{filter:brightness(1.07)}
html[data-tg-page-kind="home"] .btn:active, html[data-tg-page-kind="home"] .btn-sm:active, html[data-tg-page-kind="home"] .btn-red:active{transform:translateY(1px) scale(.99);filter:brightness(.96)}
html[data-tg-page-kind="home"] .btn:focus-visible, html[data-tg-page-kind="home"] .btn-sm:focus-visible, html[data-tg-page-kind="home"] .btn-red:focus-visible, html[data-tg-page-kind="home"] .btn-ghost:focus-visible{box-shadow:var(--glow-gold)}
html[data-tg-page-kind="home"] .btn:disabled, html[data-tg-page-kind="home"] .btn-sm:disabled, html[data-tg-page-kind="home"] .btn-red:disabled, html[data-tg-page-kind="home"] .btn[disabled], html[data-tg-page-kind="home"] .btn-sm[disabled]{opacity:.62;cursor:not-allowed;transform:none;filter:none}
html[data-tg-page-kind="home"] .btn-ghost{border:1px solid var(--bd)}
html[data-tg-page-kind="home"] .btn-ghost:hover{border-color:var(--bd-hi);background:rgba(255,255,255,.04)}

/* ── 6 · Inputs: reposo sereno, foco DORADO (acción) ──────────────────────── */
html[data-tg-page-kind="home"] input[type="text"], html[data-tg-page-kind="home"] input[type="email"], html[data-tg-page-kind="home"] input[type="password"], html[data-tg-page-kind="home"] input[type="number"], html[data-tg-page-kind="home"] input[type="search"], html[data-tg-page-kind="home"] input[type="url"], html[data-tg-page-kind="home"] select, html[data-tg-page-kind="home"] textarea{
  border:1px solid var(--bd);
  transition:border-color .15s ease,box-shadow .15s ease;
}
html[data-tg-page-kind="home"] input[type="text"]:focus, html[data-tg-page-kind="home"] input[type="email"]:focus, html[data-tg-page-kind="home"] input[type="password"]:focus, html[data-tg-page-kind="home"] input[type="number"]:focus, html[data-tg-page-kind="home"] input[type="search"]:focus, html[data-tg-page-kind="home"] input[type="url"]:focus, html[data-tg-page-kind="home"] select:focus, html[data-tg-page-kind="home"] textarea:focus{
  outline:none;border-color:rgba(245,200,66,.55);box-shadow:var(--glow-gold);
}
html[data-tg-page-kind="home"] input::placeholder, html[data-tg-page-kind="home"] textarea::placeholder{color:rgba(240,240,248,.34)}

/* ── 7 · Jerarquía numérica: las CIFRAS son la sensación premium ──────────── */
html[data-tg-page-kind="home"] .cd-num{font-family:var(--fd);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.3px}

/* ── 8 · SKELETONS (cargando sin saltos) — listos para el JS ──────────────── */
html[data-tg-page-kind="home"] .cd-skel{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:var(--r-s)}
@keyframes  cdSkel{to{transform:translateX(100%)}}
html[data-tg-page-kind="home"] .cd-skel-line.w40{width:40%}

/* ── 9 · ESTADOS VACÍOS con diseño (adiós al hueco en blanco) ─────────────── */
html[data-tg-page-kind="home"] .cd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:34px 18px;text-align:center;border:1px dashed var(--bd-hi);
  border-radius:var(--r);background:rgba(255,255,255,.02)}
html[data-tg-page-kind="home"] .cd-empty-ico{font-size:34px;line-height:1;opacity:.85;filter:grayscale(.15)}
html[data-tg-page-kind="home"] .cd-empty-title{font-family:var(--fd);font-weight:800;font-size:15px;color:var(--tx)}
html[data-tg-page-kind="home"] .cd-empty-hint{font-size:12.5px;color:rgba(240,240,248,.55);max-width:320px}
html[data-tg-page-kind="home"] .cd-empty .btn, html[data-tg-page-kind="home"] .cd-empty .btn-sm{margin-top:6px}

/* ── 10 · Movimiento con respeto (accesibilidad) ──────────────────────────── */
@media  (prefers-reduced-motion:reduce){
  html[data-tg-page-kind="home"] .card, html[data-tg-page-kind="home"] .btn, html[data-tg-page-kind="home"] .btn-sm, html[data-tg-page-kind="home"] .btn-red, html[data-tg-page-kind="home"] .btn-ghost{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LENGUAJE "LÍQUIDO VIVO" — barrido cohesivo (aprobado 11-jul).
   Se aplica a las clases COMPARTIDAS para que todo el sitio herede el mismo
   diseño de una vez (sin zonas parchadas). Paleta intacta: oro=acción/dinero,
   verde --live=en vivo/éxito, violeta=acento/premium, rojo=peligro/batalla.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LIVE TILE (.cmp-card): respira, sin caja-dentro-de-caja ──────────────── */
html[data-tg-page-kind="home"] .cmp-card{position:relative;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
html[data-tg-page-kind="home"] .cmp-card::after{content:"";position:absolute;left:-60%;top:0;bottom:0;width:50%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,232,150,.09),transparent);transition:left .55s}
html[data-tg-page-kind="home"] .cmp-card:hover::after{left:130%}
/* anillo de VIDA verde alrededor del avatar del live */
html[data-tg-page-kind="home"] .cmp-av{position:relative}
html[data-tg-page-kind="home"] .cmp-av::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--live,#00e896);will-change:transform,box-shadow;
  box-shadow:0 0 12px rgba(0,232,150,.5);animation:cdLiveRing 2s ease-in-out infinite;pointer-events:none}
@keyframes  cdLiveRing{0%,100%{box-shadow:0 0 10px rgba(0,232,150,.55);transform:scale(1)}50%{box-shadow:0 0 26px rgba(0,232,150,1);transform:scale(1.06)}}
/* el #1 respira ORO con un hairline superior (no un borde más) */
/* stats como texto con glifo (verde para viewers, oro para destacados) */
/* ── EYEBROW / título de sección con punto sonar (para cabeceras "en vivo") ── */
html[data-tg-page-kind="home"] .card-title.cd-eye, html[data-tg-page-kind="home"] .cd-eye{display:inline-flex;align-items:center;gap:9px}
html[data-tg-page-kind="home"] .cd-eye .cd-sonar{position:relative;width:9px;height:9px;flex-shrink:0}
html[data-tg-page-kind="home"] .cd-eye .cd-sonar::before, html[data-tg-page-kind="home"] .cd-eye .cd-sonar::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live)}
html[data-tg-page-kind="home"] .cd-eye .cd-sonar::after{animation:cdSonar 1.8s ease-out infinite}
html[data-tg-page-kind="home"] .cd-eye.gold .cd-sonar::before, html[data-tg-page-kind="home"] .cd-eye.gold .cd-sonar::after{background:var(--coin)}
html[data-tg-page-kind="home"] .cd-eye.purple .cd-sonar::before, html[data-tg-page-kind="home"] .cd-eye.purple .cd-sonar::after{background:var(--acc)}
@keyframes  cdSonar{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.4);opacity:0}}

/* ── BOTONES: lenguaje único (oro acción · verde live · glass · violeta pro) ── */
html[data-tg-page-kind="home"] .btn, html[data-tg-page-kind="home"] .btn-crystal, html[data-tg-page-kind="home"] .btn-red, html[data-tg-page-kind="home"] .btn-pur, html[data-tg-page-kind="home"] .btn-sm{transition:transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,filter .2s,border-color .15s}
html[data-tg-page-kind="home"] .btn:hover, html[data-tg-page-kind="home"] .btn-crystal:hover{transform:translateY(-1px)}
html[data-tg-page-kind="home"] .btn:active, html[data-tg-page-kind="home"] .btn-crystal:active, html[data-tg-page-kind="home"] .btn-red:active, html[data-tg-page-kind="home"] .btn-sm:active{transform:translateY(0) scale(.98)}
html[data-tg-page-kind="home"] .btn:focus-visible, html[data-tg-page-kind="home"] .btn-crystal:focus-visible, html[data-tg-page-kind="home"] .btn-red:focus-visible, html[data-tg-page-kind="home"] .btn-sm:focus-visible{box-shadow:var(--glow-gold);outline:none}
/* estados vacíos: ilustración propia (arco líquido) en vez de emoji plano cuando aplique */
html[data-tg-page-kind="home"] .cd-empty-arc{width:120px;height:64px;margin:0 auto 12px;border-radius:0 0 120px 120px;
  border:2px solid rgba(0,232,150,.5);border-top:none;position:relative}
html[data-tg-page-kind="home"] .cd-empty-arc::before{content:"";position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  width:16px;height:20px;border-radius:0 0 50% 50%/0 0 60% 60%;background:var(--coin);
  clip-path:path("M8 0C8 0 0 12 0 15a8 8 0 0016 0c0-3-8-15-8-15z");animation:cdDrop 3s ease-in-out infinite}
@keyframes  cdDrop{50%{transform:translateX(-50%) translateY(5px)}}
html[data-tg-page-kind="home"] .cd-empty.sm{padding:26px 16px}