/* CYBERTIX SGSI · pantallas de acceso. Concepto del brandbook: «la tela que protege» — un tejido hexagonal
   (Cyber Range Talent Generation) que ondula sobre el azul profundo de la marca, con los triángulos de esquina corporativos. */
:root { --navy: #001a20; --navy-2: #032a33; --blue: #0084a3; --blue-ink: #006a83; --blue-soft: #4fc0db; --grey: #9b9a9a; --ink: #1f2e33; --muted: #5b6b70; --line: #d5dee1; --err: #b8322a; --ok: #2e7d4f; }
* { box-sizing: border-box }
html, body { height: 100% }
body.auth { margin: 0; min-height: 100vh; font-family: Figtree, Arial, sans-serif; color: #fff; background: radial-gradient(120% 90% at 20% 30%, #06313b 0%, var(--navy) 55%, #000d10 100%); overflow-x: hidden }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block }
.tri { position: fixed; z-index: 1; pointer-events: none }
.tri-tr { top: 0; right: 0; width: min(34vw, 420px); height: min(17vw, 210px); background: var(--blue); clip-path: polygon(0 0, 100% 0, 100% 100%) }
.tri-bl { bottom: 0; left: 0; width: min(22vw, 260px); height: min(15vw, 180px); background: var(--blue); clip-path: polygon(0 0, 0 100%, 100% 100%); opacity: .9 }
.watermark { position: fixed; z-index: 1; left: -9vw; bottom: -14vh; width: min(52vw, 640px); opacity: .055; pointer-events: none; transform: rotate(-8deg) }
.auth-grid { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 460px); align-items: center; gap: 40px; padding: 48px clamp(20px, 6vw, 96px) 72px }
.story { max-width: 640px }
.story .logo { width: clamp(200px, 22vw, 300px); display: block; margin-bottom: 44px }
.claim { font-weight: 600; letter-spacing: .32em; font-size: 12.5px; color: var(--blue-soft); margin: 0 0 18px; text-transform: uppercase }
.story h1 { font-weight: 800; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; margin: 0 0 22px; letter-spacing: -.015em }
.story h1 span { color: var(--blue-soft); display: block }
.lead { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: #c9dde2; margin: 0 0 30px; max-width: 540px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none }
.chips li { border: 1px solid rgba(79, 192, 219, .45); background: rgba(0, 132, 163, .12); color: #dff3f8; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(4px) }
.threads { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap }
.threads div { border-left: 2px solid var(--blue); padding-left: 10px; font-size: 12px; color: #a9c4ca; max-width: 170px; line-height: 1.4 }
.threads strong { display: block; color: #fff; font-size: 13px; letter-spacing: .04em }
.card { background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: 16px; padding: 30px 30px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); border-top: 5px solid var(--blue); position: relative; overflow: hidden }
.card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; background: var(--blue); opacity: .06; transform: rotate(45deg) }
.steps { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .03em }
.steps .s { display: flex; align-items: center; gap: 7px }
.steps .n { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; border: 2px solid var(--line); color: var(--muted); font-size: 11px }
.steps .s.on { color: var(--navy) } .steps .s.on .n { border-color: var(--blue); background: var(--blue); color: #fff }
.steps .s.done .n { border-color: var(--blue); color: var(--blue) }
.steps .bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 18px }
.card h2 { margin: 0 0 4px; font-size: 22px; color: var(--navy); font-weight: 800 }
.card .sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.45 }
label.lbl { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px }
.field { position: relative }
.field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7f9196; pointer-events: none }
.field input { padding-left: 40px }
input.in { width: 100%; padding: 12px 12px; border: 1px solid #c9d5d8; border-radius: 9px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s }
input.in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 132, 163, .18) }
input.code { text-align: center; font-family: "JetBrains Mono", Consolas, monospace; font-size: 26px; letter-spacing: .45em; padding: 12px 8px 12px 20px; font-weight: 600 }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 700; width: auto; margin: 0 }
.eye:hover { color: var(--blue-ink); background: #eef6f8 }
.caps { display: none; margin-top: 6px; color: #9a6a0a; font-size: 12.5px; font-weight: 600 } .caps.on { display: block }
.btn-main { margin-top: 22px; width: 100%; padding: 13px 14px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, transform .1s }
.btn-main:hover { background: var(--blue-ink) } .btn-main:active { transform: translateY(1px) }
.btn-main svg { width: 18px; height: 18px }
.btn-sec { display: inline-block; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--navy); background: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none }
.msg { border-radius: 9px; padding: 10px 12px; font-size: 14px; margin: 0 0 8px; line-height: 1.4 }
.msg.err { background: #fbe4e0; color: #8e2a20 } .msg.ok { background: #e3f3ea; color: #23623e } .msg.info { background: #eaf4f7; color: #0b4f5f }
.foot-links { margin-top: 16px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.foot-links a { color: var(--blue-ink); font-weight: 600 }
.secure { margin-top: 18px; padding-top: 14px; border-top: 1px solid #edf1f2; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) }
.secure svg { width: 16px; height: 16px; color: var(--ok); flex: none }
.enroll { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; margin-top: 4px }
.qr { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px }
.qr svg { width: 100%; height: auto; display: block }
.enroll ol { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink) }
.enroll ol li { margin-bottom: 6px }
.key { margin-top: 12px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; background: #f1f5f6; border-radius: 8px; padding: 8px 10px; word-break: break-all; color: var(--navy); display: flex; gap: 8px; align-items: center; justify-content: space-between }
.key button { border: 0; background: transparent; color: var(--blue-ink); font: inherit; font-weight: 700; cursor: pointer; font-family: Figtree, Arial, sans-serif }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; font-family: "JetBrains Mono", Consolas, monospace; font-size: 15px; font-weight: 600 }
.codes span { background: #f1f5f6; border-radius: 6px; padding: 7px 10px; text-align: center; color: var(--navy) }
.toggle { margin-top: 12px; background: none; border: 0; color: var(--blue-ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; padding: 0 }
.hide { display: none }
.status { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #f4f8f9; margin: 8px 0; font-size: 14px }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none } .status.off .dot { background: #c98a1c }
.pagefoot { position: fixed; z-index: 2; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .55); letter-spacing: .02em; pointer-events: none }
@media (max-width: 960px) {
  .auth-grid { grid-template-columns: 1fr; padding-top: 32px; gap: 28px }
  .story { max-width: none } .story .logo { margin-bottom: 22px } .story h1 { font-size: 34px } .lead, .threads { display: none }
  .tri-tr { width: 46vw; height: 22vw } .pagefoot { position: static; padding: 0 16px 20px }
}
@media (max-width: 480px) { .card { padding: 24px 18px 18px } .enroll { grid-template-columns: 1fr } .qr { max-width: 200px; margin: 0 auto } .chips li { font-size: 11.5px } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }