/* ═══════════════════════════════════════════════════════════════════════════ TalentPact · componentes Piezas comunes del sistema de diseño (ver tokens.css). Solo usan tokens. Las pinta assets/js/app/18-interfaz.js (tpPasos, tpBarraNota, tpAnillo…). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Base: foco visible, cifras alineadas, fondo y texto con tokens ── */ body{background:var(--c-superficie);color:var(--c-texto)} :focus-visible{outline:2px solid var(--c-foco);outline-offset:2px;border-radius:4px} button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none} .score-num,.dsc-val,.ex-timer-clock,.adm-kpi strong,.ob-pct,.tp-num,.dash-table td,.adm-tabla td{font-variant-numeric:tabular-nums} ::selection{background:var(--emerald-100);color:var(--c-texto)} /* Objetivos táctiles de 44 px en pantallas táctiles */ @media (pointer:coarse){ .btn,.dash-tab,.filter-btn,.auth-tab,.nav-access-btn,.tp-tema-btn,.adm-nav,.rpl-cat-btn{min-height:44px} } /* ── Selector de tema ── */ .tp-tema-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-width:36px;padding:0 10px;border:1px solid var(--c-borde);border-radius:var(--radius);background:var(--c-superficie);color:var(--c-texto-2);font:500 var(--fs-peq) var(--font-sans);cursor:pointer;transition:background var(--dur-corta),color var(--dur-corta),border-color var(--dur-corta)} .tp-tema-btn:hover{background:var(--c-superficie-2);color:var(--c-texto);border-color:var(--c-borde-fuerte)} .tp-tema-btn .ico{width:16px;height:16px} .tp-tema-btn .tp-tema-txt{display:none} @media (max-width:760px){.nav-auth .tp-tema-btn{height:40px;min-width:40px}} /* ── Chip de estado: punto de color + texto (nunca solo color) ── */ .tp-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--fs-micro);font-weight:600;line-height:1.5;border:1px solid var(--c-borde);background:var(--c-superficie-2);color:var(--c-texto-2);white-space:nowrap} .tp-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .tp-chip-ok{background:var(--c-ok-suave);border-color:var(--emerald-200);color:var(--emerald-700)} .tp-chip-aviso{background:var(--c-aviso-suave);border-color:var(--amber-200);color:var(--amber-700)} .tp-chip-error{background:var(--c-error-suave);border-color:var(--red-200);color:var(--red-700)} .tp-chip-info{background:var(--c-info-suave);border-color:var(--blue-200);color:var(--blue-700)} /* ── Pasos (stepper) ── */ .tp-pasos{display:flex;list-style:none;margin:0;padding:0;counter-reset:paso} .tp-paso{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;padding:0 4px} .tp-paso::before{content:'';position:absolute;top:13px;left:calc(-50% + 16px);right:calc(50% + 16px);height:2px;background:var(--c-borde)} .tp-paso:first-child::before{display:none} .tp-paso.hecho::before,.tp-paso.actual::before{background:var(--emerald-400)} .tp-paso-punto{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-micro);font-weight:700;border:2px solid var(--c-borde-fuerte);background:var(--c-superficie);color:var(--c-texto-3);position:relative;z-index:1;font-variant-numeric:tabular-nums} .tp-paso-punto .ico{width:14px;height:14px} .tp-paso.hecho .tp-paso-punto{background:var(--c-marca);border-color:var(--c-marca);color:var(--c-sobre-tinta)} .tp-paso.actual .tp-paso-punto{border-color:var(--c-marca);color:var(--c-marca);box-shadow:0 0 0 4px var(--c-marca-suave)} .tp-paso-txt{font-size:var(--fs-micro);color:var(--c-texto-3);line-height:1.35} .tp-paso.hecho .tp-paso-txt{color:var(--c-texto-2)} .tp-paso.actual .tp-paso-txt{color:var(--c-texto);font-weight:600} @media (max-width:640px){ .tp-pasos{flex-direction:column;gap:0} .tp-paso{flex-direction:row;text-align:left;align-items:center;gap:12px;padding:6px 0} .tp-paso::before{top:auto;bottom:calc(50% + 14px);left:13px;right:auto;width:2px;height:calc(100% - 28px)} } /* ── Barra de nota con marca del mínimo ── */ .tp-nota{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center} .tp-nota-nombre{font-size:var(--fs-peq);font-weight:600;color:var(--c-texto)} .tp-nota-valor{font-size:var(--fs-peq);font-weight:700;color:var(--c-texto);font-variant-numeric:tabular-nums} .tp-nota-pista{grid-column:1/-1;position:relative;height:10px;border-radius:var(--radius-full);background:var(--c-superficie-2)} .tp-nota-relleno{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--c-marca);transition:width var(--dur-media) var(--curva)} .tp-nota.bajo .tp-nota-relleno{background:var(--c-aviso)} .tp-nota-min{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--c-texto-3)} .tp-nota-coment{grid-column:1/-1;font-size:var(--fs-peq);color:var(--c-texto-2);line-height:1.5} .tp-notas{display:flex;flex-direction:column;gap:16px} /* ── Anillo de nota ── */ .tp-anillo{position:relative;width:112px;height:112px;flex-shrink:0} .tp-anillo svg{width:100%;height:100%;transform:rotate(-90deg)} .tp-anillo-pista{fill:none;stroke:var(--c-superficie-2);stroke-width:10} .tp-anillo-arco{fill:none;stroke:var(--c-marca);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset var(--dur-media) var(--curva)} .tp-anillo.bajo .tp-anillo-arco{stroke:var(--c-aviso)} .tp-anillo-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .tp-anillo-num{font-size:var(--fs-t1);font-weight:700;letter-spacing:-.03em;color:var(--c-texto);line-height:1;font-variant-numeric:tabular-nums} .tp-anillo-lbl{font-size:var(--fs-micro);color:var(--c-texto-3);margin-top:4px} /* ── Esqueleto de carga ── */ .tp-esqueleto{display:flex;flex-direction:column;gap:10px;padding:4px 0} .tp-esqueleto i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--c-superficie-2) 0%,var(--c-borde) 50%,var(--c-superficie-2) 100%);background-size:200% 100%;animation:tpBrillo 1.4s ease-in-out infinite} .tp-esqueleto i:nth-child(3n+2){width:82%}.tp-esqueleto i:nth-child(3n){width:64%} @keyframes tpBrillo{0%{background-position:100% 0}100%{background-position:-100% 0}} @media (prefers-reduced-motion:reduce){.tp-esqueleto i{animation:none}} /* ── Tarjeta "Lo siguiente" ── */ .tp-siguiente{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1.5px solid var(--c-marca);border-radius:var(--radius-lg);background:var(--c-marca-suave);margin-bottom:20px} .tp-siguiente-ico{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--c-superficie);color:var(--c-marca);flex-shrink:0;border:1px solid var(--emerald-200)} .tp-siguiente-ico .ico{width:20px;height:20px} .tp-siguiente-txt{flex:1;min-width:0} .tp-siguiente-eti{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-marca)} .tp-siguiente-tit{font-size:var(--fs-cuerpo);font-weight:600;color:var(--c-texto);margin-top:2px} .tp-siguiente-sub{font-size:var(--fs-peq);color:var(--c-texto-2);margin-top:2px} @media (max-width:640px){.tp-siguiente{flex-wrap:wrap}.tp-siguiente .btn{width:100%;justify-content:center}} /* ── Progreso del perfil: pasos en lugar de etiquetas sueltas ── */ #onboardingBar .ob-steps{display:block;margin-top:16px} #onboardingBar .ob-track{display:none} /* ── Ejercicio en curso ── */ #jobModal .ex-timer-bar{position:sticky;top:0;z-index:3;background:var(--c-superficie);padding-top:8px;padding-bottom:8px;margin-top:-8px} .tp-resp-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:var(--fs-micro);color:var(--c-texto-3)} .tp-resp-guardado{display:inline-flex;align-items:center;gap:6px} .tp-resp-guardado .ico{width:14px;height:14px;color:var(--c-ok)} .tp-resp-guardado.no{visibility:hidden} .tp-resp-palabras{font-variant-numeric:tabular-nums} /* Durante un ejercicio, nada que distraiga: el chat de ayuda se oculta. */ body.tp-exam .ai-chat-fab,body.tp-exam .chat-fab,body.tp-exam #aiChatWidget{display:none!important} /* ── Resultado de un ejercicio ── */ .tp-res{display:flex;flex-direction:column;gap:16px} .tp-res-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .tp-res-tit{font-size:var(--fs-t3);font-weight:700;letter-spacing:-.02em;color:var(--c-texto)} .tp-res-sub{font-size:var(--fs-peq);color:var(--c-texto-3);margin-top:2px} .tp-res-chips{display:flex;gap:8px;flex-wrap:wrap} .tp-res-cuerpo{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px} .tp-res-nota{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px;border:1px solid var(--c-borde);border-radius:var(--radius-lg);background:var(--c-superficie)} .tp-res-dato{display:flex;justify-content:space-between;width:100%;font-size:var(--fs-peq);color:var(--c-texto-2);border-top:1px solid var(--c-borde);padding-top:10px} .tp-res-dato b{color:var(--c-texto);font-variant-numeric:tabular-nums} .tp-res-crit{padding:20px;border:1px solid var(--c-borde);border-radius:var(--radius-lg);background:var(--c-superficie)} .tp-res-crit h4,.tp-res-par h4{font-size:var(--fs-peq);font-weight:700;color:var(--c-texto);margin-bottom:14px} .tp-res-pares{display:grid;grid-template-columns:1fr 1fr;gap:16px} .tp-res-par{padding:16px 18px;border-radius:var(--radius-lg);border:1px solid var(--emerald-200);background:var(--c-ok-suave)} .tp-res-par.mejora{border-color:var(--amber-200);background:var(--c-aviso-suave)} .tp-res-par h4{margin-bottom:6px;display:flex;align-items:center;gap:6px} .tp-res-par p{font-size:var(--fs-peq);color:var(--c-texto-2);line-height:1.55} .tp-res-global{font-size:var(--fs-peq);color:var(--c-texto-2);line-height:1.6;padding:14px 16px;border-left:3px solid var(--c-marca);background:var(--c-superficie-2);border-radius:0 var(--radius) var(--radius) 0} .tp-res-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:4px} .tp-res-aviso{font-size:var(--fs-micro);color:var(--c-texto-3);display:inline-flex;align-items:center;gap:6px;max-width:420px} .tp-res-aviso .ico{width:14px;height:14px;flex-shrink:0} .tp-res-acciones{display:flex;gap:10px;flex-wrap:wrap} @media (max-width:700px){ .tp-res-cuerpo,.tp-res-pares{grid-template-columns:1fr} .tp-res-acciones{width:100%}.tp-res-acciones .btn{flex:1;justify-content:center} } /* ── Resultado final de un reto ── */ .tp-final{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px} .tp-final-tit{font-size:var(--fs-t2);font-weight:700;letter-spacing:-.02em;color:var(--c-texto)} .tp-final-sub{font-size:var(--fs-peq);color:var(--c-texto-2);max-width:460px} .tp-final-ejs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:100%;max-width:560px;text-align:left} .tp-final-ej{padding:12px 14px;border:1px solid var(--c-borde);border-radius:var(--radius-lg);background:var(--c-superficie)} .tp-final-ej span{display:block;font-size:var(--fs-micro);color:var(--c-texto-3)} .tp-final-ej b{font-size:var(--fs-t3);font-variant-numeric:tabular-nums;color:var(--c-texto)} .tp-final-skill{width:100%;max-width:560px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--c-ok-suave);border:1px solid var(--emerald-200);color:var(--emerald-700);font-size:var(--fs-peq);text-align:left} .tp-final-skill .ico{width:18px;height:18px;flex-shrink:0} /* ── Encaje en el pool de empresa ── */ .tp-encaje{display:flex;align-items:center;gap:8px;min-width:120px} .tp-encaje-pista{flex:1;height:8px;border-radius:var(--radius-full);background:var(--c-superficie-2);overflow:hidden} .tp-encaje-relleno{display:block;height:100%;border-radius:inherit;background:var(--c-marca)} .tp-encaje b{font-size:var(--fs-peq);font-variant-numeric:tabular-nums;color:var(--c-texto);min-width:34px;text-align:right} /* Solo para lectores de pantalla */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .offer-cand-card .tp-encaje{max-width:240px;margin:4px 0 6px} .btn-unlock:disabled{opacity:.55;cursor:not-allowed} .tp-empty .ico{display:block;margin:0 auto 8px;width:24px;height:24px;color:var(--c-texto-3)} /* Barra superior de los paneles en móvil: sin nombre ni selector de tema (el tema se cambia desde la web), para que no se salga de la pantalla. */ @media (max-width:520px){ .dash-user #candName,.dash-user #empName,.dash-user .tp-tema-btn{display:none} .dash-user{gap:6px;min-width:0} .dash-user .btn-ghost{padding-left:8px;padding-right:8px} } /* Tablas anchas (pool: 8 columnas): se desplazan dentro de su caja a cualquier ancho. */ .tp-tabla-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* Tablas de los paneles en móvil: se desplazan dentro de su caja, la página no. */ @media (max-width:760px){ .dash-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .dash-table th,.dash-table td{white-space:nowrap} } /* ═══ Portada ═══ */ .hero.hero-2col{flex-direction:row;align-items:center;justify-content:center;gap:clamp(40px,6vw,88px);text-align:left;min-height:92vh;padding:128px clamp(24px,6vw,96px) 88px} .hero-rejilla{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--c-borde) 1px,transparent 1px),linear-gradient(90deg,var(--c-borde) 1px,transparent 1px);background-size:56px 56px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,rgba(0,0,0,1) 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,rgba(0,0,0,1) 0%,transparent 75%)} .hero-txt{position:relative;z-index:1;flex:1 1 520px;max-width:600px} .hero-2col h1{font-size:clamp(2.5rem,4.4vw,3.9rem);max-width:none;line-height:1.06} .hero-2col .hero-sub{margin:0 0 32px;max-width:520px;color:var(--c-texto-2)} .hero-2col .hero-cta{justify-content:flex-start} .hero-2col .hero-proof{margin-top:36px;justify-content:flex-start} .hero-visual{position:relative;z-index:1;flex:0 1 430px;display:flex;flex-direction:column;gap:14px} .hero-visual::before{content:'';position:absolute;left:38px;top:36px;bottom:36px;width:2px;background:linear-gradient(var(--emerald-200),var(--c-borde));z-index:-1} .hv-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--c-superficie);border:1px solid var(--c-borde);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);transition:transform var(--dur-media) var(--curva),border-color var(--dur-media)} .hv-card:nth-child(2){margin-left:28px}.hv-card:nth-child(3){margin-left:8px}.hv-card:nth-child(4){margin-left:36px} .hv-card:hover{transform:translateY(-2px);border-color:var(--emerald-200)} .hv-card .tp-mono{width:40px;height:40px} .hv-ico{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--c-marca-suave);color:var(--c-marca);border:1px solid var(--emerald-100)} .hv-ico .ico{width:20px;height:20px} .hv-txt{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start} .hv-eti{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-marca)} .hv-tit{font-size:var(--fs-cuerpo);font-weight:700;color:var(--c-texto);letter-spacing:-.01em} .hv-sub{font-size:var(--fs-peq);color:var(--c-texto-2);line-height:1.5} .hv-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0} .hv-chips .tp-chip::before{display:none} .hv-mono{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--c-texto-2);background:var(--c-superficie-2);border:1px solid var(--c-borde);border-radius:6px;padding:2px 8px;margin:2px 0 4px} .hv-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:180px;margin-top:4px} .hv-seg i{height:6px;border-radius:var(--radius-full);background:var(--emerald-200)} .hv-seg i:first-child{background:var(--c-marca)} @media (max-width:1024px){ .hero.hero-2col{flex-direction:column;text-align:center;padding-top:112px} .hero-2col .hero-sub{margin:0 auto 28px} .hero-2col .hero-cta,.hero-2col .hero-proof{justify-content:center} .hero-visual{width:100%;max-width:460px;flex:none;text-align:left} } @media (max-width:640px){ .hv-card:nth-child(n){margin-left:0} .hero-visual::before{display:none} .hero-2col h1{font-size:var(--fs-t1)} } @media (prefers-reduced-motion:reduce){.hv-card{transition:none}.hv-card:hover{transform:none}} /* ═══ Cómo funciona: tarjetas con icono ═══ */ .features-grid{gap:16px;background:none;border:0;border-radius:0;overflow:visible} .features-grid .feature-card{padding:24px;border-radius:var(--radius-xl);transition:border-color var(--dur-media),box-shadow var(--dur-media),transform var(--dur-media) var(--curva)} .features-grid .feature-card:hover{border-color:var(--emerald-200);box-shadow:var(--shadow-md);transform:translateY(-2px)} .feature-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .features-grid .feature-icon{width:44px;height:44px;margin:0;display:inline-flex;align-items:center;justify-content:center;background:var(--c-marca-suave);color:var(--c-marca);border:1px solid var(--emerald-100);border-radius:12px} .features-grid .feature-icon .ico{width:22px;height:22px} .feature-num{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--c-texto-3);font-weight:500} .features-grid .feature-card h3{font-size:var(--fs-dest);margin-bottom:6px} @media (prefers-reduced-motion:reduce){.features-grid .feature-card:hover{transform:none}} /* ═══ Estado vacío grande (ofertas de la portada) ═══ */ .tp-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;border:1px dashed var(--c-borde-fuerte);border-radius:var(--radius-xl);background:var(--c-superficie)} .tp-vacio-ico{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--c-marca-suave);color:var(--c-marca);border:1px solid var(--emerald-100);margin-bottom:6px} .tp-vacio-ico .ico{width:24px;height:24px} .tp-vacio.error .tp-vacio-ico{background:var(--c-aviso-suave);color:var(--amber-600);border-color:var(--amber-200)} .tp-vacio h3{font-size:var(--fs-t3);font-weight:700;color:var(--c-texto);letter-spacing:-.02em} .tp-vacio p{font-size:var(--fs-cuerpo);color:var(--c-texto-2);max-width:460px} .tp-vacio-acc{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px} .tp-cargando-ofertas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .tp-cargando-ofertas>div{padding:20px;border:1px solid var(--c-borde);border-radius:var(--radius-lg);background:var(--c-superficie)} /* Ofertas del candidato: skills pedidas, con las que ya tiene marcadas */ .tp-match-skills{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px} .tp-skill-req{font-size:var(--fs-micro)} .job-tag.tp-skill-req.ok{border-color:var(--emerald-200)!important;background:var(--c-ok-suave)!important;color:var(--emerald-700)!important} .job-tag.tp-skill-req.falta{border-color:var(--amber-200)!important;background:var(--c-aviso-suave)!important;color:var(--amber-700)!important} .tp-va-medio{vertical-align:middle;margin-left:4px} /* ═══ Tarjeta de oferta ═══ */ .tp-oferta{display:flex;flex-direction:column;gap:10px} .tp-oferta:focus-visible{outline:2px solid var(--c-foco);outline-offset:2px} .tp-oferta h3{font-size:var(--fs-dest);letter-spacing:-.01em;margin:0} .tp-oferta .job-desc{margin:0} .tp-oferta .job-tags{margin:0} .tp-oferta-emp{display:flex;align-items:center;gap:8px;font-size:var(--fs-peq);color:var(--c-texto-2)} .tp-oferta-sector{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-marca)} .tp-oferta-pie{margin-top:auto;padding-top:10px;border-top:1px solid var(--c-borde);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tp-oferta-req{font-size:var(--fs-micro);font-weight:600;color:var(--c-texto-3);display:inline-flex;align-items:center;gap:4px} .tp-oferta-req.ok{color:var(--c-marca)} .tp-mono-mini{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-micro);font-weight:700;flex-shrink:0} /* Tintes de los logotipos de empresa (iniciales) */ .tp-tinte-0{background:var(--emerald-50);color:var(--emerald-700)} .tp-tinte-1{background:var(--blue-50);color:var(--blue-700)} .tp-tinte-2{background:var(--amber-100);color:var(--amber-700)} .tp-tinte-3{background:var(--violet-100);color:var(--violet-500)} .tp-tinte-4{background:var(--red-100);color:var(--red-700)} .tp-tinte-5{background:var(--slate-100);color:var(--slate-700)} /* Diálogo sencillo (motivo de descarte) */ .tp-dialogo{margin:auto;inset:0;max-height:calc(100vh - 32px);overflow:auto;border:1px solid var(--c-borde);border-radius:var(--radius-xl);background:var(--c-superficie);color:var(--c-texto);padding:24px;width:min(440px,92vw);box-shadow:var(--shadow-xl)} .tp-dialogo::backdrop{background:var(--c-velo)} .tp-dialogo h3{font-size:var(--fs-t3);margin-bottom:6px} .tp-dialogo p{font-size:var(--fs-peq);color:var(--c-texto-2);margin-bottom:12px} .tp-dialogo textarea{width:100%;padding:10px 12px;border:1px solid var(--c-borde-fuerte);border-radius:var(--radius);background:var(--c-superficie);color:var(--c-texto);font:inherit;resize:vertical} .tp-dialogo-acc{display:flex;justify-content:flex-end;gap:8px;margin-top:14px} /* El atributo hidden manda sobre cualquier display de componente */ [hidden]{display:none!important} .tp-final-skill.u-d-block{display:block} /* Contenedor del perfil de skills: bloque normal; las cuadrículas van dentro. */ .sp-skills{display:block} /* ─── Oferta en tres pasos y requisitos de skill (20-requisitos.js) ───────── Como LinkedIn: un paso a la vez, sugerencias en vez de listas enteras y lo opcional plegado. */ .pj-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)} .pj-cab .pj-title{margin-bottom:0} .pj-oculto{display:none!important} .pj-paso{display:none} .pj-paso.activo{display:block} .pj-ayuda{font-size:var(--fs-micro);color:var(--c-texto-3);margin:0 0 var(--sp-3)} .pj-enlace{background:none;border:0;padding:0;color:var(--c-marca);font:inherit;font-size:var(--fs-micro);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .pj-enlace:hover{color:var(--c-marca-hover)} .pj-auto{border-color:var(--c-info)!important;background:var(--c-info-suave)!important} .pj-doc{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);border:1px dashed var(--c-borde-fuerte);border-radius:var(--radius);background:var(--c-superficie-2)} .pj-doc-txt{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-peq);color:var(--c-texto);min-width:0;flex:1 1 260px} .pj-doc-txt span{font-size:var(--fs-micro);color:var(--c-texto-3)} .pj-doc-acc{display:flex;align-items:center;gap:var(--sp-3)} .pj-doc-btn{cursor:pointer} .pj-doc-btn:focus-within{outline:2px solid var(--c-foco);outline-offset:2px} .pj-doc-pegar{display:none;width:100%;flex-direction:column;gap:var(--sp-2)} .pj-doc-pegar.abierto{display:flex} .pj-doc-pegar textarea{width:100%;min-height:96px;resize:vertical;padding:var(--sp-2) var(--sp-3);border:1.5px solid var(--c-borde);border-radius:var(--radius);background:var(--c-superficie);color:var(--c-texto);font:inherit;font-size:var(--fs-peq)} .pj-doc-pegar .btn{align-self:flex-start} #pjDocEstado{width:100%} #pjDocEstado:empty{display:none} .pj-doc-estado{font-size:var(--fs-micro);line-height:1.5;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--c-borde);background:var(--c-superficie);color:var(--c-texto-2)} .pj-doc-estado ul{margin:var(--sp-1) 0 0;padding-left:var(--sp-4)} .pj-doc-estado.ok{border-color:var(--emerald-200);background:var(--c-ok-suave);color:var(--emerald-700)} .pj-doc-estado.error{border-color:var(--red-200);background:var(--c-error-suave);color:var(--red-700)} .pj-doc-estado.cargando{border-color:var(--blue-200);background:var(--c-info-suave);color:var(--blue-700)} [aria-disabled="true"]{pointer-events:none;opacity:.55} .pj-req-vacio{font-size:var(--fs-micro);color:var(--c-texto-3);padding:var(--sp-3);border:1px dashed var(--c-borde);border-radius:var(--radius);margin-bottom:var(--sp-3)} .pj-req-cab{font-size:var(--fs-micro);font-weight:600;color:var(--c-texto-2);margin-bottom:var(--sp-2)} .pj-req-lista{list-style:none;margin:0 0 var(--sp-3);padding:0;border:1px solid var(--c-borde);border-radius:var(--radius);overflow:hidden} .pj-req-fila{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--c-borde);background:var(--c-superficie)} .pj-req-fila:first-child{border-top:0} .pj-req-fila.imp{box-shadow:inset 3px 0 0 var(--c-marca)} .pj-req-nombre{display:flex;flex-direction:column;gap:2px;min-width:0} .pj-req-nombre b{font-size:var(--fs-peq);color:var(--c-texto)} .pj-req-pilar{font-size:var(--fs-micro);color:var(--c-texto-3)} .pj-req-motivo{font-size:var(--fs-micro);color:var(--c-info);font-style:italic} .pj-req-peso{display:inline-flex;border:1px solid var(--c-borde-fuerte);border-radius:var(--radius-full);overflow:hidden} .pj-req-peso button{border:0;background:var(--c-superficie);color:var(--c-texto-2);font:inherit;font-size:var(--fs-micro);font-weight:600;padding:5px 10px;cursor:pointer} .pj-req-peso button+button{border-left:1px solid var(--c-borde-fuerte)} .pj-req-peso button.activo{background:var(--c-marca);color:var(--c-sobre-tinta)} .pj-req-peso button:not(.activo):hover{background:var(--c-superficie-2)} .pj-req-min{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-micro);color:var(--c-texto-3)} .pj-req-min select{font:inherit;font-size:var(--fs-micro);padding:4px 6px;border:1.5px solid var(--c-borde);border-radius:6px;background:var(--c-superficie);color:var(--c-texto)} .pj-req-quitar{border:0;background:none;color:var(--c-texto-3);font-size:var(--fs-dest);line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px} .pj-req-quitar:hover{color:var(--c-error);background:var(--c-error-suave)} .pj-req-aviso{font-size:var(--fs-micro);line-height:1.5;color:var(--amber-700);background:var(--c-aviso-suave);border:1px solid var(--amber-200);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)} .pj-sug-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-micro);font-weight:600;color:var(--c-texto-2);margin-bottom:var(--sp-2)} .pj-sug-lista,.pj-req-skills-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)} #pjRequiredSkills:empty{display:none} .pj-sug{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--c-borde-fuerte);background:var(--c-superficie);color:var(--c-texto);border-radius:var(--radius-full);padding:5px 12px;font:inherit;font-size:var(--fs-micro);font-weight:600;cursor:pointer} .pj-sug span{font-weight:500;color:var(--c-texto-3)} .pj-sug:hover{border-color:var(--c-marca);background:var(--c-marca-suave)} .pj-sug-sub{font-size:var(--fs-micro);font-weight:500;color:var(--c-texto-3);margin:0 0 var(--sp-2)} /* ─── Estructura de retos (23-clasificacion.js) ───────────────────────────── Dos bloques (Hard / Soft) → tarjetas del primer nivel (sector o dimensión) → chips del segundo (área o enfoque). */ .tp-bloques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin:0 0 var(--sp-4)} .tp-bloque{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--c-borde);background:var(--c-superficie);color:var(--c-texto);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);font:inherit;cursor:pointer} .tp-bloque b{font-size:var(--fs-dest);font-weight:700} .tp-bloque span{font-size:var(--fs-peq);color:var(--c-texto-2)} .tp-bloque small{font-size:var(--fs-micro);color:var(--c-texto-3);margin-top:var(--sp-1)} .tp-bloque:hover{border-color:var(--c-marca)} .tp-bloque.activo{border-color:var(--c-marca);background:var(--c-marca-suave);box-shadow:inset 0 0 0 1px var(--c-marca)} .tp-nivel-titulo{font-size:var(--fs-micro);font-weight:600;color:var(--c-texto-3);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--sp-2)} .tp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--sp-2);margin:0 0 var(--sp-4)} .tp-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--c-borde);background:var(--c-superficie);color:var(--c-texto);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);font:inherit;cursor:pointer;min-height:64px} .tp-tile i{font-style:normal;font-size:var(--fs-micro);font-weight:700;color:var(--c-marca)} .tp-tile b{font-size:var(--fs-peq);font-weight:600;line-height:1.3} .tp-tile span{font-size:var(--fs-micro);color:var(--c-texto-3)} .tp-tile:hover{border-color:var(--c-marca)} .tp-tile.activo{border-color:var(--c-marca);background:var(--c-marca-suave)} .tp-tile.vacio b{color:var(--c-texto-2)} .tp-subfiltros{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3)} .tp-subfiltro{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--c-borde);background:var(--c-superficie-2);color:var(--c-texto-2);border-radius:var(--radius-full);padding:4px 10px;font:inherit;font-size:var(--fs-micro);font-weight:500;cursor:pointer} .tp-subfiltro span{color:var(--c-texto-3);font-weight:600} .tp-subfiltro:hover:not(:disabled){border-color:var(--c-marca);color:var(--c-texto)} .tp-subfiltro.activo{background:var(--c-marca-suave);border-color:var(--c-marca);color:var(--c-texto)} .tp-subfiltro:disabled{opacity:.55;cursor:default} .tp-nivel-def{font-size:var(--fs-micro);line-height:1.5;color:var(--c-texto-2);margin:-4px 0 var(--sp-3)} .tp-cat-barra{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-3)} .tp-cat-barra .filters-row{margin-bottom:0} .tp-migas{font-size:var(--fs-peq);font-weight:600;color:var(--c-texto)} .tp-migas span{color:var(--c-texto-3);font-weight:400;margin:0 2px} .rpl-sidebar-top .tp-nivel-titulo{margin:var(--sp-2) 0 var(--sp-1)} .rpl-sidebar-top .tp-subfiltros{margin:0} .cex-comp{font-size:var(--fs-micro);color:var(--c-texto-3);line-height:1.5;margin:-4px 0 var(--sp-2)} @media (max-width:480px){.tp-bloques{grid-template-columns:1fr}.tp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}} .pj-plegable{border:1px solid var(--c-borde);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-3);background:var(--c-superficie)} .pj-plegable summary{cursor:pointer;font-size:var(--fs-peq);font-weight:600;color:var(--c-texto);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)} .pj-plegable[open] summary{margin-bottom:var(--sp-2)} .pj-plegable input,.pj-plegable textarea{width:100%;box-sizing:border-box;margin-bottom:var(--sp-2)} .pj-cuenta{font-size:var(--fs-micro);font-weight:500;color:var(--c-texto-3)} .pj-nav{display:flex;justify-content:flex-end;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap} .pj-nav #pjAtras{margin-right:auto} /* Encaje por requisitos en la lista de candidatos de una oferta */ .tp-req-resumen{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-1) 0} .tp-req-estados{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-1)} .tp-req-est{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-micro);padding:2px 8px;border-radius:var(--radius-full);border:1px solid var(--c-borde);color:var(--c-texto-2);background:var(--c-superficie)} .tp-req-est b{font-weight:700} .tp-req-est.imp{font-weight:600} .tp-req-est.e-cumple{border-color:var(--emerald-200);color:var(--emerald-700);background:var(--c-ok-suave)} .tp-req-est.e-por_debajo{border-color:var(--amber-200);color:var(--amber-700);background:var(--c-aviso-suave)} .tp-req-est.e-pendiente{border-style:dashed} .tp-skill-req.imp{font-weight:700} @media (max-width:640px){ .pj-req-fila{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nombre quitar" "peso peso" "min min"} .pj-req-nombre{grid-area:nombre}.pj-req-quitar{grid-area:quitar}.pj-req-peso{grid-area:peso;justify-self:start}.pj-req-min{grid-area:min} .pj-nav .btn{flex:1 1 auto} .pj-nav #pjAtras{margin-right:0} } /* ─── Verificación de empresa (21-empresa.js) ─────────────────────────────── */ .tp-sello-emp{display:inline-flex;align-items:center;gap:4px;margin-left:var(--sp-2);padding:1px 8px;border-radius:var(--radius-full);font-size:var(--fs-micro);font-weight:600;color:var(--emerald-700);background:var(--c-ok-suave);border:1px solid var(--emerald-200);white-space:nowrap} .tp-sello-emp svg{width:12px;height:12px} .tp-verif{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);border-radius:var(--radius-lg);border:1px solid var(--c-borde);background:var(--c-superficie)} .tp-verif.ok{border-color:var(--emerald-200);background:var(--c-ok-suave)} .tp-verif.pendiente{border-color:var(--amber-200);background:var(--c-aviso-suave)} .tp-verif-ico{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c-sobre-tinta);background:var(--c-ok)} .tp-verif.pendiente .tp-verif-ico{background:var(--c-aviso)} .tp-verif-ico svg{width:16px;height:16px} .tp-verif-txt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--fs-peq);color:var(--c-texto)} .tp-verif-txt>span{font-size:var(--fs-micro);color:var(--c-texto-2)} .tp-verif-acc{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2);font-size:var(--fs-micro);color:var(--c-texto-2)} .tp-verif-acc span{flex:1 1 220px} .tp-dialogo-ancho{width:min(560px,94vw)} .tp-dialogo-ancho .pj-grid{margin-bottom:var(--sp-2)} .tp-dialogo-msg{font-size:var(--fs-micro);color:var(--c-texto-2);min-height:1.2em;margin-bottom:var(--sp-2)} .auth-social-nota{font-size:var(--fs-micro);color:var(--c-texto-3);margin:var(--sp-2) 0 0;line-height:1.5} @media (max-width:640px){.tp-dialogo-ancho .pj-grid{grid-template-columns:1fr}} /* En la tarjeta de oferta el sello baja de línea si no cabe junto al nombre. */ .tp-oferta-emp{flex-wrap:wrap;row-gap:var(--sp-1)} .tp-oferta-emp .tp-sello-emp{margin-left:0} /* ─── Reto oficial: comprobación previa (22-reto-oficial.js) ──────────────── */ .tp-bloqueada{pointer-events:none;opacity:.45} .tp-pre{max-width:640px;margin:0 auto} .tp-pre h3{font-size:var(--fs-t3);margin:0 0 var(--sp-2);color:var(--c-texto)} .tp-pre-sub{font-size:var(--fs-peq);color:var(--c-texto-2);margin:0 0 var(--sp-3);line-height:1.55} .tp-pre-pasos{list-style:none;margin:var(--sp-3) 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)} .tp-pre-pasos>li{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-borde);border-radius:var(--radius-lg);background:var(--c-superficie)} .tp-pre-pasos>li.hecho{border-color:var(--emerald-200);background:var(--c-ok-suave)} .tp-pre-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro);font-weight:700;color:var(--c-sobre-tinta);background:var(--c-marca)} .tp-pre-c{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;font-size:var(--fs-peq);color:var(--c-texto)} .tp-pre-c>span,.tp-pre-c ul{font-size:var(--fs-micro);color:var(--c-texto-2);line-height:1.55;margin:0} .tp-pre-c ul{padding-left:var(--sp-4)} .tp-pre-c .btn{align-self:flex-start} .tp-pre-video{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .tp-pre-video video{width:180px;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--slate-900);transform:scaleX(-1)} .tp-pre-video span{font-size:var(--fs-micro);font-weight:600} .tp-pre-video span.bien{color:var(--emerald-700)} .tp-pre-video span.mal{color:var(--amber-700)} .tp-pre-check{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-micro);color:var(--c-texto-2);line-height:1.55;cursor:pointer} .tp-pre-check input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--c-marca)} .tp-pre-acc{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3)} .tp-pre-msg:empty{display:none} .tp-pre-aviso{font-size:var(--fs-micro);line-height:1.5;color:var(--amber-700);background:var(--c-aviso-suave);border:1px solid var(--amber-200);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-2)} .tp-pre-form{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-borde);border-radius:var(--radius-lg);background:var(--c-superficie-2)} .tp-pre-form textarea{width:100%;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);border:1.5px solid var(--c-borde);border-radius:var(--radius);background:var(--c-superficie);color:var(--c-texto);font:inherit;font-size:var(--fs-peq);resize:vertical} .tp-pre-form .tp-pre-msg{font-size:var(--fs-micro);color:var(--amber-700);margin-top:var(--sp-2)} .tp-pre-ok{margin-top:var(--sp-3);font-size:var(--fs-peq);color:var(--emerald-700);background:var(--c-ok-suave);border:1px solid var(--emerald-200);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3)} @media (max-width:640px){.tp-pre-pasos>li{padding:var(--sp-3)}.tp-pre-acc{flex-direction:column-reverse;align-items:stretch}} .tp-pre-acc .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} /* ─── Sello público del SkillPass: un extra pequeño al final, no lo principal ─ */ #spSelloLinea:empty{display:none} .sp-sello{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--c-borde);font-size:var(--fs-micro);color:var(--c-texto-3);line-height:1.6} .sp-sello summary{cursor:pointer;color:var(--c-texto-2)} .sp-sello code{font-size:var(--fs-micro);word-break:break-all} /* ─── Bandas de nota: cuatro segmentos + nombre (Insuficiente → Muy bueno) ─ */ .tp-banda{display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;font-size:var(--fs-micro);color:var(--c-texto-2)} .tp-banda-seg{display:inline-flex;gap:2px} .tp-banda-seg i{width:10px;height:6px;border-radius:2px;background:var(--c-borde)} .tp-banda-txt{font-weight:600} .tp-banda-txt b{font-weight:500;color:var(--c-texto-3);margin-left:2px} .tp-banda-insuficiente .tp-banda-seg i:nth-child(-n+1){background:var(--red-400)} .tp-banda-aceptable .tp-banda-seg i:nth-child(-n+2){background:var(--amber-500)} .tp-banda-bueno .tp-banda-seg i:nth-child(-n+3){background:var(--emerald-500)} .tp-banda-muy_bueno .tp-banda-seg i:nth-child(n){background:var(--emerald-700)} .tp-skill-banda{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--c-borde)} .tp-skill-banda:last-child{border-bottom:0} .tp-skill-banda-nombre{font-size:var(--fs-peq);color:var(--c-texto);min-width:0;overflow-wrap:anywhere} .tp-bloques-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)} .tp-bloque-skills{border:1px solid var(--c-borde);border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4);background:var(--c-superficie)} .tp-bloque-skills h4{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-texto-2);margin:0 0 var(--sp-2)} .tp-bloque-vacio{font-size:var(--fs-micro);color:var(--c-texto-3);margin:0} .tp-cond-chip.tp-chip-banda.tp-banda-insuficiente{border-color:var(--red-200);background:var(--red-50);color:var(--red-700)} .tp-cond-chip.tp-chip-banda.tp-banda-aceptable{border-color:var(--amber-200);background:var(--amber-50);color:var(--amber-700)} .tp-cond-chip.tp-chip-banda.tp-banda-bueno,.tp-cond-chip.tp-chip-banda.tp-banda-muy_bueno{border-color:var(--emerald-200);background:var(--emerald-50);color:var(--emerald-700)} .tp-cond-chip.tp-chip-banda.tp-banda-muy_bueno{font-weight:700} /* ─── Verificación de un SkillPass: cinco estados ─ */ .vf-estado{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);border:1px solid var(--c-borde);font-size:var(--fs-peq);line-height:1.55;margin-bottom:var(--sp-4)} .vf-ok{background:var(--emerald-50);border-color:var(--emerald-200);color:var(--emerald-800)} .vf-aviso{background:var(--amber-50);border-color:var(--amber-200);color:var(--amber-800)} .vf-error{background:var(--red-50);border-color:var(--red-200);color:var(--red-700)} .vf-neutro{background:var(--c-superficie-2);color:var(--c-texto-2)} .vf-meta{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-1) var(--sp-4);font-size:var(--fs-peq);margin:0 0 var(--sp-4)} .vf-meta dt{color:var(--c-texto-3)} .vf-meta dd{margin:0;color:var(--c-texto);min-width:0;overflow-wrap:anywhere} .vf-meta code,.vf-datos code,.vf-detalles code{font-size:var(--fs-micro);word-break:break-all} .vf-skill-meta{display:block;font-size:var(--fs-micro);color:var(--c-texto-3)} .vf-linea{font-size:var(--fs-peq);color:var(--c-texto-2);margin:var(--sp-4) 0 0} .vf-detalles{margin-top:var(--sp-4);font-size:var(--fs-peq);color:var(--c-texto-2);border-top:1px solid var(--c-borde);padding-top:var(--sp-3)} .vf-detalles summary{cursor:pointer;color:var(--c-texto)} .vf-detalles-cuerpo{padding-top:var(--sp-2);display:grid;gap:var(--sp-2)} .vf-paso{margin:0;line-height:1.55} .vf-datos{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-1) var(--sp-3);margin:0} .vf-datos dt{color:var(--c-texto-3)} .vf-datos dd{margin:0;min-width:0} .vf-subir{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-peq);color:var(--c-texto-2);cursor:pointer} .vf-subir input{max-width:220px;font-size:var(--fs-micro)} @media (max-width:480px){.vf-meta,.vf-datos{grid-template-columns:1fr}.vf-meta dt,.vf-datos dt{margin-top:var(--sp-2)}} .sp-verify-out:not([hidden]){display:block;padding:0;background:none;border:0} .sp-verify-out .vf-meta dd,.sp-verify-out .vf-linea,.sp-verify-out .vf-detalles{color:var(--slate-200)} .sp-verify-out .vf-meta dt{color:var(--slate-400)} .sp-verify-out .vf-detalles summary{color:var(--c-sobre-tinta)} /* ─── verify.html ─ */ body.vf-pagina{background:var(--c-fondo);color:var(--c-texto);margin:0} .vf-envoltorio{max-width:760px;margin:0 auto;padding:var(--sp-12) var(--sp-4) var(--sp-16)} .vf-marca{display:inline-block;font-size:var(--fs-t3);text-decoration:none;color:var(--c-texto);margin-bottom:var(--sp-8)} .vf-envoltorio h1{font-size:var(--fs-t2);margin:0 0 var(--sp-2)} .vf-intro{color:var(--c-texto-2);font-size:var(--fs-cuerpo);line-height:1.6;margin:0 0 var(--sp-6)} .vf-tarjeta{background:var(--c-superficie);border:1px solid var(--c-borde);border-radius:var(--radius-lg);padding:var(--sp-4)} .vf-tarjeta label{display:block;font-size:var(--fs-peq);font-weight:600;margin-bottom:var(--sp-2)} .vf-tarjeta textarea{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-peq);padding:var(--sp-3);border:1px solid var(--c-borde);border-radius:var(--radius);background:var(--c-superficie);color:var(--c-texto);resize:vertical} .vf-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-3)} .vf-resultado{margin-top:var(--sp-6)} .vf-pie{margin-top:var(--sp-8);font-size:var(--fs-micro);color:var(--c-texto-3);line-height:1.6} .vf-pie a{color:var(--c-texto-2)} .sp-pass .tp-banda-txt{color:var(--emerald-100)} .sp-pass .tp-banda-seg i{background:var(--slate-600)} /* ─── Paneles con menú lateral (candidato y empresa) ─ */ /* Ancho completo: barra a la izquierda, contenido que usa el resto de la pantalla. */ .dash-body.dash-con-menu{ max-width:none;width:100%;margin:0;padding:0; display:grid;grid-template-columns:240px minmax(0,1fr);gap:0; align-items:stretch;min-height:calc(100vh - 56px);box-sizing:border-box } .dash-menu{ /* Anula el