/* Identidad visual de El Naufragio (blog): Exo y azul de marca.
   Si Google Fonts no está disponible, el sistema conserva una fuente local. */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;500;600;700;800&display=swap');
:root{
  color-scheme:light;
  --fondo:#f3f8fc;--fondo2:#eaf4fd;--superficie:#ffffff;--superficie2:#deeeff;
  --borde:#a6c1dd;--texto:#203447;--secundario:#486476;--oro:#1151d3;
  --oro2:#0099cc;--oscuro:#ffffff;--foco:#007aa3;--peligro:#aa2942;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 0,#d7eafa 0,transparent 42%),linear-gradient(145deg,var(--fondo),var(--fondo2) 80%);color:var(--texto);font-family:"Exo",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:var(--oro)}
a:hover{color:#fff0c8}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.encabezado{max-width:1550px;margin:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:3.5rem 2.4rem 2rem;border-bottom:1px solid var(--borde)}
.sobrelinea{font-size:.7rem;letter-spacing:.2em;color:var(--oro);font-weight:800;margin:0 0 .65rem}
h1,h2,h3,h4,p{margin-top:0}
h1{font-family:"Exo",system-ui,sans-serif;font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.045em;font-weight:600;margin-bottom:.35rem}
.subtitulo{font-size:1.1rem;color:var(--secundario);margin-bottom:0}
.enlace-github{white-space:nowrap;padding:.65rem 1rem;border:1px solid var(--borde);border-radius:6px;text-decoration:none;font-size:.9rem}
.disposicion{max-width:1550px;margin:auto;padding:2rem 2.4rem 4rem;display:grid;grid-template-columns:minmax(275px,340px) minmax(0,1fr);gap:2rem;align-items:start}
.panel{position:sticky;top:1.5rem;background:linear-gradient(170deg,var(--superficie),#112632);border:1px solid var(--borde);padding:1.5rem;border-radius:12px;box-shadow:0 14px 35px #040f1880}
.panel h2{font-family:"Exo",system-ui,sans-serif;font-size:1.5rem;font-weight:500;margin-bottom:1.5rem}
/* Primer paso visible cuando el Menú móvil de la Forja está plegado. */
.inicio-movil{display:none}
.inicio-movil[hidden]{display:none!important}
@media(max-width:830px){
  .inicio-movil{display:block;margin:0 0 1.1rem;padding:1.05rem 1.15rem;
    border:1px solid var(--oro2);border-radius:12px;
    background:linear-gradient(150deg,var(--superficie2),var(--oscuro))}
  .inicio-movil h2{font:600 1.4rem "Exo",system-ui,sans-serif;color:var(--oro);margin:0 0 .55rem}
  .inicio-movil .sobrelinea{margin-bottom:.4rem}
  .inicio-movil p:not(.sobrelinea){font-size:.88rem;line-height:1.55;margin-bottom:.85rem}
  .inicio-movil .empezar-forja{width:100%;min-height:46px;border-radius:8px;
    font-size:.95rem;background:var(--oro);color:var(--oscuro);font-weight:800}
  .inicio-movil .empezar-forja:hover{background:#ffe3a5;color:#091923}
}
/* Inicio guiado: visible sin obligar a recorrer todos los ajustes. */
.inicio-rapido{padding:1rem 1.05rem;margin:.5rem 0 1.35rem;
  border:1px solid #63808a;border-left:4px solid var(--oro2);
  border-radius:9px;background:var(--superficie2)}
.inicio-rapido h3{font:600 1.1rem "Exo",system-ui,sans-serif;color:var(--oro);margin:0 0 .55rem}
.inicio-rapido p{font-size:.84rem;line-height:1.55;margin:0 0 .55rem}
.inicio-rapido p:last-child{margin-bottom:0}
.inicio-rapido strong{color:var(--texto)}
html[data-tema=ceruleo] .inicio-rapido strong,html[data-tema=obsidiana] .inicio-rapido strong{color:var(--texto)}
/* Ébano es claro: el amarillo fijo del tema oscuro era ilegible. */
html[data-tema=ebano] .inicio-rapido strong{color:#243946}
html[data-tema=ebano] .inicio-rapido{border-left-color:#334a59}
html[data-tema=ebano] .inicio-movil strong{color:#243946}
.campo{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.campo>label{font-size:.88rem;font-weight:700;color:var(--texto)}
/* Forja 1.2: acceso compacto y rejilla modal sin iconos gigantes. */
.abrir-rejilla{width:100%;min-height:44px;border:1px solid var(--borde);
  border-radius:8px;background:var(--superficie2);color:var(--texto);
  display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;
  font-weight:650;text-align:left}
.abrir-rejilla:hover:not(:disabled){border-color:var(--oro)}
.abrir-rejilla[hidden]{display:none!important}
.simbolo-rejilla{font-size:1.15rem;color:var(--oro)}
.flecha-rejilla{margin-left:auto;color:var(--oro)}
.dialogo-eleccion{border:1px solid var(--oro);border-radius:14px;
  background:var(--fondo2);color:var(--texto);
  width:min(750px,calc(100vw - 28px));max-height:min(82vh,750px);
  overflow:auto;padding:1.1rem 1.25rem 1.4rem;box-shadow:0 25px 70px #000a}
.dialogo-eleccion::backdrop{background:#000b;backdrop-filter:blur(3px)}
.cabecera-dialogo-eleccion{display:flex;align-items:center;
  justify-content:space-between;gap:1rem;position:sticky;top:-1.1rem;
  background:var(--fondo2);z-index:1;padding:.4rem 0 .7rem;
  border-bottom:1px solid var(--borde)}
.cabecera-dialogo-eleccion h3{margin:0;font:600 1.25rem "Exo",system-ui,sans-serif}
.cerrar-rejilla{border:1px solid var(--borde);background:var(--superficie);
  color:var(--texto);border-radius:7px;min-width:38px;min-height:38px}
.leyenda-dialogo-eleccion{font-size:.82rem;color:var(--secundario);margin:.8rem 0}
.selector-visual{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.5rem;margin:.3rem 0}
.selector-visual[hidden]{display:none!important}
.opcion-visual{min-width:0;min-height:84px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.3rem;padding:.5rem .3rem;
  border:1px solid var(--borde);border-radius:8px;background:var(--superficie2);
  color:var(--texto);text-align:center;line-height:1.15}
.opcion-visual:hover:not(:disabled){background:var(--superficie);border-color:var(--oro)}
.opcion-visual.seleccionada{border:2px solid var(--oro);background:var(--oscuro);
  box-shadow:inset 0 0 0 1px var(--oro)}
/* Casilla 1:1 estable, máscara monocroma teñida por el tema actual. */
.icono-svg{
  display:inline-block;aspect-ratio:1 / 1;flex:none;background-color:currentColor;
  -webkit-mask:var(--icono-svg) center / contain no-repeat;
  mask:var(--icono-svg) center / contain no-repeat;
}
/* Ruta relativa a esta hoja (assets/styles.css), no al documento. */
#abrir-configuracion .icono-svg{--icono-svg:url(icons/ico-configurar.svg)}
.icono-eleccion{display:block;width:29px;height:29px;flex:none;color:var(--oro)}
.icono-azar{display:grid;place-items:center;font-size:1.25rem;font-weight:700;
  height:29px;color:var(--oro)}
.opcion-nombre{display:block;font-size:.72rem;font-weight:650;overflow-wrap:anywhere}
select.selector-alternativo{position:absolute;width:1px;height:1px;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@media(max-width:600px){.selector-visual{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:360px){.selector-visual{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pie-dialogo-eleccion{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;position:sticky;bottom:-1.4rem;background:var(--fondo2);
  border-top:1px solid var(--borde);padding:1rem 0 .4rem;margin-top:1rem}
.pie-dialogo-eleccion p{font-size:.8rem;color:var(--secundario);margin:0}
.pie-dialogo-eleccion button{min-height:42px}
@media(max-width:500px){.pie-dialogo-eleccion{flex-direction:column;align-items:stretch}}
.configuracion-avanzada{margin:.7rem 0 1rem;padding:.85rem;
  border:1px solid var(--borde);border-radius:9px;font-size:.8rem}
.configuracion-avanzada summary{font-weight:750;cursor:pointer}
.configuracion-avanzada .casilla{margin:.9rem 0 .5rem}
.configuracion-avanzada small{color:var(--secundario);line-height:1.5}
.generar-flotante{position:fixed;z-index:100;right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  min-height:52px;padding:.85rem 1.35rem;border-radius:999px;
  color:var(--oscuro);background:var(--oro);border:2px solid var(--oro);
  box-shadow:0 8px 28px #0008;font-weight:850}
.generar-flotante:hover:not(:disabled){background:#ffe3a5;color:#091923}
.generar-flotante:disabled{opacity:.65}
.generar-flotante[hidden]{display:none!important}
/* Se oculta antes de entrar en el pie; nunca lo tapa. */
.generar-flotante:not([hidden]){max-width:calc(100vw - 2rem)}
@media(max-width:830px){
  .generar-flotante{left:max(1rem,env(safe-area-inset-left));
    right:max(1rem,env(safe-area-inset-right));bottom:max(.75rem,env(safe-area-inset-bottom));
    width:auto;border-radius:12px}
  .disposicion{padding-bottom:6rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  button{transition:none}
}
.campo label span{font-size:.76rem;color:var(--secundario);font-weight:400;float:right}
.campo small,.herramientas small{display:block;color:var(--secundario);font-size:.75rem;line-height:1.5}
select,input[type=number],input[type=text]{display:block;width:100%;min-height:42px;padding:.55rem .8rem;border:1px solid #61737a;background:#0c1c26;color:var(--texto);border-radius:6px}
select:hover,input:hover{border-color:var(--oro2)}
button{border:1px solid #617781;background:transparent;color:var(--texto);border-radius:6px;padding:.65rem .9rem;font-size:.85rem;font-weight:650;transition:background .15s,border-color .15s}
button:hover:not(:disabled){background:#294552;border-color:var(--oro)}
button.principal{display:block;width:100%;background:var(--oro);border-color:var(--oro);color:var(--oscuro);font-weight:800;padding:.9rem 1rem;margin-top:1.3rem}
button.principal:hover{background:#ffe3a5;color:#091923}
fieldset{border:1px solid var(--borde);border-radius:6px;margin:0 0 1rem;padding:.85rem}
legend{font-size:.83rem;font-weight:750;padding:0 .2rem}
.casilla{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.84rem;line-height:1.3;cursor:pointer}
.casilla input{accent-color:var(--oro);width:1rem;height:1rem;flex-shrink:0}
.ayuda{margin:.9rem 0 .6rem;font-size:.76rem;color:var(--secundario)}
.origenes{max-height:200px;overflow:auto}
.herramientas{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--borde)}
.herramientas h3{font-size:.95rem;margin-bottom:1rem}
.botonera{display:grid;grid-template-columns:1fr;gap:.5rem;margin-bottom:.75rem}
.resultados{min-width:0}
.barra-resultados{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.barra-resultados h2{font-family:"Exo",system-ui,sans-serif;font-weight:500;font-size:1.9rem;margin:0 0 .2rem}
.muted{color:var(--secundario);font-size:.9rem;margin:0}
.acciones-resultados{display:flex;gap:.5rem;flex-wrap:wrap}
.estado{color:var(--foco);font-size:.87rem;min-height:1.4rem;margin-bottom:1rem}
.estado.error{color:var(--peligro)}
.fichas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.vacio{grid-column:1/-1;min-height:390px;border:1px dashed #56717c;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#10222a77;padding:2rem}
.vacio>p:not(.muted){font:1.5rem "Exo",system-ui,sans-serif;margin:.7rem 0}
.vacio .muted{max-width:44ch;line-height:1.65}

.emblema{font-size:3rem;color:var(--oro)}
.tarjeta{background:#f0ebdf;color:#15262d;border-radius:10px;overflow:hidden;box-shadow:0 8px 27px #020b1570;display:flex;flex-direction:column;min-width:0}
.cabecera-ficha{display:flex;gap:1rem;justify-content:space-between;align-items:start;padding:1.1rem 1.2rem;background:#d6cfbc;border-bottom:1px solid #bbb09c}
.cabecera-ficha h3{font:600 1.6rem "Exo",system-ui,sans-serif;margin:0 0 .15rem;overflow-wrap:anywhere}
.cabecera-ficha p:last-child{margin:0;color:#394c52;font-size:.85rem}
.etiqueta{font-size:.67rem;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:#526063;margin:0 0 .4rem}
.icon-btn{color:#172c36;padding:.1rem .5rem;border-color:#aaa08d;font-size:1.3rem;line-height:1.4;flex-shrink:0}
.icon-btn:hover:not(:disabled){background:#e8c995}
.concepto{margin:.9rem 1.2rem .5rem;font-size:.83rem;color:#38505a}
.atributos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid #c6bead;border-bottom:1px solid #c6bead;margin:1rem 1.2rem .8rem}
.atributo{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem .25rem;border-bottom:1px solid #d7d1c5}
.atributo:nth-last-child(-n+2){border-bottom:0}
.atributo:nth-child(odd){padding-right:.65rem;border-right:1px solid #c6bead}
.atributo:nth-child(even){padding-left:.65rem}
.atributo .nombre-atributo{font-size:.78rem;font-weight:750}
.nombre-atributo span{color:#a7751a}
.atributo>span:last-child{display:flex;align-items:center;gap:.35rem;flex-shrink:0}
.atributo strong{font-size:1.1rem}
.atributo small{font-size:.66rem;color:#66737c}
.recursos{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.2rem 1rem;border-bottom:1px solid #d6d0c2}
.recursos>div{background:#ddd6c7;border-radius:5px;padding:.3rem .65rem;display:flex;gap:.45rem;align-items:center;font-size:.72rem}
.recursos span{color:#536068}
.recursos strong{font-size:.82rem}
.bloque-ficha{padding:.8rem 1.2rem .2rem}
.bloque-ficha h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#52606a;margin:0 0 .3rem}
.pista-talentos{color:#51616a;font-size:.69rem;margin:.13rem 0 .28rem;line-height:1.35}
html[data-tema]:not([data-tema=clasico]) .tarjeta .pista-talentos{
  color:var(--tema-ficha-text);opacity:.8}
.bloque-ficha ul{margin:.25rem 0 .5rem;padding-left:1rem;font-size:.8rem}
.bloque-ficha li{padding:.12rem 0;overflow-wrap:anywhere}
/* Textos de regla: pegados a su sección, no mezclados en Observaciones. */
.avisos-ficha{margin:.3rem 1.2rem .65rem;padding:.6rem .7rem;background:#e3dccd;
  border-left:3px solid #967b45;border-radius:3px;font-size:.76rem;line-height:1.45}
.avisos-ficha h4{margin:0 0 .3rem;color:#394e55;font-size:.72rem;text-transform:uppercase}
.avisos-ficha ul,.contexto-ficha ul,.otros-avisos ul{margin:.25rem 0;padding-left:1.05rem}
.avisos-ficha li,.contexto-ficha li,.otros-avisos li{margin:.18rem 0;overflow-wrap:anywhere}
.avisos-poderes{border-left-color:#a65b46}
.contexto-ficha,.otros-avisos{margin:.5rem 1.2rem;padding:.5rem .65rem;
  border:1px solid #cac0af;border-radius:6px;font-size:.75rem;line-height:1.45}
.contexto-ficha summary,.otros-avisos summary{cursor:pointer;font-weight:700;color:#40555c}
.contexto-ficha summary:focus-visible,.otros-avisos summary:focus-visible{
  outline:3px solid #856d37;outline-offset:2px}
html[data-tema]:not([data-tema=clasico]) .tarjeta .avisos-ficha{
  background:var(--tema-ficha-head);color:var(--tema-ficha-text)}
html[data-tema]:not([data-tema=clasico]) .tarjeta :is(.avisos-ficha h4,.contexto-ficha summary,.otros-avisos summary){
  color:var(--tema-ficha-text)}

.riqueza{margin:.65rem 1.2rem;font-size:.8rem}
.pie-ficha{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid #d3cbbd;padding:.65rem 1.2rem;margin-top:auto}
.pie-ficha small{color:#5f686b;font-size:.7rem}
.pie-ficha button{color:#142e39;border:1px solid #adb1aa;background:#e5dfd0;font-size:.75rem;padding:.4rem .65rem;white-space:nowrap}
.pie-ficha button:hover{background:#eed9ae}
.mapa-wrap{overflow-x:auto;padding:1rem}
.mapa{border-collapse:separate;border-spacing:2px;table-layout:fixed;margin:auto}
.celda{min-width:19px;width:19px;height:19px;border:1px solid #8b917a}
.celda-wall{background:#172d39;border-color:#172d39}
.celda-tile{background:#d9d3bd}
.celda-col{background:#a7af9e;border:4px solid #63776d}
.celda-trap{background:#c98369}
.celda-furn{background:#b7a17f}
.leyenda{margin:0 1rem 1.4rem;font-size:.7rem;text-align:center;color:#54626b}
.pie{font-size:.75rem;color:var(--secundario);padding-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media(max-width:1150px){.fichas{grid-template-columns:1fr}}
@media(max-width:830px){
  .encabezado{padding:2rem 1rem 1.3rem;align-items:flex-start;flex-direction:column;gap:1rem}
  .disposicion{display:block;padding:1.2rem 1rem 3rem}
  .panel{position:static;margin-bottom:2rem}
  .fichas{grid-template-columns:1fr}
  .barra-resultados{align-items:flex-start}
}
@media(max-width:390px){
  .cabecera-ficha{padding:1rem}
  .atributos{margin-left:.75rem;margin-right:.75rem}
  .atributo .nombre-atributo{font-size:.7rem}
  .atributo small{font-size:.6rem}
  .acciones-resultados{width:100%}
  .acciones-resultados button{flex:1}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}


/* Creador guiado de Talentos y Poderes. */
.editor-elecciones{margin:0 0 1.5rem;padding:1.3rem;border:1px solid var(--oro2);border-radius:14px;background:linear-gradient(135deg,#213e48,#122b38)}
.editor-elecciones h3{margin:.1rem 0 .5rem;color:var(--oro);font-size:1.3rem}
.editor-elecciones .muted{margin:0 0 1.25rem}
.campos-compra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.lista-compra{margin:.3rem 0 1rem;padding-left:1.5rem;line-height:1.7}
.lista-compra li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.35rem 0}
.lista-compra li span{min-width:0;overflow-wrap:anywhere}
.lista-compra .compras-quitar-linea{font-size:.76rem;padding:.3rem .55rem}
#compras-total{padding:.6rem .8rem;border:1px solid var(--borde);border-radius:6px;font-weight:700}
#compras-anadir{border-color:var(--oro2)}
.pie-ficha{flex-wrap:wrap}
@media(max-width:600px){.campos-compra{grid-template-columns:1fr}}
.grupo-poderes{border:1px solid var(--borde);border-radius:9px;margin:0 0 .85rem;padding:.8rem 1rem;display:grid;gap:.5rem}
.grupo-poderes legend{font-weight:700;color:var(--texto);padding:0 .3rem}
.eleccion-poder{display:flex;flex-direction:column;gap:.25rem;color:var(--secundario);font-size:.9rem}
.eleccion-poder select{width:100%;max-width:100%;min-width:0;background:var(--oscuro);color:var(--texto);border:1px solid var(--borde);border-radius:8px;padding:.55rem .75rem}
#modos-creacion{border:1px solid var(--borde);border-radius:9px;margin:1rem 0;padding:.75rem}
#modos-creacion legend{font-weight:700;color:var(--oro)}
#modos-creacion label{display:block;margin:.35rem 0}
#modos-creacion small{display:block;color:var(--secundario);padding:.2rem}
.editor-elecciones .botonera{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}


/* Pestañas y botones compactos del selector de sistema. */
.boton-menu{display:none}
.lineas-menu{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:19px}
.lineas-menu span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px}
.cabecera-acciones{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.campo-sistema-global{margin-top:.9rem;margin-bottom:1.15rem}
.tema-control{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--secundario);font-weight:700}
.tema-control select{width:auto;min-width:130px;min-height:38px;padding:.4rem .6rem}
.pestanas-panel{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin:-.55rem 0 1.1rem}
.pestanas-panel button{border-radius:7px;padding:.55rem .45rem}
.pestanas-panel button.activa{background:var(--oro);color:var(--oscuro);border-color:var(--oro)}
.juegos-compactos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem}
.juegos-compactos.juegos-publicos{grid-template-columns:repeat(2,minmax(0,1fr))}
.juegos-compactos button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;padding:.3rem .1rem;border:1px solid var(--borde);line-height:1.2;border-radius:8px;font-size:.68rem}
.juegos-compactos button span{font-size:1.5rem;line-height:1.25}
.juegos-compactos .sistema-activo{background:var(--oro);color:var(--oscuro);border-color:var(--oro);box-shadow:inset 0 -3px 0 var(--oro2)}
.herramientas{margin-top:0;padding-top:0;border-top:0;min-height:180px}
#juego.sr-only{min-height:0;padding:0;border:0}
/* Tokens de tema: Clásico conserva el diseño ya publicado.
   Cerúleo toma la paleta #050150 / #000066 / #33cccc de Heaven's Gate. */
html[data-tema=ebano]{
  color-scheme:light;
  --fondo:#eff1f3;--fondo2:#f6f7f9;--superficie:#fff;--superficie2:#f5f6f7;
  --borde:#b9c1c8;--texto:#20262b;--secundario:#54616b;--oro:#2b3740;
  --oro2:#60717d;--oscuro:#fff;--foco:#1f5d83;--peligro:#b11b2b;
  --tema-boton-texto:#ffffff;--tema-boton-hover:#d7e1e7;--tema-field-bg:#fff;
  --tema-ficha-bg:#fff;--tema-ficha-head:#e2e5e7;--tema-ficha-text:#20262b;
}
html[data-tema=ceruleo]{
  color-scheme:dark;
  --fondo:#050150;--fondo2:#08065e;--superficie:#000066;--superficie2:#101078;
  --borde:#2546b8;--texto:#fff;--secundario:#b7dfff;--oro:#33cccc;
  --oro2:#66ccff;--oscuro:#05014e;--foco:#99ffff;--peligro:#ffbaba;
  --tema-boton-texto:#05014e;--tema-boton-hover:#191d8c;--tema-field-bg:#090950;
  --tema-ficha-bg:#f3f8ff;--tema-ficha-head:#dbefff;--tema-ficha-text:#071448;
}
html[data-tema=obsidiana]{
  color-scheme:dark;
  --fondo:#000;--fondo2:#080808;--superficie:#101010;--superficie2:#181818;
  --borde:#595959;--texto:#fff;--secundario:#d1d1d1;--oro:#fff;
  --oro2:#bebebe;--oscuro:#000;--foco:#fff;--peligro:#ff8d8d;
  --tema-boton-texto:#000;--tema-boton-hover:#272727;--tema-field-bg:#050505;
  --tema-ficha-bg:#131313;--tema-ficha-head:#222;--tema-ficha-text:#fff;
}
html[data-tema]:not([data-tema=clasico]) body{
  background:linear-gradient(135deg,var(--fondo),var(--fondo2) 80%);
}
html[data-tema]:not([data-tema=clasico]) .panel{
  background:var(--superficie);box-shadow:0 7px 26px #0002;
}
html[data-tema]:not([data-tema=clasico]) :is(select,input[type=number],input[type=text],.eleccion-poder select){
  border-color:var(--borde);background:var(--tema-field-bg);color:var(--texto)
}
html[data-tema]:not([data-tema=clasico]) button:hover:not(:disabled):not(.principal):not(.sistema-activo):not(.activa){
  background:var(--tema-boton-hover)
}
html[data-tema]:not([data-tema=clasico]) button.principal,
html[data-tema]:not([data-tema=clasico]) .pestanas-panel button.activa,
html[data-tema]:not([data-tema=clasico]) .juegos-compactos button.sistema-activo{color:var(--tema-boton-texto)}
html[data-tema]:not([data-tema=clasico]) .editor-elecciones{
  background:var(--superficie);border-color:var(--borde)
}
html[data-tema]:not([data-tema=clasico]) .tarjeta{
  background:var(--tema-ficha-bg);color:var(--tema-ficha-text);box-shadow:0 5px 18px #0002
}
html[data-tema]:not([data-tema=clasico]) .cabecera-ficha{
  background:var(--tema-ficha-head);border-color:var(--borde)
}
html[data-tema]:not([data-tema=clasico]) .tarjeta :is(.cabecera-ficha p:last-child,.etiqueta,.concepto,.bloque-ficha h4,.atributo small,.recursos span,.pie-ficha small,.leyenda){
  color:var(--tema-ficha-text);opacity:.78
}
html[data-tema]:not([data-tema=clasico]) .tarjeta :is(.atributos,.atributo,.recursos,.pie-ficha){border-color:var(--borde)}
html[data-tema]:not([data-tema=clasico]) .recursos>div{background:var(--tema-ficha-head)}
html[data-tema]:not([data-tema=clasico]) .pie-ficha button,
html[data-tema]:not([data-tema=clasico]) .icon-btn{
  color:var(--tema-ficha-text);background:transparent;border-color:var(--borde)
}
html[data-tema]:not([data-tema=clasico]) .vacio{background:var(--superficie);border-color:var(--borde)}
@media(max-width:830px){.cabecera-acciones{width:100%;justify-content:space-between}}

/* En móvil, la configuración se despliega bajo un control de navegación accesible. */
@media(max-width:830px){
  .boton-menu{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:44px;padding:.6rem .85rem}
  .panel:not(.panel-abierto){display:none}
}


/* Ventanas informativas de la Forja. */
.referencia-glosario{
  all:unset;cursor:help;display:inline;color:inherit;font:inherit;text-align:left;
  text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:currentColor;
}
.tarjeta .referencia-glosario[data-glosa-grupo="talento"]::after{
  content:" ⓘ";font-size:.86em;font-weight:750;white-space:nowrap;
}
.referencia-glosario:hover,.referencia-glosario:focus-visible{
  color:var(--oro2);text-decoration-style:solid;
}
.referencia-glosario:focus-visible,.consultar-ficha-eleccion:focus-visible{
  outline:3px solid var(--foco);outline-offset:3px;border-radius:2px;
}
.consultar-ficha-eleccion{
  align-self:flex-start;border-radius:6px;border:1px solid var(--borde);
  background:var(--oscuro);color:var(--oro);font-size:.76rem;padding:.3rem .62rem;
}
.consultar-ficha-eleccion:hover{border-color:var(--oro);color:#fff0c8}
.ficha-emergente{
  position:fixed;z-index:9999;background:#112430;color:#f6f0df;
  border:1px solid #bfa76e;border-radius:10px;padding:1.05rem 1.1rem;
  box-shadow:0 15px 40px #0009;max-height:min(68vh,520px);overflow-y:auto;
  overscroll-behavior:contain;font-size:.88rem;line-height:1.45;
}
/* La vista previa al pasar el ratón nunca debe cubrir o interceptar
   el clic en su propia referencia; con pulsación se vuelve interactiva. */
/* La vista de hover también debe permitir desplazarse para leer.
   El clic fija el diálogo hasta cierre explícito o Escape. */
.ficha-emergente[role="tooltip"]{pointer-events:auto}
.ficha-emergente[role="dialog"]{pointer-events:auto}
.ficha-emergente[hidden],.consultar-ficha-eleccion[hidden]{display:none!important}
.ficha-emergente{scrollbar-width:thin;scrollbar-color:#a9c3cd #142936}
.info-cerrar{position:sticky;top:-.25rem;float:right;z-index:1;
  min-height:34px;padding:.32rem .65rem;margin:-.1rem -.1rem .4rem .4rem;
  border:1px solid #9aafb8;border-radius:5px;
  background:#1b3947;color:#fff1d2;font-size:.8rem;font-weight:700}
.info-cerrar:hover{background:#2c5365}
.info-cerrar:focus-visible{outline:3px solid #9ee2f0;outline-offset:2px}
.info-uso-editorial{margin:.25rem 0 .8rem;font-size:.77rem;color:#cbe8f0;
  background:#193845;border-left:3px solid #c2cfb7;padding:.4rem .55rem}
.info-resumen-editorial h4{margin:.4rem 0 .3rem;font-size:.84rem;color:#ffe1a0}
.info-resumen-editorial p{margin:.15rem 0 .75rem;font-size:.9rem;line-height:1.6}
.info-literal-etiqueta{font-size:.76rem;margin:.6rem 0 .2rem;color:#bfd3dc;font-weight:700}
.info-texto-literal{margin:.6rem 0 .8rem;padding:.25rem .7rem;
  border:1px solid #55717e;border-radius:6px}
.info-texto-literal summary{cursor:pointer;font-weight:700;font-size:.8rem;
  padding:.45rem .1rem;color:#def1f7}
.info-texto-literal summary:focus-visible{outline:3px solid #9ee2f0}
.info-texto-literal .info-descripcion{margin:.35rem .1rem .65rem}
.info-origen-glosa{font-size:.71rem;line-height:1.4;color:#bfd2d9;margin:.25rem 0 .8rem}
.ficha-emergente h3{font:600 1.28rem/1.2 "Exo",system-ui,sans-serif;color:#fce4a8;margin:.2rem 0 .8rem}
.info-tipo{margin:0;color:#bfd4dd;font-size:.67rem;text-transform:uppercase;
  letter-spacing:.16em;font-weight:700}
/* Poderes: jerarquía de lectura para uso en mesa, sin ficha técnica visible
   por defecto. Los Talentos conservan su diseño hasta su propio sprint. */
.info-cabecera{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;column-gap:1rem;row-gap:.2rem;margin-bottom:.22rem}
.info-cabecera .info-tipo{flex:0 0 auto}
.info-adquisicion{font-size:.76rem;color:#d7e0e3;margin:.15rem 0 .5rem}
/* Texto ratificado por autoría, distinto de la transcripción literal. */
.info-aclaracion-autoral{margin:.72rem 0 .85rem;padding:.68rem .78rem;
  border:1px solid #61717b;border-left:3px solid #c6a76c;border-radius:5px;
  background:#1b323b}
.info-aclaracion-autoral h4{margin:0 0 .28rem;color:#f1d8a2;
  font-size:.73rem;font-weight:750;letter-spacing:.025em}
.info-aclaracion-autoral p{margin:0;color:#e6edf0;font-size:.8rem;line-height:1.5;
  overflow-wrap:anywhere}
.info-clasificacion{color:#e0cf9d;font-size:.73rem;line-height:1.25;
  margin:0;font-weight:700;text-align:right}
.info-primarios{display:grid;grid-template-columns:max-content minmax(0,1fr);
  column-gap:.45rem;row-gap:.2rem;margin:0 0 .9rem;font-size:.8rem;line-height:1.5}
.info-primarios dt{font-weight:700;color:#bfdae0}
.info-primarios dd{margin:0;overflow-wrap:anywhere}
/* Solo Objetos: propiedades en dos columnas; los demás popups no cambian. */
.info-primarios.info-primarios-objeto{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:.9rem;row-gap:.45rem;
}
.info-objeto-campo{
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  align-items:baseline;column-gap:.4rem;min-width:0;
}
.info-objeto-campo dt{min-width:0}
.info-objeto-campo dd{min-width:0;overflow-wrap:anywhere}
.ficha-emergente .info-cabecera+h3{margin:.12rem 0 .6rem}
.ficha-emergente .info-primarios+.info-descripcion{margin:.65rem 0 1.05rem}
.ficha-emergente .info-detalles[hidden]{display:none!important}
.ficha-emergente .info-avanzada .info-datos{background:transparent;padding:.2rem .2rem .65rem;
  margin:0;grid-template-columns:minmax(0,auto) minmax(0,1fr)}
.ficha-emergente .info-avanzada h4{font-size:.77rem;color:#efd7a5;margin:.7rem 0 .35rem}

.info-datos{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:.75rem;
  row-gap:.4rem;background:#193440;border-radius:7px;padding:.7rem .75rem;margin:0 0 .85rem;
  font-size:.8rem}
.info-datos dt{color:#b5c9cf;font-weight:600}
.info-datos dd{margin:0;overflow-wrap:anywhere}
.info-descripcion{white-space:pre-line;overflow-wrap:anywhere;margin:.65rem 0 .8rem}
/* Conjuros DRS: lectura semántica, literalidad intacta. Sin HTML interpolado. */
.info-conjuro-bloques{white-space:normal}
.info-conjuro-bloques>p{margin:0 0 .9rem;white-space:pre-line}
.info-conjuro-bloques>p:last-child,
.info-conjuro-bloques>ul:last-child,
.info-conjuro-bloques>table:last-child{margin-bottom:0}
.info-conjuro-bloques>ul{margin:.25rem 0 1rem;padding-left:1.4rem;list-style:disc}
.info-conjuro-bloques>ul>li{padding:.08rem 0 .26rem;overflow-wrap:anywhere}
.info-conjuro-bloques>ul>li::marker{color:var(--oro2,#9dd7fb)}
.info-tabla-conjuro{width:100%;border-collapse:collapse;margin:.45rem 0 1rem;
  font-size:.83rem;line-height:1.4;table-layout:auto}
.info-tabla-conjuro th,.info-tabla-conjuro td{
  padding:.43rem .55rem;border-bottom:1px solid currentColor;text-align:left}
.info-tabla-conjuro th{font-weight:750;border-bottom-width:2px}
.info-tabla-conjuro tbody tr:nth-child(even){background:rgba(128,160,185,.12)}
.info-tabla-conjuro td:last-child,.info-tabla-conjuro th:last-child{text-align:right}
@media(max-width:390px){
  .info-tabla-conjuro th,.info-tabla-conjuro td{padding:.36rem .32rem;font-size:.76rem}
}
.info-detalles{margin:.7rem 0;border:1px solid #3e6472;border-radius:7px;
  background:#152d38;overflow:hidden}
.info-detalles summary{cursor:pointer;list-style:auto;padding:.65rem .8rem;
  font-size:.78rem;font-weight:750;color:#f6e3ae}
.info-detalles summary:focus-visible{outline:3px solid #93d4e4;outline-offset:-3px}
.info-detalles .info-avanzada{padding:.15rem .7rem .7rem}
.info-detalles .info-datos{margin:.3rem 0 .7rem}
.info-detalles .info-descripcion:last-child{margin-bottom:.3rem}
.ficha-emergente .info-descripcion{line-height:1.55}
.info-fuente{font-size:.71rem;color:#b8ced2;border-top:1px solid #355660;
  padding-top:.6rem;margin:0;overflow-wrap:anywhere}
@media(max-width:600px){
  .ficha-emergente{max-height:min(65vh,480px);padding:.85rem}
  .info-datos{grid-template-columns:1fr;row-gap:.15rem}
  .info-datos dd{margin-bottom:.45rem}
  .info-cabecera{align-items:flex-start}
  .info-clasificacion{text-align:left}
  .info-primarios{grid-template-columns:1fr;row-gap:0}
  .info-primarios dd{margin:0 0 .38rem .3rem}
  .info-primarios.info-primarios-objeto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-primarios-objeto .info-objeto-campo dd{margin:0}
  .ficha-emergente .info-avanzada .info-datos{grid-template-columns:1fr;row-gap:0}
}

@media(max-width:360px){
  .info-primarios.info-primarios-objeto{grid-template-columns:1fr}
}
/* Categorías oficiales de Talentos DRS: palabras + cinco tratamientos cromáticos.
   La tarjeta utiliza fondo oscuro en los cuatro temas, con contraste constante. */
.info-categoria{display:inline-flex;align-items:center;min-height:1.4rem;
  padding:.16rem .48rem;border:1px solid transparent;border-radius:5px;
  font-size:.72rem;line-height:1.25;font-weight:800;white-space:nowrap}
.info-categoria-accion{background:#154758;color:#d8f5ff;border-color:#3d8d9d}
.info-categoria-especial{background:#4a315f;color:#f1e3ff;border-color:#a87fcb}
.info-categoria-mejora{background:#54471f;color:#fff2be;border-color:#a18d46}
.info-categoria-pasiva{background:#244b35;color:#ddf8df;border-color:#6c9f80}
.info-categoria-reaccion{background:#5a3035;color:#ffe3e4;border-color:#b96c75}
.ficha-emergente .info-clasificacion{margin-left:auto}
.ficha-emergente .info-detalles .info-aclaracion-autoral{
  margin:.35rem 0;padding:.35rem .55rem;background:transparent;
  border:0;border-left:2px solid #c6a76c;border-radius:0}

/* Objetos: la categoría expresa el tipo documentado o la tabla fuente.
   Mismo lenguaje de pills que Talentos; cada familia es legible sin color. */
.info-categoria-objeto{background:#244451;color:#d9f3ff;border-color:#6393a9}
.info-categoria-objeto-armas{background:#4a3b28;color:#fff0d7;border-color:#aa8b5b}
.info-categoria-objeto-armaduras{background:#33434f;color:#e1f1ff;border-color:#7393a5}
.info-categoria-objeto-varitas{background:#443358;color:#f2e3ff;border-color:#ac85c2}
.info-categoria-objeto-foco-de-conjuro{background:#463756;color:#f5e7ff;border-color:#aa91ca}
.info-categoria-objeto-municion{background:#4c4629;color:#fff1b9;border-color:#a69c59}
.info-categoria-objeto-escudo{background:#334b40;color:#ddf6e7;border-color:#77a992}
.info-categoria-objeto-consumible{background:#285044;color:#dcf7e9;border-color:#6bb49b}
/* Escuelas del DRS: seis colores estables, sin asignar escuelas inexistentes. */
.info-escuelas{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:.3rem;max-width:100%;margin-left:auto}
.info-escuela{font-size:.73rem;white-space:normal}
.info-escuela-arcana{background:#254869;color:#e1efff;border-color:#6f9dc9}
.info-escuela-demonologia{background:#5b303e;color:#ffe4e8;border-color:#be7f91}
.info-escuela-divina{background:#57471e;color:#fff1bd;border-color:#b09c59}
.info-escuela-elemental{background:#245260;color:#dff7ff;border-color:#73aab7}
.info-escuela-naturaleza{background:#2b5138;color:#e1f9de;border-color:#77b581}
.info-escuela-nigromancia{background:#433760;color:#eee4ff;border-color:#9d8bc9}
/* Insignia orbital: Círculo con número romano, visual e identificable
   mediante aria-label numérico. No es una progresión nueva. */
.info-circulo{display:inline-flex;align-items:center;gap:.38rem;flex-shrink:0;
  border:1px solid #c3a66b;border-radius:50px;padding:.13rem .52rem .13rem .16rem;
  background:#283441;color:#ffe7b4;font-weight:750}
.info-circulo-valor{display:grid;place-items:center;width:2.1rem;height:2.1rem;
  border-radius:50%;border:2px double #e2bb74;box-shadow:inset 0 0 0 2px #283441,0 0 0 1px #a18653;
  background:#493c2c;color:#ffe7b4;font:700 .88rem/1 "Exo",system-ui,sans-serif;letter-spacing:-.02em}
.info-circulo-rotulo{font-size:.68rem;letter-spacing:.035em}
@media(max-width:600px){
  .info-cabecera{row-gap:.4rem}
  .info-escuelas{margin-left:0;justify-content:flex-start}
  .info-circulo{margin-right:auto}
}

/* ================================================================
   Piel editorial El Naufragio — Forja (02/11/2026)
   Referencia: CSS del blog, no selectores de WordPress. Tipografía Exo,
   azules #1151d3 / #0099cc / #15467c y superficies #deeeff / #9dd7fb.
   La geometría de la aplicación y las reglas de juego no cambian.
   Clásico adopta la identidad del blog; los otros temas se conservan.
   ================================================================ */
.encabezado{border-bottom:2px solid var(--oro2)}
.encabezado h1{font-weight:800;letter-spacing:-.035em}
.sobrelinea{letter-spacing:.14em}
.panel,.editor-elecciones,.tarjeta,.dialogo-eleccion,.inicio-rapido{
  border-radius:16px 4px;box-shadow:5px 6px 16px #142e3918;
}
button,.abrir-rejilla,.opcion-visual,.enlace-github{
  border-radius:10px 3px;
}
button.principal,.generar-flotante{border-radius:2rem}
.abrir-rejilla,.opcion-visual,.pestanas-panel button{transition:border-color .16s,background-color .16s,box-shadow .16s}
.abrir-rejilla:hover:not(:disabled),.opcion-visual:hover:not(:disabled){
  box-shadow:0 2px 7px #15467c20;
}
/* Clásico: superficie editorial clara, sin filtros oscuros residuales. */
html[data-tema=clasico] .panel{
  background:linear-gradient(170deg,#ffffff,#eff7ff);
  border-color:#a6c1dd;box-shadow:5px 7px 18px #1151d316;
}
html[data-tema=clasico] .inicio-movil{
  background:linear-gradient(160deg,#deeeff,#f6fbff);border-color:#6699cc;
}
html[data-tema=clasico] .inicio-movil h2,
html[data-tema=clasico] .inicio-rapido h3{color:#15467c}
html[data-tema=clasico] .inicio-rapido{
  background:#deeeff;border-color:#a6c1dd;border-left:4px solid #0099cc;
}
html[data-tema=clasico] .inicio-rapido strong{color:#15467c}
html[data-tema=clasico] select,
html[data-tema=clasico] input[type=number],
html[data-tema=clasico] input[type=text]{
  background:#fff;color:#203447;border-color:#a6c1dd;
}
html[data-tema=clasico] .eleccion-poder select{
  background:#fff;color:#203447;border-color:#a6c1dd;
}
html[data-tema=clasico] button:not(.referencia-glosario):not(.icon-btn):not(.info-cerrar):not(.principal):not(.generar-flotante):not(.sistema-activo):not(.activa):not(.empezar-forja){
  border-color:#9ab8d4;
}
html[data-tema=clasico] button:hover:not(:disabled):not(.principal):not(.generar-flotante):not(.sistema-activo):not(.activa){
  background:#deeeff;border-color:#0099cc;color:#15467c;
}
html[data-tema=clasico] button.principal,
html[data-tema=clasico] .generar-flotante,
html[data-tema=clasico] .inicio-movil .empezar-forja,
html[data-tema=clasico] .pestanas-panel button.activa,
html[data-tema=clasico] .juegos-compactos button.sistema-activo{
  background:#1151d3;border-color:#1151d3;color:#fff;
}
html[data-tema=clasico] button.principal:hover:not(:disabled),
html[data-tema=clasico] .generar-flotante:hover:not(:disabled),
html[data-tema=clasico] .inicio-movil .empezar-forja:hover:not(:disabled){
  background:#15467c;border-color:#15467c;color:#fff;
}
html[data-tema=clasico] .opcion-visual.seleccionada{
  background:#deeeff;border-color:#1151d3;box-shadow:inset 0 0 0 1px #1151d3;
}
html[data-tema=clasico] .dialogo-eleccion{
  background:#f6fbff;color:#203447;border-color:#6699cc;
  box-shadow:6px 8px 24px #15467c35;
}
html[data-tema=clasico] .cabecera-dialogo-eleccion,
html[data-tema=clasico] .pie-dialogo-eleccion{background:#f6fbff}
html[data-tema=clasico] .cerrar-rejilla{
  background:#deeeff;color:#15467c;
}
html[data-tema=clasico] .editor-elecciones{
  background:linear-gradient(145deg,#deeeff,#f6fbff);border-color:#6699cc;
}
html[data-tema=clasico] .editor-elecciones h3{color:#15467c}
html[data-tema=clasico] .vacio{
  background:#eef7ff;border-color:#a6c1dd;
}
html[data-tema=clasico] .tarjeta{
  background:#fff;color:#203447;border:1px solid #a6c1dd;
  box-shadow:5px 6px 15px #1151d31c;
}
html[data-tema=clasico] .cabecera-ficha{
  background:#deeeff;border-bottom:1px solid #a6c1dd;
}
html[data-tema=clasico] .cabecera-ficha p:last-child,
html[data-tema=clasico] .etiqueta,
html[data-tema=clasico] .concepto,
html[data-tema=clasico] .bloque-ficha h4{color:#365a73}
html[data-tema=clasico] .atributos,
html[data-tema=clasico] .atributo,
html[data-tema=clasico] .recursos,
html[data-tema=clasico] .pie-ficha{border-color:#c3d9eb}
html[data-tema=clasico] .recursos>div{background:#e8f4fc}
html[data-tema=clasico] .nombre-atributo span{color:#1151d3}
html[data-tema=clasico] .avisos-ficha{
  background:#eaf4fd;border-left-color:#0099cc;
}
html[data-tema=clasico] .avisos-poderes{border-left-color:#c0504d}
html[data-tema=clasico] .contexto-ficha,
html[data-tema=clasico] .otros-avisos{border-color:#a6c1dd}
html[data-tema=clasico] .contexto-ficha summary,
html[data-tema=clasico] .otros-avisos summary{color:#15467c}
html[data-tema=clasico] .pie-ficha button{
  color:#15467c;background:#deeeff;border-color:#a6c1dd;
}
html[data-tema=clasico] .pie-ficha button:hover{background:#cfe6f8}
html[data-tema=clasico] .icon-btn{
  color:#15467c;background:transparent;border-color:#a6c1dd;
}
html[data-tema=clasico] .icon-btn:hover{background:#cfe6f8}
html[data-tema=clasico] .referencia-glosario:hover,
html[data-tema=clasico] .referencia-glosario:focus-visible{color:#1151d3}
html[data-tema=clasico] a:hover{color:#15467c}
/* Popup: misma gramática cromática que tarjetas del blog, sin perder
   foco visible, scroll, anclaje ni el modo diálogo establecido. */
html[data-tema=clasico] .ficha-emergente{
  background:#f7fbff;color:#203447;border-color:#6699cc;
  border-radius:16px 4px;box-shadow:7px 8px 22px #15467c40;
  scrollbar-color:#a6c1dd #eaf4fd;
}
html[data-tema=clasico] .ficha-emergente h3{color:#15467c}
html[data-tema=clasico] .info-cerrar{
  background:#deeeff;border-color:#6699cc;color:#15467c;
}
html[data-tema=clasico] .info-cerrar:hover{background:#c4e4fa}
html[data-tema=clasico] .info-tipo,
html[data-tema=clasico] .info-adquisicion,
html[data-tema=clasico] .info-clasificacion,
html[data-tema=clasico] .info-literal-etiqueta{color:#365a73}
html[data-tema=clasico] .info-datos{
  background:#eaf4fd;color:#203447;
}
html[data-tema=clasico] .info-datos dt,
html[data-tema=clasico] .info-primarios dt{color:#15467c}
html[data-tema=clasico] .info-texto-literal,
html[data-tema=clasico] .info-detalles{
  background:#edf7ff;border-color:#a6c1dd;
}
html[data-tema=clasico] .info-texto-literal summary,
html[data-tema=clasico] .info-detalles summary{color:#15467c}
html[data-tema=clasico] .info-uso-editorial{
  background:#deeeff;border-left-color:#0099cc;color:#203447;
}
html[data-tema=clasico] .info-resumen-editorial h4,
html[data-tema=clasico] .ficha-emergente .info-avanzada h4{color:#15467c}
html[data-tema=clasico] .info-aclaracion-autoral{
  background:#eaf4fd;border-color:#a6c1dd;border-left-color:#0099cc;
}
html[data-tema=clasico] .info-aclaracion-autoral h4{color:#15467c}
html[data-tema=clasico] .info-aclaracion-autoral p{color:#203447}
html[data-tema=clasico] .info-origen-glosa{color:#486476}
html[data-tema=clasico] .info-fuente{
  color:#486476;border-top-color:#a6c1dd;
}
html[data-tema=clasico] .info-circulo{
  background:#15467c;border-color:#6699cc;color:#fff;
}
html[data-tema=clasico] .info-circulo-valor{
  background:#deeeff;border-color:#9dd7fb;color:#15467c;
  box-shadow:inset 0 0 0 2px #15467c,0 0 0 1px #6699cc;
}
/* Blog: escuelas originales (Arcana, Demonología, Divina, Elemental,
   Naturaleza). Nigromancia no tiene bloque en el CSS suministrado: se
   conserva la familia violeta que ya la distingue en la Forja. */
.info-escuela-arcana{background:LightSkyBlue;border-color:DeepSkyBlue;color:#143550}
.info-escuela-demonologia{background:LightSalmon;border-color:LightCoral;color:#46242b}
.info-escuela-divina{background:LemonChiffon;border-color:Wheat;color:#514019}
.info-escuela-elemental{background:Pink;border-color:Plum;color:#4e2b44}
.info-escuela-naturaleza{background:LightGreen;border-color:DarkSeaGreen;color:#224b33}
/* Blog: tarjetas de armas, armaduras y otros objetos, en formato pill. */
.info-categoria-objeto-armas{background:#ffa280;border-color:#ff6933;color:#4f2719}
.info-categoria-objeto-armaduras{background:#cecae8;border-color:#ada6d8;color:#32285a}
.info-categoria-objeto{background:#bfdfbf;border-color:#99cc99;color:#214c2a}
.info-categoria-objeto-consumible{background:#bfdfbf;border-color:#99cc99;color:#214c2a}
/* Distinción semántica por texto + contorno; no solo por color. */
.info-categoria,.info-circulo{font-family:"Exo",system-ui,sans-serif}
/* Firefox/WebKit: controles, pestañas y referencias siguen visibles. */
@media(max-width:830px){
  .encabezado{border-bottom-color:var(--oro2)}
  .generar-flotante{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  .abrir-rejilla,.opcion-visual,.pestanas-panel button{transition:none}
}

/* Forja: Talentos y Poderes comparten la cuadrícula compacta de Atributos.
   El contenido textual íntegro permanece accesible en el popup. */
.bloque-ficha ul.lista-dos-columnas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.1rem;row-gap:.2rem;align-items:start;
  padding-left:1.05rem;margin:.35rem 0 .7rem;
}
.bloque-ficha ul.lista-dos-columnas li{
  min-width:0;padding:.14rem .15rem .14rem 0;
  overflow-wrap:anywhere;break-inside:avoid;
}
.linea-poder{display:inline-flex;align-items:baseline;gap:.38rem;min-width:0;max-width:100%}
.linea-poder .referencia-glosario{min-width:0;overflow-wrap:anywhere}
.icono-poder-lista{
  width:1.12rem;height:1.12rem;flex:0 0 1.12rem;
  vertical-align:-.2em;color:#1151d3;
}
html[data-tema=ceruleo] .icono-poder-lista{color:#33cccc}
html[data-tema=ebano] .icono-poder-lista{color:#15467c}
html[data-tema=obsidiana] .icono-poder-lista{color:#f0f0f0}
@media(max-width:560px){
  .bloque-ficha ul.lista-dos-columnas{grid-template-columns:1fr}
}
/* Compra modal con scroll propio; la top layer bloquea clics sobre la mesa
   hasta confirmar/cancelar, y el select nativo conserva teclado y SR. */
.dialogo-compras{
  width:min(690px,calc(100vw - 1.5rem));max-width:none;
  max-height:min(88dvh,780px);overflow:auto;overscroll-behavior:contain;
  padding:0;border:1px solid var(--borde);border-radius:16px 5px;
  background:var(--superficie);color:var(--texto);
  box-shadow:0 24px 72px #081a2980;
}
.dialogo-compras::backdrop{background:#061d32ab;backdrop-filter:blur(3px)}
.dialogo-compras .cabecera-compras{
  position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;
  justify-content:space-between;gap:.7rem;padding:1rem 1.3rem .8rem;
  background:var(--superficie);border-bottom:1px solid var(--borde);
}
.dialogo-compras .cabecera-compras h3{
  font-size:1.28rem;line-height:1.3;color:var(--texto);margin:0 0 .35rem;
}
.dialogo-compras .cabecera-compras .muted{font-size:.78rem;line-height:1.5}
.dialogo-compras #compras-cerrar{
  min-width:40px;min-height:40px;flex-shrink:0;
  color:var(--texto);background:var(--superficie2);border-color:var(--borde);
}
.dialogo-compras #form-compra-utiles{padding:1.05rem 1.3rem 1.25rem}
.dialogo-compras .selectores-compra{
  display:grid;grid-template-columns:minmax(145px,.8fr) minmax(0,1.6fr);gap:.8rem;
}
.dialogo-compras .selectores-compra .campo{min-width:0}
.dialogo-compras .envoltura-select{position:relative;min-width:0}
.dialogo-compras .envoltura-select::after{
  content:"";position:absolute;right:.95rem;top:calc(50% - .22rem);
  width:.45rem;height:.45rem;border-right:2px solid var(--oro);
  border-bottom:2px solid var(--oro);transform:rotate(45deg);pointer-events:none;
}
.dialogo-compras .envoltura-select select{
  appearance:none;-webkit-appearance:none;min-height:44px;
  width:100%;border:1px solid var(--borde);border-radius:10px 3px;
  padding:.62rem 2.25rem .62rem .8rem;
  color:var(--texto);background:var(--fondo2);
  cursor:pointer;white-space:nowrap;text-overflow:ellipsis;
}
.dialogo-compras .envoltura-select select:hover{border-color:var(--oro2)}
.dialogo-compras .envoltura-select select:focus-visible{outline:3px solid var(--foco)}
.dialogo-compras #compras-anadir{min-height:40px}
.dialogo-compras #compras-detalle{margin:.3rem 0 .9rem}
.dialogo-compras h4{margin:1rem 0 .5rem;font-size:.88rem;color:var(--texto)}
.dialogo-compras .lista-compra{
  max-height:155px;overflow-y:auto;scrollbar-width:thin;
  margin:0 0 .85rem;padding:0;list-style:none;line-height:1.45;
}
.dialogo-compras .lista-compra li{
  display:flex;align-items:center;justify-content:space-between;
  gap:.7rem;flex-wrap:wrap;margin:0;padding:.42rem .1rem;
  border-bottom:1px solid var(--borde);
}
.dialogo-compras .lista-compra li span{font-size:.78rem;flex:1 1 190px}
.dialogo-compras .lista-compra button{min-height:36px}
.dialogo-compras #compras-total{
  margin:.5rem 0 .85rem;padding:.75rem;border-radius:9px;
  background:var(--superficie2);border-color:var(--borde);
}
.dialogo-compras .botonera{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:.7rem;
}
.dialogo-compras .botonera .principal{margin:0;min-height:44px}
.dialogo-compras .botonera #compras-cancelar{min-height:44px}
html[data-tema=clasico] .dialogo-compras{
  background:#fff;color:#203447;border-color:#6699cc;
}
html[data-tema=clasico] .dialogo-compras .cabecera-compras{
  background:#f6fbff;border-bottom-color:#a6c1dd;
}
html[data-tema=clasico] .dialogo-compras .envoltura-select select{background:#eaf4fd;color:#203447}
html[data-tema=clasico] .dialogo-compras #compras-total{background:#deeeff}
@media(max-width:550px){
  .dialogo-compras{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}
  .dialogo-compras .cabecera-compras{padding:.85rem .85rem .7rem}
  .dialogo-compras #form-compra-utiles{padding:.85rem}
  .dialogo-compras .selectores-compra{grid-template-columns:1fr;gap:.15rem}
  .dialogo-compras .botonera{grid-template-columns:1fr 1fr}
  .dialogo-compras .botonera #compras-cancelar{padding:.65rem}
}
/* Recursos informativos: cuatro columnas de ancho uniforme con SVG compactos.
   Las bonificaciones del escudo se explican fuera de las tarjetas. */
.recursos.recursos-rejilla{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem;padding:0 1.2rem 1rem;align-items:stretch;
}
.recursos-rejilla>.recurso-ficha{
  display:flex;align-items:center;gap:.35rem;min-width:0;
  padding:.55rem .5rem;border-radius:10px 4px;
  border:1px solid #b5bec6;background:#e9e9e4;
  font-size:.76rem;
}
.recursos-rejilla .icono-recurso{
  width:1.1rem;height:1.1rem;flex:0 0 1.1rem;color:#1151d3;
}
.recursos-rejilla .recurso-texto{
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;gap:.07rem;color:inherit;line-height:1.3;
}
.recursos-rejilla .recurso-nombre{font-size:.68rem;color:#536068;font-weight:650}
.recursos-rejilla .recurso-texto strong{
  font-size:.97rem;line-height:1.2;overflow-wrap:anywhere;
}
.recursos-rejilla>.recurso-nota-escudo{
  grid-column:1/-1;margin:0;padding:.1rem .1rem 0;
  font-size:.67rem;line-height:1.4;font-weight:550;
  color:#425c71;overflow-wrap:anywhere;
}
.protecciones-activas{
  margin:.7rem 1.2rem .5rem;padding:.75rem;
  border-radius:10px 4px;border:1px solid #c4cbd3;background:#e8eef3;
}
.protecciones-activas h4{
  margin:0 0 .5rem;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.07em;color:#285174;
}
.protecciones-selectores{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;
}
.protecciones-selectores>div{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.protecciones-selectores label{font-size:.73rem;font-weight:750}
.protecciones-selectores select{
  min-width:0;width:100%;min-height:41px;border:1px solid #91aaca;
  background:#fff;border-radius:8px 3px;color:#203447;
  font-size:.77rem;padding:.5rem .45rem;
}
.protecciones-selectores select:focus-visible{outline:3px solid #0099cc;outline-offset:2px}
.protecciones-selectores select:disabled{opacity:.6;cursor:not-allowed}
.protecciones-activas p{
  margin:.55rem 0 0;font-size:.7rem;line-height:1.5;color:#425c71;
}
html[data-tema]:not([data-tema=clasico]) .recursos-rejilla>.recurso-ficha{
  background:var(--tema-ficha-head);border-color:var(--borde);
  color:var(--tema-ficha-text);
}
html[data-tema]:not([data-tema=clasico]) .recursos-rejilla :is(.recurso-nombre,.recurso-nota-escudo){
  color:var(--tema-ficha-text);
}
html[data-tema]:not([data-tema=clasico]) .recursos-rejilla .icono-recurso{
  color:var(--tema-ficha-text);
}
html[data-tema]:not([data-tema=clasico]) .protecciones-activas{
  background:var(--tema-ficha-head);border-color:var(--borde);
  color:var(--tema-ficha-text);
}
html[data-tema]:not([data-tema=clasico]) .protecciones-activas :is(h4,p){
  color:var(--tema-ficha-text);
}
@media(max-width:560px){
  .recursos.recursos-rejilla{gap:.35rem;padding:0 .8rem .8rem}
  .recursos-rejilla>.recurso-ficha{padding:.5rem .35rem;gap:.28rem}
  .recursos-rejilla .icono-recurso{width:1rem;height:1rem;flex-basis:1rem}
  .protecciones-activas{margin:.5rem .8rem}
}
@media(max-width:500px){
  .recursos.recursos-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recursos-rejilla>.recurso-ficha{padding:.55rem .6rem;gap:.45rem}
}
@media(max-width:350px){.protecciones-selectores{grid-template-columns:1fr}}



/* Forja · configuración modal y resumen compacto de solo lectura. */
.resumen-creacion{margin:.2rem 0 .85rem;padding:.85rem .9rem;
  border:1px solid var(--borde);border-radius:10px;background:var(--superficie2)}
.resumen-creacion h3{font:600 .98rem "Exo",system-ui,sans-serif;margin:0 0 .65rem}
.resumen-creacion dl{margin:0;display:grid;gap:.45rem}
.resumen-creacion dl>div{display:flex;justify-content:space-between;gap:.75rem;
  border-bottom:1px solid var(--borde);padding-bottom:.4rem;font-size:.79rem}
.resumen-creacion dl>div:last-child{border-bottom:0;padding-bottom:0}
.resumen-creacion dt{color:var(--secundario)}
.resumen-creacion dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.configurar-creacion{display:flex;justify-content:center;align-items:center;gap:.55rem;
  width:100%;min-height:44px;margin:.75rem 0;background:var(--superficie2);
  color:var(--texto);font-weight:700}
.configurar-creacion .icono-svg{width:1.15rem;height:1.15rem;flex:none}
#panel-personajes>#generar{width:100%;min-height:45px;margin:.15rem 0 0}
.dialogo-configuracion{width:min(760px,calc(100vw - 1.2rem));max-height:calc(100dvh - 1.2rem);
  overflow-y:auto;border:1px solid var(--oro);border-radius:14px;
  color:var(--texto);background:var(--superficie);padding:1.1rem 1.25rem;
  box-shadow:0 18px 60px #0008}
.dialogo-configuracion::backdrop{background:#061d32c2;backdrop-filter:blur(3px)}
.dialogo-configuracion .cabecera-configuracion{display:flex;align-items:center;
  justify-content:space-between;gap:1rem;position:sticky;top:-1.1rem;z-index:2;
  background:var(--superficie);padding:.2rem 0 .7rem;border-bottom:1px solid var(--borde)}
.dialogo-configuracion .cabecera-configuracion h3{font:600 1.4rem "Exo",system-ui,sans-serif;margin:0}
.dialogo-configuracion #cerrar-configuracion{min-width:38px;min-height:38px}
.ayuda-configuracion{color:var(--secundario);font-size:.8rem;margin:.7rem 0 1rem}
.dialogo-configuracion #configuracion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem 1.25rem}
.dialogo-configuracion #configuracion>.campo,
.dialogo-configuracion #configuracion>fieldset{min-width:0;margin-bottom:.3rem}
.dialogo-configuracion #configuracion>:is(#opciones-fuentes,#opciones-dh,#opciones-contexto-sexo,
  #modos-creacion,#opciones-riqueza-nivel,#configuracion-avanzada,.pie-configuracion){grid-column:1/-1}
.dialogo-configuracion .pie-configuracion{display:flex;justify-content:flex-end;gap:.65rem;
  flex-wrap:wrap;position:sticky;bottom:-1.1rem;background:var(--superficie);
  padding:.85rem 0 .2rem;border-top:1px solid var(--borde)}
.dialogo-configuracion .pie-configuracion button{min-height:42px}
.dialogo-configuracion .pie-configuracion .generar-desde-dialogo{
  background:var(--superficie2);color:var(--texto)}
.icono-equipo-lista{width:1.05rem;height:1.05rem;flex:0 0 1.05rem;
  color:var(--oro2);vertical-align:middle}
html[data-tema=clasico] .icono-equipo-lista{color:#15467c}
@media(max-width:560px){
  .dialogo-configuracion{padding:.85rem}
  .dialogo-configuracion #configuracion{grid-template-columns:minmax(0,1fr)}
  .dialogo-configuracion #configuracion>*{grid-column:1/-1}
  .dialogo-configuracion .cabecera-configuracion{top:-.85rem}
  .dialogo-configuracion .pie-configuracion{bottom:-.85rem}
}

/* Cabecera compacta: nivel independiente del sistema, sexo junto a la Ocupación. */
.cabecera-ficha>div:first-child{min-width:0}
.cabecera-ficha .acciones-cabecera-ficha{display:flex;gap:.55rem;
  align-items:flex-start;flex-shrink:0}
.nivel-ficha{display:inline-flex;align-items:center;white-space:nowrap;
  font-size:.72rem;line-height:1.5;font-weight:800;padding:.27rem .45rem;
  border:1px solid currentColor;border-radius:6px;color:#465865}
.descripcion-personaje .sexo-ficha{display:inline-flex;align-items:center;
  vertical-align:-.19em;justify-content:center;margin:0 .1rem;
  color:#15467c}
.sexo-ficha .icono-svg{display:block;width:1.07rem;height:1.07rem}
html[data-tema]:not([data-tema=clasico]) .nivel-ficha{color:var(--tema-ficha-text)}
html[data-tema]:not([data-tema=clasico]) .descripcion-personaje .sexo-ficha{
  color:var(--tema-ficha-text)}
@media(max-width:400px){
  .cabecera-ficha{gap:.5rem;padding:.9rem .8rem}
  .cabecera-ficha .acciones-cabecera-ficha{gap:.3rem}
  .nivel-ficha{font-size:.67rem;padding:.2rem .3rem}
}
/* WebKit anima el cambio de tema desde Clásico: los controles de ficha
   necesitan un estado hover inmediato, no una interpolación casi transparente. */
html[data-tema=ceruleo] .tarjeta .pie-ficha button,
html[data-tema=ceruleo] .tarjeta .icon-btn{transition:none}
/* Cerúleo: nunca usar un fondo oscuro con texto oscuro en botones de ficha. */
html[data-tema=ceruleo] .tarjeta .pie-ficha button:hover:not(:disabled):not(.principal):not(.sistema-activo):not(.activa),
html[data-tema=ceruleo] .tarjeta .pie-ficha button:focus-visible:not(:disabled):not(.principal):not(.sistema-activo):not(.activa),
html[data-tema=ceruleo] .tarjeta .icon-btn:hover:not(:disabled):not(.principal):not(.sistema-activo):not(.activa){
  background:#c5efff;color:#071448;border-color:#168d9f;
}

/* Ficha: acciones primero; fuentes editoriales en segunda línea. */
.pie-ficha{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.5rem}
.acciones-pie-ficha{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.pie-ficha .acciones-pie-ficha button{
  min-width:3.5rem;padding:.35rem .65rem;font-size:.75rem;line-height:1.3
}
.pie-ficha .fuentes-pie-ficha{display:block;line-height:1.4;overflow-wrap:anywhere}
@media(max-width:380px){
  .acciones-pie-ficha{gap:.35rem}
  .pie-ficha .acciones-pie-ficha button{min-width:0;flex:1}
}