/* ============================================================
   THE CASH TEAM · PREMIUM LAYER (muestra: login + Mi Día)
   Capa que se monta SOBRE styles.css para dar vida sin romper nada.
   Si se aprueba, se carga en todas las páginas vía course.js.
   ============================================================ */

/* ---------- Fondo vivo: aurora que respira ---------- */
@keyframes ctkAurora {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.9 }
  50%     { transform: translate3d(2%, -1.5%, 0) scale(1.08); opacity:1 }
}
body::before { animation: ctkAurora 16s ease-in-out infinite; }
body::after {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,215,102,.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(52,199,89,.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,215,102,.35), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,215,102,.3), transparent);
  background-size: 100% 100%;
  opacity:.4;
  animation: ctkAurora 22s ease-in-out infinite reverse;
}

/* ---------- Entradas suaves al cargar (reveal con vida) ---------- */
@keyframes ctkRise { from { opacity:0; transform: translateY(22px) } to { opacity:1; transform:none } }
.reveal { will-change: opacity, transform; }
.reveal.in { animation: ctkRise .7s cubic-bezier(.2,.7,.2,1) both; }
/* Escalonado: cada hijo entra un poquito después */
.kpi-grid.in .kpi,
.cm-grid.in .cm-card { animation: ctkRise .7s cubic-bezier(.2,.7,.2,1) both; }
.kpi-grid.in .kpi:nth-child(1),.cm-grid.in .cm-card:nth-child(1){animation-delay:.04s}
.kpi-grid.in .kpi:nth-child(2),.cm-grid.in .cm-card:nth-child(2){animation-delay:.10s}
.kpi-grid.in .kpi:nth-child(3),.cm-grid.in .cm-card:nth-child(3){animation-delay:.16s}
.kpi-grid.in .kpi:nth-child(4),.cm-grid.in .cm-card:nth-child(4){animation-delay:.22s}
.kpi-grid.in .kpi:nth-child(5),.cm-grid.in .cm-card:nth-child(5){animation-delay:.28s}
.kpi-grid.in .kpi:nth-child(6),.cm-grid.in .cm-card:nth-child(6){animation-delay:.34s}

