/* Organizador — hoja de estilos única.
   ────────────────────────────────────
   Orden del archivo, de arriba abajo:

     1. base y variables      6. tablero (y vista)
     2. temas y fondos        7. gente
     3. estructura            8. ajustes, acceso, entrada
     4. piezas comunes        9. pantallas chicas
     5. builds

   Dos reglas para que no se vuelva a descuadrar:
   nada se posiciona en absoluto salvo lo que flota por encima de la página
   (menús, globos, avisos), y todas las medidas salen de las variables de
   abajo en vez de escribirse sueltas. */


/* ═══ 1. base y variables ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* Cualquier regla nuestra con display (por ejemplo .modal-cuerpo, que es
   flex) le ganaba en especificidad al display:none que el navegador le da a
   [hidden], y el panel escondido se dibujaba igual encima del otro. */
[hidden] { display: none !important; }

:root {
  /* Arial en todas partes: es la que pediste y está en cualquier máquina,
     así que la página se ve igual en la tuya que en la de los demás. */
  --fuente: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --r-chico: 4px;
  --r: 8px;
  --r-grande: 14px;

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  --lateral: 208px;
  --ancho-voz: 250px;

  --transicion: 120ms ease;

  /* colores por tipo de rol, iguales en toda la página */
  --tanque: #35f0ff;
  --dps: #ff4d90;
  --healer: #48ffa8;
  --soporte: #ffb03d;

  --peligro: #ff5470;
  --bien: #48ffa8;
  --alerta: #ffb03d;
}

/* fondo por defecto: noche */
:root, :root[data-fondo="noche"] {
  --fondo: #0a0d14;
  --panel: #121722;
  --panel-alto: #19202e;
  --linea: #26304180;
  --linea-fuerte: #33405a;
  --texto: #e8edf7;
  --tenue: #8b97ad;
}

