/* ── PERREOXL · el próximo nivel (23/09/2026) ───────────────────────────────
   Yuri: «lo veo muy sistema básico, quiero que sea todo más lindo aún,
   llevarlo al próximo nivel». Esta capa va encima de todo (tablero, Chat y
   Accesos) y NO cambia la identidad: el planeta, el rojo #FF3B2F sobre casi
   negro ciruela, Anton, Barlow Condensed e Inter, las marcas de esquina HUD.
   Lo que cambia es la terminación:
   · superficies con profundidad (degradado, luz de canto, sombra) en vez de
     cajas planas del mismo tono;
   · un solo lenguaje en todo el sistema: esquinas rectas con las marcas rojas
     (Chat y Accesos venían con esquinas redondeadas, como otra aplicación);
   · la derecha de la barra como un módulo, igual que el reloj;
   · el menú de la persona como una ficha;
   · filas que responden al pasar (filo rojo), botones con luz, filetes que se
     apagan en las puntas.
   html.px-tablero = el tablero · html.px-pagina = Chat y Accesos.
   ⚠️ Toda clase nueva lleva el prefijo px-. */

:root{
 --px-sup:linear-gradient(180deg,rgba(28,22,25,.94) 0%,rgba(18,15,17,.94) 100%);
 --px-sup2:linear-gradient(180deg,rgba(34,27,30,.96) 0%,rgba(22,18,20,.96) 100%);
 --px-canto:inset 0 1px 0 rgba(255,255,255,.035);
 --px-sombra:0 22px 44px -28px rgba(0,0,0,.85);
 --px-filete:linear-gradient(90deg,rgba(242,238,236,0) 0%,rgba(242,238,236,.07) 20%,rgba(255,59,47,.5) 50%,rgba(242,238,236,.07) 80%,rgba(242,238,236,0) 100%);
}

/* ═══ LA BARRA ═══════════════════════════════════════════════════════════ */
/* el filo de abajo: un filete que se apaga en las puntas (el mismo de la puerta) */
html.px-tablero .nav,html.px-pagina .nav{border-bottom-color:transparent}
html.px-tablero .nav::after,html.px-pagina .nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
 background:var(--px-filete);pointer-events:none}
html.px-tablero .navsub,html.px-pagina .navsub{border-top-color:rgba(35,31,33,.45)}
/* pestañas: al pasar, el subrayado asoma */
html.px-tablero .tabs button:hover::after,html.px-pagina .tabs a:hover::after{transform:scaleX(.35)}
html.px-tablero .tabs button.on::after,html.px-pagina .tabs a.on::after{transform:scaleX(1)}

