/* Capa de la prueba sobre la copia de la maqueta. Tokens de la maqueta (--pri, --card, --fg…); los propios
 * de la prueba salen de packages/design/css/tokens.css: --tour-accent (la franja de tareas) y --logo-*. */
:root{
  --pv-acento:hsl(262 83% 58%); --pv-acento-fg:hsl(0 0% 100%); --pv-acento-tinta:hsl(262 60% 45%);
  --logo-tinta:hsl(222 67% 15%); --logo-papel:hsl(220 14% 96%);
  --pv-bar-h:0px;
}

/* La maqueta a pantalla completa: sin cabecera de la maqueta, sin «Simular», sin marco de móvil */
body.pv{background:var(--bg)}
body.pv .ptop,body.pv #sim{display:none}
body.pv .layout{display:block;padding:0;max-width:none}
body.pv #frameWrap{position:static;width:auto!important;height:auto!important}
body.pv #frame{position:fixed;left:0;right:0;bottom:0;top:var(--pv-bar-h);width:auto!important;height:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
body.pv #frame .sbar{display:none}

/* ---------- Pantallas de la prueba (fuera de la app) ---------- */
.pv-cap{position:fixed;inset:0;z-index:9000;overflow-y:auto;background:var(--bg);color:var(--fg);font:14px/1.5 var(--font)}
.pv-cap.pv-sobre{background:var(--scrim);display:grid;place-items:center;padding:16px}
.pv-hoja{max-width:560px;margin:0 auto;padding:24px 16px 40px;display:grid;gap:14px}
.pv-niveles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pv-nivel{display:grid;gap:8px;align-content:start;padding:12px;border-radius:var(--r-l);background:color-mix(in srgb,var(--pv-acento) 8%,var(--card))}
.pv-nivel-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--pv-acento);color:var(--pv-acento-fg)}
.pv-nivel b{display:block;font-size:14.5px;font-weight:600}
.pv-nivel small{display:block;font-size:11.5px;font-weight:700;color:var(--pv-acento-tinta);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.pv-nivel p{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--fg)}
/* niveles en fila también en el móvil: menos alto, y «Empezar» fijo abajo para no tener que buscarlo */
.pv-niveles{gap:8px}
.pv-nivel{padding:10px;gap:6px}
.pv-nivel-ic{width:30px;height:30px}
.pv-nivel b{font-size:13px}
.pv-nivel small{font-size:10.5px}
.pv-nivel p{font-size:11.5px;line-height:1.35}
/* «Empezar» fijo: su sombra por encima indica que el texto sigue debajo, como en otras pantallas de la app */
.pv-fijo{position:sticky;bottom:0;z-index:2;padding:10px 0 12px;background:var(--bg,hsl(48 20% 98%));box-shadow:0 -12px 18px -12px hsl(151 45% 7% / .32)}
.pv-gl-cuerpo{overflow:hidden}
.pv-fijo .pv-btn{width:100%}
/* pantalla de acceso de /pruebame: mismo diseño que registro.html de la landing (colores de la landing, a pantalla completa, móvil incluido) */
.pv-prox{--p-pri:hsl(151 64% 15%);--p-noche:hsl(151 45% 7%);--p-cab:hsl(150 14% 20%);--p-bg:hsl(48 20% 98%);--p-card:hsl(48 30% 99.6%);--p-fg:hsl(151 40% 12%);--p-mut:hsl(153 10% 38%);--p-bd:hsl(150 15% 88%);--p-oro:hsl(46 90% 81%);--p-oro-ink:hsl(40 100% 20%);min-height:100%;display:flex;flex-direction:column;background:var(--p-bg);color:var(--p-fg);font:15px/1.5 var(--font)}
.pv-prox-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;gap:24px}
.pv-prox-nav{background:var(--p-noche);color:hsl(0 0% 100%);flex:none;position:relative;border-bottom:1px solid rgba(122,184,153,.12)}
/* cabecera IGUAL que la de la landing (medido en el navegador): 64 px + borde = 65 px, ancho 1200, logo en x 57 */
.pv-prox-nav .pv-prox-wrap{height:64px;max-width:1200px}
.pv-prox-menu,.pv-prox-entrar-m{display:none}
/* a 920 px o menos, los enlaces no caben en una línea: se pasa directamente a las tres rayas (nunca a enlaces partidos) */
@media (max-width:920px){
  .pv-prox-nav .pv-prox-wrap > ul,.pv-prox-entrar-m{display:none}
  .pv-prox-nav .pv-prox-wrap{height:55px;padding:10px 16px 0} /* móvil de la landing: 54 px + borde, logo en (16,17) */
  .pv-prox-menu{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0;flex:none;background:transparent;border:0;border-radius:10px;cursor:pointer}
  .pv-prox-menu span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
  .pv-prox-nav.abierto ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;margin:0;padding:6px 24px 14px;background:var(--p-noche);border-bottom:1px solid hsl(150 30% 60% / .18);box-shadow:0 18px 30px -18px rgba(0,0,0,.6);z-index:5}
  .pv-prox-nav.abierto ul li{border-bottom:1px solid hsl(150 30% 60% / .12)}
  .pv-prox-nav.abierto ul li:last-child{border-bottom:0}
  .pv-prox-nav.abierto ul a{display:block;padding:13px 0;font-size:16px}
  .pv-prox-nav.abierto .pv-prox-entrar-m{display:block}
}
.pv-prox-logo{display:flex;align-items:center;gap:8px;color:hsl(0 0% 100%);font-weight:700;text-decoration:none;font-size:17px;flex:none}
.pv-prox-nav ul{display:flex;gap:20px;list-style:none;margin:0 auto 0 28px;padding:0;flex-wrap:nowrap;white-space:nowrap}
.pv-prox-nav ul a,.pv-prox-entrar{color:hsl(150 20% 85%);text-decoration:none;font-size:14px;font-weight:500}
.pv-prox-entrar{font-weight:700;color:hsl(0 0% 100%);flex:none}
.pv-prox-main{flex:1;display:flex;align-items:center;padding:48px 0}
.pv-prox-sec{width:100%}
.pv-prox-grid{align-items:flex-start;gap:48px}
.pv-prox-tarjeta{flex:1 1 0;min-width:0;background:var(--p-card);border:1px solid var(--p-bd);border-radius:16px;padding:40px;box-shadow:0 12px 32px -8px hsl(151 40% 8% / .14)}
.pv-prox-tarjeta h1{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 14px;color:var(--p-pri)}
.pv-prox-ent{color:var(--p-mut);font-size:16px;margin:0 0 24px}
.pv-prox-ent b{color:var(--p-fg)}
.pv-prox-form{width:100%;text-align:left}
.pv-prox .pv-btn.p{background:var(--p-pri);color:hsl(0 0% 100%);box-shadow:none;border-radius:999px;min-height:48px}
.pv-prox .pv-campo input{background:hsl(0 0% 100%);border:1px solid var(--p-bd);color:var(--p-fg)}
.pv-prox .pv-campo input:focus{outline:2px solid var(--p-pri);outline-offset:1px}
.pv-prox-nota{font-size:13px;color:var(--p-mut);margin:14px 0 0}
.pv-prox-lado{flex:0 1 380px;min-width:0;padding-top:12px}
.pv-prox-lado h2{font-size:22px;font-weight:700;margin:0 0 14px;color:var(--p-pri)}
.pv-prox-lado ul{margin:0 0 20px;padding-left:20px;display:grid;gap:10px;color:var(--p-fg)}
.pv-prox-despues{background:var(--p-oro);color:var(--p-oro-ink);border-radius:12px;padding:14px 16px;margin:0}
.pv-prox-pie{background:var(--p-noche);color:hsl(150 20% 80%);flex:none;font-size:14px}
.pv-prox-pie .pv-prox-wrap{justify-content:space-between;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.pv-prox-pie nav{display:flex;gap:18px;flex-wrap:wrap}
.pv-prox-pie a{color:hsl(150 20% 85%);text-decoration:none}
@media (max-width:860px){
  .pv-prox-nav ul,.pv-prox-entrar{display:none}
  .pv-prox-nav .pv-prox-wrap{justify-content:flex-start}
  .pv-prox-grid{flex-direction:column;align-items:stretch;gap:28px}
  .pv-prox-tarjeta{padding:28px 22px}
  .pv-prox-tarjeta h1{font-size:32px}
  .pv-prox-lado{flex:none;padding-top:0}
}
.pv-hoja h1{font-size:22px;line-height:1.25;letter-spacing:-.01em}
.pv-hoja h2{font-size:15px;margin-top:6px}
.pv-hoja p{margin:0}
.pv-mut{color:var(--mut);font-size:12.5px}
/* la puerta de la prueba copia «Entrar» de la maqueta (.acc-c): tarjeta de 400 px, logo y botón verde; en el móvil, sin tarjeta */
.pv-entrada{max-width:400px;margin:48px auto;padding:28px 28px 24px;gap:12px;background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.pv-marca{display:flex;align-items:center;gap:4px;font-weight:800;font-size:16px;margin:0 0 4px -3px}
.pv-entrada h1{font-size:20px}
.pv-entrada .pv-campo input{border-color:var(--bd);border-radius:10px}
.pv-entrada .pv-btn.p{background:var(--pri);color:var(--on-pri)}
@media (max-width:520px){.pv-entrada{margin:0 auto;padding:24px 18px;background:none;box-shadow:none}}
.pv-etq{justify-self:start;font-size:11.5px;font-weight:700;color:var(--pv-acento-tinta);background:color-mix(in srgb,var(--pv-acento) 10%,transparent);border-radius:var(--r-pill);padding:3px 10px}
.pv-clave{border-left:4px solid var(--pv-acento);background:var(--card);border-radius:var(--r-m);padding:10px 12px;font-weight:600}
.pv-pasos{margin:0;padding-left:20px;display:grid;gap:6px}
.pv-form{display:grid;gap:12px}
.pv-campo{display:grid;gap:4px;font-weight:600;font-size:13px}
.pv-campo input,.pv-campo textarea{font:inherit;font-weight:400;min-height:44px;padding:10px 12px;border:1px solid var(--bd-2);border-radius:var(--r-s);background:var(--card);color:var(--fg);width:100%;box-sizing:border-box}
.pv-campo textarea{min-height:76px;resize:vertical}
.pv-err{color:var(--red);font-size:12.5px;font-weight:600}
.pv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;min-height:44px;padding:0 16px;border-radius:var(--r-m);border:1px solid transparent;cursor:pointer}
.pv-btn.p{background:var(--pv-acento);color:var(--pv-acento-fg)}
.pv-btn.s{background:var(--card);color:var(--fg);border-color:var(--bd-2)}
.pv-btn:disabled{opacity:.5;cursor:default}
.pv-btn.xl{min-height:50px;font-size:15px;width:100%}
.pv-guardado{font-size:12px;color:var(--mut)}
.pv-guardado.ko{color:var(--red)}

/* valoraciones: las opciones se reparten el ancho */
.pv-q{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--bd)}
.pv-q>b{font-size:13.5px;font-weight:600}
/* obligatoria sin contestar: marco rojo alrededor de toda la pregunta (el título de las de escribir va dentro de un label) */
.pv-q.falta{border:2px solid var(--red);border-radius:var(--r-m);padding:10px 12px;background:color-mix(in srgb,var(--red) 6%,transparent)}
.pv-q.falta b{color:var(--red)}
.pv-esc{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pv-opc{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px}
.pv-esc button,.pv-opc button{font:inherit;font-size:13px;min-height:40px;padding:4px 6px;border:1px solid var(--bd-2);border-radius:var(--r-s);background:var(--card);color:var(--fg);cursor:pointer}
.pv-esc button{font-weight:700;font-variant-numeric:tabular-nums}
.pv-esc button[aria-pressed=true],.pv-opc button[aria-pressed=true]{background:var(--pv-acento);border-color:var(--pv-acento);color:var(--pv-acento-fg)}
.pv-ext{display:flex;justify-content:space-between;font-size:11px;color:var(--mut)}

/* tarjeta sobre la app (facilidad) */
.pv-tarj{background:var(--card);border-radius:var(--r-l);padding:18px 16px;max-width:420px;width:100%;display:grid;gap:12px;box-shadow:0 16px 40px color-mix(in srgb,var(--fg) 25%,transparent)}
.pv-tarj h2{font-size:17px;margin:0}

/* ---------- Franja de tareas (arriba, fuera de la app) ---------- */
/* la maqueta de fondo no se ve hasta que la prueba se pone encima (generar.mjs añade pv-espera al cargar) */
html.pv-espera body{visibility:hidden}
/* web pública (/pruebame): fuera la cabecera de la maqueta y la columna «Ir a una pantalla» (uso interno) */
html.pv-publico header.ptop,html.pv-publico aside.sim{display:none!important}
html.pv-publico main.layout{display:block!important}
/* la franja y la app cambian de altura juntas, con la misma curva que el resto (no saltan de una tarea a otra) */
.pv-bar{transition:height 220ms cubic-bezier(.2,.8,.2,1)}
body.pv #frame{transition:top 220ms cubic-bezier(.2,.8,.2,1)}
.pv-bar{position:fixed;left:0;right:0;top:0;z-index:8000;background:var(--pv-acento);color:var(--pv-acento-fg);font:13px/1.35 var(--font);padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pv-bar .pv-tx{flex:1 1 280px;min-width:0;display:grid;gap:1px}
.pv-bar .pv-k{font-size:11px;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.04em}
.pv-bar b{font-size:14.5px}
.pv-bar .pv-sub{font-size:12.5px;color:var(--pv-acento-fg);margin:0}
.pv-bar .pv-nota{font-size:11.5px;font-weight:600;opacity:.85}
.pv-bar .pv-bt{display:flex;gap:6px;flex:0 0 auto}
.pv-bar .pv-btn{min-height:38px;padding:0 12px;font-size:13px}
.pv-bar .pv-btn.p{background:var(--pv-acento-fg);color:var(--pv-acento-tinta)}
.pv-bar .pv-btn.s{background:transparent;color:var(--pv-acento-fg);border-color:color-mix(in srgb,var(--pv-acento-fg) 55%,transparent)}
@keyframes pvLate{50%{box-shadow:inset 0 0 0 3px var(--pv-acento-fg)}}
.pv-bar b{display:inline-flex;align-items:center;gap:6px}
.pv-ti{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--pv-acento-fg) 20%,transparent)}
.pv-bar .pv-hecho{display:inline-flex;align-items:center;gap:5px;opacity:1;animation:pvHecho .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pvHecho{from{transform:scale(.6);opacity:0}}
.pv-bar .pv-pista{margin-top:3px;padding:5px 8px;border-radius:8px;background:color-mix(in srgb,var(--pv-acento-fg) 16%,transparent);font-weight:600}
.pv-bar .pv-guia{display:block;margin-top:3px;font-size:11.5px;opacity:.85}.pv-bar .pv-guia .i{display:inline-block;vertical-align:-2px;margin:0 1px}
.pv-bar .pv-pista{display:block}.pv-bar .pv-pista .i{display:inline-block;vertical-align:-2px;margin:0 1px}
/* s197: la barra usa la misma jerarquía que la guía: título firme, texto normal, controles con icono y etiquetas */
.pv-bar b{font-weight:600}
.pv-bar .pv-sub{margin-top:3px;line-height:1.5}
.pv-bar .pv-pista{margin-top:5px;padding:0;background:none;font-weight:400}
.pv-bar .pv-guia{margin-top:5px}
.pv-bar .pv-tag{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:2px 8px 2px 6px;border-radius:999px;background:hsl(280 70% 90%);color:hsl(280 45% 22%);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;vertical-align:1px}
.pv-bar .pv-tag .i{width:11px;height:11px}
/* píldoras: un solo lila claro en la barra y en la ventana «Cómo se hace» (mismo color para todas) */
/* píldoras: se ajustan al texto (altura según la línea, sin invadir las líneas de arriba y abajo) */
.pv-bar .g-ctl,.pv-pasos-flot .g-ctl{background:hsl(280 70% 90%);color:hsl(280 45% 22%);font-size:12px;height:auto;min-height:18px;padding:1px 7px;line-height:1.3;vertical-align:baseline;margin:0 1px}
.pv-bar .g-ctl .i{width:12px;height:12px}
.pv-asa{display:none}
@media (max-width:1023px){
  .pv-bar{padding:6px 10px 10px;gap:4px 8px;touch-action:none}
  .pv-asa{display:block;position:absolute;left:50%;bottom:3px;width:32px;height:3px;margin-left:-16px;border-radius:3px;background:color-mix(in srgb,var(--pv-acento-fg) 55%,transparent)}
  .pv-bar b{font-size:13.5px}.pv-bar .pv-sub{font-size:12px}
  .pv-bar .pv-bt{flex:1 1 100%;gap:6px}.pv-bar .pv-btn{min-height:32px;padding:0 10px;font-size:12px}
  .pv-bar.mini{padding:5px 10px 9px;flex-wrap:nowrap}
  .pv-bar.mini .pv-tx{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
  .pv-bar.mini .pv-sub,.pv-bar.mini .pv-bt{display:none}
  .pv-bar.mini .pv-bt:has(.pv-btn.p){display:flex;flex:none}/* rato libre: «Terminar» siempre a mano */
  .pv-bar.mini .pv-k{flex:none}
  .pv-bar.mini b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;font-size:13px}
  .pv-bar.mini .pv-ti{display:none}
}
@media (prefers-reduced-motion:reduce){.pv-bar .pv-hecho,.pv-bar.nueva{animation:none}}
/* altura FIJA de la barra: la app no se mueve al cambiar de tarea (antes medía entre 131 y 259 px y empujaba la cabecera).
   El título y los botones quedan a la vista; el texto del medio se desplaza si no cabe. */
.pv-bar{height:160px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);align-items:start}
.pv-bar .pv-tx{grid-column:1;grid-row:1;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:6px}
.pv-bar .pv-bt{grid-column:2;grid-row:1}
/* móvil, mini guía: la primera línea lleva la etiqueta («Tarea 1/18 · Básico») a la izquierda y los botones a la derecha;
   título y texto debajo. El aviso «Modo local» va abajo, sobre la barra de pestañas, para no tapar los botones. */
