/* Everthal · el hub: tus campañas, crear, explorar y la Biblioteca (tokens y base, en estilos.css).
   Lleva el tema «everlore» (Atlas, W10): neutro y limpio, con el menú al lado; el color lo ponen los mundos,
   cada tarjeta con el suyo (data-tema). La portada (W11) es lo que ve quien llega sin cuenta. */

.mono { font: 500 12px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font: 500 22px/1 var(--f-titulo); letter-spacing: -0.01em; }
.marca-puerta { width: 26px; height: 26px; flex: none; }

/* Botones del hub: rectos, sin grano, con su altura de dedo. */
:is(.hub, .portada) .boton-principal { border-radius: 10px; padding: 0 18px; min-height: 42px; font: 500 15px var(--f-ui); letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
:is(.hub, .portada) .boton-principal::before, :is(.hub, .portada) .boton-principal::after { display: none; }
.boton-borde { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--trazo);
  background: var(--hoja); color: var(--tinta); font: 500 15px var(--f-ui); text-decoration: none; cursor: pointer; }
.boton-borde:hover { border-color: var(--tenue); }
.boton-grande { min-height: 48px; font-size: 16px; }
:is(.hub, .portada) :is(.boton-principal, .boton-borde):focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.portada .boton-principal .icono { width: 18px; height: 18px; fill: currentColor; stroke: none; }

/* --- La portada (sin cuenta) ------------------------------------------------------------------- */
.portada { max-width: 1240px; margin: 0 auto; padding: 0 32px 72px; display: grid; gap: 56px; }
.portada-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--trazo); }
.portada-nav { display: flex; align-items: center; gap: 20px; }
.portada-nav a { color: var(--tinta-2); text-decoration: none; }
.portada-nav a:hover { color: var(--tinta); }
.portada-heroe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 56px; align-items: center; }
.portada-texto { display: grid; gap: 20px; justify-items: start; }
.portada-texto h1 { margin: 0; font: 400 clamp(40px, 5.4vw, 62px)/1.04 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; }
.portada-lema { margin: 0; max-width: 32em; font-size: 18px; line-height: 1.55; color: var(--tinta-2); }
.portada-botones { display: grid; gap: 10px; width: min(340px, 100%); }
.portada-nota { font-size: 13.5px; }
.portada-teselas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; }
.portada-teselas .tesela:first-child { grid-row: span 2; }
.portada-teselas .tesela:only-child { grid-column: span 2; }
.tesela { position: relative; border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; background: var(--hoja-2); }
.tesela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tesela:hover img { transform: scale(1.03); }
.tesela-pie { position: relative; margin: 12px; padding: 10px 14px; border-radius: 10px; display: grid; gap: 2px; background: var(--hoja); color: var(--tinta); }
.tesela-pie strong { font: 500 24px/1.1 var(--f-titulo); }
.tesela-pie .mono { color: var(--rubrica); }
.portada-claves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.clave { display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 14px; }
.clave h2 { margin: 0; font: 600 18px var(--f-ui); }
.clave p { margin: 0; color: var(--tinta-2); line-height: 1.5; }

/* --- El hub: el menú al lado y el cuerpo ---------------------------------------------------------- */
.hub { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.hub-lado { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: 20px 14px; display: flex; flex-direction: column; gap: 24px;
  background: var(--hoja); border-right: 1px solid var(--trazo); }
.hub-lado .marca { padding: 4px 10px; }
.hub-nav { display: grid; gap: 2px; }
.hub-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--tinta-2); text-decoration: none; font: 15px var(--f-ui); }
.hub-nav a:hover { background: var(--acento-suave); color: var(--tinta); }
.hub-nav a[aria-current] { background: var(--hoja-2); color: var(--tinta); font-weight: 500; }
.hub-nav-sello { margin-left: auto; font-size: 11px; color: var(--tenue); }
.hub-lado-pie { margin-top: auto; display: grid; gap: 10px; }
.gasto { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--trazo); border-radius: 10px; font-size: 13px; }
.gasto[hidden] { display: none; }
.medidor { height: 6px; border-radius: 3px; background: var(--hoja-2); overflow: hidden; }
#gasto-barra { height: 100%; width: 0; background: var(--tinta); border-radius: 3px; }
.cuenta { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: 500 14px var(--f-ui); text-align: left; cursor: pointer; overflow: hidden; }
.cuenta:hover { background: var(--acento-suave); }
.cuenta-inicial { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--papel); font-size: 13px; }
.cuenta-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hub-cuerpo { min-width: 0; max-width: 1180px; box-sizing: border-box; padding: 32px 40px 64px; }
.hub-vista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; }
.hub-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hub-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.hub-titulo { margin: 0; font: 400 34px/1.1 var(--f-titulo); letter-spacing: -0.015em; }
.hub-intro { margin: -16px 0 0; max-width: 640px; font-size: 16.5px; line-height: 1.55; color: var(--tinta-2); }
.bloque { display: grid; gap: 12px; align-content: start; }
.bloque-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bloque h2, .seccion h3 { margin: 0; font: 500 12px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.volver { justify-self: start; font: 500 15px var(--f-ui); color: var(--tinta-2); text-decoration: none; }
.volver:hover { color: var(--tinta); }
/* Hojas del hub: blancas, un filo fino y casi sin sombra. */
.hoja-suelta, .continuar, .tarjeta-mundo, .crear-resumen, .ficha-comienzo { background: var(--hoja); border-radius: 14px; position: relative; border: 1px solid var(--trazo); }

/* Seguir donde se dejó: la portada del mundo con su personaje, y al lado quién, dónde y «Continuar» (con el tema de su mundo). */
#continuar:empty { display: none; }
.continuar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); overflow: hidden; color: var(--tinta); }
.continuar-arte { position: relative; min-height: 240px; background: var(--hoja-2); }
.continuar-arte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.continuar-arte .medallon { --t: 96px; position: absolute; left: 24px; bottom: 20px; box-shadow: 0 0 0 3px var(--hoja); }
.continuar-texto { display: grid; gap: 8px; align-content: start; padding: 26px 30px; min-width: 0; }
.continuar-sobre { color: var(--rubrica); }
.continuar-titulo { font: 500 34px/1.1 var(--f-titulo); letter-spacing: 0.01em; }
.continuar-donde { color: var(--tinta-2); }
.continuar-botones { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.continuar .boton-principal { background: var(--rubrica); color: var(--hoja); }

/* Las demás campañas, en una tabla: retrato, quién, de qué mundo, dónde va y cuándo (las
   columnas, de la fila; el botón que la abre las comparte con subgrid). */
.tabla-partidas { --cols: 48px minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.4fr) 104px 84px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 14px; overflow: hidden; }
.tabla-partidas:has(.lista-partidas:empty) { display: none; }
.cabecera-partidas { display: grid; grid-template-columns: var(--cols); column-gap: 16px; padding: 12px 14px 10px; font-size: 11.5px; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--trazo); }
.lista-partidas { list-style: none; margin: 0; padding: 0; display: grid; }
.fila-partida { display: grid; grid-template-columns: var(--cols); column-gap: 16px; align-items: center; padding: 6px 14px; }
.fila-partida + .fila-partida { border-top: 1px solid var(--trazo); }
.fila-partida:hover { background: var(--acento-suave); }
.fila-partida .abrir { grid-column: 1 / 6; display: grid; grid-template-columns: subgrid; align-items: center; background: none; border: 0; padding: 6px 0; text-align: left; min-width: 0; color: inherit; font: inherit; cursor: pointer; }
.fila-partida .abrir .medallon { --t: 48px; border-radius: 10px; }
.fila-quien { display: grid; gap: 2px; min-width: 0; }
.fila-quien strong { font: 500 15.5px/1.3 var(--f-ui); }
.fila-quien .tenue, .fila-donde { font-size: 14px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-mundo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); min-width: 0; }
.fila-mundo i { width: 8px; height: 8px; border-radius: 50%; background: var(--rubrica); flex: none; }
.fila-cuando { font-size: 12px; color: var(--tenue); }
/* Una campaña acabada (el personaje murió): en gris, que no compite con las vivas. */
.fila-partida.acabada .medallon { filter: grayscale(1); opacity: 0.7; }
.fila-partida.acabada .fila-quien strong, .fila-partida.acabada .fila-donde { color: var(--tenue); }
.mas-partidas { display: block; width: 100%; min-height: 44px; border-top: 1px solid var(--trazo); border-radius: 0; }
.continuar-cita { margin: 4px 0 0; padding-left: 14px; border-left: 2px solid var(--trazo); font: italic 16px/1.5 var(--f-texto); color: var(--tinta-2); max-width: 40em; }
.fila-acciones { display: flex; gap: 2px; color: var(--tenue); }
.importar { cursor: pointer; }

