@font-face{font-family:"AlcarinTengwar";src:url("../fuentes/AlcarinTengwar-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Tengwar Annatar Italic";src:url("../fuentes/annatar-it.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Tengwar Annatar";src:url("../fuentes/annatar.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Tengwar Artano";src:url("../fuentes/artano.ttf") format("truetype");font-display:swap}
/* ============================================================
   TEMAS

   Toda la piel vive en variables. Un tema no es mas que otro
   juego de valores en <html data-tema="...">, asi que cambiar de
   piel no toca ni una regla de las de abajo.

   Los tintes (fondos translucidos de insignias, pastillas...) se
   sacan del color con color-mix, para que sigan al tema solos.
   Pide navegador de 2023 en adelante; en uno anterior el tinte
   se pierde y queda el color plano, que se lee igual.
   ============================================================ */
:root{
  /* --- lo que cambia con el tema --- */
  --bg:#0f1216; --panel:#171c22; --panel2:#1b222a; --line:#242c35; --line2:#33404d;
  --txt:#e6e9ec; --dim:#8b97a5; --dim2:#c3cedb;
  --gold:#d8b26a; --blue:#7fb0d8; --green:#6fbf8e; --amber:#e0a84e; --red:#d97b7b;
  --hdr:rgba(15,18,22,.96); --chip:#22303a;
  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:var(--ui); --dls:.2px; --dtt:none; --dw:650;
  --fs:15px; --lh:1.55;
  --r1:10px; --r2:12px; --r3:20px;   /* cajas, paneles, pastillas */
  --tinta:var(--txt);                 /* color de la tinta de las tengwar */
  --sombra:none;                      /* halo de las tengwar grandes */
  --marco:none;                       /* adornos del tema ornamentado */
  --marco-borde:0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:var(--fs)/var(--lh) var(--ui)}
a{color:var(--dim)}

/* ---------- cabecera ---------- */
header{position:sticky;top:0;z-index:20;background:var(--hdr);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:baseline;gap:10px;padding:13px 0 9px}
.brand h1{margin:0;font-size:17px;font-family:var(--disp);font-weight:var(--dw);
  letter-spacing:var(--dls);text-transform:var(--dtt)}
.brand h1 span{color:var(--gold)}
.brand .teng{font-family:"AlcarinTengwar",serif;font-size:20px;line-height:1;
  color:var(--gold);opacity:.8;letter-spacing:.5px}
.nav{display:flex;gap:6px;padding-bottom:10px}
.nav button{flex:0 0 auto;padding:7px 14px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r3);color:var(--dim);font:inherit;font-size:13.5px;cursor:pointer}
.nav button.on{color:var(--bg);background:var(--gold);border-color:var(--gold);font-weight:600}

main{max-width:820px;margin:0 auto;padding:16px 16px 70px}
.hide{display:none!important}

input,select,textarea{background:var(--panel);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--r1);padding:11px 13px;font:inherit;font-size:15px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--line2)}
#q{font-size:19px;padding:14px 15px;background:var(--bg)}
.lema{margin:0 0 14px;color:var(--dim);font-size:13.5px;line-height:1.65;max-width:640px}
.lema b{color:var(--gold);font-weight:600}
.ex{color:var(--dim);font-size:12.5px;margin-top:9px}
.ex b{color:var(--gold);cursor:pointer;border-bottom:1px dotted var(--gold);font-weight:500}

/* ---------- presentación ---------- */
.intro{color:var(--dim);font-size:14px;line-height:1.7;max-width:640px}
.intro p{margin:0 0 12px}
.intro b{color:var(--dim2);font-weight:600}
.intro .aviso{color:var(--dim);font-size:12.5px;border-left:2px solid var(--line2);
  padding-left:12px;margin-top:16px}
.cifras{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.cifras div{flex:1 1 120px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);padding:10px 12px;font-size:12px;color:var(--dim)}
.cifras b{display:block;font-size:20px;font-family:var(--disp);font-weight:var(--dw);
  color:var(--gold);margin-bottom:1px}


