/* ============================================================================
   panel.css — estilos EXCLUSIVOS de /cuenta (F4 de PlanWebCuentasV1).
   2026-09-12.

   No duplica nada de styles/main.css: reusa sus tokens (:root), su reset, su
   tipografía, .btn/.card/.eyebrow/.stat/.foot-bottom y su :focus-visible.
   Acá viven SOLO las piezas que la home no tiene: formularios de auth,
   tarjetas de personaje, rail de feeds y skeletons.

   Reglas que se respetan (mismas que main.css):
   - Colores desde var(--...); los dos únicos tokens nuevos son los bandos.
   - Todo texto de cuerpo AA 4.5:1 sobre su fondo real.
   - Cada interactivo tiene foco visible y ≥44px de alto real.
   - Bando NUNCA solo por color: siempre va con su etiqueta de texto.
   ========================================================================= */

:root{
  /* bandos — medidos sobre --surface #15100e */
  --aresden:#ff6b5e;   /* 6.0:1 */
  --elvine:#6fb4ff;    /* 8.5:1 */
  --neutral:#b3a294;   /* 7.6:1 */
}

/* [hidden] gana SIEMPRE. Sin esto, `display:flex` de .pnl-boot/.pnl-auth-wrap pisa el
   display:none del user-agent y las vistas "ocultas" se siguen viendo: el panel mostraba
   el skeleton de arranque y el login uno encima del otro. Lo cazó el QA, no el ojo. */
[hidden]{display:none !important}

/* ------------------------------------------------------------------ shell */
.pnl-body{background:var(--bg)}
/* El enlace del pie mide 17px de alto: por debajo del mínimo de 24x24 de WCAG 2.2
   (lo cazó la auditoría, no el ojo). Se agranda solo acá — main.css no se toca. */
.pnl-body .foot-bottom a{display:inline-block;padding:6px 2px;min-height:24px}
/* main.css esconde .nav-cta .btn a ≤760 porque en la home hay hamburguesa que los
   reemplaza; acá no la hay, así que los dos botones del nav se quedan a toda medida. */
.pnl-body .nav-cta .btn{display:inline-flex}
.pnl-body nav{background:rgba(10,7,6,.95);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.pnl-shell{max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--nav-h) + var(--s6)) var(--s5) var(--s8);min-height:70svh}

.pnl-warn{max-width:760px;margin:0 auto var(--s5);padding:var(--s3) var(--s4);
  background:rgba(196,48,42,.12);border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--text);font-size:.92rem}
.pnl-warn code{font-family:ui-monospace,Consolas,monospace;font-size:.85em;color:var(--gold-2)}

.pnl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5)}
.pnl-h1{font-size:clamp(1.5rem,3.4vw,2.05rem);margin-top:var(--s3)}
.pnl-h3{font-family:var(--font-display);font-size:.82rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:var(--s6) 0 var(--s3)}
.pnl-h3.nomt{margin-top:0}
.pnl-lead{color:var(--muted);font-size:.95rem;margin-top:var(--s3);max-width:60ch}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.dot{color:var(--faint);margin:0 var(--s1)}

/* ------------------------------------------------------------------- auth */
.pnl-auth-wrap,.pnl-boot{display:flex;justify-content:center;padding-top:var(--s5)}
.pnl-auth-wrap{padding-top:var(--s3)}
.pnl-auth{width:100%;max-width:320px}   /* lote 16/09: login mas chico */
.pnl-auth .pnl-h1{margin-bottom:var(--s2);font-size:clamp(1.2rem,2.4vw,1.5rem)}

.fld{margin-top:var(--s3)}
.fld label{display:block;font-family:var(--font-display);font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:var(--s2)}
.fld input{width:100%;height:36px;min-height:36px;padding:0 var(--s3);   /* alto FIJO: con 16px de fuente el padding daba 42 */
  background:var(--bg-2);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r);
  font-size:16px;                     /* 16px = iOS no hace auto-zoom al enfocar */
  transition:border-color var(--t-fast),background var(--t-fast)}
