/* public_satiq/css/registro.css
   El alta publica de una unidad. Es la primera pantalla que ve una terapia del Programa, asi
   que el ancho es comodo y los campos obligatorios se ven de un vistazo. */
.registro-wrap { max-width: 56rem; }
.registro-intro { color: #44515e; line-height: 1.5; margin: .4rem 0 .8rem; }
.registro-form h2 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; padding-bottom: .2rem; border-bottom: 1px solid #e2e6ea; }
.registro-form .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .7rem 1rem; }
/* EL LABEL VA EN BLOCK Y NO EN FLEX, y no es indistinto: con flex-direction column el asterisco
   de obligatorio cae en su propio renglon, debajo del texto, y parece un punto rojo suelto. */
.registro-form label { display: block; font-size: .92rem; color: #33414f; }
.registro-form label.ancho { grid-column: 1 / -1; }
/* Y ESTA REGLA ES LA QUE HACE QUE `hidden` FUNCIONE. Cualquier `display` explicito le gana al
   display:none que trae hidden por defecto, asi que los campos de pais y provincia para el
   exterior se veian igual con Argentina elegida. */
.registro-form label[hidden] { display: none; }
.registro-form input, .registro-form select { display: block; width: 100%; margin-top: .2rem; padding: .45rem .5rem; font-size: .97rem; border: 1px solid #b9c2cc; border-radius: 4px; box-sizing: border-box; }
.registro-form input:focus, .registro-form select:focus { outline: 2px solid #2f6f9f; outline-offset: 1px; }
.registro-form .req { color: #b03030; font-weight: 700; }
.registro-nota { color: #5a6672; font-size: .88rem; margin-top: .6rem; }
.registro-form .acciones { margin: 1.4rem 0 .4rem; }
@media (max-width: 640px) { .registro-form .campos { grid-template-columns: 1fr; } }