html,body{height:100%;margin:0;padding:0}html,body{height:100dvh;margin:0;padding:0;overflow-x:hidden}app-root{display:block;width:100%;height:100%;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}:root{--primary-blue: #007bff;--primary-yellow: #ffc107;--dark-blue: #0056b3;--bg-white: #ffffff;--text-main: #333333;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--dark-yellow: #d39e00;--logo-red: #ff0000;--logo-blue-light: #4da3ff;--border-color: #eef2f6;--grey: #666;--white: #fff;--broken-white: #f9f9f9;--light-grey: #999;--transition-base: all .3s ease;--transition-drag: transform .25s cubic-bezier(0, 0, .2, 1);--shadow-light: 0 4px 15px rgba(0, 0, 0, .05);--shadow-heavy: 0 15px 30px rgba(0, 0, 0, .15);--neo-border: 2px solid #000;--neo-shadow: 2px 2px 0px #000;--light-blue: #00a8ff;--dark-blue: #0086cc;--dark-grey: #333;--grey: #6c757d;--light-grey: #a0a0a0;--border-color: #dee2e6;--white: #ffffff}body{margin:0;font-family:var(--font-family);background-color:var(--bg-white);color:var(--text-main)}.card-clean{background:#fff;padding:30px;position:sticky;box-shadow:8px 8px #00a8ff;background:var(--white);border-radius:30px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative;box-shadow:0 4px 6px #0000004d}.span-dark{display:block;font-weight:800;font-size:.8rem;color:#6c757d;text-transform:uppercase;margin-bottom:5px;letter-spacing:.5px}.span-pro{display:block;font-weight:900;font-size:.8rem;margin-bottom:10px;color:#444;text-transform:uppercase}.input-custom-clean{width:100%;padding:14px 18px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;font-family:inherit;margin-bottom:10px;box-sizing:border-box;background:#f8fafc;transition:all .2s ease}.label-seccion{display:block;font-size:.85rem;font-weight:800;color:#1e293b;letter-spacing:.05em;margin-bottom:12px}.pista{padding:20px;background-color:#fff9e6;border-radius:18px;border-left:5px solid #ffd43b}.span-pro{display:block;font-weight:900;font-size:.8rem;margin-bottom:10px;color:#444;text-transform:uppercase;letter-spacing:.5px}.input-neo{width:100%;box-sizing:border-box;border:none;background-color:var(--broken-white);border-radius:12px;padding:12px 15px;font-family:inherit;font-weight:700;font-size:1rem;outline:none}.textarea-neo{width:100%;box-sizing:border-box;border:none;background-color:var(--broken-white);border-radius:15px;padding:20px;font-family:inherit;font-weight:600;font-size:1.1rem;line-height:1.6;resize:vertical;outline:none}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.modal-card{background:#fff;border-radius:45px;width:100%;max-width:500px;padding:40px 35px;box-sizing:border-box;display:flex;flex-direction:column;box-shadow:0 4px 6px #0000004d}.modal-title{margin:0 0 20px;font-weight:850;font-size:2rem;color:#212529;text-align:center;letter-spacing:.5px}.modal-instruction{font-size:.95rem;color:#64748b;line-height:1.5;margin:0 0 24px}.max-width-large{max-width:560px}.modal-body{width:100%;display:flex;flex-direction:column;gap:20px;margin-bottom:10px}.scrollable-body{max-height:280px;overflow-y:auto;padding-right:4px}.modal-footer{width:100%;display:flex;justify-content:center;align-items:center;gap:15px;margin-top:1.5rem}.btn-cancelar{flex:1;background-color:#e9ecef;color:#495057;border:none;border-radius:30px;padding:15px 0;font-weight:850;cursor:pointer;text-align:center;text-transform:uppercase}.btn-generar{flex:1.3;background-color:#00a8ff;color:#fff;border:none;border-radius:30px;padding:15px 0;font-weight:850;cursor:pointer;text-align:center;box-shadow:0 8px 20px #00a8ff40;transition:transform .2s,filter .2s;text-transform:uppercase}.btn-generar.fill-width,.btn-cancelar.fill-width{max-width:220px;flex:1}.animate-pop{animation:softPop .3s cubic-bezier(.34,1.56,.64,1)}.btn-generar:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.btn-generar:disabled{background-color:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}@keyframes softPop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.btn-icon{background:none;border:none;cursor:pointer;padding:5px}.btn-icon img{width:20px;height:20px;transition:transform .2s}.btn-icon:hover img{transform:scale(1.2)}.mini-icon{width:14px;height:14px}.header-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:20px;flex-wrap:wrap}.title-main{font-size:2.2rem;font-weight:800;color:#0f172a;margin:0 0 .4rem;text-transform:uppercase}.head-title .subtitle{color:#64748b;font-size:1rem;margin:0}.actions-row-unified{display:flex;gap:12px;align-items:center}.btn-icon-m{background:#f1f5f9;border:none;width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .1s ease}.btn-icon-m:hover{background:#e2e8f0;transform:scale(1.05)}.btn-icon-m img{width:22px;height:22px}.btn-back{background:#fff;border:1px solid #e2e8f0;width:45px;height:45px;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 6px #00000003;transition:all .2s}.btn-back:hover{background:#f7fafc;transform:translate(-2px)}.header-2{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}.secondary-header{font-size:1.6rem;font-weight:800;margin:0;text-transform:uppercase;color:#1a202c}.header-2 .subtext{font-size:.85rem;color:#718096;font-weight:600}.header-left{display:flex;align-items:center;gap:15px}.btn-back{background:#fff;border:1px solid #e2e8f0;width:45px;height:45px;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 4px #00000005;transition:all .2s ease}.btn-back:hover{background:#f8fafc;border-color:#cbd5e1;transform:translate(-2px)}.success-overlay,.error-overlay{position:absolute;inset:-4px;border:4px solid #000000;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;box-sizing:border-box}.success-overlay{background:#a3e635fa;animation:fadeIn .3s ease-out forwards}.error-overlay{background:#ff5d5d;animation:fadeIn .2s ease-in forwards}.success-card,.error-card{text-align:center;background:#fff;padding:30px 20px;border:4px solid black;box-shadow:8px 8px #000;max-width:420px;width:100%;box-sizing:border-box}.success-card{animation:slideUpBounce .6s cubic-bezier(.175,.885,.32,1.275) forwards}.error-card{transform:rotate(1deg)}.big-icon{font-size:clamp(3rem,8vw,4.5rem);display:block;margin-bottom:12px;filter:drop-shadow(3px 3px 0px black)}.success-card .big-icon{animation:trophyJump 2s infinite ease-in-out}.success-card h1,.error-card h1{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:900;margin:8px 0;text-transform:uppercase;line-height:1.1}.success-card p,.error-card p{font-size:.95rem;line-height:1.4;margin:6px 0}.btn-continuar,.btn-reintentar{margin-top:16px;padding:14px 28px;font-size:1rem;font-weight:900;text-transform:uppercase;cursor:pointer;border:4px solid #000000;transition:all .1s;width:100%;box-sizing:border-box}.btn-continuar{background:#22d3ee;color:#000;box-shadow:4px 4px #000}.btn-continuar:hover{background:#06b6d4;transform:translate(-1px,-1px);box-shadow:5px 5px #000}.btn-reintentar{background:#000;color:#fff;box-shadow:4px 4px #ff5d5d}.btn-continuar:active,.btn-reintentar:active{transform:translate(3px,3px);box-shadow:0 0 0 transparent}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpBounce{0%{transform:translateY(30px) rotate(2deg);opacity:0}to{transform:translateY(0) rotate(-.5deg);opacity:1}}@keyframes trophyJump{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.03)}}@media(max-width:1024px){.header-actions h1{font-size:1.8rem}.card-clean{padding:20px}}@media(max-width:768px){.header-actions{flex-direction:column;align-items:flex-start;gap:15px;margin-bottom:25px;width:100%}.header-actions h1{text-align:left;font-size:1.6rem}.actions-row-unified{justify-content:flex-start;width:100%}}.borde-neon{overflow:visible!important}.borde-neon:before{content:"";position:absolute;inset:-6px;background:linear-gradient(90deg,#0ff,#f0f,#0ff,#f0f);background-size:300% 300%;border-radius:24px;animation:fluir-colores 3s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:6px;z-index:5}.borde-oro{overflow:visible!important;position:relative}.borde-oro:before{content:"";position:absolute;inset:-8px;background:linear-gradient(90deg,gold,#fff5b1,#fc0,gold);background-size:300% 300%;border-radius:24px;animation:fluir-colores 3s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:6px;z-index:5;filter:drop-shadow(0 0 4px rgba(255,215,0,.6))}.borde-oro:after{content:"";position:absolute;inset:-2px;border-radius:18px;pointer-events:none;z-index:4;background:linear-gradient(135deg,#fff5b173,#ffd7004d,#b8860b80);-webkit-backdrop-filter:sepia(1) hue-rotate(15deg) saturate(2.5) contrast(1.25) brightness(.95);backdrop-filter:sepia(1) hue-rotate(15deg) saturate(2.5) contrast(1.25) brightness(.95);border:1px solid rgba(255,255,255,.3)}.btn-help{background:#3b82f6!important;color:#fff!important;border:none!important;width:20px!important;height:20px!important;border-radius:50%!important;font-weight:700!important;font-size:13px!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:all .2s ease!important;padding:0!important}.btn-help:hover{background:#1d4ed8!important;transform:scale(1.1)!important}.modal-overlay{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;background:#1e293bbf!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;display:flex!important;justify-content:center!important;align-items:center!important;z-index:9999!important}@keyframes modalEnter{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.modal-box-ayuda{background:#fff!important;width:90%!important;max-width:500px!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;box-shadow:0 20px 40px #0003!important;margin:auto!important;animation:modalEnter .25s ease-out!important}.ayuda-header{padding:16px 20px!important;background:#f8fafc!important;border-bottom:1px solid #e2e8f0!important;display:flex!important;justify-content:space-between!important;align-items:center!important}.ayuda-title-container h2{font-size:1.15rem!important;font-weight:700!important;color:#1e293b!important;margin:0!important}.close-x{background:none!important;border:none!important;font-size:32px!important;color:#94a3b8!important;cursor:pointer!important;line-height:1!important;padding:0!important;transition:color .2s!important}.close-x:hover{color:#ef4444!important}.ayuda-content{padding:20px!important}.ayuda-intro{margin:0 0 16px!important;color:#475569!important;font-size:14px!important;line-height:1.5!important}.pasos-ayuda-list{display:flex!important;flex-direction:column!important;gap:12px!important}.paso-ayuda-item{display:flex!important;gap:12px!important}.paso-numero{background:#eff6ff!important;color:#2563eb!important;font-weight:700!important;font-size:12px!important;width:24px!important;height:24px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;border:1px solid #bfdbfe!important}.paso-texto h3{margin:0 0 2px!important;font-size:13.5px!important;color:#1e293b!important;font-weight:600!important}.paso-texto p,.paso-texto li{margin:0!important;font-size:12.5px!important;color:#64748b!important;line-height:1.4!important}.ayuda-footer{padding:12px 20px!important;background:#f8fafc!important;border-top:1px solid #e2e8f0!important;display:flex!important;justify-content:flex-end!important}.btn-ayuda-entendido{padding:8px 20px!important;border-radius:6px!important;border:none!important;background:#3b82f6!important;color:#fff!important;font-weight:600!important;font-size:13px!important;cursor:pointer!important;transition:background .15s!important}.btn-ayuda-entendido:hover{background:#2563eb!important}.modal-box-ayuda{background:#fff!important;width:90%!important;min-width:500px!important;max-width:1000px!important;max-height:70vh!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;box-shadow:0 20px 40px #0003!important;margin:auto!important;animation:modalEnter .25s ease-out!important;overflow:hidden!important}.pasos-ayuda-list{display:block!important;column-width:380px!important;column-gap:24px!important}.modal-box-ayuda{background:#fff!important;width:90%!important;min-width:320px!important;max-width:1100px!important;max-height:80vh!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;box-shadow:0 20px 40px #0003!important;margin:auto!important;animation:modalEnter .25s ease-out!important;overflow:hidden!important}.ayuda-content{padding:20px!important;flex:1!important;overflow-y:auto!important}.pasos-ayuda-list{display:block!important;column-width:360px!important;column-gap:24px!important}.paso-ayuda-item{display:flex!important;gap:12px!important;align-items:flex-start!important;background:#f8fafc!important;padding:16px!important;border-radius:8px!important;box-sizing:border-box!important;break-inside:avoid-column!important;-webkit-column-break-inside:avoid!important;page-break-inside:avoid!important;margin-bottom:16px!important}@media(max-width:1024px){.modal-box-ayuda{width:95%!important;max-height:85vh!important}.pasos-ayuda-list{column-width:320px!important;column-gap:20px!important}}@media(max-width:767px){.modal-box-ayuda{width:95%!important;max-height:90vh!important;border-radius:16px!important}.ayuda-header{padding:14px 16px!important}.ayuda-content{padding:16px!important}.ayuda-title-container h2{font-size:1.05rem!important}.pasos-ayuda-list{column-count:1!important;column-width:auto!important;display:flex!important;flex-direction:column!important;gap:12px!important}.paso-ayuda-item{width:100%!important;min-width:0!important;margin-bottom:0!important;padding:14px!important}.ayuda-footer{padding:12px 16px!important}.btn-ayuda-entendido{width:100%!important;text-align:center!important}}@keyframes fluir-colores{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes glow{0%{box-shadow:0 0 5px #ffca28}to{box-shadow:0 0 20px #ffca28}}.borde-radiactivo{overflow:visible!important;position:relative;filter:contrast(12) brightness(1.1);background:#2d7737;border-radius:28px}.borde-radiactivo:before{content:"";position:absolute;inset:-6px;border-radius:28px;padding:8px;z-index:5;background:#39ff14;background-size:250% 250%;filter:blur(4px);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:humo-liquido-toxico 3.5s ease-in-out infinite alternate}.borde-radiactivo:after{content:"";position:absolute;inset:-6px;border-radius:24px;pointer-events:none;z-index:6;box-shadow:inset 0 0 10px #39ff1480;animation:pulso-radiacion 1.5s ease-in-out infinite alternate}@keyframes humo-liquido-toxico{0%{background-position:0% 20%;transform:rotate(0) scale(1)}50%{background-position:100% 80%;transform:scale(1.03);filter:blur(5px) hue-rotate(30deg)}to{background-position:50% 100%;transform:rotate(1deg) scale(.98)}}@keyframes pulso-radiacion{0%{filter:drop-shadow(0 0 2px #39ff14);opacity:.6}to{filter:drop-shadow(0 0 14px #00ff66);opacity:1}}.borde-fuego:before{content:"";position:absolute;inset:-6px;border-radius:24px;padding:6px;z-index:5;background:radial-gradient(ellipse at 30% 80%,#ffcc00 0%,transparent 50%),radial-gradient(ellipse at 70% 90%,#ff3300 10%,transparent 60%),radial-gradient(circle at 50% 100%,#ffffff 0%,transparent 40%),linear-gradient(0deg,#300,red,#fa0);background-size:200% 300%;filter:blur(4px);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fuego-flicker .8s ease-in-out infinite alternate}.borde-fuego:after{content:"";position:absolute;inset:-20px -10px -6px;border-radius:24px;pointer-events:none;z-index:6;background:radial-gradient(circle at 20% 80%,#ffcc00 2px,transparent 3px),radial-gradient(circle at 80% 40%,#ff6a00 1px,transparent 2px),radial-gradient(circle at 40% 20%,#ffcc00 1.5px,transparent 2.5px),radial-gradient(circle at 70% 70%,#ff3300 2px,transparent 4px);background-size:100% 150px;filter:drop-shadow(0 0 4px #ffaa00);animation:chispas-subiendo 1.2s linear infinite}@keyframes fuego-flicker{0%,to{opacity:.95}50%{opacity:1}}@keyframes chispas-subiendo{0%{background-position:0px 150px;opacity:0}10%{opacity:1}90%{opacity:1}to{background-position:-10px 0px;opacity:0}}.borde-glitch{overflow:visible!important;position:relative}.borde-glitch:before{content:"";position:absolute;inset:-8px;border-radius:0;padding:6px;z-index:5;background:linear-gradient(90deg,#0ff 20%,#f05,#fff,#0ff 80%);background-size:400% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fluir-colores .5s linear infinite,glitch-lineas-rotas .8s steps(2) infinite}.borde-hielo{overflow:visible!important;position:relative;box-shadow:0 0 15px #87dcff66;border-radius:24px}.borde-hielo:before{content:"";position:absolute;inset:-6px;border-radius:24px;padding:7px;z-index:5;background:linear-gradient(135deg,#fff,#7cd9ff 25%,#fff 45%,#09f 70%,#bfefff);background-size:200% 200%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fluir-colores 6s ease-in-out infinite alternate}.borde-hielo:after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:4;background:linear-gradient(45deg,rgba(255,255,255,.4) 0%,transparent 70%),radial-gradient(ellipse at top left,#8ce1ff4d,#0050b426);-webkit-backdrop-filter:blur(2.5px) saturate(.6) brightness(1.1);backdrop-filter:blur(2.5px) saturate(.6) brightness(1.1);border:1px solid rgba(255,255,255,.5)}@keyframes glitch-lineas-rotas{0%,to{clip-path:inset(0 0 0 0)}20%{clip-path:inset(10% 0 85% 0)}40%{clip-path:inset(60% 0 15% 0)}60%{clip-path:inset(35% 0 40% 0)}80%{clip-path:inset(5% 0 92% 0)}}