.fld input:hover{border-color:var(--faint)}
.fld input:focus{border-color:var(--ember-2);background:#120c0a}
.fld input[aria-invalid="true"]{border-color:var(--aresden)}
.fld-hint{color:var(--faint);font-size:.82rem;margin-top:var(--s2)}
.fld-hint code{font-family:ui-monospace,Consolas,monospace;font-size:.9em}

.fld-pw{position:relative;display:flex}
.fld-pw input{padding-right:64px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  min-width:56px;min-height:30px;cursor:pointer;border-radius:var(--r);
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color var(--t-fast),background var(--t-fast)}
.pw-eye:hover{color:#fff;background:rgba(255,255,255,.06)}
.pw-eye[aria-pressed="true"]{color:var(--gold-2)}

.input-otp{font-family:ui-monospace,Consolas,monospace;font-size:1.5rem;letter-spacing:.5em;
  text-align:center;font-variant-numeric:tabular-nums}

.pnl-submit{width:100%;margin-top:var(--s4)}
.btn[aria-busy="true"],.btn:disabled{opacity:.6;cursor:progress}

.pnl-alt{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.linkish{color:var(--ember-2);cursor:pointer;font-size:.9rem;min-height:32px;
  text-decoration:underline;text-underline-offset:3px;transition:color var(--t-fast)}
.linkish:hover{color:var(--gold-2)}
.pnl-alt a{font-size:.9rem}

/* mensajes: nunca solo color — llevan prefijo textual */
.msg{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r);font-size:.92rem;
  border:1px solid var(--line-2);line-height:1.5}
.msg-err{background:rgba(196,48,42,.14);border-color:#7d2a22;color:#ffd9d2}
.msg-err::before{content:var(--i18n-msg-err,"Error — ");font-weight:600;color:var(--hot)}
.msg-ok{background:rgba(127,212,154,.1);border-color:#2f5f45;color:#d8f3e2}
.msg-ok::before{content:var(--i18n-msg-ok,"Listo — ");font-weight:600;color:var(--ok)}

/* ------------------------------------------------------------- panel head */
.pnl-head{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;
  justify-content:space-between;padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.pnl-head-meta{color:var(--muted);font-size:.9rem;margin-top:var(--s2)}
.pnl-head-actions{display:flex;gap:var(--s2);flex-wrap:wrap}

.pnl-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s4);
  align-items:start;margin-top:var(--s6)}
.pnl-col{min-width:0;display:flex;flex-direction:column;gap:var(--s7)}
.pnl-rail{min-width:0;display:flex;flex-direction:column;gap:var(--s4);
  position:sticky;top:calc(var(--nav-h) + var(--s4))}

.pnl-sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.pnl-sec-head h2{font-size:1.25rem}
.pnl-count{color:var(--faint);font-size:.85rem;font-variant-numeric:tabular-nums}
.pnl-sec-card{padding:var(--s4) var(--s5)}
.pnl-empty{color:var(--faint);font-size:.9rem;padding:var(--s3) 0;line-height:1.6}
.pnl-empty b{color:var(--muted);font-weight:600}

/* -------------------------------------------------------------- personajes */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
.ch{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--neutral);
  border-radius:var(--r);padding:var(--s4);min-width:0;
  transition:border-color var(--t-fast),background var(--t-fast)}
.ch:hover{background:var(--surface-2)}
.ch[data-side="aresden"]{border-left-color:var(--aresden)}
.ch[data-side="elvine"]{border-left-color:var(--elvine)}

.ch-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.ch-name{font-family:var(--font-display);font-size:1.05rem;color:#fff;font-weight:700;
  overflow-wrap:anywhere;min-width:0}
.ch-lvl{flex:none;text-align:right}
.ch-lvl b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--gold-2);
  line-height:1;font-variant-numeric:tabular-nums}
.ch-lvl em{display:block;font-style:normal;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-top:3px}

