:root {
  --bg: #14161a;
  --bg2: #1c1f26;
  --panel: #232833;
  --panel2: #2b313d;
  --ink: #e8e4d8;
  --ink-dim: #9aa0ac;
  --gold: #c8a44d;
  --gold-bright: #e7c46b;
  --red: #8a2b2b;
  --red-bright: #c0392b;
  --line: #39404e;
  --shadow: 0 2px 10px rgba(0, 0, 0, .4);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
}
/* Con un modal abierto, fija el fondo en su sitio (en vez de dejarlo scrollable
   detrás del overlay). Sin esto, en iOS Safari el overlay `position:fixed` puede
   quedar calculado contra una posición de scroll que ya no es la actual —
   sobre todo si el modal se abre justo cuando la página aún tiene inercia de un
   scroll reciente — y aparece desplazado, obligando a hacer scroll para verlo.
   openModal()/confirmModal() en app.js ponen `top: -<scrollY>px` a la vez que
   añaden esta clase, y lo deshacen (restaurando el scroll) al cerrar. */
body.modal-open { position: fixed; left: 0; right: 0; overflow: hidden; }

a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; color: var(--ink-dim); }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  /* Dos filas (ver .tb-row): arriba ☰ + marca + secciones favoritas + idioma; abajo
     buscador + versión de datos + estado. Así el buscador y la versión nunca se parten
     ni se cortan, sea cual sea el ancho. El panel del menú (.menu-panel) cuelga de aquí. */
  padding: 10px 18px;
  background: linear-gradient(180deg, #1a1d24, #14161a);
  border-bottom: 2px solid var(--gold);
  box-shadow: var(--shadow);
}
.tb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.tb-tools { flex-wrap: nowrap; margin-top: 8px; }
.tb-tools[hidden] { display: none; }
.brand {
  font-family: var(--serif);
  font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-bright); white-space: nowrap;
}
.brand:hover { text-decoration: none; color: #fff; }
.brand span { border-left: 1px solid var(--line); padding-left: 10px; margin-left: 6px; }
.search { flex: 1 1 160px; min-width: 0; max-width: 460px; }
.search input {
  width: 100%; padding: 8px 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font-size: .95rem;
}
.search input:focus { outline: none; border-color: var(--gold); }
.meta { color: var(--ink-dim); font-size: .8rem; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- layout ---------- */
/* sin límite de ancho: el contenido usa todo el navegador salvo el margen
   lateral (padding) -- si la página en concreto es angosta (texto, una
   ficha...) no se nota, pero páginas anchas de verdad (la tabla de ranking,
   con varias columnas de blanco de referencia a la vez) ya no se aprietan
   contra un límite fijo ni necesitan scroll horizontal aparte. */
.view { margin: 0 auto; padding: 24px 18px 60px; }
.loading { color: var(--ink-dim); }
.foot {
  border-top: 1px solid var(--line); color: var(--ink-dim);
  font-size: .8rem; text-align: center; padding: 16px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; }
h1 { font-size: 1.8rem; margin: 0 0 4px; color: var(--gold-bright); }
h2 {
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); border-bottom: 1px solid var(--line);
  padding-bottom: 4px; margin: 28px 0 12px;
}
.crumb { color: var(--ink-dim); font-size: .85rem; margin-bottom: 14px; }

/* secciones colapsables de la ficha de facción (reglas de ejército,
   destacamentos): cerradas por defecto para no alargar la página antes de
   llegar a las unidades; el summary se ve igual que un h2 normal */
.fac-collapse { margin: 28px 0 12px; }
.fac-collapse > summary {
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); border-bottom: 1px solid var(--line);
  padding-bottom: 4px; cursor: pointer; list-style: none;
}
.fac-collapse > summary::-webkit-details-marker { display: none; }
.fac-collapse > summary::before { content: "▸ "; color: var(--ink-dim); }
.fac-collapse[open] > summary::before { content: "▾ "; }
.fac-collapse > summary .n { color: var(--ink-dim); text-transform: none; letter-spacing: normal; font-size: .8rem; }
.fac-collapse > *:not(summary) { margin-top: 10px; }
.crumb a { color: var(--ink-dim); }

/* ---------- faction grid ---------- */
.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card {
  display: block; padding: 14px 16px; position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); transition: border-color .12s, transform .12s;
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); text-decoration: none; }
.card .t { font-family: var(--serif); font-size: 1.05rem; color: var(--gold-bright); padding-right: 20px; }
.card .s { color: var(--ink-dim); font-size: .82rem; margin-top: 2px; }
.fav-star {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--line);
  padding: 2px;
}
.fav-star:hover { color: var(--gold); }
.fav-star.active { color: var(--gold-bright); }
.fav-box { margin-bottom: 24px; }

/* ---------- datasheet list ---------- */
.ds-list { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ds-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; color: var(--ink);
}
.ds-row:hover { border-color: var(--gold); text-decoration: none; }
.ds-row .pts {
  font-family: var(--serif); color: var(--gold-bright);
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; font-size: .82rem; white-space: nowrap;
}
.chk-inline {
  display: block; margin: 8px 0; font-size: .88rem; color: var(--ink-dim);
  cursor: pointer;
}
.chk-inline input { margin-right: 6px; vertical-align: middle; }
.axis-val {
  font-family: var(--serif); color: var(--gold-bright);
  font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.axis-badge {
  font-size: .68rem; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; margin-left: 4px;
}
#colAxisResults .ds-list { margin-bottom: 14px; }
#colAxisResults h4 { margin: 10px 0 6px; }
/* ---------- tarjetas de "Mis listas" ---------- */
.list-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.list-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px;
}
.list-card:hover { border-color: var(--gold); }
.list-card-name {
  font-family: var(--serif); color: var(--gold-bright); font-weight: bold;
  text-decoration: none; overflow-wrap: break-word;
}
.list-card-name:hover { text-decoration: underline; }
.list-card-meta { color: var(--ink-dim); font-size: .78rem; margin: 0; overflow-wrap: break-word; }
.list-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px; flex-wrap: wrap;
}
.list-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

.tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 3px; margin-left: 6px;
  background: var(--red); color: #f2dede;
}
.tag.legends { background: #4a4a2a; color: #e6e6b8; }
.tag.free { background: #2a4a34; color: #c8e6d2; }
.tag.substituted { background: #2a3a4a; color: #c8dcf0; cursor: help; }
.tag.combat-patrol { background: #4a2a3a; color: #f0c8dc; cursor: help; }

/* ---------- datasheet card ---------- */
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sheet-head {
  background: linear-gradient(180deg, #2f2622, #241d1a);
  border-bottom: 2px solid var(--gold);
  padding: 16px 20px;
  position: relative;
}
.sheet-head h1 { margin: 0; }
.sheet-head .sub { color: var(--ink-dim); font-size: .85rem; margin-top: 2px; }
/* abajo del todo, no arriba: la X de cerrar la modal vive en la esquina
   superior derecha (.modal-x, fuera de .sheet-head) y a esa misma altura se
   pisaban los dos botones. */
.sheet-head .orig-btn { top: auto; bottom: 12px; right: 16px; }
.sheet-head.has-orig h1, .sheet-head.has-orig .sub { padding-right: 30px; }
.sheet-body { padding: 6px 20px 20px; }
.add2list { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* fila superior de la ficha: foto | perfiles + armas */
.sheet-top { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.sheet-top .st-img { flex: 0 0 240px; max-width: 40%; }
.sheet-top .st-main { flex: 1 1 300px; min-width: 0; }
.sheet-top .st-main > *:first-child { margin-top: 0; }
.sheet-top .st-main > div:first-child .statline { margin-top: 0; }
img.ds-img { width: 100%; max-width: 320px; border: 1px solid var(--line); border-radius: 6px; margin: 0; }
.sheet-top .st-img img.ds-img { max-width: 100%; }
@media (max-width: 560px) { .sheet-top .st-img { flex-basis: 100%; max-width: none; } }

.statline { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.stat {
  min-width: 58px; text-align: center;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px;
}
.stat .k { font-size: .66rem; color: var(--gold); letter-spacing: .1em; }
.stat .v { font-family: var(--serif); font-size: 1.15rem; }
.stat-name { color: var(--ink-dim); font-size: .8rem; margin: 2px 0 0; }

@media (max-width: 560px) {
  /* las 6 cajas (M/T/SV/W/LD/OC) deben caber siempre en una sola fila: sin esto,
     min-width:58px + los huecos superan el ancho real disponible en móvil y las
     últimas (LD, OC) saltan a una segunda fila. min-width:0 permite que el flex
     encoja por debajo del min-width fijo; flex:1 1 0 reparte el ancho a partes
     iguales entre las 6 en vez de dejar que cada una pida su propio hueco.
     (Tiene que ir DESPUÉS de la regla base .statline/.stat de arriba: con la
     misma especificidad, quien va después en el CSS gana, y una @media que
     aparece ANTES pierde contra una regla normal posterior aunque su condición
     se cumpla.) */
  .statline { flex-wrap: nowrap; gap: 4px; }
  .stat { min-width: 0; flex: 1 1 0; padding: 5px 2px; }
  .stat .k { font-size: .6rem; }
  .stat .v { font-size: .95rem; }
}

table.w { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: .88rem; }
table.w th, table.w td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.w th { color: var(--gold); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
table.w td.n, table.w th.n { text-align: center; width: 46px; }
table.w tr:hover td { background: var(--panel2); }
/* ranking: color por columna con la escala secuencial azul de la paleta dataviz (pasos 550 en oscuro
   y 250 en claro; más intenso = mejor dentro de su columna). Texto #e8e4d8 sobre el paso más fuerte:
   5,2:1; en claro, #0b0b0b sobre #86b6ef: 9,3:1. La app solo tiene tema oscuro; el claro queda
   preparado por si llega. */
:root { --rk-lo: var(--bg2); --rk-hi: #1c5cab; }
:root[data-theme="light"] { --rk-lo: #ffffff; --rk-hi: #86b6ef; }
.rk-tbl td.rk-c { background: color-mix(in srgb, var(--rk-hi) calc(var(--rk-p) * 100%), var(--rk-lo)); }
.rk-tbl tr:hover td.rk-c { background: color-mix(in srgb, var(--rk-hi) calc(var(--rk-p) * 100%), var(--panel2)); }
.rk-ramp { display: inline-block; width: 120px; height: 12px; vertical-align: middle; border: 1px solid var(--line);
  background: linear-gradient(to right, var(--rk-lo), var(--rk-hi)); }
.rk-tbl th.rk-sort { cursor: pointer; user-select: none; }
.rk-tbl th.rk-sort:hover { color: var(--gold-bright); }
.rk-badge { color: var(--gold-bright); white-space: nowrap; }
table.rk-tbl th, table.rk-tbl td { padding-left: 8px; padding-right: 8px; border-left: 1px solid var(--line); }
table.rk-tbl th:first-child, table.rk-tbl td:first-child { border-left: none; }
table.rk-tbl { width: auto; table-layout: auto; border-collapse: separate; border-spacing: 0; }
.rk-tbl th, .rk-tbl td { border-bottom: 1px solid var(--line); }
.rk-tbl td.n, .rk-tbl th.n { min-width: 64px; width: 64px; text-align: center; }
.rk-tbl th { text-transform: none; font-size: .78rem; letter-spacing: 0; vertical-align: middle; text-align: center; }
.rk-tbl th small { display: block; font-size: .62rem; font-weight: normal; color: var(--ink-dim); white-space: normal; }
.rk-wrap { max-height: 75vh; overflow-y: auto; }
/* cabecera en dos filas, fija arriba al desplazar; la fila 2 cuelga justo debajo de la 1 (alto fijo) */
.rk-tbl thead th { position: sticky; background: var(--bg2); z-index: 3; }
.rk-tbl thead tr.rk-g1 th { top: 0; height: 34px; }
.rk-tbl thead tr.rk-g2 th { top: 34px; }
.rk-tbl th.rk-grp { color: var(--gold-bright); border-bottom: 1px solid var(--gold); }
/* «#» y «Combinación» fijas a la izquierda al desplazar en horizontal: fondo opaco y z-index sobre las celdas */
.rk-tbl .rk-num-col { position: sticky; left: 0; width: 52px; min-width: 52px; max-width: 52px; padding-left: 4px; padding-right: 4px; text-align: center; background: var(--bg); z-index: 2; }
.rk-tbl .rk-combo-col { position: sticky; left: 52px; width: 260px; min-width: 260px; max-width: 260px; text-align: left; background: var(--bg); z-index: 2; box-shadow: 2px 0 0 var(--line); }
.rk-tbl tr:hover td.rk-num-col, .rk-tbl tr:hover td.rk-combo-col { background: var(--panel2); }
.rk-tbl thead th.rk-num-col, .rk-tbl thead th.rk-combo-col { background: var(--bg2); z-index: 5; }
.rk-combo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
@media (max-width: 600px) {
  .rk-tbl .rk-combo-col { width: 168px; min-width: 168px; max-width: 168px; }
}
.rk-search { font: inherit; font-size: .85rem; min-width: 200px; max-width: 100%; }
.rk-more { font: inherit; font-size: .72rem; cursor: pointer; padding: 0 6px; white-space: nowrap; }
.rk-tbl tr.rk-child .rk-combo { padding-left: 14px; border-left: 2px solid var(--line); }
.rk-targets { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.rk-target-chk { display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer; font-size: .85rem; }
.rk-target-chk input { cursor: pointer; }
/* interruptor «Absoluto / Por 100 pts» del ranking */
.rk-mode { font: inherit; font-size: .82rem; cursor: pointer; }
/* «Con habilidad…»: chips de etiquetas «no daño»; el activo usa el .chip.active de siempre */
.rk-tag { font: inherit; font-size: .82rem; cursor: pointer; margin: 2px 0; }
/* ficha: línea «Habilidades:» con las etiquetas */
.sheet-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: .9rem; }
.tag-chip { cursor: help; }
/* «Mejor papel»: de qué columna sale, pequeño bajo el número */
.rk-from { display: block; font-size: .62rem; line-height: 1.1; color: var(--ink-dim); white-space: nowrap; }
.rk-det { max-width: 100%; }
/* la mejora de destacamento de una fila: bajo el nombre del líder, puede ocupar varias líneas en la columna estrecha */
.rk-enh-line { flex: 0 0 100%; }
/* el título de las modales del ranking no se mete bajo la ✕ de cerrar */
.rk-modal .an { display: block; padding-right: 36px; }
.rk-enh-rule { font-size: .9rem; margin: 6px 0; }
.chip.rk-enh { font: inherit; font-size: .72rem; padding: 0 8px; white-space: normal; text-align: left; border-radius: 10px; border-color: var(--gold); color: var(--gold-bright); cursor: pointer; }
.rk-tbl td.rk-bestcell { cursor: pointer; }
.rk-tbl td.rk-bestcell:hover { outline: 1px solid var(--gold); outline-offset: -1px; }
/* fila dominada: otra es igual o mejor en todo */
.rk-tbl tr.rk-dom { opacity: .45; }
.rk-col-chk { display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer; font-size: .85rem; }
.rk-col-chk input { cursor: pointer; }
.rk-col-chk input:disabled { cursor: default; }
.rk-col-chk:has(input:disabled) { opacity: .5; }
.wk { display: inline-block; font-size: .7rem; color: var(--gold-bright);
      border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; margin: 1px 3px 1px 0; }
.wk.wk-off { opacity: .45; border-style: dashed; }
.wk-hunter { cursor: pointer; text-transform: uppercase; }
.wk-hunter:hover { border-color: var(--gold-bright); }
.wname .def, .wpn-line .def { color: var(--ink-dim); font-size: .7rem; margin-left: 6px; }

/* botón "ver original en inglés" (habilidades, estratagemas, mejoras,
   reglas de destacamento/ejército ya traducidas): esquina superior derecha
   del bloque del concepto. .tr-block marca los contenedores que lo llevan
   (position:relative + hueco a la derecha para que el texto no se solape). */
.tr-block { position: relative; padding-right: 30px; }
.orig-btn {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 20px;
  padding: 0; line-height: 18px; text-align: center; font-size: .62rem;
  font-weight: 700; letter-spacing: .02em; border-radius: 3px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink-dim);
}
.orig-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.strat .sh .orig-btn { position: static; margin-left: auto; }
.orig-content { padding: 18px 20px 20px; }

.ability { margin: 10px 0; padding: 10px 12px; background: var(--bg2); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; }
.ability .an { font-family: var(--serif); color: var(--gold-bright); }
.ability .atype { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); margin-left: 8px; }
.ability .restr { color: var(--red-bright); font-size: .8rem; margin-top: 4px; }
.ability p { margin: 6px 0 0; font-size: .9rem; }
/* subhabilidades (issue #78): bloque anidado bajo la habilidad padre */
.ab-subs { margin: 10px 0 0 6px; padding-left: 12px; border-left: 2px solid var(--line); }
.ab-subs-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.ab-sub { margin: 8px 0 0; }
.ab-sub-name { display: block; margin-bottom: 2px; font-family: var(--serif); color: var(--gold-bright); font-size: .92rem; overflow-wrap: anywhere; }

.kwbar { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.kwbar .lab { font-size: .7rem; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }
.kw {
  display: inline-block; margin: 4px 5px 0 0; padding: 2px 8px;
  background: #2a2320; border: 1px solid var(--gold); border-radius: 3px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-bright);
}
.kw.plain { background: var(--bg2); border-color: var(--line); color: var(--ink-dim); }

ul.opts { margin: 8px 0; padding-left: 20px; }
ul.opts li { margin: 6px 0; font-size: .9rem; line-height: 1.4; }
.comp { margin: 8px 0; font-size: .9rem; }
.comp b { color: var(--gold-bright); font-family: var(--serif); }
.lore { font-style: italic; color: var(--ink-dim); margin: 10px 0; font-size: .92rem; }

.k-tag { color: var(--gold-bright); font-weight: 600; }
.appref { color: var(--gold-bright); }   /* nombre de un modo de estratagema (<appref>) */

/* ---------- generic rule blocks ---------- */
.rule { margin: 12px 0; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; }
.rule h3 { margin: 0 0 6px; color: var(--gold-bright); font-size: 1rem; }
.rule p { margin: 6px 0; font-size: .92rem; }

/* ---------- "Mejoras que puede llevar" en la ficha ---------- */
.enh-block { margin: 16px 0 4px; }
.enh-block > summary { font-family: var(--serif); font-size: 1.15rem; color: var(--gold-bright); cursor: pointer; padding: 4px 0; }
.enh-det { margin: 6px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); }
.enh-det > summary { cursor: pointer; padding: 8px 12px; color: var(--gold-bright); font-size: .95rem; }
.enh-det[open] > summary { border-bottom: 1px solid var(--line); }
.enh-det .rule { margin: 8px 12px; background: transparent; border: none; padding: 6px 0; border-top: 1px dashed var(--line); border-radius: 0; }
.enh-det .rule:first-of-type { border-top: none; }
.enh-count { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); margin-left: 8px; font-family: var(--sans, sans-serif); }
.enh-cost { font-size: .8rem; color: var(--ink-dim); margin-left: 6px; }

/* ---------- comparador de listas ---------- */
.radar { display: block; margin: 8px auto 4px; max-width: 100%; height: auto; }
.cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-dim); margin: 8px 0; }
.cmp-legend .sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; margin-left: 12px; }
.cmp-legend .sw:first-child { margin-left: 0; }
.cmp-legend .sw-a { background: var(--gold-bright); }
.cmp-legend .sw-b { background: #6aa9e0; }
.vs-radar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.vs-radar-head h2 { margin: 0; }
.vs-radar-head label { font-size: .85rem; color: var(--ink-dim); }
.cmp-leg-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }
.cmp-leg-item .sw { margin-left: 0; flex: none; }
.cmp-tbl { max-width: 560px; }
.cmp-tbl td.win { color: var(--gold-bright); font-weight: 600; }
.cmp-tbl td.win::after { content: " ▲"; font-size: .7em; }

/* ---------- colección ---------- */
.col-step { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.col-step .addbtn { width: 26px; }
.col-n { min-width: 1.6em; text-align: center; color: var(--gold-bright); }
.ds-row:has(.col-n) .col-n:not(:empty) { font-variant-numeric: tabular-nums; }
.adv-bars { display: flex; flex-wrap: wrap; gap: 6px; }
.adv-bar { position: relative; font-size: .72rem; color: var(--ink-dim); background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; overflow: hidden; }
.adv-bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold-bright); opacity: .18; }
.col-owned { border-color: var(--gold); }
.col-owned h3 { color: var(--gold-bright); }
.col-fac-h { margin: 10px 0 2px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
#colOwned .ds-list, #colRows .ds-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
#colRows .ds-row, .col-owned .ds-row { align-items: flex-start; }
#colRows .ds-row .col-step, .col-owned .ds-row .col-step { margin-top: -2px; }
.col-step { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.col-fac-lbl { color: var(--ink-dim); font-size: .82rem; margin-right: 4px; }
.chip.col-fac { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
.chip.col-fac.active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }
.chip.col-fac .cf-name { cursor: pointer; }
.chip .det-pts { color: var(--ink-dim); font-size: .85em; }
.chip.col-fac .cf-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; opacity: .6; }
.chip.col-fac .cf-x:hover { opacity: 1; }

/* ---------- ayuda del motor de puntuación ---------- */
.help-btn { cursor: pointer; font-size: .72rem; vertical-align: middle; }
.help-link { cursor: pointer; color: var(--gold-bright); border: 1px solid var(--line); border-radius: 50%; font-size: .7rem; padding: 0 5px; margin-left: 4px; }

/* 🎲 de cada fila de arma: abre la modal de probabilidades (openProbModal) */
.prob-link { cursor: pointer; margin-left: 6px; font-size: .85em; opacity: .7; user-select: none; white-space: nowrap; }
.prob-link:hover, .prob-link:focus-visible { opacity: 1; outline: none; filter: drop-shadow(0 0 3px var(--gold)); }
.prob { max-width: 100%; }
.prob-title { margin: 0 34px 4px 0; color: var(--gold-bright); font-size: 1.05rem; }
.prob-prof { font-size: .85rem; color: var(--ink-dim); margin-bottom: 10px; }
.prob-ctl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.prob-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.prob-row[hidden] { display: none; }
.prob-lbl { font-size: .75rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; min-width: 7.5em; }
.prob-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.prob .chip { cursor: pointer; font: inherit; font-size: .82rem; }
.prob-sits { flex-direction: column; align-items: flex-start; gap: 4px; }
.prob-chk { font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.prob-chk input { cursor: pointer; }
.prob-sum { font-size: .88rem; margin: 8px 0; }
.prob-sum p { margin: 0; }
.prob-how { font-size: .8rem; color: var(--ink-dim); margin: 6px 0 8px; }
.prob-how b { color: var(--ink); }
/* la tabla hace scroll dentro de la modal, no la página */
.prob-tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.prob-tbl { border-collapse: collapse; width: 100%; min-width: 470px; font-size: .85rem; text-align: center; }
.prob-tbl th, .prob-tbl td { padding: 5px 6px; border: 1px solid var(--line); line-height: 1.25; }
.prob-tbl th { background: var(--bg2); color: var(--gold); font-weight: 400; }
.prob-tbl th b, .prob-tbl td b { display: block; font-size: .95rem; }
.prob-tbl td b { color: var(--ink); }
.prob-tbl small { display: block; font-size: .68rem; color: var(--ink-dim); font-weight: 400; white-space: nowrap; }
.prob-tbl .prob-corner { font-size: .7rem; }
.prob-tbl .prob-row-h { text-align: left; white-space: nowrap; }
.prob-tbl td.prob-cell { cursor: pointer; }
.prob-tbl td.prob-cell:focus-visible { outline: 2px dashed var(--gold); outline-offset: -3px; }
.prob-tbl td.prob-cell.sel { outline: 2px solid var(--gold-bright); outline-offset: -3px; }
.prob-pick { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; background: var(--bg2); font-size: .85rem; }
.prob-pick:empty { display: none; }
.prob-pick h4 { margin: 0 0 4px; font-size: .75rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.prob-pick p { margin: 4px 0; }
.prob-pick ul { margin: 4px 0; padding-left: 18px; }
.prob-pick li { margin: 3px 0; }
.prob-pick b { color: var(--gold-bright); }
.score-help h2, .rk-legend h3 { margin: 0 0 8px; color: var(--gold-bright); }
.score-help h3, .rk-legend h3 { margin: 16px 0 4px; color: var(--gold-bright); font-size: .95rem; }
.score-help dt, .rk-legend dt { color: var(--gold-bright); font-weight: 600; margin-top: 8px; }
.score-help dd, .rk-legend dd { margin: 2px 0 0; font-size: .9rem; color: var(--ink); }
.score-help ul, .rk-legend ul { margin: 4px 0; padding-left: 20px; font-size: .9rem; }
.score-help li, .rk-legend li { margin: 3px 0; }
.adv-bar b { color: var(--gold-bright); }
.col-minis { display: block; font-size: .72rem; color: var(--ink-dim); margin-top: 2px; }
.col-minis:empty { display: none; }
.tag-prof { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-bright); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; margin-left: 4px; }

/* ---------- referencia rápida de reglas ---------- */
.rc-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: .88rem; }
.rc-tbl th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--gold); color: var(--gold-bright); }
.rc-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rc-tbl td:nth-child(2) { white-space: nowrap; color: var(--ink-dim); }
.rc-tbl .sub { color: var(--ink-dim); font-size: .78rem; }
.rc-tbl.phases td:nth-child(2) { white-space: normal; }   /* la 2ª columna de las otras tablas es corta y nowrap */
.rc-tbl.phases td { line-height: 1.45; }
.rc-tbl.phases ol, .rc-tbl.phases ul { margin: 4px 0 6px; padding-left: 20px; }
.rc-tbl.phases li { margin: 3px 0; }
.rc-tbl.phases ul { list-style: square; color: var(--ink); }

.ed-cat { margin: 14px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.ed-cat:first-child { margin-top: 0; }

/* ---------- marcador de PV ---------- */
.vp-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; }
.vp-tbl th, .vp-tbl td { border: 1px solid var(--line); padding: 3px 6px; text-align: center; font-size: .85rem; }
.vp-tbl thead th { color: var(--gold-bright); font-size: .72rem; }
.vp-tbl tfoot td, .vp-tbl tfoot th { background: var(--bg2); font-weight: 600; }
.vp-in { width: 3em; background: var(--bg2); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); text-align: center; padding: 2px; }

.unit-row.dragging { opacity: .4; }
.unit-row.drop-target { border-top: 2px solid var(--gold-bright); }
.unit-row .ur-top { cursor: grab; }
.pill {
  display: inline-block; background: var(--red-bright); color: #fff;
  font-family: var(--serif); border-radius: 999px; padding: 1px 10px; font-size: .82rem;
}
.strat { margin: 12px 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.strat .sh { display: flex; align-items: baseline; gap: 10px; }
.strat .sh h3 { margin: 0; color: var(--gold-bright); font-size: 1.02rem; }
.strat .sh .pill { white-space: nowrap; flex: none; }   /* que "1 CP" no se parta en dos líneas cuando el título ocupa 2 */
.strat dl { margin: 8px 0 0; }
.strat .strat-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.strat-tag { font-size: .68rem; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; }
.strat-tag.src { color: var(--gold); border-color: var(--gold); }
/* cabecera de la estratagema según el turno (vista tarjetas de listas): tonos oscuros y apagados con texto claro,
   legibles también en modo oscuro. Azul = tu turno, rojo = turno del rival, verde = cualquiera */
.strat.turn-yourTurn { --turn-bg: #3d5a8c; }
.strat.turn-opponentsTurn { --turn-bg: #8a4444; }
.strat.turn-eitherPlayer { --turn-bg: #3d7050; }
.strat[class*="turn-"] .sh { background: var(--turn-bg); margin: -12px -14px 0; padding: 8px 14px; border-radius: 5px 5px 0 0; }
.strat[class*="turn-"].collapsed .sh { border-radius: 5px; margin-bottom: -12px; }
.strat[class*="turn-"] .sh h3, .strat[class*="turn-"] .sh .strat-chev { color: #f2f4f8; }
.strat[class*="turn-"] .sh .strat-tag { background: #000; color: #e3e7ef; border-color: transparent; padding: 1px 7px; }
.strat[class*="turn-"] .sh .strat-tag.src { color: #f0d28a; }
.list-strats { margin-top: 28px; }
.list-strats .strat-phase { margin: 22px 0 4px; color: var(--gold-bright); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.list-strats .strat { margin: 8px 0; }
.strat.collapsible .sh { cursor: pointer; flex-wrap: wrap; }
.strat.collapsible .strat-tags { flex: 1; }                       /* las etiquetas empujan EN + chevrón a la derecha */
.strat.collapsible .strat-chev { order: 3; margin-left: auto; color: var(--ink-dim); transition: transform .15s; }
.strat.collapsible .sh .orig-btn { order: 2; margin-left: 0; }   /* EN justo antes del chevrón */
.strat.collapsible.collapsed .strat-chev { transform: rotate(-90deg); }
.strat.collapsible.collapsed dl, .strat.collapsible.collapsed .lore { display: none; }
.strat dt { color: var(--gold); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.strat dd { margin: 2px 0 0; font-size: .9rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.fac-subhead {
  color: var(--ink-dim); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; margin: 14px 0 0;
}
.fac-subhead:first-of-type { margin-top: 10px; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .82rem; color: var(--ink); white-space: nowrap; display: inline-block; }
.chip:hover { border-color: var(--gold); text-decoration: none; }

.empty { color: var(--ink-dim); font-style: italic; }
/* aviso de versión de datos con otro esquema (HTTP 409 de la API) */
.stale-ver { max-width: 640px; margin: 24px auto; padding: 14px 18px; background: var(--panel);
  border: 1px solid var(--gold); border-radius: 8px; }
.stale-ver h2 { margin: 0 0 8px; color: var(--gold-bright); font-size: 1.15rem; }
.stale-ver p { margin: 6px 0; overflow-wrap: anywhere; }
.stale-ver button { background: var(--bg2); color: var(--ink); border: 1px solid var(--gold);
  border-radius: 5px; padding: 6px 14px; font: inherit; cursor: pointer; }
.stale-ver button:hover { background: var(--panel2); color: var(--gold-bright); }
.err { color: var(--red-bright); }

/* selector de disposición de fuerza (por jugador) antes de generar la partida,
   y cualquier otro <select> dentro de una caja .rule (p. ej. elegir giro) */
.gen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0; }
.gen-bar label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .05em; }
.gen-bar select, .rule select {
  background: var(--bg2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 8px; font: inherit; font-size: .85rem;
}
.gen-bar select:focus, .rule select:focus { outline: none; border-color: var(--gold); }
.gen-bar select { text-transform: none; }
.gen-bar .chip { align-self: flex-end; cursor: pointer; }

/* diagramas de despliegue de las misiones (imagen del diseño de campo de batalla) */
img.mission-map { max-width: 420px; width: 100%; border: 1px solid var(--line); border-radius: 6px; margin-top: 8px; display: block; }
.mission-map-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 8px 0; }
.mission-map-card { width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.mission-map-card img { width: 100%; display: block; }
.mission-map-card p { margin: 6px 8px; font-size: .8rem; color: var(--ink-dim); }
/* en el generador de partida las miniaturas de diseño se pueden elegir; en la
   ficha de misión (galería de "despliegues recomendados") son solo informativas */
.mission-map-grid.selectable .mission-map-card { cursor: pointer; border-width: 2px; border-color: transparent; transition: border-color .15s ease; }
.mission-map-grid.selectable .mission-map-card:hover { border-color: var(--gold); }
.mission-map-grid.selectable .mission-map-card.selected { border-color: var(--gold-bright); }
/* la imagen en sí amplía (clic propio, ver openImageModal); el resto de la
   tarjeta selecciona ese diseño — cursores distintos para que se note */
.mission-map-grid.selectable .mission-map-card img { cursor: zoom-in; }
img.mission-map { cursor: zoom-in; }

/* modal de imagen ampliada (diagramas de despliegue) */
.img-modal { line-height: 0; }
.img-modal img { max-width: 100%; max-height: calc(100vh - 90px); width: auto; margin: 0 auto; display: block; border-radius: 4px; }
.mission-map-grid.selectable .mission-map-card.selected p { color: var(--gold-bright); }

/* secundarias por jugador (elegir fijas/tácticas en el generador de partida) */
.sec-fixed-picks { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.sec-fixed-row { display: flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; }
.sec-name { color: var(--gold-bright); border-bottom: 1px dotted var(--line); cursor: pointer; }
.sec-name:hover { border-bottom-color: var(--gold); }

/* "Deployment Card Key": leyenda de la tarjeta de despliegue física */
.dck { max-width: 480px; }
.dck-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.dck-swatch { width: 56px; height: 56px; border-radius: 6px; flex: 0 0 auto; object-fit: cover; }
.dck-row-body h4 { margin: 0 0 2px; color: var(--gold-bright); font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
.dck-row-body p { margin: 0; font-size: .86rem; color: var(--ink-dim); }
.dck-edge { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dck-edge h4 { margin: 0 0 8px; color: var(--gold-bright); font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
.dck-edge-img { width: 100%; height: 70px; object-fit: cover; object-position: center 53%; display: block; }
.dck-obj { padding: 14px 0; }
.dck-obj h4 { margin: 0 0 2px; color: var(--gold-bright); font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
.dck-obj p { margin: 0 0 10px; font-size: .86rem; color: var(--ink-dim); }
.dck-obj-icons { display: flex; gap: 22px; flex-wrap: wrap; }
.dck-obj-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; text-align: center; }
.dck-obj-icon img { width: 56px; height: 56px; object-fit: cover; }
.dck-obj-icon span { font-size: .78rem; color: var(--ink-dim); }

.ai-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; margin: 8px 0 16px; }
.ai-panel h4 { margin: .6em 0 .2em; }
.ai-panel p { margin: .3em 0; }
.ai-panel ul { margin: .2em 0; padding-left: 1.3em; }
.ai-meta { color: var(--ink-dim); font-size: .78rem; font-style: italic; }

.chat-cfg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.chat-msgs { display: flex; flex-direction: column; gap: 10px; margin: 14px 0;
  max-height: 60vh; overflow-y: auto; }
.chat-msg { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; }
.chat-msg > b { color: var(--gold-bright); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; display: block; margin-bottom: 2px; }
.chat-msg.chat-user { background: var(--bg2); }
.chat-msg.chat-ai p, .chat-msg.chat-ai ul { margin: .3em 0; }
.chat-msg.chat-pending { color: var(--ink-dim); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; font: inherit; padding: 8px 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }

.advice-item { margin: 8px 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg2); padding: 2px 12px; }
.advice-item > summary { cursor: pointer; padding: 8px 0; color: var(--gold-bright);
  font-size: .88rem; }
.advice-item[open] > summary { border-bottom: 1px solid var(--line); }
.advice-body { margin: 8px 0; }
.advice-body h4 { margin: .6em 0 .2em; }
.advice-body ul { margin: .2em 0; padding-left: 1.3em; }

/* ---------- nav + lang toggle ---------- */
.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--ink-dim); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; padding: 4px 10px; border-radius: 4px;
}
.nav a:hover { color: var(--gold-bright); text-decoration: none; background: var(--bg2); }
.nav a.active { color: var(--gold-bright); background: var(--bg2); }
.langtoggle { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.langtoggle button {
  background: var(--bg2); color: var(--ink-dim); border: 0; cursor: pointer;
  font: inherit; font-size: .78rem; padding: 5px 9px;
}
.langtoggle button.active { background: var(--gold); color: #1b1b1b; font-weight: 600; }
.verselect {
  background: var(--bg2); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 4px; font: inherit; font-size: .78rem; padding: 4px 6px;
}
.verselect.historic { border-color: var(--gold); color: var(--gold-bright); background: #2a2320; }

/* ---------- menú hamburguesa + favoritas ---------- */
.menu-btn {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: var(--bg2); color: var(--gold-bright); border: 1px solid var(--line);
  border-radius: 4px; font: inherit; font-size: 1.25rem; line-height: 1;
}
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: var(--gold); background: var(--panel); }
.menu-btn:focus-visible, .fav-btn:focus-visible, .menu-reset:focus-visible, .nav a:focus-visible,
.menu-row a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.nav { flex-wrap: wrap; align-items: center; }
.nav a { display: inline-flex; align-items: center; min-height: 28px; }
/* sección activa que no es favorita: sale en la barra mientras estás en ella */
.nav a.temp { border: 1px dashed var(--line); }
/* fijo bajo la cabecera (o, en móvil, tapando la fila de favoritas, que no hace falta con el
   menú abierto): --menu-top lo pone menuOpen() en app.js; si no cabe, se desplaza por dentro */
.menu-panel {
  position: fixed; top: var(--menu-top, 100px); left: 0; z-index: 25;
  width: min(480px, 100%); max-height: calc(100vh - var(--menu-top, 100px)); max-height: calc(100dvh - var(--menu-top, 100px));
  overflow-y: auto; overscroll-behavior: contain; padding: 12px; margin: 0;
  background: var(--bg); border: 2px solid var(--gold); border-top: 0;
  border-radius: 0 0 8px 0; box-shadow: var(--shadow);
}
.menu-panel[hidden], .menu-tools[hidden] { display: none; }
.menu-hint { margin: 0 0 8px; color: var(--ink-dim); font-size: .8rem; }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu-row { display: flex; align-items: stretch; min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; }
.menu-row a {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--ink); font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; border-radius: 6px 0 0 6px;
}
.menu-row a:hover { text-decoration: none; background: var(--panel); color: var(--gold-bright); }
.menu-row a.active { color: var(--gold-bright); background: var(--panel); box-shadow: inset 3px 0 0 var(--gold); }
.fav-btn {
  flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; cursor: pointer; background: transparent;
  color: var(--ink-dim); border: 0; border-left: 1px solid var(--line); border-radius: 0 6px 6px 0; font-size: 1.25rem; line-height: 1;
}
.fav-btn:hover { color: var(--gold-bright); background: var(--panel); }
.fav-btn[aria-pressed="true"] { color: var(--gold-bright); }
.menu-foot { margin-top: 10px; text-align: right; }
.menu-reset {
  min-height: 44px; padding: 0 14px; cursor: pointer; background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .8rem;
}
.menu-reset:hover { color: var(--gold-bright); border-color: var(--gold); }
.menu-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.menu-tools .search { flex: 0 0 auto; max-width: none; }
.menu-tools-row { display: flex; align-items: center; gap: 10px; }
.menu-tools .meta { white-space: normal; }
/* toques de 44 px en pantallas táctiles y a <= 1024 px (tablet); el ratón en escritorio
   conserva el tamaño compacto de siempre */
@media (max-width: 1024px), (pointer: coarse) {
  .menu-btn { width: 44px; height: 44px; }
  .nav a, .brand { min-height: 44px; }
  .brand { display: inline-flex; align-items: center; }
  .tb-tools input, .tb-tools select, .menu-tools input, .menu-tools select { min-height: 44px; }
  .langtoggle button { min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
  .menu-panel { width: 100%; border-radius: 0; border-left: 0; border-right: 0; padding: 10px 12px; }
  .menu-row a { font-size: .8rem; padding: 0 8px; letter-spacing: .03em; }
  .menu-hint { display: none; }
}

/* ---------- version compare ---------- */
.cmp-fac { margin: 10px 0; }
.cmp-fac > summary { font-size: 1.05rem; }
.cmp-sub {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-dim); margin: 12px 0 2px;
}
.cmp-analysis {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 4px; padding: 8px 12px; margin: 4px 0 12px; font-size: .82rem;
}
.cmp-analysis p { margin: 3px 0; color: var(--ink-dim); }
.cmp-analysis .k { color: var(--ink); font-weight: 600; }
.cmp-verdict { font-family: var(--serif); font-size: .92rem; color: var(--ink); }
.cmp-verdict.cheaper { color: #6fce8f; }
.cmp-verdict.pricier { color: var(--red-bright); }
.cmp-ai { margin: 2px 0 12px; }
.cmp-ai-panel {
  margin-top: 8px; padding: 10px 12px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 4px; font-size: .85rem;
}
.cmp-ds-list { display: grid; gap: 6px; margin: 4px 0 10px; }
.cmp-ds {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 10px;
}
button.cmp-ds-name {
  display: block; width: 100%; font: inherit; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
}
button.cmp-ds-name:hover { color: var(--gold-bright); }
.cmp-ds-name .sub { color: var(--ink-dim); font-size: .72rem; }
.cmp-ds-sum { margin: 3px 0 0; font-size: .78rem; color: var(--ink-dim); }
/* una línea por arma: nombre destacado + sus atributos y palabras clave */
.cmp-ds-weapons { margin: 4px 0 0; }
.cmp-ds-w { margin: 1px 0; font-size: .78rem; color: var(--ink-dim); }
.cmp-ds-w .w-n { color: var(--ink); }
.cmp-ds-w .sub { color: var(--ink-dim); font-size: .72rem; }
.cmp-ds-w .kw-add { color: #6fce8f; font-weight: 400; }
.cmp-ds-w .kw-del { color: var(--red-bright); font-weight: 400; }
.cmp-ds-abils { margin: 5px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-analysis hr, .tm-body hr {
  border: 0; border-top: 1px solid var(--line); margin: 8px 0;
}
.cmp-list { display: grid; gap: 3px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 4px 0 10px; }
.cmp-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
}
.cmp-row .sub { color: var(--ink-dim); font-size: .75rem; }
button.cmp-row-btn {
  font: inherit; text-align: left; width: 100%; cursor: pointer; color: var(--ink);
}
button.cmp-row-btn:hover { border-color: var(--gold); background: var(--bg2); }
.delta { font-family: var(--serif); font-size: .82rem; white-space: nowrap; color: var(--ink-dim); }
/* etiquetas "nueva" / "retirada" (unidades y destacamentos añadidos/quitados) */
.delta.up b { color: #6fce8f; }
.delta.down b { color: var(--red-bright); }
.delta.up, .delta.down { color: var(--ink); }
/* deltas de coste (puntos, PM): menos = verde (más fácil de encajar), más = rojo */
.delta.cheaper b { color: #6fce8f; }
.delta.pricier b { color: var(--red-bright); }
.delta.cheaper, .delta.pricier { color: var(--ink); }

/* ---------- manual ---------- */
.manual-idx { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.manual-idx a {
  display: block; padding: 9px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink);
}
.manual-idx a:hover { border-color: var(--gold); text-decoration: none; }
.manual-idx .n { color: var(--gold); font-family: var(--serif); margin-right: 8px; }

.manual { display: flex; gap: 24px; align-items: flex-start; }
.manual .toc {
  position: sticky; top: 70px; flex: 0 0 180px; font-size: .82rem;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.manual .toc a { display: block; color: var(--ink-dim); padding: 2px 0; }
.manual .toc a:hover { color: var(--gold-bright); }
.manual .body { flex: 1; min-width: 0; }
.rc { margin: 0 0 22px; scroll-margin-top: 70px; }
.rc > h3 {
  font-size: 1.05rem; color: var(--gold-bright); margin: 0 0 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.rc .sub { color: var(--ink-dim); font-size: .75rem; font-family: ui-monospace, monospace; }
.rc p { margin: 8px 0; font-size: .93rem; }
.rc h4 { margin: 14px 0 4px; color: var(--gold); font-size: .95rem; }
.rc details {
  margin: 8px 0; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 12px;
}
.rc details summary { cursor: pointer; color: var(--gold-bright); font-size: .88rem; padding: 4px 0; }
.rc details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.rc blockquote {
  margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--gold);
  background: var(--bg2); font-style: italic; color: var(--ink-dim);
}
.rc ul, .rule ul, .ability ul { margin: 8px 0; padding-left: 22px; }
.rc li, .rule li, .ability li { margin: 3px 0; font-size: .92rem; }
.rc li.i1 { list-style: circle; margin-left: 18px; }
.rc img { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; }

/* imagen de reglas + el texto que la explica, en compacto; pinchar = modal con la imagen grande */
.rc-fig {
  display: flex; gap: 14px; align-items: flex-start; margin: 10px 0; cursor: zoom-in;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 8px;
}
.rc-fig:hover, .rc-fig:focus-visible { border-color: var(--gold); outline: none; }
.rc .rc-fig > img {
  flex: 0 0 auto; width: auto; height: auto; max-width: 42%;
  max-height: min(42vh, 340px); object-fit: contain; margin: 0;
}
.rc-fig-text { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.4; }
.rc-fig-text p, .rc-fig-text div { margin: 4px 0; font-size: inherit; }
.rc-fig-text > :first-child, .rc-fig-text > div > :first-child { margin-top: 0; }
@media (max-width: 560px) {
  .rc-fig { flex-direction: column; }
  .rc .rc-fig > img { max-width: 100%; max-height: 38vh; align-self: center; }
}
.modal.rc-zoom-modal { max-width: 980px; }
.rc-zoom { padding: 14px 16px 16px; }
.rc-zoom > img {
  display: block; max-width: 100%; max-height: 52vh; width: auto; margin: 0 auto;
  object-fit: contain; border-radius: 4px;
}
.rc-zoom-text { margin-top: 12px; max-height: 34vh; overflow-y: auto; font-size: .93rem; }

/* tables embedded in rules / abilities / missions text */
.rc table, .rule table, .ability table, .sheet-body table:not(.w) {
  border-collapse: collapse; margin: 12px 0; font-size: .86rem;
  display: block; max-width: 100%; overflow-x: auto;
}
.rc th, .rc td, .rule th, .rule td,
.ability th, .ability td, .sheet-body table:not(.w) th, .sheet-body table:not(.w) td {
  border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top;
}
.rc th, .rule th, .ability th, .sheet-body table:not(.w) th {
  color: var(--gold); background: var(--bg2); font-weight: 600;
}
.rc u, .rule u { text-decoration-color: var(--gold); }
.es-warn {
  background: #3a2f1a; border: 1px solid var(--gold); color: var(--gold-bright);
  padding: 6px 12px; border-radius: 6px; font-size: .82rem; margin-bottom: 14px;
}
table.ref { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .86rem; }
table.ref th, table.ref td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ref th { color: var(--gold); font-size: .7rem; text-transform: uppercase; }

/* ---------- army list editor ---------- */
.ed-name {
  font-family: var(--serif); font-size: 1.6rem; color: var(--gold-bright);
  background: transparent; border: 0; border-bottom: 1px dashed var(--line);
  width: 100%; padding: 2px 0; margin-bottom: 2px;
}
.ed-name:focus { outline: none; border-bottom-color: var(--gold); }
.ptsbar {
  position: relative; height: 22px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; max-width: 340px;
}
.ptsbar .fill { position: absolute; inset: 0 auto 0 0; background: #2a4a34; }
.ptsbar.over .fill { background: #5a2222; }
.ptsbar span {
  position: relative; z-index: 1; display: block; text-align: center;
  font-size: .8rem; line-height: 22px; color: var(--ink);
}
.unit-name { cursor: pointer; border-bottom: 1px dotted var(--line); }
.unit-name:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }

.modal-ov {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .72);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 28px 14px;
}
.modal {
  position: relative; width: 100%; max-width: 760px;
  background: var(--bg2); border: 1px solid var(--gold); border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.modal.narrow { max-width: 440px; }
.modal .sheet { border: 0; }
.modal-pad { padding: 18px 20px 20px; }
/* mensaje de confirmModal/promptModal: arriba del todo y sin pasar por debajo de la ✕ */
.modal-msg { margin-top: 0; padding-right: 36px; }
.prompt-ta {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font: inherit; font-size: .9rem; resize: vertical;
}
.prompt-ta:focus { outline: none; border-color: var(--gold); }
.term-modal { padding: 16px 20px 20px; }
.term-modal > .orig-btn { top: 12px; right: 46px; }
.term-modal h3 { margin: 0 0 8px; color: var(--gold-bright); font-size: 1.05rem; }
.term-modal .tm-body p { margin: 6px 0; font-size: .92rem; }

/* etiquetas con definición: pinchables en cualquier vista y modal (mecanismo global) */
.kw.gloss, .wk.gloss, .k-tag.gloss { cursor: help; }
.kw.gloss:hover, .wk.gloss:hover { outline: 1px solid var(--gold); }
.k-tag.gloss:hover { text-decoration: underline dotted; }
/* doctrinas de combate pinchables en cualquier texto de reglas (fmt) */
.rule-term { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.rule-term:hover { outline: 1px solid var(--gold); }
.modal-x {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 4px; cursor: pointer; font-size: 1rem; padding: 2px 9px;
}
.modal-x:hover { border-color: var(--gold); color: var(--gold-bright); }

/* miniatura-icono en el listado de unidades de facción */
.ds-thumb {
  flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg2);
}
.ds-thumb-ph { background: repeating-linear-gradient(45deg, #23262e, #23262e 4px, #1c1f26 4px, #1c1f26 8px); }
.ds-row-name { flex: 1 1 auto; min-width: 0; }
.ds-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ds-row-tags .tag { margin-left: 0; }
.ds-row .pts, .ds-row .vs-btn { flex-shrink: 0; }
#colRows .ds-row-name, .col-owned .ds-row-name { min-width: 90px; }
.ds-list .ds-row { padding: 6px 10px; }

/* ---------- comparador de unidades ---------- */
.vs-thumb {
  display: block; width: auto; height: auto; max-width: 120px; max-height: 170px;
  border: 1px solid var(--line); border-radius: 4px; margin: 0 auto 6px; cursor: pointer;
}
.vs-btn, .link-btn {
  flex: 0 0 auto; background: var(--bg2); border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: 4px; cursor: pointer;
  font-size: .85rem; line-height: 1; padding: 3px 6px; margin-left: 6px;
}
.vs-btn:hover, .link-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.sheet-head .link-btn, .sheet-head .vs-btn { margin-top: 8px; }
.vs-btn.on { background: var(--gold); color: #1b1b1b; border-color: var(--gold); }

body:has(> #vsBar:not([hidden])) { padding-bottom: 64px; }
.vs-bar[hidden] { display: none; } /* sin esto la barra vacía dejaba una franja fija abajo que tapaba otras barras */
.vs-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; background: #1a1d24; border-top: 2px solid var(--gold);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
}
.vs-bar .vs-lbl { color: var(--gold-bright); font-size: .82rem; font-family: var(--serif); }
.vs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 4px 2px 10px; font-size: .8rem;
}
.vs-chip b { cursor: pointer; color: var(--ink-dim); padding: 0 4px; }
.vs-chip b:hover { color: var(--red-bright); }
.vs-bar .vs-go, .vs-bar .vs-clr {
  cursor: pointer; font-size: .82rem; padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--line);
}
.vs-bar .vs-go { background: var(--gold); color: #1b1b1b; border-color: var(--gold); margin-left: auto; }
.vs-bar .vs-go.off { background: var(--bg2); color: var(--ink-dim); cursor: default; }
.vs-bar .vs-clr { color: var(--ink-dim); }

.mathlab-builder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.mathlab-builder select { max-width: 220px; }
table.vs td.ml-ab-cell { max-width: none; }
table.vs td.ml-ab-cell .ab-chip { display: inline-block; margin: 2px 3px 2px 0; }
.vs-scroll { overflow-x: auto; }
table.vs { border-collapse: collapse; margin: 12px 0; font-size: .88rem; min-width: 100%; }
table.vs th, table.vs td {
  border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top;
}
table.vs th { color: var(--gold); background: var(--bg2); white-space: nowrap; width: 1%; }
table.vs .vs-head td { background: linear-gradient(180deg, #2f2622, #241d1a); position: relative; }
table.vs .vs-head td .sub { color: var(--ink-dim); font-size: .75rem; }
table.vs .vs-head .vs-btn { position: absolute; top: 4px; right: 4px; }
table.vs td.vs-best { background: rgba(111, 206, 143, .16); color: #cdefd8; font-weight: 600; }
table.vs td.vs-worst { background: rgba(192, 57, 43, .16); color: #f0c9c4; }
table.vs .kw { cursor: help; }
table.vs .kw.ability-link { cursor: pointer; }
table.vs .kw.ability-link:hover { outline: 1px solid var(--gold); }
.lead-cond { color: var(--ink-dim); font-size: .85em; }
.vs-unit { display: inline-block; }
table.vs td { min-width: 118px; max-width: 180px; vertical-align: top; }
table.vs th { min-width: 0; white-space: nowrap; }
table.vs .vs-head td { min-width: 118px; }
table.vs .wk { font-size: .6rem; padding: 0 2px; line-height: 1.4; }
.vs-w { margin: 0 0 6px; font-size: .76rem; line-height: 1.35; word-break: break-word; }
.vs-w b { color: var(--gold-bright); }
.vs-w .wn { color: var(--ink-dim); }
.vs-w .def { color: var(--ink-dim); font-style: normal; font-size: .9em; }

/* comparativa de armamento (#/armamento): el editor de armas de Listas dentro de la celda.
   Todo bajo .lo-table: #/vs y el Laboratorio no cambian. */
.lo-table .vs-head .vs-btn.vs-dup { right: 36px; }
.lo-table .vs-head .vs-dup svg { display: block; }
.lo-table .vs-thumb { max-height: 110px; }
table.lo-table > tbody > tr > td { min-width: 330px; max-width: 420px; }
.lo-table td.cw-cell select.mini { width: 100%; max-width: 100%; margin-bottom: 4px; }
.lo-table .wpn-tbl { width: 100%; font-size: .7rem; margin: 0 0 6px; }
.lo-table .wpn-tbl th, .lo-table .wpn-tbl td {
  min-width: 0; max-width: none; width: auto; border: 0; border-bottom: 1px solid var(--line);
  padding: 3px 3px; white-space: normal; background: none;
}
.lo-table .wpn-tbl th { color: var(--gold); font-size: .64rem; }
.lo-table .wpn-tbl th.n:last-child, .lo-table .wpn-tbl td.wpn-step-cell { width: 76px; }
.lo-table .wpn-tbl td.wname { color: var(--ink); }
.lo-table .wk { font-size: .58rem; }
.lo-table .wpn-comp, .lo-table .wpn-options { font-size: .72rem; }
@media (max-width: 640px) {
  table.lo-table > tbody > tr > th { white-space: normal; width: 84px; max-width: 84px; font-size: .74rem; padding: 6px; }
}

@media (max-width: 640px) {
  .vs-bar { font-size: .78rem; }
}
@media print {
  .vs-bar { display: none !important; }
  table.vs td.vs-best { background: #e7f6ec; color: #000; }
  table.vs td.vs-worst { background: #fbe7e4; color: #000; }
  table.vs th { color: #000; background: #f0ebda; }
}

.det-box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 10px 0; }
.det-hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .85rem; }
.det-hdr .err { color: var(--red-bright); }
.det-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.det-row:last-child { border-bottom: 0; }
.det-row .sub { color: var(--ink-dim); font-size: .75rem; }
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--gold);
  color: var(--gold-bright); font-size: .68rem; font-style: normal; cursor: pointer;
  margin: 0 4px; vertical-align: middle;
}
.info-i:hover { background: var(--gold); color: #1b1b1b; }

.mh-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 12px; margin: 8px 0; font-size: .85rem;
}
.mh-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.mh-chip { color: var(--ink-dim); font-size: .8rem; }
.mh-chip b { color: var(--gold-bright); font-weight: normal; font-family: var(--serif); }
.mh-loadout { margin-top: 6px; font-size: .8rem; color: var(--ink-dim); }
.mh-loadout summary { cursor: pointer; }
.mh-lo-title { margin-top: 4px; color: var(--ink); }
.mh-lo-list { margin: 2px 0 0; padding-left: 18px; }

.msg { padding: 6px 12px; border-radius: 5px; font-size: .86rem; margin: 5px 0; }
.msg.err { background: #3a1e1e; border: 1px solid var(--red-bright); color: #f2c9c9; }
.msg.warn { background: #3a2f1a; border: 1px solid var(--gold); color: var(--gold-bright); }
.msg.info { background: var(--bg2); border: 1px solid var(--line); }
.msg.info summary { cursor: pointer; color: var(--gold); }
.editor { display: flex; gap: 20px; align-items: flex-start; margin-top: 10px; }
.editor .col { flex: 1; min-width: 0; }
.rgrp { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
        color: var(--gold); margin: 12px 0 4px; }
.rost-row, .unit-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; margin: 4px 0;
}
.rost-row > span:first-child, .unit-row .ur-top { flex: 1; min-width: 120px; }
select.mini, input.mini {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font-size: .78rem; padding: 3px 5px; max-width: 190px;
}

/* dropdown "clásico" (reemplaza <select> nativo donde da problemas) */
.cdd { position: relative; display: inline-block; }
.cdd-btn {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font-size: .78rem; padding: 4px 24px 4px 8px; max-width: 220px;
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; position: relative;
}
.cdd-btn::after {
  content: "▾"; position: absolute; right: 7px; top: 50%;
  transform: translateY(-50%); color: var(--gold);
}
.cdd-btn:hover { border-color: var(--gold); }
.cdd.cdd-disabled .cdd-btn { opacity: .55; cursor: default; }
.cdd.cdd-disabled .cdd-btn:hover { border-color: var(--line); }
.cdd-list {
  position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; min-width: 100%;
  max-width: 340px; max-height: 280px; overflow-y: auto; background: var(--bg2);
  border: 1px solid var(--gold); border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.cdd-item {
  padding: 6px 10px; font-size: .78rem; cursor: pointer; white-space: normal;
}
.cdd-item:hover { background: var(--panel2); }
.cdd-item.sel { color: var(--gold-bright); }
.cdd-item.cdd-item-disabled { color: var(--ink-dim); cursor: default; font-style: italic; }
.cdd-item.cdd-item-disabled:hover { background: none; }
.addbtn, .paintbtn {
  background: var(--bg2); border: 1px solid var(--gold); color: var(--gold-bright);
  border-radius: 4px; cursor: pointer; font-size: .9rem; padding: 2px 9px; line-height: 1.2;
}
.addbtn:hover, .paintbtn:hover { background: var(--gold); color: #1b1b1b; }
/* envuelve los dos steppers (cantidad + pintado): pueden apilarse entre
   ellos sin que la fila entera envuelva y empuje el nombre bajo la foto */
.col-steps { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; margin-left: auto; }
.col-steps .col-step { margin-left: 0; }
/* cuántas de las compradas están pintadas: mismo tamaño que el stepper de
   cantidad, solo visible si ya tienes alguna */
.col-paint { color: var(--ink-dim); }
.col-paint[hidden] { display: none; }
.col-paint .col-p { min-width: 1.6em; text-align: center; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.col-paint .paintbtn { width: 26px; }
.unit-row { flex-direction: column; align-items: stretch; }
.unit-row .ur-top { display: flex; justify-content: space-between; align-items: baseline; }
.unit-row .ur-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.unit-row .ur-ctl label { font-size: .8rem; color: var(--ink-dim); }
.unit-row .attach-in { color: var(--gold); font-size: .78rem; }

.wpn-alert {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; margin: 0 6px; cursor: default;
}
.wpn-alert[hidden] { display: none; }
.wpn-panel { margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 4px; }
.wpn-panel > summary { cursor: pointer; font-size: .78rem; color: var(--ink-dim); }
.wpn-default-btn { margin-left: 8px; padding: 1px 9px; font-size: .74rem; vertical-align: 1px; }
.wpn-body { margin-top: 6px; }
.wpn-comp, .wpn-options { font-size: .8rem; color: var(--ink-dim); margin-bottom: 6px; }
.wpn-grp h4 { margin: 6px 0 2px; font-size: .8rem; color: var(--gold-bright); }
.wpn-line {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  border-top: 1px dashed var(--line);
}
.wpn-line:first-of-type { border-top: none; }
.wpn-name { flex: 1; min-width: 120px; }
.wg-link { cursor: help; text-decoration: underline dotted var(--gold); text-underline-offset: 3px; }
.wg-link:hover, .wg-link:focus-visible { color: var(--gold-bright); outline: none; }
.wpn-stats { color: var(--ink-dim); font-size: .76rem; }
.wpn-tbl { font-size: .8rem; }
.wpn-tbl th, .wpn-tbl td { padding: 4px 6px; }
.wpn-tbl td.wpn-step-cell, .wpn-tbl th.n:last-child { width: 90px; }
.wpn-tbl .col-step { justify-content: center; margin-left: 0; }
@media (max-width: 720px) { .editor { flex-direction: column; } }

.printview h3 { margin: 16px 0 4px; color: var(--gold); }
.printview ul { margin: 0 0 8px; padding-left: 22px; }
.printview li { margin: 2px 0; }

/* ---------- datacards (impresión de la lista) ---------- */
.cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.cardsview { max-width: 210mm; margin: 0 auto; }
.datacard {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--panel); break-inside: avoid;
}
.datacard .dc-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: linear-gradient(180deg, #2f2622, #241d1a);
  border-bottom: 2px solid var(--gold); padding: 8px 12px;
  cursor: pointer;
}
.datacard .dc-head h3 { margin: 0; font-size: 1.05rem; color: var(--gold-bright); }
.datacard .dc-right { display: flex; align-items: center; gap: 8px; }
.datacard .dc-pts { font-family: var(--serif); color: var(--gold-bright); white-space: nowrap; }
.datacard .dc-right .orig-btn { position: static; }
.datacard .dc-right .ref-btn {
  width: 22px; height: 20px; padding: 0; line-height: 18px; text-align: center;
  font-size: .8rem; border-radius: 3px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--line);
}
.datacard .dc-right .ref-btn:hover { border-color: var(--gold); }
.datacard .dc-chevron { display: inline-block; color: var(--ink-dim); transition: transform .15s; }
.datacard.collapsed .dc-chevron { transform: rotate(-90deg); }
.datacard.collapsed .dc-head { border-bottom-width: 1px; }
/* dc-sub se queda visible al plegar: es donde va la mejora elegida, junto al
   resto del texto descriptivo (composición, Señor de la Guerra...); solo se
   oculta el cuerpo pesado (armas/habilidades/reglas). */
.datacard.collapsed .dc-body { display: none; }
.datacard.collapsed .dc-sub { border-bottom: 0; }
.datacard .dc-sub { padding: 5px 12px; font-size: .78rem; color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.datacard .dc-sub b { color: var(--gold); }
.datacard .dc-body { padding: 8px 12px 12px; }
.datacard .dc-body h2 { font-size: .95rem; margin: 12px 0 6px; }
.datacard .dc-body .statline { margin: 6px 0; }

@media print {
  .topbar, .foot, .noprint, .prob-link { display: none !important; }
  body { background: #fff; color: #000; }
  .view { max-width: none; padding: 0; }
  .printview h1, .printview h3 { color: #000; }
  .cardsview { max-width: none; }
  .cards { grid-template-columns: 1fr; gap: 5mm; }
  .datacard { border-color: #999; background: #fff; }
  .strat { background: #fff; border-color: #999; break-inside: avoid; }
  .strat.collapsible.collapsed dl { display: block; }
  .list-strats .strat-phase, .strat .sh h3 { color: #000; }
  .datacard .dc-head { background: #eee; border-bottom-color: #333; }
  .datacard .dc-head h3, .datacard .dc-pts, .datacard .dc-sub b { color: #000; }
  .datacard .dc-sub { color: #333; }
  .datacard table.w th, .datacard .ability .an, .datacard .rc .k-tag { color: #000; }
  .datacard .unit-name { cursor: default; border-bottom: 0; }
  /* imprimir siempre despliega, aunque en pantalla estuviera colapsada */
  .datacard .dc-head { cursor: default; }
  .datacard.collapsed .dc-sub, .datacard.collapsed .dc-body { display: block; }
}

/* ---------- missions ---------- */
ul.mscore { list-style: none; margin: 6px 0 0; padding: 0; }
ul.mscore li { margin: 6px 0; font-size: .92rem; padding-left: 4px; }
ul.mscore .vp {
  display: inline-block; background: var(--red-bright); color: #fff;
  font-family: var(--serif); border-radius: 4px; padding: 0 7px;
  font-size: .8rem; margin-right: 6px;
}
.chip.active { border-color: var(--gold); color: var(--gold-bright); background: var(--bg2); }
#rerolls .chip { cursor: pointer; }
.rc .sub, .rule .sub { color: var(--ink-dim); font-size: .78rem; margin: 2px 0; }

@media (max-width: 760px) {
  .manual { flex-direction: column; }
  .manual .toc { position: static; max-height: none; flex-basis: auto; }
}
/* Cabecera responsive. Fila 1 = ☰ + marca + (secciones favoritas) + idioma; fila 2 = buscador +
   versión de datos + estado. A <= 1024 px las secciones favoritas bajan a su propia fila
   (si no, la marca y el menú se pelean por el ancho) y los controles pasan a 44 px de alto
   (tablet táctil); a <= 640 px (móvil) buscador, versión, idioma y estado se mudan al panel
   del menú (navPlaceTools en app.js) y la cabecera queda en ☰ + marca + favoritas. */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  .tb-main .nav { flex: 1 1 100%; order: 3; }
  .tb-main .langtoggle { order: 2; margin-left: auto; }
}
@media (max-width: 640px) {
  .topbar { padding: 8px 12px; }
  .brand span { padding-left: 8px; margin-left: 4px; }
  .nav a { padding: 0 9px; font-size: .78rem; }
  .nav { gap: 2px; }
}
@media (min-width: 1025px) {
  .tb-main .nav { flex: 1 1 0; min-width: 0; }
  .tb-main .langtoggle { margin-left: 0; }
}

/* ---------- filtro de facción: buscador + chips de palabras clave ---------- */
:root {
  --kw-type-bg: #2a3a4a; --kw-type-ink: #c8dcf0;
  --kw-armour-bg: #4a3a22; --kw-armour-ink: #f0dcb0;
  --kw-mobility-bg: #234a45; --kw-mobility-ink: #bfeae3;
  --kw-role-bg: #4a2a3a; --kw-role-ink: #f0c8dc;
  --kw-gear-bg: #3c3a2a; --kw-gear-ink: #e6e2b8;
  --kw-faction-bg: #2a4a34; --kw-faction-ink: #c8e6d2;
  --kw-other-bg: #353a45; --kw-other-ink: #cfd3dc;
}
.fac-filter { margin: 14px 0 6px; position: relative; }
.fac-filter-bar { display: flex; align-items: center; gap: 8px 10px; }
.fac-search {
  flex: 1 1 240px; min-width: 0; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font-size: .95rem;
}
.fac-facets { display: flex; flex: 0 1 auto; gap: 6px; min-width: 0; }
.fac-facet {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  border: 1px solid transparent; border-radius: 6px; padding: 6px 10px;
  font-size: .82rem; cursor: pointer; font-family: inherit;
}
.fac-facet .car { font-size: .7rem; opacity: .7; }
.fac-facet.on, .fac-facet[aria-expanded="true"] { border-color: var(--gold-bright); }
.fac-facet.on { font-weight: 600; }
.fac-pop {
  position: absolute; z-index: 20; max-width: 100%; min-width: 220px; box-sizing: border-box;
  background: var(--panel2); border: 1px solid var(--gold); border-radius: 8px;
  padding: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.fac-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.fac-active-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fac-status { color: var(--ink-dim); font-size: .85rem; margin-left: auto; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.kw-chip {
  border: 1px solid transparent; border-radius: 999px; padding: 2px 10px;
  font-size: .8rem; cursor: pointer; font-family: inherit;
}
.kw-chip .n { opacity: .65; font-size: .72rem; margin-left: 2px; }
.kw-chip.on { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright); font-weight: 600; }
.kw-chip.dim { opacity: .35; }
.fac-filter [hidden], .ds-list[hidden], .ds-row[hidden], h2[hidden] { display: none !important; }
/* móvil: buscador en la 1.ª línea; facetas en la 2.ª, con scroll horizontal; el popover ocupa todo el ancho */
@media (max-width: 600px) {
  .fac-filter-bar { flex-wrap: wrap; }
  .fac-search { flex-basis: 100%; }
  .fac-facets { flex: 1 1 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .fac-facets::-webkit-scrollbar { display: none; }
  .fac-pop { left: 0 !important; right: 0; }
}
.fac-facet.kw-type, .kw-chip.kw-type { background: var(--kw-type-bg); color: var(--kw-type-ink); }
.fac-facet.kw-armour, .kw-chip.kw-armour { background: var(--kw-armour-bg); color: var(--kw-armour-ink); }
.fac-facet.kw-mobility, .kw-chip.kw-mobility { background: var(--kw-mobility-bg); color: var(--kw-mobility-ink); }
.fac-facet.kw-role, .kw-chip.kw-role { background: var(--kw-role-bg); color: var(--kw-role-ink); }
.fac-facet.kw-gear, .kw-chip.kw-gear { background: var(--kw-gear-bg); color: var(--kw-gear-ink); }
.fac-facet.kw-faction, .kw-chip.kw-faction { background: var(--kw-faction-bg); color: var(--kw-faction-ink); }
.fac-facet.kw-other, .kw-chip.kw-other { background: var(--kw-other-bg); color: var(--kw-other-ink); }
.fac-clear {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 12px; font-size: .82rem; cursor: pointer; font-family: inherit;
}
.fac-clear:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---------- simulador de combate (#/simulador) ----------
   Todo bajo .sim-*: las vistas que comparten el editor de armas (#/armamento, Listas) no cambian. */
.sim-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0; }
.sim-col { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.sim-col > h2 { margin: 0 0 6px; font-size: 1rem; color: var(--gold-bright); font-family: var(--serif); }
.sim-pick { margin: 6px 0 10px; gap: 6px; }
.sim-pick select { flex: 1 1 130px; min-width: 0; max-width: 100%; }
.sim-pick .chip { cursor: pointer; }
.sim-pick .chip:disabled { opacity: .5; cursor: default; }
.sim-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.sim-head .vs-thumb { margin: 0; flex: 0 0 auto; max-width: 64px; max-height: 92px; }
.sim-who { flex: 1 1 auto; min-width: 0; }
.sim-who .sub { color: var(--ink-dim); font-size: .75rem; }
.sim-head .vs-btn { margin-left: 0; }
.sim-fld { margin: 8px 0; min-width: 0; }
.sim-lbl { font-size: .72rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.sim-body { min-width: 0; overflow-x: auto; }
.sim-body select.mini { width: 100%; max-width: 100%; margin-bottom: 4px; }
.sim-col .wpn-tbl { width: 100%; font-size: .7rem; margin: 0 0 6px; }
.sim-col .wpn-tbl th, .sim-col .wpn-tbl td {
  min-width: 0; max-width: none; width: auto; border: 0; border-bottom: 1px solid var(--line);
  padding: 3px 3px; white-space: normal; background: none;
}
.sim-col .wpn-tbl th { color: var(--gold); font-size: .64rem; }
.sim-col .wpn-tbl th.n:last-child, .sim-col .wpn-tbl td.wpn-step-cell { width: 76px; }
.sim-col .wpn-tbl td.wname { color: var(--ink); }
.sim-col .wk { font-size: .58rem; }
.sim-col .wpn-comp, .sim-col .wpn-options { font-size: .72rem; }
.sim-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; margin: 10px 0; }
.sim-sits { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 0 1 auto; }
.sim-sits-h { font-size: .72rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.sim-sit { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; cursor: pointer; }
.sim-sit input { margin-top: 3px; flex: 0 0 auto; }
.sim-sit span { display: flex; flex-direction: column; min-width: 0; }
.sim-sit small { color: var(--ink-dim); font-size: .75rem; }
.sim-ctl #simGo { cursor: pointer; background: var(--gold); color: #1b1b1b; border-color: var(--gold); font-weight: 600; padding: 5px 18px; }
.sim-ctl #simGo:disabled { opacity: .6; cursor: default; }

/* condiciones y estratagema de cada unidad del simulador (E10) */
.sim-opts { margin-top: 6px; }
.sim-cond { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; cursor: pointer; margin: 4px 0; }
.sim-cond input { margin-top: 3px; flex: 0 0 auto; }
.sim-cond span { display: flex; flex-direction: column; min-width: 0; }
.sim-cond small, .sim-cond-sel small { color: var(--ink-dim); font-size: .72rem; }
.sim-cond-sel { margin: 6px 0 2px; font-size: .82rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-cond-sel label { display: flex; flex-direction: column; gap: 2px; }
.sim-cond-sel select, .sim-opts select.mini { width: 100%; max-width: 100%; }
.sim-strat-lead { font-size: .78rem; margin: 4px 0 0; color: var(--ink); }
.sim-strat-lead ul { margin: 2px 0 0; padding-left: 18px; }
.sim-strat-more { font-size: .75rem; margin-top: 4px; }
.sim-strat-more summary { cursor: pointer; color: var(--gold); }
.sim-strat-more .strat-txt { margin: 4px 0; }
.sim-applied { margin: 10px 0; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.sim-applied h3 { margin: 0 0 4px; font-size: .95rem; }
.sim-applied ul { margin: 0 0 4px; padding-left: 18px; font-size: .85rem; }
.sim-stale-note { display: none; margin: 0 0 8px; color: var(--gold-bright); font-size: .85rem; }
.sim-stale .sim-stale-note { display: block; }
.sim-stale .sim-block { opacity: .45; }
.sim-block { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 14px 0; min-width: 0; }
.sim-block h3 { margin: 0; color: var(--gold-bright); font-family: var(--serif); font-size: 1.05rem; }
.sim-block > .sub { color: var(--ink-dim); font-size: .82rem; margin-bottom: 6px; }
.sim-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.sim-pair > div { min-width: 0; }
.sim-pair h4 { margin: 8px 0 0; font-size: .9rem; color: var(--ink); }
.sim-aside { color: var(--ink-dim); font-weight: 400; font-size: .78rem; }
.sim-lead { margin: 8px 0 4px; font-size: 1.02rem; }
.sim-lead b { color: var(--gold-bright); font-size: 1.2rem; font-family: var(--serif); }
.sim-lead2 { margin: 2px 0; font-size: .9rem; color: var(--ink); }
.sim-lead2 b { color: var(--gold-bright); }
.sim-reply .sim-lead b, .sim-reply .sim-lead2 b { color: #a9c8ec; }
.sim-foot { margin: 8px 0 0; font-size: .85rem; color: var(--ink-dim); }
.sim-cap { margin-top: 4px; font-size: .72rem; color: var(--ink-dim); }
.sim-note { margin: -2px 0 4px calc(5.2em + 8px); font-size: .76rem; color: var(--gold-bright); }
.sim-reply .sim-note { color: #a9c8ec; }
.sim-row-hl .sim-k, .sim-row-hl .sim-p { color: var(--ink); font-weight: 600; }
.sim-sub { font-size: .88rem; color: var(--gold); margin: 12px 0 4px; }
.sim-row { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 4.6em; align-items: center; gap: 8px; font-size: .78rem; line-height: 1.5; }
.sim-k { color: var(--ink-dim); white-space: nowrap; }
.sim-p { text-align: right; }
.sim-bar { height: 9px; background: var(--bg2); border-radius: 5px; overflow: hidden; }
.sim-bar i { display: block; height: 100%; background: var(--gold); }
.sim-hist { display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--line); padding-top: 4px; }
.sim-hb { flex: 1 1 0; min-width: 0; max-width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.sim-hb i { display: block; width: 100%; background: var(--gold); border-radius: 2px 2px 0 0; }
.sim-hb em { font-style: normal; font-size: .62rem; color: var(--ink-dim); height: 1.3em; line-height: 1.3em; white-space: nowrap; }
.sim-mode i { background: var(--gold-bright); outline: 1px solid var(--gold-bright); outline-offset: 1px; }
.sim-mode em, .sim-mode span { color: var(--ink); font-weight: 700; }
.sim-hb span { font-size: .66rem; color: var(--ink-dim); height: 1.3em; line-height: 1.3em; }
.sim-reply .sim-bar i, .sim-reply .sim-hb i { background: #6f9bd1; }
.sim-reply .sim-mode i { background: #a9c8ec; outline-color: #a9c8ec; }
@media (max-width: 760px) {
  .sim-cols, .sim-pair { grid-template-columns: minmax(0, 1fr); }
  .sim-lead b { font-size: 1.1rem; }
}

/* modales informativas que se entienden solas (#20): tabla de blancos, leyenda del 🎲 y notas */
.info-modal .ref-tbl { font-size: .82rem; }
.info-modal .ref-tbl td:nth-child(n+3), .info-modal .ref-tbl th:nth-child(n+3) { white-space: nowrap; padding: 5px 6px; text-align: center; }
.info-modal .ref-tbl tr.ref-hl td { background: rgba(111, 206, 143, .16); color: var(--ink); font-weight: 600; }
.info-modal .ref-tbl tr.ref-dim td { color: var(--ink-dim); }
.info-modal li.ref-hl { color: var(--gold-bright); }
.info-modal p.info-note { font-size: .78rem; color: var(--ink-dim); }
.rk-how-body h3 { margin: 16px 0 4px; color: var(--gold-bright); font-size: 1rem; }
.rk-how-body details { margin: 8px 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.rk-how-body summary { cursor: pointer; color: var(--gold-bright); }
.rk-how-body ul { margin: 4px 0; padding-left: 20px; }
.rk-arms-tbl { width: 100%; font-size: .82rem; border-collapse: collapse; margin: 4px 0 10px; }
.rk-arms-tbl th, .rk-arms-tbl td { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.rk-arms-tbl td:first-child { white-space: nowrap; }
@media (max-width: 600px) { .rk-arms-tbl { font-size: .74rem; } .rk-arms-tbl th, .rk-arms-tbl td { padding: 4px 3px; } }
.rk-how { font-family: inherit; font-size: .82rem; font-weight: 400; letter-spacing: 0; vertical-align: middle; margin-left: 8px; cursor: pointer; }
.prob-legend { margin-top: 10px; font-size: .8rem; color: var(--ink-dim); }
.prob-legend h4 { margin: 0 0 4px; font-size: .75rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.prob-legend p { margin: 4px 0; }
.prob-legend ul { margin: 6px 0; padding-left: 18px; }
.prob-legend li { margin: 3px 0; }
.prob-legend li[hidden] { display: none; }
.prob-legend b { color: var(--ink); }
@media (max-width: 480px) {
  .info-modal .ref-tbl { font-size: .74rem; }
  .info-modal .ref-tbl td, .info-modal .ref-tbl th { padding: 4px 4px; }
  .info-modal .ref-tbl td:nth-child(n+3), .info-modal .ref-tbl th:nth-child(n+3) { padding: 4px 3px; }
}

/* casilla «comparar en el laboratorio» (columna #) y su barra flotante */
.rk-tbl .rk-pick { margin: 0 3px 0 0; vertical-align: middle; cursor: pointer; }
.rk-pickbar { position: sticky; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg2); border-top: 2px solid var(--line); }
.rk-pickbar[hidden] { display: none; }
.rk-pickhelp { margin-top: 8px; }

/* ---------- #/efectos: revisión de los efectos de las reglas ---------- */
.fx-view { max-width: 1100px; }
.fx-help { margin: 10px 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; }
.fx-help > summary { cursor: pointer; color: var(--gold-bright); font-weight: 600; }
.fx-help-body { margin-top: 8px; font-size: .92rem; }
.fx-help-body details { margin: 6px 0; }
.fx-help-body summary { cursor: pointer; color: var(--gold); }
.fx-help-body ul { margin: 4px 0 8px; padding-left: 20px; }
.fx-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 10px 0; }
.fx-bar label { display: flex; flex-direction: column; font-size: .78rem; color: var(--ink-dim); gap: 2px; min-width: 0; }
.fx-bar select, .fx-bar input, .fx-form select, .fx-form input:not([type=checkbox]) {
  background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 8px; font-size: .9rem; max-width: 100%;
}
.fx-bar .fx-q { flex: 1 1 200px; }
.fx-progress { margin: 6px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fx-progress progress { width: 200px; max-width: 100%; accent-color: var(--gold); }
.fx-sub { color: var(--ink-dim); font-size: .85rem; margin: 4px 0; }
.fx-pending {
  position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: #3a2f12; border: 1px solid var(--gold); border-radius: 6px; padding: 8px 14px; margin: 8px 0;
}
.fx-pending[hidden] { display: none; }
.fx-pending .chip, .fx-btn, .fx-form .chip { cursor: pointer; font: inherit; font-size: .85rem; color: var(--ink); }
.fx-pending .fx-apply, .fx-go { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight: 600; }
.fx-btn:disabled { opacity: .5; cursor: default; }
.fx-row { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.fx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.fx-head h3 { margin: 0; font-size: 1.05rem; font-family: var(--serif); color: var(--gold-bright); }
.fx-head h3 small { color: var(--ink-dim); font-weight: 400; font-size: .8rem; }
.fx-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.fx-state { font-size: .75rem; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--line); white-space: nowrap; }
.fx-state.s-ok { background: #1f3a2a; color: #9be3b4; border-color: #3f7a55; }
.fx-state.s-auto { background: #1b2f45; color: #9cc7f0; border-color: #3f6b99; }
.fx-state.s-prop { background: #3d3314; color: #f0d58a; border-color: #8a7330; }
.fx-state.s-none { background: var(--bg2); color: var(--ink-dim); }
.fx-state.s-old, .fx-state.s-bad { background: #3d1c1c; color: #f0a8a0; border-color: #8a2b2b; }
.fx-dot { font-size: .72rem; color: var(--gold-bright); border: 1px dashed var(--gold); border-radius: 999px; padding: 0 8px; }
.fx-units { font-size: .88rem; margin: 6px 0; }
.fx-text { font-size: .9rem; margin: 6px 0; max-height: 14em; overflow: auto; background: var(--bg2); border-radius: 6px; padding: 4px 10px; }
.fx-text p { margin: .3em 0; }
.fx-other summary { cursor: pointer; font-size: .82rem; color: var(--ink-dim); }
.fx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.fx-col { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; min-width: 0; }
.fx-col h4 { margin: 2px 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); }
.fx-prop { border-color: #8a7330; }
.fx-cur { border-color: #3f7a55; }
.fx-eff { margin: 4px 0; padding-left: 18px; font-size: .9rem; }
.fx-eff li { margin: 4px 0; }
.fx-who { font-weight: 600; }
.fx-what { color: var(--gold-bright); }
.fx-when { color: #a9c7e8; }
.fx-w, .fx-choice { color: var(--ink-dim); font-size: .8rem; }
.fx-note, .fx-none, .fx-eng { color: var(--ink-dim); font-size: .82rem; margin: 3px 0; }
.fx-unmod { font-size: .85rem; color: #e6c38a; margin: 6px 0; }
.fx-auto { font-size: .85rem; color: #9cc7f0; margin: 4px 0 6px; }
.fx-queue { font-size: .88rem; color: #e6c38a; margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--gold); background: var(--panel); }
.fx-audit { margin: 8px 0; padding: 8px 14px; background: #1b2f45; border: 1px solid #3f6b99; border-radius: 6px; font-size: .92rem; }
.fx-audit p { margin: 4px 0; }
.fx-audit .chip { cursor: pointer; font: inherit; font-size: .85rem; color: var(--ink); margin-left: 6px; }
.fx-audit[hidden] { display: none; }
.modal-check { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding-right: 36px; font-size: .92rem; }
.fx-conf { font-size: .85rem; margin: 2px 0 4px; }
.fx-conf-alta b { color: #9be3b4; }
.fx-conf-media b { color: #f0d58a; }
.fx-conf-baja b, .fx-conf-baja { color: #f0a8a0; }
.fx-reasons { color: #f0a8a0; font-size: .85rem; margin: 4px 0; padding-left: 18px; }
.fx-tags { margin: 4px 0; }
.fx-tags .chip { font-size: .72rem; padding: 0 8px; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fx-msg { margin: 6px 0; }
.fx-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; }
.fx-pager .chip { cursor: pointer; font: inherit; font-size: .85rem; color: var(--ink); }
.fx-pager .chip:disabled { opacity: .4; cursor: default; }
/* formulario de edición */
.fx-editor { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.fx-eff-card { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; background: var(--bg); }
.fx-field { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fx-field > .fx-lbl { flex: 1 1 100%; font-size: .8rem; color: var(--ink-dim); }
.fx-field label { font-size: .85rem; }
.fx-e-hint { flex: 1 1 100%; color: var(--ink-dim); font-size: .78rem; }
.fx-mods, .fx-atoms { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; }
.fx-mod, .fx-atom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fx-m-val { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fx-m-val input[type=number] { width: 5em; }
.fx-chk { font-size: .82rem; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.fx-a-kws, .fx-tagbox { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fx-a-self { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; order: 3; }
.fx-atom .fx-x { order: 2; }
.fx-a-skws { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fx-a-new { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fx-a-new input { width: min(320px, 100%); }
.fx-form textarea { display: block; margin-top: 4px; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font: inherit; font-size: .9rem; width: min(640px, 100%); box-sizing: border-box; }
.fx-form select.fx-bad { border-color: var(--red-bright); color: #f0a8a0; }
.fx-e-bad { flex: 1 1 100%; font-size: .8rem; }
.fx-x { background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.fx-x:hover { color: var(--red-bright); }
.fx-form .fx-note-in { width: min(520px, 100%); }
.fx-errs ul, .fx-msg ul { margin: 4px 0; padding-left: 18px; }
@media (max-width: 640px) {
  .fx-mod select, .fx-atom select, .fx-field select, .fx-m-val select { width: 100%; min-width: 0; }
  .fx-mod, .fx-atom, .fx-m-val { width: 100%; }
  .fx-pending { top: 0; position: static; }
  .fx-row { padding: 10px 10px; }
  .fx-progress progress { width: 100%; }
  .fx-bar label { flex: 1 1 100%; }
  .fx-bar select { width: 100%; }
}
.fx-view [hidden] { display: none !important; }

/* selector de estratagema de cada columna del laboratorio (E10) */
.ml-strat { margin-top: 6px; font-size: .78rem; font-weight: 400; text-align: left; }
.ml-strat label { display: flex; flex-direction: column; gap: 2px; color: var(--gold); }
.ml-strat select { width: 100%; max-width: 100%; }
.ml-strat .sim-strat-lead ul { padding-left: 16px; }

/* disposición de fuerza de un destacamento: enlace que abre su modal (también dentro de chips <a>) */
.disp-link { color: var(--gold); text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.disp-link:hover, .disp-link:focus { text-decoration-style: solid; outline: none; }
.chip .disp-link { font-size: .85em; }
.disp-tbl { width: 100%; margin: 8px 0; }
.disp-tbl td, .disp-tbl th { padding: 6px 8px; text-align: left; }
.ab-group { margin: 14px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
/* sección «Misiones» del editor de listas (#55): plegable */
.fit-box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; font-size: .85rem; }
.fit-box > summary { cursor: pointer; }
.fit-box .sub { color: var(--ink-dim); font-size: .8rem; }
.fit-box .fit-warn { color: var(--gold-bright); }
.fit-box h3 { margin: 14px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.fit-box .fit-lead { font-size: .95rem; }
.fit-scroll { overflow-x: auto; }
.fit-box table.w th.n, .fit-box table.w td.n { width: auto; min-width: 54px; }
@media (max-width: 600px) {
  .fit-box table.w { font-size: .8rem; }
  .fit-box table.w th { font-size: .54rem; letter-spacing: 0; }
  .fit-box table.w th, .fit-box table.w td { padding: 4px 2px; }
  .fit-box table.w th.n, .fit-box table.w td.n { min-width: 0; width: auto; }
}
/* recetas de misión (#55): qué hace falta para llegar a 15 PV */
.mis-need h3 { margin: 14px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.mis-tbl { width: 100%; font-size: .85rem; }
.mis-tbl th, .mis-tbl td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mis-tbl th.n, .mis-tbl td.n { text-align: center; white-space: nowrap; width: 90px; }
.mis-rec { list-style: none; margin: 0; padding: 0; }
.mis-rec li { margin: 0 0 6px; }
.sim-box { margin: 10px 0; }
.sim-tbl th.n, .sim-tbl td.n { width: auto; padding: 4px 6px; }
.sim-tbl td.nw { white-space: nowrap; }
@media (max-width: 500px) { .sim-tbl { font-size: .7rem; } .sim-tbl th, .sim-tbl td { padding: 4px 2px; } .sim-tbl th { letter-spacing: 0; } .sim-tbl th.n, .sim-tbl td.n { padding: 4px 2px; } }
.sim-ctl { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; }
.sim-ctl label { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--ink-dim); min-width: 0; }
.sim-ctl select { max-width: 100%; }
.mis-terms, .mis-assume { padding-left: 18px; font-size: .88rem; }
.mis-terms li, .mis-assume li { margin: 4px 0; }
@media (max-width: 600px) {
  .mis-tbl { font-size: .78rem; }
  .mis-tbl th, .mis-tbl td { padding: 4px 4px; }
  .mis-tbl th.n, .mis-tbl td.n { width: 60px; }
}
.mis-tbl td.mis-ok { background: color-mix(in srgb, #3f9a5a 38%, transparent); }
.mis-tbl td.mis-no { background: color-mix(in srgb, #d9962b 38%, transparent); }
.mis-list td, .mis-list th { vertical-align: middle; }
.mis-list a.mis-open { cursor: pointer; color: var(--gold-bright); text-decoration: underline dotted; }
.mis-miss { font-size: .8rem; }
.mis-role { font-size: .7rem; padding: 0 6px; }
@media (max-width: 600px) { .mis-list { min-width: 560px; } .mis-list th.n, .mis-list td.n { width: 36px; min-width: 0; } .mis-miss { font-size: .72rem; min-width: 200px; } }
/* ranking: roles que pide la disposición elegida (#55) */
.rk-tbl .mis-role.rk-want { border-color: var(--gold-bright); color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 22%, transparent); font-weight: 600; }
.rk-tbl td[data-k="roles"] { white-space: normal; min-width: 120px; text-align: left; }
.rk-tbl td[data-k="aporta"] { white-space: nowrap; min-width: 150px; }

/* Secundarias dentro de «Misiones» (#57) */
.sec-box { margin-top: 1.2rem; padding-top: .6rem; border-top: 1px solid var(--line, #3334); }
.sec-h { margin: .8rem 0 .3rem; }
.sec-rnd { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.sec-r { display: inline-flex; flex-direction: column; align-items: center; min-width: 2rem; padding: .1rem .3rem; border: 1px solid var(--line, #3334); border-radius: 4px; font-variant-numeric: tabular-nums; }
.sec-r i { font-style: normal; font-size: .7em; opacity: .7; }
.sec-open { cursor: pointer; text-decoration: underline; }
@media (max-width: 500px) { .sec-rnd { flex-wrap: nowrap; gap: .15rem; } .sec-r { min-width: 1.6rem; padding: .1rem .15rem; } }

/* ---------- Revisar la facción (#/faction/<id>/review) ---------- */
.rv-link { display: block; margin: 10px 0 4px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--gold); border-radius: 8px; color: var(--ink); }
.rv-link:hover { background: var(--panel2); text-decoration: none; }
.rv-link-t { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--gold-bright); }
.rv-link-s { display: block; font-size: .85rem; color: var(--ink-dim); }
.rv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.rv-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-tab { font: inherit; font-size: .9rem; padding: 6px 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.rv-tab.on { border-color: var(--gold); color: var(--gold-bright); background: var(--bg2); }
.rv-vig { font-size: .85rem; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.rv-vig[hidden] { display: none; }
.rv-col { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rv-col[hidden] { display: none; }
.rv-colbtn { font: inherit; font-size: .85rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg2); color: inherit; cursor: pointer; }
.rv-colbtn.on { background: var(--accent, #c9a227); color: #111; border-color: transparent; font-weight: 600; }
.rv-count { margin: 0 0 6px; color: var(--ink-dim); font-size: .85rem; }
.rv-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rv-gcard { font: inherit; font-size: .82rem; display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; text-align: left; }
.rv-gcard:hover { border-color: var(--gold); }
.rv-gcard.on { border-color: var(--gold); background: var(--gold); color: #1a1a1a; }
.rv-gn { font-weight: 700; color: var(--gold-bright); }
.rv-gcard.on .rv-gn { color: #1a1a1a; }
.rv-pager { position: sticky; top: var(--rv-top, 0px); z-index: 15; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.rv-mid { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; font-size: .88rem; }
.rv-glob { color: var(--ink-dim); }
.rv-jump { font: inherit; font-size: .85rem; max-width: 220px; min-width: 0; }
.rv-nav { font: inherit; font-size: .9rem; padding: 6px 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--gold); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.rv-nav:disabled { opacity: .35; cursor: default; border-color: var(--line); }
@media (max-width: 600px) {
  body:has(.rv-pager) { padding-bottom: 84px; }
  .rv-pager { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; border-radius: 0; border-width: 2px 0 0; border-top-color: var(--gold); gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .rv-nav { padding: 8px 10px; }
  .rv-jump { max-width: 150px; }
}

/* ---------- Planificador (#70): #/planificador ----------
   Todo con prefijo .pl-: no toca ninguna otra vista. Toques de al menos 44 px; las tablas pasan a tarjetas por
   debajo de 760 px (las anchas, siempre); sin scroll horizontal de página. */
.pl { max-width: 1200px; margin: 0 auto; }
.pl h2.pl-h2 { margin: 26px 0 10px; }
.pl .pl-card h2.pl-h2 { margin-top: 0; }
.pl-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 12px 0 8px; }
.pl-ctl { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; max-width: 360px; }
.pl-lbl { font-size: .72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .05em; }
.pl-bar .cdd { display: block; }
.pl-bar .cdd-btn { width: 100%; max-width: none; min-height: 44px; font-size: .95rem; padding: 8px 32px 8px 12px; }
.pl-bar .cdd-list { max-width: none; max-height: 60vh; }
.pl-bar .cdd-item { padding: 12px; font-size: .95rem; min-height: 44px; display: flex; align-items: center; }
.pl-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg2); font-size: .95rem; }
.pl-check:hover { border-color: var(--gold); }
.pl-check input { width: 22px; height: 22px; accent-color: var(--gold); margin: 0; }
.pl-how, .pl-btn { min-height: 44px; padding: 8px 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; }
.pl-how { color: var(--gold-bright); }
.pl-how:hover, .pl-btn:hover { border-color: var(--gold); }
.pl-btn.primary { background: var(--gold); color: #1b1b1b; border-color: var(--gold); font-weight: 600; }
.pl-btn.primary:hover { background: var(--gold-bright); }
.pl-btn:disabled { opacity: .55; cursor: default; }
.pl-coll { color: var(--ink-dim); font-size: .9rem; margin: 6px 0 14px; }
.pl-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pl-tab { min-height: 44px; padding: 8px 18px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink-dim);
  font: inherit; font-size: .95rem; cursor: pointer; }
.pl-tab:hover { color: var(--gold-bright); }
.pl-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold); font-weight: 600; }
.pl-lead { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0;
  padding: 10px 16px; margin: 0 0 14px; }
.pl-lead p { margin: 6px 0; }
.pl-note { background: #3a2f1a; border: 1px solid var(--gold); color: var(--gold-bright); padding: 10px 14px; border-radius: 6px;
  font-size: .9rem; margin: 10px 0; }
.pl-note a { text-decoration: underline; }
.pl-limits { margin: 8px 0; padding: 4px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); }
.pl-limits > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--gold-bright); }
.pl-limits ul { margin: 4px 0 10px; padding-left: 20px; }
.pl-limits li { margin: 4px 0; font-size: .92rem; }
.pl-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; margin: 12px 0; }
.pl-card.pl-unm { border-style: dashed; }
.pl-card-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pl-rank { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); min-width: 2.4ch; }
.pl-title { font-family: var(--serif); font-size: 1.12rem; color: var(--gold-bright); margin: 0; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.pl-and { color: var(--ink-dim); }
.pl-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; background: var(--bg2); border: 1px solid var(--line); color: var(--ink-dim); }
.pl-badge.ok { background: #2a4a34; color: #c8e6d2; border-color: #3d6a4b; }
.pl-badge.warn { background: #4a3a22; color: #f0dcb0; border-color: #6b5530; }
.pl-badge.tie { background: #2a3a4a; color: #c8dcf0; border-color: #3f5a75; }
.pl-sub { color: var(--ink-dim); font-size: .88rem; margin: 6px 0 10px; }
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.pl-stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.pl-stat b { display: block; font-size: 1.2rem; color: var(--ink); }
.pl-stat span { color: var(--ink-dim); font-size: .78rem; }
.pl-lh { margin: 6px 0 6px; font-size: .88rem; color: var(--ink-dim); }
.pl-units { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-ug { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 3px 8px 3px 3px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 8px; max-width: 100%; }
.pl-unit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; text-align: left; max-width: 100%; }
.pl-unit:hover { border-color: var(--gold); color: var(--gold-bright); }
.pl-unit small { color: var(--ink-dim); font-size: .78rem; white-space: nowrap; }
.pl-unit-plain { cursor: default; }
.pl-unit-plain:hover { border-color: var(--line); color: var(--ink); }
.pl-plus { color: var(--ink-dim); font-size: .88rem; padding: 0 2px; overflow-wrap: anywhere; }
.pl-link { display: inline-flex; align-items: center; min-height: 44px; }
.pl-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: .74rem; color: var(--gold-bright); }
.pl-dim { color: var(--ink-dim); font-size: .85rem; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pl-more { display: block; margin: 16px auto; }
.pl-start, .pl-run { max-width: 760px; }
.pl-prog { position: relative; height: 32px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 14px 0 8px; }
.pl-prog-fill { position: absolute; inset: 0 auto 0 0; width: 1%; background: linear-gradient(90deg, #6b5530, var(--gold)); transition: width .6s ease; }
.pl-prog-pct { position: relative; z-index: 1; display: block; text-align: center; line-height: 30px; font-weight: 600; font-size: .9rem; color: #fff; text-shadow: 0 1px 2px #000; }
.pl-prog-text { margin: 4px 0; }
.pl-prog-time, .pl-run-what { color: var(--ink-dim); font-size: .88rem; margin: 2px 0; }
.pl-flags { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-dim); margin: 6px 0 12px; }
.pl-flaghelp { display: inline; }
.pl-det > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-height: 44px; }
.pl-det > summary::-webkit-details-marker { display: none; }
.pl-det > summary::before { content: "▸"; color: var(--gold); align-self: center; }
.pl-det[open] > summary::before { content: "▾"; }
.pl-det > summary .pl-sub { flex: 1 1 100%; margin: 0; }
.pl-det-body { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.pl-eh { margin: 14px 0 6px; color: var(--gold); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
.pl-el { margin: 8px 0; padding: 8px 12px; background: var(--bg2); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; }
.pl-el p { margin: 6px 0; font-size: .9rem; }
.pl-el-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pl-x .pl-title { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pl-xrows { display: grid; gap: 6px; margin-top: 8px; }
.pl-xrow { display: grid; grid-template-columns: 1.3fr 1.5fr 1.4fr .8fr; gap: 4px 14px; align-items: center; min-height: 44px; padding: 8px 12px; text-align: left;
  background: var(--bg2); border: 1px solid var(--line); border-left: 4px solid var(--red-bright); border-radius: 4px; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.pl-xrow.ok { border-left-color: #6fce8f; }
.pl-xrow:hover { border-color: var(--gold); }
.pl-xrow small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
.pl-tbl { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .88rem; }
.pl-tbl th { text-align: left; color: var(--gold); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pl-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pl-tbl .pl-unit { min-height: 44px; margin: 2px 4px 2px 0; }
/* la hoja (modal) */
.modal.pl-modal { max-width: 940px; }
.pl-modal .modal-x { min-width: 44px; min-height: 44px; font-size: 1.1rem; }
.pl-sheet h3 { margin: 18px 0 6px; color: var(--gold-bright); font-size: 1.02rem; }
.pl-mh { font-family: var(--serif); color: var(--gold-bright); margin: 0 0 8px; padding-right: 52px; font-size: 1.3rem; }
.pl-lead-s { background: var(--panel); border-left: 3px solid var(--gold); padding: 8px 14px; border-radius: 0 6px 6px 0; margin: 8px 0 12px; }
.pl-total { margin: 8px 0; }
.pl-band { margin: 8px 0; padding: 8px 12px; background: var(--panel); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; }
.pl-band p { margin: 4px 0; }
.pl-band ul { margin: 6px 0; padding-left: 20px; }
.pl-band li { margin: 6px 0; }
.pl-sheet details { margin: 8px 0; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; }
.pl-sheet summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--gold-bright); }
.pl-sheet ul { margin: 4px 0; padding-left: 20px; }
.pl-sheet li { margin: 3px 0; }
.pl-sheet .pl-unit { font-size: .85rem; padding: 4px 10px; }

@media (max-width: 900px) {
  .pl-tbl-wide thead { display: none; }
}
/* tablas anchas: siempre como tarjetas (una fila = una tarjeta con sus rótulos) */
.pl-tbl-wide, .pl-tbl-wide tbody, .pl-tbl-wide tr, .pl-tbl-wide td { display: block; }
.pl-tbl-wide thead { display: none; }
.pl-tbl-wide tr { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; padding: 6px 10px; background: var(--panel); }
.pl-tbl-wide td { border: 0; padding: 4px 0; display: flex; gap: 10px; }
.pl-tbl-wide td::before { content: attr(data-l); flex: 0 0 8.5em; color: var(--ink-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.pl-tbl-wide td > * { min-width: 0; }

@media (max-width: 760px) {
  .pl-tbl:not(.pl-keep), .pl-tbl:not(.pl-keep) tbody, .pl-tbl:not(.pl-keep) tr, .pl-tbl:not(.pl-keep) td { display: block; }
  .pl-tbl:not(.pl-keep) thead { display: none; }
  .pl-tbl:not(.pl-keep) tr { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; padding: 6px 10px; background: var(--panel); }
  .pl-tbl:not(.pl-keep) td { border: 0; padding: 4px 0; display: flex; gap: 10px; overflow-wrap: anywhere; }
  .pl-tbl:not(.pl-keep) td::before { content: attr(data-l); flex: 0 0 7.5em; color: var(--ink-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
  .pl-tbl td.pl-empty { display: none !important; }
  .pl-tbl-wide td.pl-empty { display: none !important; }
  .pl-xrow { grid-template-columns: 1fr 1fr; }
  .pl-ctl { flex: 1 1 100%; max-width: none; }
  .pl-check, .pl-how { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .pl .view, .pl-card { padding: 12px; }
  .pl-stats { grid-template-columns: 1fr 1fr; }
  .pl-tab { flex: 1 1 0; padding: 8px 6px; text-align: center; }
  .modal.pl-modal .pl-sheet { padding: 14px 12px 18px; }
  .pl-tbl-wide td::before { flex-basis: 6.5em; }
}
.unit-row .step-note { font-size: .78rem; color: var(--gold); margin-top: 2px; overflow-wrap: anywhere; }

.enh-weapons { margin-top: 6px; overflow-x: auto; }
.enh-weapons table.w { width: 100%; }

/* ---------- usuario de la sesión (cabecera) y cuentas sin IA ---------- */
.menu-row[hidden], .userbox[hidden], .user-menu[hidden] { display: none; }
body.no-ai .ai-only { display: none !important; }
.userbox { position: relative; flex: 0 0 auto; }
.user-btn {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  background: var(--bg2); color: var(--ink-dim); border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: .78rem; padding: 5px 9px;
}
.user-btn:hover, .user-btn[aria-expanded="true"] { color: var(--gold-bright); border-color: var(--gold); }
.user-btn:focus-visible, .user-menu button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 180px; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--gold); border-radius: 6px; box-shadow: var(--shadow); padding: 4px;
}
.user-menu button {
  text-align: left; background: transparent; color: var(--ink); border: 0; border-radius: 4px; cursor: pointer;
  font: inherit; font-size: .88rem; padding: 9px 10px;
}
.user-menu button:hover { background: var(--panel); color: var(--gold-bright); }
/* dentro del panel del menú (móvil): el nombre y los dos botones, sin desplegable */
.userbox.in-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.userbox.in-menu .user-btn { pointer-events: none; border: 0; background: transparent; padding: 0; font-size: .9rem; max-width: 100%; }
.userbox.in-menu .user-menu { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.userbox.in-menu .user-menu[hidden] { display: flex; }
.userbox.in-menu .user-menu button { border: 1px solid var(--line); min-height: 44px; padding: 0 12px; font-size: .8rem; color: var(--ink-dim); }
@media (max-width: 1024px), (pointer: coarse) { .user-btn { min-height: 44px; } }
@media (max-width: 1024px) { .tb-main .userbox { order: 2; } }
.pw-form label { display: block; margin: 0 0 12px; font-size: .88rem; color: var(--ink-dim); }
.pw-form input {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font-size: 1rem;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; color: var(--ink);
}
.pw-form input:focus { outline: none; border-color: var(--gold); }
.pw-err { min-height: 1.3em; margin: 6px 0; }
.pw-form .chip, .pw-done { cursor: pointer; font: inherit; }