/* ===================== Premium =====================
   Usa las variables de estilos.css; la ventana reutiliza la de cuenta.css. */
.pm-h{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.pm-h small{font-size:.78rem; font-weight:600; color:var(--txt3); letter-spacing:0}
.pm-nota{color:var(--txt3); font-size:.82rem; line-height:1.55}
/* estilos.css solo pinta los campos de texto y las listas: estos son los de Premium */
.pm-campo{
  width:100%; padding:.7rem .85rem; border-radius:11px; border:1px solid var(--linea);
  background:var(--sup2); color:var(--txt); font:inherit; transition:border-color .15s, box-shadow .15s;
}
.pm-campo:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}

/* invitación */
.pm-oferta{border-style:dashed}
.pm-caja{width:min(100%,30rem)}
.pm-caja.pm-ancha{width:min(100%,40rem)}
.pm-lista{display:grid; gap:.55rem; margin:.4rem 0 1rem}
.pm-item{display:flex; gap:.7rem; align-items:flex-start; padding:.6rem .7rem; border:1px solid var(--linea); border-radius:var(--r2); background:var(--sup2)}
.pm-item > span{font-size:1.25rem; line-height:1.2}
.pm-item b{display:block; font-size:.93rem}
.pm-item small{display:block; color:var(--txt2); font-size:.82rem; line-height:1.45}
.pm-precio{font-size:1.35rem; font-weight:800; letter-spacing:-.02em; text-align:center; margin:.2rem 0 .8rem}

