/* Ajustes exclusivos para viewport móvil (<=640px, ver el media query del
   <link> en index.html). No se carga en desktop, así que nada de aquí
   afecta esa vista. */

/* Portada ya cubre toda la pantalla (position:fixed); en móvil basta con
   reducir el aire alrededor del contenido centrado. */
.pantalla-fullscreen {
    padding: 16px;
}

/* El login en desktop es una tarjeta acotada y centrada, pero en el
   prototipo móvil ocupa toda la pantalla (igual que la Portada) sin
   márgenes visibles. Anulamos el padding del contenedor y hacemos que
   la tarjeta se estire a 100% del viewport. */
#pantallaLogin.pantalla-fullscreen {
    padding: 0;
}
#pantallaLogin .login-card {
    width: 100%;
    height: 100%;
    max-width: none !important;
    border-radius: 0 !important;
    overflow-y: auto;
    padding: 28px 24px 32px !important;
    display: flex;
    flex-direction: column;
}
/* El encabezado (volver, logo, título) queda arriba y el botón Ingresar
   se ancla abajo de la tarjeta, como en el prototipo — no todo centrado. */
#loginCardInner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#loginFormWrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
#btnIngresar {
    margin-top: auto !important;
}

/* El wizard (Plantilla/Destinatarios/Envío) sigue viviendo en el flujo
   normal del body, así que su "aire" viene del padding del body. Lo
   ajustamos para que se sienta más ceñido a los bordes, como en el
   prototipo, sin tocar nada en desktop (body solo tiene p-4/md:p-8 ahí). */
body {
    padding: 14px 12px 22px !important;
}

/* En el prototipo la tarjeta ocupa todo el alto disponible (bajo el
   wordmark y el stepper) y los botones de acción quedan pegados abajo,
   en vez de flotar justo debajo del contenido. Convertimos toda la
   columna en un layout de altura completa para lograr lo mismo. */
.max-w-2xl {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 36px);
}
#pantallaWizard.pantalla:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#wizardCard {
    padding: 22px 16px !important;
    border-radius: 16px !important;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.step-panel.is-visible {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* Cada panel termina en su fila de botones (Atrás/Continuar, etc.):
   la empujamos al fondo de la tarjeta con margin-top:auto. */
.step-panel[data-panel="1"] > div:last-child,
.step-panel[data-panel="2"] > div:last-child,
#accionesFinales,
#vistaErrorPassword > div:last-child {
    margin-top: auto !important;
}
#vistaEnviando:not(.hidden),
#vistaErrorPassword:not(.hidden) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#listaEstados {
    flex: 1;
}

/* El stepper de 3 pasos ya entra holgado en la mayoría de los celulares,
   pero en los más angostos conviene achicar un poco cada ítem. */
@media (max-width: 360px) {
    .step-item { width: 88px; }
    .step-label { font-size: 9.5px; }
}