:root{--bg:#f6f7fb;--tarjeta:#fff;--texto:#1e293b;--suave:#64748b;--borde:#e2e8f0;--marca:#4f46e5;--marca2:#7c3aed;--ok:#059669;--aviso:#d97706;--mal:#dc2626;--sombra:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);--radio:16px}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){--bg:#0b1020;--tarjeta:#131a2e;--texto:#e2e8f0;--suave:#94a3b8;--borde:#243049;--sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}}
:root[data-tema=oscuro]{--bg:#0b1020;--tarjeta:#131a2e;--texto:#e2e8f0;--suave:#94a3b8;--borde:#243049;--sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--texto);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--marca);text-decoration:none}a:hover{text-decoration:underline}
main{max-width:1180px;margin:0 auto;padding:24px 18px 64px}
h1{font-size:1.7rem;margin:.2em 0 .3em;letter-spacing:-.02em}h2{font-size:1.15rem;margin:1.4em 0 .6em}h3{margin:.2em 0}
.barra{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--tarjeta) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.barra .in{max-width:1180px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.15rem;margin-right:14px;background:linear-gradient(135deg,var(--marca),var(--marca2));-webkit-background-clip:text;background-clip:text;color:transparent}
.barra a.nav{color:var(--suave);padding:6px 12px;border-radius:999px;font-weight:600}.barra a.nav:hover,.barra a.nav.on{background:color-mix(in srgb,var(--marca) 12%,transparent);color:var(--marca);text-decoration:none}
.espacio{flex:1}.quien{color:var(--suave);font-size:.85rem}
button,.boton{font:inherit;font-weight:600;border:0;border-radius:12px;padding:9px 16px;cursor:pointer;background:linear-gradient(135deg,var(--marca),var(--marca2));color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.3);display:inline-block;text-decoration:none}
button:hover,.boton:hover{filter:brightness(1.08);text-decoration:none}
button.suave,.boton.suave{background:var(--tarjeta);color:var(--texto);border:1px solid var(--borde);box-shadow:none}
button.verde{background:linear-gradient(135deg,#059669,#10b981)}button.ambar{background:linear-gradient(135deg,#d97706,#f59e0b)}
input,select,textarea{font:inherit;color:var(--texto);background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:9px 12px;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--marca) 45%,transparent);border-color:var(--marca)}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px}
.mosaicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:14px 0 22px}
.mosaico{padding:16px 18px}.mosaico b{display:block;font-size:2rem;line-height:1.1;letter-spacing:-.03em}.mosaico span{color:var(--suave);font-size:.85rem}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}.filtros input[type=search]{flex:1;min-width:200px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.ficha{display:flex;flex-direction:column;gap:10px;transition:transform .15s,box-shadow .15s;color:inherit}.ficha:hover{transform:translateY(-3px);text-decoration:none;box-shadow:0 2px 4px rgba(15,23,42,.08),0 14px 34px rgba(15,23,42,.12)}
.ficha h3{font-size:1.05rem}.fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.suave{color:var(--suave)}.pequeno{font-size:.82rem}
.codigo{font:600 .78rem ui-monospace,Menlo,Consolas,monospace;color:var(--suave);background:color-mix(in srgb,var(--suave) 14%,transparent);padding:2px 8px;border-radius:8px}
.insignia{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.76rem;font-weight:700}
.e-borrador{background:#e2e8f0;color:#334155}.e-en_revision{background:#fef3c7;color:#92400e}.e-aprobado{background:#d1fae5;color:#065f46}.e-archivado{background:#e5e7eb;color:#6b7280}

.s-alta{background:#fee2e2;color:#991b1b}.s-media{background:#ffedd5;color:#9a3412}.s-baja{background:#fef9c3;color:#854d0e}
.p-alto{background:#d1fae5;color:#065f46}.p-medio{background:#fef3c7;color:#92400e}.p-bajo{background:#e5e7eb;color:#374151}
.barra-prog{height:8px;border-radius:99px;background:var(--borde);overflow:hidden}.barra-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--marca),var(--marca2))}
.barra-prog.ok i{background:linear-gradient(90deg,#10b981,#059669)}.barra-prog.baja i{background:linear-gradient(90deg,#f59e0b,#d97706)}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 14px;border-bottom:1px solid var(--borde);padding-bottom:10px}
.pestanas button{background:transparent;color:var(--suave);box-shadow:none;padding:8px 14px}.pestanas button.on{background:color-mix(in srgb,var(--marca) 13%,transparent);color:var(--marca)}
.panel-tab{display:none}.panel-tab.on{display:block}
.pasos{list-style:none;margin:0;padding:0;counter-reset:p}.pasos li{position:relative;padding:12px 14px 12px 52px;margin-bottom:10px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;counter-increment:p}
.pasos li:before{content:counter(p);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--marca),var(--marca2));color:#fff;font-weight:700;display:grid;place-items:center;font-size:.85rem}
.pasos .dec{border-left:4px solid var(--aviso)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{background:color-mix(in srgb,var(--marca) 11%,transparent);color:var(--marca);padding:3px 11px;border-radius:999px;font-size:.82rem;font-weight:600}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:760px){.dos{grid-template-columns:1fr}}
.mermaid{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:18px;text-align:center;overflow:auto}
.linea{border-left:3px solid var(--borde);padding:2px 0 14px 16px;margin-left:6px;position:relative}.linea:before{content:"";position:absolute;left:-8px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--marca)}
.dif{font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--borde);border-radius:12px;overflow:hidden}.dif div{padding:2px 12px;white-space:pre-wrap}.dif .mas{background:#dcfce7;color:#14532d}.dif .menos{background:#fee2e2;color:#7f1d1d}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--borde);vertical-align:top}th{color:var(--suave);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.barras .fila{margin:9px 0}.barras .et{width:190px;flex:none;font-size:.9rem}.barras .barra-prog{flex:1}.barras b{width:34px;text-align:right}
.aviso{background:color-mix(in srgb,var(--aviso) 14%,transparent);border:1px solid color-mix(in srgb,var(--aviso) 40%,transparent);padding:10px 14px;border-radius:12px;margin-bottom:14px}
.centro{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(1000px 500px at 80% -10%,color-mix(in srgb,var(--marca) 22%,transparent),transparent),var(--bg)}
.login{width:min(420px,100%)}.login h1{text-align:center}.login label{display:block;font-weight:600;margin:12px 0 4px}.login input{width:100%}.login button{width:100%;margin-top:18px;padding:12px}
.error{background:#fee2e2;color:#991b1b;padding:10px 14px;border-radius:12px;margin-bottom:10px}
.vacio{text-align:center;color:var(--suave);padding:40px}
@media print{.barra,.pestanas,.filtros,button,.boton{display:none!important}.panel-tab{display:block!important}body{background:#fff;color:#000}.tarjeta{box-shadow:none}}
/* ===== Páginas públicas, registro y QR ===== */
.barra.publica .in{max-width:1180px}
.pie{text-align:center;color:var(--suave);font-size:.82rem;padding:26px 16px 34px}
.hero{position:relative;overflow:hidden;padding:72px 18px 64px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--marca) 14%,var(--bg)),var(--bg) 70%)}
.hero.corto{padding:48px 18px 36px}
.hero-in{position:relative;z-index:1;max-width:820px;margin:0 auto}
.etiqueta{display:inline-block;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--marca) 14%,transparent);color:var(--marca);font-weight:700;font-size:.85rem}
.gigante{font-size:clamp(2.1rem,6vw,3.9rem);line-height:1.08;margin:.4em 0 .3em;letter-spacing:-.035em}
.degradado{background:linear-gradient(120deg,var(--marca),#ec4899,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:flujo 6s ease infinite}
@keyframes flujo{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.lead{font-size:1.15rem;color:var(--suave);max-width:640px;margin:0 auto 24px}
.centrar{justify-content:center}.centrado{text-align:center;margin-top:2em}
.boton.grande,button.grande{padding:13px 24px;font-size:1.02rem;border-radius:14px}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:flota 14s ease-in-out infinite}
.blob.b1{width:340px;height:340px;background:#818cf8;left:-80px;top:-60px}
.blob.b2{width:300px;height:300px;background:#f472b6;right:-60px;top:40px;animation-delay:-5s}
.blob.b3{width:260px;height:260px;background:#fbbf24;left:40%;bottom:-120px;animation-delay:-9s;opacity:.3}
@keyframes flota{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,26px) scale(1.12)}}
.contadores{margin-top:-8px}.contadores .mosaico{text-align:center}
.pasos3 .paso{position:relative;padding-top:30px}.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--marca),var(--marca2));color:#fff;font-weight:800;font-size:.9rem;flex:none}
.paso .num{position:absolute;top:-14px;left:18px;box-shadow:0 4px 12px rgba(79,70,229,.4)}
.rejilla>.tarjeta{transition:transform .18s,box-shadow .18s}.rejilla>.tarjeta:hover{transform:translateY(-3px)}
.cta{text-align:center;margin-top:34px;background:linear-gradient(135deg,color-mix(in srgb,var(--marca) 12%,var(--tarjeta)),var(--tarjeta))}
.qrs{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.qr{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.qr .marco,.marco{padding:14px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.18);position:relative}
.qr .marco:before{content:"";position:absolute;inset:-4px;border-radius:28px;z-index:-1;background:linear-gradient(135deg,var(--c1),var(--c2));animation:pulso 3s ease-in-out infinite}
.qr.tg{--c1:#06b6d4;--c2:#3b82f6}.qr.rg{--c1:#6366f1;--c2:#ec4899}.qr.en{--c1:#8b5cf6;--c2:#f59e0b}
@keyframes pulso{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
.marco img{display:block;width:100%;max-width:260px;height:auto}.marco.chico{display:inline-block;margin:10px 0}.marco.chico img{max-width:190px}
.enlace{display:block;max-width:100%;overflow-wrap:anywhere;font-size:.8rem;background:color-mix(in srgb,var(--suave) 12%,transparent);padding:6px 10px;border-radius:10px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:color-mix(in srgb,var(--suave) 14%,transparent);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.centro.registro{display:block;padding:34px 16px}
.registro-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media(max-width:860px){.registro-grid{grid-template-columns:1fr}}
.lateral{padding:26px;border-radius:var(--radio);color:#fff;background:linear-gradient(150deg,var(--marca),var(--marca2) 55%,#ec4899)}
.lateral a{color:#fff;text-decoration:underline}.lateral .suave{color:rgba(255,255,255,.85)}
.beneficios{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}.beneficios li{background:rgba(255,255,255,.16);padding:9px 12px;border-radius:12px;font-weight:600}
.formulario label{display:block;font-weight:600;margin:12px 0 4px}.formulario input:not([type=radio]):not([type=checkbox]){width:100%}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}@media(max-width:620px){.cols{grid-template-columns:1fr}}
.chips-radio{display:flex;flex-wrap:wrap;gap:8px}.chips-radio .opcion{margin:0;font-weight:600}
.chips-radio input{position:absolute;opacity:0;pointer-events:none}.chips-radio span{display:inline-block;padding:7px 14px;border:1px solid var(--borde);border-radius:999px;cursor:pointer;transition:all .15s}
.chips-radio input:checked+span{background:linear-gradient(135deg,var(--marca),var(--marca2));color:#fff;border-color:transparent;transform:scale(1.04)}
.chips-radio input:focus-visible+span{outline:2px solid var(--marca);outline-offset:2px}
.con-ojo{position:relative}.con-ojo input{padding-right:48px!important}.ojo{position:absolute;right:4px;top:3px;padding:5px 9px;box-shadow:none;border:0;background:transparent}
.fuerza{height:7px;border-radius:99px;background:var(--borde);margin:8px 0 4px;overflow:hidden}.fuerza i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s,background .25s}
.check{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important}.check input{margin-top:4px;flex:none}
.formulario button.grande{width:100%;margin-top:16px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.exito{background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);padding:10px 14px;border-radius:12px;margin-bottom:10px}
.ok-txt{color:var(--ok)}.mal-txt{color:var(--mal)}
.gracias{max-width:760px}.celebracion{text-align:center;padding:30px 24px}.grande-emoji{font-size:3.4rem;animation:salto 1.2s ease infinite}@keyframes salto{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pasos-final{display:grid;gap:14px;text-align:left;margin-top:22px}.paso-f{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--borde);border-radius:16px;background:color-mix(in srgb,var(--marca) 4%,var(--tarjeta))}
#confeti{position:fixed;inset:0;pointer-events:none;z-index:20;width:100%;height:100%}
.chat{display:grid;gap:8px;margin:10px 0 14px;max-height:340px;overflow:auto}.burbuja{padding:9px 13px;border-radius:14px;max-width:88%;white-space:pre-wrap}
.burbuja.yo{justify-self:end;background:linear-gradient(135deg,var(--marca),var(--marca2));color:#fff}.burbuja.ia{justify-self:start;background:color-mix(in srgb,var(--suave) 14%,transparent)}
@media print{.hero,.pie,.barra,.blob{display:none!important}.qr .marco:before{display:none}.marco{box-shadow:none;border:1px solid #999}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