/* ---------- el resultado: lo primero que se ve al escribir ---------- */
.resu{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r2);
  padding:16px 16px 14px;margin-top:18px}
.resu-pz{text-align:center;color:var(--dim);font-size:13.5px;margin-top:-2px}
.resu-pz b{color:var(--dim2);font-weight:600}
.resu-pz i{font-style:normal;opacity:.55;margin:0 5px}
.resu-barra{margin-top:15px}

/* ---------- los pasos, plegados debajo ---------- */
.pasos{display:flex;flex-direction:column;gap:8px}
.paso{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
.paso.skip{opacity:.62}
.paso summary{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;
  list-style:none;color:var(--dim)}
.paso summary::-webkit-details-marker{display:none}
.paso summary::marker{content:""}
.paso[open] summary{border-bottom:1px solid var(--line)}
.pn{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line2);
  color:var(--dim);font-size:10.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center}
.pn.on{border-color:var(--green);color:var(--green)}
.pt{flex:0 0 148px;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;
  font-family:var(--disp)}
.pr{flex:1;font-size:13.5px;color:var(--dim2);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pr b{color:var(--txt)}
.pr-dim{color:var(--dim);font-weight:400}
.pv{flex:0 0 auto;transition:transform .15s}
.paso[open] .pv{transform:rotate(180deg)}
.paso .box{border:0;background:transparent;border-radius:0 0 var(--r2) var(--r2)}

@media (max-width:560px){
  .paso summary{flex-wrap:wrap;gap:9px}
  .pt{flex:1 1 auto}
  .pr{flex:1 1 100%;white-space:normal;order:3;font-size:14px}
}

/* ---------- pasos ---------- */
.step{position:relative;padding:0 0 6px 30px;margin-bottom:16px;border-left:2px solid var(--line)}
.step:last-child{border-left-color:transparent}
.dot{position:absolute;left:-9px;top:1px;width:16px;height:16px;border-radius:50%;
  background:var(--panel);border:2px solid var(--line);font-size:9px;text-align:center;
  line-height:12.5px;color:var(--dim);font-weight:700}
.dot.on{border-color:var(--green);color:var(--green)}
.dot.off{opacity:.45}
.lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);
  margin-bottom:6px;font-family:var(--disp)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:13px 15px}
.box.skip{opacity:.55}
.msg{color:var(--dim);font-size:13.5px}
.msg b{color:var(--txt)}
.tip{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r1);padding:10px 12px;
  color:var(--dim);font-size:12.5px;margin-top:10px;line-height:1.6}
.tip b{color:var(--dim2)}
.flow{font-size:15.5px}
.flow b{color:var(--txt)} .flow s{color:var(--dim);text-decoration:none}
.arrow{color:var(--dim);margin:0 7px}
.etim{color:var(--dim);font-size:13px;margin-top:7px}
.mean{font-size:16px}
.chips{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;background:var(--chip);color:var(--blue);border-radius:var(--r3);
  padding:3px 11px}

