/* Panel de admin de Helbreath 3.51 — hoja de estilo única.
   Sin dependencias externas: el panel se sirve desde el propio gameserver y
   tiene que funcionar en un VPS sin salida a internet.

   Todo tamaño sale de las escalas de abajo. Si algo necesita un número suelto
   (13.5px, 7px de padding) es que falta un escalón, no que este caso es
   especial: mezclar medidas es lo que hace que una pantalla se vea armada de
   retazos. */

:root {
  /* --- superficies ----------------------------------------------------
     Pizarra FRÍA, no negro plano: un ground con algo de azul se lee como
     elegido y no como el default de cualquier tablero. (12/09) */
  --bg: #0f1318;
  --panel: #161c23;
  --panel-2: #1d242d;
  --panel-3: #232c36;
  --border: #29323c;
  --border-soft: #222a34;

  /* --- texto (cuatro niveles, no más) -------------------------------- */
  --fg: #e6eaef;        /* títulos y datos */
  --fg-2: #b7c0cb;      /* prosa */
  --muted: #8a95a3;     /* etiquetas, texto de apoyo */
  --dim: #6b7684;       /* al margen: unidades, ayudas */

  /* El TEAL es lo que se puede tocar. El ORO va aparte, abajo. */
  --accent: #49a3b0;
  --accent-2: #3d8f9b;
  --accent-dim: #2c6b75;
  --accent-soft: rgba(73, 163, 176, .13);

  /* --- oro: SÓLO cifras de plata --------------------------------------
     El oro es la moneda del juego, así que el color informa ("esto es
     plata") en vez de decorar. No usarlo para nada que no sea dinero. */
  --oro: #d9a441;
  --oro-soft: rgba(217, 164, 65, .12);

  /* --- los dos bandos, sólo donde identifican uno --------------------- */
  --aresden: #6a9bda;
  --elvine: #d08575;

  --roto: #ef4444;
  --fuerte: #f59e0b;
  --equilibrado: #22c55e;
  --flojo: #60a5fa;
  --inservible: #a855f7;
  --sindatos: #52525b;

  /* --- escala tipográfica -------------------------------------------- */
  --fs-xs: 11px;    /* etiquetas en versalitas, notas al pie */
  --fs-sm: 12px;    /* tablas, apoyo */
  --fs-md: 13px;    /* cuerpo */
  --fs-lg: 15px;    /* títulos de card, prosa destacada */
  --fs-xl: 19px;    /* números grandes, título de ficha */
  --fs-2xl: 24px;   /* título de pantalla */

  /* --- espaciado ------------------------------------------------------
     La escala saltaba de 16 a 24 y no tenía nada por encima de 32: los
     escalones que faltaban se tapaban con números sueltos, y por eso había
     pantallas con zonas apretadas al lado de zonas sueltas. Completa. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-7: 34px;
  --sp-8: 46px;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --nav-w: 216px;
  --topbar-h: 46px;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-md); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================ estructura */

#app { display: flex; min-height: 100vh; max-width: 100vw; }

nav {
  width: var(--nav-w); flex: 0 0 var(--nav-w);
  background: var(--panel); border-right: 1px solid var(--border);
  padding: var(--sp-4) 0 var(--sp-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
nav .brand {
  padding: 0 var(--sp-4) var(--sp-4); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}
nav .brand h1 { margin: 0; font-size: var(--fs-lg); letter-spacing: -.2px; font-weight: 600; }
nav .brand h1 span { color: var(--accent); }
nav .brand p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--dim); }

nav a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-4); color: var(--muted); text-decoration: none;
  font-size: var(--fs-md); border-left: 2px solid transparent;
  transition: color .12s, background .12s;
}
nav a:hover { color: var(--fg); background: var(--panel-2); }
nav a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
nav a .ico { width: 15px; height: 15px; flex: 0 0 15px; opacity: .8; }
nav a.active .ico { opacity: 1; }
nav .sep {
  padding: var(--sp-4) var(--sp-4) var(--sp-1); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 600;
}

.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* min-width:0 en toda la cadena: sin esto, un texto largo de la barra de estado
   —o una tabla ancha— estira el contenedor y la página entera se va de lado en
   un teléfono, con el texto cortado contra el borde. */

/* Barra superior: dónde estoy y cómo está el servidor, siempre a la vista. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-5);
  background: rgba(15, 19, 24, .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.topbar .crumb { color: var(--muted); }
.topbar .crumb b { color: var(--fg); font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar .pulse { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.topbar .pulse .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sindatos);
  box-shadow: 0 0 0 3px rgba(82, 82, 91, .18);
}
.topbar .pulse.on .dot { background: var(--equilibrado); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.topbar .pulse.off .dot { background: var(--roto); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.topbar .pulse b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.topbar .sepdot { color: var(--border); }

main { padding: var(--sp-7) var(--sp-7) var(--sp-8); max-width: 1360px; width: 100%; min-width: 0; }

/* ============================================================ encabezados */