.ch-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.ch-tag{font-family:var(--font-display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;border:1px solid var(--line-2);color:var(--muted);
  overflow-wrap:anywhere}
.ch-tag.side-aresden{color:var(--aresden);border-color:#6a2b25}
.ch-tag.side-elvine{color:var(--elvine);border-color:#2a4468}

.ch-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s2);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.ch-dl div{min-width:0}
.ch-dl dt{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  font-family:var(--font-display)}
.ch-dl dd{color:var(--text);font-size:.98rem;font-variant-numeric:tabular-nums;margin-top:2px;
  overflow-wrap:anywhere}
.ch-miss{color:var(--warn);font-size:.85rem;margin-top:var(--s3)}

/* ------------------------------------------------------------------ totales */
.tot{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tot li{background:var(--surface);padding:var(--s4) var(--s3);text-align:center}
.tot b{display:block;font-family:var(--font-display);font-size:1.35rem;color:#fff;line-height:1.1;
  font-variant-numeric:tabular-nums}
.tot span{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-top:var(--s2);font-family:var(--font-display)}

/* ------------------------------------------------------------------ servidor */
.srv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.srv-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);font-size:.95rem}
.srv-gem{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.srv-gem.on{background:var(--ok);box-shadow:0 0 0 4px rgba(127,212,154,.16)}
.srv-gem.off{background:var(--hot);box-shadow:0 0 0 4px rgba(255,141,128,.16)}
.srv-evts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.srv-evt{font-family:var(--font-display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;border:1px solid #6b5322;color:var(--gold-2);
  background:rgba(216,168,80,.08)}

/* align-items:start = cada tarjeta mide lo que mide su lista. Sin esto, la fila
   entera toma la altura del ranking más largo y las demás quedan con medio card vacío. */
.rk{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4);
  align-items:start}
.rk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.rk-card h4{font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s3)}
.rk-card ol{list-style:none;counter-reset:r}
.rk-card li{counter-increment:r;display:flex;align-items:baseline;gap:var(--s2);
  padding:6px 0;border-top:1px solid var(--line);font-size:.92rem;min-width:0}
.rk-card li:first-child{border-top:0}
.rk-card li::before{content:counter(r);flex:none;width:18px;color:var(--faint);font-size:.78rem;
  font-variant-numeric:tabular-nums}
.rk-card li .n{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rk-card li .v{margin-left:auto;color:var(--gold-2);font-variant-numeric:tabular-nums;flex:none}
.rk-card li.mine{background:rgba(255,90,44,.09);margin:0 -6px;padding-left:6px;padding-right:6px;
  border-radius:2px}
.rk-card li.mine .n{color:#fff;font-weight:600}
.rk-card li.mine .n::after{content:var(--i18n-rank-mine," (vos)");color:var(--ember-2);font-size:.8em}

/* ---------------------------------------------------------------- feeds */
.feed{padding:var(--s4)}
.feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.feed-head h2{font-size:1.05rem}
.feed-when{color:var(--faint);font-size:.74rem;font-variant-numeric:tabular-nums;flex:none}
.feed-sub{color:var(--faint);font-size:.8rem;margin-top:var(--s1);line-height:1.5}

.kills,.chat{list-style:none;margin-top:var(--s3);max-height:340px;overflow-y:auto;
  overscroll-behavior:contain}
.kills::-webkit-scrollbar,.chat::-webkit-scrollbar{width:6px}
.kills::-webkit-scrollbar-thumb,.chat::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.kill{padding:8px 0;border-top:1px solid var(--line);font-size:.9rem;line-height:1.5;min-width:0}
.kills li:first-child{border-top:0}
.kill .nick{font-weight:600;overflow-wrap:anywhere}
.kill .nick.aresden{color:var(--aresden)}
.kill .nick.elvine{color:var(--elvine)}
.kill .nick.neutral{color:var(--neutral)}
.kill .vs{color:var(--faint)}
.kill .when{color:var(--faint);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.kill .map{display:block;color:var(--faint);font-size:.74rem;margin-top:2px;overflow-wrap:anywhere}

.cmsg{padding:8px 0;border-top:1px solid var(--line);font-size:.9rem;line-height:1.5;min-width:0}
.chat li:first-child{border-top:0}
/* Nombre del emisor: SIEMPRE el tono brillante de C2 (245,245,255), en todos los
   canales. El color por canal va en el .txt. */
.cmsg .who{color:rgb(245,245,255);font-weight:600;overflow-wrap:anywhere}
.cmsg .txt{color:var(--muted);overflow-wrap:anywhere}
.cmsg .when{color:var(--faint);font-size:.74rem;margin-left:var(--s2);font-variant-numeric:tabular-nums}

/* Color por canal — fuente de verdad C2 (Game.cpp:33719-33739). El RGB va sobre
   el texto del mensaje; los canales privados (whisper/party/guild) no se pintan
   porque nunca llegan al render (whitelist en feeds.js/chatbridge.js). */
.cmsg--global .txt{color:rgb(255,85,130)}
.cmsg--local  .txt{color:rgb(230,230,230)}
.cmsg--city   .txt{color:rgb(70,130,255)}
.cmsg--trade  .txt{color:rgb(60,210,235)}
.cmsg--rare   .txt{color:rgb(50,205,50)}
.cmsg--gm     .txt{color:rgb(130,255,130)}

/* Toggle Low/High del chat (construido por feeds.js dentro del cabezal). */
/* refutacion ronda 2: en la ventana de 240 px y el rail de 280 el toggle no entra al lado del titulo:
   .feed-head envuelve y el toggle baja a su propia linea (antes Servidor High quedaba afuera). */
.chat-tog{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:0}
.chat-tog-btn{font:inherit;font-size:.72rem;line-height:1;padding:4px 8px;cursor:pointer;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);white-space:nowrap}
.chat-tog-btn:hover{color:var(--text)}
.chat-tog-btn.is-on{color:#0d0d10;background:var(--gold);border-color:var(--gold);font-weight:600}

/* ------------------------------------------------------------- skeletons */
.sk{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);
  background-size:200% 100%;border-radius:var(--r);animation:skpulse 1.4s linear infinite}
.sk-line{height:14px;margin-top:var(--s4)}
.sk-60{width:60%}
.sk-card{height:168px}
@keyframes skpulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ------------------------------------------------------------- responsive */
@media(max-width:980px){
  .pnl-grid{grid-template-columns:minmax(0,1fr)}
  .pnl-rail{position:static;order:2}
  .pnl-col{order:1}
}
@media(max-width:760px){
  .pnl-shell{padding-left:var(--s4);padding-right:var(--s4)}
  .pnl-head{align-items:flex-start;flex-direction:column}
  .pnl-head-actions{width:100%}
  .pnl-head-actions .btn{flex:1}
  .ch-grid{grid-template-columns:minmax(0,1fr)}
  .kills,.chat{max-height:none}
}
@media(max-width:420px){
  .pnl-shell{padding-top:calc(var(--nav-h) + var(--s4))}
  .ch-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .input-otp{letter-spacing:.35em;font-size:1.3rem}
  .pnl-alt{flex-direction:column;gap:var(--s3)}
}

@media(prefers-reduced-motion:reduce){
  .sk{animation:none}
  *{transition-duration:1ms !important}
}
@media(prefers-contrast:more){
  .ch,.pnl-card,.srv,.rk-card,.tot{border-color:var(--faint)}
  .fld input{border-color:var(--muted)}
}

/* ============================================================================
   Ventanas flotantes (C4) — componente .pnl-window de floating.js.
   `fixed` = fuera del flujo: conviven con el scroll y el acordeón de la web.
   El ancho se recorta al viewport para que en pantallas angostas nunca se salga;
   floating.js las acomoda sin solaparse (settle/tile).
   ========================================================================= */
.pnl-window{
  position:fixed;top:74px;left:12px;z-index:1200;
  width:240px;max-width:calc(100vw - 24px);font-size:.88rem;
  display:flex;flex-direction:column;
  box-sizing:border-box;height:280px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.02) inset;
  overflow:hidden;
}
.pnl-window.is-drag{box-shadow:0 24px 60px rgba(0,0,0,.7);cursor:grabbing}
.pnl-window.is-rz{box-shadow:0 24px 60px rgba(0,0,0,.7)}
.pnl-window.is-max{border-color:var(--line-2)}
/* lote 16/09 (refutacion): el dock derecho cae sobre el menu de idioma (nav a <1400 px y .e-lang de
   la 404), el menu del nav y el Muro de la Taberna abierto. Lo que el usuario ABRE va por encima de
   las ventanas (z inline 1200+) mientras esta abierto; cerrado vuelve a su z de siempre. */
nav:has(.lang-switch.open),nav:has(.nav-links.open),.e-lang.open,#tavDock:not(.closed),#lbox.on{z-index:100000}
/* refutacion ronda 2: con el dock montado (floating.js pone body.hbwin-hub-on) "Subir al inicio" (#toTop,
   z 940, borde derecho) quedaba debajo de las ventanas: en >=600 px pasa al borde IZQUIERDO. En movil
   floating.js apila la columna encima de el. */
@media(min-width:600px){
  body.hbwin-hub-on #toTop{right:auto;left:var(--s3);transform:translateY(-50%) translateX(-72px)}
  body.hbwin-hub-on #toTop.show{transform:translateY(-50%) translateX(0)}
}
@media(min-width:600px) and (max-width:980px){
  body.hbwin-hub-on #toTop{transform:translateX(-72px)}
  body.hbwin-hub-on #toTop.show{transform:none}
}
/* F05: handles de tamaño (e, s, se). touch-action:none para que el dedo no haga scroll. */
.pnl-win-rz{position:absolute;z-index:2;touch-action:none;background:transparent}
.pnl-win-rz-e{top:32px;right:0;bottom:16px;width:8px;cursor:ew-resize}
.pnl-win-rz-s{left:0;right:16px;bottom:0;height:8px;cursor:ns-resize}
.pnl-win-rz-se{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 55%,var(--line-2) 55%,var(--line-2) 65%,transparent 65%,transparent 75%,var(--line-2) 75%,var(--line-2) 85%,transparent 85%)}
.pnl-window.is-min .pnl-win-rz,.pnl-window.is-max .pnl-win-rz{display:none}
.pnl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pnl-win-err{color:var(--hot);font-size:.84rem;margin:var(--s2) 0 0}

.pnl-win-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  height:30px;box-sizing:border-box;padding:0 var(--s2) 0 var(--s3);flex:none;cursor:grab;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.pnl-window.is-drag .pnl-win-head{cursor:grabbing}
.pnl-win-head:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pnl-win-title{min-width:0;display:flex;flex-direction:column;gap:1px}
.pnl-win-h{font-family:var(--font-display);font-size:.82rem;line-height:1.15;margin:0;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl-win-sub{color:var(--faint);font-size:.72rem;line-height:1}
.pnl-win-ctrls{display:flex;gap:4px;flex:none}
.pnl-win-btn{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:.9rem;line-height:1;cursor:pointer;
  color:var(--muted);background:transparent;border:1px solid var(--line-2);border-radius:var(--r);
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.pnl-win-btn:hover{color:var(--text);background:var(--surface);border-color:var(--muted)}
.pnl-win-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

.pnl-win-body{flex:1 1 auto;min-height:0;padding:var(--s2) var(--s3);overflow-y:auto;overflow-x:hidden}
.pnl-window.is-min{max-height:none}
.pnl-win-body .pnl-card{padding:var(--s4)}
.pnl-win-body .feed{padding:0}
.pnl-win-body .kills,.pnl-win-body .chat{max-height:none}

/* tarjeta de usuario del hub (index) */
.pnl-win-user .eyebrow{font-family:var(--font-display);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0}
.pnl-win-acct{font-family:var(--font-display);font-size:1.05rem;margin:2px 0 0;color:var(--text);
  word-break:break-word}
.pnl-win-meta{color:var(--muted);font-size:.82rem;margin:var(--s2) 0 0;line-height:1.5}
.pnl-win-meta .mono{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.pnl-win-chars{list-style:none;margin:var(--s4) 0 0;padding:0;
  display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pnl-win-char{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--surface);padding:4px var(--s3);font-size:.8rem;min-width:0}
.pnl-win-char .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-win-char .nm.side-aresden{color:var(--aresden)}
.pnl-win-char .nm.side-elvine{color:var(--elvine)}
.pnl-win-char .nm.side-neutral{color:var(--neutral)}
.pnl-win-char .lv{color:var(--gold-2);font-variant-numeric:tabular-nums;flex:none;font-size:.82rem}
.pnl-win-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.pnl-win-acts .btn{flex:1;min-height:30px;padding:5px 10px;font-size:.66rem}

/* F07: dedo/lapiz = handles de 44 px */
@media(pointer:coarse){
  /* los handles NO tapan el cuerpo: franja inferior de 44 px reservada (s/se) y el borde e
     solo ocupa el padding derecho del cuerpo (var(--s4)=16px) */
  .pnl-win-body{margin-bottom:44px}
  /* lote 16/09: los tamaños chicos (input 36, botones 30) son SOLO para puntero fino */
  .fld input,.pnl-win-acts .btn{min-height:44px}
  .pw-eye{min-height:38px}
  .pnl-window.is-max .pnl-win-body{margin-bottom:0}
  .pnl-win-rz-s{border-top:1px solid var(--line)}
  .pnl-win-rz-e{width:16px;bottom:44px}
  .pnl-win-rz-s{height:44px;right:44px}
  .pnl-win-rz-se{width:44px;height:44px}
}
/* F07: movil (<600 px) = columna unica, solo resize vertical (floating.js reordena) */
@media(max-width:599px){
  .pnl-window:not(.is-min){width:calc(100vw - 24px) !important}
  .pnl-win-rz-e,.pnl-win-rz-se{display:none}
  .pnl-win-rz-s{right:0}
}
@media(prefers-reduced-motion:reduce){
  .pnl-window,.pnl-win-btn,.pw-meter-bar::after{transition:none !important;animation:none !important}
}

/* === F02/F03 login (clases pedidas por login) === */
.pw-meter{margin-top:var(--s2)}
.pw-meter-bar{position:relative;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.pw-meter-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--aresden);transition:width var(--t-fast),background var(--t-fast)}
.pw-meter-bar[data-score="1"]::after{width:25%;background:var(--aresden)}
.pw-meter-bar[data-score="2"]::after{width:50%;background:var(--ember-2)}
.pw-meter-bar[data-score="3"]::after{width:75%;background:var(--gold)}
.pw-meter-bar[data-score="4"]::after{width:100%;background:var(--elvine)}
.pw-meter-txt{color:var(--muted);font-size:.82rem;margin:var(--s1) 0 0;min-height:1.2em}
.fld-err{color:var(--hot);font-size:.84rem;margin-top:var(--s2)}
.fld input[aria-invalid="true"]{border-color:var(--hot)}
.caps-warn{color:var(--gold);font-size:.82rem;margin-top:var(--s2)}
.sess-list,.act-list{list-style:none;margin:var(--s3) 0 0;padding:0;
  display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sess-item,.act-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  background:var(--surface);padding:var(--s3);min-width:0}
.sess-item.is-current{box-shadow:inset 3px 0 0 var(--gold)}
.sess-item .btn{margin-left:auto}
.sess-dev,.act-type{color:var(--text);font-weight:600;overflow-wrap:anywhere}
.sess-badge{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line-2);border-radius:var(--r);padding:1px 6px}
.sess-meta{flex-basis:100%;color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}
.act-item[data-type="login-fail"]{box-shadow:inset 3px 0 0 var(--hot)}
.act-item[data-type="login-fail"] .act-type{color:var(--hot)}
.inline-confirm{margin-top:var(--s3);padding:var(--s3);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r)}
.inline-confirm p{margin:0 0 var(--s3)}
.inline-confirm .btn + .btn{margin-left:var(--s2)}

@media(max-width:480px){
  .pnl-window:not(.is-min){width:calc(100vw - 24px) !important}
  .pnl-win-body .kills,.pnl-win-body .chat{max-height:38vh}
}

/* ============================================================================
   LAUNCHER (WebView2) — lote 17/09. TODO cuelga de html.hb-launcher (lo pone el
   script inline de cuenta.html con ?launcher=1 o window.chrome.webview): la web
   publica no cambia. Viewport CSS ~1050x430: nav/pie fuera, todo compacto y el rail
   Logs/Chat siempre al costado y entero en el primer viewport.
   Los selectores .hb-launcher X (0,2,0) le ganan a los @media de arriba (0,1,0).
   Excepcion consciente a la regla de 44px: launcher de escritorio, puntero fino.
   ========================================================================= */
.hbl-only{display:none}
.hb-launcher .hbl-only{display:inline-flex}
.hb-launcher .hbl-info:not(.is-open){display:none}
.hb-launcher .hbl-info-btn{margin-top:var(--s2);align-self:flex-start}
.hb-launcher body{font-size:13px;line-height:1.45}
.hb-launcher footer,.hb-launcher .skip-link,.hb-launcher #nav .brand,.hb-launcher #nav .nav-cta>a{display:none}
/* [weblock-lang] el unico selector de idioma vive en #nav: queda un boton chico flotando abajo a la izquierda (menu hacia arriba) */
.hb-launcher #nav{position:fixed;top:auto;right:auto;left:4px;bottom:4px;background:none;border:0;backdrop-filter:none;z-index:900}
.hb-launcher #nav .nav-inner{padding:0;min-height:0;max-width:none;margin:0}
.hb-launcher #nav .nav-cta{margin-left:0}
.hb-launcher .lang-btn{min-height:24px;padding:2px 6px;font-size:.62rem;gap:4px;background:rgba(10,7,6,.96)}
.hb-launcher .lang-btn .flag{width:18px;height:12px}
.hb-launcher .lang-menu{top:auto;bottom:calc(100% + 4px);left:0;right:auto}
.hb-launcher .pnl-shell{max-width:none;min-height:0;padding:var(--s2) var(--s3) var(--s3)}
.hb-launcher .pnl-auth-wrap,.hb-launcher .pnl-boot{padding-top:0}
.hb-launcher .pnl-auth{max-width:260px}
.hb-launcher .pnl-card{padding:var(--s3)}
.hb-launcher .eyebrow{font-size:.62rem}
.hb-launcher .pnl-h1,.hb-launcher .pnl-auth .pnl-h1{font-size:1.05rem;margin-top:var(--s1);margin-bottom:0}
.hb-launcher .pnl-lead{font-size:.76rem;margin-top:var(--s1)}
.hb-launcher .fld{margin-top:var(--s2)}
.hb-launcher .fld label{font-size:.62rem;margin-bottom:2px}
.hb-launcher .fld input,.hb-launcher .fld select{height:28px;min-height:28px;font-size:13px}
.hb-launcher .fld-hint{font-size:.68rem;margin-top:2px}
.hb-launcher .pw-eye{min-height:22px;min-width:44px;font-size:.6rem}
.hb-launcher .btn{padding:6px 12px;min-height:30px;font-size:.68rem}
.hb-launcher .btn-sm{padding:4px 10px;min-height:26px;font-size:.62rem}
.hb-launcher .pnl-submit{margin-top:var(--s2)}
.hb-launcher .pnl-alt{margin-top:var(--s2);padding-top:var(--s2);gap:var(--s2)}
.hb-launcher .linkish,.hb-launcher .pnl-alt a{font-size:.74rem;min-height:22px}
.hb-launcher .msg{margin-top:var(--s2);padding:var(--s2) var(--s3);font-size:.74rem}
.hb-launcher .input-otp{font-size:1.1rem;letter-spacing:.35em}
.hb-launcher .pnl-head{padding-bottom:var(--s2);gap:var(--s2)}
.hb-launcher .pnl-head-meta{font-size:.72rem;margin-top:2px}
.hb-launcher .pnl-head-actions a[href="/"]{display:none}
.hb-launcher .pnl-grid{grid-template-columns:minmax(0,1fr) 250px;gap:var(--s3);margin-top:var(--s3)}
.hb-launcher .pnl-col{order:0;gap:var(--s4)}
.hb-launcher .pnl-rail{order:0;position:sticky;top:var(--s2);gap:var(--s2)}
.hb-launcher .pnl-sec-head{margin-bottom:var(--s2)}
.hb-launcher .pnl-sec-head h2{font-size:.9rem}
.hb-launcher .pnl-h3{font-size:.66rem;margin:var(--s3) 0 var(--s2)}
.hb-launcher .pnl-h3.nomt{margin-top:0}
.hb-launcher .pnl-sec-card{padding:var(--s2) var(--s3)}
.hb-launcher .ch-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s2)}
.hb-launcher .ch{padding:var(--s2) var(--s3)}
.hb-launcher .ch-name{font-size:.86rem}
.hb-launcher .ch-lvl b{font-size:1.05rem}
.hb-launcher .ch-dl{margin-top:var(--s2);padding-top:var(--s2);gap:var(--s2)}
.hb-launcher .ch-dl dd{font-size:.8rem}
.hb-launcher .sk-card{height:110px}
.hb-launcher .tot li{padding:var(--s2)}
.hb-launcher .tot b{font-size:1rem}
.hb-launcher .rk{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s2)}
.hb-launcher .rk-card{padding:var(--s2) var(--s3)}
.hb-launcher .rk-card li{padding:3px 0;font-size:.76rem}
.hb-launcher .srv{padding:var(--s2) var(--s3)}
.hb-launcher .srv-row{font-size:.78rem}
.hb-launcher .sess-item,.hb-launcher .act-item{padding:var(--s2)}
/* Logs / Chat: tarjetas chicas que entran enteras en el alto del launcher (2 listas + cabezales
   + cabecera del panel <= 430 px CSS) sin scrollear la pagina; cada lista scrollea adentro. */