@media (max-width:1023px){
  .pv-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;row-gap:2px;column-gap:8px;align-items:center;padding:6px 12px 24px;touch-action:pan-y}
  .pv-bar .pv-tx{display:contents}
  .pv-bar .pv-k{grid-column:1;grid-row:1;font-size:10.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pv-bar .pv-bt{grid-column:2;grid-row:1;flex:none;gap:8px}
  .pv-bar b{grid-column:1 / -1;grid-row:2;font-size:13.5px;line-height:1.25}
  .pv-bar .pv-ti{display:none}
  .pv-bar .pv-sub{grid-column:1 / -1;grid-row:3;font-size:12px;line-height:1.35;margin-top:0}
  .pv-bar .pv-bt .pv-btn,.pv-bar .pv-bt .pv-pasos-ver{min-height:30px;padding:0 12px;font-size:12px}
  .pv-bar .pv-bt .pv-enlace{min-height:30px;padding:0 2px;font-size:12px}
  /* «Modo local»: con franja, en su esquina inferior derecha (la franja tiene una línea libre abajo); sin franja, abajo a la izquierda, sobre la barra de pestañas, para no tapar la guía */
  body.pv .pv-local{top:max(2px,calc(var(--pv-bar-h,0px) - 21px));right:12px;left:auto;bottom:auto;opacity:.9}
  body.pv:not(:has(#pv-bar:not([hidden]))) .pv-local{top:auto;right:auto;bottom:74px;left:10px}
}

/* ---------- Aviso de datos de ejemplo ---------- */
.pv-ejemplo{display:flex;align-items:center;gap:10px;margin:8px 0 4px;border:1px solid color-mix(in srgb,var(--pv-acento) 35%,transparent)!important;background:color-mix(in srgb,var(--pv-acento) 7%,var(--card))!important}
.pv-ejemplo .tx{flex:1;min-width:0;font-size:12.5px;line-height:1.45}
.pv-ejemplo-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--pv-acento) 14%,transparent);color:var(--pv-acento-tinta)}
.pv-ejemplo .btn{flex:none;min-height:34px}
#frame.mov .pv-ejemplo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px 10px}
#frame.mov .pv-ejemplo .btn{grid-column:2;justify-self:start}

