/* Everthal · hub y mesa de juego (guía: docs/guia-de-estilos.md, v0.4).
   El relato manda, la ficha siempre a la vista, cada cosa en pantalla sirve
   para jugar. Todo son tokens y cada mundo elige su tema de la Biblioteca
   (manifest: interfaz.tema; biblioteca/temas.yaml → temas.css). De serie, uno sobrio; «cuaderno» es un cuaderno de viaje
   ilustrado: papel de acuarela, tinta sepia para el mundo, azul de Prusia para
   lo que hace el jugador, rúbrica bermellón para encabezados y daño, aguadas en
   vez de barras planas y reglas trazadas a pluma. Claro, oscuro o el del
   sistema (data-theme).
   Aquí, los tokens, la base, los botones y los diálogos; cada zona, en su
   fichero y en este orden (index.html): hub.css, mesa.css, combate.css y
   pantallas.css (mediana, móvil y movimiento reducido, el último). */

/* --- Tokens ---------------------------------------------------------------------
   Las tintas, el papel, las letras y la textura son de cada tema: vienen de la
   Biblioteca (biblioteca/temas.yaml), en temas.css (generado: npm run temas),
   que se carga antes que este. Aquí, solo lo que no cambia con el tema. */
:root {
  --tam-relato: 18px;
  --ancho-panel: 400px;
}

/* --- Base ----------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15.5px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; }
/* Grano del papel: ruido fractal muy suave sobre todo (0 en el tema de serie). */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: var(--grano); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
.filtros { position: absolute; width: 0; height: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 2px; }
.tenue { color: var(--tenue); }
.error { color: var(--mal); }
[hidden] { display: none !important; }
.icono { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.num { font-family: var(--f-texto); font-variant-numeric: tabular-nums lining-nums; }

/* Trazos: reglas a pluma, florón, sello de tinta y aguada (la barra pintada a pincel). */
.floron { display: flex; align-items: center; gap: 12px; color: var(--rubrica); }
.floron::before, .floron::after { content: ""; flex: 1; height: 1.5px; background: currentColor; opacity: 0.45; filter: var(--pluma); }
.floron svg { width: 26px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.carril { position: relative; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--trazo) 30%, transparent); }
.carril > i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 3px; filter: var(--acuarela); transition: width 700ms cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--r-1)) 72%, transparent), var(--c, var(--r-1)) 35%, color-mix(in srgb, var(--c, var(--r-1)) 88%, transparent) 92%, color-mix(in srgb, var(--c, var(--r-1)) 58%, transparent)); }
/* El trazo a pluma va en el borde (::before), no en la etiqueta: el texto se queda limpio y se lee. */
.etiqueta { display: inline-block; position: relative; font: 500 12px/1.4 var(--f-titulo); letter-spacing: 0.06em; padding: 1px 8px 2px; color: var(--tinta-2); white-space: nowrap; }
.etiqueta::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--trazo); border-radius: 3px; filter: var(--pluma); pointer-events: none; }
.etiqueta.apagada { color: var(--tenue); }
.etiqueta.mala { color: var(--rubrica); transform: rotate(-2deg); }
.etiqueta.buena { color: var(--bien); }
/* Lo que empieza a notarse (frío, suciedad) antes de ser un estado: sin rubricar. */
.etiqueta.suave { color: var(--tenue); font: italic 12.5px/1.4 var(--f-ui); letter-spacing: 0; padding: 1px 0; }
.etiqueta.suave::before { display: none; }
.etiqueta.mala::before, .etiqueta.buena::before { border-color: currentColor; }

/* Un estado con su icono: el icono en su color (el del elemento o la tinta del tema) y con su
   movimiento; el nombre en tinta y el borde a pluma de siempre, para que no sea un arcoíris. */