header.page { margin-bottom: var(--sp-6); }
header.page h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); letter-spacing: -.4px; font-weight: 600; }
header.page p { margin: 0; color: var(--muted); font-size: var(--fs-md); max-width: 92ch; }

/* ============================================================ bloques */

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.card > h3 {
  margin: 0 0 var(--sp-4); font-size: var(--fs-lg); font-weight: 600;
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
}
.card > h3 .sub { color: var(--dim); font-weight: 400; font-size: var(--fs-sm); }

/* La card es el único marco: lo que va adentro no vuelve a enmarcarse. */
.card > .tablewrap { border-left: 0; border-right: 0; border-radius: 0; margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); width: auto; }
.card > .tablewrap:not(:first-child) { border-bottom: 0; }

.grid { display: grid; gap: var(--sp-5); align-items: start; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --- tarjetas de número ------------------------------------------------ */

.stat {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.stat .label {
  font-size: var(--fs-xs); color: var(--dim); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
}
.stat .value {
  font-size: 26px; font-weight: 600; letter-spacing: -.8px; margin-top: var(--sp-2);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.stat .value.sm { font-size: var(--fs-xl); letter-spacing: -.3px; }
.stat .hint { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); line-height: 1.45; }

/* Dentro de una card no se dibuja otra caja: se separan con una línea. */
.card .grid > .stat,
.statgroup > .stat {
  background: none; border: 0; border-left: 2px solid var(--border);
  border-radius: 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
}

/* --- destacados -------------------------------------------------------- */

.headline {
  background: linear-gradient(180deg, #14141f, var(--panel));
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  font-size: var(--fs-lg); color: var(--fg-2); line-height: 1.5;
}
.headline strong { color: var(--fg); font-weight: 600; }

.alert {
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
  border: 1px solid #3a1d22; border-left: 3px solid var(--roto);
  background: #1a1114; font-size: var(--fs-md);
}
.alert h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); color: #fca5a5; font-weight: 600; }
.alert p { margin: 0; color: var(--fg-2); }
.alert p + p { margin-top: var(--sp-2); }
.alert.warn { border-color: #3d2f14; border-left-color: var(--fuerte); background: #17140f; }
.alert.warn h4 { color: #fcd34d; }
.alert.info { border-color: var(--border); border-left-color: var(--accent); background: var(--panel-2); }
.alert.info h4 { color: var(--accent); }

/* Lista de hallazgos: el sujeto manda, la explicación acompaña. */
.finding { padding: var(--sp-3) 0; border-top: 1px solid var(--border-soft); display: flex; gap: var(--sp-3); }
.finding:first-child { border-top: 0; padding-top: 0; }
.finding:last-child { padding-bottom: 0; }
.finding .who { flex: 0 0 210px; min-width: 0; }
.finding .who b { display: block; font-weight: 600; font-size: var(--fs-md); }
.finding .why { flex: 1; color: var(--fg-2); font-size: var(--fs-sm); min-width: 0; }

/* ============================================================ tablas */

.tablewrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th {
  background: var(--panel-2); text-align: left; padding: var(--sp-3) var(--sp-4);
  font-weight: 600; color: var(--muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  /* top:0 y no la altura de la barra: el .tablewrap tiene overflow propio, así
     que el sticky se mide contra ÉL. Con cualquier otro valor el encabezado
     arranca despegado y tapa la primera fila. */
  position: sticky; top: 0; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border); z-index: 2;
}
thead th:hover { color: var(--fg); }
thead th[title] { text-decoration: underline dotted var(--border); text-underline-offset: 3px; }
thead th.sorted { color: var(--accent); }
thead th.sorted::after { content: " ▾"; }
thead th.sorted.asc::after { content: " ▴"; }
tbody td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
td.name { font-weight: 600; white-space: nowrap; color: var(--fg); }
td.dim, .dim { color: var(--muted); }
td .sub2 { font-size: var(--fs-xs); color: var(--dim); display: block; line-height: 1.3; }

/* ============================================================ controles */

.toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); }
.toolbar.tight { gap: var(--sp-1); }

input[type=text], input[type=number], select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg);
  border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--fs-md); font-family: inherit;
}
input[type=text] { min-width: 220px; }
input:focus, select:focus { outline: 2px solid var(--accent-dim); outline-offset: -1px; border-color: var(--accent-dim); }
input::placeholder { color: var(--dim); }