/* ---------- Encuesta: resumen final ---------- */
.pv-resumen{display:grid;gap:0;width:100%;max-width:360px;border:1px solid var(--bd);border-radius:var(--r-m);background:var(--card);text-align:left}
.pv-kv{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid var(--bd);font-size:13px}
.pv-kv:first-child{border-top:0}.pv-kv span{color:var(--mut)}
.pv-local{position:fixed;right:4px;top:2px;z-index:9500;font:11px var(--font);background:var(--fg);color:var(--bg);border-radius:var(--r-pill);padding:2px 8px;pointer-events:none;opacity:.8}

/* ---------- Pantalla de inicio vacía ---------- */
.pv-vacio{display:grid;justify-items:center;text-align:center;gap:8px;padding:24px 16px!important;margin-top:8px}
.pv-vacio h2{font-size:17px}
.pv-vacio p{margin:0;color:var(--mut);max-width:420px}
.pv-vacio-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surf-2);color:var(--pri)}

/* ---------- Presentación de la mascota: paso animado ---------- */
.pesq.pv-evo{display:grid;justify-items:center;gap:4px;min-height:150px;align-content:center}
.pv-evo-st{display:grid;place-items:center;min-height:135px}
.pv-evo-lab{font-weight:700;font-size:13px;color:var(--mut)}
.pv-evo-lab small{font-weight:500;margin-left:4px}
/* móvil: la mascota cabe entera y centrada. El lienzo del tutor es de 112 px y en «Conoce a tu compañera» cada escena va en una columna de 112 px */
#frame.mov .wel .wpet .wpst{width:150px;height:auto;padding:0}
#frame.mov .wel .wpet .wpst canvas{width:140px!important;height:135px!important}
#frame.mov .wpobc{grid-template-columns:112px minmax(0,1fr);column-gap:12px}
#frame.mov .wpobc .pesq{width:193px;padding:10px 4px}
#frame.mov .wpobc .pesq.c .pst{width:80px}
#frame.mov .wpobc .pv-evo-st{min-height:0}
#frame.mov .wpobc .pv-evo-st canvas{width:180px!important;height:auto!important}
#frame.mov .wpobc .mph{width:150px;height:190px}
#frame.mov .wpobc .mph .pglo{width:56px;height:56px;right:10px;bottom:26px}