.etiqueta.marca-estado { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); padding-left: 6px; }
.etiqueta.marca-estado::before { border-color: color-mix(in srgb, var(--c) 55%, var(--trazo)); }
.marca-estado .icono { width: 13px; height: 13px; stroke-width: 2; color: var(--c); transform-origin: 50% 70%; }
.marca-estado[data-anim="arder"] .icono { animation: arder 1.6s ease-in-out infinite; }
.marca-estado[data-anim="gotear"] .icono { animation: gotear 2.4s ease-in infinite; }
.marca-estado[data-anim="temblar"] .icono { animation: temblar 0.5s linear infinite; }
.marca-estado[data-anim="latir"] .icono { animation: latir 1.4s ease-in-out infinite; }
.marca-estado[data-anim="girar"] .icono { animation: girar 3s linear infinite; transform-origin: 50% 50%; }
.marca-estado[data-anim="brillar"] .icono { animation: brillar 2.6s ease-in-out infinite; }
@keyframes arder { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(0.94, 1.08) rotate(-3deg); } 60% { transform: scale(1.04, 0.95) rotate(2deg); } }
@keyframes gotear { 0%, 60% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(2px); opacity: 0.6; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes temblar { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-0.6px); } 75% { transform: translateX(0.6px); } }
@keyframes latir { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brillar { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.pieza-marca { display: inline-flex; vertical-align: -2px; margin-right: 8px; }
.pieza-marca .icono { width: 20px; height: 20px; }
/* Esqueletos de carga: renglones de aguada que laten despacio, con la forma de lo que viene. Sin
   movimiento si se pide (pantallas.css lo quita todo). */
.esq { display: block; height: 0.8em; margin: 0.35em 0; max-width: 100%; border-radius: 3px; background: color-mix(in srgb, var(--trazo) 38%, transparent); animation: latir-esq 1.6s ease-in-out infinite; }
.esq.esq-titulo { height: 1.15em; margin-bottom: 0.5em; background: color-mix(in srgb, var(--trazo) 55%, transparent); }
.esq.esq-grande { height: 2.2em; margin-inline: auto; }
.esq.esq-medallon { width: var(--t); height: var(--t); margin: 0; border-radius: 50%; flex: none; }
.esq.esq-boton { display: inline-block; width: 130px; height: 38px; margin: 0; border-radius: 3px; }
.esq.esq-filtro { display: inline-block; flex: none; width: 84px; height: 30px; margin: 0; }
.esqueleto { pointer-events: none; }
.esqueleto .esq:nth-child(2n) { animation-delay: 0.15s; }
.esqueleto .esq:nth-child(3n) { animation-delay: 0.3s; }
@keyframes latir-esq { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Medallón: un retrato (o su inicial) dentro de un círculo trazado a mano. */
.medallon { --t: 44px; width: var(--t); height: var(--t); border-radius: 50%; flex: none; background: var(--hoja-2) 50% 0 / cover no-repeat; position: relative; display: grid; place-items: center; font: 500 calc(var(--t) * 0.44) var(--f-titulo); color: var(--rubrica); }
.medallon::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--trazo); filter: var(--pluma); }
.medallon.aliado::after { border-color: color-mix(in srgb, var(--bien) 70%, var(--trazo)); }
.medallon.rival::after { border-color: color-mix(in srgb, var(--rubrica) 70%, var(--trazo)); }

/* --- Botones ----------------------------------------------------------------------- */
.boton-principal { background: var(--acento); color: var(--sobre-acento); border: 0; border-radius: 3px; padding: 9px 20px 10px; font: 700 15px var(--f-ui); letter-spacing: 0.02em; position: relative; }
.boton-principal::after { content: ""; position: absolute; inset: -1px; border: 1.5px solid var(--acento); border-radius: 3px; filter: var(--pluma); pointer-events: none; }
.boton-principal:hover { filter: brightness(1.1); }
.boton-principal:disabled { opacity: 0.5; cursor: progress; }
.boton-secundario { background: none; color: var(--tinta); border: 1.5px solid var(--trazo); border-radius: 3px; padding: 6px 12px; font-size: 14px; }
.boton-secundario:hover { border-color: var(--acento); color: var(--acento); }
.boton-texto { background: none; border: 0; color: var(--acento); padding: 6px 4px; font: 500 15px var(--f-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent); }
.boton-texto:hover { text-decoration-color: var(--acento); }
.boton-icono { background: none; border: 0; color: var(--tinta-2); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.boton-icono:hover { background: var(--acento-suave); color: var(--acento); }
/* Quitar el sonido (G9): con sonido, las ondas; sin él, tachado. */
#btn-sonido .tachado { display: none; }
#btn-sonido.silencio .ondas { display: none; }
#btn-sonido.silencio .tachado { display: inline; }
.boton-icono.peligroso:hover { color: var(--mal); background: color-mix(in srgb, var(--mal) 10%, transparent); }
.enlace { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--trazo) 90%, transparent); text-underline-offset: 3px; cursor: pointer; }
.enlace:hover { color: var(--acento); text-decoration-color: var(--acento); }
.accion { background: none; border: 0; color: var(--acento); padding: 2px 0; font: 500 14px var(--f-ui); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent); }
.accion:hover { text-decoration-color: var(--acento); }

/* --- Diálogos ------------------------------------------------------------------------- */
.dialogo { background: var(--hoja); color: var(--tinta); border: 0; border-radius: var(--radio); padding: 22px 26px; width: min(470px, calc(100vw - 32px)); box-shadow: var(--sombra); }
.dialogo::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid var(--trazo); border-radius: var(--radio); filter: var(--pluma); pointer-events: none; }
.dialogo::backdrop { background: rgb(20 14 6 / 0.5); }
.dialogo h2 { margin: 0 0 14px; font: 500 22px var(--f-titulo); letter-spacing: 0.04em; color: var(--rubrica); }
.dialogo form { display: grid; gap: 16px; position: relative; }
select { background: var(--papel); border: 1.5px solid var(--trazo); border-radius: var(--radio); padding: 6px 9px; font: 15px var(--f-ui); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
legend { font: 500 13px var(--f-titulo); letter-spacing: 0.12em; color: var(--rubrica); margin-bottom: 6px; padding: 0; }
.opcion { display: flex; gap: 8px; align-items: center; }
label.campo { display: grid; gap: 6px; font: 500 13px var(--f-titulo); letter-spacing: 0.12em; color: var(--rubrica); }
label.campo select { width: 100%; color: var(--tinta); letter-spacing: 0; }
.campo-fila { display: flex; gap: 10px; align-items: center; }
.campo-fila input { flex: 1; accent-color: var(--acento); }
input[type=radio] { accent-color: var(--acento); }
.dialogo-botones { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.dialogo-mapa { width: min(1100px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); display: none; padding: 14px; }
.dialogo-mapa[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
#mapa-grande { min-height: 0; display: grid; position: relative; }