/* Mundos: cada tarjeta con el tema de su mundo (data-tema): su portada, su letra y sus tintas. */
.tarjetas-mundo { display: grid; gap: 16px; }
.tarjetas-mundo.rejilla { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.tarjeta-mundo { display: grid; align-content: start; overflow: hidden; background: var(--hoja); color: var(--tinta); }
.tarjeta-mundo-arte { position: relative; height: 200px; background: var(--hoja-2); }
.tarjeta-mundo-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-mundo-cuerpo { display: grid; gap: 12px; padding: 18px 20px 20px; }
.caras { display: flex; }
.caras .medallon { --t: 40px; box-shadow: 0 0 0 2px var(--hoja); }
.caras .medallon + .medallon { margin-left: -8px; }
.tarjeta-mundo-titulo { margin: 0; font: 500 30px/1.05 var(--f-titulo); letter-spacing: 0.03em; }
.tarjeta-mundo-gancho { margin: 0; font: 15px/1.5 var(--f-texto); color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-mundo-botones { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tarjeta-mundo .boton-principal { background: var(--rubrica); color: var(--hoja); }
.tarjeta-mundo .boton-texto { color: var(--tinta-2); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.comunidad { margin-top: 4px; }
/* Las etiquetas del hub, en la letra de máquina de Atlas (no a pluma). */
:is(.hub, .portada) .etiqueta { font: 500 11px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--trazo); border-radius: 6px; }
:is(.hub, .portada) .etiqueta::before { display: none; }

/* La Biblioteca: filtros arriba y las piezas en hojas, en rejilla. */
.biblioteca-filtros { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.biblioteca-secciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -16px; }
.filtro { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 8px; padding: 0 12px; font: 500 14px var(--f-ui); color: var(--tinta-2); cursor: pointer; }
.filtro:hover { color: var(--tinta); border-color: var(--tenue); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.filtro[aria-pressed="true"] .tenue { color: inherit; opacity: 0.7; }
.filtro:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
#biblioteca-cuantas { margin: -14px 0 0; font-size: 14px; }
.biblioteca-piezas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items: start; }
/* Solo imágenes (la sección de la galería): más pequeñas y más por fila. */
.biblioteca-piezas.galeria { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.pieza { display: grid; gap: 10px; align-content: start; padding: 18px 20px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; position: relative; }
.pieza-cabecera { display: grid; gap: 2px; }
.pieza-seccion { font: 500 11px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tenue); }
.pieza-nombre { margin: 0; font: 600 17px/1.3 var(--f-ui); }
.pieza-desc { margin: 0; font: 15px/1.5 var(--f-ui); color: var(--tinta-2); }
.pieza-detalles { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; font: 14.5px/1.45 var(--f-ui); }
.pieza-detalles li::marker { color: var(--tenue); }
/* Un tema en pequeño (Biblioteca › Temas): con sus propios tokens (--m-*), en claro y en oscuro. */
.muestras-tema { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.muestra-tema { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--m-radio, 6px); background: var(--m-hoja); color: var(--m-tinta);
  border: 1px solid var(--m-trazo); box-shadow: inset 0 0 0 3px var(--m-papel); }
.muestra-titulo { font: 600 17px/1.2 var(--m-f-titulo); color: var(--m-rubrica); }
.muestra-texto { font: 14px/1.4 var(--m-f-texto); color: var(--m-tinta-2); }
.muestra-tintas { display: flex; gap: 5px; margin-top: 2px; }
.muestra-tintas i { width: 14px; height: 14px; border-radius: 50%; }
/* Escuchar un sonido de la Biblioteca. */
.pieza-sonidos { display: flex; flex-wrap: wrap; gap: 6px; }
.escuchar { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px 0 7px; border: 1px solid var(--trazo); border-radius: 8px;
  background: var(--hoja); color: var(--tinta-2); font: 13.5px/1.3 var(--f-ui); cursor: pointer; }
.escuchar .icono { width: 16px; height: 16px; }
.escuchar:hover { border-color: var(--tinta); color: var(--tinta); }
.escuchar[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.pieza-rotulo { font: 500 11px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tenue); }
.pieza-huecos { display: grid; gap: 4px; }
/* La galería de imágenes de la Biblioteca: la imagen arriba, qué es y su estilo debajo. */
.pieza-imagen { margin: 0; padding: 12px; gap: 8px; }
.pieza-imagen img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--hoja-2, transparent); border-radius: 8px; }
.pieza-imagen.escenario img { aspect-ratio: 3 / 2; object-fit: cover; }
.pieza-imagen figcaption { display: grid; gap: 4px; font: 14px/1.35 var(--f-ui); }
.pieza-imagen figcaption strong { font: 600 15px/1.3 var(--f-ui); }
.pieza-huecos dl { margin: 0; display: grid; gap: 4px; }
.pieza-huecos dt { font: 500 14.5px/1.35 var(--f-ui); }
.pieza-huecos dt::first-letter { text-transform: uppercase; }
.pieza-huecos dd { margin: 0 0 4px; font: 14.5px/1.45 var(--f-ui); color: var(--tinta-2); }
.pieza-como summary { cursor: pointer; font: 500 14px var(--f-ui); color: var(--tinta); }
.pieza-como p { margin: 6px 0 0; font: 14.5px/1.55 var(--f-ui); }
.pieza-usan { margin: 0; font: 13.5px/1.45 var(--f-ui); color: var(--tenue); }
/* Agrupada («Todo» y la galería sin grupo): un bloque por sección o por grupo, con unas pocas y «Ver todas». */
.biblioteca-piezas.agrupada { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.biblioteca-bloque { display: grid; gap: 12px; }
.biblioteca-bloque-cabecera { display: grid; gap: 2px; border-bottom: 1px solid var(--trazo); padding-bottom: 8px; }
.biblioteca-bloque-cabecera h3 { margin: 0; font: 400 24px/1.2 var(--f-titulo); color: var(--tinta); }
.biblioteca-bloque-cabecera h3 .tenue { font: 500 13px "Geist Mono", ui-monospace, monospace; letter-spacing: 0; }
.biblioteca-bloque-cabecera p { margin: 0; font: 14.5px/1.45 var(--f-ui); color: var(--tinta-2); }
.ver-todas { justify-self: start; font-size: 15px; }
/* Dentro de su bloque, la sección de cada pieza ya se sabe. */
.biblioteca-bloque .pieza-seccion { display: none; }
.biblioteca-grupos { margin-top: -22px; }
.biblioteca-grupos .filtro { font-size: 13px; min-height: 32px; padding: 0 10px; }
/* Una imagen de la galería: toda la imagen es el botón que la abre en grande. */
.pieza-imagen-ver { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: calc(var(--radio) / 2); overflow: hidden; }
.pieza-imagen-ver:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pieza-imagen-ver img { transition: transform 0.25s ease, filter 0.3s ease; }
.pieza-imagen-ver:hover img { transform: scale(1.03); }
.variantes-n { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 99px; background: rgb(20 14 6 / 0.62); color: #fff8ea; font: 500 12px var(--f-ui); }
/* Una revelación: tapada hasta que se toca, porque destripa la historia. */
.tapa { display: none; }
.pieza-imagen.destripa img { filter: blur(14px) saturate(0.4); transform: scale(1.12); }
.pieza-imagen.destripa .pieza-imagen-ver { cursor: pointer; }
.pieza-imagen.destripa .tapa { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; color: #fff8ea; font: 500 15px var(--f-titulo); letter-spacing: 0.06em; text-shadow: 0 1px 4px rgb(0 0 0 / 0.6); }
.tapa small { font: italic 13px var(--f-texto); letter-spacing: 0; }
.nombre-tapado { display: none; }
.pieza-imagen.destripa .nombre-tapado { display: inline; }
.pieza-imagen.destripa .nombre-real { display: none; }

/* Una imagen en grande: la imagen a un lado y lo que es al otro (debajo, en estrecho). */
.dialogo-imagen { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px; display: none; }
.dialogo-imagen[open] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.imagen-grande { display: grid; place-items: center; background: var(--papel); border-radius: calc(var(--radio) / 2); min-height: 0; }
.imagen-grande img { display: block; max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; }
.imagen-ficha { display: grid; gap: 12px; align-content: start; position: relative; overflow-y: auto; max-height: calc(100vh - 64px); padding: 6px 4px 4px 0; }
.imagen-ficha h2 { margin: 0; }
#imagen-detalles { display: grid; gap: 10px; }
#imagen-detalles p { margin: 0; }
.imagen-variantes { display: flex; flex-wrap: wrap; gap: 6px; }
.imagen-variantes .filtro { font-size: 13px; min-height: 32px; padding: 0 10px; }

/* La ficha de un mundo: la portada y, debajo, lo que promete y sus comienzos. */
.ficha-mundo { display: grid; gap: 34px; background: var(--papel); color: var(--tinta); border: 1px solid var(--trazo); border-radius: 16px; overflow: hidden; padding: 0 32px 36px; }
.ficha-mundo:not(:has(.ficha-mundo-portada)) { padding-top: 32px; }
.ficha-mundo-portada { margin: 0 -32px; height: 260px; background: var(--hoja-2); }
.ficha-mundo-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-mundo .seccion h3 { font: 500 15px var(--f-titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubrica); }
.ficha-mundo-cabecera { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.ficha-mundo-titulo { margin: 0; font: 500 clamp(40px, 7vw, 64px)/1 var(--f-titulo); letter-spacing: 0.05em; }
.ficha-mundo-titulo::first-letter { color: var(--rubrica); }
.ficha-mundo-gancho { margin: 0; font: italic 20px/1.55 var(--f-texto); color: var(--tinta-2); }
.ficha-mundo-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.pilares { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font: 16.5px/1.5 var(--f-texto); color: var(--tinta-2); }
.pilares li::marker { color: var(--rubrica); }
.pilares.no { list-style: "– "; }
.fichas-comienzo { display: grid; gap: 12px; }
.ficha-comienzo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px 18px; align-items: start; }
.ficha-comienzo .medallon { --t: 72px; }
.ficha-comienzo-texto { display: grid; gap: 4px; justify-items: start; }
.comienzo-cabecera { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.comienzo-cabecera strong { font: 500 19px var(--f-texto); }
.comienzo-cabecera .tenue { font: italic 14.5px var(--f-texto); }
.comienzo-desc { margin: 0; font: 16px/1.5 var(--f-texto); color: var(--tinta); }
.comienzo-pj { margin: 0; font: italic 15px var(--f-texto); color: var(--tinta-2); }

/* Crear una campaña (W14): los pasos numerados (un contador: el del personaje solo cuenta si se ve) y, al lado,
   la hoja de la campaña vestida con el tema del mundo elegido, con su portada y el retrato encima. */
.crear { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.crear-pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; min-width: 0; counter-reset: paso; }
fieldset.paso { gap: 12px; min-width: 0; counter-increment: paso; }
.paso-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font: 600 19px/1.2 var(--f-ui); color: var(--tinta); margin-bottom: 14px; }
.paso-num { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--tinta); color: var(--papel); font: 500 13px "Geist Mono", ui-monospace, monospace; }
.paso-num::before { content: counter(paso); }
.paso-pista { font: 400 14.5px var(--f-ui); color: var(--tenue); }
/* Opciones que se eligen como tarjetas: el radio escondido, la tarjeta entera marca. */
.opciones-tarjeta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.opciones-tarjeta.compactas { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.opcion-tarjeta { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--hoja); color: var(--tinta); border: 1px solid var(--trazo); border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.opcion-tarjeta input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-tarjeta:hover { border-color: var(--tenue); }
.opcion-tarjeta:has(input:checked) { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.opcion-tarjeta:has(input:checked)::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--tinta); }
/* La marca, trazada con el color del papel: se ve igual en claro y en oscuro. */
.opcion-tarjeta:has(input:checked)::before { content: ""; position: absolute; z-index: 1; top: 15.5px; right: 18.5px; width: 4px; height: 8px; border: solid var(--hoja); border-width: 0 2px 2px 0; rotate: 45deg; }
.opcion-tarjeta:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.opcion-tarjeta-titulo { font: 600 16px/1.3 var(--f-ui); padding-right: 24px; }
.opcion-tarjeta:has(.marca-tarjeta) .opcion-tarjeta-titulo { padding-right: 92px; }
.compactas .marca-tarjeta { position: relative; top: auto; right: auto; justify-self: start; }
.compactas .opcion-tarjeta:has(.marca-tarjeta) .opcion-tarjeta-titulo { padding-right: 24px; }
.opcion-tarjeta:has(.opcion-retrato) { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
.opcion-tarjeta:has(.opcion-retrato) > :not(.opcion-retrato):not(input) { grid-column: 2; }
.opcion-retrato { --t: 60px; grid-row: 1 / span 3; align-self: start; }
.opcion-tarjeta-texto { font: 14.5px/1.5 var(--f-ui); color: var(--tinta-2); }
.opcion-tarjeta .tenue { font: 13.5px/1.45 var(--f-ui); }
.recortado { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.marca-tarjeta { position: absolute; top: 12px; right: 40px; }
/* El mundo, como en Explorar: con su portada y su nombre en su letra (data-tema en la tarjeta). */
.opcion-mundo { padding: 0; overflow: hidden; grid-template-rows: 110px auto; }
.opcion-mundo .opcion-mundo-arte { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--hoja-2); }
.opcion-mundo .opcion-mundo-cuerpo { display: grid; gap: 4px; padding: 12px 16px 14px; }
.opcion-mundo .opcion-tarjeta-titulo { font: 500 24px/1.1 var(--f-titulo); letter-spacing: 0.03em; }
.opcion-mundo:has(input:checked)::after { box-shadow: 0 0 0 2px var(--hoja); }
.afinar { margin-top: 2px; }
.afinar .desplegable-cuerpo { gap: 14px; padding-top: 4px; }
.ejes { display: grid; gap: 4px; }
.eje { display: grid; grid-template-columns: 100px minmax(0, 1fr) 130px; gap: 12px; align-items: center; font: 15px var(--f-ui); }
.eje input { width: 100%; accent-color: var(--tinta); }
.eje-valor { color: var(--tinta-2); }
.eje.cambiado .eje-valor { color: var(--tinta); font-weight: 600; }
.reglas { display: grid; gap: 20px; }
/* Personaje propio: datos en fila, y el reparto de puntos como renglones con −/+ y el valor final. */
.propio { display: grid; gap: 20px; margin-top: 14px; }
.propio-datos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.propio-nombre .campo-fila { gap: 8px; }
.reparto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 4px 20px; }
.reparto-fila { display: grid; grid-template-columns: minmax(0, 1fr) 32px 34px 32px 44px; gap: 6px; align-items: center; font: 15px var(--f-ui); }
/* − y +: un botón redondo, que se vea que se pulsa (y se puede mantener pulsado). */
.boton-reparto { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: var(--hoja); color: var(--tinta); border: 1px solid var(--trazo); border-radius: 50%; font: 500 18px/1 var(--f-ui); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.boton-reparto:hover:not(:disabled) { border-color: var(--tinta); background: var(--acento-suave); }
.boton-reparto:disabled { color: var(--tenue); opacity: 0.45; cursor: default; }
.reparto-puntos { text-align: center; font: 500 14px "Geist Mono", ui-monospace, monospace; color: var(--tinta); }
.reparto-valor { text-align: right; color: var(--tinta-2); }
.reparto-fila.subido .reparto-nombre { font-weight: 600; }
.quedan { font: 14px var(--f-ui); letter-spacing: 0; color: var(--tenue); }
.quedan.pasado { color: var(--mal); }
.opciones-lista { display: grid; gap: 6px; font: 15px var(--f-ui); }
.opcion { align-items: baseline; }
.opcion input { flex-shrink: 0; translate: 0 2px; accent-color: var(--tinta); }
.opcion .etiqueta { margin-left: 6px; }
.paso-nota { margin: -4px 0 0; font: 14.5px var(--f-ui); }
/* La hoja de la campaña: con el tema del mundo elegido, su portada arriba y el retrato encima. */
.crear-resumen { position: sticky; top: 24px; display: grid; gap: 14px; padding: 0 22px 22px; justify-items: stretch; overflow: hidden; background: var(--hoja); color: var(--tinta); }
.crear-resumen h2 { margin: 0; font: 500 26px/1.1 var(--f-titulo); letter-spacing: 0.02em; text-align: center; }
.resumen-retrato { position: relative; margin: 0 -22px; height: 150px; background: var(--hoja-2); display: flex; justify-content: center; align-items: flex-end; }
.resumen-retrato > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.resumen-retrato .medallon { --t: 92px; position: relative; translate: 0 36px; box-shadow: 0 0 0 4px var(--hoja); }
.resumen-retrato:has(.medallon) + h2 { margin-top: 40px; }
.resumen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 0; font: 14.5px var(--f-ui); }
.resumen dt { color: var(--tenue); font: 500 11px/1.9 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.resumen dd { margin: 0; }
.crear-resumen .boton-principal { background: var(--rubrica); color: var(--hoja); min-height: 48px; font-size: 16px; }
/* La barra de «Empezar» solo está en móvil (pantallas.css). */
.crear-barra { display: none; }

/* Campos de texto: renglón de papel con trazo, la tinta del jugador al escribir. */
.control { width: 100%; background: var(--papel); color: var(--acento); border: 1.5px solid var(--trazo); border-radius: var(--radio); padding: 7px 10px; font: 15.5px var(--f-texto); letter-spacing: 0; }
:is(.hub, .portada) .control { background: var(--hoja); color: var(--tinta); border: 1px solid var(--trazo); border-radius: 10px; min-height: 42px; padding: 8px 12px; font: 15px var(--f-ui); }
:is(.hub, .portada) textarea.control { font-style: normal; }
:is(.hub, .portada) .control:focus { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
textarea.control { resize: vertical; font-style: italic; }
.control:focus { border-color: var(--acento); outline: none; }
.control::placeholder { color: var(--tenue); opacity: 1; font-style: italic; }
label.campo > span .tenue { font: italic 14px var(--f-texto); letter-spacing: 0; }

/* Entrar y la cuenta. */
.entrar { display: grid; gap: 12px; position: relative; }
.entrar h2, .entrar p { margin: 0; }
.entrar-texto { font: italic 16.5px/1.5 var(--f-texto); color: var(--tinta-2); }
.form-clave, .form-email { display: grid; gap: 8px; }
.form-email { grid-template-columns: minmax(0, 1fr) auto; }
.form-clave-botones { display: flex; gap: 10px; }
.form-clave-botones > * { flex: 1; }
.entrar-invitado { display: grid; gap: 2px; justify-items: center; text-align: center; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--trazo) 80%, transparent); }
.entrar-invitado p { font: italic 14px var(--f-texto); }
.dialogo-botones.entre { justify-content: space-between; flex-wrap: wrap; }
.dialogo-botones.entre > span { display: flex; gap: 14px; align-items: center; }
.boton-texto.peligroso { color: var(--mal); text-decoration-color: color-mix(in srgb, var(--mal) 40%, transparent); }
.boton-ancho { display: block; width: 100%; text-align: center; }
/* Un enlace con aspecto de botón (lleva a otra sección del hub). */
a.boton-principal, a.boton-secundario { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
a.boton-ancho { display: flex; }

/* Lo que queda del inicio de antes y usan los ajustes: opciones en segmentos. */
.segmentos { display: inline-flex; border: 1.5px solid var(--trazo); border-radius: var(--radio); overflow: hidden; }
.segmentos label { padding: 4px 12px; font: 500 14px var(--f-ui); cursor: pointer; color: var(--tinta-2); position: relative; }
.segmentos label + label { border-left: 1.5px solid var(--trazo); }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos label:has(input:checked) { background: var(--acento); color: var(--sobre-acento); }
.segmentos label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: -3px; }

/* Esqueletos del hub (la base, en estilos.css): cada uno dentro de la pieza que imita, así ocupa lo mismo. */
.continuar.esqueleto .continuar-texto { gap: 0; }
.fila-partida.esqueleto .abrir { padding: 4px 0; }
.fila-partida.esqueleto .abrir > .esq:not(.esq-medallon) { grid-column: span 2; }
.tarjeta-mundo.esqueleto .tarjeta-mundo-titulo, .tarjeta-mundo.esqueleto .esq-titulo { width: 45%; }
.ficha-mundo-cabecera.esqueleto { width: 100%; justify-items: center; }
.ficha-mundo-cabecera.esqueleto .esq { margin-inline: auto; }
.opcion-tarjeta.esqueleto { cursor: default; }
.opcion-tarjeta.esqueleto:has(.opcion-retrato) > .esq:not(.esq-medallon) { grid-column: 2; }
.opcion-tarjeta.esqueleto > .esq-medallon { grid-row: 1 / span 3; }
/* Mientras llega el catálogo no hay qué empezar. */
#form-crear[inert] .crear-barra { display: none; }
.resumen .esq { margin: 0.45em 0; }


/* Retratos de jugadores por revisar (BV6, solo administración). */
.revisar-roster { display: grid; gap: 8px; margin: 0 0 18px; padding: 12px 14px; border: 1.5px solid var(--aviso); border-radius: calc(var(--radio) * 2); background: color-mix(in srgb, var(--aviso) 6%, transparent); }
.revisar-roster h3 { margin: 0; font: 500 15px var(--f-titulo); letter-spacing: 0.06em; }
.galeria-revisar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.galeria-revisar .botones { display: flex; gap: 8px; margin-top: 4px; }

/* Entrar y la cuenta, abiertos desde el hub o la portada (tema everlore, W16): sin trazo a pluma, botones del hub. */
:root[data-estilo="everlore"] .dialogo { border-radius: 16px; border: 1px solid var(--trazo); padding: 26px 28px; }
:root[data-estilo="everlore"] .dialogo::before { display: none; }
:root[data-estilo="everlore"] .dialogo h2 { font: 400 28px/1.15 var(--f-titulo); letter-spacing: -0.01em; }
:root[data-estilo="everlore"] .dialogo .entrar-texto { font: 15px/1.5 var(--f-ui); }
:root[data-estilo="everlore"] .dialogo .control { background: var(--hoja); color: var(--tinta); border: 1px solid var(--trazo); border-radius: 10px; min-height: 44px; padding: 8px 12px; font: 15px var(--f-ui); }
:root[data-estilo="everlore"] .dialogo .control:focus { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
:root[data-estilo="everlore"] .dialogo :is(.boton-principal, .boton-secundario) { border-radius: 10px; min-height: 44px; padding: 0 16px; font: 500 15px var(--f-ui); letter-spacing: 0; }
:root[data-estilo="everlore"] .dialogo .boton-principal::after { display: none; }
:root[data-estilo="everlore"] .dialogo .boton-secundario { background: var(--hoja); color: var(--tinta); border: 1px solid var(--trazo); }
:root[data-estilo="everlore"] .dialogo .entrar-invitado { border-top: 1px solid var(--trazo); }

/* Formularios del hub (crear, Biblioteca): rótulos en la letra de interfaz, sin espaciado de versalitas. */
:is(.hub, .portada) :is(label.campo, legend) { font: 500 14px var(--f-ui); letter-spacing: 0; color: var(--tinta-2); }
:is(.hub, .portada) legend.paso-titulo { font: 600 19px/1.2 var(--f-ui); color: var(--tinta); }
:is(.hub, .portada) label.campo > span .tenue { font: 400 13.5px var(--f-ui); }
:is(.hub, .portada) .boton-secundario { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--trazo); background: var(--hoja); color: var(--tinta); font: 500 14.5px var(--f-ui); letter-spacing: 0; }
:is(.hub, .portada) .boton-secundario:hover { border-color: var(--tenue); }
:is(.hub, .portada) select.control { appearance: auto; }

/* --- La Forja (W15): pantallas de muestra --------------------------------------------- */
.sello { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 10px; padding: 4px 8px; border: 1px solid var(--trazo); border-radius: 6px; color: var(--tenue); font-size: 11px; }
.forja-aviso { display: flex; align-items: center; gap: 10px; margin: -8px 0 0; padding: 10px 14px; border: 1px dashed var(--trazo); border-radius: 10px; color: var(--tinta-2); font-size: 14.5px; }
.forja-aviso .icono { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.forja-pestañas { display: flex; gap: 4px; padding: 4px; background: var(--hoja-2); border-radius: 10px; justify-self: start; max-width: 100%; overflow-x: auto; }
.forja-pestañas a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 7px; color: var(--tinta-2); text-decoration: none; font: 500 14.5px var(--f-ui); white-space: nowrap; }
.forja-pestañas a:hover { color: var(--tinta); }
.forja-pestañas a[aria-current] { background: var(--hoja); color: var(--tinta); box-shadow: 0 1px 2px var(--pliegue); }
.forja-pestañas .mono { font-size: 11px; color: var(--tenue); }
.forja-panel[hidden] { display: none; }
.forja-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 24px; align-items: start; }
.forja-hoja { position: sticky; top: 24px; display: grid; gap: 16px; padding: 20px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 14px; }
/* Con un mundo abierto, el resultado va debajo y ocupa el ancho: la hoja ya no se queda fija (taparía las fases). */
#forja-premisa:has(#forja-resultado:not([hidden])) .forja-hoja { position: static; }
.forja-hoja h3, .forja-hoja h4, .forja .bloque h3 { margin: 0; font-size: 11.5px; }
.forja-nota { font-size: 13px; }
.forja .boton-principal:disabled, .forja .boton-borde:disabled { opacity: 0.45; cursor: not-allowed; }

/* 01 · Premisa */
.forja-form { display: grid; gap: 22px; }
.forja-form textarea { resize: vertical; font: 16px/1.55 var(--f-texto); }
.campo-ayuda { font-size: 13.5px; }
.forja-grupo { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.forja-grupo legend { padding: 0; margin-bottom: 10px; font: 600 15px var(--f-ui); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.forja-grupo legend .tenue { font-weight: 400; font-size: 13.5px; }
.forja-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.forja-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.forja-opcion { display: grid; gap: 4px; padding: 14px 16px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; font-size: 14px; }
.forja-opcion strong { font: 600 15px var(--f-ui); }
.forja-opcion[aria-checked="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.forja-ideas { list-style: none; margin: 0; padding: 0; display: grid; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; overflow: hidden; }
.forja-ideas li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 16px; font-size: 15px; }
.forja-ideas li + li { border-top: 1px solid var(--trazo); }
.forja-ideas .mono { font-size: 11px; }
.forja-idea-mas { display: block !important; color: var(--tenue); }
.forja-cuentas { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--trazo); border: 1px solid var(--trazo); border-radius: 10px; overflow: hidden; }
.forja-cuentas div { display: grid; gap: 2px; padding: 10px 12px; background: var(--hoja); }
.forja-cuentas dt { font-size: 12.5px; color: var(--tenue); }
.forja-cuentas dd { margin: 0; font: 500 22px/1.1 var(--f-titulo); }
.forja-coste { display: grid; gap: 4px; font-size: 13.5px; }
.forja-coste strong { font: 500 26px/1.1 var(--f-titulo); }

/* 02 · Fases */
.forja-fases { display: grid; gap: 22px; }
.forja-etapa { display: grid; gap: 10px; }
.forja-etapa h3 { margin: 0; font-size: 11.5px; }
.forja-etapa ol { list-style: none; margin: 0; padding: 0; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; overflow: hidden; }
.fase { display: grid; grid-template-columns: 22px minmax(140px, 0.8fr) minmax(0, 1.4fr) 44px; gap: 14px; align-items: center; padding: 12px 16px; font-size: 14.5px; color: var(--tenue); }
.fase + .fase { border-top: 1px solid var(--trazo); }
.fase strong { font: 500 15px var(--f-ui); }
.fase.hecha, .fase.en-curso { color: var(--tinta); }
.fase.en-curso { background: var(--acento-suave); }
.fase-marca { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--trazo); box-sizing: border-box; position: relative; }
.fase.hecha .fase-marca { background: var(--tinta); border-color: var(--tinta); }
.fase.hecha .fase-marca::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 4px; height: 8px; border: solid var(--hoja); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.fase.en-curso .fase-marca { border-color: var(--tinta); border-top-color: transparent; animation: forja-gira 1.1s linear infinite; }
@keyframes forja-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fase.en-curso .fase-marca { animation: none; border-top-color: var(--tinta); border-style: dashed; } }
.puertas { display: inline-flex; gap: 4px; }
.puertas i, .forja-leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--trazo); box-sizing: border-box; }
.puertas i.si, .forja-leyenda i.si { background: var(--bien); border-color: var(--bien); }
.puertas i.otra, .forja-leyenda i.otra { background: var(--aviso); border-color: var(--aviso); }
.forja-progreso { display: grid; gap: 8px; font-size: 13.5px; }
.forja-progreso .medidor > div { height: 100%; background: var(--tinta); }
.forja-leyenda, .forja-bloqueos { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--trazo); font-size: 13.5px; }
.forja-leyenda p, .forja-bloqueos p { margin: 0; display: flex; gap: 8px; align-items: center; }
.etiqueta-bloqueo { justify-self: start; padding: 4px 10px; border: 1px solid var(--trazo); border-radius: 999px; font-size: 13px; }