/* Campo con etiqueta arriba: se lee sin adivinar a qué input pertenece. */
label.field { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
label.stacked { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
label.stacked > span {
  font-size: var(--fs-xs); color: var(--dim); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}

button {
  background: var(--accent-2); color: #041018; border: 0; border-radius: var(--r-sm);
  padding: 6px 14px; font-size: var(--fs-md); font-weight: 600; cursor: pointer;
  font-family: inherit; line-height: 1.6; white-space: nowrap;
}
button:hover { background: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.ghost:hover { color: var(--fg); border-color: var(--accent-dim); background: var(--panel-2); }
button.ghost.on { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }
button.icon { padding: 6px 9px; font-size: var(--fs-sm); }
button.danger { background: #7f1d1d; color: #fecaca; }
button.danger:hover { background: #991b1b; }

/* Chips de filtro: son muchos, tienen que ocupar poco. */
.chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; }
.chips button {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 11px; font-size: var(--fs-sm); font-weight: 500;
}
.chips button:hover { color: var(--fg); border-color: var(--accent-dim); }
.chips button.on { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); font-weight: 600; }
.chips button .c { color: var(--dim); font-variant-numeric: tabular-nums; margin-left: 3px; }
.chips button.on .c { color: var(--accent-dim); }

.count { color: var(--dim); font-size: var(--fs-sm); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ============================================================ veredictos */

.grade {
  display: inline-block; padding: 1px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; vertical-align: middle;
}
.g-roto        { background: rgba(239,68,68,.15);  color: #fca5a5; }
.g-fuerte      { background: rgba(245,158,11,.15); color: #fcd34d; }
.g-equilibrado { background: rgba(34,197,94,.13);  color: #86efac; }
.g-flojo       { background: rgba(96,165,250,.13); color: #93c5fd; }
.g-inservible  { background: rgba(168,85,247,.15); color: #d8b4fe; }
.g-sindatos    { background: rgba(82,82,91,.2);    color: #a1a1aa; }
.g-contenidomuerto { background: rgba(168,85,247,.15); color: #d8b4fe; }
.g-rompelacurva    { background: rgba(239,68,68,.25); color: #fecaca; }

/* Glosario de veredictos: qué quiere decir cada etiqueta, sin salir de la vista. */
.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.glossary div { font-size: var(--fs-sm); color: var(--muted); }
.glossary .grade { margin-right: var(--sp-2); }

.tag {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-sm); font-size: var(--fs-xs);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  white-space: nowrap; vertical-align: middle;
}
.tag.accent { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }

/* ============================================================ barras */

.bar { display: flex; align-items: center; gap: var(--sp-2); }
.bar .track {
  flex: 1; height: 5px; background: var(--panel-3); border-radius: 3px;
  overflow: hidden; min-width: 40px; max-width: 130px;
}
.bar .fill { height: 100%; background: var(--accent-2); border-radius: 3px; }
.bar .fill.roto { background: var(--roto); }
.bar .fill.fuerte { background: var(--fuerte); }
.bar .fill.equilibrado { background: var(--equilibrado); }
.bar .fill.flojo { background: var(--flojo); }
.bar .fill.inservible { background: var(--inservible); }
.bar .n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--fg-2); min-width: 44px; text-align: right; }

/* Rango mín–máx. La barra es un apoyo, no la columna entera: se mantiene
   angosta para que el número siga siendo lo que se lee. */
.range { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--mono); font-size: var(--fs-sm); }
.range .track {
  position: relative; width: 84px; flex: 0 0 84px; height: 4px;
  background: var(--panel-3); border-radius: 2px;
}
.range .span { position: absolute; height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 2px; }
.range .lo, .range .hi { color: var(--fg-2); white-space: nowrap; }
.range .lo { text-align: right; min-width: 42px; }
.range .hi { text-align: left; min-width: 42px; }

/* ============================================================ ficha modal */

.detail {
  position: fixed; inset: 0; background: rgba(4,4,9,.75); display: none;
  z-index: 50; padding: var(--sp-5); overflow-y: auto;
}
.detail.open { display: block; }
.detail .box {
  max-width: 1000px; margin: 0 auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.detail .dhead {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.detail .dhead .t { flex: 1; min-width: 0; }
.detail .dhead h3 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.3px; }
.detail .subtitle { color: var(--muted); font-size: var(--fs-md); margin-top: 2px; }
.detail .box > .card { background: var(--panel-2); }

/* --- lista de propiedades ---------------------------------------------
   Antes era una lista de dos columnas: la etiqueta pegada a la izquierda, el
   valor al lado, y media pantalla en blanco a la derecha. Ahora cada par es
   una celda propia y se acomodan las que entren por fila. */
.props {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-3) var(--sp-4); margin: 0;
}
.props .prop { min-width: 0; }
.props dt {
  color: var(--dim); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; line-height: 1.3;
}
.props dd {
  margin: 2px 0 0; font-family: var(--mono); font-size: var(--fs-md);
  color: var(--fg); word-break: break-word; line-height: 1.45;
}
/* Un valor largo (una frase, no un número) ocupa la fila entera. */
.props .prop.wide { grid-column: 1 / -1; }
.props .prop.wide dd { font-family: var(--sans); }

.notes { margin: 0; padding: 0; list-style: none; }
.notes li {
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm);
  background: var(--panel-2); border-left: 2px solid var(--fuerte);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--fg-2);
}
.notes li:last-child { margin-bottom: 0; }
.card > .notes li { background: var(--panel-3); }

.prose { font-size: var(--fs-md); color: var(--fg-2); margin: 0 0 var(--sp-3); line-height: 1.6; }
.prose:last-child { margin-bottom: 0; }
.prose.lead { font-size: var(--fs-lg); color: var(--fg); }

/* ============================================================ gráficos */

/* El SVG tiene un viewBox fijo: si se lo deja estirar a todo el ancho, cada
   texto de 11px se agranda con él y el gráfico queda desproporcionado contra el
   resto de la página. Se limita al ancho para el que fue dibujado. */
svg.chart { width: 100%; max-width: 900px; height: auto; display: block; margin: 0 auto; }
svg.chart text { font-family: var(--sans); }
.legend {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm);
  color: var(--muted); margin-top: var(--sp-3); justify-content: center;
}
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: var(--sp-1); }

/* ============================================================ varios */

.loading { color: var(--dim); font-size: var(--fs-md); padding: var(--sp-6) 0; text-align: center; }
.loading::after { content: "…"; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.empty { color: var(--dim); text-align: center; padding: var(--sp-5) 0; font-size: var(--fs-md); }
.footnote { color: var(--dim); font-size: var(--fs-xs); margin: var(--sp-3) 0 0; line-height: 1.5; }
code {
  font-family: var(--mono); background: var(--panel-3); padding: 1px 5px;
  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--fg-2);
  overflow-wrap: anywhere;
}
a { color: var(--accent); }

/* ============================================================ edición */

.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translate(-50%, 80px);
  background: #14331f; border: 1px solid #2b6b43; color: #b7f7cf;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-md); z-index: 100;
  opacity: 0; transition: transform .22s, opacity .22s; max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: #331416; border-color: #7f2b30; color: #fecaca; }

/* Fila editable: etiqueta · valor · original · acciones.
   Las acciones van juntas en su propia celda; antes cada botón pedía una
   columna del grid y el último se desbordaba a la fila siguiente, estirado de
   lado a lado. */
.editrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(90px, auto) auto;
  gap: var(--sp-2) var(--sp-3); align-items: center;
  padding: var(--sp-2) 0; border-top: 1px solid var(--border-soft);
}
.editrow:first-child { border-top: 0; }
.editrow .lbl { font-size: var(--fs-md); color: var(--fg-2); min-width: 0; }
.editrow .lbl b { color: var(--fg); font-weight: 600; }
.editrow .lbl .help { font-size: var(--fs-xs); color: var(--dim); line-height: 1.35; }
.editrow input[type=number] { width: 100px; }
.editrow input[type=text] { min-width: 0; width: 100%; }
.editrow .base {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--dim);
  text-align: right; white-space: nowrap;
}
.editrow .acts { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }
/* Fila de la tienda: el nombre del ítem es un campo de texto y se lleva el
   espacio sobrante, en vez de dejarlo entre la etiqueta y el input. */
.editrow.shop { grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto auto; }
.editrow.changed .lbl b { color: var(--fuerte); }
.editrow.changed .base::before { content: "≠ "; color: var(--fuerte); }

/* ============================================================ hamburguesa */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin-left: calc(var(--sp-2) * -1);
  background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.burger svg { width: 20px; height: 20px; }
.burger:hover { background: var(--panel-2); }
.scrim { display: none; position: fixed; inset: 0; background: rgba(4, 4, 9, .62); z-index: 55; backdrop-filter: blur(2px); }

/* ============================================================ tablet y celu: cajón lateral */
@media (max-width: 1000px) {
  /* El menú deja de ser una franja con 17 links y pasa a ser un cajón que se abre con la
     hamburguesa de la barra: como una app. La barra queda pegada arriba con el pulso del server. */
  nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(300px, 86vw); height: 100vh; height: 100dvh;
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    padding: var(--sp-4) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.nav-open nav { transform: none; box-shadow: 24px 0 60px rgba(0,0,0,.55); }
  body.nav-open .scrim { display: block; }
  body.nav-open { overflow: hidden; }
  nav a { padding: 12px var(--sp-4); font-size: var(--fs-md); min-height: 44px; }
  nav a .ico { width: 18px; height: 18px; flex-basis: 18px; }
  nav .sep { padding-top: var(--sp-4); }
  .burger { display: inline-flex; }
  .topbar { position: sticky; top: 0; padding: 0 var(--sp-4); padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .topbar .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  main { padding: var(--sp-4); }
  .pane, main { max-width: 100%; }
  /* Formularios: cada campo a todo el ancho, botones que se pueden tocar con el pulgar. */
  .toolbar > label.field.stacked { flex: 1 1 160px; min-width: 0; }
  .toolbar > label.field.stacked > input, .toolbar > label.field.stacked > select { width: 100% !important; min-width: 0; }
  button { min-height: 36px; }
  .grid.c2 { grid-template-columns: 1fr; }
}

/* ============================================================ teléfono */
@media (max-width: 560px) {
  :root { --fs-2xl: 21px; --fs-xl: 17px; --topbar-h: 48px; }
  main { padding: var(--sp-3) var(--sp-3) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
  .topbar .pulse .mobs { display: none; }
  .card { padding: var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
  .card > .tablewrap { margin: 0; border-radius: var(--r-sm); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .grid.c4, .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
  .stat .value { font-size: 21px; }
  .finding { flex-direction: column; gap: var(--sp-1); }
  .finding .who { flex: none; }
  header.page h2 { font-size: var(--fs-2xl); }
  header.page p { font-size: var(--fs-sm); }
  /* La ficha ocupa la pantalla: un modal con márgenes es una ventanita ilegible. */
  .detail { padding: 0; }
  .detail .box { border-radius: 0; border: 0; padding: var(--sp-4) var(--sp-3) var(--sp-6); min-height: 100vh; }
  .detail .dhead { flex-direction: column; gap: var(--sp-2); }
  .props { grid-template-columns: 1fr; gap: var(--sp-3); }
  input[type=text] { min-width: 0; width: 100%; }
  input[type=text], input[type=number], select { font-size: 16px; padding: 9px 12px; } /* 16px: iOS no hace zoom al enfocar */
  .toolbar { gap: var(--sp-2); }
  .toolbar > label.field { width: 100%; justify-content: space-between; }
  .toolbar > label.field.stacked { flex-basis: 100%; }
  .toolbar > label.field.stacked > input, .toolbar > label.field.stacked > select { width: 100% !important; }
  .toolbar > button { flex: 1 1 auto; }
  .toolbar > button.small { flex: 0 0 auto; }
  /* Las tablas se scrollean de costado; se avisa para que no parezca cortada. */
  .tablewrap { position: relative; -webkit-overflow-scrolling: touch; }
  .tablewrap::after {
    content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(10,10,15,.75));
    pointer-events: none;
  }
  table { font-size: var(--fs-sm); }
  thead th, tbody td { padding: 8px var(--sp-2); }
  .editrow, .editrow.shop { grid-template-columns: minmax(0, 1fr) auto; }
  .editrow .base { grid-column: 1 / -1; text-align: left; }
  .editrow .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .bar .track { max-width: 70px; }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .chips button { flex: 0 0 auto; }
  .toast { bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
}

/* --- ofertas del coin shop + eventos de exp (custom 06/09) ------------------ */
.salebox { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.salebox h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--fg); }
.salebox > .help { font-size: var(--fs-sm); color: var(--dim); margin: 0 0 var(--sp-3); line-height: 1.45; }
.saleon { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: baseline; color: var(--fg); background: #2a1b12; border: 1px solid #5a3320; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.saleon b { color: #ffb257; }
.shoprow { border-top: 1px solid var(--border); padding: var(--sp-3) 0; }
.shoprow.onsale { background: linear-gradient(90deg, rgba(255, 178, 87, .07), transparent 60%); margin: 0 calc(var(--sp-3) * -1); padding-left: var(--sp-3); padding-right: var(--sp-3); }
.shoprow-head { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; margin-bottom: var(--sp-2); }
.shoprow-head b { color: var(--fg); }
.shoprow-head .help { font-size: var(--fs-xs); color: var(--dim); }
.shoprow-grid { display: grid; grid-template-columns: minmax(180px, 2fr) 90px 90px 190px minmax(140px, 1fr); gap: var(--sp-2); align-items: end; }
.shoprow-grid label.f { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--muted); min-width: 0; }
.shoprow-grid label.f > input { width: 100%; min-width: 0; }
.shoprow .acts { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-2); }
.pill.sale { display: inline-block; background: #3a2412; color: #ffb257; border: 1px solid #6b4020; border-radius: 20px; padding: 1px 9px; font-size: var(--fs-xs); font-weight: 600; }
.rowline { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; border-top: 1px solid var(--border); padding: var(--sp-2) 0; }
.rowline:first-child { border-top: 0; }
.rowline.off .lbl b { color: var(--dim); text-decoration: line-through; }
.rowline .lbl b { color: var(--fg); }
.rowline .help { font-size: var(--fs-xs); color: var(--dim); }
.rowline .acts { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.statgroup.exp { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.statgroup.exp > .stat { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }

/* --- celu: menos "cuadrado" (06/09) --------------------------------------------- */
@media (max-width: 560px) {
  .shoprow-grid { grid-template-columns: 1fr 1fr; }
  .shoprow-grid label.f.name, .shoprow-grid label.f.eti { grid-column: 1 / -1; }
  .shoprow .acts > button:first-child { flex: 1; }
  .card { border-radius: 16px; }
  .stat, .salebox, .headline, .alert { border-radius: 14px; }
  .statgroup.exp { grid-template-columns: 1fr 1fr; }
  .statgroup.exp > .stat { border-radius: 12px; }
  button:not(.icon):not(.small) { border-radius: 10px; min-height: 40px; }
  input:not([type=checkbox]):not([type=radio]), select { border-radius: 10px; min-height: 40px; }
  .rowline { flex-wrap: wrap; }
  .rowline .acts { width: 100%; justify-content: flex-end; }
  .tablewrap::after { content: "← deslizá para ver el resto de la tabla →"; display: block; font-size: var(--fs-xs); color: var(--dim); padding: 6px 10px; text-align: center; border-top: 1px dashed var(--border); }
}

/* --- Cantera (custom 06/09): filas con sprite, chips de disponibilidad, editor de alta --- */
.chips .chip { appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 20px; padding: 6px 14px; font: inherit; cursor: pointer; }
.chips .chip.on { color: var(--fg); border-color: var(--accent); background: var(--panel-3); }
.chips .chip .n { font-family: var(--mono, monospace); font-size: 12px; color: var(--dim); }
.clist { display: flex; flex-direction: column; }
.crow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.crow:first-child { border-top: 0; }
.crow.del { opacity: .45; }
.crow.del .cname b { text-decoration: line-through; }
.cimg { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #202634, #151923); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; }
.cimg img { max-width: 92%; max-height: 92%; image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.cimg.mob img { image-rendering: auto; }
.cimg .noimg { font-size: 10px; color: var(--dim); text-align: center; padding: 4px; }
.cbody { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cname b { color: var(--fg); }
.cstats { font-size: var(--fs-sm); color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.cacts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cacts label.chk { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; gap: 5px; align-items: center; }
.ceditor { border: 1px solid var(--accent-dim, var(--border)); border-radius: var(--r-md); padding: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); background: var(--panel-3); }
.av { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; border-radius: 3px; padding: 1px 7px; white-space: nowrap; border: 1px solid var(--border); color: var(--fg-2); }
.av.ya { color: var(--equilibrado, #6fbf73); border-color: currentColor; }
.av.reusa { color: var(--fuerte, #e0a94a); border-color: currentColor; }
.av.apk { color: var(--accent, #6aa6d8); border-color: currentColor; }
.av.no { color: var(--roto, #e0736a); border-color: currentColor; }
.fam { display: inline-block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); background: var(--panel-3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
@media (max-width: 560px) {
  .crow { grid-template-columns: auto minmax(0, 1fr); }
  .cacts { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
}

/* --- Tiendas + selector de ítems + calendario de misiones (custom 11/09, PANEL-TIENDAS.md) --- */
.ipick { width: 100%; min-width: 0; }
.ipick-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-width: 180px; text-align: left; background: var(--panel-2); color: var(--fg); border: 1px solid var(--border); padding: 4px 10px 4px 4px; min-height: 36px; }
.ipick-btn:hover { background: var(--panel-3); border-color: var(--accent-dim); }
.ipick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipick-ph { color: var(--dim); padding-left: 6px; }
.ipick-bad { font-size: 11px; font-weight: 600; color: var(--roto, #e0736a); border: 1px solid currentColor; border-radius: 3px; padding: 0 6px; }
.ipk-pop { position: fixed; inset: 0; z-index: 9000; background: rgba(6, 8, 12, .78); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; }
.ipk-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); width: 620px; max-width: 100%; max-height: 86vh; display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-4); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.ipk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.ipk-box .toolbar input[type=text] { flex: 1 1 220px; }
.ipk-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 120px; }
.ipk-row { display: flex; align-items: center; gap: var(--sp-3); text-align: left; background: transparent; color: var(--fg); border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px 8px; }
.ipk-row:hover { background: var(--panel-2); border-color: var(--border); }
.ipk-row.on { border-color: var(--accent-dim); background: var(--accent-soft); }
.ipk-n { display: flex; flex-direction: column; min-width: 0; }
.ipk-n small { color: var(--dim); font-size: var(--fs-xs); }
.shoprow-grid { grid-template-columns: minmax(200px, 2fr) 90px 90px 190px minmax(140px, 1fr) 70px; }
.shoprow-grid.cs { grid-template-columns: minmax(220px, 2fr) 110px 80px 80px minmax(160px, 1fr); }
.shoprow-grid label.f.chk > input { width: auto; min-height: 0; align-self: flex-start; margin: 8px 0; }
.shoprow.off .shoprow-head b { color: var(--dim); text-decoration: line-through; }
.days { display: flex; flex-wrap: wrap; gap: 4px; }
.days label.day { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.days label.day:has(input:checked) { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 560px) {
  .shoprow-grid, .shoprow-grid.cs { grid-template-columns: 1fr 1fr; }
  .shoprow-grid label.f.name, .shoprow-grid label.f.eti { grid-column: 1 / -1; }
  .ipk-pop { padding-top: 2vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTRUCTURA NUEVA (12/09) — el panel pasó de 19 entradas de menú a 8,
   agrupadas por LO QUE SE VA A HACER y no por tipo de dato. Lo que sigue es
   lo que esa reorganización necesita: pestañas, la cola de pendientes de la
   pantalla de inicio, y los sprites del juego dentro de las tablas.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- pestañas: lo que antes eran siete entradas del menú ---------------- */
.tabs {
  display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: thin;
}
.tabs button {
  font-family: inherit; font-size: var(--fs-md); font-weight: 600;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); padding: var(--sp-3) var(--sp-4); cursor: pointer;
  white-space: nowrap; display: flex; align-items: baseline; gap: var(--sp-2);
}
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabs button .c { color: var(--dim); font-variant-numeric: tabular-nums; font-weight: 400; font-size: var(--fs-sm); }
/* El título de la vista hija no se repite adentro de la pestaña; su bajada sí,
   que es donde está la explicación. */
.tabbody > header.page h2 { display: none; }
.tabbody > header.page { margin-bottom: var(--sp-4); }

/* --- cola de pendientes: la severidad es una franja, no un color de texto - */
.todo { display: flex; flex-direction: column; }
.todo .row {
  display: flex; gap: var(--sp-4); padding: var(--sp-4) 0;
  border-top: 1px solid var(--border-soft); align-items: flex-start;
}
.todo .row:first-child { border-top: 0; padding-top: 0; }
.todo .row:last-child { padding-bottom: 0; }
.todo .sev { width: 3px; align-self: stretch; min-height: 34px; border-radius: 2px; flex: none; }
.todo .sev.crit { background: var(--roto); }
.todo .sev.warn { background: var(--fuerte); }
.todo .sev.info { background: var(--accent); }
.todo .txt { flex: 1; min-width: 0; }
.todo .t { font-weight: 600; font-size: var(--fs-md); }
.todo .d { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); line-height: 1.5; }
.todo .who {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2); white-space: nowrap; flex: none;
}

/* --- fila de cifras pegadas, separadas por una línea y no por un marco --- */
.tiles {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: var(--sp-5);
}
.tiles > .stat { background: var(--panel); border: 0; border-radius: 0; padding: var(--sp-5); }
.tiles > .stat .value.money { color: var(--oro); }

/* --- rótulo de sub-bloque (dentro de una card) -------------------------- */
.sublabel {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3);
}

/* --- barra + número en la misma celda ----------------------------------- */
.barcell { display: flex; align-items: center; gap: var(--sp-4); }
.barcell .bar { flex: 1; min-width: 60px; height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.barcell .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.barcell .n { font-family: var(--mono); font-variant-numeric: tabular-nums; width: 56px; text-align: right; flex: none; }

/* --- SPRITES del juego --------------------------------------------------
   Los mismos PNG que usa la Cantera. image-rendering:pixelated no es un gusto:
   son dibujos de 2001 y el navegador, al escalarlos, los emborrona. */
.spr {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
}
.spr img { width: auto; height: auto; max-width: 28px; max-height: 28px; image-rendering: pixelated; }
.spr.lg { width: 56px; height: 56px; }
.spr.lg img { max-width: 46px; max-height: 46px; }
.spr .noimg { color: var(--dim); font-size: var(--fs-xs); }
.itemcell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.itemcell .nm { font-weight: 600; }
.itemcell .sub { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; display: block; }

/* --- grilla de bichos con su dibujo ------------------------------------- */
.beasts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-4); }
.beast {
  background: var(--panel-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-3) var(--sp-3);
  text-align: center; cursor: pointer;
}
.beast:hover { border-color: var(--accent-dim); }
.beast .pic { height: 74px; display: grid; place-items: center; margin-bottom: var(--sp-3); }
.beast .pic img { max-width: 100%; max-height: 74px; image-rendering: pixelated; }
.beast .nm { font-weight: 600; font-size: var(--fs-md); }
.beast .st { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }

/* --- los dos bandos ------------------------------------------------------ */
.bando { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.bando .pip { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bando.ares .pip { background: var(--aresden); }
.bando.elv .pip { background: var(--elvine); }
.bando.neu .pip { background: var(--dim); }

/* --- dinero: el oro sólo acá -------------------------------------------- */
.oro { color: var(--oro); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEPARACIÓN VERTICAL: la pone el CONTENEDOR, una sola vez (12/09).

   El problema que reportó el dueño ("se te pegan los containers… así en varios
   lados"): cada bloque traía su propio margen de abajo —la tarjeta sí, la fila
   de cifras no, la barra de pestañas otro distinto— así que el resultado
   dependía de qué bloque viniera antes. Una pantalla que empezaba con cifras
   las dejaba pegadas a la tarjeta siguiente.

   Ahora la pantalla es una columna con UN gap, y los bloques no separan nada por
   su cuenta. Un solo lugar decide, y no hay forma de que dos márgenes se sumen
   ni de que falte uno.
   ═══════════════════════════════════════════════════════════════════════ */

#main,
.tabbody {
  display: flex; flex-direction: column; gap: var(--sp-5); align-items: stretch;
}

/* Los bloques ya no se separan solos: lo hace el gap de arriba. */
#main > .card, .tabbody > .card,
#main > .alert, .tabbody > .alert,
#main > .headline, .tabbody > .headline,
#main > .tiles, .tabbody > .tiles,
#main > .tabs, .tabbody > .tabs,
#main > header.page, .tabbody > header.page,
#main > .toolbar, .tabbody > .toolbar { margin-bottom: 0; }

/* El título de pantalla sí pide un poco más de aire que el resto. */
#main > header.page { padding-bottom: var(--sp-1); }

/* Una fila de cifras se lee como una sola pieza: todas de la misma altura,
   aunque una no tenga la línea de apoyo. El resto de las tarjetas conserva su
   altura natural (align-items:start de .grid). */
.grid > .stat { align-self: stretch; }

/* Filas de clave/valor: el valor se pegaba a su etiqueta (un "2px" suelto) y
   las filas anchas —las que llevan botones y una línea de ayuda— quedaban tan
   juntas que la ayuda de una parecía el encabezado de la siguiente. */
.props { gap: var(--sp-4); }
.props dd { margin-top: var(--sp-1); }
.props dd .footnote,
.props dd .acts + .footnote { margin-top: var(--sp-2); }
.props .prop.wide + .prop.wide { margin-top: var(--sp-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   CLASES QUE EL JS APLICABA Y EL CSS NO DEFINÍA (12/09).

   Una clase sin regla no da error en ninguna parte: el navegador la ignora en
   silencio y el bloque cae al comportamiento por defecto. Así se veía la ficha
   de Jugadores: los botones encimados y el formulario apilado a todo el ancho.

   - `.acts` existía SÓLO anidada (.editrow .acts, .shoprow .acts, .rowline
     .acts), así que fuera de esas tablas no era flex y los botones se pegaban.
   - `.gap`, `.grow` y `.primary` no existían en ningún lado.
   - `.mono` la usaba cantera.js desde antes, también sin definir.

   scripts/clases-huerfanas.py las busca todas: correrlo al agregar pantallas.
   ═══════════════════════════════════════════════════════════════════════ */

/* Fila de botones de acción. */
.acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* Fila de campos de un formulario: se apilan solos cuando no entran. */
.row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; }
.row > .gap, .row.gap { gap: var(--sp-4); }
.grow { flex: 1 1 220px; min-width: 0; }

/* El botón que hace LA acción de la pantalla. El resto es secundario. */
button.primary { background: var(--accent); color: #05171b; }
button.primary:hover { filter: brightness(1.12); }

/* Botón chico: para las acciones dentro de una fila o una tabla. */
button.small { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }

/* Números y códigos que se leen en columna. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Pagos (pagos.js, custom 29/09) ------------------------------------- */
.pg-barra { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.pg-barra .chips { margin: 0; }
.pg-plata .value { color: var(--oro); }
.pg-neg { color: #fca5a5; font-variant-numeric: tabular-nums; }
.pg-pos { color: #86efac; font-variant-numeric: tabular-nums; }
.grade.pg-mini { margin-left: var(--sp-2); font-size: 10px; padding: 0 6px; vertical-align: middle; }
.pg-paginas { gap: var(--sp-3); }
.pg-evento { border-top: 1px solid var(--border); padding: var(--sp-3) 0; }
.pg-evento:first-of-type { border-top: 0; }
.pg-pre {
  margin: var(--sp-2) 0 0; padding: var(--sp-3); max-height: 320px; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md, 6px);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg-2);
  white-space: pre-wrap; word-break: break-all;
}

/* --- Comunidad (comunidad.js, custom 30/09) ------------------------------ */
textarea.com-texto, input.com-fecha {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg);
  border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--fs-md); font-family: inherit;
}
textarea.com-texto { width: 100%; resize: vertical; line-height: 1.5; }
textarea.com-texto:focus, input.com-fecha:focus { outline: 2px solid var(--accent-dim); outline-offset: -1px; border-color: var(--accent-dim); }
input.com-fecha { color-scheme: dark; }
.com-barra { margin-bottom: var(--sp-4); }
.com-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.com-form label.stacked { margin-bottom: var(--sp-3); }
.com-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 900px) { .com-dos { grid-template-columns: 1fr; } }
.com-idioma { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.com-check { gap: var(--sp-2); cursor: pointer; }
.com-pie { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.com-link { color: var(--accent); text-decoration: none; }
.com-link:hover { text-decoration: underline; }
.grade.com-mini { margin-left: var(--sp-2); font-size: 10px; padding: 0 6px; vertical-align: middle; }
.com-reporte { border-top: 1px solid var(--border); padding: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.com-reporte:first-child { border-top: 0; padding-top: 0; }
.com-rep-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.com-cita { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--border); background: var(--panel-2); white-space: pre-wrap; color: var(--fg-2); }