.hb-launcher .feed{padding:var(--s2) var(--s3)}
.hb-launcher .feed-head h2{font-size:.78rem}
.hb-launcher .feed-when{font-size:.66rem}
.hb-launcher .feed-sub{display:none}
.hb-launcher .kills,.hb-launcher .chat{margin-top:var(--s1);max-height:calc(50vh - 100px);min-height:60px}
.hb-launcher .kill,.hb-launcher .cmsg{padding:3px 0;font-size:.72rem;line-height:1.35}
.hb-launcher .kill .map{font-size:.66rem;margin-top:0}
.hb-launcher .chat-tog-btn{font-size:.62rem;padding:2px 6px}
.hb-launcher .pnl-empty{font-size:.72rem;padding:var(--s1) 0}
/* lote18 R2 (D-2): con sesion, panel.js mueve Logs/Chat a ventanas HBWin (floating.js) y marca
   html.hbl-float. El rail queda vacio: una sola columna. Dentro de la ventana la lista llena el alto
   y scrollea adentro, asi que redimensionar la ventana la agranda: el clamp de 50vh de arriba
   (.hb-launcher .kills, 0,2,0) le gana a .pnl-win-body .kills (0,2,0, declarado antes) y necesita
   este override de 0,3,0. La columna deja libre el ancho del rail (250 + aire): con las ventanas en
   su lugar de fabrica no tapan las estadisticas. Sin boton cerrar: en cuenta.html nada puede reabrir una ventana cerrada. */
