/* 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: calc(100vh - 34px); 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(190px, 19vw, 270px); display: block; margin-bottom: 30px }
.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(30px, 3.3vw, 46px); line-height: 1.06; margin: 0 0 18px; letter-spacing: -.015em }
.story h1 span { color: var(--blue-soft); display: block }
.lead { font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.55; color: #c9dde2; margin: 0 0 22px; max-width: 600px }
.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) }
.scope { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; max-width: 620px }
.scope li { font-size: 12.5px; color: #c9dde2; line-height: 1.35; padding-left: 20px; position: relative }
.scope li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 2px; background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-soft) }
.scope strong { color: #fff; font-weight: 700 }
.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 }
label.lbl .lbl-note { font-weight: 500; letter-spacing: 0; text-transform: none }
.field { position: relative }
input.in { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #c9d5d8; border-radius: 9px; font: inherit; font-size: 15px; line-height: normal; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s }
/* Campo con icono: el texto empieza siempre después del icono (y antes del botón «Mostrar» en las contraseñas) */
.field { display: flex; align-items: center }
.field > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7f9196; pointer-events: none; z-index: 1 }
.field > input.in { padding-left: 44px }
.field.pw > input.in { padding-right: 84px }
.field:focus-within > svg { color: var(--blue) }
input.in::placeholder { color: #9aabb0 }
/* El autocompletado del navegador no debe tapar el icono ni cambiar el fondo */
input.in:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--ink) }
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; height: 58px; padding: 0 8px 0 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 }
.pwrule { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.4 }
.pwcheck { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; color: var(--muted) }
.pwcheck li::before { content: "○"; margin-right: 6px; color: #9aabb0 }
.pwcheck li.ok { color: var(--ok) } .pwcheck li.ok::before { content: "✓"; color: var(--ok); font-weight: 700 }
.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: relative; z-index: 2; margin: 0; padding: 0 16px 14px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .55); letter-spacing: .02em; pointer-events: none }
@media (max-height: 820px) and (min-width: 961px) { .scope { display: 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, .scope { 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 } }
/* Selector de idioma: banderas de España y del Reino Unido */
.lang { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 10px; }
.lang a { display: inline-flex; padding: 4px; border-radius: 5px; border: 1px solid transparent; opacity: .6; line-height: 0; }
.lang a svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang a[aria-current="true"] { opacity: 1; border-color: #c9d6da; background: #fff; }
.lang a:hover, .lang a:focus-visible { opacity: 1; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lost { margin: 0 } .lost .toggle { display: block; text-align: left; font-weight: 600; color: var(--muted); margin-top: 8px }
/* Lectura y firma de documentos (enlace personal del correo) */
body.rd { margin: 0; min-height: 100vh; font-family: Figtree, Arial, sans-serif; background: #eef3f5; color: var(--ink) }
.rd-top { position: sticky; top: 0; z-index: 5; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 14px; padding: 10px clamp(16px, 3vw, 32px); flex-wrap: wrap }
.rd-top img { height: 26px; display: block } .rd-prod { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fd2e3; border-left: 1px solid #2b4a52; padding-left: 14px } .rd-sp { flex: 1 }
.rd-top .lang { position: static; margin: 0 }
.rd-main { max-width: 980px; margin: 0 auto; padding: 22px 16px 30px }
.rd-card { background: #fff; border-radius: 14px; padding: 26px clamp(16px, 3vw, 32px); box-shadow: 0 8px 30px rgba(0, 26, 32, .1); border-top: 5px solid var(--blue) }
.rd-card.rd-small { max-width: 640px; margin: 30px auto }
.rd-card h1 { margin: 0 0 6px; font-size: 24px; color: var(--navy); font-weight: 800 } .rd-card h2 { margin: 18px 0 4px; font-size: 18px; color: var(--navy) }
.rd-lead { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 14px }
.rd-doc { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; background: #f3f7f8; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px }
.rd-doc strong { font-size: 16px; color: var(--navy) } .rd-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--blue-ink); font-weight: 700 } .rd-v { font-size: 12.5px; color: var(--muted) } .rd-org { margin-left: auto; font-size: 13px; color: var(--muted) }
.rd-msg { border-left: 3px solid var(--blue); background: #f3f9fb; padding: 10px 12px; border-radius: 0 8px 8px 0; font-size: 14px; margin-bottom: 12px; white-space: pre-wrap }
.rd-prog { height: 6px; background: #e3ecef; border-radius: 99px; overflow: hidden } .rd-prog i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .15s }
.rd-pct { font-size: 12px; color: var(--muted); margin: 4px 0 8px; text-align: right }
.rd-view { height: min(68vh, 760px); overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fa; padding: 0; overscroll-behavior: contain }
.rd-view:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.rd-md { background: #fff; margin: 16px auto; max-width: 820px; padding: clamp(18px, 4vw, 48px); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); line-height: 1.6; font-size: 15px; color: #1d2b30 }
.rd-md h1 { font-size: 22px; color: var(--navy) } .rd-md h2 { font-size: 18px; color: var(--blue-ink); margin-top: 22px } .rd-md h3 { font-size: 15.5px }
.rd-md table { border-collapse: collapse; width: 100%; font-size: 13.5px } .rd-md td, .rd-md th { border: 1px solid var(--line); padding: 5px 8px; text-align: left } .rd-md th { background: #eef4f6 } .rd-md .tbl { overflow-x: auto }
.rd-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 8px } .rd-pages canvas { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .15) }
.rd-load { text-align: center; padding: 40px; color: var(--muted) }
.rd-end { text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 0 18px }
.rd-hint { margin: 10px 0 0; font-size: 13.5px; color: var(--muted) } .rd-hint.ok { color: var(--ok); font-weight: 700 }
.rd-acc { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px }
.rd-acc .btn-main { max-width: 460px }
.rd-pad { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; max-width: 640px }
.rd-pad canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; background: #fff }
.rd-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px dashed #b9c6ca; font-size: 12px; color: var(--muted); background: #fafcfc }
.rd-line button { background: none; border: 0; color: var(--blue-ink); font: inherit; font-weight: 700; cursor: pointer }
.rd-chk { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 14px; max-width: 640px } .rd-chk input { margin-top: 3px }
.rd-sigimg { display: block; max-width: 320px; margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff }
.rd-foot { text-align: center; font-size: 12px; color: var(--muted); padding: 0 16px 20px }
.btn-main:disabled { opacity: .5; cursor: not-allowed }
body.rd [hidden] { display: none !important }