/* 03 · Revisión */
#forja-revision:not([hidden]) { display: grid; gap: 24px; }
.forja-informe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.forja-puerta { display: grid; gap: 4px; padding: 16px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; border-top: 3px solid var(--bien); font-size: 13.5px; }
.forja-puerta.aviso { border-top-color: var(--aviso); }
.forja-puerta.mal { border-top-color: var(--mal); }
.forja-puerta.pendiente { border-top-color: var(--aviso); }
.forja-puerta ul { margin: 4px 0 0; padding-left: 16px; display: grid; gap: 4px; }

/* Fase 0 de verdad: el formulario se elige con botones; lo que sale, debajo, a todo lo ancho. */
.forja-form .filtro { cursor: pointer; }
.forja-form .filtro[aria-checked="true"] { background: var(--tinta); color: var(--hoja); border-color: var(--tinta); }
.forja-opcion { text-align: left; color: inherit; font: inherit; cursor: pointer; }
.forja-opcion:hover { border-color: var(--tinta-2); }
.forja-pronto p { margin: 0; font-size: 14.5px; }
.forja-sale { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.forja-despues summary { cursor: pointer; font-size: 13.5px; }
.forja-despues[open] { display: grid; gap: 10px; }
.forja-resultado { grid-column: 1 / -1; display: grid; gap: 18px; }
.forja-resultado[hidden] { display: none; }
.forja-error { margin: 0; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--mal) 10%, transparent); color: var(--mal); }
.forja-pasos { list-style: none; margin: 0; padding: 16px 18px; display: grid; gap: 10px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; font-size: 14.5px; }
.forja-pasos li { display: flex; align-items: center; gap: 10px; }
.forja-pasos .fase-marca { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--trazo); box-sizing: border-box; flex: none; }
.forja-pasos .hecho { color: var(--tenue); }
.forja-pasos .hecho .fase-marca { background: var(--bien); border-color: var(--bien); }
.forja-pasos .en-curso .fase-marca { border-color: var(--tinta); border-top-color: transparent; animation: forja-gira 1.1s linear infinite; }
.forja-veredicto { margin: 0; font-size: 12.5px; }
.forja-veredicto.bien { color: var(--bien); }
.forja-veredicto.mal { color: var(--mal); }
.forja-ficha { display: grid; gap: 14px; padding: 26px 30px; background: var(--hoja); color: var(--tinta); border: 1px solid var(--trazo); border-radius: 14px; }
.forja-ficha-titulo { margin: 0; font: 500 38px/1.1 var(--f-titulo); }
.forja-ficha-gancho { margin: 0; font: 18px/1.5 var(--f-texto); color: var(--tinta-2); max-width: 46em; }
.forja-ficha-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.forja-lista { display: grid; gap: 8px; align-content: start; }
.forja-lista h4 { margin: 0; font-size: 11.5px; }
.forja-lista ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.forja-lista p { margin: 0; }
.forja-ficha-pie { margin: 0; padding-top: 12px; border-top: 1px solid var(--trazo); font-size: 12px; }
.forja-md summary { cursor: pointer; font-weight: 500; }
.forja-md pre { margin: 10px 0 0; padding: 16px 18px; white-space: pre-wrap; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; font: 14.5px/1.55 var(--f-texto); max-height: 480px; overflow: auto; }
.forja-descargas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Tus mundos en la Forja: una tira de fichas; la que se ve, marcada. */
.forja-borradores { grid-column: 1 / -1; display: grid; gap: 10px; }
.forja-borradores[hidden] { display: none; }
.forja-borradores-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.forja-borradores-cab h3 { margin: 0; font-size: 11.5px; }
.forja-borradores-cab .boton-borde { min-height: 36px; font-size: 14px; }
.forja-lista-borradores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.forja-borrador { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 4px 6px 4px 14px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; }
.forja-borrador.activo { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.forja-borrador .abrir { display: grid; gap: 2px; padding: 8px 0; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.forja-borrador strong { font: 500 15.5px var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forja-borrador .tenue { font-size: 13px; }
/* Cada fase de después de la premisa, en su bloque. */
.forja-fase { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--trazo); }
.forja-fase-cabecera { display: grid; gap: 4px; }
.forja-fase-cabecera h3 { margin: 0; font: 500 26px/1.15 var(--f-titulo); }
.forja-fase-cabecera p { margin: 0; max-width: 48em; }
.forja-fase-caja { display: grid; gap: 16px; }
.forja-fase-caja:empty { display: none; }
.forja-atributos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.forja-atributo { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--trazo); border-radius: 12px; }
.forja-atributo h4 { margin: 0; font: 600 16px var(--f-ui); }
.forja-atributo p { margin: 0; font-size: 13.5px; }
.forja-habilidades { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.forja-habilidades li { padding: 3px 10px; border-radius: 999px; background: var(--hoja-2); font-size: 13.5px; cursor: help; }
.forja-escalones { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.45; }
/* La cosmología: su texto, las sendas y las técnicas por escalón. */
.forja-texto { display: grid; gap: 10px; max-width: 46em; line-height: 1.6; }
.forja-texto h4 { margin: 8px 0 0; font-size: 11px; }
.forja-texto p, .forja-texto ul { margin: 0; }
.forja-texto ul { padding-left: 1.2em; display: grid; gap: 4px; }
.forja-senda { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--trazo); border-radius: 12px; }
.forja-senda h4 { margin: 0; font: 600 16px var(--f-ui); }
.forja-senda > p { margin: 0; font-size: 14px; }
.forja-tecnicas { display: grid; gap: 4px; margin-top: 6px; }
.forja-tecnicas .mono { font-size: 11px; }
.forja-lista .forja-habilidades { display: flex; padding: 0; gap: 6px; }
/* La geografía: el mapa de cada comarca (un SVG sencillo), sus pueblos y sus sitios. */
.forja-mapa { display: grid; gap: 10px; }
.forja-mapa > p { margin: 0; font-size: 14px; }
.forja-mapa-pestanas { display: flex; flex-wrap: wrap; gap: 6px; }
.forja-mapa-pestanas .forja-opcion { padding: 6px 12px; }
.forja-mapa-pestanas [aria-selected="true"] { border-color: var(--acento); background: var(--acento-suave); }
.forja-mapa-svg { width: 100%; height: auto; background: var(--hoja-2); border: 1px solid var(--trazo); border-radius: 12px; }
.forja-mapa-svg .comarca { fill: color-mix(in srgb, var(--acento) 10%, transparent); stroke: var(--trazo); stroke-width: 1.5; }
.forja-mapa-svg .camino { stroke: var(--tenue); stroke-width: 2; }
.forja-mapa-svg .camino.senda { stroke-dasharray: 6 4; }
.forja-mapa-svg .camino.oculto { stroke-dasharray: 2 4; opacity: 0.7; }
.forja-mapa-svg .camino.p2 { stroke: color-mix(in srgb, var(--mal) 40%, var(--tenue)); }
.forja-mapa-svg .camino.p3, .forja-mapa-svg .camino.p4, .forja-mapa-svg .camino.p5 { stroke: var(--mal); }
.forja-mapa-svg .sitio rect, .forja-mapa-svg .sitio circle { fill: var(--hoja); stroke: var(--tinta); stroke-width: 1.5; }
.forja-mapa-svg .sitio.asentamiento rect { fill: var(--tinta); }
.forja-mapa-svg .sitio.poder circle { fill: var(--acento); stroke: var(--acento); }
.forja-mapa-svg text { font: 500 12px var(--f-ui); fill: var(--tinta); paint-order: stroke; stroke: var(--hoja-2); stroke-width: 3px; }
.forja-mapa-leyenda { margin: 0; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .forja-pasos .en-curso .fase-marca { animation: none; border-top-color: var(--tinta); } }
.forja-puerta .mono { color: var(--tenue); font-size: 11px; }
.forja-puerta strong { font: 600 16px var(--f-ui); }
.forja-leer { list-style: none; margin: 0 0 16px; padding: 0; display: grid; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; overflow: hidden; }
.forja-leer li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; }
.forja-leer li + li { border-top: 1px solid var(--trazo); }
.forja-leer li > span:nth-child(2) { display: grid; gap: 2px; font-size: 14px; }
.forja-leer strong { font: 500 15.5px var(--f-ui); }
.medallon-vacio { width: 44px; height: 44px; border-radius: 50%; background: var(--hoja-2); }
.medallon-vacio.cuadrado { border-radius: 10px; }
.forja-acciones { display: flex; gap: 6px; }
.forja-acciones .boton-borde { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.forja-sugerencias { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--tinta-2); line-height: 1.5; }
.forja-contactos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.forja-contactos span { aspect-ratio: 1; border-radius: 8px; background: var(--hoja-2); display: grid; place-items: end start; padding: 6px 8px; box-sizing: border-box; font: 500 10px "Geist Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tenue); }
.forja-check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--tinta-2); }

