/* ========================================================================== FICHA CLINICA DEL MEDICO · /consultas/ficha/ · interfaz v2 Vara: la UI real de Stripe incrustada en /payments y /billing (el panel de checkout, las filas de resumen, las tarjetas de plan). Lado medico: una sola linea de pelo, radios de 4-8px, cero sombra, interlineado comodo y una escalera de tinta corta. Aqui no se viene a admirar la pantalla: se viene a decidir sobre un caso con 41 respuestas, 4 fotos y una bitacora de 40 eventos, y a decidirlo rapido. TODO cuelga de .fmed a proposito. Las hojas de css/v2/ se cargan en TODAS las pantallas (el header las mete con un glob), asi que un selector sin prefijo de aqui se colaria en la pantalla de otro agente. Varias clases que se estilan abajo (.kctp-datos, .kctp-capturas, .kctp-repaso-bloque) las usa tambien el portal del paciente: sin el .fmed delante, este archivo le cambiaria la cara a la mitad del producto. Los tokens (--kctp-*) son del sistema base y no se redefinen aqui. Lo que se arreglo en esta vuelta, por orden de impacto: 1. LA PANTALLA CORRIA 19 PARES tamano/peso distintos (12,48 · 13,12 · 13,28 · 13,6 · 14,08 · 14,4 · 14,72 · 14,88 · 15,04 · 20,8 px...). Salian de 78 estilos en linea en la vista, no de ninguna escala. Se quitaron los 78 y ahora corre 8 pares, todos peldanos del sistema. Es la diferencia mas barata entre "producto" y "plantilla". 2. EN TELEFONO LA PAGINA SE IBA A LO ANCHO (429px de contenido en un viewport de 390). El culpable era una rejilla `auto 1fr`: un correo largo en un
fija el minimo de la columna y empuja la pagina entera. Aqui las dos rejillas llevan minmax(0, …). 3. LA BITACORA ERA UN MURO. Cuarenta filas de dos lineas del mismo peso. Ahora cada evento es "que paso" (verbo en peso medio) y debajo "quien y cuando" en tinta de apoyo, con un punto de linea de tiempo. 4. LA COLUMNA DE DECISION ES EL FORMULARIO DE STRIPE: rotulo pegado encima del campo, bloques separados por una linea discontinua (antes eran
macizos), y en pantalla grande se queda pegada arriba mientras el medico recorre 7.000px de caso. 5. HABIA DOS TITULOS DE 21px EN SERIF ANIDADOS: el del panel "Expediente del paciente" y, dentro, el de cada categoria. Se conserva el del panel y las categorias bajan a rotulo de 15px en peso medio. La jerarquia dentro de un bloque la hacen el peso y el color, no un segundo display. ========================================================================== */ .fmed { /* Ancho de la columna de rotulos de las filas de resumen. Stripe corre etiqueta izquierda / valor derecha con la etiqueta fija. */ --fmed-rotulo: 152px; /* Medida de parrafo. Stripe: 410-490px en columna. A 15px son ~60ch. */ --fmed-medida: 62ch; /* Alto util de una fila de panel denso (Stripe: 22-24px de contenido). */ --fmed-fila-y: 11px; /* ESCALERA DE TINTA DE CUATRO PELDANOS. Medido en vivo antes de esta vuelta: el color mas usado de la pantalla era --kctp-tenue (#7e6a73) con 272 elementos, y la tinta de cuerpo del sistema (#2a1a21) aparecia 36 veces. Es decir: el caso entero -las 41 preguntas del triaje, los nombres de los hallazgos, lo que dice cada linea de la bitacora- estaba pintado en el tinte de APOYO, el que el propio sistema documenta como "4.9:1, el minimo legible". Por eso las capturas se veian lavadas. Stripe corre lo contrario: #425466 (cuerpo) 1.841 veces y #ADBDCC (muy tenue) 70. El contenido va en tinta de contenido; el tenue se reserva para sellos de hora y contadores. Falta un peldano intermedio -el sistema salta de #2a1a21 a #7e6a73 sin escala- y se define aqui, sobre el mismo tono ciruela de la marca. */ --fmed-ink-1: var(--kctp-tinto); /* #260514 titulos y datos decididos */ --fmed-ink-2: var(--kctp-tinta); /* #2a1a21 cuerpo y respuestas */ --fmed-ink-3: #5e4b54; /* preguntas y rotulos (7:1) */ --fmed-ink-4: var(--kctp-tenue); /* #7e6a73 SOLO metadatos */ /* TRES PELDANOS DENTRO DE LA TARJETA DENSA. Medido en vivo antes de esta vuelta, sobre los 465 elementos con texto: el rotulo del grupo ("Sobre ti"), la pregunta ("Que edad tienes?") y la respuesta ("31") corrian los TRES a 15px. Solo los separaba el color, y entre el #260514 del rotulo y el #2a1a21 de la respuesta no hay diferencia que un ojo pueda ver. Es decir: el panel de respuestas -1.895px, el 39% de la pagina- y el del plan tenian jerarquia CERO. Un muro de un solo cuerpo. La vara resuelve esto con tamano y no con color. Medido en el panel de factura incrustado en /billing: el rotulo "Aan" va a 10px en tinta de apoyo, el valor "Klant" a 13px en tinta oscura, y el bloque entero lo encabeza un marcador todavia mas pequeno. Tres cuerpos distintos para tres papeles distintos, y el mas pequeno es el que MANDA. Traido a la escala del sistema (12/13/15/17/21/28), sin inventar un peldano nuevo: marca 12px el marcador de seccion (que bloque estoy leyendo) rotulo 13px la pregunta o la etiqueta (que se pregunto) dato 15px la respuesta (que contesto) El salto rotulo->dato es 1,15x, pero no viaja solo: lo acompanan un peldano de peso (400 -> 500) y dos de tinta (#5e4b54 -> #260514). */ --fmed-t-marca: var(--paso-1); /* 12 */ --fmed-t-rotulo: var(--paso-2); /* 13 */ --fmed-t-dato: var(--paso-3); /* 15 */ } /* ========================================================================== 0. Normalizacion tipografica Medido con getComputedStyle sobre los 465 elementos con texto de la ficha: el cuerpo de 15px corria SEIS interlineados a la vez (21,75 · 23,25 · 24 · 20,25 · 19,5 · 18) y CINCO tracking (-0,06 · -0,09 · -0,12 · -0,078 · normal). El de 13px corria cuatro y tres. Ninguna de esas diferencias es una decision: son herencias de Bootstrap, de `line-height` sueltos y de reglas que se pisan. Una a una no se ven; juntas son exactamente lo que separa un producto de una plantilla, porque el ojo lee el bloque de texto como si estuviera mal compuesto sin saber por que. La regla del sistema es una sola: un interlineado por peldano, inversamente proporcional al tamano. Aqui se fija una vez y las secciones de abajo ya no lo tocan. ========================================================================== */ .fmed, .fmed p, .fmed li, .fmed dt, .fmed dd, .fmed th, .fmed td, .fmed span, .fmed div, .fmed label, .fmed summary, .fmed button, .fmed input, .fmed select, .fmed textarea { letter-spacing: var(--kctp-ls-cuerpo); } /* Cuerpo denso del panel (15px) y micro-copia (13px): un solo interlineado cada uno. 1,55 en el de leer y 1,5 en el de datos, que es el rango comodo de Stripe (1,6 en cuerpo, 1,42 en UI densa) traido a esta escala. */ .fmed .kctp-panel-cuerpo, .fmed .kctp-panel-cuerpo p, .fmed .kctp-panel-cuerpo li, .fmed .kctp-panel-cuerpo dd, .fmed .kctp-panel-cuerpo td { line-height: 1.55; } .fmed .kctp-meta, .fmed .fmed-ayuda, .fmed .fmed-apunte, .fmed .fmed-cuenta, .fmed .fmed-zonas, .fmed .fmed-captura-meta, .fmed .fmed-log-que, .fmed .fmed-log-quien, .fmed .fmed-solicitud-meta, .fmed .fmed-documento-meta, .fmed .kctp-nota-meta { line-height: 1.55; } /* Las pastillas y los sellos son cajas de una linea: ahi el interlineado es alto, no ritmo de lectura, y se queda en 1. */ .fmed .kctp-estado, .fmed .kctp-nivel { line-height: 1; } /* ========================================================================== 0 bis. EL MARCADOR DE SECCION El peldano que faltaba. Dentro de un panel hay bloques -las cinco categorias del cuestionario, las doce del expediente, los dos lados del preanalisis- y hasta ahora cada uno se anunciaba con un rotulo de 15px en peso medio: el MISMO cuerpo que la respuesta que venia debajo. Un rotulo que mide igual que su contenido no lo encabeza, se mezcla con el. La salida no es agrandarlo. Agrandarlo produce un segundo titulo dentro de un panel que ya tiene el suyo en serif de 21px, y dos displays anidados deshacen la jerarquia en vez de hacerla (ya paso en el expediente, seccion 6). La salida es EMPEQUENECERLO y cambiarle el material: 12px, tinta de apoyo, versalita espaciada. Deja de competir con el dato y pasa a ser lo que era: una senal de "aqui empieza otro bloque", como la pestana de una carpeta. SOBRE LAS MAYUSCULAS, QUE EL SISTEMA PROHIBE Y AQUI SE USAN. La regla comun del proyecto es cero versalitas y cero tracking positivo en TITULOS, y esta bien: es lo que abarata los encabezados de plantilla. Pero la vara no las prohibe, las raciona: en /payments hay 866 elementos con texto y exactamente DOS en mayusculas (866 a 2), y los dos son este mismo objeto -el marcador que encabeza el panel de factura incrustado-. Aqui pasa igual: es UNA regla, para UN objeto -el marcador de bloque dentro de un panel denso-, y no toca ni un titulo de panel, ni una etiqueta de campo, ni un boton. Todo lo demas de la pantalla sigue en caja baja. Va con letter-spacing positivo por la misma razon por la que el cuerpo de la vara lleva +0,2px: en versalita las letras se tocan y el tracking es lo que las vuelve legibles a 12px. Es tracking de composicion, no de adorno. ========================================================================== */ .fmed .fmed-grupo-titulo, .fmed .fmed-sub, .fmed .kctp-repaso-cabeza h3 { font-family: var(--kctp-sans); font-size: var(--fmed-t-marca); font-weight: var(--kctp-peso-medio); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--fmed-ink-4); } /* El icono de la categoria del expediente NO encoge con el rotulo: a 12px dejaba de leerse como icono. Se queda en el peldano de la pregunta. */ .fmed .kctp-repaso-cabeza h3 i { font-size: var(--fmed-t-rotulo); letter-spacing: 0; color: var(--kctp-tenue-2); } /* En pantallas muy anchas la ficha deja de estirarse: una tabla de respuestas de 1.400px no se lee, se barre. */ .fmed .kctp-ficha, .fmed .fmed-cabeza, .fmed > .kctp-aviso { max-width: 1280px; } /* LAS DOS COLUMNAS SOLO A PARTIR DE 1200. El sistema las parte en 991, y entre 992 y 1199 pasaba esto, medido en un portatil de 1024: descontando la navegacion quedaban 741px de contenido, la rejilla 2fr/1fr los repartia en 380 y 227, y al panel de la izquierda le quedaban 316px utiles. Con el rotulo de 152 el motivo del caso se leia en una tira de 164px -seis renglones para una frase- y las preguntas del triaje en 177. El caso no cabe en un tercio de pantalla. Por debajo de 1200 va a una sola columna, y la de decision baja detras, que es exactamente lo que ya hacia en telefono. 1200 es ademas el ancho en el que la columna de decision se vuelve pegajosa: las dos columnas existen cuando la de apoyo puede acompanar, no antes. */ @media (max-width: 1199.98px) { .fmed .kctp-ficha { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 2 bis. LA REJILLA TIENE QUE LLEGAR HASTA ABAJO Lo que se veia en la vuelta anterior, medido sobre la captura de pagina entera a 1440: el borde derecho del contenido estaba en x=1407 hasta y=790px, y de ahi hasta el final de los 6.314px en x=1014. Es decir: la composicion a dos columnas duraba el 12% de la pagina y el 88% restante era una tira de 739px con 393px de fondo hueso vacio al lado. La causa no era que la rejilla se cerrara -sigue abierta- sino que la columna de apoyo se QUEDA SIN CONTENIDO: sus paneles miden 353px juntos (49+125+49+49, casi todos plegados) contra los 5.822px de la columna del caso. Una columna que existe pero esta vacia no compone: deja un hueco. Ninguna de las dos varas deja de componer al bajar. Stripe no lleva un riel lateral: cada seccion ocupa el ancho ENTERO y se compone por dentro, con el contenido a un lado y una pieza de UI real al otro. Eso es lo que se hace aqui: · FRANJA DE ARRIBA (filas 1 y 2): sigue a dos columnas, que es el primer viewport y es lo unico que la critica salvo entero. Resumen e Imagenes a la izquierda; la columna de decision a la derecha, cruzando las dos filas y pegajosa dentro de ellas. · DE LA FILA 3 HACIA ABAJO: los cinco paneles del caso (respuestas, expediente, preanalisis, notas y plan) ocupan el ancho entero y se componen por dentro en dos columnas -las secciones 4, 8 y 11-. No queda un solo pixel de franja vacia en los 6.000px de scroll. COMO, EN CSS: `display: contents` disuelve el
envoltorio de la izquierda para que sus siete paneles sean celdas de la rejilla y se puedan colocar uno a uno. El envoltorio de la derecha NO se disuelve: se queda entero como una celda que ocupa `1 / span 2`. Esa es la garantia de que un panel a lo ancho no se pueda meter nunca debajo de la columna de apoyo: la rejilla reserva las dos primeras filas para ella y, si el medico despliega la bitacora de 40 eventos, las filas crecen -no se solapa nada-. `row-gap: 0` a proposito: el aire entre paneles ya lo pone su propio `margin-bottom`, y los hitos su `margin-top` de 48. Con gap de rejilla encima, el ritmo vertical se sumaba dos veces. ========================================================================== */ @media (min-width: 1200px) { .fmed .kctp-ficha { column-gap: var(--kctp-e5); row-gap: 0; } /* El envoltorio de la izquierda desaparece como caja: sus paneles pasan a ser celdas de la rejilla. */ .fmed .kctp-ficha > div:first-child { display: contents; } /* LA FRANJA DE ARRIBA ES UNA FILA, NO DOS. Y esa es toda la correccion. Con dos filas, medido en dos casos reales: la columna del caso sumaba 1.135px (Resumen 475 + Imagenes 636) contra los 751 de la de apoyo -y 345 en un caso ya aprobado, donde el panel de Decision no existe-. Es decir, entre 384 y 516px de fondo hueso colgando debajo del riel, y encima el borde de las tarjetas saltaba de x=1015 a x=1408 a mitad de pagina: 393px de escalon en la MISMA columna, a los 1.400px de scroll, sin nada que lo justificara. Con una sola fila, el riel convive con el panel de Resumen -que es el unico que se lee a la vez que se decide- y el escalon del borde cae EXACTAMENTE donde termina el riel. Deja de ser un salto y pasa a ser el final de una franja: primero la cabecera del caso a dos columnas, despues el caso entero a lo ancho. El hueco que queda es el que separa dos alturas distintas en una fila de dos columnas, que es lo que hace cualquier composicion a dos columnas y no se lee como falta. De regalo, Imagenes gana los 1.132px: las cinco fotos caben en una tira y el panel baja de 636 a 420px. */ .fmed .kctp-ficha > div:first-child > .kctp-panel:first-child { grid-column: 1; grid-row: 1; } /* De la segunda en adelante, el ancho entero. */ .fmed .kctp-ficha > div:first-child > .kctp-panel:nth-child(n+2) { grid-column: 1 / -1; } /* La columna de apoyo ocupa exactamente esa franja. */ .fmed .kctp-ficha > div:last-child { grid-column: 2; grid-row: 1; } } @media (max-width: 991.98px) { /* CABECERA DE PANEL EN TELEFONO. La cabecera es un flex que envuelve: "Respuestas del paciente" ocupaba la primera linea entera y el dato del formulario bajaba a la segunda ARRASTRANDO la flecha con el, asi que el control de plegar aparecia junto a un subtitulo y no junto al titulo al que pertenece. Con la rejilla, la flecha se queda en la columna de la derecha ocupando las dos filas y el dato baja solo. */ .fmed .kctp-panel-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 2px; column-gap: var(--kctp-e3); } .fmed .kctp-panel-cabeza > h3 { grid-column: 1; grid-row: 1; } .fmed .kctp-panel-cabeza > .kctp-flecha { grid-column: 2; grid-row: 1 / -1; } .fmed .kctp-panel-cabeza > :not(h3):not(.kctp-flecha) { grid-column: 1; justify-self: start; } } /* ========================================================================== 1. Cabecera del caso Ritmo de dos velocidades: 4px del enlace de vuelta al nombre (son un bloque), 20px hasta la linea de pelo y 32px de ahi al primer panel. El error tipico es repartir 16px por igual en los tres saltos. ========================================================================== */ .fmed-cabeza { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--kctp-e4) var(--kctp-e5); padding-bottom: var(--kctp-e5); margin: 0 0 var(--kctp-e6); border-bottom: 1px solid var(--kctp-borde); } .fmed-identidad { min-width: 0; } .fmed-atras { display: inline-block; font-size: var(--kctp-t-meta); color: var(--kctp-tenue); text-decoration: none; letter-spacing: 0; transition: color var(--kctp-mov-hover); } .fmed-atras:hover { color: var(--kctp-acento); } /* El titular es lo unico grande de la pantalla y va en peso 400: la jerarquia la da el tamano. A 1440 abre en 28px con interlineado 1.18 y tracking -.022em, que es el escalon "titulo" del sistema. */ .fmed .fmed-titulo { font-family: var(--kctp-serif); font-size: var(--kctp-t-titulo); font-weight: var(--kctp-peso-normal); line-height: var(--kctp-lh-titulo); letter-spacing: var(--kctp-ls-titulo); color: var(--kctp-tinto); margin: var(--kctp-e1) 0 0; overflow-wrap: anywhere; } /* El codigo del caso acompana al nombre, no compite con el: mismo material (la serif), la mitad de cuerpo y en tinta de apoyo. */ .fmed .fmed-codigo { font-size: var(--kctp-t-cuerpo); color: var(--kctp-tenue); letter-spacing: 0; white-space: nowrap; } .fmed-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kctp-e2); } .fmed-acciones form { display: flex; gap: var(--kctp-e2); } /* Pastilla, desplegable y boton en la misma fila: tres alturas distintas se ven como tres piezas de tres sitios. */ .fmed-acciones .form-select { min-height: 34px; } /* El desplegable se encoge al contenido, pero Bootstrap le dibuja la flecha dentro del propio campo: sin reservarle sitio, la flecha cae encima de la ultima palabra ("Nota libre" salia con la punta sobre la "e"). */ .fmed .fmed-corto { width: auto; min-width: 11rem; padding-right: 2.25rem; } /* ========================================================================== 2. Paneles Entre paneles 24px y dentro 20px: es el minimo que deja leer los bordes como separadores de seccion y no como cajas apiladas. ========================================================================== */ .fmed .kctp-panel { margin-bottom: var(--kctp-e5); } .fmed .kctp-panel:last-child { margin-bottom: 0; } /* RITMO DE DOS VELOCIDADES. Siete paneles separados por 24px a lo largo de 7.100px de pagina no son un ritmo: son una lista. El caso se lee en tres fases (ver el caso -> interpretarlo -> escribir sobre el) y el unico material que hace falta para que se noten es aire: 24px entre paneles de la misma fase, 48px donde empieza la siguiente. Sin titulos nuevos, sin separadores y sin tocar una sola palabra de la vista. (Stripe: 96-128px entre secciones y 8-24px dentro de una; aqui la escala baja porque cada "seccion" ya viene en su propia caja con borde.) */ .fmed .kctp-panel.fmed-hito { margin-top: var(--kctp-e7); } @media (max-width: 991.98px) { /* En telefono la pagina ya mide 16.000px: 48px de hueco se leen como un fallo de carga, no como una pausa. */ .fmed .kctp-panel.fmed-hito { margin-top: var(--kctp-e6); } } /* El hover del sistema pinta la cabecera de rosa de marca. Con diez paneles en una pantalla eso es demasiado color por pasar el raton: aqui se baja al crema, que insinua igual y no grita. */ .fmed .kctp-panel-cabeza.kctp-plegable:hover { background: var(--kctp-crema); } /* Un panel plegado es una fila de indice, no una tarjeta: 52px de alto y la cuenta de la derecha alineada con el titulo. */ .fmed .kctp-panel-cabeza { padding: 13px var(--kctp-e5); } .fmed .kctp-panel-cuerpo { padding: var(--kctp-e5); } /* La escalera de padding de panel de Stripe es 16 / 24 / 32 y se elige por el ANCHO del panel, no por su importancia. Los de la izquierda miden 739px y los de la columna de decision 377: darles a los dos 24px hacia los lados dejaba el caso apretado contra el borde y la decision holgada. Ahora el caso respira a 32 y la columna de apoyo se queda en 24, que es tambien lo que separa las dos densidades de las dos columnas. */ @media (min-width: 1200px) { .fmed .kctp-ficha > div:first-child .kctp-panel-cabeza { padding: 13px var(--kctp-e6); } .fmed .kctp-ficha > div:first-child .kctp-panel-cuerpo { padding: var(--kctp-e5) var(--kctp-e6); } } /* Los avisos de arriba cruzan las dos columnas (1.280px). Su texto no puede cruzarlas: un renglon de 1.280px pierde la linea al volver a la izquierda. Se queda en la medida de parrafo, como el resto de la pantalla. */ .fmed > .kctp-aviso > div { max-width: var(--fmed-medida); } /* Y como el texto ya no se estira hasta el final, el boton de la bandera se quedaba flotando a media franja, a 60px del ultimo renglon y con 366px de vacio detras. Va contra el margen: la accion siempre en el mismo sitio, caiga el mensaje en una linea o en cuatro. */ .fmed > .kctp-aviso > form { margin-left: auto; } .fmed .kctp-panel-cabeza h3 { letter-spacing: -.02em; } /* UNA sola linea de pelo en toda la pantalla. El sistema trae dos grises (#ebe1e4 para el borde y #f3ecee para el divisor interno) y a diez paneles por pagina la diferencia se lee como descuido, no como jerarquia. Aqui la jerarquia la hace el TRAZO: maciza para estructura, discontinua para datos, las dos del mismo color. */ .fmed .kctp-panel-cabeza { border-bottom-color: var(--kctp-borde); } /* Nota de cierre y boton en UNA fila. Apilados y a lo ancho de la columna, dos controles blancos con borde flotando entre dos paneles se leian como un panel vacio; en linea se leen como lo que son, una accion con su campo. (El piso sobre el que descansan, en la seccion 16.) */ .fmed .fmed-cierre { display: flex; flex-wrap: wrap; gap: var(--kctp-e2); } /* Y cuando no caben en una fila -que en los 321px utiles de la columna de apoyo es siempre-, el boton NO se va al margen derecho. Ese era el segundo detalle que delataba el panel: "Cerrar la consulta" colgado a la derecha debajo de un campo del ancho entero, sin nada que justificara la sangria. Los dos controles ocupan el mismo ancho y se leen como lo que son, un campo y la accion que lo envia. En cuanto hay sitio para los dos en una fila (el panel a lo ancho), el boton vuelve a su tamano natural. */ .fmed .fmed-cierre .form-control { flex: 1 1 12rem; min-width: 0; } .fmed .fmed-cierre .kctp-btn { flex: 1 1 12rem; justify-content: center; } /* La columna lateral es apoyo: sus titulos bajan un peldano para que el ojo sepa cual de las dos columnas manda. */ .fmed .kctp-ficha > div:last-child .kctp-panel-cabeza h3 { font-size: var(--paso-4); } /* El dato que acompana al titulo del panel (cuantas fotos, que formulario). */ .fmed-cuenta { font-size: var(--kctp-t-meta); color: var(--kctp-tenue); letter-spacing: 0; font-variant-numeric: tabular-nums; } /* ========================================================================== 3. Filas de resumen (Resumen del caso) La fila de resumen de Stripe: rotulo a la izquierda en tinta de apoyo, valor a la derecha en tinta primaria y un divisor de 1px entre filas. El divisor va DISCONTINUO porque separa datos dentro de un panel; la linea maciza se reserva para separar paneles. ========================================================================== */ .fmed .kctp-datos { grid-template-columns: minmax(0, var(--fmed-rotulo)) minmax(0, 1fr); gap: 0; } .fmed .kctp-datos dt, .fmed .kctp-datos dd { padding: var(--fmed-fila-y) 0; border-top: 1px dashed var(--kctp-borde); } .fmed .kctp-datos dt { padding-right: var(--kctp-e5); /* El mismo par 13/15 que las preguntas del triaje: es la misma fila de datos, y hasta ahora el rotulo de aqui iba en el tinte de los sellos de hora mientras el del triaje iba en el intermedio. Una sola escalera. */ font-size: var(--fmed-t-rotulo); line-height: 1.45; color: var(--fmed-ink-3); } .fmed .kctp-datos dd { font-size: var(--fmed-t-dato); font-weight: var(--kctp-peso-medio); color: var(--fmed-ink-1); /* EL VALOR ARRANCA SIEMPRE EN LA MISMA COLUMNA, Y A LA IZQUIERDA. La vuelta anterior los mando al margen derecho copiando la fila de resumen del checkout de Stripe. La copia falla por una razon medible: esa fila de Stripe vive en un panel de ~400px, donde el rotulo y su valor quedan a 250px uno de otro. Aqui el panel mide 739px, asi que "Zonas" terminaba en x=350 y "Mejillas" empezaba en x=880: medio metro de nada entre una etiqueta y su dato, cruzado ademas por el divisor. Y algo peor: como .fmed-v sigue leyendose a la izquierda, un valor largo se alineaba a la izquierda y uno corto a la derecha, dos alineaciones distintas en la MISMA columna de la MISMA tabla. El analogo correcto en un panel ancho es el otro formulario de Stripe, el de tarifas: rotulo a la izquierda, campo a la derecha, y el campo empieza siempre en la misma x. Se consigue lo que se buscaba -una columna de valores que se barre de arriba abajo- sin hueco muerto y con una sola alineacion. */ text-align: left; /* Un correo o un telefono largo NO puede fijar el ancho minimo de la columna: es exactamente lo que empujaba la pagina en telefono. */ overflow-wrap: anywhere; } /* La caja del valor se detiene en la medida de parrafo: un motivo de tres renglones no puede correr los 690px del panel. */ .fmed .fmed-v { display: inline-block; max-width: var(--fmed-medida); } /* Una pregunta sin responder dejaba la celda en blanco. De frente a un margen, un hueco en la columna de valores no se lee como "no contesto": se lee como que falta pintar algo. La raya lo dice, ocupa el sitio y no agrega ni un dato que el paciente no haya dado. */ .fmed .fmed-v:empty::before { /* La raya va escapada. Escrita como caracter se corrompio en algun guardado y quedaron los bytes C2 81 34, que el navegador pintaba como una caja mas un "4" literal: una pregunta sin responder mostraba un 4 en la ficha clinica. Con \2014 no puede volver a pasar. */ content: "\2014"; color: var(--kctp-tenue-2); } .fmed .kctp-datos > dt:first-of-type, .fmed .kctp-datos > dt:first-of-type + dd { border-top: 0; padding-top: 0; } .fmed .kctp-datos > dt:last-of-type, .fmed .kctp-datos > dd:last-of-type { padding-bottom: 0; } /* El apunte entre parentesis cuelga de un
que ahora va en peso medio, y una acotacion no puede pesar lo mismo que el dato que acota. */ .fmed-apunte { font-size: var(--fmed-t-rotulo); font-weight: var(--kctp-peso-normal); color: var(--fmed-ink-4); } /* En telefono el rotulo se pone encima: dos columnas de 96px producen "Prioridad / percibida" partido en dos lineas y un valor estrangulado. */ @media (max-width: 640px) { .fmed .kctp-datos { grid-template-columns: minmax(0, 1fr); } .fmed .kctp-datos .fmed-v { max-width: none; } .fmed .kctp-datos dt { padding: var(--kctp-e3) 0 0; border-top: 1px dashed var(--kctp-borde); } .fmed .kctp-datos dd { padding: 2px 0 var(--kctp-e3); border-top: 0; } .fmed .kctp-datos > dt:first-of-type + dd { padding-top: 2px; } } /* ========================================================================== 4. Respuestas del paciente Es el panel mas grande de la ficha -2.928px de los 6.314 de la pagina- y es el que decidio la vuelta anterior: una tira estrecha con 393px de fondo vacio al lado, las preguntas partidas en tres renglones y respuestas de una palabra (No, Igual, Ninguno) solas en medio de una franja de 337px. Tres cambios, en orden de impacto: 1. LOS CINCO GRUPOS FLUYEN EN DOS COLUMNAS. Cada categoria es ahora su propia tabla (el cambio esta en la vista), asi que con el ancho de pagina que recupero la seccion 2 bis caben dos por fila. El panel baja de 2.928 a poco mas de 1.200px sin quitar una sola pregunta. 2. DENTRO DEL GRUPO, LA PREGUNTA VA ENCIMA DE SU RESPUESTA. Esto es lo contrario de lo que parece obvio, y es aritmetica: en una columna de 509px, repartir pregunta 50% / respuesta 50% deja 222px de texto para la pregunta, PEOR que los 306 que ya habia. Con la pregunta encima tiene los 509 enteros, y la mas larga de las 41 -la del tumor o lesion que cambia de tamano, sangra o pica- pasa de cuatro renglones y medio a dos. 3. LA RESPUESTA QUEDA PEGADA A SU PREGUNTA, en el renglon siguiente, en peso medio y tinta plena contra la pregunta en w400 y tinta de apoyo. Es el recurso de redaccion de la vara: misma medida y mismo tamano, la jerarquia la hacen el peso y el color. Un No ya no flota solo. El reparto lado a lado NO se tira: sigue vigente entre 701 y 1199px, donde el panel es una sola columna ancha y la respuesta si tiene sitio a la derecha. Y en telefono se apila, como ya hacia. ========================================================================== */ /* DOS COLUMNAS DE GRUPOS. Flujo por columnas y no una rejilla de dos celdas: las categorias miden entre 3 y 9 preguntas, y el flujo reparte equilibrando la altura de las dos. break-inside es lo que impide que "Preguntas de seguridad" se parta entre una columna y la siguiente. PERO SOLO A PARTIR DE CUATRO GRUPOS, y esa condicion es la que hace el :has(). Un caso derivado a presencial trae dos categorias respondidas, de 4 y de 9 preguntas: como un grupo no se puede partir, el reparto solo puede ser una y una, y la columna corta se queda 330px por debajo de la larga. El hueco que se arregla arriba reaparece dentro del panel. Con menos de cuatro grupos el panel se queda en una columna a lo ancho -y entonces la pregunta vuelve a ir al lado de su respuesta, que a 1.132px tiene sitio de sobra-. */ @media (min-width: 1200px) { .fmed-grupos:has(.fmed-grupo:nth-child(4)) { columns: 2; column-gap: var(--kctp-e7); } } /* TODOS los grupos llevan la misma linea encima y el mismo aire, incluido el primero. Con el primero sin linea, la primera categoria de la columna izquierda arrancaba 25px mas arriba que la de la derecha y las dos columnas se leian desalineadas. Iguales, las dos arrancan con un filo a la misma altura y el panel se lee como una tabla de dos cuerpos. Por lo mismo el aire va en padding y no en un margen entre hermanos: un margen se aplicaria tambien al primer grupo de la segunda columna y la desplazaria hacia abajo. */ .fmed-grupo { break-inside: avoid; /* 32px de la linea al marcador y 12 del marcador a su primera pregunta (4 de aqui abajo + 8 que pone la primera fila). Con los 24 que habia arriba y 20 abajo, el marcador flotaba a media distancia entre los dos grupos y no se leia como perteneciente a ninguno. Es el reparto por igual que la referencia nombra como el error tipico. */ padding-top: var(--kctp-e6); border-top: 1px solid var(--kctp-borde); } /* Solo el aire: el material lo pone el marcador de seccion (seccion 0 bis). Tacano adentro (12px hasta su primera pregunta, contando los 8 que pone la fila) y generoso afuera (32px hasta el grupo anterior). */ .fmed-grupo-titulo { margin: 0 0 var(--kctp-e1); } /* MITAD Y MITAD en la banda de 701-1199, donde el panel es una columna ancha. Con 56% para la pregunta quedaban 297px de columna de respuesta para un No pegado al margen, y las respuestas largas -que son una de cada tres- se leian en una tira de 40 caracteres. Al 50% las dos columnas caen en 306 y 337px. */ .fmed .kctp-respuestas th { width: 50%; padding: var(--fmed-fila-y) var(--kctp-e6) var(--fmed-fila-y) 0; /* LA PREGUNTA BAJA UN PELDANO, LA RESPUESTA SE QUEDA. Las dos corrian a 15px y solo las separaba el peso, que a esa distancia no se ve: por eso las 41 filas se leian como un parrafo continuo. La pregunta pasa a 13px -el peldano de rotulo del sistema, el mismo que ya usa "Motivo" en el panel de Resumen, asi que la pantalla deja ademas de contradecirse a si misma- y la respuesta se queda en 15px. El texto de la pregunta no encoge por ser menos importante: encoge porque el medico ya la sabe. Lo que viene a buscar es la respuesta, y ahora es el elemento mas grande, mas oscuro y mas pesado de la fila. */ font-size: var(--fmed-t-rotulo); font-weight: var(--kctp-peso-normal); /* 13px pide su propio interlineado: 1,55 lo dejaba en 20px, mas aire del que necesita una pregunta de dos renglones pegada a su respuesta. */ line-height: 1.45; color: var(--fmed-ink-3); } /* La respuesta empieza en la misma x en todas las filas del grupo, alineada a la izquierda: la columna que se barre de arriba abajo sigue existiendo. */ .fmed .kctp-respuestas td { padding: var(--fmed-fila-y) 0; font-size: var(--fmed-t-dato); color: var(--fmed-ink-1); font-weight: var(--kctp-peso-medio); text-align: left; } .fmed .kctp-respuestas tr + tr th, .fmed .kctp-respuestas tr + tr td { border-top: 1px dashed var(--kctp-borde); } /* PREGUNTA ENCIMA DE RESPUESTA en cuanto los grupos van a dos columnas. El par entero es una fila de datos: 12px de aire arriba, la pregunta, la respuesta a 2px, y el divisor discontinuo separando del par siguiente. */ @media (min-width: 1200px) { .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas, .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas tbody, .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas tr, .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas th, .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas td { display: block; width: auto; } .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas th { padding: var(--kctp-e3) 0 0; } .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas td { padding: 2px 0 var(--kctp-e3); } .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas .fmed-v { max-width: none; } /* El divisor va SOLO encima de la pregunta: si se dejara tambien encima de la respuesta, cada par saldria partido por una linea en medio. */ .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas tr + tr th { border-top: 1px dashed var(--kctp-borde); } .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas tr + tr td { border-top: 0; } /* El primer par del grupo no necesita aire extra: ya lo pone el titulo. */ .fmed-grupos:has(.fmed-grupo:nth-child(4)) .kctp-respuestas tr:first-child th { padding-top: var(--kctp-e2); } } /* Respuesta afirmativa a una pregunta de seguridad. No puede depender solo del color (WCAG 2.2): va con un punto, que se ve tambien en escala de grises y en una impresion en blanco y negro. */ .fmed td.fmed-si { color: var(--kctp-alerta); } .fmed td.fmed-si::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: .12em; border-radius: 50%; background: currentColor; } /* En telefono la tabla deja de ser tabla: pregunta arriba, respuesta debajo. A 390px una columna de 40% deja 140px para la pregunta y la parte en cinco lineas. */ @media (max-width: 700px) { .fmed .kctp-respuestas, .fmed .kctp-respuestas tbody, .fmed .kctp-respuestas tr, .fmed .kctp-respuestas th, .fmed .kctp-respuestas td, /* El rotulo del hallazgo trae su propio ancho y con mas peso que la regla de arriba: sin esto se quedaba en el 30% TAMBIEN en telefono, es decir en una columna de 100px que partia "Uniformidad del tono" en dos y dejaba el divisor discontinuo cortado a un tercio del panel. */ .fmed .kctp-respuestas th.fmed-hallazgo { display: block; width: auto; max-width: none; } .fmed .kctp-respuestas th { padding: var(--kctp-e3) 0 0; } .fmed .kctp-respuestas td { padding: 2px 0 var(--kctp-e3); } .fmed .kctp-respuestas .fmed-v { max-width: none; } .fmed .kctp-respuestas tr + tr th { border-top: 1px dashed var(--kctp-borde); } .fmed .kctp-respuestas tr + tr td { border-top: 0; } /* En telefono el aire de encima del grupo baja un peldano -la pagina ya es larga- pero no hasta igualar los 16px que quedan por debajo del marcador: si arriba y abajo miden lo mismo, el marcador deja de pertenecer al grupo que encabeza. */ .fmed-grupo { padding-top: var(--kctp-e5); } } /* Con una sola columna de grupos no hay nada que alinear, y el filo del primero cae a 26px del borde de la cabecera del panel: dos lineas paralelas tan cerca se leen como un error de dibujo, no como jerarquia. */ @media (max-width: 1199.98px) { .fmed-grupo:first-child { padding-top: 0; border-top: 0; } } /* ========================================================================== 4 bis. Lo que la IA vio y lo que la IA pide El panel del preanalisis tambien ocupa el ancho entero, y una lista de hallazgos con otra de preguntas sugeridas debajo dejaba media pagina en blanco a la derecha: el mismo defecto de la vuelta anterior, un piso mas abajo. Se parte en dos como se parte una seccion de la vara: el contenido a la izquierda -lo que la IA VIO en las fotos y en las respuestas- y a la derecha, en una columna mas estrecha, lo que la IA PIDE: las preguntas que faltan, las senales de escalamiento y las limitaciones del modelo. La columna de la derecha se queda en 22rem (352px) y no en un 1fr: es una lista de frases sueltas, y a 500px de medida se leerian como parrafos. ========================================================================== */ @media (min-width: 1200px) { .fmed-ia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--kctp-e7); align-items: start; } /* Los dos subtitulos arrancan a la misma altura. Sin esto, el de la izquierda hereda los 32px de aire que .fmed-sub pone ENTRE bloques y el de la derecha no, y las dos columnas empiezan desalineadas. */ .fmed-ia > * > .fmed-sub:first-child { margin-top: 0; } /* El aviso de escalamiento vive ahora en una columna de 352px: el icono y el texto ya no caben lado a lado con holgura. */ .fmed-ia-lado .kctp-aviso { margin-top: var(--kctp-e5); } } /* ========================================================================== 4 ter. Los componentes del plan Son tarjetas independientes de 4 a 8 renglones: en una columna de 1.132px cada una era una franja con el texto pegado a la izquierda y 600px de vacio detras. En dos columnas recuperan la medida de parrafo y el panel baja a la mitad. Los formularios de "anadir componente" y de objetivos quedan FUERA del flujo a proposito (estan fuera del envoltorio en la vista): un formulario partido entre dos columnas no se rellena. ========================================================================== */ @media (min-width: 1200px) { .fmed-componentes { columns: 2; column-gap: var(--kctp-e5); } .fmed-componentes > .kctp-componente { break-inside: avoid; } } /* ========================================================================== 4 quater. El formulario del plan Efecto secundario de haber ensanchado el panel: los tres campos de texto del plan -objetivo, seguimiento y criterios de suspension- pasaron a medir 1.066px. Un area de texto del ancho del contenedor es justo lo que la vara no hace nunca (Stripe compone sus formularios en columnas de 410-490px), y ademas invita a escribir renglones de 170 caracteres en una indicacion clinica que el paciente va a leer en un telefono. En dos columnas cada campo cae en ~509px, que es la medida de la vara, y el formulario entero deja de ser una escalera de seis pisos. El orden de lectura no cambia: objetivo y seguimiento arriba, criterios y fechas debajo, y el boton cruzando las dos columnas porque manda sobre todo. Se dirige por el hermano `.fmed-componentes` y no por la clase del formulario: `.fmed-bloque` la llevan tambien los tres formularios de la columna de decision, que miden 321px y ahi si van apilados. ========================================================================== */ .fmed-campo > .form-control { margin-bottom: 0; } @media (min-width: 1200px) { .fmed .fmed-componentes ~ .fmed-bloque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--kctp-e5); row-gap: var(--kctp-e4); align-items: start; } /* La fila de las dos fechas ya viene repartida por el sistema: aqui solo ocupa la celda que le toca. Los 24px de separacion que lleva en el formulario apilado se quitan -en la rejilla los pone el row-gap- y se devuelve el margen negativo del sistema, que compensa el canalon de sus columnas. Sin las dos cosas, "Vigente hasta" caia 32px por debajo de "Cuando suspender y contactar", que es su vecina de fila. */ .fmed .fmed-componentes ~ .fmed-bloque > .row { margin-top: calc(-1 * var(--bs-gutter-y)); margin-bottom: 0; } .fmed .fmed-componentes ~ .fmed-bloque > .kctp-btn { grid-column: 1 / -1; justify-self: start; } } /* ========================================================================== 5. Imagenes Las fotos no se enmarcan (ninguna de las dos referencias enmarca una imagen) y no necesitan ocupar 216px: el clinico las abre en grande cuando le interesa una. Cuatro por fila en escritorio, dos en telefono. ========================================================================== */ .fmed .kctp-capturas { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: var(--kctp-e4); } .fmed .kctp-miniatura { border-radius: var(--kctp-r-panel); } .fmed .fmed-rechazada { aspect-ratio: 3 / 4; border-width: 1px; border-radius: var(--kctp-r-panel); font-size: var(--kctp-t-meta); } .fmed-captura-pie { margin: var(--kctp-e2) 0 0; } .fmed-captura-pie strong { display: block; font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); line-height: 1.35; } .fmed-captura-meta { display: block; margin-top: 1px; font-size: var(--kctp-t-meta); color: var(--kctp-tenue); font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .fmed .kctp-capturas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kctp-e3); } /* A dos columnas la casilla mide 149px y "100/100 - 900x1200" se partia justo despues del separador, dejando un punto medio colgado al final de la primera linea. Un peldano menos (12px, el de los sellos) lo devuelve a un renglon. */ .fmed .fmed-captura-meta { font-size: var(--kctp-t-micro); } } /* ========================================================================== 6. Expediente del paciente Cada categoria era un h3 en serif de 21px DENTRO de un panel cuyo titulo ya era un h3 en serif de 21px. Dos displays anidados no hacen jerarquia: la deshacen. Las categorias pasan a rotulo de 15px en peso medio. ========================================================================== */ .fmed .kctp-repaso-bloque { padding: var(--kctp-e5) 0; } .fmed .kctp-repaso-bloque:first-of-type { padding-top: 0; } /* El marcador se pega a la lista que encabeza: los 24px de padding del bloque ya hacen la separacion con la categoria anterior, y con 8px aqui abajo el rotulo de 12px flotaba a medio camino entre las dos. */ .fmed .kctp-repaso-cabeza { margin-bottom: var(--kctp-e1); } /* La categoria del expediente es el MISMO objeto que el rotulo de grupo del cuestionario y que el subtitulo del preanalisis: un marcador de bloque dentro de un panel denso. Los tres comparten material (seccion 0 bis) y aqui solo se le da la caja, porque este lleva icono. */ .fmed .kctp-repaso-cabeza h3 { display: flex; align-items: center; gap: var(--kctp-e2); margin: 0; } .fmed-intro { font-size: var(--kctp-t-meta); color: var(--fmed-ink-3); max-width: var(--fmed-medida); margin-bottom: var(--kctp-e5); } /* Fila de una entrada del expediente: texto a la izquierda, sello o boton a la derecha, divisor discontinuo. */ .fmed-fila { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--kctp-e3); padding: var(--kctp-e3) 0; border-bottom: 1px dashed var(--kctp-borde); } .fmed-fila:last-child { border-bottom: 0; padding-bottom: 0; } .fmed-fila-texto { flex: 1 1 200px; min-width: 0; } .fmed-fila-texto strong { font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); } .fmed-fila-estado, .fmed-fila-resumen { font-size: var(--kctp-t-meta); color: var(--fmed-ink-3); } .fmed-fila-resumen { margin-top: 2px; max-width: var(--fmed-medida); } .fmed-verificado { flex: 0 0 auto; font-size: var(--kctp-t-meta); color: var(--kctp-ok); white-space: nowrap; } .fmed .kctp-declaradas li { border-bottom: 1px dashed var(--kctp-borde); } .fmed .kctp-declaradas li:last-child { border-bottom: 0; } .fmed .fmed-ayuda { margin: var(--kctp-e3) 0 0; } /* ========================================================================== 7. Preanalisis de IA ========================================================================== */ /* La tira de procedencia del modelo. Es metadato de auditoria, no prosa: va en 13px, en tinta de apoyo y cerrada por una linea discontinua, como los pies de panel de Stripe. */ .fmed-tira { font-size: var(--kctp-t-meta); color: var(--kctp-tenue); font-variant-numeric: tabular-nums; padding-bottom: var(--kctp-e3); margin-bottom: var(--kctp-e4); border-bottom: 1px dashed var(--kctp-borde); } /* Marcador de los dos lados del preanalisis ("Hallazgos", "Le faltaria preguntar"). Material en la seccion 0 bis; aqui solo el aire: 12px hasta lo que introduce y 32px por encima, que es lo que lo separa de lo anterior. */ .fmed-sub { margin: var(--kctp-e6) 0 var(--kctp-e3); } /* Este ancho existia desde la vuelta anterior y NUNCA llego a aplicarse: lo pisaba `.fmed .kctp-respuestas th`, que trae un selector de elemento y por tanto mas peso. Resultado medido: el nombre del hallazgo -una o dos palabras- se quedaba con 378px vacios al lado y empujaba la descripcion a una tira de 295px, por debajo del minimo de 410 que respeta la referencia. Con `th.fmed-hallazgo` las dos reglas empatan en peso y gana la ultima. */ .fmed .kctp-respuestas th.fmed-hallazgo { width: 30%; padding-right: var(--kctp-e5); } /* El hallazgo de la IA es prosa de dos o tres renglones: se le pone la medida de parrafo para que no corra el ancho entero del panel. */ .fmed .fmed-hallazgos td > * , .fmed .fmed-hallazgos td { max-width: var(--fmed-medida); } /* Y ES PROSA, ASI QUE NO VA EN PESO MEDIO. La celda derecha del triaje lleva una respuesta de una palabra y ahi el peso es lo que la vuelve un blanco de barrido; aqui lleva tres renglones de observacion clinica, y tres renglones en 500 sobre tinto se leen como un aviso. Vuelve al peso y a la tinta de cuerpo: la jerarquia de esta tabla la sostienen el rotulo de 13px y la pastilla de nivel, que ya estan. */ .fmed .fmed-hallazgos td { font-weight: var(--kctp-peso-normal); color: var(--fmed-ink-2); line-height: var(--kctp-lh-cuerpo); } .fmed-zonas { margin-top: 2px; font-size: var(--kctp-t-meta); color: var(--kctp-tenue); } .fmed-lista { margin: 0; padding-left: 1.15rem; max-width: var(--fmed-medida); } .fmed-lista li { margin-bottom: var(--kctp-e1); } .fmed-limite { font-size: var(--kctp-t-meta); color: var(--kctp-tenue); border-left: 2px solid var(--kctp-borde); padding-left: var(--kctp-e3); max-width: var(--fmed-medida); margin-top: var(--kctp-e5); } /* ========================================================================== 8. Notas clinicas y plan ========================================================================== */ .fmed .kctp-nota { padding: var(--kctp-e4) var(--kctp-e5); } .fmed .kctp-nota.firmada { border-left-width: 3px; } /* Sin flex: la meta de una adenda trae un
antes del motivo y en una caja flexible ese salto de linea deja de comportarse como salto de linea. */ .fmed .kctp-nota-meta { font-variant-numeric: tabular-nums; line-height: 1.5; } .fmed .kctp-nota-cuerpo { max-width: var(--fmed-medida); line-height: var(--kctp-lh-cuerpo); } /* DONDE SE ESCRIBE, LA MEDIDA DE PARRAFO MANDA. El panel de notas pasó a ocupar el ancho entero y el area de la nota se fue con el: 1.084px, unos 170 caracteres por renglon. Ninguna de las dos varas compone un campo de texto asi -Stripe se queda entre 410 y 490px- y aqui ademas es donde el medico escribe el razonamiento clinico del caso. Se corrige igual que en el formulario del plan (seccion 4 quater), con la diferencia de que este formulario es uno solo y le basta un tope. */ .fmed .fmed-escrito { max-width: var(--fmed-medida); } .fmed .kctp-adenda { margin-left: var(--kctp-e4); border-left-width: 2px; } .fmed .kctp-componente { border-left-width: 3px; padding: var(--kctp-e4) var(--kctp-e5); margin-bottom: var(--kctp-e4); } .fmed-componente-cabeza { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--kctp-e1) var(--kctp-e3); margin-bottom: var(--kctp-e2); } .fmed-componente-detalle { max-width: var(--fmed-medida); line-height: var(--kctp-lh-cuerpo); margin-bottom: var(--kctp-e2); } /* Frecuencia, precauciones y justificacion eran cuatro renglones identicos en tinta de apoyo: jerarquia cero. La vuelta pasada se resolvio poniendo el rotulo en oscuro, y era al reves: "Frecuencia:", "Precauciones:" y "Justificacion:" se repiten identicos en TODOS los componentes (son mobiliario), mientras que lo que cambia de uno a otro -y lo que el medico viene a leer- es el valor. La tinta va donde esta la informacion: rotulo en apoyo, contenido en tinta primaria. Mismo tamano, misma familia, mismo peso; la jerarquia la hace el color, que es el recurso de Stripe. */ .fmed .kctp-componente .kctp-meta { max-width: var(--fmed-medida); line-height: 1.5; } /* EL PATRON "ROTULO: VALOR", UNA SOLA VEZ. Aparece cinco veces en la pantalla -Frecuencia:, Precauciones:, Justificacion:, La IA proponia:, Limitaciones:- y hasta ahora cada una lo resolvia igual y al reves: el rotulo en tinta oscura y el dato en tinta de apoyo. Los rotulos se repiten identicos en todos los componentes (son mobiliario); lo que cambia, y lo que el medico viene a leer, es el valor. La tinta va donde esta la informacion. Mismo tamano, misma familia y mismo peso: la jerarquia la hace el color, que es el recurso de Stripe leido al derecho. */ .fmed .kctp-componente p.kctp-meta:has(> strong), .fmed .kctp-original, .fmed .fmed-limite { color: var(--kctp-tinta); } .fmed .kctp-componente p.kctp-meta > strong, .fmed .kctp-original > strong, .fmed .fmed-limite > strong { color: var(--fmed-ink-4); font-weight: var(--kctp-peso-normal); } /* ...PERO EL COLOR SOLO NO BASTA CUANDO SON TRES SEGUIDAS. Medido en el plan de un caso real: debajo del detalle del componente caen "Frecuencia:", "Precauciones:" y "Justificacion:" como tres parrafos corridos del mismo cuerpo, cada uno arrancando en una x distinta porque el rotulo mide distinto. El ojo no encuentra donde empieza el dato. La fila de resumen de la vara resuelve esto con una columna: rotulo a la izquierda con ancho fijo, valor a la derecha empezando SIEMPRE en la misma x. Es la misma fila que ya corre el panel de Resumen arriba, dos peldanos mas estrecha porque aqui vive dentro de una tarjeta. El es el primer hijo y el texto que le sigue es un nodo suelto: la rejilla lo recoge como item anonimo, asi que salen las dos columnas sin tocar el marcado -y sin tocar ni una palabra del texto clinico-. */ .fmed .kctp-componente p.kctp-meta:has(> strong) { display: grid; /* 6,5rem = 104px: el rotulo mas largo ("Justificacion:") mide 85px a 13px, asi que el canalon sale de la propia columna y no hace falta gap. Mas ancha, "Frecuencia:" se quedaba a 110px de su valor. */ grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0; margin-bottom: var(--kctp-e1); } /* Una tarjeta de componente en una columna de 509px no tiene sitio para una columna de rotulos de 120px: por debajo de eso el rotulo vuelve a ir en linea, que es como se lee bien en poco ancho. */ @media (max-width: 700px) { .fmed .kctp-componente p.kctp-meta:has(> strong) { display: block; } } .fmed .kctp-original { max-width: var(--fmed-medida); } /* ========================================================================== 9. Columna de decision Es el formulario del checkout de Stripe: rotulo pegado encima del campo, campos de 6px de radio y una linea DISCONTINUA entre destinos. Antes eran
macizos, que pesan lo mismo que el borde del panel y por eso partian la tarjeta en tres tarjetas. ========================================================================== */ .fmed-bloque { display: block; padding-top: var(--kctp-e5); margin-top: var(--kctp-e5); border-top: 1px dashed var(--kctp-borde); } .fmed-bloque:first-child { padding-top: 0; margin-top: 0; border-top: 0; } /* UN SOLO TAMANO DE CAMPO. Medido en vivo, la pantalla corria dos escalas de formulario a la vez: los campos anchos a 15px y los ".form-control-sm" de esta columna a 12px, que es el peldano de las pastillas y de los sellos de hora, no el de escribir. El medico dicta aqui la conducta del caso: no puede hacerlo en el cuerpo mas pequeno de la pagina. Stripe corre TODOS sus campos al mismo cuerpo y a una sola altura (h45, radio 6, 1px de borde). Aqui: 15px, 36px de alto, radio 6. */ .fmed .form-control, .fmed .form-select, .fmed .form-control-sm, .fmed .form-select-sm { font-size: var(--kctp-t-densa); border-radius: var(--kctp-r-campo); padding: 6px 12px; } .fmed input.form-control, .fmed .form-select { min-height: 36px; } .fmed textarea.form-control { min-height: 0; line-height: var(--kctp-lh-cuerpo); } /* La cabecera es la unica fila donde el campo convive con un boton chico: ahi los dos miden 34 y no 36, para que no queden dos alturas en una linea. */ .fmed .fmed-acciones .form-select { min-height: 34px; } .fmed .fmed-rotulo { display: block; font-size: var(--kctp-t-meta); font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); letter-spacing: 0; margin-bottom: var(--kctp-e2); } .fmed .fmed-ayuda { font-size: var(--kctp-t-meta); color: var(--kctp-tenue); margin: var(--kctp-e2) 0; line-height: 1.5; } .fmed .fmed-aviso-chico { font-size: var(--kctp-t-meta); } .fmed .fmed-sin-margen { margin-bottom: 0; } /* El aviso del sistema nace con 10px de radio, que es un peldano del lado del PACIENTE. Del lado del personal la escalera es 6 / 8 / pastilla, y un solo elemento fuera de ella se ve como una pieza pegada de otra pantalla. */ .fmed .kctp-aviso { border-radius: var(--kctp-r-panel); } /* Desplegable: la flecha la dibuja el ::after para que gire, y el marcador nativo se apaga en los dos motores. */ .fmed-desplegable > summary { display: flex; align-items: center; gap: var(--kctp-e2); list-style: none; cursor: pointer; font-size: var(--kctp-t-densa); font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); padding: 2px 0; } .fmed-desplegable > summary::-webkit-details-marker { display: none; } .fmed-desplegable > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--kctp-tenue); border-bottom: 1.5px solid var(--kctp-tenue); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--kctp-mov); } .fmed-desplegable[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } @media (prefers-reduced-motion: reduce) { .fmed-desplegable > summary::after { transition: none; } } /* LA COLUMNA DE DECISION YA NO ES PEGAJOSA, Y ES A PROPOSITO. Lo era mientras la rejilla tenia dos columnas de arriba abajo: acompanaba al medico durante los 6.000px del caso. Ahora su celda son las filas 1 y 2 -unos 880px, menos de una pantalla-, asi que se ve entera sin necesidad de seguir a nadie. Y mantenerla pegajosa estaba ROMPIENDO la pagina: Chrome no recorta el pegado al area de rejilla del elemento sino al contenedor entero, asi que la columna seguia clavada a 24px del borde superior durante los 5.000px restantes y se dibujaba ENCIMA de los paneles a lo ancho. Medido: a scrollY 2.500 el riel seguia en top=24 solapando "Respuestas del paciente". Un panel de decision flotando sobre las respuestas del paciente en una plataforma clinica no es un defecto estetico. El tope de altura si se queda, y ahora es lo unico que sostiene la franja: sin el, desplegar la bitacora de 40 eventos estiraria las dos primeras filas hasta 2.500px y dejaria un vacio debajo de Imagenes. Con el, la franja de arriba nunca pasa de una pantalla y el exceso se recorre dentro del propio panel. El padding negativo deja sitio al anillo de foco sin mover ni un pixel el borde de los paneles. */ @media (min-width: 1200px) { .fmed .kctp-ficha > div:last-child { align-self: start; max-height: calc(100vh - var(--kctp-e7)); overflow-y: auto; padding: var(--kctp-e1); margin: calc(var(--kctp-e1) * -1); scrollbar-width: thin; scrollbar-color: var(--kctp-borde) transparent; } } /* ========================================================================== 10. Solicitudes, documentos y bitacora ========================================================================== */ .fmed-solicitud, .fmed-documento { padding: var(--kctp-e3) 0; border-bottom: 1px dashed var(--kctp-borde); } .fmed-solicitud:last-child, .fmed-documento:last-child { border-bottom: 0; padding-bottom: 0; } .fmed-solicitud-meta, .fmed-documento-meta { font-size: var(--kctp-t-meta); color: var(--kctp-tenue); font-variant-numeric: tabular-nums; margin-top: 2px; } .fmed-solicitud-meta { margin: 0 0 2px; } .fmed-solicitud-resp { background: var(--kctp-ok-sw); border-radius: var(--kctp-r-campo); padding: var(--kctp-e2) var(--kctp-e3); margin-top: var(--kctp-e2); } /* La bitacora es una linea de tiempo, no una lista. Cada evento arranca con un punto y se lee en dos alturas: QUE paso (verbo en peso medio) y quien y cuando debajo, en tinta de apoyo. Antes las dos lineas pesaban igual y cuarenta filas seguidas se volvian un muro gris. */ .fmed .fmed-log { padding-left: 0; margin: 0; } .fmed .fmed-log li { position: relative; padding: var(--kctp-e3) 0 var(--kctp-e3) var(--kctp-e4); border-bottom: 1px dashed var(--kctp-borde); } .fmed .fmed-log li:last-child { border-bottom: 0; padding-bottom: 0; } .fmed .fmed-log li::before { content: ""; position: absolute; left: 1px; top: 19px; width: 5px; height: 5px; border-radius: 50%; background: var(--kctp-tenue-2); } /* Sesenta lineas seguidas. La frase de lo que paso es el contenido de la bitacora y sube al peldano de lectura; el "quien y cuando" de debajo se queda en el tinte de metadato, que es para lo que existe. Es el recurso de redaccion de Stripe -verbo en peso medio, resto al mismo tamano- ahora con una diferencia de tinta que de verdad se ve. */ .fmed-log-que { margin: 0; font-size: var(--kctp-t-meta); color: var(--fmed-ink-3); } .fmed-log-que strong { font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); } .fmed-log-quien { margin: 1px 0 0; font-size: var(--kctp-t-meta); color: var(--kctp-tenue); font-variant-numeric: tabular-nums; line-height: 1.45; } .fmed-log-detalle { margin: var(--kctp-e2) 0 0; font-size: var(--kctp-t-meta); color: var(--fmed-ink-3); } .fmed-log-cambio { margin-top: var(--kctp-e2); } .fmed-log-cambio > summary { cursor: pointer; font-size: var(--kctp-t-meta); color: var(--kctp-tenue); } .fmed-log-cambio > div { font-size: var(--kctp-t-meta); color: var(--fmed-ink-3); margin-top: var(--kctp-e1); } .fmed-log-cambio strong { font-weight: var(--kctp-peso-medio); color: var(--kctp-tinta); } /* ========================================================================== 11. Papeles sueltos de texto Siete clases que reemplazan a los 78 estilos en linea. Ninguna inventa un tamano: todas usan un peldano de la escala. ========================================================================== */ .fmed-parrafo { max-width: var(--fmed-medida); } .fmed-vacio { color: var(--fmed-ink-3); max-width: var(--fmed-medida); } .fmed-crece { flex: 1; min-width: 0; } .fmed-ancho { width: 100%; } .fmed-ok { color: var(--kctp-ok); font-weight: var(--kctp-peso-medio); } .fmed-pendiente { color: var(--kctp-aviso); font-weight: var(--kctp-peso-medio); } .fmed-bandera-meta, .fmed-bandera-pie { font-size: var(--kctp-t-meta); opacity: .85; } /* Boton secundario de fila: 34px de alto y 13px de texto. El .kctp-btn-chico del sistema corre a 12px, que en un panel con veinte controles se queda por debajo del area tactil comoda. */ .fmed .kctp-btn-chico { min-height: 34px; padding: 6px 12px; font-size: var(--kctp-t-meta); } /* Ningun boton del sistema lleva 700: si algo aqui sale en negrita, es que trae estilo propio y hay que buscarlo. */ .fmed strong, .fmed b { font-weight: var(--kctp-peso-medio); } /* ========================================================================== 12. Palabras que llegan gritadas desde la base de datos El plan guarda su estado como PUBLICADO y cada componente como APROBADO, EDITADO o PROPUESTO. Eso no es una decision de diseno: es el valor crudo de una columna ENUM saliendo a pantalla. Ninguna de las dos referencias tiene una sola mayuscula sostenida -Lovi mide `text-transform: none` en sus 306 mediciones y Stripe igual-, y es la senal de plantilla barata mas facil de detectar: cuatro palabras en capitales en medio de una pagina compuesta en minusculas. No se toca el texto. Se compone: lowercase para todo y ::first-letter en mayuscula, que devuelve "Publicado" y "Aprobado" sin que la vista ni la base cambien un caracter. Si manana el estado pasa a ser una etiqueta ya escrita en la PHP -que es donde deberia vivir-, esta regla no estorba. ========================================================================== */ /* OJO CON EL display. ::first-letter solo existe en cajas de bloque: sobre un en linea o sobre la pastilla (que es flex) la regla se aplica a medias y el resultado es PEOR que el original, todo en minusculas y con pinta de fallo. De ahi el inline-block: no cambia como se coloca la palabra y es lo que hace que la mayuscula inicial vuelva. */ .fmed .fmed-palabra, .fmed .fmed-verbo, .fmed .fmed-componente-cabeza .kctp-meta > strong { display: inline-block; text-transform: lowercase; } .fmed .fmed-palabra::first-letter, .fmed .fmed-verbo::first-letter, .fmed .fmed-componente-cabeza .kctp-meta > strong::first-letter { text-transform: uppercase; } /* APTA_ASINCRONICA no es una palabra: es un identificador del sistema, con su guion bajo. Pasarlo a minusculas lo dejaria peor ("Apta_asincronica"), asi que se compone como lo que es. Stripe hace exactamente esto con sus ids: monoespaciada, un peldano mas chica, sobre un piso tintado. Deja de gritar porque deja de leerse como prosa. */ /* La clasificacion del caso se leia "APTA_ASINCRONICA" dentro de una pastilla monoespaciada, en medio de siete filas escritas en castellano: el unico sitio de la pantalla donde asomaba la tuberia de la base de datos. La vista ya traduce la etiqueta y deja el token en el `title`; aqui solo queda decir que es un valor como los demas -misma tinta, misma medida, mismo peso- y que el cursor avise de que hay algo debajo. */ .fmed .fmed-clasif { cursor: help; } /* ========================================================================== 13. Una accion que todavia no se puede hacer "Aprobar y publicar el plan" nace `disabled` mientras queden componentes sin decidir. El sistema lo pinta como el boton primario en palido, y eso se lee mal de dos maneras a la vez: parece el boton principal de la pantalla (masa de color, ancho completo, arriba del todo) y parece roto. Un boton que aun no aplica no es un boton apagado: es un sitio reservado. Contorno discontinuo, sin relleno y con el cursor que lo dice. Cuando el plan queda listo, aparece el vino macizo y el contraste entre los dos estados es la senal de que ya se puede decidir. ========================================================================== */ .fmed .kctp-btn-primario:disabled, .fmed .kctp-btn-primario[disabled] { background: transparent; border: 1px dashed var(--kctp-borde-f); color: var(--kctp-tenue); opacity: 1; cursor: not-allowed; } /* ========================================================================== 14. La escalera de radios y las alturas de los controles Medido en el bloque de cierre de la consulta, que es donde se ve de golpe: el campo "Nota de cierre" es de 6px de radio y 36px de alto, y el boton "Cerrar la consulta" que va PEGADO A SU LADO es de 10px y 48px. Dos radios y dos alturas en la misma linea, y encima el panel que los contiene es de 8px. Tres radios en 60px de pantalla. El 10px del boton no es un descuido: es el peldano del lado del PACIENTE, donde la escalera es 12/20/pastilla. Aqui la escalera es la de Stripe -4 / 6 / 8 / pastilla, y ningun panel pasa de 8- porque es la que aguanta densidad de datos. El boton baja a 6, que es el del campo con el que convive. La altura sigue a Stripe igual: boton de 40 y campo de 45 en su checkout; aqui 40 y 36, la misma diferencia y la misma familia. En telefono el boton vuelve a 44, que es el minimo de un objetivo tactil. ========================================================================== */ .fmed .kctp-btn { border-radius: var(--kctp-r-campo); min-height: 40px; padding: 8px 16px; } .fmed .kctp-btn-chico { min-height: 32px; padding: 5px 10px; } @media (max-width: 991.98px) { .fmed .kctp-btn { min-height: 44px; } .fmed .kctp-btn-chico { min-height: 36px; } } /* En el bloque de cierre el campo y el boton comparten linea: comparten alto. */ .fmed .fmed-cierre .form-control, .fmed .fmed-cierre .kctp-btn { min-height: 40px; } /* ========================================================================== 15. Rango de las salidas de la columna de decision El medico tiene cuatro salidas y hasta ahora tres de ellas se veian igual: dos botones blancos de borde gris a lo ancho de la columna, uno encima del otro, mas un desplegable. "Solicitar informacion" (seguir el caso por aqui) y "Marcar no apta para via remota" (sacar el caso de la plataforma y mandar a la paciente a la clinica) no pueden pesar lo mismo en la pantalla. Stripe rankea sin rellenar: el secundario es transparente con borde y el texto EN EL COLOR DE ACENTO. Aqui se usa el mismo mecanismo con la paleta de KARA, y las tres salidas quedan distinguibles sin una sola masa de color nueva: aprobar .......... vino macizo (o contorno discontinuo si aun no aplica) solicitar ........ borde + texto vino derivar .......... borde + texto de alerta ========================================================================== */ .fmed .kctp-ficha > div:last-child form[action*="solicitar"] .kctp-btn-suave { border-color: var(--kctp-borde-c); color: var(--kctp-acento); } .fmed .kctp-ficha > div:last-child form[action*="solicitar"] .kctp-btn-suave:hover { border-color: var(--kctp-acento-cl); background: var(--kctp-acento-sw); color: var(--kctp-acento); } .fmed .kctp-ficha > div:last-child form[action*="derivar"] .kctp-btn-suave { border-color: var(--kctp-alerta-bd); color: var(--kctp-alerta); } .fmed .kctp-ficha > div:last-child form[action*="derivar"] .kctp-btn-suave:hover { border-color: var(--kctp-alerta); background: var(--kctp-alerta-sw); color: var(--kctp-alerta); } /* ========================================================================== 16. El cierre de la consulta La vuelta anterior le quito el panel con buen criterio -no tenia cabecera y se leia como un panel a medio pintar- pero lo dejo sin nada debajo: un campo blanco con borde y un boton blanco con borde flotando sobre el fondo hueso, entre dos paneles que si tienen caja. Sigue leyendose como una pieza suelta. Lo que es, es el pie de la columna: la accion que termina el caso. Se le pone el piso de marca -sin borde, para no fabricar un cuarto panel- y se pega arriba a lo que cierra. Asi ya no flota: descansa. ========================================================================== */ /* SE QUEDA COMO PANEL, Y BLANCO COMO SUS VECINOS. Se probaron las tres opciones y se midio la columna entera: sin caja, los dos controles flotaban sobre el fondo hueso entre dos tarjetas y se leian como una pieza que perdio la suya; con el piso rosa de marca, la franja quedaba mas saturada que los paneles blancos y se leia como un aviso; con el crema, como una mancha palida sin motivo. La columna son cuatro tarjetas y esta es la cuarta. Que no lleve cabecera no la rompe: el boton que la cierra dice lo que hace, y con el campo a lo ancho y el boton contra el margen derecho la caja se lee como el formulario corto que es. Una sola linea de pelo en las cuatro. */ .fmed .fmed-suelto { overflow: visible; } .fmed .fmed-suelto .kctp-panel-cuerpo { padding: var(--kctp-e4); } /* ========================================================================== 17. Los ultimos peldanos que se salian de la escala Lo que quedaba despues de normalizar, medido elemento a elemento: a) El codigo del caso ("· KC-26-00048"), que va pegado al nombre de la paciente en el titular, corria a 17px con interlineado 1,18 y tracking `normal`, mientras el titular de 28px de al lado va a -0,022em. Dos composiciones distintas en la MISMA linea, y es la linea que primero se mira. Ahora comparte familia serif y tracking con el nombre. b) Los titulos de la columna de apoyo (17px serif) corrian 1,30 y el codigo 1,18: dos interlineados para un solo peldano. ========================================================================== */ .fmed .fmed-codigo, .fmed .kctp-ficha > div:last-child .kctp-panel-cabeza h3 { line-height: var(--kctp-lh-titulo); letter-spacing: var(--kctp-ls-titulo); } /* La regla que aqui igualaba el tracking de `.kctp-repaso-cabeza h3` y `.fmed-sub` al del cuerpo se retira: los dos dejaron de ser subtitulos de 15px y pasaron a ser el marcador de seccion de 12px (seccion 0 bis), que lleva tracking POSITIVO por composicion. La regla seguia viva y, por venir despues, les borraba ese tracking: en versalita a 12px las letras se tocaban. Es exactamente el tipo de regla huerfana que sobrevive a un rediseno y deja la pantalla a medio camino. */ /* ========================================================================== 18. Una sola forma de pastilla La ficha lleva dos familias de sello y se veian como cosas distintas: el estado del caso ("Lista para revision") sale con radio de pastilla, y el nivel de cada hallazgo de la IA ("leve", "moderado", "ausente") salia con 6px, o sea con la forma de un boton chico. Siete de ellos seguidos en el panel de preanalisis parecian siete botones que no se pueden pulsar. Un sello es un sello: radio = alto/2, como la pastilla de Stripe y como la del propio sistema. Lo que distingue a los dos es el color, no la forma. ========================================================================== */ .fmed .kctp-nivel { border-radius: var(--kctp-r-pastilla); padding: 3px 9px; } /* ========================================================================== 19. Ritmo de dos velocidades dentro de los formularios Medido en el formulario del plan, que es el mas largo de la pantalla: del rotulo a SU campo hay 22px, y del campo al rotulo SIGUIENTE hay 22px tambien. Con el mismo hueco en los dos sitios, "Objetivo del plan" no se lee como el rotulo del campo de abajo sino como una linea suelta entre dos cajas, y el formulario entero se lee como una pila de nueve cosas en vez de como cuatro preguntas con su respuesta. Es el error que la referencia nombra explicitamente: repartir el mismo aire por igual en todas partes. Stripe es tacano dentro del bloque (8px del titulo a su bajada) y generoso entre bloques. Aqui: 4px del rotulo a su campo, 24px de un par al siguiente. ========================================================================== */ .fmed .fmed-rotulo { margin-bottom: var(--kctp-e1); } .fmed .form-control + .fmed-rotulo, .fmed .form-select + .fmed-rotulo, .fmed textarea + .fmed-rotulo, .fmed .fmed-bloque .row, .fmed .fmed-bloque .row + .kctp-btn { margin-top: var(--kctp-e5); } /* El boton que cierra el formulario se separa de su ultimo campo lo mismo que se separan dos pares entre si. Va por hermano anterior a proposito: hay un bloque -el de aprobar- cuyo unico contenido ES el boton, y ahi este margen solo abria un hueco de 24px bajo la cabecera del panel. */ .fmed .fmed-bloque > .form-control + .kctp-btn, .fmed .fmed-bloque > .form-select + .kctp-btn, .fmed .fmed-bloque > textarea + .kctp-btn { margin-top: var(--kctp-e5); }