/* ============================================================
   estilo-registro.css
   Hoja de estilos EXCLUSIVA de registro.zul -- no la carga ninguna
   otra pantalla, asi que se puede ajustar libremente sin afectar
   login, Dashboard, etc.

   Se creo porque registro.zul perdio la clase "login-card" (que le
   daba un max-width responsivo de 360px) y le quedo un panel interno
   con "width:450px" FIJO -- ese ancho fijo desborda en pantallas
   angostas sin importar que haga el contenedor, cortando los campos
   del formulario (ver captura del problema).
   ============================================================ */

/* Tarjeta exterior del registro: reemplaza lo que daba .login-card,
   pero solo para esta pagina (clase nueva, no toca .login-card en
   ningun otro lado). */
.registro-card {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

/* El panel del formulario: MAX-width en vez de width fijo, para que
   se achique en pantallas angostas en vez de desbordar. */
.registro-formulario {
    display: grid;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 10px;
}

/* Los campos de texto deben ocupar el ancho disponible del grid, no
   su ancho de contenido -- si no, tambien se ven angostos/cortados. */
.registro-formulario .z-textbox,
.registro-formulario input {
    width: 100% !important;
    box-sizing: border-box;
}

/* Movil: un poco menos de padding lateral en la tarjeta, para
   aprovechar mejor el espacio en pantallas muy angostas. */
@media (max-width: 480px) {
    .registro-card {
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }
    .registro-formulario {
        gap: 8px;
    }
}