/* Explorar: la tarjeta que lleva a la Forja */
.tarjeta-forja { display: grid; gap: 10px; align-content: center; min-height: 280px; padding: 28px; border: 1px dashed var(--trazo); border-radius: 14px; color: var(--tinta); text-decoration: none; }
.tarjeta-forja:hover { border-color: var(--tenue); }
.tarjeta-forja strong { font: 400 26px/1.15 var(--f-titulo); }
.tarjeta-forja > .tenue:last-child { line-height: 1.5; }

/* Fases y Revisión con el mundo de verdad (6.1c). */
.puertas i.mal, .forja-leyenda i.mal { background: var(--mal); border-color: var(--mal); }
.puertas i.sug, .forja-leyenda i.sug { background: var(--hoja); border: 2px solid var(--aviso); }
.fase.siguiente { color: var(--tinta); }
.fase.siguiente .fase-marca { border-color: var(--tinta); border-style: dashed; }
.fase.no-pasa { color: var(--tinta); }
.fase.no-pasa .fase-marca { border-color: var(--mal); }
.fase-gasto { font-size: 11.5px; }
.fase-cuando { font-size: 11px; justify-self: end; }
.forja-cambios { display: grid; gap: 10px; padding: 14px 16px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px; }
.forja-cambios[open] { gap: 12px; }
.forja-cambios summary { cursor: pointer; font-weight: 500; }
.forja-cambios p { margin: 0; }
.forja-cambios-marcas { display: grid; gap: 8px; }
.forja-cambios-marcas .forja-check { align-items: flex-start; line-height: 1.45; }
.forja-cambios-marcas input { margin-top: 3px; }
.forja-leer-mundo li { grid-template-columns: minmax(0, 1fr) auto; }
.forja-leer-mundo li > span:first-child { display: grid; gap: 3px; font-size: 14px; line-height: 1.45; }
.forja-leer-mundo .mono { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.forja-leer-textos summary { cursor: pointer; font-size: 13px; }
.forja-leer-textos blockquote { margin: 8px 0 0; font-size: 14px; }
#forja-revision-cuerpo { display: grid; gap: 22px; }
#forja-revision-cuerpo .forja-puerta { align-content: start; }

@media (max-width: 860px) {
  .forja-dos { grid-template-columns: minmax(0, 1fr); }
  .forja-hoja { position: static; }
  .fase { grid-template-columns: 22px minmax(0, 1fr) 44px; }
  .forja-informe { grid-template-columns: 1fr 1fr; }
  .fase > .tenue { grid-column: 2 / -1; grid-row: 2; }
  .forja-leer li { grid-template-columns: 44px minmax(0, 1fr); }
  .forja-acciones { grid-column: 2; }
  .forja-leer-mundo li { grid-template-columns: minmax(0, 1fr); }
  .forja-leer-mundo .forja-acciones { grid-column: 1; }
}