/* ===========================================================================
   Zaqi Solutions - página de solicitud de cuenta (public/solicitar.html)
   ---------------------------------------------------------------------------
   Lleva la misma cara que el login: la pantalla dividida, los campos y los botones salen de
   auth.css. Aquí solo va lo que el login no tiene: el área de texto, la casilla de privacidad, el
   campo trampa, la pantalla de éxito y la lista de pasos de la columna azul.
   =========================================================================== */

textarea {
  width: 100%; padding: 12px 14px; resize: vertical; min-height: 88px;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-control);
  background: var(--onix-surface-field);
  color: var(--onix-ink);
  font-size: 16px; font-family: inherit; line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
textarea::placeholder { color: var(--onix-dim); }
textarea:focus { outline: none; border-color: var(--onix-accent); box-shadow: 0 0 0 3px var(--onix-accent-ring); }

.opcional { font-weight: 400; color: var(--onix-dim); }

/* El campo trampa sale de la pantalla, no se esconde con display:none: algunos robots ignoran lo oculto. */
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* La casilla: el cuadro y el texto en una fila, con el área de toque de 44px. */
.acepto {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 20px; min-height: 44px; padding: 4px 0;
  font-size: 13.5px; font-weight: 450; line-height: 1.5; color: var(--onix-ink-2); cursor: pointer;
}
.acepto input {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0; padding: 0;
  accent-color: var(--onix-accent); cursor: pointer;
}
.acepto input:focus-visible { outline: 2px solid var(--onix-accent); outline-offset: 2px; box-shadow: none; }
.acepto a { color: var(--onix-accent); font-weight: 550; }

/* --- Éxito ----------------------------------------------------------------- */
.exito-icono {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 18px; border-radius: 999px;
  background: var(--onix-accent-soft); color: var(--onix-accent);
}
.exito h1:focus { outline: none; }
.btn-wide-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px; margin-top: 8px;
  border-radius: var(--onix-radius-control);
  background: var(--onix-accent); color: var(--onix-accent-ink);
  font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none;
  transition: background-color .15s;
}
.btn-wide-primary:hover { background: var(--onix-accent-hover); }
.btn-wide-primary:focus-visible { outline: 2px solid var(--onix-accent); outline-offset: 2px; }

/* --- La columna azul: tres pasos ------------------------------------------- */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pasos li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-card); background: var(--onix-surface);
}
.paso-num {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--onix-accent); color: var(--onix-accent-ink);
  font-family: var(--onix-font-mono); font-size: 13px; font-weight: 600;
}
.pasos strong { display: block; font-size: 14px; font-weight: 600; color: var(--onix-ink); }
.pasos span:not(.paso-num) { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--onix-muted); }

@media (max-width: 900px) {
  /* En el teléfono la página empieza arriba: el formulario es largo y centrarlo lo dejaba con hueco. */
  .auth-middle { justify-content: flex-start; padding-top: 20px; }
}