/* ══════════════════════════════════════════════════════════════════ PALETA — la de la web nueva del laboratorio. ══════════════════════════════════════════════════════════════════ Tres familias y nada mas: · tinta → el petroleo de la marca: el fondo que pesa y el texto. · turquesa → el acento, y SOLO el acento. Aparece poco y por eso se ve. · hueso → el LIENZO de la pagina. Lo blanco queda para las piezas que se apoyan encima: asi una tarjeta se ve como papel sobre mesa y no como un rectangulo invisible. `arena` es la unica linea: hairlines de 1px en vez de bordes grises. LA REGLA QUE MAS SE ROMPE (docs/GUIA-VISUAL.md §1): nada se pinta del MISMO color del fondo sobre el que se apoya. Compila, no rompe nada, y simplemente no se ve. Aca: tinta es lienzo oscuro, hueso es lienzo claro, papel es SIEMPRE lo que se apoya encima. Nunca papel sobre papel ni hueso sobre hueso. Nada de colores sueltos mas abajo: todo sale de estos tokens. */ :root { --tinta:#06282B; --tinta-900:#04191B; --tinta-700:#0A3A3E; --tinta-600:#0E4B50; --tinta-400:#2C7C82; --turquesa:#1ECAD3; --turq-300:#66D8DD; --turq-200:#9FE9EC; --turq-600:#0F7A82; --turq-700:#0C5F65; --turq-50:#EAFBFC; --hueso:#F6F3EE; --hueso-200:#EFEAE2; --hueso-300:#E4DDD2; --arena:#DAD2C5; /* CONTORNO DE CONTROL. `--arena` es el borde de las TARJETAS, donde ser sutil esta bien porque la tarjeta ya se separa por su fondo y su sombra. En un CAMPO el borde carga todo el peso -- es lo unico que dice donde se escribe-- y #DAD2C5 contra el papel casi no se ve. Lo señalo el dueño: «los bordes si estan muy tenues en los campos» (2026-09-28). */ --borde-campo:#B3A491; --papel:#FFFFFF; --texto:#06282B; --texto-2:#5B564D; /* La unica linea sobre fondo oscuro. Un `border:1px solid var(--arena)` sobre tinta se ve como una grieta; esto se ve como un pliegue. */ --linea-oscura:rgba(246,243,238,.13); /* Los tres estados que lee el medico de un vistazo. Se distinguen por COLOR, por TEXTO y por FORMA (el glifo del chip), nunca solo por color: en un telefono al sol, o con daltonismo, el color solo no alcanza. */ --listos-fg:#0C5F65; --listos-bg:#EAFBFC; --listos-bd:#9FE9EC; --parcial-fg:#8A5200; --parcial-bg:#FDF3E2; --parcial-bd:#E8C48A; --proceso-fg:#5B564D; --proceso-bg:#EFEAE2; --proceso-bd:#DAD2C5; /* Fuera de rango. Se MARCA, nunca se interpreta. */ --fuera-fg:#A82B1E; --fuera-bg:#FCEDEA; --fuera-bd:#E9B4AC; --err:#A82B1E; --espera:#8A5200; --display:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Manrope','Segoe UI',system-ui,-apple-system,Roboto,sans-serif; /* Sombra larga y suave, de foto sobre mesa. Nada de sombras grises de caja de Bootstrap. */ --pieza:0 24px 60px -24px rgba(4,25,27,.45); --pieza-corta:0 10px 28px -20px rgba(4,25,27,.5); --calma:cubic-bezier(.22,1,.36,1); } * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html { height:100%; } body { margin:0; min-height:100%; font-family:var(--sans); font-weight:500; color:var(--texto); background:var(--hueso); -webkit-font-smoothing:antialiased; /* NO lleva `overflow-x:hidden`. Taparlo esconde el sintoma y deja el desborde vivo: cada pieza tiene que caber de verdad (por eso los `min-width:0` de la rejilla de fechas y del nombre del paciente). Verificado a 390 y a 1280 px: 0 px de desborde. */ } .display { font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-variation-settings:'SOFT' 20,'WONK' 0; font-optical-sizing:auto; } .oculto { display:none !important; } .cifras { font-variant-numeric:tabular-nums; } /* El foco se VE. Un medico que llega con teclado (o una lectora de pantalla) tiene que saber donde esta parado. */ :focus-visible { outline:2.5px solid var(--turq-600); outline-offset:2px; border-radius:6px; } .portada :focus-visible { outline-color:var(--turquesa); } /* ── EL GRANO ────────────────────────────────────────────────────── Una capa de ruido finisimo sobre todo. No se «ve»: se nota. Es lo que separa un degradado plano de papel impreso. Va fija, no captura clics y es la misma receta que `global.css` de la web. El SVG va incrustado: la CSP de `_headers` permite `img-src data:` y ningun archivo suelto. */ body::after { content:''; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.038; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── MOVIMIENTO ──────────────────────────────────────────────────── Un solo gesto, bien orquestado: las piezas SUBEN 18 px y se revelan. El ojo lo lee como «llego», no como «reboto». `backwards`, NUNCA `both`. Con `both` el elemento se queda en el primer fotograma —`opacity:0`— si la animacion no llega a avanzar, y la pagina entera se ve en blanco aunque el contenido este ahi. Paso de verdad al renderizar con la ventana oculta (2026-09-20): la ficha y las areas del detalle existian, ocupaban su alto, y no se veia una sola letra. Con `backwards` el estado en reposo es el NATURAL (visible) y el `from` solo manda durante el retardo: si la animacion no corre, todo se ve igual. Ademas nada lleva `opacity:0` en su estado base, por la misma razon. */ @keyframes surgir { from { opacity:0; transform:translate3d(0,18px,0); } to { opacity:1; transform:none; } } @keyframes trazar { from { transform:scaleX(0); } to { transform:scaleX(1); } } .surge { animation:surgir .75s var(--calma) backwards; } /* Los retardos van en CLASES y no en `style=""` porque la CSP de este sitio es `style-src 'self'` SIN `unsafe-inline` (ver `_headers`): un atributo `style` lo descarta el navegador EN SILENCIO. En local no se nota —no hay CSP— y en Cloudflare las ocho entradas aparecerian todas de golpe en vez de escalonadas. El propio `_headers` lo advierte; esto lo cumple. */ .surge-08 { animation-delay:.08s; } .surge-16 { animation-delay:.16s; } .surge-20 { animation-delay:.20s; } .surge-24 { animation-delay:.24s; } .surge-30 { animation-delay:.30s; } .surge-34 { animation-delay:.34s; } .surge-40 { animation-delay:.40s; } /* ══════════════════════════════════════════════════════════════════ ENTRAR — la portada partida ══════════════════════════════════════════════════════════════════ No es una caja blanca centrada. Es una portada: tinta arriba (o a la izquierda) con la marca y el titular de imprenta, hueso abajo (o a la derecha) con el formulario. La mitad donde se teclea es la CLARA a proposito: es la que se usa de pie, en consulta, a veces con sol. */ body.entrando { padding:0; background:var(--hueso); } .entrada { min-height:100vh; min-height:100svh; display:grid; grid-template-rows:auto 1fr; } .portada { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(168deg,var(--tinta-700),var(--tinta) 45%,var(--tinta-900)); color:var(--hueso); padding:24px 20px 0; display:flex; flex-direction:column; } /* Un resplandor turquesa muy abierto: da profundidad sin que se note. */ .portada::before { content:''; position:absolute; z-index:-1; pointer-events:none; width:30rem; height:30rem; right:-11rem; top:-9rem; border-radius:50%; background:rgba(30,202,211,.20); filter:blur(110px); } .portada__in { flex:1 1 auto; max-width:30rem; display:flex; flex-direction:column; } /* El logo va INCRUSTADO, no como archivo aparte, y hay dos razones concretas: · `_redirects` tiene un comodin — un archivo faltante devuelve el HTML del portal y la imagen sale rota en vez de dar 404; · este sitio se sube en un .zip y el Compress-Archive de Windows escribe las rutas con barra INVERTIDA, asi que Cloudflare no crea la subcarpeta: crea un archivo llamado literalmente "brandlos-angeles.png" y el logo sale roto. Sin subcarpetas, eso no puede volver a pasar. Cuesta ~20KB de HTML y ahorra un viaje de red. Y va SOBRE LA TINTA, sin recuadro: es la version turquesa sobre transparencia, que es justo la que esta hecha para fondo oscuro. */ /* 2026-09-20 (segunda vuelta): «agrandaria el logo mas». Tenia 150px y se veia chico para el hueco que tiene la portada. El `max-width` en % es el que manda en los telefonos angostos — sin el, en una pantalla de 320 px el logo se comeria todo el ancho. */ .logotipo { width:206px; max-width:62%; height:auto; display:block; } /* El rotulo de seccion de la web: versalitas espaciadas con una linea turquesa delante. */ .rotulo { display:flex; align-items:center; gap:12px; margin:20px 0 0; font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--turq-300); } .rotulo::before { content:''; flex:0 0 auto; width:30px; height:1px; background:var(--turquesa); transform-origin:left; animation:trazar 1s var(--calma) .25s backwards; } .portada__titulo { font-family:var(--display); font-weight:700; font-size:clamp(28px,7.6vw,40px); line-height:1.04; letter-spacing:-.025em; font-variation-settings:'SOFT' 20,'WONK' 0; font-optical-sizing:auto; margin:12px 0 0; color:#fff; max-width:14ch; } /* El acento de la casa: la palabra que importa, en cursiva turquesa. */ .portada__titulo em { font-style:italic; color:var(--turq-300); } .portada__titulo .punto { color:var(--turquesa); } .portada__lede { margin:13px 0 0; max-width:36ch; font-size:14.5px; font-weight:500; line-height:1.55; color:rgba(246,243,238,.78); } /* Los sellos, cosidos al pie de la portada — igual que las cifras del heroe de la web: cierran la escena en vez de interrumpirla. */ .sellos { list-style:none; margin:20px -20px 0; padding:0; border-top:1px solid var(--linea-oscura); display:grid; grid-template-columns:repeat(3,1fr); } .sellos li { padding:11px 12px; border-left:1px solid var(--linea-oscura); } .sellos li:first-child { border-left:0; padding-left:20px; } .sellos b { display:block; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--turq-300); line-height:1.35; } /* El descriptor solo cabe con holgura en pantalla ancha. En el telefono manda el rotulo corto: tres renglones de letra de 9 px se leen a pulso. */ .sellos span { display:none; } .acceso { background:var(--hueso); display:flex; flex-direction:column; justify-content:center; padding:20px 20px 22px; } .acceso__in { width:100%; max-width:26rem; margin:0 auto; } .acceso__titulo { font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-variation-settings:'SOFT' 20,'WONK' 0; font-optical-sizing:auto; font-size:22px; line-height:1.18; margin:0 0 2px; } .acceso__pie { margin:5px 0 14px; font-size:13.5px; font-weight:500; color:var(--texto-2); line-height:1.5; } label { font-size:10.5px; font-weight:800; display:block; margin:14px 0 7px; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-400); } input[type=text], input[type=password], input[type=search], input[type=date] { width:100%; border:1.5px solid var(--arena); border-radius:12px; padding:14px 13px; font-size:17px; font-weight:700; font-family:inherit; color:var(--texto); background:var(--papel); outline:none; min-height:54px; /* area tactil amplia: se usa de pie */ -webkit-appearance:none; appearance:none; transition:border-color .2s var(--calma), box-shadow .2s var(--calma); } input:focus { border-color:var(--turq-600); box-shadow:0 0 0 3px var(--turq-50); outline:none; } input::placeholder { color:#8A8377; font-weight:600; opacity:1; } .boton { width:100%; min-height:56px; padding:15px; border:none; border-radius:999px; background:var(--turquesa); color:var(--tinta-900); font-size:16px; font-weight:800; font-family:inherit; cursor:pointer; margin-top:18px; letter-spacing:.02em; box-shadow:0 14px 30px -18px rgba(15,122,130,.9); transition:transform .25s var(--calma), background-color .2s, box-shadow .25s var(--calma); } .boton:hover { background:var(--turq-300); transform:translateY(-1px); } .boton:active { background:var(--turq-600); color:#fff; transform:none; } .boton[disabled] { opacity:.5; cursor:default; transform:none; } /* ── El ojito de la clave ── */ .campo { position:relative; } .campo input { padding-right:58px; } .ojo { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:48px; height:48px; margin:0; padding:0; border:none; border-radius:10px; background:none; color:var(--texto-2); display:flex; align-items:center; justify-content:center; cursor:pointer; } .ojo:hover { color:var(--turq-700); } .ojo:active { background:var(--hueso-200); } .ojo svg { width:25px; height:25px; } /* ── Mensajes ── */ .msg { font-size:14.5px; font-weight:700; margin-top:14px; line-height:1.45; } .msg:empty { display:none; } /* Papel sobre hueso, con la barra de color a la izquierda: el mensaje se ve como una nota puesta encima, no como texto suelto. */ .msg.err, .msg.espera { padding:12px 14px; border-radius:12px; background:var(--papel); border:1px solid var(--arena); border-left:4px solid currentColor; box-shadow:var(--pieza-corta); } .msg.err { color:var(--err); } .msg.espera { color:var(--espera); } .credito { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; padding-top:14px; border-top:1px solid var(--arena); font-size:11px; font-weight:600; color:var(--texto-2); letter-spacing:.04em; } .credito svg { width:15px; height:15px; color:var(--turq-600); flex:0 0 auto; } .credito b { color:var(--turq-700); font-weight:800; letter-spacing:.12em; } /* ── Escritorio: la portada se parte en dos columnas ── */ @media (min-width:880px) { .entrada { grid-template-rows:none; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); } .portada { padding:48px 0 0 clamp(40px,5vw,84px); justify-content:center; box-shadow:20px 0 46px -30px rgba(4,25,27,.75); } .portada::before { width:40rem; height:40rem; right:-16rem; top:12%; } .portada__in { max-width:32rem; padding-right:40px; justify-content:center; } .logotipo { width:290px; max-width:none; } .portada__titulo { font-size:clamp(40px,4.2vw,56px); margin-top:18px; } .portada__lede { font-size:16.5px; margin-top:20px; } .sellos { margin:auto 0 0 calc(-1 * clamp(40px,5vw,84px)); padding-left:0; } .sellos li { padding:20px 22px; } .sellos li:first-child { padding-left:clamp(40px,5vw,84px); } .sellos span { display:block; margin-top:7px; font-size:12px; font-weight:500; line-height:1.4; color:rgba(246,243,238,.6); max-width:22ch; } .acceso { padding:48px clamp(40px,5vw,84px); } .acceso__in { max-width:23rem; margin:0; } .acceso__titulo { font-size:26px; } } /* ══════════════════════════════════════════════════════════════════ YA ADENTRO — LA HERRAMIENTA ══════════════════════════════════════════════════════════════════ TERCERA VUELTA, 2026-09-20. El dueño lo probó y dijo: «siento que es inmenso el texto, como que si fuera de juguete, debe ser más serio, es un portal de consulta». Y en seguida dijo con qué compararlo: la **Lista de trabajo** de LABXIS (`src/features/pacientes/ListaTrabajoScreen.jsx`). Así que de aquí para abajo los cuerpos son los del kit de los módulos (`src/shared/modUI.jsx`), no los de una portada: · título de la pantalla 21px → 16px/800 (`Encabezado` de modUI) · línea de contexto — → 12px (la de la Lista de trabajo) · encabezado de tabla 10px → 10px/800 (`th`) · celda de tabla 12.5px → 12px (`td` del kit es 12.5) · nombre del paciente 17.5px Fraunces → 12.5px Manrope/700 · botones de la barra 16px, 56px de alto → 12.5px, 30px · campos 17px, 54px de alto → 12.5px, 32px (escritorio) · chip de estado 10.5px → 9.5px (`Chip` del kit es 10.5) LA PORTADA DEL INGRESO NO SE TOCA. Es la carta de presentación, su escala editorial es a propósito y al dueño le gusta. Por eso TODO lo compacto va colgado de `.app`, que solo existe ya adentro: ni un selector de esta sección alcanza al ingreso. */ body.trabajando { padding:0; background:var(--hueso); } .app { max-width:680px; margin:0 auto; padding:0 14px 40px; } #pantallaLista.app { max-width:760px; } /* Las rejillas NO llevan el tope de lectura de 680 px. Ese tope existe para el texto corrido —una línea de 140 caracteres no se lee, se barre—, pero aplicado a una rejilla de tarjetas deja media ventana vacía, que es el defecto que señaló el dueño: «no se está aprovechando la pantalla, se ve todo englobado en el centro» (GUIA-VISUAL §9). */ #pantallaInicio.app { max-width:1500px; } #pantallaHerramientas.app { max-width:1500px; } /* ── LAS TARJETAS DE MÓDULO ──────────────────────────────────────── Pedido del dueño (2026-09-21): «en vez de tener pestañas arriba, podemos hacer tarjetas independientes para que ellos puedan entrar y salir de los módulos […] como LABXIS, que es modular y le da más presencia». Es la MISMA pieza que `ModuloCard` de LABXIS (src/features/launcher/ Launcher.jsx), con su geometría exacta: fondo de lienzo, borde que se vuelve de marca al pasar, radio 18, padding 18, azulejo de 46 px con el ícono en blanco, título 15/700 y bajada 11.5. No se copió el estilo «a ojo»: se leyó el componente, que es lo que la guía pide para que las dos plataformas no vuelvan a divergir (GUIA-VISUAL §7). La identidad turquesa es la del laboratorio; la ESTRUCTURA es la de LABXIS. Eso es el conglomerado que pidió el dueño. */ .modulos { margin-top:16px; display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); } /* ⚠️ FONDO BLANCO, NO `--hueso`. La primera versión copió el `background: T.canvas` de la tarjeta de LABXIS sin mirar SOBRE QUÉ SE APOYA: en LABXIS esa tarjeta vive sobre un panel blanco y contrasta; acá el fondo de la página YA es hueso, así que quedó pintada del mismo color que el fondo y se perdía. Es el defecto nº 1 de la guía visual (§1.B): «pintar algo del MISMO color del fondo sobre el que se apoya — compila, no rompe nada, y simplemente no se ve». El dueño ya lo había puesto como regla: tarjeta blanca que haga contraste. */ .modulo { text-align:left; appearance:none; font:inherit; cursor:pointer; background:var(--papel); border:1px solid var(--arena); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:12px; transition:transform .16s var(--calma), box-shadow .16s var(--calma), border-color .16s var(--calma); animation:surgir .5s var(--calma) backwards; } .modulo:nth-of-type(2) { animation-delay:.05s; } .modulo:nth-of-type(3) { animation-delay:.10s; } .modulo:nth-of-type(n+4) { animation-delay:.15s; } .modulo:hover { border-color:var(--turquesa); transform:translateY(-2px); box-shadow:0 6px 22px rgba(6,40,43,.12); } .modulo:focus-visible { outline:2.5px solid var(--turq-600); outline-offset:2px; } /* EL DEGRADÉ DE LABXIS, con su valor real: `--grad` de `src/index.css`, `linear-gradient(48deg,#1D6E9C,#3BB394)`. Es el de los botones de la plataforma y lo que la vuelve reconocible de lejos. Acá es donde el dueño pidió «un conglomerado de los dos»: la ESTRUCTURA y este degradé son de LABXIS —la plataforma—, y el turquesa del resto de la pantalla es del Laboratorio Clínico Los Ángeles —quien contrata—. Va en valor literal y no en token porque este portal no carga el sistema de LABXIS; es una de las excepciones que la guía §6 permite para los portales estáticos. */ .modulo__icono { width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(48deg,#1D6E9C 0%,#3BB394 100%); color:#fff; } .modulo__t { font-size:15px; font-weight:800; color:var(--texto); line-height:1.2; } .modulo__d { font-size:11.5px; color:var(--texto-2); margin-top:4px; line-height:1.45; } .barra { background:linear-gradient(120deg,var(--tinta),var(--tinta-700)); color:var(--hueso); position:sticky; top:0; z-index:10; box-shadow:0 2px 20px rgba(4,25,27,.26); } /* El filo turquesa: un pelo de acento que le da borde a la barra sin pintarla de color. */ .barra::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--turquesa),rgba(30,202,211,0) 70%); } .barra__in { max-width:1500px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; } .barra__quien { flex:1 1 auto; min-width:0; } .barra__rotulo { font-size:9.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--turq-300); margin-bottom:4px; } /* Era Fraunces de 18/21 px. El nombre del médico es un rótulo de barra, no un titular: en sans y a 14 px pesa lo que tiene que pesar. */ .barra__nombre { font-size:19px; font-weight:800; letter-spacing:-.015em; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; } .salir { flex:0 0 auto; min-height:32px; padding:0 13px; border:1px solid rgba(246,243,238,.34); border-radius:999px; background:none; color:var(--hueso); font-family:inherit; font-size:11px; font-weight:800; cursor:pointer; letter-spacing:.06em; text-transform:uppercase; transition:background-color .2s, border-color .2s; } .salir:hover { border-color:var(--turquesa); color:var(--turq-200); } .salir:active { background:rgba(246,243,238,.14); } /* ── LA CABECERA DE LA PANTALLA ───────────────────────────────────── La misma anatomía que la Lista de trabajo: a la izquierda el título con su línea de contexto —cuántas órdenes y entre qué fechas—, a la derecha el buscador y los botones. El contexto NO es decoración: es lo que deja tener los filtros plegados sin que el médico pierda de vista en qué rango está parado. */ .cabecera { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-top:12px; } .cabecera__quien { min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 9px; } .cabecera__titulo { margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--texto); } .contexto { font-size:12px; font-weight:600; color:var(--texto-2); font-variant-numeric:tabular-nums; line-height:1.35; } .cabecera__acciones { display:flex; align-items:center; gap:7px; flex:1 1 220px; justify-content:flex-end; } /* ── Campos compactos — SOLO ya adentro ── OJO con el cuerpo en el teléfono: Safari de iOS hace ZOOM solo al enfocar un campo de MENOS de 16 px, y después no vuelve. Acá el zoom está abierto a propósito (el médico lee valores y referencias), así que un campo de 12.5 px le dejaría la página ampliada a cada búsqueda. Por eso los campos se encogen de 720 px para arriba, que es donde hay ratón. */ .app input[type=search], .app input[type=date], .app select.selsede { min-height:38px; padding:8px 11px; font-size:16px; font-weight:700; border-radius:9px; } .selsede { width:100%; border:1.5px solid var(--arena); font-family:inherit; color:var(--texto); background:var(--papel); outline:none; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7A82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px; padding-right:32px !important; } .selsede:focus { border-color:var(--turq-600); box-shadow:0 0 0 3px var(--turq-50); } .buscador { position:relative; flex:1 1 170px; max-width:280px; min-width:0; } .buscador input { padding-right:38px; } .lupa { position:absolute; right:3px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; border-radius:8px; padding:0; margin:0; background:none; color:var(--turq-600); cursor:pointer; display:flex; align-items:center; justify-content:center; } .lupa:hover { background:var(--turq-50); } .lupa svg { width:17px; height:17px; } /* El botón de trabajo: el del kit de los módulos, no el botón de ingreso. 34 px de alto en el teléfono (dedo) y 30 en escritorio. */ .mini { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:0 13px; border-radius:9px; border:1px solid var(--arena); background:var(--papel); color:var(--texto); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; letter-spacing:.01em; transition:border-color .18s, background-color .18s, color .18s; } .mini:hover { border-color:var(--turq-600); color:var(--turq-700); background:var(--turq-50); } .mini:active { background:var(--turq-50); } .mini[disabled] { opacity:.45; cursor:default; } .mini[disabled]:hover { border-color:var(--arena); color:var(--texto); background:var(--papel); } /* Plegado/desplegado de los filtros: un botón que ESTÁ ENCENDIDO se ve encendido. Una afordancia escondida no se encuentra, se tropieza con ella (GUIA-VISUAL §10). */ .mini--on { border-color:var(--turq-600); background:var(--turq-50); color:var(--turq-700); } .mini--fuerte { background:var(--tinta); border-color:var(--tinta); color:var(--hueso); } .mini--fuerte:hover { background:var(--turq-700); border-color:var(--turq-700); color:#fff; } .mini--claro { background:rgba(246,243,238,.12); border-color:rgba(246,243,238,.34); color:#fff; } .mini--claro:hover { background:var(--turquesa); border-color:var(--turquesa); color:var(--tinta-900); } .mini--claro[disabled]:hover { background:rgba(246,243,238,.12); border-color:rgba(246,243,238,.34); color:#fff; } /* ── LA FRANJA DE FILTROS ── Plegada por omisión, igual que en la Lista de trabajo. No es por ahorrar espacio en escritorio: es que el médico abre el portal PARA VER LA LISTA, y un formulario de 200 px arriba empuja la primera fila fuera de la pantalla. El rango sigue a la vista en la línea de contexto, así que plegar no esconde ningún dato. */ .franja { margin-top:10px; display:grid; gap:9px 14px; align-items:end; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--papel); border:1px solid var(--arena); border-radius:12px; padding:11px 12px; box-shadow:var(--pieza-corta); } .franja__campo { min-width:0; } /* Sin esto manda la regla de `label` del ingreso (10.5px con 14px de margen arriba), que acá deja un renglón de aire entre cada campo. */ .franja label { margin:0 0 5px; font-size:9.5px; letter-spacing:.14em; } .atajos { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; margin:0; } .atajo { flex:0 0 auto; min-height:30px; padding:0 13px; border:1px solid var(--arena); border-radius:999px; background:var(--hueso); color:var(--texto-2); font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:border-color .2s, background-color .2s, color .2s; } .atajo:hover { border-color:var(--turq-600); color:var(--turq-700); background:var(--turq-50); } .atajo:active { background:var(--turq-50); border-color:var(--turq-600); color:var(--turq-700); } #btnConsultar { grid-column:1 / -1; } /* ── LA BARRA DE ACCIONES ── La franja petróleo de la Lista de trabajo, con la misma división: a la IZQUIERDA lo que acota lo que se ve (las pestañas de estado con su conteo), a la DERECHA lo que opera sobre lo marcado. Son dos cosas distintas y así dejan de leerse como una sola tira de botones. */ .acciones { margin-top:10px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; background:linear-gradient(120deg,var(--tinta),var(--tinta-700)); color:var(--hueso); border-radius:12px; padding:7px 9px; } .pestanas { display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; } .pestana { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 11px; border:0; border-radius:8px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; white-space:nowrap; background:rgba(246,243,238,.10); color:#fff; transition:background-color .18s; } .pestana:hover { background:rgba(246,243,238,.20); } .pestana--on { background:var(--turq-600); font-weight:800; } .pestana__n { font-size:11px; font-weight:800; border-radius:9px; padding:1px 6px; min-width:19px; text-align:center; background:rgba(246,243,238,.18); font-variant-numeric:tabular-nums; } .pestana--on .pestana__n { background:rgba(4,25,27,.30); } .acciones__der { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; } .acciones__sel { font-size:11.5px; font-weight:800; color:var(--turq-200); white-space:nowrap; font-variant-numeric:tabular-nums; } /* «Marcar todos» vive ACÁ y no en el encabezado de la tabla a propósito: en el teléfono el encabezado no se muestra (la fila se apila), así que un marcar-todos que viviera ahí no existiría justo donde más cuesta marcar una por una. Y al haber UNO SOLO no hay dos casillas que sincronizar. */ .marcar { display:inline-flex; align-items:center; gap:7px; margin:0; cursor:pointer; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--turq-200); min-height:30px; } .marcar:hover { color:#fff; } .casilla { width:15px; height:15px; margin:0; flex:0 0 auto; cursor:pointer; accent-color:var(--turq-600); } /* ── Avisos dentro de la lista ── Todos van en PAPEL o en su propio tinte, nunca del color del lienzo que tienen debajo: un aviso que no se ve es un aviso que no existe. */ .aviso { margin-top:10px; padding:11px 13px; border-radius:11px; font-size:12.5px; font-weight:600; line-height:1.5; box-shadow:var(--pieza-corta); } .aviso--techo { background:var(--parcial-bg); border:1px solid var(--parcial-bd); border-left:4px solid var(--parcial-fg); color:var(--parcial-fg); } .aviso--vacio { background:var(--papel); border:1px solid var(--arena); color:var(--texto-2); text-align:center; padding:26px 18px; font-size:13px; font-weight:700; } .aviso--err { background:var(--fuera-bg); border:1px solid var(--fuera-bd); border-left:4px solid var(--fuera-fg); color:var(--fuera-fg); } .aviso--espera{ background:var(--parcial-bg); border:1px solid var(--parcial-bd); border-left:4px solid var(--parcial-fg); color:var(--parcial-fg); } .aviso .reintentar { display:inline-block; margin-top:10px; min-height:32px; padding:0 18px; border:none; border-radius:999px; background:var(--tinta); color:var(--hueso); font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; letter-spacing:.05em; text-transform:uppercase; transition:background-color .2s; } .aviso .reintentar:hover { background:var(--turq-700); } /* ══════════════════════════════════════════════════════════════════ LA LISTA — UNA TABLA DE TRABAJO ══════════════════════════════════════════════════════════════════ Se copia la FORMA de las tablas de los módulos —`src/shared/modUI.jsx`, `ListaTrabajoScreen.jsx`— traducida a la paleta de este portal: · la tabla va SIEMPRE sobre una tarjeta (papel), nunca sobre el lienzo; · el encabezado NO es una banda de color: es del mismo papel, con el rótulo en turquesa oscuro y una línea de 2 px abajo — la estructura la hace la LÍNEA, no un relleno (GUIA-VISUAL §2); · rayado alterno contra el papel de la tarjeta, nunca contra el lienzo (GUIA-VISUAL §1); · separadores de 1 px, cifras tabulares y CASILLA de selección al canto. En el TELÉFONO una tabla de nueve columnas no cabe, así que la MISMA fila se apila en cuatro renglones — que siguen alineados de fila a fila, porque la rejilla es la misma para todas. Denso y alineado, sin volver a las tarjetas grandes y sin obligar a desplazar de lado. */ .ordenes { display:block; margin-top:10px; } .tabla { /* Las nueve columnas viven en UNA variable. El encabezado y el cuerpo son rejillas HERMANAS (no una de verdad): si las dos no leen exactamente el mismo valor, las columnas dejan de alinear y no hay nada que lo avise. Los mínimos NO son al ojo: cada uno es lo que mide el dato más ancho que de verdad sale del catálogo, medido en la captura, con los cuerpos NUEVOS (celda de 12 px, chip de 9.5). Un mínimo corto no desborda: PARTE —«MAZ-2009260 01», «Mazatenang o»—, que se ve peor. casilla 28 → la casilla de 15 px con su aire estado 152 → el chip «RESULTADOS LISTOS» entero (es el más largo) paciente 154 → «Chávez de León María Esperanza» en un renglón dpi 112 → «2458 96321 0901» mide 102 medido en la captura edad 76 → «47 años · M» orden 112 → «MAZ-200926001» mide 99 en peso 800 fecha 74 → «20/09/2026» sede 80 → «Mazatenango» (y si no cabe, se corta con puntos) pruebas 54 → el rótulo «PRUEBAS», que es más ancho que el número Suma 842 + 8 huecos de 10 + 24 de padding = 946 px. Por eso la tabla de una sola línea empieza a los 1000 de ventana y no antes. */ /* ESTADO va en 158 y no en 142 (2026-09-28). El comentario de arriba ya decia 152 —«el chip RESULTADOS LISTOS entero»— pero la variable tenia 142: diez menos que lo que el propio calculo pedia. El chip no cabia y se salia de su columna cruzando la linea divisoria hacia el nombre del paciente, que es lo que se veia como «encabezados desalineados» y «fichas mal medidas». Se le dan 158 para que quepa con aire, no al ras: al ras, cualquier rotulo de estado un poco mas largo lo vuelve a romper. */ --cols: 28px 158px minmax(160px,1.9fr) minmax(116px,.75fr) 104px minmax(116px,.6fr) 88px minmax(92px,.9fr) 58px; background:var(--papel); border:1px solid var(--arena); border-radius:12px; overflow:hidden; box-shadow:var(--pieza-corta); } /* Tabla ancha → desplaza DENTRO de su tarjeta, nunca la página (GUIA-VISUAL §9). Es la red de seguridad: si una ventana angosta no le alcanza a las nueve columnas, lo que se corre de lado es la tabla. */ .tabla__rueda { overflow-x:auto; } /* En el teléfono no hay encabezado que mostrar: la fila apilada se lee sola (el DPI lleva su rótulo, la edad su unidad, las pruebas su palabra). */ .tabla__cab { display:none; } /* El cuerpo va aparte del encabezado para que el rayado y el «primera fila» se cuenten entre FILAS. Con las filas colgando junto al encabezado, `:nth-of-type` lo contaba a él como la primera y el rayado salía corrido. */ .tabla__cuerpo { display:block; } .orden { display:grid; width:100%; text-align:left; cursor:pointer; font-family:inherit; color:var(--texto); background:transparent; border:0; border-top:1px solid var(--arena); padding:12px 14px; gap:3px 10px; grid-template-columns:auto minmax(0,auto) minmax(0,1fr) minmax(0,auto); grid-template-areas: "sel estado estado fecha" "sel pac pac pac" "sel dpi dpi edad" "sel folio sede pruebas"; transition:background-color .15s; } .orden:first-of-type { border-top:0; } /* El rayado alterna contra TRANSPARENTE, que deja ver el papel de la tarjeta. Pintar la fila par del color del lienzo es el defecto nº 1 de la guía: no se ve. */ .orden:nth-of-type(even) { background:var(--hueso); } .orden:hover { background:var(--turq-50); } .orden:active { background:var(--hueso-200); } /* El riel de estado al canto. Va por sombra INTERIOR y no por borde: un borde de 3 px correría la rejilla 3 px en las filas y el encabezado quedaría desalineado. */ .orden--listos { box-shadow:inset 3px 0 0 var(--listos-fg); } .orden--parcial { box-shadow:inset 3px 0 0 var(--parcial-fg); } .orden--proceso { box-shadow:inset 3px 0 0 var(--proceso-bd); } /* Una fila marcada se tiene que ver marcada aunque la casilla quede fuera de la vista al desplazar la tabla de lado. */ .orden--sel, .orden--sel:nth-of-type(even) { background:var(--turq-50); } .orden--sel { box-shadow:inset 3px 0 0 var(--turq-600); } /* Solo las primeras: 300 filas animando a la vez hacen que el teléfono tartamudee justo cuando el médico quiere leer. `backwards`, nunca `both` (ver la nota de MOVIMIENTO). */ .tabla .orden:nth-of-type(-n+10) { animation:surgir .5s var(--calma) backwards; } .tabla .orden:nth-of-type(2) { animation-delay:.03s; } .tabla .orden:nth-of-type(3) { animation-delay:.06s; } .tabla .orden:nth-of-type(4) { animation-delay:.09s; } .tabla .orden:nth-of-type(5) { animation-delay:.12s; } .tabla .orden:nth-of-type(6) { animation-delay:.15s; } .tabla .orden:nth-of-type(n+7) { animation-delay:.18s; } /* ── Las celdas ── `min-width:0` en todas: sin él, una celda con un dato largo (un nombre de sede, un DPI tecleado con guiones) empuja su columna y se lleva por delante la alineación de toda la tabla. */ .cel { min-width:0; font-size:12px; font-weight:600; color:var(--texto-2); line-height:1.35; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; } /* La casilla es una