/* ============================================================================
   DESIGN LEAGUE · Estilos avanzados (Retro-Futurism / Gaming)
   Complementa a Tailwind con efectos neón, rejilla synthwave, anillos de XP,
   temporizadores de boost, podio, toasts y rarezas de insignias.
   ========================================================================== */

:root{
  /* Alias a las variables de tema (definidas en partials/theme_head.php) para que
     TODOS los componentes se adapten a claro/oscuro automáticamente. */
  --bg:rgb(var(--c-bg)); --surface:rgb(var(--c-surface)); --surface2:rgb(var(--c-surface2));
  --line:rgb(var(--c-line)); --txt:rgb(var(--c-ink)); --muted:rgb(var(--c-muted));
  --primary:rgb(var(--c-primary)); --xp:rgb(var(--c-xp)); --danger:rgb(var(--c-danger)); --warn:rgb(var(--c-warn));
  --gold:rgb(var(--c-gold)); --silver:rgb(var(--c-silver)); --bronze:rgb(var(--c-bronze));
  --platinum:rgb(var(--c-platinum)); --diamond:rgb(var(--c-diamond)); --legend:rgb(var(--c-legend));
}

/* Fondo exterior rosado SIEMPRE pintado. */
html, body{ background:rgb(var(--c-page)); }

/* OCULTAR ES OCULTAR. Tailwind trae `[hidden]{display:none}` en su base, pero
   las utilidades (`flex`, `grid`, `block`…) pesan lo mismo y van después, así
   que un bloque con `class="grid" hidden` se seguía viendo —de ahí que el alta
   de cliente nuevo apareciera a la vez que el buscador de clientes—. */
[hidden]{ display:none !important; }

/* ── Marco flotante de la app (panel redondeado sobre fondo casi-negro) ──── */
.app-shell{
  position:relative; z-index:1;
  max-width:1720px; margin:0 auto; min-height:100vh;
  background:linear-gradient(180deg, rgb(var(--c-frame)), rgb(var(--c-bg)) 42%);
}
@media (min-width:1024px){
  body{ padding:18px; }
  .app-shell{ display:flex; align-items:stretch; min-height:calc(100vh - 36px); border-radius:2rem;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgb(var(--c-line) / .5); }
}

/* Fondo con resplandores rojos de marca dentro del marco */
.bg-arena{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.bg-arena::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 42% at 12% -4%, rgb(var(--c-primary) / .16), transparent 62%),
    radial-gradient(46% 40% at 88% 4%, rgb(var(--c-xp) / .12), transparent 60%),
    radial-gradient(60% 50% at 50% 108%, rgb(var(--c-primary) / .08), transparent 62%);
}

/* ── Columna principal + contenido centrado ──────────────────────────────── */
.col-main{ position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; }
.content{ width:100%; max-width:1280px; margin-left:auto; margin-right:auto; }

/* ── Consistencia global de controles (radios + foco iguales en toda la UI) ─ */
.content :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea){
  border-radius:.8rem;
}
.content :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus{ outline:none; }
.content :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea):focus-visible{
  border-color:rgb(var(--c-primary) / .6); box-shadow:0 0 0 3px rgb(var(--c-primary) / .16);
}
/* La LISTA desplegable de un <select> la dibuja el sistema operativo, no la
   página: si no se le pone color propio, hereda el texto casi blanco del tema
   oscuro y queda invisible sobre el fondo blanco del desplegable. Por eso cada
   <option> lleva su color a mano. */
select option, select optgroup{ color:#0f172a; background-color:#ffffff; }
select option:checked, select option:hover{ color:#0f172a; }
/* Checkboxes coherentes con la marca */
.content input[type=checkbox]{ accent-color:rgb(var(--c-primary)); width:1rem; height:1rem; cursor:pointer; }
/* Píldoras de tabs/filtros redondeadas uniformes */
.content a[href*="?status="], .content a[href*="&status="]{ border-radius:999px; }
/* Botones sólidos primarios → píldora en toda la app (misma forma que .btn-primary) */
.content button:where([class~="bg-primary"]){ border-radius:999px; }

/* ── Rail izquierdo (navegación por iconos) ──────────────────────────────── */
.rail-left{ display:none; }
@media (min-width:1024px){
  .rail-left{ display:flex; flex-direction:column; align-items:center; gap:.3rem; width:80px; flex:none;
    padding:1.5rem .5rem 1.2rem; position:sticky; top:18px; align-self:flex-start; height:calc(100vh - 36px);
    border-right:1px solid rgb(var(--c-line) / .5); background:rgb(var(--c-bg) / .45); border-radius:2rem 0 0 2rem;
    z-index:2; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
    transition:width .22s cubic-bezier(.2,.8,.2,1); }
  .rail-left::-webkit-scrollbar{ display:none; }
  .app-shell.rail-expanded .rail-left{ width:236px; align-items:stretch; padding-left:.7rem; padding-right:.7rem; }
}
.rail-logo{ display:flex; align-items:center; justify-content:center; gap:.55rem; height:46px; margin-bottom:.35rem; flex:none; }
.rail-logo :is(img,svg){ width:34px; height:34px; object-fit:contain; flex:none; }
.rail-word{ font-size:1.1rem; letter-spacing:.02em; }
.app-shell.rail-expanded .rail-logo{ justify-content:flex-start; padding-left:.45rem; }
.rail-nav{ display:flex; flex-direction:column; align-items:center; gap:.3rem; width:100%; flex:1; }
.app-shell.rail-expanded .rail-nav{ align-items:stretch; }
.rail-item{ position:relative; display:flex; align-items:center; justify-content:center; gap:.7rem; width:46px; height:46px;
  border-radius:1rem; color:rgb(var(--c-muted)); cursor:pointer; background:none; border:none; padding:0; flex:none;
  transition:color .15s, background .15s, box-shadow .15s, transform .12s; }
.rail-item svg{ flex:none; }
.rail-label{ display:none; white-space:nowrap; overflow:hidden; font-size:.86rem; font-weight:600; }
.app-shell.rail-expanded .rail-item{ width:100%; height:44px; justify-content:flex-start; padding:0 .7rem; }
.app-shell.rail-expanded .rail-label{ display:inline; }
.rail-item:hover{ color:rgb(var(--c-ink)); background:rgb(var(--c-primary) / .12); }
.rail-item:active{ transform:scale(.94); }
.rail-item.active{ color:#fff; background:linear-gradient(160deg, rgb(var(--c-primary)), color-mix(in srgb,var(--primary) 60%,#000));
  box-shadow:0 10px 22px -8px rgb(var(--c-primary) / .85); }
.rail-item.is-logout:hover{ color:var(--danger); background:rgb(var(--c-danger) / .14); }
.rail-toggle{ color:rgb(var(--c-ink)); }
.rail-foot{ margin-top:auto; display:flex; flex-direction:column; align-items:center; width:100%; }

/* Tooltip flotante (posicionado por JS) — nunca se recorta por el overflow del rail */
.pp-tip{ position:fixed; z-index:85; background:rgb(var(--c-surface)); color:rgb(var(--c-ink)); font-size:.74rem; font-weight:600;
  padding:.34rem .6rem; border-radius:.55rem; border:1px solid rgb(var(--c-line) / .7); box-shadow:0 8px 22px -8px rgba(0,0,0,.65);
  pointer-events:none; opacity:0; transform:scale(.94); transition:opacity .12s, transform .12s; white-space:nowrap; }
.pp-tip.show{ opacity:1; transform:scale(1); }

/* ── Topbar de la columna principal ──────────────────────────────────────── */
/* La barra superior y la de misiones viajan juntas: una sola pieza fija arriba. */
.head-stack{ position:sticky; top:0; z-index:40; }
.topbar{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; min-height:64px;
  background:rgb(var(--c-bg) / .55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgb(var(--c-line) / .45); }
@media (min-width:1024px){ .topbar{ padding:.9rem 1.5rem; } }
.topbar-greet{ font-family:'Russo One',sans-serif; font-size:1.05rem; line-height:1.1; }
.topbar-sub{ font-size:.72rem; color:rgb(var(--c-muted)); }
.topbar-btn{ position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:1rem;
  color:rgb(var(--c-muted)); cursor:pointer; transition:color .15s, background .15s; }
.topbar-btn:hover{ color:rgb(var(--c-ink)); background:rgb(var(--c-primary) / .12); }
.topbar-search{ display:flex; align-items:center; gap:.5rem; margin:0 .4rem; padding:.5rem .9rem; border-radius:999px;
  min-width:180px; max-width:360px; color:rgb(var(--c-muted));
  background:rgb(var(--c-surface) / .55); border:1px solid rgb(var(--c-line) / .6); }
.topbar-search svg{ flex:none; }
.topbar-search input{ background:transparent; border:none; outline:none; color:rgb(var(--c-ink)); font-size:.85rem; width:100%; }
.topbar-search-wrap{ position:relative; flex:1; max-width:380px; margin:0 .4rem; }
.topbar-search-wrap .topbar-search{ margin:0; max-width:none; width:100%; }
.nav-search-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); display:none; z-index:60; padding:.35rem;
  background:rgb(var(--c-surface)); border:1px solid rgb(var(--c-line) / .7); border-radius:1rem; overflow:hidden;
  box-shadow:0 22px 54px -20px rgba(0,0,0,.75); }
.nav-search-menu.open{ display:block; animation:pp-modal-in .18s ease both; }
.nav-search-item{ display:block; padding:.5rem .7rem; border-radius:.6rem; font-size:.85rem; color:rgb(var(--c-ink)); cursor:pointer; }
.nav-search-item:hover,.nav-search-item.active{ background:rgb(var(--c-primary) / .14); color:var(--primary); }
.nav-search-empty{ padding:.6rem .7rem; font-size:.82rem; color:rgb(var(--c-muted)); }

/* ── Rail derecho (equipo / presencia) ───────────────────────────────────── */
.rail-right{ display:none; }
@media (min-width:1024px){
  .rail-right{ display:flex; flex-direction:column; align-items:center; gap:.5rem; width:84px; flex:none;
    padding:2rem .5rem 1.5rem; position:sticky; top:18px; align-self:flex-start; height:calc(100vh - 36px); overflow:visible;
    border-left:1px solid rgb(var(--c-line) / .5); background:rgb(var(--c-bg) / .45); border-radius:0 2rem 2rem 0; z-index:2; }
}
.rail-me{ display:grid; place-items:center; width:46px; height:46px; border-radius:1.1rem; border:2px solid;
  font-family:'Russo One',sans-serif; font-size:.82rem; cursor:pointer; flex:none; }
.rail-sep{ width:30px; height:1px; background:rgb(var(--c-line) / .7); margin:.1rem 0; flex:none; }
.rail-team{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.rail-face{ position:relative; display:block; flex:none; }
.rail-face-av{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  font-family:'Russo One',sans-serif; font-size:.7rem; transition:transform .15s; }
.rail-face:hover .rail-face-av{ transform:scale(1.1); }
.rail-dot{ position:absolute; right:1px; bottom:1px; width:11px; height:11px; border-radius:50%;
  background:rgb(var(--c-muted)); border:2px solid rgb(var(--c-surface)); }
.rail-dot.is-on{ background:#22c55e; }
.rail-more{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; flex:none;
  font-size:.72rem; font-weight:700; color:rgb(var(--c-muted)); background:rgb(var(--c-surface2) / .7);
  border:1px solid rgb(var(--c-line) / .7); cursor:pointer; }

/* ── Tipografía / glow ───────────────────────────────────────────────────── */
.font-display{ font-family:'Russo One',system-ui,sans-serif; letter-spacing:.01em }
.text-glow{ text-shadow:0 0 14px currentColor }
.text-glow-sm{ text-shadow:0 0 8px currentColor }

/* ── Tarjetas glass cálidas y redondeadas (soft gaming) ──────────────────── */
.glass{
  background:linear-gradient(180deg, rgb(var(--c-surface) / .82), rgb(var(--c-surface2) / .62));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgb(var(--c-line) / .55);
  border-radius:var(--radius);
  box-shadow:0 18px 44px -28px rgba(20,4,10,.65);
}
.glass-hover{ transition:border-color .2s, box-shadow .2s, transform .2s }
.glass-hover:hover{ border-color:rgb(var(--c-primary) / .55);
  box-shadow:0 0 0 1px rgb(var(--c-primary) / .22), 0 22px 50px -22px rgb(var(--c-primary) / .5) }

.neon-border{ box-shadow:0 0 0 1px rgb(var(--c-primary) / .35), 0 0 26px -6px rgb(var(--c-primary) / .5) }

/* ── Barra de XP (morado) con brillo en movimiento ───────────────────────── */
.xpbar{ position:relative; height:14px; border-radius:999px; background:rgb(var(--c-bg) / .6); overflow:hidden; border:1px solid rgb(var(--c-xp) / .3) }
.xpbar > span{
  position:absolute; inset:0 auto 0 0; height:100%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--xp) 75%, #000), var(--xp), color-mix(in srgb, var(--xp) 60%, #fff));
  border-radius:999px; box-shadow:0 0 16px rgb(var(--c-xp) / .8);
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.xpbar > span::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%); animation:shimmer 2.2s infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%) } }

