/* MAIA Expediente — estilo base. Color de la app: #1B9388, solo en acentos (botón primario, nav activa, enlaces, tercer nodo). Todo lo demás, tinta neutra. */ :root { --acento: #1B9388; --acento-oscuro: #157a71; --acento-suave: #e6f4f2; --tinta: #17181A; --tinta-2: #4a4d52; --tinta-3: #80848a; --linea: #e4e4e0; --fondo: #F3F5F8; --fondo-2: #EDF0F4; /* un color por sección (lo pone ) */ --c-inicio: #5B5FC7; --c-agenda: #2E6FDB; --c-pacientes: #1B9388; --c-cirugias: #7A3FA0; --c-pagos: #C27A0E; --c-pendientes: #E0632E; --c-panel: #B0246F; --c-configuracion: #5C6B7A; --c-facturacion: #0E8FB3; --sec: var(--c-pacientes); --sec-suave: color-mix(in srgb, var(--sec) 12%, #fff); --lateral-fondo: #16262E; --lateral-fondo-2: #1F3540; --lateral-tinta: #C9D3D9; --blanco: #fff; --error: #b3261e; --error-suave: #fbeae8; --ok: #1e7a3b; --ok-suave: #e7f4ea; --aviso: #8a5a00; --aviso-suave: #fff4d6; --radio: 8px; --sombra: 0 1px 2px rgba(23,24,26,.06), 0 4px 14px rgba(23,24,26,.05); } body[data-sec=inicio] { --sec: var(--c-inicio); } body[data-sec=agenda] { --sec: var(--c-agenda); } body[data-sec=pacientes] { --sec: var(--c-pacientes); } body[data-sec=cirugias] { --sec: var(--c-cirugias); } body[data-sec=pagos] { --sec: var(--c-pagos); } body[data-sec=pendientes] { --sec: var(--c-pendientes); } body[data-sec=panel] { --sec: var(--c-panel); } body[data-sec=configuracion] { --sec: var(--c-configuracion); } body[data-sec=facturacion] { --sec: var(--c-facturacion); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { font-size: 15px; } body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } p { margin: 0 0 .75rem; } small, .peq { font-size: .85rem; color: var(--tinta-2); } .gris { color: var(--tinta-3); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; } hr { border: 0; border-top: 1px solid var(--linea); margin: 1.25rem 0; } /* ── íconos (siluetas en trazo) ─────────────────────────────────────────── */ .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .btn .ico { width: 17px; height: 17px; } /* ── barra lateral izquierda ─────────────────────────────────────────────── */ :root { --lateral: 78px; --superior: 0px; } .lateral { position: fixed; top: 0; left: 0; bottom: 0; width: var(--lateral); background: var(--lateral-fondo); border-right: 1px solid var(--lateral-fondo); display: flex; flex-direction: column; z-index: 30; padding: .9rem .5rem; transition: left .28s var(--suave, ease), right .28s var(--suave, ease), top .28s var(--suave, ease), bottom .28s var(--suave, ease), width .28s var(--suave, ease), height .28s var(--suave, ease); } .lateral .marca { display: flex; flex-direction: column; align-items: center; gap: .2rem; color: #fff; font-size: .72rem; padding: .15rem 0 .8rem; text-align: center; } .lateral .marca:hover { text-decoration: none; } .lateral .marca img { width: 30px; height: 30px; } .lateral .marca span { display: none; } .lateral .marca span b { font-weight: 600; } .lateral-nav { display: flex; flex-direction: column; gap: .2rem; } .lateral-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .15rem; border-radius: 8px; color: var(--lateral-tinta); font-weight: 500; font-size: .62rem; text-align: center; --mi: var(--lateral-tinta); letter-spacing: .01em; } .lateral-nav a .ico { width: 22px; height: 22px; color: var(--mi); opacity: .85; } .lateral-nav a:hover { background: var(--lateral-fondo-2); color: #fff; text-decoration: none; } .lateral-nav a.activo { color: #fff; background: var(--lateral-fondo-2); --mi: #fff; } .lateral-nav a.activo::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: #fff; } .lateral-nav a.activo .ico { opacity: 1; } .lateral-nav a .ico { width: 21px; height: 21px; } .lateral-nav .globo { top: 2px; right: 6px; } .lateral-nav .globo { position: absolute; top: 4px; right: 10px; font-size: .68rem; background: var(--aviso-suave); color: var(--aviso); border-radius: 999px; padding: 0 .4rem; font-weight: 600; } .lateral-pie { margin-top: auto; border-top: 1px solid var(--lateral-fondo-2); padding-top: .6rem; display: flex; flex-direction: column; gap: .1rem; } .lateral-pie .btn-chat { position: relative; border-radius: 8px; padding: .45rem .25rem; } .lateral-pie .btn-chat .globo { position: absolute; top: 2px; right: 10px; background: var(--c-pendientes); color: #fff; border-radius: 999px; padding: 0 .35rem; font-size: .62rem; font-weight: 700; } .lateral-pie .btn-chat:hover { background: var(--lateral-fondo-2); color: #fff; } .lateral-usuario { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .25rem; border-radius: 10px; color: #fff; text-align: center; } .lateral-usuario:hover { background: var(--lateral-fondo-2); text-decoration: none; } .lateral-usuario .ico { color: var(--lateral-tinta); } .lateral-usuario span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; max-width: 100%; } .lateral-usuario b { font-weight: 500; font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; } .lateral-usuario small { display: none; } .btn-lateral span { font-size: .62rem; } .btn-lateral { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 100%; padding: .45rem .25rem; border: 0; background: transparent; color: var(--lateral-tinta); font: inherit; font-size: .72rem; border-radius: 10px; cursor: pointer; } .btn-lateral:hover { background: var(--lateral-fondo-2); color: #fff; } .superior { position: sticky; top: 0; z-index: 20; height: var(--superior); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 2px solid var(--sec-suave); } body.con-lateral .contenido { margin-left: var(--lateral); transition: margin .28s var(--suave, ease); } .superior { display: none; } .buscador { flex: 1; max-width: 520px; display: flex; align-items: center; gap: .5rem; background: var(--blanco); border: 1px solid #cfd0cb; border-radius: 8px; padding: 0 .6rem; } .buscador .ico { color: var(--tinta-3); width: 18px; height: 18px; } .buscador input { border: 0; padding: .45rem .2rem; background: transparent; } .buscador input:focus { outline: none; } .buscador:focus-within { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); } .superior-derecha { margin-left: auto; } @media (max-width: 900px) { :root { --lateral: 60px; } .lateral { padding: .75rem .3rem; } .lateral .marca span, .lateral-nav a span:not(.globo), .lateral-usuario span, .btn-lateral span { display: none; } .lateral-nav a, .lateral-usuario, .btn-lateral { padding: .6rem .2rem; } .lateral .marca { padding-bottom: .6rem; } .lateral-nav .globo { right: 4px; } } /* ── Spine: la barra de navegación puede vivir a la izquierda (de entrada), arriba, abajo o a la derecha — cada quien la pone donde le acomode (Mi cuenta → Spine), igual que el Dock de una Mac. `body[data-spine]` decide el lado y el sentido (columna a los lados, renglón arriba/abajo); `--superior` y `--inferior` avisan a todo lo que flota (el chat, la ficha de la cita, el menú de Configuración…) cuánto espacio debe dejar arriba o abajo para no encimarse con Spine horizontal. Todo se mueve JUNTO, como un solo bloque (a petición del Dr., 20-sep-2026: nada de dejar huecos fijos en las orillas que Spine no ocupa — eso se probó y quedó peor que el problema original). Spine, el menú de Configuración y el contenido se acomodan en conjunto hacia donde vaya Spine; la animación (`transition`, misma duración y curva en `.lateral`, `.contenido` y `.config-menu`) es lo que hace que se sienta como un solo movimiento y no como piezas sueltas saltando cada una por su lado. */ :root { --inferior: 0px; --spine-size: 60px; } body[data-spine="arriba"] { --superior: var(--spine-size); } body[data-spine="abajo"] { --inferior: var(--spine-size); } body[data-spine="derecha"] .lateral { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--lateral-fondo); } body[data-spine="derecha"].con-lateral .contenido { margin-left: 0; margin-right: var(--lateral); } body[data-spine="derecha"] .lateral-nav a.activo::before { left: auto; right: 0; border-radius: 3px 0 0 3px; } body[data-spine="derecha"].config .contenido > .config-menu { left: 1.25rem; } body[data-spine="arriba"] .lateral, body[data-spine="abajo"] .lateral { left: 0; right: 0; width: auto; height: var(--spine-size); flex-direction: row; align-items: center; padding: 0 .6rem; gap: .3rem; } body[data-spine="arriba"] .lateral { top: 0; bottom: auto; border-right: 0; border-bottom: 1px solid var(--lateral-fondo); } body[data-spine="abajo"] .lateral { bottom: 0; top: auto; border-right: 0; border-top: 1px solid var(--lateral-fondo); } body[data-spine="arriba"] .lateral .marca, body[data-spine="abajo"] .lateral .marca, body[data-spine="arriba"] .lateral-nav, body[data-spine="abajo"] .lateral-nav, body[data-spine="arriba"] .lateral-pie, body[data-spine="abajo"] .lateral-pie { flex-direction: row; align-items: center; padding: 0; margin: 0; gap: .2rem; border: 0; } body[data-spine="arriba"] .lateral .marca, body[data-spine="abajo"] .lateral .marca { margin-right: .3rem; } body[data-spine="arriba"] .lateral-pie, body[data-spine="abajo"] .lateral-pie { margin-left: auto; } body[data-spine="arriba"] .lateral-nav a, body[data-spine="abajo"] .lateral-nav a { flex-direction: row; gap: .35rem; padding: .4rem .55rem; } body[data-spine="arriba"] .lateral-nav a.activo::before, body[data-spine="abajo"] .lateral-nav a.activo::before { top: auto; bottom: 0; left: 18%; right: 18%; height: 3px; width: auto; border-radius: 3px 3px 0 0; } body[data-spine="abajo"] .lateral-nav a.activo::before { bottom: auto; top: 0; border-radius: 0 0 3px 3px; } body[data-spine="arriba"] .lateral .marca span, body[data-spine="abajo"] .lateral .marca span, body[data-spine="arriba"] .lateral-nav a span:not(.globo), body[data-spine="abajo"] .lateral-nav a span:not(.globo), body[data-spine="arriba"] .lateral-usuario span, body[data-spine="abajo"] .lateral-usuario span, body[data-spine="arriba"] .btn-lateral span, body[data-spine="abajo"] .btn-lateral span { display: none; } body[data-spine="arriba"] .lateral-usuario, body[data-spine="abajo"] .lateral-usuario, body[data-spine="arriba"] .btn-lateral, body[data-spine="abajo"] .btn-lateral { width: auto; padding: .4rem; } body[data-spine="arriba"].con-lateral .contenido, body[data-spine="abajo"].con-lateral .contenido { margin-left: 0; } body[data-spine="arriba"].con-lateral .contenido { margin-top: var(--spine-size); } body[data-spine="abajo"].con-lateral .contenido { margin-bottom: var(--spine-size); } body[data-spine="arriba"].config .contenido > .config-menu, body[data-spine="abajo"].config .contenido > .config-menu { left: 1.25rem; } body[data-spine="abajo"].config .contenido > .config-menu { top: 1rem; } .btn-chat { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta-2); font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; position: relative; } .btn-chat:hover { background: var(--fondo-2); color: var(--tinta); } .btn-chat .ico { width: 18px; height: 18px; } .btn-chat .globo { background: var(--c-pendientes); color: #fff; border-radius: 999px; padding: 0 .4rem; font-size: .7rem; font-weight: 700; } .chat-cajon { position: fixed; top: var(--superior); right: 0; bottom: var(--inferior); width: 380px; max-width: 100vw; background: var(--blanco); border-left: 1px solid var(--linea); box-shadow: -8px 0 30px rgba(23,24,26,.12); z-index: 45; display: flex; flex-direction: column; } .chat-cajon > header { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border-bottom: 1px solid var(--linea); border-top: 3px solid var(--c-pendientes); } .chat-cajon > header b { margin-right: auto; } .chat-lista { flex: 1; overflow: auto; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .45rem; background: var(--fondo); } .chat-msj { display: flex; } .chat-msj.mio { justify-content: flex-end; } .chat-burbuja { max-width: 85%; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px 12px 12px 3px; padding: .45rem .7rem; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; } .chat-msj.mio .chat-burbuja { background: var(--sec-suave); border-color: transparent; border-radius: 12px 12px 3px 12px; } .chat-burbuja small { display: block; color: var(--tinta-3); font-size: .72rem; margin-bottom: .15rem; } .chat-form { display: flex; gap: .4rem; padding: .6rem .9rem; border-top: 1px solid var(--linea); background: var(--blanco); } .chat-form input { flex: 1; } .chat-pagina { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - var(--superior) - var(--inferior) - 140px); min-height: 420px; } .chat-pagina .chat-lista { padding: 1rem 1.25rem; } .en-curso { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: var(--error-suave); color: var(--error); font-size: .88rem; font-weight: 500; } .en-curso:hover { text-decoration: none; filter: brightness(.97); } .en-curso .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--error); animation: pulso 1.4s infinite; } @keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* modo marco: el expediente embebido dentro de la consulta, sin menú ni barra superior */ body.marco .contenido { padding: 1rem 1.25rem 3rem; } body.marco { background: #fff; } body.marco .ficha-cabecera h1 { font-size: 1.25rem; } body.marco .historial { display: none; } body.marco .columnas[style] { grid-template-columns: 1fr !important; } /* ── consulta en curso: grabación y cajón del expediente ─────────────────── */ .consulta-barra { position: sticky; top: var(--superior); z-index: 15; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem .9rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; box-shadow: var(--sombra); } .consulta-barra .cron { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; } .consulta-barra .grabando-ind { display: inline-flex; align-items: center; gap: .4rem; color: var(--error); font-weight: 600; font-size: .9rem; } .consulta-barra .grabando-ind .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--error); animation: pulso 1.2s infinite; } .cajon-expediente { position: fixed; top: var(--superior); right: 0; bottom: 0; width: min(52vw, 900px); background: var(--fondo); border-left: 1px solid var(--linea); box-shadow: -8px 0 30px rgba(23,24,26,.12); z-index: 40; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s; } .cajon-expediente.abierto { transform: none; } .cajon-expediente header { display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--linea); background: var(--blanco); } .cajon-expediente header .btn { padding: .3rem .6rem; } .cajon-cuerpo { flex: 1 1 auto; min-height: 0; display: flex; background: var(--fondo); } .cajon-expediente iframe, .cajon-cuerpo iframe { display: block; border: 0; width: 100%; flex: 1 1 auto; min-height: 0; background: var(--fondo); } .a-la-mano .previa { padding: .5rem 0; border-top: 1px solid var(--linea); font-size: .88rem; } .a-la-mano .previa:first-child { border-top: 0; } .a-la-mano .previa b { font-weight: 600; } .a-la-mano .previa .gris { font-size: .8rem; } .a-la-mano details summary { cursor: pointer; color: var(--acento); font-size: .82rem; } .a-la-mano details div { white-space: pre-wrap; font-size: .85rem; color: var(--tinta-2); margin-top: .3rem; } /* ── configuración: menú agrupado a la izquierda, sección a la derecha ───── */ body.config .contenido { display: block; padding-left: calc(1.25rem + 264px + 1.5rem); } body.config .contenido > .config-menu { position: fixed; top: calc(var(--superior) + 1rem); left: calc(var(--lateral) + 1.25rem); width: 264px; z-index: 5; transition: left .28s var(--suave, ease), top .28s var(--suave, ease); } body.config .contenido.angosto > * { max-width: none; } body.config .pestanas { display: none; } .config-menu { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: .5rem; font-size: .9rem; } .config-menu .config-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 600; padding: .55rem .8rem; border-radius: 8px; color: var(--tinta); margin-bottom: .25rem; } .config-menu .config-titulo.activo, .config-menu a.activo { background: color-mix(in srgb, var(--g, var(--sec)) 12%, #fff); color: var(--g, var(--sec)); } .config-menu .grupo { padding: .35rem 0 .2rem; border-top: 1px solid var(--linea); margin-top: .2rem; } .config-menu h4 { margin: .3rem .8rem .2rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--g, var(--tinta-3)); font-weight: 700; display: flex; align-items: center; gap: .4rem; } .config-menu h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g, var(--tinta-3)); } .config-menu a:not(.config-titulo) { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .8rem; border-radius: 8px; color: var(--tinta); } .config-menu a:hover { background: var(--fondo-2); text-decoration: none; } .config-menu a .ico { width: 15px; height: 15px; color: var(--tinta-3); } .config-lista { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; } .config-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: var(--tinta); border-top: 1px solid var(--linea); } .config-fila:first-child { border-top: 0; } .config-fila:hover { background: var(--fondo-2); text-decoration: none; } .config-fila .ico { color: var(--tinta-3); flex: none; } .config-fila:nth-child(8n+1) { --g: var(--c-inicio); } .config-fila:nth-child(8n+2) { --g: var(--c-pacientes); } .config-fila:nth-child(8n+3) { --g: var(--c-agenda); } .config-fila:nth-child(8n+4) { --g: var(--c-pendientes); } .config-fila:nth-child(8n+5) { --g: var(--c-cirugias); } .config-fila:nth-child(8n+6) { --g: var(--c-pagos); } .config-fila:nth-child(8n+7) { --g: var(--c-panel); } .config-fila:nth-child(8n+8) { --g: var(--c-configuracion); } .config-fila { box-shadow: inset 4px 0 0 var(--g, var(--sec)); } @media (max-width: 1000px) { body.config .contenido { grid-template-columns: 1fr; } body.config .contenido > .config-menu { position: static; grid-row: auto; grid-column: 1; } body.config .contenido > :not(.config-menu), body.config .contenido > .avisos { grid-column: 1; } } /* ── layout: se usa todo el ancho; solo los formularios cortos se acotan ─── */ .contenido { margin: 0 auto; padding: 1.1rem var(--orilla) 3rem; } body.con-lateral .contenido { max-width: none; } /* Dentro del expediente, los formularios cortos también usan el ancho que haya: nada de un tope en píxeles que deje media pantalla vacía a la derecha (20-sep). El tope de 720 px se queda solo para las pantallas sin barra (entrar, pre-registro del paciente, aviso de privacidad). */ body.con-lateral .contenido.angosto, body.con-lateral .contenido.angosto > * { max-width: none; } .contenido.pantalla-centro { padding: 2rem 1rem; } .contenido.ancho { max-width: 1400px; } .contenido.angosto { max-width: 720px; } .encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--sep); flex-wrap: wrap; } .encabezado h1, .contenido > h1, .config-menu + h1, .migas + h1 { margin-bottom: .15rem; padding-left: .7rem; border-left: 4px solid var(--sec); border-radius: 2px; } .acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .migas { font-size: .85rem; color: var(--tinta-3); margin-bottom: .5rem; } .migas a { color: var(--tinta-2); } .tarjeta { background: var(--blanco); border: 1px solid #e2e6eb; border-radius: 10px; padding: var(--relleno); box-shadow: var(--sombra); } /* ═══ Márgenes estándar (22 sep 2026, regla del Dr.: «procura dejar en todo el diseño siempre márgenes; estandarízalos como parte del diseño»). Una sola medida entre bloques —tarjetas, rejillas, KPIs, columnas, avisos, tablas sueltas— y se aplica sola: dos bloques seguidos, cualquiera que sean, quedan a --sep. Nada de style="margin-top" en las plantillas. ═══ */ :root { --sep: 1rem; --sep-chica: .5rem; --relleno: 1.25rem; --orilla: 1.25rem; } .bloque, .tarjeta, .kpis, .rejilla, .columnas, .rejilla-ajustes, .aviso, .tabla-suelta { margin-top: 0; } .contenido > :is(.tarjeta, .kpis, .rejilla, .columnas, .rejilla-ajustes, .aviso, .bloque, .tabla-suelta, .acciones, details.tarjeta, .pestanas, .filtros) + :is(.tarjeta, .kpis, .rejilla, .columnas, .rejilla-ajustes, .aviso, .bloque, .tabla-suelta, .acciones, details.tarjeta, .filtros, form.tarjeta, table.tabla, form), .columnas > div > :is(.tarjeta, .kpis, .rejilla, .aviso) + :is(.tarjeta, .kpis, .rejilla, .aviso) { margin-top: var(--sep); } .tarjeta + .tarjeta { margin-top: var(--sep); } .tarjeta-enlace { display: block; color: var(--tinta); } .tarjeta-enlace:hover { text-decoration: none; border-color: var(--sec); box-shadow: 0 0 0 1px var(--sec); } .tarjeta-enlace h3 { color: var(--sec); margin-bottom: .35rem; } .tarjeta h2 { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linea); font-size: 1.05rem; } /* El «?» va pegado al texto del título; solo lo último del renglón (etiqueta, contador, botón) se va a la derecha (22-sep, el Dr.: «el signo de ? queda raro como en medio») */ .tarjeta h2 > :last-child:not(.ayuda-q) { margin-left: auto; } .campo .dato { min-width: 0; overflow-wrap: anywhere; } .tarjeta h2 { padding-left: 1rem; background: linear-gradient(var(--sec), var(--sec)) no-repeat 0 .38em / 8px 8px; } .rejilla { display: grid; gap: var(--sep); align-items: start; } /* Alinear siempre (regla del Dr., 21-sep): en una fila las tarjetas empiezan a la misma altura (la regla de arriba, «tarjeta + tarjeta», bajaba 1rem a la segunda de la fila) y ninguna se estira para emparejarse con la de al lado (con una lista larga a un lado, la otra quedaba como un hueco blanco). Entre bloques, siempre el mismo espacio. */ .rejilla > .tarjeta, .columnas > .tarjeta, .columnas > div > .tarjeta:first-child { margin-top: 0; } .tarjeta + .rejilla, .rejilla + .rejilla, .rejilla + .tarjeta { margin-top: var(--sep); } .rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .columnas { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sep); align-items: start; } @media (max-width: 900px) { .columnas { grid-template-columns: 1fr; } } /* ── avisos ──────────────────────────────────────────────────────────────── */ .avisos { margin-bottom: 1rem; } .aviso { padding: .7rem 1rem; border-radius: var(--radio); margin-bottom: .5rem; border: 1px solid transparent; font-size: .95rem; } .aviso-ok { background: var(--ok-suave); color: var(--ok); border-color: #c9e6d0; } .aviso-error { background: var(--error-suave); color: var(--error); border-color: #f0c9c5; } .aviso-aviso, .aviso-message { background: var(--aviso-suave); color: var(--aviso); border-color: #f1dfa8; } .nota-legal { background: var(--sec-suave); border-left: 3px solid var(--sec); padding: .7rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; font-size: .9rem; color: var(--tinta-2); } /* ── formularios ─────────────────────────────────────────────────────────── */ label { display: block; font-size: .85rem; font-weight: 500; color: var(--tinta-2); margin-bottom: .25rem; } label .ayuda { font-weight: 400; color: var(--tinta-3); } input[type=text], input[type=search], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=file], select, textarea { width: 100%; padding: .5rem .65rem; border: 1px solid #cfd0cb; border-radius: 6px; background: var(--blanco); color: var(--tinta); font: inherit; font-size: .95rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); } textarea { min-height: 84px; resize: vertical; line-height: 1.45; } textarea.grande { min-height: 140px; } .campo { margin-bottom: .9rem; } .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem 1rem; } .campos .campo { margin-bottom: 0; } .campo-ancho { grid-column: 1 / -1; } fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem 1rem; margin: 0 0 1rem; } legend { font-weight: 600; font-size: .95rem; padding: 0 .4rem; } .check { display: flex; align-items: center; gap: .5rem; font-weight: 400; } .check input { width: auto; } .pie-form { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linea); flex-wrap: wrap; } .pie-form .izq { margin-right: auto; } /* ── botones ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 6px; border: 1px solid #cfd0cb; background: var(--blanco); color: var(--tinta); font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--fondo-2); text-decoration: none; } .btn-primario { background: var(--sec); border-color: var(--sec); color: #fff; } .btn-primario:hover { background: color-mix(in srgb, var(--sec) 85%, #000); border-color: color-mix(in srgb, var(--sec) 85%, #000); } .btn-peligro { color: var(--error); border-color: #e2b4b0; } .btn-peligro:hover { background: var(--error-suave); } .btn-texto { border-color: transparent; background: transparent; color: var(--tinta-2); padding: .5rem .6rem; } /* misma altura que los demás botones del renglón */ .btn-texto:hover { background: var(--fondo-2); color: var(--tinta); } .btn-chico { padding: .3rem .6rem; font-size: .82rem; } .btn[disabled] { opacity: .5; cursor: not-allowed; } form.inline { display: inline; } form.inline.acciones, .acciones.inline { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* Un botón dentro de un form en una barra de acciones se alinea igual que los enlaces de al lado (22-sep, el Dr.: «Restaurar y Respaldar no están alineados») */ .acciones form.inline { display: contents; } td form.inline { vertical-align: middle; } /* botones hermanos fuera de un contenedor flex: que no queden pegados */ .btn + .btn, form.inline + form.inline, form.inline + .btn, .btn + form.inline, details + .btn, .btn + details { margin-left: .4rem; } .acciones > .btn + .btn, .acciones > form.inline + form.inline, .acciones > form.inline + .btn, .acciones > .btn + form.inline, .acciones > details + .btn, .acciones > .btn + details, .estado-botones > *, .accesos > *, .pestanas > *, .lateral-nav > * { margin-left: 0; } form:not(.inline):not(.pie-form):not(.acciones) > .btn:last-child, .campos + .btn, .campo + .btn, textarea + .btn, table + .btn, .tabla + .btn, ul + .btn, p + .btn { margin-top: .6rem; } td .acciones, td form.inline { display: inline-flex; gap: .35rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; } /* los botones de una celda van en un renglón; la tabla les da su ancho */ .nowrap { white-space: nowrap; } /* ── tablas ──────────────────────────────────────────────────────────────── */ .tabla { width: 100%; border-collapse: collapse; font-size: .93rem; } .tabla th { text-align: left; font-weight: 600; color: var(--sec); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 2px solid var(--sec-suave); } .tabla td { padding: .6rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top; } .tabla tr:last-child td { border-bottom: 0; } .tabla tr:hover td { background: var(--fondo-2); } .tabla .num { text-align: right; font-variant-numeric: tabular-nums; } .tabla-envuelta { overflow-x: auto; } /* ── etiquetas y estados ─────────────────────────────────────────────────── */ .etiqueta { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--fondo-2); color: var(--tinta-2); white-space: nowrap; } .etiqueta-acento { background: var(--acento-suave); color: var(--acento-oscuro); } .etiqueta-ok { background: var(--ok-suave); color: var(--ok); } .etiqueta-error { background: var(--error-suave); color: var(--error); } .etiqueta-aviso { background: var(--aviso-suave); color: var(--aviso); } .etiqueta-info { background: color-mix(in srgb, var(--c-agenda) 12%, #fff); color: var(--c-agenda); } .etiqueta-morada { background: color-mix(in srgb, var(--c-cirugias) 12%, #fff); color: var(--c-cirugias); } .etiqueta-sec { background: var(--sec-suave); color: var(--sec); } .vacio { color: var(--tinta-3); text-align: center; padding: 2rem 1rem; } /* ── pestañas ────────────────────────────────────────────────────────────── */ .pestanas { display: flex; gap: .2rem; border-bottom: 1px solid var(--linea); margin-bottom: 1.25rem; flex-wrap: wrap; } .pestanas a { padding: .55rem .9rem; color: var(--tinta-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; } .pestanas a:hover { text-decoration: none; color: var(--tinta); } .pestanas a.activa { color: var(--sec); border-bottom-color: var(--sec); } .pestanas .contador { font-size: .75rem; background: var(--fondo-2); border-radius: 999px; padding: 0 .4rem; margin-left: .3rem; color: var(--tinta-3); } /* ── ficha de paciente ───────────────────────────────────────────────────── */ .ficha-cabecera { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .ficha-cabecera h1 { padding-left: .7rem; border-left: 4px solid var(--sec); border-radius: 2px; } .ficha-cabecera .datos { display: flex; gap: 1.25rem; flex-wrap: wrap; color: var(--tinta-2); font-size: .92rem; } .ficha-cabecera .datos b { color: var(--tinta); font-weight: 500; } .dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; font-size: .93rem; } .dl dt { color: var(--tinta-3); font-weight: 500; } .dl dd { margin: 0; white-space: pre-wrap; } .alerta-alergia { background: var(--error-suave); color: var(--error); border-radius: 6px; padding: .4rem .7rem; font-weight: 600; font-size: .9rem; } /* ── línea de tiempo de notas ────────────────────────────────────────────── */ .linea { list-style: none; margin: 0; padding: 0; } .linea li { display: grid; grid-template-columns: 150px 1fr auto; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--linea); align-items: baseline; } .linea li:last-child { border-bottom: 0; } .linea .cuando { color: var(--tinta-2); font-size: .9rem; } .linea .que b { font-weight: 600; } .linea .que .dx { color: var(--tinta-2); font-size: .92rem; } /* ── nota clínica ────────────────────────────────────────────────────────── */ .nota-hoja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 2rem 2.25rem; box-shadow: var(--sombra); max-width: 860px; margin: 0 auto; } .nota-membrete { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1.25rem; } .nota-membrete .med { font-weight: 600; } .nota-membrete .cons { color: var(--tinta-2); font-size: .9rem; } .nota-paciente { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem 1rem; background: var(--fondo-2); padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1.25rem; font-size: .92rem; } .nota-paciente span { display: block; color: var(--tinta-3); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; } .nota-seccion { margin-bottom: 1.1rem; } .nota-seccion h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); margin-bottom: .3rem; } .nota-seccion .texto { white-space: pre-wrap; } .nota-seccion .kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem 1rem; font-size: .93rem; } .nota-seccion .kv div b { font-weight: 500; color: var(--tinta-2); } .nota-firma { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; } .sello { display: inline-flex; align-items: center; gap: .45rem; background: var(--acento-suave); color: var(--acento-oscuro); border-radius: 6px; padding: .4rem .8rem; font-weight: 600; font-size: .9rem; } .sello.borrador { background: var(--aviso-suave); color: var(--aviso); } .sello.alerta { background: var(--error-suave); color: var(--error); } .signos { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .6rem; } .signos label { font-size: .78rem; } .exploracion-seccion { margin-bottom: 1rem; } .exploracion-seccion h4 { font-size: .9rem; color: var(--tinta-2); margin: 0 0 .5rem; } /* ── agenda ──────────────────────────────────────────────────────────────── */ .agenda-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .agenda-nav h1 { font-size: 1.25rem; margin: 0 .5rem; } .agenda-nav h1::first-letter, .encabezado h1::first-letter { text-transform: uppercase; } .semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; } .dia-col { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); min-height: 320px; display: flex; flex-direction: column; } .dia-col.hoy { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); } .dia-col header { padding: .5rem .7rem; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: baseline; } .dia-col header a { color: var(--tinta); font-weight: 600; text-transform: capitalize; } .dia-col header .n { font-size: .78rem; color: var(--tinta-3); } .dia-col .citas { padding: .4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } .dia-col .agregar { margin: .4rem; text-align: center; font-size: .82rem; color: var(--tinta-3); padding: .3rem; border: 1px dashed var(--linea); border-radius: 6px; } .dia-col .agregar:hover { color: var(--acento); border-color: var(--acento); text-decoration: none; } .cita { display: block; padding: .4rem .55rem; border-radius: 6px; background: var(--fondo-2); border-left: 3px solid var(--tinta-3); color: var(--tinta); font-size: .84rem; line-height: 1.3; } .cita:hover { text-decoration: none; background: #ecece7; } .cita .hora { font-weight: 600; font-variant-numeric: tabular-nums; } .cita .quien { display: block; font-weight: 500; overflow-wrap: break-word; } .cita .motivo { display: block; color: var(--tinta-2); font-size: .78rem; overflow-wrap: break-word; } .cita.primera_vez { border-left-color: var(--acento); } .cita.cirugia, .cita.procedimiento { border-left-color: var(--c-cirugias); } .cita.subsecuente { border-left-color: var(--c-agenda); } .cita.bloqueo { border-left-color: #cfd0cb; color: var(--tinta-3); background: repeating-linear-gradient(45deg, var(--fondo-2), var(--fondo-2) 6px, #efefe9 6px, #efefe9 12px); } .cita.cancelada, .cita.no_asistio { opacity: .5; text-decoration: line-through; } .cita.atendida { border-left-color: var(--ok); } .dia-lista { display: grid; grid-template-columns: 70px 1fr; } .dia-lista .hora-fila { padding: .6rem .5rem; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: .85rem; font-variant-numeric: tabular-nums; } .dia-lista .celda { border-top: 1px solid var(--linea); padding: .35rem .5rem; min-height: 48px; display: flex; flex-direction: column; gap: .35rem; } .dia-lista .celda .agregar { color: var(--tinta-3); font-size: .8rem; opacity: 0; } .dia-lista .celda:hover .agregar { opacity: 1; } .cita-detalle { display: grid; grid-template-columns: 90px 1fr auto; gap: .75rem 1rem; align-items: center; padding: .55rem .7rem; border-radius: 6px; background: var(--fondo-2); border-left: 3px solid var(--tinta-3); } .cita-detalle .hora { font-weight: 600; font-variant-numeric: tabular-nums; } .leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--tinta-3); } .leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; } @media (max-width: 1000px) { .semana { grid-template-columns: repeat(2, 1fr); } .dia-col { min-height: 0; } } /* ── agenda: rejilla a la izquierda, barra a la derecha, panel de la cita como cajón ── */ .agenda-2 { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 1.25rem; align-items: start; } .agenda-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; } .agenda-cab h1 { font-size: 1.15rem; margin: 0 .25rem; font-weight: 600; } .btn-grupo { display: inline-flex; gap: .15rem; } .btn-grupo .btn { margin: 0 !important; } .btn-grupo.vistas { border-bottom: 1px solid var(--linea); border-radius: 0; gap: 0; } .btn-grupo.vistas .btn { border: 0; border-radius: 0; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px !important; padding: .4rem .8rem; color: var(--tinta-2); } .btn-grupo.vistas .btn.on { color: var(--sec); border-bottom-color: var(--sec); font-weight: 600; } .rejilla-wrap { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: auto; height: calc(100vh - var(--superior) - var(--inferior) - 118px); min-height: 520px; } .rej-tabla { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: calc(var(--horas, 12) * var(--alto, 88px) + 40px); } .dia-rejilla { grid-template-columns: 52px minmax(0, 1fr); } .rej-esquina { border-bottom: 1px solid var(--linea); } .rej-cab-fija { position: sticky; top: 0; z-index: 6; background: var(--blanco); } .rej-dia-cab { display: flex; align-items: baseline; justify-content: center; gap: .35rem; padding: .5rem 0 .4rem; border-bottom: 1px solid var(--linea); border-left: 1px solid var(--linea); position: relative; } .rej-dia-cab small { font-size: .72rem; letter-spacing: .04em; color: var(--tinta-3); text-transform: none; } .rej-dia-cab .num { font-size: 1.05rem; font-weight: 600; color: var(--tinta); } .rej-dia-cab.hoy small, .rej-dia-cab.hoy .num { color: var(--acento); } .rej-dia-cab.hoy::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; background: var(--acento); border-radius: 3px 3px 0 0; } .rej-horas { display: grid; grid-auto-rows: minmax(0, 1fr); min-height: 0; } .rej-hora { font-size: .68rem; color: var(--tinta-3); text-align: right; padding: 2px 8px 0 0; font-variant-numeric: tabular-nums; } .rej-hora + .rej-hora { border-top: 1px dashed var(--linea); } .rej-col { position: relative; border-left: 1px solid var(--linea); min-height: 0; background: repeating-linear-gradient(to bottom, transparent 0 calc(100% / var(--horas) - 1px), var(--linea) calc(100% / var(--horas) - 1px) calc(100% / var(--horas))), #ebedf0; display: grid; grid-auto-rows: minmax(0, 1fr); } .rej-col.hoy { background-color: var(--acento-suave); background-blend-mode: multiply; } .rej-celda { display: block; } .rej-celda:hover { background: rgba(27,147,136,.1); } .franja { position: absolute; left: 0; right: 0; pointer-events: none; border-left: 3px solid var(--fc, var(--c-pacientes)); background: color-mix(in srgb, var(--fc, var(--c-pacientes)) 16%, #fff); } .franja::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: inherit; opacity: 1; } .bloque { position: absolute; left: 3px; right: 3px; border-radius: 6px; background: color-mix(in srgb, var(--lc, var(--c-agenda)) 14%, #fff); border-left: 4px solid var(--lc, var(--c-agenda)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc, var(--c-agenda)) 22%, transparent); padding: 4px 6px 3px 7px; font-size: .76rem; line-height: 1.2; overflow: hidden; color: var(--tinta); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 22px; } .bloque:hover { text-decoration: none; background: color-mix(in srgb, var(--lc, var(--c-agenda)) 22%, #fff); z-index: 3; } .bloque .quien { font-weight: 600; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; overflow-wrap: anywhere; } .bloque .quien .bandera-ico, .bloque .quien .ok { display: inline-block; vertical-align: -2px; } .bloque .quien .tipo-pac { display: inline-flex; vertical-align: -3px; } .bloque.corto .det { display: none; } .bloque.minimo { padding-top: 2px; padding-bottom: 2px; } .bloque.minimo .quien { -webkit-line-clamp: 1; } .bloque .quien .ok { color: var(--acento); font-weight: 700; } .bloque .det { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; font-size: .7rem; } .bloque.atendida { background: color-mix(in srgb, var(--lc, var(--c-agenda)) 6%, #fff); box-shadow: none; } .bloque.atendida .quien { color: var(--tinta-2); } .bloque.cancelada, .bloque.no_asistio { opacity: .45; text-decoration: line-through; } .bloque.seleccionada { box-shadow: 0 0 0 2px var(--tinta); z-index: 4; } .bloque.bloqueo { background: #dfe2e6; border-left-color: #b4bac2; box-shadow: none; color: var(--tinta-2); cursor: default; } .bloque.amplio { font-size: .86rem; padding: 6px 10px 5px 10px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; align-content: flex-start; } .bloque.amplio .quien { white-space: normal; } .bloque.amplio.corto .det { display: inline; } .bloque .etiqueta { font-size: .66rem; padding: 0 .35rem; vertical-align: 1px; } .ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--tinta); z-index: 5; pointer-events: none; } .ahora::after { content: attr(data-hora); position: absolute; right: 4px; top: -9px; font-size: .62rem; background: var(--tinta); color: #fff; padding: 0 .35rem; border-radius: 3px; line-height: 1.5; font-variant-numeric: tabular-nums; } .mes-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; } .mes-cab { background: var(--fondo-2); font-size: .72rem; letter-spacing: .05em; color: var(--tinta-3); text-align: center; padding: .4rem 0; text-transform: uppercase; } .mes-dia { background: var(--blanco); min-height: 104px; padding: .3rem .4rem; display: flex; flex-direction: column; gap: 2px; } .mes-dia.otro { background: var(--fondo-2); opacity: .7; } .mes-dia .num { align-self: flex-end; font-weight: 600; color: var(--tinta); width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; } .mes-dia.hoy .num { background: var(--acento); color: #fff; } .mes-cita { display: block; font-size: .72rem; line-height: 1.25; padding: 2px 5px; border-radius: 4px; background: var(--fondo-2); border-left: 3px solid var(--lc, var(--tinta-3)); color: var(--tinta); overflow-wrap: anywhere; } /* nada de «…»: se parte en dos renglones */ .mes-cita:hover { text-decoration: none; background: var(--acento-suave); } .mes-cita.atendida { background: var(--ok-suave); } /* Las cirugías (propias y de tercero) van en el color de Cirugías: se distinguen de las consultas, que llevan el de su consultorio. Con !important porque el bloque trae en línea el color de su lugar (el hospital). */ .mes-mas { font-size: .7rem; color: var(--acento); } .mes-bloqueo { font-size: .7rem; color: var(--tinta-3); text-decoration: line-through; } .barra-agenda { position: sticky; top: calc(var(--superior) + 1rem); display: flex; flex-direction: column; gap: .9rem; } .caja-dia.oscura { background: var(--blanco); border-left: 4px solid var(--acento); } .caja-dia.oscura .titulo-dia { font-size: .95rem; margin-bottom: .2rem; color: var(--tinta-2); } .caja-dia.oscura ul li:first-child { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--tinta); margin-bottom: .2rem; } .caja-dia.oscura li.alerta { color: var(--aviso); font-weight: 600; } .caja-dia.oscura li.tenue { color: var(--tinta-3); } .mini-cal td a.sel { border-radius: 4px; background: var(--tinta); } .mini-cal td a.hoy:not(.sel) { box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; } .lugar-check { align-items: flex-start; } .lugar-check .color { width: 10px; height: 10px; border-radius: 3px; flex: none; margin-top: .3rem; } .lugar-check span { display: flex; flex-direction: column; line-height: 1.25; } .lugar-check small { color: var(--tinta-3); font-size: .74rem; } .panel-cita.cajon { position: fixed; top: var(--superior); right: 0; bottom: var(--inferior); width: 380px; max-height: none; background: var(--fondo); border-left: 1px solid var(--linea); box-shadow: -8px 0 30px rgba(23,24,26,.12); z-index: 40; padding: 1rem; overflow: auto; transform: translateX(100%); transition: transform .18s; } .agenda-2.con-panel .panel-cita.cajon { transform: none; } @media (max-width: 1100px) { .agenda-2 { grid-template-columns: 1fr; } .barra-agenda { position: static; } } .mini-cal { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem; } .mini-cal header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; } .mini-cal header b { font-size: .92rem; text-transform: capitalize; } .mini-cal header a { color: var(--tinta-2); display: inline-flex; padding: .15rem; border-radius: 4px; } .mini-cal header a:hover { background: var(--fondo-2); } .mini-cal table { width: 100%; border-collapse: collapse; font-size: .8rem; text-align: center; } .mini-cal th { color: var(--tinta-3); font-weight: 500; padding-bottom: .3rem; font-size: .7rem; } .mini-cal td { padding: 1px; } .mini-cal td a, .mini-cal td span { display: block; padding: .3rem 0; border-radius: 6px; color: var(--tinta); position: relative; line-height: 1.2; } .mini-cal td a:hover { background: var(--fondo-2); text-decoration: none; } .mini-cal td a.hoy { font-weight: 700; color: var(--acento); } .mini-cal td a.sel { background: var(--acento); color: #fff; } .mini-cal td a.bloqueado { color: var(--tinta-3); text-decoration: line-through; } .mini-cal td a .pto { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--acento); margin: 1px auto 0; } .mini-cal td a.sel .pto { background: #fff; } .mini-cal td span { color: var(--tinta-3); opacity: .4; } .caja-dia { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem .9rem; } .caja-dia .titulo-dia { font-weight: 600; } .caja-dia .titulo-dia::first-letter { text-transform: uppercase; } .caja-dia .n { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; } .caja-dia ul { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .86rem; color: var(--tinta-2); display: grid; gap: .2rem; } .caja-dia li b { color: var(--tinta); font-weight: 600; } .lugares-agenda { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem .9rem; font-size: .86rem; } .lugares-agenda h4 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); } .lugares-agenda .lugar-item { padding: .45rem 0; border-top: 1px solid var(--linea); } .lugares-agenda .lugar-item:first-of-type { border-top: 0; } .lugares-agenda .lugar-item b { display: block; } .lugares-agenda .lugar-item small { color: var(--tinta-3); display: block; } .lugares-agenda .dias { display: flex; gap: .2rem; margin-top: .3rem; flex-wrap: wrap; } .lugares-agenda .dias span { font-size: .7rem; padding: .05rem .4rem; border-radius: 4px; background: var(--fondo-2); color: var(--tinta-3); } .lugares-agenda .dias span.on { background: var(--acento-suave); color: var(--acento-oscuro); font-weight: 600; } .panel-cita { position: sticky; top: calc(var(--superior) + 1rem); max-height: calc(100vh - var(--superior) - var(--inferior) - 2rem); overflow: auto; } .panel-cita .tarjeta { padding: 1rem; } .panel-cita h2 { font-size: 1rem; } .panel-cita .cerrar { float: right; color: var(--tinta-3); display: inline-flex; padding: .1rem; border-radius: 4px; } .panel-cita .cerrar:hover { background: var(--fondo-2); color: var(--tinta); } .panel-cita .estado-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; } .panel-cita .estado-botones .btn { justify-content: center; } .panel-cita .estado-botones .btn.on { background: var(--acento); border-color: var(--acento); color: #fff; } .panel-cita .estado-botones .btn.on.mal { background: var(--error); border-color: var(--error); } .panel-cita .accesos { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-top: .7rem; } .panel-cita .accesos.externos { margin-top: .6rem; opacity: .75; } .panel-cita .panel-ficha { border-top: 4px solid var(--c-pacientes); } .panel-cita .panel-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 1.6rem .6rem 0; } .panel-cita .panel-nombre a { font-size: 1.15rem; font-weight: 600; color: var(--tinta); letter-spacing: -.01em; } .panel-cita .panel-nombre a:hover { color: var(--c-pacientes); text-decoration: none; } .panel-cita .ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; font-size: .88rem; } .panel-cita .ficha-datos > div { min-width: 0; } .panel-cita .ficha-datos > div.ancho { grid-column: 1 / -1; } .panel-cita .ficha-datos span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 600; } .panel-cita .ficha-datos b { display: block; font-weight: 500; color: var(--tinta); overflow-wrap: break-word; } .panel-cita .ficha-datos small { display: block; font-size: .78rem; } .panel-cita .estado-botones { margin-top: .8rem; } .panel-cita .nota-cita { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--linea); } .panel-cita .nota-cita textarea { min-height: 56px; font-size: .88rem; } .panel-cita .nota-cita .acciones { margin-top: .35rem; justify-content: flex-end; } .panel-cita .cobro-cab { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; } .panel-cita .cobro-cab span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 600; } .panel-cita .cobro-cab .ajustar { margin-left: auto; } .panel-cita .cobro-cab .ajustar summary { list-style: none; } .panel-cita .cobro-cab .ajustar form { margin-top: .4rem; } .panel-cita .pagos-lista { margin: 0 0 .6rem; padding: 0; list-style: none; font-size: .86rem; } .panel-cita .pagos-lista li { padding: .25rem 0; border-top: 1px dashed var(--linea); } .panel-cita .accesos .btn { justify-content: center; } .panel-cita .cobro-total { font-size: 1.35rem; font-weight: 600; color: var(--c-pagos); } .panel-cita dl.dl { grid-template-columns: 90px 1fr; gap: .25rem .6rem; font-size: .88rem; } .cita-detalle.seleccionada, .cita.seleccionada { outline: 2px solid var(--acento); outline-offset: 1px; } .cita-detalle[data-cita] { cursor: pointer; } @media (max-width: 1200px) { .agenda-3, .agenda-3.con-panel { grid-template-columns: 1fr; } .barra-agenda, .panel-cita { position: static; } .agenda-3 > .panel-cita { order: -1; } } /* ── inicio ──────────────────────────────────────────────────────────────── */ .kpis { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--sep); } /* flex: el último renglón también se llena (22-sep, manual: nada de espacio desperdiciado) */ .kpis > .kpi { flex: 1 1 150px; min-width: 0; } .kpi { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem; border-top: 4px solid var(--k, var(--sec)); box-shadow: var(--sombra); } .kpi:nth-child(8n+1) { --k: var(--c-pacientes); } .kpi:nth-child(8n+2) { --k: var(--c-agenda); } .kpi:nth-child(8n+3) { --k: var(--c-cirugias); } .kpi:nth-child(8n+4) { --k: var(--c-pagos); } .kpi:nth-child(8n+5) { --k: var(--c-inicio); } .kpi:nth-child(8n+6) { --k: var(--c-pendientes); } .kpi:nth-child(8n+7) { --k: var(--c-panel); } .kpi:nth-child(8n+8) { --k: var(--c-configuracion); } .kpi .valor { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; color: var(--k, var(--sec)); } .kpi .titulo { color: var(--tinta-3); font-size: .82rem; } /* ── autocompletar ───────────────────────────────────────────────────────── */ .autocompletar { position: relative; } .autocompletar .sugerencias { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; box-shadow: var(--sombra); max-height: 260px; overflow: auto; display: none; } .autocompletar .sugerencias.abierto { display: block; } .autocompletar .sugerencias div { padding: .5rem .7rem; cursor: pointer; font-size: .92rem; } .autocompletar .sugerencias div:hover, .autocompletar .sugerencias div.sel { background: var(--acento-suave); } .autocompletar .sugerencias small { display: block; color: var(--tinta-3); } .paciente-elegido { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--acento-suave); border-radius: 6px; padding: .55rem .8rem; } /* ── login / primer arranque ─────────────────────────────────────────────── */ .pantalla-centro { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; } body.entrada { --sec: var(--c-pacientes); background: linear-gradient(135deg, #1D3A5F 0%, #16262E 45%, #17554F 100%); background-attachment: fixed; } body.entrada .caja-login { border: 0; box-shadow: 0 20px 60px rgba(0,0,0,.35); } body.entrada .caja-login .logo span { font-size: 1.35rem; } body.entrada .caja-login .logo::after { content: "Expediente clínico electrónico"; font-size: .8rem; color: var(--tinta-3); } .caja-login { width: 100%; max-width: 400px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 2rem; box-shadow: var(--sombra); } .caja-login .logo { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.5rem; } .caja-login .logo span { font-size: 1.25rem; } .caja-login .logo span b { font-weight: 600; } .caja-arranque { max-width: 760px; } /* ── archivos ────────────────────────────────────────────────────────────── */ .archivos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; } .archivo { border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem; background: var(--blanco); font-size: .85rem; display: flex; flex-direction: column; gap: .35rem; } .archivo .miniatura { height: 120px; background: var(--fondo-2); border-radius: 4px; display: grid; place-items: center; overflow: hidden; color: var(--tinta-3); font-weight: 600; } .archivo .miniatura img { width: 100%; height: 100%; object-fit: cover; } .archivo .nombre { font-weight: 500; overflow-wrap: break-word; } .zona-subir { border: 2px dashed var(--linea); border-radius: var(--radio); padding: 1rem; text-align: center; color: var(--tinta-2); } .zona-subir.arrastrando { border-color: var(--acento); background: var(--acento-suave); } /* ── documento legal ─────────────────────────────────────────────────────── */ .documento-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: .98rem; line-height: 1.55; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 2rem 2.25rem; max-width: 860px; margin: 0 auto; } /* ── bitácora ────────────────────────────────────────────────────────────── */ .detalle-json { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; color: var(--tinta-2); white-space: pre-wrap; word-break: break-word; max-width: 480px; } /* ── historial (columna derecha del expediente) ──────────────────────────── */ .historial { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; } .tiempo { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--linea); } .tiempo li { position: relative; padding: 0 0 .9rem .9rem; } .tiempo li::before { content: ""; position: absolute; left: -1.45rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-3); border: 2px solid var(--blanco); } .tiempo li.nota.firmada::before { background: var(--c-pacientes); } .tiempo li.cita::before { background: var(--c-agenda); } .tiempo li.pago::before { background: var(--c-pagos); } .tiempo li.nota.borrador::before { background: var(--aviso); } .tiempo li.cirugia::before { background: #7a3fa0; border-radius: 2px; } .tiempo li.cirugia.cancelada::before, .tiempo li.cirugia.pospuesta::before { background: var(--tinta-3); } .tiempo-fecha { font-size: .78rem; color: var(--tinta-3); } .tiempo-cuerpo { font-size: .9rem; } .tiempo-resumen { color: var(--tinta-2); font-size: .86rem; margin-top: .1rem; } .tiempo-detalle { color: var(--tinta-3); font-size: .8rem; } @media (max-width: 1000px) { .historial { position: static; max-height: none; } } /* ── panel: barras ───────────────────────────────────────────────────────── */ .barras { display: grid; grid-template-columns: repeat(var(--n, 30), minmax(0, 1fr)); gap: 2px; align-items: end; height: 180px; padding-top: .5rem; } .barra-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .barra-pila { width: 100%; max-width: 28px; display: flex; flex-direction: column-reverse; gap: 2px; min-height: 2px; } .seg { width: 100%; border-radius: 2px; } .seg-atendida { background: var(--acento); border-radius: 0 0 2px 2px; } .seg-cancelada { background: #c9c9c4; } .seg-pendiente { background: var(--acento-suave); border: 1px solid var(--acento); border-radius: 4px 4px 0 0; } .barra-pila .seg:last-child { border-radius: 4px 4px 2px 2px; } .barra-et { font-size: .65rem; color: var(--tinta-3); margin-top: .3rem; white-space: nowrap; overflow: hidden; max-width: 100%; } .barras[style*="--n:3"] .barra-et, .barras[style*="--n:4"] .barra-et, .barras[style*="--n:5"] .barra-et { font-size: .7rem; } .barra-h { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: .35rem; } /* el nombre se lee completo: si no cabe se parte en dos renglones, nunca «Prótesis total de cade…» */ .barra-h .et { color: var(--tinta-2); white-space: normal; overflow-wrap: anywhere; line-height: 1.2; } .barra-h .pista { height: 10px; background: var(--fondo-2); border-radius: 4px; overflow: hidden; } .barra-h .relleno { height: 100%; background: var(--acento); border-radius: 4px; min-width: 2px; } .barra-h .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-2); } /* ── escalas ─────────────────────────────────────────────────────────────── */ .escala-serie { display: flex; gap: .6rem; align-items: flex-end; overflow-x: auto; padding: .25rem 0 .5rem; } .escala-punto { display: flex; flex-direction: column; align-items: center; font-size: .78rem; color: var(--tinta-2); min-width: 44px; } .escala-punto small { color: var(--tinta-3); text-align: center; line-height: 1.2; } .pista-v { width: 18px; height: 70px; background: var(--fondo-2); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; } .relleno-v { width: 100%; background: var(--acento); border-radius: 4px 4px 0 0; min-height: 2px; } /* ── grabación y textos rápidos ──────────────────────────────────────────── */ .grabacion { margin-bottom: 1rem; } .btn.grabando { background: var(--error-suave); border-color: var(--error); color: var(--error); } .textos-rapidos { display: inline-block; position: relative; vertical-align: middle; } .textos-rapidos summary { font-weight: 500; } .textos-lista { position: absolute; z-index: 25; left: 0; top: 100%; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra); padding: .5rem; display: flex; flex-direction: column; gap: .3rem; min-width: 240px; max-width: 420px; max-height: 300px; overflow: auto; } .textos-lista .btn { justify-content: flex-start; white-space: normal; text-align: left; } .tabla-meds input { padding: .35rem .5rem; font-size: .88rem; } .inline-detalles { display: inline-block; position: relative; } .inline-detalles summary::-webkit-details-marker { display: none; } #sugerencias-meds { background: var(--acento-suave); border-radius: 6px; padding: .5rem .7rem; margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; } #sugerencias-meds[hidden] { display: none; } /* ── alertas de medicamentos, firma en pantalla ──────────────────────────── */ .alertas-receta { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; } .alertas-receta[hidden] { display: none; } .alerta-med { padding: .45rem .7rem; border-radius: 6px; font-size: .88rem; border-left: 3px solid var(--tinta-3); background: var(--fondo-2); } .alerta-med.alergia, .alerta-med.grave { background: var(--error-suave); border-left-color: var(--error); color: var(--error); font-weight: 600; } .alerta-med.moderada { background: var(--aviso-suave); border-left-color: var(--aviso); color: var(--aviso); } .alerta-med.leve { border-left-color: var(--acento); } .firma-caja { border: 1px dashed var(--tinta-3); border-radius: 8px; background: #fff; touch-action: none; } .firma-caja canvas { width: 100%; height: auto; display: block; cursor: crosshair; } #cie10-sugerencias div b { color: var(--acento-oscuro); } /* ── impresión ───────────────────────────────────────────────────────────── */ @media print { .no-imprimir, .barra, .avisos, .pestanas, .acciones, .btn { display: none !important; } body { background: #fff; font-size: 11pt; } .contenido { max-width: none; padding: 0; } .nota-hoja, .documento-texto, .tarjeta { border: 0; box-shadow: none; padding: 0; max-width: none; } .salto { page-break-before: always; } a { color: inherit; } } /* ── consulta: cascarón propio (historial a la izquierda, paciente arriba, nota en flujo) ───────── */ :root { --lateral-consulta: 272px; --cab-consulta: 96px; } body.consulta { background: var(--fondo); } body.consulta .contenido { margin-left: var(--lateral-consulta); padding: 1.1rem 2rem 6rem; max-width: none; } .consulta-lateral { position: fixed; top: 0; left: 0; bottom: 0; width: var(--lateral-consulta); background: var(--blanco); border-right: 1px solid var(--linea); display: flex; flex-direction: column; z-index: 30; } .cl-cabeza { display: flex; align-items: center; gap: .3rem; padding: .6rem .7rem; border-bottom: 1px solid var(--linea); } .cl-logo { display: inline-flex; margin-right: auto; } .cl-iconos { display: flex; gap: .15rem; align-items: center; } .cl-iconos a, .cl-iconos .btn-chat { position: relative; display: inline-flex; padding: .4rem; border-radius: 8px; color: var(--tinta-3); border: 0; background: transparent; } .cl-iconos a:hover, .cl-iconos .btn-chat:hover { background: var(--fondo-2); color: var(--tinta); text-decoration: none; } .cl-iconos .ico { width: 19px; height: 19px; } .cl-iconos .btn-chat span:not(.globo) { display: none; } .cl-iconos .globo { position: absolute; top: 0; right: 0; font-size: .6rem; background: var(--c-pendientes); color: #fff; border-radius: 999px; padding: 0 .3rem; font-weight: 700; } .cl-titulo { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 700; padding: .8rem .9rem .3rem; } .cl-historial { flex: 1; overflow: auto; padding: 0 .5rem .5rem; display: flex; flex-direction: column; gap: .15rem; } .cl-item { display: block; width: 100%; text-align: left; padding: .5rem .5rem; border: 0; border-radius: 8px; background: transparent; font: inherit; color: var(--tinta); cursor: default; } button.cl-item { cursor: pointer; } button.cl-item:hover { background: var(--fondo-2); } .cl-item small { display: block; font-size: .72rem; color: var(--tinta-3); } .cl-item b { display: block; font-weight: 500; font-size: .86rem; line-height: 1.3; } .cl-item .mono { font-size: .72rem; color: var(--tinta-3); } .cl-item.nota { box-shadow: inset 3px 0 0 var(--c-pacientes); } .cl-item.cirugia { box-shadow: inset 3px 0 0 var(--c-cirugias); } .cl-item.destacado { background: var(--sec-suave); } .cl-item.destacado b { color: var(--c-pacientes); } .cl-item.vacio { color: var(--tinta-3); font-size: .85rem; } .cl-mas { border: 0; background: transparent; color: var(--acento); font: inherit; font-size: .82rem; padding: .4rem .5rem; text-align: left; cursor: pointer; } .cl-recordatorio { margin: .5rem; padding: .6rem .7rem; border-radius: 8px; background: var(--aviso-suave); color: var(--aviso); font-size: .84rem; } .cl-recordatorio small { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; } .consulta-cab { position: sticky; top: 0; z-index: 20; margin-left: var(--lateral-consulta); background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linea); } .cc-paciente { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 2rem 0; } .cc-nombre { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .cc-nombre > a { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); } .cc-nombre > a:hover { color: var(--c-pacientes); text-decoration: none; } .cc-datos { color: var(--tinta-2); font-size: .9rem; } .cc-acto { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .cc-acto label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .78rem; color: var(--tinta-3); } .cc-acto input { width: auto; padding: .3rem .45rem; font-size: .85rem; } .cc-menu { display: flex; align-items: center; gap: .1rem; padding: .35rem 2rem 0; flex-wrap: wrap; } .cc-menu > button { border: 0; background: transparent; font: inherit; font-size: .88rem; font-weight: 500; color: var(--tinta-2); padding: .45rem .7rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; } .cc-menu > button:hover { color: var(--tinta); } .cc-menu > button.on { color: var(--c-pacientes); border-bottom-color: var(--c-pacientes); } .cc-grabacion { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .2rem 0 .3rem; } /* Grabar: un botón, siempre del mismo tamaño; mientras graba, destella en su lugar */ .cc-grabacion .btn { flex: none; } #btn-grabar { min-width: 6.1rem; justify-content: center; } #btn-grabar.grabando { animation: destello-grabar 1.3s ease-in-out infinite; } #btn-grabar.grabando::before { animation: pulso 1.3s infinite; } #btn-grabar.transcribiendo { opacity: .75; } #btn-redactar[disabled] { opacity: .45; cursor: default; } #btn-redactar.trabajando { opacity: .6; } @keyframes destello-grabar { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--grabar) 55%, transparent); filter: none; } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--grabar) 0%, transparent), 0 6px 18px color-mix(in srgb, var(--grabar) 55%, transparent); filter: brightness(1.12); } } @media (prefers-reduced-motion: reduce) { #btn-grabar.grabando { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--grabar) 40%, transparent); } } /* El aviso de la grabación flota: no empuja el encabezado ni tapa el nombre del paciente */ /* Seguridad: entrada con llave, dos pasos, listas de aparatos */ .entrada-otras { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; } .entrada-otras .entrar-llave { flex: 1 1 auto; justify-content: center; } .entrada-titulo { font-size: 1rem; text-align: center; margin: .2rem 0 .8rem; } .entrada-error { color: var(--error); text-align: center; margin: .5rem 0 0; } .codigo-2p { font-size: 1.3rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; } .codigos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem; margin: .4rem 0 .6rem; } .codigos-rejilla code { display: block; text-align: center; padding: .45rem; border: 1px dashed var(--linea); border-radius: 8px; font-size: .95rem; background: #fff; } .qr-2p { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: 1rem; align-items: center; } .qr-2p-imagen svg { width: 100%; height: auto; display: block; border-radius: 10px; background: #fff; } .clave-2p { display: block; overflow-wrap: anywhere; font-size: .85rem; padding: .4rem .5rem; background: var(--fondo-2); border-radius: 6px; } .lista-seg { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .lista-seg li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--linea); } .lista-seg li:last-child { border-bottom: 0; } .lista-seg li span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; } .llave-error { color: var(--error); margin: 0; } @media (max-width: 560px) { .qr-2p { grid-template-columns: 1fr; } } @media print { body * { visibility: hidden; } .codigos-respaldo, .codigos-respaldo * { visibility: visible; } .codigos-respaldo { position: absolute; top: 0; left: 0; } } /* Motivo: cuándo empezó y qué le pasó */ .inicio-pad { margin-top: .5rem; align-items: end; } .inicio-pad .campo { padding-bottom: 1.05rem; } /* el lugar de «20 jun 2026»: nunca encima de los chips */ /* «.campos.inicio-pad» y no solo «.inicio-pad»: la regla general de .fecha-mx (más abajo, top: 100%) pesa lo mismo y, por ir después, ganaba: la fecha en palabras caía debajo del campo, encima de «1 semana» (21-sep, captura del Dr.). */ .campos.inicio-pad .campo > .fecha-mx { top: auto; bottom: .12rem; } .inicio-pad select, .inicio-pad .fecha-vista { text-overflow: clip; } .chips-hace { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .1rem; } .chips-hace .hc-et { font-size: .76rem; font-weight: 600; color: var(--tinta-3); margin-right: .1rem; } .chips-hace .aprox-check { margin: 0 0 0 auto; } .chips-hace .chip-btn { font-size: .74rem; padding: .22rem .55rem; } .chips-hace .chip-btn.on { background: var(--s, var(--sec)); border-color: var(--s, var(--sec)); color: #fff; } .aprox-check { font-size: .78rem; color: var(--tinta-2); white-space: nowrap; } .aprox-check b { color: var(--error); } /* Historia clínica: se elige, no se escribe */ .hc-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .4rem .7rem; } .hc-op { padding: .35rem .5rem; border: 1px solid transparent; border-radius: 9px; } .hc-op:hover { background: var(--fondo-1); } .hc-op.on { background: color-mix(in srgb, var(--sec) 8%, transparent); border-color: color-mix(in srgb, var(--sec) 25%, transparent); } .hc-op > .check { font-size: .86rem; font-weight: 500; } .hc-op .hc-sub { display: none; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0 1.5rem; } .hc-op.on .hc-sub, .hc-otro .hc-sub { display: flex; } .hc-op .hc-sub select, .hc-op .hc-sub input { font-size: .76rem; padding: .2rem .45rem; min-height: 28px; width: auto; flex: 1 1 8rem; } .hc-otro { grid-column: 1 / -1; } .hc-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .hc-chips .hc-otra { flex: 1 1 9rem; min-width: 8rem; font-size: .8rem; padding: .25rem .5rem; min-height: 30px; } .chip-check { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .78rem; color: var(--tinta-2); cursor: pointer; background: var(--fondo-1); user-select: none; } .chip-check input { position: absolute; opacity: 0; width: 0; height: 0; } .chip-check:hover { border-color: var(--sec); color: var(--tinta); } .chip-check:has(input:checked) { background: color-mix(in srgb, var(--sec) 16%, #fff); border-color: var(--sec); color: var(--sec-oscuro, var(--sec)); font-weight: 600; } .hc-renglones { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; } .hc-renglon { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; } .hc-renglon select { min-height: 34px; font-size: .82rem; } .hc-habitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: .8rem 1.2rem; } .hc-habito { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .hc-habito .hc-et { font-size: .78rem; font-weight: 600; color: var(--tinta-2); } .hc-habito .hc-sub { display: flex; flex-wrap: wrap; gap: .35rem; } .hc-habito .hc-sub select { flex: 1 1 8.5rem; font-size: .78rem; min-height: 30px; } .hc-seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; } .hc-seg label { display: inline-flex; align-items: center; padding: .25rem .7rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .78rem; color: var(--tinta-2); cursor: pointer; background: var(--fondo-1); } .hc-seg label input { position: absolute; opacity: 0; width: 0; height: 0; } .hc-seg label:has(input:checked) { background: var(--sec); border-color: var(--sec); color: #fff; font-weight: 600; } .hc-seg-chico label { font-size: .74rem; padding: .2rem .55rem; } .hc-calculo { align-self: center; font-size: .78rem; font-weight: 600; color: var(--sec); } .hc-calculo:empty { display: none; } .hc-cuenta { font-size: .72rem; font-weight: 600; color: var(--sec); } .hc-cuenta:empty { display: none; } .hc-resumen { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; } .hc-resumen b { display: inline-block; min-width: 9rem; color: var(--tinta-2); } .hc-form .pie-form { position: sticky; bottom: 0; background: var(--vidrio-fuerte, #fff); backdrop-filter: blur(10px); z-index: 5; } /* Fotos del caso: la tira crece dentro de su sección, sin mover nada de lo demás */ .fotos-nota .acciones { margin-bottom: .5rem; } .fotos-tira { display: flex; flex-wrap: wrap; gap: .5rem; } .fotos-tira:empty { display: none; } .foto-chip { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 104px; padding: .35rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo-1); color: var(--tinta-2); font-size: .7rem; text-align: center; text-decoration: none; } .foto-chip:hover { border-color: var(--sec); color: var(--tinta); text-decoration: none; } .foto-chip img { width: 100%; height: 72px; object-fit: cover; border-radius: 7px; background: var(--fondo-2); } .foto-chip span { overflow-wrap: anywhere; line-height: 1.2; } .foto-chip.cargando { opacity: .6; } .foto-chip.cargando img { animation: pulso 1.4s infinite; } .foto-chip.mal { border-color: var(--error); color: var(--error); } .grabacion-aviso { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; max-width: min(360px, 90vw); padding: .55rem .8rem; border-radius: 10px; font-size: .82rem; line-height: 1.35; background: var(--error-suave); color: var(--error); border: 1px solid #f0c9c5; box-shadow: var(--sombra-2); } /* Pegar una transcripción: ventana flotante, el expediente se queda donde estaba */ .dictado-flotante { position: fixed; z-index: 75; left: 0; right: 0; top: 12vh; margin: 0 auto; transform: none; animation: none; width: min(720px, 94vw); max-height: 76vh; overflow: auto; box-shadow: var(--sombra-3); background: var(--vidrio-fuerte, #fff); backdrop-filter: blur(14px) saturate(140%); } body.pegando .nota-flujo { opacity: .5; filter: saturate(.55); transition: opacity .3s, filter .3s; } .cc-grabacion .cron { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; font-size: .88rem; } .cc-grabacion .grabando-ind .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--error); animation: pulso 1.2s infinite; display: inline-block; } body.consulta .cajon-expediente { top: var(--cab-consulta); } body.consulta .chat-cajon { top: 0; } /* La consulta usa todo el ancho que haya: la pantalla del Dr. no es la de quien programó. Nada de anchos fijos que dejen la mitad derecha vacía (20-sep). */ .nota-flujo { max-width: none; } .seccion-nota { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--linea); } .seccion-nota:last-of-type { border-bottom: 0; } .seccion-nota > h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-pacientes); font-weight: 700; margin-bottom: .5rem; } .seccion-nota > h2 .ayuda { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tinta-3); font-size: .8rem; } .seccion-nota > h2 .btn { text-transform: none; letter-spacing: 0; font-weight: 500; } .seccion-nota textarea { min-height: 96px; } .seccion-nota textarea.grande { min-height: 150px; } .seccion-nota .signos { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } .campos-guiados { margin-top: .6rem; border: 1px dashed var(--linea); border-radius: 8px; padding: .4rem .7rem; } .campos-guiados summary { cursor: pointer; font-size: .85rem; color: var(--tinta-2); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .campos-guiados summary select { width: auto; padding: .2rem .4rem; font-size: .82rem; } .campos-guiados[open] summary { margin-bottom: .6rem; } .consulta-pie { position: fixed; bottom: 0; left: var(--lateral-consulta); right: 0; display: flex; align-items: center; gap: .6rem; padding: .6rem 2rem; background: rgba(255,255,255,.97); border-top: 1px solid var(--linea); z-index: 20; } @media (max-width: 1000px) { :root { --lateral-consulta: 0px; } .consulta-lateral { display: none; } } /* ── mapa corporal ───────────────────────────────────────────────────────── */ .mapa-corporal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: .5rem 1.25rem; align-items: start; margin-bottom: .75rem; padding: .6rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco); } .mapa-corporal .mapa-barra { grid-column: 1 / -1; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; } .mapa-corporal .mapa-barra .btn.on { background: var(--sec); border-color: var(--sec); color: #fff; } .mapa-svg { width: 100%; max-width: 250px; height: auto; display: block; } .mapa-region { fill: #e7ecf1; stroke: #aeb9c4; stroke-width: 1; cursor: pointer; transition: fill .12s; } .mapa-region:hover { fill: color-mix(in srgb, var(--c-pacientes) 30%, #fff); } .mapa-region.marcada { fill: color-mix(in srgb, var(--c-pacientes) 22%, #fff); stroke: var(--c-pacientes); } .mapa-corporal.lectura .mapa-region { cursor: default; } .mapa-corporal.lectura .mapa-region:hover { fill: #e7ecf1; } .mapa-marca circle { fill: var(--error); stroke: #fff; stroke-width: 1.5; } .mapa-marca text { fill: #fff; font-size: 9px; font-weight: 700; } .mapa-titulo { font-size: 10px; fill: var(--tinta-3); font-weight: 600; letter-spacing: .04em; } .mapa-eje { font-size: 9px; fill: var(--tinta-3); } .mapa-lista { list-style: none; margin: 0; padding: 0; font-size: .88rem; display: grid; gap: .3rem; align-content: start; } .mapa-lista li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .mapa-lista li b { font-weight: 600; } .mapa-lista li input { flex: 1; min-width: 160px; padding: .25rem .45rem; font-size: .85rem; } .mapa-corporal.lectura { border: 0; padding: 0; grid-template-columns: 200px minmax(0, 1fr); background: transparent; } .mapa-corporal.lectura .mapa-svg { max-width: 200px; } @media print { .mapa-corporal.lectura { grid-template-columns: 160px 1fr; } } /* ── nota firmada en prosa ───────────────────────────────────────────────── */ .nota-hoja .nota-seccion h3 { font-size: .78rem; color: var(--c-pacientes); letter-spacing: .07em; margin-bottom: .25rem; } .nota-hoja .nota-seccion .texto { line-height: 1.5; } .nota-firma .firma-img { max-height: 64px; max-width: 220px; display: block; margin-bottom: .1rem; } .nota-firma .firma-linea { width: 220px; border-top: 1px solid var(--tinta); margin: .2rem 0 .3rem; } @media print { .nota-hoja .nota-seccion h3 { color: #000; } } /* ── agenda: tipo de paciente, leyenda, ficha lateral nueva, móvil ───────── */ .tipo-pac { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 3px; font-style: normal; font-weight: 700; font-size: .6rem; line-height: 1; margin-right: .3rem; vertical-align: -2px; flex: none; letter-spacing: 0; } .tipo-pac.n { background: var(--tinta); color: #fff; } .tipo-pac.s { background: #fff; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--tinta-3); } .tipo-pac.dudoso { box-shadow: 0 0 0 1.5px var(--aviso); } .bloque.amplio .tipo-pac { width: 17px; height: 17px; font-size: .66rem; } .leyenda-agenda { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .7rem .9rem; font-size: .78rem; color: var(--tinta-2); display: grid; gap: .3rem; } .leyenda-agenda h4 { margin: 0 0 .1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); } .leyenda-agenda .muestra { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -3px; margin-right: .3rem; border: 1px solid var(--linea); } .leyenda-agenda .muestra.disponible { background: color-mix(in srgb, var(--c-pacientes) 18%, #fff); border-left: 3px solid var(--c-pacientes); } .leyenda-agenda .muestra.ocupado { background: color-mix(in srgb, var(--c-agenda) 20%, #fff); border-top: 3px solid var(--c-agenda); } .leyenda-agenda .muestra.bloqueado { background: repeating-linear-gradient(135deg, #f4f4f0 0 4px, #dcdcd6 4px 6px); } .leyenda-agenda .muestra.fuera { background: repeating-linear-gradient(135deg, #f3f4f6 0 4px, #e6e8ec 4px 6px); } .panel-cita .panel-proposito { font-size: .9rem; color: var(--tinta-2); margin: -.2rem 0 .6rem; padding: .35rem .6rem; background: var(--sec-suave); border-radius: 6px; } .panel-cita .panel-proposito b { color: var(--c-pacientes); } .panel-cita .doctoralia { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--linea); font-size: .86rem; } .panel-cita .btn.apagado { opacity: .45; pointer-events: none; } .panel-cita .btn-grande { width: 100%; justify-content: center; padding: .8rem 1rem; font-size: 1rem; } .panel-cita .video-menu { position: relative; } .panel-cita .video-menu summary { list-style: none; width: 100%; justify-content: center; } .panel-cita .video-menu summary::-webkit-details-marker { display: none; } .panel-cita .menu-flotante { position: absolute; z-index: 5; left: 0; right: 0; top: 105%; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: .6rem; box-shadow: var(--sombra); display: grid; gap: .4rem; } .cuenta-24 { margin-top: .6rem; padding: .45rem .7rem; border-radius: 6px; background: var(--sec-suave); font-size: .86rem; } .cuenta-24.aviso { background: var(--aviso-suave); color: var(--aviso); } .cuenta-24.urgente, .cuenta-24.vencida { background: var(--error-suave); color: var(--error); } .cuenta-24.compacta { margin: 0; padding: 0; background: transparent !important; } .cuenta-24.compacta.aviso b, .cuenta-24.compacta.urgente b { color: var(--error); } .factura-enlace { display: flex; gap: .8rem; align-items: flex-start; } .factura-enlace img { border: 1px solid var(--linea); border-radius: 6px; padding: 4px; background: #fff; flex: none; } .factura-enlace > div { min-width: 0; flex: 1; } .factura-enlace input { font-size: .78rem; } @media (max-width: 760px) { html:not([data-marco]) { overflow-x: hidden; } :root { --lateral: 56px; } body.con-lateral .contenido { padding: .6rem .6rem 3rem; } .superior { padding: 0 .6rem; gap: .5rem; } .superior-derecha { display: none; } .agenda-cab { gap: .5rem; } .agenda-cab h1 { font-size: 1rem; width: 100%; margin: 0; } .agenda-cab .acciones .btn { padding: .35rem .5rem; font-size: .8rem; } .agenda-2 { grid-template-columns: 1fr; } .rejilla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; height: auto; max-height: 70vh; min-height: 420px; } .rej-tabla { min-width: 640px; } .dia-rejilla { min-width: 0; } .bloque.amplio { font-size: .78rem; padding: 3px 6px; } .bloque.amplio .etiqueta { display: none; } .panel-cita.cajon { left: 0; right: 0; width: 100vw; max-width: 100vw; top: 0; z-index: 60; padding: .8rem; transform: translateX(100%); } .agenda-2.con-panel .panel-cita.cajon { transform: none; } .panel-cita .estado-botones { grid-template-columns: 1fr 1fr; } .panel-cita .ficha-datos { grid-template-columns: 1fr 1fr; } .chat-cajon { width: 100vw; } } /* ── bandera roja (paciente difícil) ────────────────────────────────────── */ .bandera-ico { width: 14px; height: 14px; color: var(--error); fill: var(--error); stroke: var(--error); vertical-align: -2px; margin-right: .2rem; } .bandera-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; color: var(--tinta-3); background: transparent; border: 0; padding: 0; } .bandera-btn .ico { width: 17px; height: 17px; fill: none; stroke: currentColor; } .bandera-btn:hover { background: var(--fondo-2); color: var(--tinta); } .bandera-btn.on { color: var(--error); } .bandera-btn.on .ico { fill: var(--error); stroke: var(--error); } h1 .bandera-btn, .cc-nombre .bandera-btn, .panel-nombre .bandera-btn { vertical-align: middle; } .bandera-detalle { position: relative; display: inline-block; } .bandera-detalle summary { list-style: none; } .bandera-detalle summary::-webkit-details-marker { display: none; } .bandera-detalle .menu-flotante { position: absolute; z-index: 6; left: 0; top: 105%; min-width: 260px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: .6rem; box-shadow: var(--sombra); display: grid; gap: .4rem; } .bloque .bandera-ico { width: 12px; height: 12px; } /* ── «?» de ayuda: la única leyenda permitida en las zonas de trabajo ─────── */ .ayuda-q { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--fondo-2); border: 1px solid var(--linea); color: var(--tinta-3); font-size: .68rem; font-weight: 700; line-height: 1; cursor: help; vertical-align: 1px; text-transform: none; letter-spacing: 0; font-style: normal; flex: none; } .ayuda-q:hover, .ayuda-q:focus { background: var(--sec); border-color: var(--sec); color: #fff; outline: none; } .ayuda-q::after { content: attr(data-ayuda); position: absolute; z-index: 80; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 300px; background: var(--tinta); color: #fff; font-weight: 400; font-size: .8rem; line-height: 1.4; padding: .5rem .7rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2); text-align: left; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .12s; } .ayuda-q:hover::after, .ayuda-q:focus::after { opacity: 1; } h1 .ayuda-q, h2 .ayuda-q { margin-left: .2rem; } .panel-cita .ayuda-q::after, .cc-cab .ayuda-q::after { left: auto; right: 0; transform: none; } .ayuda-indice { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; } .ayuda-indice a { font-size: .85rem; padding: .3rem .7rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--tinta-2); } .ayuda-seccion summary { list-style: none; cursor: pointer; } .ayuda-seccion summary::-webkit-details-marker { display: none; } .ayuda-seccion summary h2 { margin: 0; padding: 0 0 0 .8rem; border: 0; } /* la letra no se pega a la barrita de color (22-sep) */ .ayuda-seccion summary h2::after { content: "▾"; margin-left: auto; color: var(--tinta-3); } .ayuda-seccion[open] summary h2 { margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linea); } .ayuda-lista { display: grid; grid-template-columns: 220px 1fr; gap: .6rem 1.25rem; margin: 0; font-size: .93rem; } .ayuda-lista dt { font-weight: 600; color: var(--tinta); } .ayuda-lista dd { margin: 0; color: var(--tinta-2); line-height: 1.5; } @media (max-width: 700px) { .ayuda-lista { grid-template-columns: 1fr; } .ayuda-lista dd { margin-bottom: .4rem; } } .menu-hueco { position: fixed; z-index: 70; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: .5rem; display: grid; gap: .3rem; min-width: 180px; } .menu-hueco small { color: var(--tinta-3); font-size: .72rem; padding: 0 .2rem; } .menu-hueco .btn { justify-content: flex-start; margin: 0 !important; } /* ── buscador global (Spotlight) y consulta en curso flotante ────────────── */ .buscador-global { position: fixed; inset: 0; z-index: 90; background: rgba(23,24,26,.45); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 0; } .bg-caja { width: min(640px, 100%); background: var(--blanco); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; } .bg-entrada { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--linea); } .bg-entrada .ico { color: var(--tinta-3); width: 22px; height: 22px; } .bg-entrada input { border: 0; font-size: 1.15rem; padding: .5rem 0; background: transparent; } .bg-entrada input:focus { outline: none; } .bg-entrada kbd { font-size: .7rem; color: var(--tinta-3); border: 1px solid var(--linea); border-radius: 4px; padding: .1rem .35rem; } .bg-resultados { max-height: 50vh; overflow: auto; } .bg-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; color: var(--tinta); border-top: 1px solid var(--fondo-2); } .bg-item:hover, .bg-item.sel { background: var(--sec-suave); text-decoration: none; } .bg-item b { font-weight: 500; } .bg-item small { color: var(--tinta-3); white-space: nowrap; } .en-curso.flotante { display: none; } .cajon-expediente { top: var(--cab-consulta); } @media (max-width: 760px) { .en-curso.flotante { top: auto; bottom: .6rem; right: .6rem; } } /* ── chat contextual: aviso flotante de no leídos y mensajes de este paciente ── */ .chat-aviso { position: fixed; right: .8rem; bottom: .8rem; z-index: 36; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 999px; border: 0; background: var(--tinta); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .chat-aviso .ico { width: 18px; height: 18px; } .chat-aviso .globo { background: var(--c-pendientes); border-radius: 999px; padding: 0 .4rem; font-size: .72rem; font-weight: 700; } .chat-cajon > header .etiqueta { max-width: 220px; overflow-wrap: anywhere; white-space: normal; } .chat-msj.de-este .chat-burbuja { border-color: var(--c-pacientes); box-shadow: inset 3px 0 0 var(--c-pacientes); } .lateral-nav { gap: .35rem; } /* ── diagnósticos por renglón ─────────────────────────────────────────────── */ .tabla-dx input, .tabla-dx select { padding: .35rem .5rem; font-size: .9rem; } .tabla-dx tr.propuesto-ia td { background: var(--aviso-suave); } .tabla-dx tr.propuesto-ia .dx-texto { border-color: var(--aviso); } .tabla-dx .sugerencias small { color: var(--tinta-3); font-size: .7rem; margin-left: .3rem; } .dx-lista { margin: 0; padding-left: 1.3rem; } .dx-lista li { margin-bottom: .25rem; } details.cie { display: inline-block; vertical-align: baseline; } details.cie summary { list-style: none; display: inline-block; cursor: pointer; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 4px; padding: 0 .4rem; font-size: .8rem; color: var(--tinta-2); } details.cie summary::-webkit-details-marker { display: none; } details.cie[open] summary { background: var(--sec-suave); border-color: var(--sec); color: var(--sec); } details.cie > span { display: inline-block; margin-left: .35rem; font-size: .85rem; color: var(--tinta-2); } @media print { details.cie > span { display: inline; } } /* ── ficha lateral: tipo de paciente en palabras, segmentado ─────────────── */ .segmentado { display: inline-flex; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; } .segmentado > *, .segmentado form > button { font: inherit; font-size: .8rem; padding: .25rem .65rem; background: var(--blanco); color: var(--tinta-2); border: 0; border-radius: 0; margin: 0; cursor: pointer; line-height: 1.3; box-shadow: none; } .segmentado > * + *, .segmentado > form + * > button, .segmentado > * + form > button { border-left: 1px solid var(--linea); } .segmentado > .on { background: var(--tinta); color: #fff; cursor: default; font-weight: 600; } .segmentado form > button:hover { background: var(--fondo-2); color: var(--tinta); } .segmentado form { display: contents; } .panel-cita .ficha-datos .tipo-fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .panel-cita .ficha-datos .tipo-fila small { display: inline; font-size: .78rem; color: var(--tinta-3); } /* ── campos en rejilla: mismas alturas en el mismo renglón (etiqueta arriba, control abajo) ── */ .campos .campo { display: flex; flex-direction: column; min-width: 0; } .campos .campo > label { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; min-height: 1.9rem; margin-bottom: .2rem; } .campos .campo > label .textos-rapidos, .campos .campo > label [data-textos]:not(:empty) { margin-left: auto; } .campos .campo > textarea { flex: 1; margin-top: auto; } .campos .campo > input, .campos .campo > select { margin-top: auto; } .campos .campo > .check { margin-top: auto; min-height: 0; } /* ── historia clínica: chips de tratamiento habitual, tabla de apartados ─────── */ .hc-sugerencias { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .chip { font: inherit; font-size: .76rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta-2); cursor: pointer; line-height: 1.4; } .chip:hover { border-color: var(--sec); color: var(--sec); background: var(--sec-suave); } .hc-tabla td { vertical-align: middle; } .hc-tabla .mover { white-space: nowrap; } .btn-icono { border: 0; background: transparent; color: var(--tinta-3); cursor: pointer; font-size: .7rem; padding: .1rem .2rem; line-height: 1; } .btn-icono:hover { color: var(--tinta); } .pestanas.no-marco { display: none; } /* ── agenda: la letra N/S va pequeña en la esquina inferior derecha del bloque ── */ .bloque .quien .tipo-pac { position: absolute; right: 4px; bottom: 3px; margin: 0; width: 13px; height: 13px; font-size: .56rem; border-radius: 3px; opacity: .9; } .bloque.amplio .quien .tipo-pac { right: 8px; bottom: auto; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; font-size: .66rem; } .bloque .quien { padding-right: 14px; } .bloque.amplio .quien { padding-right: 0; } .bloque.amplio { padding-right: 34px; } .panel-cita .ficha-datos .segmentado > .on { display: inline-block; color: #fff; } /* ── consulta: secciones plegadas (flecha pequeña), mediciones y gráficas ────── */ details.seccion-nota > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; } details.seccion-nota > summary::-webkit-details-marker { display: none; } details.seccion-nota > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(-45deg); transition: transform .12s; flex: none; margin: 0 .2rem 0 .1rem; } details.seccion-nota[open] > summary::before { transform: rotate(45deg); margin-top: -3px; } details.seccion-nota > summary > h2 { margin: 0; flex: 1; } details.seccion-nota > summary > h2 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--tinta-3); font-size: .74rem; } details.seccion-nota[open] > summary { margin-bottom: .55rem; } details.seccion-nota { padding: .7rem 0 .75rem; } .mapa-plegado > summary { font-size: .82rem; } .tabla-med input[type=number] { width: 100%; } .tabla-med .eva-celda { display: flex; align-items: center; gap: .6rem; } .tabla-med .eva-celda input[type=number] { width: 64px; flex: none; } input[type=range].eva { -webkit-appearance: none; appearance: none; flex: 1; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 50%, #e74c3c 100%); outline: none; min-width: 120px; } input[type=range].eva::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; } input[type=range].eva::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--tinta); cursor: pointer; } .grafica { margin: 0 0 .6rem; } .grafica-svg { width: 100%; height: auto; display: block; max-height: 300px; } .grafica-rejilla { stroke: var(--linea); stroke-width: 1; } .grafica-eje { font-size: 11px; fill: var(--tinta-3); } .grafica-valor { font-size: 11px; font-weight: 600; } .grafica-cx { stroke: var(--tinta-3); stroke-dasharray: 4 3; stroke-width: 1.2; } .grafica-cx-texto { font-weight: 700; fill: var(--tinta-2); } .grafica-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--tinta-2); margin-top: .2rem; } .grafica-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; } .evolucion { display: grid; gap: 1rem; } .evolucion .tarjeta h2 small { font-weight: 400; font-size: .8rem; } /* ── barra izquierda: etiquetas sin empalme ──────────────────────────────── */ .lateral-nav a { padding: .5rem .2rem; font-size: .58rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; } .lateral-usuario b { max-width: 68px; } /* ── consulta: encabezado en dos filas, menú como botones, grabación a la derecha ── */ .cc-paciente { padding: .5rem 1.5rem 0; } .cc-nombre > a { font-size: 1.15rem; } .cc-acto { gap: .5rem; } .cc-acto input[type=date] { width: auto; padding: .25rem .4rem; font-size: .82rem; color: var(--tinta-2); } .cc-salir .ico { width: 15px; height: 15px; } .cc-menu { padding: .4rem 1.5rem .5rem; gap: .6rem; } .cc-pestanas { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--blanco); } .cc-pestanas > button { border: 0; background: transparent; font: inherit; font-size: .84rem; font-weight: 500; color: var(--tinta-2); padding: .38rem .8rem; cursor: pointer; margin: 0; } .cc-pestanas > button + button { border-left: 1px solid var(--linea); } .cc-pestanas > button:hover { background: var(--fondo-2); color: var(--tinta); } .cc-pestanas > button.on { background: var(--c-pacientes); color: #fff; } .cc-grabacion { padding: 0; } .cc-grabacion .btn { margin: 0 !important; } :root { --cab-consulta: 88px; } /* ── configuración: lista de opciones ── */ .lista-opciones { display: grid; gap: .45rem; } .lista-opciones .opcion { align-items: flex-start; font-size: .92rem; } .lista-opciones .opcion input { margin-top: .2rem; } .lista-opciones .opcion b { font-weight: 500; } /* ── ficha lateral compacta ─────────────────────────────────────────────── */ .panel-cita .tarjeta { padding: .75rem .85rem; margin-bottom: .6rem; } .panel-cita h2 { font-size: .9rem; margin-bottom: .45rem; } .panel-cita .panel-nombre { margin: 0 1.6rem .15rem 0; gap: .3rem .5rem; } .panel-cita .panel-nombre a { font-size: 1.1rem; } .panel-cita .panel-sub { font-size: .8rem; color: var(--tinta-2); margin-bottom: .45rem; overflow-wrap: break-word; } .panel-cita .panel-sub .etiqueta { font-size: .68rem; } .panel-cita .panel-linea { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: .5rem; font-size: .8rem; } .panel-cita .chip-prop { font-size: .76rem; padding: .1rem .5rem; border-radius: 999px; background: var(--sec-suave); color: var(--c-pacientes); font-weight: 600; } .panel-cita .panel-motivo { padding: .45rem .6rem; background: var(--fondo-2); border-radius: 6px; margin-bottom: .4rem; } .panel-cita .panel-motivo span { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 600; } .panel-cita .panel-motivo b { display: block; font-weight: 500; font-size: .9rem; color: var(--tinta); } .panel-cita .panel-motivo small { display: block; font-size: .74rem; } .panel-cita .panel-contacto { font-size: .78rem; color: var(--tinta-2); } .panel-cita .estado-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .3rem; } .panel-cita .estado-botones form { display: contents; } .panel-cita .estado-botones .btn { justify-content: center; height: 34px; padding: 0 .3rem; font-size: .74rem; gap: .25rem; margin: 0 !important; white-space: nowrap; } .panel-cita .estado-botones .btn .ico { width: 14px; height: 14px; flex: none; } .panel-cita .estado-botones .btn.apagado { opacity: .45; pointer-events: none; } .bandera-btn.borrar-cita { color: var(--tinta-3); opacity: .7; } .bandera-btn.borrar-cita .ico { fill: none; stroke: currentColor; } .bandera-btn.borrar-cita:hover { opacity: 1; color: var(--error); background: var(--error-suave); } .resumen-borrar { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .6rem; } .resumen-borrar b { font-size: 1.05rem; } .btn.btn-borrar { --sec: var(--error); } .btn.btn-borrar .ico { color: #fff; } .panel-cita .accesos { gap: .3rem; margin-top: .5rem; } .panel-cita .accesos form.inline { display: contents; } .panel-cita .accesos .btn, .panel-cita .accesos details > summary.btn { height: 34px; padding: 0 .4rem; font-size: .76rem; margin: 0 !important; justify-content: center; } .panel-cita .accesos.comunicacion { grid-template-columns: repeat(6, 1fr); } .panel-cita .accesos.comunicacion > * { grid-column: span 2; } .panel-cita .accesos.comunicacion > :nth-child(4), .panel-cita .accesos.comunicacion > :nth-child(5) { grid-column: span 3; } .panel-cita .accesos.comunicacion details.video-menu { position: relative; } .panel-cita .accesos.comunicacion details.video-menu > summary { width: 100%; list-style: none; } .panel-cita .ficha-datos { gap: .35rem .7rem; font-size: .84rem; } .panel-cita .doctoralia { margin-top: .5rem; padding-top: .45rem; font-size: .8rem; } .panel-cita .nota-cita { margin-top: .5rem; padding-top: .45rem; } .panel-cita .nota-cita textarea { min-height: 44px; font-size: .84rem; } .panel-cita .cuenta-24 { font-size: .8rem; } .panel-cita .consulta-medica > .btn { width: 100%; justify-content: center; } /* ── consulta: dos renglones llenos, sin huecos ─────────────────────────── */ .cc-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 1.5rem .35rem; flex-wrap: nowrap; } .cc-fila .cc-nombre { flex: 1 1 auto; min-width: 0; gap: .45rem; } .cc-fila .cc-nombre > a { white-space: nowrap; } .cc-derecha { display: flex; align-items: center; gap: .45rem; flex: none; } .cc-derecha .cc-grabacion { margin: 0; padding-right: .5rem; border-right: 1px solid var(--linea); } .cc-estado { font-size: .72rem; color: var(--tinta-3); max-width: 220px; } .cc-estado:empty { display: none; } .cc-menu { padding: 0 1.5rem .5rem; } .cc-pestanas { display: flex; width: 100%; } .cc-pestanas > button { flex: 1 1 0; text-align: center; padding: .4rem .5rem; } :root { --cab-consulta: 92px; } @media (max-width: 1100px) { .cc-fila { flex-wrap: wrap; } .cc-derecha { width: 100%; justify-content: flex-end; } :root { --cab-consulta: 128px; } } /* ── acentos para acciones clave (complementarios del verde de marca, sin chocar) ── naranja cálido: iniciar / continuar / terminar y firmar · rojo: grabar · ámbar: cobrar */ :root { --accion: #E4692E; --accion-oscuro: #C8551F; --grabar: #D63B3B; --pago: #C98A0B; } .btn-accion { background: var(--accion); border-color: var(--accion); color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(228,105,46,.28); } .btn-accion:hover { background: var(--accion-oscuro); border-color: var(--accion-oscuro); color: #fff; } .btn-accion .ico { color: #fff; } .btn-grabar { background: var(--grabar); border-color: var(--grabar); color: #fff; font-weight: 600; } .btn-grabar:hover { background: #B92F2F; border-color: #B92F2F; color: #fff; } .btn-grabar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-right: .35rem; display: inline-block; } .btn-pago { background: var(--pago); border-color: var(--pago); color: #fff; font-weight: 600; } .btn-pago:hover { background: #A87107; border-color: #A87107; color: #fff; } .consulta-pie .btn-accion { padding: .55rem 1.2rem; } /* ── receta: medicamento + renglón de indicación, chips, recetas guardadas ── */ .tabla-receta tr.med-fila td { border-bottom: 0; padding-bottom: .15rem; } .tabla-receta tr.med-ind td { padding-top: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--linea); } .tabla-receta .ind-linea { display: flex; align-items: center; gap: .35rem; } .tabla-receta .ind-linea input[type=text] { flex: 1; font-size: .9rem; } .tabla-receta .estrella { display: inline-flex; align-items: center; cursor: pointer; font-size: 1.05rem; color: var(--tinta-3); margin: 0; user-select: none; } .tabla-receta .estrella input { display: none; } .tabla-receta .estrella:has(input:checked) { color: var(--pago); } .tabla-receta .btn-icono { font-size: 1rem; } .chips-meds { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; } .menu-desplegable { position: relative; } .menu-desplegable > summary { list-style: none; } .menu-desplegable .menu-flotante { position: absolute; right: 0; top: 110%; z-index: 20; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra); padding: .4rem; min-width: 260px; display: grid; gap: .1rem; } .menu-desplegable .fila-menu { display: flex; align-items: center; justify-content: space-between; gap: .3rem; } /* ── consulta en curso: punto rojo pulsante abajo en la barra izquierda ── */ .en-curso-lateral { color: #fff; gap: .2rem; } .en-curso-lateral .punto { width: 14px; height: 14px; border-radius: 50%; background: var(--grabar); box-shadow: 0 0 0 4px rgba(214,59,59,.25); animation: pulso 1.4s infinite; margin: 3px 0 2px; } .en-curso-lateral span:last-child { font-size: .58rem; } .en-curso-lateral:hover { background: var(--lateral-fondo-2); } /* ── mapa 3D ── */ .mapa-3d { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: .5rem 1rem; align-items: start; } .mapa-3d .m3d-barra { grid-column: 1 / -1; display: flex; gap: .3rem; align-items: center; } .mapa-3d .m3d-modo { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linea); font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta-3); cursor: help; } .mapa-3d .m3d-lienzo { border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: #f4f6f8; min-height: 420px; } .mapa-3d .m3d-lienzo canvas { display: block; width: 100% !important; touch-action: none; } .mapa-3d .m3d-lista { list-style: none; margin: 0; padding: 0; font-size: .86rem; display: grid; gap: .35rem; } .mapa-3d .m3d-lista li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .mapa-3d .m3d-lista li input { flex: 1; min-width: 120px; padding: .2rem .4rem; font-size: .82rem; } .mapa-3d.lectura { grid-template-columns: 1fr; } .mapa-3d.lectura .m3d-lienzo { max-width: 320px; min-height: 300px; } /* ── configuración estilo Ajustes: cada apartado con su ícono propio en un cuadrito de color por grupo ── */ .config-menu a:not(.config-titulo) { justify-content: flex-start; gap: .6rem; padding: .38rem .6rem; } .config-menu a .etq { flex: 1; min-width: 0; } .config-menu a .ico.der { width: 12px; height: 12px; color: var(--tinta-3); opacity: .6; } .config-menu .tile { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--g, var(--sec)); color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); } .config-menu .tile .ico { width: 16px; height: 16px; color: #fff; stroke: #fff; } .config-menu .config-titulo .tile { background: var(--c-configuracion); } .config-menu h4::before { display: none; } .config-menu h4 .ico { width: 14px; height: 14px; color: var(--g, var(--tinta-3)); } .config-menu a.activo .tile { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--g, var(--sec)); } /* ── consulta: cabecera de la columna izquierda oscura, como la barra general (es el menú para salir) ── */ .cl-cabeza { background: var(--lateral-fondo); border-bottom: 1px solid var(--lateral-fondo-2); padding: .55rem .6rem; } .cl-logo { align-items: center; gap: .45rem; color: #fff; font-size: .82rem; letter-spacing: .01em; } .cl-logo span { white-space: nowrap; } .cl-logo span b { font-weight: 600; } .cl-logo:hover { text-decoration: none; opacity: .9; } .cl-iconos a, .cl-iconos .btn-chat { color: var(--lateral-tinta); } .cl-iconos a:hover, .cl-iconos .btn-chat:hover { background: var(--lateral-fondo-2); color: #fff; } /* ── cabecera de la consulta: mismo margen a ambos lados; cada ícono en su cuadro de 32 px sin salirse del borde ── */ .cl-cabeza { padding: .5rem .7rem; gap: .35rem; } .cl-cabeza .cl-iconos { gap: .1rem; margin: 0; flex: none; } .cl-cabeza .cl-iconos a, .cl-cabeza .cl-iconos .btn-chat { width: 32px; height: 32px; padding: 0; margin: 0; align-items: center; justify-content: center; border-radius: 8px; box-sizing: border-box; } .cl-cabeza .cl-iconos .globo { top: 1px; right: 1px; } .cl-cabeza .cl-logo { padding: 0; min-width: 0; overflow: hidden; } .cl-cabeza .cl-logo span { overflow: hidden; text-overflow: ellipsis; } .cl-cabeza .cl-logo:focus, .cl-cabeza .cl-iconos a:focus, .cl-cabeza .cl-iconos .btn-chat:focus { outline: none; box-shadow: none; } .cl-cabeza .cl-iconos a:focus-visible, .cl-cabeza .cl-iconos .btn-chat:focus-visible { background: var(--lateral-fondo-2); } /* ── ficha lateral: consulta bajo el paciente, facturación en una línea, tonos por función ── */ .panel-cita .panel-consulta-btn { width: 100%; justify-content: center; margin-top: .55rem; } .panel-cita .facturacion-cita .fact-linea { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .panel-cita .fact-detalle { margin-top: .4rem; } .panel-cita .fact-detalle > summary { cursor: pointer; color: var(--tinta-3); } .panel-cita .fact-detalle[open] > summary { margin-bottom: .4rem; } .btn.tono-rojo { color: var(--error); border-color: #e6c2be; } .btn.tono-rojo .ico { color: var(--error); } .btn.tono-naranja { color: #C8551F; border-color: #ecc9b6; } .btn.tono-naranja .ico { color: #C8551F; } .btn.tono-verde { color: #1E8449; border-color: #bfe0cb; } .btn.tono-verde .ico { color: #1E8449; } .btn.tono-teal { color: var(--c-pacientes); border-color: #b9dcd8; } .btn.tono-teal .ico { color: var(--c-pacientes); } .btn.tono-azul { color: #2F6FDE; border-color: #c2d3f5; } .btn.tono-azul .ico { color: #2F6FDE; } .btn.tono-whatsapp { color: #1B8A4C; border-color: #bfe3cf; } .btn.tono-whatsapp .ico { color: #25D366; } .btn.tono-violeta { color: #6C3FC5; border-color: #d5c6f2; } .btn.tono-violeta .ico { color: #6C3FC5; } .panel-cita .estado-botones .btn.on.mal { background: var(--error); border-color: var(--error); color: #fff; } .panel-cita .estado-botones .btn.on.mal .ico { color: #fff; } .panel-cita .estado-botones .btn.on { color: #fff; } .panel-cita .estado-botones .btn.on .ico { color: #fff; } /* ── barra izquierda: la lupa va en el menú, abajo de Configuración; abajo solo consulta en curso, médico y salir ── */ .lateral-nav .btn-lateral { padding: .5rem .2rem; font-size: .58rem; gap: .15rem; border-radius: 8px; } .lateral-nav .btn-lateral .ico { width: 21px; height: 21px; } .lateral-usuario b { max-width: 70px; font-size: .62rem; } .panel-cita .panel-consulta-doble { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-top: .55rem; } .panel-cita .panel-consulta-doble .btn { justify-content: center; margin: 0 !important; height: 36px; } /* ── figura humana 3D (paquete figura-humana v1.4) con la paleta del expediente ── */ #pain-map-3d{container-type:inline-size;--pm-paper:#fff;--pm-stage:#eff2f4;--pm-ink:var(--tinta);--pm-muted:var(--tinta-3);--pm-line:var(--linea);--pm-accent:var(--c-pacientes);--pm-on:#fff;--pm-soft:var(--sec-suave);--pm-body:#697681;--pm-shadow:#758895;font-size:.86rem;line-height:1.45;font-family:inherit;color:var(--pm-ink);background:var(--pm-paper);border:1px solid var(--pm-line);border-radius:12px;overflow:hidden;max-width:1040px;margin-inline:auto;container-type:inline-size} #pain-map-3d *{box-sizing:border-box} #pain-map-3d button,#pain-map-3d select,#pain-map-3d input{font:inherit} #pain-map-3d button{padding:5px 9px;min-height:32px;border:1px solid var(--pm-line);border-radius:8px;color:var(--pm-ink);background:var(--pm-paper);font-weight:500} #pain-map-3d button:hover{background:var(--pm-soft)} #pain-map-3d button[aria-pressed=true]{background:var(--pm-accent);color:var(--pm-on);border-color:var(--pm-accent)} #pain-map-3d button:disabled{opacity:.45} #pain-map-3d .pm-toolbar{padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--pm-line)} #pain-map-3d .pm-context{font-size:11px;color:var(--pm-muted)} #pain-map-3d .pm-layers,#pain-map-3d .pm-regions{display:flex;gap:3px;flex-wrap:wrap;align-items:center} #pain-map-3d .pm-layers{margin-right:auto} #pain-map-3d .pm-toolbar button{font-size:12px;border-color:transparent;background:transparent} #pain-map-3d .pm-toolbar button[aria-pressed=true]{background:var(--pm-soft);color:var(--pm-accent)} #pain-map-3d #pm-center{border-color:var(--pm-line);margin-left:4px} #pain-map-3d .pm-workspace{display:grid;grid-template-columns:minmax(0,1fr) 236px;align-items:start} #pain-map-3d .pm-viewport{min-width:0;background:var(--pm-stage)} #pain-map-3d .pm-stage{width:100%;aspect-ratio:1/1;max-height:610px;min-height:320px;position:relative;overflow:hidden;background:var(--pm-stage)} #pain-map-3d .pm-sidebar{min-width:0;padding:16px 14px;border-left:1px solid var(--pm-line);align-self:stretch} #pain-map-3d canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab} #pain-map-3d canvas:active{cursor:grabbing} #pain-map-3d[data-locked=true] canvas{cursor:crosshair} #pain-map-3d .pm-loading{position:absolute;inset:0;display:grid;place-content:center;background:var(--pm-stage);color:var(--pm-muted);padding:24px;text-align:center;z-index:4} #pain-map-3d .pm-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden} #pain-map-3d .pm-marker{position:absolute;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;background:var(--pm-accent);color:var(--pm-on);border:2px solid var(--pm-paper);border-radius:50%;font-size:12px;font-weight:500;transform:translate(-50%,-120%)} #pain-map-3d .pm-lock{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:90%;padding:6px 12px;border-radius:20px;background:var(--pm-paper);color:var(--pm-accent);font-size:12px;pointer-events:none;white-space:nowrap} #pain-map-3d .pm-controls{display:grid;gap:14px} #pain-map-3d .pm-zoom{display:grid;gap:5px;color:var(--pm-muted);font-size:12px} #pain-map-3d .pm-zoom span{display:flex;justify-content:space-between} #pain-map-3d input[type=range]{width:100%;margin:6px 0;accent-color:var(--pm-accent)} #pain-map-3d .pm-actions{display:grid;gap:6px} #pain-map-3d #pm-mark{border-color:var(--pm-accent);color:var(--pm-accent)} #pain-map-3d #pm-mark[aria-pressed=true]{color:var(--pm-on)} #pain-map-3d #pm-undo{font-size:12px;border-color:transparent} #pain-map-3d .pm-help{padding:10px 14px 13px;color:var(--pm-muted);font-size:12px;max-width:440px} #pain-map-3d kbd{font:inherit;font-weight:500;padding:1px 5px;border:1px solid var(--pm-line);border-radius:4px;color:var(--pm-ink)} #pain-map-3d .pm-status{padding:14px 0 10px;font-size:12px;color:var(--pm-muted)} #pain-map-3d .pm-records{margin:0;padding:0;list-style:none} #pain-map-3d .pm-record{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:start;padding:12px 0;border-top:1px solid var(--pm-line)} #pain-map-3d .pm-number{display:grid;place-items:center;background:var(--pm-soft);color:var(--pm-accent);border-radius:50%;width:26px;height:26px;font-weight:500} #pain-map-3d .pm-record-title{font-weight:500;display:block} #pain-map-3d .pm-record-detail{font-size:12px;color:var(--pm-muted)} #pain-map-3d .pm-record input{display:block;width:100%;margin-top:6px;border:0;border-bottom:1px solid var(--pm-line);padding:6px 0;color:var(--pm-ink);background:var(--pm-paper);font-size:12px} #pain-map-3d .pm-record-actions{display:flex;gap:5px;grid-column:2} #pain-map-3d .pm-record-actions button{font-size:12px;padding:5px 8px;min-height:34px} #pain-map-3d .pm-footer{padding:9px 14px;font-size:11px;border-top:1px solid var(--pm-line);color:var(--pm-muted)} #pain-map-3d .pm-footer a{color:inherit} #pain-map-3d .pm-probe{position:absolute;visibility:hidden;pointer-events:none} #pain-map-3d [hidden]{display:none!important} @container(max-width:620px){#pain-map-3d .pm-workspace{grid-template-columns:minmax(0,1fr)}#pain-map-3d .pm-stage{min-height:300px;max-height:540px}#pain-map-3d .pm-sidebar{border-left:0;border-top:1px solid var(--pm-line);padding:12px 14px}#pain-map-3d .pm-controls{grid-template-columns:minmax(110px,1fr) minmax(130px,1fr);align-items:center;gap:18px}#pain-map-3d .pm-toolbar{gap:4px}#pain-map-3d .pm-regions{margin-left:auto}} @media(pointer:coarse){#pain-map-3d button,#pain-map-3d .pm-record-actions button{min-height:44px}#pain-map-3d .pm-record input{font-size:16px}} #pain-map-3d .pm-stage{max-height:460px} #pain-map-3d .pm-toolbar .ayuda-q{margin-left:4px} #pain-map-3d .pm-footer details{display:inline}#pain-map-3d .pm-footer summary{display:inline;cursor:pointer} #pain-map-3d .pm-context:empty,#pain-map-3d .pm-status:empty{display:none} #pain-map-3d #pm-mark{background:var(--accion);border-color:var(--accion);color:#fff;font-weight:600} #pain-map-3d #pm-mark[aria-pressed=true]{background:var(--grabar);border-color:var(--grabar);color:#fff} #pain-map-3d .pm-marker{background:var(--grabar)}#pain-map-3d .pm-lock{color:var(--grabar)} #pain-map-3d .pm-records{max-height:300px;overflow:auto} /* ── temas de color por persona (usuario.tema → ). MAIA = sin atributo: un color por sección. La barra lateral y el logotipo no cambian ── */ html[data-tema=verde] { --acento: #1B9388; --acento-oscuro: #157a71; --acento-suave: #e6f4f2; --c-inicio: #1B9388; --c-agenda: #1B9388; --c-pacientes: #1B9388; --c-cirugias: #1B9388; --c-pagos: #1B9388; --c-pendientes: #1B9388; --c-panel: #1B9388; --c-configuracion: #1B9388; --c-facturacion: #1B9388; } html[data-tema=azul] { --acento: #2E6FDB; --acento-oscuro: #2358B3; --acento-suave: #e8f0fc; --c-inicio: #2E6FDB; --c-agenda: #2E6FDB; --c-pacientes: #2E6FDB; --c-cirugias: #2E6FDB; --c-pagos: #2E6FDB; --c-pendientes: #2E6FDB; --c-panel: #2E6FDB; --c-configuracion: #2E6FDB; --c-facturacion: #2E6FDB; } html[data-tema=rosa] { --acento: #D6457F; --acento-oscuro: #B1336A; --acento-suave: #fbe9f1; --c-inicio: #D6457F; --c-agenda: #D6457F; --c-pacientes: #D6457F; --c-cirugias: #D6457F; --c-pagos: #D6457F; --c-pendientes: #D6457F; --c-panel: #D6457F; --c-configuracion: #D6457F; --c-facturacion: #D6457F; } html[data-tema=morado] { --acento: #7A4FC9; --acento-oscuro: #603AA8; --acento-suave: #efe9fa; --c-inicio: #7A4FC9; --c-agenda: #7A4FC9; --c-pacientes: #7A4FC9; --c-cirugias: #7A4FC9; --c-pagos: #7A4FC9; --c-pendientes: #7A4FC9; --c-panel: #7A4FC9; --c-configuracion: #7A4FC9; --c-facturacion: #7A4FC9; } html[data-tema=grafito] { --acento: #46525E; --acento-oscuro: #333D47; --acento-suave: #eceef1; --c-inicio: #46525E; --c-agenda: #46525E; --c-pacientes: #46525E; --c-cirugias: #46525E; --c-pagos: #46525E; --c-pendientes: #46525E; --c-panel: #46525E; --c-configuracion: #46525E; --c-facturacion: #46525E; } html[data-tema=oliva] { --acento: #6B7A1E; --acento-oscuro: #556218; --acento-suave: #eef1df; --c-inicio: #6B7A1E; --c-agenda: #6B7A1E; --c-pacientes: #6B7A1E; --c-cirugias: #6B7A1E; --c-pagos: #6B7A1E; --c-pendientes: #6B7A1E; --c-panel: #6B7A1E; --c-configuracion: #6B7A1E; --c-facturacion: #6B7A1E; } html[data-tema=cafe] { --acento: #8B5E34; --acento-oscuro: #6E4A2A; --acento-suave: #f2e9e0; --c-inicio: #8B5E34; --c-agenda: #8B5E34; --c-pacientes: #8B5E34; --c-cirugias: #8B5E34; --c-pagos: #8B5E34; --c-pendientes: #8B5E34; --c-panel: #8B5E34; --c-configuracion: #8B5E34; --c-facturacion: #8B5E34; } html[data-tema=vino] { --acento: #8C2F4B; --acento-oscuro: #6E2039; --acento-suave: #f5e6ea; --c-inicio: #8C2F4B; --c-agenda: #8C2F4B; --c-pacientes: #8C2F4B; --c-cirugias: #8C2F4B; --c-pagos: #8C2F4B; --c-pendientes: #8C2F4B; --c-panel: #8C2F4B; --c-configuracion: #8C2F4B; --c-facturacion: #8C2F4B; } .temas { display: flex; flex-wrap: wrap; gap: .5rem; } .temas .tema-op { display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; padding: .55rem .7rem; min-width: 84px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); font: inherit; font-size: .82rem; color: var(--tinta-2); cursor: pointer; } .temas button.tema-op:hover { border-color: var(--acento); color: var(--tinta); } .temas .tema-op.on { border: 2px solid var(--acento); color: var(--tinta); font-weight: 600; cursor: default; } .temas .muestra { position: relative; width: 44px; height: 28px; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } /* ── consulta: Evaluación funcional agrupa dolor, fuerza, movilidad y escalas ── */ details.grupo-funcional > details.seccion-nota { margin-left: 1.1rem; padding: .45rem 0 .5rem; border-bottom: 1px dashed var(--linea); } details.grupo-funcional > details.seccion-nota:last-of-type { border-bottom: 0; } details.grupo-funcional > details.seccion-nota > summary > h2 { font-size: .74rem; color: var(--tinta-2); } .grupo-opciones { display: grid; gap: .4rem; padding: .5rem .8rem; border-left: 3px solid var(--sec); background: var(--fondo-2); border-radius: 0 8px 8px 0; } .grupo-opciones > b { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sec); } /* ── configuración: un color por grupo, igual en el título, el ícono del grupo y los cuadritos ── */ .config-menu .grupo[data-g=ayuda] { --g: #5B67CA; } .config-menu .grupo[data-g=general] { --g: #5C6B7A; } .config-menu .grupo[data-g=perfil] { --g: #1B9388; } .config-menu .grupo[data-g=equipo] { --g: #E0772E; } .config-menu .grupo[data-g=asistente] { --g: #8E5BD3; } .config-menu .grupo[data-g=catalogos] { --g: #C98A0B; } .config-menu .grupo[data-g=correo] { --g: #2F6FDE; } .config-menu .grupo[data-g=datos] { --g: #C0392B; } .config-menu .grupo .tile { background: var(--g); } .config-menu .grupo h4, .config-menu .grupo h4 .ico { color: var(--g); } .config-menu .grupo a.activo { background: color-mix(in srgb, var(--g) 12%, #fff); color: var(--g); } /* el menú se desplaza por su cuenta cuando el cursor está encima (no mueve la página) */ body.config .contenido > .config-menu { max-height: calc(100vh - var(--superior) - var(--inferior) - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } @media (max-width: 1000px) { body.config .contenido > .config-menu { max-height: none; overflow: visible; } } /* ── Solicitudes: rejilla de accesos con ícono propio, lista compacta de emitidos ── */ .sol-crear .tile, .sol-lista .tile, .sol-aviso .tile { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); } .sol-crear .tile .ico, .sol-lista .tile .ico, .sol-aviso .tile .ico { width: 18px; height: 18px; color: #fff; stroke: #fff; } .sol-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem 1.25rem; } .sol-grupo h3 { margin: 0 0 .4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); font-weight: 700; } .sol-rejilla { display: grid; gap: .3rem; } .sol-op { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: 8px; color: var(--tinta); font-size: .88rem; } .sol-op:hover { background: var(--fondo-2); text-decoration: none; } .sol-lista { list-style: none; margin: 0; padding: 0; } .sol-lista li { display: flex; align-items: center; gap: .7rem; padding: .5rem .2rem; border-top: 1px solid var(--linea); } .sol-lista li:first-child { border-top: 0; } .sol-lista li.anulado { opacity: .5; } .sol-lista li.anulado b { text-decoration: line-through; } .sol-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--tinta); } .sol-titulo:hover { text-decoration: none; } .sol-titulo:hover b { color: var(--acento); } .sol-titulo b { font-weight: 600; font-size: .9rem; } .sol-titulo small { font-size: .76rem; color: var(--tinta-3); } .sol-acc { display: inline-flex; gap: .2rem; } .btn-icono-cuadro { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--tinta-2); border: 1px solid var(--linea); background: var(--blanco); } .btn-icono-cuadro:hover { color: var(--acento); border-color: var(--acento); text-decoration: none; } .btn-icono-cuadro .ico { width: 17px; height: 17px; } .sol-aviso { display: flex; align-items: center; gap: .7rem; padding: .3rem .2rem .7rem; flex-wrap: wrap; } .sol-aviso > div { flex: 1; min-width: 140px; display: flex; flex-direction: column; } .sol-aviso small { font-size: .76rem; color: var(--tinta-3); } .sol-manual { position: relative; } .sol-manual > summary { list-style: none; } .sol-manual .menu-flotante { position: absolute; right: 0; top: 110%; z-index: 10; display: grid; gap: .4rem; min-width: 220px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: .6rem; box-shadow: var(--sombra); } /* ── configuración: menú fijo a la izquierda como objeto aparte; buscador ── */ body.config .contenido > .tarjeta, body.config .contenido > form.tarjeta { margin-bottom: 1rem; } @media (max-width: 1000px) { body.config .contenido { padding-left: .6rem; } body.config .contenido > .config-menu { position: static; width: auto; margin-bottom: 1rem; } } /* ── buscador único: grupos «Ir a» (pantallas y configuración con su ícono) y «Pacientes» ── */ .bg-grupo { padding: .45rem 1rem .2rem; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; } .bg-item.con-icono { justify-content: flex-start; align-items: center; gap: .65rem; } .bg-item.con-icono small { margin-left: auto; } .bg-tile { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .bg-tile .ico { width: 15px; height: 15px; color: #fff; stroke: #fff; } /* ── páginas de ajustes: tarjetas en rejilla de 2 con la misma altura por renglón (sin huecos) ── */ .rejilla-ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } .rejilla-ajustes > .tarjeta { margin: 0; display: flex; flex-direction: column; } .rejilla-ajustes > .tarjeta.ancha { grid-column: 1 / -1; } .campos.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campos.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .campos.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .casillas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .35rem .9rem; margin-top: .6rem; } .casillas-rejilla .check { margin: 0; font-size: .88rem; } .membrete-fila { display: flex; gap: 1rem; align-items: flex-start; } .membrete-mini { width: 96px; height: 124px; object-fit: cover; border: 1px solid var(--linea); border-radius: 6px; flex: none; background: var(--fondo-2); } .vacio-mini { display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--tinta-3); text-align: center; } .membrete-datos { display: grid; gap: .45rem; min-width: 0; } .membrete-datos small { display: block; } @media (max-width: 1100px) { .rejilla-ajustes { grid-template-columns: 1fr; } .campos.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .probar-correo { display: flex; gap: .4rem; align-items: center; margin-top: auto; padding-top: .7rem; } .probar-correo input { flex: 1; min-width: 0; } .rejilla-ajustes > .tarjeta > h2 { flex-wrap: wrap; } /* Exportar: tres botones parejos en un renglón */ .exportar-botones { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; } .exportar-botones .btn { justify-content:center; text-align:center; } @media (max-width: 700px) { .exportar-botones { grid-template-columns:1fr; } } /* Estudios por padecimiento (solicitud) */ details.padec { border: 1px solid var(--linea); border-radius: 10px; padding: .5rem .75rem; margin: .2rem 0 .8rem; background: var(--fondo-suave, #F7F9FA); } details.padec > summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--sec); list-style: none; display: flex; align-items: center; gap: .35rem; } details.padec > summary::-webkit-details-marker { display: none; } details.padec > summary::before { content: "›"; display: inline-block; transition: transform .15s; font-size: 1.1rem; line-height: 1; } details.padec[open] > summary::before { transform: rotate(90deg); } .padec-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; } .padec-barra input[type=search] { width: 280px; max-width: 100%; } .padec-chips { display: flex; gap: .35rem; flex-wrap: wrap; } .chip-btn { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; cursor: pointer; color: inherit; } .chip-btn:hover, .chip-btn.on { border-color: var(--sec); color: var(--sec); background: color-mix(in srgb, var(--sec) 8%, #fff); } .padec-titulo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; } .padec-casillas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .padec-donde { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 .6rem; } .padec-donde .etq { font-size: .82rem; font-weight: 600; color: var(--gris, #6B7280); display: inline-flex; align-items: center; gap: .25rem; } /* ═══ Consulta con color: cada apartado de la nota con su tono, sobre fondo gris azulado ═══ */ body.consulta { background: #EDF1F6; } body.consulta .contenido, body.consulta main { background: transparent; } .nota-flujo > details.seccion-nota, .nota-flujo > .seccion-nota { --s: var(--c-pacientes); background: #fff; border: 1px solid #E1E7EF; border-left: 4px solid var(--s); border-radius: 10px; padding: .55rem .9rem .6rem; margin-bottom: .45rem; box-shadow: 0 1px 2px rgba(20, 40, 70, .05); } .nota-flujo > details.seccion-nota:last-of-type { border-bottom: 1px solid #E1E7EF; } .nota-flujo > details.seccion-nota[open] { background: linear-gradient(180deg, color-mix(in srgb, var(--s) 6%, #fff) 0, #fff 3.2rem); box-shadow: 0 2px 8px rgba(20, 40, 70, .07); } .nota-flujo > details.seccion-nota > summary > h2, details.grupo-funcional > details.seccion-nota > summary > h2 { color: var(--s); } .nota-flujo > details.seccion-nota > summary::before, details.grupo-funcional > details.seccion-nota > summary::before { border-color: var(--s); } details.seccion-nota[data-s="motivo"] { --s: #4F5BD5; } details.seccion-nota[data-s="subjetivo"] { --s: #2F6FDE; } details.seccion-nota[data-s="signos"] { --s: #D9483B; } details.seccion-nota[data-s="quirurgica"] { --s: #7A3FA0; } details.seccion-nota[data-s="objetivo"] { --s: #1B9388; } details.seccion-nota[data-s="funcional"] { --s: #E0772E; } details.seccion-nota[data-s="estudios"] { --s: #0E8FB5; } details.seccion-nota[data-s="valoracion"] { --s: #8E5BD3; } details.seccion-nota[data-s="diagnostico"] { --s: #C98A0B; } details.seccion-nota[data-s="plan"] { --s: #2E9E5B; } details.seccion-nota[data-s="receta"] { --s: #E4692E; } details.seccion-nota[data-s="pronostico"] { --s: #5B7083; } details.seccion-nota[data-s="comentarios"] { --s: #C8457F; } details.grupo-funcional > details.seccion-nota { background: transparent; border: 0; border-bottom: 1px dashed #E1E7EF; border-radius: 0; box-shadow: none; } body.consulta .nota-flujo textarea, body.consulta .nota-flujo input:not([type=checkbox]):not([type=radio]), body.consulta .nota-flujo select { background: #FBFCFE; } body.consulta .nota-flujo textarea:focus, body.consulta .nota-flujo input:focus { background: #fff; } .consulta-cab { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 #E1E7EF, 0 2px 10px rgba(20, 40, 70, .05); } /* Logotipo en la columna de la consulta: dos renglones, nunca cortado */ .cl-cabeza .cl-logo { overflow: visible; min-width: auto; } .cl-cabeza .cl-logo span { overflow: visible; text-overflow: clip; display: grid; line-height: 1.05; font-size: .8rem; } .cl-cabeza .cl-logo span b { font-size: .7rem; font-weight: 500; opacity: .8; } .cl-cabeza .cl-iconos a, .cl-cabeza .cl-iconos .btn-chat { padding: .32rem; } /* ═══ Cajón del expediente: marco de color para que no se pierda sobre la consulta ═══ */ .cajon-expediente, body.consulta .cajon-expediente { top: var(--cab-consulta); } .cajon-expediente { background: #E9EEF5; border-left: 0; border-radius: 14px 0 0 0; overflow: hidden; box-shadow: -14px 0 40px rgba(15, 35, 60, .22), -1px 0 0 rgba(15, 35, 60, .12); } .cajon-expediente header { background: linear-gradient(90deg, var(--c-pacientes), color-mix(in srgb, var(--c-pacientes) 70%, #2F6FDE)); color: #fff; border-bottom: 0; padding: .55rem .8rem; } .cajon-expediente header .btn, .cajon-expediente header .btn-texto { color: #fff; } .cajon-expediente header .btn:hover { background: rgba(255, 255, 255, .16); text-decoration: none; } .cajon-expediente header .ico { stroke: #fff; } .cajon-expediente iframe { background: #E9EEF5; } body.marco { background: #E9EEF5; } body.marco .contenido { padding: .9rem 1rem 2.5rem; } body.marco .tarjeta { box-shadow: 0 1px 3px rgba(20, 40, 70, .07); border-color: #DCE3EC; } body.marco h1 { font-size: 1.2rem; } /* ═══ Historia clínica: renglones en rejilla que caben en cualquier ancho ═══ */ .hc-alta { margin-bottom: 1rem; background: var(--fondo-2); padding: .75rem; border-radius: 8px; } .hc-lista { container-type: inline-size; } .hc-fila { display: grid; grid-template-columns: 128px minmax(120px, 2fr) minmax(100px, 1.4fr) 70px 96px 118px auto; gap: .4rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--linea); min-width: 0; } .hc-fila > * { min-width: 0; } .hc-fila input, .hc-fila select { width: 100%; } .hc-enc { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sec); font-weight: 700; padding-top: 0; } .hc-apartado .etiqueta { max-width: 100%; display: inline-block; overflow-wrap: anywhere; white-space: normal; } .hc-acciones { display: flex; gap: .2rem; justify-content: flex-end; } @container (max-width: 760px) { .hc-enc { display: none; } .hc-fila { grid-template-columns: 1fr 1fr 1fr; padding: .6rem 0; } .hc-apartado { grid-column: 1 / 3; } .hc-acciones { grid-column: 3; } .hc-fila input[name=descripcion] { grid-column: 1 / 3; } } @container (max-width: 420px) { .hc-fila { grid-template-columns: 1fr 1fr; } .hc-apartado, .hc-fila input[name=descripcion], .hc-fila input[name=detalle] { grid-column: 1 / -1; } .hc-acciones { grid-column: 1 / -1; } } /* ═══ Regla general: nada se sale de su tarjeta ═══ */ .tarjeta { min-width: 0; } .campos .campo { min-width: 0; } .campos .campo input, .campos .campo select, .campos .campo textarea { max-width: 100%; } .acciones { flex-wrap: wrap; } /* Cajón ampliado: ocupa todo el ancho a la derecha de la columna del historial */ .cajon-expediente { transition: transform .22s ease, width .22s ease; } .cajon-expediente.amplio { width: calc(100vw - var(--lateral-consulta)); border-radius: 0; } @media (max-width: 900px) { .cajon-expediente.amplio { width: 100vw; } } /* ════════════════════════════════════════════════════════════════════════════ CAPA VISUAL «VIDRIO» (19 sep 2026, a petición del Dr.: «muy monocromático, que resalten las cosas, como liquid glass, con animación»). Todo sale de --sec (color de la sección o del tema de la persona), así que respeta los temas. La barra lateral y el logotipo no se tocan. ════════════════════════════════════════════════════════════════════════════ */ :root { --vidrio: rgba(255, 255, 255, .80); --vidrio-fuerte: rgba(255, 255, 255, .90); --vidrio-borde: rgba(255, 255, 255, .75); --sombra-1: 0 1px 2px rgba(16, 36, 64, .06), 0 6px 18px rgba(16, 36, 64, .07); --sombra-2: 0 2px 6px rgba(16, 36, 64, .08), 0 14px 34px rgba(16, 36, 64, .12); --sombra-3: 0 10px 28px rgba(16, 36, 64, .18), 0 30px 70px rgba(16, 36, 64, .22); --resorte: cubic-bezier(.2, .9, .25, 1.15); --suave: cubic-bezier(.25, .8, .3, 1); } /* Fondo con luz de color: el tono de la sección arriba a la derecha, un azul abajo a la izquierda */ body { background: radial-gradient(1100px 620px at 102% -8%, color-mix(in srgb, var(--sec) 16%, transparent), transparent 70%), radial-gradient(900px 560px at -6% 108%, color-mix(in srgb, #2F6FDE 10%, transparent), transparent 70%), radial-gradient(700px 420px at 40% 40%, color-mix(in srgb, var(--sec) 4%, transparent), transparent 70%), #EEF2F7; background-attachment: fixed; } body.consulta { background: radial-gradient(1100px 620px at 102% -8%, color-mix(in srgb, var(--c-pacientes) 13%, transparent), transparent 70%), radial-gradient(900px 560px at 30% 110%, color-mix(in srgb, #2F6FDE 9%, transparent), transparent 70%), #EDF1F6; background-attachment: fixed; } body.marco { background: radial-gradient(700px 420px at 100% 0%, color-mix(in srgb, var(--sec) 12%, transparent), transparent 70%), #E9EEF5; } /* Tarjetas: vidrio claro con borde luminoso y sombra en capas */ .tarjeta { background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: 14px; box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255, 255, 255, .9); transition: box-shadow .25s var(--suave), transform .25s var(--suave), border-color .25s; } .tarjeta:hover { box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255, 255, 255, .9); border-color: color-mix(in srgb, var(--sec) 18%, #fff); } .tarjeta h2 { background: none; position: relative; padding-left: .8rem; border-bottom: 1px solid color-mix(in srgb, var(--sec) 14%, #E6EAF0); } .tarjeta h2::before { content: ""; position: absolute; left: 0; top: .12em; width: 4px; height: 1.05em; border-radius: 4px; background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 55%, #7FB2FF)); box-shadow: 0 0 10px color-mix(in srgb, var(--sec) 45%, transparent); } /* Botones: vidrio, se levantan al pasar, se hunden al pulsar */ .btn { background: var(--vidrio-fuerte); border-color: rgba(16, 36, 64, .12); box-shadow: 0 1px 2px rgba(16, 36, 64, .06), inset 0 1px 0 rgba(255, 255, 255, .9); transition: transform .18s var(--resorte), box-shadow .2s var(--suave), background-color .2s, border-color .2s, color .2s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 36, 64, .12), inset 0 1px 0 rgba(255, 255, 255, .9); border-color: color-mix(in srgb, var(--sec) 35%, #fff); color: color-mix(in srgb, var(--sec) 80%, var(--tinta)); text-decoration: none; } .btn:active { transform: translateY(0) scale(.97); box-shadow: 0 1px 2px rgba(16, 36, 64, .1); transition-duration: .06s; } .btn-texto, .btn.btn-texto { background: transparent; border-color: transparent; box-shadow: none; } .btn-texto:hover { background: color-mix(in srgb, var(--sec) 9%, transparent); box-shadow: none; } .btn-primario { background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 82%, #fff) 0, var(--sec) 55%, color-mix(in srgb, var(--sec) 88%, #000) 100%); border-color: color-mix(in srgb, var(--sec) 80%, #000); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--sec) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn-primario:hover { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 75%, #fff) 0, var(--sec) 60%, color-mix(in srgb, var(--sec) 85%, #000) 100%); box-shadow: 0 6px 18px color-mix(in srgb, var(--sec) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn-accion { box-shadow: 0 3px 12px color-mix(in srgb, var(--accion, #E4692E) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn-accion:hover { color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--accion, #E4692E) 50%, transparent); } .btn[disabled], .btn:disabled { transform: none; box-shadow: none; opacity: .55; } /* Campos: fondo apenas teñido y halo del color de la sección al enfocar */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { transition: border-color .18s, box-shadow .2s var(--suave), background-color .2s; } input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, select:focus, textarea:focus { outline: none; border-color: var(--sec); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec) 16%, transparent), 0 2px 8px rgba(16, 36, 64, .06); } input[type=checkbox], input[type=radio] { accent-color: var(--sec); } /* Pestañas: la activa va rellena de color, las demás se iluminan al pasar */ .pestanas { border-bottom: 0; gap: .3rem; padding: .3rem; background: rgba(255, 255, 255, .55); border: 1px solid var(--vidrio-borde); border-radius: 12px; box-shadow: var(--sombra-1); width: fit-content; max-width: 100%; } .pestanas a { border-bottom: 0; margin-bottom: 0; border-radius: 9px; padding: .45rem .85rem; transition: background-color .2s, color .2s, box-shadow .2s, transform .15s var(--resorte); } .pestanas a:hover { background: color-mix(in srgb, var(--sec) 10%, #fff); color: var(--sec); } .pestanas a.activa { background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 85%, #fff), var(--sec)); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--sec) 40%, transparent); } .pestanas a.activa .contador { background: rgba(255, 255, 255, .25); color: #fff; } .cc-pestanas { border-color: rgba(16, 36, 64, .1); border-radius: 10px; background: rgba(255, 255, 255, .7); box-shadow: 0 1px 3px rgba(16, 36, 64, .06); padding: 2px; gap: 2px; } .cc-pestanas > button { border-radius: 8px; transition: background-color .2s, color .2s, box-shadow .2s; } .cc-pestanas > button + button { border-left: 0; } .cc-pestanas > button:hover { background: color-mix(in srgb, var(--c-pacientes) 10%, #fff); color: var(--c-pacientes); } .cc-pestanas > button.on { background: linear-gradient(180deg, color-mix(in srgb, var(--c-pacientes) 85%, #fff), var(--c-pacientes)); box-shadow: 0 3px 10px color-mix(in srgb, var(--c-pacientes) 40%, transparent); } /* Tablas: encabezado teñido y renglón que se ilumina */ .tabla thead th { background: color-mix(in srgb, var(--sec) 7%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--sec) 20%, transparent); } .tabla thead th:first-child { border-top-left-radius: 8px; } .tabla thead th:last-child { border-top-right-radius: 8px; } .tabla tbody tr { transition: background-color .15s; } .tabla tbody tr:hover { background: color-mix(in srgb, var(--sec) 6%, transparent); } /* Etiquetas y fichas de estado con un poco de brillo */ .etiqueta { box-shadow: inset 0 0 0 1px rgba(16, 36, 64, .06); } .etiqueta-ok { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 25%, transparent); } .etiqueta-error { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 25%, transparent); } /* ── Lo que flota encima (cajones, menús, buscador) es vidrio de verdad y se separa del fondo ── */ .chat-cajon, .menu-hueco, .menu-flotante, .buscador-global > *:first-child { backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); } /* OJO: .cajon-expediente (y .cajon-lateral, que la hereda) llevan un iframe dentro y por eso NO llevan backdrop-filter: en Safari el desenfoque encima de un marco rompe el desplazamiento con trackpad (se pierde o llega a saltos; 20-sep, cinco vueltas hasta dar con esto). El marco tapa todo el cuerpo de la ventana, así que el vidrio ni se veía. */ .cajon-expediente { backdrop-filter: none; -webkit-backdrop-filter: none; background: #E9EEF5; box-shadow: var(--sombra-3), -1px 0 0 rgba(255, 255, 255, .7) inset; transition: transform .38s var(--suave), width .3s var(--suave), box-shadow .3s; } .cajon-expediente.abierto { box-shadow: -24px 0 60px rgba(16, 36, 64, .28), 0 0 0 1px color-mix(in srgb, var(--c-pacientes) 30%, transparent); } .chat-cajon { background: rgba(255, 255, 255, .88); box-shadow: var(--sombra-3); } .menu-hueco, .menu-flotante { background: rgba(255, 255, 255, .88); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-3); animation: aparecer-menu .18s var(--resorte); transform-origin: top left; } .buscador-global { background: rgba(16, 30, 50, .38); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2); animation: aparecer-velo .2s ease; } .buscador-global > *:first-child { background: rgba(255, 255, 255, .9); box-shadow: var(--sombra-3); border: 1px solid var(--vidrio-borde); animation: aparecer-menu .24s var(--resorte); } /* La ventana de encima manda: con el cajón abierto, la nota de atrás se atenúa (vuelve al pasar el cursor) */ body.cajon-abierto .nota-flujo, body.cajon-abierto .contenido > .aviso { opacity: .5; filter: saturate(.55); transition: opacity .3s, filter .3s; } body.cajon-abierto .nota-flujo:hover { opacity: .85; filter: none; } body .nota-flujo { transition: opacity .3s, filter .3s; } /* ── Animaciones de entrada ── */ @keyframes aparecer-subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes aparecer-menu { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes aparecer-velo { from { opacity: 0; } to { opacity: 1; } } @keyframes abrir-seccion { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .contenido > .tarjeta, .contenido > .rejilla > .tarjeta, .contenido > .rejilla > div > .tarjeta, .rejilla-ajustes > .tarjeta, .nota-flujo > details.seccion-nota { animation: aparecer-subir .42s var(--suave) both; } .contenido > .tarjeta:nth-of-type(2), .rejilla-ajustes > .tarjeta:nth-child(2), .nota-flujo > details:nth-of-type(2) { animation-delay: .04s; } .contenido > .tarjeta:nth-of-type(3), .rejilla-ajustes > .tarjeta:nth-child(3), .nota-flujo > details:nth-of-type(3) { animation-delay: .08s; } .contenido > .tarjeta:nth-of-type(4), .rejilla-ajustes > .tarjeta:nth-child(4), .nota-flujo > details:nth-of-type(4) { animation-delay: .12s; } .rejilla-ajustes > .tarjeta:nth-child(n+5), .nota-flujo > details:nth-of-type(n+5) { animation-delay: .16s; } details[open] > summary ~ * { animation: abrir-seccion .26s var(--suave); } /* Apartados de la nota: al pasar, se nota cuál es; el abierto flota un poco */ .nota-flujo > details.seccion-nota { transition: box-shadow .25s var(--suave), transform .25s var(--suave), background-color .25s; } .nota-flujo > details.seccion-nota:hover { box-shadow: 0 4px 16px rgba(16, 36, 64, .09); } .nota-flujo > details.seccion-nota > summary { border-radius: 8px; transition: background-color .2s; margin: -.2rem -.35rem; padding: .2rem .35rem; } .nota-flujo > details.seccion-nota > summary:hover { background: color-mix(in srgb, var(--s, var(--sec)) 8%, transparent); } .nota-flujo > details.seccion-nota[open] { box-shadow: 0 6px 22px color-mix(in srgb, var(--s, var(--sec)) 14%, transparent), 0 1px 2px rgba(16, 36, 64, .06); } .nota-flujo > details.seccion-nota > summary > h2::after { content: ""; flex: none; } /* Cada apartado con su barra de color y el texto en blanco (20 sep 2026, a petición del Dr.: «que el fondo sea del color y las letras blancas», en lugar de letras de color sobre blanco). */ .nota-flujo > details.seccion-nota > summary, .nota-flujo > .seccion-nota > h2 { background: linear-gradient(180deg, color-mix(in srgb, var(--s) 13%, #fff), color-mix(in srgb, var(--s) 20%, #fff)); color: color-mix(in srgb, var(--s) 80%, #000); border-radius: 8px; margin: -.55rem -.9rem 0; padding: .45rem .8rem; } .nota-flujo > details.seccion-nota[open] > summary { border-radius: 8px 8px 0 0; margin-bottom: .6rem; } /* cerrado, la barra de color ocupa toda la tarjeta: sin franjas blancas sobrantes */ .nota-flujo > details.seccion-nota:not([open]) { padding-bottom: 0; border-left-width: 1px; } .nota-flujo > details.seccion-nota:not([open]) > summary { margin-bottom: -.55rem; } .nota-flujo > details.seccion-nota[open] { border-left-width: 1px; } .nota-flujo > details.seccion-nota > summary > h2, .nota-flujo > details.seccion-nota > summary > h2 small, .nota-flujo > details.seccion-nota > summary > h2 .ayuda, .nota-flujo > .seccion-nota > h2 { color: color-mix(in srgb, var(--s) 78%, #000); } .nota-flujo > details.seccion-nota > summary > h2 .ayuda-q { border-color: color-mix(in srgb, var(--s) 45%, #fff); color: color-mix(in srgb, var(--s) 70%, #000); } .nota-flujo > details.seccion-nota > summary > h2 .ayuda-q:hover { background: color-mix(in srgb, var(--s) 22%, #fff); } .nota-flujo > details.seccion-nota > summary::before { border-color: color-mix(in srgb, var(--s) 70%, #000); } .nota-flujo > details.seccion-nota > summary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--s) 20%, #fff), color-mix(in srgb, var(--s) 28%, #fff)); } .nota-flujo > details.seccion-nota[open] { background: #fff; } .nota-flujo > details.seccion-nota > summary > h2 .btn { background: #fff; border-color: color-mix(in srgb, var(--s) 35%, #fff); color: color-mix(in srgb, var(--s) 75%, #000); } .nota-flujo > details.seccion-nota > summary > h2 .btn:hover { background: color-mix(in srgb, var(--s) 12%, #fff); color: color-mix(in srgb, var(--s) 80%, #000); } .nota-flujo > details.seccion-nota > summary > h2 .hc-cuenta { color: color-mix(in srgb, var(--s) 75%, #000); } /* los apartados anidados (evaluación funcional) llevan la misma barra, más chica */ details.grupo-funcional > details.seccion-nota > summary { background: color-mix(in srgb, var(--s) 12%, #fff); border-radius: 7px; padding: .3rem .6rem; } details.grupo-funcional > details.seccion-nota > summary > h2 { color: color-mix(in srgb, var(--s) 78%, #000); } details.grupo-funcional > details.seccion-nota > summary::before { border-color: color-mix(in srgb, var(--s) 70%, #000); } /* con un tema de color personal, todos los apartados van en ese tono; en MAIA cada uno lleva el suyo */ html[data-tema] details.seccion-nota[data-s] { --s: var(--acento); } /* Menú de Configuración: el apartado activo resalta con su color de grupo */ .config-menu a.on, .config-menu a.activo, .config-menu a[aria-current] { box-shadow: 0 2px 10px rgba(16, 36, 64, .08); } /* Barra superior de la consulta en vidrio */ .consulta-cab { background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Botones de acción: conservan su color propio sobre la capa de vidrio (con brillo y relieve) */ .btn.btn-accion { background: linear-gradient(180deg, color-mix(in srgb, var(--accion) 80%, #fff), var(--accion) 55%, var(--accion-oscuro)); border-color: var(--accion-oscuro); color: #fff; } .btn.btn-accion:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accion) 72%, #fff), var(--accion) 60%, var(--accion-oscuro)); color: #fff; border-color: var(--accion-oscuro); } .btn.btn-grabar { background: linear-gradient(180deg, color-mix(in srgb, var(--grabar) 78%, #fff), var(--grabar) 55%, #B92F2F); border-color: #B92F2F; color: #fff; box-shadow: 0 3px 12px color-mix(in srgb, var(--grabar) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } .btn.btn-grabar:hover { color: #fff; border-color: #B92F2F; box-shadow: 0 8px 20px color-mix(in srgb, var(--grabar) 45%, transparent); } .btn.btn-pago { background: linear-gradient(180deg, color-mix(in srgb, var(--pago) 78%, #fff), var(--pago) 55%, #A87107); border-color: #A87107; color: #fff; box-shadow: 0 3px 12px color-mix(in srgb, var(--pago) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } .btn.btn-pago:hover { color: #fff; border-color: #A87107; } .btn.btn-peligro:hover { color: var(--error); border-color: #e2b4b0; background: var(--error-suave); } .btn.tono-rojo:hover { color: var(--error); background: color-mix(in srgb, var(--error) 7%, #fff); } .btn.tono-naranja:hover { color: #C8551F; background: color-mix(in srgb, #C8551F 7%, #fff); } .btn.tono-verde:hover { color: #1E8449; background: color-mix(in srgb, #1E8449 7%, #fff); } .btn.tono-teal:hover { color: var(--c-pacientes); background: color-mix(in srgb, var(--c-pacientes) 7%, #fff); } .btn.tono-azul:hover { color: #2F6FDE; background: color-mix(in srgb, #2F6FDE 7%, #fff); } .btn.tono-whatsapp:hover { color: #1B8A4C; background: color-mix(in srgb, #25A244 7%, #fff); } .btn.tono-violeta:hover { color: #6C3FC5; background: color-mix(in srgb, #6C3FC5 7%, #fff); } .cajon-expediente header, .cajon-expediente header .peq, .cajon-expediente header span { color: #fff; } @container (max-width: 760px) { .hc-acciones { grid-row: 1; grid-column: 3; } } @container (max-width: 420px) { .hc-acciones { grid-row: auto; } } /* Solicitudes: los accesos en rejilla de mosaicos, a todo lo ancho, que se iluminan al pasar */ .sol-grupos { grid-template-columns: 1fr; } .sol-grupo h3 { display: none; } .sol-rejilla { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .55rem; } .sol-op { background: rgba(255, 255, 255, .75); border: 1px solid rgba(16, 36, 64, .08); padding: .6rem .7rem; border-radius: 12px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 36, 64, .05); transition: transform .18s var(--resorte), box-shadow .2s, border-color .2s, background-color .2s; } .sol-op:hover { text-decoration: none; transform: translateY(-2px); background: #fff; border-color: color-mix(in srgb, var(--sec) 30%, #fff); box-shadow: 0 8px 20px rgba(16, 36, 64, .12); } .sol-op .tile { box-shadow: 0 3px 8px rgba(16, 36, 64, .18); transition: transform .2s var(--resorte); } .sol-op:hover .tile { transform: scale(1.08) rotate(-3deg); } /* Ayuda «?»: el globo no ocupa lugar hasta que se pide (no estira la página cerca del borde) */ .ayuda-q::after { display: none; } .ayuda-q:hover::after, .ayuda-q:focus::after { display: block; animation: aparecer-menu .16s var(--suave); } /* Dónde cabe: app.js mide al pasar el cursor y, si arriba se saldría de la ventana, lo manda abajo; si se sale por un lado, lo pega a ese lado (22-sep, el Dr.: «el recuadro de información sale cortado»). */ .ayuda-q.abajo::after { bottom: auto; top: calc(100% + 8px); } .ayuda-q.izq::after { left: -4px; transform: none; } .ayuda-q.der::after { left: auto; right: -4px; transform: none; } /* Edición en línea que flota (p. ej. «Datos» de un estudio): no estira la tabla ni se sale de la tarjeta */ details.editar-flotante { position: relative; } details.editar-flotante > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 340px; margin: 0; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .8rem; border-radius: 12px; background: rgba(255, 255, 255, .94); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-3); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); animation: aparecer-menu .18s var(--resorte); } details.editar-flotante > form .campo:has(input[name=descripcion]), details.editar-flotante > form .campo:has(select[name=cirugia_id]) { grid-column: 1 / -1; } /* Dentro de una ventana flotante, el marco se desplaza SOLO, como cualquier página: es el único desplazamiento que el trackpad mueve con suavidad y con inercia. Nada de topes de overflow aquí, que es lo que lo dejaba trabado (20-sep). */ html[data-marco], html[data-marco] body { overflow: visible; } /* El gesto del trackpad NO se le pasa a la pantalla de atrás. Medido en la máquina del Dr. (20-sep): 490 movimientos, 1071 px, y la ventana no bajó ni uno. El navegador «engancha» cada gesto con una zona al empezar; si los dedos arrancan con un mini-movimiento hacia arriba y la ventana está en su tope, el gesto entero se encadena a la página de afuera y la ventana ya no lo recibe («a veces quiere y a veces no»). Con esto el gesto se queda en la ventana aunque esté en su tope. */ html[data-marco], html[data-marco] body { overscroll-behavior: none; } html:not([data-marco]) { overflow-x: hidden; } /* solo en html: si también va en body, body se vuelve OTRA zona de desplazamiento y Safari se engancha con la de atrás en vez de con la ventana. La página nunca se desplaza de lado. «hidden», no «clip»: con clip Safari deja de desplazar hacia abajo dentro de la ventana flotante y las listas largas se quedan trabadas (20-sep). */ /* Modo prueba (maia.py --pruebas): franja para no confundirlo con el expediente real */ .aviso-prueba { position: fixed; right: 0; bottom: 0; z-index: 95; background: linear-gradient(90deg, #C98A0B, #E0632E); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: .18rem .7rem; border-radius: 8px 0 0 0; box-shadow: 0 -2px 10px rgba(16, 36, 64, .25); pointer-events: none; } /* Cajón lateral general (agendar, cirugía, bloqueo…): mismo concepto que el de la consulta */ .cajon-lateral { top: 0; width: min(46vw, 760px); } .cajon-lateral header { background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 70%, #2F6FDE)); } body.cajon-abierto .contenido > *:not(.cajon-lateral) { transition: opacity .3s, filter .3s; } @media (max-width: 900px) { .cajon-lateral { width: 100vw; } } /* Cajón lateral general (agendar, cirugía, bloqueo…): mismo concepto que el de la consulta */ .cajon-lateral { top: 0; width: min(46vw, 760px); } .cajon-lateral header { background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 70%, #2F6FDE)); } body.cajon-abierto .contenido > *:not(.cajon-lateral) { transition: opacity .3s, filter .3s; } @media (max-width: 900px) { .cajon-lateral { width: 100vw; } } /* ═══ Ventana flotante (agendar, cirugía, corte, notas pendientes…): nace del clic, no tapa todo ═══ */ #cajon-lateral.cajon-lateral { position: fixed; top: auto; bottom: auto; right: 1.1rem; left: auto; top: 0; bottom: 0; margin: auto 0; height: fit-content; transform: none; opacity: 0; pointer-events: none; width: min(620px, 94vw); max-height: min(88vh, 900px); border-radius: 16px; border: 1px solid var(--vidrio-borde); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra-3); transition: opacity .22s var(--suave), transform .28s var(--resorte); } #cajon-lateral.cajon-lateral { z-index: 70; } /* la ventana de encima manda: va sobre la ficha de la cita */ /* Abierta NO conserva ningún transform: en Safari un marco dentro de algo con transform pierde el desplazamiento. Se centra con márgenes y la animación de entrada termina sin dejar transform puesto. */ #cajon-lateral.cajon-lateral.abierto { opacity: 1; pointer-events: auto; transform: none; animation: nace-stat .28s var(--resorte, ease); } @keyframes nace-stat { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } } body.cajon-abierto .panel-cita { opacity: .45; filter: saturate(.6); transition: opacity .3s, filter .3s; } #cajon-lateral.cajon-lateral header { border-radius: 16px 16px 0 0; } #cajon-lateral.cajon-lateral .cajon-cuerpo { flex: 0 1 auto; min-height: 0; } #cajon-lateral.cajon-lateral iframe { display: block; flex: 1 1 auto; height: 58vh; min-height: 220px; max-height: calc(88vh - 46px); } @media (max-width: 760px) { #cajon-lateral.cajon-lateral { right: 3vw; width: 94vw; } } body.cajon-abierto .contenido { transition: filter .3s, opacity .3s; } /* Explorar: barras y filtros */ .explorar-form .explorar-filtro { display: flex; gap: .35rem; } .explorar-form .explorar-filtro select { min-width: 0; } .explorar-barras { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; } .explorar-barras li { display: grid; grid-template-columns: minmax(120px, 22%) 1fr auto 52px; align-items: center; gap: .6rem; font-size: .92rem; } .explorar-barras .et { overflow-wrap: anywhere; } .explorar-barras .barra { background: color-mix(in srgb, var(--sec) 10%, #fff); border-radius: 999px; height: 14px; overflow: hidden; } .explorar-barras .barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 70%, #fff), var(--sec)); transition: width .5s var(--suave); } .explorar-barras .val { font-variant-numeric: tabular-nums; font-weight: 600; } .explorar-barras .pct { color: var(--tinta-3); font-size: .82rem; text-align: right; } /* El nombre bajo el logotipo: siempre «MAIA Expediente», misma tipografía y mismo tamaño (manual de marca: el nombre no se parte ni se abrevia; MAIA lleva el peso). */ .lateral .marca span { display: block; font-size: .55rem; line-height: 1.1; color: #fff; text-transform: none; letter-spacing: .01em; font-weight: 400; opacity: .72; } .lateral .marca span b { display: block; font-size: 1.15rem; font-weight: 400; letter-spacing: .05em; opacity: 1; margin-bottom: .05rem; } .lateral .marca { gap: .3rem; } @media (max-width: 900px) { .lateral .marca span { display: none; } } /* Bandera roja: el recuadro para escribir el motivo se abre hacia dentro, nunca fuera de la pantalla */ .bandera-detalle .menu-flotante { max-width: min(320px, 86vw); } .bandera-detalle.abre-izq .menu-flotante { left: auto; right: 0; } .panel-cita .bandera-detalle .menu-flotante, .cc-nombre .bandera-detalle .menu-flotante { left: auto; right: 0; } .bandera-detalle[open] .menu-flotante { animation: aparecer-menu .16s var(--resorte); } /* Ficha de la cita: compacta y por secciones que se abren de una en una */ .panel-cita { font-size: .88rem; } .panel-cita .tarjeta { padding: .6rem .75rem; margin-bottom: .5rem; border-radius: 12px; } .panel-cita h2 { font-size: .82rem; margin: 0; padding-bottom: 0; border-bottom: 0; } .panel-cita .panel-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; padding: .1rem 0; border-radius: 8px; } .panel-cita .panel-sec > summary::-webkit-details-marker { display: none; } .panel-cita .panel-sec > summary::after { content: ""; width: 6px; height: 6px; margin-left: auto; flex: none; border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(45deg) translateY(-2px); transition: transform .15s; } .panel-cita .panel-sec[open] > summary::after { transform: rotate(225deg) translateY(-2px); } .panel-cita .panel-sec[open] > summary { margin-bottom: .5rem; } .panel-cita .panel-sec > summary:hover { background: color-mix(in srgb, var(--sec) 8%, transparent); } .panel-cita .panel-sec > summary h2 { flex: 1; } .panel-cita .btn { font-size: .8rem; padding: .32rem .55rem; } .panel-cita .estados-rejilla .btn, .panel-cita .acciones .btn { min-height: 34px; } .panel-cita .ficha-datos { gap: .35rem .6rem; } .panel-cita .peq, .panel-cita small { font-size: .76rem; } .panel-cita .etiqueta { font-size: .68rem; } /* Accesos en tira pareja: se reparten el renglón completo, sin huecos ni escalones */ .sol-rejilla { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; } .sol-rejilla .sol-op { flex: 1 1 165px; min-width: 150px; } .sol-op { padding: .5rem .6rem; gap: .5rem; font-size: .86rem; } .sol-crear .tile { width: 26px; height: 26px; border-radius: 7px; } .sol-crear .tile .ico { width: 16px; height: 16px; } .accesos { display: flex; flex-wrap: wrap; gap: .4rem; } .accesos > .btn { flex: 1 1 auto; justify-content: center; } /* Lista desplegable con buscador (paquetes de estudios, protocolos…) */ details.lista-menu { position: relative; margin: .2rem 0 .8rem; } details.lista-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--sec); border: 1px solid var(--linea); border-radius: 10px; padding: .38rem .7rem; background: var(--vidrio-fuerte); box-shadow: 0 1px 2px rgba(16, 36, 64, .06); } details.lista-menu > summary::-webkit-details-marker { display: none; } details.lista-menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); } details.lista-menu[open] > summary::after { transform: rotate(225deg) translateY(0); } details.lista-menu[open] > summary { background: #fff; border-color: color-mix(in srgb, var(--sec) 35%, #fff); } .lista-buscar { position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; width: min(420px, 92vw); } details.lista-menu .lista-opciones { position: absolute; z-index: 40; top: calc(100% + 42px); left: 0; width: min(420px, 92vw); max-height: 46vh; overflow: auto; margin: 0; padding: .3rem; list-style: none; background: rgba(255, 255, 255, .96); border: 1px solid var(--vidrio-borde); border-radius: 12px; box-shadow: var(--sombra-3); backdrop-filter: blur(16px) saturate(1.4); animation: aparecer-menu .16s var(--resorte); } details.lista-menu .lista-opciones li { margin: 0; } details.lista-menu .lista-opciones button { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; border-radius: 8px; padding: .4rem .5rem; font: inherit; } details.lista-menu .lista-opciones button:hover { background: color-mix(in srgb, var(--sec) 10%, #fff); } details.lista-menu .lista-opciones b { display: block; font-size: .88rem; font-weight: 600; } details.lista-menu .lista-opciones small { display: block; color: var(--tinta-3); font-size: .74rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; } /* una sola columna que nunca pasa del ancho del desplegable (antes el texto largo la estiraba a 1,100 px) */ details.lista-menu .lista-opciones { grid-template-columns: minmax(0, 1fr); max-width: calc(100vw - 2rem); } /* La fecha, como se lee en México: dd/mm/aaaa junto al campo */ .fecha-mx { display: block; font-size: .72rem; color: var(--tinta-3); margin-top: .12rem; white-space: nowrap; } /* Campo de fecha en orden mexicano: dd/mm/aaaa y el calendario a un clic */ .fecha-campo { position: relative; display: block; width: 100%; } .fecha-campo .fecha-vista { width: 100%; padding-right: 2rem; font-variant-numeric: tabular-nums; } .fecha-campo .fecha-vista.mal { border-color: var(--error); } .fecha-campo .fecha-iso { position: absolute; right: .35rem; bottom: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; } .fecha-campo .fecha-cal { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--tinta-3); cursor: pointer; } .fecha-campo .fecha-cal:hover { background: var(--fondo-2); color: var(--sec); } .fecha-campo .fecha-cal .ico { width: 16px; height: 16px; } .cc-acto .fecha-campo { width: 8.6rem; } .cc-acto .fecha-campo .fecha-vista { padding: .25rem 1.7rem .25rem .4rem; font-size: .82rem; color: var(--tinta-2); } .acciones .fecha-campo, .inline .fecha-campo { width: 9.5rem; } .cc-derecha .fecha-mx, .panel-cita .fecha-mx { font-size: .68rem; } /* ── correcciones del Dr. (19 sep 2026, noche) ── */ /* Tarjetas de ajustes: dos columnas que arrancan SIEMPRE a la misma altura y se llenan solas; cada tarjeta mide lo que mide su contenido (no se estira para emparejar a la de al lado). app.js («acomodarAjustes») reparte las tarjetas en dos columnas por su alto real; una tarjeta .ancha corta el tramo y ocupa todo el renglón. Sin JS queda una rejilla de dos columnas alineada arriba. No se usa `columns:` de CSS: Safari desalinea la segunda columna y reparte mal. */ .rejilla-ajustes, .ra-tramo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } .rejilla-ajustes > .tarjeta, .ra-col > .tarjeta { margin: 0; } .rejilla-ajustes > .tarjeta.ancha, .rejilla-ajustes > .ra-tramo { grid-column: 1 / -1; } .ra-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } @media (max-width: 1100px) { .rejilla-ajustes, .ra-tramo { grid-template-columns: 1fr; } } .otro-propio { margin-top: .7rem; max-width: 22rem; } .apariencia { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; } .apariencia .campo { margin: 0; width: 100%; } .firma-fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .firma-fila input[type=file] { flex: 1 1 200px; min-width: 0; } .firma-mini { height: 46px; width: 110px; object-fit: contain; border: 1px solid var(--linea); border-radius: 6px; background: #fff; padding: .2rem; flex: none; } /* Mi cuenta → Mi firma: la firma limpia se ve sobre blanco, como sale impresa; la clave va debajo */ .firma-vista { height: 64px; width: 190px; object-fit: contain; border: 1px solid var(--linea); border-radius: 8px; background: #fff; padding: .3rem .5rem; flex: none; } .clave-titulo { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 1.1rem 0 .5rem; font-size: .95rem; } /* Firmar la nota: la firma que va a salir y la clave, grande y en puntos, con teclado de números en el celular */ .firma-acto .firma-vista { display: block; margin-bottom: .8rem; } .firma-acto .clave-firma { max-width: 13rem; font-size: 1.35rem; letter-spacing: .45em; font-variant-numeric: tabular-nums; } .formato-de { align-self: center; } .formato-de > a:hover { background: var(--fondo-2); color: var(--tinta); text-decoration: none; } /* En Configuración el contenido toma el color del grupo en el que estás (Perfil verde, Equipo naranja…): barritas de los títulos, botón primario, encabezados de tabla. Con un tema de color personal, todo (menú incluido) va en ese tono. */ html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=ayuda] a.activo) { --sec: #5B67CA; } html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=general] a.activo) { --sec: #5C6B7A; } html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=perfil] a.activo) { --sec: #1B9388; } html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=equipo] a.activo) { --sec: #E0772E; } html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=asistente] a.activo) { --sec: #8E5BD3; } html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=catalogos] a.activo) { --sec: #C98A0B; } html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=correo] a.activo) { --sec: #2F6FDE; } html:not([data-tema]) body.config:has(.config-menu .grupo[data-g=datos] a.activo) { --sec: #C0392B; } body.config { --sec-suave: color-mix(in srgb, var(--sec) 12%, #fff); } html[data-tema] .config-menu .grupo, html[data-tema] .config-menu .config-titulo { --g: var(--acento); } html[data-tema] .config-menu .config-titulo .tile { background: var(--acento); } /* ── Logotipo según el manual de identidad MAIA (19 sep 2026) ── Tipografía de marca: Helvetica Neue. «MAIA» en regular y el nombre de la app en medium, los dos del MISMO tamaño, letter-spacing .16em. Isotipo con su símbolo desde 40 px; de 24 a 36 px va la versión -small- (punto de color, sin símbolo); a 20 px o menos, el favicon. Apilado: isotipo arriba, MAIA y el nombre en dos renglones centrados. */ .logotipo { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: .16em; white-space: nowrap; } .logotipo strong { font-weight: 500; } .lateral .marca { gap: .4rem; padding: .1rem 0 .85rem; } .lateral .marca img { width: 40px; height: 40px; } .lateral .marca span.logotipo { display: block; font-size: .62rem; line-height: 1.35; color: #FFFEFB; opacity: 1; letter-spacing: .16em; font-weight: 400; text-transform: none; margin-right: -.16em; } .lateral .marca span.logotipo strong { display: block; font-size: 1em; font-weight: 500; } @media (max-width: 900px) { .lateral .marca span.logotipo { display: none; } .lateral .marca img { width: 32px; height: 32px; } } /* pantalla de entrada: isotipo a 96 px, MAIA a 40 px con .22em, el nombre debajo y el significado en monoespaciada */ .caja-login .logo { gap: .15rem; } .caja-login .logo img { width: 96px; height: 96px; margin-bottom: .5rem; } .caja-login .logo span.logotipo, body.entrada .caja-login .logo span.logotipo { display: block; text-align: center; font-size: 40px; line-height: 1.1; letter-spacing: .22em; margin-right: -.22em; color: #17181A; } .caja-login .logo span.logotipo strong { display: block; font-size: 19px; font-weight: 500; letter-spacing: .16em; margin: .35rem -.16em 0 0; } .caja-login .logo .significado { margin-top: .7rem; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .62rem; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); text-align: center; } body.entrada .caja-login .logo::after { content: none; } /* consulta: isotipo chico (28 px, sin símbolo) con el nombre en dos renglones del mismo tamaño */ .cl-cabeza .cl-logo span.logotipo { font-size: .62rem; line-height: 1.35; letter-spacing: .16em; } .cl-cabeza .cl-logo span.logotipo strong { display: block; font-size: 1em; font-weight: 500; opacity: 1; } /* ── Formularios sin huecos (19 sep 2026, corrección del Dr. revisando en Safari) ── */ /* La fecha «como se lee en México» no ocupa renglón: si lo ocupara, el campo de al lado se estira y su etiqueta se separa del control. Va flotando bajo su campo. */ .campos .campo { position: relative; } .campos .campo > .fecha-mx { position: absolute; top: 100%; left: .1rem; margin-top: 1px; line-height: 1; pointer-events: none; } /* un renglón con fecha deja su lugar a «21 sep 2026»: nunca cae encima de la tabla o el renglón que sigue */ .campos:has(> .campo > .fecha-mx:not(:empty)) { margin-bottom: .95rem; } /* Rejillas de campos que continúan (para partir un formulario en renglones de 2 y de 3 sin dejar medio renglón vacío) */ .campos.sigue { margin-top: .75rem; } @media (max-width: 520px) { .campos.c3 { grid-template-columns: 1fr; } } /* Los selectores miden lo mismo que los demás campos en todos los navegadores (Safari los dibuja más bajos) */ select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 1.9rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236B7785' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .6rem center !important; background-size: .75rem !important; } /* un botón que ocupa el lugar de un campo mide lo mismo que un campo */ .btn.btn-campo { width: 100%; justify-content: flex-start; padding: .5rem .65rem; font-size: .95rem; font-weight: 400; border-radius: 6px; margin-top: auto; } /* ── Color de cada lugar: selector de muestras (Lugares y hospitales) y horario de atención con color en la agenda ── */ .elige-color { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .elige-color label { margin: 0; cursor: pointer; position: relative; display: inline-flex; } .elige-color input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } .elige-color i { width: 30px; height: 30px; border-radius: 9px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .15s var(--suave, ease); } .elige-color label:hover i { transform: scale(1.08); } .elige-color input[type=radio]:checked + i, .elige-color input[type=radio]:checked + input[type=color] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta); } .elige-color input[type=radio]:focus-visible + i { outline: 2px solid var(--acento); outline-offset: 3px; } .elige-color .propio input[type=color] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: conic-gradient(#e0632e, #c98a0b, #2b7a5b, #2e6fdb, #7a4fc9, #d6457f, #e0632e); cursor: pointer; overflow: hidden; } .elige-color .propio input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .elige-color .propio input[type=color]::-webkit-color-swatch { border: 0; border-radius: 9px; } .elige-color .propio input[type=radio]:not(:checked) + input[type=color]::-webkit-color-swatch { opacity: 0; } .muestra-color { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-left: .45rem; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } /* el horario de atención se ve: tono del lugar en toda la franja y su barra al borde */ .franja { border-left: 4px solid var(--fc, var(--c-agenda)); background: color-mix(in srgb, var(--fc, var(--c-agenda)) 24%, #fff); } /* Día de consulta: el cuadro del día va en el color del consultorio (dos lugares el mismo día → mitad y mitad), la columna entera en un tono tenue del mismo color y el horario de trabajo, luminoso y enmarcado, es lo que resalta. */ .rej-dia-cab.consulta { background: linear-gradient(90deg, var(--dc) 0 50%, var(--dc2, var(--dc)) 50% 100%); border-left-color: rgba(255,255,255,.55); } .rej-dia-cab.consulta small, .rej-dia-cab.consulta .num { color: #fff; } .rej-dia-cab.consulta.hoy .num { background: #fff; color: var(--dc); border-radius: 999px; padding: 0 .5rem; } .rej-dia-cab.consulta.hoy::after { background: #fff; } .rej-col.consulta { background-color: color-mix(in srgb, var(--dc) 9%, #eef0f2); } .rej-col.consulta.hoy { background-blend-mode: normal; background-color: color-mix(in srgb, var(--dc) 13%, #eef0f2); } .franja { border-left: 4px solid var(--fc, var(--c-agenda)); background: color-mix(in srgb, var(--fc, var(--c-agenda)) 20%, #fff); box-shadow: inset 0 2px 0 var(--fc, var(--c-agenda)), inset 0 -2px 0 var(--fc, var(--c-agenda)); } .franja::before { display: none; } .mes-dia.consulta { background: color-mix(in srgb, var(--dc) 9%, #fff); } .mes-dia.consulta .num { background: linear-gradient(90deg, var(--dc) 0 50%, var(--dc2, var(--dc)) 50% 100%); color: #fff; } .mes-dia.consulta.hoy .num { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dc); } /* Cabecera de la agenda: todo en un renglón junto a la fecha, botones chicos y todos de la misma altura */ .agenda-cab { align-items: center; gap: .5rem; flex-wrap: nowrap; } .agenda-cab .agenda-nav { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; } .agenda-cab .acciones { gap: .28rem; flex: 0 0 auto; justify-content: flex-end; flex-wrap: wrap; } .agenda-cab .btn { font-size: .74rem; padding: 0 .48rem; gap: .25rem; min-height: 30px; height: 30px; white-space: nowrap; } .agenda-cab .btn .ico { width: 14px; height: 14px; } .agenda-nav h1 { font-size: 1rem; margin: 0 .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-nav h1 { flex: 0 1 auto; } /* Acciones de la agenda: cada una es su ícono y se abre con su nombre al pasar el cursor o el dedo. «Cita» va siempre con su nombre y su color, porque es la acción principal. */ .agenda-nav h1 { flex: 0 0 auto; overflow: visible; text-overflow: clip; white-space: nowrap; } .agenda-cab .acciones .btn { padding: 0 .5rem; gap: 0; justify-content: center; } .agenda-cab .acciones .btn .ico { flex: none; } .agenda-cab .acciones .btn .ico { width: 17px; height: 17px; } .agenda-cab .acciones .btn .et { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0; transition: max-width .3s var(--resorte), opacity .22s var(--suave), margin-left .3s var(--resorte); } .agenda-cab .acciones .btn:hover .et, .agenda-cab .acciones .btn:focus-visible .et, .agenda-cab .acciones .btn.btn-primario .et { max-width: 140px; opacity: 1; margin-left: .3rem; } .agenda-cab .acciones .btn:hover { border-color: color-mix(in srgb, var(--sec) 40%, #fff); } /* «Cita» es la acción principal: siempre con su nombre, con aire parejo a los dos lados */ .agenda-cab .acciones .btn.btn-primario { padding: 0 1rem; gap: .4rem; font-weight: 600; } .agenda-cab .acciones .btn.btn-primario .et { margin-left: 0; } .agenda-cab .acciones .btn.btn-primario .ico { width: 16px; height: 16px; } /* ── Celular: la cabecera de la agenda en dos renglones y las acciones se deslizan ── */ @media (max-width: 760px) { .agenda-cab { flex-wrap: wrap; gap: .4rem; } .agenda-cab .agenda-nav { width: 100%; flex-wrap: wrap; gap: .35rem; } .agenda-nav h1 { width: 100%; margin: .1rem 0 0; font-size: .95rem; } .agenda-cab .acciones { width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .agenda-cab .acciones::-webkit-scrollbar { display: none; } .agenda-cab .acciones .btn { flex: 0 0 auto; } .agenda-2 { grid-template-columns: minmax(0, 1fr); } /* el calendario y los lugares van debajo */ .rejilla-wrap { height: 62vh; min-height: 0; max-width: 100%; overflow: auto; } /* nada empuja el ancho: lo que no cabe se desliza dentro de su propia caja */ body.con-lateral main, .contenido, .agenda-2, .agenda-2 > *, .tarjeta, .rejilla, .columnas { min-width: 0; max-width: 100%; } .contenido { padding-left: .6rem; padding-right: .6rem; } .rejilla, .columnas, .rejilla-2, .rejilla-3, .rejilla-ajustes { grid-template-columns: minmax(0, 1fr) !important; } .rejilla-semana { min-width: 640px; } /* la semana se desliza de lado dentro de su caja */ .panel-cita.cajon { width: 100vw; } #cajon-lateral.cajon-lateral { right: 2vw; width: 96vw; max-height: 86vh; } } /* Regla: los nombres y las fechas se leen completos (nunca con puntos suspensivos) */ .panel-nombre, .panel-ficha b, .cc-nombre b, .sol-titulo b, .cl-item b, .paciente-elegido b, h1, .tabla td { overflow-wrap: break-word; } /* ── Historia clínica: toda lista sugiere, ninguna encierra (20-sep) ────────────────────────── Las listas van por aparato, con buscador arriba y un recuadro al lado para escribir lo que no esté. Los medicamentos de cada padecimiento salen como botones al marcarlo. */ .hc-barra { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 0 .6rem; } .hc-barra .hc-buscar { flex: 0 1 240px; min-width: 150px; } .hc-barra .hc-otra-libre { flex: 1 1 240px; min-width: 180px; } .hc-grupos { display: block; } .hc-grupo + .hc-grupo { margin-top: .7rem; } .hc-grupo > h3 { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 700; margin: 0 0 .3rem; padding-bottom: .2rem; border-bottom: 1px solid var(--linea); } .hc-grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .15rem .9rem; } .hc-grupo > h3 { grid-column: 1 / -1; } .hc-grupo > .hc-op.on { grid-column: 1 / -1; } .hc-nada { display: none; color: var(--tinta-3); font-size: .88rem; padding: .8rem 0 .2rem; } .hc-nada:not([hidden]) { display: block; } .hc-num { max-width: 190px; } .hc-meds { display: none; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 .1rem; padding-left: 1.55rem; } .hc-op.on .hc-meds { display: flex; } .chip-med { font: inherit; font-size: .78rem; line-height: 1; padding: .34rem .6rem; border-radius: 999px; cursor: pointer; background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta-2); transition: all .12s var(--suave, ease); } .chip-med:hover { border-color: var(--sec); color: var(--sec); transform: translateY(-1px); } .chip-med.on { background: var(--sec); border-color: var(--sec); color: #fff; } .hc-renglon-2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } /* ── Las ventanas con marco NO entran moviéndose (20-sep, medido en el Safari del Dr.) ─────────────── Safari guarda aparte dónde está cada zona que se desliza. Si la ventana entra con una animación de «transform» (deslizarse desde la orilla, crecer), Safari se queda con el marco en su sitio VIEJO —fuera de la pantalla— y los gestos del trackpad sobre la ventana visible no le llegan a nadie: el registro mostró cero movimientos entregados. Por eso estas ventanas aparecen en su sitio definitivo y solo cambian de opacidad; nada de transform, ni abierta ni al abrirse. */ .cajon-expediente, #cajon-lateral.cajon-lateral { transform: none !important; transition: opacity .2s ease, box-shadow .3s !important; animation: none !important; } .cajon-expediente:not(.abierto) { display: none !important; } .cajon-expediente.abierto { display: flex !important; opacity: 1; animation: aparece-ventana .2s ease !important; } @keyframes aparece-ventana { from { opacity: 0; } to { opacity: 1; } } /* La misma regla para TODO lo que flota y se desliza por dentro (20-sep, a petición del Dr.: «hazlo en todas las ventanas similares»): nada entra con «transform». La ficha de la cita aparece en su sitio con un fundido y los menús y listas flotantes (que pueden llevar una lista larga dentro) solo cambian de opacidad. */ .panel-cita.cajon { transform: none !important; transition: opacity .2s ease !important; } .agenda-2:not(.con-panel) .panel-cita.cajon { display: none !important; } .agenda-2.con-panel .panel-cita.cajon { animation: aparece-ventana .2s ease; } @keyframes aparecer-menu { from { opacity: 0; } to { opacity: 1; } } /* Urgencias y visita hospitalaria: la nota lleva SOLO lo básico (20-sep, el Dr.: «no va a haber escalas, ni el monito para señalar, ni EVA; es nada más motivo, subjetivo, objetivo, estudios, diagnóstico y plan»). Signos vitales y Valoración se ocultan; lo demás ya no aparece por `secciones_activas`. */ .nota-flujo[data-breve] > details[data-s="signos"], .nota-flujo[data-breve] > details[data-s="valoracion"], .nota-flujo[data-breve] > details[data-s="pronostico"] { display: none; } /* ── Panel → Administrativo: recibos, informes y demás papeles de cada paciente (20-sep) ───────────── Cada renglón se lee «Recibo de Juan Pérez»; el folio, el monto y el pago van en columnas para cotejar la transferencia del hospital. Estado con símbolo: reloj ámbar = por cobrar, palomita verde = pagado. */ .campos.filtros-adm { grid-template-columns: minmax(0, 2.2fr) auto repeat(4, minmax(0, 1fr)); } .campos.filtros-adm .boton-adm .btn { margin-top: auto; justify-content: center; font-size: .95rem; } /* mismo alto que los campos */ @media (max-width: 1100px) { .campos.filtros-adm { grid-template-columns: repeat(4, minmax(0, 1fr)); } .campos.filtros-adm .buscar-adm { grid-column: span 3; } } @media (max-width: 560px) { .campos.filtros-adm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campos.filtros-adm .buscar-adm { grid-column: 1 / -1; } .campos.filtros-adm .boton-adm { grid-column: 1 / -1; order: 1; } .campos.filtros-adm .boton-adm > label { display: none; } } .cotejo-flotante > form { display: flex; flex-direction: column; gap: .5rem; width: 300px; } .cotejo-flotante > form label { display: flex; align-items: center; gap: .3rem; margin: 0; } .cotejo-flotante > form textarea { min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; } .cotejo-flotante > form .btn { align-self: flex-end; } .cotejo-resultado { margin-bottom: 1rem; overflow-wrap: anywhere; } .barra-pagados { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .7rem .9rem 1rem; border-bottom: 1px solid var(--linea); } .barra-pagados .check { margin: 0; font-size: .88rem; color: var(--tinta-2); } .barra-pagados .check input { width: 1.05rem; height: 1.05rem; } .barra-pagados .fecha-en-barra { position: relative; display: block; width: 9.5rem; } .barra-pagados .fecha-en-barra .fecha-mx { position: absolute; top: 100%; left: .1rem; margin-top: 1px; line-height: 1; pointer-events: none; } .barra-pagados .btn-pago { min-width: 11.5rem; justify-content: center; } .adm-lista { container-type: inline-size; } .adm-tabla th.adm-sel, .adm-tabla td.adm-sel { width: 2rem; padding-right: 0; } .adm-tabla td.adm-sel input { width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; } .adm-tabla td.adm-fecha, .adm-tabla td.adm-folio, .adm-tabla td.adm-monto { white-space: nowrap; } .adm-tabla .adm-titulo { display: inline-flex; align-items: flex-start; gap: .4rem; color: var(--tinta); overflow-wrap: anywhere; } .adm-tabla .adm-titulo .ico { width: 18px; height: 18px; margin-top: .12rem; color: var(--sec); } .adm-tabla .adm-titulo:hover { text-decoration: none; } .adm-tabla .adm-titulo:hover b { color: var(--sec); } .adm-tabla td.adm-archivo .peq { margin: .15rem 0 0 1.55rem; overflow-wrap: anywhere; } .adm-tabla td.adm-acc { text-align: right; } .adm-estado { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; font: inherit; font-size: .8rem; white-space: nowrap; } .adm-estado .ico { width: 17px; height: 17px; } .adm-estado.adm-pendiente { color: var(--pago); } .adm-estado.adm-pagado { color: var(--ok); background: var(--ok-suave); border: 0; padding: .15rem .55rem .15rem .35rem; cursor: pointer; } .adm-estado.adm-pagado:hover { background: color-mix(in srgb, var(--ok) 18%, #fff); } details.editar-flotante > form .adm-datos-pie { flex-direction: row; justify-content: space-between; align-items: center; } /* En una pantalla angosta (celular, ventana del expediente) cada renglón se vuelve una tarjetita: nada se sale. */ @container (max-width: 760px) { .adm-tabla thead { display: none; } .adm-tabla tbody tr { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .15rem; padding: .75rem .7rem; border-bottom: 1px solid var(--linea); } .adm-tabla tbody tr:last-child { border-bottom: 0; } .adm-tabla tr:hover td { background: none; } .adm-tabla td { display: block; padding: 0; border: 0; } .adm-tabla td.adm-sel { grid-column: 1; grid-row: 1 / span 4; } .adm-tabla td.adm-archivo { grid-column: 2; grid-row: 1; } .adm-tabla td.adm-monto { grid-column: 3; grid-row: 1; } .adm-tabla td.adm-fecha, .adm-tabla td.adm-donde, .adm-tabla td.adm-folio { grid-column: 2; font-size: .85rem; color: var(--tinta-2); } .adm-tabla td.adm-pago { grid-column: 3; grid-row: 2; justify-self: end; } .adm-tabla td.adm-acc { grid-column: 3; grid-row: 3; justify-self: end; } .adm-tabla td[data-et]::before { content: attr(data-et) " "; color: var(--tinta-3); } .adm-tabla td.adm-vacio { display: none; } } /* ── Pendientes: semáforo (triage) ───────────────────────────────────────────────────────────── Verde a tiempo, amarillo a la mitad de su plazo, naranja pasado el plazo, rojo urgente o al doble (pendientes.triage). Los colores no cambian con el tema: son una señal, como los acentos de acción. */ .pend-tabla, .pend-semaforo, .globo-rojo, .pend-punto { --t-rojo: #d2382b; --t-rojo-suave: #fbe6e3; --t-naranja: #e36f16; --t-naranja-suave: #fdebdb; --t-amarillo: #c99200; --t-amarillo-suave: #fbf1d2; --t-verde: #2c9455; --t-verde-suave: #e2f3e8; } .pend-tabla tr.pend-rojo, .pend-semaforo .pend-sem-rojo, .pend-punto.pend-rojo { --t: var(--t-rojo); --t-suave: var(--t-rojo-suave); } .pend-tabla tr.pend-naranja, .pend-semaforo .pend-sem-naranja, .pend-punto.pend-naranja { --t: var(--t-naranja); --t-suave: var(--t-naranja-suave); } .pend-tabla tr.pend-amarillo, .pend-semaforo .pend-sem-amarillo, .pend-punto.pend-amarillo { --t: var(--t-amarillo); --t-suave: var(--t-amarillo-suave); } .pend-tabla tr.pend-verde, .pend-semaforo .pend-sem-verde, .pend-punto.pend-verde { --t: var(--t-verde); --t-suave: var(--t-verde-suave); } .pend-tabla tr.pend-cerrado { --t: var(--linea); --t-suave: var(--fondo-2); opacity: .6; } .pend-tabla td:first-child { box-shadow: inset 4px 0 0 var(--t); } .pend-tabla .pend-col-dias { width: 68px; text-align: center; } .pend-dias-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 48px; padding: .32rem .35rem; border-radius: 10px; background: var(--t-suave); color: var(--t); line-height: 1; } .pend-rojo .pend-dias-chip { background: var(--t); color: #fff; } /* el rojo va relleno: se ve desde lejos */ .pend-cerrado .pend-dias-chip { color: var(--tinta-3); } .pend-dias-chip b { font-size: 1.15rem; font-weight: 800; } .pend-dias-chip small { font-size: .6rem; font-weight: 700; margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; } .pend-dias-chip b.pend-hoy { font-size: .8rem; } .pend-aviso { margin-top: .3rem; font-size: .8rem; font-weight: 700; color: var(--t); } .pend-tipo .ico { width: 12px; height: 12px; margin: 0 .25rem -1px 0; } .pend-tabla .pend-nec-urgente { background: var(--t-rojo); color: #fff; } .pend-tabla .pend-nec-alta { background: var(--t-naranja-suave); color: #a84f0c; } .pend-acc { justify-content: flex-end; flex-wrap: nowrap; gap: .3rem; } .pend-acc > form { flex-wrap: nowrap; } .pend-editar > summary .ico { width: 15px; height: 15px; } details.editar-flotante > form .pend-editar-pie { flex-direction: row; justify-content: space-between; align-items: center; } details.pend-editar > form { row-gap: .85rem; } /* la fecha en palabras cabe bajo su campo sin tocar el renglón de abajo */ /* el resumen del encabezado: un punto de color con su cuenta; tocarlo deja ver solo ese color */ .pend-semaforo { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 999px; background: var(--fondo-2); } .pend-semaforo a { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--tinta-2); text-decoration: none; } .pend-semaforo a i { width: 10px; height: 10px; border-radius: 50%; background: var(--t); } .pend-semaforo a:hover, .pend-semaforo a.activo { background: #fff; color: var(--t); box-shadow: 0 0 0 1.5px var(--t); } .lateral-nav .globo.globo-rojo, .cl-iconos .globo.globo-rojo { background: var(--t-rojo); color: #fff; } /* en la ficha del paciente: punto de color y los días */ .pend-punto { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--t); } .pend-punto::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--t); } /* agregar: seis campos en un renglón; el botón baja con margin-top (si el renglón se alineara abajo, «llenarRenglones» tomaría el botón por otro renglón y lo mandaría abajo). En angosto, dos columnas y luego una. */ .pendiente-nuevo { container-type: inline-size; } .pend-nuevo-campos { grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(220px, 1.4fr) minmax(130px, .8fr) minmax(150px, 1fr) auto; } .pend-nuevo-campos .pend-agregar .btn { margin-top: auto; white-space: nowrap; justify-content: center; } @container (max-width: 980px) { .pend-nuevo-campos { grid-template-columns: 1fr 1fr; } .pend-nuevo-campos > .campo:first-child { grid-column: 1 / -1; } } @container (max-width: 460px) { .pend-nuevo-campos { grid-template-columns: 1fr; } } /* la tabla en angosto (celular, ventana flotante): cada pendiente es una tarjeta con sus días a la izquierda */ .pend-caja { container-type: inline-size; } @container (max-width: 760px) { .pend-tabla thead { display: none; } .pend-tabla, .pend-tabla tbody { display: block; } .pend-tabla tr { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: .3rem .7rem; padding: .75rem .7rem .75rem .8rem; border-bottom: 1px solid var(--linea); box-shadow: inset 4px 0 0 var(--t); } .pend-tabla tr:last-child { border-bottom: 0; } .pend-tabla tr:hover td { background: none; } .pend-tabla td { display: block; padding: 0; border: 0; } .pend-tabla td:first-child { box-shadow: none; } .pend-tabla td.pend-col-dias { grid-column: 1; grid-row: 1 / span 6; width: auto; } .pend-tabla td:not(.pend-col-dias) { grid-column: 2; } .pend-tabla td.pend-vacio { display: none; } .pend-tabla td[data-et]::before { content: attr(data-et) ": "; color: var(--tinta-3); font-weight: 400; } .pend-tabla td.pend-col-lim, .pend-tabla td.pend-col-asig, .pend-tabla td.pend-col-pac { font-size: .86rem; } .pend-tabla td.pend-col-acc { text-align: left !important; } .pend-tabla .pend-acc { justify-content: flex-start; } .pend-tabla .pend-acc > form { justify-content: flex-start !important; } } /* en angosto, el lápiz abre su recuadro abajo, a lo ancho de la pantalla, para que nunca se salga por un lado */ @container (max-width: 760px) { details.editar-flotante.pend-editar > form { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto; max-height: calc(100vh - 2rem); overflow-y: auto; } } @media (max-width: 760px) { .pend-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; } .pend-filtros .btn { flex: 0 0 auto; } } /* ── Depurar expediente (Configuración → Datos y seguridad) ─────────────────── */ .tarjeta h2 .contador { font-size: .75rem; font-weight: 600; background: var(--fondo-2); color: var(--tinta-2); border-radius: 999px; padding: .05rem .5rem; margin-left: .35rem; vertical-align: 2px; } .dep-lista { margin: 0 0 .8rem; } .dep-lista > summary { cursor: pointer; font-size: .88rem; color: var(--sec); } .dep-lista .desliza { max-height: 22rem; overflow: auto; margin-top: .5rem; border: 1px solid var(--linea); border-radius: var(--radio); } .dep-kpis { margin-bottom: .9rem; } .dep-kpis .kpi { box-shadow: none; } .dep-avance { display: grid; gap: .4rem; margin: .2rem 0 .9rem; font-size: .9rem; } .dep-avance .pista { height: 10px; background: var(--fondo-2); border-radius: 5px; overflow: hidden; } .dep-avance .relleno { height: 100%; background: var(--sec); border-radius: 5px; transition: width .6s ease; } .dep-tabla { margin-top: .9rem; } /* ── Spine: la etiqueta del médico no se corta con «…»: la achica app.js y, si hace falta, va a dos renglones ── */ .lateral-usuario b { text-overflow: clip; overflow-wrap: anywhere; line-height: 1.1; } /* ── Personalizar: cómo te ve la barra ── */ .barra-muestra { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; width: 78px; padding: .5rem .25rem; border-radius: 10px; background: var(--lateral-fondo); color: #fff; } .barra-muestra .ico { color: var(--lateral-tinta); width: 20px; height: 20px; } .barra-muestra b { display: block; font-weight: 500; font-size: .6rem; max-width: 68px; text-align: center; line-height: 1.1; overflow-wrap: anywhere; } .personalizar-barra .barra-opciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .7rem; } /* ── Personalizar: la agenda de muestra y sus opciones ── */ .ag-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 250px; padding: 6px; border-radius: 10px; background: #dfe3e8; margin-bottom: 1rem; } .ag-col { position: relative; border-radius: 8px; background: #fff; overflow: hidden; } .ag-col.sin-horario { background: #eef0f2; } .ag-vista .bloque { cursor: default; } .ag-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; } .ag-opciones fieldset { border: 1px solid var(--linea); border-radius: 10px; padding: .5rem .8rem .8rem; margin: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; } .ag-opciones legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; color: var(--sec); } .ag-opciones .campo { margin: 0; } .seg-radios label { margin: 0; cursor: pointer; position: relative; display: inline-flex; } .seg-radios input { position: absolute; opacity: 0; width: 0; height: 0; } .seg-radios span { display: inline-block; padding: .28rem .7rem; font-size: .8rem; color: var(--tinta-2); line-height: 1.3; } .seg-radios input:checked + span { background: var(--tinta); color: #fff; font-weight: 600; } .seg-radios input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: -2px; } .seg-radios label + label span { border-left: 1px solid var(--linea); } .personalizar-agenda .solo-tipo, .personalizar-agenda .solo-fijo { display: none; } .personalizar-agenda.por-tipo .solo-tipo { display: flex; flex-direction: column; gap: .6rem; } .personalizar-agenda.horario-fijo .solo-fijo { display: block; } /* ── Agenda por persona (Personalizar → Agenda): variables --ag-* y atributos data-ag-* en (o en la muestra) ── */ /* Cirugías: su propio color (naranja intenso de fábrica) y, de entrada, relleno sólido: «que no parezca una consulta». Con !important porque el bloque trae en línea el color de su lugar. */ .bloque.cirugia, .mes-cita.cirugia { --lc: var(--ag-cirugia, var(--c-cirugias)) !important; } .bloque.cirugia { flex-direction: column; align-items: stretch; gap: 1px; } .bloque.cirugia .det { white-space: normal; overflow-wrap: break-word; text-overflow: clip; font-size: .74rem; } .bloque.cirugia .quien, .bloque.amplio.cirugia .quien { padding-right: 18px; } .bloque.amplio.cirugia .quien .tipo-pac { top: 6px; transform: none; } .tipo-pac.c { background: var(--ag-cirugia, var(--c-cirugias)); color: #fff; } /* sólido: el relleno es el color y la letra la que se lea encima (--ag-cirugia-texto la calcula personalizar.texto_sobre: oscura sobre durazno, blanca sobre vino); el borde izquierdo, el mismo color más oscuro, como en COREGDL */ [data-ag-cx="solido"] .bloque.cirugia { background: var(--lc); color: var(--ag-cirugia-texto, #fff); border-left-color: color-mix(in srgb, var(--lc) 68%, #000); box-shadow: none; } [data-ag-cx="solido"] .bloque.cirugia .quien, [data-ag-cx="solido"] .bloque.cirugia .det { color: inherit; } [data-ag-cx="solido"] .bloque.cirugia.atendida { background: color-mix(in srgb, var(--lc) 58%, #fff); color: var(--tinta); } [data-ag-cx="solido"] .bloque.cirugia .tipo-pac.c { background: color-mix(in srgb, var(--lc) 62%, #000); color: #fff; } [data-ag-cx="solido"] .mes-cita.cirugia { background: var(--lc); color: var(--ag-cirugia-texto, #fff); border-left-color: color-mix(in srgb, var(--lc) 68%, #000); } /* Citas por tipo (en vez del color del consultorio) */ [data-ag-citas="tipo"] .bloque.primera_vez:not(.cirugia), [data-ag-citas="tipo"] .mes-cita.primera_vez { --lc: var(--ag-pv) !important; } [data-ag-citas="tipo"] .bloque.subsecuente:not(.cirugia), [data-ag-citas="tipo"] .mes-cita.subsecuente { --lc: var(--ag-sub) !important; } [data-ag-citas="tipo"] .bloque.procedimiento:not(.cirugia), [data-ag-citas="tipo"] .mes-cita.procedimiento { --lc: var(--ag-proc) !important; } /* Citas sólidas */ [data-ag-citas-relleno="solido"] .bloque:not(.cirugia):not(.bloqueo) { background: var(--lc, var(--c-agenda)); color: #fff; box-shadow: none; border-left-color: color-mix(in srgb, var(--lc, var(--c-agenda)) 62%, #000); } [data-ag-citas-relleno="solido"] .bloque:not(.cirugia):not(.bloqueo) .quien, [data-ag-citas-relleno="solido"] .bloque:not(.cirugia):not(.bloqueo) .det, [data-ag-citas-relleno="solido"] .bloque:not(.cirugia):not(.bloqueo) .quien .ok { color: #fff; } [data-ag-citas-relleno="solido"] .bloque.atendida:not(.cirugia):not(.bloqueo) { background: color-mix(in srgb, var(--lc, var(--c-agenda)) 58%, #fff); } [data-ag-citas-relleno="solido"] .bloque:not(.cirugia) .tipo-pac.n { background: #fff; color: var(--lc, var(--c-agenda)); } [data-ag-citas-relleno="solido"] .bloque:not(.cirugia) .tipo-pac.s { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; } [data-ag-citas-relleno="solido"] .mes-cita:not(.cirugia):not(.atendida) { background: var(--lc, var(--tinta-3)); color: #fff; } /* Franja de horario con un solo color, bloqueos y letra */ [data-ag-horario="fijo"] .franja { --fc: var(--ag-horario) !important; } .bloque.bloqueo, .mes-bloqueo { background: color-mix(in srgb, var(--ag-bloqueo, #B4BAC2) 38%, #fff); border-left-color: var(--ag-bloqueo, #B4BAC2); } [data-ag-letra="grande"] .bloque { font-size: .9rem; } [data-ag-letra="grande"] .bloque.amplio { font-size: 1rem; } [data-ag-letra="grande"] .bloque.cirugia .det { font-size: .84rem; } [data-ag-letra="grande"] .mes-cita { font-size: .82rem; } /* ── Stat grande: la ventana de la cirugía (equipo, estudios, avisos) necesita más ancho que un formulario ── */ #cajon-lateral.cajon-lateral.grande { width: min(1180px, 96vw); } .tabla-ve th.c, .tabla-ve td.c { text-align: center; width: 110px; } /* ── Invitar con un enlace (Usuarios y accesos) ── */ details.tarjeta > summary.h2-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600; padding-left: 1rem; background: linear-gradient(var(--sec), var(--sec)) no-repeat 0 .38em / 8px 8px; } details.tarjeta > summary.h2-summary::-webkit-details-marker { display: none; } details.tarjeta[open] > summary.h2-summary { margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linea); } .enlace-nuevo { margin-top: .8rem; } .enlace-nuevo .acciones { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .enlace-nuevo input { flex: 1 1 320px; font-size: .82rem; } /* ── Facturación (Spine) ── */ .factura-enlace-grande { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; } .factura-enlace-grande img { border-radius: 10px; border: 1px solid var(--linea); background: #fff; padding: 6px; flex: none; } .factura-enlace-grande > div { flex: 1 1 280px; min-width: 0; } .factura-enlace-grande input { width: 100%; font-size: .82rem; } .kpis a.kpi { text-decoration: none; color: inherit; } .kpis a.kpi:hover { box-shadow: var(--sombra-2, var(--sombra)); } .kpi.kpi-activo { box-shadow: 0 0 0 2px var(--sec); } .filtros-linea { display: flex; gap: .4rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; } .filtros-linea input[type=search] { flex: 1 1 260px; } .filtros-linea select { flex: 0 1 auto; width: auto; min-width: 0; } /* el libro: las de consulta se hacen aquí; las «por fuera» (cirugía, urgencias, seguro) solo se ven, en un tono más suave */ .tabla td.acciones { white-space: nowrap; flex-wrap: nowrap; justify-content: flex-end; } /* la celda de acciones es flex (.acciones): sus botones van en un renglón, a la derecha, y la columna toma el ancho que necesitan */ .tabla.libro tr.por-fuera td { color: var(--tinta-2); } .tabla.libro tr.por-fuera td .mono b { font-weight: 500; } .tabla tr.cancelada td { color: var(--tinta-3); } .tabla tr.cancelada td .mono, .tabla tr.cancelada td.num { text-decoration: line-through; } .etiqueta.clase-consulta { background: color-mix(in srgb, var(--c-facturacion) 16%, #fff); color: var(--c-facturacion); } .etiqueta.clase-procedimiento { background: color-mix(in srgb, #7A4FC9 16%, #fff); color: #6A3FB9; } .etiqueta.clase-urgencias { background: color-mix(in srgb, #D64545 16%, #fff); color: #B83232; } .etiqueta.clase-cirugia { background: color-mix(in srgb, #E8590C 16%, #fff); color: #C4480A; } .etiqueta.clase-seguro { background: color-mix(in srgb, #2F6FDE 16%, #fff); color: #2558B8; } .etiqueta.clase-otro { background: var(--fondo-2); color: var(--tinta-2); } .paginas { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: .8rem; } .tinta-error { color: var(--error); } /* lista de cirugías para la recertificación (Cirugías → Lista) */ .lista-cx td, .lista-cx th { font-size: .86rem; } .lista-cx tr.cancelada td { color: var(--tinta-3); text-decoration: line-through; } .hoja-lista { max-width: 820px; margin: 0 auto; background: #fff; padding: 1.5rem 2rem; } .hoja-lista .hoja-enc { color: var(--tinta-2); font-size: .9rem; margin-bottom: 1rem; } .hoja-lista h1 { font-size: 1.3rem; margin: 0 0 .2rem; } .hoja-lista .hoja-firma { margin-top: 3rem; width: 260px; text-align: center; font-size: .9rem; } .hoja-lista .hoja-firma .raya { border-top: 1px solid #333; margin-bottom: .3rem; } body.imprimir-lista .lateral, body.imprimir-lista #cajon-lateral, body.imprimir-lista #chat-aviso { display: none !important; } body.imprimir-lista .contenido { margin: 0; padding: 1rem; } @media print { .no-imprimir, .lateral, .migas, .encabezado .acciones { display: none !important; } body, .contenido { margin: 0 !important; padding: 0 !important; background: #fff !important; } .hoja-lista { max-width: none; padding: 0; box-shadow: none; } .lista-cx { width: 100%; border-collapse: collapse; } .lista-cx th, .lista-cx td { border-bottom: 1px solid #ccc; padding: 3px 6px; font-size: 11pt; } } /* Panel: periodo como en COREGDL, datos generales y la gráfica de cada mes */ .segmentado.periodos a { text-decoration: none; } .segmentado.periodos a.activo, .segmentado.series button.activo { background: var(--sec); color: #fff; } .kpis.generales > .kpi { flex-basis: 200px; } .kpis.generales .kpi .valor { font-size: 2rem; } .kpis.generales .kpi .titulo { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; } .tendencia h2 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; } .tendencia .segmentado.series button { font-size: .78rem; } .tendencia-svg { width: 100%; height: auto; display: block; } .tendencia-svg .guia { stroke: var(--linea); stroke-width: 1; } .tendencia-svg .eje, .tendencia-svg .mes { fill: var(--tinta-3); font-size: 13px; } .tendencia-svg .valor { fill: var(--sec); font-size: 14px; font-weight: 600; } .tendencia-svg .area { fill: color-mix(in srgb, var(--sec) 12%, #fff); } .tendencia-svg .linea { fill: none; stroke: var(--sec); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; } .tendencia-svg .punto { fill: var(--sec); stroke: #fff; stroke-width: 2; } /* logotipos de las otras apps MAIA en cada enlace hacia ellas (22-sep, el Dr.: «ponle el logotipo de esa app») */ .logo-app { display: inline-block; vertical-align: middle; flex: none; } .con-logo { display: inline-flex; align-items: center; gap: .35rem; } h1.con-logo { display: flex; gap: .5rem; } /* un botón con logotipo mide lo mismo que los de al lado: el logo cabe en la línea de texto (22-sep, el Dr.: «se desalinearon lo de Gestión, Actualizar y Facturar») */ .btn-app { display: inline-flex; align-items: center; gap: .4rem; } .btn-app .logo-app { height: 1.15em; width: 1.15em; margin: -.3em 0; } .encabezado .acciones form.inline { display: contents; } .sol-op .logo-app { transition: transform .2s var(--resorte); } .sol-op:hover .logo-app { transform: scale(1.08) rotate(-3deg); } .sol-op small { display: block; font-weight: 400; font-size: .74rem; line-height: 1.1; } .app-cabecera { margin: 0 0 .6rem; font-size: 1rem; } /* permisos de la asistente (Equipo y accesos → Permisos) */ .permisos-atajos { flex-wrap: wrap; } .permisos-atajos > button.activo { background: var(--sec); color: #fff; } .permisos-lista { margin-top: .8rem; } .permiso-op { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem .2rem; } .permiso-op input { margin-top: .25rem; flex: none; } .fiscal-guardado { border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .8rem .8rem; margin: .8rem 0 0; } .fiscal-guardado legend { font-weight: 600; padding: 0 .3rem; } .fiscal-op { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem .2rem; } .fiscal-op input { margin-top: .25rem; } .fiscal-guardado .campos { margin-top: .6rem; } /* ═══ Celular (22-sep, el Dr.: «que ya empieces a funcionar para que sea funcional en el móvil, ya que en el móvil vamos a utilizar mucho la grabación y fotografías; sobre todo revisar la agenda») ═══ */ @media (max-width: 760px) { /* Spine abajo, como la barra de pestañas de un iPhone: solo íconos, todos a la vista, sin quitarle al contenido un quinto del ancho. (No cambia la preferencia guardada: en la computadora sigue donde cada quien la puso.) */ body[data-spine].con-lateral .lateral { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; height: var(--spine-size, 60px); flex-direction: row; align-items: center; padding: 0 .2rem; padding-bottom: env(safe-area-inset-bottom); overflow: visible; } body[data-spine].con-lateral .lateral .marca { flex-direction: row; padding: .2rem .3rem; margin: 0 .1rem 0 0; } body[data-spine].con-lateral .lateral .marca img { width: 30px; height: 30px; } body[data-spine].con-lateral .lateral .marca span, body[data-spine].con-lateral .lateral-nav a span:not(.globo), body[data-spine].con-lateral .lateral-usuario span, body[data-spine].con-lateral .btn-lateral span { display: none; } body[data-spine].con-lateral .lateral-nav { flex-direction: row; flex: 1 1 auto; justify-content: space-around; gap: 0; margin: 0; padding: 0; min-width: 0; } body[data-spine].con-lateral .lateral-nav a { flex-direction: row; padding: .45rem .3rem; min-width: 0; } body[data-spine].con-lateral .lateral-nav a.activo::before { top: auto; bottom: 0; left: 18%; right: 18%; height: 3px; width: auto; border-radius: 3px 3px 0 0; } body[data-spine].con-lateral .lateral-pie { flex-direction: row; margin: 0 0 0 auto; padding: 0; gap: 0; align-items: center; border: 0; } body[data-spine].con-lateral .lateral-usuario, body[data-spine].con-lateral .btn-lateral { width: auto; padding: .4rem .35rem; } body[data-spine].con-lateral .lateral .ico { width: 21px; height: 21px; } body[data-spine].con-lateral .contenido { margin: 0; padding-bottom: calc(var(--spine-size, 60px) + 1rem + env(safe-area-inset-bottom)); } body[data-spine] { --inferior: var(--spine-size); --superior: 0px; --lateral: 0px; } /* lo que flota abajo (chat, consulta en curso) sube sobre la barra */ body[data-spine].con-lateral .config-menu { left: 0; top: 0; } .lateral .globo { top: 2px; right: 2px; } /* Consulta: Grabar a la mano y la barra de abajo sin encimar */ body.consulta .contenido { padding: .6rem .6rem 8rem; } .cc-paciente { padding: .5rem .7rem 0; gap: .4rem; } .cc-nombre > a { font-size: 1.05rem; } .cc-fila { flex-wrap: wrap; } .cc-derecha { width: 100%; flex-wrap: wrap; gap: .35rem; justify-content: flex-start; } .cc-grabacion { margin-left: 0; width: 100%; gap: .35rem; } .cc-grabacion .btn { flex: 1 1 auto; justify-content: center; } .cc-grabacion .btn-grabar { flex: 2 1 auto; min-height: 42px; font-size: 1rem; } .cc-derecha .cc-salir { margin-left: auto; } .cc-derecha .fecha-campo { flex: 0 1 190px; } .cc-menu { padding: .3rem .5rem 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .cc-menu::-webkit-scrollbar { display: none; } .cc-menu > button { flex: 0 0 auto; padding: .4rem .55rem; font-size: .84rem; } .cc-pestanas { flex-wrap: nowrap; } :root { --cab-consulta: 150px; } .consulta-pie { left: 0; right: 0; bottom: 0; padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: .4rem; padding: .5rem .6rem; } /* la consulta no lleva Spine */ .consulta-pie .cuenta-24 { display: none; } /* el plazo de 24 h sigue en la pantalla grande; aquí no cabe y no es acción */ .consulta-pie .btn { flex: 1 1 30%; justify-content: center; padding: .55rem .4rem; } .consulta-pie .btn-accion { flex: 1 1 100%; order: 9; min-height: 44px; } .consulta-pie .btn-peligro { flex: 0 1 auto; } details.seccion-nota > summary h2, details.seccion-nota > summary { font-size: 1rem; } .nota-flujo textarea { font-size: 16px; } /* 16 px: iOS no hace zoom al tocar el campo */ input, select, textarea { font-size: 16px; } /* Agenda: el día ocupa la pantalla; la semana se desliza de lado */ .agenda-cab .acciones .btn .et { display: none; } .rejilla-wrap { height: calc(100vh - 260px - var(--spine-size, 60px)); min-height: 360px; } .bloque .quien { font-size: .8rem; } .bloque.amplio .quien { font-size: .92rem; } .bloque.cirugia .det { font-size: .72rem; } .panel-cita.cajon { bottom: 0; height: auto; padding-bottom: calc(var(--spine-size, 60px) + 1rem); overflow: auto; } /* Fotos y grabación: botones grandes, de dedo */ #btn-foto-cab { min-height: 42px; } .btn-grabar.grabando { box-shadow: 0 0 0 4px color-mix(in srgb, var(--grabar) 30%, transparent); } } /* ═══ Pantalla del paciente, presentador y biblioteca educativa (22 sep 2026, el Dr.: «una segunda pantalla orientada al paciente que solo muestre lo que yo decida proyectar») ═══ */ /* la ventana del segundo monitor: fondo neutro, nada más que lo proyectado */ body.pantalla-paciente { margin: 0; background: #14161A; color: #FFFEFB; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; height: 100vh; } .pp-neutra { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; } .pp-consultorio { font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; color: #C9CDD2; margin-top: 1rem; } .pp-leyenda { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: #6E747C; } .pp-escena { position: fixed; inset: 0; display: flex; flex-direction: column; } .pp-lienzo { position: relative; flex: 1 1 auto; overflow: hidden; } .pp-lienzo .pp-imagen, .pp-lienzo .pp-trazos { position: absolute; top: 0; left: 0; } .pp-lienzo .pp-imagen { max-width: none; user-select: none; } .pp-lienzo .pp-trazos { pointer-events: none; } .pp-pdf { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; } .pp-puntero { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(232, 89, 12, .55); border: 3px solid #E8590C; box-shadow: 0 0 18px 6px rgba(232, 89, 12, .45); pointer-events: none; transition: left .05s linear, top .05s linear; } .pp-pie { padding: .6rem 1.2rem; font-size: 1.1rem; color: #C9CDD2; text-align: center; } .pp-mapa { position: fixed; inset: 0; background: #eff2f4; } .pp-mapa #pain-map-3d { max-width: none; height: 100vh; border: 0; border-radius: 0; } .pp-mapa #pain-map-3d .pm-workspace { display: block; height: 100vh; } .pp-mapa #pain-map-3d .pm-viewport { height: 100vh; } .pp-mapa #pain-map-3d .pm-stage { height: 100vh; max-height: none; min-height: 0; aspect-ratio: auto; } .pp-mapa #pain-map-3d.espejo .pm-toolbar, .pp-mapa #pain-map-3d.espejo .pm-sidebar, .pp-mapa #pain-map-3d.espejo .pm-footer { display: none !important; } .pp-mapa .mapa-corporal.espejo { display: flex; align-items: center; justify-content: center; height: 100vh; } .pp-mapa .mapa-corporal.espejo svg { height: 96vh; width: auto; max-width: 96vw; } .pp-completa { position: fixed; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #C9CDD2; cursor: pointer; opacity: 0; transition: opacity .3s; } body.pantalla-paciente:hover .pp-completa { opacity: 1; } body.pantalla-paciente.completa .pp-completa { display: none; } .pp-completa .ico { width: 20px; height: 20px; } /* el presentador (médico): ventana flotante abajo a la derecha, en vidrio, que no tapa la consulta */ .presentador { position: fixed; right: 16px; bottom: calc(var(--inferior, 0px) + 16px); width: min(560px, calc(100vw - 32px)); z-index: 60; background: var(--vidrio-fuerte, rgba(255, 255, 255, .92)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(16, 36, 64, .14); border-radius: 14px; box-shadow: 0 16px 40px rgba(16, 36, 64, .22); display: flex; flex-direction: column; overflow: hidden; } .presentador.plegado .pr-cuerpo, .presentador.plegado .pr-herramientas { display: none; } .presentador .pr-cabeza { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-bottom: 1px solid var(--linea); font-size: .88rem; } .presentador .pr-cabeza b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .presentador .pr-cabeza .pr-pie { color: var(--tinta-3); font-size: .8rem; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .presentador .pr-acciones { display: flex; gap: .3rem; flex: none; } .presentador .pr-punto { width: 10px; height: 10px; border-radius: 50%; background: #B4BAC2; flex: none; box-shadow: 0 0 0 3px rgba(180, 186, 194, .25); } .presentador .pr-punto.on { background: #2B7A5B; box-shadow: 0 0 0 3px rgba(43, 122, 91, .25); } .presentador .pr-cuerpo { padding: .5rem .7rem 0; } .presentador .pr-lienzo { position: relative; height: 300px; background: #14161A; border-radius: 8px; overflow: hidden; touch-action: none; cursor: crosshair; } .presentador .pr-lienzo[data-herramienta="senalar"] { cursor: default; } .presentador .pr-lienzo img, .presentador .pr-lienzo canvas { position: absolute; top: 0; left: 0; } .presentador .pr-lienzo img { max-width: none; user-select: none; } .presentador .pr-lienzo canvas { pointer-events: none; } .presentador .pr-mapa-aviso { margin: .3rem 0 .5rem; color: var(--tinta-2); } .presentador .pr-tira { display: flex; gap: .35rem; overflow-x: auto; padding: .5rem 0 .2rem; } .presentador .pr-tira button { flex: none; width: 64px; border: 2px solid transparent; border-radius: 6px; padding: 0; background: #fff; position: relative; cursor: pointer; } .presentador .pr-tira button img { width: 100%; height: 44px; object-fit: cover; border-radius: 4px; display: block; } .presentador .pr-tira button span { position: absolute; left: 3px; bottom: 3px; font-size: .68rem; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 3px; padding: 0 4px; } .presentador .pr-tira button.activa { border-color: var(--sec); } .presentador .pr-nota { margin: .2rem 0 .4rem; color: var(--tinta-2); min-height: 0; } .presentador .pr-nota:empty { display: none; } .presentador .pr-herramientas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem .7rem .6rem; border-top: 1px solid var(--linea); } .presentador .pr-herramientas .segmentado > button { font-size: .76rem; padding: .25rem .5rem; } .presentador .pr-herramientas .segmentado > button.activo { background: var(--sec); color: #fff; } .presentador .pr-colores { display: inline-flex; gap: .3rem; } .presentador .pr-colores button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linea); background: var(--c); cursor: pointer; padding: 0; } .presentador .pr-colores button.activo { box-shadow: 0 0 0 2px var(--sec); } .presentador .pr-nav, .presentador .pr-zoom, .presentador .pr-fin { display: inline-flex; gap: .3rem; } .presentador .pr-fin { margin-left: auto; } .btn-mostrar .ico { width: 16px; height: 16px; } /* en la consulta el pie (Guardar · Terminar y firmar) es fijo: el presentador va encima de él, nunca lo tapa */ body.consulta .presentador { bottom: calc(var(--pie-consulta, 62px) + 16px); } @media (max-width: 760px) { .presentador { right: 8px; left: 8px; width: auto; } .presentador .pr-lienzo { height: 220px; } } /* biblioteca educativa */ .bib-carpetas .bib-carpeta { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .35rem .5rem .35rem calc(.5rem + var(--nivel, 0) * .9rem); border-radius: 6px; color: var(--tinta); font-size: .9rem; } .bib-carpetas .bib-carpeta:hover { background: var(--fondo-2); text-decoration: none; } .bib-carpetas .bib-carpeta.activa { background: color-mix(in srgb, var(--sec) 12%, #fff); color: var(--sec); font-weight: 600; } .bib-pres { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem .5rem; border-radius: 6px; } .bib-pres a { color: var(--tinta); font-size: .88rem; } .bib-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; } .bib-rejilla.chica { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; max-height: 60vh; overflow: auto; padding-right: .2rem; } .bib-item { position: relative; border: 1px solid var(--linea); border-radius: 10px; background: #fff; overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; font: inherit; color: var(--tinta); cursor: pointer; } .bib-item:hover { border-color: color-mix(in srgb, var(--sec) 40%, #fff); box-shadow: var(--sombra-2, var(--sombra)); } .bib-item img { width: 100%; height: 130px; object-fit: cover; background: #f3f4f6; display: block; } .bib-rejilla.chica .bib-item img { height: 84px; } .bib-item small { display: block; padding: .3rem .45rem; font-size: .74rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bib-datos { padding: .45rem .6rem 0; font-size: .86rem; display: flex; flex-direction: column; gap: .1rem; } .bib-datos b { overflow-wrap: break-word; } .bib-acciones { display: flex; gap: .3rem; align-items: center; padding: .4rem .6rem .55rem; } .bib-editar { position: relative; } .bib-editar > summary { list-style: none; } .bib-editar > summary::-webkit-details-marker { display: none; } .bib-editar .menu-flotante { position: absolute; left: 0; bottom: calc(100% + 6px); width: 280px; z-index: 5; display: flex; flex-direction: column; gap: .4rem; } .pres-armar { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sep); margin-top: var(--sep); align-items: start; } @media (max-width: 900px) { .pres-armar { grid-template-columns: 1fr; } } .pres-armar h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; } .pres-buscar { width: auto; flex: 1 1 120px; font-size: .84rem; padding: .3rem .5rem; } .pres-diapositivas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; counter-reset: dia; } .pres-dia { display: grid; grid-template-columns: 84px 1fr auto; gap: .5rem; align-items: center; border: 1px solid var(--linea); border-radius: 8px; padding: .4rem; background: #fff; counter-increment: dia; position: relative; } .pres-dia::before { content: counter(dia); position: absolute; left: 6px; top: 6px; font-size: .68rem; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 3px; padding: 0 4px; } .pres-dia img { width: 84px; height: 56px; object-fit: cover; border-radius: 4px; background: #f3f4f6; } .pres-campos { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .pres-campos input { font-size: .84rem; padding: .3rem .45rem; } .pres-mover { display: flex; flex-direction: column; gap: .1rem; } .pp-eva { width: 100vw; height: 100vh; display: block; background: #14161A; } .pp-eva-titulo { fill: #FFFEFB; font-size: 40px; font-weight: 600; } .pp-eva-sub { fill: #C9CDD2; font-size: 22px; } .pp-eva-num { fill: #17181A; font-size: 22px; font-weight: 600; } .pp-eva-num.sel { font-size: 34px; } .pp-eva-et { fill: #C9CDD2; font-size: 20px; } .pp-eva-et.sel { fill: #FFFEFB; font-weight: 600; } .pp-eva-valor { fill: #FFFEFB; font-size: 52px; font-weight: 700; } /* lugares: candidatos del mapa al buscar la dirección por el nombre */ .lugar-candidatos { margin-top: .4rem; display: flex; flex-direction: column; gap: .3rem; } .lugar-candidatos .sugerencia { text-align: left; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: .45rem .7rem; cursor: pointer; font: inherit; color: var(--tinta); } .lugar-candidatos .sugerencia:hover { border-color: var(--sec); background: color-mix(in srgb, var(--sec) 6%, #fff); } .lugar-candidatos .sugerencia small { color: var(--tinta-3); } /* la ventana de la cirugía: hospital con dirección y teléfonos; estudios con quién los ve */ .cx-hospital .cx-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1rem; } .cx-hospital .cx-datos div { display: flex; flex-direction: column; gap: .1rem; } .cx-hospital .cx-datos span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); } .cx-estudios .cx-subir, .cx-estudios .cx-liga { margin-top: var(--sep); padding-top: var(--sep); border-top: 1px solid var(--linea); } .cx-estudios .cx-ligas { margin: .5rem 0 0; } .cx-estudios .cx-ligas li { display: flex; align-items: center; gap: .4rem; } /* Celular: ninguna tabla saca la página de la ventana (se desliza de lado dentro de su lugar) y los segmentados largos se parten (22-sep, revisión de diseño: catálogos, usuarios, formatos, facturación y el libro se salían a 375 px). */ @media (max-width: 760px) { .tabla { display: block; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; } .segmentado { flex-wrap: wrap; } } /* La cabecera del paciente en celular: una etiqueta larga (semanas de la cirugía) se parte, no ensancha la página; el documento emitido usa menos relleno (22-sep, revisión de diseño: /pacientes/ y /documentos/ se salían a 375 px). */ .ficha-cabecera .etiqueta { white-space: normal; text-align: left; } @media (max-width: 760px) { .documento-texto { padding: 1rem; } } /* Un botón dentro de un form en línea nunca lleva margen arriba (era la causa de los 5 px de desalineación en Respaldar, Actualizar, Adendum, Retirar…) */ .acciones form.inline > .btn, form.inline > .btn:last-child { margin-top: 0; } /* Agenda: una palabra que no cabe se parte con guion en vez de a lo bruto («Procedimient-o»); el bloque de cirugía, que es alto, enseña el nombre completo sin «…» (22-sep, revisión de diseño). */ .bloque .quien, .bloque .det, .mes-cita { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .bloque.cirugia .quien { -webkit-line-clamp: unset; display: block; overflow: visible; }