/* ==========================================================================
   Brael: estilo de herramienta. 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,
   qué hace cada botón, el terreno y el agua.
   ========================================================================== */

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

  --fondo: #ffffff;
  --tinta: #000000;
  --tenue: #595959;       /* 7:1 sobre blanco */
  --apagado: #6e6e6e;     /* 5:1 sobre blanco: lo que no pide atención */
  --suave: #f4f4f4;
  --linea: #c9c9c9;
  --agua: #0b5cad;
  --camino: #6b3f12;
  --mitico: #6b21a8;

  /* Las secciones del menú */
  --sec-mundo: #166534;
  --sec-habitantes: #9a3412;
  --sec-otros: #6b21a8;
  --sec-mesas: #1e40af;
  --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;
  --editar-fondo: #fef3c7; --editar-tinta: #78350f; --editar-borde: #f59e0b;
  --fuera-fondo: #ede9fe;  --fuera-tinta: #5b21b6;  --fuera-borde: #c4b5fd;
  --volver-fondo: #f1f1f1; --volver-tinta: #333333; --volver-borde: #bdbdbd;
  --grupo-fondo: #fce7f3;  --grupo-tinta: #9d174d;  --grupo-borde: #f9a8d4;
  --trama-fondo: #ffedd5;  --trama-tinta: #9a3412;  --trama-borde: #fdba74;
  --finado-fondo: #fee2e2; --finado-tinta: #991b1b; --finado-borde: #fca5a5;

  /* Terrenos. Claros a propósito: el texto negro encima da 4,5:1 o más
     (lo comprueba test_estilo). */
  --t-llanura: #cde6a0;
  --t-estepa: #e6e0a0;
  --t-sabana: #e8cf85;
  --t-colinas: #c3cf8f;
  --t-bosque: #8cc58c;
  --t-bosque-antiguo: #6fae83;
  --t-selva: #5fb58a;
  --t-pantano: #9db08a;
  --t-marisma: #a8d0bd;
  --t-montania: #bdb6ac;
  --t-malpais: #d8a988;
  --t-desierto: #f2dc9a;
  --t-tundra: #dbe3e2;
  --t-banquisa: #f0f6fa;
  --t-rio: #9fd0ee;
  --t-costa: #f3e8c4;
  --t-oceano: #84b8e0;

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

.sec-mundo { --sec: var(--sec-mundo); }
.sec-habitantes { --sec: var(--sec-habitantes); }
.sec-otros { --sec: var(--sec-otros); }
.sec-mesas { --sec: var(--sec-mesas); }
.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; padding-bottom: 0.3rem; border-bottom: 3px solid var(--sec); }
h2 { font-size: 1.3rem; color: var(--sec); }
h2 .tenue { font-weight: 400; }
h3 { font-size: 1.1rem; }
h4, h5, h6 { font-size: 1rem; }
h1 a, h2 a, h3 a { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; }
h2 .boton { margin-left: 0.5rem; vertical-align: middle; font-weight: 400; }

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(--tinta); }

.pista, .tenue { color: var(--tenue); font-size: 0.92rem; }
.pista code { font-size: 0.86rem; }

/* --- 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 { border-bottom: 2px solid var(--sec); background: var(--suave); }
tr > th:first-child:not(:only-child) { 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);
}
.marca { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--toque);
         font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.marca:hover { text-decoration: none; }
/* El detalle de Brael: la espiral en la que se numeran sus regiones. */
.marca-espiral { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--sec); stroke-width: 2;
                 stroke-linecap: square; stroke-linejoin: miter; }
.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-buscar { margin: 0 0 0.75rem; }
.nav-buscar input { width: 100%; }

