/* ========================================================= PDCI · Portal de incorporación Paleta base (referencial): Primario #1E1D39 (azul marino oscuro) Secundario #FDC648 (amarillo / dorado) Terciario #E6E6E6 (gris claro) ========================================================= */ :root{ --navy-900:#15142c; --navy-800:#1E1D39; --navy-700:#2b2a4d; --navy-600:#3a3963; --navy-500:#4e4d80; --gold-500:#FDC648; --gold-600:#e6ac2c; --gold-700:#a87f14; --gold-100:#fff2d6; --gold-50:#fffaf0; --gray-100:#E6E6E6; --gray-50:#f6f6f8; --white:#ffffff; --ink:#1b1a2e; --ink-soft:#5b5a72; --ink-faint:#8a89a0; --success:#2e9e6b; --success-bg:#eaf7f1; --danger:#e2574c; --font-head:'Sora', 'Inter', sans-serif; --font-body:'Inter', sans-serif; --radius-xl:28px; --radius-lg:20px; --radius-md:14px; --radius-sm:10px; --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --shadow-soft:0 10px 30px -14px rgba(30,29,57,.22); --shadow-lift:0 18px 40px -14px rgba(30,29,57,.35); } *,*::before,*::after{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--navy-900); overflow-x:hidden; -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:var(--font-head); margin:0; letter-spacing:-0.015em; } p{ margin:0; } button{ font-family:inherit; } .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; } /* Oculta el logo/textos con el valor PDCI hardcodeado en el HTML hasta que js/app.js sepa el branding final (propio del proyecto o el de PDCI por defecto) — evita el "salto" visible de PDCI a la empresa real mientras /api/status responde. Se revela agregando .is-ready en (ver revelarBranding() en app.js), nunca antes. Sin JS (o si tarda mucho), se revela solo igual a los 2s para no dejar la pantalla en blanco. */ .brand-fade{ opacity:0; transition:opacity .25s var(--ease-out); } body.is-ready .brand-fade{ opacity:1; } @media (prefers-reduced-motion: reduce){ .brand-fade{ transition:none; } } /* ============ FONDO ANIMADO ============ */ .bg-fx{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background: url("../assets/img/mesh-glow.svg") no-repeat -10% -15%/70% auto, linear-gradient(160deg,var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%); background-blend-mode:screen, normal; } .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:blobMove 22s var(--ease-out) infinite alternate; } .blob-a{ width:520px; height:520px; left:-160px; top:-140px; background:radial-gradient(circle at 30% 30%, var(--gold-500), transparent 70%); opacity:.26; animation-duration:26s; } .blob-b{ width:460px; height:460px; right:-140px; top:20%; background:radial-gradient(circle at 60% 40%, var(--navy-500), transparent 70%); animation-duration:30s; animation-delay:-6s; } .blob-c{ width:600px; height:600px; left:20%; bottom:-260px; background:radial-gradient(circle at 50% 50%, var(--gold-500), transparent 72%); opacity:.12; animation-duration:34s; animation-delay:-12s; } @keyframes blobMove{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(40px,30px) scale(1.08); } 100%{ transform:translate(-30px,-20px) scale(0.96); } } .grid-overlay{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle at 30% 20%, black, transparent 75%); } /* ============ LAYOUT ============ */ .app{ position:relative; z-index:1; display:grid; grid-template-columns:342px 1fr; min-height:100vh; } /* ---- Panel lateral ---- */ /* Fondo del panel lateral: FOTO + velo cálido + trama de plano. La foto es opcional — colócala en assets/img/sidebar-bg.jpg y aparece sola; si no existe, el degradado cálido de abajo se ve igual de bien. */ .side-panel{ position:relative; padding:34px 34px 26px; color:var(--white); display:flex; flex-direction:column; gap:28px; animation:fadeIn .7s var(--ease-out) both; overflow:hidden; background: radial-gradient(120% 55% at 25% -5%, rgba(196,132,52,.5), transparent 62%), linear-gradient(180deg,#2b2119 0%, #241f2e 42%, var(--navy-900) 100%); } /* Capa de la foto */ .side-panel::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("../assets/img/sidebar-bg.jpg") no-repeat center top/cover; opacity:.55; mask-image:linear-gradient(180deg, black 0%, black 40%, transparent 88%); } /* Capa de la trama de plano, encima de la foto */ .side-panel::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("../assets/img/blueprint-pattern.svg") repeat; background-size:160px 160px; opacity:.13; mask-image:linear-gradient(180deg, black 0%, black 55%, transparent 100%); } .side-panel > *{ position:relative; z-index:1; } .brand{ display:flex; align-items:center; gap:14px; } .brand-mark{ background:var(--white); border-radius:14px; padding:11px 15px; box-shadow:0 8px 20px -8px rgba(0,0,0,.35); display:inline-flex; align-items:center; } .brand-mark img{ display:block; height:38px; width:auto; } .side-copy h1{ font-size:30px; line-height:1.14; color:var(--white); font-weight:700; } .side-copy p{ margin-top:12px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.6); max-width:270px; } .side-user{ display:inline-block; margin-top:14px; font-size:11.5px; font-weight:600; color:var(--gold-500); background:rgba(253,198,72,.1); border:1px solid rgba(253,198,72,.26); padding:5px 11px; border-radius:20px; } /* ---- Stepper vertical (avance real) ---- */ .stepper{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; position:relative; flex:1; } .stepper-item{ position:relative; display:flex; align-items:center; gap:13px; padding:11px 0; opacity:.45; border-radius:12px; transition:opacity .4s var(--ease-out), background .25s; } .stepper-item[data-nav-step]{ cursor:pointer; } .stepper-item::before{ content:''; position:absolute; left:16px; top:41px; bottom:-8px; width:2px; background:rgba(255,255,255,.14); transition:background .5s var(--ease-out); } .stepper-item:last-child::before{ display:none; } .stepper-item.is-home, .stepper-item.is-active, .stepper-item.is-done, .stepper-item.is-review{ opacity:1; } .stepper-item.is-locked{ opacity:.4; } .stepper-dot{ position:relative; width:33px; height:33px; min-width:33px; border-radius:50%; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:all .45s var(--ease-spring); z-index:1; } .stepper-num{ font-size:13px; font-weight:700; color:rgba(255,255,255,.75); transition:opacity .3s; } .stepper-dot svg{ position:absolute; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .25s; } .ico-home{ opacity:1 !important; width:16px !important; height:16px !important; color:var(--navy-900); fill:currentColor; stroke:currentColor; stroke-width:1.6; } .stepper-item.is-home .stepper-dot{ background:var(--gold-500); border-color:var(--gold-500); } /* "en curso" — accionable ahora mismo: círculo dorado con número */ .stepper-item.is-active .stepper-dot{ background:var(--gold-500); border-color:var(--gold-500); animation:stepperPulseStrong 2.4s ease-in-out infinite; } .stepper-item.is-active .stepper-num{ color:var(--navy-900); } @keyframes stepperPulseStrong{ 0%,100%{ box-shadow:0 0 0 0 rgba(253,198,72,.5); } 50%{ box-shadow:0 0 0 8px rgba(253,198,72,0); } } /* "completado" — check verde */ .stepper-item.is-done .stepper-dot{ background:var(--success); border-color:var(--success); } .stepper-item.is-done .stepper-num{ opacity:0; } .stepper-item.is-done .stepper-check{ opacity:1; color:#fff; stroke-width:3; } .stepper-item.is-done::before{ background:var(--success); } /* "en revisión" / "esperando a CH" — reloj dorado, contorno */ .stepper-item.is-review .stepper-dot{ background:rgba(253,198,72,.14); border-color:var(--gold-500); } .stepper-item.is-review .stepper-num{ opacity:0; } .stepper-item.is-review .stepper-clock{ opacity:1; color:var(--gold-500); } /* "bloqueado" — candado */ .stepper-item.is-locked .stepper-num{ opacity:0; } .stepper-item.is-locked .stepper-lock{ opacity:1; color:rgba(255,255,255,.55); stroke-width:2; } .stepper-lock.is-on{ opacity:1 !important; color:rgba(255,255,255,.5); stroke-width:2; } .stepper-item.is-tail{ opacity:.35; padding-top:6px; } .stepper-item.is-tail .stepper-dot{ width:30px; height:30px; min-width:30px; } .stepper-label{ display:flex; flex-direction:column; } .stepper-label strong{ font-size:13.5px; font-weight:600; color:var(--white); } .stepper-label small{ font-size:11.5px; color:rgba(255,255,255,.5); margin-top:2px; } .stepper-item.is-active .stepper-label small{ color:var(--gold-500); } .stepper-item.is-review .stepper-label small{ color:var(--gold-500); } .stepper-item.is-done .stepper-label small{ color:rgba(146,224,190,.85); } /* Pantalla que se está viendo: pastilla con barra dorada a la izquierda. */ .stepper-item.is-viewing{ background:rgba(255,255,255,.09); margin:0 -8px 0 -14px; padding-left:14px; padding-right:14px; border-radius:12px; } .stepper-item.is-viewing::before{ left:30px; } .stepper-item.is-viewing::after{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--gold-500); border-radius:3px; } .side-footer{ display:flex; flex-direction:column; gap:10px; border-top:1px solid rgba(255,255,255,.12); padding-top:16px; } .iso-chip{ align-self:flex-start; font-size:10px; letter-spacing:.05em; color:var(--gold-500); background:rgba(253,198,72,.1); border:1px solid rgba(253,198,72,.28); padding:5px 10px; border-radius:20px; } .side-footer-copy{ font-size:10.5px; color:rgba(255,255,255,.4); } /* ---- Tarjeta "¿Necesitas ayuda?" (sidebar) ---- */ .help-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px 16px; } .help-card strong{ display:block; font-size:13px; font-weight:600; color:var(--white); margin-bottom:4px; } .help-card p{ font-size:12px; line-height:1.55; color:rgba(255,255,255,.6); margin:0 0 10px; } .help-contact-name{ display:block; font-size:11.5px; font-weight:600; color:var(--gold-500); margin-bottom:8px; } .help-links{ display:flex; flex-wrap:wrap; gap:8px; } .help-link{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--white); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:6px 11px; border-radius:20px; text-decoration:none; transition:background .2s, border-color .2s; } .help-link:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); } .help-ico{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #helpWhatsappLink .help-ico{ fill:currentColor; stroke:none; } /* ---- Panel de contenido ---- */ .content-panel{ background:var(--white); border-radius:var(--radius-xl); margin:16px 16px 16px 0; padding:44px 52px 26px; position:relative; overflow:hidden; box-shadow:-30px 0 60px -30px rgba(0,0,0,.4); display:flex; flex-direction:column; min-height:calc(100vh - 32px); } .content-panel::before{ content:''; position:absolute; top:-18%; right:-14%; z-index:0; width:52%; aspect-ratio:1/1; background:url("../assets/img/mesh-glow.svg") no-repeat center/contain; opacity:.1; mix-blend-mode:multiply; pointer-events:none; } .content-panel > *{ position:relative; z-index:1; } /* ---- Encabezado fijo del panel ---- */ .hub-header{ animation:riseIn .55s var(--ease-out) both; } @keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } .hub-greeting{ font-size:40px; line-height:1.15; color:var(--navy-800); font-weight:700; margin:0; } .hub-subtitle{ font-size:15px; line-height:1.5; color:var(--ink-soft); margin:8px 0 0; } #headerEyebrow[hidden]{ display:none; } /* ---- Aviso "no puedes saltarte esta etapa" (junto a Atrás/Continuar) ---- */ .nav-blocked-msg{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#9a6a12; background:rgba(253,198,72,.14); border:1px solid rgba(253,198,72,.4); padding:8px 14px; border-radius:20px; margin:0 0 10px; align-self:flex-end; } .nav-blocked-msg svg{ width:15px; height:15px; min-width:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .nav-blocked-msg[hidden]{ display:none; } @keyframes navBlockedShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-4px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } } .nav-blocked-msg.is-shake{ animation:navBlockedShake .4s ease-in-out; } .eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-700); background:var(--gold-100); padding:5px 12px; border-radius:20px; margin-bottom:14px; } .eyebrow-demo{ background:rgba(226,87,76,.12); color:#b53c32; } h2{ font-size:32px; color:var(--navy-800); font-weight:700; margin:0; } .lead{ font-size:15px; line-height:1.65; color:var(--ink-soft); max-width:640px; margin-top:12px; } /* Usada en pantallas donde el texto debe ocupar todo el ancho disponible (una sola línea) en vez de partirse en 3, para dejar más alto libre al contenido que sigue (p.ej. el reproductor de Inducción). */ .lead-wide{ max-width:none; } .accent{ color:var(--gold-600); } /* ---- Barra de progreso general ---- */ .progress-summary{ display:flex; align-items:center; gap:18px; margin:22px 0 26px; animation:riseIn .55s .1s var(--ease-out) both; } .progress-track{ flex:1; height:7px; background:rgba(30,29,57,.08); border-radius:20px; overflow:hidden; } .progress-fill{ height:100%; width:0%; border-radius:20px; background:linear-gradient(90deg,var(--gold-500),var(--gold-600)); transition:width .7s var(--ease-out); } .progress-text{ font-size:12.5px; font-weight:600; color:var(--navy-800); white-space:nowrap; } /* ---- Wizard: una pantalla por etapa ---- */ /* El scroll ocurre acá dentro (etapas largas como Documentos), pero la barra solo aparece si de verdad sobra contenido: sin min-height forzado, y con barra delgada y sin los botones de flecha del sistema. */ .steps-viewport{ position:relative; flex:1; overflow-y:auto; overflow-x:hidden; margin:0 -6px; padding:0 6px; scrollbar-width:thin; scrollbar-color:rgba(30,29,57,.18) transparent; overscroll-behavior:contain; } .steps-viewport::-webkit-scrollbar{ width:8px; } .steps-viewport::-webkit-scrollbar-track{ background:transparent; } .steps-viewport::-webkit-scrollbar-thumb{ background:rgba(30,29,57,.16); border-radius:20px; } .steps-viewport::-webkit-scrollbar-thumb:hover{ background:rgba(30,29,57,.3); } .steps-viewport::-webkit-scrollbar-button{ display:none; width:0; height:0; } .steps-wrapper{ position:relative; } .step{ position:absolute; inset:0; opacity:0; transform:translateX(24px); pointer-events:none; /* overflow:hidden evita que las pantallas ocultas (más altas que la ventana) inflen el alto del contenedor y saquen una barra de scroll que no corresponde. */ overflow:hidden; transition:opacity .45s var(--ease-out), transform .45s var(--ease-out); } .step.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; position:relative; overflow:visible; } .step.is-leaving-back{ transform:translateX(-24px); } .step-inner{ max-width:660px; animation:riseIn .5s var(--ease-out) both; padding-bottom:8px; } .step-inner.is-wide{ max-width:1000px; } /* ---- Encabezado de etapa ---- */ .stage-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .stage-badge{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:20px; background:var(--gray-100); color:var(--ink-soft); white-space:nowrap; } .stage-badge.is-ok{ background:var(--success-bg); color:var(--success); } .stage-badge.is-current{ background:var(--gold-100); color:var(--gold-700); } .stage-badge.is-review{ background:var(--gold-100); color:var(--gold-700); } .stage-badge.is-locked{ background:var(--gray-100); color:var(--ink-faint); } .stage-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; } .stage-top .stage-top-main{ flex:1; min-width:0; } /* ========================================================= PANTALLA DE INICIO — tarjetas grandes + aviso del DNI ========================================================= */ @keyframes popIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } } .welcome-inner .lead{ max-width:760px; } .hero-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:30px 0 0; } .hero-card{ display:flex; align-items:flex-start; gap:16px; background:var(--white); border:1px solid rgba(30,29,57,.09); border-radius:var(--radius-md); padding:22px 24px; box-shadow:var(--shadow-soft); transition:transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; animation:popIn .55s var(--ease-spring) both; } .hero-card:nth-child(1){ animation-delay:.05s; } .hero-card:nth-child(2){ animation-delay:.13s; } .hero-card:nth-child(3){ animation-delay:.21s; } .hero-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:rgba(253,198,72,.55); } .hero-ico{ width:46px; height:46px; min-width:46px; border-radius:13px; background:var(--gold-100); display:inline-flex; align-items:center; justify-content:center; } .hero-ico svg{ width:22px; height:22px; fill:none; stroke:var(--gold-700); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .hero-card-body strong{ display:block; font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--navy-800); margin-bottom:7px; } .hero-card-body p{ font-size:13px; line-height:1.55; color:var(--ink-soft); } .hero-note{ display:flex; align-items:flex-start; gap:16px; margin-top:22px; padding:20px 24px; background:var(--gold-50); border:1px solid rgba(253,198,72,.5); border-radius:var(--radius-md); animation:popIn .55s .28s var(--ease-spring) both; } .hero-note-ico{ width:32px; height:32px; min-width:32px; display:inline-flex; align-items:center; justify-content:center; } .hero-note-ico svg{ width:30px; height:30px; fill:none; stroke:var(--gold-600); stroke-width:1.7; stroke-linecap:round; } .hero-note strong{ display:block; font-size:14px; font-weight:600; color:var(--navy-800); margin-bottom:4px; } .hero-note p{ font-size:13px; line-height:1.55; color:var(--ink-soft); } /* ========================================================= ETAPA 1 — Datos de ingreso ========================================================= */ .prep-card{ margin-top:24px; background:var(--gold-50); border:1px solid rgba(253,198,72,.55); border-radius:var(--radius-lg); padding:20px 24px 22px; animation:popIn .5s var(--ease-out) both; } .prep-card h3{ font-size:16px; color:var(--navy-800); font-weight:700; margin-bottom:16px; } .prep-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .prep-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; } .prep-ico{ width:46px; height:46px; border-radius:50%; background:var(--white); border:1px solid rgba(253,198,72,.5); display:flex; align-items:center; justify-content:center; } .prep-ico svg{ width:21px; height:21px; fill:none; stroke:var(--gold-700); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .prep-item span{ font-size:12px; color:var(--ink-soft); line-height:1.35; max-width:130px; } .info-note{ display:flex; align-items:flex-start; gap:10px; margin-top:20px; } .info-ico{ width:18px; height:18px; min-width:18px; border-radius:50%; border:1.5px solid var(--gold-600); color:var(--gold-700); font-size:11px; font-weight:700; font-style:italic; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; } .info-note p{ font-size:12.5px; line-height:1.55; color:var(--ink-soft); max-width:560px; } .success-card{ display:flex; align-items:center; gap:16px; margin-top:24px; padding:20px 24px; background:var(--white); border:1px solid rgba(46,158,107,.35); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); max-width:560px; animation:popIn .5s var(--ease-out) both; } .success-ico{ width:48px; height:48px; min-width:48px; border-radius:50%; background:var(--success-bg); display:flex; align-items:center; justify-content:center; } .success-ico svg{ width:22px; height:22px; fill:none; stroke:var(--success); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; animation:drawCheck .55s .2s var(--ease-out) forwards; } @keyframes drawCheck{ to{ stroke-dashoffset:0; } } .success-card strong{ display:block; font-size:15px; color:var(--navy-800); font-family:var(--font-head); } .success-card small{ font-size:12.5px; color:var(--ink-soft); } .stage-cta{ margin-top:26px; } /* ========================================================= ETAPA 2 — Documentos personales ========================================================= */ .privacy-note{ display:flex; align-items:flex-start; gap:11px; background:var(--gold-50); border:1px solid rgba(253,198,72,.5); border-radius:var(--radius-md); padding:14px 16px; max-width:390px; flex:none; } .privacy-note svg{ width:17px; height:17px; min-width:17px; fill:none; stroke:var(--gold-700); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; } .privacy-note p{ font-size:12px; line-height:1.5; color:var(--ink-soft); } .doc-groups{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; align-items:start; } .doc-group.is-full{ grid-column:1 / -1; } .doc-group{ background:var(--white); border:1px solid rgba(30,29,57,.1); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); overflow:hidden; animation:popIn .45s var(--ease-out) both; } .doc-group-head{ display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; background:none; border:none; cursor:pointer; text-align:left; border-bottom:1px solid rgba(30,29,57,.08); } .doc-group-head > svg:first-child{ width:17px; height:17px; min-width:17px; fill:none; stroke:var(--navy-700); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .doc-group-head strong{ flex:1; font-size:14px; font-weight:700; color:var(--navy-800); font-family:var(--font-head); } .doc-group-chevron{ width:15px; height:15px; fill:none; stroke:var(--ink-faint); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease-out); } .doc-group.is-collapsed .doc-group-chevron{ transform:rotate(180deg); } .doc-group.is-collapsed .doc-group-body{ display:none; } .doc-group.is-collapsed .doc-group-head{ border-bottom:none; } .doc-group-body{ padding:4px 0; } .doc-row{ display:flex; align-items:center; gap:11px; padding:11px 16px; border-bottom:1px solid rgba(30,29,57,.06); } .doc-group-body .doc-row:last-child{ border-bottom:none; } .doc-row > svg.doc-file-ico{ width:16px; height:16px; min-width:16px; fill:none; stroke:var(--gold-600); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .doc-row-main{ flex:1; min-width:0; } .doc-row-main strong{ display:block; font-size:13px; font-weight:500; color:var(--ink); } .doc-row-main small{ display:block; font-size:11px; color:var(--ink-faint); margin-top:2px; line-height:1.4; } .doc-row.is-uploaded .doc-row-main strong{ color:var(--navy-800); } .doc-action{ display:flex; align-items:center; gap:6px; flex:none; } .btn-upload{ font-size:12px; font-weight:600; color:var(--navy-800); background:var(--white); border:1px solid rgba(30,29,57,.16); border-radius:9px; padding:6px 15px; text-decoration:none; cursor:pointer; transition:background .2s, border-color .2s, transform .2s; display:inline-flex; align-items:center; gap:6px; } .btn-upload:hover{ background:var(--gold-100); border-color:var(--gold-500); transform:translateY(-1px); } .doc-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; border-radius:20px; padding:5px 11px; white-space:nowrap; } .doc-chip svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .doc-chip.is-ok{ background:var(--success-bg); color:var(--success); } .doc-chip.is-pending{ background:var(--gray-100); color:var(--ink-faint); } .doc-chip.is-uploading{ background:var(--gold-100); color:var(--gold-700); } .doc-chip.is-error{ background:rgba(226,87,76,.12); color:#b53c32; } .btn-upload.is-retry{ color:#b53c32; border-color:rgba(226,87,76,.35); } .btn-upload.is-retry:hover{ background:rgba(226,87,76,.08); border-color:#b53c32; } .doc-spinner{ width:11px; height:11px; border-radius:50%; border:2px solid rgba(154,106,18,.3); border-top-color:var(--gold-700); animation:docSpin .7s linear infinite; } @keyframes docSpin{ to{ transform:rotate(360deg); } } .doc-kebab{ width:24px; height:24px; border-radius:7px; border:none; background:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint); transition:background .2s; } .doc-kebab:hover{ background:rgba(30,29,57,.07); color:var(--navy-800); } .doc-kebab svg{ width:15px; height:15px; fill:currentColor; } .doc-menu-wrap{ position:relative; } .doc-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; background:var(--white); border:1px solid rgba(30,29,57,.12); border-radius:10px; box-shadow:var(--shadow-lift); padding:5px; min-width:190px; } .doc-menu[hidden]{ display:none; } .doc-menu button, .doc-menu a, .doc-menu label{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer; font-size:12.5px; color:var(--ink); padding:8px 10px; border-radius:7px; text-decoration:none; box-sizing:border-box; } .doc-menu button:hover, .doc-menu a:hover, .doc-menu label:hover{ background:var(--gray-50); } .tip-note{ display:flex; align-items:center; gap:11px; margin-top:18px; padding:13px 18px; background:var(--gold-50); border:1px solid rgba(253,198,72,.45); border-radius:var(--radius-md); } .tip-note svg{ width:17px; height:17px; min-width:17px; fill:var(--gold-500); stroke:var(--gold-600); stroke-width:1.2; stroke-linejoin:round; } .tip-note p{ font-size:12.5px; color:var(--ink-soft); } /* ========================================================= ETAPA 3 — Inducción y evaluación (una pantalla por área) ========================================================= */ .area-nav{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; } .area-pill{ font-size:11.5px; font-weight:600; color:var(--ink-soft); background:var(--white); border:1px solid rgba(30,29,57,.12); border-radius:20px; padding:6px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .2s, border-color .2s, color .2s; } .area-pill svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .area-pill:hover{ border-color:var(--gold-500); } .area-pill.is-current{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; } .area-pill.is-done{ color:var(--success); border-color:rgba(46,158,107,.4); background:var(--success-bg); } .area-card{ background:var(--white); border:1px solid rgba(30,29,57,.1); border-radius:var(--radius-lg); padding:20px 22px 22px; margin-top:16px; box-shadow:var(--shadow-soft); animation:popIn .45s var(--ease-out) both; } .area-card.is-complete{ border-color:rgba(46,158,107,.4); } .area-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .area-head h3{ font-size:21px; color:var(--navy-800); font-weight:700; letter-spacing:.01em; } /* Reproductor: ocupa el centro y la mayor parte de la pantalla posible. Antes de darle play solo se ve un botón grande (poster) — la ÚNICA acción disponible es reproducir; una vez dentro, solo pausar, silenciar y pantalla completa (ver más abajo, no se puede adelantar). */ .video-stage{ margin:14px 0 4px; } .player-mount{ position:relative; width:100%; max-width:880px; aspect-ratio:16/9; max-height:64vh; margin:0 auto; background:linear-gradient(155deg,var(--navy-900),var(--navy-800)); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-lift); display:flex; align-items:center; justify-content:center; } /* CLAVE: el iframe de YouTube no recibe clics — toda la interacción pasa por nuestros botones. Sin barra de progreso, sin adelanto. NO TOCAR. */ .player-mount iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; } .player-mount:fullscreen{ width:100vw; height:100vh; max-width:none; max-height:none; aspect-ratio:auto; border-radius:0; background:#000; } .player-mount:-webkit-full-screen{ width:100vw; height:100vh; max-height:none; border-radius:0; background:#000; } /* Botón "poster": única acción visible antes de reproducir el video. */ .video-poster-play{ position:relative; z-index:2; display:inline-flex; flex-direction:column; align-items:center; gap:12px; background:none; border:none; cursor:pointer; color:#fff; } .video-poster-play svg{ width:26px; height:26px; padding:22px; border-radius:50%; background:var(--gold-500); fill:var(--navy-900); stroke:none; box-sizing:content-box; transition:transform .2s, background .2s; } .video-poster-play:hover svg{ transform:scale(1.06); background:var(--gold-600); } .video-poster-play span{ font-size:12.5px; font-weight:600; letter-spacing:.02em; } .video-poster-play[aria-disabled="true"]{ pointer-events:none; opacity:.5; } .yt-controls{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; } .yt-controls[hidden]{ display:none; } .yt-controls .yt-playpause{ flex:none; border:1px solid rgba(30,29,57,.14); padding:9px 18px; } .yt-mute{ flex:none; border:1px solid rgba(30,29,57,.14); padding:9px 14px; font-size:12.5px; } .yt-fullscreen{ flex:none; border:1px solid rgba(30,29,57,.14); padding:9px 12px; } .yt-meta{ flex:1; min-width:140px; display:flex; align-items:center; gap:12px; } .yt-title{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%; } .yt-progress{ flex:1; height:6px; border-radius:4px; background:var(--gray-100); overflow:hidden; } .yt-progress-fill{ height:100%; width:0%; background:var(--gold-500); transition:width .4s linear; } .yt-time{ font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; } .yt-hint{ margin-top:8px; font-size:11.5px; color:var(--ink-faint); } .video-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; padding:5px 11px; border-radius:20px; flex:none; } .video-tag.is-done{ background:var(--success-bg); color:var(--success); } .video-tag.is-locked{ background:var(--gray-100); color:var(--ink-faint); } .exam-cta{ margin-top:20px; } .btn-exam{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--navy-800); background:var(--gray-50); border:1px solid rgba(30,29,57,.12); border-radius:11px; padding:12px 20px; text-decoration:none; cursor:pointer; transition:background .2s, border-color .2s, transform .2s, box-shadow .2s; } .btn-exam svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .btn-exam.is-ready{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); box-shadow:0 10px 24px -12px rgba(253,198,72,.8); } .btn-exam.is-ready:hover{ background:var(--gold-600); transform:translateY(-2px); } .btn-exam[aria-disabled="true"]{ opacity:.5; pointer-events:none; } .exam-done-chip{ display:inline-flex; align-items:center; gap:7px; margin-left:12px; font-size:12px; font-weight:600; color:var(--success); background:var(--success-bg); border-radius:20px; padding:7px 13px; } .exam-done-chip svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= ETAPA 4 — Firma en Talana ========================================================= */ .locked-card{ margin:26px auto 0; max-width:420px; background:var(--gray-50); border:1px solid rgba(30,29,57,.1); border-radius:var(--radius-lg); padding:34px 30px 30px; text-align:center; animation:popIn .5s var(--ease-out) both; } .locked-card.is-open{ background:var(--gold-50); border-color:rgba(253,198,72,.55); } .locked-ico{ width:62px; height:62px; margin:0 auto 18px; border-radius:50%; background:rgba(30,29,57,.07); display:flex; align-items:center; justify-content:center; } .locked-card.is-open .locked-ico{ background:rgba(253,198,72,.22); } .locked-ico svg{ width:26px; height:26px; fill:none; stroke:var(--ink-faint); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .locked-card.is-open .locked-ico svg{ stroke:var(--gold-700); } .locked-card h3{ font-size:17px; color:var(--navy-800); font-weight:700; } .locked-card p{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:8px auto 20px; max-width:300px; } .milestones{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:30px; padding:16px 22px; background:var(--white); border:1px solid rgba(30,29,57,.1); border-radius:var(--radius-md); } .milestone{ display:flex; align-items:center; gap:10px; flex:none; } .milestone-ico{ width:34px; height:34px; min-width:34px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; } .milestone-ico svg{ width:16px; height:16px; fill:none; stroke:var(--ink-faint); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .milestone span{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; } .milestone-line{ flex:1; height:1px; background:rgba(30,29,57,.14); } .milestone.is-active .milestone-ico{ background:var(--gold-100); } .milestone.is-active .milestone-ico svg{ stroke:var(--gold-700); } .milestone.is-active span{ color:var(--navy-800); font-weight:600; } .milestone.is-done .milestone-ico{ background:var(--success-bg); } .milestone.is-done .milestone-ico svg{ stroke:var(--success); } .milestone.is-done span{ color:var(--success); font-weight:600; } /* ---- Confirmación final ---- */ .check-circle{ width:82px; height:82px; margin:20px 0 18px; } .check-circle svg{ width:100%; height:100%; } .check-circle-bg{ fill:none; stroke:rgba(46,158,107,.2); stroke-width:2; } .check-circle-mark{ fill:none; stroke:var(--success); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:drawCheck .6s .3s var(--ease-out) forwards; } /* ---- Notas de estado ---- */ .stage-locked-note,.stage-review-note{ margin-top:18px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); border-left:3px solid var(--gray-100); padding-left:12px; max-width:620px; } .stage-review-note{ border-left-color:var(--gold-500); } /* ---- Navegación inferior ---- */ .step-nav{ display:flex; justify-content:flex-end; align-items:center; margin-top:18px; padding-top:20px; border-top:1px solid rgba(30,29,57,.08); } /* "Atrás" a la izquierda cuando existe; si está oculto, "Continuar" queda solo a la derecha (pantalla de inicio). */ #btnBack{ margin-right:auto; } /* ---- Botones ---- */ .btn{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; border-radius:12px; border:none; cursor:pointer; padding:13px 24px; text-decoration:none; transition:transform .25s var(--ease-spring), box-shadow .25s, background .25s; } .btn:active{ transform:scale(.97); } .btn-primary{ background:var(--gold-500); color:var(--navy-900); position:relative; box-shadow:0 10px 24px -10px rgba(253,198,72,.6); } .btn-primary:hover{ background:var(--gold-600); box-shadow:0 14px 30px -10px rgba(253,198,72,.7); transform:translateY(-2px); } .btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease-spring); } .btn-primary:hover svg{ transform:translateX(3px); } .btn-back{ background:var(--gray-50); color:var(--ink-soft); } .btn-back:hover{ background:rgba(30,29,57,.08); color:var(--navy-800); } .btn-back:hover svg{ transform:translateX(-3px); } .btn-ghost{ background:transparent; color:var(--ink-soft); } .btn-ghost:hover{ background:rgba(30,29,57,.06); color:var(--navy-800); } .btn[aria-disabled="true"]{ opacity:.4; pointer-events:none; box-shadow:none; } .btn[hidden]{ display:none; } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } /* ---- Pantalla de acceso (sin token / inválido / expirado) ---- */ .access-gate{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:32px; overflow-y:auto; } .access-gate-card{ background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lift); padding:44px 40px; max-width:460px; width:100%; text-align:center; animation:riseIn .55s var(--ease-out) both; } .access-gate-card h2{ margin:0 0 12px; font-size:24px; } .access-gate-card .lead{ margin:0 auto; font-size:14px; } .access-gate-form{ margin-top:24px; text-align:left; display:flex; flex-direction:column; gap:14px; } .access-gate-field{ display:flex; flex-direction:column; gap:6px; } .access-gate-field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); } .access-gate-field input{ font-family:inherit; font-size:14.5px; color:var(--ink); border:1.5px solid var(--gray-100); border-radius:var(--radius-sm); padding:11px 13px; background:var(--gray-50); transition:border-color .18s ease; } .access-gate-field input:focus{ outline:none; border-color:var(--gold-500); background:var(--white); } .access-gate-error{ font-size:12.5px; color:#b23b3b; margin-top:2px; min-height:16px; } .access-gate-form .btn{ width:100%; justify-content:center; margin-top:4px; } /* ============ RESPONSIVE ============ */ /* En escritorio el panel ocupa la ventana y el scroll ocurre DENTRO del área de pasos: así el encabezado de bienvenida y la barra de progreso quedan siempre visibles, y la navegación Atrás/Continuar fija abajo. */ @media (min-width:981px){ .content-panel{ height:calc(100vh - 32px); } } @media (max-width:1180px){ .app{ grid-template-columns:300px 1fr; } .content-panel{ padding:36px 34px 22px; } .prep-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:980px){ .app{ grid-template-columns:1fr; } .side-panel{ padding:20px 20px 16px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px; } .side-copy, .stepper, .side-footer{ display:none; } .brand{ flex:1; } .content-panel{ border-radius:24px 24px 0 0; margin:0; padding:26px 20px 20px; min-height:auto; } /* En móvil el panel ya no tiene alto fijo (ver regla de arriba), así que el scroll interno de .steps-viewport queda sin espacio para activarse y termina "atrapando" el gesto de swipe sin dejarlo pasar a la página. Se desactiva ese contenedor de scroll interno y se deja que la página completa se desplace de forma normal. */ .steps-viewport{ overflow-y:visible; overscroll-behavior:auto; } .hub-greeting{ font-size:25px; } h2{ font-size:23px; } .doc-groups{ grid-template-columns:1fr; } .stage-top{ flex-direction:column; gap:16px; } .privacy-note{ max-width:none; } .hero-cards{ grid-template-columns:1fr; gap:12px; } .milestones{ flex-direction:column; align-items:flex-start; gap:12px; } .milestone-line{ display:none; } .player-mount{ max-height:none; } } @media (max-width:760px){ .yt-title{ display:none; } .prep-grid{ grid-template-columns:1fr 1fr; } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ============ IMPRESIÓN / EXPORTAR A PDF ============ El portal es una app de pantalla (wizard con pasos superpuestos y contenedores de alto fijo). Al imprimir, esos contenedores generaban páginas en blanco: acá se desarma el layout, se muestran todos los pasos en flujo normal y se quitan fondos y sombras. */ @media print{ @page{ size:A4; margin:12mm; } html,body{ height:auto !important; overflow:visible !important; background:#fff !important; color:#000; } body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } .bg-fx,.step-nav,.doc-menu,.yt-controls,.video-stage,.area-nav{ display:none !important; } .app{ display:block !important; min-height:0 !important; } .side-panel{ display:none !important; } .content-panel{ margin:0 !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; min-height:0 !important; overflow:visible !important; background:#fff !important; } .content-panel::before{ display:none !important; } .steps-viewport{ overflow:visible !important; height:auto !important; flex:none !important; } .steps-wrapper{ height:auto !important; min-height:0 !important; } .step{ position:static !important; opacity:1 !important; transform:none !important; pointer-events:auto !important; page-break-before:auto; break-before:auto; margin-bottom:14px; } .step-inner{ max-width:none !important; animation:none !important; } *{ box-shadow:none !important; text-shadow:none !important; animation:none !important; } .prep-card,.success-card,.doc-group,.area-card,.locked-card,.milestones,.chip,.tip-note,.privacy-note{ break-inside:avoid; page-break-inside:avoid; } h1,h2,h3{ break-after:avoid; page-break-after:avoid; } }