/* Angels Online — interfaz "original modernizado": la paleta teal translúcida y
   las formas del juego, en alta resolución y escalable. */
:root {
  /* temas (Fable r11f): los colores base en tripletas RGB; ver fable.css */
  --rgb-panel: 12, 58, 70; --rgb-claro: 24, 92, 106; --rgb-osc: 5, 32, 40;
  --rgb-hondo: 0, 30, 38; --rgb-hondo2: 0, 25, 32; --rgb-borde: 134, 214, 224; --rgb-tip: 4, 24, 30;
  --boton-a: #1f7685; --boton-b: #135563;
  --panel: rgba(var(--rgb-panel), .90);
  --panel-claro: rgba(var(--rgb-claro), .92);
  --panel-osc: rgba(var(--rgb-osc), .92);
  --borde: #86d6e0;
  --borde-suave: rgba(var(--rgb-borde), .35);
  --texto: #eafcff;
  --tenue: #9fc9d1;
  --acento: #f7a531; --acento-a: #ffbe55; --acento-b: #e88a14; --acento-texto: #2a1600;
  --acento-claro: #ffd27a;
  --peligro: #e24b4b;
  --ranura: #0a3640;
  --ranura-borde: #2f8794;
  --sombra: 0 6px 22px rgba(0, 0, 0, .45);
  --radio: 9px;
  --fuente: "Segoe UI", "Trebuchet MS", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1420; color: var(--texto); font: 13px/1.35 var(--fuente); }
#lienzo { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * , #ui .ventana, #ui .ficha, #ui .barra-rapida, #ui .minimapa, #ui .menu, #ui .chat, #ui .dialogo,
#ui .modal, #ui .pantalla, #ui .marco-objetivo, #ui .rastreador { pointer-events: auto; }
#ui .avisos, #ui .tooltip, #ui .cargando { pointer-events: none; }
button { font: inherit; color: var(--texto); background: linear-gradient(var(--boton-a), var(--boton-b)); border: 1px solid var(--borde-suave);
  border-radius: 6px; padding: 5px 12px; cursor: pointer; transition: filter .12s, transform .06s; white-space: nowrap; }
button:hover:not(:disabled) { filter: brightness(1.2); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; filter: grayscale(.55); }
button:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 1px; }
button.principal { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); font-weight: 700; border-color: #ffd890; }
button.peligro { background: linear-gradient(#e86060, #b42f2f); border-color: #ff9c9c; }
button.mini { padding: 0 5px; height: 18px; min-width: 20px; font-size: 11px; line-height: 16px; border-radius: 4px; }
button.mini.activo, button.activo { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); }
input, select { font: inherit; color: var(--texto); background: rgba(var(--rgb-hondo2), .75); border: 1px solid var(--borde-suave);
  border-radius: 6px; padding: 5px 8px; outline: none; }
input:focus, select:focus { border-color: var(--borde); box-shadow: 0 0 0 2px rgba(var(--rgb-borde), .25); }
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: .6; }
select option { background: rgb(var(--rgb-osc)); color: var(--texto); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--acento); }
input[type=checkbox], input[type=radio] { width: 14px; height: 14px; margin: 0 2px; vertical-align: middle; }
textarea { font: inherit; color: var(--texto); background: rgba(var(--rgb-hondo2), .75); border: 1px solid var(--borde-suave);
  border-radius: 6px; padding: 5px 8px; outline: none; }