/* ── Anillo de nivel (conic) ─────────────────────────────────────────────── */
.level-ring{
  --p:0; --size:128px; width:var(--size); height:var(--size); border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%),
    conic-gradient(var(--primary) calc(var(--p)*1%), rgb(var(--c-line) / .6) 0);
  filter:drop-shadow(0 0 12px rgb(var(--c-primary) / .45));
}

/* ── Liga / rangos ───────────────────────────────────────────────────────── */
.league-bronze{ --lg:var(--bronze) } .league-silver{ --lg:var(--silver) }
.league-gold{ --lg:var(--gold) }     .league-platinum{ --lg:var(--platinum) }
.league-diamond{ --lg:var(--diamond) } .league-legend{ --lg:var(--legend) }
/* Clases de texto por clave de liga (usadas por el ranking en vivo) */
.text-bronze{ color:var(--bronze) } .text-silver{ color:var(--silver) }
.text-gold{ color:var(--gold) } .text-platinum{ color:var(--platinum) }
.text-diamond{ color:var(--diamond) } .text-legend{ color:var(--legend) }
.league-chip{
  color:var(--lg); border:1px solid color-mix(in srgb, var(--lg) 55%, transparent);
  background:color-mix(in srgb, var(--lg) 14%, transparent);
  text-shadow:0 0 10px color-mix(in srgb, var(--lg) 60%, transparent);
}

/* ── Boost: píldora con cuenta regresiva ─────────────────────────────────── */
.boost-pill{ position:relative; overflow:hidden; animation:boost-pulse 2.4s ease-in-out infinite }
@keyframes boost-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.0) } 50%{ box-shadow:0 0 22px -4px rgba(245,158,11,.7) } }

/* ── Zona de peligro ─────────────────────────────────────────────────────── */
.danger-pulse{ animation:danger 1.6s ease-in-out infinite }
@keyframes danger{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.0); border-color:rgba(239,68,68,.5) } 50%{ box-shadow:0 0 26px -4px rgba(239,68,68,.65); border-color:rgba(239,68,68,.9) } }

/* ── Podio del ranking ───────────────────────────────────────────────────── */
.podium{ display:flex; align-items:flex-end; gap:.75rem; justify-content:center }
.podium-col{ width:33%; min-width:0; display:flex; flex-direction:column; align-items:center }
.podium .riser{ width:100%; border-radius:.7rem .7rem 0 0; display:flex; align-items:center; justify-content:center; border-bottom:none }
.podium .p1{ height:104px; background:linear-gradient(180deg,rgba(251,191,36,.25),rgba(251,191,36,.05)); border:1px solid rgba(251,191,36,.5) }
.podium .p2{ height:76px;  background:linear-gradient(180deg,rgba(203,213,225,.22),rgba(203,213,225,.04)); border:1px solid rgba(203,213,225,.45) }
.podium .p3{ height:58px;  background:linear-gradient(180deg,rgba(205,127,50,.22),rgba(205,127,50,.04)); border:1px solid rgba(205,127,50,.45) }

/* ── Fila de ranking: transición de reordenamiento ───────────────────────── */
.rank-row{ transition:background-color .2s }
.rank-row.me{ background:rgb(var(--c-primary) / .1); box-shadow:inset 3px 0 0 var(--primary) }

/* ── Insignias / rareza ──────────────────────────────────────────────────── */
.badge-common{ --r:#94A3B8 } .badge-rare{ --r:#38BDF8 } .badge-epic{ --r:#A855F7 } .badge-legendary{ --r:#FBBF24 }
.badge-tile{ border:1px solid color-mix(in srgb,var(--r) 45%,transparent); background:color-mix(in srgb,var(--r) 10%,transparent) }
.badge-tile.locked{ filter:grayscale(1) opacity(.45); border-style:dashed }
.badge-legendary.unlocked{ box-shadow:0 0 24px -6px var(--r) }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
#toasts{ position:fixed; right:1rem; top:5rem; z-index:60; display:flex; flex-direction:column; gap:.6rem; max-width:340px }
.toast{ animation:toast-in .4s cubic-bezier(.22,1,.36,1) both; border-left:3px solid var(--primary) }
.toast.out{ animation:toast-out .35s ease forwards }
@keyframes toast-in{ from{ opacity:0; transform:translateX(40px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes toast-out{ to{ opacity:0; transform:translateX(40px) } }

/* ── Loot box ────────────────────────────────────────────────────────────── */
.loot{ animation:loot-bob 2.4s ease-in-out infinite }
@keyframes loot-bob{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-8px) rotate(2deg) } }
/* Aura pulsante cuando hay caja disponible (sutil, respeta reduce-motion) */
#loot-open{ position:relative }
#loot-open::after{
  content:""; position:absolute; inset:-6px; border-radius:1.25rem; z-index:-1;
  box-shadow:0 0 0 0 rgba(225,29,29,.55); animation:loot-halo 2.4s ease-out infinite;
}
@keyframes loot-halo{ 0%{ box-shadow:0 0 0 0 rgba(225,29,29,.5) } 70%{ box-shadow:0 0 0 16px rgba(225,29,29,0) } 100%{ box-shadow:0 0 0 0 rgba(225,29,29,0) } }

/* ── Ruleta de caja sorpresa ─────────────────────────────────────────────── */
.loot-overlay{ position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  background:rgba(0,0,0,.72); backdrop-filter:blur(4px); animation:toast-in .3s ease both }
.loot-overlay.out{ animation:toast-out .3s ease forwards }
.loot-machine{ width:min(92vw,560px); display:flex; flex-direction:column; align-items:center; gap:1rem }
.loot-title{ font-size:1.25rem; letter-spacing:.03em; color:rgb(var(--c-ink)) }
.loot-window{ position:relative; width:100%; height:120px; overflow:hidden; border-radius:1rem;
  border:1px solid rgba(225,29,29,.4); background:rgba(15,15,18,.6);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), 0 0 30px -8px rgba(225,29,29,.6);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.loot-pointer{ position:absolute; top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%); z-index:3;
  background:linear-gradient(180deg, var(--primary), transparent 70%); box-shadow:0 0 12px 2px rgba(225,29,29,.8) }
.loot-pointer::before{ content:""; position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid var(--primary) }
.loot-reel{ position:absolute; top:0; left:0; height:100%; display:flex; align-items:center; gap:12px; padding:0 6px; will-change:transform }
.loot-chip{ width:120px; height:96px; flex:0 0 120px; border-radius:.85rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.4rem; text-align:center; padding:.5rem;
  border:1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  background:color-mix(in srgb, var(--rc) 14%, rgba(20,20,24,.9)); color:var(--rc) }
.loot-chip-ic{ display:grid; place-items:center }
.loot-chip-lb{ font-size:.7rem; line-height:1.05; color:rgb(var(--c-ink)); opacity:.9 }
.loot-chip.is-win.pop{ animation:loot-pop .6s cubic-bezier(.22,1,.36,1) }
@keyframes loot-pop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.14) } 100%{ transform:scale(1.06) } }
.loot-skip{ font-size:.8rem; color:rgb(var(--c-muted)); background:rgba(255,255,255,.06);
  padding:.4rem 1rem; border-radius:.6rem; cursor:pointer; border:1px solid rgba(255,255,255,.1) }
.loot-skip:hover{ color:rgb(var(--c-ink)) }

/* ── Rueda de premios (20 gajos) ─────────────────────────────────────────── */
.pp-wheel{ position:relative; width:min(78vw,340px); aspect-ratio:1; display:grid; place-items:center;
  border-radius:50%; padding:6px;
  background:conic-gradient(from 0deg, rgba(225,29,29,.85), rgba(251,191,36,.85), rgba(56,189,248,.85), rgba(225,29,29,.85));
  box-shadow:0 0 44px -8px rgba(225,29,29,.7), inset 0 0 0 1px rgba(255,255,255,.14) }
