/* Rótulos de ejercicio · @axeljuca. Se apoya en /diagnostico/assets/base.css */
.hoja.sube{position:relative}
.marca-fija{position:absolute;top:clamp(20px,4vw,40px);right:clamp(20px,4vw,40px);font:800 .8rem/1 "Figtree",sans-serif;color:var(--ciruela);opacity:.7}
.etq{display:block;font-weight:800;margin:0 0 8px}
.fichas input[type=radio]{accent-color:var(--tinta);width:18px;height:18px;margin:0}
.fichas label{transition:transform .15s ease,border-color .15s ease,background .15s ease}
.fichas label:hover{transform:translateY(-2px);border-color:var(--tinta)}
.colores{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 16px}
.colores label{font-weight:700;display:flex;align-items:center;gap:10px;margin:0}
.numerar{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.numerar input{accent-color:var(--tinta);width:20px;height:20px}
#lista{min-height:190px;font:500 1rem/1.6 "Figtree",sans-serif}
.rot-grid{display:grid;gap:26px}
@media(min-width:900px){.rot-grid{grid-template-columns:1fr 1.15fr;align-items:start}}
.previas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:600px){.previas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.previa{display:flex;flex-direction:column;gap:8px}
.previa .lienzo{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:9/16;background:radial-gradient(120% 70% at 30% 20%,#6d7a86,#2b3138 60%,#15181c);transition:transform .15s ease}
.previa .lienzo::before{content:"";position:absolute;left:28%;top:22%;width:44%;height:52%;border-radius:40% 40% 30% 30%;background:linear-gradient(#8f9aa3,#59636b);opacity:.55}
.previa canvas{position:relative;width:100%;height:100%;display:block}
.previa:hover .lienzo{transform:translateY(-2px)}
.previa .btn{min-height:40px;padding:8px 12px;font-size:.88rem}
.vacio{grid-column:1/-1;color:var(--gris);font-weight:600;padding:20px;border:1.5px dashed #CFC9BD;border-radius:12px;text-align:center}
.btn{transition:transform .12s ease,filter .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.tp-ok{min-height:1.4em;margin:12px 0 0;font-weight:700;color:var(--ciruela)}
@media(prefers-reduced-motion:reduce){.fichas label,.btn,.previa .lienzo{transition:none}.fichas label:hover,.btn:hover,.previa:hover .lienzo{transform:none}}