/* ========================================================================== Formulario de Paciente — Liquid Glass flotante (mismo lenguaje que Citas) Se apoya en las clases ya existentes (.patient-form-card, .pf-*, .patient-field) definidas en paciente-form-premium.css; aquí: 1) se convierte en ventana flotante con fondo difuminado real, 2) se le da curva de resorte de Apple a lo interactivo, 3) se agrega el chevron a los selects (el menú lo dibuja js/citas-dropdown.js, ya extendido para cubrir .patient-form-card). Ningún ID cambia y ninguna regla del archivo base se toca — solo se agrega un wrapper .pf-sheet alrededor del contenido (ver templates/modales-lote4.html). ========================================================================== */ .patient-form-card { --pfg-spring: cubic-bezier(.22, 1, .36, 1); --pfg-fast: .18s; --pfg-med: .32s; } /* ── El backdrop: .patient-form-card pasa de "panel en la página" a ventana flotante. Se centra con inset+margin (no transform) para no atrapar nada. */ @keyframes pfBackdropIn { from { opacity: 0; } to { opacity: 1; } } .patient-form-card { position: fixed !important; inset: 0; margin: 0 !important; /* Antes de reubicar el formulario a hacía falta un z-index enorme para ganarle a .tab-view (contexto de apilamiento propio). Ahora que es hijo directo de , tiene que quedar por DEBAJO de: - .cg-select-panel (z-index:1000010 en citas-liquid-glass.css), o los desplegables quedan tapados detrás del formulario. - .modal-overlay (z-index:1000000 !important en styles.css — TODOS los modales de la app: escanear cédula, resultados DIAN, duplicados...). Con el mismo 1000000 que usaba antes, empataban en z-index y ganaba quien estuviera último en el DOM — y como este formulario se reubica al final de al abrirse, siempre terminaba tapando modales que se abren DESDE él y que deberían quedar encima (por eso "escanear cédula" se veía detrás). Por debajo de 1000000 el empate desaparece: cualquier modal estándar del sistema gana siempre. */ z-index: 999000; display: flex; /* el JS solo alterna none/flex */ align-items: flex-start; justify-content: center; /* El padding grande (90→106→148px) era un parche para esquivar visualmente las pestañas mientras el formulario seguía atrapado en el contexto de apilamiento de .tab-view. Ya no aplica: ahora que toggleFormPaciente reubica la tarjeta como hijo directo de (ver pacientes-module.js), la tarjeta cubre las pestañas por completo y no necesita ese aire extra. */ padding: 24px 16px 16px; overflow-y: auto; border: none !important; border-radius: 0 !important; background: radial-gradient(circle at 20% 10%, rgba(10, 132, 255, .26), transparent 46%), radial-gradient(circle at 84% 86%, rgba(52, 199, 190, .2), transparent 44%), rgba(15, 23, 42, .42) !important; backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: none !important; animation: pfBackdropIn .24s var(--pfg-spring); } .patient-form-card::before { display: none; } /* ── La lámina de vidrio real (nuevo wrapper, ver nota de arriba) ─────────── */ @keyframes pfSheetIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* IMPORTANTE: el scroll va aquí, en .pf-sheet, no en .pf-body. position:sticky solo funciona si el elemento es DESCENDIENTE del contenedor que scrollea — .pf-head y .pf-foot son hermanos de .pf-body, no hijos suyos. Poner el scroll en .pf-body dejaba a .pf-head/.pf-foot "sticky" respecto al backdrop de pantalla completa (su verdadero ancestro con scroll), escapándose del recuadro redondeado y descuadrando todo lo que venía debajo (por eso las secciones se veían encimadas: no era un bug del grid, sino de a qué contenedor terminaba pegándose el header). */ .pf-sheet { position: relative; width: min(1320px, 97vw); max-height: min(96vh, 1080px); margin-top: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; border: 1px solid rgba(255, 255, 255, .75); border-radius: 28px; background: linear-gradient(150deg, rgba(255, 255, 255, .86) 0%, rgba(240, 248, 255, .74) 55%, rgba(236, 250, 248, .8) 100%); backdrop-filter: blur(36px) saturate(1.8); -webkit-backdrop-filter: blur(36px) saturate(1.8); box-shadow: 0 40px 96px -26px rgba(15, 23, 42, .5), 0 8px 26px -14px rgba(10, 132, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .95); animation: pfSheetIn .38s var(--pfg-spring); } /* ── Modo pantalla completa: al crear un paciente nuevo y al editar uno existente (lo activa toggleFormPaciente en pacientes-module.js, junto con la pantalla completa real del navegador vía requestFullscreen). El formulario RIPS es largo y conviene aprovechar todo el espacio en los dos casos. Gana por especificidad a la regla de :max-width:820px de abajo, así que también aplica en móvil. */ .patient-form-card.pf-fullscreen-mode { padding: 0 !important; align-items: stretch !important; } .patient-form-card.pf-fullscreen-mode .pf-sheet { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; border: none; } .pf-sheet::-webkit-scrollbar { width: 8px; } .pf-sheet::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .28); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } /* Brillo especular diagonal, igual que en Citas. z-index:-1 (no position:relative en cada hijo) para que quede detrás sin tener que tocar el resto del árbol. */ .pf-sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .48) 48%, transparent 62%); opacity: .7; } /* ── Encabezado y pie quedan fijos; el resto del contenido scrollea con .pf-sheet ── */ .pf-head { flex-shrink: 0; position: sticky; top: 0; z-index: 3; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } /* El naranja de "faltan datos" desentonaba con el resto del vidrio (y hacía la barra más alta de lo necesario); se recolorea al mismo azul del formulario y se compacta para ganar alto útil — menos scroll para llegar al resto. */ .pf-rips-bar { flex-shrink: 0; padding: 7px 18px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: linear-gradient(180deg, rgba(219, 234, 254, .68), rgba(219, 234, 254, .38)) !important; } .pf-rips-bar.is-ok { background: linear-gradient(180deg, rgba(232, 250, 242, .72), rgba(232, 250, 242, .4)) !important; } .pf-rips-icon { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; border-color: rgba(10, 132, 255, .35) !important; color: #0a5cb8 !important; } .pf-rips-text { font-size: .73rem !important; color: #0a5cb8 !important; } .pf-rips-progress { height: 5px !important; } .pf-rips-progress span { background: linear-gradient(90deg, #0a84ff, #34c7be) !important; } .pf-rips-count { color: #0a5cb8 !important; } /* La lista de chips con cada campo faltante era redundante (cada campo ya se marca en rojo con su propio "*" y su tag RIPS) y era lo que más alto hacía esta barra. Se quita del todo — el ícono + el texto + la barra de progreso ya avisan que faltan datos, y "Guardar" sigue llevando campo por campo a quien le falte algo, vía el modal de pfBloquearPorCamposFaltantes. */ .pf-rips-missing { display: none !important; } /* "Nombre completo" era una casilla extra que solo repartía su texto en las 3 de RIPS (Nombres/1er apellido/2do apellido) — con esas ya alcanza. El input sigue en el DOM (window.recomponerNombrePaciente en pacientes-module.js lo sigue llenando solo, y con él el chequeo de duplicados que antes colgaba de su oninput), solo se deja de mostrar. */ #pf-campo-nombre-completo { display: none !important; } .pf-chip-missing { padding: 1px 8px !important; font-size: .64rem !important; border-color: rgba(10, 132, 255, .38) !important; background: rgba(255, 255, 255, .82) !important; color: #0a5cb8 !important; } .pf-chip-missing:hover { background: #0a84ff !important; border-color: #0a84ff !important; color: #fff !important; } [data-theme="dark"] .pf-rips-bar { background: linear-gradient(180deg, rgba(30, 58, 95, .55), rgba(30, 58, 95, .3)) !important; } [data-theme="dark"] .pf-rips-text, [data-theme="dark"] .pf-rips-count { color: #7cc4ff !important; } [data-theme="dark"] .pf-rips-icon, [data-theme="dark"] .pf-chip-missing { background: rgba(15, 23, 42, .7) !important; border-color: rgba(10, 132, 255, .4) !important; color: #7cc4ff !important; } .pf-foot { flex-shrink: 0; position: sticky; bottom: 0; z-index: 3; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } /* ── Curva de resorte Apple para todo lo interactivo ─────────────────────── El archivo base usa "transition: all .2s" genérico; se reemplaza la curva de tiempo sin tocar qué propiedades anima cada regla. */ .patient-form-card .patient-form-grid input, .patient-form-card .patient-form-grid select, .patient-form-card .patient-form-grid textarea, .pf-icon-btn, .pf-btn-cancel, .pf-btn-save, .pf-chip-missing, .pf-head-close, #btn-paciente-smart-voice { transition-timing-function: var(--pfg-spring) !important; } /* Entrada suave de cada campo al enfocarlo: burbuja como en Citas */ @keyframes pfBubblePop { 0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, .38), 0 0 0 0 rgba(10, 132, 255, .2); } 55% { box-shadow: 0 0 0 7px rgba(10, 132, 255, .14), 0 0 0 14px rgba(10, 132, 255, .06); } 100% { box-shadow: 0 0 0 12px rgba(10, 132, 255, 0), 0 0 0 22px rgba(10, 132, 255, 0); } } .patient-form-card .patient-form-grid select:focus, .patient-form-card .patient-form-grid input[type="date"]:focus { animation: pfBubblePop .55s var(--pfg-spring); } /* Botones: feedback táctil tipo iOS */ .pf-icon-btn:active, .pf-btn-cancel:active, .pf-head-close:active { transform: scale(.9) !important; } .pf-btn-save:active { transform: scale(.96) !important; } /* ── Alinear los inputs entre columnas de una misma fila ──────────────────── La etiqueta "RIPS" (.pf-tag-rips) va inline junto al texto del label y solo envuelve a una segunda línea cuando el campo es angosto (Tipo Usuario, en la fila con EPS que no tiene esa etiqueta y por eso queda en una sola línea). Resultado: el label de un campo mide más alto que el de su vecino y el input de abajo arranca más abajo — quedan desalineados. Reservando una altura fija de 2 líneas en TODOS los labels (los tengan o no), el input de cada campo siempre arranca a la misma altura sin importar cuánto ancho le tocó a esa columna. */ .patient-form-card .patient-field label { min-height: 27px; } /* ── Selects: chevron propio (el menú nativo se reemplaza por js/citas-dropdown.js, que ya cubre .patient-form-card) ─────────────────── Por qué TODO lleva !important aquí: la regla base tiene un ":focus" que usa background:#fff (atajo) — ese atajo resetea background-repeat al valor por defecto ("repeat"), y como ":focus" pesa más que una regla sin ":focus", le ganaba a esta incluso cargando yo después. Resultado: con el campo enfocado (que es como se ve apenas lo abres) el chevron se tapizaba en mosaico en vez de mostrarse una sola vez. Con !important en las 4 propiedades, en cualquier combinación de estado (normal/focus/abierto/abierto+focus) queda fijo sin dejarle ningún hueco a la cascada para revertirlo. */ .patient-form-card .patient-form-grid select, .patient-form-card .patient-form-grid select:focus { -webkit-appearance: none !important; appearance: none !important; padding-right: 30px !important; cursor: pointer; background-repeat: no-repeat !important; background-position: right 9px center !important; background-size: 14px 14px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6879' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; } .patient-form-card .patient-form-grid select.cg-select-abierto, .patient-form-card .patient-form-grid select.cg-select-abierto:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a84ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") !important; } /* Entrada escalonada de las secciones al abrir el formulario */ @keyframes pfSectionIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .pf-body > .pf-from-cita, .pf-body > .pf-section { animation: pfSectionIn .4s var(--pfg-spring) both; } .pf-body > .pf-section:nth-of-type(2) { animation-delay: .04s; } .pf-body > .pf-section:nth-of-type(3) { animation-delay: .08s; } .pf-body > .pf-section:nth-of-type(4) { animation-delay: .12s; } /* Pantalla ancha de sobra: 3 columnas en vez de 2 para las secciones 2/3/4 (Contacto, Aseguramiento, Adicional cada una en su propia columna) — caben en UNA fila en vez de dos, que es la mitad del scroll que pedías. La sección 1 (Identidad) sigue ocupando el ancho completo, como en la base. */ @media (min-width: 1240px) { .pf-body { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Con 3 columnas cada sección pasa a tener solo ~1/3 del ancho de la hoja. Adentro, algunas filas siguen usando los col-4/5/3 pensados para cuando la sección ocupaba la mitad (2 columnas) — ahí el select se queda sin espacio y el texto se corta ("SELECCIONA", "SELECCIONE DEP..."). Se les da el doble de ancho (ocupan la fila ellos solos) y el campo que sobraba (Zona / Régimen, que sí cabían bien) baja solo a la fila de abajo. */ #pf-campo-depto, #pf-campo-municipio, #pf-campo-regimen { grid-column: span 6 !important; } } /* Secciones opcionales (facturación NIT, acompañante): mismo vidrio que el resto, en vez del recuadro punteado plano que tenían. */ #pac-section-fe, #pac-section-acompanante { border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .8) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity var(--pfg-med) var(--pfg-spring); } #pac-section-fe { background: linear-gradient(160deg, rgba(240, 248, 255, .8), rgba(240, 248, 255, .5)) !important; } #pac-section-acompanante { background: linear-gradient(160deg, rgba(240, 253, 244, .82), rgba(240, 253, 244, .5)) !important; } /* ── Modo oscuro ────────────────────────────────────────────────────────── */ [data-theme="dark"] .patient-form-card { background: radial-gradient(circle at 20% 10%, rgba(10, 132, 255, .3), transparent 46%), radial-gradient(circle at 84% 86%, rgba(52, 199, 190, .22), transparent 44%), rgba(2, 6, 23, .6) !important; } [data-theme="dark"] .pf-sheet { background: linear-gradient(150deg, rgba(30, 41, 59, .84) 0%, rgba(15, 23, 42, .78) 100%); border-color: rgba(255, 255, 255, .12); } [data-theme="dark"] .pf-sheet::before { opacity: .16; } [data-theme="dark"] .patient-form-card .patient-form-grid select, [data-theme="dark"] .patient-form-card .patient-form-grid select:focus { background-repeat: no-repeat !important; background-position: right 9px center !important; background-size: 14px 14px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; } [data-theme="dark"] .patient-form-card .patient-form-grid select.cg-select-abierto, [data-theme="dark"] .patient-form-card .patient-form-grid select.cg-select-abierto:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") !important; } [data-theme="dark"] #pac-section-fe { background: linear-gradient(160deg, rgba(15, 23, 42, .7), rgba(15, 23, 42, .4)) !important; } [data-theme="dark"] #pac-section-acompanante { background: linear-gradient(160deg, rgba(6, 40, 26, .6), rgba(6, 40, 26, .35)) !important; } /* ── Accesibilidad / equipos modestos ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .patient-form-card, .pf-sheet, .pf-body > .pf-from-cita, .pf-body > .pf-section, .patient-form-card .patient-form-grid select:focus, .patient-form-card .patient-form-grid input[type="date"]:focus { animation: none !important; transition-duration: .01ms !important; } } @supports not (backdrop-filter: blur(1px)) { .patient-form-card, .pf-sheet, .pf-head, .pf-rips-bar, .pf-foot, #pac-section-fe, #pac-section-acompanante { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── Pantallas chicas: hoja de borde a borde, como en Citas ───────────────── */ @media (max-width: 820px) { .patient-form-card { padding: 0; align-items: flex-end; } .pf-sheet { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; } .pf-body { padding: 10px 12px 2px; } } /* ── Botón minimizar (junto al de cerrar, mismo look) ──────────────────────── */ .pf-head-minimize { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--pf-muted); background: rgba(255, 255, 255, .6); border: 1px solid var(--pf-hairline); transition: all .2s var(--pfg-spring); } .pf-head-minimize:hover { background: #fff; color: var(--pf-ink); transform: scale(1.06); } .pf-head-minimize:active { transform: scale(.92); } [data-theme="dark"] .pf-head-minimize { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #cbd5e1; } /* ── Píldora "registro en curso" (formulario minimizado) ─────────────────── Se crea con JS directo en (pacientes-module.js) para que, a diferencia de si viviera dentro de la pestaña Pacientes, no desaparezca al cambiar de pestaña — es justo el punto de minimizar: poder ir a hacer otra cosa y volver. */ /* Antes era un vidrio casi blanco sobre un fondo casi blanco: técnicamente se veía, pero no se notaba ("casi no se ve"). Ahora lleva un degradado azul translúcido (el mismo acento que el resto del formulario) para que contraste con cualquier pestaña de fondo, más un brillo que respira para que el ojo la encuentre sin tener que estar buscándola. */ @keyframes pfChipRespirar { 0%, 100% { box-shadow: 0 22px 50px -16px rgba(10, 132, 255, .55), 0 8px 22px -10px rgba(15, 23, 42, .4), inset 0 1px 0 rgba(255, 255, 255, .55); } 50% { box-shadow: 0 26px 58px -12px rgba(10, 132, 255, .78), 0 10px 26px -8px rgba(15, 23, 42, .48), inset 0 1px 0 rgba(255, 255, 255, .7); } } .pf-minimizado-chip { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px) scale(.9); z-index: 999000; display: flex; align-items: center; gap: 11px; padding: 13px 20px 13px 16px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px; background: linear-gradient(135deg, rgba(10, 132, 255, .94) 0%, rgba(56, 97, 251, .92) 55%, rgba(99, 102, 241, .94) 100%); backdrop-filter: blur(24px) saturate(2.1); -webkit-backdrop-filter: blur(24px) saturate(2.1); color: #fff; font-size: .84rem; font-weight: 750; letter-spacing: .01em; cursor: pointer; opacity: 0; transition: opacity .22s var(--pfg-spring), transform .32s var(--pfg-spring); animation: pfChipRespirar 2.6s ease-in-out infinite; } .pf-minimizado-chip.is-open { opacity: 1; transform: translate(-50%, 0) scale(1); } .pf-minimizado-chip:hover { transform: translate(-50%, -3px) scale(1.03); animation-play-state: paused; box-shadow: 0 30px 64px -14px rgba(10, 132, 255, .8), 0 12px 30px -8px rgba(15, 23, 42, .5), inset 0 1px 0 rgba(255, 255, 255, .75); } .pf-minimizado-chip.is-open:active { transform: translate(-50%, 0) scale(.97); } .pf-minimizado-chip .material-symbols-outlined { font-size: 19px; color: #fff; } .pf-minimizado-chip .pf-minimizado-abrir { font-size: 17px; opacity: .85; } [data-theme="dark"] .pf-minimizado-chip { border-color: rgba(255, 255, 255, .3); } @media (prefers-reduced-motion: reduce) { .pf-minimizado-chip { transition-duration: .01ms !important; animation: none !important; } }