/* plan de estudio */
.pm-tareas{display:grid; gap:.6rem}
.pm-tarea{display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; flex-wrap:wrap}
.pm-tarea .pm-ico{font-size:1.5rem; line-height:1}
.pm-tarea b{display:block; font-size:1rem}
.pm-tarea span{color:var(--txt2); font-size:.88rem}
.pm-tarea.hecho{background:var(--ok-sup); border-color:color-mix(in srgb,var(--ok) 30%,var(--linea))}
.pm-semana{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:.5rem}
.pm-dia{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r2); padding:.55rem .6rem; text-align:center}
.pm-dia b{display:block; font-size:.8rem; text-transform:capitalize}
.pm-dia span{display:block; font-size:.76rem; color:var(--txt2); line-height:1.35; margin-top:.15rem}
.pm-dia.hoy{border-color:var(--acc); background:var(--acc-sup)}
.pm-dia.examen{border-color:#ca8a04; background:color-mix(in srgb,#ca8a04 12%,var(--sup))}
.pm-mini{padding:.3rem .65rem; font-size:.8rem; flex:none}
.linea-cat .pm-mini{margin-left:.2rem}
.pm-listo .linea-cat .val{width:7.4rem}

/* las más falladas */
.pm-fuego{background:var(--mal-sup); color:var(--mal); border-color:transparent}
.pill.pm-bien{background:var(--ok-sup); color:var(--ok); border-color:transparent}
.pill.pm-mal{background:var(--mal-sup); color:var(--mal); border-color:transparent}
.pm-det{margin-top:.6rem}
.pm-det summary{cursor:pointer; color:var(--acc); font-size:.88rem; font-weight:600}

/* pregúntale al libro */
.pm-busca{display:flex; gap:.5rem; padding:.6rem; margin-bottom:.7rem}
.pm-busca .pm-campo{flex:1; min-width:0}
.pm-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem}
.pm-chip{background:var(--sup); border:1px solid var(--linea); border-radius:999px; padding:.3rem .75rem; font-size:.82rem; color:var(--txt2)}
.pm-chip:hover{border-color:var(--acc); color:var(--acc)}
.pm-res{padding:.9rem 1rem; margin-bottom:.7rem}
.pm-res-cab{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.4rem}
.pm-res-cab b{font-size:.92rem}
.pm-res p{margin:.2rem 0 .5rem; font-size:.93rem; line-height:1.6}
.pm-res mark{background:color-mix(in srgb,#facc15 45%,transparent); color:inherit; border-radius:3px; padding:0 .1em}
.pm-abrir{font-size:.84rem; font-weight:600}
.pm-libro-btn{display:inline-block; margin-top:.6rem; background:var(--sup); border:1px solid var(--linea); border-radius:999px;
  padding:.3rem .8rem; font-size:.82rem; font-weight:600; color:var(--acc)}
.pm-libro-btn:hover{border-color:var(--acc)}
@media (max-width:560px){
  .linea-cat{flex-wrap:wrap}
  .linea-cat .val{width:auto}
}

/* avisos: inicio de la app, menú de licencia y vencimiento del plan mensual */
.pm-pill{display:inline-block; margin-left:.45rem; padding:.08rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700;
  background:color-mix(in srgb,#ca8a04 16%,var(--sup)); color:#a16207; vertical-align:middle; letter-spacing:0}
[data-tema="oscuro"] .pm-pill{color:#facc15}
/* dentro de las tarjetas del menú, «.opcion span» la volvía bloque y se estiraba a todo el ancho */
.opcion .pm-pill{display:inline-block; width:auto}
.pm-aviso{display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; margin:0 0 1.1rem; padding:.85rem 1rem;
  background:var(--sup); border:1px dashed color-mix(in srgb,#ca8a04 55%,var(--linea)); border-radius:var(--r2); box-shadow:var(--s1);
  font-size:.9rem; color:var(--txt2); line-height:1.45; transition:border-color .15s, transform .15s}
.pm-aviso:hover{transform:translateY(-1px); border-style:solid}
.pm-aviso b{color:var(--txt); margin-right:.25rem}
.pm-aviso-ico{font-size:1.4rem; line-height:1}
.pm-aviso-ver{flex:none; font-weight:700; color:var(--acc); font-size:.86rem}
.pm-vence{border-color:var(--warn); background:var(--warn-sup); margin-top:.2rem}
@media (max-width:560px){ .pm-aviso{flex-wrap:wrap} .pm-aviso-ver{width:100%; text-align:right} }

/* ---------- práctica del psicotécnico ---------- */
.ps-grid{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.ps-tarjeta{display:flex; flex-direction:column; gap:.5rem; padding:1rem 1.1rem}
.ps-tarjeta p{margin:0; font-size:.9rem; color:var(--txt2); line-height:1.5}
.ps-tarjeta .btn{margin-top:auto; align-self:flex-start}
.ps-tarjeta-cab{display:flex; gap:.7rem; align-items:center}
.ps-tarjeta-cab .em{flex:none; width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:12px; font-size:1.3rem;
  background:color-mix(in srgb,#ca8a04 13%,transparent)}
.ps-tarjeta-cab b{display:block; font-size:1.02rem; letter-spacing:-.01em}
.ps-tarjeta-cab span{display:block; color:var(--txt3); font-size:.8rem}
.ps-norma{font-size:.84rem !important; color:var(--txt) !important; font-weight:600}
.ps-ultimo{font-size:.84rem !important}
.ps-ok{color:var(--ok)}
.ps-mal{color:var(--mal)}
.ps-consejos{margin:0; padding-left:1.2rem; display:grid; gap:.4rem; font-size:.92rem; color:var(--txt2)}
.ps-instr{padding:1.1rem 1.2rem}
.ps-instr p{margin:0 0 .8rem; line-height:1.55}
kbd{display:inline-block; min-width:1.6em; padding:.05rem .4rem; border:1px solid var(--linea2); border-bottom-width:2px; border-radius:6px;
  background:var(--sup2); font:600 .8rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center}

/* la zona de cada prueba: sin selección de texto, sin zoom por doble toque y sin desplazar la página */
.ps-cab{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .7rem}
.ps-cab b{font-size:1.05rem}
.ps-cab span{color:var(--txt2); font-size:.88rem; font-variant-numeric:tabular-nums}
.ps-zona{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:1rem; border-radius:var(--r); border:1px solid var(--linea); background:var(--sup); box-shadow:var(--s2);
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.ps-msg{margin:0; min-height:1.5em; font-size:1.02rem; font-weight:650; color:var(--txt2); text-align:center; font-variant-numeric:tabular-nums}
.ps-zona canvas{display:block; touch-action:none; border-radius:12px}

/* pedalera: una carretera que avanza, un PARE que aparece y los dos pedales
   (freno a la izquierda y acelerador a la derecha, como en un auto) */
.ps-escena{position:relative; width:100%; border-radius:12px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ps-escena canvas{border-radius:0}
.ps-pare{position:absolute; left:70%; top:8%; width:min(21%,6.5rem); display:flex; flex-direction:column; align-items:center; pointer-events:none}
.ps-pare[hidden]{display:none}
.ps-pare svg{display:block; width:100%; height:auto; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.ps-pare i{display:block; width:7%; min-width:4px; height:3.2rem; margin-top:-2px; background:linear-gradient(90deg,#9ca3af,#6b7280)}
.ps-pedales{display:flex; align-items:flex-end; justify-content:center; gap:min(8vw,2.4rem); width:100%; padding:.4rem 0 .2rem}
.ps-pedal{display:flex; align-items:flex-end; justify-content:center; padding-bottom:.7rem; cursor:pointer;
  border-radius:12px 12px 16px 16px; background:repeating-linear-gradient(0deg,#4b5563 0 6px,#374151 6px 12px);
  border:3px solid #1f2937; color:#f9fafb; font-weight:750; font-size:.88rem; letter-spacing:.02em;
  box-shadow:0 8px 0 #111827; transition:transform .05s, box-shadow .05s}
.ps-pedal span{background:rgba(17,24,39,.75); padding:.15rem .5rem; border-radius:6px; pointer-events:none}
.ps-freno{width:min(38vw,9.5rem); height:min(30vw,7.2rem)}
.ps-acel{width:min(24vw,5.6rem); height:min(46vw,11rem)}
.ps-pedal.pisado{transform:translateY(6px); box-shadow:0 2px 0 #111827; border-color:var(--acc)}

/* palancas («tijeras»): el circuito arriba y las dos palancas abajo */
.ps-palancas{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%}
.ps-palanca{position:relative; border-radius:999px; background:var(--sup2); border:1px solid var(--linea2); cursor:grab; touch-action:none}
.ps-palanca.tomada{cursor:grabbing; border-color:var(--acc)}
.ps-ph{flex:1; height:4.2rem; max-width:22rem}
.ps-pv{flex:none; width:4.2rem; height:9.5rem}
.ps-mango{position:absolute; width:2.6rem; height:2.6rem; border-radius:50%; background:#374151; border:3px solid #111827;
  box-shadow:0 3px 8px rgba(0,0,0,.35); pointer-events:none}
.ps-ph .ps-mango{top:50%; transform:translate(-50%,-50%)}
.ps-pv .ps-mango{left:50%; transform:translate(-50%,-50%)}
.ps-palanca.tomada .ps-mango{background:var(--acc)}
.ps-guia{position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-size:.7rem; font-weight:650; color:var(--txt3); line-height:1.1; pointer-events:none}

/* disco de Lahy */
.ps-zona-lahy{align-items:center}