@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Rajdhani:wght@500;600;700&display=swap');
:root{color-scheme:dark}*{box-sizing:border-box}html,body.login-pf{min-height:100%}body.login-pf{margin:0;color:#e7f7ff;font-family:Rajdhani,"Segoe UI",sans-serif;background:radial-gradient(circle at 16% 19%,rgba(50,240,255,.20),transparent 22rem),radial-gradient(circle at 83% 16%,rgba(123,92,255,.18),transparent 23rem),radial-gradient(circle at 54% 90%,rgba(32,227,154,.09),transparent 25rem),linear-gradient(180deg,#02050d 0%,#061126 51%,#030712 100%);overflow-x:hidden}
body.login-pf:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.44;background-image:linear-gradient(rgba(50,240,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(50,240,255,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 86%,transparent)}body.login-pf:after{content:"";position:fixed;left:-10vw;right:-10vw;bottom:-20vh;height:56vh;z-index:-1;pointer-events:none;opacity:.75;transform:perspective(340px) rotateX(59deg);transform-origin:bottom;background-image:linear-gradient(rgba(50,240,255,.40) 1px,transparent 1px),linear-gradient(90deg,rgba(50,240,255,.35) 1px,transparent 1px);background-size:58px 58px;box-shadow:0 -20px 75px rgba(50,240,255,.16)}
#kc-header{margin:0;padding:clamp(26px,6vh,66px) 24px 19px;text-align:center}#kc-header-wrapper{display:inline-flex;align-items:center;gap:14px;color:#e8fbff;font:600 clamp(24px,3vw,34px)/1 Orbitron,"Segoe UI",sans-serif;letter-spacing:.20em;text-transform:uppercase;text-shadow:0 0 24px rgba(50,240,255,.48)}#kc-header-wrapper:before{content:"";width:38px;height:38px;border:1px solid #32f0ff;border-radius:50%;background:radial-gradient(circle at center,transparent 0 36%,rgba(32,227,154,.3) 38% 41%,transparent 43%),conic-gradient(from 25deg,transparent 0 16%,#32f0ff 23% 34%,transparent 41% 64%,#7b5cff 71% 82%,transparent 89%);box-shadow:0 0 18px rgba(50,240,255,.5),6px 3px 0 -5px #7b5cff,-5px -4px 0 -4px #20e39a}#kc-header-wrapper:after{content:"CONTROL PLANE";align-self:flex-end;margin:0 0 2px -6px;color:#9befff;font:700 9px/1 Orbitron,sans-serif;letter-spacing:.18em;text-shadow:none}
.login-pf-page,#kc-content{padding:0 20px 42px}.card-pf,#kc-form-wrapper,#kc-registration-container{max-width:448px;margin:0 auto}.card-pf{overflow:hidden;border:1px solid rgba(103,204,255,.30);border-radius:14px;background:linear-gradient(145deg,rgba(10,24,48,.95),rgba(5,13,31,.94));box-shadow:0 24px 80px rgba(0,0,0,.58),inset 0 1px rgba(220,252,255,.08)}.card-pf:before{content:"IDENTIDAD SEGURA · FLYNN";display:block;padding:10px 28px;border-bottom:1px solid rgba(103,204,255,.20);color:#32f0ff;background:linear-gradient(90deg,rgba(50,240,255,.10),rgba(123,92,255,.10));font:700 10px/1 Orbitron,sans-serif;letter-spacing:.17em}#kc-content-wrapper{padding:27px 30px 30px}#kc-page-title,.login-pf-header h1{margin:0 0 24px;color:#f0fbff;font:600 21px/1.15 Orbitron,"Segoe UI",sans-serif;letter-spacing:.06em;text-align:left;text-transform:uppercase}
.pf-c-form__label,.control-label,label{color:#a7c5d9!important;font:700 12px/1.2 Rajdhani,sans-serif;letter-spacing:.08em;text-transform:uppercase}.pf-c-form-control,.form-control,input[type="text"],input[type="password"],input[type="email"]{min-height:44px;border:1px solid rgba(103,204,255,.28)!important;border-radius:7px!important;color:#e7f7ff!important;background:rgba(3,12,29,.82)!important;box-shadow:inset 0 1px 8px rgba(0,0,0,.27);font:600 16px Rajdhani,sans-serif}.pf-c-form-control:focus,.form-control:focus,input:focus{border-color:#32f0ff!important;box-shadow:0 0 0 2px rgba(50,240,255,.16),0 0 18px rgba(50,240,255,.12)!important;outline:0}
.pf-c-button.pf-m-primary,#kc-login,input[type="submit"]{min-height:45px;border:1px solid rgba(50,240,255,.62)!important;border-radius:7px!important;color:#ecfeff!important;background:linear-gradient(135deg,rgba(16,93,104,.96),rgba(50,42,117,.96))!important;box-shadow:0 8px 25px rgba(32,170,205,.17),inset 0 1px rgba(255,255,255,.16);font:700 13px Orbitron,sans-serif!important;letter-spacing:.08em;text-transform:uppercase}.pf-c-button.pf-m-primary:hover,#kc-login:hover,input[type="submit"]:hover{filter:brightness(1.18);box-shadow:0 0 25px rgba(50,240,255,.30)}a,.pf-c-button.pf-m-link{color:#72f5ff!important;font-weight:600}.checkbox,.pf-c-check__label,#kc-form-options{color:#a7c5d9}.alert-error,.pf-c-alert.pf-m-danger{border-color:rgba(255,78,111,.60)!important;color:#ffd6dd!important;background:rgba(133,22,49,.28)!important}.alert-success,.pf-c-alert.pf-m-success{border-color:rgba(32,227,154,.55)!important;color:#bdffe3!important;background:rgba(14,119,87,.22)!important}#kc-info,#kc-registration{margin-top:20px;color:#85a3be;font-size:15px;text-align:center}
@media(max-width:520px){#kc-header{padding-top:34px}#kc-header-wrapper{font-size:24px;letter-spacing:.13em}#kc-header-wrapper:after{display:none}.login-pf-page,#kc-content{padding-inline:12px}#kc-content-wrapper{padding:24px 20px}}
/* Keycloak places login-pf on html, so the former body selector did not match. */
html.login-pf{background:#0a2e5f}
html.login-pf body{isolation:isolate;min-height:100vh;margin:0;color:#e7f7ff;font:17px/1.5 "Segoe UI","Avenir Next",sans-serif;background:radial-gradient(circle at 16% 16%,#17649c,transparent 34%),radial-gradient(circle at 86% 17%,#245896,transparent 36%),radial-gradient(circle at 50% 105%,#176b92,transparent 42%),linear-gradient(145deg,#12366d,#0b2b5a 55%,#0a2149)}
html.login-pf body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(103,204,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(103,204,255,.1) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 85%,transparent)}
html.login-pf body:after{content:"";position:fixed;inset:auto -15vw -33vh;height:62vh;z-index:-1;pointer-events:none;opacity:.65;transform:perspective(500px) rotateX(62deg);transform-origin:bottom;background-image:linear-gradient(rgba(50,240,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(50,240,255,.4) 1px,transparent 1px);background-size:62px 62px}
.login-pf-page{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:100vh;padding:28px 20px;background:transparent}
#kc-header{margin:0 auto 26px;padding:0}#kc-header-wrapper{gap:19px;color:#e7f7ff;font:600 clamp(32px,5vw,52px)/1.1 "Segoe UI",sans-serif;letter-spacing:.09em}
#kc-header-wrapper:before{width:68px;height:68px;flex:0 0 68px;border:2px solid #32f0ff;background:radial-gradient(circle,transparent 0 43%,rgba(32,227,154,.55) 44% 46%,transparent 47%),conic-gradient(from 25deg,transparent 0 16%,#32f0ff 23% 34%,transparent 41% 64%,#7b5cff 71% 82%,transparent 89%);animation:flynn-orbit-spin 5s linear infinite}
@keyframes flynn-orbit-spin{to{transform:rotate(360deg)}}#kc-header-wrapper:after{font:700 12px/1 "Segoe UI",sans-serif}
.card-pf{width:min(100%,530px);max-width:530px;min-height:0;margin:0 auto;padding:0;background:linear-gradient(145deg,rgba(10,32,69,.97),rgba(8,25,55,.97))}.card-pf:before{padding:16px 32px;font:700 14px/1.3 "Segoe UI",sans-serif}
.login-pf-header{padding:27px 32px 0}#kc-page-title,.login-pf-header h1{margin:0 0 12px;font:600 25px/1.25 "Segoe UI",sans-serif}
#kc-content{padding:0 32px 32px}#kc-content-wrapper{padding:0}.form-group{margin-bottom:20px}
.pf-c-form__label,.control-label,label{margin-bottom:8px;color:#c3e5f5!important;font:600 16px/1.4 "Segoe UI",sans-serif;letter-spacing:.02em;text-transform:none}
.pf-c-form-control,.form-control,input[type="text"],input[type="password"],input[type="email"]{min-height:52px;background:#0a2349!important;font:17px "Segoe UI",sans-serif}
.pf-c-button.pf-m-control{min-height:52px;color:#9befff;background:#0a2349}.pf-c-button.pf-m-primary,#kc-login,input[type="submit"]{min-height:52px;background:linear-gradient(135deg,#11657d,#294f91)!important;font:700 17px "Segoe UI",sans-serif!important}
a,.pf-c-button.pf-m-link{font-size:16px}.checkbox,.pf-c-check__label,#kc-form-options,#kc-info,#kc-registration{font-size:16px}
@media(max-width:560px){.login-pf-page{padding:28px 12px}#kc-header{margin-bottom:20px}#kc-header-wrapper{gap:10px;font-size:30px}#kc-header-wrapper:before{width:48px;height:48px;flex-basis:48px}.card-pf:before{padding:13px 20px;font-size:12px}.login-pf-header{padding:22px 20px 0}#kc-content{padding:0 20px 24px}#kc-page-title{font-size:22px}}
@media(prefers-reduced-motion:reduce){#kc-header-wrapper:before{animation:none}}

/* Exact Control Plane brand structure and orbit rules, enlarged for login. */
:root{--accent:#32f0ff;--accent2:#7b5cff;--accent-3:#20e39a}
#kc-header-wrapper.brand{display:inline-flex;align-items:center;gap:18px;padding:0;letter-spacing:normal;text-shadow:none}
#kc-header-wrapper.brand:before,#kc-header-wrapper.brand:after{content:none;display:none}
#kc-header-wrapper .brand-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#kc-header-wrapper .brand-copy strong{color:#e7f7ff;font:600 clamp(32px,5vw,48px)/1.1 "Segoe UI",sans-serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 25px rgba(50,240,255,.35)}
#kc-header-wrapper .brand-copy small{color:#9befff;font:600 13px/1.2 "Segoe UI",sans-serif;letter-spacing:.18em;text-transform:uppercase}
#kc-header-wrapper .empty-orbit{position:relative;display:block;border:1px solid var(--accent);border-radius:50%;box-shadow:0 0 12px rgba(50,240,255,.2),6px 3px 0 -5px var(--accent2),-5px -4px 0 -4px var(--accent-3)}
#kc-header-wrapper .empty-orbit:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 25deg,transparent 0 16%,var(--accent) 23% 34%,transparent 41% 64%,var(--accent2) 71% 82%,transparent 89%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);animation:orbit-spin 5s linear infinite}
#kc-header-wrapper .empty-orbit:after{content:"";position:absolute;inset:7px;border:1px solid rgba(32,227,154,.45);border-radius:50%}

/* Final login composition: use Flynn AI's full animated mark verbatim. */
.card-pf:before{content:none!important;display:none!important}
#kc-header-wrapper.brand{gap:22px}
#kc-header-wrapper .brand-copy small{display:none}
#kc-header-wrapper .empty-orbit{position:relative;display:block;width:70px;height:70px;flex:0 0 70px;margin:auto;border:1px solid var(--accent);border-radius:50%;box-shadow:0 0 28px rgba(50,240,255,.22),15px 8px 0 -12px var(--accent2),-12px -9px 0 -10px var(--accent-3);animation:arrive .7s ease-out both}
#kc-header-wrapper .empty-orbit:before{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from 25deg,transparent 0 16%,var(--accent) 23% 34%,transparent 41% 64%,var(--accent2) 71% 82%,transparent 89%);filter:drop-shadow(0 0 7px rgba(50,240,255,.48));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);animation:orbit-spin 5s linear infinite}
#kc-header-wrapper .empty-orbit:after{content:"";position:absolute;inset:16px;border:1px solid rgba(32,227,154,.45);border-radius:50%;background:radial-gradient(circle,rgba(50,240,255,.18),rgba(123,92,255,.05) 55%,transparent 72%);box-shadow:0 0 18px rgba(32,227,154,.2);animation:orbit-breathe 2.8s ease-in-out infinite}
@keyframes orbit-breathe{50%{transform:scale(.84);opacity:.62}}
@keyframes arrive{from{opacity:0;transform:scale(.7) rotate(-25deg)}}

/* Username and password share the same 52px control geometry. */
#username,.pf-c-input-group{width:100%;height:52px}
.pf-c-input-group{display:flex!important;align-items:stretch}
.pf-c-input-group>#password{min-width:0;flex:1 1 auto;height:52px;border-right:0!important;border-radius:8px 0 0 8px!important}
.pf-c-input-group>.pf-c-button.pf-m-control{width:52px;min-width:52px;height:52px;margin:0;border:1px solid rgba(103,204,255,.42)!important;border-left:0!important;border-radius:0 8px 8px 0!important;background:#0a2349!important;box-shadow:none!important}
@media(max-width:560px){#kc-header-wrapper .empty-orbit{width:58px;height:58px;flex-basis:58px}#kc-header-wrapper .brand-copy strong{font-size:38px}}
@media(prefers-reduced-motion:reduce){#kc-header-wrapper .empty-orbit:before,#kc-header-wrapper .empty-orbit:after{animation:none}}

/* Dedicated outer halo: a real element keeps Chromium animation reliable. */
@keyframes orbit-spin{to{transform:rotate(360deg)}}
#kc-header-wrapper.brand .orbit-halo{animation-duration:5s}
#kc-header-wrapper .empty-orbit:before{display:none}
#kc-header-wrapper .orbit-halo{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 25deg,transparent 0 16%,#32f0ff 23% 34%,transparent 41% 64%,#7b5cff 71% 82%,transparent 89%);filter:drop-shadow(0 0 7px rgba(50,240,255,.58));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);animation:orbit-spin 4s linear infinite;will-change:transform}

/* The password group owns the border; its children cannot draw white corners. */
.pf-c-input-group{width:100%;height:52px;overflow:hidden;border:1px solid rgba(103,204,255,.42)!important;border-radius:8px!important;background:#0a2349!important;box-shadow:inset 0 1px 7px rgba(0,0,0,.18)!important}
.pf-c-input-group:focus-within{border-color:#32f0ff!important;outline:2px solid rgba(50,240,255,.28);outline-offset:1px}
.pf-c-input-group>#password{height:50px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important}
.pf-c-input-group>.pf-c-button.pf-m-control{width:52px;min-width:52px;height:50px!important;border:0!important;border-left:1px solid rgba(103,204,255,.42)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important}

/* Match the Control Plane canvas exactly: deep navy with restrained cyan/violet light. */
html.login-pf{background:#050814}
html.login-pf body{background:radial-gradient(circle at 18% 12%,rgba(50,240,255,.12),transparent 24%),radial-gradient(circle at 82% 18%,rgba(123,92,255,.14),transparent 20%),linear-gradient(180deg,#03050d,#060b18)}
html.login-pf body:before,html.login-pf body:after{content:none;display:none}