/* cabecera clara de la app: el logo lleva el nombre «Opoteca» en tinta (el de fondo oscuro sería blanco sobre blanco). En oscuro sigue el símbolo */
#frame:not(.dark) .mh .logo:not(.xl){--logo:url("/maqueta/_media/opoteca-tinta.svg");width:auto;height:30px;aspect-ratio:636.7/164.5;margin:0 8px 0 12px}

/* glosario de la intro: el mismo desplegable que la app (.xblk, .xh, .fold); aquí solo el contenido */
.pv-gl .xh b{font-size:15px}
.pv-gl .xh .xn{font-size:13px}
.pv-gl-lista{display:grid;gap:12px;padding:8px 2px 6px}
.pv-gl-fila{display:flex;gap:10px;align-items:flex-start}
.pv-gl-ic{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:1px;color:var(--mut)}
.pv-gl-fila b{font-size:14px}
.pv-gl-fila p{margin:2px 0 0;font-size:13.5px;line-height:1.4;color:var(--mut)}
/* resultados del test en el tutorial: la barra de acciones no tapa el texto de la pregunta, y «Compartir con tus alumnos» (de pago) no sale */
body.pv .racts{position:static}
@media (max-width:767px){body.pv .racts{margin-bottom:16px}} /* en móvil la barra acababa 7 px por debajo del borde al llegar al final */
body.pv .rexp [data-rx="compartir"]{display:none}