:root[data-fondo="grafito"] { --fondo:#15171a; --panel:#1e2126; --panel-alto:#262a31; --linea:#33383f80; --linea-fuerte:#454b55; --texto:#eceef1; --tenue:#969ba4; }
:root[data-fondo="pizarra"] { --fondo:#11161c; --panel:#1a212a; --panel-alto:#222b36; --linea:#2c374480; --linea-fuerte:#3b4859; --texto:#e6ebf2; --tenue:#8c99a8; }
:root[data-fondo="carbon"]  { --fondo:#0c0c0d; --panel:#161618; --panel-alto:#1e1e21; --linea:#2a2a2e80; --linea-fuerte:#3a3a40; --texto:#ededf0; --tenue:#93939c; }
:root[data-fondo="tinta"]   { --fondo:#0b0f1e; --panel:#141a2e; --panel-alto:#1c243c; --linea:#2a334f80; --linea-fuerte:#3a4568; --texto:#e7ebf7; --tenue:#8b95b2; }
:root[data-fondo="vino"]    { --fondo:#160b10; --panel:#22131a; --panel-alto:#2d1a23; --linea:#3d222e80; --linea-fuerte:#54303f; --texto:#f4e9ee; --tenue:#b08d9b; }
:root[data-fondo="bosque"]  { --fondo:#0a1310; --panel:#121e19; --panel-alto:#1a2921; --linea:#25382e80; --linea-fuerte:#334c3f; --texto:#e6f2ea; --tenue:#89a596; }
:root[data-fondo="oceano"]  { --fondo:#07131a; --panel:#0f1f2a; --panel-alto:#152a38; --linea:#1f3a4a80; --linea-fuerte:#2c4f66; --texto:#e4f0f7; --tenue:#83a3b5; }

/* Dos fondos claros. La sombra reemplaza al brillo: sobre blanco el neón no
   se lee, así que en claro el acento se usa lleno y no como resplandor. */
:root[data-fondo="claro"] { --fondo:#eef1f6; --panel:#ffffff; --panel-alto:#f5f7fb; --linea:#d2d9e4; --linea-fuerte:#b3bece; --texto:#151a23; --tenue:#5c6779; --claro:1; }
:root[data-fondo="papel"] { --fondo:#f3f0e9; --panel:#fffdf8; --panel-alto:#f7f4ec; --linea:#ded8ca; --linea-fuerte:#c2b9a5; --texto:#201c14; --tenue:#6b6353; --claro:1; }

/* acento */
:root, :root[data-tema="cian"] { --neon: #35f0ff; }
:root[data-tema="turquesa"] { --neon:#2ee6c4; }
:root[data-tema="lima"]     { --neon:#b6ff3d; }
:root[data-tema="verde"]    { --neon:#48ff8b; }
:root[data-tema="ambar"]    { --neon:#ffc93d; }
:root[data-tema="naranja"]  { --neon:#ff8c3d; }
:root[data-tema="rojo"]     { --neon:#ff5470; }
:root[data-tema="rosa"]     { --neon:#ff6fb3; }
:root[data-tema="magenta"]  { --neon:#ff4dd8; }
:root[data-tema="violeta"]  { --neon:#b06bff; }
:root[data-tema="indigo"]   { --neon:#7b8cff; }
:root[data-tema="azul"]     { --neon:#3da5ff; }
:root[data-tema="hielo"]    { --neon:#9fd8ff; }
:root[data-tema="oro"]      { --neon:#e8c46a; }

html { color-scheme: dark; }
:root[data-fondo="claro"], :root[data-fondo="papel"] { color-scheme: light; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  font: 400 15px/1.5 var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  /* Sin esto, hacer zoom hacía que el texto se reajustara solo y las
     columnas del tablero quedaran de anchos distintos. */
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/* ── imagen de fondo de cada persona ──────────────────────────────────────
   La imagen va SOLO detrás de la página, nunca dentro de los paneles, y
   siempre con un velo del color del fondo elegido encima: sin eso, las
   líneas de 1px y los nombres se vuelven ilegibles sobre una foto.

   Va en un ::before fijo en vez de en el background del body porque así no
   se mueve al hacer scroll ni se repite en páginas largas como el tablero.
   El velo lo regula cada uno; por defecto 70%. */
:root[data-imagen="si"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--imagen);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;   /* que nunca se coma un clic ni un arrastre */
}
:root[data-imagen="si"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--fondo);
  opacity: var(--velo, .7);
  pointer-events: none;
}
/* Los paneles se dejan traslúcidos para que se note la imagen detrás, pero
   con desenfoque: el texto sigue sobre una base pareja y se lee igual. */
:root[data-imagen="si"] .lateral,
:root[data-imagen="si"] .party,
:root[data-imagen="si"] .banca,
:root[data-imagen="si"] .tarjeta {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(6px);
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0; }

a { color: var(--neon); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
  border-radius: var(--r-chico);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: 99px;
  border: 3px solid var(--fondo);
}


/* ═══ 2. estructura ═════════════════════════════════════════════════════ */

.lateral {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-3);
  background: var(--panel);
  border-right: 1px solid var(--linea);
  overflow-y: auto;
  z-index: 30;
}

.marca {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--texto);
  padding: 0 var(--esp-2);
}
.marca:hover { text-decoration: none; }
.marca span { color: var(--neon); }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav a {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 7px var(--esp-2);
  border-radius: var(--r);
  color: var(--texto);
  font-weight: 700;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: background var(--transicion);
}
.nav a:hover { background: var(--panel-alto); text-decoration: none; }
.nav a svg { width: 19px; height: 19px; flex: none; }
.nav a b { min-width: 0; font-weight: 700; }
.nav a small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--tenue);
  line-height: 1.3;
}
.nav a[aria-current="page"] {
  background: var(--panel-alto);
  border-left-color: var(--neon);
  color: var(--neon);
}
.nav a[aria-current="page"] small { color: var(--tenue); }

.lateral-pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--linea);
}

/* Invitar el bot. Se lee de una pero no compite con la navegación: va en el
   pie de la barra lateral, ancho completo y con el color de acento solo en
   el borde y el texto, no de fondo. Así se ve sin gritar. */
.invitar {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
  padding: 9px var(--esp-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--neon);
  border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--neon) 10%, transparent);
  transition: background var(--transicion), border-color var(--transicion);
}
.invitar:hover {
  background: color-mix(in srgb, var(--neon) 20%, transparent);
  border-color: var(--neon);
}
.invitar-mas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex: none;
  font-size: 16px;
  line-height: 1;
  border-radius: 99px;
  background: color-mix(in srgb, var(--neon) 22%, transparent);
}

.link-discord { font-size: 12px; color: var(--tenue); padding: 0 var(--esp-2); }
.link-discord:hover { color: var(--neon); }

.estado {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--esp-2);
  font-size: 12px;
  color: var(--tenue);
}
.estado i {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--peligro);
  flex: none;
}
.estado[data-vivo="si"] i {
  background: var(--bien);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bien) 60%, transparent);
  animation: pulso 2.2s infinite;
}
@keyframes pulso {
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.cuenta { display: flex; flex-direction: column; gap: var(--esp-2); }
.cuenta .yo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 13px;
  padding: 0 var(--esp-2);
  min-width: 0;
}
.cuenta .yo img { width: 22px; height: 22px; border-radius: 99px; flex: none; }
.cuenta .yo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* el contenido scrollea solo, la barra lateral se queda quieta */
.principal {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  padding-bottom: var(--esp-6);
}
/* el tablero llega hasta la orilla: es la única pantalla que lo necesita */
.principal.al-borde { padding: var(--esp-3) var(--esp-3) var(--esp-4); gap: var(--esp-3); }

.titulo-seccion h1 { letter-spacing: -.4px; }
.titulo-seccion p { color: var(--tenue); font-size: 13px; margin-top: 2px; }

.columna { display: flex; flex-direction: column; gap: var(--esp-3); }

.abrir-menu {
  display: none;
  position: fixed;
  top: 10px; left: 10px;
  z-index: 60;
  width: 40px; height: 40px;
  padding: 11px 9px;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  cursor: pointer;
}
.abrir-menu span { display: block; height: 2px; background: var(--texto); border-radius: 2px; }

.velo-menu { display: none; }


/* ═══ 3. piezas comunes ═════════════════════════════════════════════════ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font: 700 13px var(--fuente);
  color: var(--texto);
  background: var(--panel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion);
}
.boton:hover:not(:disabled) { border-color: var(--neon); color: var(--neon); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton.principal { background: var(--neon); border-color: var(--neon); color: #08111a; }
.boton.principal:hover:not(:disabled) { color: #08111a; filter: brightness(1.1); }
.boton.peligro:hover:not(:disabled) { border-color: var(--peligro); color: var(--peligro); }
.boton.ancho { width: 100%; }

.icono-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  font: 700 15px/1 var(--fuente);
  color: var(--tenue);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}
.icono-btn:hover:not(:disabled) { color: var(--neon); border-color: var(--neon); }
.icono-btn.peligro:hover:not(:disabled) { color: var(--peligro); border-color: var(--peligro); }
.icono-btn:disabled { opacity: .3; cursor: not-allowed; }

input[type="text"], input[type="search"], input[type="number"], input[type="url"],
input[type="datetime-local"], textarea, select {
  font: 400 14px var(--fuente);
  color: var(--texto);
  background: var(--panel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
}
input::placeholder, textarea::placeholder { color: var(--tenue); }
input:focus, textarea:focus, select:focus { border-color: var(--neon); outline: none; }
textarea { resize: vertical; line-height: 1.5; }

/* El <select> nativo, con la flecha dibujada por nosotros. La versión
   anterior lo reemplazaba por una lista propia de 160 líneas que se
   recortaba dentro de las parties; el nativo nunca se recorta. */
select {
  appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--panel); color: var(--texto); }

label.campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
label.campo > span { font-weight: 700; }
label.campo small { color: var(--tenue); font-size: 12px; }

/* casilla con su texto al lado */
label.marca-si {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
input[type="checkbox"] { accent-color: var(--neon); width: 15px; height: 15px; cursor: pointer; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: var(--esp-4);
}

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px var(--esp-4);
  text-align: center;
  color: var(--tenue);
  background: var(--panel);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-grande);
}
.vacio strong { color: var(--texto); font-size: 16px; }
.vacio p { max-width: 42ch; font-size: 13px; }

.aviso { color: var(--tenue); font-size: 13px; padding: var(--esp-3); }

.cinta {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 10px var(--esp-4);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--alerta) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--alerta) 40%, transparent);
  font-size: 13px;
}

/* ventanas modales ------------------------------------------------------ */
/* <dialog> nativo: el navegador ya resuelve Escape, el foco y el fondo.
   Antes cada ventana traía su propio velo y su propia tecla Escape. */
dialog {
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-grande);
  background: var(--panel);
  color: var(--texto);
  width: min(560px, calc(100vw - 24px));
  max-height: min(80dvh, 720px);
  overflow: hidden;
  flex-direction: column;
}
dialog[open] { display: flex; }
dialog::backdrop { background: #000a; backdrop-filter: blur(2px); }
dialog.ancho { width: min(760px, calc(100vw - 24px)); }

/* El de equipamiento lleva alto FIJO, no max-height: si no, la caja se
   achicaba y se agrandaba con cada letra que escribías, según cuántos
   objetos quedaran, y el botón "Listo" te bailaba debajo del mouse. */
#dlg-item[open] {
  height: min(80dvh, 720px);
  display: flex;
  flex-direction: column;
}
#dlg-item .modal-cuerpo { min-height: 0; }
#dlg-item .resultados { flex: 1; overflow-y: auto; }

.modal-cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--linea);
  flex: none;
}
.modal-cabecera h2 { flex: 1; min-width: 0; }
.modal-cuerpo {
  padding: var(--esp-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  flex: 1;
}
.modal-cuerpo.sin-aire { padding: 0; gap: 0; }
.modal-pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--linea);
  flex: none;
}
.modal-pie .izquierda { margin-right: auto; }

.pestanas { display: flex; gap: var(--esp-1); }
.pestanas button {
  padding: 6px 12px;
  font: 700 13px var(--fuente);
  color: var(--tenue);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected="true"] {
  color: var(--neon);
  border-color: var(--linea-fuerte);
  background: var(--panel-alto);
}

/* descripción flotante -------------------------------------------------- */
.tip {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  max-width: 300px;
  padding: 7px 10px;
  background: var(--panel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  box-shadow: 0 8px 24px #0007;
  font-size: 12.5px;
  pointer-events: none;
}
.tip b { display: block; color: var(--neon); }
.tip i { display: block; margin-top: 3px; font-style: normal; color: var(--tenue); }

/* avisos de la esquina -------------------------------------------------- */
.avisos {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  pointer-events: none;
}
.aviso-flotante {
  padding: 9px 14px;
  border-radius: var(--r);
  background: var(--panel-alto);
  border-left: 3px solid var(--neon);
  box-shadow: 0 10px 30px #0008;
  font-size: 13px;
  max-width: 320px;
  animation: entrar 160ms ease;
}
.aviso-flotante.alerta { border-left-color: var(--alerta); }
.aviso-flotante.bien   { border-left-color: var(--bien); }
.aviso-flotante.yendose { opacity: 0; transition: opacity 500ms; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* fichas de rol --------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 12px;
  background: var(--panel-alto);
  border: 1px solid var(--tipo, var(--linea-fuerte));
  color: var(--texto);
}
.chip i { font-style: normal; color: var(--tipo, var(--tenue)); font-weight: 700; }
.chip img { width: 17px; height: 17px; }


/* ═══ 4. builds ═════════════════════════════════════════════════════════ */

.taller {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--esp-4);
  align-items: start;
}

