/* ==========================================================================
   Urdur: 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;
  --camino: #6b3f12;

  /* 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(.parchment-note a, .callout-box p 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(.parchment-note a, .callout-box p 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. */
.parchment-note a, .callout-box p 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; }
}

/* ==========================================================================
   Urdur: lo suyo
   ========================================================================== */
:root {
  /* Terrenos: los de Brael. Claros: el texto negro encima da 4,5:1 o más. */
  --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;
  --mitico: #6b21a8;
}
.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); }

/* Las tablas de consulta: la tirada se lee sola; lo que ha salido, resaltado. */
th.col-tirada { width: 8rem; }
.tabla-consulta td:first-child { white-space: nowrap; }
.tabla-consulta tr.elegida td { background: #fef3c7; }

main details.tabla-plegable > summary { display: block; width: 100%; margin: 1rem 0 0.25rem; padding: 0; background: none; border: 0; list-style: none; }
main details.tabla-plegable > summary::-webkit-details-marker { display: none; }
.tabla-plegable > summary h3 { margin: 0; }

/* --- El mapa de la comarca: cada casilla, un hexágono de verdad con clip-path.
   El solape vertical (-25 % del alto) hace que las filas engranen. --------- */
.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; }
/* La abreviatura la dicen ya el color y el icono: solo para lector de pantalla. */
.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; }
/* Partido por el borde: rayado. La otra mitad está en la comarca de al lado. */
.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; }
/* Ríos y lago, en azul, entre el terreno y el texto. No capturan el ratón. */
.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); }
.agua-leyenda { color: 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); }

.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0.4rem 0 0; color: var(--tinta); font-size: 0.875rem; }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.muestra { width: 1rem; height: 1rem; flex: none; background: var(--terreno); outline: 1px solid rgb(0 0 0 / 0.2); outline-offset: -1px; }

/* La rosa de 7 de «Limita con». Gris: este hexágono y lo que queda fuera. */
.rosa { --hex-ancho: 72px; --hex-alto: 83px; margin: 0.75rem 0; }
.comarca-hex.opaco { cursor: default; background: #6e6e6e; }
.comarca-hex.opaco::before { background: #8d8d8d; }

/* --- Los hexágonos de la comarca: tabla en ancho, plegados en el móvil ------ */
.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: var(--agua); }
.hex-marcas .camino-marca { color: var(--camino); }
.hex-detalle { padding: 0.5rem 0.75rem 0.75rem; }
.hex-detalle p { margin: 0 0 0.4rem; }
.hex-detalle .mitico-texto { color: var(--mitico); }

/* --- Reloj de la jornada, el rastreador de turnos --------------------------- */
.reloj { margin: 1rem 0 1.25rem; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.reloj > header { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.5rem; }
.reloj-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.reloj-entrada { margin-left: 0.25rem; }
.reloj button { background: var(--volver-fondo); color: var(--volver-tinta); border-color: var(--volver-borde); font-weight: 400; }
.reloj .reloj-mas-uno { background: var(--guardar); color: #ffffff; border-color: var(--guardar); font-weight: 700; }
.reloj-hora { margin: 0.4rem 0 0.1rem; font-size: 2rem; font-weight: 700; line-height: 1.1; font-family: var(--mono); }
.reloj-estado { padding: 0.1rem 0.5rem; font-family: var(--letra); font-size: 0.95rem; font-weight: 400; vertical-align: middle; border-radius: var(--radio); }
.reloj-estado.es-noche { background: #1e293b; color: #ffffff; }
.reloj-estado.es-dia { background: #fef3c7; color: #78350f; }
.reloj-cambio { margin: 0 0 0.75rem; }
.reloj-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--linea); }
.reloj-x2 { display: flex; align-items: center; gap: 0.35rem; }
.reloj-x2-nota { color: var(--tenue); font-size: 0.875rem; }
.reloj-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.reloj .reloj-accion { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.6rem 0.75rem; text-align: left; background: var(--fondo); color: var(--tinta); }
.reloj .reloj-cruzar { background: var(--ver-fondo); color: var(--ver-tinta); border-color: var(--ver-borde); }
.reloj-accion-nombre { font-weight: 700; }
.reloj-accion-coste { font-size: 0.875rem; }
.reloj-log { margin: 0.75rem 0 0; color: var(--tenue); font-size: 0.875rem; }

/* La caja de clima cuando el reloj la re-tira: un destello, para que se note. */
#clima-caja.clima-nuevo { animation: clima-destello 1.6s ease-out; }
@keyframes clima-destello {
  0%   { box-shadow: 0 0 0 3px var(--sec); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) { #clima-caja.clima-nuevo { animation: none; } }

/* --- Ficha del hexágono: lo ya decidido, en tarjetas breves ----------------- */
.breves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 0.6rem; margin: 1rem 0 1.25rem; }
.breve { padding: 0.5rem 0.75rem; background: var(--suave); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.breve-etiqueta { color: var(--tenue); font-size: 0.875rem; }
.breve p { margin: 0; font-weight: 700; line-height: 1.35; }

/* --- Calendario y tablón ---------------------------------------- */
.luna { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.stat-block .luna { flex-direction: row; }
.luna .fase-barra { font-family: var(--mono); letter-spacing: 1px; }
.luna .fase-nombre.llena, .luna .fase-nombre.nueva { font-weight: 700; }

.anuncio { margin: 0.9rem 0; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.anuncio > p:first-child { margin-top: 0; }
.anuncio h3 { margin-top: 0.3em; }
.anuncio .datos, .anuncio details { margin-top: 0.6rem; }
.tablon-comarca { margin-bottom: 0.25rem; }

@media (max-width: 640px) {
  .comarca { --hex-ancho: 66px; --hex-alto: 76px; --hex-hueco: 2px; }
  .rosa { --hex-ancho: 66px; --hex-alto: 76px; }
  .comarca-num { font-size: 0.72rem; }
  /* Comarca: la lista plegada sustituye a la tabla. */
  .solo-ancho { display: none; }
  .hex-lista { display: block; }
  th.col-tirada { width: auto; }
  main details.tabla-plegable > summary { display: flex; align-items: center; min-height: var(--toque); margin: 0.4rem 0; padding: 0.3rem 0.6rem; background: var(--suave); border-left: 4px solid var(--sec); border-radius: var(--radio); }
  .tabla-plegable > summary h3 { flex: 1; font-size: 1rem; }
  .tabla-plegable > summary::after { content: "▸"; margin-left: 0.5rem; }
  .tabla-plegable[open] > summary::after { content: "▾"; }
  .reloj-acciones { grid-template-columns: 1fr 1fr; }
  .reloj-x2 { min-height: var(--toque); }
}