/* FiveGuardian5 · pantalla «Activate FiveGuardian5» (fg5-asistente, sin licencia). Mismos roles de color que
   servidor/marca/oficina/oficina.css (Material 3, Verde Guardian #22D39A), claro y oscuro con light-dark(). */
:root{
  color-scheme: light dark;
  --md-primary: light-dark(#006c4c, #22d39a);
  --md-on-primary: light-dark(#ffffff, #0a1622);
  --md-primary-container: light-dark(#c9f5df, #012d1e);
  --md-on-primary-container: light-dark(#00513a, #6fe5b5);
  --md-error: light-dark(#ba1a1a, #ffb4ab);
  --md-error-container: light-dark(#ffdad6, #7a1c1e);
  --md-on-error-container: light-dark(#410002, #ffdad6);
  --md-surface: light-dark(#f9fafb, #181a1d);
  --md-on-surface: light-dark(#191c1b, #e4e7e9);
  --md-on-surface-variant: light-dark(#45504a, #a3adb5);
  --md-surface-container: light-dark(#ffffff, #25282d);
  --md-surface-container-high: light-dark(#eef1ef, #2b2f33);
  --md-outline: light-dark(#6f7a73, #7c8994);
  --md-outline-variant: light-dark(#d5dbd7, #3f444b);
  --md-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--md-surface);color:var(--md-on-surface)}
body{font:14px/20px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;justify-content:center}
main{width:100%;max-width:520px;padding:48px 16px 32px}
.marca{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;margin-bottom:24px;justify-content:center}
.card{background:var(--md-surface-container);border:1px solid var(--md-outline-variant);border-radius:16px;padding:24px}
.card > * + *, #app > * + *{margin-top:16px}
h1{font-size:22px;line-height:28px;font-weight:600;margin:0}
p{margin:0}
.muted{color:var(--md-on-surface-variant)}
.pie{font-size:12px;text-align:center;margin-top:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:500}
.campo input{font:15px/20px var(--md-mono);letter-spacing:.03em;padding:10px 12px;border-radius:8px;border:1px solid var(--md-outline);
  background:var(--md-surface);color:var(--md-on-surface);width:100%;min-width:0}
.campo input:focus-visible{outline:2px solid var(--md-primary);outline-offset:1px}
.campo input[aria-invalid="true"]{border-color:var(--md-error)}
.ayuda{font-size:12px;line-height:16px}
.ayuda.error{color:var(--md-error)}
code{font-family:var(--md-mono);font-size:12px;background:var(--md-surface-container-high);border-radius:4px;padding:1px 4px;overflow-wrap:anywhere}
.btn{font:inherit;font-weight:500;border-radius:999px;min-height:40px;padding:0 24px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent}
.btn:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}
.btn.primary{background:var(--md-primary);color:var(--md-on-primary)}
.btn.primary[disabled]{opacity:.6;cursor:default}
.btn.outlined{border-color:var(--md-outline);color:var(--md-primary);background:transparent}
.acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.compra{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--md-outline-variant);padding-top:16px}
.aviso{border-radius:12px;padding:12px 16px}
.aviso.mal{background:var(--md-error-container);color:var(--md-on-error-container)}
.aviso.bien{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.giro{width:20px;height:20px;border-radius:50%;border:2px solid var(--md-primary);border-top-color:transparent;animation:giro .9s linear infinite;flex:none}
.fila{display:flex;gap:12px;align-items:center}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.giro{animation:none}}
@media (max-width:420px){main{padding-top:24px}.card{padding:16px}.btn{width:100%}}
.espera{flex-direction:column;text-align:center;gap:12px}
.cargando{width:56px;height:56px;flex:none}