/* ─────────────────────────────────────────────────────────────────────────────────────────────
modals.css -- FUENTE UNICA de las primitivas de modal compartidas entre `main` y `costeo`.
Por que vive aqui y no en `main/src/styles.css`: `costeo` NO tiene hoja de estilos propia --
su CSS es inline dentro de su HTML y su JS es un port mecanico (CLAUDE.md §5), asi que no
puede `import` una hoja del modulo `main`. La unica via que sirve para los dos modulos es un
`` a un archivo servido tal cual desde `public/`, exactamente el mismo
camino que ya siguen `/brand/tokens.css` y `/brand/chrome.css`.
Estas reglas se MOVIERON (no se copiaron) desde `main/src/styles.css`: cada una vive en un
solo archivo, sin duplicacion (CLAUDE.md §10.4). Los valores son literales, sin cambios; los
comentarios en espanol viajaron con su regla.
ORDEN DE CARGA: va DESPUES de `/brand/tokens.css`, porque consume sus variables
(`--warm-cream`, `--line`, `--deep-navy`, `--shadow-lifted`, ...). Y va ANTES de la hoja del
modulo (`main/src/styles.css`, que Vite inyecta al final del ): asi cualquier override
por componente con la misma especificidad sigue ganando, igual que antes del movimiento.
El orden interno de los bloques replica el orden que tenian en `main/src/styles.css`, para que
la cascada resultante sea identica a la de antes.
───────────────────────────────────────────────────────────────────────────────────────────── */
/* ─── Estado de carga (`.loading`) ─── */
.loading {
text-align: center;
padding: 4rem 1rem;
color: var(--charcoal);
opacity: 0.6;
font-style: italic;
}
/* ─── Campos de formulario (`.field` y derivados) ─── */
.field { display: block; margin-bottom: 1.1rem; }
/* `span` covers label-wrapped fields; bare `label` covers fields that use htmlFor because
they hold a second control (see the password field's reveal toggle in LoginGate.jsx). */
.field span,
.field > label {
display: block;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--charcoal);
margin-bottom: 0.4rem;
}
.field input {
width: 100%;
padding: 0.7rem 0.95rem;
border: 1px solid var(--warm-tan);
border-radius: 8px;
font-size: 0.95rem;
font-family: inherit;
color: var(--deep-navy);
background: white;
transition: border 0.15s;
}
.field input:focus { outline: none; border-color: var(--brand-blue); }
.field select,
.field textarea { width: 100%; }
/* ─── Campo con control interno (`.field-with-affix`) ─── */
/* Input with a trailing control inside its border (password reveal toggle). The padding
reserves room so long values never slide under the button. */
.field-with-affix { position: relative; }
.field-with-affix input { padding-right: 2.9rem; }
.field-affix-btn {
position: absolute;
top: 50%;
right: 0.35rem;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--ink-muted);
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.field-affix-btn:hover { color: var(--deep-navy); background: rgba(220, 201, 166, 0.22); }
.field-affix-btn:focus-visible {
outline: 2px solid var(--brand-blue);
outline-offset: 1px;
color: var(--deep-navy);
}
.field-affix-btn[aria-pressed='true'] { color: var(--deep-navy); }
/* ─── Mensaje de error de formulario (`.err-msg`) ─── */
.err-msg {
color: #C9745D;
font-size: 0.82rem;
margin-top: 0.75rem;
padding: 0.6rem 0.85rem;
background: rgba(201, 116, 93, 0.08);
border-radius: 6px;
}
/* `.load-error` -- venia de `main/src/styles.css` compartiendo selector con
`.patient-list-empty` (`.patient-list-empty, .load-error { ... }`). Al mover solo la parte de
modal hubo que separar los selectores: los VALORES son los originales, intactos; lo unico que
cambio es que `.patient-list-empty` se quedo en la hoja de `main`, donde sigue siendo su unica
consumidora. */
.load-error { font-size: 0.85rem; color: var(--charcoal); opacity: 0.7; padding: 0.75rem 0; }
.load-error { color: #A33; opacity: 1; }
/* ─── Modificador del Centro de Acciones (`.modal-card.action-center`) ─── */
/* Overlay del Centro de Acciones (corrección 2026-08-27, ver `ActionCenter.jsx`): mismo patron de
cabecera que `.patient-detail-header`, con max-height propio para que las listas de tareas
scrolleen dentro del modal en vez de estirar la pagina entera. */
.modal-card.action-center { max-height: 85vh; display: flex; flex-direction: column; }
/* ─── Foto de usuario en formulario (`.user-form-photo*`) ─── */
/* Foto de perfil (`users-photo-upload`, 2026-08-26) -- port de Nexus/index.html:4391-4404. */
.user-form-photo {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
background: rgba(145, 189, 228, 0.1);
border: 1px solid rgba(145, 189, 228, 0.3);
border-radius: 10px;
}
.user-form-photo-preview {
width: 72px;
height: 72px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--line);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Libre Baskerville', serif;
font-size: 1.4rem;
color: var(--deep-navy);
flex-shrink: 0;
}
.user-form-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
/* Recuadro de la FIRMA escaneada. Reutiliza el marco de la foto (`.user-form-photo`) pero su
propia previsualizacion, porque las dos imagenes tienen forma opuesta: la foto es un circulo
de 72px con `object-fit: cover`; la firma es ANCHA Y BAJA y necesita `contain` -- recortarla
se come el principio y el final del trazo, y ese trazo se imprime en el PCP. */
.user-form-sig-preview {
width: 168px;
height: 72px;
border-radius: 8px;
background: #fff;
border: 1px solid var(--line);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
color: var(--ink-muted);
flex-shrink: 0;
}
.user-form-sig-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* En pantalla angosta el recuadro se apila sobre el texto en vez de dejarlo sin sitio. */
@media (max-width: 520px) {
.user-form-signature { flex-wrap: wrap; }
.user-form-sig-preview { width: 100%; }
}
.user-form-photo-info { flex: 1; }
.user-form-photo-title { font-size: 0.78rem; font-weight: 700; color: var(--deep-navy); margin-bottom: 0.2rem; }
.user-form-photo-hint { font-size: 0.7rem; color: var(--ink-muted); line-height: 1.4; margin-bottom: 0.5rem; }
.user-form-photo-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.user-form-photo-btn {
background: var(--deep-navy);
color: #fff;
border: none;
padding: 0.4rem 0.85rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
}
.user-form-photo-remove {
background: #fff;
color: #A33;
border: 1px solid rgba(170, 51, 51, 0.3);
padding: 0.4rem 0.85rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.75rem;
}
/* ─── UserProfileModal, vista de solo lectura (2026-08-27, corregido tras feedback -- primera
version reusaba el `
` generico del hub de paciente y quedaba plana/generica). Banner con
foto grande + nombre + rol, bordes redondeados heredados de `.modal-card` via margen negativo
para que sangre hasta el borde de la tarjeta sin un modificador nuevo de `.modal-card`. ─── */
.profile-card { position: relative; }
.profile-card-banner {
display: flex;
align-items: center;
gap: 0.9rem;
margin: -1.4rem -1.5rem 1.1rem;
padding: 1.6rem 1.5rem 1.3rem;
background: linear-gradient(160deg, var(--tan-wash), var(--soft-cream) 70%);
border-radius: 14px 14px 0 0;
border-bottom: 1px solid var(--line);
}
.profile-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--brand-blue);
color: var(--deep-navy);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.4rem;
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 0 0 3px #fff, var(--shadow-lifted);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card-identity { flex: 1; min-width: 0; }
.profile-card-identity h2 { margin: 0 0 0.35rem; font-size: 1.15rem; color: var(--deep-navy); }
.profile-role-badge {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.6rem;
border-radius: 999px;
background: rgba(184, 137, 78, 0.14);
border: 1px solid rgba(184, 137, 78, 0.4);
color: var(--warm-tan-dark);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.profile-edit-btn { flex-shrink: 0; align-self: flex-start; background: #fff; }
.profile-info-list { list-style: none; margin: 0; padding: 0; }
.profile-info-list li {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--line);
}
.profile-info-list li:last-child { border-bottom: none; }
.profile-info-icon { color: var(--warm-tan-dark); flex-shrink: 0; }
.profile-info-label {
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
width: 110px;
flex-shrink: 0;
}
.profile-info-value { font-size: 0.88rem; color: var(--deep-navy); overflow-wrap: anywhere; }
.profile-empty-hint { font-size: 0.85rem; color: var(--ink-muted); font-style: italic; text-align: center; padding: 1.2rem 0.5rem; }
/* ─── Modal overlay generico (Fase 9) -- PatientDetail.jsx, ChangePasswordModal.jsx ─── */
/* `.modal-close` NO se movio aqui: sigue en `main/src/styles.css`, ningun modal compartido con
`costeo` la usa. */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(26, 35, 50, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
z-index: 2000;
}
.modal-card {
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
background: var(--warm-cream);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow-lifted);
padding: 1.4rem 1.5rem;
}
/* ─── Boton "Editar" de cabecera (`.patient-detail-edit-btn`) ─── */
.patient-detail-edit-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.4rem 0.7rem;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
color: var(--deep-navy);
white-space: nowrap;
}
.patient-detail-edit-btn:hover { background: var(--warm-cream); }
/* ─── Fila de cierre al pie del modal (`.patient-detail-close-row`) ─── */
/* El idioma del paciente ya no vive aca (2026-08-27, movido a `PatientContactFields.jsx` --
el hub no muestra ni edita ningun otro dato del paciente, no tenia sentido que este si).
`.patient-detail-close-row` hereda el respiro de seccion que antes daba ese bloque. */
.patient-detail-close-row { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.8rem; }
/* ─── Acciones al pie del formulario (`.chpwd-actions`) ─── */
.chpwd-actions { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.chpwd-actions button[type='submit'] {
flex: 1;
background: var(--deep-navy);
color: #fff;
border: none;
border-radius: 8px;
padding: 0.6rem;
font-size: 0.85rem;
cursor: pointer;
}
.chpwd-actions button[type='button'] {
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.6rem 0.9rem;
font-size: 0.85rem;
cursor: pointer;
}
/* ─── Modificador ancho (`.modal-card-wide`) ─── */
/* Modificador de `.modal-card` para overlays anchos (panel "Solicitudes de descuento" de la
superficie B, `DiscountApprovalsPanel.jsx`, PR A3) -- se define aqui junto al resto del CSS de
descuentos para no fragmentar la hoja entre PRs encadenados; queda sin consumidor hasta A3. */
.modal-card-wide { max-width: 640px; }
/* ─── LogoutConfirmModal (2026-08-27; movido aqui desde `main/src/styles.css` en fase J) ─── Centrado, con icono en
circulo tintado -- NO coral: ese acento se reserva para lo irreversible (Zona de peligro,
DESIGN.md SS2 "The Coral Alarm Rule"); cerrar sesion se deshace con solo volver a entrar. */
.logout-confirm-card { max-width: 360px; text-align: center; }
.logout-confirm-icon {
width: 44px;
height: 44px;
margin: 0 auto 0.8rem;
border-radius: 50%;
background: var(--tan-wash);
color: var(--warm-tan-dark);
display: flex;
align-items: center;
justify-content: center;
}
.logout-confirm-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.logout-confirm-body { font-size: 0.85rem; color: var(--charcoal); line-height: 1.5; margin: 0 0 1.1rem; }
.logout-confirm-card .chpwd-actions { justify-content: center; }
.logout-confirm-card .chpwd-actions .logout-confirm-submit {
background: var(--deep-navy);
color: #fff;
border-color: var(--deep-navy);
}
/* ─── ConfirmModal, reemplazo generico de `window.confirm()`/`window.alert()` (2026-08-28) ─────
Mismo patron que LogoutConfirmModal de arriba: icono en circulo tintado, `.chpwd-actions`
centrado. `danger` tiñe el circulo y el boton de confirmar con el rojo de accion del sistema
(#A33, el mismo de `.pe-danger-btn` y `--nx-btn-danger-fg`) -- NUNCA `--coral`, que The Coral
Alarm Rule (DESIGN.md) reserva a lo irreversible (Zona de peligro). Un borrado de los que este
componente cubre (terapia, usuario, protocolo, grupo de pago, catalogo) no lo es. */
.confirm-modal-card { max-width: 400px; text-align: center; }
.confirm-modal-icon {
width: 44px;
height: 44px;
margin: 0 auto 0.8rem;
border-radius: 50%;
background: var(--tan-wash);
color: var(--warm-tan-dark);
display: flex;
align-items: center;
justify-content: center;
}
.confirm-modal-danger .confirm-modal-icon { background: #FCEDEC; color: #A33; }
.confirm-modal-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.confirm-modal-body { font-size: 0.85rem; color: var(--charcoal); line-height: 1.5; margin: 0 0 1.1rem; }
.confirm-modal-card .chpwd-actions { justify-content: center; }
/* Especificidad (0,3,0), a proposito: `.chpwd-actions button[type='button']` (0,2,1, mas arriba en
esta hoja) le gana a una clase sola (0,1,0) y pinta el boton blanco encima -- comprobado en
navegador, no en jsdom, que no calcula cascada real. Mismo patron que
`.logout-confirm-card .chpwd-actions .logout-confirm-submit`. */
.confirm-modal-card .chpwd-actions .confirm-modal-submit { background: var(--deep-navy); color: #fff; border-color: var(--deep-navy); }
.confirm-modal-card .chpwd-actions .confirm-modal-submit-danger { background: #A33; color: #fff; border-color: #A33; }
/* ─── Sesión de soporte: el diálogo que la abre, y el PIN que la habilita ──────────────────────
sdd/impersonation-initiator-and-pin (2026-08-28). Viven aquí y no en la hoja de `main` por §3.7:
`ImpersonateModal` y `PinSection` están en `shared/ui/`, y los tres módulos de staff enlazan
este archivo.
Reutilizan `.modal-overlay`, `.modal-card`, `.logout-confirm-icon` y `.chpwd-actions`: es el
mismo control con otro contenido, no un diálogo nuevo. Lo único propio es el cuerpo. */
.imp-start-card { max-width: 26rem; }
.imp-start-body { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--charcoal); }
/* La consecuencia se dice en voz baja pero se dice: quien lee esto ya decidió, y lo que necesita
es saber que el rastro queda a su nombre. Tinta secundaria, no un aviso rojo que se ignora. */
.imp-start-note { margin: 0 0 0.9rem; font-size: 0.8rem; color: var(--ink-muted); line-height: 1.4; }
.imp-start-field { display: block; margin-bottom: 0.6rem; }
.imp-start-field > span,
.pin-field > span {
display: block;
margin-bottom: 0.25rem;
font-size: 0.78rem;
color: var(--ink-muted);
}
.imp-start-field input,
.pin-field input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--line);
border-radius: var(--nx-btn-radius);
padding: 0.45rem 0.6rem;
font: inherit;
color: var(--charcoal);
background: #fff;
}
.imp-start-field input:focus-visible,
.pin-field input:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline-offset: 1px;
}
.imp-start-error,
.pin-section-error {
margin: 0 0 0.6rem;
font-size: 0.8rem;
/* El rojo del sistema (#A33 sobre blanco: 6.50:1), no `--coral`: The Coral Alarm Rule. */
color: #A33;
}
.pin-section-ok { margin: 0 0 0.6rem; font-size: 0.8rem; color: #216B4C; }
/* Respuesta a la pulsación: las dos acciones van al servidor. */
.imp-start-submit:active:not(:disabled),
.pin-section-submit:active:not(:disabled) { transform: scale(0.97); }
.imp-start-submit,
.pin-section-submit { transition: transform 160ms var(--ease); }
/* ─── Formulario del PIN, contenido de `SecurityModal` ───────────────────────────────────────────
Hasta el 2026-08-30 vivia dentro de `UserProfileModal`, como sub-bloque despues del boton
"Cerrar" (`margin-top`/`border-top` de arriba lo separaban de la tarjeta de perfil). Ahora es el
UNICO contenido de su propio modal (`SecurityModal.jsx`): sin nada previo de que separarse, ni
titulo propio que pintar (lo pone el `
` de la cabecera del modal, `.security-modal-title`). */
.pin-section { margin-top: 1.1rem; }
.pin-section-help { margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--ink-muted); line-height: 1.5; }
/* Icono + texto en la cabecera del modal, mismo criterio que un boton con icono: alineados en
linea, con un espacio fijo entre los dos -- no depende de que el icono use `currentColor`
(lucide-react ya lo hace por defecto) para heredar el color del titulo. */
.security-modal-title { display: flex; align-items: center; gap: 0.5rem; }
.pin-section-submit {
background: var(--deep-navy);
color: #fff;
border: none;
border-radius: var(--nx-btn-radius);
padding: 0.45rem 0.9rem;
font-size: 0.82rem;
cursor: pointer;
}
.pin-section-submit:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) {
.imp-start-submit,
.pin-section-submit { transition: none; }
}