/* ==========================================================================
   Qubits UI · Pantalla de ingreso
   Requiere qubits-ui.css
   ========================================================================== */

html, body { height: 100%; margin: 0; }
body.q-login { font-family: var(--q-fuente); background: var(--q-fondo); color: var(--q-texto); -webkit-font-smoothing: antialiased; }

.q-login-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }

/* Panel de marca */
.q-login-marca {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 600px at -10% 110%, rgba(116, 185, 255, .28), transparent 60%),
    linear-gradient(145deg, var(--q-azul-900) 0%, var(--q-azul-800) 55%, var(--q-azul-700) 100%);
  display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px;
}
.q-login-marca::after {
  /* patrón isométrico suave */
  content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z M28 64v32 M0 48 28 32l28 16 M28 32V0' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
}
.q-login-marca > * { position: relative; z-index: 1; }
.q-login-marca .q-marca span { color: #fff; }
.q-login-mensaje { max-width: 440px; }
.q-login-mensaje h1 { font: 600 38px/1.2 var(--q-fuente); margin: 0 0 14px; }
.q-login-mensaje p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78); margin: 0; }
.q-login-pie { font-size: 13px; color: rgba(255,255,255,.6); }

/* Panel del formulario */
.q-login-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--q-superficie); }
.q-login-form { width: 100%; max-width: 380px; }
.q-login-form .q-titulo { font-size: 28px; }
.q-login-form header { margin-bottom: 28px; }
.q-login-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; font-size: 12.5px; color: var(--q-texto-tenue); }
.q-login-marca-movil { display: none; }

@media (max-width: 991px) {
  .q-login-grid { grid-template-columns: 1fr; }
  .q-login-marca { display: none; }
  .q-login-panel { align-items: flex-start; padding-top: 56px; background: var(--q-fondo); }
  .q-login-form { background: var(--q-superficie); border: 1px solid var(--q-borde); border-radius: var(--q-radio-l); box-shadow: var(--q-sombra-l); padding: 32px 26px; }
  .q-login-marca-movil { display: flex; justify-content: center; margin-bottom: 26px; }
  .q-login-marca-movil .q-marca span { color: var(--q-azul-900); }
}