/* Flujo de solicitud del cliente.
   Reutiliza las clases del prototipo (fluo.css), pero sin el marco de teléfono de la demo:
   - En escritorio y tableta: una tarjeta centrada de hasta 440 px.
   - En móvil (480 px o menos): pantalla completa.
   Se carga después de fluo.css (orden alfabético). */

.mobile-flow.flow-app { display: flex; }

.flow-app .phone-device {
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 680px;
    padding: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 30px 70px -30px rgba(11, 18, 32, .35);
}
.flow-app .phone-screen { height: auto; min-height: 680px; border-radius: 28px; }
.flow-app .screen { padding-top: 22px; }
.flow-app .view.active { display: flex; }

@media (max-width: 480px) {
    .flow-app .phone-device { max-width: none; min-height: 100vh; min-height: 100dvh; border-radius: 0; box-shadow: none; }
    .flow-app .phone-screen { min-height: 100vh; min-height: 100dvh; border-radius: 0; }
    .flow-app .screen { padding-top: 18px; }
}

/* Errores de validación junto a cada campo */
.field.has-error input { border-color: var(--danger); }
.field.has-error input:focus { box-shadow: 0 0 0 4px rgba(229, 72, 77, .14); }
.field-error { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--danger-ink); }
.form-alert {
    background: #fff1f1; border-left: 4px solid var(--danger); color: #8a1f24;
    border-radius: 0 10px 10px 0; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; font-weight: 600;
}

/* Aviso informativo dentro de un paso */
.flow-note {
    display: grid; gap: 4px; background: var(--soft); border-left: 4px solid var(--mint-dark);
    border-radius: 0 12px 12px 0; padding: 12px 14px; margin: 16px 0 12px; font-size: 14px;
}
.flow-note b { font-weight: 800; }

/* Acciones en forma de enlace («Borrar», «Reenviar código»): zona táctil cómoda en el móvil. */
button.link { padding: 11px 8px; min-height: 40px; vertical-align: middle; }

/* Alternativa accesible a la firma dibujada */
.alt-sign { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.alt-sign h2 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.typed-signature { font-family: "Caveat", "Times New Roman", serif; font-size: 34px; text-align: center; color: var(--ink); margin: 6px 0 10px; }

.field-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--gray); }