/* QitLaw · pantalla de ingreso (sobre Qubits UI: qubits-ui.css + qubits-login.css) */
:root {
  --q-azul-900: #1E2229; --q-azul-800: #2A2F38; --q-azul-700: #5C1430; --q-azul-600: #7A1C3D; --q-azul-400: #C9577C; --q-azul-100: #F6E9EE;
  --q-info: #7A1C3D; --q-info-suave: #F6E9EE; --q-foco: 0 0 0 4px rgba(122, 28, 61, .16);
  --q-fuente: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --q-texto: #262A31; --q-fondo: #F6F5F7;
}

.q-login-marca {
  background:
    radial-gradient(900px 520px at 110% -10%, rgba(201, 87, 124, .30), transparent 60%),
    radial-gradient(700px 500px at -20% 115%, rgba(122, 28, 61, .55), transparent 60%),
    #1E2229;
}
/* Renglones de una hoja: el mismo gesto del isotipo */
.q-login-marca::after {
  opacity: .07;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 38px, #fff 38px, #fff 40px);
  background-size: auto;
  mask-image: linear-gradient(115deg, transparent 15%, #000 60%);
  -webkit-mask-image: linear-gradient(115deg, transparent 15%, #000 60%);
}
.ql-login-logo img { height: 46px; width: auto; display: block; }
.q-login-mensaje { max-width: 470px; }
.q-login-mensaje h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.q-login-mensaje p { color: rgba(255,255,255,.74); }
.ql-login-puntos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.ql-login-puntos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: rgba(255,255,255,.86); }
.ql-login-puntos .fa { width: 30px; height: 30px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #E58BA8; font-size: 14px; }

.q-login-form .q-titulo { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.q-campo label { font-weight: 500; }
.ql-codigo .q-input { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ql-codigo .q-input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }
.ql-recordar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--q-texto-suave); margin: -6px 0 18px; cursor: pointer; }
.ql-recordar input { accent-color: #7A1C3D; width: 16px; height: 16px; }
.ql-olvido { display: block; text-align: center; margin-top: 16px; font-size: 13.5px; color: #7A1C3D; text-decoration: none; }
.ql-olvido:hover { text-decoration: underline; }
.ql-olvido-ayuda { font-size: 13px; color: var(--q-texto-suave); text-align: center; margin-top: 8px; }
.q-login-marca-movil img { height: 38px; }

/* Entrega 2: verificación en dos pasos y recuperación de clave */
.ql-paso { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: #7A1C3D; background: #F6E9EE; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.ql-paso-error { color: #8f231b; background: #fdecea; }
.ql-codigo-mfa { font: 600 28px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .28em; text-align: center; padding-left: 14px !important; height: 60px; }
.ql-codigo-mfa::placeholder { color: #c9c3c7; letter-spacing: .28em; }
.ql-enlace { display: block; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
button.ql-olvido { font-size: 13.5px; color: #7A1C3D; }
button.ql-olvido:hover { text-decoration: underline; }
.ql-cancelar { margin-top: 18px; text-align: center; }
.ql-enlace-suave { font-size: 13px; color: var(--q-texto-suave, #6b6f78); }
.ql-enlace-suave:hover { color: #262A31; }
.ql-olvido-ayuda a { color: #7A1C3D; }
.ql-olvido-ayuda code { font-size: 12px; color: #5C1430; background: #F6E9EE; padding: 1px 5px; border-radius: 4px; }
.ql-lista-pasos { margin: 4px 0 24px; padding-left: 20px; color: #262A31; font-size: 14.5px; line-height: 1.6; }
.ql-lista-pasos li { margin-bottom: 6px; }
.q-ayuda.ql-ayuda-neutra { color: var(--q-texto-suave, #6b6f78); }
.q-alerta-ok { background: #e9f6ef; border-color: #bfe6cf; color: #146c40; }

/* Entrega 3: consola de Qubits */
.ql-login-sello { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #E58BA8; background: rgba(255,255,255,.08); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }