@import url(fuentes.css); /* creaweb: ventanas de macOS en escritorio, estilo iOS en móvil. Vidrio (vibrancy), violeta como color de marca. */ :root{color-scheme:dark; --bg:#070b14;--sup:rgba(20,28,48,.66);--sup2:rgba(255,255,255,.06);--sup3:rgba(255,255,255,.1);--bor:rgba(255,255,255,.09);--bor2:rgba(255,255,255,.17); --tx:#f5f2fc;--mu:#9aa9c6;--ac:#5b9dff;--ac2:#2563eb;--cy:#38bdf8;--ok:#34d399;--av:#fbbf24;--er:#ff6b81; --campo:rgba(8,5,16,.45);--tit:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));--hueco:rgba(0,0,0,.18);--chip-on:rgba(255,255,255,.06);--r:14px;--sombra:0 0 0 .5px rgba(0,0,0,.7),0 22px 60px -12px rgba(0,0,0,.65),0 8px 20px -8px rgba(0,0,0,.5); --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace} :root[data-tema=claro]{color-scheme:light; --bg:#e9f0fb;--sup:rgba(255,255,255,.76);--sup2:rgba(30,64,140,.05);--sup3:rgba(30,64,140,.09);--bor:rgba(30,64,140,.12);--bor2:rgba(30,64,140,.22); --tx:#0f1b33;--mu:#5a6785;--ac:#2563eb;--ac2:#1d4ed8;--cy:#0284c7;--ok:#0f9d63;--av:#b97a05;--er:#d6334a; --campo:rgba(255,255,255,.85);--tit:linear-gradient(180deg,rgba(255,255,255,.9),rgba(232,240,253,.6));--hueco:rgba(30,64,140,.1);--sombra:0 0 0 .5px rgba(30,64,140,.2),0 22px 50px -14px rgba(30,64,175,.3),0 6px 16px -8px rgba(30,64,175,.2)} *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility} /* fondo tipo escritorio de macOS */ body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(52rem 38rem at 8% -8%,rgba(37,99,235,.42),transparent 62%),radial-gradient(46rem 34rem at 96% 10%,rgba(56,189,248,.2),transparent 60%),radial-gradient(50rem 40rem at 70% 112%,rgba(59,130,246,.22),transparent 62%),radial-gradient(40rem 30rem at -6% 96%,rgba(96,165,250,.16),transparent 60%),var(--bg)} :root[data-tema=claro] body::before{background:radial-gradient(52rem 38rem at 8% -8%,rgba(125,175,255,.55),transparent 62%),radial-gradient(46rem 34rem at 96% 10%,rgba(56,189,248,.28),transparent 60%),radial-gradient(50rem 40rem at 70% 112%,rgba(147,197,253,.4),transparent 62%),var(--bg)} a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline} ::selection{background:rgba(91,157,255,.4)} .ico{flex:none} /* ===== splash de carga ===== */ #splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:26px;background:var(--bg);transition:opacity .5s,visibility .5s} #splash::before{content:'';position:absolute;inset:0;background:radial-gradient(40rem 30rem at 50% 42%,rgba(59,130,246,.4),transparent 65%);animation:respira 3s ease-in-out infinite} #splash.fuera{opacity:0;visibility:hidden} .splash-icono{position:relative;width:112px;height:112px;animation:flota 3s ease-in-out infinite} .splash-icono img{width:100%;height:100%;display:block;filter:drop-shadow(0 18px 34px rgba(37,99,235,.6))} .splash-icono::after{content:'';position:absolute;inset:-16px;border-radius:50%;border:2px solid transparent;border-top-color:var(--ac);border-right-color:var(--cy);animation:giro 1.3s linear infinite;opacity:.9} .splash-icono::before{content:'';position:absolute;inset:-30px;border-radius:50%;border:1.5px solid transparent;border-bottom-color:rgba(56,189,248,.55);animation:giro 2.4s linear infinite reverse} .splash-marca{position:relative;font:600 1.9rem var(--mono);letter-spacing:-.04em;margin:0} .splash-carga{position:relative;width:170px;height:4px;border-radius:99px;background:var(--bor2);overflow:hidden} .splash-carga i{position:absolute;inset:0;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--ac2),var(--cy));animation:barrido 1.15s ease-in-out infinite} .splash-txt{position:relative;margin:-10px 0 0;font:500 .74rem var(--mono);color:var(--mu);letter-spacing:.12em;text-transform:uppercase} @keyframes flota{50%{transform:translateY(-8px)}}@keyframes respira{50%{opacity:.55}}@keyframes giro{to{transform:rotate(360deg)}}@keyframes barrido{0%{left:-40%}100%{left:100%}} /* barra de progreso superior (mientras hay peticiones) */ #carga{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:60;pointer-events:none;opacity:0;transition:opacity .25s;background:linear-gradient(90deg,transparent,var(--ac2),var(--cy),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:barrido-top 1s linear infinite} #carga.on{opacity:1} @keyframes barrido-top{0%{background-position:-60% 0}100%{background-position:160% 0}} /* ===== marca ===== */ .marca{display:flex;align-items:center;gap:10px;color:var(--tx);font:600 1.08rem var(--mono);letter-spacing:-.04em}.marca:hover{text-decoration:none} .marca img{width:30px;height:30px;display:block;filter:drop-shadow(0 4px 10px rgba(37,99,235,.5))} .marca b,.splash-marca b,.dosc{font-weight:700;background:linear-gradient(100deg,var(--ac),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent} .marca small{font:500 .64rem var(--mono);color:var(--mu);border:1px solid var(--bor2);padding:1px 7px;border-radius:99px;letter-spacing:.04em} /* ===== barra de herramientas (menú de macOS) ===== */ .barra{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-bottom:1px solid var(--bor)} .barra-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;min-height:54px} .nav{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--sup2);border:1px solid var(--bor)} .nav a{display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:8px;color:var(--mu);font:500 .86rem var(--sans);white-space:nowrap;transition:all .15s} .nav a:hover{color:var(--tx);text-decoration:none}.nav a[aria-current]{color:var(--tx);background:var(--sup3);box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 .5px 0 rgba(255,255,255,.12)} .der{display:flex;align-items:center;gap:6px;margin-left:auto} .yo{font:500 .76rem var(--mono);color:var(--mu);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .actividad{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 9px;border-radius:99px;background:color-mix(in srgb,var(--ac) 16%,transparent);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);color:var(--tx);font:500 .76rem var(--mono);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .actividad:hover{text-decoration:none;border-color:var(--ac)} /* barra de pestañas inferior (iOS) */ .tabbar{display:none} main{max-width:1180px;margin:0 auto;padding:30px 20px 100px} @media(max-width:700px){ .barra-in{padding:0 16px;gap:10px;min-height:50px}.barra .nav,.yo{display:none} .tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:50;padding:6px;border-radius:26px;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);border:1px solid var(--bor2);box-shadow:var(--sombra)} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:20px;color:var(--mu);font:500 .66rem var(--sans)} .tabbar a svg{width:22px;height:22px}.tabbar a:hover{text-decoration:none}.tabbar a[aria-current]{color:var(--tx);background:var(--sup3)} main{padding:18px 14px 120px} } /* ===== tipografía ===== */ h1{font-size:1.75rem;letter-spacing:-.04em;margin:0;font-weight:680;line-height:1.15}h2{font-size:1.02rem;margin:0 0 12px;font-weight:620;letter-spacing:-.015em}h3{font-size:.9rem;margin:0 0 8px} @media(max-width:700px){h1{font-size:2rem}} .cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px} .sub{color:var(--mu);font-size:.9rem;margin:5px 0 0} .k{font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--mu)} .mono{font-family:var(--mono)}.mu{color:var(--mu)}.peq{font-size:.82rem} /* ===== ventanas ===== */ .tarjeta{position:relative;background:var(--sup);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);border:1px solid var(--bor);border-radius:var(--r);padding:20px;margin:0 0 18px;box-shadow:var(--sombra)} @media(min-width:701px){ .tarjeta{padding:56px 22px 22px;border-radius:12px} .tarjeta::before{content:'';position:absolute;top:15px;left:16px;width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:0 0 0 .5px rgba(0,0,0,.25) inset,20px 0 #febc2e,40px 0 #28c840;z-index:1} .tarjeta::after{content:attr(data-t);position:absolute;top:0;left:0;right:0;height:42px;border-bottom:1px solid var(--bor);border-radius:12px 12px 0 0;background:var(--tit);display:flex;align-items:center;justify-content:center;padding:0 90px;font:500 .74rem var(--mono);color:var(--mu);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none} .tarjeta:hover::before{box-shadow:0 0 0 .5px rgba(0,0,0,.25) inset,20px 0 #febc2e,40px 0 #28c840} .tarjeta.sin-barra{padding:20px}.tarjeta.sin-barra::before,.tarjeta.sin-barra::after{display:none} details.tarjeta>summary{margin-top:-6px} } @media(max-width:700px){.tarjeta{border-radius:22px;padding:18px}} .tarjeta>h2:first-child,.tarjeta>.cab-t:first-child{margin-top:0} .cab-t{display:flex;align-items:center;gap:10px;margin-bottom:16px}.cab-t h2{margin:0} .num{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;font:600 .72rem var(--mono);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.42)} .rejilla{display:grid;gap:16px}.rejilla+.tarjeta{margin-top:18px}.tabs{margin-top:4px}.g2{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .item{display:block;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}.item:hover{border-color:color-mix(in srgb,var(--ac) 60%,transparent);text-decoration:none;transform:translateY(-3px)} .fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sep{justify-content:space-between} /* ===== estados y spinners ===== */ .estado{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 8px;border-radius:99px;border:1px solid var(--bor2);font:500 .72rem var(--mono);color:var(--mu);background:var(--sup2)} .estado i{width:7px;height:7px;border-radius:50%;background:var(--mu);flex:none} .estado.listo{color:var(--ok)}.estado.listo i{background:var(--ok);box-shadow:0 0 8px var(--ok)}.estado.error{color:var(--er)}.estado.error i{background:var(--er)} .estado.generando{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:color-mix(in srgb,var(--ac) 12%,transparent)} .estado.generando i{width:11px;height:11px;background:none;border:2px solid color-mix(in srgb,var(--ac) 28%,transparent);border-top-color:var(--ac);animation:giro .75s linear infinite} .estado.activo{color:var(--ok)}.estado.activo i{background:var(--ok)}.estado.invitado{color:var(--av)}.estado.invitado i{background:var(--av)}.estado.desactivado i{background:var(--er)} .spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ac) 28%,transparent);border-top-color:var(--ac);animation:giro .75s linear infinite;flex:none} .spin.g{width:26px;height:26px;border-width:3px} /* panel de «trabajando» */ .trabajo{overflow:hidden;background-image:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--ac) 16%,transparent) 50%,transparent 70%);background-size:220% 100%;animation:brillo 2.4s linear infinite} @keyframes brillo{from{background-position:150% 0}to{background-position:-50% 0}} .trabajo-cab{display:flex;align-items:center;gap:14px;position:relative} .orbe{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center} .orbe img{width:30px;height:30px;animation:flota 2.4s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(37,99,235,.55))} .orbe::before,.orbe::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid transparent} .orbe::before{border-top-color:var(--ac);border-right-color:var(--cy);animation:giro 1.1s linear infinite} .orbe::after{inset:6px;border-bottom-color:color-mix(in srgb,var(--cy) 60%,transparent);animation:giro 1.8s linear infinite reverse} .trabajo-txt{flex:1;min-width:0}.trabajo-txt strong{display:block;font-weight:600}@media(min-width:701px){.trabajo-txt strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} .puntos::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:puntos 1.4s steps(4,end) infinite} @keyframes puntos{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}} .crono{font:600 1.05rem var(--mono);color:var(--tx);letter-spacing:-.02em} progress{width:100%;height:7px;border-radius:99px;overflow:hidden;appearance:none;border:0;background:var(--sup3);position:relative} progress::-webkit-progress-bar{background:var(--sup3);border-radius:99px} progress::-webkit-progress-value{background:linear-gradient(90deg,var(--ac2),var(--ac),var(--cy));border-radius:99px;transition:width .6s}progress::-moz-progress-bar{background:var(--ac);border-radius:99px} .pasos{display:flex;gap:6px;margin:16px 0 2px;flex-wrap:wrap}.paso{flex:1;min-width:84px;padding:8px 10px;font:500 .72rem var(--mono);color:var(--mu);border-radius:9px;background:var(--sup2);border:1px solid var(--bor);display:flex;align-items:center;gap:7px} .paso.hecho{color:var(--ok)}.paso.hecho::before{content:'✓'}.paso.activo{color:var(--tx);border-color:color-mix(in srgb,var(--ac) 55%,transparent);background:color-mix(in srgb,var(--ac) 14%,transparent)}.paso.activo::before{content:'';width:9px;height:9px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ac) 30%,transparent);border-top-color:var(--ac);animation:giro .7s linear infinite} /* ===== formularios ===== */ label.c{display:block;font:500 .72rem var(--mono);color:var(--mu);margin:22px 0 8px;text-transform:uppercase;letter-spacing:.07em} .cab-t+div>label.c:first-child,.cab-t+form>div:first-child>label.c:first-child,form>.cols>div>label.c:first-child{margin-top:0} .cols>div>label.c{margin-top:16px}.cols{margin-bottom:2px} input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],input[type=number],input:not([type]),textarea,select{width:100%;padding:10px 13px;border:1px solid var(--bor2);border-radius:10px;background:var(--campo);color:var(--tx);font:400 .93rem/1.4 var(--sans);transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 1px 2px var(--hueco)} select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mu) 50%),linear-gradient(135deg,var(--mu) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px;cursor:pointer} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 26%,transparent)} textarea{min-height:100px;resize:vertical} input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--mu) 65%,transparent)} .ayuda{font-size:.8rem;color:var(--mu);margin:7px 0 0} .cols{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} /* selector de archivo propio (el del navegador usa su tipografía y textos en inglés) */ .archivo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.archivo input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.archivo .nombre{font:400 .85rem var(--mono);color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px} /* chips y tarjetas de opción */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{position:relative;cursor:pointer}.chip input{position:absolute;opacity:0;inset:0;cursor:pointer} .chip span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--bor2);border-radius:99px;background:var(--sup2);font:450 .86rem var(--sans);color:var(--mu);transition:all .15s;user-select:none} .chip:hover span{border-color:var(--ac);color:var(--tx)} .chip:has(input:checked) span{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 40%,transparent),color-mix(in srgb,var(--ac2) 40%,transparent));border-color:color-mix(in srgb,var(--ac) 70%,transparent);color:var(--tx);box-shadow:0 2px 12px -2px color-mix(in srgb,var(--ac2) 60%,transparent)} .chip:has(input:focus-visible) span{box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 38%,transparent)} .chip:has(input:disabled) span{opacity:.55;cursor:not-allowed} .opcs{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .opc{position:relative;cursor:pointer;display:block}.opc input{position:absolute;opacity:0;inset:0;cursor:pointer} .opc>div{height:100%;padding:13px 15px;border:1px solid var(--bor2);border-radius:13px;background:var(--sup2);transition:all .15s} .opc:hover>div{border-color:var(--ac);transform:translateY(-1px)} .opc:has(input:checked)>div{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,transparent);box-shadow:0 0 0 1.5px var(--ac) inset,0 8px 24px -10px color-mix(in srgb,var(--ac2) 70%,transparent)} .opc:has(input:focus-visible)>div{box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 38%,transparent)} .opc b{display:block;font-weight:600;font-size:.9rem}.opc small{color:var(--mu);font-size:.78rem;line-height:1.35;display:block;margin-top:3px} .paleta{display:flex;height:22px;border-radius:7px;overflow:hidden;margin-top:10px;border:1px solid var(--bor)}.paleta i{flex:1} /* control segmentado (iOS) */ .seg{display:inline-flex;padding:3px;gap:2px;border-radius:11px;background:var(--sup2);border:1px solid var(--bor)} .seg label{position:relative;cursor:pointer}.seg input{position:absolute;opacity:0;inset:0;cursor:pointer} .seg span{display:block;padding:7px 15px;font:500 .86rem var(--sans);color:var(--mu);border-radius:8px;transition:all .15s} .seg label:has(input:checked) span{background:var(--sup3);color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.15)} /* interruptor (iOS) */ .interruptor{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:.92rem;margin-top:16px} .interruptor input{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:99px;background:var(--bor2);position:relative;cursor:pointer;transition:background .2s;flex:none;border:0;padding:0;box-shadow:none} .interruptor input::after{content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .22s cubic-bezier(.3,1.4,.5,1)} .interruptor input:checked{background:linear-gradient(90deg,var(--ac2),var(--ac))}.interruptor input:checked::after{transform:translateX(18px)} .resumen{position:sticky;bottom:92px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border:1px solid var(--bor2);border-radius:16px;box-shadow:var(--sombra)} @media(min-width:701px){.resumen{bottom:14px}} .resumen .dato{font:500 .8rem var(--mono);color:var(--mu)}.resumen b{color:var(--tx)} /* ===== botones (una sola tipografía: Geist 500, siempre la misma en