/* ---------- candidatos ---------- */
.cands{display:flex;flex-direction:column;gap:8px}
.cand{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r2);padding:11px 13px;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s}
.cand:hover{border-color:var(--line2)}
.cand.sel{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.cand .n{font-size:21px;font-family:var(--disp);font-weight:var(--dw);color:var(--gold);
  letter-spacing:var(--dls)}
.cand .n small{font-size:12px;color:var(--dim);font-weight:400;margin-left:9px;letter-spacing:0}
.cand .tg{font-family:var(--tf);font-weight:var(--tw);font-style:var(--ti);font-size:30px;line-height:1.5;color:var(--dim2);margin-left:10px}
.cand .br{margin-top:6px;font-size:13px;color:var(--dim2)}
.cand .br i{font-style:normal;color:var(--dim)}
.cand .nt{margin-top:5px;font-size:12px;color:var(--dim)}
.badge{font-size:10.5px;padding:1px 8px;border-radius:var(--r3);font-weight:600;vertical-align:2px}
.b-ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.b-wr{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.b-no{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.sub2{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);
  margin:14px 0 7px;display:flex;align-items:center;gap:8px}
.sub2:first-child{margin-top:0}
.sub2 hr{flex:1;border:0;border-top:1px solid var(--line);margin:0}

/* ---------- verificacion de componentes ---------- */
.comp{margin-top:10px;font-size:13.5px}
.comp .row{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-top:1px dashed var(--line)}
.comp b{color:var(--dim2);min-width:78px}
.v-ok{color:var(--green)} .v-warn{color:var(--amber)} .v-bad{color:var(--red)}
.g{color:var(--dim)}
.res{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{font-size:20px;font-family:var(--disp);font-weight:var(--dw);color:var(--green);
  background:color-mix(in srgb,var(--green) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 32%,transparent);
  border-radius:var(--r1);padding:6px 14px;cursor:pointer}
.pill.sel{border-color:var(--gold);color:var(--gold);
  background:color-mix(in srgb,var(--gold) 11%,transparent)}

/* ---------- tengwar ---------- */

:root{--tf:"AlcarinTengwar",serif; --tw:400; --ti:normal; --tz:64px;
  --tgs:26px; --tgh:56px; --tzb:14px; --tdz:38px; --tdb:12px; --tdx:4px; --tzx:8px}
/* Entre palabras se puede saltar; dentro de una, no. Una palabra escrita en
   tengwar partida por la mitad no queda fea, se lee mal. Si aun asi no cabe,
   ajustaGrandes() en app.js le baja el cuerpo hasta que entre. */
.tengbig{font-family:var(--tf);font-weight:var(--tw);font-style:var(--ti);font-size:var(--tz);
  line-height:1.5;color:var(--tinta);text-align:center;text-shadow:var(--sombra);
  padding:18px var(--tzx) var(--tzb);word-break:normal;overflow-wrap:normal}
/* la palabra transcrita dentro de una ficha del diccionario: los trazos de
   algunas tengwar bajan mucho, y sin este hueco se comen la línea de abajo */
.tengdic{font-family:var(--tf);font-weight:var(--tw);font-style:var(--ti);
  font-size:var(--tdz);line-height:1.75;color:var(--tinta);text-align:left;
  padding:6px var(--tdx) var(--tdb);word-break:break-word}
.dbar{display:flex;gap:8px;align-items:center;margin-top:10px}
.dbar label{font-size:12px;color:var(--dim);white-space:nowrap}
.dbar select{flex:1 1 auto;width:auto;font-size:13px;padding:8px 10px}

.estilo{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.estilo select{flex:1 1 190px;width:auto;font-size:13.5px;padding:8px 10px}
.estilo select option:disabled{color:var(--dim);opacity:.6}
.estilo .tog{background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  border-radius:var(--r1);padding:8px 12px;font:inherit;font-size:13px;cursor:pointer}
.estilo .tog.on{border-color:var(--gold);color:var(--gold);
  background:color-mix(in srgb,var(--gold) 11%,transparent)}
.estilo .tog:disabled{opacity:.4;cursor:default}
.estilo input[type=range]{flex:1 1 110px;width:auto;padding:0;accent-color:var(--gold);background:none;border:0}
.tenglat{text-align:center;color:var(--gold);font-size:19px;font-family:var(--disp);
  font-weight:600;letter-spacing:var(--dls);text-transform:var(--dtt)}
.tengbar{display:flex;gap:8px;margin-top:14px;align-items:center}
.tengbar input{font-size:15px}
.tengbar select{width:auto;flex:0 0 auto;font-size:13px;padding:10px 8px}
.tengbar{flex-wrap:wrap}
.tengbar button,.btn{background:var(--panel2);border:1px solid var(--line);color:var(--dim2);
  border-radius:var(--r1);padding:10px 14px;font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.tengbar button:hover,.btn:hover{border-color:var(--line2)}
.desglose{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.gl{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r1);
  padding:4px 10px 7px;text-align:center;min-width:56px;overflow:hidden}
/* los trazos de las cursivas suben y bajan mucho: caja alta y el glifo
   centrado, para que no se salga por arriba ni por abajo */
.gl .t{font-family:var(--tf);font-weight:var(--tw);font-style:var(--ti);
  font-size:var(--tgs);line-height:1;color:var(--tinta);height:var(--tgh);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.gl .s{font-size:11.5px;color:var(--gold);margin-top:1px}
.gl .d{font-size:10px;color:var(--dim);margin-top:1px;max-width:110px}

/* En el movil el desglose se estiraba a lo largo: las fichas se hacian anchas
   por culpa de la descripcion y solo entraban dos por fila, con la caja del
   glifo a tamaño de escritorio. Rejilla de ancho fijo y todo mas apretado: las
   mismas siete fichas pasan de tres filas altas a dos bajas. La caja del glifo
   sigue saliendo de --tgh, que es lo que sabe si la tipografia tiene cola. */
@media (max-width:560px){
  .desglose{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
    gap:5px;margin-top:10px}
  .gl{min-width:0;padding:2px 4px 4px}
  /* El glifo y su caja encogen **a la vez**. Bajar solo la caja recortaba las
     colas: Artano, que no es cursiva ni Dan Smith y por eso no entra en el
     tratamiento de trazo largo, saca 52 px de tinta en una caja de 56. Medido
     con measureText, que es lo unico que ve los rasgos que se salen del
     recuadro de linea. */
  .gl .t{font-size:calc(var(--tgs) * .78);height:calc(var(--tgh) * .78)}
  .gl .s{font-size:10.5px;margin-top:0}
  .gl .d{font-size:9.5px;max-width:none;line-height:1.25;margin-top:0}
}

/* ---------- portada del diccionario ---------- */
.temas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tema{text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);padding:12px 13px;cursor:pointer;font:inherit;color:inherit;
  min-height:66px;transition:border-color .12s}
.tema:hover{border-color:var(--line2)}
.tema .tn{display:block;font-size:14px;font-weight:600;color:var(--txt);line-height:1.35}
.tema .tc{display:block;margin-top:5px;font-size:11.5px;color:var(--dim)}
.tema .tc b{color:var(--gold);font-weight:650}
.tema .tc b.tw{color:var(--blue)}
.tema .tc .tsep{opacity:.5;margin:0 2px}
.pjs{display:flex;gap:7px;flex-wrap:wrap}
.pj{display:inline-flex;align-items:baseline;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r3);padding:6px 13px;cursor:pointer;
  font:inherit;color:inherit}
.pj:hover{border-color:var(--line2)}
.pj b{color:var(--gold);font-size:14px;font-weight:600;font-family:var(--disp)}
.pj span{color:var(--dim);font-size:11.5px}
.migas{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.migas:empty{display:none}
.miga{background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid var(--gold);
  color:var(--gold);border-radius:var(--r3);padding:5px 12px;font:inherit;font-size:12.5px;
  cursor:pointer}
.miga span{opacity:.7;margin-left:3px}

/* Las otras dos puertas —nombres por lo que son, frases por lengua— son cuatro
   y tres tarjetas, no doce: con la rejilla de los temas quedaban raquiticas. */
.temas.puertas{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.temas.puertas .tema{min-height:58px}
.temas.puertas .tema .tn{font-size:15px}
/* aire entre las tres secciones de la portada */
.temas + .sub2,.pjs + .sub2,.hint + .sub2,.muestras + .sub2{margin-top:26px}
.temas + .pjs{margin-top:9px}
/* las lenguas de frases son un filtro secundario: pastillas, no tarjetas */
.pjs.lenguas .pj b{font-family:inherit;font-weight:600;color:var(--dim2)}
.pjs.lenguas .pj span{color:var(--gold)}

/* Dos frases de muestra: la portada de frases no dice solo cuantas hay, enseña
   como son. Van transcritas, que es de lo que va todo esto. */
.muestras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px}
.muestra{text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);padding:11px 13px 12px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .12s;
  /* un boton centra su contenido en vertical, y como las dos muestras no miden
     lo mismo (una transcripcion parte en dos lineas) la corta quedaba flotando
     a media altura. En columna y desde arriba, las dos empiezan igual. */
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.muestra:hover{border-color:var(--line2)}
.muestra .mf{display:block;font-size:14.5px;font-style:italic;color:var(--txt)}
.muestra .mg{display:block;margin-top:3px;font-size:12px;color:var(--dim)}
.muestra .tengdic{margin:4px 0 2px}

@media (max-width:560px){
  .temas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .muestras{grid-template-columns:1fr}
}

/* ---------- diccionario ---------- */
.filters{display:flex;gap:8px;margin-top:9px}
.filters select{flex:1;min-width:110px}
.dtabs{display:flex;gap:8px;margin-top:10px}
.dtab{flex:1;padding:9px 6px;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r1);font-size:13px;color:var(--dim);cursor:pointer}
.dtab.on{color:var(--txt);border-color:var(--line2);background:var(--panel2)}
.dtab b{display:block;font-size:16px;margin-bottom:1px}
.dtab.on.names b{color:var(--gold)} .dtab.on.words b{color:var(--blue)}
.dtab.on.frases b{color:var(--green)}
.frase{font-size:17.5px;font-weight:600;color:var(--green);font-family:var(--disp);
  letter-spacing:var(--dls);line-height:1.4}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:13px 15px;margin-bottom:10px}
.top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.name{font-size:19px;font-family:var(--disp);font-weight:600;color:var(--gold);
  letter-spacing:var(--dls)}
.word{font-size:19px;font-family:var(--disp);font-weight:600;color:var(--blue);
  letter-spacing:var(--dls)}
.tag{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:var(--r3);padding:1px 8px}
.gloss{margin:5px 0 0;font-size:15px}
.gloss em{color:var(--dim);font-style:normal}
.el{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:13.5px}
.el b{color:var(--dim2);font-weight:600}
.el div{margin-top:2px;color:var(--dim)}
.note{color:var(--dim);font-size:12.5px;margin-top:7px}
.empty{color:var(--dim);text-align:center;padding:30px 10px;font-size:14px;line-height:1.7}
.empty b{color:var(--blue)}
.more{display:block;width:100%;margin:6px 0 0;padding:11px;background:var(--panel);
  border:1px solid var(--line);color:var(--dim);border-radius:var(--r1);font:inherit;font-size:14px;cursor:pointer}
.hint{margin:0 0 10px;font-size:12.5px;color:var(--dim);text-align:center}
.dcard a{font-size:12px;text-decoration:none;border-bottom:1px solid var(--line)}

footer{color:var(--dim);font-size:11.5px;text-align:center;padding:22px 16px 44px;
  max-width:820px;margin:0 auto;line-height:1.7}

@media (max-width:520px){
  .tengbig{font-size:48px}
  .cand .tg{display:block;margin:4px 0 0}
}


/* ============================================================
   Ithildin — la puerta de Moria. La misma app con el metal
   cambiado de oro a plata azulada, y las lineas encendidas.
   ============================================================ */
html[data-tema="ithildin"]{
  --bg:#080b10; --panel:#0d1219; --panel2:#111a24; --line:#1b2430; --line2:#2f4256;
  --txt:#dbe6f2; --dim:#7d8b9c; --dim2:#b6c9dc;
  --gold:#a9c9e8; --blue:#8fb4d6; --green:#79c0a6; --amber:#d6b877; --red:#d99494;
  --hdr:rgba(8,11,16,.96); --chip:#16222e;
  --ui:"EB Garamond",Georgia,"Times New Roman",serif;
  --disp:"Cinzel",Georgia,serif; --dls:.12em; --dtt:none; --dw:400;
  --fs:16.5px; --lh:1.6;
  --tinta:#eaf6ff;
  --sombra:0 0 26px rgba(150,200,245,.55),0 0 8px rgba(200,230,255,.30);
}

/* ============================================================
   La inscripcion — las letras de fuego del Anillo. Negro calido
   y oro al rojo; el halo solo en la tengwar grande, que en una
   lista de 3.680 fichas cansaria.
   ============================================================ */
html[data-tema="inscripcion"]{
  --bg:#0b0806; --panel:#120d09; --panel2:#181109; --line:#2a2118; --line2:#4a3413;
  --txt:#e8dcc6; --dim:#968670; --dim2:#cbbb9c;
  --gold:#e2b25f; --blue:#c98a54; --green:#8fb473; --amber:#dfa63c; --red:#d98a6a;
  --hdr:rgba(11,8,6,.96); --chip:#241a10;
  --ui:"EB Garamond",Georgia,"Times New Roman",serif;
  --disp:"Cinzel",Georgia,serif; --dls:.1em; --dtt:none; --dw:600;
  --fs:16.5px; --lh:1.6;
  --tinta:#f2c76c;
  --sombra:0 0 30px rgba(240,165,50,.55),0 0 9px rgba(255,220,150,.32);
}

/* ============================================================
   Ornamentada — la anterior, con marco. Los adornos son capas de
   fondo (SVG en data URI), no nodos nuevos: el HTML no cambia.
   ============================================================ */
html[data-tema="ornamentada"]{
  --bg:#08090c; --panel:#120d09; --panel2:#181109; --line:#2a2118; --line2:#5a4620;
  --txt:#e8dcc6; --dim:#a2947a; --dim2:#cbbb9c;
  --gold:#e2b25f; --blue:#c98a54; --green:#8fb473; --amber:#dfa63c; --red:#d98a6a;
  --hdr:rgba(8,9,12,.96); --chip:#241a10;
  --ui:"EB Garamond",Georgia,"Times New Roman",serif;
  --disp:"Cinzel",Georgia,serif; --dls:.1em; --dtt:none; --dw:600;
  --fs:16.5px; --lh:1.62;
  --r1:4px; --r2:5px; --r3:3px;
  --tinta:#f2c76c;
  --sombra:0 0 30px rgba(240,165,50,.55),0 0 9px rgba(255,220,150,.32);
  --marco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none' stroke='%23c9a227' stroke-width='1' stroke-linecap='round' opacity='.6'%3E%3Cg transform='rotate(0 17 17)'%3E%3Cpath d='M3 3h11M3 3v11'/%3E%3Cpath d='M6 6c9 0 16 4 19 12'/%3E%3Cpath d='M25 18c-4-1-6-4-5-7 3 0 6 3 5 7z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none' stroke='%23c9a227' stroke-width='1' stroke-linecap='round' opacity='.6'%3E%3Cg transform='rotate(90 17 17)'%3E%3Cpath d='M3 3h11M3 3v11'/%3E%3Cpath d='M6 6c9 0 16 4 19 12'/%3E%3Cpath d='M25 18c-4-1-6-4-5-7 3 0 6 3 5 7z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none' stroke='%23c9a227' stroke-width='1' stroke-linecap='round' opacity='.6'%3E%3Cg transform='rotate(180 17 17)'%3E%3Cpath d='M3 3h11M3 3v11'/%3E%3Cpath d='M6 6c9 0 16 4 19 12'/%3E%3Cpath d='M25 18c-4-1-6-4-5-7 3 0 6 3 5 7z'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none' stroke='%23c9a227' stroke-width='1' stroke-linecap='round' opacity='.6'%3E%3Cg transform='rotate(270 17 17)'%3E%3Cpath d='M3 3h11M3 3v11'/%3E%3Cpath d='M6 6c9 0 16 4 19 12'/%3E%3Cpath d='M25 18c-4-1-6-4-5-7 3 0 6 3 5 7z'/%3E%3C/g%3E%3C/svg%3E");
  --marco-borde:1px;
}

/* el marco general: una sola caja con las cuatro esquinas dibujadas */
html[data-tema="ornamentada"] main{
  border:var(--marco-borde) solid var(--line2);
  border-radius:6px;
  background-image:var(--marco);
  background-repeat:no-repeat;
  background-position:top left,top right,bottom right,bottom left;
  padding:22px 20px 40px;
  margin-top:14px;
}
html[data-tema="ornamentada"] .resu{
  background-image:var(--marco);
  background-repeat:no-repeat;
  background-position:top left,top right,bottom right,bottom left;
}
/* los filetes: la regla de las secciones deja de ser una linea y pasa a
   llevar el rombo en medio */
html[data-tema="ornamentada"] .sub2 hr,
html[data-tema="ornamentada"] .comp .row{border-top-style:solid}
html[data-tema="ornamentada"] .sub2 hr{
  border:0;height:9px;
  background:var(--filete-img) center/auto no-repeat,
    linear-gradient(90deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent) center/100% 1px no-repeat;
}
html[data-tema="ornamentada"]{ --filete-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='9' viewBox='0 0 30 9' fill='none' stroke='%23c9a227' stroke-width='1'%3E%3Cpath d='M15 1.3l3.2 3.2-3.2 3.2-3.2-3.2z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------
   El pergamino de los pasos. En vez de reescribir cada color de
   cada hijo, la caja redefine los tokens: todo lo de dentro se
   entera solo, incluidas las tengwar, que pasan a tinta negra
   sobre papel — que es justo para lo que se dibujaron.
   ------------------------------------------------------------ */
html[data-tema="ornamentada"] .paso .box{
  --txt:#2b2010; --dim:#54401e; --dim2:#3a2c12;
  --panel:transparent; --panel2:rgba(255,251,238,.5);
  --line:rgba(90,70,35,.34); --line2:rgba(90,70,35,.62);
  --chip:#e6d8b4;
  --gold:#6b4a0d; --blue:#334a5f; --green:#2c4a24; --amber:#6b490d; --red:#7d2820;
  --tinta:#241b0e; --sombra:none;
  color:var(--txt);
  border-color:#8a6a2f;
  background-color:#d7c69c;
  background-image:var(--marco),
    linear-gradient(160deg,#e2d2ac 0%,#d4c194 46%,#c8b384 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:top left,top right,bottom right,bottom left,0 0;
}
/* sobre pergamino, el tinte translucido de insignias y pastillas deja el
   texto casi del color del fondo: se cambia por papel limpio */
html[data-tema="ornamentada"] .paso .box .badge{background:rgba(255,252,242,.78)}
html[data-tema="ornamentada"] .paso .box .pill{background:rgba(255,252,242,.66)}
html[data-tema="ornamentada"] .paso .box .chip{background:var(--chip)}

/* el paisaje, interruptor dentro del tema ornamentado. Va en <html> y el
   velo en <body>, asi la imagen no se repite ni se mueve al hacer scroll. */
html[data-tema="ornamentada"][data-fondo="1"]{
  background:url("../fondo.svg") center top/cover no-repeat fixed,var(--bg);
}
/* El velo tambien va fijo y con la altura de la ventana. Si se deja al alto
   de body, en una pagina corta se acaba antes que el fondo y aparece una
   costura: arriba el paisaje con velo, abajo el paisaje a pelo. */
html[data-tema="ornamentada"][data-fondo="1"] body{
  min-height:100vh;
  background:linear-gradient(180deg,rgba(8,9,12,.52) 0%,rgba(8,9,12,.72) 45%,
    rgba(8,9,12,.90) 100%) fixed;
}

/* el mando de la piel, en la cabecera */
.piel{margin-left:auto;display:flex;align-items:center;gap:7px}
.piel select{width:auto;font-size:12.5px;padding:6px 9px;border-radius:var(--r1)}
.piel .tog{background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:var(--r1);padding:6px 10px;font:inherit;font-size:12.5px;cursor:pointer;
  white-space:nowrap}
.piel .tog.on{border-color:var(--gold);color:var(--gold);
  background:color-mix(in srgb,var(--gold) 11%,transparent)}
@media (max-width:520px){ .piel select{max-width:150px} .piel .tog{padding:6px 8px} }

/* En el movil el paisaje no se ve: el panel ocupa casi todo el ancho y solo
   asoman dos rendijas a los lados. Asi que ni boton ni imagen — y de paso se
   ahorra el fondo fijo, que en un movil repinta fatal al hacer scroll. Sin el
   boton, ademas, la cabecera deja de salirse por la derecha. */
@media (max-width:700px){
  .piel .tog{display:none!important}
  html[data-tema="ornamentada"][data-fondo="1"]{background:var(--bg)}
  html[data-tema="ornamentada"][data-fondo="1"] body{background:var(--bg)}
}