.comps { display: flex; flex-direction: column; gap: var(--esp-2); }
.comps h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--tenue);
  margin-top: var(--esp-2);
}
.comp-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-left: 2px solid transparent;
  border-radius: var(--r);
  color: var(--texto);
  font: 700 13.5px var(--fuente);
  cursor: pointer;
}
.comp-item:hover { border-color: var(--linea-fuerte); }
.comp-item[aria-selected="true"] { border-left-color: var(--neon); background: var(--panel-alto); }
.comp-item small { display: block; font-weight: 400; font-size: 11.5px; color: var(--tenue); }
.comp-item .marca-comp {
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--alerta);
  margin-left: 5px;
}

.notas { display: flex; flex-direction: column; gap: 5px; margin-top: var(--esp-2); }
.notas h2 { margin: 0; }
.notas-estado { font-size: 11px; color: var(--tenue); min-height: 14px; }

.comp-cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-bottom: var(--esp-3);
}
.titulo-editable {
  flex: 1;
  min-width: 180px;
  font: 700 18px var(--fuente);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 5px 8px;
}
.titulo-editable:hover:not([readonly]) { border-color: var(--linea); }
.solo-lectura { font-size: 12px; color: var(--tenue); }

/* La tabla de roles es un grid: una columna por ranura, todas del mismo
   ancho, así los iconos quedan alineados fila a fila. */
.tabla {
  --cols: 8;
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  background: var(--panel);
}
.encabezados, .fila {
  display: grid;
  grid-template-columns: 30px minmax(130px, 1fr) 104px repeat(var(--cols), 42px) 62px;
  align-items: center;
  gap: var(--esp-1);
  padding: 5px var(--esp-3);
  min-width: max-content;
}
.encabezados {
  border-bottom: 1px solid var(--linea);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--tenue);
  text-align: center;
  position: sticky;
  top: 0;
}
.encabezados .izq { text-align: left; }

.fila { border-bottom: 1px solid var(--linea); }
.fila:last-child { border-bottom: 0; }
.fila.encima { background: color-mix(in srgb, var(--neon) 10%, transparent); }
.fila.arrastrando { opacity: .4; }

.fila-num {
  font-size: 12px;
  color: var(--tenue);
  text-align: center;
  cursor: grab;
  border-left: 2px solid var(--tipo, transparent);
  padding-left: 6px;
}
.fila > input[type="text"] { background: transparent; border-color: transparent; }
.fila > input[type="text"]:hover { border-color: var(--linea); }

.selector-tipo {
  font: 700 11px var(--fuente);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tipo, var(--texto));
  background: transparent;
  border-color: transparent;
  padding: 5px 22px 5px 6px;
  background-position: calc(100% - 11px) center, calc(100% - 7px) center;
}
.selector-tipo:hover { border-color: var(--linea); }

.ranura {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding: 0;
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
}
.ranura:hover { border-color: var(--neon); }
.ranura img { width: 34px; height: 34px; }
.ranura.libre::after { content: "+"; color: var(--tenue); font-size: 15px; }
/* un punto abajo a la derecha: verde si la habilidad está anotada, ámbar
   si la pieza lleva una y falta */
.ranura.con-habilidad::after, .ranura.falta-habilidad::after {
  content: "";
  position: absolute;
  right: 2px; bottom: 2px;
  width: 5px; height: 5px;
  border-radius: 99px;
}
.ranura.con-habilidad::after { background: var(--bien); }
.ranura.falta-habilidad::after { background: var(--alerta); }

.acciones-fila { display: flex; gap: var(--esp-1); justify-content: flex-end; }

.acciones-abajo { display: flex; gap: var(--esp-2); margin-top: var(--esp-3); flex-wrap: wrap; }

/* selector de item y habilidades ---------------------------------------- */
.buscador-modal { padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linea); }

.resultados {
  display: grid;
  /* auto-fill y no auto-fit: con auto-fit, cuando quedaban tres resultados
     las columnas vacías se colapsaban y las tres fichas se estiraban a
     media pantalla. Con auto-fill el tamaño no cambia nunca. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
  gap: var(--esp-1);
  padding: var(--esp-3);
  overflow-y: auto;
}
.item-opcion {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  /* alto fijo: con tres resultados las filas se estiraban y quedaban
     cuadrados enormes con el icono flotando en el medio */
  min-height: 48px;
  padding: 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--texto);
  font: 400 12.5px var(--fuente);
  text-align: left;
}
.item-opcion:hover { background: var(--panel-alto); border-color: var(--neon); }
.item-opcion img { width: 36px; height: 36px; flex: none; }
.item-opcion .tier {
  font-size: 10px;
  font-weight: 700;
  color: var(--neon);
  flex: none;
}

.fila-tecla {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border-bottom: 1px solid var(--linea);
}
.fila-tecla:last-child { border-bottom: 0; }
.tecla-letra {
  flex: none;
  width: 52px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  color: var(--neon);
}
.tecla-letra.pasiva { font-size: 9.5px; letter-spacing: .4px; color: var(--tenue); }
.tecla-opciones { display: flex; flex-wrap: wrap; gap: var(--esp-1); flex: 1; }

/* Fichas chicas, sin la descripción: con seis hechizos por tecla, cada
   opción alta obligaba a scrollear para ver las últimas. El detalle queda
   en el globo al pasar el cursor. */
.hechizo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  max-width: 168px;
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--texto);
  font: 400 12px var(--fuente);
  text-align: left;
}
.hechizo:hover { border-color: var(--neon); }
.hechizo.elegido { border-color: var(--neon); background: color-mix(in srgb, var(--neon) 14%, var(--panel-alto)); }
.hechizo img { width: 30px; height: 30px; flex: none; }
.hechizo b {
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hechizo span { min-width: 0; overflow: hidden; }
.hechizo i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usar-siempre {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--esp-2) var(--esp-3);
  background: color-mix(in srgb, var(--neon) 8%, var(--panel-alto));
  border: 1px solid var(--linea-fuerte);
  border-bottom: 0;
  color: var(--texto);
  font: 400 12px var(--fuente);
  cursor: pointer;
}
.usar-siempre:hover { border-color: var(--neon); }
.usar-siempre b { color: var(--neon); }
.usar-siempre i { font-style: normal; color: var(--tenue); margin-left: 6px; }

.falta-tecla {
  margin: 0 var(--esp-3) var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--alerta) 14%, transparent);
  font-size: 12.5px;
}


/* ═══ 5. tablero (y vista del gremio) ═══════════════════════════════════ */

.barra-tablero {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  padding: var(--esp-2) var(--esp-3);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}
.barra-tablero .separador { flex: 1; }
.barra-tablero select { width: auto; max-width: 260px; }
#fecha { width: auto; }

.modos { display: flex; border: 1px solid var(--linea-fuerte); border-radius: var(--r); overflow: hidden; }
.modos button {
  padding: 7px 12px;
  font: 700 12px var(--fuente);
  background: transparent;
  border: 0;
  color: var(--tenue);
  cursor: pointer;
}
.modos button[aria-selected="true"] { background: var(--panel-alto); color: var(--neon); }