textarea:focus { border-color: var(--borde); }
/* r40: barras de desplazamiento con los colores del tema */
#ui * { scrollbar-width: thin; scrollbar-color: rgba(var(--rgb-borde), .45) transparent; }
.nota { color: var(--tenue); font-size: 12px; margin: 6px 0; }
.error { color: #ffb4b4; margin: 6px 0; }
.tenue { color: var(--tenue); }

/* ---------------------------------------------------------------- inicio */
.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.fondo-inicio { background: radial-gradient(ellipse at 50% 30%, #fffdf2 0%, #f2e6c8 30%, #b9d9e8 62%, #6fa3c4 100%); }
.fondo-inicio::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 15% 80%, rgba(255,255,255,.9) 0 60px, transparent 61px),
  radial-gradient(circle at 25% 85%, rgba(255,255,255,.85) 0 80px, transparent 81px),
  radial-gradient(circle at 80% 82%, rgba(255,255,255,.9) 0 90px, transparent 91px),
  radial-gradient(circle at 90% 75%, rgba(255,255,255,.8) 0 60px, transparent 61px); pointer-events: none; }
.logo { position: relative; font: 800 54px/1 "Trebuchet MS", var(--fuente); color: #fff; letter-spacing: 1px;
  text-shadow: 0 3px 0 #e88a14, 0 6px 0 #9a4f00, 0 10px 24px rgba(0,0,0,.35); }
.logo.pequeno { font-size: 34px; }
.logo .alas { color: #ff7fae; }
.caja-inicio, .caja-personajes { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 22px 26px; box-shadow: var(--sombra); min-width: 320px; }
.caja-inicio h2, .caja-personajes h2 { margin: 0 0 12px; font-size: 18px; }
.caja-inicio label { display: grid; gap: 4px; margin-bottom: 10px; color: var(--tenue); }
.caja-inicio button.principal { width: 100%; padding: 9px; margin-top: 6px; }
.ranuras-pj { display: flex; gap: 12px; }
.ranura-pj { width: 150px; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  background: rgba(var(--rgb-hondo), .6); border: 1px solid var(--borde-suave); border-radius: 12px; padding: 10px; }
.ranura-pj.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(247,165,49,.35), inset 0 0 30px rgba(247,165,49,.15); }
.ranura-pj b { font-size: 15px; } .ranura-pj small { color: var(--tenue); }
.ranura-pj.vacia { justify-content: center; } .ranura-pj .mas { font-size: 40px; color: var(--borde-suave); }
.retrato-canvas { image-rendering: pixelated; }
.fila-botones { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }   /* r40g: en ventanas angostas los botones se cortaban a los costados */
.fila-botones.chica { margin-top: 8px; justify-content: flex-end; }
.fila-botones.columna { flex-direction: column; }

.modal { position: absolute; inset: 0; background: rgba(0, 10, 16, .45); display: flex; align-items: center; justify-content: center; z-index: 900; }
.modal.transparente { background: transparent; }
.modal .ventana { position: relative; left: auto; top: auto; }
.creacion { width: min(760px, 96vw); }
.creacion-cuerpo { display: grid; grid-template-columns: 290px 1fr; gap: 14px; }
.creacion fieldset { border: 1px solid var(--borde-suave); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px 12px; }
.creacion legend { color: var(--acento-claro); padding: 0 6px; }
.creacion label { display: grid; gap: 4px; color: var(--tenue); }
.genero { display: flex; gap: 6px; margin-top: 10px; }
.genero button { flex: 1; } .genero button.activa { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); }
.fila-peinado { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fila-peinado b { min-width: 52px; text-align: center; }
.subt { color: var(--tenue); font-size: 12px; margin: 8px 0 4px; }
.muestras { display: flex; flex-wrap: wrap; gap: 4px; }
.muestras button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); }
.muestras button.elegida { border-color: #fff; box-shadow: 0 0 0 2px var(--acento); }
.creacion-vista { background: rgba(var(--rgb-hondo2), .55); border: 1px solid var(--borde-suave); border-radius: 10px; padding: 10px; }
.tres-vistas { display: flex; justify-content: center; gap: 4px; }

/* ---------------------------------------------------------------- ventanas */
.ventana { position: absolute; display: flex; flex-direction: column; max-height: calc(100vh - 8px); max-width: calc(100vw - 8px);
  background: linear-gradient(var(--panel-claro), var(--panel) 40px); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.ventana > header, .ventana > footer, .ventana > .pie { flex: none; }
.ventana > .cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ventana.chica { width: 340px; }
.ventana > header, .modal .ventana > header { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 12px;
  background: linear-gradient(rgba(255,255,255,.10), rgba(0,0,0,.08)); border-bottom: 1px solid var(--borde-suave);
  border-radius: var(--radio) var(--radio) 0 0; cursor: move; user-select: none; }
.ventana .titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700;
  letter-spacing: .3px; text-shadow: 0 1px 2px #000; }
.ventana .x { flex: none; width: 22px; height: 20px; padding: 0; line-height: 18px; font-size: 12px; text-align: center;
  background: rgba(var(--rgb-hondo), .45); border-color: var(--borde-suave); }
.ventana .x:hover { background: var(--peligro); border-color: #ff9c9c; filter: none; }
.ventana .cuerpo { padding: 10px 12px; }
.ventana footer, .ventana .pie { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px 10px; }
.ventana .pie .nota { margin-right: auto; }
.pestanas { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.pestanas button { padding: 3px 12px; border-radius: 6px 6px 0 0; background: rgba(var(--rgb-hondo), .7); }
.pestanas button:not(.activa) { color: var(--tenue); }
.pestanas button:not(.activa):hover { color: var(--texto); }
.pestanas button.activa { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); font-weight: 700; }
.pestanas.chica button { padding: 1px 9px; font-size: 12px; }

/* ranuras e iconos */
.ranura { position: relative; width: 40px; height: 40px; border-radius: 6px; background: var(--ranura);
  border: 1px solid var(--ranura-borde); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 2px 6px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ranura img { width: auto; height: auto; max-width: 38px; max-height: 38px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
/* los iconos de items vienen recortados a su dibujo (21x28, 34x23, 36x36...): a su tamano, sin estirarlos a un cuadrado */
.ranura:hover { border-color: var(--acento-claro); box-shadow: 0 0 8px rgba(255,210,122,.45); }
.ranura .cant { position: absolute; right: 2px; bottom: 0; font-size: 11px; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.ranura .cd { position: absolute; left: 0; right: 0; top: 0; background: rgba(0,0,0,.62); pointer-events: none; }
.ranura.apagada img { filter: grayscale(1) brightness(.6); }
.ranura.marcada { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(247,165,49,.5); }
.ranura.vacia-pregunta::after { content: "?"; color: rgba(var(--rgb-borde),.25); font-size: 20px; font-weight: 700; }
.rejilla { display: grid; gap: 4px; }
.rejilla.cinco { grid-template-columns: repeat(5, 40px); justify-content: center; }
.rejilla.seis { grid-template-columns: repeat(6, 44px); justify-content: center; }
.rejilla.seis .ranura { width: 44px; height: 44px; }

/* barras */
.barra { position: relative; height: 14px; flex: 1; border-radius: 7px; background: rgba(0, 20, 26, .85); border: 1px solid rgba(0,0,0,.6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6); overflow: hidden; }
.barra .relleno { position: absolute; inset: 0 auto 0 0; border-radius: 7px; transition: width .25s; }
.barra span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px;
  font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000, 0 0 2px #000; white-space: nowrap; }
.barra.hp .relleno { background: linear-gradient(90deg, #d6262e, #f4462e 55%, #f8a133); }
.barra.mp .relleno { background: linear-gradient(90deg, #2357d8, #3d8af2 55%, #6cc8ff); }
.barra.exp .relleno { background: linear-gradient(90deg, #8b35c9, #c45fe8 60%, #f1a6ff); }
.barra.sp .relleno { background: linear-gradient(90deg, #f1a800, #ffe066); }
.barra.hab .relleno { background: linear-gradient(90deg, #138f9c, #3fd5df 70%, #a9f6ff); }
.barra.peso .relleno { background: linear-gradient(90deg, #d79c1c, #ffd35a); }

/* ---------------------------------------------------------------- HUD */
.ficha { position: absolute; left: 8px; top: 8px; display: grid; grid-template-columns: 92px 230px; column-gap: 4px; }
.ficha-retrato { position: relative; width: 92px; height: 92px; }
.arco-sp { position: absolute; inset: 0; width: 92px; height: 92px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.lampara { fill: rgba(10, 54, 64, .9); stroke: #7fcfd9; stroke-width: .8; }
.lampara.llena { fill: #ffd84a; stroke: #fff2b0; filter: drop-shadow(0 0 3px #ffd84a); }
.lampara.bloqueada { fill: rgba(0,0,0,.45); stroke: rgba(127,207,217,.3); }
.aro { position: absolute; left: 12px; top: 12px; width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--boton-a), var(--boton-b)); border: 4px solid #f39a1e; box-shadow: 0 0 0 2px #7a3f00, 0 3px 10px rgba(0,0,0,.5); }
.aro canvas { width: 72px; height: 72px; margin: -6px 0 0 -6px; image-rendering: pixelated; }
.ficha-datos { padding-top: 2px; display: flex; flex-direction: column; gap: 3px; }
.ficha-nombre { display: flex; align-items: center; gap: 3px; }
.ficha-nombre span { flex: 1; background: linear-gradient(var(--boton-a), var(--boton-b)); border: 1px solid var(--borde-suave); border-radius: 10px;
  padding: 1px 10px; text-align: center; font-weight: 700; text-shadow: 0 1px 2px #000; }
.fila-barra { display: flex; align-items: center; gap: 5px; }
.fila-barra b { width: 22px; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.fila-barra b.lv { width: 38px; font-size: 11px; }
.fila-barra.sp .barra { height: 6px; }
.panel-ficha { grid-column: 1 / -1; margin-top: 6px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 8px 10px; box-shadow: var(--sombra); width: 326px; }
.fila-hab { display: grid; grid-template-columns: 22px 90px 26px 1fr; align-items: center; gap: 5px; margin: 3px 0; }
.fila-hab img { width: 20px; height: 20px; image-rendering: pixelated; }
.fila-hab b { text-align: right; color: var(--acento-claro); }
.panel-ficha.info .dato { display: grid; grid-template-columns: 80px 1fr; gap: 6px; margin-bottom: 3px; }
.panel-ficha.info .dato b { background: rgba(230, 250, 255, .9); color: #123; border-radius: 4px; padding: 0 8px; }
.panel-ficha .par { display: grid; grid-template-columns: 72px 1fr 72px 1fr; gap: 4px; margin: 2px 0; }
.panel-ficha .par span { color: var(--tenue); } .panel-ficha .par b { color: #7dff8a; font-variant-numeric: tabular-nums; }

.barra-rapida { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 5px 8px 3px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); }
/* r38: botones todos iguales, en dos columnas: [pagina][↕] arriba y [1x10/2x5]
   abajo ocupando las dos. 1x10 vertical = una columna finita de iconos */
.barra-rapida .pagina { display: grid; grid-template-columns: repeat(2, 26px); gap: 3px; align-content: center; justify-content: center; }
#ui .barra-rapida .pagina button, #ui .barra-rapida .pagina button.mini {
  box-sizing: border-box; width: 26px; height: 22px; min-width: 0; min-height: 0; padding: 0; margin: 0;
  font-size: 11px; font-weight: 800; line-height: 20px; border-radius: 6px; }
#ui .barra-rapida .pagina button.forma { grid-column: span 2; width: 55px; }
.barra-rapida, .marco-objetivo { cursor: move; user-select: none; }
.barra-rapida .tecla, .barra-rapida button, .marco-objetivo button { cursor: pointer; }
.barra-rapida .teclas { display: grid; gap: 3px; justify-content: center; }
.barra-rapida.vertical { flex-direction: column; align-items: center; padding: 6px 5px 3px; gap: 5px; }
.tecla { display: flex; flex-direction: column; align-items: center; }
.tecla small { font-size: 10px; color: var(--acento-claro); font-weight: 700; line-height: 13px; }

.marco-objetivo { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: 240px; padding: 4px 10px 6px;
  background: var(--panel); border: 1px solid #ff8a8a; border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; box-shadow: var(--sombra); }
.marco-objetivo b { flex: 1; } .marco-objetivo span { color: var(--tenue); font-size: 12px; }
.marco-objetivo .barra { flex-basis: 100%; height: 10px; }

.minimapa { position: absolute; right: 8px; top: 8px; width: 222px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.minimapa header { display: flex; align-items: center; gap: 3px; padding: 3px 6px; font-weight: 700; font-size: 12px; }
.minimapa header span { flex: 1; }
.minimapa canvas { display: block; width: 210px; height: 120px; margin: 0 6px; border-radius: 6px; cursor: crosshair; border: 1px solid rgba(0,0,0,.5); }
.minimapa footer { text-align: center; padding: 3px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }

.menu { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 4px;
  background: linear-gradient(rgba(var(--rgb-panel),.55), rgba(var(--rgb-panel),.9)); border: 1px solid var(--borde-suave); border-radius: 30px 30px 14px 14px; }
.menu button { width: 46px; height: 50px; padding: 0; background: radial-gradient(ellipse at 50% 85%, rgba(3,52,62,.95) 0 45%, transparent 47%);
  border: 0; display: flex; align-items: flex-end; justify-content: center; }
.menu button img { max-width: 44px; max-height: 50px; image-rendering: pixelated; transition: transform .12s; }
.menu button:hover img, .menu button.activo img { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 6px rgba(255,220,130,.7)); }
/* r38: la barra de comandos con las posiciones del original (wnd01 116) */
#ui .menu.menu-orig { display: block; width: 476px; height: 66px; padding: 0; background: none; border: 0; border-radius: 0;
  transition: transform .35s ease-in-out; }
#ui .menu.menu-orig.oculto { transform: translateY(140px); }
.menu-orig .menu-base { position: absolute; left: 30px; right: 0; bottom: 0; height: 38px; border-radius: 22px 22px 12px 12px;
  background: linear-gradient(rgba(var(--rgb-panel),.55), rgba(var(--rgb-panel),.9)); border: 1px solid var(--borde-suave); }
.menu-orig .menu-boton { position: absolute; }
/* el icono va en la esquina del range, con su ancla (como el original) */
#ui .menu-orig .menu-boton .boton-ui { width: 100%; height: 100%; min-width: 0; padding: 0; margin: 0; background: none; border: 0;
  display: block; }
.menu-orig .menu-alternar { z-index: 2; }

.chat { position: absolute; left: 8px; bottom: 8px; width: 430px; height: 220px; display: flex; flex-direction: column;
  background: rgba(var(--rgb-panel), .78); border: 1px solid var(--borde-suave); border-radius: var(--radio); box-shadow: var(--sombra); }
.chat .pestanas { margin: 4px 6px 2px; }
.chat .mensajes { flex: 1; overflow-y: auto; padding: 2px 8px; font-size: 12.5px; scrollbar-width: thin; }
.chat .msg { margin: 1px 0; text-shadow: 0 1px 1px #000; }
.chat .msg b { color: #9fe8ff; } .chat .msg.mundo b { color: #ffd27a; } .chat .msg.privado { color: #ffaaf0; }
.chat .msg.sistema { color: #b6f0bd; } .chat .msg.malo { color: #ffb3b3; } .chat .msg.nivel { color: #ffe066; font-weight: 700; }
.chat .msg.tutorial { color: #8fe3ff; }
.chat form { display: flex; gap: 4px; padding: 4px 6px 6px; }
.chat form input { flex: 1; } .chat form select { width: 80px; padding: 3px; }

.avisos { position: absolute; top: 130px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aviso { padding: 6px 18px; border-radius: 20px; background: rgba(var(--rgb-tip), .78); border: 1px solid var(--borde-suave);
  box-shadow: 0 3px 12px rgba(0,0,0,.35); font-weight: 700; text-shadow: 0 1px 2px #000; animation: entra .25s ease-out; max-width: min(640px, 90vw); text-align: center; }
.aviso.malo { color: #ffb3b3; } .aviso.nivel { color: #ffe066; font-size: 18px; } .aviso.tutorial { color: #8fe3ff; }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } }
.cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 18px; background: rgba(var(--rgb-tip), .55); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--borde-suave); border-top-color: var(--acento); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- tooltip */
.tooltip { position: fixed; z-index: 2000; max-width: 280px; padding: 8px 10px; background: linear-gradient(rgba(var(--rgb-claro), .5), transparent 34px), rgba(var(--rgb-tip), .96);
  border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.12); font-size: 12.5px; line-height: 1.35; }
.tip-titulo + .tip-sub { margin-bottom: 2px; }
.tip-titulo { font-weight: 800; font-size: 14px; } .tip-sub { color: var(--tenue); font-size: 12px; }
.tip-stats { margin: 6px 0; display: grid; gap: 1px; } .tip-stats div { display: flex; justify-content: space-between; gap: 14px; }
.tip-stats b { color: #7dff8a; } .tip-desc { color: #d8eef2; margin-top: 4px; white-space: pre-wrap; }
.tip-aviso { color: #ff9c9c; margin-top: 4px; } .tip-ayuda { color: var(--acento-claro); margin-top: 6px; font-size: 11.5px; }

/* ---------------------------------------------------------------- ventanas concretas */
.pie-inv { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pie-inv .oro { color: #ffd84a; font-weight: 700; min-width: 70px; }
.pie-inv .peso { flex: 1; display: flex; align-items: center; gap: 5px; color: var(--tenue); }
.equipo { position: relative; height: 320px; background: radial-gradient(ellipse at 50% 45%, rgba(var(--rgb-borde),.15), transparent 70%); border-radius: 8px; }
.equipo-figura { position: absolute; left: 64px; top: 6px; opacity: .95; pointer-events: none; }
.casilla-equipo { position: absolute; width: 46px; height: 46px; }
.casilla-equipo .vacia { font-size: 9px; color: rgba(159,201,209,.55); text-align: center; line-height: 1.1; padding: 2px; }
.hab-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; background: rgba(var(--rgb-hondo2),.6); border-radius: 8px; padding: 6px 10px; }
.hab-cabecera b { color: var(--acento-claro); }
.hab-seis { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.hab-seis .ranura { width: 52px; height: 52px; cursor: pointer; } .hab-seis .ranura img { width: 44px; height: 44px; }
.paginador { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; }
.clases { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.clase { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11.5px; background: rgba(var(--rgb-hondo),.7); }
.clase.elegida { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); font-weight: 700; }
.clase-icono { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  background: linear-gradient(#2a95a5, #0f4e5a); color: #fff; border: 1px solid var(--borde-suave); }
.clase-detalle { display: grid; grid-template-columns: 1fr 300px; gap: 12px; margin-top: 10px; background: rgba(var(--rgb-hondo2),.55); border-radius: 8px; padding: 10px; }
.clase-detalle .desc { margin: 0; white-space: pre-wrap; color: #d8eef2; }
.seis-elegidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.elegida-hab { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.elegida-hab small { font-size: 11px; text-align: center; }
.todas-hab { margin-top: 8px; } .todas-hab summary { cursor: pointer; color: var(--acento-claro); }
.lista-hab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.lista-hab button { display: flex; align-items: center; gap: 4px; padding: 3px 6px; font-size: 11.5px; text-align: left; background: rgba(var(--rgb-hondo),.7); }
.lista-hab button img { width: 18px; height: 18px; image-rendering: pixelated; }
.lista-hab button.marcada { background: linear-gradient(#2fb3c4, #177684); border-color: var(--borde); }
.dialogo { position: absolute; left: 50%; bottom: 240px; transform: translateX(-50%); width: min(620px, 94vw); display: flex; gap: 10px; padding: 12px;
  background: linear-gradient(var(--panel-claro), var(--panel)); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); z-index: 500; }
.dialogo-retrato { flex: none; background: radial-gradient(circle, rgba(var(--rgb-borde),.25), transparent 70%); border-radius: 10px; }
.dialogo-cuerpo { flex: 1; } .dialogo-nombre { color: var(--acento-claro); font-size: 15px; }
.dialogo-cuerpo p { margin: 6px 0 10px; white-space: pre-wrap; }
.opciones { display: flex; flex-direction: column; gap: 5px; } .opciones button { text-align: left; white-space: normal; }
.opciones button:not(.siguiente):not(.principal):not(.peligro) { background: rgba(var(--rgb-hondo), .55); border-color: var(--borde-suave); padding: 5px 12px; }
.opciones button:not(.siguiente):not(.principal):not(.peligro):hover { border-color: var(--acento-claro); background: rgba(var(--rgb-claro), .7); filter: none; }
.lista-tienda { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.producto { display: grid; grid-template-columns: 42px 1fr 64px; align-items: center; gap: 8px; padding: 3px; border-radius: 8px; }
.producto:hover { background: rgba(var(--rgb-borde),.1); }
.producto .nombre small { display: block; color: #ffd84a; } .producto input { width: 64px; }
.pie-tienda { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.mapa-grande { position: relative; overflow: hidden; border-radius: 8px; cursor: crosshair; background: #062730; }
.mapa-grande img { width: 100%; height: 100%; image-rendering: auto; }
.etiqueta-npc, .etiqueta-portal { position: absolute; transform: translate(-50%, -120%); font-size: 11px; white-space: nowrap; padding: 0 5px;
  border-radius: 4px; background: #0e6b7a; border: 1px solid #9fe8f0; pointer-events: none; }
.etiqueta-portal { background: #e8762b; border-color: #ffd09a; }
.mapa-grande .yo { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #e0464e; }
.ajuste { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.pagina-dlg { float: right; color: var(--tenue); font-size: 11px; }
.opciones button.siguiente { align-self: flex-end; text-align: center; min-width: 110px; background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); font-weight: 700; }

/* ---- registro de misiones y rastreador */
.quest-log { display: flex; gap: 10px; min-height: 300px; max-height: 60vh; }
.quest-lista { list-style: none; margin: 0; padding: 0; width: 200px; flex: none; overflow-y: auto; border-right: 1px solid var(--borde-suave); padding-right: 6px; }
.quest-lista li { display: flex; gap: 6px; align-items: flex-start; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.quest-lista li:hover { background: rgba(var(--rgb-borde), .12); }
.quest-lista li.sel { background: rgba(247, 165, 49, .22); }
.quest-lista li.vacia { color: var(--tenue); cursor: default; font-size: 12px; }
.quest-lista li small { display: block; color: var(--tenue); font-size: 11px; }
.quest-lista input { margin-top: 2px; padding: 0; }
.quest-detalle { flex: 1; overflow-y: auto; padding-right: 4px; }
.quest-detalle h3 { margin: 2px 0 6px; color: var(--acento-claro); font-size: 15px; }
.quest-detalle .intro { color: var(--tenue); margin: 0 0 8px; }
.quest-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quest-pasos li { display: flex; gap: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(var(--rgb-hondo2), .5); }
.quest-pasos li.actual { border: 1px solid var(--acento); background: rgba(247, 165, 49, .12); }
.quest-pasos li.hecho { opacity: .6; }
.quest-pasos .marca { width: 14px; flex: none; color: var(--acento-claro); }
.quest-pasos .pista { font-size: 11px; color: var(--tenue); margin-top: 3px; display: flex; gap: 8px; }
.quest-pasos .pista a.npc-aqui, .rastreador a { color: #8fe3ff; cursor: pointer; text-decoration: underline; }
.rastreador { position: absolute; right: 8px; top: 196px; width: 222px; display: flex; flex-direction: column; gap: 4px; }
.rastreador .rq { background: rgba(var(--rgb-osc), .72); border: 1px solid var(--borde-suave); border-radius: 7px; padding: 5px 8px;
  font-size: 12px; cursor: pointer; text-shadow: 0 1px 2px #000; }
.rastreador .rq b { color: var(--acento-claro); display: block; }
.chat .msg.mision, .aviso.mision { color: #ffe27a; }

/* ---- ficha: habilidades bloqueadas, efectos activos y barra de casteo */
.fila-hab.bloqueada { opacity: .45; }
.fila-hab .candado { width: 18px; text-align: center; font-style: normal; font-size: 11px; }
.efectos-activos { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; pointer-events: auto; }
.efecto-ico { position: relative; width: 26px; height: 26px; border: 1px solid var(--borde-suave); border-radius: 5px; background: var(--ranura); }
.efecto-ico img { width: 24px; height: 24px; display: block; }
.efecto-ico small { position: absolute; right: 1px; bottom: -1px; font-size: 9px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.casteo { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: 260px; text-align: center;
  text-shadow: 0 1px 2px #000; font-weight: 700; font-size: 12px; pointer-events: none; }
.casteo-barra { height: 8px; margin-top: 3px; border: 1px solid var(--borde); border-radius: 5px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.casteo-barra i { display: block; height: 100%; background: linear-gradient(90deg, #6fd3ff, #f7a531); }

/* ---- equipo */
.marcos-equipo { position: absolute; left: 8px; top: 46%; width: 170px; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.titulo-equipo { font-size: 11px; font-weight: 700; color: var(--acento-claro); text-shadow: 0 1px 2px #000; cursor: pointer; }
.marco-socio { background: rgba(var(--rgb-osc), .78); border: 1px solid var(--borde-suave); border-radius: 7px; padding: 3px 6px 4px;
  font-size: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.marco-socio .barra { flex: none; }
.marco-socio .fila { display: flex; justify-content: space-between; text-shadow: 0 1px 2px #000; }
.marco-socio .fila span, .marco-socio small { color: var(--tenue); font-size: 11px; }
.marco-socio.elegido { border-color: #ffd84a; }
.marco-socio.lejos { opacity: .7; } .marco-socio.desconectado { opacity: .45; } .marco-socio.muerto b { color: #ff9a9a; }
.acciones-objetivo { flex-basis: 100%; display: flex; gap: 4px; margin-top: 3px; }
.chat .msg.team, .chat .msg.team b { color: #9dffb0; }
.grupo-fila { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(var(--rgb-borde), .15); }
.grupo-fila b { flex: 1; } .grupo-fila small { color: var(--tenue); }
.grupo-invitar { display: flex; gap: 6px; margin-top: 8px; } .grupo-invitar input { flex: 1; }

/* ---- objetos: peso, rotos, tirar, reparar */
.pie-inv .peso { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 12px; color: var(--tenue); }
.pie-inv .peso.casi .barra.peso .relleno { background: linear-gradient(90deg, #e07b1c, #ffb057); }
.pie-inv .peso.lleno .barra.peso .relleno { background: linear-gradient(90deg, #c4252c, #ff6a5a); }
.ranura.rota img { filter: grayscale(.4) sepia(1) hue-rotate(-40deg) saturate(3) brightness(.8); }
.ranura.rota::after { content: '✕'; position: absolute; right: 2px; top: 0; color: #ff6a6a; font-weight: 800; font-size: 11px; text-shadow: 0 0 2px #000; }
.tip-falta, .tip-falta b { color: #ff8a8a !important; }
.tip-stats.apagados { opacity: .45; text-decoration: line-through; }
.papelera { margin-left: auto; padding: 4px 10px; border: 1px dashed var(--borde-suave); border-radius: 6px; font-size: 12px; color: var(--tenue); }
.lista-reparar { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.fila-reparar { display: flex; align-items: center; gap: 8px; }
.fila-reparar .dato { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.fila-reparar .dato small { color: var(--tenue); }

/* ---- produccion */
.produccion { display: grid; grid-template-columns: 210px 1fr; gap: 10px; }
.lista-recetas { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.fila-receta { display: flex; gap: 6px; align-items: center; padding: 3px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.fila-receta div { display: flex; flex-direction: column; } .fila-receta small { color: var(--tenue); }
.fila-receta.elegida { background: rgba(255, 210, 122, .18); outline: 1px solid var(--acento-claro); }
.fila-receta.bloqueada { opacity: .5; }
.detalle-receta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.fila-material { display: flex; align-items: center; gap: 6px; } .fila-material span { flex: 1; }
.fila-material.falta b { color: #ff8a8a; }

/* ---- muerte: panel arriba, el espiritu sigue caminando */
.panel-muerte { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); width: 420px; padding: 10px 14px;
  background: rgba(20, 24, 40, .88); border: 1px solid #b9c7ff; border-radius: 12px; box-shadow: var(--sombra);
  text-align: center; pointer-events: auto; display: flex; flex-direction: column; gap: 6px; }
.panel-muerte b { font-size: 16px; color: #dfe6ff; } .panel-muerte p { margin: 0; font-size: 13px; }
.panel-muerte small { color: var(--tenue); } .panel-muerte .fila-botones { justify-content: center; }

.lote { color: var(--acento-claro); font-size: 11px; font-weight: 700; }
.tip-req { color: #9fe3ff; margin-top: 4px; font-size: 12px; } .tip-req.falta { color: #ff8a8a; }
/* emotes (N) */
.emotes { display: grid; grid-template-columns: repeat(6, 32px); gap: 4px; padding: 4px; }
.emote { width: 32px; height: 32px; padding: 3px; display: grid; place-items: center; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15); border-radius: 5px; cursor: pointer; }
.emote:hover { border-color: #ffd890; background: rgba(255,216,144,.15); }
.emote img { image-rendering: pixelated; max-width: 26px; max-height: 26px; }

/* r31: el cursor del juego (shape/cursor/c01) en toda la interfaz, botones incluidos,
   como el original; los campos de texto conservan la barrita */
#ui, #ui *, #ui button, #ui button:disabled, #ui .titulo, #ui [style*="cursor"] { cursor: url("/api/cursor/c01_1.png?v=1") 0 0, default !important; }
#ui input:not([type=number]):not([type=checkbox]):not([type=range]), #ui textarea { cursor: text !important; }

/* almacen (Warehouse) */
.banco-oro { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.banco-oro input { width: 90px; }
.banco-cofres { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.banco-cofres .cofre { padding: 2px 0; font-size: 11px; opacity: .55; }
.banco-cofres .cofre.alquilado { opacity: 1; } .banco-cofres .cofre.vencido { opacity: .8; color: #ffb38a; }
.banco-cofres .cofre.activo { outline: 2px solid var(--acento-claro, #ffd890); }
.cofre-detalle { margin-top: 8px; }

/* fila de premios del dialogo (wnd01 484..489, message.lua ShowReward) */
.dialogo .premios { display: flex; gap: 4px; margin: 0 0 8px; }
.dialogo .premio { position: relative; }
.dialogo .premios.elegir .ranura { cursor: pointer; transition: transform .1s; }
.dialogo .premios.elegir .ranura:hover { transform: translateY(-5px); }
.dialogo .confirmar-premio { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--panel, #1d2a3a); border: 1px solid var(--acento, #6aa); border-radius: 6px; padding: 6px; z-index: 5;
  display: flex; gap: 4px; align-items: center; }

/* r37: pantalla de carga (al abrir y al entrar a un mapa) */
#ui .pantalla-carga { pointer-events: auto; }
.pantalla-carga { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: radial-gradient(ellipse at 50% 40%, #12424e 0%, #061a22 70%); color: var(--texto); }
.carga-logo { width: min(460px, 70vw); filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.carga-titulo { font-size: 20px; font-weight: 700; letter-spacing: .5px; text-shadow: 0 2px 4px #000; }
.carga-barra { width: min(420px, 70vw); height: 12px; border-radius: 6px; background: var(--panel-osc); border: 1px solid var(--borde-suave); overflow: hidden; }
.carga-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--acento), var(--acento-claro)); }
.carga-sub { font-size: 12px; color: var(--tenue); } .carga-sub span { margin-left: 6px; opacity: .8; }

/* r38c: canjes de NPC (exchange.xml) */
.canje-buscar { width: 100%; margin-bottom: 4px; }
.canje-lista { display: flex; flex-direction: column; gap: 3px; max-height: 360px; overflow-y: auto; }
.canje-fila { display: flex; flex-direction: column; gap: 2px; padding: 3px 6px; border: 1px solid var(--borde, #444); border-radius: 3px; cursor: pointer; }
.canje-fila:hover { border-color: var(--acento); }
.canje-fila.elegida { border-color: #ffd23f; }
.canje-fila.falta b { opacity: .6; }
.canje-premios, .canje-mats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.canje-mats { padding-left: 12px; }
.canje-mat { display: inline-flex; align-items: center; gap: 2px; }
.canje-mat .icono, .canje-item .icono { transform: scale(.8); }
.canje-mat.malo small { color: #ff6b6b; }
.canje-limite { color: var(--tenue); margin-left: auto; }
.canje-veces { width: 54px; }

/* r38c: Card Book */
.cartas-sets { display: grid; grid-template-columns: 170px 1fr; gap: 8px; }
.cartas-lista-sets { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fila-set { display: flex; justify-content: space-between; padding: 2px 5px; border: 1px solid transparent; cursor: pointer; font-size: 12px; }
.fila-set:hover, .fila-set.elegida { border-color: var(--acento); }
.fila-set.listo span { color: #ffd23f; }
.fila-set.hecho { opacity: .6; }
.cartas-fila, .cartas-grilla { display: flex; flex-wrap: wrap; gap: 4px; }
.cartas-grilla { max-height: 380px; overflow-y: auto; }
.carta { width: 76px; border: 2px solid #888; border-radius: 4px; padding: 2px; text-align: center; background: rgba(0,0,0,.25); }
.carta.chica { width: 64px; }
.carta img { max-width: 100%; image-rendering: pixelated; }
.carta small { display: block; font-size: 10px; line-height: 1.1; overflow: hidden; }
.carta.falta { opacity: .35; filter: grayscale(1); }
.carta-est.w { color: #fff; } .carta-est.b { color: #4fa3ff; } .carta-est.g { color: #ffd23f; }
.cartas-premios { display: flex; gap: 6px; margin: 4px 0; }
.canje-item.elegido { outline: 2px solid #ffd23f; }
.tip-carta { max-width: 260px; }

/* r38e: ligas */
.liga-boletin { width: 100%; min-height: 120px; white-space: pre-wrap; padding: 4px; }
.liga-info > div { margin: 2px 0; }
.liga-permisos, .liga-miembros { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.liga-permisos td, .liga-permisos th, .liga-miembros td, .liga-miembros th { padding: 2px 4px; text-align: left; }
.liga-miembros tr { cursor: pointer; }
.liga-miembros tr.elegida { background: rgba(255, 210, 63, .2); }
.liga-miembros tr.off { opacity: .55; }
.liga-almacen { display: flex; flex-wrap: wrap; gap: 2px; max-height: 180px; overflow-y: auto; }
.liga-almacen .casilla { width: 36px; height: 36px; border: 1px solid var(--borde, #555); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* r38f: Angel Elementary (ui/school.js) */
.escuela-reglas, .escuela-resultado { white-space: pre-wrap; font: inherit; max-height: 320px; overflow: auto; margin: 0; }
.escuela-objetos { border: 1px solid #ffffff22; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.escuela-cab { display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.escuela-reloj { font-size: 22px; min-width: 2ch; text-align: center; color: #ffd76a; }
.escuela-reloj.poco { color: #ff6a6a; }
.escuela-texto { font-size: 15px; line-height: 1.4; margin: 8px 0 10px; }
.escuela-opciones { display: flex; flex-direction: column; gap: 6px; }
.escuela-opciones button { text-align: left; padding: 6px 10px; }
.escuela-opciones button.elegida { outline: 2px solid #6ab0ff; }
.escuela-opciones button.buena { background: #2e7d32; color: #fff; }
.escuela-opciones button.mala { background: #8e2b2b; color: #fff; }
.escuela-opciones button.quitada { opacity: .3; text-decoration: line-through; }
.escuela-pie { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; font-size: 12px; }
.escuela-ayudas { margin-left: auto; display: flex; gap: 6px; }
.escuela-ayudas button.activa { outline: 2px solid #ffd76a; }
.escuela-top { columns: 2; font-size: 12px; margin: 8px 0 0; padding-left: 22px; }
.escuela-top li span { margin-right: 6px; }

/* r38i: Angels GO! */
.angelsgo-lista { max-height: 380px; overflow-y: auto; border: 1px solid #ffffff1a; border-radius: 6px; }
.angelsgo-cab, .angelsgo-fila { display: flex; justify-content: space-between; align-items: center; padding: 3px 8px; }
.angelsgo-cab { font-weight: bold; position: sticky; top: 0; background: #0b1a22; }
.angelsgo-fila:nth-child(odd) { background: #ffffff08; }

/* r38i (Claude): huecos de gemas del equipo de la mascota (ui/pet.js) */
.mm-pieza { position: relative; }
.mm-huecos { position: absolute; top: -6px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; z-index: 2; }
.mm-hueco { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #9ad; background: #142028; }
.mm-hueco.lleno { background: #6cf; box-shadow: 0 0 3px #6cf; }

/* r39a (Claude): Star Blessing (stars.js), con los paneles originales de shape/wndstar */
.ventana-estrellas .est-lienzo { position: relative; width: 702px; height: 384px; margin: 0 auto;
  background: radial-gradient(ellipse at 50% 40%, #1c2346, #0b0e1d); border-radius: 6px; overflow: hidden; }
.est-panel { position: absolute; }
.est-panel > .icono-ui { position: absolute; left: 0; top: 0; }
.est-panel > *:not(.icono-ui) { position: absolute; }
.est-pestana { position: absolute; width: 105px; height: 20px; padding: 0; font-size: 12px; border-radius: 4px;
  background: rgba(30,40,80,.85); color: #cfd8ff; border: 1px solid rgba(160,180,255,.35); }
.est-pestana.activa { background: linear-gradient(#6a7ff0, #3a4cb0); color: #fff; }
.est-polvo { position: absolute; right: 10px; top: 6px; display: flex; align-items: center; gap: 4px; color: #ffe08a; font-weight: 700; }
.est-polvo img { width: 22px; height: 22px; }
.est-titulo, .est-subtitulo, .est-nota, .est-cab { text-align: center; color: #ffe9a8; font-weight: 700; font-size: 12px; line-height: 18px; }
.est-subtitulo { color: #fff; }
.est-nota { color: #b8c4ff; font-weight: 400; }
.est-cab { text-align: left; color: #b8c4ff; }
.est-texto { font-size: 11px; color: #e8ecff; line-height: 15px; }
.est-texto .actual { color: #7dff8a; font-weight: 700; }
.est-fuerza { text-align: center; color: #ffe08a; font-weight: 700; font-size: 12px; }
.est-casilla { position: absolute; width: 38px; height: 38px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(170,190,255,.35);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.est-casilla img { max-width: 38px; max-height: 38px; image-rendering: pixelated; }
.est-casilla.bloqueada { background: rgba(0,0,0,.55); cursor: default; }
.est-casilla small { font-size: 9px; color: #aab; }
.est-nivel { position: absolute; right: 1px; bottom: -1px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.est-boton { height: 20px; padding: 0 6px; font-size: 12px; }
.est-tirada { position: absolute; width: 41px; height: 40px; padding: 0; background: none; border: 0; }
.est-tirada:disabled { filter: grayscale(.8) brightness(.6); }
.est-gratis { position: absolute; right: -14px; top: -2px; min-width: 18px; background: #c0392b; color: #fff; border-radius: 9px; font-size: 11px; }
.est-flecha { position: absolute; }
.est-grande { position: absolute; width: 77px; height: 85px; padding: 0; background: none; border: 0; color: #fff; }
.est-grande span { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 12px; text-shadow: 0 1px 2px #000; }
.est-oro { font-size: 11px; color: #ffe08a; }
.est-menu { position: absolute; z-index: 5; display: flex; flex-direction: column; background: rgba(10,14,30,.95);
  border: 1px solid rgba(160,180,255,.5); border-radius: 4px; }
.est-menu button { font-size: 12px; padding: 3px 10px; background: none; border: 0; color: #fff; text-align: left; }
.est-menu button:hover { background: rgba(100,130,255,.35); }
.est-confirma { position: absolute; left: 260px; top: 150px; width: 200px; padding: 10px; z-index: 6; text-align: center;
  background: rgba(10,14,30,.96); border: 1px solid rgba(160,180,255,.6); border-radius: 6px; }
.est-pagina { display: flex; gap: 2px; align-items: center; font-size: 12px; }
.est-info { left: 8px; top: 9px; width: 676px; height: 322px; overflow-y: auto; font-size: 12px; line-height: 17px; color: #e8ecff; }

/* r39a (Claude): la barra de comandos con su fondo original (icon 116, w007_01) */
.menu-orig .menu-fondo { position: absolute; pointer-events: none; z-index: 0; }
.menu-orig .menu-boton { z-index: 1; }
.menu-orig .menu-base { display: none; }

/* r39a (Claude): tablero de actividades (16200) y Daily events (28181) */
.ventana-actividades .act-lienzo { display: flex; gap: 10px; height: 460px; }
.act-lista { width: 160px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.act-tipo { padding: 0; background: none; border: 2px solid transparent; border-radius: 6px; }
.act-tipo.activa { border-color: #ffd36b; }
.act-pagina { flex: 1; overflow-y: auto; padding-right: 4px; }
.act-sub { font-weight: 700; margin: 4px 0 8px; color: #ffe9a8; }
.act-fila { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; border-radius: 6px; background: rgba(255,255,255,.05); }
.act-req { width: 150px; }
.act-premios { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.act-cobrar { min-width: 70px; }
.act-enlaces { display: flex; flex-wrap: wrap; gap: 10px; }
.act-enlace { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 230px; opacity: .8; }
.act-canje { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dia-tabla { max-height: 360px; overflow-y: auto; }
.dia-fila { display: grid; grid-template-columns: 110px 170px 100px 50px 110px 50px 70px; align-items: center; gap: 4px;
  padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.dia-fila.cab { font-weight: 700; color: #ffe9a8; position: sticky; top: 0; background: rgba(var(--rgb-panel), .98); }
.dia-fila.en-curso { background: rgba(80,200,120,.18); }
.dia-fila.previo { background: rgba(255,200,80,.12); }
.dia-fila button.mini { padding: 0; background: none; border: 0; }
.dia-ayuda { margin-top: 8px; padding: 8px; border-radius: 6px; background: rgba(255,255,255,.06); }

/* r39a (Claude): Prop de 7 columnas y sus botones originales (wnd01 3031) */
.rejilla.siete { grid-template-columns: repeat(7, 40px); justify-content: center; }
.botones-prop { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; }
.botones-prop .boton-ui { padding: 0; background: none; border: 0; min-width: 0; }
.botones-prop .boton-ui.activo { filter: drop-shadow(0 0 5px rgba(255,210,100,.9)); }
.botones-prop .papelera-ui { cursor: copy; }
.botones-prop button.chico { height: 20px; padding: 0 6px; font-size: 11px; }
.paginas { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
/* r39a (Claude): Quest Log con el interruptor del rastreador flotante */
.quest-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quest-rastreo { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; cursor: pointer; }
/* r39a (Claude): mapa grande con las paginas de mundo (wnd01 556) */
.mapa-mundo { position: relative; margin: 0 auto; border-radius: 8px; overflow: hidden; background: #062730; }
.mapa-mundo > img { width: 100%; height: 100%; display: block; }
.marca-mundo { position: absolute; width: 0; height: 0; }
.marca-mundo .punto { position: absolute; left: -6px; top: -6px; image-rendering: pixelated; }
.marca-mundo .caja { position: absolute; left: -57px; top: -26px; width: 114px; height: 20px; line-height: 20px; text-align: center;
  font-size: 11px; color: #fff; text-shadow: 0 1px 1px #000; white-space: nowrap; overflow: hidden; background-size: 100% 100%;
  background-color: rgba(20,60,80,.75); border-radius: 3px; }
.marca-mundo .aqui { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #ffe066; animation: aqui-parpadeo .27s steps(1) infinite alternate; }
@keyframes aqui-parpadeo { from { opacity: 1; } to { opacity: .25; } }
.mapa-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; }
.mapa-pie button { padding: 2px 8px; font-size: 12px; }
.mapa-pie button.activa { background: #e8762b; color: #fff; }
.mapa-pie .espacio { flex: 1; }
.mapa-pie label { display: flex; align-items: center; gap: 3px; }
/* r39a (Claude): usar un objeto con el cursor (targeting.js) */
body.apuntando-item, body.apuntando-item * { cursor: var(--cursor-item, url("/api/cursor/c27_1.png?v=2") 0 0), crosshair !important; }   /* r40f: cursor del objeto (targeting.js) */
/* r40m: dentro de la interfaz la regla del cursor comun (#ui * ... !important, r31)
   pesaba mas (un id le gana a una clase) y el cursor del objeto solo se veia sobre
   el mapa: con #ui en el selector este pesa mas (1,1,1) y va despues */
body.apuntando-item #ui, body.apuntando-item #ui *, body.apuntando-item #ui button:disabled, body.apuntando-item #ui [style*="cursor"] {
  cursor: var(--cursor-item, url("/api/cursor/c27_1.png?v=2") 0 0), crosshair !important; }
.tip-diff div { display: flex; justify-content: space-between; gap: 12px; }
.tip-diff b { color: #6dff7a; }
/* r39d (Claude): Achievements (wnd05 28101) */
.ventana-logros .lg-pagina { display: flex; flex-direction: column; gap: 6px; }
.lg-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; }
.lg-puntos { margin-left: auto; }
.lg-tabla { max-height: 260px; overflow-y: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; }
.lg-fila { display: grid; grid-template-columns: 40px 1fr 50px 110px 140px; gap: 6px; align-items: center; padding: 3px 6px;
  font-size: 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.05); }
.lg-fila.tit { grid-template-columns: 1fr 90px 110px; }
.lg-fila.pre { grid-template-columns: 50px 90px 1fr 60px; cursor: default; }
.lg-fila.cab { position: sticky; top: 0; background: rgba(var(--rgb-panel), .98); font-weight: 700; color: #ffe9a8; cursor: default; }
.lg-fila.hecho { color: #8dff9a; }
.lg-fila.sel { background: rgba(255,210,120,.15); }
.lg-fila.apagado { opacity: .5; }
.lg-barra { display: inline-block; width: 60px; height: 6px; margin-right: 4px; border-radius: 3px; background: rgba(255,255,255,.12); vertical-align: middle; }
.lg-barra b { display: block; height: 100%; border-radius: 3px; background: #5bd17a; }
.lg-req { font-size: 12px; max-height: 140px; overflow-y: auto; }
.lg-req ul { margin: 0; padding-left: 4px; list-style: none; }
.lg-req li.hecho { color: #8dff9a; }
.lg-ayuda { font-size: 12px; line-height: 17px; }
/* r39d (Claude): Album (wnd05 28202) */
.ventana-album .al-cuerpo { display: flex; gap: 10px; }
.al-izq { flex: 1; min-width: 0; }
.al-der { width: 170px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.al-tabla { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.al-fila { display: grid; grid-template-columns: 70px repeat(5, 44px); gap: 4px; align-items: center; padding: 2px 0; font-size: 12px; }
.al-fila.cab { font-weight: 700; color: #ffe9a8; }
.al-soltar { display: flex; justify-content: center; padding: 6px; border: 1px dashed rgba(255,255,255,.3); border-radius: 6px; }
.al-preg { font-size: 12px; padding: 6px; border-radius: 6px; background: rgba(255,255,255,.06); }
.al-valores { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; font-size: 12px; margin: 0; }
.al-valores dd { margin: 0; font-weight: 700; }
.al-resumen { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-bottom: 6px; }
/* r39e (Claude): tableros del Holy Battlefield (wnd 24401 / 24411) */
.campo-cristales { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; font-weight: 700; pointer-events: none; }
.campo-ej { display: flex; align-items: center; gap: 4px; font-size: 18px; }
.campo-ej.naranja b { color: #ffb347; } .campo-ej.azul b { color: #7dd3ff; }
.campo-lleva { color: #ffe066; font-size: 12px; }
.campo-recursos { position: absolute; right: 12px; bottom: 230px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.45);
  color: #fff; font-size: 12px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.campo-recursos > div { display: flex; align-items: center; gap: 4px; }
/* r39e (Claude): League War (wnd 25122) */
.gl-pag { min-height: 260px; font-size: 12px; }
.gl-dl { display: grid; grid-template-columns: 90px 1fr; gap: 3px 8px; }
.gl-dl dd { margin: 0; font-weight: 700; }
.gl-tabla { max-height: 200px; overflow-y: auto; }
.gl-fila { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.gl-fila.cab { font-weight: 700; color: #ffe9a8; }
.gl-intro { white-space: pre-line; max-height: 260px; overflow-y: auto; line-height: 16px; }

/* r39h: granja de la liga (ui/farm.js) */
.granja-menu { position: fixed; z-index: 60; width: 120px; padding: 6px; display: flex; flex-direction: column; gap: 3px;
  background: rgba(20, 24, 40, .95); border: 1px solid #8aa4d8; border-radius: 4px; }
.granja-menu .nota { font-size: 11px; text-align: center; margin-bottom: 2px; }
.granja-menu button { padding: 2px 4px; font-size: 12px; }
.granja-tip div { line-height: 1.35; }
.granja-panel .cuerpo { position: relative; font-size: 12px; background: rgba(50, 50, 50, .2); }
.granja-panel .granja-traba { position: absolute; right: 2px; top: 0; }
.granja-panel.trabado { opacity: .75; }
.granja-panel.trabado header { pointer-events: none; }
.granja-ayuda { max-height: 300px; overflow-y: auto; white-space: normal; font-size: 12px; line-height: 1.4; }

/* r39i: Trade (3061) y puestos (3081 / 3651) — ui/trade.js */
.cm-lado { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.cm-nombre { flex: 1; font-weight: 600; }
.cm-oro { color: #ffd77a; }
.cm-luz { width: 16px; height: 16px; }
.cm-grilla { display: grid; grid-template-columns: repeat(4, 38px); gap: 2px; }
.cm-grilla .casilla { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.18); display: inline-block; }
.cm-suma { display: flex; gap: 4px; align-items: center; margin: 4px 0; }
.cm-suma input { width: 90px; }
.cm-invitacion { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 70; padding: 10px 14px;
  background: rgba(20, 24, 40, .96); border: 1px solid #8aa4d8; border-radius: 4px; max-width: 280px; }
.pt-lista { min-height: 150px; max-height: 220px; overflow-y: auto; border: 1px solid rgba(255,255,255,.15); padding: 2px; }
.pt-fila { display: flex; align-items: center; gap: 6px; padding: 2px; cursor: pointer; }
.pt-fila.elegida { background: rgba(120, 160, 255, .25); }
.pt-fila .pt-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-fila .pt-precio { color: #ffd77a; }
.pt-precio-dlg { margin: 6px 0; padding: 6px; border: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: column; gap: 4px; }
.pt-precio-dlg input[type=number] { width: 100px; }
.pt-precio-dlg .apagado { opacity: .5; }
.pt-pie { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pt-pie input { width: 60px; }
.pt-hawk { color: #fff2c8; margin-bottom: 4px; }

/* r39j: Angel Baby (wnd02 14200) — ui/angelbaby.js */
.ventana-angelbaby .cuerpo { font-size: 12px; }
.ab-pag { min-height: 300px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ab-pag.ab-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.ab-pag .ab-ancho { grid-column: 1 / -1; }
.ab-pag .fila { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ab-num { padding: 1px 2px; }
.ab-chk { display: inline-flex; align-items: center; gap: 3px; }
.ab-ranura { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); display: inline-block; vertical-align: middle; }
.ab-skills span { display: inline-flex; align-items: center; gap: 3px; }
.ab-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ab-lista { min-height: 60px; max-height: 140px; overflow-y: auto; border: 1px solid rgba(255,255,255,.15); padding: 2px; }
.ab-lista > div { display: flex; align-items: center; gap: 4px; }
.ab-compra input { width: 60px; margin-left: auto; }
.ab-log { max-height: 300px; }
.ab-tabs { display: flex; gap: 2px; margin-top: 6px; flex-wrap: wrap; }
.ab-tabs button { flex: 1; padding: 2px; font-size: 11px; }
.ab-tabs button.activa { background: rgba(120,160,255,.35); }
.ab-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

/* r39k: Card Book (Intro, cabeceras para ordenar) */
.cartas-cab { display: flex; gap: 2px; margin: 4px 0; }
.cartas-cab button { flex: 1; font-size: 11px; padding: 2px; }
.cartas-cab button.activa { background: rgba(120,160,255,.35); }
.cartas-intro { max-height: 380px; overflow-y: auto; font-size: 12px; line-height: 1.45; }

/* r39m: tooltips de logros y titulos (ui/achievements.js) */
.lg-tip { max-width: 300px; }
.lg-tip .tip-ok { color: #7dff8a; margin-top: 2px; }
.lg-tip-lista { margin: 4px 0 0; padding-left: 4px; list-style: none; }
.lg-tip-lista li { line-height: 1.35; }
.lg-tip-lista li.hecho { color: #7dff8a; }
.lg-tip-de { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 4px; }

/* r39m (Franco): Star Blessing sigue el tema de la UI (fable.css :root[data-tema]).
   El arte de shape/wndstar (en verde azulado) se mezcla por luminosidad sobre el
   color del tema: queda el dibujo (el circulo de la matriz, las lineas del bingo)
   con el tono del tema. */
.ventana-estrellas .est-lienzo { background: radial-gradient(ellipse at 50% 40%, rgb(var(--rgb-claro)), rgb(var(--rgb-osc)));
  border: 1px solid var(--borde-suave); }
.ventana-estrellas .est-panel > .icono-ui { mix-blend-mode: luminosity; opacity: .92; }
.ventana-estrellas .est-pestana { background: linear-gradient(var(--boton-a), var(--boton-b)); color: var(--texto); border: 1px solid var(--borde-suave); }
.ventana-estrellas .est-pestana.activa { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); border-color: var(--acento); font-weight: 700; }
.ventana-estrellas .est-polvo, .ventana-estrellas .est-fuerza, .ventana-estrellas .est-oro { color: var(--acento-claro); }
.ventana-estrellas .est-titulo { color: var(--acento-claro); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ventana-estrellas .est-subtitulo { color: var(--texto); }
.ventana-estrellas .est-nota, .ventana-estrellas .est-cab { color: var(--tenue); }
.ventana-estrellas .est-texto, .ventana-estrellas .est-info { color: var(--texto); }
.ventana-estrellas .est-casilla { box-shadow: inset 0 0 0 1px rgba(var(--rgb-borde), .45); }
.ventana-estrellas .est-casilla.bloqueada { background: rgba(var(--rgb-hondo), .7); }
.ventana-estrellas .est-menu, .ventana-estrellas .est-confirma { background: rgba(var(--rgb-tip), .96); border-color: var(--borde); }
.ventana-estrellas .est-menu button:hover { background: rgba(var(--rgb-borde), .25); }

/* r39m (Franco): elegir profesion con los iconos de los oficios, 3 filas de 5 */
.clases { grid-template-columns: repeat(5, 1fr); }
.clase .clase-img { width: 44px; height: 44px; border-radius: 8px; image-rendering: auto; box-shadow: 0 0 0 1px var(--borde-suave); }
.clase.elegida .clase-img { box-shadow: 0 0 0 2px var(--acento); }
.clase span { line-height: 1.2; }
/* r39m (Franco): Fashion / Card / Furniture / Bubble en 2 filas de 2, mismo ancho, centradas */
.pestanas.pestanas-bolsas { display: grid; grid-template-columns: repeat(2, 110px); justify-content: center; gap: 4px; }
.pestanas.pestanas-bolsas button { width: 100%; margin: 0; border-radius: 6px; }

/* r39m (Franco): Item Mall mas ancho (todas las secciones en una fila), el Fitting Room
   a tamano real (el robot entero) y Fitting Room / Store Cabinet centrados */
.ventana-mall .mall { grid-template-columns: 1fr 240px; }
.ventana-mall .mall-izq > .pestanas:first-child { flex-wrap: nowrap; }
.ventana-mall .mall-izq > .pestanas:first-child button { white-space: nowrap; }
.ventana-mall .mall-lista { height: 400px; }
.ventana-mall .mall-der-pest { justify-content: center; display: flex; }
.ventana-mall .probador-vista { width: 226px; height: 282px; }

/* r39n: Friend (wnd 2301) — ui/friends.js */
.ventana-amigos .am-pag { min-height: 360px; display: flex; flex-direction: column; gap: 6px; }
.am-cab { display: flex; gap: 4px; align-items: center; } .am-cab .espacio { flex: 1; }
.am-arbol { flex: 1; min-height: 220px; max-height: 300px; overflow-y: auto; border: 1px solid var(--borde-suave); border-radius: 6px; padding: 3px; background: rgba(var(--rgb-hondo), .45); }
.am-grupo { font-weight: 700; color: var(--acento-claro); padding: 2px 4px; cursor: pointer; display: flex; justify-content: space-between; }
.am-grupo.sel { background: rgba(var(--rgb-borde), .15); }
.am-amigo { display: grid; grid-template-columns: 1fr auto; padding: 2px 4px 2px 14px; cursor: pointer; border-radius: 4px; }
.am-amigo small { color: var(--tenue); font-size: 11px; } .am-amigo .am-estado { grid-column: 1 / -1; }
.am-amigo.off { opacity: .55; } .am-amigo.sel { background: rgba(var(--rgb-borde), .2); }
.am-negra { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
.am-lista { min-height: 250px; max-height: 300px; overflow-y: auto; border: 1px solid var(--borde-suave); border-radius: 6px; padding: 3px; }
.am-lista > div { display: flex; justify-content: space-between; align-items: center; }
.am-correos { max-height: 160px; overflow-y: auto; border: 1px solid var(--borde-suave); border-radius: 6px; }
.am-correo { display: grid; grid-template-columns: 80px 1fr 80px; gap: 4px; padding: 2px 4px; font-size: 12px; cursor: pointer; }
.am-correo.cab { font-weight: 700; color: var(--tenue); cursor: default; } .am-correo.nuevo { font-weight: 700; color: var(--acento-claro); }
.am-correo.sel { background: rgba(var(--rgb-borde), .2); }
.am-leer { border: 1px solid var(--borde-suave); border-radius: 6px; padding: 4px 6px; font-size: 12px; }
.am-texto { white-space: pre-wrap; margin-top: 4px; max-height: 120px; overflow-y: auto; }
.am-escribir { display: flex; flex-direction: column; gap: 4px; } .am-escribir label { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 4px; }
.am-escribir .fila { display: flex; justify-content: space-between; align-items: center; }
/* r39o: mailtrade (adjuntos del correo) */
.am-adjuntos { display: flex; gap: 4px; align-items: center; min-height: 40px; padding: 2px; border: 1px dashed var(--borde-suave); border-radius: 6px; }
.am-adjuntos .casilla { width: 36px; height: 36px; border: 1px solid var(--borde-suave); border-radius: 4px; display: inline-block; }
.am-oro { color: var(--acento-claro); font-weight: 700; }

/* r39p: tooltip de las piezas mejoradas (stats con lo que suman mortero, gemas y
   verdes; huecos con su gema) */
.tooltip .tip-buff span, .tooltip .tip-buff b { color: #7ee08a; }
.tooltip .tip-buff small { color: #b9e8c0; font-weight: normal; opacity: .85; }
.tooltip .tip-intens { color: #c894ff; margin: 2px 0; }
.tooltip .tip-huecos { margin: 4px 0; display: flex; flex-direction: column; gap: 3px; }
.tooltip .tip-hueco-vacio { color: var(--tenue, #9aa); font-size: 12px; }
.tooltip .tip-gema { border: 1px solid rgba(var(--rgb-borde, 120,160,200), .55); border-radius: 4px; padding: 3px 5px;
  background: rgba(var(--rgb-hondo, 10,20,30), .55); font-size: 12px; }
.tooltip .tip-gema-cab { display: flex; align-items: center; gap: 4px; }
.tooltip .tip-gema-cab img { width: 18px; height: 18px; image-rendering: pixelated; }
.tooltip .tip-gema-cab b { color: #d79bff; }
.tooltip .tip-gema-activa { color: #7ee08a; }
.tooltip .tip-gema-otra { color: var(--tenue, #9aa); }

/* r39r: 8 lugares de personaje (4 x 2) y la creacion sin la columna opcional */
.lugares-pj.ocho { display: grid; grid-template-columns: repeat(4, 150px); gap: 10px; }
.lugares-pj.ocho .lugar-pj { width: 150px; padding: 6px 6px 8px; }
.lugares-pj.ocho .lugar-pj .pedestal { width: 130px; height: 158px; }
.lugares-pj.ocho .lugar-pj b { font-size: 13px; max-width: 136px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lugares-pj.ocho .lugar-pj small { font-size: 11px; }
.lugares-pj.ocho .lugar-pj .mas { font-size: 30px; }
@media (max-width: 900px) { .lugares-pj.ocho { grid-template-columns: repeat(2, 150px); } }
.creacion-ao .creacion-cuerpo { grid-template-columns: 190px 1fr; }

/* ============================================================== r40: pulido de la UI
   (pedido de Franco: "que la UI sea mas linda" y que entre en una pantalla chica).
   Todo con las variables de los temas (fable.css :root[data-tema]). */

/* ---- barra rapida: el original (quickcmd.lua) la pone arriba, pegada a la
   ficha (x = 210 en 800x600). Centrada solo cuando entra entre la ficha y el
   minimapa; si no, despues de la ficha, y en pantallas chicas con casillas de
   32 px como las del original (wnd01 182: 409x36). */
@media (max-width: 1219px) {
  .barra-rapida { left: 354px; transform: none; }
}
@media (max-width: 1099px) {
  .barra-rapida { gap: 2px; padding: 4px 6px 2px; }
  .barra-rapida .teclas { gap: 2px; }
  .barra-rapida .ranura { width: 32px; height: 32px; border-radius: 5px; }
  .barra-rapida .ranura img { max-width: 30px; max-height: 30px; }
  #ui .barra-rapida .pagina button, #ui .barra-rapida .pagina button.mini { width: 22px; height: 18px; line-height: 16px; font-size: 10px; }
  #ui .barra-rapida .pagina button.forma { width: 47px; }
  .tecla small { font-size: 9px; line-height: 11px; }
  .marco-objetivo { top: 64px; }
}

/* ---- elegir personaje y crear en pantallas bajas (1000x600) */
.seleccion { align-items: stretch; }
.ficha-pj { align-self: center; }
.lugar-pj { transition: border-color .12s, box-shadow .12s, transform .12s; }
.lugar-pj:hover:not(.elegido) { transform: translateY(-2px); }
.lugar-pj.vacio .pedestal { opacity: .7; }
.lugar-pj.vacio:hover .mas { color: var(--acento-claro); }
.botones-inicio button { box-shadow: 0 3px 10px rgba(0,0,0,.3); }
@media (max-height: 720px) {
  .inicio-ao { gap: 10px; }
  .logo-reao.pequeno { width: min(270px, 50vw); margin-bottom: -2px; }
  .lugares-pj.ocho { gap: 8px; }
  .lugares-pj.ocho .lugar-pj { padding: 4px 6px 6px; gap: 0; }
  .lugares-pj.ocho .lugar-pj .pedestal { height: 116px; }
  .lugares-pj.ocho .lugar-pj .pedestal canvas { width: 93px !important; height: 116px !important; }
  .lugares-pj.ocho .lugar-pj .mas { font-size: 26px; }
  .botones-inicio button { padding: 6px 14px; }
  .creacion-ao .creacion-vista .retrato-canvas { max-height: 46vh; width: auto !important; }
}
/* la creacion ya no tiene la columna opcional (r39r): mas angosta, sin hueco a la derecha */
.modal .creacion-ao { width: min(570px, 96vw); }
.modal .creacion-ao .creacion-cuerpo { grid-template-columns: 190px 1fr; }
.creacion-ao .creacion-campos .subt { color: var(--acento-claro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
  border-bottom: 1px solid var(--borde-suave); padding-bottom: 3px; margin: 10px 0 4px; }
.creacion-ao .creacion-campos .subt:first-child { margin-top: 0; }

/* ---- Item Mall en pantallas angostas o bajas */
@media (max-width: 1040px) { .ventana-mall .mall-izq > .pestanas:first-child { flex-wrap: wrap; } }
@media (max-height: 720px) {
  .ventana-mall .mall-lista, .ventana-mall .mall-intro { height: 250px; }
  .ventana-mall .probador-vista { height: 220px; }
}

/* ---- Friend (friends.js): el campo de nombre y sus botones entran en la ventana */
.ventana-amigos .fila-botones { justify-content: flex-start; margin-top: 4px; gap: 4px; }
.ventana-amigos .fila-botones input, .ventana-amigos .fila-botones select { flex: 1; min-width: 0; }
.ventana-amigos .am-cab button.mini { min-width: 26px; }
.ventana-amigos > .cuerpo > .pestanas:last-child, .ventana-amigos .pestanas { margin: 6px 0 0; }
.am-amigo:hover, .am-correo:not(.cab):hover { background: rgba(var(--rgb-borde), .1); }

/* ---- Album: las 8 pestanas no se meten en la columna derecha */
.ventana-album .al-izq > .pestanas:first-child button { padding: 3px 7px; font-size: 12px; }
.al-der .subt { margin-top: 0; }
.al-fila:not(.cab):hover { background: rgba(var(--rgb-borde), .08); }

/* ---- Card Book: cabeceras para ordenar de una altura pareja */
.cartas-sets { grid-template-columns: 230px 1fr; }
.cartas-cab button { font-size: 11px; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; }
.cartas-lista-sets .cartas-cab button:first-child { flex: 2; }
.cartas-set { min-width: 0; }
/* los pies que van dentro del cuerpo ya tienen su margen: no se salen de la ventana */
.ventana .cuerpo footer, .ventana .cuerpo .pie { padding: 8px 0 0; flex-wrap: wrap; }
/* pestanas que ocupan todo el ancho (League War) */
.pestanas.llenas { flex-wrap: nowrap; }
.pestanas.llenas button { flex: 1 1 0; min-width: 0; padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; }
.cartas-cab button.activa, .ab-tabs button.activa { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); font-weight: 700; }
.fila-set { border-radius: 5px; }
.carta { border-color: var(--ranura-borde); border-radius: 6px; background: var(--ranura); }

/* ---- League War y otras pestanas abajo */
.ventana .pestanas button { padding: 3px 10px; }

/* ---- Angel Baby: las casillas como las ranuras de siempre */
.ab-ranura, .cm-grilla .casilla, .am-adjuntos .casilla, .liga-almacen .casilla {
  background: var(--ranura); border: 1px solid var(--ranura-borde); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 2px 6px rgba(0,0,0,.5); }
.ab-lista, .pt-lista, .angelsgo-lista, .lg-tabla, .casa-tabla { border: 1px solid var(--borde-suave); border-radius: 6px; background: rgba(var(--rgb-hondo), .35); }
.ab-tabs button { padding: 3px 4px; }
.ab-pag .fila input[type=number], .ab-num { width: 52px; }

/* ---- colores fijos de r38/r39 pasados al tema */
.angelsgo-cab { background: rgb(var(--rgb-osc)); color: var(--acento-claro); }
.angelsgo-fila:hover { background: rgba(var(--rgb-borde), .1); }
.escuela-objetos { border-color: var(--borde-suave); border-radius: 6px; }
.escuela-reloj { color: var(--acento-claro); }
.canje-fila { border-color: var(--borde-suave); border-radius: 6px; background: rgba(var(--rgb-hondo), .35); }
.canje-fila.elegida { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.granja-menu, .cm-invitacion { background: rgba(var(--rgb-tip), .96); border-color: var(--borde); border-radius: 8px; box-shadow: var(--sombra); }
.pt-fila { border-radius: 4px; } .pt-fila.elegida { background: rgba(var(--rgb-borde), .22); }
.pt-precio-dlg { border-color: var(--borde-suave); border-radius: 6px; }
.liga-miembros tr.elegida { background: rgba(var(--rgb-borde), .2); }
.liga-permisos th, .liga-miembros th { color: var(--tenue); border-bottom: 1px solid var(--borde-suave); }
.dia-fila.cab, .lg-fila.cab, .gl-fila.cab, .al-fila.cab { color: var(--acento-claro); }
.act-tipo { min-height: 36px; }
.act-tipo.activa { border-color: var(--acento); }
.act-fila, .dia-ayuda, .al-preg { background: rgba(var(--rgb-hondo), .4); border: 1px solid var(--borde-suave); }
.act-sub, .casa-menu b { color: var(--acento-claro); }
.casa-tabla, .lg-tabla { border-color: var(--borde-suave); }
.casa-fila.cab { background: rgba(var(--rgb-claro), .6); }
.casa-nota { background: rgba(var(--rgb-hondo), .45); border: 1px solid var(--borde-suave); }
.casa-baile { border-radius: 16px; }

/* ---- dialogo de NPC y premios */
.dialogo { box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.15); }
.dialogo-nombre { font-weight: 800; text-shadow: 0 1px 2px #000; border-bottom: 1px solid var(--borde-suave); padding-bottom: 3px; }
.dialogo-cuerpo p { line-height: 1.45; }
.dialogo .confirmar-premio { background: rgba(var(--rgb-tip), .96); border-color: var(--borde); }

/* ---- listas de las ventanas: un hover parejo */
.quest-lista li.sel, .fila-receta.elegida { background: rgba(var(--rgb-borde), .16); outline: 1px solid var(--acento-claro); }
.producto { border: 1px solid transparent; }
.producto:hover { border-color: var(--borde-suave); }
.lista-hab button.marcada { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); border-color: var(--acento-claro); }
.clase { border-radius: 8px; }
.clase-detalle, .hab-cabecera { border: 1px solid var(--borde-suave); }

/* ---- HUD en pantallas bajas */
@media (max-height: 640px) {
  .avisos { top: 104px; }
  .dialogo { bottom: 200px; }
}
/* ---- marco del objetivo: rojo para monstruos, el borde del tema para NPC y jugadores */
.marco-objetivo { box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.12); }
.marco-objetivo.tipo-npc { border-color: var(--borde); }
.marco-objetivo.tipo-jugador { border-color: #8fd8ff; }
.marco-objetivo b { text-shadow: 0 1px 2px #000; }
.marco-objetivo.tipo-monstruo b { color: #ffd0d0; }

/* ============================================================== r40b: la UI con el
   lenguaje del original (pedido de Franco: "mas linda" y "bien similar al original").
   Del original (wnd01): la ranura con la esquina doblada abajo a la derecha
   (w011_2..4), los botones con la esquina cortada y doble filo (btn1xx/btn2xx),
   el marco de ventana con el "clavo" redondo arriba a la izquierda (w001_01) y las
   pestanas con el lado inclinado (w003). Todo con las variables de los temas. */
:root {
  --filo-oscuro: rgba(0, 0, 0, .55);           /* la linea oscura de afuera del doble filo */
  --brillo: rgba(255, 255, 255, .16);          /* la luz de arriba de paneles y botones */
  --oro-titulo: var(--acento-claro);
}

/* ---- ventanas: doble filo, cabecera con el clavo y la linea dorada */
.ventana { border-radius: 5px 12px 8px 8px;
  background: linear-gradient(rgba(var(--rgb-claro), .95), rgba(var(--rgb-panel), .93) 30px, rgba(var(--rgb-panel), .91) 70%, rgba(var(--rgb-osc), .93));
  box-shadow: 0 0 0 1px var(--filo-oscuro), 0 8px 26px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ventana > header, .modal .ventana > header { position: relative; height: 29px; gap: 6px; padding: 0 5px 0 8px;
  border-radius: 4px 11px 0 0; border-bottom: 1px solid rgba(0, 0, 0, .35);
  background: linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 55%, rgba(0, 0, 0, .14)); }
/* el clavo del original (w001_01): un aro dorado con el centro del color del panel */
.ventana > header::before, .panel-inicio > header::before, .rastreador > header::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .5), rgb(var(--rgb-osc)) 60%);
  border: 2px solid var(--oro-titulo); box-shadow: 0 0 0 1px var(--filo-oscuro), 0 0 5px rgba(var(--rgb-borde), .35); }
/* la linea dorada bajo el titulo, que se desvanece hacia la derecha */
.ventana > header::after, .panel-inicio > header::after { content: ""; position: absolute; left: 6px; right: 30%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--oro-titulo), rgba(var(--rgb-borde), .45) 45%, transparent); pointer-events: none; }
.ventana .titulo { font-size: 13.5px; font-weight: 700; letter-spacing: .4px; color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .35); }
/* la cruz de cerrar: el cuadrito del original (btn002), rojo al pasar */
.ventana .x, .rastreador > header button.x { width: 19px; height: 19px; padding: 0; border-radius: 3px; font-size: 11px; line-height: 17px;
  color: var(--texto); background: linear-gradient(rgba(var(--rgb-hondo), .35), rgba(var(--rgb-hondo), .75));
  border: 1px solid rgba(var(--rgb-borde), .6); box-shadow: 0 0 0 1px var(--filo-oscuro), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ventana .x:hover, .rastreador > header button.x:hover { background: linear-gradient(#f06a6a, #b42f2f); border-color: #ffc0c0; color: #fff; filter: none; }
.ventana .cuerpo { padding: 10px 12px 12px; }
.ventana > footer, .ventana > .pie { border-top: 1px solid rgba(var(--rgb-borde), .15); background: rgba(var(--rgb-osc), .25);
  border-radius: 0 0 8px 8px; }

/* ---- botones: cuerpo con luz arriba, doble filo y, los de accion, la esquina
   de abajo a la derecha cortada como los del original */
/* la luz y la sombra van en el fondo (no en box-shadow): los botones de imagen
   (.boton-ui, background: none) quedan limpios */
button { border-color: rgba(var(--rgb-borde), .55); border-radius: 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, .25) 1px, transparent 1px), linear-gradient(var(--brillo), rgba(255, 255, 255, 0) 55%),
    linear-gradient(var(--boton-a), var(--boton-b));
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
button:hover:not(:disabled) { filter: brightness(1.18); }
button:disabled { opacity: .45; filter: grayscale(.7); }
button.principal, button.mini.activo, button.activo, .opciones button.siguiente {
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--acento-a), var(--acento-b));
  color: var(--acento-texto); border-color: var(--acento-claro); text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
button.peligro { background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), linear-gradient(#e05a5a, #a32a2a);
  border-color: #ffa8a8; color: #fff; }
.ventana footer button, .ventana .pie button, .fila-botones button, .botones-inicio button, .op-botones button,
.mall-pie button, .pie-tienda button, .opciones button.siguiente, button.principal, button.peligro {
  --corte: 7px; position: relative; padding-right: 14px; padding-left: 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%); }
.ventana footer button::after, .ventana .pie button::after, .fila-botones button::after, .botones-inicio button::after, .op-botones button::after,
.mall-pie button::after, .pie-tienda button::after, .opciones button.siguiente::after, button.principal::after, button.peligro::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: var(--corte); height: var(--corte); pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(50% - 1.2px), var(--filo-corte, rgba(var(--rgb-borde), .7)) calc(50% - 1.2px),
    var(--filo-corte, rgba(var(--rgb-borde), .7)) 50%, transparent 50%); }
button.principal, .opciones button.siguiente { --filo-corte: var(--acento-claro); }
button.peligro { --filo-corte: #ffa8a8; }
/* recortado, el contorno de foco no se ve: va por dentro */
.ventana footer button:focus-visible, .ventana .pie button:focus-visible, .fila-botones button:focus-visible, .botones-inicio button:focus-visible,
.op-botones button:focus-visible, .mall-pie button:focus-visible, .pie-tienda button:focus-visible, button.principal:focus-visible, button.peligro:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--acento-claro); }
button.mini { font-weight: 700; border-radius: 3px; }

/* ---- pestanas: el lado derecho inclinado (w003), la activa en dorado */
.pestanas button { --incl: 9px; position: relative; border-radius: 4px 0 0 0;
  border-bottom-color: transparent; background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)), rgba(var(--rgb-hondo), .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); clip-path: polygon(0 0, calc(100% - var(--incl)) 0, 100% 100%, 0 100%); }
.pestanas button::after { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; width: var(--incl); pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.1px), var(--filo-corte, rgba(var(--rgb-borde), .55)) calc(50% - 1.1px),
    var(--filo-corte, rgba(var(--rgb-borde), .55)) 50%, transparent 50%); }
.pestanas button.activa { --filo-corte: var(--acento-claro); border-color: var(--acento-claro);
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(var(--acento-a), var(--acento-b)); text-shadow: none; }
.pestanas { border-bottom: 1px solid rgba(var(--rgb-borde), .3); padding-bottom: 0; gap: 2px; }
.pestanas button, .ventana .pestanas button { padding: 3px calc(8px + var(--incl) / 2) 3px 9px; }
.pestanas.chica button, .ventana .pestanas.chica button { padding: 1px calc(8px + var(--incl) / 2) 1px 8px; }
.pestanas.llenas button, .ventana .pestanas.llenas button { padding: 3px 9px 3px 4px; }
.ventana-album .al-izq > .pestanas:first-child button { --incl: 7px; padding: 3px 10px 3px 6px; }
.pestanas.pestanas-bolsas { border-bottom: 0; }
.pestanas.pestanas-bolsas button { border-radius: 4px; border-bottom-color: rgba(var(--rgb-borde), .55); clip-path: none; padding: 3px 8px; }
.pestanas.pestanas-bolsas button.activa { border-bottom-color: var(--acento-claro); }
.pestanas.pestanas-bolsas button::after { display: none; }

/* ---- ranuras: la esquina doblada del original (w011_2) y el filo de adentro */
.ranura { border-radius: 4px; border-color: var(--ranura-borde);
  background-image: linear-gradient(135deg, transparent 84.5%, rgba(var(--rgb-borde), .5) 84.5%, rgba(var(--rgb-borde), .5) 86.5%, rgba(var(--rgb-borde), .22) 86.5%, rgba(var(--rgb-borde), .12)),
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .06), transparent 70%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(0, 0, 0, .3), inset 0 0 0 3px rgba(var(--rgb-borde), .07), inset 0 3px 7px rgba(0, 0, 0, .45); }
.ranura:hover { border-color: var(--acento-claro); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 210, 122, .45), inset 0 0 0 2px rgba(0, 0, 0, .3); }
.ranura.marcada { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(247, 165, 49, .55), inset 0 0 0 2px rgba(0, 0, 0, .3); }
.ranura .cant { right: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 1px #000; }
.casilla-equipo .vacia { color: rgba(var(--rgb-borde), .5); font-weight: 600; }

/* ---- campos de texto: hundidos, como las cajas del original */
input, select, textarea { border-color: rgba(var(--rgb-borde), .4); border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
input:focus, select:focus, textarea:focus { border-color: var(--acento-claro); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 2px rgba(var(--rgb-borde), .2); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; }

/* ---- barras de desplazamiento del tema */
#ui * { scrollbar-color: rgba(var(--rgb-borde), .5) rgba(0, 0, 0, .18); }

/* ---- tooltip: el panel oscuro del original, titulo separado y filas parejas */
.tooltip { max-width: 290px; padding: 8px 11px 9px; border-radius: 5px 10px 6px 6px;
  background: linear-gradient(rgba(var(--rgb-claro), .45), transparent 30px), rgba(var(--rgb-tip), .97);
  box-shadow: 0 0 0 1px var(--filo-oscuro), 0 8px 22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
.tooltip .tip-titulo { font-size: 14px; line-height: 1.25; text-shadow: 0 1px 0 #000; }
.tooltip .tip-titulo + .tip-sub { padding-bottom: 5px; margin-bottom: 4px; border-bottom: 1px solid rgba(var(--rgb-borde), .25); }
.tooltip .tip-stats { gap: 2px; margin: 5px 0; }
.tooltip .tip-stats div { padding: 0 2px; }
.tooltip .tip-stats span { color: #d8eef2; }
.tooltip .tip-desc { color: #cfe6ea; line-height: 1.4; }
.tooltip .tip-ayuda { border-top: 1px dashed rgba(var(--rgb-borde), .25); padding-top: 4px; }

/* ---- HUD: marcos con el mismo doble filo; textos legibles sobre el mapa */
.minimapa, .barra-rapida, .marco-objetivo, .ficha-marco, #ui .rastreador, .dialogo, .panel-muerte {
  box-shadow: 0 0 0 1px var(--filo-oscuro), var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .14); }
.minimapa header { height: 24px; padding: 2px 5px 2px 8px; background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); }
.minimapa header span { text-shadow: 0 1px 0 #000; letter-spacing: .2px; }
.minimapa canvas { border: 1px solid rgba(var(--rgb-borde), .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.minimapa footer { color: var(--oro-titulo); font-size: 12.5px; letter-spacing: .3px; }
.tecla small { text-shadow: 0 1px 0 #000; }
.avisos .aviso { border-radius: 6px 14px 6px 6px; box-shadow: 0 0 0 1px var(--filo-oscuro), 0 4px 14px rgba(0, 0, 0, .4); }
.aviso.malo { border-color: rgba(255, 140, 140, .6); }
.aviso.nivel { border-color: var(--acento-claro); background: radial-gradient(ellipse at 50% 0, rgba(255, 215, 120, .25), transparent 70%), rgba(var(--rgb-tip), .82); }

/* ---- dialogo de NPC: el nombre en dorado con su linea, opciones como renglones */
.dialogo { border-radius: 6px 16px 10px 10px; }
.dialogo-nombre { display: block; color: var(--oro-titulo); font-size: 15px; letter-spacing: .3px; border-bottom: 0; padding-bottom: 4px;
  background: linear-gradient(90deg, var(--oro-titulo), rgba(var(--rgb-borde), .35) 45%, transparent) bottom left / 100% 1px no-repeat; }
.dialogo .pagina-dlg { margin-top: -20px; }
.opciones button:not(.siguiente):not(.principal):not(.peligro) { border-radius: 4px; text-shadow: none; font-weight: 500;
  padding-left: 22px; position: relative; }
.opciones button:not(.siguiente):not(.principal):not(.peligro)::before { content: "▸"; position: absolute; left: 9px; color: var(--oro-titulo); }

/* ---- listas: renglones y cabeceras de tabla con el mismo tono */
.quest-lista li.sel, .fila-receta.elegida, .lg-fila.sel, .am-amigo.sel, .am-correo.sel { background: rgba(var(--rgb-borde), .16); outline: 1px solid rgba(var(--rgb-borde), .55); }
.subt { letter-spacing: .2px; }
.nota { line-height: 1.4; }

/* ---- 1000x600: ninguna ventana mas alta que la pantalla, los cuerpos desplazan */
@media (max-height: 640px) {
  .ventana .cuerpo { padding: 8px 10px 10px; }
  .quest-log { min-height: 0; max-height: calc(100vh - 150px); }
  .lista-tienda { max-height: calc(100vh - 230px); }
}
/* ---- tienda: la cantidad mas angosta y alineada a la derecha */
.producto { grid-template-columns: 42px 1fr 58px; padding: 3px 4px; }
.producto input { width: 58px; padding: 3px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.producto .nombre { line-height: 1.3; }
.pie-tienda { padding-top: 8px; border-top: 1px solid rgba(var(--rgb-borde), .2); }
/* ---- Item Mall: las diez secciones siguen en una fila con las pestanas inclinadas */
.ventana-mall .mall-izq > .pestanas button { --incl: 7px; padding: 3px 11px 3px 7px; }
/* ---- Card Book: las cabeceras para ordenar se leen enteras */
.cartas-sets { grid-template-columns: 244px 1fr; }
.cartas-cab button { flex: 1 1 auto; padding: 2px 5px; }
.cartas-lista-sets .cartas-cab button:first-child { flex: 2 1 auto; }
/* ---- mapa grande: etiquetas y la pagina activa con los colores del tema */
.etiqueta-npc { background: rgba(var(--rgb-claro), .92); border-color: var(--borde); text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.mapa-pie button.activa { background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(var(--acento-a), var(--acento-b));
  color: var(--acento-texto); border-color: var(--acento-claro); text-shadow: none; }
.mapa-grande, .mapa-mundo { box-shadow: 0 0 0 1px rgba(var(--rgb-borde), .35), inset 0 0 12px rgba(0, 0, 0, .45); }
/* ---- r40y (Claude, pedidos de Franco): marco del objetivo compacto (sin botones; el
   menu 565 sale con clic derecho) y los numeros de EXP al pasar el raton */
.marco-objetivo { width: 210px; padding: 4px 10px 5px; }
.marco-objetivo .barra { margin-top: 1px; }
.hab-barra-r40y { min-width: 0; }
.tip-exp-r40y { margin: 4px 0 0; min-width: 150px; }
.tip-exp-r40y b { color: #f1a6ff; font-variant-numeric: tabular-nums; }

/* ================================================================ r41b (Claude, pedidos de Franco):
   toda la UI sigue el tema (Options > Window Color, fable.css :root[data-tema]). Solo variables. */
/* ---- botones con iconos lineales del tema (ui/icons_r41b.js): ficha, barra derecha y Prop */
.ico-r41b { display: block; width: 18px; height: 18px; pointer-events: none; }
#ui .bt-r41b { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; min-width: 0; padding: 0; border-radius: 7px;
  color: var(--borde); background: linear-gradient(rgba(var(--rgb-claro), .95), rgba(var(--rgb-panel), .95));
  border: 1px solid var(--borde-suave); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.45); transition: color .12s, border-color .12s; }
#ui .bt-r41b:hover { color: var(--acento-claro); border-color: var(--acento-claro); filter: none; }
#ui .bt-r41b.activo { color: var(--acento-texto); background: linear-gradient(var(--acento-a), var(--acento-b)); border-color: var(--acento-claro);
  box-shadow: 0 0 8px rgba(var(--rgb-borde), .35), inset 0 1px 0 rgba(255,255,255,.35); }
/* ficha: cinco botones chicos debajo de las barras */
#ui .accesos-ficha.accesos-r41b { align-items: center; gap: 5px; min-height: 0; margin-top: 4px; }
#ui .accesos-r41b .bt-r41b { width: 26px; height: 26px; border-radius: 6px; }
#ui .accesos-r41b .ico-r41b { width: 17px; height: 17px; }
/* barra derecha: debajo del minimapa, un panel del tema con los botones en columna */
#ui .accesos-minimapa.barra-der-r41b { top: 184px; right: 8px; flex-direction: column; align-items: center; gap: 5px; padding: 6px 5px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); }
#ui .barra-der-r41b .bt-r41b { width: 32px; height: 32px; border-radius: 8px; }
#ui .barra-der-r41b .ico-r41b { width: 20px; height: 20px; }
.barra-der-r41b .sep-r41b { display: block; width: 22px; height: 1px; background: var(--borde-suave); }
/* Prop: la papelera (soltar encima) y los seis botones (Fusion incluido) en una fila */
#ui .botones-prop { gap: 5px; margin-top: 8px; }
#ui .botones-prop .bt-r41b { width: 30px; height: 30px; }
#ui .botones-prop .papelera-ui.bt-r41b { margin-right: 6px; cursor: copy; color: var(--tenue); border-style: dashed; }
#ui .botones-prop .papelera-ui.bt-r41b:hover { color: var(--peligro); border-color: var(--peligro); }

/* ---- HUD de la ficha: el anillo del retrato, las lamparas de SP y las barras siguen el tema
   ("Right now it only fits Ocean theme") */
.lampara { fill: rgba(var(--rgb-osc), .92); stroke: var(--borde); }
.lampara.bloqueada { fill: rgba(0,0,0,.45); stroke: rgba(var(--rgb-borde), .3); }
.aro { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(var(--rgb-osc), .95), 0 0 0 3px rgba(var(--rgb-borde), .35), 0 3px 10px rgba(0,0,0,.5);
  background: radial-gradient(circle at 50% 35%, rgb(var(--rgb-claro)), rgb(var(--rgb-osc))); }
.barra { background: rgba(var(--rgb-hondo2), .9); }
.barra.hab .relleno { background: linear-gradient(90deg, rgba(var(--rgb-borde), .45), var(--borde) 70%, rgba(255,255,255,.85)); }
#ui .ficha-marco .panel-ficha.info .dato b { background: linear-gradient(#fbfeff, rgba(var(--rgb-borde), .9)); color: rgb(var(--rgb-osc)); }
#ui .ficha-marco .atributos b { color: var(--texto); }
#ui .op-switch i { background: var(--tenue); }
/* skills cerrados (7-9): una casilla vacia como las del Prop, del tamaño de los iconos (20 px) */
.hab-vacia-r41b { display: block; width: 20px; height: 20px; border-radius: 4px; background: var(--ranura); border: 1px solid var(--ranura-borde);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 2px 4px rgba(0,0,0,.5); }
#ui .fila-hab.bloqueada { opacity: .6; }
#ui .fila-hab.bloqueada .n { color: var(--tenue); }

/* ---- Options: mas ancha (options.js ancho 440) y deslizadores con pista, relleno y pulgar del tema.
   El pulgar visible se dibuja con el fondo en --p (el mismo valor que el % de la derecha): una imagen
   de 14 px en background-position X% queda centrada en 7 + (ancho - 14) * X, como el pulgar nativo,
   que queda invisible pero sigue siendo el que se arrastra. */
#ui .ventana-opciones label.op-fila { grid-template-columns: 22px 120px 1fr 44px; }
#ui .ventana-opciones .op40-radio { grid-template-columns: 22px 120px 1fr; }
#ui .ventana-opciones .op-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui input.deslizador { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background:
    radial-gradient(circle closest-side, #fff 0 20%, var(--acento-claro) 30% 62%, var(--acento-b) 72% 88%, rgba(0,0,0,.45) 92%, transparent 100%) var(--p) 50% / 16px 16px no-repeat,
    linear-gradient(90deg, var(--acento-b), var(--acento-a)) 0 50% / var(--p) 6px no-repeat,
    linear-gradient(var(--ranura), var(--ranura)) 0 50% / 100% 6px no-repeat,
    linear-gradient(var(--ranura-borde), var(--ranura-borde)) 0 50% / 100% 8px no-repeat; }
#ui input.deslizador::-webkit-slider-runnable-track { height: 16px; background: transparent; border: 0; }
#ui input.deslizador::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin: 0; opacity: 0; border: 0; box-shadow: none; }
#ui input.deslizador::-moz-range-track { height: 16px; background: transparent; border: 0; }
#ui input.deslizador::-moz-range-thumb { width: 16px; height: 16px; opacity: 0; border: 0; }
#ui input.deslizador:hover { filter: brightness(1.12); }
#ui input.deslizador:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* ---- la barra de comandos de abajo a la derecha (icon 116 = wnd01 w007_01): las sombras ovaladas y la
   rama son teal fijo (0,72,90); con un filtro por tema quedan del color medio entre --rgb-panel y
   --rgb-claro (calculado: hue-rotate + saturate + brightness). Un tema nuevo sin filtro queda teal. */
#ui .menu-orig .menu-fondo .icono-ui { filter: var(--filtro-menu-r41b, none); }
:root[data-tema="medianoche"] { --filtro-menu-r41b: hue-rotate(40deg) saturate(.9) brightness(.7); }
:root[data-tema="bosque"] { --filtro-menu-r41b: hue-rotate(310deg) saturate(.6) brightness(1.05); }
:root[data-tema="realeza"] { --filtro-menu-r41b: hue-rotate(82deg) saturate(.9) brightness(.75); }
:root[data-tema="rosa"] { --filtro-menu-r41b: hue-rotate(130deg) saturate(.9) brightness(.8); }
:root[data-tema="brasa"] { --filtro-menu-r41b: hue-rotate(180deg) saturate(1) brightness(.75); }
:root[data-tema="arena"] { --filtro-menu-r41b: hue-rotate(206deg) saturate(.4) brightness(1.1); }
:root[data-tema="pizarra"] { --filtro-menu-r41b: hue-rotate(34deg) saturate(.1) brightness(.9); }
/* ---- Quest Log y rastreador: los enlaces a NPC con el borde del tema (antes un celeste fijo) */
.quest-pasos .pista a.npc-aqui, #ui .rastreador a { color: var(--borde); }
/* ---- chat: el boton Whisper List (431, chat.lua OnShowTellList) del alto del cuadro y de "General", del tema */
#ui .chat form { align-items: stretch; }
#ui .chat form .canal-hablar, #ui .chat form input { height: 28px; }
#ui .chat form .susurro-r41b { flex: none; width: 32px; height: 28px; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 6px;
  color: var(--borde); background: linear-gradient(rgba(var(--rgb-claro), .95), rgba(var(--rgb-panel), .95)); border: 1px solid var(--borde-suave);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
#ui .chat form .susurro-r41b:hover { color: var(--acento-claro); border-color: var(--acento-claro); filter: none; }
#ui .chat form .susurro-r41b.activo { color: var(--acento-texto); background: linear-gradient(var(--acento-a), var(--acento-b)); border-color: var(--acento-claro); }
#ui .chat form .susurro-r41b .ico-r41b { width: 18px; height: 18px; }
#ui .chat-popup.susurros { bottom: 42px; }

/* ================================================================ r41f (Claude, pedido de Franco: "Can you make the
   Card UI match the UI themes that we created?"): Card Book (cards.js 14500), Exchange (exchange.js 27701) y Album
   (album.js 28202) con las mismas posiciones del original (r40w) pero dibujados con el tema, como Rankings (r41b):
   marcos, cabeceras, botones, filas, ranuras y barras de scroll. Solo variables (las de cada ventana van en su JS). */
.t41f { color: var(--texto); }
.t41f .t41f-marco { position: absolute; box-sizing: border-box; pointer-events: none; border: 1px solid var(--borde-suave); border-radius: 6px;
  background: rgba(var(--rgb-osc), .55); box-shadow: inset 0 1px 6px rgba(0,0,0,.45); }
.t41f .t41f-marco.claro { background: linear-gradient(rgba(var(--rgb-claro), .35), rgba(var(--rgb-panel), .2)); box-shadow: none; }
.t41f .t41f-marco.hondo { background: rgba(var(--rgb-hondo2), .7); }
/* las lineas de las filas (13 px en Card Book, 19 en Album, 38 en Exchange): el alto va en background-size (style) */
.t41f .t41f-renglones { position: absolute; pointer-events: none; box-sizing: border-box;
  background: linear-gradient(transparent calc(100% - 1px), rgba(var(--rgb-borde), .13) calc(100% - 1px)) 0 0 / 100% 13px repeat-y; }
.t41f .t41f-col { position: absolute; width: 1px; pointer-events: none; background: rgba(var(--rgb-borde), .22); }
.t41f .t41f-canal { position: absolute; pointer-events: none; background: rgba(var(--rgb-hondo2), .45); border-radius: 5px 0 0 5px; }
.t41f .t41f-cab { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 4px;
  border: 1px solid var(--borde-suave); background: linear-gradient(rgba(var(--rgb-claro), .95), rgba(var(--rgb-panel), .95));
  color: var(--acento-claro); font: 700 11px "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; }
.t41f .t41f-cab.plana { background: none; border-color: transparent; }
.t41f button.t41f-b { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 2px; margin: 0;
  min-width: 0; min-height: 0; border: 1px solid var(--borde-suave); border-radius: 4px; background: linear-gradient(var(--boton-a), var(--boton-b));
  color: var(--texto); font: 600 11px "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.7); cursor: pointer;
  white-space: nowrap; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transform: none; }
.t41f button.t41f-b:hover:not(:disabled) { filter: brightness(1.18); border-color: var(--acento-claro); }
.t41f button.t41f-b:disabled { cursor: default; filter: grayscale(.6) brightness(.8); opacity: .55; }
.t41f button.t41f-b.activo { color: var(--acento-texto); text-shadow: none; background: linear-gradient(var(--acento-a), var(--acento-b)); border-color: var(--acento-claro); }
.t41f button.t41f-b.principal:not(:disabled) { color: var(--acento-texto); text-shadow: none; background: linear-gradient(var(--acento-a), var(--acento-b)); border-color: var(--acento-claro); }
.t41f button.t41f-b.cab { color: var(--acento-claro); font-weight: 700; background: linear-gradient(rgba(var(--rgb-claro), .95), rgba(var(--rgb-panel), .95)); }
.t41f button.t41f-b.cab.activo { color: var(--acento-texto); background: linear-gradient(var(--acento-a), var(--acento-b)); }
.t41f button.t41f-b.pest { border-radius: 6px 6px 0 0; }
.t41f button.t41f-b.pest-abajo { border-radius: 0 0 6px 6px; }
.t41f button.t41f-b.ico { color: var(--borde); }
.t41f button.t41f-b.ico:hover:not(:disabled) { color: var(--acento-claro); }
.t41f button.t41f-b .ico-r41b { width: 12px; height: 12px; stroke-width: 2.6; }
.t41f .t41f-campo { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 3px;
  background: var(--ranura); border: 1px solid var(--ranura-borde); color: var(--texto); font-weight: 700; white-space: nowrap; overflow: hidden; }
.t41f .t41f-ranura { position: absolute; box-sizing: border-box; border-radius: 4px; background: var(--ranura); border: 1px solid var(--ranura-borde);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 2px 4px rgba(0,0,0,.45); }
.t41f .t41f-lista { scrollbar-width: thin; scrollbar-color: rgba(var(--rgb-borde), .75) transparent; }
.t41f .t41f-lista::-webkit-scrollbar { width: 9px; }
.t41f .t41f-lista::-webkit-scrollbar-track { background: rgba(var(--rgb-hondo2), .5); border-radius: 4px; }
.t41f .t41f-lista::-webkit-scrollbar-thumb { background: rgba(var(--rgb-borde), .75); border-radius: 4px; }
.t41f .t41f-lista::-webkit-scrollbar-thumb:hover { background: var(--acento-claro); }
.t41f .t41f-popup { position: absolute; z-index: 6; box-sizing: border-box; background: rgb(var(--rgb-osc)); border: 1px solid var(--borde); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.6); color: var(--texto); }
.t41f .t41f-popup > div { padding: 1px 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.t41f .t41f-popup > div:hover { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); }
.t41f .t41f-pregunta { position: absolute; z-index: 5; box-sizing: border-box; background: var(--panel); border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: var(--sombra); color: var(--texto); }

/* ================================================================ r41h (Claude, pedidos de Franco): ficha y equipo.
   Solo variables del tema (fable.css :root[data-tema]); las barras HP/MP del equipo quedan con sus colores. */
/* ---- ficha: "Rank is uncentered". El nombre del rango va centrado en la pildora como Job y Faction; el
   numero (wnd01 851, a la derecha de 60..78, ssRight) queda como una ficha chica a la izquierda, fuera del centrado */
#ui .ficha-marco .panel-ficha.info .dato.rank b { display: block; position: relative; text-align: center; padding: 0 30px; }
#ui .ficha-marco .panel-ficha.info .dato.rank b i { position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  min-width: 18px; height: 14px; padding: 0 3px; box-sizing: border-box; display: grid; place-items: center; border-radius: 7px;
  font: 800 10px/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: center;
  color: var(--acento-texto); background: linear-gradient(var(--acento-a), var(--acento-b)); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* ---- ficha: Title (wnd01 376, un cuadro editable centrado) */
#ui .ficha-marco .panel-ficha.info .dato.titulo-r41h b { cursor: text; }
#ui .ficha-marco .panel-ficha.info .dato.titulo-r41h b i { font-style: normal; opacity: .45; }
#ui .ficha-marco .panel-ficha.info .dato.titulo-r41h .titulo-ver-r41h:hover { box-shadow: inset 0 0 0 1px var(--acento-b), inset 0 -1px 0 rgba(0,0,0,.15); }
#ui .ficha-marco .panel-ficha.info .dato.titulo-r41h .titulo-edita-r41h { padding: 0; box-shadow: 0 0 0 2px var(--acento-claro); }
#ui .dato.titulo-r41h .titulo-edita-r41h input { display: block; width: 100%; height: 18px; box-sizing: border-box; margin: 0; padding: 0 10px; border: 0;
  outline: none; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: center; border-radius: inherit; }
/* ---- marco del equipo: un panel del tema, cabecera para arrastrar (como el chat r40z) */
#ui .marcos-equipo.equipo-r41h { gap: 3px; padding: 0 5px 5px; background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), var(--sombra), inset 0 1px 0 rgba(255,255,255,.12); }
#ui .marcos-equipo.equipo-r41h.arrastrando-r41h { opacity: .85; }
#ui .equipo-r41h .titulo-equipo { display: flex; align-items: center; gap: 6px; margin: 0 -5px 1px; padding: 3px 8px; min-height: 20px;
  border-radius: 7px 7px 0 0; cursor: move; user-select: none; color: var(--acento-claro); text-shadow: 0 1px 1px rgba(0,0,0,.7);
  background: linear-gradient(rgba(var(--rgb-claro), .75), rgba(var(--rgb-panel), .55)); border-bottom: 1px solid rgba(var(--rgb-borde), .4); }
#ui .equipo-r41h .titulo-equipo span { flex: 1; }
#ui .equipo-r41h .asa-r41h { width: 20px; height: 8px; opacity: .5;
  background: radial-gradient(circle, rgba(var(--rgb-borde), 1) 1.1px, transparent 1.6px) 0 0 / 5px 4px; }
#ui .equipo-r41h .marco-socio { background: var(--panel-osc); border-color: var(--borde-suave); color: var(--texto); }
#ui .equipo-r41h .marco-socio:hover { border-color: var(--borde); }
#ui .equipo-r41h .marco-socio:not(.muerto) .fila b { color: var(--texto); }
#ui .equipo-r41h .marco-socio .fila span, #ui .equipo-r41h .marco-socio small { color: var(--tenue); }
#ui .equipo-r41h .marco-socio.elegido { border-color: var(--acento-claro); box-shadow: 0 0 6px rgba(var(--rgb-borde), .35); }
#ui .equipo-r41h .marco-socio .estrella-r41h { font-style: normal; color: var(--acento-claro); }

/* ================================================================ r41t (Claude, pedido de Franco: "Daily events also needs a
   fix on their buttons. Keep working on polishing."): Daily events (activities.js 28181) y el barrido de ventanas que
   todavia usaban arte fijo del original o colores sueltos. Mismo lenguaje que r41b / r41f (t41f-*): solo variables. */
/* ---- Daily events: cabecera fija, 9 filas a la vista como el original (28310 rows="9"), ni una cortada, GO! y ? del tema alineados en cada fila */
.dia41t .dia41t-cab, .dia41t .dia41t-fila { display: grid; grid-template-columns: 66px minmax(0, 1fr) 86px 86px 40px 128px 62px 70px; column-gap: 6px; align-items: center; }
.dia41t .dia41t-cab { margin: 0 9px 3px 0; padding: 0 6px; height: 24px; box-sizing: border-box; border-radius: 4px;
  border: 1px solid var(--borde-suave); background: linear-gradient(rgba(var(--rgb-claro), .95), rgba(var(--rgb-panel), .95));
  color: var(--acento-claro); font: 700 11px var(--fuente); text-shadow: 0 1px 1px rgba(0,0,0,.7); }
.dia41t .dia41t-cab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dia41t .dia41t-cab span:nth-child(n+7), .dia41t .dia41t-fila .dia41t-bt { text-align: center; justify-self: center; }
.dia41t .dia41t-cab span:nth-child(5), .dia41t .dia41t-fila .nivel { text-align: center; }
.dia41t .dia41t-lista { max-height: 308px; overflow-y: auto; scrollbar-gutter: stable; box-sizing: border-box;
  border: 1px solid var(--borde-suave); border-radius: 6px; background: rgba(var(--rgb-osc), .55); box-shadow: inset 0 1px 6px rgba(0,0,0,.45); }
.dia41t .dia41t-fila { position: relative; height: 34px; padding: 0 6px; box-sizing: border-box; font-size: 12px; color: var(--texto);
  border-bottom: 1px solid rgba(var(--rgb-borde), .13); }
.dia41t .dia41t-fila:nth-child(even) { background: rgba(var(--rgb-claro), .12); }
.dia41t .dia41t-fila:hover { background: rgba(var(--rgb-borde), .1); }
.dia41t .dia41t-fila > * { position: relative; }
.dia41t .dia41t-c { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 14px; word-break: break-word; }
.dia41t .dia41t-c.hora { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia41t .dia41t-fila.en-curso .dia41t-c.nombre { font-weight: 700; }
/* el evento en curso: tinte y raya del acento; la inscripcion abierta: solo la raya, mas tenue */
.dia41t .dia41t-fila.en-curso::before, .dia41t .dia41t-fila.previo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--acento-b), transparent 75%); opacity: .3; box-shadow: inset 3px 0 0 var(--acento); }
.dia41t .dia41t-fila.previo::before { opacity: .14; }
.dia41t .dia41t-fila.en-curso .nombre, .dia41t .dia41t-fila.en-curso .hora { color: var(--acento-claro); }
/* los botones de la fila: mismo alto (22 px) y centrados en su columna */
.dia41t .dia41t-bt { display: flex; align-items: center; justify-content: center; height: 100%; }
.t41f.dia41t button.t41f-b { position: static; height: 22px; }
.t41f.dia41t button.dia41t-ir { width: 54px; gap: 3px; padding: 0 5px 0 3px; }
.t41f.dia41t button.dia41t-ir b { font-weight: 800; letter-spacing: .3px; }
.t41f.dia41t button.dia41t-ir .ico-r41b { width: 14px; height: 14px; stroke-width: 2.2; }
.t41f.dia41t button.dia41t-ayuda { width: 26px; }
.t41f.dia41t button.dia41t-ayuda .ico-r41b { width: 15px; height: 15px; stroke-width: 2.1; }
.t41f.dia41t button.dia41t-ayuda.activo { color: var(--acento-texto); background: linear-gradient(var(--acento-a), var(--acento-b)); border-color: var(--acento-claro); }
.dia41t .dia41t-vacia { padding: 10px; }
/* la ayuda 28311 "Description (Daily events)" */
.dia41t-ayudav .dia41t-ayuda-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dia41t-ayudav .dia41t-ayuda-cab b { color: var(--acento-claro); }
.dia41t-ayudav .dia41t-ayuda-cab span { color: var(--tenue); font-size: 11px; white-space: nowrap; }
.dia41t-ayudav .dia41t-ayuda-txt { max-height: 160px; overflow-y: auto; padding: 6px 8px; font-size: 12px; line-height: 1.4; white-space: normal;
  border: 1px solid var(--borde-suave); border-radius: 6px; background: rgba(var(--rgb-osc), .55); }
/* ---- Trade (trade.js 3061): la luz de confirmado (antes w023_02 / w023_03) y el oro con el tema */
.cm41t-luz { flex: none; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; background: var(--ranura); border: 1px solid var(--ranura-borde);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.cm41t-luz.si { background: radial-gradient(circle at 40% 35%, var(--acento-claro), var(--acento-b)); border-color: var(--acento-claro);
  box-shadow: 0 0 6px var(--acento), inset 0 1px 0 rgba(255,255,255,.4); }
.cm-oro { color: var(--acento-claro); }
.cm-grilla .casilla { border-color: var(--ranura-borde); }
/* ---- Equip: los rotulos de las casillas vacias ("Accessory", "Off-hand") entran en la casilla */
#ui .casilla-equipo .vacia { font-size: 8px; letter-spacing: -.2px; padding: 1px; overflow: hidden; }
/* ---- candado de los tableros movibles (Olympus 24761, Holy Battlefield 24401/24411, 28315, 12900): icono del tema */
#ui .cand41t { display: grid; place-items: center; color: var(--borde); background: rgba(var(--rgb-osc), .75); border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--borde-suave); }
#ui .cand41t:hover { color: var(--acento-claro); }
#ui .cand41t.puesto { color: var(--acento-claro); outline: 1px solid var(--acento-claro); }
#ui .cand41t .ico-r41b { width: 11px; height: 11px; stroke-width: 2.4; }
/* ---- flechas de pagina con iconos del tema (Skill, Totem, Hairstyle Ticket): antes ◀ ▶ de texto */
#ui button.pag41t { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; color: var(--borde); }
#ui button.mini.pag41t { min-width: 24px; height: 20px; padding: 0 4px; }
#ui button.pag41t:hover:not(:disabled) { color: var(--acento-claro); }
#ui button.pag41t .ico-r41b { width: 14px; height: 14px; stroke-width: 2.5; }

/* ================================================================ r41u (Claude, pedido de Franco: "Daily events also needs a
   fix on their buttons. Keep working on polishing."): segundo barrido de la UI con Ocean / Ember / Sand (auditoria en
   game/tests/audit_ui_r41u.md). Mismo lenguaje que r41b / r41f / r41t: solo variables del tema. */
/* ---- los botones principales (y Quit / Discard) deshabilitados: antes el dorado pasado a gris (grayscale + opacidad) quedaba
   como un boton gris del original (GO de Angels GO!, Buy, Fuse, Manufacture, Set a stall, Create a league...); ahora son
   el boton comun del tema, apagado, con el filo del tema */
#ui button.principal:disabled, #ui button.peligro:disabled, #ui .opciones button.siguiente:disabled {
  background: linear-gradient(to top, rgba(0, 0, 0, .25) 1px, transparent 1px), linear-gradient(var(--boton-a), var(--boton-b));
  color: var(--tenue); border-color: var(--borde-suave); text-shadow: 0 1px 1px rgba(0, 0, 0, .5); --filo-corte: var(--borde-suave);
  filter: none; opacity: .6; }
/* ---- rotulos que no entraban en su boton del original (Card Book "Change") */
.t41f button.t41f-b.ajusta41u { font-size: 10px; letter-spacing: -.2px; padding: 0 1px; }
/* ---- pestanas que llenan el ancho (League War): el padding de .ventana .pestanas cortaba la activa ("War I...") */
#ui .ventana .pestanas.llenas button { padding: 3px 2px 3px 4px; font-size: 12px; letter-spacing: -.1px; text-overflow: clip; }
/* ---- League War: el contenido de cada pagina tiene su alto y se desplaza adentro (Intro pasaba por debajo de las pestanas) */
#ui .gl-pag { height: 256px; min-height: 0; display: flex; flex-direction: column; margin-bottom: 6px; }
#ui .gl-pag .gl-intro, #ui .gl-pag .gl-tabla { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
#ui .gl-pag .fila-botones { flex: none; }
/* ---- panel de muerte: antes azul marino y borde lila fijos */
.panel-muerte { background: rgba(var(--rgb-osc), .92); border-color: var(--borde); }
.panel-muerte b { color: var(--acento-claro); }
/* ---- Pet Amplify: las cabeceras y los atributos en una linea */
.amp-tabla th, .amp-tabla td:first-child { white-space: nowrap; }
.amp-tabla th { font-size: 11.5px; }
/* ---- Create a Little Angel: girar y genero son botones del tema (antes 2588/2589 y 2567/2570 teal) */
#ui .creacion-ao .bt-r41b.cr41u, #ui .girar .bt-r41b.cr41u { width: 40px; height: 24px; border-radius: 6px; }
#ui .bt-r41b.cr41u .ico-r41b { width: 16px; height: 16px; }
/* ---- Options: los iconos de cada fila (antes emoji) */
.op-ico .ico-r41b { display: inline-block; width: 16px; height: 16px; vertical-align: middle; color: var(--acento-claro); }
/* ---- Angels GO!: GO con el icono del tema, como GO! de Daily events */
#ui .angelsgo-fila button.ag41u-ir { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px 0 5px; }
#ui .angelsgo-fila button.ag41u-ir .ico-r41b { width: 13px; height: 13px; stroke-width: 2.2; }
#ui .angelsgo-fila button.ag41u-ir b { font-weight: 800; letter-spacing: .3px; }
/* ---- Item Mall, Fitting Room: girar con iconos del tema (antes 12607 / 12608) */
#ui .probador-botones button.pag41t { min-width: 26px; }
/* ---- Daily events: el "?" abierto quedaba amarillo sobre amarillo con el raton encima (el hover de .ico le ponia --acento-claro) */
.t41f.dia41t button.t41f-b.ico.dia41t-ayuda.activo, .t41f.dia41t button.t41f-b.ico.dia41t-ayuda.activo:hover:not(:disabled) { color: var(--acento-texto); }
/* r41ax: X del marco del objetivo (soltar el objetivo; tambien Esc) */
.marco-objetivo .x-objetivo-r41ax { background: none; border: 0; color: var(--tenue); font-size: 11px; line-height: 1; padding: 0 0 0 6px; margin: 0; }
.marco-objetivo .x-objetivo-r41ax:hover { color: var(--texto); }