.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;
}
/* Los formularios usan .nav-grupo de subtítulo: ahí, sin la banda del menú. */
main .nav-grupo { margin: 0.25rem 0 0; padding: 0; background: none; color: inherit; }
.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 { 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 y formularios ----------------------------------------------- */
/* 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(.cuerpo p:not(.pista) a, .cuerpo li a, .urdur p a, .urdur li a, blockquote a,
                  .region, .region-vacia, .celda-boton, .etiqueta, .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);
}
:where(main a:not(.cuerpo p:not(.pista) a, .cuerpo li a, .urdur p a, .urdur li a, blockquote a,
                  .region, .region-vacia, .celda-boton, .etiqueta, .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-editar { --b-fondo: var(--editar-fondo); --b-tinta: var(--editar-tinta); --b-borde: var(--editar-borde); }
.b-lugar { --b-fondo: var(--lugar-fondo); --b-tinta: var(--lugar-tinta); --b-borde: var(--lugar-borde); }
.b-fuera { --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. */
.cuerpo p:not(.pista) a, .cuerpo li a, .urdur p a, .urdur li a, blockquote a { color: var(--ver-tinta); }

/* Un título que es enlace: botón, pero con cuerpo de título. */
main h2 > a:not(.b-fuera) { font-size: 1.05rem; font-weight: 700; }
main h2 > .b-fuera { font-weight: 400; }

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); }
button.b-borrar { background: var(--borrar); border-color: var(--borrar); }

/* 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;
}

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); }

main form {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  background: var(--suave);
  border-radius: var(--radio);
}
main form label { display: grid; gap: 0.2rem; font-weight: 700; font-size: 0.95rem; }
main form label .tenue { font-weight: 400; }
main form input:not([type="checkbox"]):not([type="radio"]), main form select, main form textarea { width: 100%; }
main form input[type="checkbox"], main form input[type="radio"] { width: 1.25rem; }
main form button, main form .boton, main form a { justify-self: start; }
main form textarea { font-family: var(--mono); font-size: 0.92rem; min-height: 10rem; resize: vertical; }
.fila { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.fila > label { flex: 1 1 8rem; min-width: 0; }
label.compacta { grid-auto-flow: column; justify-content: start; align-items: center; gap: 0.5rem; font-weight: 400; }
label.compacta input { width: auto; }

.previa { border: 1px dashed #767676; padding: 0.6rem 0.75rem; border-radius: var(--radio); background: var(--fondo); }
.previa:empty::before { content: "La previsualización aparece aquí."; color: var(--tenue); }

/* --- Piezas de las fichas ------------------------------------------------ */
.titulo-icono { display: flex; align-items: center; gap: 0.6rem; }
.icono-hex { width: 2.75rem; height: auto; flex: none; }
.icono-hex.chico { width: 2rem; }

.evento {
  margin: 0.75rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--sec);
  border-radius: var(--radio);
}
.evento .meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.35em; color: var(--tenue); font-size: 0.92rem; margin-bottom: 0.4rem; }
.evento .cuerpo > :first-child { margin-top: 0; }
.evento .cuerpo > :last-child { margin-bottom: 0; }
.evento .cuerpo > strong:first-child > a, .tarjeta-cabeza strong > a { font-size: 1rem; font-weight: 700; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; }
.tarjetas .evento { display: flex; flex-direction: column; margin: 0; }
.tarjetas .meta { margin: auto 0 0; }
.tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; }
.tarjeta-texto { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--tenue); }
.evento.apagada { border-left-color: var(--linea); background: var(--suave); }

.etiqueta {
  display: inline-block;
  padding: 0 0.4rem;
  font-size: 0.875rem;
  background: var(--volver-fondo);
  color: var(--volver-tinta);
  border: 1px solid var(--volver-borde);
  border-radius: var(--radio);
}
/* «mundo» es lo normal: va sin caja. Lo que informa es que sea de un grupo. */
.etiqueta.mundo { padding: 0; background: none; border: 0; color: var(--tenue); }
.etiqueta.finado { background: var(--finado-fondo); color: var(--finado-tinta); border-color: var(--finado-borde); }
a.etiqueta { display: inline-flex; align-items: center; min-height: var(--alto-boton); text-decoration: none; font-weight: 700; }
a.etiqueta:hover { filter: brightness(0.93); }
a.etiqueta[href^="/grupo/"] { background: var(--grupo-fondo); color: var(--grupo-tinta); border-color: var(--grupo-borde); }
a.etiqueta[href^="/trama/"] { background: var(--trama-fondo); color: var(--trama-tinta); border-color: var(--trama-borde); }

