/* =================================================================
   BLOG · LAS PIEZAS DE LA ENTRADA DE LOS PSICOTÉCNICOS
   Valores de material/mockup-blog-psicotecnicos.html (su CSS de
   «psicotécnicos», tal cual, bajo su contenedor; los colores, con las
   variables de 25-blog-bloques.css): la calculadora de aptitudes
   (opv/calc-aptitudes, .bl-apx) y el test con reloj (opv/test-reloj, .bl-pt),
   los dos sobre la caja .bl-ck del comprobador; y las variantes de la
   entrada: las dos partes (opv/tarjetas «partes», .bl-pp2), los tipos de
   ejercicio (opv/tarjetas «tipos», .bl-tps) y el ritmo (opv/cifras
   «ritmo», .bl-rit). Solo se carga si la entrada lleva alguno (head.php,
   $GLOBALS['opv_psicotecnicos'], includes/blog-psicotecnicos.php).
   CLS 0: las cajas que cambian tienen la altura mínima de la maqueta, en
   escritorio y en el móvil: el mensaje de la calculadora (.apm, 48px y
   72px) y, en el test, la pregunta (.ptq, 104px y 152px), las opciones
   (.pto, 104px y 224px) y la explicación (.ptf, 72px y 118px).
   ================================================================= */

/* Anclas #calculadora-aptitudes y #test-psicotecnico, por debajo de la cabecera fija (como #comprobador) */
.bl-apx,.bl-pt{scroll-margin-top:96px}

/* ---------- opv/calc-aptitudes ---------- */

