/* ========================================================== ENTREVISTAS: simulador, en directo y laboratorio de CV ========================================================== */ .ent-caja{background:#fff; border:1px solid var(--ap-linea); border-radius:20px; box-shadow:var(--ap-sombra); padding:22px} .ent-setup{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start} .ent-setup h3{margin:0 0 6px; font-size:18px; letter-spacing:-.02em} .ent-setup p{margin:0 0 14px; color:var(--ap-tinta-2); font-size:14px; line-height:1.5} .ent-campo{display:flex; flex-direction:column; gap:6px; margin-bottom:12px} .ent-campo > span{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ap-tinta-2)} #app-main .ent-campo select,#app-main .ent-campo input,#app-main .ent-campo textarea{width:100%; border:1px solid var(--ap-linea); border-radius:12px; padding:11px 12px; font:inherit; font-size:14.5px; background:var(--ap-bg)} .ent-lista-modos{display:grid; grid-template-columns:1fr 1fr; gap:8px} .ent-modo{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; border:1px solid var(--ap-linea); cursor:pointer; background:var(--ap-bg); transition:border-color .14s, background .14s} .ent-modo input{margin-top:3px; accent-color:var(--ap-acento)} .ent-modo strong{display:block; font-size:14px} .ent-modo small{font-size:12px; color:var(--ap-tinta-2); line-height:1.4} .ent-modo:has(input:checked){border-color:var(--ap-acento); background:var(--ap-acento-claro)} .ent-hero{position:relative; border-radius:18px; overflow:hidden; background:linear-gradient(160deg,#0b3d2e,#05664a 60%,#1fa06e); color:#fff; padding:26px 24px; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end} .ent-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 15%, rgba(255,255,255,.25), transparent 40%), radial-gradient(circle at 20% 90%, rgba(58,123,255,.35), transparent 45%)} .ent-hero h4{position:relative; margin:0 0 6px; font-size:20px; letter-spacing:-.02em} .ent-hero p{position:relative; margin:0; font-size:14px; opacity:.9; line-height:1.5} .ent-hero ul{position:relative; margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:13.5px} .ent-hero li{display:flex; gap:8px; align-items:center} .ent-hero li i{font-size:16px; color:#bfe9d6} /* ---------- escenario del simulador ---------- */ .sim-escenario{display:grid; grid-template-columns:1fr 320px; gap:16px} .sim-sala{background:#0f1512; border-radius:22px; padding:18px; color:#fff; display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.6)} .sim-sala::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% -10%, rgba(31,160,110,.35), transparent 55%); pointer-events:none} .sim-cab{position:relative; display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08)} .sim-cab .sim-inicial{width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,#1fa06e,#3a7bff); display:grid; place-items:center; font-weight:800; font-size:18px} .sim-cab strong{display:block; font-size:15px}.sim-cab small{font-size:12.5px; opacity:.7} .sim-rec{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.06em; color:#ff6b6b} .sim-rec::before{content:""; width:8px; height:8px; border-radius:50%; background:#ff6b6b; animation:sim-late 1.4s infinite} @keyframes sim-late{50%{opacity:.3}} .sim-progreso{position:relative; display:flex; align-items:center; gap:5px; margin:12px 0} .sim-progreso i{flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.14)} .sim-progreso i.hecha{background:#1fa06e}.sim-progreso i.actual{background:#fff} .sim-progreso span{font-size:12px; opacity:.7; margin-left:6px; font-variant-numeric:tabular-nums} .sim-mensajes{position:relative; flex:1; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:6px 2px} .sim-msg{display:flex; gap:10px; max-width:92%} .sim-msg.candidato{align-self:flex-end; flex-direction:column; align-items:flex-end} .sim-av{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:20px; flex:none} .sim-burbuja{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:16px 16px 16px 4px; padding:12px 14px; font-size:15px; line-height:1.5} .sim-msg.candidato .sim-burbuja{background:#1fa06e; border-color:transparent; border-radius:16px 16px 4px 16px; color:#fff} .sim-feedback{margin-top:6px; font-size:12.5px; color:#cfe6da; background:rgba(255,255,255,.06); border-radius:10px; padding:8px 10px; max-width:420px} .sim-feedback.bien{border-left:3px solid #1fa06e}.sim-feedback.regular{border-left:3px solid #f3b53f} .sim-feedback b{color:#fff} .sim-estado{position:relative; font-size:12.5px; opacity:.75; min-height:18px; margin:6px 0} .sim-estado i{animation:pn-gira 1s linear infinite; display:inline-block} .sim-pista{position:relative; display:flex; gap:8px; align-items:flex-start; font-size:12.5px; background:rgba(243,181,63,.12); border:1px solid rgba(243,181,63,.35); color:#ffe2a8; border-radius:10px; padding:8px 10px; margin-bottom:8px} .sim-input{position:relative; display:flex; gap:8px; align-items:flex-end} .sim-input textarea{flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:14px; padding:12px 14px; font:inherit; font-size:14.5px; resize:none; min-height:54px; outline:0} .sim-input textarea:focus{border-color:#1fa06e} .sim-input textarea::placeholder{color:rgba(255,255,255,.45)} .sim-btn{border:0; border-radius:14px; height:46px; padding:0 16px; font:inherit; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:#fff; background:#1fa06e} .sim-btn.gris{background:rgba(255,255,255,.1)} .sim-btn.mic{width:46px; padding:0; background:rgba(255,255,255,.1); font-size:20px} .sim-btn.mic.on{background:#d64545; animation:sim-late 1.2s infinite} .sim-btn:active{transform:scale(.97)} .sim-lado{display:flex; flex-direction:column; gap:12px} .sim-lado .pn-card h3{font-size:13px} .sim-lado ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ap-tinta-2); line-height:1.5} .sim-evaluacion{grid-column:1/-1} .sim-ev-cab{display:flex; gap:20px; align-items:center; margin-bottom:16px} .sim-anillo{--p:70; width:110px; height:110px; border-radius:50%; flex:none; display:grid; place-items:center; background:conic-gradient(var(--ap-acento) calc(var(--p) * 1%), #e7ece9 0); position:relative} .sim-anillo::before{content:""; position:absolute; inset:9px; border-radius:50%; background:#fff} .sim-anillo b{position:relative; font-size:34px; font-weight:800; letter-spacing:-.03em}.sim-anillo small{position:relative; font-size:12px; color:var(--ap-tinta-2); margin-top:22px} .sim-ev-cab h3{margin:0 0 4px; font-size:22px; letter-spacing:-.02em}.sim-ev-cab p{margin:0; color:var(--ap-tinta-2); font-size:14px; line-height:1.5} .sim-cols{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px} .sim-col{border-radius:14px; padding:14px 16px; background:var(--ap-bg)} .sim-col.bien{background:var(--ap-acento-claro)}.sim-col.mejorar{background:#fff5e6} .sim-col h4{margin:0 0 8px; font-size:13px; display:flex; gap:6px; align-items:center} .sim-col ul{margin:0; padding-left:18px; font-size:13.5px; line-height:1.5} .sim-modelo{border:1px solid var(--ap-linea); border-radius:14px; padding:12px 14px; margin-bottom:10px} .sim-modelo strong{display:flex; gap:6px; align-items:center; font-size:13.5px; margin-bottom:4px} .sim-modelo p{margin:0; font-size:13.5px; color:var(--ap-tinta-2); line-height:1.5} /* ---------- en directo ---------- */ .live-grid{display:grid; grid-template-columns:380px 1fr; gap:16px; align-items:start} .live-setup.plegado .ent-campo,.live-setup.plegado .ent-lista-modos,.live-setup.plegado > p{display:none} .live-controles{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px} .live-estado{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ap-tinta-2); margin-top:12px} .live-punto{width:9px; height:9px; border-radius:50%; background:#c5cdc8; display:inline-block} .live-punto.on{background:#d64545; box-shadow:0 0 0 4px rgba(214,69,69,.18); animation:sim-late 1.2s infinite} .live-ondas{display:flex; gap:3px; align-items:flex-end; height:26px; margin:10px 0 4px} .live-ondas i{width:4px; height:6px; border-radius:2px; background:#cfd7d2; transition:height .2s} .live-ondas.on i{background:var(--ap-acento); animation:live-onda 1s ease-in-out infinite} .live-ondas.on i:nth-child(2n){animation-delay:.15s}.live-ondas.on i:nth-child(3n){animation-delay:.3s}.live-ondas.on i:nth-child(5n){animation-delay:.45s} @keyframes live-onda{0%,100%{height:6px}50%{height:24px}} .live-transcript{margin-top:10px; background:var(--ap-bg); border-radius:12px; padding:10px 12px; font-size:13px; color:var(--ap-tinta-2); line-height:1.5; max-height:180px; overflow:auto} .live-transcript .interim{color:var(--ap-tinta-3)} .live-pistas{display:flex; flex-direction:column; gap:12px} .live-vacio{text-align:center; padding:60px 20px; color:var(--ap-tinta-2); font-size:14px} .live-vacio i{font-size:40px; color:var(--ap-acento); display:block; margin-bottom:10px} .live-pista{background:#fff; border:1px solid var(--ap-linea); border-radius:18px; padding:16px 18px; box-shadow:var(--ap-sombra); transition:transform .5s var(--ap-ease), box-shadow .5s} .live-pista.nueva{transform:translateY(-6px); box-shadow:0 0 0 3px rgba(5,102,74,.18), var(--ap-sombra)} .live-q{display:flex; gap:8px; align-items:flex-start; font-weight:700; font-size:15.5px; letter-spacing:-.01em; margin-bottom:10px} .live-q i{color:var(--ap-acento); font-size:20px; flex:none} .live-tabs{display:flex; gap:6px; margin-bottom:10px} .live-tabs button{border:1px solid var(--ap-linea); background:var(--ap-bg); border-radius:99px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:700; color:var(--ap-tinta-2); cursor:pointer} .live-tabs button.on{background:var(--ap-acento); border-color:var(--ap-acento); color:#fff} .live-resp p{margin:0 0 10px; font-size:16px; line-height:1.55; background:var(--ap-acento-claro); border-radius:14px; padding:14px 16px} .live-puntos{margin:0 0 8px; padding-left:18px; font-size:13.5px; color:var(--ap-tinta-2); line-height:1.5} .live-dato,.live-evitar{display:flex; gap:6px; align-items:center; font-size:13px; padding:6px 10px; border-radius:10px; margin-top:6px} .live-dato{background:#e8effd; color:#2a4fb3}.live-evitar{background:#fde8e8; color:#a13030} .live-pensando{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ap-tinta-2); margin-bottom:10px} .live-pensando i{animation:pn-gira 1s linear infinite} /* ---------- laboratorio de CV (perfil) ---------- */ .cvlab{margin-bottom:18px} .cvlab-zona{display:flex; align-items:center; gap:16px; padding:18px 20px; border:2px dashed rgba(5,102,74,.35); border-radius:18px; background:linear-gradient(180deg,#fff,#f2f8f5); cursor:pointer; transition:border-color .15s, transform .15s} .cvlab-zona:hover{border-color:var(--ap-acento); transform:translateY(-1px)} .cvlab-zona.sobre{border-color:var(--ap-acento); background:var(--ap-acento-claro)} .cvlab-zona .cvlab-ico{width:52px; height:52px; border-radius:16px; background:var(--ap-acento); color:#fff; display:grid; place-items:center; font-size:26px; flex:none; box-shadow:0 12px 26px -12px rgba(5,102,74,.7)} .cvlab-zona strong{display:block; font-size:16px; letter-spacing:-.01em}.cvlab-zona small{color:var(--ap-tinta-2); font-size:13px} .cvlab-dos{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px} .cvlab-dos[hidden]{display:none} .cvlab-hoja{background:#fff; border:1px solid var(--ap-linea); border-radius:18px; box-shadow:var(--ap-sombra); overflow:hidden; position:relative; min-height:420px; display:flex; flex-direction:column} .cvlab-hoja header{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--ap-linea); font-size:13px; font-weight:700} .cvlab-hoja header i{color:var(--ap-acento); font-size:17px} .cvlab-hoja header .cvlab-tag{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:99px; background:var(--ap-bg); color:var(--ap-tinta-2)} .cvlab-hoja.ja header .cvlab-tag{background:var(--ap-acento-claro); color:var(--ap-acento)} .cvlab-papel{position:relative; flex:1; padding:22px 26px; background:repeating-linear-gradient(180deg,#fff 0 27px,#fafbfa 27px 28px); overflow:hidden} .cvlab-papel canvas{width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 10px 30px -18px rgba(0,0,0,.4)} .cvlab-papel pre{margin:0; white-space:pre-wrap; font:13px/1.55 ui-monospace,monospace; color:#3a3f47} .cvlab-laser{position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,#1fa06e,#3a7bff,transparent); box-shadow:0 0 18px 4px rgba(31,160,110,.55); opacity:0; pointer-events:none} .cvlab-hoja.escaneando .cvlab-laser{opacity:1; animation:cvlab-scan 2.2s ease-in-out infinite} .cvlab-hoja.escaneando .cvlab-papel::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,160,110,.0), rgba(31,160,110,.08)); animation:cvlab-tinte 2.2s ease-in-out infinite} @keyframes cvlab-scan{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}} @keyframes cvlab-tinte{0%,100%{opacity:.2}50%{opacity:1}} .cvlab-marca{position:absolute; border:2px solid rgba(31,160,110,.8); border-radius:6px; background:rgba(31,160,110,.12); opacity:0; animation:cvlab-marca .5s var(--ap-ease) forwards} @keyframes cvlab-marca{to{opacity:1}} .cvlab-ja{padding:22px 24px; display:flex; flex-direction:column; gap:14px} .cvlab-ja .cj-nombre{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ap-acento)} .cvlab-ja .cj-contacto{font-size:13px; color:var(--ap-tinta-2)} .cvlab-ja h5{margin:6px 0 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ap-tinta-2); border-bottom:1px solid var(--ap-linea); padding-bottom:4px} .cvlab-ja p{margin:0; font-size:13.5px; line-height:1.5} .cvlab-ja .cj-exp strong{display:block; font-size:14px}.cvlab-ja .cj-exp small{color:var(--ap-tinta-2); font-size:12.5px} .cvlab-ja .cj-chips{display:flex; flex-wrap:wrap; gap:6px} .cvlab-ja .cj-chips span{background:var(--ap-acento-claro); color:var(--ap-acento); border-radius:99px; padding:4px 10px; font-size:12.5px; font-weight:600} .cvlab-ja > *{opacity:0; transform:translateY(8px); animation:cvlab-in .5s var(--ap-ease) forwards} .cvlab-ja > *:nth-child(2){animation-delay:.12s}.cvlab-ja > *:nth-child(3){animation-delay:.24s}.cvlab-ja > *:nth-child(4){animation-delay:.36s}.cvlab-ja > *:nth-child(5){animation-delay:.48s}.cvlab-ja > *:nth-child(6){animation-delay:.6s}.cvlab-ja > *:nth-child(7){animation-delay:.72s}.cvlab-ja > *:nth-child(8){animation-delay:.84s} @keyframes cvlab-in{to{opacity:1; transform:none}} .cvlab-esqueleto{display:flex; flex-direction:column; gap:10px; padding:22px 24px} .cvlab-esqueleto i{display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,#eef1ef,#e2e7e4,#eef1ef); background-size:200% 100%; animation:cvlab-brillo 1.2s linear infinite} .cvlab-esqueleto i:nth-child(1){width:55%; height:22px}.cvlab-esqueleto i:nth-child(2){width:40%}.cvlab-esqueleto i:nth-child(4){width:90%}.cvlab-esqueleto i:nth-child(5){width:80%}.cvlab-esqueleto i:nth-child(7){width:70%} @keyframes cvlab-brillo{to{background-position:-200% 0}} .cvlab-estado{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ap-tinta-2); margin-top:10px} .cvlab-estado i{color:var(--ap-acento)} .cvlab-estado.ok{color:var(--ap-acento); font-weight:600} @media (max-width:980px){.ent-setup,.sim-escenario,.live-grid,.sim-cols,.cvlab-dos,.ent-lista-modos{grid-template-columns:1fr} .sim-sala{min-height:0}} .ent-setup[hidden],.sim-escenario[hidden],.sim-evaluacion[hidden],.live-pensando[hidden],.sim-pista[hidden],.sim-input[hidden]{display:none !important} #cv-leido{display:none} /* hoja en papel construida con el perfil (modo en vivo) */ .cvlab-doc{background:#fff; border-radius:6px; box-shadow:0 10px 30px -18px rgba(0,0,0,.4); padding:26px 28px; font-family:Georgia,'Times New Roman',serif; color:#2b2f36; min-height:420px} .cvlab-doc-cab b{display:block; font-size:20px; letter-spacing:.01em; color:#0b3d2e} .cvlab-doc-cab small{display:block; font-size:11px; color:#6b7280; margin:4px 0 14px} .cvlab-doc-sec{position:relative; margin-bottom:12px} .cvlab-doc-sec u{display:block; text-decoration:none; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#0b7a58; border-bottom:1px solid #e3e8e5; margin-bottom:5px; padding-bottom:2px; font-family:Outfit,Inter,sans-serif} .cvlab-doc-sec p{margin:0 0 5px; font-size:11.5px; line-height:1.45} .cvlab-doc-sec i{color:#6b7280; font-style:italic; font-size:10.5px} .cvlab-marca{transition:top .5s cubic-bezier(.23,1,.32,1), height .5s cubic-bezier(.23,1,.32,1)} .cvlab-flota{position:absolute; z-index:3; font:700 12px Outfit,Inter,sans-serif; color:#fff; background:linear-gradient(90deg,#0b7a58,#1fa06e); border-radius:99px; padding:4px 10px; box-shadow:0 8px 18px -8px rgba(5,102,74,.7); pointer-events:none; animation:fx-float-up-bounce 1.4s cubic-bezier(.175,.885,.32,1.275) forwards} .cvlab-hoja.escaneando .cvlab-laser{animation-duration:3s} .cvlab-ja .cj-chips span{animation:fx-pop .3s cubic-bezier(.34,1.56,.64,1) both} .cvlab-ja .cj-chips span:nth-child(n){animation-delay:calc(.9s + var(--k, 0) * 60ms)} /* más llamativo: fondo ambiente, láser con estela, brillo en la tarjeta JobApply, estadísticas */ .cvlab-dos{position:relative} .cvlab-ambiente{position:absolute; inset:-30px; z-index:0; pointer-events:none; border-radius:30px; background:radial-gradient(600px 300px at 20% 10%, rgba(31,160,110,.16), transparent 60%), radial-gradient(500px 300px at 85% 90%, rgba(58,123,255,.14), transparent 60%); filter:blur(20px); animation:cvlab-amb 8s ease-in-out infinite alternate} @keyframes cvlab-amb{to{transform:translate(20px,-10px) scale(1.05)}} .cvlab-dos > .cvlab-hoja{position:relative; z-index:1} .cvlab-laser{height:4px; background:linear-gradient(90deg,transparent,#1fa06e 30%,#7ce0b8 50%,#3a7bff 70%,transparent); box-shadow:0 0 22px 6px rgba(31,160,110,.55), 0 0 60px 14px rgba(58,123,255,.25)} .cvlab-laser::after{content:""; position:absolute; left:0; right:0; top:-90px; height:90px; background:linear-gradient(180deg, transparent, rgba(31,160,110,.22)); pointer-events:none} .cvlab-hoja.escaneando .cvlab-laser{animation-duration:2.4s} .cvlab-hoja.ja{overflow:hidden} .cvlab-hoja.ja::after{content:""; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg,transparent,rgba(31,160,110,.10),transparent); transform:translateX(-120%) skewX(-18deg); animation:fx-shine-loop 6s ease infinite; pointer-events:none} .cvlab-hoja.ja header{position:relative; z-index:1} .cvlab-barra{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:10px} .cvlab-stats{display:flex; gap:8px; flex-wrap:wrap} .cvlab-stats span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ap-tinta-2); background:#fff; border:1px solid var(--ap-linea); border-radius:99px; padding:5px 11px; box-shadow:var(--ap-luz); animation:fx-pop .3s cubic-bezier(.34,1.56,.64,1) both} .cvlab-stats span:nth-child(2){animation-delay:.25s}.cvlab-stats span:nth-child(3){animation-delay:.5s} .cvlab-stats b{font-size:16px; color:var(--ap-acento); font-variant-numeric:tabular-nums} .cvlab-marca{border-width:2px; box-shadow:0 0 0 4px rgba(31,160,110,.12), 0 10px 30px -12px rgba(31,160,110,.6)} .cvlab-flota{font-size:13px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px} .cvlab-flota::before{content:"✓"; font-weight:900} .cvlab-ja .cj-nombre{background-image:linear-gradient(90deg,#05664a,#1fa06e,#3a7bff,#1fa06e,#05664a); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:cvlab-in .5s var(--ap-ease) forwards, fx-textclip 3.5s linear infinite} /* ---- Modo voz del simulador ---- */ .sim-voz{margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#dfeee7; border-radius:99px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; transition:background .18s ease, transform .15s ease} .sim-voz:hover{background:rgba(255,255,255,.14)} .sim-voz:active{transform:scale(.97)} .sim-voz.on{background:#1fa06e; border-color:#1fa06e; color:#fff; box-shadow:0 0 0 0 rgba(31,160,110,.55); animation:sim-voz-late 2s ease-out infinite} @keyframes sim-voz-late{0%{box-shadow:0 0 0 0 rgba(31,160,110,.5)}100%{box-shadow:0 0 0 10px rgba(31,160,110,0)}} .sim-cab .sim-rec{margin-left:10px} .sim-escucha{display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:11px 14px; border-radius:14px; background:rgba(31,160,110,.14); border:1px solid rgba(31,160,110,.4); color:#e6f6ee; animation:fx-up .3s both} .sim-escucha.hablando{background:rgba(58,123,255,.14); border-color:rgba(88,150,255,.45)} .sim-escucha strong{display:block; font-size:13.5px} .sim-escucha small{display:block; font-size:12px; opacity:.75} .sim-escucha .sim-btn{margin-left:auto} .sim-ondas{display:inline-flex; align-items:center; gap:3px; height:26px; flex:none} .sim-ondas i{width:3px; height:8px; border-radius:2px; background:#43d39e; display:inline-block; animation:sim-onda .9s ease-in-out infinite} .sim-ondas i:nth-child(2){animation-delay:.12s}.sim-ondas i:nth-child(3){animation-delay:.24s}.sim-ondas i:nth-child(4){animation-delay:.36s}.sim-ondas i:nth-child(5){animation-delay:.48s} .sim-escucha.hablando .sim-ondas i{background:#7fb0ff} @keyframes sim-onda{0%,100%{height:8px}50%{height:22px}} .sim-input.en-voz textarea{opacity:.85} .sim-input.en-voz textarea::placeholder{color:rgba(255,255,255,.45)} @media (prefers-reduced-motion:reduce){.sim-ondas i{animation:none; height:14px}.sim-voz.on{animation:none}} .sim-idioma{margin-left:auto; margin-right:8px; background:rgba(255,255,255,.07); color:#dfeee7; border:1px solid rgba(255,255,255,.22); border-radius:99px; padding:6px 10px; font:inherit; font-size:12.5px; font-weight:650; cursor:pointer} .sim-idioma option{background:#12241d; color:#dfeee7} .sim-voz{margin-left:0} /* ---- Entrevistador (retrato con sincronía de labios) ---- */ .sim-persona{display:flex; align-items:center; gap:16px; padding:10px 2px 14px; position:relative} .sim-persona-halo{position:absolute; left:-8px; top:-6px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle,rgba(31,160,110,.45),transparent 68%); opacity:0; transition:opacity .3s ease} .sim-persona[data-estado="hablando"] .sim-persona-halo,.sim-persona[data-estado="escuchando"] .sim-persona-halo{opacity:1; animation:sim-halo 1.9s ease-in-out infinite} @keyframes sim-halo{0%,100%{transform:scale(.93); opacity:.5}50%{transform:scale(1.07); opacity:.95}} .sim-cara{width:96px; height:96px; border-radius:50%; flex:none; position:relative; z-index:1; box-shadow:0 14px 30px -14px rgba(0,0,0,.8)} .sim-persona-txt strong{display:block; font-size:15px; color:#e9f5ef} .sim-persona-txt small{display:block; font-size:12.5px; color:rgba(233,245,239,.62)} /* respiración del torso y micromovimiento de cabeza */ .p-torso{transform-origin:160px 320px; animation:p-respira 5s ease-in-out infinite} @keyframes p-respira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}} .p-cabeza{transform-origin:160px 250px; animation:p-quieto 7s ease-in-out infinite} @keyframes p-quieto{0%,100%{transform:rotate(0deg) translateY(0)}35%{transform:rotate(.9deg) translateY(-1px)}70%{transform:rotate(-.7deg) translateY(.5px)}} .sim-persona[data-estado="hablando"] .p-cabeza{animation:p-habla 3.2s ease-in-out infinite} @keyframes p-habla{0%,100%{transform:rotate(-1.3deg) translateY(0)}30%{transform:rotate(.8deg) translateY(-1.6px)}65%{transform:rotate(1.4deg) translateY(.6px)}} .sim-persona[data-estado="escuchando"] .p-cabeza{animation:p-asiente 3s ease-in-out infinite} @keyframes p-asiente{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(3px) rotate(.5deg)}60%{transform:translateY(-1px) rotate(-.4deg)}} .sim-persona[data-estado="pensando"] .p-cabeza{animation:p-piensa 4s ease-in-out infinite} @keyframes p-piensa{0%,100%{transform:rotate(-2.4deg) translateY(0)}50%{transform:rotate(-3.2deg) translateY(-1px)}} /* párpados: parpadeo real, no escalado de la pupila */ .p-parpado{transform-origin:center 152px; transform:scaleY(0); transition:transform .07s ease} .sim-persona.parpadea .p-parpado{transform:scaleY(1)} .p-iris,.p-brillo{transition:transform .5s cubic-bezier(.23,1,.32,1)} .sim-persona[data-estado="pensando"] .p-iris,.sim-persona[data-estado="pensando"] .p-brillo{transform:translate(-4px,-3px)} .sim-persona[data-estado="escuchando"] .p-iris,.sim-persona[data-estado="escuchando"] .p-brillo{transform:translate(0,1.5px)} .sim-persona.mira-izq .p-iris,.sim-persona.mira-izq .p-brillo{transform:translateX(-3.5px)} .sim-persona.mira-der .p-iris,.sim-persona.mira-der .p-brillo{transform:translateX(3.5px)} /* cejas */ .p-ceja{transition:transform .28s ease} .sim-persona[data-estado="pensando"] .p-ceja-izq{transform:translate(2px,-3px) rotate(-5deg)} .sim-persona[data-estado="pensando"] .p-ceja-der{transform:translateY(-1px)} .sim-persona[data-estado="hablando"] .p-ceja{animation:p-cejas 2.6s ease-in-out infinite} @keyframes p-cejas{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.4px)}} /* VISEMAS: la boca cambia de forma según el sonido */ .p-boca{transform-origin:160px 198px; transition:transform .09s ease-out} .p-labio-sup,.p-labio-inf,.p-dientes,.p-lengua{transition:transform .09s ease-out, opacity .09s linear} .p-labio-inf{transform-origin:160px 198px} .p-dientes,.p-lengua{opacity:0} /* cerrada */ .sim-persona[data-visema="cerrada"] .p-labio-inf{transform:scaleY(.18)} /* A: abierta grande */ .sim-persona[data-visema="a"] .p-labio-inf{transform:scaleY(1.55) translateY(1px)} .sim-persona[data-visema="a"] .p-dientes{opacity:1} .sim-persona[data-visema="a"] .p-lengua{opacity:.9} /* E: media y ancha */ .sim-persona[data-visema="e"] .p-boca{transform:scaleX(1.12)} .sim-persona[data-visema="e"] .p-labio-inf{transform:scaleY(.75)} .sim-persona[data-visema="e"] .p-dientes{opacity:1} /* O: redonda y estrecha */ .sim-persona[data-visema="o"] .p-boca{transform:scaleX(.72)} .sim-persona[data-visema="o"] .p-labio-inf{transform:scaleY(1.2)} /* M/B/P: labios apretados */ .sim-persona[data-visema="m"] .p-boca{transform:scaleX(.96) scaleY(.88)} .sim-persona[data-visema="m"] .p-labio-inf{transform:scaleY(.1)} /* F/V: labio inferior recogido */ .sim-persona[data-visema="f"] .p-labio-inf{transform:scaleY(.32) translateY(-1px)} .sim-persona[data-visema="f"] .p-dientes{opacity:.9} /* sonrisa al terminar */ .sim-persona[data-estado="fin"] .p-boca{transform:scaleX(1.08)} .sim-persona[data-estado="fin"] .p-labio-inf{transform:scaleY(.5)} .sim-persona[data-estado="fin"] .p-dientes{opacity:1} @media (prefers-reduced-motion:reduce){.sim-cara *,.sim-persona-halo{animation:none !important}} @media (max-width:760px){.sim-cara{width:74px;height:74px}.sim-persona-halo{width:86px;height:86px}} /* ---- El entrevistador, en grande, como una videollamada ---- */ .sim-persona.grande{flex-direction:column; align-items:center; gap:10px; padding:16px 0 18px} .sim-persona.grande .sim-cara{width:200px; height:200px; border:3px solid rgba(255,255,255,.1)} .sim-persona.grande .sim-persona-halo{width:226px; height:226px; left:50%; top:8px; transform:translateX(-50%)} .sim-persona.grande[data-estado="hablando"] .sim-persona-halo,.sim-persona.grande[data-estado="escuchando"] .sim-persona-halo{animation:sim-halo-g 1.9s ease-in-out infinite} @keyframes sim-halo-g{0%,100%{transform:translateX(-50%) scale(.94); opacity:.45}50%{transform:translateX(-50%) scale(1.06); opacity:.9}} .sim-persona.grande .sim-persona-txt{text-align:center} .sim-persona.grande .sim-persona-txt strong{font-size:16px} .sim-persona.grande .sim-persona-txt small{font-size:13px} /* labios cerrados: no se ve el interior */ .p-interior{opacity:1; transition:opacity .08s linear} .sim-persona[data-visema="cerrada"] .p-interior,.sim-persona[data-visema="m"] .p-interior{opacity:0} .sim-persona[data-visema="f"] .p-interior{opacity:.65} .sim-persona[data-estado="reposo"] .p-interior,.sim-persona[data-estado="escuchando"] .p-interior{opacity:0} @media (max-width:760px){.sim-persona.grande .sim-cara{width:150px;height:150px}.sim-persona.grande .sim-persona-halo{width:172px;height:172px}} /* =========================================================== Entrevistador real en vídeo (ocupa la MISMA caja que el dibujo) =========================================================== */ .sim-video{width:96px; height:96px; border-radius:50%; flex:none; position:relative; z-index:1; object-fit:cover; display:none; background:#071b16; box-shadow:0 14px 30px -14px rgba(0,0,0,.8)} .sim-persona.grande .sim-video{width:200px; height:200px; border:3px solid rgba(255,255,255,.1)} @media (max-width:760px){.sim-video{width:74px; height:74px}} /* solo se muestra cuando el JS confirma que hay clip cargado; entonces oculta el dibujo */ .sim-persona[data-video="on"] .sim-video{display:block} .sim-persona[data-video="on"] .sim-cara{display:none} /* selector de entrevistador: un elemento mas de la columna, debajo del nombre */ .sim-quien{display:flex; gap:4px; justify-content:center; margin-top:2px; background:rgba(255,255,255,.08); border-radius:999px; padding:3px; align-self:center} .sim-quien button{border:0; background:transparent; color:rgba(233,245,239,.7); font:inherit; font-size:12px; line-height:1; padding:5px 12px; border-radius:999px; cursor:pointer} .sim-quien button.activo{background:#05664a; color:#fff} .sim-quien button:hover:not(.activo){color:#fff} /* Turno del entrevistador: la caja de respuesta se bloquea visiblemente */ #sim-texto:disabled, #sim-responder:disabled, #sim-mic:disabled { opacity: .45; cursor: not-allowed; } #sim-texto:disabled { background: rgba(0,0,0,.03); } .sim-responder.bloqueada, .sim-entrada.bloqueada { opacity: .75; } /* La sala se ajusta a su contenido: antes tenia 560px fijos de cuando el chat iba dentro, y al sacarlo quedaba medio panel vacio en negro debajo del avatar. */ .sim-sala { min-height: 0; } .sim-persona.grande { padding: 22px 0 20px; } /* ── Cabecera del simulador: que no la desmonten los idiomas largos ── Un