/* pantalla «Antes de empezar»: verde de la landing, no lila (el tutorial sigue lila en el resto) */
.pv-verde{--pv-acento:hsl(151 64% 15%);--pv-acento-tinta:hsl(151 64% 15%);--pv-acento-fg:hsl(0 0% 100%);padding-bottom:110px}
/* campo de la clave con su × para borrar de un toque */
.pv-clave-caja{position:relative;display:block;margin-top:6px}
.pv-clave-caja input{width:100%;padding-right:46px;box-sizing:border-box}
.pv-clave-caja.vacia .pv-limpiar{display:none}
.pv-limpiar{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--mut,hsl(153 10% 38%));font-size:22px;line-height:1;cursor:pointer}
.pv-limpiar:focus-visible{outline:2px solid var(--p-pri,hsl(151 64% 15%));outline-offset:1px}

/* ---------- Bienvenida con el logo (AppLoader.tsx + AppLoader.module.css) ---------- */
.pv-velo{position:fixed;inset:0;z-index:9998;background:var(--bg);pointer-events:none}
.pv-vuela{position:fixed;left:0;top:0;z-index:9999;display:block;overflow:visible;transform-origin:0 0;will-change:transform;pointer-events:none}
.pv-tinta{fill:var(--logo-tinta)}
.pv-papel{fill:var(--logo-papel)}
.pv-aroTrazo{fill:none;stroke:var(--logo-tinta);stroke-width:21;stroke-linecap:round;stroke-dasharray:351.23;stroke-dashoffset:351.23;transform:rotate(-90deg);transform-origin:121.94px 111.26px}
.pv-aro,.pv-punto,.pv-barra,.pv-pliegue,.pv-letra{opacity:0;transform-box:fill-box}
.pv-punto{transform-origin:center}
.pv-barra{transform-origin:left center}
.pv-pliegue{transform-origin:right bottom}
.pv-letra{transform-origin:center bottom}
html.pv-bienvenida-activa #frame .logo{visibility:hidden}
/* tutorial completado (24-09): el icono va dentro de la frase y la nota final no parece un enlace */
.pv-fin-tut p .i{display:inline-block;vertical-align:-2px;margin:0 1px}
.pv-fin-tut .from{color:var(--mut);font-weight:500}

