/* Estilos propios de la aplicación. Lo que traía el template de Blazor se eliminó: fijaba .btn-primary en azul, la fuente en Helvetica y la sombra de foco en azul cielo. Como este archivo carga DESPUÉS de medisuite-tokens.css, ganaba, y el sistema de diseño no se veía. Regla para este archivo: nada de hexadecimales. Todo sale de las variables de css/medisuite-tokens.css. Si un color no existe ahí, se agrega ahí, no aquí. */ html, body { font-family: var(--fuente-ui); background: var(--fondo); color: var(--texto); } h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: -.01em; color: var(--texto); } h1:focus { outline: none; } /* Validación de Blazor. Las clases .valid/.invalid las pone EditForm sobre el campo; las de Bootstrap (.is-invalid) no se aplican solas, así que se enganchan a las nuestras para que el aspecto sea el mismo por las dos vías. */ .invalid { border: 2px solid var(--error) !important; background-color: var(--error-fondo) !important; } .validation-message { color: var(--error-tinta); font-size: 13.5px; font-weight: 600; } .validation-message::before { content: "✕ "; font-family: var(--fuente-cifra); font-weight: 700; } /* Aviso de error de Blazor. El amarillo del template no pertenece a la paleta. VA AQUÍ Y NO EN UN .razor.css: lo renderiza CADA plantilla (MainLayout y LoginLayout, y las que vengan). Estuvo en MainLayout.razor.css, que tiene ámbito, y por eso en el login aparecía sin estilo —sin position:fixed ni display:none— o sea un renglón de texto suelto al final de la página anunciando un error que no había ocurrido. */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 1000; padding: 0.7rem 1.25rem; background: var(--error-fondo); color: var(--error-tinta); border-top: 2px solid var(--error); font-weight: 600; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: var(--error-fondo); border: 1px solid var(--error); border-radius: var(--radio-tarjeta); padding: 16px 20px; color: var(--error-tinta); font-weight: 600; } .blazor-error-boundary::after { content: "Ocurrió un error. Vuelve a intentarlo o comunícate con soporte."; } /* ============================================================================ ARMAZÓN Tres piezas, de arriba abajo: .ms-atajos barra negra, ancho completo, pegada arriba. Accesos directos. .ms-nav barra lateral oscura con los módulos. Se colapsa a 68 px. .ms-cabecera barra blanca: consultorio, búsqueda, acción principal, usuario. La lateral y la cabecera blanca vienen de la pantalla «Navegación» de la maqueta. LA BARRA NEGRA NO: en la maqueta esa barra era el armazón del propio documento —las pestañas para saltar entre pantallas—, no parte del producto. Se adoptó a propósito como accesos directos porque gustó cómo se veía. Queda anotado para que nadie la busque en el diseño y crea que se le escapó algo. El colapsado y el tema NO usan interactividad de Blazor: son un atributo en (data-nav, data-tema) que pone wwwroot/js/armazon.js desde localStorage, igual que login.js hace con sus preferencias. Así el armazón no abre un circuito de SignalR solo para plegar un menú, y el estado sobrevive a la recarga. ========================================================================== */ :root { /* La cabecera blanca se pega DEBAJO de la barra negra, así que necesita saber cuánto mide. Es una variable y no un número suelto porque aparece en tres reglas y separarlas sería garantizar que se desincronicen. 56 y no los 52 de la maqueta: quien manda dentro de la barra es el botón de atajo, que mide 35.6 px (13.5 px de texto + 7 de relleno arriba y abajo + 1 de borde), y con los 10 px de relleno de la barra suman 55.6. Se comprobó midiendo en el navegador, no calculándolo. Con 52 la cabecera se pegaba 3.6 px de más y la barra negra la tapaba al hacer scroll. Si algún día cambia el tamaño del botón de atajo, este número cambia con él. El desfase se ve solo al hacer scroll, así que no salta en una captura: para comprobarlo, compara este valor contra la altura real de .ms-atajos. */ --alto-atajos: 56px; /* Estado del menú lateral. Abierto y colapsado se distinguen por SEIS variables y no por seis juegos de reglas repetidos, así el punto de quiebre de abajo reusa el mismo estado colapsado sin duplicar nada. VIVEN EN LA RAÍZ Y NO EN .ms-nav porque no las lee solo el menú: la barra negra necesita --nav-ancho para arrancar sus atajos justo donde arranca el área de contenido. Si cada uno tuviera su propio número, colapsar el menú dejaría los atajos alineados con nada. */ --nav-ancho: 244px; --nav-rejilla: 34px 1fr auto; --nav-texto: inline; --nav-punto: none; --nav-marca-corta: none; --nav-submenu: flex; } [data-nav="colapsada"] { --nav-ancho: 68px; --nav-rejilla: 34px; --nav-texto: none; --nav-punto: grid; --nav-marca-corta: inline; /* Colapsada no hay ancho para un segundo nivel: la marca de dos letras es lo único que queda del módulo, y un submenú indentado bajo 34 px sería una columna de letras cortadas. */ --nav-submenu: none; } /* Mismo peso de selector que la regla de arriba y va después, así que gana aunque alguien haya dejado el menú abierto en una pantalla ancha y luego la angoste. */ @media (max-width: 900px) { [data-nav] { --nav-ancho: 68px; --nav-rejilla: 34px; --nav-texto: none; --nav-punto: grid; --nav-marca-corta: inline; --nav-submenu: none; } } /* ---- barra negra de accesos directos ---- */ .ms-atajos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: var(--alto-atajos); padding: 10px 20px; background: var(--chrome-fondo); color: var(--chrome-texto); position: sticky; top: 0; z-index: 60; box-shadow: var(--sombra); } /* La marca ocupa exactamente la columna del menú lateral, para que el primer atajo caiga donde empieza el área de contenido en vez de quedar encima del menú. El 34 son los 20 px de relleno de la barra más los 14 del hueco que la separa de los atajos: 20 + (--nav-ancho − 34) + 14 = --nav-ancho, o sea el borde izquierdo de la lista coincide con el borde derecho del menú. Si cambia el relleno o el hueco de .ms-atajos, cambia esta resta. */ .ms-atajos-marca { flex: none; width: calc(var(--nav-ancho) - 34px); font-family: var(--fuente-titulo); font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--chrome-texto); text-decoration: none; } .ms-atajos-marca:hover { color: var(--chrome-texto); text-decoration: none; } /* Con el menú colapsado la columna mide 34 px y «MediSuite» no cabe. En vez de recortarlo a la mitad, la marca se reduce a la inicial —lo mismo que hace el menú de al lado— y la alineación se conserva en los dos estados. */ .ms-atajos-marca-larga { display: var(--nav-texto); } .ms-atajos-marca-corta { display: var(--nav-marca-corta); } .ms-atajos-lista { display: flex; gap: 4px; flex-wrap: wrap; } .ms-atajo { border: 1px solid var(--chrome-linea-fuerte); border-radius: 8px; padding: 7px 13px; font-size: 13.5px; font-weight: 600; background: transparent; color: var(--chrome-texto-2); text-decoration: none; white-space: nowrap; } .ms-atajo:hover { background: var(--chrome-fondo-2); color: var(--chrome-texto); text-decoration: none; } /* aria-current lo pone el servidor sobre el atajo del módulo abierto: el estado activo se lee igual con lector de pantalla que a simple vista. */ .ms-atajo[aria-current] { background: var(--accion); border-color: var(--accion); color: var(--accion-tinta); } .ms-atajos-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; } .ms-tema { display: flex; align-items: center; gap: 8px; background: var(--chrome-fondo-2); border: 1px solid var(--chrome-linea-fuerte); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--chrome-texto-2); } .ms-tema-figura { font-family: var(--fuente-cifra); } /* El botón dice a qué tema se va a cambiar, no en cuál estás: un botón nombra su acción. Se resuelve con CSS para que no parpadee al cargar. */ .ms-tema-a-oscuro, [data-tema="oscuro"] .ms-tema-a-claro { display: contents; } .ms-tema-a-claro, [data-tema="oscuro"] .ms-tema-a-oscuro { display: none; } /* ---- armazón ---- */ .ms-app { display: flex; min-height: calc(100vh - var(--alto-atajos)); background: var(--fondo); } .ms-app-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---- barra lateral de módulos ---- */ .ms-nav { flex: none; width: var(--nav-ancho); display: flex; flex-direction: column; gap: 2px; background: var(--chrome-fondo); color: var(--chrome-texto); padding: 14px 10px; } .ms-nav-marca { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; border-bottom: 1px solid var(--chrome-linea); margin-bottom: 10px; color: var(--chrome-texto); text-decoration: none; } .ms-nav-marca:hover { color: var(--chrome-texto); text-decoration: none; } .ms-nav-inicial { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--accion); color: var(--accion-tinta); display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: 15px; font-weight: 700; } .ms-nav-nombre { display: var(--nav-texto); font-family: var(--fuente-titulo); font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .ms-nav-modulo { display: grid; grid-template-columns: var(--nav-rejilla); gap: 11px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: var(--radio-control); padding: 9px 7px; font-size: var(--texto-chico); font-weight: 500; background: transparent; color: var(--chrome-texto-2); text-decoration: none; } .ms-nav-modulo:hover { background: var(--chrome-fondo-2); color: var(--chrome-texto); text-decoration: none; } .ms-nav-modulo[aria-current] { background: var(--accion); color: var(--accion-tinta); font-weight: 700; } .ms-nav-marca-modulo { position: relative; width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: 12px; font-weight: 700; background: var(--chrome-fondo-3); color: var(--chrome-texto-apoyo); } /* Blanco translúcido y no un token: no es un color de la paleta sino «un poco de luz encima», y tiene que funcionar sobre el acento sea cual sea el tema. */ .ms-nav-modulo[aria-current] .ms-nav-marca-modulo { background: rgba(255, 255, 255, .18); color: var(--accion-tinta); } .ms-nav-nombre-modulo { display: var(--nav-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-nav-contador { display: var(--nav-texto); font-family: var(--fuente-cifra); font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--radio-pastilla); background: var(--chrome-fondo-3); color: var(--chrome-texto-apoyo); } .ms-nav-modulo[aria-current] .ms-nav-contador { background: rgba(255, 255, 255, .2); color: var(--accion-tinta); } /* Colapsada no cabe el contador al lado del nombre, así que el número se monta sobre la marca. Es el mismo dato, no un adorno: si desaparece al plegar el menú, plegar el menú esconde trabajo pendiente. */ .ms-nav-punto { display: var(--nav-punto); position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; place-items: center; border-radius: var(--radio-pastilla); border: 1.5px solid var(--chrome-fondo); background: var(--atencion); color: var(--tinta-sobre-color); font-family: var(--fuente-cifra); font-size: 10px; font-weight: 700; } /* Submenú de un módulo: las pantallas de dentro. SÓLO SE PINTA ESTANDO EN EL MÓDULO —lo decide NavMenu.razor— y desaparece con el menú colapsado, que es lo que hace --nav-submenu. Los dos límites son lo que mantiene el riel en seis renglones cuando lleguen los cuarenta catálogos. La línea guía a la izquierda sustituye a la sangría sola: con sangría a secas, un submenú de un solo elemento se lee como un módulo mal alineado. */ .ms-nav-despliegue summary.ms-nav-modulo { list-style: none; cursor: pointer; position: relative; } .ms-nav-despliegue summary.ms-nav-modulo::-webkit-details-marker { display: none; } .ms-nav-despliegue summary.ms-nav-modulo::after { content: "▸"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--chrome-texto-2); display: var(--nav-texto); } .ms-nav-despliegue[open] summary.ms-nav-modulo::after { content: "▾"; } .ms-nav-submenu { display: var(--nav-submenu); flex-direction: column; gap: 1px; margin: 3px 0 7px 24px; padding-left: 13px; border-left: 1px solid var(--chrome-linea); } .ms-nav-sub { display: flex; align-items: center; gap: 9px; border-radius: 8px; padding: 7px 9px; font-size: 13px; font-weight: 500; color: var(--chrome-texto-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-nav-sub:hover { background: var(--chrome-fondo-2); color: var(--chrome-texto); text-decoration: none; } /* La pantalla en la que estás NO se pinta con el verde lleno del módulo: dos bloques de acento seguidos —el padre y el hijo— compiten y ya no se ve cuál manda. Aquí basta con peso, fondo tenue y el punto de color. */ .ms-nav-sub[aria-current] { background: var(--chrome-fondo-2); color: var(--chrome-texto); font-weight: 700; } /* El punto va SIEMPRE, transparente cuando no toca: si apareciera sólo en el activo, el texto se correría 14 px al cambiar de pantalla y el submenú entero daría un salto lateral. */ .ms-nav-sub::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: transparent; } .ms-nav-sub[aria-current]::before { background: var(--accion); } .ms-nav-pie { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--chrome-linea); } .ms-nav-turno { display: var(--nav-texto); padding: 2px 6px; font-size: 12px; line-height: 1.4; color: var(--chrome-texto-apoyo); } .ms-nav-colapsar { display: grid; grid-template-columns: var(--nav-rejilla, 34px 1fr); gap: 11px; align-items: center; width: 100%; text-align: left; background: var(--chrome-fondo-2); border: 1px solid var(--chrome-linea); border-radius: var(--radio-control); padding: 8px 7px; font-size: 13.5px; font-weight: 600; color: var(--chrome-texto-2); } .ms-nav-flecha { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: 15px; background: var(--chrome-fondo-3); color: var(--chrome-texto); } /* La flecha apunta a donde va a quedar el menú, no a donde está. */ .ms-nav-flecha::after { content: "‹"; } [data-nav="colapsada"] .ms-nav-flecha::after { content: "›"; } .ms-nav-colapsar-texto { display: var(--nav-texto); } /* ---- cabecera blanca ---- */ .ms-cabecera { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px 22px; background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: var(--alto-atajos); z-index: 40; } /* Angosta, la barra negra se parte en dos renglones y deja de medir --alto-atajos; si la cabecera siguiera pegada a esa altura se metería debajo de ella. */ @media (max-width: 1100px) { .ms-cabecera { position: static; } } .ms-cabecera-consultorio, .ms-cabecera-usuario { display: flex; align-items: center; gap: 9px; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-control); padding: 6px 11px 6px 7px; text-align: left; color: var(--texto); } .ms-cabecera-consultorio { gap: 10px; background: var(--superficie-hundida); padding: 7px 12px; } .ms-cabecera-sigla { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--accion-tenue); color: var(--accion-texto); display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: 11.5px; font-weight: 700; } .ms-cabecera-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--superficie-inerte); color: var(--texto); display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: 11.5px; font-weight: 700; } .ms-cabecera-titulo { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.2; } .ms-cabecera-sub { display: block; font-size: 11.5px; color: var(--texto-apoyo); } .ms-cabecera-flecha { color: var(--texto-apoyo); font-size: 12px; } /* Es un
desde el 10 de agosto de 2026 (manda a /pacientes?q=); el margen por omisión que los navegadores le ponen a form rompería el centrado. */ .ms-cabecera-busqueda { position: relative; flex: 1 1 260px; max-width: 400px; margin: 0; } .ms-cabecera-busqueda input { width: 100%; padding: 10px 12px 10px 34px; border-radius: var(--radio-control); border: 1px solid var(--linea-fuerte); background: var(--superficie-hundida); font-size: 15px; } .ms-cabecera-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--linea-decorativa); font-size: 13px; } /* La tecla que enfoca la búsqueda se anuncia en la propia caja: un atajo que no se ve no lo usa nadie. Lo escucha armazon.js. */ .ms-cabecera-tecla { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-family: var(--fuente-cifra); font-size: 11px; color: var(--texto-apoyo); border: 1px solid var(--linea); border-radius: 5px; padding: 1px 5px; } .ms-cabecera-acciones { display: flex; gap: 8px; margin-left: auto; align-items: center; } .ms-cabecera-cuerpo { flex: 1; min-width: 0; } .ms-campana { position: relative; } .ms-campana summary { list-style: none; cursor: pointer; position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--texto-2); } .ms-campana summary::-webkit-details-marker { display: none; } .ms-campana summary:hover { background: var(--superficie-hundida); color: var(--texto); } .ms-campana svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ms-campana-cuenta { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--atencion); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .ms-campana-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-alta); padding: 6px; z-index: 200; } .ms-campana-vacio { margin: 0; padding: 10px 12px; font-size: var(--texto-chico, 13px); color: var(--texto-apoyo); } .ms-campana-renglon { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--texto); font-size: var(--texto-chico, 13px); line-height: 1.4; } .ms-campana-renglon:hover { background: var(--superficie-hundida); } .ms-campana-figura { flex: none; color: var(--accion); } .ms-campana-renglon.es-imagenologia .ms-campana-figura { color: var(--texto-apoyo); } .ms-campana-texto { display: flex; flex-direction: column; gap: 2px; } .ms-campana-cuando { color: var(--texto-apoyo); font-size: var(--texto-micro, 12px); } .ms-toast { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; gap: 10px; align-items: flex-start; max-width: min(380px, calc(100vw - 36px)); padding: 12px 16px; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--accion); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-alta); color: var(--texto); font-size: var(--texto-chico, 13px); line-height: 1.4; text-decoration: none; animation: ms-toast-entra 0.25s ease-out; } .ms-toast:hover { background: var(--superficie-hundida); } @keyframes ms-toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---- teléfono: fuera las dos barras horizontales ---- */ /* Entre las dos se comían unos 150 px de alto —más de un sexto de la pantalla— para chrome que no es el trabajo. En una pantalla clínica lo escaso es el alto, y lo que se deja de ver es el contenido del expediente. Se van solo las HORIZONTALES: el riel de módulos se queda, así que la navegación sobrevive. Lo que queda sin acceso mientras dure esto es la búsqueda de paciente, «+ Nueva cita», el usuario (entrar y salir) y el cambio de tema. Hoy no estorba porque ninguna de esas cosas hace nada todavía, pero LA BÚSQUEDA TIENE QUE VOLVER antes de que existan las pantallas clínicas: es lo primero que toca una recepcionista con el teléfono en la oreja. --alto-atajos a 0 en vez de tocar el min-height de .ms-app: esa altura la descuenta también la cabecera, y con una sola variable las dos se enteran. 768 px y no los 900 del riel a propósito: en tableta sobra ancho para las barras, y colapsar el menú es una molestia mucho menor que perder la búsqueda. VA AQUÍ, AL FINAL, Y NO ARRIBA CON EL RESTO DEL ARMAZÓN: .ms-atajos y .ms-cabecera traen su propio `display` y tienen el mismo peso de selector que esta regla, así que gana la última en el archivo. Puesto arriba, la barra negra desaparecía y la cabecera no —comprobado—, y el fallo no se ve más que a menos de 768 px. */ @media (max-width: 768px) { :root { --alto-atajos: 0px; } .ms-atajos, .ms-cabecera { display: none; } } /* ============================================================================ AGENDA Rejilla de la semana: una columna de horas y seis de días (lunes a sábado). Las citas van posicionadas en absoluto dentro de su día, a razón de --px-hora por hora y --px-hora/60 por minuto. Eso viene de la maqueta: top = (hora − horaInicio) × 72 + minutos × 1.2 LO QUE CAMBIA RESPECTO A LA MAQUETA: allí la rejilla va fija de 8 a 16 porque es una maqueta. Aquí el rango sale del horario real del médico (AgendaMedico.HoraDesde/HoraHasta), porque en los datos hay consultorios que abren a las 3 y cierran a las 22. Con la rejilla fija, esas citas quedarían fuera del área dibujada — es decir, invisibles. El alto de cada día lo pone el servidor en un style inline: depende del rango de horas del médico, que es un dato, no una constante de diseño. ========================================================================== */ .ms-agenda { padding: 22px 26px 40px; } .ms-agenda-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--texto); } .ms-agenda-titulo { font-size: var(--titulo-2); line-height: 1.15; margin: 0; } .ms-agenda-medico { margin: 5px 0 0; color: var(--texto-2); font-size: var(--texto-chico); letter-spacing: .09em; text-transform: uppercase; } /* ---- barra de control ---- TODO LO DE NAVEGAR POR FECHAS VA JUNTO Y A LA IZQUIERDA: las flechas, «Hoy», la fecha —que abre el calendario— y el conmutador de vista. Estaban repartidas entre los dos extremos de la cabecera y era impráctico: para avanzar una semana y luego saltar a otro mes había que cruzar la pantalla entera con el ratón. Los controles que se usan seguidos se ponen seguidos. A la derecha quedan las ACCIONES —de qué médico, crear cita—, que son otra cosa y se pulsan mucho menos. Entre unos y otras, un separador que crece. */ .ms-agenda-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 0; } .ms-agenda-pasos { display: flex; align-items: center; gap: 6px; } .ms-agenda-separador { flex: 1; } @media (max-width: 900px) { /* Sin sitio para dos grupos, el separador deja de empujar y todo se apila seguido, en orden de uso. */ .ms-agenda-separador { display: none; } } /* ---- selector de fecha ---- */ .ms-agenda-fecha { position: relative; display: inline-block; } /* El rango de fechas ES el botón que abre el calendario. Un icono aparte sería un blanco más pequeño y una cosa más que aprender: lo que quieres pulsar para cambiar de fecha es la fecha. */ /* La fecha manda en esta barra: es lo que dice dónde estás parado. Va en serif y a 22 px, no como subtítulo en mayúsculas. El min-width evita que la barra entera baile de ancho al pasar de «3 – 8 de agosto» a «30 de noviembre – 5 de diciembre». */ .ms-agenda-rango-boton { display: inline-flex; align-items: center; gap: 9px; min-width: 250px; background: transparent; border: 0; border-radius: var(--radio-control); padding: 5px 9px; color: var(--texto); font-family: var(--fuente-titulo); font-size: 22px; font-weight: 600; letter-spacing: -.01em; text-align: left; } /* El año en gris: casi siempre es el actual y no aporta, pero cuando estás en otro sí importa — y entonces se ve, sin robarle peso al día y al mes. */ .ms-agenda-rango-anio { color: var(--texto-apoyo); font-weight: 400; } @media (max-width: 720px) { .ms-agenda-rango-boton { font-size: 19px; min-width: 0; flex: 1; } } .ms-agenda-rango-boton:hover { background: var(--superficie-inerte); color: var(--texto); } .ms-agenda-rango-boton .chevron { font-size: 11px; color: var(--texto-apoyo); transition: transform .15s; } .ms-agenda-rango-boton[aria-expanded="true"] .chevron { transform: rotate(180deg); } .ms-cal-fondo { position: fixed; inset: 0; z-index: 39; } .ms-cal { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 298px; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-alta); padding: 12px; } .ms-cal-cabeza { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .ms-cal-titulo { flex: 1; text-align: center; font-weight: 700; font-size: 15px; text-transform: capitalize; letter-spacing: -.01em; } .ms-cal-paso { width: 30px; height: 30px; display: grid; place-items: center; flex: none; background: transparent; border: 0; border-radius: 8px; color: var(--texto-2); font-family: var(--fuente-cifra); font-size: 13px; } .ms-cal-paso:hover { background: var(--superficie-inerte); color: var(--texto); } .ms-cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 3px; } .ms-cal-semana span { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--texto-apoyo); text-transform: uppercase; } .ms-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ms-cal-dia { position: relative; aspect-ratio: 1; border: 0; border-radius: 9px; background: transparent; font-family: var(--fuente-cifra); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--texto); display: grid; place-items: center; padding-bottom: 4px; } .ms-cal-dia:hover { background: var(--accion-tenue); } /* Los de otro mes y los días que el médico no atiende siguen siendo pulsables: atenuar no es lo mismo que impedir. Un consultorio agenda fuera de horario más a menudo de lo que le gustaría admitir. */ .ms-cal-dia[data-fuera], .ms-cal-dia[data-cerrado] { color: var(--texto-apoyo); opacity: .45; } .ms-cal-dia[data-hoy] { box-shadow: inset 0 0 0 1.5px var(--accion); font-weight: 700; } .ms-cal-dia[data-sel] { background: var(--accion); color: var(--accion-tinta); font-weight: 700; opacity: 1; } /* La barra de carga: cuánto trabajo hay ese día, sin números y sin abrirlo. Tres anchos y no un degradado porque lo que se compara de un vistazo son tres cosas: poco, bastante, lleno. */ .ms-cal-dia[data-carga]::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); height: 3px; border-radius: 2px; background: var(--accion); } .ms-cal-dia[data-carga="1"]::after { width: 3px; } .ms-cal-dia[data-carga="2"]::after { width: 9px; } .ms-cal-dia[data-carga="3"]::after { width: 15px; } .ms-cal-dia[data-sel]::after { background: var(--accion-tinta); } .ms-cal-atajos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--linea); } .ms-cal-atajos button { flex: 1 1 calc(50% - 3px); border: 1px solid var(--linea-fuerte); background: var(--superficie-hundida); border-radius: 8px; padding: 7px 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); } .ms-cal-atajos button:hover { background: var(--accion-tenue); border-color: var(--accion); color: var(--texto); } .ms-cal-pie { margin: 9px 0 0; font-size: 11.5px; color: var(--texto-apoyo); text-align: center; line-height: 1.4; } .ms-agenda-mandos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ms-agenda-paso { width: 40px; height: 40px; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-control); color: var(--texto-2); box-shadow: var(--sombra); } /* ---- resumen de la semana ---- */ .ms-agenda-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px 0; color: var(--texto-2); font-size: var(--texto-chico); } .ms-agenda-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-pastilla); padding: 6px 14px 6px 11px; box-shadow: var(--sombra); } .ms-agenda-chip b { color: var(--texto); font-variant-numeric: tabular-nums; } /* ---- tablero ---- */ .ms-agenda-tablero { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; } @media (max-width: 1080px) { .ms-agenda-tablero { grid-template-columns: minmax(0, 1fr); } } .ms-agenda-marco { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); overflow: hidden; min-width: 0; } /* UNA SOLA REJILLA para la cabecera y el cuerpo, y el scroll —los dos ejes— en este contenedor. Antes eran dos rejillas hermanas, y se desalineaban: el cuerpo tenía su propio scroll vertical, así que perdía el ancho de la barra (~15 px) y repartía menos espacio entre sus siete columnas que la cabecera. El desfase se acumulaba columna a columna y al llegar al sábado saltaba a la vista. Con una sola rejilla el reparto es el mismo por construcción, y la cabecera se queda arriba con position:sticky en vez de estar en otro contenedor. El min-width no se toca: siete columnas apretadas dejan de ser legibles antes de dejar de caber. */ .ms-agenda-scroll { overflow: auto; max-height: min(62vh, 620px); } /* --cols lo pone el servidor: 6 en la vista de semana, 1 en la de día. El ancho mínimo también cambia — seis columnas necesitan sitio, una no. */ .ms-agenda-rejilla { display: grid; grid-template-columns: 66px repeat(var(--cols, 6), minmax(0, 1fr)); min-width: var(--ancho-min, 760px); } /* ---- conmutador de vista ---- */ .ms-agenda-segmento { display: flex; background: var(--superficie-inerte); border-radius: var(--radio-control); padding: 3px; gap: 2px; } .ms-agenda-segmento button { border: 0; background: transparent; border-radius: 8px; padding: 7px 15px; font-size: var(--texto-chico); font-weight: 600; color: var(--texto-2); } /* aria-pressed no es decorativo: es lo que un lector de pantalla anuncia como «pulsado». El estilo se cuelga de él para que no puedan separarse. */ .ms-agenda-segmento button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); } .ms-agenda-dia-cabeza, .ms-agenda-esquina { position: sticky; top: 0; z-index: 6; background: var(--superficie-hundida); border-bottom: 1px solid var(--linea); } .ms-agenda-dia-cabeza { padding: 10px 8px 11px; text-align: center; border-right: 1px solid var(--linea); } /* La esquina se pega por los dos ejes y va por encima de todo: es la que tapa el cruce entre la cabecera y la columna de horas. */ .ms-agenda-esquina { left: 0; z-index: 8; border-right: 1px solid var(--linea); } .ms-agenda-dia-nombre { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--texto-apoyo); } .ms-agenda-dia-numero { font-family: var(--fuente-cifra); font-size: 21px; font-variant-numeric: tabular-nums; margin-top: 2px; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--texto); } /* Hoy va marcado con relleno, no sólo con color de texto: es la referencia que el ojo busca primero al abrir la pantalla. */ .ms-agenda-dia[data-hoy] .ms-agenda-dia-nombre { color: var(--accion-texto); } .ms-agenda-dia[data-hoy] .ms-agenda-dia-numero { background: var(--accion); color: var(--accion-tinta); } /* La columna de horas también se queda quieta, pero en el eje horizontal: al desplazarse hacia el sábado en una pantalla angosta, saber a qué hora corresponde cada renglón es justamente lo que no se puede perder. */ .ms-agenda-horas { position: sticky; left: 0; z-index: 5; border-right: 1px solid var(--linea); background: var(--superficie-hundida); } .ms-agenda-hora { height: var(--px-hora); position: relative; padding-right: 9px; text-align: right; font-family: var(--fuente-cifra); font-size: 11.5px; color: var(--texto-apoyo); font-variant-numeric: tabular-nums; } /* La etiqueta se sube para quedar A LA ALTURA DE LA LÍNEA que marca esa hora, no dentro del bloque siguiente. La primera no puede subir o se saldría. */ .ms-agenda-hora span { position: relative; top: -7px; } .ms-agenda-hora:first-child span { top: 1px; } .ms-agenda-columna { position: relative; border-right: 1px solid var(--linea); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--px-hora) - 1px), var(--linea) calc(var(--px-hora) - 1px) var(--px-hora)); } /* ---- huecos para agendar ---- */ /* Media hora cada uno. Son botones de verdad y no un manejador sobre la columna porque así se llega a ellos con el teclado y cada uno puede decir a qué día y hora corresponde. El precio es DOM: seis días por veinticuatro huecos son 144 botones en la vista de semana. */ .ms-agenda-hueco { position: absolute; left: 0; right: 0; height: calc(var(--px-hora) / 2); border: 0; border-bottom: 1px solid var(--linea); padding: 0; background: transparent; z-index: 1; } /* El de la media hora se marca con línea discontinua: se distingue de la hora en punto sin añadir otro color ni otro texto. */ .ms-agenda-hueco[data-media] { border-bottom-style: dashed; } .ms-agenda-hueco:hover { background: var(--accion-tenue); } .ms-agenda-hueco:hover::after { content: "+ Agendar"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--accion-texto); letter-spacing: .02em; } /* ---- la hora actual ---- */ /* Roja y con punto a la izquierda. Es la única cosa de esta pantalla que usa el rojo sin ser una urgencia, y se lo puede permitir porque no es una categoría: es un instante, y desaparece del día en cuanto dejas de mirarlo. NO SE MUEVE SOLA: se dibuja al cargar la semana. Actualizarla al minuto costaría un temporizador por circuito abierto, y para lo que aporta —saber por dónde va el día de un vistazo— con que sea correcta al abrir basta. */ .ms-agenda-ahora { position: absolute; left: 0; right: 0; height: 2px; background: var(--error); z-index: 6; pointer-events: none; } .ms-agenda-ahora::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); } /* La hora, encima de la línea. El artefacto sólo pone el punto y un `title`, pero un title sobre una línea de 2 px es imposible de acertar con el ratón: la primera persona que la vio preguntó qué era. Con la hora escrita se explica sola y de paso sirve para lo que sirve — ver por dónde va el día. */ .ms-agenda-ahora::after { content: attr(data-hora); position: absolute; left: 5px; top: -8px; background: var(--error); color: var(--tinta-sobre-color); font-family: var(--fuente-cifra); font-size: 10px; font-weight: 700; line-height: 1.6; padding: 0 5px; border-radius: var(--radio-pastilla); } /* ---- horas bloqueadas ---- */ /* Rayado y no un color plano: no es una categoría clínica, es «aquí no se puede». El rayado se lee como zona inhabilitada en cualquier interfaz y no compite con los colores de tipo de consulta, que son los que sí significan algo. */ /* SIN pointer-events:none, al revés que el artefacto. La banda va por encima de los huecos y tiene que INTERCEPTAR el clic: si lo dejara pasar, el «+ Agendar» seguiría apareciendo debajo del rayado y se podría pulsar donde el médico no atiende. No ofrecer lo que no se puede dar es mejor que ofrecerlo y luego negarlo. Quien de verdad necesite agendar ahí puede hacerlo desde «+ Nueva cita» escribiendo la hora, y ahí sí recibe el aviso que explica por qué no se puede. */ .ms-agenda-banda { position: absolute; left: 0; right: 0; z-index: 2; display: grid; place-items: center; align-content: center; background: repeating-linear-gradient( 135deg, transparent 0 6px, var(--superficie-inerte) 6px 12px ); border-block: 1px solid var(--linea); } .ms-agenda-banda span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-apoyo); font-weight: 700; background: var(--superficie); padding: 1px 8px; border-radius: var(--radio-pastilla); } /* ---- la cita ---- */ .ms-agenda-cita { position: absolute; left: 4px; right: 4px; z-index: 4; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--c); border-left: 4px solid var(--c); background: var(--c-fondo); color: var(--texto); } .ms-agenda-cita-hora { font-family: var(--fuente-cifra); font-size: 11px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-tinta); } .ms-agenda-cita-nombre { font-size: 13px; font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-agenda-cita-motivo { font-size: 11.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-apoyo); } /* ---- los seis estados ---- Cada uno se distingue por FORMA además de por color, igual que las categorías: trazo del borde, relleno, opacidad o tachado. Así el estado se lee en una captura en blanco y negro y por alguien que no distingue los verdes de los rojos. */ .ms-agenda-cita[data-estado="PorConfirmar"] { border-style: dashed; border-left-style: solid; } .ms-agenda-cita[data-estado="EnSala"] { box-shadow: inset 0 0 0 2px var(--c); } .ms-agenda-cita[data-estado="EnConsulta"] { background: var(--c-relleno); border-color: var(--c-relleno); color: var(--tinta-sobre-color); } .ms-agenda-cita[data-estado="EnConsulta"] .ms-agenda-cita-hora, .ms-agenda-cita[data-estado="EnConsulta"] .ms-agenda-cita-motivo { color: var(--tinta-sobre-color); } .ms-agenda-cita[data-estado="Atendida"] { opacity: .5; background: none; } .ms-agenda-cita[data-estado="Cancelada"] { opacity: .5; background: none; border-style: dotted; border-left-style: solid; } .ms-agenda-cita[data-estado="Cancelada"] .ms-agenda-cita-nombre { text-decoration: line-through; } /* ---- búsqueda dentro de la agenda ---- */ .ms-agenda-buscador { position: relative; flex: 1 1 200px; max-width: 280px; } .ms-agenda-buscador input { width: 100%; padding: 9px 30px 9px 12px; border-radius: var(--radio-control); border: 1px solid var(--linea-fuerte); background: var(--superficie); font-size: var(--texto-chico); } .ms-agenda-buscador-limpiar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--texto-apoyo); font-size: 14px; line-height: 1; } .ms-agenda-buscador-limpiar:hover { background: var(--superficie-inerte); color: var(--texto); } /* Buscar no FILTRA, resalta. Quitar de la vista las que no coinciden dejaría una rejilla llena de huecos que parecen libres y no lo están; así se sigue viendo la forma del día y sólo cambia dónde va la atención. */ .ms-agenda-cita[data-hallada] { box-shadow: 0 0 0 3px var(--accion); z-index: 5; } /* «En sala» se marca con un anillo INTERIOR y el realce de búsqueda con uno exterior: los dos son box-shadow, así que el segundo borraba al primero y buscar hacía desaparecer quién está esperando. Se declaran juntos. */ .ms-agenda-cita[data-estado="EnSala"][data-hallada] { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px var(--accion); } .ms-agenda-cita[data-apagada] { opacity: .22; filter: grayscale(.7); } .ms-agenda-sin-resultados { font-size: var(--texto-chico); color: var(--atencion-tinta); font-weight: 600; } /* ---- hoja para imprimir ---- */ /* La rejilla de carriles NO se puede imprimir: son bloques en posición absoluta que el paginador corta por la mitad. Así que se imprime otra cosa —una tabla el día, una columna por día la semana— y se oculta la pantalla. Los COLORES no se tocan aquí: medisuite-tokens.css ya reasigna todos los tokens a papel y tinta dentro de @media print, así que esto sólo aporta estructura. */ .ms-hoja { display: none; } @media print { .ms-atajos, .ms-nav, .ms-cabecera, .ms-agenda, .ms-pantalla, .ms-dialogo, .ms-dialogo-fondo, .ms-cuadro, .ms-cuadro-fondo, #blazor-error-ui { display: none !important; } .ms-app, .ms-app-principal, .ms-cabecera-cuerpo { display: block !important; min-height: 0 !important; } .ms-hoja { display: block !important; } /* Un renglón partido entre dos hojas obliga a cotejar páginas para leer una cita: es justo lo que un papel de agenda no debe hacer. */ .ms-hoja-tabla tr, .ms-hoja-dia { break-inside: avoid; } } .ms-hoja-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--texto); padding-bottom: 12px; margin-bottom: 18px; } .ms-hoja-cabeza h1 { font-size: var(--titulo-4); margin: 0; } .ms-hoja-cabeza p { margin: 3px 0 0; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-apoyo); } .ms-hoja-cuando { text-align: right; } .ms-hoja-cuando strong { font-family: var(--fuente-titulo); font-size: 17px; display: block; } .ms-hoja-cuando span { font-size: 11.5px; color: var(--texto-apoyo); } .ms-hoja-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ms-hoja-tabla th { text-align: left; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-apoyo); border-bottom: 1px solid var(--texto); padding: 0 8px 6px 0; font-weight: 700; } .ms-hoja-tabla td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--linea); vertical-align: top; line-height: 1.35; } .ms-hoja-tabla .hora { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; } .ms-hoja-tabla .quien { font-weight: 650; font-size: 13px; } .ms-hoja-tabla .tel { font-family: var(--fuente-cifra); font-size: 11.5px; white-space: nowrap; } .ms-hoja-tabla tr[data-cancelada] .quien { text-decoration: line-through; } /* La columna de notas va separada por una línea y vacía: es donde se escribe a mano sobre el papel. Sin el borde no se lee como un espacio para escribir. */ .ms-hoja-tabla .notas { border-left: 1px solid var(--linea); padding-left: 8px; } .ms-hoja-tipo { display: block; font-size: 10.5px; color: var(--texto-apoyo); line-height: 1.3; } .ms-hoja-marca { display: inline-block; margin-top: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--texto-apoyo); border-radius: 3px; padding: 0 5px; } .ms-hoja-semana { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ms-hoja-dia { border: 1px solid var(--linea); border-radius: 4px; padding: 10px 11px; } .ms-hoja-dia h2 { margin: 0 0 7px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--texto); padding-bottom: 5px; display: flex; justify-content: space-between; gap: 8px; } .ms-hoja-dia h2 span { font-weight: 400; color: var(--texto-apoyo); letter-spacing: 0; text-transform: none; } .ms-hoja-dia ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .ms-hoja-dia li { display: grid; grid-template-columns: 58px 1fr; gap: 7px; font-size: 11.5px; line-height: 1.3; } .ms-hoja-dia li b { font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 10.5px; } .ms-hoja-dia li[data-cancelada] .quien { text-decoration: line-through; } .ms-hoja-dia .nada { color: var(--texto-apoyo); font-size: 11px; font-style: italic; } .ms-hoja-pie { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 16px; font-size: 10.5px; color: var(--texto-apoyo); } /* ---- hoja clínica: receta y nota médica ---- */ .ms-hoja-clinica { max-width: 178mm; margin: 0 auto; color: #000; } .ms-hoja-membrete { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 7px; border-bottom: 1.5px solid #000; } .ms-hoja-membrete h1 { font-family: var(--fuente-titulo); font-size: 17px; line-height: 1.2; margin: 0 0 2px; letter-spacing: .01em; } .ms-hoja-credenciales { margin: 0; font-size: 9.5px; line-height: 1.4; color: #333; } .ms-hoja-consultorio { margin: 1px 0 0; font-size: 9px; line-height: 1.4; color: #555; } .ms-hoja-logo { max-height: 44px; max-width: 120px; object-fit: contain; } .ms-hoja-banda { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: .5px solid #999; font-size: 9.5px; color: #333; } .ms-hoja-tipo-doc { font-family: var(--fuente-titulo); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .ms-hoja-paciente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 16px; margin: 0; padding: 5px 0; border-bottom: .5px solid #999; } .ms-hoja-paciente div { display: flex; gap: 5px; align-items: baseline; min-width: 0; } .ms-hoja-paciente dt { font-size: 7.5px; text-transform: uppercase; letter-spacing: .06em; color: #777; white-space: nowrap; } .ms-hoja-paciente dd { margin: 0; font-size: 10px; overflow-wrap: anywhere; } .ms-hoja-paciente div:first-child dd { font-weight: 600; } .ms-hoja-signos { margin: 4px 0 0; font-size: 9px; line-height: 1.4; color: #555; } .ms-hoja-dx, .ms-hoja-alergias { margin: 2px 0 0; font-size: 10px; line-height: 1.4; } .ms-hoja-rp { margin: 10px 0 5px; border-bottom: 1.25px solid #000; padding-bottom: 1px; } .ms-hoja-rp span { font-family: var(--fuente-titulo); font-size: 16px; font-style: italic; line-height: 1; } .ms-hoja-medicamentos { margin: 0; padding-left: 18px; font-size: 12px; } .ms-hoja-medicamentos li { margin-bottom: 9px; break-inside: avoid; } .ms-hoja-med-nombre { margin: 0; font-size: 12px; line-height: 1.4; } .ms-hoja-med-comercial { font-style: italic; color: #333; } .ms-hoja-med-presentacion { color: #333; } .ms-hoja-med-indicacion { margin: 0; font-size: 11.5px; line-height: 1.45; } .ms-hoja-observaciones { margin: 10px 0 0; padding: 6px 0 0; border-top: .5px solid #999; font-size: 11.5px; line-height: 1.5; } .ms-hoja-bloque { margin-top: 9px; break-inside: avoid; } .ms-hoja-bloque h3 { margin: 0 0 1px; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: #777; font-weight: 600; } .ms-hoja-bloque p { margin: 0; font-size: 11px; line-height: 1.5; white-space: pre-wrap; } .ms-hoja-firma { margin-top: 56px; display: flex; justify-content: flex-end; break-inside: avoid; } .ms-hoja-firma-linea { width: 70mm; text-align: center; border-top: .5px solid #000; padding-top: 4px; } .ms-hoja-firma-nombre { margin: 0; font-size: 10px; font-weight: 600; } .ms-hoja-firma-cedula { margin: 1px 0 0; font-size: 8.5px; color: #444; } .ms-hoja-legal { margin: 14px 0 0; padding-top: 5px; border-top: .5px dotted #999; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 8px; line-height: 1.4; color: #555; } .ms-hoja-impreso { white-space: nowrap; } @media print { @page { margin: 0; } .ms-hoja { padding: 12mm 14mm; } .ms-hoja-clinica { display: flex; flex-direction: column; min-height: 253mm; } .ms-hoja-firma { margin-top: auto; padding-top: 56px; } } /* ---- panel lateral ---- */ .ms-agenda-panel { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 120px; } @media (max-width: 1080px) { .ms-agenda-panel { position: static; } } .ms-agenda-tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); overflow: hidden; } .ms-agenda-tarjeta-cabeza { padding: 14px 16px; border-bottom: 1px solid var(--linea); background: var(--superficie-hundida); } .ms-agenda-tarjeta-cabeza h2 { margin: 0; font-size: var(--titulo-4); } .ms-agenda-tarjeta-cabeza p { margin: 3px 0 0; font-size: var(--texto-micro); color: var(--texto-apoyo); } .ms-agenda-tarjeta-cuerpo { padding: 15px 16px; } .ms-agenda-hoy-lista { display: flex; flex-direction: column; padding: 6px; } .ms-agenda-hoy-cita { width: 100%; display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: start; background: transparent; border: 0; border-left: 3px solid var(--c); border-radius: 9px; padding: 9px 10px; text-align: left; } .ms-agenda-hoy-cita:hover { background: var(--superficie-hundida); } .ms-agenda-hoy-hora { font-family: var(--fuente-cifra); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-tinta); padding-top: 1px; } .ms-agenda-hoy-nombre { display: block; font-size: 14px; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); } .ms-agenda-hoy-detalle { display: block; font-size: var(--texto-micro); color: var(--texto-apoyo); line-height: 1.3; } .ms-agenda-rotulo { margin: 0 0 10px; font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--texto-apoyo); font-weight: 700; } .ms-agenda-leyenda { display: flex; flex-direction: column; gap: 7px; } .ms-agenda-leyenda-fila { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--texto); } .ms-agenda-leyenda-muestra { width: 26px; height: 18px; border-radius: 4px; border-left: 4px solid var(--c); background: var(--c-fondo); flex: none; } .ms-agenda-leyenda-figura { font-family: var(--fuente-cifra); font-weight: 700; color: var(--c-tinta); } .ms-agenda-leyenda-cuenta { margin-left: auto; font-family: var(--fuente-cifra); font-size: 11.5px; color: var(--texto-apoyo); } /* ---- estados vacíos y de error ---- */ .ms-agenda-aviso { padding: 40px 26px; text-align: center; color: var(--texto-2); } .ms-agenda-aviso p { margin: 0 auto 6px; max-width: 460px; line-height: 1.55; } /* ---- diálogo de cita ---- */ .ms-dialogo-fondo { position: fixed; inset: 0; z-index: 90; background: rgba(22, 33, 30, .45); } .ms-dialogo { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-alta); } .ms-dialogo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--linea); } .ms-dialogo-titulo { font-size: var(--titulo-3); margin: 0; } .ms-dialogo-sub { margin: 4px 0 0; font-size: var(--texto-chico); color: var(--texto-2); display: flex; align-items: center; gap: 7px; } .ms-dialogo-cuerpo { padding: 18px 20px; overflow-y: auto; } .ms-dialogo-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 20px 18px; border-top: 1px solid var(--linea); } .ms-dialogo-pie-derecha { display: flex; gap: 10px; margin-left: auto; } /* ---- detalle de la cita ---- */ /* Pantalla de LECTURA, separada del formulario. Casi siempre que se abre una cita es para verla o para moverla de estado, no para corregirla: poner el formulario delante obliga a atravesar diez campos para pulsar «Ya llegó». */ .ms-detalle-hora { font-family: var(--fuente-cifra); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-tinta); } .ms-detalle-nombre { font-family: var(--fuente-titulo); font-size: 27px; font-weight: 600; letter-spacing: -.01em; margin: 2px 0 0; line-height: 1.15; } .ms-detalle-estado { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radio-tarjeta); background: var(--superficie-hundida); border: 1px solid var(--linea); font-size: var(--texto-chico); font-weight: 600; } .ms-detalle-estado-figura { font-family: var(--fuente-cifra); font-weight: 700; color: var(--c-tinta); } /* La aclaración del canal («la agendó el paciente desde el directorio»), sólo cuando aplica. En peso normal y color de apoyo: acompaña al estado, no compite con él. */ .ms-detalle-estado-nota { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--texto-apoyo); text-align: right; } .ms-detalle-datos { border: 1px solid var(--linea); border-radius: 11px; overflow: hidden; } .ms-detalle-datos > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--linea); font-size: 15px; } .ms-detalle-datos > div:last-child { border-bottom: 0; } .ms-detalle-datos dt { color: var(--texto-apoyo); font-size: var(--texto-chico); margin: 0; padding-top: 1px; } .ms-detalle-datos dd { margin: 0; } @media (max-width: 560px) { .ms-detalle-datos > div { grid-template-columns: 1fr; gap: 2px; } } /* ---- confirmación de lo irreversible ---- */ /* Va DENTRO del diálogo y sustituye al pie, en vez de abrir un segundo diálogo encima. Dos modales apilados se cierran de un Escape mal dado y nunca queda claro cuál responde. Aquí, mientras la confirmación está abierta, el pie normal no existe: no hay forma de guardar por error mientras se decide. */ .ms-dialogo-confirmar { padding: 16px 20px 18px; border-top: 1px solid var(--linea); background: var(--error-fondo); display: flex; flex-direction: column; gap: 8px; } .ms-dialogo-confirmar strong { font-size: 16.5px; color: var(--texto); line-height: 1.3; } .ms-dialogo-confirmar p { margin: 0; font-size: var(--texto-chico); color: var(--texto-2); line-height: 1.5; } .ms-dialogo-confirmar-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 5px; } /* ---- opciones en píldora ---- */ /* Sustituyen a los desplegables de tipo y duración. Un desplegable esconde las opciones detrás de un clic y no deja comparar; aquí se ven las cinco a la vez, con su color, y elegir es un solo toque. Para cinco opciones cortas siempre gana. */ .ms-opciones { display: flex; flex-wrap: wrap; gap: 8px; } .ms-opciones button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linea-fuerte); background: var(--superficie-hundida); border-radius: var(--radio-pastilla); padding: 8px 15px; font-size: var(--texto-chico); font-weight: 600; color: var(--texto-2); } .ms-opciones button:hover { border-color: var(--texto-apoyo); } /* La elegida se marca con fondo, borde Y un anillo interior: el color de la categoría no puede ser lo único que distinga «elegida» de «no elegida». */ .ms-opciones button[aria-pressed="true"] { background: var(--c-fondo, var(--accion-tenue)); border-color: var(--c, var(--accion)); color: var(--texto); box-shadow: inset 0 0 0 1px var(--c, var(--accion)); } .ms-opciones-punto { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; } .ms-opciones.chicas button { padding: 6px 12px; font-size: 13.5px; } /* ---- aviso de fecha ---- */ /* Ámbar y no rojo: agendar en el pasado es raro pero legítimo —se apunta una consulta que ya ocurrió—, así que se avisa, no se impide. */ .ms-aviso-dia { display: flex; gap: 8px; align-items: flex-start; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--atencion-tinta); background: var(--atencion-fondo); border-radius: 9px; padding: 9px 12px; } /* ---- estado en la lista del día ---- */ .ms-agenda-hoy-estado { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Cada estado con su color, y los dos que piden acción destacan: «por confirmar» en ámbar porque hay que llamar, «en sala» en verde porque alguien está esperando. Los terminados se apagan en gris: ya no piden nada. */ .ms-agenda-hoy-estado[data-estado="PorConfirmar"] { color: var(--atencion-tinta); } .ms-agenda-hoy-estado[data-estado="Confirmada"] { color: var(--texto-apoyo); } .ms-agenda-hoy-estado[data-estado="EnSala"] { color: var(--exito-tinta); } .ms-agenda-hoy-estado[data-estado="EnConsulta"] { color: var(--c-tinta); } .ms-agenda-hoy-estado[data-estado="Atendida"] { color: var(--texto-apoyo); } .ms-agenda-hoy-estado[data-estado="Cancelada"] { color: var(--error-tinta); } /* La que está con el médico ahora mismo se resalta: es la única de la lista que está ocurriendo. */ .ms-agenda-hoy-cita[data-estado="EnConsulta"] { background: var(--c-fondo); } .ms-agenda-hoy-cita[data-estado="Cancelada"] .ms-agenda-hoy-nombre, .ms-agenda-hoy-cita[data-estado="Atendida"] .ms-agenda-hoy-nombre { color: var(--texto-apoyo); } .ms-agenda-hoy-cita[data-estado="Cancelada"] .ms-agenda-hoy-nombre { text-decoration: line-through; } /* ---- sugerencias de paciente ---- */ .ms-dialogo-sugerencias { margin-top: 6px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); box-shadow: var(--sombra); overflow: hidden; } .ms-dialogo-sugerencia { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--linea); text-align: left; font-size: var(--texto-chico); color: var(--texto); } .ms-dialogo-sugerencia:last-child { border-bottom: 0; } .ms-dialogo-sugerencia:hover { background: var(--superficie-hundida); } .ms-dialogo-sugerencia-clave { font-family: var(--fuente-cifra); font-size: var(--texto-micro); color: var(--texto-apoyo); } /* La cita se puede pulsar: que el cursor lo diga. */ .ms-agenda-cita, .ms-agenda-hoy-cita { cursor: pointer; } /* ---- módulo todavía sin pantalla ---- */ .ms-modulo { padding: 22px 26px 40px; max-width: 640px; } .ms-modulo-titulo { font-size: var(--titulo-2); margin: 0 0 6px; } .ms-modulo-texto { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--texto-2); text-wrap: pretty; } .ms-modulo-nota { margin: 0 0 20px; font-size: var(--texto-chico); line-height: 1.55; color: var(--texto-apoyo); text-wrap: pretty; } .ms-modulo-acciones { display: flex; flex-wrap: wrap; gap: 10px; } /* ============================================================================ PANTALLA DE ACCESO ========================================================================== */ .ms-login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; } @media (max-width: 900px) { .ms-login { grid-template-columns: 1fr; } /* En pantalla angosta la columna de marca estorba antes del formulario. */ .ms-login-marca { display: none; } } /* ---- columna de marca ---- */ .ms-login-marca { background: var(--chrome-fondo); color: var(--chrome-texto); display: flex; flex-direction: column; } /* El cobalto de la marca corporativa: aparece una sola vez en todo el producto, justo donde el usuario llega desde el sitio público. */ .ms-login-franja { height: 5px; background: var(--marca-cobalto); } .ms-login-marca-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 34px; padding: 56px 60px; } .ms-login-logo { display: flex; align-items: center; gap: 12px; } .ms-login-logo-marca { width: 42px; height: 42px; border-radius: 11px; background: var(--accion); color: var(--accion-tinta); display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: 17px; font-weight: 700; } .ms-login-logo-nombre { font-family: var(--fuente-titulo); font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; } .ms-login-logo-sub { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--chrome-texto-apoyo); margin-top: 2px; } .ms-login-lema { font-family: var(--fuente-titulo); font-size: var(--titulo-2); line-height: 1.2; letter-spacing: -.01em; margin: 0; } .ms-login-etiqueta { display: block; font-size: var(--texto-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--chrome-texto-apoyo); margin-bottom: 10px; } .ms-login-cumplimiento ul { margin: 0; padding-left: 18px; color: var(--chrome-texto-2); font-size: var(--texto-chico); } .ms-login-cumplimiento li { margin-bottom: 6px; } .ms-login-pie { margin-top: auto; display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--texto-micro); color: var(--chrome-texto-apoyo); } /* ---- columna del formulario ---- */ .ms-login-forma { display: grid; place-items: center; padding: 40px 24px; background: var(--fondo); } .ms-login-caja { width: 100%; max-width: 400px; } .ms-login-titulo { font-family: var(--fuente-titulo); font-size: var(--titulo-2); margin: 0 0 24px; } .ms-login-campos { display: flex; flex-direction: column; gap: 18px; } .ms-login-password { position: relative; } .ms-login-password .form-control { padding-right: 74px; } .ms-login-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 4px 8px; font-size: var(--texto-chico); } .ms-login-olvido { display: inline-block; margin-top: 8px; font-size: var(--texto-chico); } .ms-login-entrar { width: 100%; padding: 11px; font-size: var(--texto-base); } /* El error nunca depende solo del color: lleva figura, borde y fondo. */ .ms-login-error { display: flex; align-items: flex-start; gap: 9px; background: var(--error-fondo); border: 1px solid var(--error); border-radius: var(--radio-control); color: var(--error-tinta); font-weight: 600; font-size: var(--texto-chico); padding: 11px 13px; margin-bottom: 18px; } .ms-login-error-figura { font-family: var(--fuente-cifra); font-weight: 700; } /* ---- quién usó esta computadora ---- */ .ms-login-recientes { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linea); } .ms-login-recientes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ms-login-recientes li { display: flex; align-items: center; gap: 11px; } .ms-login-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radio-pastilla); background: var(--accion-tenue); color: var(--accion-texto); display: grid; place-items: center; font-size: var(--texto-micro); font-weight: 700; } .ms-login-reciente-nombre { display: block; font-size: var(--texto-chico); font-weight: 600; color: var(--texto); } .ms-login-reciente-cuando { display: block; font-size: var(--texto-micro); color: var(--texto-apoyo); } .ms-login-nota { margin: 14px 0 0; font-size: var(--texto-micro); color: var(--texto-apoyo); line-height: 1.5; } .ms-login-version { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: var(--texto-micro); color: var(--texto-apoyo); } /* ============================================================================ PÁGINAS SUELTAS Una sola columna, sin el armazón de la aplicación: «no encontrado», ayuda y recuperación de contraseña. Las tres se ven iguales entre sí a propósito —quien cae en cualquiera de ellas ya venía perdido, y la forma repetida le confirma que sigue en el mismo sistema— y las tres se ven CALLADAS, sin color de alarma: aquí no hay nada clínico que codificar, así que el color no significa nada. Cuando exista el armazón de verdad (la pantalla «Navegación» de la maqueta), «no encontrado» y «ayuda» deberían mostrarse DENTRO de él para quien tenga sesión, y quedarse así solo para quien no la tenga. ========================================================================== */ .ms-suelta { display: grid; place-items: center; min-height: 100vh; padding: 48px 24px; background: var(--fondo); } .ms-suelta-caja { width: 100%; max-width: 520px; } .ms-suelta-marca { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; text-decoration: none; } .ms-suelta-marca-inicial { width: 34px; height: 34px; border-radius: 9px; background: var(--accion); color: var(--accion-tinta); display: grid; place-items: center; font-family: var(--fuente-cifra); font-size: 14px; font-weight: 700; } .ms-suelta-marca-nombre { font-family: var(--fuente-titulo); font-size: var(--titulo-4); font-weight: 600; letter-spacing: -.01em; color: var(--texto); } .ms-suelta-titulo { font-size: var(--titulo-2); margin: 0 0 12px; } .ms-suelta-texto { font-size: var(--texto-base); line-height: 1.6; color: var(--texto-2); margin: 0 0 24px; } .ms-suelta-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } /* ---- bloques de contenido (ayuda, recuperación) ---- */ .ms-suelta-bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 20px 22px; margin-bottom: 14px; } .ms-suelta-bloque h2 { font-size: var(--titulo-4); margin: 0 0 10px; } .ms-suelta-bloque p { font-size: var(--texto-chico); line-height: 1.6; color: var(--texto-2); margin: 0 0 10px; } .ms-suelta-bloque p:last-child { margin-bottom: 0; } /* Teléfonos, folios, versiones: cifras que se leen en voz alta o se copian, y por eso van en la fuente tabular y con el contraste alto. */ .ms-suelta-dato { font-family: var(--fuente-cifra); font-weight: 600; color: var(--texto); white-space: nowrap; } .ms-suelta-nota { margin: 24px 0 0; font-size: var(--texto-micro); line-height: 1.5; color: var(--texto-apoyo); } .ms-suelta-pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: var(--texto-micro); color: var(--texto-apoyo); } /* ============================================================================ PANTALLA DE CATÁLOGO — listado, filtros y paginación ESTO NO ES CSS DE PRONÓSTICOS. Es el armazón de las ~40 pantallas de catálogo que vienen del GIN, y lo que se escriba aquí se va a ver cuarenta veces. Antes de tocar una regla, comprueba qué pantalla la usa además de la que tienes delante. Lo que YA estaba resuelto en medisuite-tokens.css y NO se repite aquí: .tabla cabecera, celdas, densidad, hover, selección .b1 .b2 .b3 los tres niveles de botón, con sus cuatro estados .bi botón de ícono con tooltip inmediato, para acciones de fila .es-inerte deshabilitado, con cursor:not-allowed .b2.destructivo borrar, que es variante del secundario y nunca del primario Si necesitas algo de eso, úsalo; no lo vuelvas a declarar con otro nombre. ========================================================================== */ .ms-pantalla { padding: 22px 26px 40px; } /* La cabecera lleva una regla de 2 px del color del texto, no una línea gris: marca dónde termina el encabezado y empieza el trabajo. Es lo que sostiene la jerarquía cuando debajo hay una barra de filtros y una tabla, que son dos bloques con mucho borde y tienden a competir. */ .ms-pantalla-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--texto); } .ms-miga { display: flex; gap: 7px; align-items: center; margin-bottom: 6px; font-size: var(--texto-micro); color: var(--texto-apoyo); } .ms-miga-actual { color: var(--texto); font-weight: 600; } /* Volver al listado desde la edición es una MIGA, no un botón: es navegación dentro de la misma pantalla, y ponerlo como botón lo pondría a competir con Guardar y Cancelar, que sí son decisiones. */ .ms-miga button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accion-texto); text-decoration: underline; cursor: pointer; } .ms-pantalla-titulo { margin: 0; font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--titulo-2); line-height: 1.15; letter-spacing: -.01em; } .ms-pantalla-sub { margin: 5px 0 0; font-size: var(--texto-chico); color: var(--texto-2); } .ms-pantalla-acciones { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } /* ---------------------------------------------------------------- filtros -- */ .ms-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px 0; } .ms-buscador { position: relative; flex: 1 1 250px; max-width: 340px; } .ms-buscador input { width: 100%; padding: 10px 34px; border-radius: var(--radio-control); border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); font: inherit; font-size: 15px; box-shadow: var(--sombra); } .ms-buscador-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--linea-decorativa); font-size: 13px; pointer-events: none; } .ms-buscador-limpiar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--texto-apoyo); font-size: 15px; line-height: 1; cursor: pointer; } .ms-buscador-limpiar:hover { background: var(--superficie-hundida); color: var(--texto); } /* «Mostrar inactivos» y compañía. Es una casilla de verdad, no un interruptor pintado: se lee con lector de pantalla y se marca con la barra espaciadora. */ .ms-casilla { display: inline-flex; align-items: center; gap: 8px; font-size: var(--texto-chico); font-weight: 600; color: var(--texto-2); cursor: pointer; user-select: none; } .ms-casilla input { width: 17px; height: 17px; accent-color: var(--accion); cursor: pointer; } /* El conteo se va a la derecha del todo. Va con cifras tabulares porque cambia al teclear en el buscador, y sin ellas el número baila de ancho en cada letra. */ .ms-conteo { margin-left: auto; font-size: var(--texto-chico); color: var(--texto-2); } .ms-conteo b { color: var(--texto); font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------- tabla -- */ .ms-tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); overflow: hidden; } /* EL SCROLL ANCHO VA AQUÍ, EN LA PANTALLA, Y NO EN EL ARMAZÓN. Darle overflow al área de contenido la convierte en contenedor de scroll y rompe el position:sticky que la Agenda necesita para su panel lateral. Sin este envoltorio, una tabla que no cabe empuja el ancho del DOCUMENTO: aparece una franja a la derecha, la barra negra deja de llegar al borde y parece un fallo del armazón. Ver la sección 3.6 del documento de traspaso. */ .ms-tabla-scroll { overflow-x: auto; } .ms-tabla-scroll .tabla { min-width: 720px; } /* La columna de acciones se pega a la derecha y no se parte: son cuatro botones de 36 px y en cuanto envuelven, el renglón crece y la tabla pierde su ritmo. */ .ms-acciones-fila { display: inline-flex; gap: 5px; justify-content: flex-end; white-space: nowrap; } .tabla td.ms-celda-acciones, .tabla th.ms-celda-acciones { text-align: right; width: 1%; white-space: nowrap; } /* Un registro inactivo se atenúa PERO SIGUE LEGIBLE y sigue siendo pulsable: atenuar no es impedir, y el usuario lo pidió ver a propósito con la casilla. La palabra «Inactivo» va escrita en su propia columna — la opacidad sola no se ve en una captura ni la oye un lector de pantalla. */ .tabla tbody tr.ms-fila-inactiva td { color: var(--texto-apoyo); } .ms-etiqueta-inactivo { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radio-pastilla); padding: 2px 10px; background: var(--superficie-inerte); border: 1px solid var(--linea); color: var(--texto-2); font-size: var(--texto-micro); font-weight: 700; white-space: nowrap; } /* Estado vacío. Dice POR QUÉ está vacío: no es lo mismo un catálogo recién creado que una búsqueda sin coincidencias, y la salida de cada uno es distinta —dar de alta, o borrar el filtro—. */ .ms-vacio { padding: 44px 24px; text-align: center; color: var(--texto-2); } .ms-vacio-titulo { margin: 0 0 6px; font-family: var(--fuente-titulo); font-size: var(--titulo-4); color: var(--texto); } .ms-vacio p { margin: 0 auto; max-width: 46ch; font-size: var(--texto-chico); } .ms-vacio .b1, .ms-vacio .b2, .ms-vacio .b3 { margin-top: 16px; } /* ------------------------------------------------------------ paginación -- */ .ms-pie-tabla { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; background: var(--superficie-hundida); border-top: 1px solid var(--linea); font-size: var(--texto-chico); color: var(--texto-2); } .ms-pie-tabla b { color: var(--texto); font-family: var(--fuente-cifra); font-variant-numeric: tabular-nums; } .ms-paginas { margin-left: auto; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .ms-pagina { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto-2); font-family: var(--fuente-cifra); font-size: 13.5px; font-weight: 700; cursor: pointer; } .ms-pagina:hover:not(:disabled) { background: var(--superficie-hundida); color: var(--texto); } .ms-pagina[aria-current="page"] { background: var(--accion); border-color: var(--accion); color: var(--accion-tinta); } .ms-pagina:disabled { background: var(--superficie-inerte); border-color: var(--linea); color: var(--texto-inerte); cursor: not-allowed; } /* Separador de páginas salteadas. No es un botón y no debe parecerlo. */ .ms-paginas-hueco { padding: 0 4px; color: var(--texto-apoyo); font-family: var(--fuente-cifra); } .ms-por-pagina { display: flex; align-items: center; gap: 8px; } .ms-por-pagina select { padding: 6px 9px; border-radius: 8px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--texto-chico); font-weight: 600; } /* En teléfono el pie se apila: en horizontal se come tres renglones de alto y en pantalla de catálogo lo escaso es el alto, igual que en la Agenda. */ @media (max-width: 640px) { .ms-pie-tabla { flex-direction: column; align-items: stretch; } .ms-paginas { margin-left: 0; justify-content: center; } .ms-conteo { margin-left: 0; } } /* ============================================================================ AVISOS — el resultado de una operación, dicho en la pantalla Salen de Resultado.MensajeUsuario, que ya viene redactado para una persona: el texto del backend se quedó en el log. Ver Servicios/ClienteApi.cs. La figura (X, palomita, admiración) va ADEMÁS del color, no en su lugar: en blanco y negro, con daltonismo o en una captura mal expuesta, el color solo no dice nada. ========================================================================== */ .ms-aviso { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 13px 16px; border-radius: 12px; border: 1px solid; border-left-width: 4px; font-size: var(--texto-chico); line-height: 1.45; color: var(--texto); } .ms-aviso-figura { font-family: var(--fuente-cifra); font-weight: 700; font-size: 17px; line-height: 1.3; flex: none; } .ms-aviso.es-error { background: var(--error-fondo); border-color: var(--error); } .ms-aviso.es-error .ms-aviso-figura { color: var(--error-tinta); } .ms-aviso.es-exito { background: var(--exito-fondo); border-color: var(--exito); } .ms-aviso.es-exito .ms-aviso-figura { color: var(--exito-tinta); } .ms-aviso.es-atencion { background: var(--tipo-sin-clasificar-fondo); border-color: var(--atencion); } .ms-aviso.es-atencion .ms-aviso-figura { color: var(--atencion); } .ms-aviso-cerrar { margin-left: auto; background: none; border: 0; padding: 0 2px; color: var(--texto-2); font-size: 16px; line-height: 1; cursor: pointer; } /* ============================================================================ CUADRO DE DIÁLOGO — la edición de formularios cortos (Dialogo.razor) ⚠️ SE LLAMA .ms-cuadro Y NO .ms-dialogo A PROPÓSITO. NO LO RENOMBRES. La Agenda ya tenía sus propias .ms-dialogo* desde antes (arriba en este mismo archivo, «diálogo de cita»), y son OTRA ESTRUCTURA: allí el fondo y el diálogo son HERMANOS, los dos position:fixed, con z-index 90 y 91. Aquí el diálogo es HIJO del fondo y el apilamiento lo resuelve el anidamiento. Cuando estas reglas se llamaban igual, ganaban las de aquí por ir después en el archivo: el fondo de la Agenda se llevó el z-index 1100 de esta sección y pasó a pintarse ENCIMA de su propio diálogo. El resultado era una «Nueva cita» velada y con la caja más estrecha, y NO HAY NINGÚN ERROR EN CONSOLA que lo señale — el CSS no avisa de nada, sólo se ve raro. Pasó el 7 de agosto de 2026. Si algún día EditorDeCita se migra a este componente, entonces sí: se borran las .ms-dialogo* de arriba y se puede recuperar el nombre. Antes no. NO ES EL MODAL DE BOOTSTRAP, y no por gusto: el de Bootstrap necesita su JS y una llamada por interop para abrirse y cerrarse. Aquí la pantalla ya es interactiva y basta con no renderizarlo. Es la misma decisión que tomó EditorDeCita en la Agenda, y por las mismas razones. CUÁNDO DIÁLOGO Y CUÁNDO PANTALLA COMPLETA: diálogo para formularios de unos pocos campos que se despachan de una vez; pantalla completa cuando hay pestañas, secciones o algo que se lee mientras se llena. Un formulario largo dentro de un diálogo obliga a hacer scroll en una caja que flota, y se pierde la referencia de dónde está uno. ========================================================================== */ .ms-cuadro-fondo { position: fixed; inset: 0; background: rgb(22 33 30 / 45%); display: grid; place-items: center; padding: 20px; z-index: 1100; } .ms-cuadro { width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-alta); } .ms-cuadro-cabeza { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--linea); } .ms-cuadro-titulo { margin: 0; font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--titulo-4); line-height: 1.2; } .ms-cuadro-sub { margin: 4px 0 0; font-size: var(--texto-micro); color: var(--texto-apoyo); } .ms-cuadro-cerrar { margin-left: auto; width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; color: var(--texto-2); font-size: 18px; line-height: 1; cursor: pointer; } .ms-cuadro-cerrar:hover { background: var(--superficie-hundida); color: var(--texto); } .ms-cuadro-cuerpo { padding: 18px 22px; overflow-y: auto; } .ms-cuadro-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--linea); background: var(--superficie-hundida); border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta); } .ms-pie-derecha { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* LA CONFIRMACIÓN SUSTITUYE AL PIE, no se abre encima. Un segundo diálogo sobre el primero se cierra con un Escape mal dado y nunca queda claro cuál responde; además deja un «Guardar» pulsable al lado mientras el usuario decide si borra. Es la misma solución que la cancelación de citas en EditorDeCita. */ .ms-cuadro-pie.es-confirmacion { background: var(--error-fondo); border-top-color: var(--error); align-items: flex-start; flex-direction: column; gap: 12px; } .ms-confirmacion-texto { font-size: var(--texto-chico); line-height: 1.45; color: var(--texto); } .ms-confirmacion-texto strong { font-weight: 700; } .ms-confirmacion-botones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; } .ms-cuadro.es-amplio { max-width: min(1100px, 92vw); } /* En teléfono el diálogo se pega abajo y ocupa el ancho: centrado se queda flotando lejos del pulgar, que es donde están los botones que hay que pulsar. */ @media (max-width: 560px) { .ms-cuadro-fondo { padding: 0; place-items: end stretch; } .ms-cuadro, .ms-cuadro.es-amplio { max-width: none; max-height: 92vh; border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; } } /* ============================================================================ CAMPOS DE FORMULARIO Rejilla de 12 columnas, etiqueta arriba. No se usa la de Bootstrap: la maqueta pone la etiqueta encima y a 14 px, y replicar eso con .row/.col acaba siendo más CSS que escribirlo directo. ========================================================================== */ .ms-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .ms-campo { display: flex; flex-direction: column; gap: 6px; grid-column: span 12; } .ms-campo.c-3 { grid-column: span 3; } .ms-campo.c-4 { grid-column: span 4; } .ms-campo.c-5 { grid-column: span 5; } .ms-campo.c-6 { grid-column: span 6; } .ms-campo.c-8 { grid-column: span 8; } /* Abajo de 640 px todo pasa a una columna: dos campos a 4 columnas en un teléfono dejan cajas de 90 px donde no cabe ni un nombre. */ @media (max-width: 640px) { .ms-campo[class*="c-"] { grid-column: span 12; } } .ms-campo label { font-size: var(--texto-chico); font-weight: 650; color: var(--texto); } /* El asterisco de obligatorio va en color de error y acompañado de texto para lector de pantalla: un símbolo solo no dice qué significa a quien no conozca la convención. */ .ms-campo-obligatorio { color: var(--error-tinta); } .ms-campo input, .ms-campo textarea, .ms-campo select { padding: 11px 13px; border-radius: var(--radio-control); border: 1px solid var(--linea-fuerte); background: var(--superficie-hundida); color: var(--texto); font: inherit; font-size: 15.5px; width: 100%; } .ms-campo textarea { min-height: 76px; resize: vertical; } /* Campo con error: borde de 2 px Y fondo Y mensaje escrito debajo. Tres señales, porque el color del borde solo se pierde en cuanto el campo tiene el foco. */ .ms-campo.es-invalido input, .ms-campo.es-invalido textarea, .ms-campo.es-invalido select { border: 2px solid var(--error); background: var(--error-fondo); } .ms-campo-error { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; font-weight: 600; color: var(--error-tinta); } .ms-campo-error::before { content: "\2715"; font-family: var(--fuente-cifra); font-weight: 700; } .ms-campo-ayuda { font-size: var(--texto-micro); color: var(--texto-apoyo); } /* Casilla dentro de un formulario: ocupa su renglón y la etiqueta va al lado, no encima, porque aquí la etiqueta ES la pregunta. */ .ms-campo.es-casilla { flex-direction: row; align-items: center; gap: 10px; } .ms-campo.es-casilla input { width: 18px; height: 18px; padding: 0; accent-color: var(--accion); cursor: pointer; } .ms-campo.es-casilla label { font-weight: 600; cursor: pointer; } /* ============================================================================ PANTALLA DE CONFIGURACIÓN — una sola cosa que se edita entera Distinta de la de catálogo: no hay colección que paginar ni buscar, hay UNA configuración por consultorio y se guarda de golpe. Reusa .ms-pantalla, .ms-tarjeta, .ms-tabla-scroll y .tabla; lo de aquí es sólo lo que falta. ========================================================================== */ /* Rótulo de sección entre dos tarjetas. Va en serif y pequeño para que no compita con el h1 de la cabecera: son divisiones del trabajo, no títulos. */ .ms-seccion { margin: 24px 0 10px; font-family: var(--fuente-titulo); font-weight: 600; font-size: var(--titulo-4); line-height: 1.2; color: var(--texto); } .ms-seccion-con-accion { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ms-seccion-con-accion .ms-seccion { margin-bottom: 0; } /* Casilla dentro de una tabla. 18 px y no los 13 del navegador: es el control que se pulsa 22 veces seguidas en esta pantalla, y el objetivo por omisión obliga a apuntar. El accent-color la pinta con el verde del sistema en vez de con el azul del navegador. */ .ms-casilla-tabla { width: 18px; height: 18px; accent-color: var(--accion); cursor: pointer; } /* La etiqueta del renglón también marca la casilla: en una tabla de 22 filas, poder pulsar el nombre del campo es la diferencia entre apuntar a 18 px y apuntar a un renglón entero. */ .tabla td label { display: block; cursor: pointer; } /* Pie de guardado pegado abajo. En una pantalla larga —22 casillas más la tabla de campos adicionales— el botón de la cabecera se sale del alto visible en cuanto alguien baja a tocar algo, y volver arriba para guardar es donde se pierde el trabajo. La sombra hacia arriba es lo que lo despega del contenido: sin ella, pegado sobre una tabla, parece el último renglón. */ .ms-pie-guardado { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 13px 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: 0 -6px 24px -14px rgb(22 33 30 / 35%); } .ms-pie-guardado-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* EL AVISO DE CÓMO FUE VIVE AQUÍ, junto al botón que lo provocó. Salió de un fallo real: el aviso estaba en la cabecera y el botón en esta barra pegada abajo. Para desactivar el último campo adicional hay que bajar hasta el final, el guardado fallaba, y el mensaje se pintaba 900 px por encima del pliegue — el usuario veía una pantalla en la que aparentemente no pasó nada. Le quitamos el margen superior porque dentro de la barra ya hay gap: el que trae .ms-aviso está pensado para separarlo del contenido de la página. */ .ms-pie-guardado .ms-aviso { margin-top: 0; } /* En impresión no pinta nada: son botones. */ @media print { .ms-pie-guardado { display: none; } } /* ---- Tarjeta que contiene un formulario, no una tabla -------------------- */ /* .ms-tarjeta no trae relleno porque su caso normal es envolver una tabla, que pone el suyo en las celdas. Un formulario sí lo necesita. */ .ms-tarjeta-forma { padding: 20px 22px; } /* ---- Etiqueta de estado en la cabecera ---------------------------------- */ /* «Configurado» / «Sin configurar». Va en la cabecera porque es lo primero que alguien quiere saber al abrir una pantalla de ajustes, y responde antes de leer un solo campo. El verde no va solo: la palabra lo dice. */ .ms-etiqueta-estado { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radio-pastilla); padding: 4px 12px; background: var(--superficie-inerte); border: 1px solid var(--linea); color: var(--texto-2); font-size: var(--texto-micro); font-weight: 700; white-space: nowrap; } .ms-etiqueta-estado::before { content: "○"; font-family: var(--fuente-cifra); } .ms-etiqueta-estado.es-listo { background: var(--exito-fondo); border-color: var(--exito); color: var(--exito-tinta); } .ms-etiqueta-estado.es-listo::before { content: "●"; } /* ---- Contraseña --------------------------------------------------------- */ /* Cuando ya hay una guardada NO se pinta un campo con puntitos: un campo relleno invita a creer que ahí está la contraseña, y para que lo estuviera habría que habérsela mandado al navegador. Se dice que existe y se ofrece cambiarla. */ .ms-contrasena-guardada { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 13px; border-radius: var(--radio-control); border: 1px solid var(--linea); background: var(--superficie-inerte); font-size: var(--texto-chico); color: var(--texto-2); } .ms-contrasena-campo { position: relative; } .ms-contrasena-campo input { width: 100%; padding: 11px 44px 11px 13px; border-radius: var(--radio-control); border: 1px solid var(--linea-fuerte); background: var(--superficie-hundida); color: var(--texto); font: inherit; font-size: 15.5px; /* Monoespaciada: estas claves son de 16 letras sin sentido, y en proporcional una l y una I son la misma cosa. */ font-family: var(--fuente-cifra); letter-spacing: .04em; } .ms-contrasena-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; color: var(--texto-2); font-size: 15px; cursor: pointer; } .ms-contrasena-ver:hover { background: var(--superficie); color: var(--texto); } /* ============================================================================ PESTAÑAS — pantallas de edición largas (Pestanas.razor) No es el nav-tabs de Bootstrap: ése necesita su JS. La pestaña activa se subraya con una barra de 3 px del color de acento y se pone en negrita, dos señales para no depender del color solo. ========================================================================== */ .ms-pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 18px; border-bottom: 1px solid var(--linea); } .ms-pestana { display: inline-flex; align-items: center; gap: 8px; border: 0; border-bottom: 3px solid transparent; background: none; padding: 11px 15px; font: inherit; font-size: 15px; font-weight: 500; color: var(--texto-2); cursor: pointer; /* -1 px para que la barra se monte sobre el borde del contenedor y no quede un hilo gris entre las dos. */ margin-bottom: -1px; } .ms-pestana:hover { color: var(--texto); } .ms-pestana.es-activa { border-bottom-color: var(--accion); color: var(--texto); font-weight: 700; } /* Cuántos campos hay por corregir en esa pestaña. Es lo que evita el peor momento de un formulario con pestañas: «revisa los campos» sin decir en cuál. */ .ms-pestana-errores { font-family: var(--fuente-cifra); font-size: 11.5px; font-weight: 700; background: var(--error); color: #FFFFFF; border-radius: var(--radio-pastilla); padding: 1px 7px; } /* La tarjeta que va pegada bajo las pestañas pierde el borde de arriba y las esquinas superiores: es la misma superficie, no una caja aparte. */ .ms-tarjeta-pestanas { border-top: 0; border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta); } /* ============================================================================ LISTAS EDITABLES — teléfonos, días especiales Renglones que se agregan y se quitan dentro de un formulario. No son tabla: el número de columnas cambia según lo que tenga marcado cada renglón. ========================================================================== */ .ms-lista-editable { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } /* ---- medicamentos de la receta ---- */ .ms-consulta-meds { margin: 0 0 10px; padding: 0; list-style: none; counter-reset: medicamento; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; } .ms-consulta-med { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; counter-increment: medicamento; } .ms-consulta-med + .ms-consulta-med { border-top: 1px solid var(--linea); } .ms-consulta-med-texto { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ms-consulta-med-nombre { margin: 0; font-size: var(--texto-base, 14px); } .ms-consulta-med-nombre::before { content: counter(medicamento) ". "; color: var(--texto-apoyo); } .ms-consulta-med-nombre span { color: var(--texto-apoyo); margin-left: 6px; } .ms-consulta-med-nombre .ms-etiqueta-estado { margin-left: 10px; } .ms-consulta-med-detalle { margin: 0; font-size: var(--texto-chico, 13px); color: var(--texto-apoyo); overflow-wrap: anywhere; } .ms-consulta-med-falta { margin: 0; font-size: var(--texto-chico, 13px); color: var(--atencion-tinta); } .ms-medicamento-controlado { margin-top: 10px; } /* ---- evolución: tendencias y gráficas ---- */ .ms-tendencia { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--texto-chico, 13px); color: var(--texto-apoyo); } .ms-grafica-mini { width: 96px; height: 22px; flex: none; } .ms-grafica-mini polyline { fill: none; stroke: var(--accion); stroke-width: 1.5; } .ms-grafica-mini circle { fill: var(--accion); } .ms-grafica { margin: 0 0 18px; } .ms-grafica figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--texto-chico, 13px); margin-bottom: 4px; } .ms-grafica-rango { color: var(--texto-apoyo); white-space: nowrap; } .ms-grafica svg { width: 100%; height: auto; display: block; } .ms-grafica .serie { fill: none; stroke: var(--accion); stroke-width: 2; } .ms-grafica .serie.segunda { stroke: var(--texto-apoyo); stroke-dasharray: 4 3; } .ms-grafica circle { fill: var(--accion); } .ms-grafica .eje { stroke: var(--linea); } .ms-grafica-fechas { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-apoyo); margin-top: 2px; } .ms-evolucion-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); column-gap: 32px; } @media (max-width: 560px) { .ms-evolucion-rejilla { grid-template-columns: 1fr; } } .ms-evolucion-fotos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .ms-evolucion-foto { flex: 0 0 150px; margin: 0; } .ms-evolucion-foto img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px; display: block; } .ms-evolucion-foto figcaption { font-size: var(--texto-chico, 13px); color: var(--texto-apoyo); display: flex; flex-direction: column; margin-top: 3px; } /* ---- fotos de la consulta ---- */ .ms-consulta-fotos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .ms-consulta-foto { width: 180px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--linea); border-radius: 10px; padding: 8px; } .ms-consulta-foto img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; display: block; } .ms-consulta-foto input { width: 100%; font-size: var(--texto-chico, 13px); } .ms-consulta-foto .b3 { align-self: flex-start; } .ms-opciones-impresion { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .ms-lista-faltantes { margin: 10px 0; padding-left: 20px; font-size: var(--texto-chico, 13px); line-height: 1.6; } .ms-renglon-editable { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie-hundida); } /* El select entró el 10 de agosto de 2026 con los teléfonos de Pacientes: el renglón lleva número Y tipo, y un desplegable crudo junto a una caja estilizada se ve roto. */ .ms-ia-acciones { flex-basis: 100%; } .ms-ia { flex-basis: 100%; margin-top: 4px; padding: 12px 14px; border: 1px dashed var(--linea-fuerte); border-radius: 10px; background: var(--superficie); font-size: var(--texto-chico, 13px); line-height: 1.5; } .ms-ia-etiqueta { margin: 0 0 10px; font-size: var(--texto-micro, 12px); font-weight: 650; color: var(--texto-apoyo); } .ms-ia-urgencia { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--linea); border-radius: 999px; font-size: var(--texto-micro, 12px); font-weight: 700; margin-bottom: 10px; } .ms-ia-urgencia.es-urgente { color: var(--error-tinta); border-color: var(--error); background: var(--error-fondo); } .ms-ia-urgencia.es-pronto { color: var(--atencion-tinta); border-color: var(--atencion); background: var(--atencion-fondo); } .ms-ia-urgencia.es-rutina { color: var(--exito-tinta); border-color: var(--exito); background: var(--exito-fondo); } .ms-ia-resumen { margin: 0 0 10px; } .ms-ia-hallazgos { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .ms-ia-hallazgo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 5px 8px; border-radius: 8px; background: var(--superficie-hundida); } .ms-ia-marca { flex: none; min-width: 92px; font-weight: 650; font-size: var(--texto-micro, 12px); color: var(--texto-apoyo); } .ms-ia-hallazgo.es-alto .ms-ia-marca { color: var(--error-tinta); } .ms-ia-hallazgo.es-bajo .ms-ia-marca { color: var(--atencion-tinta); } .ms-ia-hallazgo.es-normal .ms-ia-marca { color: var(--exito-tinta); } .ms-ia-prueba { font-weight: 600; } .ms-ia-valor { white-space: nowrap; } .ms-ia-referencia { color: var(--texto-apoyo); font-size: var(--texto-micro, 12px); } .ms-ia-subtitulo { margin: 0 0 4px; font-weight: 650; } .ms-ia-lista { margin: 0 0 10px; padding-left: 20px; } .ms-ia-paciente { margin: 0; color: var(--texto-apoyo); } .ms-renglon-editable input[type="text"], .ms-renglon-editable input[type="date"], .ms-renglon-editable textarea, .ms-renglon-editable select { padding: 8px 11px; border-radius: 8px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); font: inherit; font-size: 15px; } /* Un desplegable de hora es un dato corto y siempre del mismo ancho: dejarlo crecer al 100 % dejaría cajas de 400 px para «08:00». */ .ms-select-hora { width: auto; min-width: 92px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); font: inherit; font-family: var(--fuente-cifra); font-size: 14px; } .ms-select-hora:disabled { background: var(--superficie-inerte); color: var(--texto-inerte); cursor: not-allowed; } /* Grupo de casillas —roles, por ejemplo— que se leen de un vistazo. NO se llama .ms-opciones: ése ya existe arriba, es de EditorDeCita, y ahí son BOTONES de tipo y duración. Reusar el nombre repetiría el incidente del 7 de agosto de 2026, cuando las .ms-dialogo* nuevas pisaron a las de la Agenda y el velo acabó pintándose encima del diálogo. El CSS no avisa de esto. */ .ms-casillas-grupo { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 11px 13px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie-hundida); } /* Los sueltos dentro de un campo se ven como los demás controles del formulario. */ .ms-campo select, .ms-campo input[type="number"], .ms-campo input[type="date"] { padding: 11px 13px; border-radius: var(--radio-control); border: 1px solid var(--linea-fuerte); background: var(--superficie-hundida); color: var(--texto); font: inherit; font-size: 15.5px; width: 100%; } /* ============================================================================ ESTADO «PEDIR CONFIRMACIÓN» (7) Se agregó el 8 de agosto de 2026, cuando el aviso al paciente pasó del momento de confirmar al de reservar. Una cita cae aquí cuando NO salió ni el correo ni el WhatsApp: nadie le dijo nada al paciente y hay que llamarle. FORMA PROPIA, no un tono distinto del mismo dibujo. «Por confirmar» ya usa trazo discontinuo; éste lleva ADEMÁS una barra ámbar a la izquierda, del color de atención. Los dos se parecen a propósito —los dos esperan respuesta del paciente— pero tienen que poder distinguirse en blanco y negro, que es como se ve la hoja impresa. El ámbar y no el rojo: no es un error, es trabajo pendiente. El rojo está ocupado por «cancelada» y por las urgencias. ========================================================================== */ .ms-agenda-cita[data-estado="PedirConfirmacion"] { border-style: dashed; border-left-style: solid; border-left-width: 5px; border-left-color: var(--atencion); } .ms-agenda-hoy-estado[data-estado="PedirConfirmacion"] { color: var(--atencion); font-weight: 700; } /* En la hoja impresa la marca va en negrita: es la lista de a quién hay que llamar, que es justamente para lo que se imprime la agenda. */ @media print { .ms-hoja-marca[data-estado="PedirConfirmacion"] { font-weight: 700; } } /* ============================================================================ HORARIO SEMANAL DEL MÉDICO — captura por tramos No es tabla y es a propósito: cada día tiene un número DISTINTO de tramos —uno normalmente, dos cuando hay pausa de comida, tres en algún caso— y una tabla obliga a que todos los renglones tengan las mismas celdas. Aquí cada día es una franja con su lista. ========================================================================== */ .ms-horario { display: flex; flex-direction: column; gap: 8px; } .ms-horario-dia { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie-inerte); } /* El día abierto se levanta sobre los cerrados: de un vistazo se ve la semana del médico sin leer una sola hora. */ .ms-horario-dia.es-abierto { background: var(--superficie); border-color: var(--linea-fuerte); } /* Ancho fijo para que las horas de todos los días queden en la misma columna; sin esto, «Miércoles» empuja sus selectores y la semana se lee en zigzag. */ .ms-horario-nombre { width: 150px; flex: none; font-size: var(--texto-chico); font-weight: 650; color: var(--texto); } .ms-horario-tramos { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; } .ms-horario-tramo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* En teléfono el nombre deja de reservar su columna: 150 px de 322 disponibles dejarían los desplegables de hora en 60 px. */ @media (max-width: 640px) { .ms-horario-dia { flex-direction: column; gap: 10px; } .ms-horario-nombre { width: auto; } } /* ========================================================================== DASHBOARD DE ENTRADA · / ========================================================================== Todo lleva el prefijo .ms-inicio- y NINGUNA de estas clases existía antes (comprobado contra el resto del archivo). No es manía: dos bloques con el mismo nombre de clase no dan error de consola ni rompen el build, gana el último, y ya pasó dos veces en dos días — las .ms-dialogo del componente compartido pisaron a las de la Agenda y el velo se pintó encima de su propio diálogo. LA PANTALLA TIENE QUE VERSE BIEN PORQUE ES LA QUE SE ENSEÑA AL VENDER, pero «bien» aquí no es llena de gráficas: es que en tres segundos conteste qué hay que hacer ahora. Lo que la hace verse cara son cuatro cosas —las cifras en serif, las barras de carga, el color con significado clínico, y que el bloque de avisos desaparezca cuando no hay nada roto—, no dónuts ni medidores de aguja. ========================================================================== */ /* El padding es el MISMO de .ms-pantalla, y no por casualidad: el área de contenido no trae ninguno, así que cada pantalla pone el suyo. Sin esto el dashboard arrancaba pegado al borde izquierdo, con el rótulo del día cortado. Se repite el valor en vez de reusar la clase porque .ms-pantalla no es un contenedor flex y aquí el reparto en columna sí hace falta. */ .ms-inicio { display: flex; flex-direction: column; gap: 18px; padding: 22px 26px 40px; } .ms-inicio-cargando { color: var(--texto-apoyo); padding: 40px 0; } /* ---------- Cabecera ---------- */ .ms-inicio-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ms-inicio-rotulo { margin: 0; font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--texto-apoyo); font-weight: 700; } .ms-inicio-titulo { margin: 2px 0 0; font-family: var(--fuente-titulo); font-size: var(--titulo-2); font-weight: 600; color: var(--texto); } .ms-inicio-medico { display: flex; flex-direction: column; gap: 4px; min-width: 240px; } /* ---------- Avisos de configuración ---------- Ámbar y no rojo: no está roto el sistema, está incompleta la configuración, y quien lo lee puede arreglarlo él mismo con un clic. La figura va además del color, como en todo el resto del sistema. */ .ms-inicio-alertas { display: flex; flex-direction: column; gap: 8px; } .ms-inicio-alerta { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--atencion); border-left-width: 4px; border-radius: var(--radio-control); background: var(--atencion-fondo); color: var(--texto); text-decoration: none; } .ms-inicio-alerta:hover { text-decoration: none; box-shadow: var(--sombra); } .ms-inicio-alerta strong { display: block; color: var(--atencion-tinta); } .ms-inicio-alerta-figura { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--atencion); color: var(--tinta-sobre-color); font-weight: 700; font-size: 13px; line-height: 1; } /* ---------- Reparto ---------- La columna de llamadas es fija y estrecha: es una lista de renglones cortos, y dejarla crecer la volvería una tabla. */ .ms-inicio-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; } .ms-inicio-columna, .ms-inicio-lado { display: flex; flex-direction: column; gap: 18px; min-width: 0; } /* ---------- Bloque 1 · La franja de hoy ---------- */ .ms-inicio-franja { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); } .ms-inicio-cifras { display: flex; gap: 28px; flex-wrap: wrap; } .ms-inicio-cifra { display: flex; flex-direction: column; gap: 2px; } /* En serif y con cifras de ancho fijo: es lo que evita que el número baile al pasar de 9 a 10, que es justo cuando alguien lo está mirando. */ .ms-inicio-cifra strong { font-family: var(--fuente-titulo); font-size: var(--titulo-1); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--texto); } .ms-inicio-cifra span { font-size: 12px; color: var(--texto-apoyo); } .ms-inicio-siguiente { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 220px; margin: 0; padding: 10px 14px; text-align: left; border: 1px solid var(--linea); border-left: 4px solid var(--c, var(--linea-fuerte)); border-radius: var(--radio-control); background: var(--superficie-hundida); color: var(--texto); cursor: pointer; } .ms-inicio-siguiente.es-vacio { cursor: default; color: var(--texto-apoyo); } button.ms-inicio-siguiente:hover { background: var(--fila-hover); } .ms-inicio-siguiente-quien { font-size: 15px; } .ms-inicio-siguiente-quien strong { font-variant-numeric: tabular-nums; margin-right: 6px; } .ms-inicio-siguiente-falta { font-size: 12px; color: var(--texto-apoyo); } /* ---------- Tarjetas ---------- Mismo cuerpo que .ms-agenda-tarjeta. No se reusa esa clase porque ataría la agenda a este archivo para cualquier ajuste del dashboard. */ .ms-inicio-tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); overflow: hidden; } .ms-inicio-tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); background: var(--superficie-hundida); } .ms-inicio-tarjeta-cabeza h2 { margin: 0; font-family: var(--fuente-titulo); font-size: var(--titulo-4); font-weight: 600; color: var(--texto); } .ms-inicio-enlace { font-size: 13px; color: var(--accion-texto); } .ms-inicio-cuenta { min-width: 26px; padding: 2px 8px; border-radius: var(--radio-pastilla); background: var(--accion); color: var(--accion-tinta); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } .ms-inicio-vacio { margin: 0; padding: 10px 16px; font-size: 13px; color: var(--texto-apoyo); } /* Va en su propia regla y no junto a la de arriba para que el nombre de clase aparezca UNA sola vez en el archivo: el chequeo de duplicados que pide el traspaso es un grep, y un selector repartido en dos selectores lo hace saltar sin que haya nada mal. */ .ms-inicio-mas { margin: 0; padding: 10px 16px; font-size: 13px; color: var(--texto-apoyo); border-top: 1px solid var(--linea); } /* ---------- Bloque 3 · Por llamar ---------- */ .ms-inicio-grupo { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px 4px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--texto-apoyo); } .ms-inicio-grupo.es-urgente { color: var(--atencion-tinta); } .ms-inicio-grupo.es-urgente span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--atencion); color: var(--tinta-sobre-color); font-size: 11px; } .ms-inicio-grupo-nota { margin: 0; padding: 0 16px 6px; font-size: 12px; color: var(--texto-apoyo); } .ms-inicio-resultado { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-top: 1px solid var(--linea); text-decoration: none; color: var(--texto); font-size: var(--texto-chico, 13px); line-height: 1.4; } .ms-inicio-resultado:first-of-type { border-top: 0; } .ms-inicio-resultado:hover { background: var(--superficie-hundida); } .ms-inicio-resultado > span:last-child { display: flex; flex-direction: column; gap: 2px; } .ms-inicio-resultado-figura { flex: none; color: var(--accion); } .ms-inicio-llamada { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--linea); border-left: 4px solid var(--c, transparent); } .ms-inicio-llamada:hover { background: var(--fila-hover); } .ms-inicio-llamada-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; text-align: left; color: var(--texto); cursor: pointer; } .ms-inicio-llamada-cuando { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; } .ms-inicio-llamada-nombre { font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .ms-inicio-llamada-medico { font-size: 12px; color: var(--texto-apoyo); } .ms-inicio-llamada-acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* El teléfono es un enlace tel: y tiene que PARECERLO: es lo que se pulsa para llamar, y es la razón de ser de este bloque. */ .ms-inicio-llamada-tel { font-family: var(--fuente-cifra); font-size: 13px; color: var(--accion-texto); } /* Una cita sin aviso suele serlo porque no hay a dónde avisar. Decirlo evita que recepción la abra sólo para descubrirlo. */ .ms-inicio-llamada-sintel { font-size: 12px; font-style: italic; color: var(--texto-inerte); } .ms-inicio-confirmo { padding: 3px 10px; font-size: 12.5px; } /* ---------- Por revisar: lo que entró por internet ---------- Reusa la anatomía de .ms-inicio-llamada; lo propio son los dos botones y la confirmación inline del rechazo, que SUSTITUYE a las acciones en vez de abrir otro diálogo — misma regla que la cancelación en DetalleDeCita. */ /* El contador en ámbar: es un pendiente que espera decisión, no un total. */ .ms-inicio-cuenta.es-atencion { background: var(--atencion); color: var(--tinta-sobre-color); } .ms-inicio-revisar-botones { display: flex; align-items: center; gap: 8px; } .ms-inicio-revisar-botones .btn { padding: 3px 10px; font-size: 12.5px; } .ms-inicio-revisar-confirmar { padding: 8px 10px; border: 1px solid var(--error); border-radius: var(--radio-control); background: var(--error-fondo); } .ms-inicio-revisar-confirmar p { margin: 0 0 8px; font-size: 12.5px; color: var(--texto); } /* ---------- Bloque 4 · Huecos ---------- */ .ms-inicio-huecos { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; } .ms-inicio-hueco { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-control); background: var(--superficie); color: var(--texto); cursor: pointer; } .ms-inicio-hueco:hover { border-color: var(--accion); background: var(--accion-tenue); } .ms-inicio-hueco strong { font-variant-numeric: tabular-nums; font-size: 14px; } .ms-inicio-hueco span { font-size: 11px; color: var(--texto-apoyo); } /* ---------- Bloque 5 · Carga de 14 días ---------- Sin ejes ni leyenda: la barra se compara con las de al lado, que es la única comparación que le interesa a quien busca a dónde mandar a alguien. El overflow-x va AQUÍ y no en el área de contenido: darle scroll al armazón lo convierte en contenedor de scroll y rompe el position:sticky que la agenda necesita para su panel lateral. */ .ms-inicio-carga { display: flex; align-items: flex-end; gap: 6px; padding: 16px; overflow-x: auto; } .ms-inicio-barra { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; } .ms-inicio-barra-caja { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 68px; border-radius: 4px; background: var(--superficie-hundida); overflow: hidden; } .ms-inicio-barra-relleno { width: 100%; border-radius: 4px 4px 0 0; background: var(--accion); min-height: 2px; } .ms-inicio-barra-dia { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto); } .ms-inicio-barra-letra { font-size: 10px; text-transform: uppercase; color: var(--texto-apoyo); } /* Los cortes son los del selector de fecha de la agenda: 5 o más lleno, 3 o más bastante, 1 o más poco. El color satura conforme se llena; el alto ya dice cuánto. */ .ms-inicio-barra[data-nivel="poco"] .ms-inicio-barra-relleno { background: var(--accion-tenue); border: 1px solid var(--accion); border-bottom: 0; } .ms-inicio-barra[data-nivel="bastante"] .ms-inicio-barra-relleno { background: color-mix(in srgb, var(--accion) 55%, var(--superficie)); } .ms-inicio-barra[data-nivel="lleno"] .ms-inicio-barra-relleno { background: var(--accion); } /* Cerrado se raya y se atenúa, PERO SIGUE PULSÁNDOSE: atenuar no es impedir, y un consultorio agenda fuera de horario más a menudo de lo que admite. */ .ms-inicio-barra[data-nivel="cerrado"] .ms-inicio-barra-caja { background: repeating-linear-gradient(45deg, var(--superficie-hundida) 0 4px, var(--superficie-inerte) 4px 8px); } .ms-inicio-barra[data-nivel="cerrado"] .ms-inicio-barra-dia, .ms-inicio-barra[data-nivel="cerrado"] .ms-inicio-barra-letra { color: var(--texto-inerte); } /* Hoy se marca en la ETIQUETA, no en la barra: la barra ya está diciendo otra cosa —cuánta carga hay— y dos significados en el mismo trazo no se leen ninguno de los dos. */ .ms-inicio-barra[data-hoy="1"] .ms-inicio-barra-dia { font-weight: 700; color: var(--accion-texto); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Pantallas estrechas ---------- La columna de llamadas pasa DEBAJO, no se esconde: es el bloque que más trabajo ahorra y en el teléfono es justo el que se usa. */ @media (max-width: 1100px) { .ms-inicio-rejilla { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .ms-inicio-cifras { gap: 18px; } .ms-inicio-cifra strong { font-size: var(--titulo-3); } .ms-inicio-siguiente { min-width: 100%; } } /* ========================================================================== PACIENTES · /pacientes (fase 1 del porte, 10 de agosto de 2026) Casi todo reusa lo que ya había —.ms-pantalla, .ms-filtros, la tabla, las pestañas, la barra de guardado—. Lo único propio es esto. ========================================================================== */ /* El número de expediente en monoespaciada, como la maqueta: los números se comparan en vertical y con la fuente de texto bailan. */ .ms-expediente { font-family: var(--fuente-cifra); font-size: 13px; letter-spacing: .02em; } /* ========================================================================== CONSULTAS · /consultas (fase 2 del porte, 10 de agosto de 2026) Reusa la pantalla, la tabla, las pestañas y los renglones editables. Lo propio: los candidatos de un buscador (paciente y CIE-10), el chip del IMC y la tarjeta de cada receta. ========================================================================== */ /* Resultados de un buscador con pocas opciones (pacientes, CIE-10): una lista de botones anchos, no un select — se ve el expediente o el codigo junto al nombre antes de elegir. */ .ms-consulta-candidatos { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 300px; overflow-y: auto; } .ms-consulta-candidato { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; text-align: left; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); color: var(--texto); cursor: pointer; } .ms-consulta-candidato:hover { border-color: var(--accion); background: var(--accion-tenue); } /* El IMC calculado, con su clasificacion al lado: la cifra sola obliga a recordar los cortes de memoria. */ .ms-consulta-imc { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie-hundida); } .ms-consulta-imc strong { font-variant-numeric: tabular-nums; font-size: 16px; } .ms-consulta-imc span { font-size: 13px; color: var(--texto-apoyo); } /* El CIE-10 ya elegido: codigo en mono + nombre + quitar. */ .ms-consulta-cie { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie-hundida); } /* Cada receta es una tarjeta dentro de la pestaña: fecha, observaciones y sus medicamentos en renglones editables. */ .ms-consulta-receta { padding: 14px; margin-bottom: 14px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie-hundida); } .ms-consulta-receta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } /* El fieldset que apaga la ficha en solo lectura no debe verse: es mecanica, no diseno. */ .ms-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } /* Los filtros del listado de consultas: el selector de medico y el rango de fechas van con el mismo trazo que el buscador de al lado. El rango se rotula «Del … al …» en texto de apoyo — dos dates sueltos no dicen que son rango. */ .ms-filtro-select, .ms-filtro-fecha input { padding: 9px 11px; border-radius: var(--radio-control); border: 1px solid var(--linea-fuerte); background: var(--superficie-hundida); color: var(--texto); font: inherit; font-size: 14.5px; } .ms-filtro-fecha { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: var(--texto-apoyo); }