/* la derecha de la barra: un módulo con divisiones, como el reloj */
.px-der{gap:0;border:1px solid var(--line);background:rgba(19,16,19,.6);height:46px;align-items:stretch}
.px-icono{width:46px;height:auto;border:0;border-radius:0;border-left:1px solid var(--line);position:relative}
.px-icono:first-child{border-left:0}
.px-icono:hover{background:rgba(255,255,255,.035);border-color:var(--line)}
.px-icono.px-on{background:linear-gradient(180deg,#FF4A3D,#E62B1E);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 18px rgba(255,59,47,.35)}
.px-icono::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transition:transform .22s}
.px-icono:hover:not(.px-on)::after{transform:scaleX(1)}
.px-insignia{top:6px;right:6px;border-radius:0;box-shadow:0 0 0 2px #120F11,0 0 10px rgba(255,59,47,.6)}
.px-sep{display:none}
.px-yo{border-radius:0;border:0;border-left:1px solid var(--line);padding:0 8px;gap:8px}
.px-yo:hover,.px-yo[aria-expanded="true"]{background:rgba(255,255,255,.035);border-color:var(--line)}
.px-yo .px-av{width:30px;height:30px;border-radius:0;background:linear-gradient(135deg,#2A2023,#171214);
 border:1px solid rgba(255,59,47,.55);box-shadow:0 0 12px rgba(255,59,47,.18);font-size:13px}
.px-yo[aria-expanded="true"] .px-av{border-color:var(--red);box-shadow:0 0 16px rgba(255,59,47,.4)}
.px-yo-txt{display:none}
.px-chev,.nav .px-chev{display:none}
.px-yo{padding:0 8px}
@media(max-width:1140px) and (min-width:1041px){.px-der{height:42px}.px-icono{width:40px}.px-yo{padding:0 5px}}
@media(max-width:780px){.px-der{height:40px}.px-icono{width:40px}}

/* ═══ EL MENÚ DE LA PERSONA: una ficha ════════════════════════════════════ */
.px-menu{top:62px;right:34px;width:312px;padding:0;border-radius:0;overflow:hidden;
 background:linear-gradient(180deg,#1A1517 0%,#110E10 100%);border:1px solid var(--line2);
 box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,59,47,.05),var(--px-canto);
 transform-origin:top right;animation:px-ficha .22s cubic-bezier(.2,.8,.2,1)}
@keyframes px-ficha{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
/* las marcas de esquina del SYSTEM */
.px-menu::before,.px-menu::after{content:'';position:absolute;width:10px;height:10px;border:0 solid var(--red);pointer-events:none;z-index:3}
.px-menu::before{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.px-menu::after{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
/* la cabecera: la inicial grande sobre la textura de puntos del planeta */
.px-my-cab{position:relative;display:flex;align-items:center;gap:14px;padding:20px 18px 18px;margin:0;border-bottom:1px solid var(--line);
 background:
  radial-gradient(120% 140% at 100% 0%,rgba(255,59,47,.22) 0%,rgba(255,59,47,0) 55%),
  radial-gradient(circle,rgba(242,238,236,.10) 1px,transparent 1.4px) 0 0/9px 9px,
  linear-gradient(180deg,#1F181B,#161214)}
.px-my-cab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--px-filete)}
.px-my-av{width:52px;height:52px;flex:none;display:grid;place-items:center;font-family:Anton,sans-serif;font-size:24px;color:#fff;
 background:linear-gradient(145deg,#FF4A3D 0%,#C21B12 100%);box-shadow:0 10px 26px -8px rgba(255,59,47,.7),inset 0 1px 0 rgba(255,255,255,.25)}
html.px-ver-como .px-my-av{background:linear-gradient(145deg,#3A2E31,#1D1719);box-shadow:inset 0 0 0 1px var(--red)}
.px-my-id{min-width:0;display:flex;flex-direction:column}
/* (la regla de los textos de la cabecera no alcanza a la inicial) */
.px-my-cab .px-my-av{display:grid;margin:0;font-size:24px;color:#fff;white-space:normal;overflow:visible;line-height:1}
.px-my-cab b{font-family:Anton,sans-serif;font-weight:400;font-size:21px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.px-my-cab span{display:block;font-size:11.5px;color:var(--mut);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-my-est{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-style:normal;font-family:'Barlow Condensed',sans-serif;
 font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ok)}
.px-my-est span{margin:0;color:inherit;font-size:inherit}
.px-my-est i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 9px var(--ok);animation:px-late 2.2s ease-in-out infinite}
html.px-ver-como .px-my-est{color:var(--red2)}
html.px-ver-como .px-my-est i{background:var(--red);box-shadow:0 0 9px var(--red)}
@keyframes px-late{50%{opacity:.35}}
/* Ver como: las personas en fichas */
.px-my-vista{padding:14px 12px 12px;margin:0;border-bottom:1px solid var(--line)}
.px-my-rot{display:flex;align-items:center;gap:10px;padding:0 4px 10px;font-size:10.5px;letter-spacing:.24em}
.px-my-rot::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.px-my-vistas{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.px-my-v{border:1px solid var(--line);border-radius:0;padding:8px 9px;gap:9px;background:rgba(255,255,255,.015);transition:border-color .15s,background .15s,transform .15s}
.px-my-v:first-child{grid-column:1/-1}
.px-my-v:hover{background:rgba(255,59,47,.06);border-color:rgba(255,59,47,.35);transform:translateY(-1px)}
.px-my-v .px-cara{width:28px;height:28px;border-radius:0;font-size:12px;background:#231C1F;border:1px solid var(--line2)}
.px-my-v-txt b{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.px-my-v-txt small{font-family:'Barlow Condensed',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.px-my-v.px-on{background:linear-gradient(180deg,rgba(255,59,47,.16),rgba(255,59,47,.06));border-color:rgba(255,59,47,.6)}
.px-my-v.px-on .px-cara{background:var(--red);border-color:var(--red);color:#fff}
/* las acciones */
.px-my-grupo{padding:6px 6px 0}
.px-my-item{position:relative;border-radius:0;padding:9px 10px;gap:12px;font-size:13px;letter-spacing:.14em}
.px-my-item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--red);transform:scaleY(0);transition:transform .18s}
.px-my-item:hover{background:rgba(255,255,255,.035)}
.px-my-item:hover::before{transform:scaleY(1)}
.px-my-ic{width:30px;height:30px;flex:none !important;display:grid;place-items:center;border:1px solid var(--line2);background:#161214;color:var(--ink2);transition:border-color .15s,color .15s}
.px-my-ic .px-ic{width:15px;height:15px}
.px-my-item:hover .px-my-ic{border-color:rgba(255,59,47,.5);color:var(--red2)}
.px-my-flecha{font-style:normal;font-size:18px;color:var(--dim);flex:none;transition:transform .15s,color .15s}
.px-my-item:hover .px-my-flecha{transform:translateX(3px);color:var(--red2)}
.px-interruptor{border-radius:0;width:32px;height:16px}
.px-interruptor::after{border-radius:0;width:12px;height:12px}
.px-my-item[aria-checked="true"] .px-interruptor::after{transform:translateX(16px)}
.px-my-salir{margin:6px 6px 0;width:calc(100% - 12px);border-top:1px solid var(--line)}
.px-my-salir .px-my-ic{border-color:rgba(255,59,47,.3);color:var(--red2)}
.px-my-salir:hover{color:var(--red2)}
.px-my-pie{display:flex;align-items:center;gap:10px;padding:12px 18px 13px;margin-top:6px;border-top:1px solid var(--line);
 font-family:Anton,sans-serif;font-size:9.5px;letter-spacing:.42em;color:#4A4245;background:rgba(0,0,0,.18)}
.px-my-pie i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,59,47,.45),transparent)}
.px-my-pie span{text-transform:uppercase}
.px-my-pie span:last-child{color:var(--red)}
.px-my-sep{display:none}
@media(max-width:1040px){.px-menu{right:18px}}
@media(max-width:620px){.px-menu{left:10px;right:10px;width:auto;top:56px}}

/* ═══ SUPERFICIES DEL TABLERO: profundidad en vez de cajas planas ═════════ */
html.px-tablero .panel{background:var(--px-sup);box-shadow:var(--px-canto),var(--px-sombra)}
html.px-tablero .panel::before,html.px-tablero .panel::after{border-color:rgba(255,59,47,.6);width:11px;height:11px}
html.px-tablero thead th{background:linear-gradient(180deg,#1C1619,#171315);color:#A79E9C}
html.px-tablero tbody tr,html.px-tablero li.p,html.px-tablero .al{position:relative;transition:background .16s}
html.px-tablero tbody tr:hover,html.px-tablero li.p:hover,html.px-tablero .al[data-ev]:hover{background:linear-gradient(90deg,rgba(255,59,47,.07),rgba(255,59,47,0) 60%)}
html.px-tablero tbody tr:hover td:first-child,html.px-tablero li.p:hover{box-shadow:inset 2px 0 0 var(--red)}
html.px-tablero .al[data-ev]:hover{box-shadow:inset 2px 0 0 var(--red)}
html.px-tablero tbody tr:hover .go{letter-spacing:.16em}
html.px-tablero .go{transition:color .16s,letter-spacing .2s}
/* las tarjetas de números: rectas, con luz y el triángulo rojo */
html.px-tablero .kpc{border-radius:0;background:var(--px-sup2);box-shadow:var(--px-canto),var(--px-sombra)}
html.px-tablero .kpc::before{content:'';position:absolute;left:0;top:0;width:36%;height:1px;background:linear-gradient(90deg,var(--red),transparent);opacity:.7}
html.px-tablero .kpc:hover{border-color:rgba(255,59,47,.35);box-shadow:var(--px-canto),0 18px 40px -22px rgba(255,59,47,.35)}
html.px-tablero .kpc b{font-size:32px}
html.px-tablero .kpc.hot b{text-shadow:0 0 22px rgba(255,59,47,.45)}
/* la franja de contadores */
html.px-tablero .hs b{font-size:34px;text-shadow:0 6px 24px rgba(0,0,0,.6)}
html.px-tablero .hs.red b{text-shadow:0 0 24px rgba(255,59,47,.5)}
html.px-tablero .hstats-w{border-top-color:transparent}
html.px-tablero .hstats-w::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--px-filete)}
html.px-tablero .hero{border-bottom-color:transparent}
/* cabeceras de sección: el título arrastra un filete que se apaga */
html.px-tablero .sh>h2,html.px-pagina .sh h2{display:flex;align-items:center}
html.px-tablero .sh>h2::after,html.px-pagina .sh h2::after{content:'';width:64px;height:1px;margin-left:16px;background:linear-gradient(90deg,rgba(255,59,47,.6),transparent)}
/* botones con luz */
html.px-tablero .btn:not(.gh){background:linear-gradient(180deg,#FF4B3E 0%,#EC2F21 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -12px rgba(255,59,47,.8)}
html.px-tablero .btn:not(.gh):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 30px -12px rgba(255,59,47,.95)}
html.px-tablero .btn.gh{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
html.px-tablero .btn.gh:hover{box-shadow:0 0 0 1px rgba(255,59,47,.25),0 10px 24px -14px rgba(255,59,47,.6)}
html.px-tablero .chip.on{background:linear-gradient(180deg,#FF4B3E,#EC2F21);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
html.px-tablero .pill.live{background:linear-gradient(180deg,#FF4B3E,#EC2F21);box-shadow:0 0 16px -4px rgba(255,59,47,.7)}
html.px-tablero .badge{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
/* estados vacíos: con filo rojo y un resplandor, no un texto suelto */
html.px-tablero .vacio{position:relative;padding:28px 26px 26px 30px;
 background:radial-gradient(80% 140% at 0% 50%,rgba(255,59,47,.07),transparent 60%)}
html.px-tablero .vacio::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,transparent,var(--red),transparent)}
html.px-tablero .empty{color:var(--mut)}
/* ciudades: la grilla sin bloques grises cuando sobra lugar */
html.px-tablero .ctys{background:transparent;gap:0}
html.px-tablero .cty{box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);background:transparent;transition:background .16s}
html.px-tablero .cty:hover{background:linear-gradient(135deg,rgba(255,59,47,.07),transparent 70%)}
/* el almanaque */
html.px-tablero .cel{transition:background .16s}
html.px-tablero .cel:not(.out):not(.ev):hover{background:#171315}
html.px-tablero .cel.ev{background:linear-gradient(160deg,rgba(255,59,47,.20) 0%,rgba(255,59,47,.05) 70%)}
html.px-tablero .cel.ev::before{box-shadow:0 0 12px rgba(255,59,47,.7)}
html.px-tablero .cel.today .dn{background:var(--red);color:#fff;box-shadow:0 0 14px rgba(255,59,47,.55)}
html.px-tablero .mnav,html.px-tablero .bar,html.px-tablero .dow div{background:linear-gradient(180deg,#1B1618,#161214)}
/* el pie */
html.px-tablero footer{border-top-color:transparent;position:relative}
html.px-tablero footer::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--px-filete)}
html.px-tablero footer .vsel{border-radius:0}
/* la ficha lateral */
html.px-tablero .drw{background:linear-gradient(180deg,#1A1517,#110E10);box-shadow:-30px 0 80px -30px rgba(0,0,0,.9)}
html.px-tablero .drw-h{background:radial-gradient(120% 120% at 100% 0%,rgba(255,59,47,.14),transparent 60%)}

/* alertas: una luz de estado en caja, no un puntito */
html.px-tablero .al .ic{width:24px;height:24px;margin-top:0;border-radius:0;flex:none;box-shadow:none;
 background:radial-gradient(circle,var(--warn) 2.6px,rgba(255,176,32,0) 3.6px),rgba(255,176,32,.06);border:1px solid rgba(255,176,32,.35)}
html.px-tablero .al.a .ic{background:radial-gradient(circle,var(--bad) 2.6px,rgba(255,77,77,0) 3.6px),rgba(255,77,77,.08);
 border-color:rgba(255,77,77,.5);box-shadow:0 0 14px -2px rgba(255,77,77,.55)}
html.px-tablero .al .tx{padding-top:2px}
/* pendientes: casillas con filo */
html.px-tablero .chk{width:17px;height:17px;background:#141113;border-color:#3F3739}
html.px-tablero li.alta .chk{box-shadow:0 0 10px -2px rgba(255,59,47,.6)}
html.px-tablero li.done .chk{box-shadow:0 0 10px -2px rgba(57,192,122,.6)}
/* la cuenta regresiva del héroe */
html.px-tablero .cd div{background:linear-gradient(180deg,rgba(38,30,34,.75),rgba(20,16,18,.75));box-shadow:var(--px-canto),0 14px 30px -18px rgba(0,0,0,.9)}
html.px-tablero .cd div::after{opacity:1;background:linear-gradient(90deg,transparent,var(--red),transparent);box-shadow:0 0 10px rgba(255,59,47,.8)}
html.px-tablero .cd b{text-shadow:0 0 18px rgba(255,255,255,.12)}
/* LIVE y reloj: el mismo relieve que el módulo de la derecha */
html.px-tablero .clock,html.px-tablero .live{box-shadow:var(--px-canto)}

/* ═══ CHAT Y ACCESOS: el mismo lenguaje que el tablero ═════════════════════ */
html.px-pagina .panel{border-radius:0;background:var(--px-sup);box-shadow:var(--px-canto),var(--px-sombra);position:relative}
html.px-pagina .panel::before,html.px-pagina .panel::after,html.px-pagina .px-chat::before,html.px-pagina .px-chat::after{
 content:'';position:absolute;width:11px;height:11px;border:0 solid rgba(255,59,47,.6);pointer-events:none;z-index:5}
html.px-pagina .panel::before,html.px-pagina .px-chat::before{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
html.px-pagina .panel::after,html.px-pagina .px-chat::after{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
/* ⚠️ en una caja que se desplaza (la tabla de Accesos) la marca de la esquina
   va adentro: a -1px desbordaba 1 px y hacía aparecer la barra (24/09/2026) */
html.px-pagina .panel.tabla-envuelta::after{right:0;bottom:0}
/* en pantallas angostas la barra se parte en dos renglones: logo y módulo
   arriba, pestañas abajo (el módulo reemplaza al .yo y al Salir viejos) */
@media(max-width:1200px){html.px-pagina .px-der{order:2;margin-left:auto}}
html.px-pagina .tabla th{background:linear-gradient(180deg,#1C1619,#171315)}
html.px-pagina .tabla tr{transition:background .16s}
html.px-pagina .tabla tbody tr:hover{background:linear-gradient(90deg,rgba(255,59,47,.07),transparent 60%)}
html.px-pagina .tabla tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--red)}
html.px-pagina .campo input,html.px-pagina .campo select,html.px-pagina .tilde{border-radius:0}
html.px-pagina .boton{border-radius:0;background:linear-gradient(180deg,#FF4B3E 0%,#EC2F21 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -14px rgba(255,59,47,.85)}
html.px-pagina .c-no{border-radius:0}
html.px-pagina .marca-x{background:radial-gradient(90% 90% at 80% 70%,rgba(255,59,47,.14),transparent 60%),var(--px-sup)}

/* el chat (el de la barra y el grande): recto, con las marcas y luz de canto */
.px-chat{border-radius:0}
.px-dock{border-radius:0;box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,59,47,.06),var(--px-canto)}
.px-dock::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);z-index:4}
.px-grande{border-radius:0}
.px-cb-cab{background:radial-gradient(110% 160% at 100% 0%,rgba(255,59,47,.12),transparent 55%),linear-gradient(180deg,#1C1619,#161214)}
.px-cb-hilo{border-radius:0}
.px-cb-hilo.px-on{background:linear-gradient(180deg,#FF4B3E,#EC2F21);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.px-cb-msjs{background:radial-gradient(circle,rgba(242,238,236,.035) 1px,transparent 1.4px) 0 0/14px 14px}
.px-cb-m p{border-radius:2px 12px 12px 12px}
.px-cb-m.px-mio p{background:linear-gradient(180deg,#FF4B3E,#E82D1F);box-shadow:0 8px 20px -12px rgba(255,59,47,.8);border-radius:12px 2px 12px 12px}
.px-cb-m.px-junto p,.px-cb-m.px-mio.px-junto p{border-radius:12px}
.px-cb-redactar textarea{border-radius:0}
.px-cb-mandar{border-radius:0;background:linear-gradient(180deg,#FF4B3E,#E82D1F);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.px-cb-vacio b{font-size:20px}
.px-cb-vacio::before{content:'';width:54px;height:54px;margin-bottom:8px;border:1px solid rgba(255,59,47,.45);
 background:radial-gradient(circle,rgba(255,59,47,.35) 1.2px,transparent 1.6px) 0 0/7px 7px;
 box-shadow:0 0 30px -6px rgba(255,59,47,.45)}

/* los avisos de abajo: rectos, con filo rojo */
.px-aviso{border-radius:0;background:linear-gradient(180deg,#1F191B,#161214);box-shadow:0 18px 44px -14px rgba(0,0,0,.8),var(--px-canto)}
.px-aviso::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ok)}
.px-aviso{position:relative}
.px-aviso.px-mal::before{background:var(--red)}
.px-aviso.px-dato::before{background:var(--mut)}
/* la banda de Ver como */
.px-banda button{border-radius:0}

@media(prefers-reduced-motion:reduce){.px-menu,.px-my-est i{animation:none}}

/* el nombre de la fecha (FASHION WEEK, HALLOWEEN): en la portada y en las tablas */
html.px-tablero .pill.px-ev-nombre{font-family:Anton,sans-serif;font-size:11px;letter-spacing:.2em;color:#fff;border-color:rgba(255,59,47,.7);
 background:linear-gradient(180deg,rgba(255,59,47,.28),rgba(255,59,47,.1));box-shadow:0 0 16px -6px rgba(255,59,47,.8)}
html.px-tablero .px-ev-n{font-weight:600;color:var(--red2);letter-spacing:.06em}

/* ═══ ACCESOS: el control de Yuri ═════════════════════════════════════════ */
.px-acc-resumen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;margin-bottom:14px;align-items:stretch}
.px-acc-k{position:relative;padding:14px 16px;border:1px solid var(--line);background:var(--px-sup2);box-shadow:var(--px-canto)}
.px-acc-k::before{content:'';position:absolute;left:0;top:0;width:40%;height:1px;background:linear-gradient(90deg,var(--mut),transparent)}
.px-acc-k b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:28px;line-height:1}
.px-acc-k span{display:block;margin-top:6px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.px-k-activo b{color:var(--ok)} .px-k-activo::before{background:linear-gradient(90deg,var(--ok),transparent)}
.px-k-invitado b{color:var(--warn)} .px-k-invitado::before{background:linear-gradient(90deg,var(--warn),transparent)}
.px-k-vencida b{color:var(--red2)} .px-k-vencida::before{background:linear-gradient(90deg,var(--red),transparent)}
.px-acc-vivo{display:flex;align-items:center;gap:9px;padding:0 16px;border:1px solid var(--line);font-family:'Barlow Condensed',sans-serif;
 font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.px-acc-vivo i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:px-late 2.2s ease-in-out infinite}
.px-acc-tabla td{vertical-align:middle}
.px-est{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--line2);font-family:'Barlow Condensed',sans-serif;
 font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.px-est i{width:7px;height:7px;border-radius:50%;background:currentColor}
.px-est-activo{color:var(--ok);border-color:rgba(57,192,122,.4);background:rgba(57,192,122,.06)}
.px-est-activo i{box-shadow:0 0 9px var(--ok)}
.px-est-invitado{color:var(--warn);border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.05)}
.px-est-vencida{color:var(--red2);border-color:rgba(255,59,47,.45);background:rgba(255,59,47,.07)}
.px-est-sin-acceso{color:var(--dim)}
.px-est-td small{display:block;margin-top:6px;color:var(--dim);font-size:11.5px;white-space:nowrap}
.px-acc-rel{font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.px-acc-acc{text-align:right;white-space:nowrap}
.px-acc-btn{margin-left:6px;padding:7px 11px;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
 color:var(--ink2);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
 transition:border-color .15s,color .15s,background .15s}
.px-acc-btn:hover{border-color:rgba(255,59,47,.55);color:#fff}
.px-acc-btn.px-mal:hover{background:rgba(255,59,47,.12);color:var(--red2)}
.px-acc-btn.px-si{background:linear-gradient(180deg,#FF4B3E,#EC2F21);border-color:var(--red);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.px-acc-btn:disabled{opacity:.5;cursor:default}
.px-acc-sin-acceso td{opacity:.6}
.px-acc-sin-acceso td.px-acc-acc,.px-acc-sin-acceso td.px-est-td{opacity:1}
.px-acc-fila td{padding:0 !important;background:linear-gradient(180deg,rgba(255,59,47,.06),rgba(255,59,47,.02))}
.px-acc-fila:hover td:first-child{box-shadow:none !important}
.px-acc-panel{padding:18px 20px 16px;border-left:2px solid var(--red)}
.px-acc-tit{font-family:Anton,sans-serif;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.px-acc-grid{display:grid;grid-template-columns:1.2fr 1.4fr 1fr 1.4fr;gap:12px;align-items:end}
.px-acc-grid .campo input,.px-acc-grid .campo select{padding:11px 13px;font-size:14px}
.px-acc-grid .tilde{padding:11px 13px}
.px-acc-conf p{color:var(--ink);font-size:14px;max-width:760px}
.px-acc-bs{display:flex;gap:4px;margin-top:14px}
.px-acc-bs .px-acc-btn{margin-left:0;margin-right:6px;padding:9px 16px}
@media(max-width:900px){.px-acc-resumen{grid-template-columns:repeat(2,1fr)}.px-acc-vivo{grid-column:1/-1;padding:10px 14px}.px-acc-grid{grid-template-columns:1fr}}

/* ⚠️ los DJs no ven alertas ni pendientes (Yuri, 23/09/2026: «los vamos a confundir») */
body.px-dj #v-tablero > .cols{display:none}
body.px-dj .hstats .hs:nth-child(3),body.px-dj .hstats .hs:nth-child(4){display:none}
body.px-dj .hstats{grid-template-columns:repeat(2,1fr)}
body.px-dj #v-tablero thead th:nth-child(7),body.px-dj #tb-cal td:nth-child(7){display:none}
.px-acc-prev{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.px-acc-prev[hidden]{display:none}
.px-acc-prev>span{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.px-acc-prev>div{display:flex;gap:6px;flex-wrap:wrap}
.px-acc-prev .px-acc-btn{margin:0}

/* ── pedidos de los DJs (23/09/2026): Observaciones de Logística y Alertas ── */
html.px-tablero .px-ped-caja{display:grid;gap:14px;margin-bottom:14px}
html.px-tablero .px-ped-form{padding:18px 20px 16px}
html.px-tablero .px-ped-cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
html.px-tablero .px-ped-lista .px-ped-cab{padding:16px 20px 0;margin-bottom:6px}
html.px-tablero .px-ped-cab b{font-family:Anton,sans-serif;font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
html.px-tablero .px-ped-cab span{font-size:12px;color:var(--mut)}
html.px-tablero .px-ped-grid{display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:14px}
html.px-tablero .px-ped-form .pri button{border-radius:0;padding:10px 8px;font-size:12px;letter-spacing:.04em}
html.px-tablero .px-ped-form select,html.px-tablero .px-ped-form textarea{border-radius:0}
html.px-tablero .px-ped-form textarea{min-height:84px;line-height:1.5}
html.px-tablero .px-ped-pie{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
html.px-tablero .px-ped-pie .btn[disabled]{opacity:.45;cursor:not-allowed}
html.px-tablero .px-ped-ul{list-style:none;margin:0;padding:4px 0 6px}
html.px-tablero .px-ped-it{position:relative;padding:14px 20px 14px 22px;border-top:1px solid var(--line);transition:background .3s}
html.px-tablero .px-ped-it::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--warn)}
html.px-tablero .px-ped-it:has(.px-alta)::before{background:var(--red);box-shadow:0 0 12px rgba(255,59,47,.6)}
html.px-tablero .px-ped-it.px-hecho::before{background:var(--line2);box-shadow:none}
html.px-tablero .px-ped-it.px-hecho .px-ped-x{color:var(--mut)}
html.px-tablero .px-ped-it.px-brilla{background:rgba(255,59,47,.08)}
html.px-tablero .px-ped-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
html.px-tablero .px-ped-n{font-size:14px;color:var(--ink);margin-right:4px}
html.px-tablero .px-ped-u,html.px-tablero .px-ped-t,html.px-tablero .px-ped-f{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line2);color:var(--ink2)}
html.px-tablero .px-ped-u.px-alta{color:#fff;background:var(--red);border-color:var(--red)}
html.px-tablero .px-ped-u.px-media{color:var(--warn);border-color:rgba(255,176,32,.45)}
html.px-tablero .px-hecho .px-ped-u{color:var(--mut);background:none;border-color:var(--line2)}
html.px-tablero .px-ped-x{font-size:14px;line-height:1.55;color:var(--ink2);white-space:pre-wrap;word-break:break-word}
html.px-tablero .px-ped-p{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;flex-wrap:wrap}
html.px-tablero .px-ped-e{font-size:11.5px;color:var(--mut)}
html.px-tablero .px-ped-e.px-ok{color:var(--ok)}
html.px-tablero .px-ped-lista .empty{padding:16px 20px 20px}
html.px-tablero .al.px-ped{cursor:pointer}
html.px-tablero .px-ped-tag{display:inline-block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--red);padding:2px 6px;margin-right:8px;vertical-align:1px}
html.px-tablero .al.b.px-ped .px-ped-tag{background:none;color:var(--warn);border:1px solid rgba(255,176,32,.5)}
@media (max-width:760px){
 html.px-tablero .px-ped-grid{grid-template-columns:1fr;gap:0}
 html.px-tablero .px-ped-form{padding:16px 14px 14px}
 html.px-tablero .px-ped-it{padding:13px 14px 13px 16px}
 html.px-tablero .px-ped-lista .px-ped-cab{padding:14px 14px 0}
 html.px-tablero .px-ped-pie .btn{width:100%}
}

/* ── la app instalable (24/09/2026) ─────────────────────────────────────
   ⚠️ LA TRAMPA DEL TEAM: .px-my-item tiene display:flex y eso le gana al
   atributo hidden. Sin esta regla, Instalar la app se veía siempre. */
.px-my-item[hidden]{display:none!important}
.px-guia{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;
 padding:16px 16px max(16px,env(safe-area-inset-bottom));background:rgba(5,4,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 opacity:0;transition:opacity .2s}
.px-guia.px-on{opacity:1}
.px-guia-caja{position:relative;width:100%;max-width:420px;box-sizing:border-box;padding:24px 22px 20px;
 background:linear-gradient(180deg,#1A1517,#110E10);border:1px solid #2E282A;
 box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,59,47,.05),inset 0 1px 0 rgba(255,255,255,.035);
 transform:translateY(12px);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.px-guia.px-on .px-guia-caja{transform:none}
.px-guia-caja::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
 background:linear-gradient(90deg,rgba(242,238,236,0),rgba(255,59,47,.6) 50%,rgba(242,238,236,0))}
.px-guia-ic{width:56px;height:56px;border-radius:13px;display:block;margin-bottom:16px;box-shadow:0 10px 26px -8px rgba(255,59,47,.45)}
.px-guia-rot{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--red,#FF3B2F)}
.px-guia-caja b{display:block;margin:6px 0 14px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:24px;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink,#F2EEEC)}
.px-guia-caja ol{margin:0 0 20px;padding-left:20px;color:var(--ink2,#CFC7C4);font-size:14px;line-height:1.6}
.px-guia-caja li{margin-bottom:7px}
.px-guia-caja li::marker{color:var(--red,#FF3B2F);font-weight:700}
.px-guia-ok{width:100%;border:0;background:var(--red,#FF3B2F);color:#fff;padding:14px 16px;cursor:pointer;
 font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase}
@media(min-width:700px){.px-guia{align-items:center}}


/* ── barras de desplazamiento (24/09/2026) ──────────────────────────────
   Yuri: «esas líneas así no quiero que aparezcan, rompen la estética linda
   de la web» (la barra gris clara con flechas del navegador, al costado de la
   tabla de Accesos). En todo el sistema: finas, oscuras, sin flechas. Las que
   ya van ocultas (.tabs, los hilos del chat) siguen ocultas: su regla es más
   específica que esta. Lo mide test/barras.js en todas las pantallas.
   ⚠️ Chrome ignora ::-webkit-scrollbar si hay scrollbar-width o
   scrollbar-color, y con esas dos todavía dibuja las flechitas en las
   puntas. Por eso Chrome, Edge y Safari van por ::-webkit-scrollbar (control
   total, sin flechas) y las propiedades estándar sólo para Firefox. */
@supports not selector(::-webkit-scrollbar){html,*{scrollbar-width:thin;scrollbar-color:#3A3134 transparent}}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:#3A3134;border:2px solid transparent;background-clip:padding-box;border-radius:0}
::-webkit-scrollbar-thumb:hover{background-color:#FF3B2F}
::-webkit-scrollbar-button{display:none;width:0;height:0}
/* la ficha lateral: los accesos rápidos no pueden ensancharla. El link largo
   de la ticketera (con white-space:nowrap) estiraba la columna 1fr hasta su
   ancho mínimo, se cortaba y aparecía una barra abajo (24/09/2026).
   minmax(0,1fr) deja que el texto se recorte con puntos suspensivos. */
html.px-tablero .abs{grid-template-columns:repeat(2,minmax(0,1fr))}
html.px-tablero .ab{min-width:0}
@media(max-width:780px){html.px-tablero .abs{grid-template-columns:minmax(0,1fr)}}