/*
 * ============================================================
 *  ELABORADO POR WOLTFTECH S.A.S. — 2026
 *  Todos los derechos reservados.
 *  Autor: Ing. Marlon Duván Morales Arboleda — CEO de Woltftech.
 *  Los derechos patrimoniales y morales de este software
 *  pertenecen a su autor y a Woltftech S.A.S.
 * ============================================================
 */

@font-face {
  font-family: "Inter";
  src: url("/recursos/fuentes/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fondo: #f2f4f8;
  --fondo-lateral: #e9edf3;
  --superficie: #ffffff;
  --superficie-alta: #f6f8fb;
  --borde: #dde3ec;
  --borde-suave: #e8ecf2;
  --texto: #111827;
  --sutil: #5b6779;
  --tenue: #8a95a6;
  --acento: #2563eb;
  --energia: #c27c0e;
  --equipo: #2563eb;
  --devfarm: #7c3aed;
  --red: #0d9488;
  --bien: #059669;
  --atencion: #b45309;
  --mal: #dc2626;
  --serie-1: #2563eb;
  --serie-2: #d97706;
  --serie-3: #7c3aed;
  --serie-4: #0d9488;
  --sombra: 0 1px 2px rgb(15 23 42 / 6%), 0 4px 16px rgb(15 23 42 / 5%);
  --radio: 14px;
  --radio-chico: 9px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0a0e14;
    --fondo-lateral: #0d121a;
    --superficie: #121822;
    --superficie-alta: #18202c;
    --borde: #222c3b;
    --borde-suave: #1a2230;
    --texto: #e8edf5;
    --sutil: #8d99ab;
    --tenue: #5f6b7d;
    --acento: #5b9cff;
    --energia: #f5b83d;
    --equipo: #5b9cff;
    --devfarm: #a78bfa;
    --red: #2dd4bf;
    --bien: #34d399;
    --atencion: #fbbf24;
    --mal: #f87171;
    --serie-1: #5b9cff;
    --serie-2: #f5b83d;
    --serie-3: #a78bfa;
    --serie-4: #2dd4bf;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 22%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
.sutil { color: var(--sutil); }

button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--radio-chico);
  padding: 10px 16px;
  background: var(--acento);
  color: #fff;
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.boton-secundario {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
  padding: 7px 12px;
}
.boton-secundario:hover { background: var(--superficie-alta); }
.boton-instalar-acceso { width: 100%; margin-top: 12px; padding: 11px 16px; }
.boton-enlace {
  display: block;
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: var(--radio-chico);
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* Entrada y alta */
.pagina-acceso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
  background:
    radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--acento) 14%, transparent), transparent),
    var(--fondo);
}
.tarjeta-acceso {
  width: 100%;
  max-width: 400px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 32px 28px;
}
.tarjeta-acceso h1 { font-size: 1.4rem; }
.tarjeta-acceso h1::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--acento), var(--red));
}
.tarjeta-acceso form { display: grid; gap: 14px; margin-top: 22px; }
.tarjeta-acceso label { display: grid; gap: 6px; font-size: .9rem; color: var(--sutil); }
.tarjeta-acceso input {
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie-alta);
  color: var(--texto);
}
.tarjeta-acceso button { margin-top: 4px; padding: 12px 16px; }
.mensaje { min-height: 1.2em; margin: 0; color: var(--mal); font-size: .9rem; }
.pasos { display: grid; gap: 18px; padding-left: 20px; margin: 0; }
.qr { margin: 12px 0; }
.qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 8px; }
code { word-break: break-all; }