.bl-apx .fi2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.bl-apx .fi2 label{display:block;min-width:0}
.bl-apx .fi2 label>span{display:block;margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;line-height:1.4;color:var(--bb-mut);text-transform:uppercase}
.bl-apx .yb{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;height:50px;border-radius:14px;border:1.5px solid var(--bb-line);background:#fff;overflow:hidden}
.bl-apx .yb button{margin:0;padding:0;border:0;background:#F6F8F7;font:800 20px/1 var(--bb-font);color:var(--bb-gd);cursor:pointer}
.bl-apx .yb input{width:100%;min-width:0;height:100%;margin:0;padding:0;border:0;background:#fff;text-align:center;font:800 20px var(--bb-font);color:var(--bb-ink);outline:none;box-shadow:none;font-variant-numeric:tabular-nums}
.bl-apx .yb:focus-within{border-color:var(--bb-g)}
.bl-apx .yb button:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:-3px}
:is(.bl-apx,.bl-pt) .res3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
:is(.bl-apx,.bl-pt) .res3>div{display:grid;place-items:center;padding:10px 4px;border-radius:13px;background:#fff;border:1px solid var(--bb-line)}
:is(.bl-apx,.bl-pt) .res3 b{font-size:22px;line-height:1.3;color:var(--bb-ink);font-variant-numeric:tabular-nums}
:is(.bl-apx,.bl-pt) .res3 span{font-size:11.5px;font-weight:700;line-height:1.4;color:var(--bb-mut)}
:is(.bl-apx,.bl-pt) .res3 .nt{background:var(--bb-metal-bg);border:0}
:is(.bl-apx,.bl-pt) .res3 .nt b,:is(.bl-apx,.bl-pt) .res3 .nt span{color:#fff}
.bl-body .bl-apx .apm{margin:12px 0 0;min-height:48px;font-size:14.5px;line-height:1.55;color:var(--bb-ink2)}
.bl-body .bl-apx .apm b.ok{color:var(--bb-gd)}
.bl-body .bl-apx .apm b.ko{color:#9B2C2C}

/* ---------- opv/test-reloj ---------- */

.bl-pt .pth{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.1em;line-height:1.4;color:var(--bb-mut);text-transform:uppercase}
.bl-pt .ptt{color:var(--bb-gd);font-variant-numeric:tabular-nums}
.bl-pt .ptb{height:6px;margin-top:6px;border-radius:6px;background:#E6EEEA;overflow:hidden}
.bl-pt .ptb i{display:block;height:100%;width:100%;background:var(--bb-metal-bg);transform-origin:left;transition:transform .2s linear}
.bl-pt .ptb i.lw{background:linear-gradient(90deg,#E0A93B,#E5484D)}
.bl-pt .ptq{margin-top:10px;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--bb-line);min-height:104px}
.bl-pt .ptq small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.4;color:var(--bb-gd);text-transform:uppercase}
.bl-pt .ptq b{display:block;margin-top:6px;font-size:17px;line-height:1.4;color:var(--bb-ink)}
.bl-pt .pto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;min-height:104px;align-content:start}
.bl-pt .pto button{min-height:48px;margin:0;padding:8px 12px;border-radius:13px;border:1.5px solid var(--bb-line);background:#fff;font:700 14px/1.35 var(--bb-font);color:var(--bb-ink2);text-align:left;cursor:pointer}
.bl-pt .pto button.ok{border-color:var(--bb-g);background:#F2FAF5;color:var(--bb-gd)}
.bl-pt .pto button.ko{border-color:#E7A3A3;background:#FDF5F5;color:#9B2C2C}
.bl-pt .pto button.dim{opacity:.45}
.bl-pt .pto button[disabled]{cursor:default}
.bl-pt .ptf{margin-top:10px;padding:12px 14px;border-radius:14px;background:#F6FBF8;border:1px solid var(--bb-line);font-size:14.5px;line-height:1.55;color:var(--bb-ink2);min-height:72px}
.bl-pt .ptf b{color:var(--bb-gd)}
.bl-pt .ptf .res3{margin-top:0}
.bl-pt .nx{display:flex;justify-content:flex-end;margin-top:10px}
.bl-pt .nx button{height:44px;margin:0;padding:0 18px;border:0;border-radius:12px;font:800 14px var(--bb-font);color:#fff;background:var(--bb-metal-bg);cursor:pointer}
.bl-pt .nx button[disabled]{opacity:.4;cursor:default}
.bl-pt :is(.pto,.nx) button:focus-visible{outline:3px solid rgba(30,158,90,.45);outline-offset:2px}

/* ---------- opv/tarjetas «partes»: las dos partes del psicotécnico ---------- */

.bl-pp2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 18px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-pp2>li{min-width:0;margin:0;padding:16px 18px;border:1px solid rgba(255,255,255,.95);border-radius:20px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh)}
.bl-pp2>li::before,.bl-pp2>li::marker{display:none;content:none}
.bl-pp2 small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.4;color:var(--bb-gd);text-transform:uppercase}
.bl-pp2 b{display:block;margin-top:4px;font-size:17px;line-height:1.35;color:var(--bb-ink)}
.bl-pp2 .big{display:block;margin-top:8px;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--bb-gd)}
.bl-pp2 .big em{font-style:normal;font-size:14px;font-weight:700;color:var(--bb-mut);letter-spacing:0}
.bl-body .bl-pp2 p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--bb-ink2)}

/* ---------- opv/tarjetas «tipos»: los tipos de ejercicio ---------- */

.bl-tps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 28px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-tps>li{min-width:0;margin:0;padding:14px;border:1px solid rgba(255,255,255,.95);border-radius:16px;background:var(--bb-glass-bg);box-shadow:var(--bb-glass-sh)}
.bl-tps>li::before,.bl-tps>li::marker{display:none;content:none}
.bl-tps b{display:block;font-size:15px;line-height:1.35;color:var(--bb-ink)}
.bl-tps span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--bb-ink2)}

/* ---------- opv/cifras «ritmo» ---------- */

.bl-rit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 16px;padding:0;list-style:none;font-family:var(--bb-font)}
.bl-rit--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-rit--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-rit>li{min-width:0;margin:0;padding:12px 10px;border-radius:14px;background:#F8FBF9;border:1px solid var(--bb-line);text-align:center}
.bl-rit>li::before,.bl-rit>li::marker{display:none;content:none}
.bl-rit b{display:block;font-size:17px;line-height:1.3;color:var(--bb-gd)}
.bl-rit span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--bb-mut)}

@media (max-width:1060px){.bl-apx,.bl-pt{scroll-margin-top:140px}}
@media (max-width:980px){.bl-apx,.bl-pt{scroll-margin-top:128px}}
@media (max-width:760px){
  .bl-rit,.bl-rit--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-pt .pto{grid-template-columns:minmax(0,1fr);min-height:224px}
  .bl-pt .ptq{min-height:152px}
  .bl-pt .ptf{min-height:118px}
  .bl-body .bl-apx .apm{min-height:72px}
  .bl-pp2{grid-template-columns:minmax(0,1fr)}
  .bl-tps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .bl-pt .ptb i{transition:none}
}