/* Pantalla de login (welcome.php): formulario a la izquierda y foto del CAEX en el panel derecho, con el borde izquierdo de la foto difuminado hacia el blanco. */
#lg{
	--lg-ink:#101828; --lg-ink2:#344054; --lg-muted:#667085; --lg-line:#D0D5DD; --lg-brand:#1570EF; --lg-orange:#F18E00; --lg-ok:#32D583;
	position:fixed;inset:0;z-index:1000;margin:0!important;overflow:hidden;
	background:#fff;font-family:var(--font-main,'Inter',Arial,sans-serif);color:var(--lg-ink);text-align:left
}
#lg *{box-sizing:border-box}
.lg-left{position:absolute;top:0;bottom:0;left:0;width:520px;z-index:3;display:flex;align-items:center;justify-content:center;padding:32px;overflow:auto}
.lg-form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.lg-logo{display:block;width:230px;height:24px;margin-bottom:10px}
#lg h2{margin:0;font-size:26px;font-weight:600;color:var(--lg-ink);letter-spacing:-.01em}
.lg-sub{margin:-6px 0 4px;font-size:14px;color:var(--lg-muted)}
.lg-msg{font-size:13px;color:#B42318;background:#FEF3F2;border:1px solid #FECDCA;border-radius:8px;padding:8px 10px}
.lg-ok{font-size:13px;color:#067647;background:#ECFDF3;border:1px solid #ABEFC6;border-radius:8px;padding:8px 10px}
.lg-field{display:flex;flex-direction:column;gap:6px}
.lg-field label{font-size:13px;font-weight:600;color:var(--lg-ink)}
#lg .lg-field input{width:100%;height:44px;margin:0;border-radius:10px;border:1px solid var(--lg-line);padding:0 12px;font-size:15px;background:#fff;color:var(--lg-ink);box-shadow:none}
#lg .lg-field input:focus{outline:none;border-color:var(--lg-brand);box-shadow:0 0 0 4px rgba(21,112,239,.15)}
.lg-row{font-size:13px;color:var(--lg-ink2);display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#lg a.lg-link,#lg .lg-row a{color:var(--lg-orange);font-weight:600;text-decoration:none}
#lg .lg-go{width:100%;height:46px;margin:4px 0 0;border:0;border-radius:10px;background:linear-gradient(135deg,#1570EF,#0B5CAD);color:#fff;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 10px 24px -12px rgba(21,112,239,.8)}
#lg .lg-go:hover{filter:brightness(1.07)}
.lg-live{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--lg-ink);border-top:1px solid #EAECF0;padding-top:14px;margin-top:4px}
.lg-live i{width:8px;height:8px;border-radius:50%;background:var(--lg-ok);animation:lgPulse 1.8s infinite}

/* el panel empieza un poco bajo el formulario; la máscara difumina sus primeros 180 px hacia el fondo blanco */
.lg-right{position:absolute;top:0;right:0;bottom:0;left:440px;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 60px,rgba(0,0,0,.8) 120px,#000 180px);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 60px,rgba(0,0,0,.8) 120px,#000 180px)}
.lg-right>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.lg-right::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(13,24,48,.55),transparent 40%)}
.lg-ping{fill:none;stroke:#32D583;stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:lgPing 2s ease-out infinite}
.lg-ping.d2{animation-delay:.66s}.lg-ping.d3{animation-delay:1.33s}
.lg-flow{fill:none;stroke:#7CD4FD;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 10;animation:lgFlow 1.2s linear infinite}
.lg-chip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 8px));display:flex;align-items:center;gap:10px;white-space:nowrap;padding:7px 12px;border-radius:9px;background:#fff;color:var(--lg-ink);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:600;box-shadow:0 12px 26px -12px rgba(0,0,0,.55);pointer-events:none}
.lg-chip::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#fff}
.lg-chip i{width:8px;height:8px;border-radius:50%;background:#079455}
.lg-tlm{position:absolute;right:28px;top:28px;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;color:#fff;background:rgba(13,24,48,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.lg-tlm b{display:block;font-size:14px;font-weight:600}
.lg-tlm small{display:block;font-size:12px;color:#C3CFE2}
.lg-spin{transform-origin:17px 17px;animation:lgSpin 1.2s linear infinite}
.lg-dots::after{content:"";animation:lgDots 1.4s steps(4) infinite}
/* análisis en vivo: panel con curvas y etapas */
.lg-ana{position:absolute;right:28px;top:110px;z-index:3;width:310px;border-radius:14px;background:rgba(13,24,48,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.lg-ana-h{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.lg-ana-h span{font-family:ui-monospace,Menlo,monospace;color:#7CD4FD;font-weight:500}
.lg-ana svg{display:block;width:100%;height:auto;font-family:ui-monospace,Menlo,monospace}
.lg-steps{display:flex;flex-direction:column;gap:6px}
.lg-step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#8FA3C2}
.lg-step i{width:16px;height:16px;border-radius:50%;border:2px solid #475467;flex:none;display:grid;place-items:center;box-sizing:border-box}
.lg-step.on{color:#fff}.lg-step.on i{border-color:#7CD4FD;border-top-color:transparent;animation:lgSpin .8s linear infinite}
.lg-step.done{color:#A6F4C5}.lg-step.done i{border-color:#32D583;background:#32D583}
.lg-step.done i::after{content:"";width:6px;height:3px;border-left:2px solid #0D1830;border-bottom:2px solid #0D1830;transform:rotate(-45deg) translate(1px,-1px)}
.lg-verdict{visibility:hidden;font-size:12.5px;padding:7px 10px;border-radius:8px;background:rgba(50,213,131,.14);color:#A6F4C5;font-weight:600}
#lg .lg-claim{position:absolute;right:40px;bottom:40px;z-index:3;margin:0;max-width:480px;text-align:right;text-shadow:0 2px 20px rgba(0,0,0,.35);color:#fff;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.015em}

@keyframes lgPulse{0%{box-shadow:0 0 0 0 rgba(50,213,131,.6)}70%{box-shadow:0 0 0 8px rgba(50,213,131,0)}100%{box-shadow:0 0 0 0 rgba(50,213,131,0)}}
@keyframes lgPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes lgFlow{to{stroke-dashoffset:-32}}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){#lg *{animation:none!important}}
@media (max-width:900px){.lg-left{width:100%;background:#fff}.lg-right{display:none}}