.pp-wheel.is-jackpot{
  background:conic-gradient(from 0deg, #F5C33B, #7A5A12, #FDE68A, #2A2004, #F5C33B);
  box-shadow:0 0 60px -6px rgba(245,195,59,.85), inset 0 0 0 1px rgba(253,230,138,.5) }
.pp-wheel-svg{ width:100%; height:100%; border-radius:50%; display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)) }
.pp-wheel-rot{ transform-origin:100px 100px; will-change:transform }
/* Aguja: apunta al gajo que queda arriba (12 en punto) */
.pp-wheel-pin{ position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:4;
  width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:26px solid var(--primary); filter:drop-shadow(0 3px 6px rgba(0,0,0,.7)) }
.pp-wheel.is-jackpot .pp-wheel-pin{ border-top-color:#F5C33B }
.pp-wheel-sub{ font-size:.78rem; color:rgb(var(--c-muted)); text-align:center }
@media (prefers-reduced-motion: reduce){ .pp-wheel-rot{ transition:none !important } }

/* ── Kanban · arrastrar y soltar (pointer events) ────────────────────────── */
.kanban-card{ cursor:grab; touch-action:auto; transition:border-color .15s, box-shadow .15s, opacity .15s }
.kanban-card:active{ cursor:grabbing }
.kanban-card.kanban-dragging{ opacity:.35; }
.kanban-ghost{
  position:fixed; z-index:80; pointer-events:none; margin:0;
  border-radius:.75rem; border:1px solid var(--primary);
  background:rgb(var(--c-surface)); padding:.75rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgb(var(--c-primary) / .4);
  transform:rotate(2deg) scale(1.02); opacity:.95;
}
.kanban-list{ transition:background-color .15s, box-shadow .15s; border-radius:.75rem }
.kanban-list.kanban-over{ background:rgb(var(--c-primary) / .08); box-shadow:inset 0 0 0 2px rgb(var(--c-primary) / .45) }
.kanban-nosel{ user-select:none; -webkit-user-select:none; cursor:grabbing }
.kanban-toast{
  position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%);
  z-index:85; padding:.6rem 1.1rem; border-radius:.7rem; font-size:.85rem;
  background:rgba(20,20,24,.96); color:#fff; border:1px solid rgba(248,113,113,.5);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6); animation:toast-in .3s ease both;
}
.kanban-toast.ok{ border-color:rgba(34,197,94,.5) }
.kanban-toast.out{ animation:toast-out .3s ease forwards }

/* ── Confeti (level up / insignia) ───────────────────────────────────────── */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:55; overflow:hidden }
.confetti i{ position:absolute; top:-12px; width:9px; height:14px; opacity:.9; animation:fall linear forwards }
@keyframes fall{ to{ transform:translateY(110vh) rotate(640deg); opacity:.2 } }

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.count-tick{ font-variant-numeric:tabular-nums }

/* Anti-blowout responsive: los items de grid pueden encogerse por debajo de su
   contenido (evita desbordamiento horizontal en móvil con tablas/grids anidados). */
.grid > *{ min-width:0; }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:#243049; border-radius:99px; border:2px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:#2f3e5c }
.no-scrollbar::-webkit-scrollbar{ display:none }

/* ════════════════════════════════════════════════════════════════════════
   TEMA CLARO · overrides de componentes y utilidades crudas (sin redeclarar bases)
   ════════════════════════════════════════════════════════════════════════ */
/* Tarjetas glass: blancas con sombra suave para dar profundidad */
[data-theme="light"] .glass{
  background:#ffffff;
  border:1px solid rgb(var(--c-line));
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 28px -18px rgba(15,23,42,.28);
}
[data-theme="light"] .glass-hover:hover{ box-shadow:0 0 0 1px rgba(22,163,74,.3), 0 16px 36px -18px rgba(22,163,74,.32); }
[data-theme="light"] .neon-border{ box-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 30px -18px rgba(2,132,199,.4); }

/* Rejilla y resplandores del fondo: más sutiles en claro */
[data-theme="light"] .bg-arena::before{
  background-image:
    linear-gradient(rgba(2,132,199,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,132,199,.09) 1px, transparent 1px);
}
[data-theme="light"] .bg-arena::after{
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(22,163,74,.07), transparent 60%),
    radial-gradient(55% 45% at 90% 10%, rgba(168,85,247,.05), transparent 60%),
    radial-gradient(50% 40% at 50% 100%, rgba(2,132,199,.06), transparent 60%);
}

/* Glow de texto: se apaga en claro (no aporta sobre fondo claro) */
[data-theme="light"] .text-glow,
[data-theme="light"] .text-glow-sm{ text-shadow:none; }

