/* ==========================================================================
   Cilia: estilo de herramienta, de la familia de Brael. Fácil de leer, en el
   ordenador (preparar) y en el móvil (la mesa). El color dice qué es cada cosa:
   la sección en la que estás y qué hace cada botón.
   ========================================================================== */

:root {
  --letra: 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Roboto Mono', monospace;

  --fondo: #ffffff;
  --tinta: #000000;
  --tenue: #595959;       /* 7:1 sobre blanco */
  --suave: #f4f4f4;
  --linea: #c9c9c9;
  --agua: #0b5cad;

  /* Las secciones: una por grupo del menú, en su orden */
  --sec-1: #166534;  --sec-2: #9a3412;  --sec-3: #6b21a8;  --sec-4: #1e40af;
  --sec-5: #0f766e;  --sec-6: #a21caf;  --sec-7: #a65e00;  --sec-8: #be123c;
  --sec-9: #4338ca;  --sec-10: #3f6212; --sec-11: #0369a1; --sec-12: #78350f;
  --sec-fuera: #374151;

  /* Lo que hace cada botón. Los sólidos, con letra blanca; los demás, con su tinta. */
  --crear: #15803d;
  --guardar: #1d4ed8;
  --borrar: #b91c1c;
  --ver-fondo: #dbeafe;    --ver-tinta: #1e40af;    --ver-borde: #93c5fd;
  --lugar-fondo: #ccfbf1;  --lugar-tinta: #115e59;  --lugar-borde: #5eead4;
  --fuera-fondo: #ede9fe;  --fuera-tinta: #5b21b6;  --fuera-borde: #c4b5fd;
  --volver-fondo: #f1f1f1; --volver-tinta: #333333; --volver-borde: #bdbdbd;

  --toque: 2.75rem;       /* 44 px: lo mínimo que se toca en el móvil */
  --alto-boton: 1.75rem;
  --radio: 4px;

  /* Los nombres de antes, para lo propio de cada app */
  --color-bg: var(--fondo);
  --color-text: var(--tinta);
  --color-muted: var(--tenue);
  --color-border: var(--linea);
  --color-light-bg: var(--suave);
  --color-table-bg: var(--suave);
  --color-table-head: var(--suave);
  --font-sans: var(--letra);
  --font-serif: var(--letra);
  --font-mono: var(--mono);
}