/* Las parties ocupan todo el ancho y la columna de voz queda a la derecha,
   separada del borde por el padding de .principal. */
.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-voz);
  gap: var(--esp-3);
  align-items: start;
}

.parties { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
/* En compacto entran exactamente dos parties por línea; en amplio una sola,
   para que las habilidades tengan lugar. Son dos columnas fijas y no
   auto-fit: con auto-fit, una sola party se estiraba a lo ancho de todo. */
body.modo-compacto .parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
/* La fila tiene que achicarse o no entran dos parties: rol más angosto,
   iconos de 22 y menos aire a los costados. */
body.modo-compacto .slot {
  grid-template-columns: 20px minmax(72px, 1fr) minmax(0, auto) auto minmax(60px, 120px) 22px;
  gap: var(--esp-1);
  padding: 3px var(--esp-2);
}
/* si la pantalla no da, se recortan los iconos antes que desbordar la caja */
body.modo-compacto .slot-equipo { min-width: 0; overflow: hidden; }
body.modo-compacto .slot-items img,
body.modo-compacto .slot-hueco { width: 22px; height: 22px; }
body.modo-compacto .slot-rol { font-size: 11px; padding: 3px 4px; }
body.modo-compacto .slot-jugador { font-size: 12px; padding: 3px 5px; }
body.modo-compacto .party-cabecera { padding: var(--esp-2); }
body.modo-compacto .party-comp { max-width: 150px; }

.party {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  overflow: hidden;
  min-width: 0;
}

.party-cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--linea);
  position: relative;
}
.party-nombre {
  flex: 1;
  min-width: 60px;
  font: 700 14px var(--fuente);
  background: transparent;
  border-color: transparent;
  padding: 4px 6px;
}
.party-nombre:hover { border-color: var(--linea); }
.party-comp {
  width: auto;
  max-width: 190px;
  font-size: 12px;
  padding: 5px 26px 5px 8px;
  background-position: calc(100% - 13px) center, calc(100% - 9px) center;
}
.party-cuenta { font-size: 12px; color: var(--tenue); flex: none; }
.party-ausentes { font-size: 12px; color: var(--alerta); flex: none; }
/* barra de llenado, pegada al borde inferior de la cabecera */
.party-progreso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--linea);
}
.party-progreso::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--llenado, 0%);
  background: var(--neon);
  transition: width 200ms ease;
}

/* Una fila de la party. Cada columna tiene su lugar fijo: número, rol,
   equipo, habilidades, nombre, quitar.

   Cada celda dice en qué columna va. Es imprescindible: cuando una celda se
   esconde (las habilidades en compacto) no genera caja, y sin esto las de
   atrás se corrían un lugar — por eso la × quedaba en el medio de la fila y
   el nombre se estiraba. Vista dibuja el mismo .slot pero sin la ×, así que
   se arregla igual. */
.slot {
  display: grid;
  /* El rol es la columna elástica y el nombre queda acotado: al revés,
     el recuadro de "vacío" se comía todo el ancho sobrante y los roles
     con nombre largo se cortaban a los 112px. */
  grid-template-columns: 24px minmax(112px, 1fr) auto auto minmax(90px, 200px) 26px;
  align-items: center;
  gap: var(--esp-2);
  padding: 3px var(--esp-3);
  border-bottom: 1px solid var(--linea);
  border-left: 2px solid var(--tipo, transparent);
}
.slot-num     { grid-column: 1; }
.slot-rol     { grid-column: 2; }
.slot-equipo  { grid-column: 3; }
.slot-habs    { grid-column: 4; }
.slot-jugador { grid-column: 5; }
.slot > .icono-btn { grid-column: 6; justify-self: end; }
.slot:last-child { border-bottom: 0; }
.slot.encima { background: color-mix(in srgb, var(--neon) 12%, transparent); }
.slot.le-sirve { background: color-mix(in srgb, var(--bien) 9%, transparent); }
.slot.no-le-sirve { opacity: .4; }

.slot-num { font-size: 11px; color: var(--tenue); text-align: center; }

.slot-rol {
  font: 700 12px var(--fuente);
  min-width: 0;      /* sin esto no se encoge y desborda la fila */
  color: var(--tipo, var(--texto));
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-chico);
  padding: 4px 6px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-rol:hover { border-color: var(--neon); }
.slot-rol.sin-rol { color: var(--tenue); font-weight: 400; font-style: italic; }

.slot-items { display: flex; gap: 2px; }
.slot-items img, .slot-hueco { width: 26px; height: 26px; flex: none; }
.slot-hueco { border: 1px dashed var(--linea); border-radius: var(--r-chico); }

/* Una celda por tecla, siempre las mismas y en el mismo orden: si una está
   vacía igual se dibuja, para que las filas queden alineadas en columna. */
.slot-habs { display: grid; grid-template-columns: repeat(var(--n-habs, 6), 26px); gap: 2px; }
.slot-habs span {
  position: relative;
  width: 26px; height: 26px;
  border-radius: var(--r-chico);
}
.slot-habs span.vacia { border: 1px dashed var(--linea); opacity: .5; }
.slot-habs img { width: 26px; height: 26px; }
.slot-habs b {
  position: absolute;
  right: -1px; bottom: -2px;
  font-size: 8px;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 2px;
  background: var(--fondo);
  color: var(--neon);
}
body.modo-compacto .slot-habs { display: none; }

.slot-jugador {
  font-size: 13px;
  min-width: 0;
  padding: 4px 7px;
  border-radius: var(--r-chico);
  border: 1px dashed var(--linea);
  color: var(--tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* mismo motivo que en .ficha: arrastrar no tiene que pintar el nombre */
  user-select: none;
  -webkit-user-select: none;
}
.slot-jugador.lleno { cursor: grab; }
.slot-jugador.lleno:active { cursor: grabbing; }
.slot-jugador.lleno {
  border-style: solid;
  border-color: var(--linea-fuerte);
  background: var(--panel-alto);
  color: var(--texto);
  font-weight: 700;
  cursor: grab;
}
.slot-jugador.ausente { border-color: var(--alerta); color: var(--alerta); }
.slot-jugador.fuera-de-rol { border-style: dotted; border-color: var(--alerta); }
.slot-jugador .alerta { font-style: normal; margin-right: 3px; }

/* columna de voz -------------------------------------------------------- */
.banca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: var(--esp-3);
  position: sticky;
  top: var(--esp-3);
  max-height: calc(100dvh - var(--esp-5));
}
.banca.soltar-aqui { border-color: var(--neon); }
.banca-titulo { display: flex; align-items: baseline; gap: var(--esp-2); }
.banca-titulo h2 { flex: 1; }
.banca-titulo b { color: var(--neon); }
.banca-pendientes { font-size: 12px; color: var(--alerta); }
.banca-pendientes.todos { color: var(--bien); }
.banca-lista { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }

.ficha {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 4px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--panel-alto);
  cursor: grab;
  font-size: 13px;
  /* Sin esto, al empezar a arrastrar el navegador seleccionaba el nombre
     en vez de levantar la ficha, y quedabas pintando texto azul. */
  user-select: none;
  -webkit-user-select: none;
}
.ficha:active { cursor: grabbing; }
.ficha:hover { border-color: var(--neon); }
.ficha[aria-pressed="true"] { border-color: var(--neon); background: color-mix(in srgb, var(--neon) 16%, var(--panel-alto)); }
.ficha.ubicado { opacity: .45; }
.ficha img { width: 22px; height: 22px; border-radius: 99px; flex: none; }
.ficha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* elegir el rol de un lugar --------------------------------------------- */
.lista-roles { display: flex; flex-direction: column; }
.grupo-roles {
  padding: var(--esp-2) var(--esp-4) 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--tenue);
}
.rol-opcion {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  padding: 6px var(--esp-4);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--tipo, transparent);
  color: var(--texto);
  font: 400 13px var(--fuente);
  text-align: left;
  cursor: pointer;
}
.rol-opcion:hover { background: var(--panel-alto); }
.rol-opcion b { flex: 1; min-width: 0; }
.rol-opcion .orden { font-style: normal; font-size: 11px; color: var(--tenue); width: 14px; }
.rol-opcion .mini { display: flex; gap: 2px; }
.rol-opcion .mini img, .rol-opcion .mini-icono { width: 22px; height: 22px; }