/* ---------- Títulos con más presencia ---------- */
.lesson-title { letter-spacing:-.5px; text-shadow:0 2px 30px rgba(0,0,0,.4); }
.lesson-title .accent {
  background:linear-gradient(135deg,#fff0c0 0%,#ffd766 30%,#e8b73a 60%,#b8860b 100%);
  -webkit-background-clip:text; background-clip:text;
  filter: drop-shadow(0 2px 14px rgba(232,183,58,.35));
}
.lesson-tag {
  background:linear-gradient(90deg, rgba(232,183,58,.16), rgba(232,183,58,.04));
  border:1px solid var(--gold-deep); padding:7px 16px; border-radius:30px;
  backdrop-filter: blur(6px); box-shadow:0 2px 20px rgba(232,183,58,.12);
}

/* ---------- Botones: vida y energía ---------- */
.btn { position:relative; overflow:hidden; transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, filter .2s; }
.btn-primary { box-shadow:0 8px 28px rgba(232,183,58,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary::after {
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 40px rgba(232,183,58,.5); }
.btn-primary:hover::after { left:130%; }
.btn-primary:active { transform:translateY(-1px) scale(.99); }

/* ---------- KPIs: tarjetas de élite con brillo ---------- */
.kpi {
  background:linear-gradient(160deg, rgba(26,34,29,.9), rgba(16,21,18,.9));
  border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
  backdrop-filter: blur(4px);
}
.kpi::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(232,183,58,.4), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s;
}
.kpi:hover { transform:translateY(-4px); border-color:var(--gold-deep); box-shadow:0 16px 36px rgba(0,0,0,.5); }
.kpi:hover::before { opacity:1; }
.kpi-ico { filter:drop-shadow(0 2px 8px rgba(232,183,58,.3)); }
.kpi-num {
  background:linear-gradient(135deg,#ffd766,#e8b73a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- Cards de acción: más profundidad y movimiento ---------- */
.cm-card {
  background:linear-gradient(160deg, rgba(26,34,29,.85), rgba(16,21,18,.92));
  backdrop-filter: blur(4px); transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
}
.cm-card:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 22px 50px rgba(0,0,0,.55); }
.cm-card .cm-go { transition:transform .2s; }
.cm-card:hover .cm-go { transform:translateX(5px); }

/* ---------- Banner de estado (Mi Día) más vivo ---------- */
.desafio-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(232,183,58,.14), rgba(31,122,61,.10));
  box-shadow:0 16px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.desafio-banner::after {
  content:''; position:absolute; top:-50%; right:-20%; width:340px; height:340px;
  background:radial-gradient(circle, rgba(232,183,58,.18), transparent 65%);
  animation: ctkAurora 12s ease-in-out infinite; pointer-events:none;
}

/* ---------- Barra de progreso: brillo que fluye ---------- */
.ob-prog .obp-fill, .obp-fill {
  background:linear-gradient(90deg,#b8860b,#ffd766,#e8b73a);
  background-size:200% 100%; animation: ctkFlow 3s linear infinite;
  box-shadow:0 0 14px rgba(232,183,58,.5);
}
@keyframes ctkFlow { from { background-position:0% 0 } to { background-position:200% 0 } }

/* ---------- Login: hero cinematográfico ---------- */
.recruit-hero .hero-glow {
  animation: ctkAurora 14s ease-in-out infinite;
}
.recruit-logo { filter:drop-shadow(0 8px 30px rgba(232,183,58,.3)); animation: ctkFloat 6s ease-in-out infinite; }
@keyframes ctkFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.recruit-form {
  background:linear-gradient(160deg, rgba(26,34,29,.7), rgba(16,21,18,.82));
  backdrop-filter: blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.recruit-form input {
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.recruit-form input:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,183,58,.15); outline:none;
  background:rgba(232,183,58,.04);
}

/* ---------- Respeto a quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ============================================================
   NIVEL CINEMATOGRÁFICO — aplicado a toda la plataforma
   ============================================================ */

/* ---------- Sidebar viva ---------- */
.sidebar { backdrop-filter: blur(10px); box-shadow: 6px 0 40px rgba(0,0,0,.35); }
.sidebar-brand .brand-logo { transition: transform .3s; }
.sidebar-brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.brand-name { background:linear-gradient(135deg,#ffd766,#e8b73a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.beta-badge { animation: ctkPulse 2.4s ease-in-out infinite; }
@keyframes ctkPulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,183,58,.5)} 50%{box-shadow:0 0 0 5px rgba(232,183,58,0)} }
.nav-link { transition: background .18s, color .18s, transform .18s, padding-left .18s; }
.nav-link:hover { transform: translateX(2px); padding-left:14px; }
.nav-link.active { box-shadow: inset 0 0 18px rgba(232,183,58,.08); }
/* Núcleo del OS: las 4 piezas clave resaltan */
.nav-os { font-weight:700; color:var(--text); margin:2px 0; border-radius:9px;
  background:linear-gradient(90deg, rgba(232,183,58,.07), transparent); }
.nav-os:hover { background:linear-gradient(90deg, rgba(232,183,58,.16), transparent); color:var(--gold-bright); }
.nav-os.active { background:linear-gradient(90deg, rgba(232,183,58,.2), transparent); color:var(--gold-bright); border-left-color:var(--gold); }
.nav-os .nav-text { letter-spacing:.3px; }
/* Sidebar Netflix: más aire entre los 8 destinos */
.sidebar-nav .nav-os { font-size:15px; padding:11px 13px; }
.nav-sep { height:1px; background:var(--line); margin:14px 8px; opacity:.6; }
.nav-admin .nav-link { color:var(--text-faint); font-size:13.5px; }
.nav-dot { animation: ctkPulse 1.8s ease-in-out infinite; }
.cp-fill { background:linear-gradient(90deg,#b8860b,#ffd766,#e8b73a); background-size:200% 100%; animation: ctkFlow 3s linear infinite; }

/* ---------- Barra de progreso de scroll: estela luminosa ---------- */
.progress-bar { height:3px; box-shadow:0 0 18px rgba(232,183,58,.8), 0 0 6px rgba(255,215,102,1); }

/* ---------- Transición de entrada de página (sutil, cinematográfica) ---------- */
@keyframes ctkPageIn { from { opacity:0 } to { opacity:1 } }
.content { animation: ctkPageIn .5s ease both; }

/* ---------- Hero del inicio: más dramático ---------- */
.hero-title { letter-spacing:-1px; text-shadow:0 4px 40px rgba(0,0,0,.5); }
.hero-title .accent {
  background:linear-gradient(135deg,#fff0c0,#ffd766 35%,#e8b73a 65%,#b8860b);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 20px rgba(232,183,58,.4));
}
.hero-logo { animation: ctkFloat 6s ease-in-out infinite; filter:drop-shadow(0 10px 36px rgba(232,183,58,.3)); }
.hero-glow { animation: ctkAurora 14s ease-in-out infinite; }
.hero-thesis { font-style:italic; }
/* Stats del hero: números que laten al entrar */
.stat-num { background:linear-gradient(135deg,#ffd766,#e8b73a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-stats .stat { transition: transform .25s; }
.hero-stats .stat:hover { transform: translateY(-4px); }

/* ---------- Tablas (leaderboard) con vida ---------- */
.lead-table tbody tr { transition: background .18s, transform .18s; }
.lead-table tbody tr:hover { background: rgba(232,183,58,.05); }
.lead-table .rk-1 { box-shadow: inset 3px 0 0 var(--gold); }
.lead-rank { transition: transform .2s; }
.lead-rank:hover { transform: scale(1.06); }

/* ---------- El Muro: tarjetas con profundidad ---------- */
.muro-post { transition: transform .2s, border-color .2s, box-shadow .2s; }
.muro-post:hover { transform: translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.4); }
.mp-aullido { transition: transform .15s, background .15s; }
.mp-aullido:hover { transform: scale(1.05); }
.mp-aullido.on { animation: ctkPop .3s ease; }
@keyframes ctkPop { 0%{transform:scale(1)} 50%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* ---------- Entrenamiento Netflix: tarjetas más cine ---------- */
.nf-card { transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s; }
.nf-card:hover { transform: translateY(-6px) scale(1.03); box-shadow:0 18px 44px rgba(0,0,0,.55); }
.nf-card:hover .nf-play { transform: scale(1.15); opacity:1; }
.nf-play { transition: transform .2s, opacity .2s; }
.nf-here { animation: ctkPulse 2.2s ease-in-out infinite; }
/* Desvanecido en los bordes de la pista (indica que hay más contenido) */
.nf-track { -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
/* Modal de video: entrada con fade + scale, backdrop con blur */
.vmodal-backdrop { animation:ctkPageIn .25s ease both; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vmodal-box { animation:vmodalIn .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vmodalIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:none; } }
.vmodal-close { transition:transform .15s, box-shadow .15s; }
.vmodal-close:hover { transform:scale(1.1); box-shadow:0 0 14px rgba(232,183,58,.3); }

/* ---------- Acordeones / fases: apertura suave ---------- */
.acc-item, .phase { transition: border-color .2s, box-shadow .2s; }
.acc-item:hover, .phase.active:hover { box-shadow:0 8px 28px rgba(0,0,0,.3); }
.phase.active { box-shadow:0 0 30px rgba(232,183,58,.06), inset 0 0 0 1px rgba(232,183,58,.15); }

/* ---------- Pager (anterior/siguiente) ---------- */
.pager-btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s; }
.pager-btn:hover { transform: translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.45); }

/* ---------- Sellos / certificados: brillo de logro ---------- */
.seal { animation: ctkFloat 5s ease-in-out infinite; filter:drop-shadow(0 6px 22px rgba(232,183,58,.4)); }
.pact-sealed { box-shadow:0 18px 50px rgba(0,0,0,.4); }

/* ---------- Foco accesible y consistente ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}

@media (prefers-reduced-motion: reduce) {
  .content { animation:none !important; }
}

/* ============================================================
   DIRECTIVA UX/UI — utilidades globales (Fase 1C)
   ============================================================ */

/* ---------- Textura cinematográfica: grano sutil sobre todo ---------- */
body::after { will-change: transform; }
.ctk-grain {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Skeleton loaders (mientras carga Supabase) ---------- */
.ctk-skel { position:relative; overflow:hidden; background:rgba(255,255,255,.04); border-radius:10px; }
.ctk-skel::after {
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation:ctkShimmer 1.3s ease-in-out infinite;
}
@keyframes ctkShimmer { 100% { transform:translateX(100%); } }

/* ---------- Badge de rango: pulso de élite permanente ---------- */
.ctk-rankpulse { animation:ctkRankPulse 3s ease-in-out infinite; transform-origin:center; }
@keyframes ctkRankPulse {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 0 rgba(232,183,58,0)); }
  50%     { transform:scale(1.05); filter:drop-shadow(0 0 10px rgba(232,183,58,.45)); }
}

/* ---------- Feedback de acción: flash de éxito + shake de error ---------- */
@keyframes ctkFlashOk { 0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)} 100%{box-shadow:0 0 0 18px rgba(52,199,89,0)} }
.ctk-flash-ok { animation:ctkFlashOk .7s ease; }
@keyframes ctkShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }
.ctk-shake { animation:ctkShake .4s; }

/* ---------- Tarjeta de link de reclutamiento (Mi Día) ---------- */
.reflink-card {
  background:linear-gradient(160deg, rgba(26,34,29,.9), rgba(16,21,18,.92));
  border:1px solid var(--gold-deep); border-radius:16px; padding:20px 22px;
  box-shadow:0 14px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px); position:relative; overflow:hidden;
}
.reflink-card::after {
  content:''; position:absolute; top:-40%; right:-15%; width:280px; height:280px;
  background:radial-gradient(circle, rgba(232,183,58,.16), transparent 65%);
  animation:ctkAurora 13s ease-in-out infinite; pointer-events:none;
}
.reflink-box { display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.reflink-url {
  flex:1; min-width:200px; background:rgba(0,0,0,.35); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; color:var(--gold-bright); font-size:13.5px;
  font-family:ui-monospace,Menlo,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reflink-stats { display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; }
.reflink-stat { font-size:13px; color:var(--text-dim); }
.reflink-stat strong { color:var(--gold-bright); font-size:18px; font-family:'Oswald',sans-serif; display:block; }
.btn-wa { background:#25D366; color:#0a2e16; border:0; font-weight:700; }
.btn-wa:hover { box-shadow:0 8px 24px rgba(37,211,102,.4); }

/* ============================================================
   EXPERIENCIA DIMENSIONAL — base de operaciones (cockpit)
   Profundidad: fondo lejano · grid de perspectiva · polvo estelar.
   ============================================================ */

/* ---------- Grid de Tron: piso de perspectiva tenue ---------- */
.ctk-grid {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:
    linear-gradient(rgba(232,183,58,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,183,58,.5) 1px, transparent 1px);
  background-size:46px 46px; background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 72%);
}

/* ---------- Polvo estelar: canvas de partículas lentas ---------- */
.ctk-stars { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; }

/* ---------- Glass avanzado: paneles de vidrio flotando ---------- */
.os-card, .wr-panel, .cm-card, .identity-card, .reflink-card {
  position:relative;
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
/* Reflejo sutil en el borde superior de cada panel */
.os-card::after, .wr-panel::after, .identity-card::after {
  content:''; position:absolute; inset:0 0 auto 0; height:2px; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); pointer-events:none;
}
.os-card, .wr-panel { transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
.os-card:hover, .wr-panel:hover { transform:translateY(-3px); box-shadow:0 22px 54px rgba(0,0,0,.55); border-color:rgba(232,183,58,.28); }

/* ---------- Glow real en lo importante (dorado) ---------- */
.hud-num.hud-level, .os-prog-badge, .lead-rank.lr-alfa, .wr-live {
  filter:drop-shadow(0 0 10px rgba(232,183,58,.25));
}
/* Números del HUD como visor proyectado */
.hud-num { font-family:'Oswald',sans-serif; letter-spacing:.5px; text-shadow:0 0 18px rgba(232,183,58,.18); }
/* El #1 del leaderboard con aura */
.lead-table .rk-1 td { position:relative; }
.lead-table .rk-1 { box-shadow: inset 3px 0 0 var(--gold), 0 0 26px rgba(232,183,58,.10); }

/* CTAs lime con glow (donde existan) */
.btn-lime, .cta-big { box-shadow:0 0 15px rgba(170,238,0,.3); }

/* ---------- Mobile: alivianar el peso visual ---------- */
@media (max-width:680px){
  .os-card, .wr-panel, .cm-card, .identity-card, .reflink-card { backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
  .ctk-grid { opacity:.035; }
}
@media (prefers-reduced-motion: reduce) {
  .ctk-stars { display:none; }
  .ctk-rankpulse, .ctk-skel::after { animation:none !important; }
}

/* ============================================================
   FASE 3 — El Muro · Leaderboard · Centro de Mando
   ============================================================ */

/* ---------- El Muro: borde por categoría + entrada + onda de aullido ---------- */
.muro-post { border-left:3px solid var(--line); }
.muro-post[data-cat="win"]      { border-left-color:#ffd700; }
.muro-post[data-cat="pregunta"] { border-left-color:#00bfff; }
.muro-post[data-cat="compromiso"]{ border-left-color:#aaee00; }
.muro-post[data-cat="idea"]     { border-left-color:#9b59b6; }
.muro-anim .muro-post { animation:ctkRise .5s cubic-bezier(.2,.7,.2,1) both; }
.muro-anim .muro-post:nth-child(1){animation-delay:.02s}
.muro-anim .muro-post:nth-child(2){animation-delay:.10s}
.muro-anim .muro-post:nth-child(3){animation-delay:.18s}
.muro-anim .muro-post:nth-child(4){animation-delay:.26s}
.muro-anim .muro-post:nth-child(5){animation-delay:.34s}
.muro-anim .muro-post:nth-child(6){animation-delay:.42s}
.muro-anim .muro-post:nth-child(n+7){animation-delay:.48s}
.mp-plusone { position:fixed; z-index:70; transform:translateX(-50%); color:var(--gold-bright); font-weight:800; font-family:'Oswald',sans-serif; font-size:20px; pointer-events:none; text-shadow:0 0 12px rgba(232,183,58,.6); animation:plusUp 1s ease forwards; }
@keyframes plusUp { 0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.8)} 18%{opacity:1} 100%{opacity:0;transform:translateX(-50%) translateY(-36px) scale(1.2)} }

/* ---------- Leaderboard: top 3 como pisos de una torre ---------- */
.lead-table .rk-1 { box-shadow:inset 3px 0 0 var(--gold), 0 0 30px rgba(232,183,58,.14); }
.lead-table .rk-1 td { background:linear-gradient(90deg, rgba(232,183,58,.10), transparent 60%); }
.lead-table .rk-2 td { background:linear-gradient(90deg, rgba(200,200,212,.08), transparent 60%); box-shadow:inset 3px 0 0 #c8c8d4; }
.lead-table .rk-3 td { background:linear-gradient(90deg, rgba(205,127,50,.09), transparent 60%); box-shadow:inset 3px 0 0 #cd7f32; }
.os-top-me, .lead-table tr.me { box-shadow:inset 3px 0 0 var(--green-bright), 0 0 18px rgba(52,199,89,.10); }
body[data-page="la-manada"] .lead-table tbody tr { animation:lbRow .5s ease both; }
body[data-page="la-manada"] .lead-table tbody tr:nth-child(1){animation-delay:.04s}
body[data-page="la-manada"] .lead-table tbody tr:nth-child(2){animation-delay:.12s}
body[data-page="la-manada"] .lead-table tbody tr:nth-child(3){animation-delay:.20s}
body[data-page="la-manada"] .lead-table tbody tr:nth-child(4){animation-delay:.28s}
body[data-page="la-manada"] .lead-table tbody tr:nth-child(5){animation-delay:.36s}
body[data-page="la-manada"] .lead-table tbody tr:nth-child(n+6){animation-delay:.42s}
@keyframes lbRow { from{opacity:0;transform:translateX(22px)} to{opacity:1;transform:none} }

/* ---------- Centro de Mando: pestaña activa con subrayado animado ---------- */
.ptab { position:relative; transition:transform .15s, border-color .18s, color .18s, background .18s; }
.ptab:hover { transform:translateY(-1px); }
.ptab.active::after { content:''; position:absolute; left:12%; right:12%; bottom:-2px; height:2px; background:var(--gold); border-radius:2px; box-shadow:0 0 10px rgba(232,183,58,.55); transform-origin:left; animation:tabUnder .35s ease both; }
@keyframes tabUnder { from{transform:scaleX(0)} to{transform:scaleX(1)} }

@media (prefers-reduced-motion: reduce) {
  .muro-anim .muro-post, body[data-page="la-manada"] .lead-table tbody tr, .ptab.active::after, .mp-plusone { animation:none !important; }
}

/* ============================================================
   FASE 4 — Mobile: estados táctiles en vez de hover pegajoso
   ============================================================ */
@media (hover:none) {
  .btn:hover, .kpi:hover, .cm-card:hover, .os-card:hover, .wr-panel:hover, .nf-card:hover, .diff:hover, .pager-btn:hover { transform:none; }
  .btn:active, .kpi:active, .cm-card:active, .nf-card:active { transform:scale(.98); }
  .btn-primary::after { display:none; } /* sin barrido de luz en táctil (ahorra repaints) */
}
@media (max-width:680px) {
  .ia-chip { padding:11px 15px; }
  .btn, .mini-btn { min-height:42px; }
  .reflink-box .mini-btn { flex:1; }
}