/* Barra de XP y anillo de nivel: pista clara */
[data-theme="light"] .xpbar{ background:#e2e8f0; border-color:rgba(2,132,199,.3); }
[data-theme="light"] .level-ring{
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
    conic-gradient(rgb(var(--c-primary)) calc(var(--p)*1%), rgba(148,163,184,.28) 0);
}

/* Podio en claro */
[data-theme="light"] .podium .p1{ background:linear-gradient(180deg,rgba(180,130,8,.16),rgba(180,130,8,.03)); border-color:rgba(180,130,8,.45); }
[data-theme="light"] .podium .p2{ background:linear-gradient(180deg,rgba(100,116,139,.16),rgba(100,116,139,.03)); border-color:rgba(100,116,139,.45); }
[data-theme="light"] .podium .p3{ background:linear-gradient(180deg,rgba(154,91,34,.16),rgba(154,91,34,.03)); border-color:rgba(154,91,34,.45); }

/* Remap de utilidades oscuras → claras */
[data-theme="light"] .text-slate-100{ color:#0f172a; }
[data-theme="light"] .text-slate-300{ color:#334155; }
[data-theme="light"] .text-slate-400{ color:#475569; }
[data-theme="light"] .text-slate-500{ color:#64748b; }
[data-theme="light"] .bg-white\/5{ background-color:rgba(15,23,42,.035); }
[data-theme="light"] .bg-white\/10{ background-color:rgba(15,23,42,.06); }
[data-theme="light"] .border-white\/5{ border-color:rgba(15,23,42,.06); }
[data-theme="light"] .border-white\/10{ border-color:rgba(15,23,42,.1); }
[data-theme="light"] .bg-bg\/40,[data-theme="light"] .bg-bg\/50,
[data-theme="light"] .bg-bg\/60,[data-theme="light"] .bg-bg\/70{ background-color:rgba(241,245,249,.9); }
[data-theme="light"] .bg-black\/70{ background-color:rgba(15,23,42,.5); }

/* Toggle de tema: icono según el modo */
[data-theme="light"] .theme-sun{ display:none; }
[data-theme="light"] .theme-moon{ display:flex; }
/* hover:text-white se vuelve oscuro en claro (si no, desaparece) */
[data-theme="light"] .hover\:text-white:hover{ color:#0f172a; }

/* Inputs y scrollbar en claro */
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{ color:#0f172a; }
[data-theme="light"] input::placeholder,[data-theme="light"] textarea::placeholder{ color:#94a3b8; }
[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#cbd5e1; border-color:#eef2f8; }

/* Selector de fecha nativo acorde al tema */
input[type="date"]{ color-scheme:dark; }
[data-theme="light"] input[type="date"]{ color-scheme:light; }

/* ── Foco visible para navegación con teclado (accesibilidad) ────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ── Respeta reduce-motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .bg-arena::before{ animation:none }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLERO DE PRODUCCIÓN · Kanban ClickUp+ (toolbar, tarjetas ricas, WIP,
   filtros, agrupadores, cuenta regresiva, prioridades, sync en vivo)
   ════════════════════════════════════════════════════════════════════════ */

/* Barra de herramientas · se pega DEBAJO de la cabecera fija, no detrás de ella
   (--head-h lo mide el JS: la cabecera crece cuando aparece la barra de misiones) */
.board-toolbar{ position:sticky; top:var(--head-h, 64px); z-index:20; }
.board-live{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; letter-spacing:.06em;
  color:#22c55e; text-transform:uppercase; }
.board-live .dot{ width:.5rem; height:.5rem; border-radius:99px; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:live-pulse 1.8s ease-out infinite; }
.board-live.stale{ color:rgb(var(--c-muted)); }
.board-live.stale .dot{ background:rgb(var(--c-muted)); animation:none; }
@keyframes live-pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55) } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0) } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0) } }

/* Tiles de resumen (glanceable) */
.board-stat{ display:flex; align-items:center; gap:.55rem; padding:.5rem .8rem; border-radius:.75rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.14); white-space:nowrap; }
.board-stat b{ font-family:'Russo One',system-ui,sans-serif; font-size:1.05rem; }
[data-theme="light"] .board-stat{ background:#fff; border-color:rgb(var(--c-line)); }

/* Chips de filtro / control */
.fchip{ display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .7rem; border-radius:99px;
  font-size:.78rem; font-weight:600; cursor:pointer; user-select:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(148,163,184,.16); color:rgb(var(--c-muted));
  transition:background .15s, color .15s, border-color .15s; }
.fchip:hover{ color:rgb(var(--c-ink)); border-color:rgba(148,163,184,.4); }
.fchip.active{ background:rgb(var(--c-primary) / .16); color:var(--primary); border-color:rgb(var(--c-primary) / .5); }
.fchip .n{ font-variant-numeric:tabular-nums; opacity:.85; }
[data-theme="light"] .fchip{ background:#fff; border-color:rgb(var(--c-line)); }

.board-input{ background:rgba(255,255,255,.05); border:1px solid rgba(148,163,184,.18);
  border-radius:.7rem; padding:.4rem .7rem; font-size:.82rem; color:rgb(var(--c-ink)); }
.board-input:focus{ outline:none; border-color:rgba(225,29,29,.5); }
[data-theme="light"] .board-input{ background:#fff; border-color:rgb(var(--c-line)); }

/* Medidor WIP por columna */
.wip-meter{ height:3px; border-radius:99px; background:rgba(148,163,184,.16); overflow:hidden; margin-top:.5rem; }
.wip-meter > span{ display:block; height:100%; border-radius:99px; background:var(--xp);
  transition:width .3s ease, background .3s ease; }
.kanban-col.wip-over{ box-shadow:inset 0 0 0 1px rgba(251,191,36,.5); }
.kanban-col.wip-over .wip-meter > span{ background:var(--warn); }
.kanban-col.wip-over .count-tick{ color:var(--warn); }

/* Tarjeta rica */
.kanban-card{ position:relative; }
.kanban-card.is-filtered{ display:none !important; }
.kc-top{ display:flex; align-items:flex-start; gap:.5rem; }

/* ── SEMÁFORO DE ENTREGA · el aviso es EL BORDE ENTERO de la tarjeta ────────
   Antes era un puntito de color que desde dos metros no se veía. Ahora la
   tarjeta completa se enciende —amarilla cuando la entrega se acerca, roja
   cuando ya se pasó— con una luz que le da la vuelta DESPACIO: avisa de un
   vistazo sin desesperar a quien lleva ocho horas frente al tablero.

   El grosor (--kc-w) es GRUESO a propósito: el negocio pidió que el marco se
   sienta como una alarma desde el otro lado del taller, no como un detalle.
   El vencido va un punto más grueso, con más halo y respirando despacio.
   El color de fondo del borde nunca desaparece, así que aunque el navegador
   no sepa animar el ángulo el borde sigue viéndose completo. */
@property --kc-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.kanban-card{ --kc-ang:0deg; --kc-w:5px; }
.kanban-card[data-prio="1"]{ --kc-glow:var(--c-warn); }
.kanban-card[data-prio="2"]{ --kc-glow:var(--c-danger); --kc-w:6px; }
.kanban-card[data-prio="1"]::after,
.kanban-card[data-prio="2"]::after{
  /* Sale 2px POR FUERA de la tarjeta: así el marco se ve del grosor que pidió
     el negocio sin comerse el aire interior de la tarjeta (p-3 = 12px), y de
     paso tapa el borde gris, que deja de verse. Más afuera no cabe: entre dos
     tarjetas sólo hay 8px (space-y-2). */
  content:""; position:absolute; inset:-2px; border-radius:calc(.75rem + 2px);
  padding:var(--kc-w); pointer-events:none;
  background:conic-gradient(from var(--kc-ang),
      rgb(var(--kc-glow) / .55)  0deg,
      rgb(var(--kc-glow) / 1)   45deg,
      rgb(var(--kc-glow) / .55) 125deg,
      rgb(var(--kc-glow) / .55) 360deg);
  /* Sólo se pinta el marco: se recorta el relleno de la tarjeta. */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:kc-orbit 7s linear infinite;
}
/* El halo separa la tarjeta del fondo de la columna: es lo que hace que el
   marco «salte» de lejos, más que el grosor a secas. */
.kanban-card[data-prio="1"]{ box-shadow:0 0 22px -2px rgb(var(--c-warn) / .5); }
.kanban-card[data-prio="2"]{ box-shadow:0 0 30px 0 rgb(var(--c-danger) / .6); }
/* Vencido: la luz corre algo más y además el marco RESPIRA. Se anima la
   opacidad del pseudo-elemento, no la sombra de la tarjeta: con un tablero
   lleno de vencidos animar box-shadow repintaría todo cada cuadro. */
.kanban-card[data-prio="2"]::after{
  animation:kc-orbit 5s linear infinite, kc-alarm 2.4s ease-in-out infinite;
}
@keyframes kc-orbit{ to{ --kc-ang:360deg; } }
@keyframes kc-alarm{ 0%,100%{ opacity:.72 } 50%{ opacity:1 } }
/* Mientras se arrastra no hay alarma: estorba ver dónde se suelta. */
.kanban-card.kanban-dragging[data-prio="1"],
.kanban-card.kanban-dragging[data-prio="2"]{ box-shadow:none; }
.kanban-card.kanban-dragging::after{ animation:none; }
.kc-title{ font-weight:600; font-size:.86rem; line-height:1.25; }
.kc-meta{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.7rem; color:rgb(var(--c-muted)); margin-top:.4rem; }
.kc-tag{ display:inline-flex; align-items:center; gap:.25rem; padding:.08rem .4rem; border-radius:.4rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(148,163,184,.14); }
[data-theme="light"] .kc-tag{ background:rgba(15,23,42,.04); }
.kc-avatar{ display:grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:.35rem;
  font-size:.6rem; font-weight:700; font-family:'Russo One',system-ui,sans-serif; }
.kc-deadline{ display:inline-flex; align-items:center; gap:.3rem; font-variant-numeric:tabular-nums; font-weight:600; }
.kc-deadline.d0{ color:rgb(var(--c-muted)); }
.kc-deadline.d1{ color:var(--warn); }
.kc-deadline.d2{ color:var(--danger); }
.kc-actions{ display:flex; align-items:center; gap:.3rem; margin-top:.6rem; }
.kc-btn{ display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:.5rem; cursor:pointer;
  background:rgba(255,255,255,.05); color:rgb(var(--c-muted)); border:1px solid transparent; transition:all .15s; }
.kc-btn:hover{ color:rgb(var(--c-ink)); background:rgba(255,255,255,.1); }
.kc-btn.wa:hover{ color:#fff; background:#22c55e; }
.kc-btn.next:hover{ color:#fff; background:var(--primary); }
.kc-detail{ position:relative; }
.kc-detail:hover{ color:#fff; background:var(--primary); }
.kc-note-dot{ position:absolute; top:-.3rem; right:-.3rem; min-width:.95rem; height:.95rem; padding:0 .2rem;
  border-radius:999px; background:var(--primary); color:#fff; font-size:.6rem; font-weight:800; line-height:.95rem;
  text-align:center; box-shadow:0 0 0 2px rgb(var(--c-bg)); }
.kc-note-dot[hidden]{ display:none; }

/* Tira de ÁREAS: quién se lleva el XP de cada etapa de este pedido */
.kc-crew{ display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; margin-top:.5rem;
  padding-top:.5rem; border-top:1px dashed rgba(148,163,184,.18); }
.kc-crew-chip{ display:inline-flex; align-items:center; gap:.22rem; padding:.1rem .32rem; border-radius:.4rem;
  font-size:.6rem; line-height:1.2; letter-spacing:.02em; border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04); color:rgb(var(--c-muted)); }
.kc-crew-chip b{ font-family:'Russo One',system-ui,sans-serif; font-weight:400; color:var(--c); opacity:.85; }
.kc-crew-chip.taken{ border-color:color-mix(in srgb, var(--c) 45%, transparent);
  background:color-mix(in srgb, var(--c) 12%, transparent); color:rgb(var(--c-ink)); }
.kc-crew-chip.mine{ box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.kc-crew-chip.paid{ opacity:.55; }
[data-theme="light"] .kc-crew-chip{ background:rgba(15,23,42,.04); }

/* Lo que vale esta tarjeta: XP y trofeos que deja al avanzarla */
.kc-earn{ margin-left:auto; padding:.1rem .42rem; border-radius:.4rem; white-space:nowrap;
  font-size:.62rem; font-weight:700; letter-spacing:.01em;
  background:rgb(var(--c-xp) / .12); color:rgb(var(--c-xp)); border:1px solid rgb(var(--c-xp) / .28); }
/* En tu propia área el premio es completo (XP + trofeos): se resalta. */
.kc-earn.mine{ background:rgb(var(--c-xp) / .2); border-color:rgb(var(--c-xp) / .5);
  box-shadow:0 0 12px -4px rgb(var(--c-xp) / .6); }
/* Columna que aún no paga (Recepción): el premio se ve, pero apagado. */
.kc-earn.idle{ opacity:.55; }

/* Premio flotante al mover: sube y se desvanece encima de la tarjeta */
.kc-pop{ position:absolute; left:50%; top:.4rem; transform:translateX(-50%);
  display:flex; gap:.35rem; pointer-events:none; z-index:5; }
.kc-pop span{ font-family:'Russo One',system-ui,sans-serif; font-size:.78rem; line-height:1;
  padding:.2rem .45rem; border-radius:.45rem; white-space:nowrap;
  animation:kc-pop-up 1.7s cubic-bezier(.2,.8,.2,1) forwards; }
.kc-pop-xp{ color:#0b1f14; background:#22C55E; box-shadow:0 6px 16px -6px rgba(34,197,94,.9); }
.kc-pop-cup{ color:#1a1205; background:var(--warn); box-shadow:0 6px 16px -6px rgb(var(--c-warn) / .9);
  animation-delay:.12s; }
@keyframes kc-pop-up{
  0%   { opacity:0; transform:translateY(6px) scale(.85); }
  18%  { opacity:1; transform:translateY(0) scale(1.06); }
  30%  { transform:translateY(0) scale(1); }
  75%  { opacity:1; transform:translateY(-14px); }
  100% { opacity:0; transform:translateY(-26px); }
}
.kc-earned{ box-shadow:0 0 0 1px rgb(var(--c-xp) / .5), 0 0 22px -6px rgb(var(--c-xp) / .55); }
@media (prefers-reduced-motion: reduce){
  .kc-pop span{ animation:none; opacity:1; }
  /* Sin movimiento: el borde se queda encendido, que es lo que hay que ver. */
  .kanban-card[data-prio="1"]::after,
  .kanban-card[data-prio="2"]::after{ animation:none; opacity:1; background:rgb(var(--kc-glow) / .9); }
}

/* ── SELECTOR VISUAL DE ICONO ───────────────────────────────────────────────
   Se elige VIENDO el icono; el nombre en inglés era imposible de adivinar. */
.ipk{ display:inline-block; width:100%; }
.ipk-btn{ display:flex; align-items:center; gap:.5rem; width:100%; padding:.5rem .6rem; border-radius:.6rem;
  font-size:.8rem; color:rgb(var(--c-ink)); cursor:pointer;
  background:rgb(var(--c-bg) / .6); border:1px solid rgba(255,255,255,.1); transition:border-color .15s; }
.ipk-btn:hover{ border-color:rgb(var(--c-primary) / .5); }
.ipk-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.ipk-btn .ipk-ic{ color:var(--primary); display:grid; place-items:center; }
.ipk-btn .ipk-lbl{ color:rgb(var(--c-muted)); font-size:.72rem; }
.ipk-btn .ipk-chev{ margin-left:auto; color:rgb(var(--c-muted)); }
.ipk-sm .ipk-btn{ padding:.4rem .45rem; gap:.3rem; }
[data-theme="light"] .ipk-btn{ background:#fff; border-color:rgb(var(--c-line)); }
.ipk-pop{ position:fixed; z-index:1200; width:min(20rem, calc(100vw - 1rem)); padding:.5rem; border-radius:.9rem;
  background:rgb(var(--c-surface)); border:1px solid rgb(var(--c-line)); box-shadow:0 26px 60px -20px rgba(0,0,0,.85); }
.ipk-grid{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:.25rem; max-height:15rem; overflow:auto; }
.ipk-opt{ display:grid; place-items:center; aspect-ratio:1; border-radius:.5rem; cursor:pointer;
  color:rgb(var(--c-muted)); background:rgba(255,255,255,.04); border:1px solid transparent; }
.ipk-opt:hover{ color:rgb(var(--c-ink)); background:rgba(255,255,255,.1); }
.ipk-opt.sel{ color:var(--primary); background:rgb(var(--c-primary) / .16); border-color:rgb(var(--c-primary) / .5); }

/* ── CATÁLOGO · pestañas, filas compactas y paginador ────────────────────────
   La pantalla era un rollo de 15 000 px: ahora cada bloque vive en su pestaña
   y se edita en modal, con los productos paginados. */
.cat-tabs{ display:flex; gap:.25rem; flex-wrap:wrap; }
.cat-tab{ display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .9rem; border-radius:.75rem;
  font-size:.82rem; font-weight:600; white-space:nowrap; cursor:pointer; color:rgb(var(--c-muted));
  background:transparent; border:1px solid transparent; transition:background .15s, color .15s, border-color .15s; }
.cat-tab:hover{ color:rgb(var(--c-ink)); background:rgba(255,255,255,.05); }
.cat-tab.active{ background:rgb(var(--c-primary) / .15); color:var(--primary); border-color:rgb(var(--c-primary) / .45); }
.cat-tab .n{ font-size:.68rem; padding:.05rem .35rem; border-radius:.35rem; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.08); }
.cat-tab.active .n{ background:rgb(var(--c-primary) / .25); }
.cat-row{ display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border-radius:.75rem;
  background:rgb(var(--c-bg) / .4); border:1px solid rgba(255,255,255,.05);
  transition:border-color .15s, background .15s; }
.cat-row:hover{ border-color:rgba(255,255,255,.14); background:rgb(var(--c-bg) / .65); }
/* Fila fuera del filtro o de la página actual. Clase propia (y no la utilidad
   `hidden` de Tailwind) porque esta hoja se carga DESPUÉS y ganaría el flex. */
.cat-row.cat-hide{ display:none !important; }
.cat-chip{ display:inline-flex; align-items:center; gap:.25rem; padding:.05rem .4rem; border-radius:.4rem;
  font-size:.62rem; line-height:1.5; border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.05); color:rgb(var(--c-muted)); }
.pg-btn{ min-width:2rem; height:2rem; padding:0 .5rem; display:grid; place-items:center; border-radius:.5rem;
  font-size:.78rem; font-weight:600; cursor:pointer; color:rgb(var(--c-muted));
  background:rgba(255,255,255,.05); border:1px solid rgba(148,163,184,.16); }
.pg-btn:hover:not([disabled]){ color:rgb(var(--c-ink)); }
.pg-btn.active{ background:rgb(var(--c-primary) / .16); color:var(--primary); border-color:rgb(var(--c-primary) / .5); }
.pg-btn[disabled]{ opacity:.35; cursor:default; }

/* ── Incidencia · a quién se le carga el error ──────────────────────────────*/
.inc-person{ display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; border-radius:.6rem;
  font-size:.8rem; cursor:pointer; color:rgb(var(--c-ink));
  background:rgb(var(--c-bg) / .5); border:1px solid rgba(255,255,255,.07); transition:border-color .15s, background .15s; }
.inc-person:hover{ border-color:rgba(255,255,255,.2); }
.inc-person:has(input:checked){ border-color:rgb(var(--c-danger) / .55); background:rgb(var(--c-danger) / .1); }
.inc-person .inc-touch{ font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; padding:.05rem .3rem;
  border-radius:.3rem; background:rgb(var(--c-xp) / .14); color:rgb(var(--c-xp)); }

/* Espera de la aprobación de REVENDEDOR dentro del pedido */
.res-spin{ width:.85rem; height:.85rem; border-radius:99px; flex:none;
  border:2px solid rgb(var(--c-warn) / .25); border-top-color:var(--warn);
  animation:res-spin 1s linear infinite; }
@keyframes res-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .res-spin{ animation-duration:2.5s } }

/* Buscador de pedidos (incluye los ya cerrados) */
.find-row{ display:flex; align-items:center; gap:.75rem; padding:.55rem .7rem; border-radius:.6rem;
  background:rgb(var(--c-bg) / .45); border:1px solid rgba(148,163,184,.12); }
.find-row b{ font-size:.85rem; font-weight:600; }
.find-tag{ display:inline-block; padding:.05rem .35rem; border-radius:.35rem; font-size:.62rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(148,163,184,.16); color:rgb(var(--c-muted)); }
[data-theme="light"] .find-tag{ background:rgba(15,23,42,.05); }
.find-sub{ font-size:.7rem; color:rgb(var(--c-muted)); margin-top:.2rem; }
.find-open{ margin-left:auto; padding:.25rem .7rem; border-radius:.45rem; cursor:pointer; white-space:nowrap;
  font-size:.7rem; font-weight:700;
  background:rgb(var(--c-primary) / .15); color:var(--primary); border:1px solid rgb(var(--c-primary) / .3); }
.find-open:hover{ background:var(--primary); color:#fff; }

/* Agrupadores (swimlanes dentro de columna) */
.kswim{ display:flex; align-items:center; gap:.5rem; margin:.35rem .1rem .1rem; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.05em; color:rgb(var(--c-muted)); }
.kswim::after{ content:""; flex:1; height:1px; background:rgba(148,163,184,.16); }
.kswim .n{ font-variant-numeric:tabular-nums; opacity:.7; }

/* Tarjeta resaltada al llegar por sync de otro usuario */
@keyframes kc-land{ 0%{ box-shadow:0 0 0 2px rgba(56,189,248,.7); } 100%{ box-shadow:0 0 0 0 rgba(56,189,248,0); } }
.kanban-card.kc-landed{ animation:kc-land 1.4s ease-out; }

/* Foco de teclado en tarjeta */
.kanban-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* Aviso de pedidos nuevos */
.board-nudge{ position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:60;
  display:none; align-items:center; gap:.6rem; padding:.55rem 1rem; border-radius:.8rem;
  background:rgba(20,20,24,.96); color:#fff; border:1px solid rgba(56,189,248,.5);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6); }
.board-nudge.show{ display:flex; animation:toast-in .3s ease both; }
.board-nudge button{ background:var(--xp); color:#04121f; font-weight:700; font-size:.78rem;
  padding:.3rem .7rem; border-radius:.55rem; cursor:pointer; }

/* ════════════════════════════════════════════════════════════════════════
   MOMENTOS ÉPICOS · overlays a pantalla completa (level-up, liga, insignia)
   ════════════════════════════════════════════════════════════════════════ */
.epic-overlay{ position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,.86));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  --epic:#22c55e; animation:epic-fade .28s ease both; cursor:pointer; }
.epic-overlay.out{ animation:epic-fade .3s ease reverse forwards; }
@keyframes epic-fade{ from{ opacity:0 } to{ opacity:1 } }

.epic-burst{ position:absolute; width:min(120vw,900px); height:min(120vw,900px); border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 8deg, color-mix(in srgb, var(--epic) 55%, transparent) 8deg 12deg, transparent 12deg 20deg);
  filter:blur(.5px); opacity:.5; animation:epic-spin 7s linear infinite, epic-pop .7s cubic-bezier(.18,1,.3,1) both; }
.epic-burst::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--epic) 45%, transparent), transparent 62%); animation:epic-pulse 2.4s ease-in-out infinite; }
@keyframes epic-spin{ to{ transform:rotate(360deg) } }
@keyframes epic-pop{ from{ transform:scale(.2); opacity:0 } to{ opacity:.5 } }
@keyframes epic-pulse{ 0%,100%{ transform:scale(.92) } 50%{ transform:scale(1.05) } }

.epic-core{ position:relative; text-align:center; padding:1.5rem 2rem; animation:epic-rise .5s cubic-bezier(.18,1,.3,1) both; }
@keyframes epic-rise{ from{ transform:translateY(24px) scale(.8); opacity:0 } to{ transform:none; opacity:1 } }
.epic-icon{ width:6rem; height:6rem; margin:0 auto 1rem; border-radius:1.5rem; display:grid; place-items:center;
  color:#fff; background:linear-gradient(160deg, color-mix(in srgb, var(--epic) 85%, #000), color-mix(in srgb, var(--epic) 40%, #000));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--epic) 30%, transparent), 0 18px 60px -10px var(--epic);
  animation:epic-bob 2.2s ease-in-out infinite; }
@keyframes epic-bob{ 0%,100%{ transform:translateY(0) rotate(-3deg) } 50%{ transform:translateY(-8px) rotate(3deg) } }
.epic-kicker{ font-size:.8rem; letter-spacing:.35em; text-transform:uppercase; color:var(--epic); font-weight:700; }
.epic-big{ font-family:'Russo One',system-ui,sans-serif; font-size:clamp(3.5rem,14vw,7rem); line-height:1; color:#fff;
  text-shadow:0 0 30px var(--epic); animation:epic-num .6s cubic-bezier(.18,1,.3,1) both; }
@keyframes epic-num{ from{ transform:scale(.4); filter:blur(6px); opacity:0 } to{ transform:none; filter:none; opacity:1 } }
.epic-title{ font-family:'Russo One',system-ui,sans-serif; font-size:clamp(1.4rem,4vw,2.2rem); color:#fff; margin-top:.4rem; }
.epic-sub{ color:rgba(255,255,255,.75); margin-top:.35rem; font-size:.95rem; }
.epic-hint{ position:absolute; bottom:8vh; left:0; right:0; text-align:center; color:rgba(255,255,255,.4); font-size:.75rem; }

/* Botón de silencio (junto al tema) */
.sound-toggle .on{ display:inline; } .sound-toggle .off{ display:none; }
.sound-toggle.muted .on{ display:none; } .sound-toggle.muted .off{ display:inline; }

@media (prefers-reduced-motion: reduce){
  .epic-burst{ animation:none } .epic-icon{ animation:none } .epic-core{ animation:none }
  .epic-big{ animation:none }
}

/* ════════════════════════════════════════════════════════════════════════
   MISIONES / QUESTS
   ════════════════════════════════════════════════════════════════════════ */
.quest-card{ --qc:#38BDF8; border:1px solid rgba(148,163,184,.16); border-radius:.9rem; padding:.75rem .85rem;
  background:rgba(255,255,255,.03); transition:border-color .2s, box-shadow .2s; }
.quest-card.done{ border-color:color-mix(in srgb, var(--qc) 55%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--qc) 25%, transparent); }
.quest-card.claimed{ opacity:.6; }
[data-theme="light"] .quest-card{ background:#fff; }
.quest-head{ display:flex; align-items:flex-start; gap:.55rem; }
.quest-ic{ display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:.55rem; flex:none;
  color:var(--qc); background:color-mix(in srgb, var(--qc) 16%, transparent); }
.quest-title{ font-weight:600; font-size:.85rem; line-height:1.2; }
.quest-desc{ font-size:.72rem; color:rgb(var(--c-muted)); }
.quest-scope{ margin-left:auto; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:rgb(var(--c-muted));
  border:1px solid rgba(148,163,184,.2); padding:.05rem .4rem; border-radius:.4rem; white-space:nowrap; }
.quest-bar{ height:6px; border-radius:99px; background:rgba(148,163,184,.16); overflow:hidden; margin:.6rem 0 .5rem; }
.quest-bar > span{ display:block; height:100%; border-radius:99px; background:var(--qc); transition:width .6s cubic-bezier(.22,1,.36,1); }
.quest-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.quest-reward{ font-size:.72rem; color:rgb(var(--c-ink)); font-weight:600; }
.quest-prog{ font-size:.72rem; color:rgb(var(--c-muted)); font-variant-numeric:tabular-nums; }
.quest-done{ display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; color:var(--qc); font-weight:600; }
.quest-claim{ display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:700; cursor:pointer;
  color:#04121f; background:var(--qc); padding:.3rem .7rem; border-radius:.55rem; transition:transform .12s, filter .12s;
  animation:live-pulse 1.8s ease-out infinite; }
.quest-claim:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.quest-cat{ font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--qc); }
.quest-note{ font-size:.68rem; color:rgb(var(--c-muted)); margin-top:.15rem; }
.quest-wait{ display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; color:rgb(var(--c-muted)); font-weight:600; }

/* ── Banda de cumpleaños · sólo aparece el día que alguien cumple ─────────── */
.bday-strip{ --bd:#F472B6; display:flex; align-items:center; gap:.65rem; padding:.45rem .75rem;
  background:linear-gradient(90deg, color-mix(in srgb, var(--bd) 16%, transparent), rgb(var(--c-surface) / .5) 60%);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--bd) 35%, transparent); }
@media (min-width:1024px){ .bday-strip{ padding:.45rem 1.5rem; } }
.bday-strip.is-mine{ --bd:#FBBF24;
  background:linear-gradient(90deg, color-mix(in srgb, #F472B6 22%, transparent),
                                    color-mix(in srgb, #FBBF24 16%, transparent) 55%,
                                    rgb(var(--c-surface) / .5)); }

.bday-cake{ font-size:1.2rem; line-height:1; flex:none; animation:bday-pop 2.6s ease-in-out infinite; }
@keyframes bday-pop{ 0%,72%,100%{ transform:scale(1) rotate(0); } 80%{ transform:scale(1.18) rotate(-8deg); }
  88%{ transform:scale(1.12) rotate(7deg); } }
@media (prefers-reduced-motion:reduce){ .bday-cake{ animation:none; } }

.bday-txt{ min-width:0; flex:1; line-height:1.2; }
.bday-title{ display:block; font-size:.78rem; font-weight:700; color:rgb(var(--c-ink));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bday-sub{ display:none; font-size:.68rem; color:rgb(var(--c-muted)); }
@media (min-width:640px){ .bday-sub{ display:block; } }

.bday-people{ display:flex; align-items:center; flex:none; }
.bday-face{ display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:.55rem;
  font-family:'Russo One',sans-serif; font-size:.62rem; border:1px solid; margin-left:-.35rem; }
.bday-face:first-child{ margin-left:0; }

/* ── Barra de misiones · va fija arriba en todas las ventanas ─────────────── */
.qstrip{ display:flex; align-items:center; gap:.55rem; padding:.4rem .75rem;
  background:rgb(var(--c-surface) / .5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgb(var(--c-line) / .45); }
@media (min-width:1024px){ .qstrip{ padding:.4rem 1.5rem; gap:.75rem; } }

.qstrip-sum{ display:flex; align-items:center; gap:.5rem; flex:none; padding:.25rem .55rem; border-radius:.7rem;
  color:rgb(var(--c-ink)); transition:background .15s; }
.qstrip-sum:hover{ background:rgb(var(--c-primary) / .1); }
.qstrip-ic{ display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:.5rem; flex:none;
  color:rgb(var(--c-primary)); background:rgb(var(--c-primary) / .14); }
.qstrip-sum-txt{ display:none; line-height:1.15; }
@media (min-width:640px){ .qstrip-sum-txt{ display:block; } }
.qstrip-label{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.02em; }
.qstrip-left{ display:block; font-size:.66rem; color:rgb(var(--c-muted)); }
.qstrip-count{ font-family:'Russo One',sans-serif; font-size:.9rem; font-variant-numeric:tabular-nums;
  padding:.1rem .45rem; border-radius:.5rem; background:rgb(var(--c-primary) / .14); color:rgb(var(--c-primary)); }
.qstrip.is-complete .qstrip-count{ background:rgb(34 197 94 / .16); color:#22C55E; }
.qstrip.is-complete .qstrip-ic{ background:rgb(34 197 94 / .16); color:#22C55E; }

.qstrip-list{ display:flex; align-items:center; gap:.45rem; flex:1; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; }
.qstrip-list::-webkit-scrollbar{ display:none; }

.qchip{ --qc:#38BDF8; display:flex; align-items:center; gap:.45rem; flex:1 1 0; min-width:9.5rem; max-width:22rem;
  padding:.3rem .55rem; border-radius:.7rem; border:1px solid rgb(var(--c-line) / .5);
  background:rgb(var(--c-bg) / .35); transition:border-color .18s, transform .18s cubic-bezier(.2,.8,.2,1), background .18s; }
.qchip-ic{ display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:.45rem; flex:none;
  color:var(--qc); background:color-mix(in srgb, var(--qc) 16%, transparent); }
.qchip-body{ min-width:0; flex:1; }
.qchip-title{ display:block; font-size:.7rem; font-weight:600; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qchip-bar{ display:block; height:4px; margin-top:.25rem; border-radius:99px;
  background:rgb(var(--c-line) / .55); overflow:hidden; }
.qchip-bar > i{ display:block; height:100%; border-radius:99px; background:var(--qc);
  transition:width .6s cubic-bezier(.22,1,.36,1); }
.qchip-num{ flex:none; font-size:.66rem; font-weight:700; font-variant-numeric:tabular-nums;
  color:rgb(var(--c-muted)); white-space:nowrap; }
.qchip.is-done{ border-color:color-mix(in srgb, var(--qc) 55%, transparent);
  background:color-mix(in srgb, var(--qc) 10%, transparent); }
.qchip.is-done .qchip-num{ color:var(--qc); }
.qchip.is-claimed{ opacity:.55; }
.qchip.is-waiting .qchip-num{ font-style:italic; font-weight:600; }
@media (hover:hover){ .qchip:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--qc) 45%, transparent); } }

.qstrip-more{ display:none; }
/* En móvil se ve el resumen y un botón que despliega las tres tarjetas. */
@media (max-width:639px){
  .qstrip{ flex-wrap:wrap; }
  .qstrip-sum{ flex:1; }
  .qstrip-more{ display:grid; place-items:center; width:2rem; height:2rem; flex:none; border-radius:.6rem;
    color:rgb(var(--c-muted)); cursor:pointer; transition:transform .2s, color .15s; }
  .qstrip-more[aria-expanded="true"]{ transform:rotate(180deg); color:rgb(var(--c-primary)); }
  .qstrip-list{ display:none; width:100%; flex-basis:100%; order:3; padding-bottom:.25rem; }
  .qstrip.is-open .qstrip-list{ display:flex; }
  .qchip{ flex:0 0 12rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLAS DE DATOS (CRUD) · tono calmado SOLO en tablas — la marca sigue roja
   Envolver una tabla/lista de datos con .data-table para neutralizar los
   acentos "primary" (dejan de gritar en rojo); danger/warn siguen semánticos.
   ════════════════════════════════════════════════════════════════════════ */
.data-table{ --c-primary:100 116 139; }             /* slate-500: acentos calmados */
:root[data-theme="light"] .data-table{ --c-primary:71 85 105; } /* slate-600 */
.data-table thead th{ color:rgb(var(--c-muted)); font-weight:600; }
.data-table tbody tr{ transition:background-color .15s; }
.data-table tbody tr:hover{ background:rgb(var(--c-primary) / .06); }

/* ════════════════════════════════════════════════════════════════════════
   INTERACCIONES PREMIUM (game-feel) · hover-lift + press táctil + brillo
   ════════════════════════════════════════════════════════════════════════ */
@media (hover:hover){
  .glass-hover:hover{ transform:translateY(-3px); }
  .kanban-card{ transition:border-color .15s, box-shadow .15s, opacity .15s, transform .16s cubic-bezier(.2,.8,.2,1); }
  .kanban-card:hover:not(.kanban-dragging){ transform:translateY(-3px); border-color:rgba(255,255,255,.22); box-shadow:0 12px 26px -14px rgba(0,0,0,.7); }
  /* En una tarjeta en alerta el hover NO apaga el halo de color: sólo la levanta. */
  .kanban-card[data-prio="1"]:hover:not(.kanban-dragging){
    box-shadow:0 0 28px 0 rgb(var(--c-warn) / .65), 0 12px 26px -14px rgba(0,0,0,.7); }
  .kanban-card[data-prio="2"]:hover:not(.kanban-dragging){
    box-shadow:0 0 38px 2px rgb(var(--c-danger) / .8), 0 12px 26px -14px rgba(0,0,0,.7); }
  .quest-card{ transition:border-color .2s, box-shadow .2s, transform .18s cubic-bezier(.2,.8,.2,1); }
  .quest-card:hover{ transform:translateY(-3px); }
  .board-stat{ transition:transform .15s, border-color .15s; }
  .board-stat:hover{ transform:translateY(-2px); border-color:rgba(148,163,184,.4); }
}
/* Press táctil en botones de juego */
.kc-btn, .fchip, .quest-claim, .shop-buy, .duel-act, .btn-deliver, .loot{
  transition:transform .1s cubic-bezier(.2,.8,.2,1), filter .15s, background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
.kc-btn:active, .fchip:active, .quest-claim:active, .shop-buy:active, .duel-act:active, .btn-deliver:active, .loot:active{
  transform:scale(.93); }
/* Brillo que barre botones destacados */
.shine{ position:relative; overflow:hidden; }
.shine::after{ content:""; position:absolute; top:0; left:-140%; width:60%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.shine:hover::after{ animation:shine-sweep .8s ease; }
@keyframes shine-sweep{ to{ left:160%; } }

/* ════════════════════════════════════════════════════════════════════════
   MODALES PROFESIONALES · reemplazan los CRUD en línea
   ════════════════════════════════════════════════════════════════════════ */
.pp-modal{ position:fixed; inset:0; z-index:80; display:none; align-items:flex-start; justify-content:center;
  padding:5vh 1rem 8vh; overflow-y:auto; background:rgba(18,4,10,.62);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.pp-modal.open{ display:flex; animation:epic-fade .2s ease both; }
.pp-modal-card{ width:100%; max-width:var(--mw,640px); border-radius:var(--radius); position:relative;
  background:linear-gradient(180deg, rgb(var(--c-surface)), rgb(var(--c-bg)));
  border:1px solid rgb(var(--c-line) / .7); box-shadow:0 44px 100px -30px rgba(8,1,5,.85);
  animation:pp-modal-in .35s cubic-bezier(.2,1,.3,1) both; }
@keyframes pp-modal-in{ from{ transform:translateY(26px) scale(.965); opacity:0 } to{ transform:none; opacity:1 } }
.pp-modal-head{ display:flex; align-items:center; gap:.7rem; padding:1.05rem 1.25rem;
  border-bottom:1px solid rgb(var(--c-line) / .5); position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg, rgb(var(--c-surface)), rgb(var(--c-surface) / .6)); border-radius:var(--radius) var(--radius) 0 0; }
.pp-modal-badge{ display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem; flex:none;
  color:#fff; background:linear-gradient(160deg, rgb(var(--c-primary)), color-mix(in srgb, var(--primary) 55%, #000));
  box-shadow:0 8px 20px -6px rgb(var(--c-primary) / .8); }
.pp-modal-title{ font-family:'Russo One',sans-serif; font-size:1.12rem; line-height:1.15; }
.pp-modal-sub{ font-size:.75rem; color:rgb(var(--c-muted)); }
.pp-modal-x{ margin-left:auto; display:grid; place-items:center; width:2rem; height:2rem; border-radius:.6rem;
  color:rgb(var(--c-muted)); cursor:pointer; transition:background .15s, color .15s; }
.pp-modal-x:hover{ background:rgb(var(--c-primary) / .15); color:var(--primary); }
.pp-modal-body{ padding:1.25rem; }
.pp-modal-foot{ padding:.9rem 1.25rem; border-top:1px solid rgb(var(--c-line) / .5); display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }

/* Campos de formulario coherentes con la identidad */
.field{ display:block; }
.field > span{ display:block; font-size:.78rem; color:rgb(var(--c-muted)); margin-bottom:.35rem; }
.input{ width:100%; padding:.6rem .8rem; border-radius:.8rem; font-size:.9rem; color:rgb(var(--c-ink));
  background:rgb(var(--c-bg) / .55); border:1px solid rgb(var(--c-line) / .7); transition:border-color .15s, box-shadow .15s; }
.input:focus{ outline:none; border-color:rgb(var(--c-primary) / .6); box-shadow:0 0 0 3px rgb(var(--c-primary) / .15); }
[data-theme="light"] .input{ background:#fff; }
/* Botones con forma de píldora (identidad soft gaming) */
.btn-primary{ display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.15rem; border-radius:999px;
  font-weight:800; font-size:.85rem; color:#fff; cursor:pointer; border:none;
  background:linear-gradient(160deg, rgb(var(--c-primary)), color-mix(in srgb, var(--primary) 62%, #000));
  box-shadow:0 12px 26px -10px rgb(var(--c-primary) / .8); transition:transform .12s, filter .15s; }
.btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.btn-ghost{ display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.1rem; border-radius:999px;
  font-weight:700; font-size:.85rem; cursor:pointer; color:rgb(var(--c-ink));
  background:rgb(var(--c-surface2) / .6); border:1px solid rgb(var(--c-line) / .7); transition:background .15s; }
.btn-ghost:hover{ background:rgb(var(--c-surface2)); }

/* ── Detalle del pedido + hilo de notas (Kanban) ─────────────────────────── */
.om-label{ display:flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.02em;
  text-transform:uppercase; color:rgb(var(--c-muted)); margin-bottom:.45rem; }
.om-count{ font-size:.7rem; padding:.02rem .4rem; border-radius:999px; color:var(--primary);
  background:rgb(var(--c-primary) / .14); font-weight:800; }
.om-details{ font-size:.9rem; line-height:1.5; color:rgb(var(--c-ink)); white-space:pre-wrap; word-break:break-word;
  padding:.7rem .85rem; border-radius:.8rem; background:rgb(var(--c-bg) / .5); border:1px solid rgb(var(--c-line) / .6); }
.om-details.is-empty{ color:rgb(var(--c-muted)); font-style:italic; }
/* Entrega prometida del pedido, con el semáforo de la tarjeta */
.om-due{ display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:.8rem;
  background:rgb(var(--c-line) / .35); border:1px solid rgb(var(--c-line) / .6); }
.om-due-ico{ color:rgb(var(--c-muted)); }
.om-due-date{ font-weight:700; font-size:.88rem; }
.om-due-left{ font-size:.75rem; color:rgb(var(--c-muted)); }
.om-due.p1{ background:rgb(var(--c-warn) / .1); border-color:rgb(var(--c-warn) / .35); }
.om-due.p1 .om-due-ico, .om-due.p1 .om-due-left{ color:var(--warn); }
.om-due.p2{ background:rgb(var(--c-danger) / .1); border-color:rgb(var(--c-danger) / .4); }
.om-due.p2 .om-due-ico, .om-due.p2 .om-due-left{ color:var(--danger); }

/* Recorrido del pedido: quién lo movió, a dónde y cuándo */
.om-history{ list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem;
  max-height:22vh; overflow-y:auto; }
.om-history li{ display:flex; align-items:baseline; gap:.5rem; font-size:.78rem; padding:.28rem .5rem;
  border-radius:.5rem; background:rgb(var(--c-line) / .28); }
.om-history .om-h-when{ color:rgb(var(--c-muted)); font-size:.7rem; white-space:nowrap; min-width:4.6rem; }
.om-history .om-h-move{ flex:1; min-width:0; }
.om-history .om-h-move b{ color:rgb(var(--c-ink)); }
.om-history .om-h-who{ color:rgb(var(--c-muted)); font-size:.72rem; white-space:nowrap; }
.om-history li.om-empty{ background:none; color:rgb(var(--c-muted)); }

.om-items{ list-style:none; margin:.55rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.om-items li{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; padding:.2rem .55rem;
  border-radius:.5rem; background:rgb(var(--c-surface2) / .6); border:1px solid rgb(var(--c-line) / .6); }
.om-items li b{ color:var(--primary); font-weight:800; }

.om-notes{ display:flex; flex-direction:column; gap:.55rem; max-height:32vh; overflow-y:auto;
  padding:.25rem .1rem .35rem; margin-bottom:.7rem; }
.om-empty{ font-size:.82rem; color:rgb(var(--c-muted)); text-align:center; padding:1rem 0; }
.om-note{ display:flex; gap:.55rem; align-items:flex-start; }
.om-note.mine{ flex-direction:row-reverse; }
.om-note-av{ flex:none; width:1.9rem; height:1.9rem; border-radius:.6rem; display:grid; place-items:center;
  font-size:.72rem; font-weight:800; }
.om-note-bubble{ max-width:80%; padding:.5rem .7rem; border-radius:.85rem; font-size:.88rem; line-height:1.45;
  white-space:pre-wrap; word-break:break-word; background:rgb(var(--c-surface2) / .7); border:1px solid rgb(var(--c-line) / .6); }
.om-note.mine .om-note-bubble{ background:rgb(var(--c-primary) / .16); border-color:rgb(var(--c-primary) / .35); }
.om-note-head{ display:flex; gap:.5rem; align-items:baseline; margin-bottom:.15rem; }
.om-note.mine .om-note-head{ flex-direction:row-reverse; }
.om-note-who{ font-size:.72rem; font-weight:800; color:rgb(var(--c-ink)); }
.om-note-when{ font-size:.66rem; color:rgb(var(--c-muted)); }
.om-note-form{ display:flex; flex-direction:column; gap:.5rem; }
.om-note-input{ resize:vertical; min-height:2.6rem; }
.om-hint{ font-size:.68rem; color:rgb(var(--c-muted)); }

/* ════════════════════════════════════════════════════════════════════════
   CENTRO DE ENTRENAMIENTO · acordeón del manual
   ════════════════════════════════════════════════════════════════════════ */
.tr-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tr-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:999px; cursor:pointer;
  font-size:.82rem; font-weight:700; user-select:none; transition:background .15s, color .15s, border-color .15s;
  background:rgb(var(--c-surface2) / .6); border:1px solid rgb(var(--c-line) / .7); color:rgb(var(--c-muted)); }
.tr-chip:hover{ color:rgb(var(--c-ink)); }
.tr-chip.active{ background:rgb(var(--c-primary) / .16); color:var(--primary); border-color:rgb(var(--c-primary) / .5); }
.tr-group-title{ font-family:'Russo One',sans-serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgb(var(--c-muted)); margin:1.6rem .25rem .6rem; }
.acc-item{ border:1px solid rgb(var(--c-line) / .5); border-radius:1rem; overflow:hidden; margin-bottom:.6rem;
  background:rgb(var(--c-surface) / .5); transition:border-color .2s; }
.acc-item.open{ border-color:rgb(var(--c-primary) / .45); }
.acc-head{ display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; cursor:pointer; padding:1rem 1.1rem;
  background:none; border:none; color:inherit; }
.acc-ic{ display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.8rem; flex:none;
  color:var(--primary); background:rgb(var(--c-primary) / .12); }
.acc-ic.xp{ color:var(--xp); background:rgb(var(--c-xp) / .12); }
.acc-ic.warn{ color:var(--warn); background:rgb(var(--c-warn) / .12); }
.acc-ic.gold{ color:var(--gold); background:rgb(var(--c-gold) / .12); }
.acc-tt{ flex:1; min-width:0; }
.acc-tt b{ display:block; font-size:.98rem; }
.acc-tt span{ display:block; font-size:.78rem; color:rgb(var(--c-muted)); margin-top:.1rem; }
.acc-chev{ flex:none; color:rgb(var(--c-muted)); transition:transform .25s; }
.acc-item.open .acc-chev{ transform:rotate(180deg); }
.acc-body{ display:none; padding:0 1.1rem 1.15rem; }
.acc-item.open .acc-body{ display:block; animation:acc-in .25s ease both; }
@keyframes acc-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.acc-body h4{ font-family:'Russo One',sans-serif; font-size:.82rem; letter-spacing:.03em; color:rgb(var(--c-ink));
  margin:1rem 0 .4rem; display:flex; align-items:center; gap:.4rem; }
.acc-body h4:first-child{ margin-top:.2rem; }
.acc-body p{ font-size:.88rem; line-height:1.6; color:rgb(var(--c-ink) / .88); margin:.35rem 0; }
.acc-body ul, .acc-body ol{ margin:.4rem 0 .4rem 1.1rem; font-size:.88rem; line-height:1.6; color:rgb(var(--c-ink) / .88); }
.acc-body li{ margin:.28rem 0; }
.acc-body li::marker{ color:var(--primary); }
.acc-body strong{ color:rgb(var(--c-ink)); }
.acc-body code{ font-family:'Chakra Petch',monospace; background:rgb(var(--c-bg) / .6); border:1px solid rgb(var(--c-line) / .6);
  padding:.05rem .4rem; border-radius:.4rem; font-size:.82rem; color:var(--primary); }
.tr-kv{ display:grid; grid-template-columns:1fr auto; gap:.15rem .8rem; margin:.5rem 0; font-size:.85rem;
  background:rgb(var(--c-bg) / .4); border:1px solid rgb(var(--c-line) / .5); border-radius:.7rem; padding:.7rem .9rem; }
.tr-kv > span{ color:rgb(var(--c-muted)); } .tr-kv > b{ text-align:right; font-variant-numeric:tabular-nums; }
.tr-note{ display:flex; gap:.6rem; padding:.7rem .9rem; border-radius:.7rem; margin:.6rem 0; font-size:.84rem; line-height:1.55;
  background:rgb(var(--c-primary) / .08); border:1px solid rgb(var(--c-primary) / .25); }
.tr-note.tip{ background:rgb(var(--c-xp) / .08); border-color:rgb(var(--c-xp) / .25); }
.tr-note.warn{ background:rgb(var(--c-warn) / .08); border-color:rgb(var(--c-warn) / .3); }
.tr-badge-admin{ font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .4rem;
  border-radius:.4rem; background:rgb(var(--c-primary) / .16); color:var(--primary); }
.tr-table{ width:100%; border-collapse:collapse; font-size:.82rem; margin:.5rem 0; }
.tr-table th, .tr-table td{ text-align:left; padding:.45rem .6rem; border-bottom:1px solid rgb(var(--c-line) / .5); }
.tr-table th{ color:rgb(var(--c-muted)); font-weight:600; text-transform:uppercase; font-size:.7rem; letter-spacing:.04em; }
/* Tablas anchas (p. ej. lo que gana cada área): ruedan dentro de su caja, nunca
   estiran la página en móvil. */
/* Fórmula del manual (p. ej. cómo sale el efectivo esperado del cuadre). */
.tr-formula{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.6rem 0;
  padding:.6rem .8rem; border-radius:.7rem; font-size:.84rem; line-height:1.5;
  background:rgb(var(--c-warn) / .08); border:1px solid rgb(var(--c-warn) / .25); }
.tr-formula span{ font-family:'Russo One',system-ui,sans-serif; color:var(--warn); padding:0 .1rem; }
.tr-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.5rem 0; }
.tr-table-wrap .tr-table{ min-width:32rem; margin:0; }
.tr-table-wrap .tr-table td{ white-space:nowrap; }
.acc-item.is-hidden{ display:none; }

/* ── Login · pantalla completa sin scroll, 100% responsive ───────────────── */
.login-page{ height:100dvh; min-height:100dvh; overflow:hidden; }
body.login-page{ padding:0; }               /* anula el padding del marco de la app */
.login-brand{ overflow:hidden; }
.login-form-col{ height:100dvh; overflow-y:auto; }   /* única columna que scrollea (interno) si hiciera falta */
.login-title{ font-family:'Russo One',sans-serif; line-height:1.08; font-size:clamp(1.9rem, 4.6vh, 3rem); }
@media (max-height:700px){ .login-desc, .login-chips{ display:none; } }   /* pantallas bajas: prioriza logo/título/form */
@media (max-height:560px){ .login-brand-stats{ display:none; } }

/* ── Logo protagonista del login ─────────────────────────────────────────── */
.login-hero{ position:relative; display:inline-block; }
.login-hero::before{ content:""; position:absolute; inset:-14% -10% -6%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, rgb(var(--c-primary) / .38), rgb(var(--c-primary) / .12) 55%, transparent 72%);
  filter:blur(6px); animation:login-glow 4.5s ease-in-out infinite; }
.login-hero img{ position:relative; z-index:1; width:auto; height:min(34vh, 300px); max-width:86%;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgb(var(--c-primary) / .5));
  animation:login-float 5.5s ease-in-out infinite; }
@keyframes login-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes login-glow{ 0%,100%{ opacity:.75; transform:scale(.96) } 50%{ opacity:1; transform:scale(1.04) } }

/* Logo animado en video: WebM con fondo transparente → el logo 3D flota
   (sin caja), con glow rojo y flotación, igual que el logo estático. */
.login-hero--video{ z-index:1; animation:login-hero-in 1s cubic-bezier(.2,1,.3,1) both; }
.login-hero-video{ position:relative; z-index:1; display:block; width:min(94%, 34rem);
  height:auto; max-width:100%;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgb(var(--c-primary) / .4));
  animation:login-float 6s ease-in-out infinite; }
@keyframes login-hero-in{ from{ opacity:0; transform:translateY(14px) scale(.96) } to{ opacity:1; transform:none } }
@media (max-height:700px){ .login-hero-video{ width:min(80%, 27rem) } }

@media (prefers-reduced-motion: reduce){
  .login-hero img, .login-hero::before, .login-hero-video, .login-hero--video{ animation:none }
}

/* ── Ripple global en clicks (feedback táctil de juego) ──────────────────── */
.pp-ripple{ position:fixed; z-index:70; width:16px; height:16px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgb(var(--c-primary) / .5), rgb(var(--c-primary) / 0) 70%);
  transform:translate(-50%,-50%) scale(0); animation:pp-ripple .55s ease-out forwards; }
@keyframes pp-ripple{ 0%{ opacity:.65; transform:translate(-50%,-50%) scale(0) } 100%{ opacity:0; transform:translate(-50%,-50%) scale(9) } }

/* ── Entrada escalonada de secciones al cargar/scrollear ─────────────────── */
body.reveal-on [data-reveal]{ opacity:0; transform:translateY(16px) scale(.996); }
body.reveal-on [data-reveal].in{ opacity:1; transform:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce){
  .pp-ripple{ display:none }
  body.reveal-on [data-reveal]{ opacity:1 !important; transform:none !important }
}

/* ════════════════════════════════════════════════════════════════════════
   CAJA SORPRESA · victoria premium (estilo arcade / Subway Surfers)
   ════════════════════════════════════════════════════════════════════════ */
.loot-win{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; cursor:pointer;
  --wc:#FBBF24; background:radial-gradient(120% 120% at 50% 45%, rgba(8,6,20,.72), rgba(4,3,12,.92));
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:epic-fade .25s ease both; }
.loot-win.out{ animation:epic-fade .3s ease reverse forwards; }
.loot-win-rays{ position:absolute; width:min(150vw,1100px); height:min(150vw,1100px); border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 7deg, color-mix(in srgb, var(--wc) 60%, transparent) 7deg 11deg, transparent 11deg 18deg);
  opacity:.55; animation:epic-spin 9s linear infinite, loot-rays-in .8s cubic-bezier(.18,1,.3,1) both; }
@keyframes loot-rays-in{ from{ transform:scale(.1); opacity:0 } to{ opacity:.55 } }
.loot-win-card{ position:relative; text-align:center; width:min(88vw,340px); padding:2rem 1.5rem 1.75rem; border-radius:1.5rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--wc) 22%, #14121f), color-mix(in srgb, var(--wc) 6%, #0b0a14));
  border:1px solid color-mix(in srgb, var(--wc) 55%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--wc) 20%, transparent), 0 30px 80px -20px var(--wc);
  overflow:hidden; animation:loot-slam .7s cubic-bezier(.2,1.35,.35,1) both; }
@keyframes loot-slam{ 0%{ transform:translateY(-40px) scale(.5) rotate(-6deg); opacity:0 }
  60%{ transform:translateY(0) scale(1.06) rotate(1deg); opacity:1 } 100%{ transform:none; opacity:1 } }
.loot-win-card::after{ content:""; position:absolute; top:0; left:-150%; width:55%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation:shine-sweep 1.1s ease .5s; }
.loot-win-badge{ font-family:'Russo One',system-ui,sans-serif; letter-spacing:.3em; text-transform:uppercase; font-size:.72rem; color:var(--wc); }
.loot-win-ic{ width:5.5rem; height:5.5rem; margin:.7rem auto; border-radius:1.4rem; display:grid; place-items:center; color:#0b0a14;
  background:linear-gradient(160deg, color-mix(in srgb, var(--wc) 95%, #fff), var(--wc));
  box-shadow:0 10px 30px -6px var(--wc); animation:loot-ic-bob 1.8s ease-in-out infinite .6s; }
@keyframes loot-ic-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg) } 50%{ transform:translateY(-7px) rotate(4deg) } }
.loot-win-label{ font-family:'Russo One',system-ui,sans-serif; font-size:1.5rem; color:#fff; text-shadow:0 0 22px var(--wc); }
.loot-win-sub{ color:rgba(255,255,255,.7); font-size:.82rem; margin-top:.35rem; }
.loot-win-hint{ position:absolute; bottom:7vh; left:0; right:0; text-align:center; color:rgba(255,255,255,.4); font-size:.75rem; }
/* Monedas que estallan hacia arriba */
.loot-coin{ position:absolute; left:50%; top:56%; width:26px; height:26px; color:var(--wc); pointer-events:none;
  transform:translate(-50%,-50%); animation:loot-coin-fly var(--dur,1.1s) cubic-bezier(.15,.7,.3,1) var(--delay,0s) forwards; opacity:0; }
@keyframes loot-coin-fly{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) }
  15%{ opacity:1 } 100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)) } }
/* Sacudida de pantalla */
@keyframes screen-shake{ 0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-6px,4px) } 40%{ transform:translate(6px,-3px) }
  60%{ transform:translate(-4px,-4px) } 80%{ transform:translate(4px,3px) } }
body.pp-shake{ animation:screen-shake .5s cubic-bezier(.36,.07,.19,.97); }

@media (prefers-reduced-motion: reduce){
  .loot-win-rays{ animation:none } .loot-win-card{ animation:none } .loot-coin{ display:none }
  .loot-win-ic{ animation:none } body.pp-shake{ animation:none } .shine::after{ display:none }
}