/* vista del gremio ------------------------------------------------------ */
.vista-cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}
.vista-cabecera h1 { flex: 1; min-width: 160px; }
.mi-lugar {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--neon) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--neon) 40%, transparent);
  font-size: 14px;
}
.mi-lugar b { color: var(--neon); }


/* ═══ 6. gente ══════════════════════════════════════════════════════════ */

.filtros-gente { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.filtros-gente select { width: auto; min-width: 190px; font-weight: 700; }
.filtros-gente input { flex: 1; min-width: 160px; }
.cuenta-gente { font-size: 12px; color: var(--tenue); flex: none; }

.persona {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr auto auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}
.persona-nombre { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.persona-roles { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.sin-roles { font-size: 12px; color: var(--tenue); font-style: italic; }


/* ═══ 7. ajustes, acceso y entrada ══════════════════════════════════════ */

.ajuste { display: flex; flex-direction: column; gap: var(--esp-2); }
.ajuste > label { font-weight: 700; font-size: 14px; }
.ajuste small { color: var(--tenue); font-size: 12px; }
.ajuste .linea { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }

/* el link ocupa lo que sobra; los dos botones no se estiran */
.fila-imagen { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.fila-imagen input { flex: 1; min-width: 220px; }
.fila-imagen .boton { flex: none; }

.ajuste input[type="range"] {
  width: min(320px, 100%);
  accent-color: var(--neon);
  padding: 0;
}

.seccion {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--linea);
}

.roles-elegidos { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.rol-marca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 10px;
  border-radius: 99px;
  background: var(--panel-alto);
  border: 1px solid var(--linea-fuerte);
  font-size: 12.5px;
}
.rol-marca button {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 0; border-radius: 99px;
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
  font-size: 13px;
}
.rol-marca button:hover { color: var(--peligro); }

/* buscador con sugerencias debajo */
.buscar-rol { position: relative; max-width: 340px; }
.sugerencias {
  position: absolute;
  top: calc(100% + 3px); left: 0; right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  box-shadow: 0 10px 26px #0007;
}
.sugerencias:empty { display: none; }
.sugerencias button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--texto);
  font: 400 13px var(--fuente);
  cursor: pointer;
}
.sugerencias button:hover { background: var(--panel); color: var(--neon); }

.muestras { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.muestra {
  width: 30px; height: 30px;
  border-radius: var(--r);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.muestra[aria-pressed="true"] { border-color: var(--texto); }
.muestra-fondo { width: 46px; }

.guardado { font-size: 12px; color: var(--bien); }

/* portada --------------------------------------------------------------- */
body.portada {
  grid-template-columns: 1fr;
  place-items: center;
  padding: var(--esp-5);
}
.portada-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  text-align: center;
  max-width: 46ch;
}
.portada-caja .marca { font-size: 34px; letter-spacing: -1px; }
.portada-caja p { color: var(--tenue); }
.portada-caja small { color: var(--tenue); font-size: 12px; }

/* ayuda ----------------------------------------------------------------- */
.ayuda { max-width: 70ch; display: flex; flex-direction: column; gap: var(--esp-4); }
.ayuda h2 { margin-top: var(--esp-3); }
.ayuda p, .ayuda li { color: var(--tenue); font-size: 14px; }
.ayuda strong { color: var(--texto); }
.ayuda ul, .ayuda ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ayuda kbd {
  font: 700 12px var(--fuente);
  background: var(--panel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  padding: 1px 5px;
  color: var(--texto);
}


/* ═══ 8. pantallas chicas ═══════════════════════════════════════════════ */

/* El tablero necesita más ancho que el resto: la voz baja antes. */
@media (max-width: 1150px) {
  .tablero { grid-template-columns: 1fr; }
  .banca { position: static; max-height: 300px; }
}

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }

  .abrir-menu { display: flex; }

  /* la barra pasa a ser un cajón que entra desde la izquierda */
  .lateral {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 250px;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    box-shadow: 0 0 40px #000a;
  }
  body.menu-abierto .lateral { transform: none; }
  body.menu-abierto .velo-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: #0009;
  }

  .principal { padding: 60px var(--esp-3) var(--esp-5); }
  .principal.al-borde { padding: 60px var(--esp-2) var(--esp-4); }

  .taller { grid-template-columns: 1fr; }
  .persona { grid-template-columns: 1fr auto; }
  .persona-roles { grid-column: 1 / -1; }

  /* En el celular el equipo y las habilidades no entran: quedan el rol y
     el nombre, que es lo que se toca durante el evento. Como las celdas
     tienen su columna fija, hay que reasignarlas acá también. */
  body.modo-compacto .parties { grid-template-columns: 1fr; }
  .slot,
  body.modo-compacto .slot { grid-template-columns: 22px minmax(0, 1fr) minmax(80px, 130px) 26px; }
  .slot-equipo, .slot-habs { display: none; }
  .slot-rol { grid-column: 2; }
  .slot-jugador { grid-column: 3; }
  .slot > .icono-btn { grid-column: 4; }
  .barra-tablero select { max-width: 100%; flex: 1; }
  .avisos { left: var(--esp-3); right: var(--esp-3); }
  .aviso-flotante { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* el usuario apagó las animaciones en Ajustes */
:root.sin-animaciones *, :root.sin-animaciones *::before, :root.sin-animaciones *::after {
  animation-duration: 1ms !important;
  transition-duration: 1ms !important;
}

/* ── panel del dueño ──────────────────────────────────────────────────────
   Solo se usa en /panel. Va al final para no mezclarse con lo que ve todo
   el mundo: si algún día el panel se saca, se borra este bloque y listo. */

.panel-seccion + .panel-seccion { margin-top: var(--esp-4); }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--esp-3);
}
.dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--esp-3);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--panel-alto);
}
.dato-valor { font-size: 22px; font-weight: 700; line-height: 1.1; }
.dato-titulo { font-size: 12px; color: var(--tenue); }
.dato small { font-size: 11px; color: var(--tenue); }
.dato.alerta { border-color: var(--peligro); }
.dato.alerta .dato-valor { color: var(--peligro); }

/* la tabla puede no entrar en pantallas chicas: scrollea sola en vez de
   desbordar y romper el ancho de la página */
.tabla-cont { overflow-x: auto; }
.tabla-cont .tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-cont th, .tabla-cont td {
  padding: 6px var(--esp-2);
  text-align: left;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.tabla-cont th { color: var(--tenue); font-size: 11px; text-transform: uppercase; }

.pastilla {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--linea);
}
.estado-activa   { color: var(--bien);   border-color: var(--bien); }
.estado-beta     { color: var(--neon);    border-color: var(--neon); }
.estado-vencida  { color: var(--peligro); border-color: var(--peligro); }
.estado-sin_pago { color: var(--tenue); }

.barrita {
  height: 8px;
  min-width: 120px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--neon) 18%, transparent);
}
.barrita::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--parte, 0%);
  border-radius: 99px;
  background: var(--neon);
}

.fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ayuda-corta { font-size: 12px; color: var(--tenue); margin-bottom: var(--esp-2); }

.error { border: 1px solid var(--linea); border-radius: var(--r); margin-bottom: var(--esp-2); }
.error summary { padding: var(--esp-2); cursor: pointer; display: flex; gap: var(--esp-2); align-items: baseline; flex-wrap: wrap; }
.error summary small { color: var(--tenue); margin-left: auto; }
.error p { padding: 0 var(--esp-2) var(--esp-2); color: var(--peligro); font-size: 13px; }
.error pre {
  margin: 0;
  padding: var(--esp-2);
  overflow-x: auto;
  font-size: 11px;
  background: var(--fondo);
  border-top: 1px solid var(--linea);
}

/* ── modo texto del equipo ────────────────────────────────────────────────
   Reemplaza los iconos de objetos por su nombre. No se baja ninguna imagen:
   es para máquinas lentas o conexiones malas. */
.item-texto {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--panel-alto);
  color: var(--texto);
}
.item-texto.vacio { color: var(--tenue); font-style: italic; border-style: dashed; }
/* en el tablero la columna del equipo deja de necesitar el ancho de 8 iconos */
/* Ahora van los ocho nombres, así que se les permite bajar de línea en vez
   de desbordar la party. La fila queda más alta: es el precio de ver todo
   el equipo escrito, y por eso el modo es opcional. */
:root[data-iconos="texto"] .slot-items {
  min-width: 0;
  flex-wrap: wrap;
  max-width: 460px;
  gap: 3px;
}
:root[data-iconos="texto"] .slot-hueco { display: none; }
:root[data-iconos="texto"] .item-texto { max-width: 104px; }
/* en compacto entran dos parties por línea: menos ancho para los nombres */
:root[data-iconos="texto"] body.modo-compacto .slot-items { max-width: 240px; }
:root[data-iconos="texto"] body.modo-compacto .item-texto { max-width: 76px; font-size: 11px; }

/* ── cobertura de roles (pantalla Gente) ──────────────────────────────────
   Cuánta gente sabe cada rol. Van de menos a más, así lo que falta queda
   primero, que es lo que se va a buscar. */
.cobertura-caja {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}
.cobertura {
  font: 700 12px var(--fuente);
  color: var(--texto);
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tipo, var(--linea-fuerte));
  border-radius: var(--r);
  padding: 4px 9px;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.cobertura:hover { border-color: var(--neon); }
.cobertura.activa {
  border-color: var(--neon);
  background: color-mix(in srgb, var(--neon) 18%, var(--panel-alto));
}
/* los que hay que perseguir para que carguen, y el botón de volver a todos */
.cobertura.falta { border-left-color: var(--alerta); color: var(--alerta); }
.cobertura.falta.activa { background: color-mix(in srgb, var(--alerta) 18%, var(--panel-alto)); border-color: var(--alerta); }
.cobertura.limpiar { border-left-color: var(--linea); color: var(--tenue); }

/* Filtro por tipo de objeto, dentro del buscador de equipamiento.

   Va en UNA sola línea que se desliza al costado en vez de amontonarse en
   tres filas: son hasta 17 tipos y apilados le comían la mitad del alto al
   diálogo, que es donde de verdad se busca. */
.filtro-familias {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0 var(--esp-3) var(--esp-2);
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.filtro-familias::-webkit-scrollbar { height: 6px; }
.filtro-familias::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: 99px;
}

.pastilla-tipo {
  flex: none;
  font: 600 12px var(--fuente);
  color: var(--tenue);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transicion), border-color var(--transicion),
              background var(--transicion);
}
.pastilla-tipo:hover { color: var(--texto); border-color: var(--linea-fuerte); }
.pastilla-tipo.activa {
  color: var(--fondo);
  background: var(--neon);
  border-color: var(--neon);
}

/* ── registro de asistencia ───────────────────────────────────────────────
   El top y las masses terminadas. */

.fila-top {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 54px auto;
  align-items: center;
  gap: var(--esp-2);
  padding: 7px var(--esp-2);
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
}
.fila-top:last-child { border-bottom: 0; }
/* la fila de quien mira se destaca: es lo primero que va a buscar */
.fila-top.yo {
  background: color-mix(in srgb, var(--neon) 12%, transparent);
  border-radius: var(--r);
}
.puesto { font-weight: 700; color: var(--tenue); }
.puesto.podio { color: var(--neon); }
.nombre-top { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.masses-top { color: var(--tenue); font-size: 12px; }
.puntos-top {
  text-align: right;
  font-weight: 700;
  font-size: 15px;
}
.cuando-top { color: var(--tenue); font-size: 12px; white-space: nowrap; }

.mass { border: 1px solid var(--linea); border-radius: var(--r); margin-bottom: var(--esp-2); }
.mass summary {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  cursor: pointer;
  flex-wrap: wrap;
}
.mass summary span { color: var(--tenue); font-size: 12px; }
.mass summary small { margin-left: auto; color: var(--tenue); }
.mass .gente-mass, .mass .cobertura-caja {
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
  margin: 0;
}
/* dentro de una mass las pastillas no filtran nada: no son botones */
.mass .cobertura { cursor: default; }
.mass .cobertura:hover { border-color: var(--linea); }

#buscar-top { max-width: 220px; }

@media (max-width: 700px) {
  .fila-top { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .masses-top, .cuando-top { display: none; }
}

/* lista de secciones que se pueden esconder, en Ajustes */
.columna-corta { display: flex; flex-direction: column; gap: 4px; }

/* ── ruleta ───────────────────────────────────────────────────────────────
   Una tira que se desliza y frena sobre el ganador. Funciona igual con 3
   participantes que con 40. */

.barra-ruleta {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}
.barra-ruleta select { max-width: 260px; }

.ruleta-marco {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--panel-alto);
  height: 92px;
}
.ruleta-tira {
  display: flex;
  height: 100%;
  will-change: transform;   /* le avisa al navegador que esto se va a mover */
}
.ruleta-item {
  flex: none;
  width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 var(--esp-2);
  border-right: 1px solid var(--linea);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.ruleta-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruleta-item img { width: 30px; height: 30px; border-radius: 99px; }

/* la aguja marca dónde frena: sin esto no se entiende quién ganó */
.ruleta-aguja {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--neon);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 12px var(--neon);
}

.ruleta-acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
  flex-wrap: wrap;
}
.boton.grande { font-size: 16px; padding: 10px 28px; }

.ganador {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}
.ganador-nombre {
  font-size: 20px;
  font-weight: 700;
  color: var(--neon);
}

.participante {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  background: var(--panel-alto);
  font-size: 13px;
}
.participante img { width: 22px; height: 22px; border-radius: 99px; }
.participante .icono-btn { width: 22px; height: 22px; border: 0; }

.agregar-mano { display: flex; gap: var(--esp-2); }
.agregar-mano input { max-width: 180px; }
.cuenta { color: var(--tenue); font-weight: 400; font-size: 13px; }

@media (max-width: 700px) {
  .ruleta-item { width: 130px; }
}

/* la ficha que ganó queda marcada cuando la tira frena */
.ruleta-item.gano {
  background: color-mix(in srgb, var(--neon) 22%, transparent);
  color: var(--neon);
}

/* control de duración del giro */
.dura { display: flex; align-items: center; gap: var(--esp-2); font-size: 13px; color: var(--tenue); }
.dura input[type="range"] { width: 130px; accent-color: var(--neon); padding: 0; }
.dura b { color: var(--texto); min-width: 34px; }