.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; }

.npc-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; border: 1px solid var(--tinta); border-radius: var(--radio); }
.npc-title, .callout-title { font-weight: 700; margin-bottom: 0.25rem; }
.danger-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; background: var(--borrar); color: var(--fondo); border-radius: var(--radio); }
.danger-box a { color: inherit; }
.danger-box p { margin: 0; }
.aviso-error { padding: 0.6rem 0.75rem; border: 2px solid var(--borrar); border-radius: var(--radio);
               color: var(--borrar); font-weight: 700; }

.plano-svg { max-width: 100%; margin: 0.75rem 0; border: 1px solid var(--linea); }
.plano-svg svg { display: block; width: 100%; height: auto; }

/* Lo que llega en markdown de urdur y arard */
.urdur { padding: 0.5rem 0.9rem; border: 1px solid var(--linea); border-radius: var(--radio); overflow-x: auto; }
.urdur > :first-child { margin-top: 0; }
.urdur td:first-child { font-family: var(--mono); white-space: nowrap; }

/* --- El terreno: cada clase da su color ------------------------------------ */
.t-llanura { --terreno: var(--t-llanura); }
.t-estepa { --terreno: var(--t-estepa); }
.t-sabana { --terreno: var(--t-sabana); }
.t-colinas { --terreno: var(--t-colinas); }
.t-bosque { --terreno: var(--t-bosque); }
.t-bosque_antiguo { --terreno: var(--t-bosque-antiguo); }
.t-selva { --terreno: var(--t-selva); }
.t-pantano { --terreno: var(--t-pantano); }
.t-marisma { --terreno: var(--t-marisma); }
.t-montania { --terreno: var(--t-montania); }
.t-malpais { --terreno: var(--t-malpais); }
.t-desierto { --terreno: var(--t-desierto); }
.t-tundra { --terreno: var(--t-tundra); }
.t-banquisa { --terreno: var(--t-banquisa); }
.t-rio { --terreno: var(--t-rio); }
.t-costa { --terreno: var(--t-costa); }
.t-oceano { --terreno: var(--t-oceano); }

.rio-trazo { fill: none; stroke: var(--agua); stroke-linecap: round; }
.lago-marca { fill: var(--agua); }
.camino-trazo { fill: none; stroke: var(--camino); }

/* --- La rejilla de comarcas de una región --------------------------------- */
.rejilla { width: auto; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.875rem; }
.rejilla th, .rejilla td { border: 0; padding: 0; text-align: center; }
.rejilla tr:first-child:not(:has(td)) th { border: 0; background: none; }
.rejilla th { padding: 0.15rem 0.4rem; font-family: var(--mono); font-weight: 400; color: var(--tenue); }
.rejilla tr > th:first-child:not(:only-child) { white-space: normal; }