/* ficha que señala la franja de tareas al empezar (25-09): como las de la guía, con flecha hacia arriba */
.pv-coach{position:fixed;z-index:8100;top:calc(var(--pv-bar-h, 64px) + 12px);left:16px;width:min(320px,calc(100vw - 32px));background:var(--card);color:var(--fg);border-radius:12px;box-shadow:var(--sh-4);padding:12px 14px;font:13px/1.45 var(--font);animation:pvCoach .45s cubic-bezier(.2,.8,.2,1) both}
.pv-coach::before{content:"";position:absolute;top:-7px;left:28px;width:14px;height:14px;background:var(--card);transform:rotate(45deg);border-radius:2px}
.pv-coach b{display:block;font-size:14px;margin-bottom:2px}.pv-coach p{margin:0 0 10px}.pv-coach .pv-btn{min-height:36px;padding:0 14px}
body:has(.pv-coach) #frame .petpop{display:none}
.pv-coach-velo{position:fixed;z-index:8050;left:0;right:0;bottom:0;top:var(--pv-bar-h, 64px);background:color-mix(in srgb,var(--fg) 45%,transparent);animation:pvVelo .3s ease both}
body:has(.pv-coach) .pv-bar{box-shadow:0 0 0 3px var(--card),0 10px 28px color-mix(in srgb,var(--fg) 35%,transparent);animation:pvResalta 1.6s ease-in-out 2}
@keyframes pvVelo{from{opacity:0}}@keyframes pvResalta{50%{filter:brightness(1.18)}} /* el saludo de la mascota espera a que se cierre la ficha */
@keyframes pvCoach{from{opacity:0;transform:translateY(10px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.pv-coach{animation:none}}
/* móvil: los pasos de «Cómo se hace» salen en una ventana flotante que se cierra sola (12 s) */
.pv-pasos-flot{position:fixed;left:10px;right:10px;top:calc(var(--pv-bar-h,0px) + 8px);z-index:8200;background:hsl(280 42% 52%);color:var(--pv-acento-fg);border-radius:14px;padding:10px 12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.25);font:13px/1.45 var(--font);max-height:55vh;overflow:auto;animation:pvPasos .3s ease-out}
.pv-pasos-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.pv-pasos-flot p{margin:6px 0 0;line-height:1.7}
.pv-pasos-flot .g-ctl{padding:2px 8px;min-height:20px}
/* cerrar: una × discreta, sin borde ni fondo, como las de las notificaciones */
/* «Ver pasos»: píldora lila, como los controles de los pasos (no es un botón de acción) */
/* en escritorio la píldora no necesita el aire del móvil: 36 px de alto (44 en móvil, por el dedo) */
@media (min-width:1024px){.pv-bar .pv-bt{align-items:center}.pv-bar .pv-bt .pv-pasos-ver,.pv-bar .pv-bt .pv-enlace{min-height:36px}}
.pv-bar .pv-pasos-ver{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:hsl(280 70% 90%);color:hsl(280 45% 22%);font:600 12.5px/1 var(--font);cursor:pointer}
/* «No lo encuentro»: enlace de texto, sin borde ni fondo */
.pv-bar .pv-enlace{all:unset;box-sizing:border-box;cursor:pointer;font:500 12.5px/1.2 var(--font);color:var(--pv-acento-fg);opacity:.85;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:6px 4px}
.pv-bar .pv-enlace:hover,.pv-bar .pv-enlace:focus-visible{opacity:1}
.pv-pasos-x{all:unset;cursor:pointer;opacity:.7;font-size:18px;line-height:1;padding:2px 6px;border-radius:6px}
.pv-pasos-x:hover,.pv-pasos-x:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.pv-bar .pv-aviso-pasos{font-size:11px;font-weight:500;opacity:.85;margin-top:2px}
/* el «?» redondo de la app (botón «Cómo se lee» de las gráficas de Progreso), en miniatura para la franja y los pasos */
.pv-ayuda{display:inline-grid;place-items:center;width:17px;height:17px;margin:0 2px;border-radius:50%;border:1px solid currentColor;font:800 11px/1 var(--font);vertical-align:-3px;opacity:.9}
@keyframes pvPasos{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.pv-pasos-flot{animation:none}}
/* escritorio: «Modo local» abajo a la derecha, dentro de la franja lila (si no hay franja, arriba a la derecha);
   el consejo de la tarea 2 es una píldora junto al título, así la franja no gana una fila */
@media (min-width:1024px){
  body.pv .pv-local{top:max(2px,calc(var(--pv-bar-h,0px) - 22px));right:6px;left:auto;bottom:auto}
}
/* resultado del test: al tocar un número, la pregunta sube sin tapar la fila de números (rev. 12-10) */
#frame [data-px-q]{scroll-margin-top:112px}
.pv-bar .pv-consejo{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:11.5px;font-weight:500;line-height:1.3;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 10px 3px 6px;white-space:nowrap;vertical-align:1px}
.pv-bar .pv-consejo .pv-tag{margin:0}
/* escritorio: la encuesta y la pantalla final se leen mejor: columna más ancha, letra más grande y más aire arriba.
   La pantalla final se centra en vertical. Solo afecta a esas dos pantallas (data-fase). */
@media (min-width:1024px){
  .pv-cap[data-fase="encuesta"] .pv-hoja{max-width:720px;padding:48px 24px 56px;font-size:15px}
  .pv-cap[data-fase="encuesta"] .pv-q>b,.pv-cap[data-fase="encuesta"] .pv-campo{font-size:16px}
  .pv-cap[data-fase="encuesta"] .pv-esc button,.pv-cap[data-fase="encuesta"] .pv-opc button{font-size:15px;min-height:44px}
  .pv-cap[data-fase="encuesta"] .pv-campo textarea{font-size:15px}
  .pv-cap[data-fase="encuesta"] .pv-ext{font-size:13px}
  .pv-cap[data-fase="fin"]{display:grid}
  .pv-cap[data-fase="fin"] .pv-hoja{margin:auto;max-width:600px;font-size:16px}
  .pv-cap[data-fase="fin"] .pv-hoja h1{font-size:30px}
  .pv-cap[data-fase="fin"] .pv-resumen{max-width:480px}
  .pv-cap[data-fase="fin"] .pv-kv{font-size:15px}
  .pv-cap[data-fase="fin"] .pv-btn{font-size:16px}
}
/* la barra morada: «Añadir» y los demás nombres de botones se leen como texto en negrita, no como botones */
.pv-bar .g-ctl{background:none;border:0;border-radius:0;color:inherit;padding:0;margin:0;font-weight:700}

/* ---------- Móvil (≤ 767 px): botones de al menos 40 px de alto, para el dedo ----------
 * Solo dentro de esta media query: en ordenador no cambia nada. Los botones con aspecto de botón suben su alto;
 * los enlaces de texto, chips e interruptores no cambian de aspecto: si la maqueta ya les da zona de toque de 44 px
 * (::after / ::before) se quedan así, y si no, se añade una zona invisible (::after) que no mueve nada. */
@media (max-width:767px){
  /* franja: «Ver pasos», «Entendido» de los carteles y «No lo encuentro» (enlace: solo zona de toque) */
  body.pv .pv-bar .pv-bt .pv-btn,body.pv .pv-bar .pv-bt .pv-pasos-ver{min-height:40px}
  body.pv .pv-coach .pv-btn{min-height:40px}
  body.pv .pv-bar .pv-bt .pv-enlace{position:relative}
  body.pv .pv-bar .pv-bt .pv-enlace::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  /* «×» de «Cómo se hace» y «×» de la guía: zona de 40 px sin cambiar el dibujo */
  body.pv .pv-pasos-x,body.pv .g-x{position:relative}
  body.pv .pv-pasos-x::after,body.pv .g-x::after{content:"";position:absolute;inset:-9px -8px}
  /* «Guía de esta pantalla» (bombilla) y «Bloques de estudio y música» (cabecera) */
  body.pv .ib.bulb,body.pv .tools{height:40px}
  /* botones con aspecto de botón (carteles, guía, Estudiar, Configuración, Mis archivos): al menos 40 px */
  body.pv .btn,body.pv .btn.t,body.pv .btn.p,body.pv .btn.s{min-height:40px;min-width:40px}
  /* la zona de toque invisible de .btn (::after de la maqueta, 44 px) sobresalía 2 px de un botón de 40: el botón tenía scroll (scrollHeight 42) */
  body.pv .btn::after{height:100%}
  body.pv .vtog button,body.pv .petlvl button,body.pv .tp button,body.pv .stp button{min-height:40px}
  body.pv .vtog button{height:40px}
  /* el «i» de los ajustes (Configuración): caja de 40 px con márgenes negativos (el sitio no cambia); sin fondo, no se ve distinto */
  body.pv .info{width:40px;height:40px;margin:-7px}
  /* botones con altura fija en línea (Eliminar de Configuración, Restaurar…): el estilo en línea gana al de la hoja, por eso !important */
  body.pv .btn[style*="min-height"]{min-height:40px!important}
}