/* al salir, la ficha se va girando hacia arriba antes de desaparecer */
@keyframes salir-volando {
  to { transform: translate(40px, -70px) rotate(28deg) scale(.6); opacity: 0; }
}
.participante.expulsado {
  animation: salir-volando .6s ease-in forwards;
  border-color: var(--peligro);
}
/* si alguien apagó las animaciones, igual desaparece: no se queda colgada */
:root.sin-animaciones .participante.expulsado { opacity: 0; }

.ganador-nombre.campeon { font-size: 26px; }

/* ── modo cuadro (tragamonedas) ───────────────────────────────────────────
   Todos en pantalla y una luz que salta de casilla en casilla, frenando de
   a poco. Los eliminados quedan con su cruz y la luz los saltea. */

.cuadro-marco { padding: var(--esp-2) 0; }
.cuadro { display: grid; gap: 6px; }

/* El hueco del medio del anillo. Muestra el sorteo y a quién está apuntando
   la luz: es donde va a mirar todo el mundo mientras gira. */
.cuadro-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--esp-3);
  border: 1px dashed var(--linea);
  border-radius: var(--r);
  text-align: center;
  min-width: 0;
}
.centro-titulo { font-size: 12px; color: var(--tenue); }
.centro-nombre {
  font: 700 clamp(18px, 3.4vw, 30px)/1.1 var(--fuente);
  color: var(--neon);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.centro-cuenta { font-size: 12px; color: var(--tenue); }
.celda {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 62px;
  padding: 6px 4px;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--panel-alto);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
}
.celda span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.celda img { width: 24px; height: 24px; border-radius: 99px; }

/* la luz que salta */
.celda.marcada {
  border-color: var(--neon);
  background: color-mix(in srgb, var(--neon) 24%, var(--panel-alto));
  transform: scale(1.04);
}
.celda.gano {
  border-color: var(--neon);
  background: color-mix(in srgb, var(--neon) 34%, var(--panel-alto));
  box-shadow: 0 0 0 2px var(--neon);
}

/* la cruz de los eliminados, dibujada con dos líneas cruzadas */
.celda.afuera { opacity: .5; }
.celda.afuera::before, .celda.afuera::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  height: 3px;
  background: var(--peligro);
  border-radius: 2px;
}
.celda.afuera::before { transform: rotate(28deg); }
.celda.afuera::after  { transform: rotate(-28deg); }

@keyframes marcar-cruz { from { transform: scale(1.5); opacity: 0; } }
.celda.saliendo::before, .celda.saliendo::after { animation: marcar-cruz .35s ease-out; }
.celda.saliendo { animation: marcar-cruz .35s ease-out; }

/* ── podio ────────────────────────────────────────────────────────────── */

.podio { margin-top: var(--esp-4); }
.podio-lista { display: flex; flex-direction: column; gap: 6px; margin-top: var(--esp-2); }
.podio-puesto {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 8px var(--esp-3);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--panel-alto);
  font-weight: 700;
}
.podio-puesto.primero {
  border-color: var(--neon);
  background: color-mix(in srgb, var(--neon) 16%, var(--panel-alto));
  font-size: 18px;
}
.podio-num { min-width: 34px; color: var(--tenue); }
.podio-puesto.primero .podio-num { color: var(--neon); }
.podio-puesto img { width: 26px; height: 26px; border-radius: 99px; }
.podio-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* el nombre del sorteo, arriba de todo */
.titulo-sorteo {
  width: 100%;
  margin-bottom: var(--esp-3);
  font: 700 17px var(--fuente);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--linea);
  border-radius: 0;
  padding: 4px 2px;
}
.titulo-sorteo:focus { border-bottom-color: var(--neon); outline: none; }

.participante.afuera { opacity: .45; text-decoration: line-through; }

/* ── ruleta: tablero a la izquierda, participantes a la derecha ───────────
   Antes la lista iba abajo y había que scrollear para ver a quién sacar
   mientras el tablero quedaba arriba. */
.ruleta-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--esp-3);
  align-items: start;
}
.lado-participantes {
  position: sticky;
  top: var(--esp-3);
  max-height: calc(100dvh - var(--esp-5));
  overflow-y: auto;
}
.lado-participantes .agregar-mano input { max-width: 130px; }
.lado-participantes .cobertura-caja { flex-direction: column; align-items: stretch; }
.lado-participantes .participante { justify-content: space-between; }

@media (max-width: 1150px) {
  /* en pantallas chicas vuelve a ir una cosa debajo de la otra */
  .ruleta-columnas { grid-template-columns: 1fr; }
  .lado-participantes { position: static; max-height: none; }
  .lado-participantes .cobertura-caja { flex-direction: row; align-items: center; }
}

/* ── barra lateral plegable ───────────────────────────────────────────────
   Plegada queda un borde de iconos: se gana pantalla sin perder la
   navegación, que es lo que se busca cuando el tablero está lleno. */

.lateral-cabeza { display: flex; align-items: center; gap: var(--esp-2); }
.plegar {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 30px; height: 30px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  cursor: pointer;
  flex: none;
}
.plegar span { display: block; height: 2px; background: var(--tenue); border-radius: 2px; }
.plegar:hover span { background: var(--neon); }

:root[data-lateral="chica"] { --lateral: 56px; }
:root[data-lateral="chica"] .marca,
:root[data-lateral="chica"] .nav a b,
:root[data-lateral="chica"] .cuenta,
:root[data-lateral="chica"] .invitar span:not(.invitar-mas),
:root[data-lateral="chica"] .link-discord,
:root[data-lateral="chica"] .estado span {
  display: none;
}
:root[data-lateral="chica"] .lateral { padding-left: 6px; padding-right: 6px; }
:root[data-lateral="chica"] .lateral-cabeza { justify-content: center; }
:root[data-lateral="chica"] .plegar { margin: 0 auto; }
:root[data-lateral="chica"] .nav a { justify-content: center; padding: 9px 0; }
:root[data-lateral="chica"] .invitar { justify-content: center; padding: 9px 0; }
:root[data-lateral="chica"] .estado { justify-content: center; padding: 0; }

/* plegada, el nombre de la sección aparece al pasar el cursor */
:root[data-lateral="chica"] .nav a::after {
  content: attr(data-nombre);
  position: absolute;
  left: calc(var(--lateral) - 4px);
  padding: 5px 9px;
  background: var(--panel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
  z-index: 30;
}
:root[data-lateral="chica"] .nav a { position: relative; }
:root[data-lateral="chica"] .nav a:hover::after { opacity: 1; }

/* ── ajustes en tarjetas ──────────────────────────────────────────────────
   Antes era una lista larga hacia abajo y había que scrollear tres
   pantallas para llegar a lo de siempre. Agrupado por tema y en grilla, se
   encuentra de un vistazo. */
.ajustes-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--esp-3);
  align-items: start;
}
.ajustes-grilla .tarjeta { display: flex; flex-direction: column; gap: var(--esp-3); }
.ajustes-grilla .tarjeta > h2 { margin-bottom: 0; }
.col-ancha { grid-column: 1 / -1; }

/* el cuadro de color del navegador + el hexadecimal a mano */
.linea-color { display: flex; align-items: center; gap: var(--esp-2); }
.linea-color input[type="color"] {
  width: 46px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--panel-alto);
  cursor: pointer;
}
.linea-color input[type="text"] {
  width: 100px;
  font-family: ui-monospace, monospace;
  text-transform: lowercase;
}
.linea-color .boton { flex: none; }