.celda-boton {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 7.25rem;
  min-height: 6.75rem;
  padding: 0.3rem 0.25rem;
  background: var(--terreno, var(--fondo));
  color: var(--tinta);
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  outline: 1px solid rgb(0 0 0 / 0.14);
  outline-offset: -1px;
}
.celda-boton > :not(.celda-rios) { position: relative; }
.celda-boton:hover { outline: 2px solid var(--tinta); outline-offset: -2px; z-index: 1; }
.celda-boton:hover span { text-decoration: underline; }
.celda-codigo { font-family: var(--mono); font-weight: 700; }
.celda-boton .icono-hex { width: 2.5rem; }
.celda-rios { position: absolute; inset: 0; width: 100%; height: 100%; }
.celda-rios .rio-trazo { stroke-width: 0.4; }
.celda-rios .camino-trazo { stroke-width: 0.3; stroke-dasharray: 0.6 0.4; }
/* Los lugares, solo iconos y fuera del flujo: el cuadro no cambia de tamaño. */
.celda-boton > .celda-lugares { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 0.05rem; }
.celda-boton .celda-lugares img { width: 0.9rem; height: auto; }
/* El recorrido de cada río está en la lista de debajo: aquí, solo para lector de pantalla. */
.region-rios { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Visitada = con eventos. Por dentro, para que no descuadre la rejilla. */
.celda-boton.visitada { box-shadow: inset 0 0 0 3px var(--tinta); }
.celda-boton.celda-vacia { background: var(--fondo); outline: 1px dashed #767676; outline-offset: -1px; color: var(--apagado); justify-content: center; }

/* --- El mapa de regiones -------------------------------------------------- */
.mapa-regiones-envoltura {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0.75rem 0 1rem;
  padding: 2px;  /* que quepa el contorno de foco */
}
.mapa-regiones {
  --lado: var(--lado-ancho, 10rem);
  display: grid;
  grid-template-columns: repeat(var(--columnas), var(--lado));
  width: max-content;
  margin: 0 auto;
}
.region {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--lado);
  min-height: 100%;
  color: var(--tinta);
  text-decoration: none;
}
.region:hover { z-index: 2; outline: 2px solid var(--tinta); }
.region:focus-visible { z-index: 2; }
.region-mapa { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.miniatura { display: block; width: 100%; height: 100%; }
.miniatura rect { fill: var(--terreno, var(--suave)); }
.miniatura .rio-trazo { stroke-width: 1.1; }
.miniatura .camino-trazo { stroke-width: 0.5; stroke-dasharray: 1 0.7; }
.frontera-marca { fill: none; stroke: var(--camino); stroke-width: 0.6; }
.region-pie { position: relative; display: block; min-height: 4.25rem; padding: 0.3rem 0.4rem 0.5rem; font-size: 0.875rem; line-height: 1.25; }
.region-pie > span { position: relative; display: table; background: var(--fondo); }
.region-numero { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.region:hover .region-nombre { text-decoration: underline; }
.region-faccion { color: var(--tenue); }
/* Un río que cruza al sur atraviesa el pie hasta la región de abajo. */
.rio-cruce { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--agua); }

/* Una región sin generar: su número y nada más. */
.region-vacia {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: var(--lado);
  height: 100%;
  min-height: var(--lado);
  padding-top: calc(var(--lado) / 2 - 0.75rem);
  font-family: var(--mono);
  color: var(--apagado);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px #ececec;
}
.region-vacia:hover { color: var(--tinta); background: var(--suave); text-decoration: underline; }

.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.mapa-leyenda li { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.muestra { width: 1rem; height: 1rem; flex: none; background: var(--terreno); outline: 1px solid rgb(0 0 0 / 0.2); outline-offset: -1px; }
.muestra-rio { width: 1.1rem; height: 3px; background: var(--agua); border-radius: 2px; }
.muestra-lago { width: 0.8rem; height: 0.8rem; background: var(--agua); border-radius: 50%; }
.muestra-camino { width: 1.1rem; height: 0; border-top: 3px dashed var(--camino); }
.muestra-icono { width: 1rem; height: auto; }
.muestra-frontera { width: 0.8rem; height: 0.8rem; border: 2px solid var(--camino); border-radius: 50%; }
.caminos-datos { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.caminos-avisos { padding: 0.6rem 0.8rem 0.6rem 1.8rem; background: var(--suave); border-radius: var(--radio); }
.caminos-lugares { padding: 0; list-style: none; }
.casilla-montura { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--toque); }
.caminos-lugares li { margin-bottom: 0.3rem; }

/* --- La comarca, calco de la de urdur (su estilo.css) ----------------------- */
.comarca {
  --hex-ancho: 84px;
  --hex-alto: 97px;
  --hex-hueco: 3px;
  margin: 1rem 0;
  overflow-x: auto;
}
.comarca-fila { display: flex; gap: var(--hex-hueco); margin-bottom: calc(var(--hex-alto) * -0.25 + var(--hex-hueco)); }
.comarca-fila:last-child { margin-bottom: 0; }
.comarca-hex {
  position: relative;
  width: var(--hex-ancho);
  height: var(--hex-alto);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  text-decoration: none;
  color: var(--tinta);
  cursor: pointer;
  /* El borde: un hexágono de fondo y otro un pelo más pequeño encima. */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #5f5f5f;
}
.comarca-hex > * { position: relative; z-index: 1; }
.comarca-hex::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--terreno, var(--fondo));
}
.comarca-hex:hover::before { filter: brightness(0.9); }
.comarca-num { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; }
.comarca-icono { width: 52%; height: auto; pointer-events: none; }
.comarca-hex .comarca-abrev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.comarca-marcas { font-size: 0.75rem; line-height: 1; min-height: 0.75rem; }
.comarca-hex.centro { background: var(--tinta); }
.comarca-hex.centro::before { inset: 4px; }
.comarca-hex.cortado::before {
  background: repeating-linear-gradient(45deg, var(--terreno, var(--fondo)), var(--terreno, var(--fondo)) 6px, #ffffff 6px, #ffffff 9px);
}
.comarca-hex.mitico { background: var(--mitico); }
.comarca-hex.mitico::before { inset: 5px; }
.comarca-hex > .comarca-agua { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.comarca-agua line { stroke: var(--agua); stroke-width: 4; stroke-linecap: round; }
.comarca-agua ellipse { fill: var(--agua); }
.comarca-hex > .comarca-camino { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.comarca-camino line { stroke: var(--camino); stroke-width: 3; stroke-dasharray: 6 4; }
.camino-leyenda { color: var(--camino); }
.agua-leyenda { color: var(--agua); }
.mapa-leyenda + .mapa-leyenda { margin-top: 0.4rem; }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }

.hex-lista { display: none; }
.hex-plegado { margin: 0 0 0.4rem; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
main details.hex-plegado > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-weight: 400;
  background: var(--terreno, var(--suave));
  color: var(--tinta);
  border: 0;
  border-radius: 0;
  list-style: none;
}
main details.hex-plegado > summary::-webkit-details-marker { display: none; }
.hex-num { flex: none; min-width: 1.6rem; font-family: var(--mono); font-weight: 700; }
.hex-resumen { min-width: 0; flex: 1; line-height: 1.25; }
.hex-resumen strong { display: block; }
.hex-marcas { flex: none; font-weight: 700; }
.hex-marcas .rio { color: #06356b; }  /* más oscuro que --agua: va sobre el color del terreno */
.hex-marcas .camino-marca { color: #4a2a0a; }
.hex-detalle { padding: 0.5rem 0.75rem 0.75rem; }
.hex-detalle p { margin: 0 0 0.4rem; }
.hex-detalle .mitico-texto { color: var(--mitico); }

/* --- Partida / Edición ------------------------------------------------------
   En partida no se ve lo que crea, edita o borra, para no darle sin querer en la
   mesa. Solo ayuda: las rutas siguen igual. --------------------------------- */
.modo {
  margin-left: auto;
  min-height: var(--toque);
  padding: 0.2rem 0.75rem;
  font-weight: 400;
  background: var(--editar-fondo);
  color: var(--editar-tinta);
  border-color: var(--editar-borde);
}
[data-modo="partida"] .modo { background: var(--lugar-fondo); color: var(--lugar-tinta); border-color: var(--lugar-borde); }
.modo:hover { filter: brightness(0.93); }
.solo-partida { display: none; }
[data-modo="partida"] .solo-partida { display: block; }
.aviso-partida { padding: 0.6rem 0.8rem; background: var(--suave); border-radius: var(--radio); }
[data-modo="partida"] .solo-edicion,
[data-modo="partida"] main .b-crear,
[data-modo="partida"] main .b-editar,
[data-modo="partida"] main .b-borrar,
[data-modo="partida"] main form[method="post"],
[data-modo="partida"] main details:has(> form[method="post"]),
[data-modo="partida"] main h2:has(+ form[method="post"] + h2) { display: none !important; }
/* Sin nada que crear, lo vacío deja de ser un botón. */
[data-modo="partida"] .region-vacia,
[data-modo="partida"] .celda-boton.celda-vacia { pointer-events: none; }

/* --- 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-buscar { grid-column: 1 / -1; }
  .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; }
  h1 { font-size: 1.6rem; }
  main h2 > .b-fuera { margin-top: 0.35rem; }
  .pie-sitio a { display: inline-flex; align-items: center; min-height: var(--toque); }
  .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; }
  main form input[type="checkbox"], main form input[type="radio"] { width: 1.5rem; height: 1.5rem; }
  label.compacta, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: var(--toque); align-items: center; }
  main form { padding: 0.75rem; }
  .fila { flex-direction: column; }

  .evento .meta { line-height: 1.3; }
  main > p { line-height: 2.1; }

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

  /* 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; }

  /* La comarca: como en urdur, la lista plegada sustituye a la tabla. */
  .comarca { --hex-ancho: 66px; --hex-alto: 76px; --hex-hueco: 2px; }
  .comarca-num { font-size: 0.72rem; }
  .solo-ancho { display: none; }
  .hex-lista { display: block; }

  /* La rejilla de comarcas llena el ancho: cinco columnas caben en 390 px. */
  .rejilla { width: 100%; table-layout: fixed; }
  .rejilla tr > th:first-child { width: 1.25rem; padding: 0; }
  .celda-boton { width: 100%; min-height: 5.5rem; padding: 0.2rem 0.05rem; font-size: 0.8rem; }
  .celda-boton .icono-hex { width: 2rem; }

  .mapa-regiones { --lado: 7rem; margin: 0; }
  .region-pie { min-height: 3.9rem; padding: 0.2rem 0.3rem 0.4rem; font-size: 0.8125rem; }
}

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

/* --- Mapa de carreteras de la portada (hoja 66) ---------------------------
   Blanco y negro, como el esquema del Templo. Sin JS, el SVG va a su tamaño y se
   desplaza en su caja; con JS (`con-zoom`), llena la caja y se mueve con el viewBox. */
.carreteras { margin-top: 1.5rem; }
.carreteras-caja { position: relative; max-width: 100%; overflow: auto; border: 1px solid var(--tinta);
  border-radius: var(--radio); background: var(--fondo); }
.carreteras-caja.con-zoom { overflow: hidden; height: min(75vh, 720px); touch-action: none; /* el JS la ajusta al mapa */
  cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }
.carreteras-caja.con-zoom.arrastrando { cursor: grabbing; }
.carreteras-caja.con-zoom .carreteras-svg { display: block; width: 100%; height: 100%; }
.carreteras-svg { display: block; font-family: var(--letra); }
.carreteras-svg .fondo { fill: var(--fondo); }
.carreteras-svg .lineas line { stroke: var(--tinta); stroke-width: 2.5; }
.carreteras-svg .rotulos-km rect { fill: var(--fondo); }
.carreteras-svg .rotulos-km text { font-size: 11px; font-style: italic; text-anchor: middle; fill: var(--tinta); }
.carreteras-svg .rotulo-ciudad rect, .carreteras-svg .rotulo-otro rect { fill: var(--fondo); opacity: 0.9; }
.carreteras-svg .nombre { font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--tinta); }
.carreteras-svg .donde { font-size: 10px; text-anchor: middle; fill: var(--tinta); }
.carreteras-svg .ciudad, .carreteras-svg .pueblo, .carreteras-svg .posta { fill: var(--fondo); stroke: var(--tinta); }
.carreteras-svg .ciudad { stroke-width: 4; }
.carreteras-svg .pueblo { stroke-width: 3; }
.carreteras-svg .posta { stroke-width: 2.5; }
.carreteras-svg .punto { fill: var(--tinta); }
.carreteras-svg .diana { fill: transparent; }
.carreteras-svg .nodo-enlace:hover .ciudad, .carreteras-svg .nodo-enlace:hover .pueblo,
.carreteras-svg .nodo-enlace:hover .posta, .carreteras-svg .nodo-enlace:focus .ciudad,
.carreteras-svg .nodo-enlace:focus .pueblo, .carreteras-svg .nodo-enlace:focus .posta { fill: var(--lugar-fondo); }
.carreteras-svg .leyenda text { font-size: 12px; fill: var(--tinta); }
.carreteras-svg .leyenda .nota { font-style: italic; }
/* De lejos (el JS pone `lejos`): solo los nombres de las ciudades, a 11 px en pantalla
   y debajo de su nodo; lo demás vuelve al acercarse. */
.carreteras-svg .lejanos { display: none; }
.carreteras-svg.lejos .lejanos { display: inline; }
.carreteras-svg.lejos .rotulos-km, .carreteras-svg.lejos .rotulos-lugar, .carreteras-svg.lejos .leyenda { display: none; }
.carreteras-svg .lejanos .escala { transform: scale(var(--inversa, 1)); }
.carreteras-svg .lejanos text { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--tinta);
  paint-order: stroke; stroke: var(--fondo); stroke-width: 3px; stroke-linejoin: round; }
.carreteras-leyenda { margin-top: 0.5rem; }
.carreteras-leyenda svg { vertical-align: middle; }
/* Encima de la caja, no dentro: así no tapan nada del mapa. */
.carreteras-botones { display: flex; justify-content: flex-end; gap: 0.4rem; margin-bottom: 0.4rem; }
.carreteras-botones[hidden] { display: none; }
.carreteras-botones button { min-width: var(--toque); min-height: var(--toque); font-size: 1.1rem; font-weight: 700; }
.carreteras-botones .ver-todo { font-size: 0.8rem; }

/* --- Capas del mapa de carreteras (hoja 67) --------------------------------- */
.carreteras-caja.en-grande.con-zoom { height: 85vh; }
/* Cada sitio, solo con su icono. Nunca más pequeño de 12 px de ancho en pantalla. */
.carreteras-svg .capas .escala-sitio { transform: scale(max(1, calc(var(--inversa, 1) * 0.35))); }
.carreteras-svg .capas .sitio { cursor: pointer; }
.carreteras-svg .capas .sitio:focus { outline: none; }
.carreteras-svg .capas .sitio:focus .diana, .carreteras-svg .capas .sitio:hover .diana {
  fill: var(--lugar-fondo); stroke: var(--lugar-borde); stroke-width: 2; }
.carreteras-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin-top: 0.5rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--lugar-borde); border-radius: var(--radio); background: var(--lugar-fondo); }
.carreteras-ficha[hidden] { display: none; }
.carreteras-ficha .acciones { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.carreteras-capas { margin-top: 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio); padding: 0 0.8rem; }
.carreteras-capas[open] { padding-bottom: 0.6rem; }
.carreteras-capas summary { min-height: var(--toque); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.carreteras-capas fieldset { border: 0; margin: 0.4rem 0 0; padding: 0; }
.carreteras-capas legend { font-weight: 700; font-size: 0.875rem; padding: 0; }
.carreteras-capas ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
.carreteras-capas li { margin: 0; max-width: none; }
.casilla-capa { display: flex; align-items: center; gap: 0.45rem; min-height: var(--toque); cursor: pointer; }
.casilla-capa input { width: 1.15rem; height: 1.15rem; margin: 0; }
.casilla-capa.sin-cargar { color: var(--apagado); }
.casilla-capa.sin-cargar .cuenta::after { content: " · sin cargar"; }