.sec-1 { --sec: var(--sec-1); }   .sec-2 { --sec: var(--sec-2); }
.sec-3 { --sec: var(--sec-3); }   .sec-4 { --sec: var(--sec-4); }
.sec-5 { --sec: var(--sec-5); }   .sec-6 { --sec: var(--sec-6); }
.sec-7 { --sec: var(--sec-7); }   .sec-8 { --sec: var(--sec-8); }
.sec-9 { --sec: var(--sec-9); }   .sec-10 { --sec: var(--sec-10); }
.sec-11 { --sec: var(--sec-11); } .sec-12 { --sec: var(--sec-12); }
.sec-fuera { --sec: var(--sec-fuera); }

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` manda siempre: un display de botón no debe volver a enseñarlo. */
[hidden] { display: none !important; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Sin peso: lo que diga cualquier clase, o el botón por defecto de abajo, manda. */
:where(a) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
:where(a):hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; margin: 1.5em 0 0.5em; }
h1 { font-size: 1.75rem; margin-top: 0; }
h2 { font-size: 1.3rem; color: var(--sec); }
h3 { font-size: 1.1rem; }
h4, h5, h6 { font-size: 1rem; }
h1 a, h2 a, h3 a { text-decoration: none; }
/* El título de la página es su primer h2: el h1 es el nombre de la herramienta. */
main > h2:first-of-type { font-size: 1.6rem; color: var(--tinta); margin-top: 0.5rem; padding-bottom: 0.3rem; border-bottom: 3px solid var(--sec); }
.titulo-icono { display: flex; align-items: center; gap: 0.6rem; }
.icono-hex { width: 2.75rem; height: auto; flex: none; }
.icono-hex.chico { width: 2rem; }

p { margin: 0 0 0.9em; }
main p, main li { max-width: 75ch; }
ul, ol { margin: 0 0 0.9em; padding-left: 1.25rem; }
li { margin-bottom: 0.3em; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 1.5em 0; }
img { max-width: 100%; height: auto; }
.simbolo { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor;
           stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

code, pre, kbd { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--suave); padding: 0.1em 0.3em; border-radius: var(--radio); }
pre { background: var(--suave); padding: 0.75rem; overflow-x: auto; border-radius: var(--radio); }
pre code { background: none; padding: 0; }
blockquote { margin: 0.75rem 0; padding: 0.25rem 0 0.25rem 0.9rem; border-left: 3px solid var(--sec); }

.pista, .tenue { color: var(--tenue); font-size: 0.92rem; }
.sep { color: var(--tenue); }
.nota-ayuda em { font-style: normal; }
.sin-ayuda .nota-ayuda { display: none; }

/* --- Tablas -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.25rem; font-size: 0.95rem; }
th, td { padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
th { font-weight: 700; }
tr:first-child:not(:has(td)) th, thead th { border-bottom: 2px solid var(--sec); background: var(--suave); }
td:first-child code { white-space: nowrap; }

/* --- Armazón ------------------------------------------------------------- */
.envoltorio { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }

.cabecera-sitio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--sec);
}
.cabecera-sitio h1 { margin: 0; font-size: 1.35rem; }
.marca { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--toque); text-decoration: none; }
.marca:hover { text-decoration: none; }
/* El detalle de cada herramienta, con el color de la sección. */
.marca-detalle { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--sec); stroke-width: 2;
                 stroke-linecap: round; stroke-linejoin: round; }
.lema { margin: 0; color: var(--tenue); font-size: 0.95rem; }

.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 2.5rem;
  align-items: start;
}
.tablero > * { min-width: 0; }
.tablero--sin-menu { grid-template-columns: minmax(0, 32rem); justify-content: center; }

.pie-sitio {
  margin-top: 3rem;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--linea);
  color: var(--tenue);
  font-size: 0.875rem;
}
.pie-sitio p { margin: 0 0 0.2rem; }

/* --- Menú: bloques por grupo --------------------------------------------- */
.nav-lateral { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: 0.95rem; }
.nav-lateral > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--toque);
  padding: 0 0.75rem;
  font-weight: 700;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  cursor: pointer;
  list-style: none;
}
.nav-lateral > summary::-webkit-details-marker { display: none; }
/* En ancho va siempre abierto: el botón de plegar sobra. */
@media (min-width: 901px) { .nav-lateral > summary { display: none; } }

.nav-lateral .nav-inicio {
  display: flex;
  align-items: center;
  min-height: 2rem;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.65rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
}
.nav-bloque { border: 1px solid var(--sec); border-radius: var(--radio); margin-bottom: 0.75rem; overflow: hidden; }
.nav-grupo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  background: var(--sec);
  color: var(--fondo);
  font-weight: 700;
}
.nav-lateral ul { list-style: none; margin: 0; padding: 0; }
.nav-lateral li { margin: 0; max-width: none; }
.nav-lateral li + li { border-top: 1px solid var(--linea); }
.nav-lateral li a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.65rem;
  text-decoration: none;
}
.nav-lateral li a:hover, .nav-lateral .nav-inicio:hover { background: var(--suave); text-decoration: underline; }
.nav-lateral a.activo { background: var(--suave); color: var(--sec); font-weight: 700; box-shadow: inset 4px 0 0 var(--sec); }

/* --- Botones ------------------------------------------------------------- */
/* Todo enlace es un botón pequeño, salvo los que van en medio de un texto: con
   :where no pesa nada, y así cualquier plantilla nueva sale bien sin hacer nada.
   El color dice qué hace; sin clase, abre una ficha. */
:where(main a:not(.reglas-cuerpo a, .ficha-lista p a, .hechizo-cuerpo a, .ficha-anexo-cuerpo p a, .nota a, .ficha-desc a, .ficha-pie a, .parchment-note a, blockquote a, .comarca-hex)),
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-boton);
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0.1rem 0.55rem;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  background: var(--b-fondo, var(--ver-fondo));
  color: var(--b-tinta, var(--ver-tinta));
  border: 1px solid var(--b-borde, var(--ver-borde));
  border-radius: var(--radio);
  cursor: pointer;
}
:where(main a:not(.reglas-cuerpo a, .ficha-lista p a, .hechizo-cuerpo a, .ficha-anexo-cuerpo p a, .nota a, .ficha-desc a, .ficha-pie a, .parchment-note a, blockquote a, .comarca-hex)):hover,
.boton:hover { text-decoration: none; filter: brightness(0.93); box-shadow: inset 0 0 0 1px currentColor; }

.b-crear { --b-fondo: var(--crear); --b-tinta: #ffffff; --b-borde: var(--crear); font-weight: 700; }
.b-lugar { --b-fondo: var(--lugar-fondo); --b-tinta: var(--lugar-tinta); --b-borde: var(--lugar-borde); }
.b-fuera, .enlace-api { --b-fondo: var(--fuera-fondo); --b-tinta: var(--fuera-tinta); --b-borde: var(--fuera-borde); }
.b-volver { --b-fondo: var(--volver-fondo); --b-tinta: var(--volver-tinta); --b-borde: var(--volver-borde); }

/* Los enlaces en medio de un texto se leen como enlaces. */
.reglas-cuerpo a, .ficha-lista p a, .hechizo-cuerpo a, .ficha-anexo-cuerpo p a, .nota a, .ficha-desc a, .ficha-pie a, .parchment-note a, blockquote a { color: var(--ver-tinta); }

main h3 > a { font-size: 1.05rem; font-weight: 700; }
.generadores { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.6rem 0; }
.migas { margin-bottom: 0.5rem; }

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  background: var(--guardar);
  color: #ffffff;
  border: 1px solid var(--guardar);
  border-radius: var(--radio);
  cursor: pointer;
}
button:hover { filter: brightness(0.88); }

/* Lo que se despliega dentro de una página también se ve que se toca. */
main details > summary {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--alto-boton);
  margin: 0.25rem 0;
  padding: 0.1rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--volver-fondo);
  color: var(--volver-tinta);
  border: 1px solid var(--volver-borde);
  border-radius: var(--radio);
  cursor: pointer;
}

/* --- Formularios --------------------------------------------------------- */
input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid #767676;
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--tinta); }
.consulta { margin: 0 0 1.25rem; padding: 0.9rem 1rem; background: var(--suave); border-radius: var(--radio); }
.consulta .campos { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.consulta label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.consulta input[type="number"] { width: 7rem; }
.consulta .casilla { display: flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; }
.consulta .casilla label { margin: 0; font-weight: 400; }
.consulta > label { margin-bottom: 0.6rem; }
.consulta > label input:not([type="checkbox"]), .consulta > label select { display: block; width: 100%; margin-top: 0.2rem; }
.consulta > button { width: 100%; }

/* --- Cajas --------------------------------------------------------------- */
.stat-block { margin: 0.9rem 0; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.stat-block header { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; }
.stat-block .stat-line { margin: 0 0 0.2rem; display: flex; flex-wrap: wrap; column-gap: 1.1rem; }
.stat-block .stat-desc { margin: 0.4rem 0 0; }
.stat-block .stat-notes { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--linea); }
.stat-block .stat-notes > :last-child { margin-bottom: 0; }
.stat-block code { font-size: 0.95em; }

.parchment-note { margin: 0.75rem 0; padding: 0.6rem 0.8rem; background: var(--suave); border-radius: var(--radio); color: #333333; font-size: 0.95rem; }
.npc-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.npc-title, .callout-title { font-weight: 700; margin-bottom: 0.25rem; }
.callout-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; background: var(--suave); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.danger-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; background: var(--borrar); color: var(--fondo); border-radius: var(--radio); }
.danger-box p { margin: 0 0 0.3rem; }
.danger-box p:last-child { margin-bottom: 0; }

.datos { margin: 0; }
.datos div { display: flex; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--linea); }
.datos div:last-child { border-bottom: 0; }
.datos dt { font-weight: 700; min-width: 9.5rem; }
.datos dd { margin: 0; min-width: 0; }

.semilla { margin-top: 1.25rem; padding-top: 0.6rem; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 0.92rem; }
.semilla strong { font-family: var(--mono); color: var(--tinta); }
.semilla-arriba { margin: 0.5rem 0; padding-top: 0; border-top: 0; }

.copiar { margin: 1.25rem 0 0; }
.copiar .pista { margin: 0.5rem 0; }
.copiar textarea { display: block; width: 100%; font-family: var(--mono); font-size: 0.85rem; line-height: 1.4; resize: vertical; white-space: pre; }
.copiar p:last-child { margin: 0.5rem 0 0; }
.copiar:not([open]) > summary { margin-bottom: 0; }

/* --- Ancho de tableta y móvil: el menú, plegado, encima del contenido ------- */
@media (max-width: 900px) {
  .envoltorio { padding: 0 1rem; }
  .cabecera-sitio { padding: 0.4rem 0; margin-bottom: 0.75rem; }
  .tablero { display: flex; flex-direction: column-reverse; gap: 1rem; }
  .tablero > * { width: 100%; }
  .nav-lateral { position: static; max-height: none; overflow: visible; }
  .nav-lateral[open] > summary { margin-bottom: 0.75rem; }
  .nav-lateral nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 0.75rem; align-items: start; }
  .nav-lateral .nav-inicio { grid-column: 1 / -1; min-height: var(--toque); }
  .nav-lateral li a { min-height: var(--toque); }
}

/* --- Móvil: la mesa. Se lee a un brazo y todo se toca con el dedo --------- */
@media (max-width: 640px) {
  :root { --alto-boton: var(--toque); }
  body { font-size: 1.0625rem; }
  main > h2:first-of-type { font-size: 1.45rem; }
  .lema { display: none; }

  button { min-height: var(--toque); padding: 0.4rem 0.9rem; font-size: 1rem; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: var(--toque); font-size: 1.0625rem; }
  input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; }
  .consulta { padding: 0.75rem; }
  .consulta .campos { flex-direction: column; align-items: stretch; }
  .consulta .campos > div { width: 100%; }
  .consulta input[type="number"], .consulta select, .consulta input[type="text"] { width: 100%; }
  .consulta .casilla, .consulta label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 0.4rem; min-height: var(--toque); margin: 0; }
  .consulta .casilla label { flex: 1; display: flex; align-items: center; min-height: var(--toque); }
  .consulta .campos > div:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.4rem; }
  .consulta .campos > div:has(> input[type="checkbox"]) > label { flex: 1; display: flex; align-items: center; min-height: var(--toque); margin: 0; font-weight: 400; }
  /* Las tablas son lo que más se lee en la mesa: compactas, para no alargar la página. */
  table { font-size: 0.94rem; line-height: 1.32; }
  th, td { padding: 0.3rem 0.35rem; }
  main p, main li { line-height: 1.42; }
  .pie-sitio a { display: inline-flex; align-items: center; min-height: var(--toque); }

  .datos div { flex-direction: column; gap: 0; }
  .datos dt { min-width: 0; }
  .stat-block .stat-line { flex-direction: column; }

  /* La tabla ancha pasa a fichas: una caja por fila, cada dato con su rótulo.
     La clase y los rótulos los pone el script de base.html. */
  table.fichas, table.fichas tbody, table.fichas tr, table.fichas td { display: block; width: 100%; }
  table.fichas thead, table.fichas tr.cabeza { display: none; }
  table.fichas tr { margin-bottom: 0.6rem; padding: 0.4rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio); }
  table.fichas td { padding: 0.15rem 0; border: 0; }
  table.fichas td[data-rotulo] { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: 0.5rem; }
  table.fichas td[data-rotulo]::before { content: attr(data-rotulo); font-family: var(--letra); font-weight: 700; font-size: 0.875rem; color: var(--tenue); }
  table.fichas td.sin-dato { display: none; }
}

@media print {
  .nav-lateral, .pie-sitio { display: none; }
  .tablero { display: block; }
}

/* ==========================================================================
   Cilia: lo suyo
   ========================================================================== */

/* El sistema (perfil) se decide antes que la sección: va encima del menú. */
.columna-lateral { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.columna-lateral .nav-lateral { position: static; max-height: none; overflow: visible; }
.selector-perfil { margin-bottom: 0.75rem; }
.selector-perfil label { display: block; margin-bottom: 0.2rem; font-weight: 700; }
.selector-perfil select { width: 100%; }

/* Aquí los campos van sueltos en el formulario, en fila si caben. */
.consulta:not(:has(> .campos)) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.consulta:not(:has(> .campos)) > label { margin: 0; }
.consulta:not(:has(> .campos)) > label input:not([type="checkbox"]) { width: 7rem; }
.consulta:not(:has(> .campos)) > button { width: auto; }
.consulta label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; font-weight: 400; }
.nota { color: var(--tenue); font-size: 0.92rem; }

/* --- La ficha, de monstruo, aventurero o hechizo: cajas apiladas ----------- */
.stat-block.ficha { padding: 0; overflow: hidden; }
.ficha-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.6rem 0.9rem; background: var(--suave); border-bottom: 1px solid var(--linea); }
.ficha-nombre { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.ficha-insignia { flex: none; padding: 0.1rem 0.5rem; font-family: var(--mono); font-size: 0.9rem; color: var(--sec); background: var(--fondo); border: 1px solid var(--sec); border-radius: var(--radio); text-align: right; }
.ficha-meta { margin: 0.45rem 0 0; padding: 0 0.9rem; color: var(--tenue); font-size: 0.92rem; }
.ficha-desc { margin: 0.5rem 0 0; padding: 0 0.9rem; }
.ficha-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; margin: 0.6rem 0 0; padding: 0.1rem 0.9rem 0.25rem; }
.ficha-stats:last-child { padding-bottom: 0.75rem; }
.ficha-stats > div { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid var(--linea); }
.ficha-stats > div.ancho { grid-column: 1 / -1; }
.ficha-stats dt { flex-shrink: 0; min-width: 4rem; color: var(--tenue); font-size: 0.875rem; font-weight: 700; }
.ficha-stats dd { margin: 0; min-width: 0; font-family: var(--mono); font-size: 0.95rem; }
.ficha-stats dd.destacado { font-weight: 700; }
.ficha-nota { color: var(--tenue); font-size: 0.875rem; }
.ficha-pie { margin: 0.25rem 0 0; padding: 0 0.9rem 0.75rem; color: var(--tenue); font-size: 0.92rem; }

.ficha-caja { margin: 0.9rem 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.ficha-caja-titulo { max-width: none; margin: 0; padding: 0.4rem 0.9rem; font-weight: 700; color: var(--sec); background: var(--suave); border-bottom: 1px solid var(--linea); }
.ficha-lista { margin: 0; padding: 0.75rem 0.9rem; list-style: none; }
.ficha-lista li { margin: 0 0 0.6rem; }
.ficha-lista li:last-child { margin-bottom: 0; }
.ficha-lista-nombre { font-weight: 700; }
.ficha-lista li p { margin: 0.2rem 0 0; }
.ficha-lista li.rasgo-futuro { color: var(--tenue); }
.ficha-caja > .datos { padding: 0.6rem 0.9rem; }
.ficha-anexo-cuerpo { padding: 0.75rem 0.9rem; }
.ficha-anexo-cuerpo > :first-child { margin-top: 0; }
.ficha-anexo-cuerpo > :last-child { margin-bottom: 0; }
.ficha-anexo-nota { color: var(--tenue); font-size: 0.92rem; }
.tesoro-desc { margin: 0.15rem 0 0.4rem; font-size: 0.95rem; }
.tesoro-desc + .tesoro-desc { margin-top: 0; }

/* Las tablas de avance son anchas de verdad: desplazan en su caja. */
.tabla-scroll { overflow-x: auto; margin: 0.6rem 0; }
.tabla-scroll table { margin: 0; }
.tabla-scroll tr.fila-actual td, .tabla-scroll .fila-actual td { background: #fef3c7; font-weight: 700; }

/* Hechizos: la misma ficha. */
.hechizo .ficha-stats { margin-top: 0.6rem; padding-bottom: 0.25rem; }
.hechizo-cuerpo { padding: 0.7rem 0.9rem 0; }
.hechizo-cuerpo p { margin: 0 0 0.7em; }
.hechizo-cuerpo > :last-child { margin-bottom: 0; }
.hechizo-cuerpo:last-child { padding-bottom: 0.75rem; }
.hechizo .ficha-caja { margin: 0.75rem 0.9rem; }
.hechizo .ficha-caja:last-child { margin-bottom: 0.9rem; }
.hechizo-reverso .ficha-caja-titulo { color: var(--tinta); }
.hechizo + h3 { margin-top: 1.6em; }

/* El catálogo: cada entrada, su botón. */
.rejilla-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 0.25rem 0.4rem; margin: 0.4rem 0 1.1rem; }
.rejilla-catalogo a { display: block; margin: 0; padding: 0.3rem 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Las reglas: texto largo, a un ancho y un interlineado cómodos ---------- */
.reglas-cuerpo { max-width: 40rem; font-size: 1.0625rem; line-height: 1.62; }
.reglas-cuerpo p, .reglas-cuerpo li { max-width: none; }
.reglas-cuerpo p { margin: 0 0 1em; }
.reglas-cuerpo h1, .reglas-cuerpo h2, .reglas-cuerpo h3, .reglas-cuerpo h4 { line-height: 1.25; }
.reglas-cuerpo h1 { padding-bottom: 0.3rem; border-bottom: 3px solid var(--sec); }
.reglas-cuerpo h2 { margin-top: 1.7em; font-size: 1.4rem; }
.reglas-cuerpo h3 { margin-top: 1.4em; font-size: 1.15rem; }
.reglas-cuerpo ul, .reglas-cuerpo ol { margin: 0.5em 0 1em; }
.reglas-cuerpo li { margin-bottom: 0.4em; }
.reglas-cuerpo table { margin: 1em 0 1.4em; font-size: 0.95rem; line-height: 1.4; }
.reglas-cuerpo .admonition { margin: 1.2em 0; padding: 0.5em 1em; background: var(--suave); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.reglas-cuerpo .admonition-title { margin: 0.3em 0; font-weight: 700; }
.reglas-cuerpo .admonition-title:empty { display: none; }

.migas { color: var(--tenue); }
.migas a { --b-fondo: var(--volver-fondo); --b-tinta: var(--volver-tinta); --b-borde: var(--volver-borde); }
ul.reglas-indice { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.2em 0 1em; padding: 0; list-style: none; }
ul.reglas-indice li { margin: 0; }
.reglas-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin: 2em 0 1em; padding-top: 0.75rem; border-top: 1px solid var(--linea); }
.reglas-otras { margin-top: 1.25rem; }

@media (max-width: 900px) {
  .columna-lateral { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 640px) {
  .ficha-stats { grid-template-columns: 1fr; }
  .ficha-stats > div.ancho { grid-column: auto; }
  .consulta:not(:has(> .campos)) { flex-direction: column; align-items: stretch; }
  .consulta:not(:has(> .campos)) > label input:not([type="checkbox"]), .consulta:not(:has(> .campos)) > button { width: 100%; }
  .consulta label:has(> input[type="checkbox"]) { min-height: var(--toque); }
  .reglas-cuerpo { font-size: 1.0625rem; line-height: 1.58; }
  .reglas-cuerpo table { font-size: 0.94rem; }
  .reglas-cuerpo td > a { display: inline-flex; align-items: center; min-height: var(--toque); }
  .reglas-nav { flex-direction: column; }
  .reglas-nav a { justify-content: flex-start; }
  .rejilla-catalogo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
}