/* de quién es el evento y si está trabado */
.dueno-evento { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.boton.activo { border-color: var(--neon); color: var(--neon); }

/* ── registro: dos mitades ────────────────────────────────────────────────
   Antes las dos listas crecían sin techo y la página quedaba en escalera.
   Ahora van a la par y cada una scrollea por dentro. */
.registro-mitades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--esp-3);
  align-items: start;
}
.lista-caja {
  max-height: 46dvh;
  overflow-y: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--esp-2);
}
.registro-mitades .fila-titulo input[type="search"] { max-width: 150px; }
.acciones-mass { padding: 0 var(--esp-3) var(--esp-3); }

/* ── builds: barra y lista en diálogo ─────────────────────────────────────
   La lista de composiciones ya no vive siempre en pantalla: con muchas se
   comía media ventana. */
.barra-builds {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-bottom: var(--esp-3);
}
.compo-actual { font-weight: 700; font-size: 15px; }

.comp-fila { display: flex; align-items: stretch; gap: 4px; }
.comp-fila .comp-item { flex: 1; }
.comp-fila .icono-btn { align-self: center; }
.comp-fila .icono-btn.activo { color: var(--neon); border-color: var(--neon); }

#dlg-comps .modal-cuerpo { max-height: 60dvh; overflow-y: auto; }
#dlg-notas textarea { width: 100%; }

/* ── ajustes: permisos y secciones ────────────────────────────────────────
   Los tres niveles en columnas y no apilados: se leen de un vistazo y se
   entiende que son una escalera. */
.permisos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-3);
  align-items: start;
}
.permisos-grilla > * {
  padding: var(--esp-3);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--panel-alto);
}
.permisos-grilla h3 { font-size: 13px; color: var(--neon); }

/* once secciones en una sola fila vertical hacían esa tarjeta el doble de
   alta que las demás */
.rejilla-secciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2px var(--esp-2);
}

/* ── ayuda: un paso por tarjeta ───────────────────────────────────────────
   Antes era una lista larga de párrafos y no se sabía por dónde empezar. */
.pasos { list-style: none; margin: 0 0 var(--esp-4); padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.paso {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--panel);
}
.paso-num {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: color-mix(in srgb, var(--neon) 20%, transparent);
  color: var(--neon);
  font-weight: 700;
}
.paso-cuerpo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.paso-cuerpo h2 { margin: 0; }
.paso-cuerpo p { line-height: 1.6; }
/* la línea de cierre de cada paso: qué mirar para saber que salió bien */
.paso-listo {
  padding: var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--neon);
  background: var(--panel-alto);
  border-radius: var(--r-chico);
  font-size: 14px;
}
kbd {
  padding: 1px 6px;
  border: 1px solid var(--linea-fuerte);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel-alto);
  font: 600 12px ui-monospace, monospace;
}
.duda { border-bottom: 1px solid var(--linea); }
.duda summary { padding: var(--esp-2) 0; cursor: pointer; font-weight: 700; }
.duda p { padding: 0 0 var(--esp-3); line-height: 1.6; color: var(--tenue); }

@media (max-width: 700px) {
  .paso { flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); }
}

/* ── economía ─────────────────────────────────────────────────────────── */
.saldo-grande { font: 700 24px var(--fuente); color: var(--neon); }
.linea-plata { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.linea-plata input[type="number"] { width: 140px; }
.linea-plata input[type="text"] { flex: 1; min-width: 160px; }

.mov {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: var(--esp-2);
  align-items: center;
  padding: 6px var(--esp-2);
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
}
.mov:last-child { border-bottom: 0; }
.mov-monto { font-weight: 700; font-family: ui-monospace, monospace; text-align: right; }
.mov-monto.entra { color: var(--bien); }
.mov-monto.sale { color: var(--peligro); }
.mov-que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-que small { display: block; color: var(--tenue); font-size: 11px; }
.mov-cuando { color: var(--tenue); font-size: 11px; white-space: nowrap; }

.mass-eco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: 8px var(--esp-2);
  border-bottom: 1px solid var(--linea);
}
.mass-eco:last-child { border-bottom: 0; }
.mass-eco-datos { min-width: 0; }
.mass-eco-datos small { display: block; color: var(--tenue); font-size: 11px; }
.mass-eco-hecha { display: flex; align-items: center; gap: 6px; }

@media (max-width: 700px) {
  .mov { grid-template-columns: 90px minmax(0, 1fr); }
  .mov-cuando { display: none; }
}

/* el botón de notas, pegado al nombre de la composición */
.comp-cabecera #btn-notas { flex: none; }

/* agregar varios roles de una: el número pegado al botón, como una sola pieza */
.agregar-roles { display: flex; align-items: stretch; }
.agregar-roles .boton {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.cuantos-roles {
  width: 62px;
  text-align: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* la lista de composiciones estaba pegada a los bordes del diálogo */
#dlg-comps .modal-cuerpo { padding: var(--esp-3) var(--esp-4) var(--esp-4); }
#dlg-comps #lista-comps { display: flex; flex-direction: column; gap: 4px; }
#dlg-comps #lista-comps h2 { margin-top: var(--esp-2); }

/* aviso dentro de un paso de la ayuda: algo que hay que tener en cuenta */
.paso-ojo {
  padding: var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--alerta);
  background: var(--panel-alto);
  border-radius: var(--r-chico);
  font-size: 14px;
}

/* campo temporal para copiar a mano cuando el navegador no deja copiar solo */
.para-copiar {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 90vw);
  height: 40dvh;
  z-index: 100;
}

/* quién está en voz ahora, dentro de Gente */
.persona.en-voz { border-left: 3px solid var(--bien); }
.persona.en-voz .persona-nombre::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 99px;
  background: var(--bien);
  vertical-align: middle;
}
.cobertura.voz { border-left-color: var(--bien); color: var(--bien); }
.cobertura.voz.activa { background: color-mix(in srgb, var(--bien) 18%, var(--panel-alto)); border-color: var(--bien); }

/* ── buscador de equipamiento: objeto y habilidades juntos ────────────────
   Como en el juego: la lista de piezas a la izquierda y los hechizos de la
   pieza elegida al lado. Antes eran dos pestañas y nunca se veían juntas. */
.taller-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 0;
  min-height: 0;
  padding: 0;
}
.lado-objeto { display: flex; flex-direction: column; min-height: 0; }
.lado-habilidades {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-left: 1px solid var(--linea);
  overflow-y: auto;
  min-height: 0;
}
.pieza-puesta {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--linea);
}
.pieza-puesta img { width: 40px; height: 40px; flex: none; }
.pieza-puesta small { display: block; color: var(--tenue); font-size: 12px; }

/* comida, poción, capa y segunda mano no llevan hechizos: el diálogo pasa a
   una sola columna en vez de dejar media pantalla en blanco */
#dlg-item.sin-habilidades .taller-item { grid-template-columns: 1fr; }

/* Los hechizos, en cuadrícula de iconos como en el juego. Con el nombre al
   lado ocupaban un renglón cada uno y había que scrollear. */
.tecla-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 5px;
}
.hechizo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  aspect-ratio: 1;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--panel-alto);
  cursor: pointer;
}
.hechizo img { width: 100%; height: 100%; object-fit: contain; }
.hechizo:hover { border-color: var(--neon); }
.hechizo.elegido {
  border-color: var(--neon);
  background: color-mix(in srgb, var(--neon) 22%, var(--panel-alto));
  box-shadow: 0 0 0 1px var(--neon);
}

/* en pantallas chicas no entran dos columnas: una debajo de la otra */
@media (max-width: 860px) {
  .taller-item { grid-template-columns: 1fr; }
  .lado-habilidades { border-left: 0; border-top: 1px solid var(--linea); }
}