/* ========================================================================== Modal "Registrar / Modificar Usuario" (`#registro_usuario`) COMPARTIDO: lo incluyen usuarios.php (/modulo-usuarios) y medico/medicos.php (/doctores), por eso el estilo viaja en esta hoja —que carga el propio `form/registro_usuario.php`— y no en la de la pantalla. Detalle: usuarios/_DOC_modulo_usuarios.md ========================================================================== */ /* Bootstrap monta el modal como hijo de , FUERA del wrapper de la pantalla: los tokens se redeclaran acá o los `var()` no resuelven. */ #registro_usuario { --usrm-primary: #3d4f63; --usrm-primary-dark: #2c3a49; --usrm-primary-soft: #eef1f5; --usrm-primary-borde: #d3dae3; --usrm-fondo: #fff; --usrm-fondo-alt: #f7f8fa; --usrm-borde: #e3e6ec; --usrm-borde-input: #d8dee6; --usrm-texto: #2d3748; --usrm-texto-fuerte: #4a5560; --usrm-texto-sec: #667075; --usrm-texto-min: #8a939c; --usrm-txt-cifra: 20px; --usrm-txt-display: 17px; --usrm-txt-titulo: 15px; --usrm-txt-destacado: 14px; --usrm-txt-base: 13px; --usrm-txt-secundario: 12px; --usrm-txt-rotulo: 11px; --usrm-radio: 10px; --usrm-radio-chico: 6px; } #registro_usuario .usrm-contenido { border: 0; border-radius: var(--usrm-radio); overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); } /* ── Cabecera ─────────────────────────────────────────────────────────── */ #registro_usuario .usrm-cabecera { display: flex; align-items: center; justify-content: space-between; background: var(--usrm-primary); color: #fff; padding: 14px 20px; border: 0; } #registro_usuario .usrm-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--usrm-txt-display); font-weight: 700; letter-spacing: .01em; } #registro_usuario .usrm-titulo > i { font-size: var(--usrm-txt-cifra); color: #b6c2d1; } /* Bootstrap 4 le da al `.close` un `float:right` con `margin:-1rem -1rem -1rem auto` y `padding:1rem`: dentro de un flex eso lo tiraba DEBAJO del título, en una caja gris. Se neutralizan las tres cosas. */ #registro_usuario .usrm-cerrar { float: none; margin: 0; padding: 0 2px; background: transparent; border: 0; line-height: 1; color: #fff; opacity: .85; text-shadow: none; font-size: var(--usrm-txt-cifra); } #registro_usuario .usrm-cerrar:hover { color: #fff; opacity: 1; } /* ── Cuerpo ───────────────────────────────────────────────────────────── */ #registro_usuario .usrm-cuerpo { background: var(--usrm-fondo-alt); padding: 18px 20px 6px; max-height: 72vh; overflow-y: auto; } /* Los campos van agrupados por tema. Antes eran dos columnas sueltas de Bootstrap donde "Estado" caía junto al teléfono y "Cargo" junto al perfil: los datos de la persona y los de su acceso al sistema estaban entreverados. */ #registro_usuario .usrm-bloque { background: var(--usrm-fondo); border: 1px solid var(--usrm-borde); border-radius: var(--usrm-radio-chico); padding: 14px 16px 4px; margin-bottom: 14px; } #registro_usuario .usrm-bloque-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--usrm-borde); font-size: var(--usrm-txt-rotulo); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--usrm-texto-sec); } #registro_usuario .usrm-bloque-tit > i { color: var(--usrm-primary); font-size: var(--usrm-txt-destacado); } #registro_usuario .usrm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } #registro_usuario .usrm-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: 10px; } #registro_usuario .usrm-campo--ancho { grid-column: 1 / -1; } #registro_usuario .usrm-label { margin: 0; font-size: var(--usrm-txt-rotulo); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--usrm-texto-sec); } #registro_usuario .usrm-ayuda { font-size: var(--usrm-txt-secundario); color: var(--usrm-texto-min); line-height: 1.3; } /* El tamaño de los campos lo fijaba el JS de `/modulo-usuarios` con tres `.css()` sobre `#form_registro_usuario`; vive acá para que también aplique cuando el modal se abre desde /doctores, donde ese JS no corre. */ #registro_usuario #form_registro_usuario .form-control { height: 36px; font-size: var(--usrm-txt-base); padding: 6px 10px; border-radius: var(--usrm-radio-chico); border: 1px solid var(--usrm-borde-input); color: var(--usrm-texto); background: var(--usrm-fondo); } #registro_usuario #form_registro_usuario select.form-control { padding-right: 24px; } #registro_usuario #form_registro_usuario .form-control:focus { border-color: var(--usrm-primary); box-shadow: 0 0 0 3px rgba(61, 79, 99, .12); } #registro_usuario #form_registro_usuario .form-control[readonly] { background: var(--usrm-primary-soft); color: var(--usrm-texto-fuerte); } /* La casilla "Extranjero" y el mensaje de error los emite el partial del documento (`form/_doc_identidad_tutor.php`), común a todos los formularios de persona. */ #registro_usuario #form_registro_usuario .form-check-label, #registro_usuario #form_registro_usuario .custom-control-label { font-size: var(--usrm-txt-secundario); color: var(--usrm-texto-sec); } /* ── Pie ──────────────────────────────────────────────────────────────── */ #registro_usuario .usrm-pie { background: var(--usrm-fondo-alt); border-top: 1px solid var(--usrm-borde); padding: 12px 20px; display: flex; align-items: center; gap: 8px; } /* La leyenda de obligatorios era un `alert alert-warning` de ancho completo dentro del formulario: un bloque amarillo que pesaba más que los campos. */ #registro_usuario .usrm-nota { margin-right: auto; font-size: var(--usrm-txt-secundario); color: var(--usrm-texto-min); } #registro_usuario .usrm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; border-radius: var(--usrm-radio-chico); font-size: var(--usrm-txt-base); font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } #registro_usuario .usrm-btn:focus { outline: none; box-shadow: none; } #registro_usuario .usrm-btn--guardar { background: var(--usrm-primary); border: 1px solid var(--usrm-primary); color: #fff; } #registro_usuario .usrm-btn--guardar:hover:not(:disabled) { background: var(--usrm-primary-dark); border-color: var(--usrm-primary-dark); } #registro_usuario .usrm-btn--guardar:disabled { opacity: .6; cursor: default; } #registro_usuario .usrm-btn--cerrar { background: var(--usrm-fondo); border: 1px solid var(--usrm-borde-input); color: var(--usrm-texto-fuerte); } #registro_usuario .usrm-btn--cerrar:hover { background: #eceff3; color: var(--usrm-texto); } @media (max-width: 767.98px) { #registro_usuario .usrm-grid { grid-template-columns: 1fr; } #registro_usuario .usrm-pie { flex-wrap: wrap; } #registro_usuario .usrm-nota { width: 100%; margin: 0 0 6px; } #registro_usuario .usrm-btn { flex: 1 1 auto; justify-content: center; } }