.hb-launcher.hbl-float .pnl-grid{grid-template-columns:minmax(0,1fr);padding-right:calc(250px + var(--s3))}
.hb-launcher.hbl-float .pnl-rail{display:none}
.hb-launcher .pnl-win-close{display:none}
.hb-launcher .pnl-win-body{display:flex;flex-direction:column}
.hb-launcher .pnl-win-body>.feed{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hb-launcher .pnl-win-body .feed-head h2{display:none}
.hb-launcher .pnl-win-body .kills,.hb-launcher .pnl-win-body .chat{max-height:none;min-height:0;flex:1 1 auto}
/* [lote18 R3-W4] Item-links del chat en vivo (feeds.js). El integrador ANEXA este bloque al final
   de web/js/panel.css (L5 no edita panel.css). Glifos: /assets/chatglyphs.png, 128x64 = 8 columnas
   (categoria) x 4 filas (rareza) de 16 px; feeds.js pone background-position y border-color. */
.cmsg--trade .ctag{color:rgb(60,210,235);font-weight:600}
.citem{display:inline-block;width:16px;height:16px;box-sizing:content-box;vertical-align:-4px;margin:0 2px;
  border:1px solid rgb(240,240,240);border-radius:3px;background:#171d2a url(/assets/chatglyphs.png) no-repeat;
  image-rendering:pixelated;cursor:help;outline:none}
.citem:focus-visible{box-shadow:0 0 0 2px var(--gold,#d4a94a)}
.citem--unknown{background:#171d2a;color:rgb(200,200,200);font-size:11px;line-height:16px;text-align:center;
  font-weight:700;cursor:default}
.citem-tip{position:fixed;z-index:9999;max-width:min(280px,calc(100vw - 12px));padding:6px 9px 7px 11px;
  background:rgba(23,29,42,.9);border:1px solid rgb(240,240,240);border-left-width:3px;border-radius:5px;
  color:rgb(230,230,230);font-size:.8rem;line-height:1.4;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.citem-tip[hidden]{display:none}
.citem-tip-name{font-weight:700;margin-bottom:2px;overflow-wrap:anywhere}
.citem-tip-row{display:flex;justify-content:space-between;gap:10px}
.citem-tip-row .k{color:rgb(200,200,200)}
.citem-tip-row .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.citem-tip-desc{color:rgb(255,235,90);margin-top:2px;overflow-wrap:anywhere}
.citem-tip-dur,.citem-tip-qty{color:rgb(200,200,200);margin-top:2px;font-variant-numeric:tabular-nums}
.hb-launcher .citem-tip{font-size:.7rem;padding:4px 7px 5px 9px}