debajo del paciente. Cerrado es una tira de una línea que DICE lo
que lleva dentro; abierto, la rejilla de siempre. Ver `bloqueDatos` en
`app/pantallas/orden.js`, que decide si nace abierto o cerrado.
--------------------------------------------------------------------------- */
.orden-mas { border: 1px solid var(--line); border-radius: 12px; background: hsl(from #F7FAFC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
/* `display: block` y no `flex`: con `flex` Chrome seguia pintando SU flechita
al lado de la nuestra, y salian dos. Quitandole el `list-item` se va sola,
y la fila se monta en el de dentro. */
.orden-mas > summary {
display: block; padding: 9px 12px; cursor: pointer; list-style: none;
border-radius: 12px; user-select: none;
}
.orden-mas > summary > .om-fila {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* FUERA LA FLECHA DE LA CASA EN ESTA TIRA (Iralis, 20/09/2026: «a ese botón
quítale la primera flecha que está de primero sola que apunta hacia la
derecha»). La app le pone a TODO un chevron con `summary::before`
—abajo del archivo—, y aquí salían dos: esa, apuntando a la derecha y sola
en su renglón, y la nuestra al lado del título. Se queda la nuestra, que va
pegada al texto y gira al abrir. */
.orden-mas > summary::before { content: none; display: none; }
.orden-mas > summary::-webkit-details-marker { display: none; }
.orden-mas > summary:hover { background: rgba(0, 0, 0, .03); }
.orden-mas > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.orden-mas .om-abrir { display: flex; color: var(--muted); }
.orden-mas .om-abrir svg { width: 17px; height: 17px; transition: transform .15s ease; }
.orden-mas[open] .om-abrir svg { transform: rotate(180deg); }
.orden-mas .om-titulo { font-weight: 600; font-size: .9rem; }
/* El resumen se queda a la derecha y se recorta si no cabe: lo que no puede
pasar es que empuje al título a una segunda línea. */
.orden-mas .om-resumen {
margin-left: auto; color: var(--muted); font-size: .84rem;
display: flex; align-items: center; gap: 8px;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* URGENTE en ámbar: si la orden se procesa primero, eso se ve con la tira
cerrada o no se ve nunca. */
.orden-mas .om-urgente {
flex: none; padding: 2px 8px; border-radius: 999px;
background: var(--warn-soft); color: var(--warn);
font-size: .74rem; font-weight: 800; letter-spacing: .4px;
}
.orden-mas .om-campos { margin: 0; padding: 2px 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Procedencia, médico y urgencia en una fila; si no caben, dos por fila antes
que cortar «Urgente — se procesa primero». */
@media (max-width: 950px) { .orden-mas .om-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Abierto, la tira de arriba se separa de los campos con una raya. */
.orden-mas[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
@media (max-width: 700px) {
.orden-datos { grid-template-columns: 1fr; }
.orden-mas .om-campos,
.orden-datos:has(> #ordCampoPct:not([hidden])) { grid-template-columns: 1fr; }
/* En el teléfono el resumen se va a su propia línea antes que apretarse. */
.orden-mas .om-resumen { margin-left: 27px; }
}
/* Lo que lleva la orden, debajo del catálogo: renglones, cifras, cobro y Guardar */
.facturacion {
margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius);
background: #fff; overflow: hidden;
}
.facturacion .cifras-orden { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.facturacion .cobro-en-orden { margin: 0 16px; padding: 12px 0 14px; }
/* --- TODAS LAS CIFRAS EN UNA SOLA COLUMNA ---------------------------------
Cada renglón del carrito lleva su equis a la derecha, así que su precio
termina 28 px antes del filo: 20 del botón (16 de icono más 2+2 de aire) y 8
de separación. Total y saldo NO llevan equis, así que se iban esos 28 px más
a la derecha y quedaban descolgados de la columna de precios. Iralis lo vio
el 10/09/2026 sobre el saldo: «este quince debería ir más a la izquierda,
centrado con el quince de arriba».
Se reserva el mismo hueco a mano y así los números caen todos en la misma
línea vertical, que es lo que deja compararlos de un vistazo. Va en una
variable para que si algún día cambia el tamaño de la equis, cambie sola en
los tres sitios y no se vuelvan a separar. */
.facturacion { --columna-equis: 28px; }
.facturacion .cifras-orden > div { padding-right: var(--columna-equis); }
.facturacion .cobro-en-orden .cobro-saldo { padding-right: var(--columna-equis); }
/* Los pagos anotados sí llevan equis, pero con otra medida: 15 px de icono,
2+2 de aire y 4 de margen, contra 16+2+2 y nada de margen en los renglones.
Tres píxeles de diferencia, que es justo lo que hace que una columna de
números se vea «casi» alineada, que es peor que no alinearla. Se igualan las
dos equis y la cifra cae donde las demás. */
.facturacion .cobro-en-orden .cobro-pago { padding-left: 0; padding-right: 0; }
.facturacion .cobro-en-orden .cobro-pago span:last-child { gap: 8px; }
.facturacion .cobro-en-orden .cobro-pago .quitar { margin-left: 0; padding: 2px; }
.facturacion .cobro-en-orden .cobro-pago .quitar svg { width: 16px; height: 16px; }
.facturacion .cobro-en-orden .cobro-campos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.facturacion .cobro-en-orden .cobro-campos .ancho2 { grid-column: auto; }
.facturacion-pie {
display: flex; align-items: center; gap: 14px; padding: 12px 16px 16px;
border-top: 1px solid var(--line); background: hsl(from #FAFCFE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
flex-wrap: wrap; row-gap: 8px; /* si no caben, bajan: antes se cortaba «Guardar Cobro» */
}
.facturacion-pie .pista { text-align: left; }
/* En pantalla estrecha sí se parte: la forma de pago en su línea, debajo el
monto y los bolívares, y el botón cruzando de lado a lado. */
@media (max-width: 700px) {
.facturacion .cobro-en-orden .cobro-campos { grid-template-columns: 1fr 1fr; }
.facturacion .cobro-en-orden .cobro-campos .ancho2 { grid-column: 1 / -1; }
.facturacion .cobro-en-orden .cobro-anadir { grid-column: 1 / -1; }
.facturacion .cobro-en-orden .cobro-anadir .btn { width: 100%; justify-content: center; }
}
.bloque { padding: 16px; }
.bloque-titulo {
margin: 0 0 12px; font-family: var(--display); font-size: .95rem; font-weight: 800;
color: var(--primary);
}
/* --- Buscadores ------------------------------------------------------------ */
.buscador-paciente { position: relative; flex: 1 1 240px; }
/* Dentro de un padre en columna (un cuadro, un .campo) esos 240px serían la
ALTURA: la casilla arriba y la lupa flotando a media caja. */
.dialogo > .buscador-paciente, .campo > .buscador-paciente { flex: none; }
.buscador-paciente input { width: 100%; padding-right: 38px; }
.buscador-paciente svg {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.buscador-examenes { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
/* Apoyados abajo, NO centrados. Estas barras mezclan `.campo` (que lleva su
rotulito encima y por eso mide ~62 px) con buscadores y botones sueltos (~38).
Centrándolos, el buscador y el botón quedaban 12 px más altos que el select
de al lado: la barra se veía torcida. Se vio en Configuración > Precios el
10/09/2026. Cuando todos los hijos miden igual, `flex-end` y `center` dan lo
mismo, así que no cambia nada donde ya estaba bien. */
.chip-repetir { flex: none; font-size: .84rem; }
/* --- Una persona en la lista ------------------------------------------------ */
.lista-pacientes { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.fila-paciente {
display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
padding: 9px 11px; border-radius: var(--radius-sm);
border: 1.5px solid transparent; background: none; cursor: pointer;
font-family: var(--font); color: var(--ink);
transition: background .14s ease, border-color .14s ease;
}
.fila-paciente:hover { background: var(--secondary-soft); border-color: var(--secondary); }
.fila-paciente .cuerpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fila-paciente b { font-size: .93rem; }
.fila-paciente small { font-size: .78rem; color: var(--muted); }
.avatar-paciente {
width: 34px; height: 34px; border-radius: 99px; flex: none;
display: grid; place-items: center;
background: var(--secondary-soft); color: var(--secondary-dark);
}
.avatar-paciente svg { width: 18px; height: 18px; }
.paciente-elegido {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: var(--radius-sm);
background: var(--secondary-soft); border: 1.5px solid var(--secondary);
}
.paciente-datos { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.paciente-datos b { font-size: 1rem; font-family: var(--display); color: var(--primary); }
.paciente-datos span { font-size: .82rem; color: var(--secondary-dark); }
/* Lo que le falta a la ficha, en la misma tarjeta: es lo que impide mandar
los resultados después, y aquí el paciente todavía está delante. */
.paciente-datos .paciente-faltas {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.paciente-datos .paciente-falta {
display: inline-flex; align-items: center; gap: 5px;
padding: 1px 8px; border-radius: 999px;
background: var(--warn-soft); color: var(--warn);
font-size: .76rem; font-weight: 600;
}
.paciente-datos .paciente-falta svg { width: 13px; height: 13px; }
.paciente-botones { display: flex; gap: 6px; flex: none; }
/* La lista del cuadro «le faltan datos» al guardar */
.dialogo .lista-falta {
margin: 6px 0 10px; padding: 10px 14px 10px 30px;
border-radius: var(--radius-sm);
background: var(--warn-soft); color: var(--warn);
font-size: .88rem; font-weight: 600; line-height: 1.7;
}
.dialogo .lista-falta li::marker { color: var(--warn); }
.dialogo .apunte { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.aviso-suave {
display: flex; align-items: flex-start; gap: 9px;
margin: 10px 0 0; padding: 10px 13px; border-radius: var(--radius-sm);
background: var(--warn-soft); color: #7A4E06; font-size: .85rem; line-height: 1.45;
}
.aviso-suave svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
/* --- Las áreas, como pastillas ---------------------------------------------- */
/* Los filtros por área. «Todas / Perfiles» son de otra naturaleza que las
áreas —no filtran por área, cambian QUÉ se lista—, así que van en su propio
grupo, separados por una raya fina. Las áreas vienen ordenadas por lo que
se pide de verdad (db/035) y la cola se pliega tras «+ N más», así que la
fila cabe en una línea. */
.filtros-area {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 12px 0 10px;
}
/* `display: contents`: los grupos existen para agrupar el sentido, no para
ocupar sitio. Así los botones fluyen todos en la misma línea y se reparten
solos; si fueran cajas de verdad, cada grupo empezaría línea nueva y el
«+N más» se quedaba huérfano abajo. */
.chips-grupo { display: contents; }
.chips-raya {
width: 1px; align-self: stretch; min-height: 22px;
background: var(--line); flex: none;
}
.chip-area {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px; cursor: pointer;
border: 1.5px solid var(--line); background: #fff;
font-family: var(--font); font-size: .74rem; font-weight: 700; color: var(--muted);
letter-spacing: .1px;
white-space: nowrap;
transition: border-color .14s ease, background .14s ease, color .14s ease,
box-shadow .14s ease;
}
.chip-area:hover { border-color: var(--secondary); color: var(--secondary-dark); }
.chip-area.activa {
background: var(--primary); border-color: var(--primary); color: #fff;
box-shadow: 0 2px 8px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18);
}
/* Cuántos exámenes tiene cada área: se lee de reojo, sin robarle sitio al nombre */
/* El nombre es lo que se recorta si hiciera falta; la cuenta va aparte y no
se pierde (antes el recorte se comía la cifra de COAGULACIÓN SANGUÍNEA). */
.chip-nombre { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.chip-cuenta {
font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
padding: 0 5px; border-radius: 999px; flex: none;
background: var(--field-bg); color: var(--muted);
}
.chip-area.activa .chip-cuenta { background: rgba(255, 255, 255, .22); color: #fff; }
/* El de desplegar no es un área: se distingue sin gritar */
.chip-area.chip-mas {
border-style: dashed; color: var(--secondary-dark); border-color: var(--secondary);
background: var(--secondary-soft, hsl(from #E4F4F5 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))));
}
/* «Marcados» sin nada marcado: se ve, pero no invita a pulsarlo */
.chip-area.chip-apagado { opacity: .45; cursor: default; }
.chip-area.chip-apagado:hover { border-color: var(--line); color: var(--muted); }
/* --- El catálogo -------------------------------------------------------------- */
/* Todo lo de elegir exámenes vive en un cuadro: el buscador, los filtros y la
lista. Así se lee como una sola cosa —«de aquí se escoge»— y no como tres
trozos sueltos flotando en la página. La cabecera se queda quieta al
desplazar la lista, que es larga. */
.catalogo-caja {
border: 1px solid var(--line); border-radius: var(--radius);
background: #fff; overflow: hidden;
}
.catalogo-cab {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 12px 14px 0;
background: linear-gradient(180deg, hsl(from #FAFCFE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))), #fff);
border-bottom: 1px solid var(--line);
}
.catalogo-cab .buscador-paciente { flex: 1 1 320px; }
.catalogo-cab .filtros-area { flex: 1 0 100%; margin: 4px 0 10px; }
.lista-examenes { max-height: 460px; overflow-y: auto; padding: 8px 10px 10px; }
.grupo-catalogo {
position: sticky; top: 0; z-index: 2;
margin: 8px 0 6px; padding: 5px 2px 7px;
display: flex; align-items: center; gap: 8px;
font-size: .7rem; font-weight: 800; letter-spacing: 1px;
text-transform: uppercase; color: var(--muted);
background: #fff;
}
.grupo-catalogo::after {
content: ''; flex: 1; height: 1px; background: var(--line);
}
.grupo-catalogo span {
order: 3; font-size: .68rem; letter-spacing: 0;
padding: 0 6px; border-radius: 999px;
background: var(--field-bg); color: var(--muted);
}
.grupo-catalogo:first-child { margin-top: 0; }
/* Los renglones que pasan por detrás del título del grupo asomaban cortados a
la mitad, arriba y abajo de él. Esta franja tapa en blanco la rendija de
arriba y desvanece lo que queda debajo, así no se lee media línea suelta. */
.grupo-catalogo::before {
content: ''; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -11px;
background: linear-gradient(#fff 0, #fff calc(100% - 11px), rgba(255, 255, 255, 0) 100%);
z-index: -1; pointer-events: none;
}
/* Dos columnas en cuanto hay sitio: la lista es larga y la pantalla ancha.
Con menos de 900 px vuelve a una, que es como se ve en un portátil chico. */
.grupo-filas { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 900px) { .grupo-filas { grid-template-columns: 1fr 1fr; } }
.fila-examen {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 8px 11px; margin-bottom: 3px; border-radius: var(--radius-sm);
border: 1.5px solid transparent; background: none; cursor: pointer;
font-family: var(--font); color: var(--ink);
transition: background .12s ease, border-color .12s ease;
}
.fila-examen:hover { background: hsl(from #F4F8FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-color: var(--line); }
.fila-examen .cuerpo { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.fila-examen b { font-size: .89rem; font-weight: 600; }
.fila-examen small { font-size: .74rem; color: var(--muted); }
.fila-examen .precio {
font-family: var(--cifra); font-size: .84rem; color: var(--ink); flex: none;
/* Igual que en «La orden»: los importes se leen en columna. */
font-variant-numeric: tabular-nums; text-align: right; min-width: 62px;
}
.fila-examen .marca {
width: 22px; height: 22px; flex: none; display: grid; place-items: center;
border-radius: 6px; color: var(--muted);
}
.fila-examen .marca svg { width: 15px; height: 15px; }
.fila-examen.marcado {
background: var(--secondary-soft); border-color: var(--secondary);
}
.fila-examen.marcado .marca { color: var(--secondary-dark); }
/* Marcado EN DIVISAS: la fila entera en verde, el mismo verde del dólar. Un
examen marcado se queda con la lista con la que se marcó aunque después se
cambie la de arriba (Iralis, 11/09/2026), y el color lo dice desde lejos:
verde lo que se cobra en dólares, azul lo que se cobra en bolívares. */
.fila-examen.marcado.marcado-divisas {
background: var(--divisas-soft); border-color: var(--divisas);
}
.fila-examen.marcado.marcado-divisas .marca { color: var(--divisas); }
.fila-examen.marcado.marcado-divisas b { color: var(--divisas); }
/* REGULAR tenía que heredar el turquesa de `.marcado` a secas, que es justo el
que se confundía con el verde. Ahora tiene el suyo, escrito. */
.fila-examen.marcado.marcado-regular {
background: var(--regular-soft); border-color: var(--regular);
}
.fila-examen.marcado.marcado-regular .marca { color: var(--regular); }
.fila-examen.marcado.marcado-regular b { color: var(--regular); }
.fila-examen.perfil b::before {
content: '◈'; margin-right: 6px; color: var(--info); font-size: .8em;
}
/* Ya viene dentro de un perfil marcado: se ve, pero apagado */
.fila-examen.ya-dentro { opacity: .5; }
.hay-mas {
margin: 8px 0 0; text-align: center; font-size: .8rem; color: var(--muted);
}
.vacio-chico, .cargando-chico {
padding: 18px; text-align: center; font-size: .87rem; color: var(--muted);
line-height: 1.5;
}
/* --- Lo que lleva la orden ---------------------------------------------------- */
.carrito {
position: sticky; top: calc(var(--barra) + 14px);
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--sombra); overflow: hidden;
}
/* La cotización: lo que se elige a la izquierda y el carrito a la derecha.
`align-items: start` es lo que deja al carrito pegarse (sticky) al bajar. */
.orden-dos-columnas {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
gap: 14px; align-items: start;
}
.orden-izquierda { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.carrito-cab {
display: flex; align-items: baseline; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, hsl(from #FBFDFF calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))), hsl(from #F4F8FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))));
}
.carrito-cab h3 {
margin: 0; font-family: var(--display); font-size: .95rem; font-weight: 800; color: var(--primary);
}
.carrito-cab .cuenta { font-size: .78rem; color: var(--muted); }
.lista-elegidos {
list-style: none; margin: 0; padding: 6px 0;
max-height: 300px; overflow-y: auto;
}
.elegido {
display: flex; align-items: center; gap: 8px;
padding: 8px 16px; font-size: .86rem;
}
.elegido + .elegido { border-top: 1px solid var(--line); }
.elegido > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* La pastilla de la lista y el precio son hermanos del nombre, no van dentro:
el renglón es una fila centrada y los tres quedan a la misma altura
(Iralis, 11/09/2026: «céntralo con el precio»). Todas las pastillas miden
lo mismo, así que la vista baja recta por los colores y por los precios,
sin dientes de sierra. */
.elegido > .ren-lista {
align-self: center; margin-top: 0; min-width: 104px; text-align: center; flex: none;
}
.elegido > .etiqueta-lista { align-self: center; margin-top: 0; flex: none; }
/* El desglose de arriba del total: cuánto va por precio regular y cuánto en
divisas. Solo sale cuando la orden lleva de las dos (Iralis, 11/09/2026). */
/* Van JUNTOS y pegados al total, no uno en cada punta del renglón: es una
cuentecita, y una cuenta se lee con las cifras una debajo de otra y el
rótulo al lado (Iralis, 11/09/2026: «el regular y divisas está por allá
lejísimos»). */
.desglose-listas {
display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
margin-bottom: 2px;
}
/* Ojo: el relleno de la derecha lo pone ya `.facturacion .cifras-orden > div`
(la columna de la ×). Ponerlo otra vez aquí lo duplicaba y las cifras del
desglose quedaban desalineadas con el TOTAL. */
.desglose-linea { display: flex; align-items: center; gap: 7px; font-size: .84rem; }
.desglose-linea b {
font-family: var(--cifra); font-weight: 600; font-variant-numeric: tabular-nums;
min-width: 62px; text-align: right;
}
/* EL RECUADRO DE LO QUE SE COBRA
Un bloque estrecho pegado a la derecha, como la cuenta de un recibo: dentro
caben el desglose por lista, el descuento y el total, y por eso se leen como
una sola cosa. Fuera del recuadro la caja es muy ancha y las cifras
quedaban flotando (Iralis, 11/09/2026). */
/* La fila del total: a la izquierda, observaciones y el n.º de factura, que
es lo que se rellena mirando el total; a la derecha, el recuadro de la
cuenta. Antes esa mitad izquierda era blanco vacío (Iralis, 20/09/2026). */
.facturacion .cifras-orden {
flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 16px;
}
.cifras-apuntes {
flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 12px;
}
/* La factura, del ancho de su propio nombre y ni un pixel mas: es un numero
corto y casi nunca se escribe. Observaciones se queda con todo lo que sobre
hasta el recuadro del total (Iralis, 20/09/2026). */
.cifras-apuntes .campo-factura { flex: 0 0 132px; min-width: 0; }
.cifras-apuntes .campo-obs { flex: 1; min-width: 0; }
/* (Jean, 07/10/2026) Con la ventana angosta «Observaciones» se encogía hasta
casi nada y su título se montaba sobre «Diagnóstico». Cada casilla tiene un
ancho mínimo y, SOLO si no caben las tres, baja de renglón; en las
computadoras de la clínica caben y se ven igual que siempre. */
.cifras-apuntes { flex-wrap: wrap; row-gap: 10px; }
.cifras-apuntes .campo-obs { min-width: 170px; }
.cifras-apuntes .campo > span { white-space: nowrap; }
.cifras-apuntes input, .cifras-apuntes textarea { width: 100%; }
.cifras-apuntes textarea { height: 40px; min-height: 40px; resize: vertical; }
/* Con la ventana estrecha, cada cosa a su renglon antes que apretarse. Se
aguanta hasta bien abajo porque ahora las tres cosas ocupan poco. */
@media (max-width: 760px) {
.facturacion .cifras-orden { flex-direction: column; align-items: stretch; }
.cifras-apuntes { flex-wrap: wrap; }
.facturacion .cifras-orden > .resumen-cobro { align-self: flex-end; }
}
.facturacion .cifras-orden > .resumen-cobro {
width: min(320px, 100%);
display: flex; flex-direction: column; gap: 5px;
padding: 10px 14px 12px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: hsl(from #FAFCFE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.resumen-cobro .desglose-listas { align-items: stretch; margin: 0; }
.resumen-cobro .desglose-linea { justify-content: space-between; gap: 10px; }
.resumen-cobro .desglose-linea b { min-width: 0; }
.resumen-cobro .renglon-descuento { padding: 0; }
/* La raya solo del ancho del recuadro, y el total debajo, en grande */
.facturacion .cifras-orden .total {
justify-content: space-between; gap: 14px;
padding: 8px 0 0; margin-top: 1px; border-top: 1.5px solid var(--line);
}
.elegido .precio { font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }
.elegido b { font-weight: 600; }
.elegido.perfil b { color: var(--info); }
.cuantos-dentro { font-size: .72rem; color: var(--muted); }
.elegido .precio { font-family: var(--cifra); font-size: .84rem; flex: none; }
/* 206 · Exonerado (solo administradores): el precio de lista tachado y $0,00,
la marca con el motivo y el botón, discreto hasta que se usa */
.elegido .precio-exonerado { color: var(--success); font-weight: 700; white-space: nowrap; }
.elegido .precio-exonerado s { color: var(--muted); font-weight: 400; margin-right: 4px; }
.exonerado-marca { color: var(--success) !important; font-weight: 600; }
/* 260 · «COBRADO CAJA 1» POR RENGLÓN (Jean, 29/09/2026). Violeta propio: el
verde ya es DIVISAS y el azul REGULAR, y esto no es una lista de precios sino
algo ya pagado en la caja de la clínica. Con candado: aquí no se toca. */
.elegido .precio-caja1 { color: var(--caja1); font-weight: 700; white-space: nowrap; }
.elegido .precio-caja1 s { color: var(--muted); font-weight: 400; margin-right: 4px; }
.caja1-marca { color: var(--caja1) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.caja1-marca svg, .grupo-renglones svg, .renglon-caja1 svg { width: 13px; height: 13px; }
.elegido.de-caja1 { background: var(--caja1-soft); }
.btn-caja1.activo { background: var(--caja1); border-color: var(--caja1); color: #fff; }
.grupo-renglones { list-style: none; padding: 7px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .4px;
text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.grupo-renglones.de-caja1 { color: var(--caja1); background: var(--caja1-soft); }
.grupo-renglones.del-lab { color: var(--regular); background: var(--regular-soft); }
.renglon-caja1 { color: var(--caja1); display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; }
.renglon-caja1 span:last-child { font-family: var(--cifra); font-weight: 600; }
.renglon-caja1 span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.fila-examen.marcado.marcado-caja1 { background: var(--caja1-soft); border-color: var(--caja1); }
.fila-examen.marcado.marcado-caja1 .marca, .fila-examen.marcado.marcado-caja1 b { color: var(--caja1); }
.fila-examen.marcado-caja1 .precio s { color: var(--muted); font-weight: 400; }
.etiqueta-lista.caja1 { background: var(--caja1); color: #fff; }
.btn.chico.btn-exonerar { flex: none; padding: 3px 9px; font-size: .74rem; border-style: dashed; color: var(--muted); }
.btn.chico.btn-exonerar:hover { color: var(--primary); border-color: var(--primary); }
.btn.chico.btn-exonerar.activo { border-style: solid; color: var(--success); border-color: var(--success); background: var(--success-soft); }
.elegido .quitar {
border: none; background: none; cursor: pointer; color: var(--muted);
display: grid; place-items: center; padding: 2px; flex: none;
}
.elegido .quitar:hover { color: var(--danger); }
.elegido .quitar svg { width: 16px; height: 16px; }
.elegido.nada {
padding: 16px; color: var(--muted); font-style: italic; justify-content: center;
}
/* La orden de trabajo (una orden que ya existe, abierta en esta pantalla):
lo marcado para quitar sigue a la vista, tachado, hasta que se guarde; lo
validado lleva candado. Los botones «Quitar»/«Dejarlo» son de la casa. */
.elegido.existente .btn.chico { flex: none; }
.elegido.quitando { opacity: .55; }
.elegido.quitando > div b, .elegido.quitando .precio { text-decoration: line-through; }
.elegido .ren-bloqueado {
display: grid; place-items: center; flex: none; color: var(--muted); padding: 2px 6px;
}
.elegido .ren-bloqueado svg { width: 16px; height: 16px; }
.facturacion .cifras-orden .ed-cifras { font-size: .82rem; color: var(--muted); }
.facturacion .cifras-orden .ed-cifras b { color: var(--primary); }
/* El cuadro de «Falta por cobrar», con las cuentas: lo que suma la orden, lo
anotado por cada forma de pago, lo que falta y el pago escrito sin anotar */
/* Sin el hueco de 12px de .dialogo: cada rótulo va pegado a SU lista (4px) y
separado de la de arriba (10px), con los márgenes de cada párrafo. */
.dialogo.cobro-pregunta { width: min(520px, 100%); gap: 0; }
.dialogo.cobro-pregunta p.apunte { margin-top: 10px; }
.cp-rotulo, .dialogo p.cp-rotulo { margin: 10px 0 4px; font-size: .9rem; color: var(--ink); }
.cp-rotulo b { color: var(--primary); }
.cp-lista {
list-style: none; margin: 0; padding: 4px 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cp-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .86rem; }
.cp-lista li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-lista li b { font-family: var(--cifra); font-weight: 500; flex: none; }
.cp-lista li small { color: var(--muted); }
.cp-lista .cp-mas { color: var(--muted); font-style: italic; }
.cp-falta, .dialogo p.cp-falta {
margin: 12px 0 0; display: flex; justify-content: space-between; align-items: baseline;
font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--danger);
}
.cp-falta b { font-family: var(--cifra); font-size: 1.3rem; font-weight: 700; }
.cp-escrito, .dialogo p.cp-escrito {
margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--warn-soft); color: #9A6208; font-size: .86rem;
display: flex; gap: 8px; align-items: flex-start;
}
.cp-escrito.mal, .dialogo p.cp-escrito.mal { background: var(--danger-soft); color: var(--danger); }
.cp-escrito svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cp-escrito b { color: inherit; }
.dialogo.cobro-pregunta .dialogo-botones { flex-wrap: wrap; margin-top: 16px; }
/* `.dialogo p` les ganaba y los pintaba en negro. Solo color y letra: los
márgenes se quedan en 0 para que mande el gap del cuadro. */
.dialogo p.cp-falta { color: var(--danger); font-size: .82rem; }
.dialogo p.cp-escrito { color: #9A6208; font-size: .86rem; }
.dialogo p.cp-escrito.mal { color: var(--danger); }
/* Con tres botones no caben en una fila y «Anotar … y guardar» bajaba solo:
el principal va arriba, a todo lo ancho; Cancelar y Guardar, debajo. */
.dialogo.cobro-pregunta [data-anotar] { order: -1; flex: 1 0 100%; justify-content: center; }
.cp-pregunta, .dialogo p.cp-pregunta { margin: 14px 0 0; font-size: .95rem; font-weight: 700; color: var(--primary); }
/* ===========================================================================
DE QUÉ LISTA ES CADA PRECIO
Las dos listas van en dólares, pero DIVISAS es lo que se cobra si paga en
dólares y REGULAR si paga en bolívares. Confundirlas cuesta dinero, así que
cada precio lleva su marca y siempre del mismo color: verde el dólar —el
mismo verde del dinero en toda la app—, azul los bolívares.
=========================================================================== */
.etiqueta-lista {
display: inline-block; flex: none;
padding: 1px 6px; border-radius: 999px;
font-family: var(--font); font-size: .62rem; font-weight: 800;
letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
.etiqueta-lista.divisas { background: var(--divisas-soft); color: var(--divisas); }
.etiqueta-lista.regular { background: var(--regular-soft); color: var(--regular); }
.etiqueta-lista.otra { background: var(--warn-soft); color: #9A6208; }
/* LO QUE NO DEPENDE DEL COLOR.
Separar más los dos verdes ayuda, pero una pantalla mala puede con
cualquier par de colores. Así que en la fila MARCADA —que es donde se
decide el dinero— la palabra deja de ser una etiqueta pálida y se pone
maciza: fondo del color fuerte, letra blanca y un punto más grande. Un
bloque verde oscuro y uno azul oscuro no se parecen ni en blanco y negro, y
además la palabra se lee. Es la misma idea que el informe impreso, que marca
lo anormal con negrita y tamaño y no con color. */
.fila-examen.marcado .etiqueta-lista {
font-size: .66rem; padding: 2px 7px; letter-spacing: .6px;
}
.fila-examen.marcado.marcado-divisas .etiqueta-lista {
background: var(--divisas); color: #fff;
}
.fila-examen.marcado.marcado-regular .etiqueta-lista {
background: var(--regular); color: #fff;
}
/* En el catálogo la marca va debajo del precio, alineada a la derecha */
.fila-examen .precio {
display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
/* En «La orden», al lado del nombre */
.elegido .ren-abajo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.elegido > div > .etiqueta-lista { align-self: flex-start; margin-top: 2px; }
/* Y el selector de arriba se tiñe de lo mismo, para que la lista que manda se
vea sin leerla */
.campo-lista select { border-width: 1.5px; font-weight: 600; }
.campo-lista.lista-divisas select { border-color: var(--divisas); color: var(--divisas); background: var(--divisas-soft); }
.campo-lista.lista-regular select { border-color: var(--regular); color: var(--regular); background: var(--regular-soft); }
/* ===========================================================================
VERIFICAR EL PAGO MÓVIL CON EL BANCO (app/pago-movil.js)
El mismo sistema de Cobros: sin el visto bueno del banco no se cobra.
=========================================================================== */
/* El aviso debajo de la fila de pago: ámbar mientras falta, verde al cuadrar */
.pm-linea {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 8px; padding: 9px 12px; border-radius: var(--radius-sm);
background: var(--warn-soft); color: #9A6208; font-size: .86rem;
}
.pm-linea.listo { background: var(--success-soft); color: #177148; }
/* Verificado, pero el banco dice MÁS de lo que se está cobrando: ámbar, que
eso hay que mirarlo antes de guardar (ver `pmSobra` en la pantalla de la
orden y en la del cobro junto). */
.pm-linea.ojo { background: var(--warn-soft); color: #9A6208; }
/* `hidden` pierde contra el `display: flex` de arriba, y entonces la franja se
quedaba puesta con la casilla vacía. Es la misma trampa que ya mordió al
botón del comprobante y al aviso del borrador. */
.pm-linea[hidden] { display: none; }
.pm-linea > span { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.pm-linea svg { width: 18px; height: 18px; flex: none; }
.pm-linea .btn { flex: none; }
.dialogo.pm-verificar { width: min(660px, 100%); max-height: 92vh; overflow-y: auto; }
/* Un solo número manda: lo que falta por verificar, o el visto bueno */
.pm-cifra {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 14px; margin: 6px 0 10px; border-radius: var(--radius);
background: var(--warn-soft); color: #9A6208;
}
.pm-cifra.listo { background: var(--success-soft); color: #177148; }
.pm-cifra-num {
font-family: var(--cifra); font-size: 1.9rem; font-weight: 700; line-height: 1.1;
display: inline-flex; align-items: center; gap: 8px;
}
.pm-cifra.listo .pm-cifra-num { font-family: var(--display); font-size: 1.4rem; font-weight: 800; }
.pm-cifra-num svg { width: 26px; height: 26px; }
.pm-cifra-pie { font-size: .8rem; opacity: .85; }
.pm-marcado, .dialogo p.pm-marcado { margin: 0 0 8px; font-size: .86rem; color: var(--muted); }
.pm-marcado b { color: var(--ink); font-family: var(--cifra); }
/* Cada pago que el banco confirmó, con su × para quitarlo: uno se puede
equivocar de pago —dos del mismo monto, un dígito mal oído—. */
.pm-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--success-soft); font-size: .84rem;
}
.pm-item-hora { font-family: var(--cifra); color: var(--muted); flex: none; }
.pm-item-monto { font-family: var(--cifra); font-weight: 700; flex: none; }
.pm-item-quien { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item-ref { font-family: var(--cifra); flex: none; }
.pm-item .quitar {
border: none; background: none; cursor: pointer; color: var(--muted);
display: grid; place-items: center; padding: 2px; flex: none;
}
.pm-item .quitar:hover { color: var(--danger); }
.pm-item .quitar svg { width: 16px; height: 16px; }
.pm-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pm-filtro {
flex: 1; min-width: 160px; padding: 9px 12px;
border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: var(--field-bg);
font-family: var(--font); font-size: .88rem;
}
.pm-dias { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.pm-dia { font-size: .84rem; font-weight: 600; color: var(--ink); min-width: 92px; text-align: center; }
.pm-flecha { padding: 4px 10px; font-size: 1.1rem; line-height: 1; }
.pm-flecha:disabled { opacity: .4; cursor: default; }
/* La tabla del día, como la del banco: hora, monto, quién pagó y referencia */
.pm-tabla { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pm-tabla table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pm-tabla th {
position: sticky; top: 0; background: var(--fondo); z-index: 1;
padding: 7px 10px; text-align: left; font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}
.pm-tabla td { padding: 7px 10px; border-top: 1px solid var(--line); }
.pm-tabla .pm-celda-hora, .pm-tabla .pm-celda-monto, .pm-tabla .pm-celda-ref { font-family: var(--cifra); }
.pm-tabla tr.libre { cursor: pointer; }
.pm-tabla tr.libre:hover, .pm-tabla tr.libre:focus { background: var(--secondary-soft); outline: none; }
.pm-tabla tr.ocupada { opacity: .5; }
.pm-ref-ini { color: var(--muted); }
/* Un pago anotado en la orden de trabajo, que se registra al guardar */
.cobro-pago.por-anotar { border-left: 3px solid var(--warn); background: var(--warn-soft); }
/* El pie con los tres botones de Nubelab: Guardar · Comprobante · Anular */
.facturacion-pie.edicion { flex-wrap: wrap; gap: 8px; }
.facturacion-pie.edicion .pista { flex-basis: 100%; }
@media (max-width: 900px) { .facturacion-pie .pista { flex-basis: 100%; } }
/* Los pagos de verdad dentro del carrito: mismas cifras y misma tabla que el
cuadro de cobro, sin el desglose (ya está arriba, en «La orden»). */
.cobro-en-pantalla .cobro-cifras { margin-bottom: 4px; }
.cobro-en-pantalla .cobro-sub { margin-top: 6px; }
.cobro-en-pantalla .cobro-form { margin-top: 8px; }
.carrito-pie {
padding: 14px 16px; border-top: 1px solid var(--line);
display: flex; flex-direction: column; gap: 11px; background: hsl(from #FAFCFE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.total {
display: flex; align-items: baseline; justify-content: space-between;
padding-top: 4px; border-top: 1.5px solid var(--line);
}
.total span { font-size: .82rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--muted); }
.total b {
font-family: var(--display); font-size: 1.45rem; font-weight: 800; color: var(--primary);
font-variant-numeric: tabular-nums;
}
.pista, .dialogo p.pista { margin: 0; text-align: center; font-size: .78rem; color: var(--muted); }
/* El cobro dentro de la orden nueva: la tabla «Pagos recibidos» de Nubelab,
pero con el saldo a la vista y el equivalente en dólares mientras se escribe. */
.cobro-en-orden {
display: flex; flex-direction: column; gap: 9px;
padding-top: 10px; border-top: 1.5px solid var(--line);
}
/* La cabecera del cobro: el rotulo a la izquierda y, pegado a la derecha, el
numero de factura. Antes aqui vivian «Pago al contado / Pago al credito»;
se fueron el 20/09/2026 porque aqui nadie fia y eran dos botones para
decidir algo que ya estaba decidido. Ahora es solo un titulo. */
.cobro-cab { display: flex; align-items: flex-end; gap: 16px; }
.cobro-titulo {
margin: 0 auto 0 0; font-size: .82rem; font-weight: 700;
letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
}
.cobro-en-orden .cobro-pago { padding: 6px 10px; }
.cobro-en-orden .cobro-pago span:last-child { display: flex; align-items: center; gap: 4px; }
.cobro-en-orden .quitar {
border: none; background: none; cursor: pointer; color: var(--muted);
display: grid; place-items: center; padding: 2px; flex: none;
}
.cobro-en-orden .quitar:hover { color: var(--danger); }
.cobro-en-orden .quitar svg { width: 16px; height: 16px; }
/* Los cuatro en una fila, como en Nubelab: forma de pago, monto, bolívares y
el botón de anotar. (Esta regla venía de cuando el carrito era una columna
estrecha de 330 px y partía la fila en dos; hoy la orden es de una sola
columna ancha y esa razón ya no existe.) */
.cobro-en-orden .cobro-campos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.cobro-en-orden .cobro-campos .ancho2 { grid-column: auto; }
/* El botón, del mismo alto que las casillas de al lado: mismo relleno vertical
que `input, select` (9px) y ocupando toda su columna. */
.cobro-anadir { display: flex; align-items: end; }
.cobro-anadir .btn {
white-space: nowrap; padding: 9px 16px; width: 100%;
justify-content: center; border-color: var(--secondary); color: var(--secondary-dark);
}
/* El de devolver, rojo con letras blancas: la regla de arriba le pintaba las
letras de azul encima del rojo (Iralis, 10/09/2026: «se ve tan feo»). */
.cobro-anadir .btn.peligro { border-color: var(--danger); color: #fff; }
.cobro-anadir .btn.peligro:hover { border-color: #C8461F; color: #fff; }
/* Los pagos anotados, debajo de la fila y separados por su raya */
.cobro-en-orden .cobro-pago:first-of-type { margin-top: 10px; }
/* La fila del saldo, con la misma hechura que el total de Cobros (`.lp-total`):
una raya de 2 px arriba, el rótulo pequeño en versalitas y la cifra grande.
Es la última línea del carrito y la que se mira antes de guardar, así que se
lee como un cierre y no como un renglón más (Iralis, 10/09/2026).
Lo que NO se copia de Cobros es el color: allá el total va siempre en el azul
de la marca, y aquí esta cifra significa tres cosas distintas —falta cobrar,
cobrado completo, queda a crédito— y el color es justamente lo que las
separa. La raya usa `currentColor` para ir con el estado, no contra él. */
.cobro-saldo {
display: flex; justify-content: space-between; align-items: baseline; font-weight: 800;
gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 2px solid currentColor;
}
.cobro-saldo span { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.cobro-saldo b { font-family: var(--cifra); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cobro-saldo.debe { color: var(--danger); }
.cobro-saldo.aldia { color: var(--success); }
.cobro-saldo.credito { color: var(--warn); }
.cobro-cifras .credito { color: var(--warn); }
/* ===========================================================================
ESTADÍSTICAS
Las gráficas son SVG dibujado a mano: son barras, y no hace falta traerse
cien kilobytes de librería para pintar rectángulos.
=========================================================================== */
.periodos {
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
margin-bottom: 16px;
}
.periodo-a-mano {
display: flex; align-items: center; gap: 6px; margin-left: auto;
font-size: .82rem; color: var(--muted);
}
.periodo-a-mano input { padding: 5px 9px; font-size: .82rem; }
.kpis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: 11px; margin-bottom: 16px;
}
.kpi {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--sombra); padding: 14px 16px;
display: flex; flex-direction: column; gap: 2px;
}
.kpi-rotulo {
font-size: .74rem; font-weight: 800; letter-spacing: .6px;
text-transform: uppercase; color: var(--muted);
}
.kpi-cifra {
font-family: var(--display); font-size: 1.7rem; font-weight: 800;
color: var(--primary); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.kpi-nota { font-size: .76rem; color: var(--muted); }
/* Las dos tarjetas de cada pareja, de la misma altura: con `start` el borde
de abajo quedaba escalonado. */
.dos-columnas {
display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 14px; margin-bottom: 14px; align-items: stretch;
}
.dato-suelto { margin: 0 0 12px; font-size: .95rem; }
.dato-suelto b { color: var(--primary); font-family: var(--display); font-weight: 800; }
/* El apunte es la frase que explica lo que hay debajo. El tiron de -6px esta
para PEGARLO AL TITULO que tiene encima, porque los titulos dejan hueco por
abajo. Cuando lo que tiene encima no es un titulo —un buscador, una fila de
botones, una tabla— ese tiron se le mete dentro: en Configuracion -> Perfiles
la frase se subia hasta tocar el cuadro de buscar (Iralis, 13/09/2026).
Asi que el tiron se da SOLO detras de un titulo, que es para lo que era. */
.apunte { margin: 0 0 12px; font-size: .8rem; color: var(--muted); }
h1 + .apunte, h2 + .apunte, h3 + .apunte, h4 + .apunte { margin-top: -6px; }
/* Y detras del buscador, un respiro: la fila de buscar no deja hueco por
abajo y la frase quedaba pegada al borde del cuadro. */
.buscador-examenes + .apunte { margin-top: 8px; }
/* En Configuración la barra también es cabecera: la pastilla del código y
«cambios sin guardar» van al centro del botón de volver, y el «Agregar» va
arriba, a la altura del título, no al pie del último párrafo. */
#cfgCuerpo .buscador-examenes > .examen-codigo,
#cfgCuerpo .buscador-examenes > .cfg-sucio { align-self: center; }
#cfgCuerpo .buscador-examenes > .crece ~ .btn { align-self: flex-start; }
.dato-suelto .apunte { margin: 0 0 0 6px; display: inline; }
/* --- Barras por día --------------------------------------------------------- */
.grafica-svg { width: 100%; height: 130px; display: block; }
.grafica-svg .barra { fill: var(--secondary); }
.grafica-svg .barra:hover { fill: var(--secondary-dark); }
.grafica-svg .eje { stroke: var(--line); stroke-width: .3; }
.grafica-pie {
display: flex; justify-content: space-between; gap: 10px;
font-size: .74rem; color: var(--muted); margin-top: 6px;
}
.grafica-max { font-weight: 700; }
/* --- Barras horizontales ----------------------------------------------------- */
/* LAS TRES COLUMNAS SON DE LA LISTA ENTERA, NO DE CADA RENGLÓN.
Antes cada `li` era su propia cuadrícula, así que cada uno medía sus columnas
por su cuenta: el renglón que llevaba una devolución («Transferencia (Bs)
$91,00 −$91,00») necesitaba más sitio para la cifra, y su barra empezaba y
terminaba en otro punto que las demás. En pantalla se veía una barra corrida
entre barras alineadas (Iralis, 19/09/2026: «que todas las barras vayan una
abajo de otra»).
Con la cuadrícula en el `ul` y los `li` en `display: contents`, las tres
columnas las mide la lista una sola vez y todos los renglones caen a plomo.
La columna del importe la manda la cifra más ancha de todas —antes eran 52 px
fijos y «$2.965,00» se partía en dos renglones (13/09/2026)—. */
.barras-h {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(74px, max-content);
align-items: center; gap: 6px 10px;
}
.barras-h li { display: contents; }
.bh-nombre {
/* Sin recorte: el aviso de la moneda es lo unico que puede alargar el nombre
y recortarlo justo a el («Transferencia (Bs) d...») era esconder lo que hay
que ver. Ahora, si no cabe, baja de linea. Pasa en una fila de siete. */
font-size: .84rem; line-height: 1.35;
}
.bh-barra {
height: 8px; border-radius: 999px; background: var(--fondo); overflow: hidden;
}
.bh-barra i { display: block; height: 100%; background: var(--secondary); border-radius: 999px; }
.bh-valor {
font-family: var(--cifra); font-size: .82rem; text-align: right;
font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
/* Lo devuelto va al lado, no debajo: es una nota de la misma cifra. */
.bh-valor .bh-dev { margin-left: 6px; }
/* Los importes necesitan más sitio que un conteo */
.bh-nombre .moneda.choca {
background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 4px;
}
.bh-nombre .moneda {
font-size: .72rem; color: var(--muted); margin-left: 6px;
font-family: var(--font); /* son palabras, no cifras */
}
/* ===========================================================================
LA FICHA DEL PACIENTE
Toda su historia en una pantalla. En Nubelab hay que ir orden por orden.
=========================================================================== */
/* En la ficha las tres cifras son informativas, no filtran: no se levantan al
pasar el ratón ni invitan a pulsarlas. */
.resumen-ficha .tarjeta-resumen { cursor: default; }
.resumen-ficha .tarjeta-resumen:hover { transform: none; box-shadow: var(--sombra); }
.estado-pill {
display: inline-block;
font-size: .72rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px;
background: var(--warn-soft); color: var(--warn);
}
.estado-pill.lista { background: var(--success-soft); color: var(--success); }
.estado-pill.anulada { background: var(--neutro-soft); color: var(--neutro); }
.cuantos-falta {
display: block; margin-top: 2px;
font-size: .74rem; color: var(--muted); font-family: var(--cifra);
}
/* Los códigos de lo que se le hizo. Se recorta a dos líneas: la fila no puede
crecer sin freno porque alguien pidiera veinte exámenes. */
/* Lo que llevaba la orden, en la ficha del paciente.
ESTO ESTABA ROTO Y SE VEÍA (Iralis, 13/09/2026: «mira cómo está montado esto
encima de la línea»). Llevaba `-webkit-line-clamp: 2` con `display:
-webkit-box`, pero esto es un `` y el navegador le impone su propio
`display` de celda: el recorte NUNCA se aplicaba —computaba `flow-root`— y
lo único que quedaba en pie era el `overflow: hidden`, que cortaba la
tercera línea por la mitad justo encima del borde.
Medido: el 84 % de las órdenes lleva 12 códigos o menos y cabe en dos
líneas; solo una en todo el laboratorio llega a 36. Así que no hace falta
recortar nada: se deja crecer y no se esconde ni un examen. */
.que-le-hicieron {
font-family: var(--cifra); font-size: .78rem; color: var(--muted);
line-height: 1.4; max-width: 420px;
overflow-wrap: anywhere;
}
/* En pantalla estrecha, lo que lleva la orden pasa abajo del todo y se queda
pegado al borde inferior: así el total sigue a la vista mientras se elige. */
@media (max-width: 1000px) {
.carrito { position: static; }
.orden-dos-columnas { grid-template-columns: 1fr; }
}
/* En pantalla estrecha la rejilla se rompe en dos líneas antes que apretarse
hasta lo ilegible: el rango y el anterior pasan debajo del valor. */
@media (max-width: 760px) {
.campo-fila {
grid-template-columns: 26px 1fr 110px 60px;
row-gap: 2px; padding: 8px 14px;
}
.campo-fila.cabecera-campos { display: none; }
.campo-rango, .campo-extra { grid-column: 2 / -1; }
.campo-rango { margin-top: 2px; }
}
/* --- Los filtros avanzados --------------------------------------------------- */
.filtros-avanzados {
display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: 10px; padding: 14px; align-items: end;
border-top: 1px solid var(--line); background: hsl(from #FAFCFE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.filtros-avanzados[hidden] { display: none; }
.filtros-avanzados .campo > span { font-size: .7rem; }
.filtros-avanzados select, .filtros-avanzados input { width: 100%; padding: 7px 10px; font-size: .86rem; }
/* Que el texto largo no pase por debajo de la flecha */
.filtros-avanzados select { padding-right: 30px; background-position: right 9px center; }
.filtros-botones { display: flex; align-items: flex-end; }
.filtros-botones .btn { width: 100%; justify-content: center; }
/* Con filtros puestos el botón lo dice y cuántos. Sin esto, alguien puede
pasarse un rato buscando una orden que no sale porque se dejó un filtro. */
.btn.con-filtros {
background: var(--secondary); border-color: var(--secondary); color: var(--primary-dark);
}
.btn.con-filtros:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: #fff; }
/* Ordenar por: los tres de siempre */
.ordenar {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 0 14px 12px;
border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px;
}
.ordenar > span { font-size: .85rem; color: var(--muted); font-weight: 600; }
.radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .89rem; }
.radio input { accent-color: var(--secondary-dark); width: 15px; height: 15px; padding: 0; }
/* ===========================================================================
LA BANDEJA
=========================================================================== */
/* Sin `overflow` a propósito. Con un contenedor de desplazamiento, la cabecera
pegajosa se ancla a ESE contenedor y no a la ventana: deja un hueco de 55 px
y tapa la primera fila. Como por debajo de 1024 px la tabla se convierte en
tarjetas, no hace falta desplazamiento lateral en ningún momento. */
.tabla-envoltorio {
margin-top: 14px;
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--sombra);
}
/* Todo esto va acotado a `.tabla-envoltorio` a propósito. Sin acotar, alcanza
también a la tabla del informe impreso, que necesita justo lo contrario:
sin fondos, sin colores y sin cabecera pegada. */
.tabla-envoltorio table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-envoltorio th {
text-align: left;
font-size: .72rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
/* Azul noche, como la barra de arriba (Iralis, 24/09/2026). La raya
turquesa de debajo la quitó Jean el 05/11/2026. El degradado va más abajo. */
color: #fff; background: var(--primary);
padding: 11px 10px; white-space: nowrap;
/* Antes se quedaba pegada al desplazar; flotaba a media altura sobre las
filas y confundía más de lo que ayudaba (01/09/2026). Ahora baja con la
tabla, como en Nubelab. */
position: static;
}
/* El degradado del encabezado se pinta en el fondo de la caja, en una franja
del alto exacto del encabezado, y las celdas van transparentes encima.
Pintado en las celdas o en la fila, cada celda ponía su trozo y quedaba una
rayita clara entre una y otra (los anchos llevan decimales). Por eso el
encabezado tiene alto fijo: la franja tiene que medir lo mismo. */
.tabla-envoltorio:has(> table > thead) {
background: linear-gradient(100deg, hsl(from #0A1F38 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))) 0%, var(--primary) 55%, hsl(from #15456F calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))) 100%) top / 100% 42px no-repeat, #fff;
}
.tabla-envoltorio thead th { background: transparent; height: 42px; }
.tabla-envoltorio.compacta:has(> table > thead) { background-size: 100% 36px, auto; }
.tabla-envoltorio.compacta thead th { height: 36px; }
.tabla-envoltorio th:first-child { border-top-left-radius: var(--radius); }
.tabla-envoltorio th:last-child { border-top-right-radius: var(--radius); }
/* 380 · EL EMBUDO DE «EXÁMENES»: filtrar la bandeja por un examen o por un
perfil (Jean, 04/11/2026; app/filtro-examen.js y la maqueta
auditoria/maquetas/bandeja-filtro-examen.html). El botón vive en la
cabecera azul; encendido (con filtro, o abierto) se pinta turquesa. */
.th-examenes-dentro { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; vertical-align: middle; }
.embudo-examen {
width: 26px; height: 26px; flex: none; padding: 0; display: inline-grid; place-items: center;
border-radius: 7px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08);
color: #fff; cursor: pointer; transition: background .15s, border-color .15s;
}
.embudo-examen svg { width: 14px; height: 14px; }
.embudo-examen:hover { background: rgba(255, 255, 255, .2); }
.embudo-examen:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.embudo-examen.encendido, .embudo-examen[aria-expanded="true"] { background: var(--secondary); border-color: var(--secondary); }
/* «HCG ×» en la cabecera: el nombre en su tamaño, sin las mayúsculas espaciadas del rótulo */
.ficha-filtro-examen {
display: inline-flex; align-items: center; gap: 4px; max-width: 230px;
background: #fff; color: var(--primary); border-radius: 999px; padding: 2px 3px 2px 10px;
font-size: .74rem; font-weight: 700; letter-spacing: .2px; text-transform: none;
}
.ficha-filtro-examen[hidden] { display: none; }
.ffe-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffe-quitar {
width: 20px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 50%;
background: var(--secondary-soft); color: var(--primary); font-size: .95rem; line-height: 1; cursor: pointer;
}
.ffe-quitar:hover { background: var(--field-border); }
.ffe-quitar:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
/* Encima de la tabla: cuántas órdenes salen con ese examen o perfil */
.franja-filtro-examen {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 0 0 8px; padding: 8px 14px; border-radius: var(--radius-sm);
background: var(--secondary-soft); border: 1px solid var(--field-border);
color: var(--secondary-dark); font-size: .86rem; font-weight: 600;
}
.franja-filtro-examen[hidden] { display: none; }
.franja-filtro-examen b { color: var(--primary); }
/* En pantalla estrecha la cabecera de la tabla no sale: el embudo va en la barra */
.solo-estrecho { display: none; }
@media (max-width: 1024px) { .solo-estrecho { display: inline-flex; } }
.btn .ico-embudo { width: 14px; height: 14px; }
#btnFiltroExamenBarra.encendido { background: var(--secondary-soft); border-color: var(--secondary); }
/* La ventanita (fuera de la tabla, en el , colocada junto al embudo) */
.filtro-examen {
position: fixed; z-index: 60; padding: 12px;
background: #fff; border: 1px solid var(--field-border); border-radius: 14px;
box-shadow: 0 18px 40px hsl(from rgb(13 39 64) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .22);
animation: menuIn .14s ease-out;
}
.filtro-examen::before {
content: ''; position: absolute; top: -7px; left: var(--fe-pico, 24px); width: 12px; height: 12px;
background: #fff; border-left: 1px solid var(--field-border); border-top: 1px solid var(--field-border);
transform: rotate(45deg);
}
/* Abierta hacia arriba (poco sitio abajo): el pico va abajo, mirando al embudo */
.filtro-examen.hacia-arriba::before {
top: auto; bottom: -7px;
border: 0; border-right: 1px solid var(--field-border); border-bottom: 1px solid var(--field-border);
}
.fe-busca {
width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--field-border); border-radius: 10px;
font: 500 .95rem var(--font); color: var(--ink);
background: var(--field-bg) no-repeat 11px center / 15px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7086' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.fe-busca:focus { outline: 2px solid var(--secondary); outline-offset: 0; background-color: #fff; }
/* Una sola lista con barra; los títulos se quedan arriba al bajar */
.fe-cuerpo {
max-height: min(520px, var(--fe-alto, 60vh)); overflow: auto; overscroll-behavior: contain;
margin: 8px -4px 0; padding: 0 4px;
}
.fe-titulo {
position: sticky; top: 0; z-index: 1; background: #fff;
display: flex; justify-content: space-between; padding: 10px 2px 6px;
font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.fe-titulo span { font-family: var(--cifra); letter-spacing: 0; }
.fe-op {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: .88rem; color: var(--ink);
}
.fe-op.marcado { background: var(--secondary-soft); }
.fe-op.puesto { font-weight: 700; color: var(--primary); }
.fe-op.puesto .fe-cuenta { background: var(--secondary); color: #fff; }
.fe-nombre { min-width: 0; }
.fe-cod { font: 600 .74rem var(--cifra); color: var(--muted); margin-left: 6px; }
.fe-cuenta {
flex: none; font: 700 .78rem var(--cifra); color: var(--primary); background: hsl(from #E8F0FB calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.fe-cuenta.cero { color: var(--muted); background: transparent; }
.fe-vacio, .fe-cargando { padding: 18px 6px; color: var(--muted); font-size: .88rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .filtro-examen { animation: none; } }
/* En la bandeja, el buscador y la tabla van pegados, como un solo bloque
blanco (modelo B, 24/09/2026). Solo con tabla de verdad: por debajo de
1024 px las filas son tarjetas sueltas y no hay encabezado que pegar. */
@media (min-width: 1025px) {
#pantallaBandeja > .caja:has(+ .tabla-envoltorio) {
border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: none;
}
#pantallaBandeja > .caja + .tabla-envoltorio {
margin-top: 0; border-top: 0; border-radius: 0 0 18px 18px;
box-shadow: 0 24px 40px -28px hsl(from rgb(10 31 56) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .55);
}
#pantallaBandeja > .caja + .tabla-envoltorio th { border-radius: 0; }
}
.tabla-envoltorio th.centro { text-align: center; }
.tabla-envoltorio td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla-envoltorio tbody tr:last-child td { border-bottom: none; }
.tabla-envoltorio tbody tr { transition: background .12s ease; }
/* Una fila sí y otra no, apenas marcada, para no perder el renglón. Va antes
de :hover y de los colores de fila (urgente…), que tienen que ganarle. */
.tabla-envoltorio tbody tr:nth-child(even) { background: hsl(from #FAFCFE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.tabla-envoltorio tbody tr:hover { background: var(--secondary-soft); }
/* …salvo la fila que sostiene el «no hay órdenes»: encenderla la hace parecer
seleccionable y no lleva a ninguna parte. */
.tabla-envoltorio tbody tr:has(.vacio):hover { background: transparent; }
/* La columna «No.» del día. Se llamaba `num`, igual que las columnas de dinero
de Ingresos, Estadísticas y Cotizaciones; como esta regla va después, su
`center` y su gris ganaban por cascada y descuadraban todos los importes de
la app (revisión de interfaz, 12/09/2026). Ahora tiene nombre propio. */
td.conteo {
font-family: var(--cifra); font-variant-numeric: tabular-nums;
color: var(--muted); text-align: center; width: 44px;
}
/* Las cifras van a la derecha: es como se suman con la vista. Hace falta
repetirlo acotado porque `.tabla-envoltorio th` manda todo a la izquierda. */
.tabla-envoltorio th.num { text-align: right; }
td.cedula { font-family: var(--cifra); font-size: .82rem; white-space: nowrap; }
td.fecha { color: var(--muted); font-size: .82rem; white-space: nowrap; }
/* En palabras desde el 24/09/2026 (modelo E1), y centradas bajo su
encabezado (Iralis: «siento que esta columna no está centrada»). */
td.estatus-celda { text-align: center; width: 118px; }
/* Las órdenes anuladas se ven, pero apagadas: están ahí como registro, no
como trabajo pendiente. */
tr.anulada { opacity: .55; }
tr.anulada:hover { opacity: 1; }
/* --- La marca de estatus ---------------------------------------------------- */
/* En palabras (Iralis, 24/09/2026: «los dibujos no me gustan»; modelo E1 de
auditoria/modelos-pastilla-orden-2.html). Arriba lo que pasa, «Lista»,
«Falta 1», «Retrasada»; debajo, en pequeño y gris, la cuenta: «12 de 13».
Los tonos son los oscuros de la pastilla, que sobre blanco pasan de 4,5
(el naranja de antes daba 2,6). La retrasada se queda QUIETA en rojo: el
reloj que latía se quitó el 10/09/2026 («se quede rojo»). */
.marca-estado { display: inline-block; font-size: .86rem; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.marca-estado small { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.marca-estado.lista { color: #0F6B43; }
.marca-estado.pendiente { color: #C87318; } /* más claro, del naranja de la pastilla (Iralis: «muy oscuro»); 3,5 sobre blanco */
.marca-estado.retrasada { color: #A8231A; }
.marca-estado.anulada { color: var(--muted); }
/* --- Avisos junto al nombre -------------------------------------------------- */
.urgente {
font-size: .66rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
color: #fff; background: var(--danger);
padding: 2px 6px; border-radius: 99px; margin-left: 7px; vertical-align: 1px;
}
.marca-obs {
display: inline-grid; place-items: center; vertical-align: -3px;
margin-left: 6px; color: var(--info); cursor: help;
}
.marca-obs svg { width: 15px; height: 15px; }
/* EL NOMBRE DEL PACIENTE, SIEMPRE EN MAYÚSCULAS Y EN UNA SOLA LÍNEA
(Iralis, 16/09/2026: «todos los nombres y apellidos de los pacientes que se
vean en mayúsculas, y que si pasan la primera fila que tengan unos puntos
suspensivos», enseñando cómo lo hace Nubelab).
Va en el estilo y NO en el dato: en la base el nombre se queda como está
escrito —es la misma ficha que usa Cobros— y al copiarlo sale como está.
Aquí solo se pinta en mayúsculas.
El nombre completo se sigue leyendo al posar el ratón encima. */
.paciente, .res-nombre, .fila-paciente b, .paciente-datos b { text-transform: uppercase; }
.paciente {
font-weight: 600; color: var(--primary); text-decoration: none;
border-bottom: 1.5px solid transparent;
/* Una línea, y lo que no quepa termina en «…». `inline-block` para que la
equis de urgente, la marca de anulada y la pastilla del dinero sigan
donde estaban, al lado y no debajo.
EL TOPE VA AQUÍ Y NO EN LA CELDA. `max-width` sobre un de una tabla
normal no hace nada: el navegador reparte las columnas por su contenido y
se lo salta. Se vio el 16/09/2026 —la celda medía 346px y «ESTEFANIA
EMPERATRIZ RODRÍGUEZ DELGADO» entraba entera, sin recortar—. Sobre el
enlace, que es un `inline-block`, sí manda. */
display: inline-block; max-width: 240px; vertical-align: bottom;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.paciente:hover { border-bottom-color: var(--secondary); }
/* 291 · La edad debajo del nombre en la bandeja (Jean, 04/10/2026, la maqueta A) */
td.nombre .edad-bandeja { display: block; margin-top: 2px; font-size: .8rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
/* (Lo de las tarjetas del teléfono va MÁS ABAJO, dentro de su @media: la clase
`tarjetas` la lleva la tabla siempre, también en pantalla ancha, así que una
regla suelta con esa clase le ganaba al tope de arriba y el nombre no se
recortaba nunca. Pasó el 16/09/2026 y no lo vi porque lo probé con una tabla
de mentira, sin esa clase.) */
/* --- El número de orden: la pastilla que cambia de color ------------------- */
/* Naranja mientras falta algo, verde cuando ya está todo validado, roja al
pasarse del tiempo de entrega (como en Nubelab). Es la señal que el personal
lee de un vistazo, así que los colores de siempre se quedan.
Modelo E1 (Iralis, 24/09/2026, auditoria/modelos-pastilla-orden-2.html):
«se ven como viejos y no se leen bien». Sin el lápiz; el número en la letra
de la app y no en la de máquina de escribir; un degradado suave de arriba
abajo, un filo de luz y una sombra de su color, para que se vea que se puede
tocar. Los tonos son más oscuros que los de antes: el blanco sobre el
naranja de antes (#DC9230) daba 2,6 de contraste, y sobre estos pasa de 4,5
de punta a punta del degradado en el verde y el rojo (el más flojo, 4,7).
El naranja es el de los pendientes (más abajo, lo pidió Iralis). La negrita aquí sí vale: la que se cerraba sobre sí
misma era la de la monoespaciada (15/09/2026), no la de Inter. */
.orden-pastilla {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font); font-size: .9rem; font-weight: 700;
font-variant-numeric: tabular-nums; letter-spacing: .3px;
min-width: 86px; padding: 6px 14px; border-radius: 11px;
border: none; cursor: pointer; white-space: nowrap; color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 14px -9px var(--pastilla-sombra, hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .6));
transition: transform .15s ease, box-shadow .15s ease;
}
.orden-pastilla:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 16px -8px var(--pastilla-sombra, hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .6)); }
.orden-pastilla.lista { background: linear-gradient(180deg, #108456, #0F7A4C); --pastilla-sombra: #0F7A4C; }
.orden-pastilla.pendiente { background: linear-gradient(180deg, #E29A3C, #D0801E); --pastilla-sombra: #C06F12;
text-shadow: 0 1px 1.5px rgba(110, 50, 0, .45); }
/* El naranja, casi el de «Pendientes» (Iralis, 24/09/2026: el tostado #B45309
«es como muy oscuro, busca un tono más parecido a los pendientes»). Con un
tono tan claro el blanco se queda en 3,1 abajo y 2,4 arriba; la sombrita
del número es la que lo sostiene. */
.orden-pastilla.retrasada { background: linear-gradient(180deg, #D43A2D, #C0271C); --pastilla-sombra: #C0271C; }
.orden-pastilla.anulada { background: var(--neutro-soft); color: var(--muted); box-shadow: none; text-decoration: line-through; }
/* --- Las etiquetas de cada examen ------------------------------------------ */
/* Las etiquetas de examen crecen con la pantalla: en un monitor ancho caben
todas en un renglón, que es como se leen de un vistazo. */
.examenes { display: flex; flex-wrap: wrap; gap: 4px; max-width: min(560px, 34vw); }
/* 14/09/2026 · Iralis: «los exámenes solos no se distinguen, ponle las letras
más grandes igual que los perfiles». Estaban en .72rem y los perfiles en
.88rem —el perfil es un `button` con `font: inherit`, que le borraba el
tamaño del chip y lo dejaba en el de la fila—, así que en la misma fila
convivían dos tamaños sin que nadie lo hubiera decidido. Ahora los dos miden
lo mismo, y el del perfil se fija aparte para que no dependa de lo que
herede. */
/* 15/09/2026 · Iralis: «pon las letras un poquito más gruesas, no tanto como
los perfiles, pero que se diferencien los perfiles de los exámenes
normales». De 500 a 600. El TAMAÑO no se toca, y es a propósito: el perfil
mide lo mismo (.88rem), así que si el suelto creciera pasaría a ser el más
grande de la fila y se leería como el importante, que es justo al revés.
Lo que separa a los dos es el grosor —600 contra 700— y el contador 0/3 del
perfil, que es lo que dice cuál se puede pulsar.
Y EL 600 HAY QUE TRAERLO. La primera vez que se puso, «estaban muy gruesas»:
de IBM Plex Mono solo se cargaban los pesos 400 y 500, así que el navegador
NO tenía un 600 y se lo inventaba engordando el 500 por su cuenta. Esa
negrita falsa emborrona los trazos, y en una monoespaciada —donde cada letra
ya ocupa su casilla— se nota el doble. Se añadió el 600 de verdad al
` el contenido va en una
caja interna del navegador, así que poner `display:flex; gap` en el details
no separa nada —medido: seguían a 0 px—. Los márgenes sí, porque se aplican
dentro de esa caja. */
.entrega-plegable[open] > :not(summary) + :not(summary) { margin-top: 10px; }
.entrega-cargando, .entrega-vacio { margin: 0; color: var(--muted); font-size: .88rem; }
.entrega-filas { display: flex; flex-direction: column; }
.entrega-fila {
display: flex; align-items: center; gap: 10px;
padding: 7px 0; border-top: 1px solid var(--line); font-size: .9rem;
}
.entrega-fila:first-child { border-top: none; }
.entrega-check {
width: 20px; height: 20px; flex: none; display: grid; place-items: center;
border-radius: 999px; border: 1.5px solid var(--line); color: var(--success);
}
.entrega-fila.hecha .entrega-check { border-color: var(--success); background: var(--success-soft); }
.entrega-check svg { width: 14px; height: 14px; }
.entrega-rotulo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entrega-rotulo small { color: var(--muted); font-size: .78rem; }
.entrega-rotulo .entrega-cuando { color: var(--success); font-weight: 600; }
.btn.chico { padding: 5px 11px; font-size: .8rem; }
/* M5: misma pastilla hueca que arriba (esta copia dejaba el fondo rojo) */
.btn.chico.peligro { background: #fff; color: var(--danger); border-color: var(--danger-soft); }
.btn.chico.peligro:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.entrega-enlace {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
padding: 9px 12px; border-radius: var(--radius-sm);
background: var(--fondo); font-size: .82rem; color: var(--muted); line-height: 1.5;
}
.entrega-enlace b { color: var(--ink); }
.entrega-enlace.baja { background: var(--danger-soft); color: #7A2A14; }
.entrega-enlace.caducado { background: var(--warn-soft); color: #7A4E06; }
.entrega-historial summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--muted); }
.entrega-historial table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 6px; }
.entrega-historial th {
text-align: left; font-size: .68rem; letter-spacing: .8px; text-transform: uppercase;
color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line);
}
.entrega-historial td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Qué pasó con cada envío (171). «Sin confirmar» es el que importa: ámbar, ni
verde ni rojo, porque de verdad no se sabe. El porqué va en el título. */
.envio-estado {
display: inline-block; padding: 1px 7px; border-radius: 999px;
font-size: .72rem; font-weight: 700; white-space: nowrap;
background: var(--fondo-2, hsl(from #F2F4F7 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); color: var(--muted);
}
.envio-estado.bien { background: var(--success-soft); color: #177148; }
.envio-estado.mal { background: var(--danger-soft); color: #7A2A14; }
.envio-estado.duda { background: #FDF1DC; color: #8A5B12; cursor: help; }
/* Los avisos que frenan (enlace a localhost, enlace dado de baja) en el cuadro de Entregar */
.dialogo.entrega .entrega-aviso-mal { background: var(--danger-soft); color: #7A2A14; }
.dialogo.entrega .entrega-aviso-mal b { color: inherit; }
/* Qué va a pasar al cerrar la orden (aviso automático por correo): en verde
suave si va a salir, en ámbar con el porqué si no (PRUEBAS-1 m12). */
.entrega-auto {
display: flex; align-items: flex-start; gap: 8px;
margin: 0; padding: 9px 12px; border-radius: var(--radius-sm);
font-size: .84rem; line-height: 1.45;
}
.entrega-auto svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.entrega-auto.si { background: var(--success-soft); color: #177148; }
.entrega-auto.no { background: var(--warn-soft); color: #7A4E06; }
/* === 023 · resultados === */
/* Lo nuevo de la carga de resultados: cabecera con médico y procedencia,
banners de Nubelab, interpretación, listas abiertas con chips, alerta
manual, histórico por campo, observación por área, bitácora, clave. */
.res-datos.secundaria { margin-top: 2px; }
/* Orden de la sede de pruebas (número ≥ 900001): el rótulo va en el ámbar de
la franja de Pruebas (027), que aquí ya significa «esto no es real». */
.res-prueba {
font-family: var(--display); font-weight: 800; font-size: .68rem; letter-spacing: 1px;
text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
background: var(--warn); color: #fff; white-space: nowrap; vertical-align: middle;
}
.res-datos .rotulo {
font-size: .66rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
color: var(--muted); opacity: 1; margin-right: 2px;
}
/* Los dos banners: verde «Orden terminada.» y ámbar del aviso automático */
.res-banner {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
margin: 0 0 14px; padding: 11px 14px; border-radius: var(--radius-sm);
font-size: .9rem; line-height: 1.5;
}
.res-banner svg { width: 17px; height: 17px; flex: none; }
.res-banner.verde { background: var(--success-soft); color: var(--success); border: 1px solid #BFE6D0; }
.res-banner.amarillo { background: var(--warn-soft); color: #7A4E06; border: 1px solid #F0D9A8; }
/* Cuando al cerrar NO se va a avisar solo: es un dato, no una advertencia */
.res-banner.gris { background: var(--info-soft); color: var(--info); border: 1px solid var(--line); }
/* Un boton que se lee como un enlace: sin caja, sin relieve, subrayado.
Va por `button.enlace` ADEMAS de por `.btn.enlace`, y no es lo mismo: quien
lo escribe piensa «esto es un enlace», no «esto es un boton que ademas es
enlace», asi que se le olvida el `btn` — y entonces no le entra ninguna
regla y el navegador lo pinta con su caja gris de sistema, que desentona con
toda la app. Pasó en el banner de «Orden terminada» (Iralis, 10/09/2026:
«esos botones se ven de Windows 2000»). Con las dos formas escritas, da
igual cual se ponga. */
button.enlace, .btn.enlace {
background: none; border: none; padding: 0; box-shadow: none; min-height: 0;
color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
font-family: var(--font); font-size: inherit;
}
button.enlace:hover, .btn.enlace:hover { color: var(--primary); background: none; }
/* La pestaña ↺ de la bitácora */
.res-pestana.bitacora { flex-direction: row; align-items: center; gap: 7px; margin-left: auto; }
.res-pestana.bitacora svg { width: 16px; height: 16px; }
.res-pestana.bitacora .cuantos { color: var(--muted); }
.res-pestana.bitacora.activa .cuantos { color: rgba(255,255,255,.72); }
/* La columna del valor puede llevar debajo la interpretación o los chips */
.campo-valor { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo-valor .valor[readonly] {
background: hsl(from #F7FAFD calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: var(--primary); font-style: italic; cursor: default;
}
.campo-fila.invalido .marca-campo { background: var(--danger); }
.campo-fila.invalido .valor { border-color: var(--danger); }
.campo-fila.fuera-de-lista .valor { border-style: dashed; }
/* Intp.: el segundo control de Nubelab, solo donde el campo lo pide */
.interp-caja { display: flex; align-items: center; gap: 6px; }
.interp-caja span {
flex: none; font-size: .64rem; font-weight: 800; letter-spacing: .5px;
text-transform: uppercase; color: var(--secondary-dark);
}
.interp-caja .con-lista { flex: 1; min-width: 0; }
.interp-caja .interp { width: 100%; padding: 4px 8px; font-size: .84rem; }
.interp-caja .interp:placeholder-shown { border-color: var(--warn); }
/* El título del perfil encima de sus exámenes, como en Nubelab: subrayado
con una línea de puntos, en mayúsculas y pegado a lo que agrupa. */
.perfil-titulo {
margin: 18px 0 2px; font-size: .84rem; font-weight: 800; letter-spacing: .3px;
color: var(--primary); text-transform: uppercase;
border-bottom: 2px dotted var(--field-border); padding-bottom: 5px;
display: table; /* se encoge al texto, pero nadie se le sienta al lado */
}
.res-examenes > .perfil-titulo:first-child { margin-top: 2px; }
/* Campo con lista: la caja de siempre y la puntita del desplegable dentro,
como el `ui-select` de Nubelab. Sin ella se veía una caja de texto pelada y
no había manera de saber que ahí se podía elegir (Iralis, 13/09/2026:
«porque esto no lo puedo cambiar como en nubelab»). */
.con-lista { position: relative; display: block; min-width: 0; }
.con-lista .valor, .con-lista .interp { padding-right: 26px; }
.punta-lista {
position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
display: flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
transition: color .12s ease, background .12s ease;
}
.punta-lista svg { width: 14px; height: 14px; }
.punta-lista:hover { color: var(--secondary-dark); background: hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .12); }
.con-lista:focus-within .punta-lista { color: var(--primary); }
/* El desplegable va pegado al `body` (flota por encima de la hoja de
resultados, que tiene su propio scroll) y se coloca a mano. */
.menu-lista {
position: fixed; z-index: 90; max-height: 240px; overflow-y: auto;
/* Al llegar al final de la lista, la rueda no sigue moviendo la página
(que cerraría el menú) */
overscroll-behavior: contain;
display: flex; flex-direction: column; padding: 4px;
background: #fff; border: 1px solid var(--field-border); border-radius: 11px;
box-shadow: 0 10px 26px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18);
}
.op-lista {
text-align: left; background: none; border: 0; cursor: pointer;
padding: 7px 10px; border-radius: 8px; font-family: var(--cifra);
font-size: .89rem; color: var(--ink); white-space: nowrap;
}
.op-lista.puesta { font-weight: 700; color: var(--primary); }
.op-lista:hover, .op-lista.activa { background: var(--secondary-soft); color: var(--primary); }
/* Respuestas múltiples: se marcan varias y el valor queda «A; B».
Se llamaba `.chip`, igual que el chip de examen de la bandeja (línea 2132).
Como esta regla va después, ganaba: los códigos de examen perdían la
monoespaciada —y `TRIO` y `TRIG` dejaban de distinguirse en columna— y
agarraban un `cursor: pointer` que prometía un clic que no existe, trescientas
veces por pantalla (revisión de interfaz, 12/09/2026). */
.chips-respuesta { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-respuesta {
font-family: var(--font); font-size: .74rem; font-weight: 600; cursor: pointer;
padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line);
background: #fff; color: var(--muted);
transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.chip-respuesta:hover { border-color: var(--secondary); color: var(--secondary-dark); }
.chip-respuesta.activa { background: var(--primary); border-color: var(--primary); color: #fff; }
/* La columna de la derecha: anterior · alerta manual · aviso del cálculo */
.campo-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
button.anterior {
background: none; border: 1px solid transparent; border-radius: 7px; padding: 2px 6px;
cursor: pointer; color: var(--muted); font-family: var(--cifra); font-size: .78rem;
display: inline-flex; align-items: center; gap: 5px; transition: all .12s ease;
}
button.anterior:hover { border-color: var(--secondary); background: var(--secondary-soft); color: var(--primary); }
button.anterior b { font-weight: 600; color: var(--ink); }
button.anterior small { font-size: .68rem; opacity: .8; }
/* La flechita ámbar del «anterior» y del histórico. Es `.res-flecha`, no
`.flecha`: ese nombre lo usa el informe impreso (impreso.css) y una regla
suelta aquí le dejaba las flechas blancas sobre blanco. */
.res-flecha { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: #fff; }
.res-flecha svg { width: 11px; height: 11px; stroke-width: 3; }
.res-flecha.alto, .res-flecha.bajo { background: var(--warn); }
/* Normal / Alto / Bajo a mano, para lo que no tiene rango (Nubelab §2.5) */
.alerta-manual { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.alerta-manual[hidden] { display: none; }
.alerta-manual button {
width: 26px; height: 24px; border: none; background: #fff; cursor: pointer;
color: var(--muted); font-family: var(--cifra); font-size: .8rem; font-weight: 700;
display: grid; place-items: center; border-right: 1px solid var(--line);
}
.alerta-manual button:last-child { border-right: none; }
.alerta-manual button svg { width: 13px; height: 13px; stroke-width: 3; }
.alerta-manual button:hover { background: var(--field-bg); color: var(--ink); }
.alerta-manual button.activa { background: var(--warn); color: #fff; }
.alerta-manual button.activa[data-alerta=""] { background: var(--success); }
.aviso-calc {
font-size: .72rem; font-weight: 600; color: var(--warn);
padding: 1px 7px; border-radius: 999px; background: var(--warn-soft);
}
.aviso-calc[hidden] { display: none; }
/* Un examen que llegó a la orden sin campos activos: sin candado ni Guardar,
con la salida dicha (quitarlo de la orden o configurarlo) */
.examen.sin-campos { border-style: dashed; }
.examen-estado.sin-campos { background: var(--danger-soft); color: var(--danger); }
.sin-campos-aviso { text-align: left; padding: 12px 16px 16px; }
.sin-campos-aviso strong { display: block; color: var(--danger); margin-bottom: 2px; }
.examen-firma { font-size: .74rem; color: var(--muted); align-self: center; }
/* Observación por área, al pie de la pestaña */
.obs-area { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.obs-area textarea { width: 100%; resize: vertical; font-size: .9rem; min-height: 96px; }
.obs-area textarea[hidden] { display: none; }
.btn.suave { border-style: dashed; color: var(--muted); }
.btn.suave:hover { border-style: solid; }
/* La barra de abajo, quieta cuando no hay nada sin guardar */
.res-barra-abajo.quieta {
background: #fff; border-color: var(--line); color: var(--muted); font-weight: 500;
}
.res-barra-botones { display: flex; gap: 8px; flex-wrap: wrap; }
/* La bitácora */
.res-bitacora { margin-bottom: 14px; }
.bitacora-cab { margin: 0 0 12px; font-size: .92rem; color: var(--ink); }
.bitacora-cab b { color: var(--primary); }
table.bitacora td { vertical-align: top; }
.bitacora-cambio { margin-top: 3px; font-size: .76rem; color: var(--muted); font-family: var(--cifra); }
.bitacora-cambio .antes { text-decoration: line-through; opacity: .75; }
.bitacora-cambio .a { margin: 0 5px; }
.bitacora-cambio .despues { color: var(--ink); }
/* El histórico por campo: gráfico y tabla */
.dialogo.previos { width: min(720px, 100%); max-height: 92vh; overflow-y: auto; }
.dialogo.previos h2 small { font-weight: 500; color: var(--muted); font-size: .8em; }
.previos-vacio { margin: 0; padding: 18px 0; color: var(--muted); text-align: center; }
.previos-svg { width: 100%; height: auto; display: block; margin: 4px 0 10px; }
.previos-svg .eje-linea { stroke: var(--line); stroke-width: 1; }
.previos-svg .eje { font-size: 10px; fill: var(--muted); font-family: var(--cifra); }
.previos-svg .limite { stroke: var(--secondary-dark); stroke-width: 1; stroke-dasharray: 4 4; }
.previos-svg .limite-rotulo { font-size: 10px; fill: var(--secondary-dark); font-family: var(--cifra); }
.previos-svg .serie { fill: none; stroke: var(--primary); stroke-width: 1.5; opacity: .6; }
.previos-svg .punto { fill: var(--success); stroke: #fff; stroke-width: 1.5; }
.previos-svg .punto.fuera { fill: var(--warn); }
.previos-tabla td.num { font-family: var(--cifra); }
.previos-tabla .res-flecha { margin-left: 4px; vertical-align: middle; }
/* La contraseña de validación (Nubelab §4.4) */
.dialogo.clave { width: min(420px, 100%); }
.clave-caja { display: flex; gap: 6px; }
.clave-caja input { flex: 1; font-family: var(--cifra); letter-spacing: 2px; }
.clave-caja .btn.ojo { flex: none; padding: 0 10px; }
.clave-error { margin: 0; font-size: .86rem; font-weight: 600; color: var(--danger); }
.clave-error[hidden] { display: none; }
/* «Reabrir orden»: las pruebas bloqueadas, con casilla */
.dialogo.reabrir-orden { width: min(520px, 100%); max-height: 92vh; overflow-y: auto; }
.marcar-todas { display: flex; align-items: center; gap: 8px; padding: 0 11px; font-size: .86rem; color: var(--muted); } /* 11 = 10 de padding + 1 de borde de .fila-reabrir: «Todas» en columna con las demás */
.lista-reabrir { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.fila-reabrir {
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.fila-reabrir:hover { border-color: var(--secondary); background: hsl(from #F4F8FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.fila-reabrir b { font-size: .88rem; }
.fila-reabrir small { color: var(--muted); font-size: .74rem; }
/* «Antes de validar todo»: cada examen que se va a cerrar, visto o sin ver */
.dialogo.validar-todo { width: min(520px, 100%); max-height: 92vh; overflow-y: auto; }
.vt-lista {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 3px;
max-height: 290px; overflow-y: auto; flex: none;
}
.vt-fila {
display: flex; align-items: center; gap: 10px; padding: 5px 10px;
border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.vt-fila.sin-ver { border-color: var(--warn); background: var(--warn-soft); }
.vt-marca { display: grid; place-items: center; flex: none; }
.vt-marca svg { width: 18px; height: 18px; }
.vt-fila.visto .vt-marca { color: var(--success); }
.vt-fila.sin-ver .vt-marca { color: var(--warn); }
.vt-nombre {
flex: 1; min-width: 0;
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
}
.vt-nombre b { font-size: .88rem; color: var(--ink); overflow-wrap: anywhere; }
.vt-nombre small { color: var(--muted); font-size: .74rem; }
.vt-estado {
flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--success);
}
.vt-fila.sin-ver .vt-estado { color: var(--warn); }
/* Los que solo tienen lo prellenado: casilla sin marcar; marcada, en verde */
.vt-fila.prellenado { cursor: pointer; background: var(--fondo); }
.vt-fila.prellenado input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--success); cursor: pointer; }
.vt-fila.prellenado .vt-estado { color: var(--muted); }
.vt-fila.prellenado:has(input:checked) { border-color: var(--success); background: var(--success-soft); }
.vt-fila.prellenado:has(input:checked) .vt-estado { color: var(--success); }
.vt-fila.prellenado:focus-within { outline: 2px solid var(--secondary); outline-offset: 1px; }
/* «Validar Química Sanguínea (2)»: el de la pestaña, en turquesa clarito para
que no se confunda con el azul de «Validar todo» (Iralis, 23/09/2026: el
turquesa lleno «se ve como raro, tal vez más clarito»). Letra azul oscura:
se lee bien sobre el fondo suave. */
#resValidarArea {
background: var(--secondary-soft); border-color: var(--secondary); color: var(--primary);
}
#resValidarArea svg { color: var(--secondary-dark); }
#resValidarArea:hover { background: hsl(from #D2EEEF calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); border-color: var(--secondary-dark); }
#resValidarArea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* «Puede haber un error»: el aviso en rojo, con la lista de qué y por qué */
.vt-aviso.error { background: var(--danger-soft); color: var(--danger); }
.vt-aviso.error b { color: var(--danger); }
.vt-errores { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.vt-errores li { color: var(--ink); }
/* El «Deshacer» del candado: en la pila de avisos, pero se puede pulsar */
.aviso.deshacer {
pointer-events: auto;
display: flex; align-items: center; gap: 14px;
}
.btn-deshacer {
border: none; background: none; padding: 2px 0; cursor: pointer;
font: inherit; font-weight: 800; color: #fff;
text-decoration: underline; text-underline-offset: 3px;
}
.btn-deshacer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.btn-deshacer .deshacer-seg { font-variant-numeric: tabular-nums; }
/* La barrita de la cuenta atrás, abajo del cuadro: se acorta en los 5 s */
.aviso.deshacer { position: relative; overflow: hidden; }
.deshacer-barra {
position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
background: var(--secondary); transform-origin: left center;
animation: deshacerCuenta linear forwards;
}
@keyframes deshacerCuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .deshacer-barra { display: none; } }
/* Los de candado (orina, heces, cultivos…): aparte, con el candado */
.vt-fila.a-mano { background: var(--fondo); }
.vt-fila.a-mano .vt-marca, .vt-fila.a-mano .vt-estado { color: var(--primary); }
/* Y en su tarjeta, al lado de «Validar» */
.examen-a-mano {
font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--primary); background: var(--secondary-soft);
padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
/* Los que se quedan abiertos: aparte, en gris, con lo que les falta */
.dialogo p.vt-sub { font-size: .84rem; font-weight: 700; color: var(--muted); margin-top: 2px; }
.vt-fila.abierto { background: var(--fondo); }
.vt-fila.abierto .vt-marca { color: var(--muted); }
.vt-falta {
flex: 0 1 45%; text-align: right; font-size: .78rem; font-weight: 600;
color: var(--danger); overflow-wrap: anywhere;
}
.vt-aviso {
display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn);
font-size: .88rem; line-height: 1.45;
}
.vt-aviso svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.vt-aviso span { color: var(--ink); }
.vt-aviso b { color: var(--warn); }
.dialogo p.vt-nota { font-size: .86rem; color: var(--muted); }
.dialogo p.vt-nota.fuera { color: var(--danger); font-weight: 600; }
.dialogo p.vt-pregunta { font-weight: 700; color: var(--primary); }
.dialogo.validar-todo .dialogo-botones { flex-wrap: wrap; }
/* El recorrido de «Ir a verlos»: una fila entera arriba de la barra de abajo */
.res-barra-abajo { flex-wrap: wrap; }
.res-por-ver {
flex: 1 0 100%;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 12px; border-radius: var(--radius-sm);
background: var(--warn-soft); border: 1px solid var(--warn);
color: var(--ink); font-size: .88rem; font-weight: 500;
}
.res-por-ver[hidden] { display: none; }
.res-por-ver > svg { width: 18px; height: 18px; flex: none; color: var(--warn); }
.res-por-ver b { color: var(--warn); }
.res-por-ver .rpv-texto { flex: 1; min-width: 200px; }
.res-por-ver.listo { background: var(--success-soft); border-color: var(--success); }
.res-por-ver.listo > svg, .res-por-ver.listo b { color: var(--success); }
/* «Ir a verlos»: el examen al que se llega se enciende un momento, y se para
debajo de la barra fija de arriba, no tapado por ella */
.res-examenes .examen { scroll-margin-top: 72px; }
.examen.por-revisar { animation: porRevisar 2.4s ease-out; }
@keyframes porRevisar {
0%, 35% { box-shadow: 0 0 0 3px var(--warn); }
100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.examen.por-revisar { animation: none; box-shadow: 0 0 0 3px var(--warn); }
}
@media (max-width: 760px) {
.campo-extra { grid-column: 2 / -1; }
}
/* === 026 · configuración === */
/* La lista de exámenes: fila con flechas de orden (dentro de un área) */
.cfg-fila-examen { display: flex; align-items: center; gap: 8px; cursor: default; }
.cfg-fila-examen .cuerpo {
flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
border: none; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.cfg-fila-examen .cuerpo b { font-size: .92rem; }
.cfg-fila-examen .cuerpo small { font-size: .74rem; color: var(--muted); }
/* La rejilla de campos: quitar tacha y deshace (sin la casilla «Act») */
.cfg-campo {
grid-template-columns: 24px minmax(150px, 1.4fr) 70px 140px 46px 34px 64px 92px 64px minmax(0, .9fr) 30px 30px;
}
.cfg-campo.quitado input, .cfg-campo.quitado select { text-decoration: line-through; opacity: .55; }
.cfg-campo.quitado .cc-extra small.cc-quitado { color: var(--warn); text-decoration: none; font-style: italic; }
.cfg-campo input:disabled:not(.cc-nombre) { background: var(--fondo); }
.cfg-aviso-campos { font-size: .84rem; color: var(--danger); font-weight: 600; margin: 8px 0 0; }
@media (max-width: 900px) {
.cfg-campo { grid-template-columns: 24px 1fr 70px 110px 46px 34px 30px; }
}
/* Textos de ayuda al lado de una casilla */
.cfg-ayuda-inline { font-size: .74rem; color: var(--muted); font-weight: 400; margin-left: 4px; }
.cfg-ayuda { font-size: .74rem; color: var(--muted); margin-top: 2px; }
/* Los subtítulos de Configuración empiezan donde lo que titulan: el sangrado
de 16 px de `.campo-grupo` es de la tarjeta de resultados. */
#cfgCuerpo .campo-grupo { padding: 0; }
/* Lo chico dentro de un rótulo (la unidad, una nota) no va en mayúsculas:
«(mg/dL)» no es «(MG/DL)». */
#cfgCuerpo .campo > span small, .cfg-detalles .campo > span small { text-transform: none; letter-spacing: 0; }
.cfg-banderas-examen label { flex-wrap: wrap; }
.cfg-monitorear { gap: 10px; }
.cfg-tiempo { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: .8rem; color: var(--muted); }
.cfg-tiempo input { width: 44px; text-align: center; padding: 3px 4px; font-family: var(--cifra); font-size: .84rem; }
/* El cuadro «Editar campo»: rango base con etiquetas, estado de la fórmula */
.cfg-rango.base { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 8px; align-items: end; font-weight: 400; }
.cfg-rango.base .campo input, .cfg-rango.base .campo select { width: 100%; }
.cfg-rango.base .campo > span small { color: var(--secondary-dark); font-weight: 600; }
.cfg-formula-estado { margin: 0; font-size: .8rem; min-height: 1.1em; }
.cfg-formula-estado.bien { color: var(--success); }
.cfg-formula-estado.mal { color: var(--danger); }
.cfg-subbloque .campo input { width: 100%; }
/* Cuadros de alta (sustituyen a window.prompt) */
.dialogo.cfg-formulario { width: min(520px, 100%); max-height: 92vh; overflow-y: auto; }
.dialogo.cfg-formulario.ancho { width: min(680px, 100%); }
/* Los cuadros de alta, a dos columnas: a cuatro (≈110 px) «Código corto *» o
«Precio en dólares *» se partían y su casilla quedaba más baja. */
.dialogo.cfg-formulario .ficha-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Una casilla de marcar a lo ancho no tiene nada al lado: sobra su rótulo vacío */
.dialogo.cfg-formulario .cfg-ff-check.ancho2 > span:first-child { display: none; }
/* El formulario reparte el mismo aire que el cuadro: aviso y botones no van pegados */
.dialogo.cfg-formulario > form { display: flex; flex-direction: column; gap: 12px; }
.cfg-form-error { margin: 0; font-size: .84rem; color: var(--danger); font-weight: 600; }
.cfg-check-linea { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; padding: 6px 0; }
.cfg-check-linea input { width: 15px; height: 15px; padding: 0; accent-color: var(--secondary-dark); }
/* Precios: listas, vigencias */
.cfg-precios-cab { flex-wrap: wrap; }
.cfg-lista-detalles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; font-size: .84rem; }
.cfg-moneda-lista { color: var(--muted); }
.cfg-precio-cab {
font-size: .66rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.cfg-precio-cab .cfg-valor-cab { width: 92px; text-align: right; }
.cfg-precio-cab .cfg-fecha-cab, .cfg-precio .cfg-fecha { width: 138px; }
.cfg-precio .cfg-fecha { padding: 5px 6px; font-size: .8rem; font-family: var(--cifra); }
.cfg-precio.guardado .cfg-valor, .cfg-precio.guardado .cfg-fecha { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.cfg-vencido { color: var(--warn); font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .3px; }
@media (max-width: 760px) {
.cfg-precio { flex-wrap: wrap; }
.cfg-precio-cab { display: none; }
}
/* Descuentos: tabla de solo lectura con lápiz */
.cfg-descuentos .cfg-fila { grid-template-columns: minmax(160px, 2fr) 90px 110px 110px 110px 34px; }
.cfg-descuentos .cfg-celda { font-size: .86rem; padding: 6px 4px; }
.cfg-descuentos .cfg-celda.cifra { font-family: var(--cifra); text-align: right; }
.cfg-descuentos .cfg-fila.vencido .cfg-celda { color: var(--muted); }
@media (max-width: 760px) { .cfg-descuentos .cfg-fila { grid-template-columns: 1fr 70px 34px; } .cfg-descuentos .cfg-celda:nth-child(3), .cfg-descuentos .cfg-celda:nth-child(4), .cfg-descuentos .cfg-celda:nth-child(5) { display: none; } }
/* Sede: radios de formato, imágenes, chips, formas de pago, botón de guardar */
.cfg-radios { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; font-size: .86rem; }
.cfg-radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.cfg-radio input { width: 15px; height: 15px; accent-color: var(--secondary-dark); padding: 0; }
.cfg-imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.cfg-imagen { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.cfg-imagen-cuadro {
width: 120px; height: 90px; flex: none; display: grid; place-items: center; cursor: pointer;
border: 1.5px dashed var(--line); border-radius: 8px; background: var(--fondo); overflow: hidden;
font-size: .7rem; color: var(--muted); text-align: center; padding: 6px;
}
.cfg-imagen-cuadro:hover { border-color: var(--secondary); }
.cfg-imagen-cuadro img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cfg-imagen-texto { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.cfg-imagen-texto small { color: var(--muted); font-size: .74rem; }
.cfg-imagen-texto .btn.chico { align-self: flex-start; }
.cfg-legal { font-size: .74rem; font-style: italic; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-bottom: 6px; }
.cfg-chip {
display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
background: var(--secondary-soft); color: var(--secondary-dark); font-size: .78rem; font-weight: 700; font-family: var(--cifra);
}
.cfg-chip button { border: none; background: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 0 2px; }
.cfg-formas { display: flex; flex-direction: column; gap: 6px; }
.cfg-forma {
/* La tercera columna era de 50 px para la sigla «VES»; ahora lleva un
desplegable con la palabra entera (13/09/2026). */
display: grid; grid-template-columns: 24px minmax(160px, 1fr) 112px auto; gap: 10px; align-items: center;
transition: background .3s ease; border-radius: 8px;
}
.cfg-forma select.cfg-moneda {
font-family: var(--font); font-size: .84rem; color: var(--ink);
padding: 6px 8px; width: 100%;
}
.cfg-forma input[type=text], .cfg-forma input:not([type]) { padding: 6px 9px; font-size: .86rem; }
.cfg-forma.apagado input:not([type=checkbox]) { opacity: .5; }
.cfg-forma.guardado { background: var(--success-soft); }
.cfg-guardar-sede { position: sticky; bottom: 12px; z-index: 5; margin: 6px 0 14px; }
.cfg-guardar-sede .btn { box-shadow: var(--sombra-alta); }
/* Procedencias: una ficha por fila (tiene demasiadas columnas para una tabla) */
.cfg-ficha-chica { padding: 12px 0; border-bottom: 1px solid var(--line); transition: background .3s ease; border-radius: 8px; }
.cfg-ficha-chica.apagado .ficha-rejilla { opacity: .6; }
.cfg-ficha-chica.guardado { background: var(--success-soft); }
/* Casillas de cada fila a la misma altura aunque un rótulo ocupe dos renglones
(ninguna lleva nada debajo). */
.cfg-ficha-chica .ficha-rejilla { margin: 0; align-items: end; }
/* Firmantes: firma y sello */
.cfg-firma-imagenes { display: flex; flex-direction: column; gap: 6px; }
.cfg-firma-img.sello { min-height: 60px; }
/* `hidden` tiene que ganar a `.campo {display:flex}` y a `.cfg-banderas label {display:inline-flex}` */
.cfg-detalles [hidden], .cfg-formulario [hidden], .cfg-banderas label[hidden], #cfgCuerpo [hidden] { display: none !important; }
/* === 024 · dinero y bandeja === */
/* --- La fila de la bandeja: dinero, urgencia, campanita, compartido -------- */
.chip-dinero {
display: inline-block; margin-left: 7px; vertical-align: 1px;
font-family: var(--cifra); font-size: .7rem; font-weight: 600; letter-spacing: .2px;
padding: 2px 8px; border-radius: 99px; border: 1px solid transparent; cursor: pointer;
background: var(--danger-soft, #FBE5DC); color: var(--danger);
transition: transform .14s ease, box-shadow .14s ease;
}
.chip-dinero:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.chip-dinero.credito { background: var(--warn-soft); color: #9A6208; }
.chip-dinero.devolver { background: var(--info-soft); color: var(--info); }
/* La fila entera por urgencia, como `bg-warning` / `bg-danger` en Nubelab */
/* Un solo nivel urgente. Antes había dos —«urgente» en ámbar y «STAT» en rojo—
y no se distinguían: de 9.949 órdenes, 128 usaban STAT y 2 usaban urgente,
y esas 2 eran de prueba. Ahora es uno solo, en rojo, y se lee «Urgente».
(Iralis, 09/09/2026.) */
.tabla-envoltorio tbody tr.fila-urgente { background: color-mix(in srgb, var(--danger) 9%, #fff); }
.tabla-envoltorio tbody tr.fila-urgente:hover { background: color-mix(in srgb, var(--danger) 16%, #fff); }
button.marca-obs { border: none; background: none; cursor: pointer; padding: 0; border-radius: 6px; }
button.marca-obs:hover { background: var(--info-soft); }
/* 208 · LAS NOTAS DE LA ORDEN: UNA HOJITA JUNTO A LA PASTILLA (Iralis,
25/09/2026, F3 de auditoria/modelos-marcas-bandeja.html). Gris, para no
hacer ruido; lo que dice qué hay son los puntos de la esquina: amarillo el
diagnóstico, azul las observaciones. Va pegada a la pastilla del número, y
como todas miden lo mismo, las hojitas quedan en fila de arriba abajo. */
.orden-y-notas { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.marca-notas {
position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
display: inline-grid; place-items: center; cursor: pointer; flex: none;
color: var(--muted); background: hsl(from #F1F4F8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); box-shadow: inset 0 0 0 1px var(--line);
}
.marca-notas:hover { color: var(--primary); background: hsl(from #E6ECF3 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.marca-notas:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.marca-notas svg { width: 15px; height: 15px; }
.notas-puntos { position: absolute; top: -3px; right: -4px; display: flex; gap: 2px; }
.notas-puntos i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; }
.notas-puntos .dx { background: #E3A600; }
.notas-puntos .obs { background: hsl(from #3E7BC4 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
/* El .dialogo ya separa con gap 12: el margen negativo pega el rótulo a su texto (6 px) */
.notas-rotulo { margin: 4px 0 -6px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.notas-rotulo.dx { color: #8A5E00; }
.notas-rotulo.obs { color: var(--info); }
.obs-texto.dx { background: #FFFBEA; box-shadow: inset 0 0 0 1px #F0D273; }
.obs-texto { white-space: pre-wrap; background: var(--bg, hsl(from #F6F8FB calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .92rem; }
.icono.compartido { color: var(--success); }
/* 051 · «Ya salió por WhatsApp». Verde de WhatsApp y no el `--success` de la
casa: el logo en otro verde no se reconoce, y reconocerlo de un vistazo es
justo para lo que está. No es el #25D366 exacto de la marca sino un punto
más oscuro: el de la marca, a 18 px sobre blanco, no llega al contraste
mínimo y se lee lavado. */
.icono.wa-enviado { color: #1EA855; }
.icono.wa-enviado:hover:not(:disabled) { background: rgba(37, 211, 102, .14); color: #128C3E; }
/* El avión de «por enviar» (24/09/2026): el naranja de pendiente, un punto
más oscuro que `--pendiente` para que a 18 px pase el contraste de 3:1. */
.icono.por-enviar { color: #C97A10; }
.icono.por-enviar:hover:not(:disabled) { background: var(--warn-soft); color: var(--warn); }
.icono.debe { color: var(--danger); }
.tarjeta-resumen.activa { outline: 2px solid var(--secondary); outline-offset: 2px; }
.tarjeta-resumen { cursor: pointer; }
/* «Ver 300 más» y atajos de periodo en los filtros */
.ver-mas { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; }
.ver-mas .apunte { margin: 0; }
.filtros-periodo .filtros-atajos { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros-casilla .cfg-banderas { margin: 0; min-height: 34px; align-items: center; }
.filtros-casilla .cfg-banderas label { font-size: .84rem; }
/* --- La orden nueva: casillas de cabecera, facturar a nombre de ----------- */
.orden-casillas { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 2px 0; }
/* `height: auto`: `.cfg-banderas input` le ponía 15 px y el correo salía aplastado */
.orden-casillas .orden-email { width: min(280px, 100%); height: auto; padding: 6px 10px; font-size: .88rem; }
.orden-casillas .orden-email[hidden] { display: none; }
.orden-factura-a { margin-top: 2px; }
.orden-factura-a[hidden] { display: none; }
.apunte-inline { font-weight: 500; color: var(--muted); font-size: .74rem; margin-left: 4px; }
.fila-examen.sin-precio { opacity: .5; }
.fila-examen.sin-precio .precio { color: var(--muted); }
.fila-examen.sin-precio:hover { opacity: .8; }
/* --- El cuadro de cobro: transacción, anulados, devolución ---------------- */
.cobro-modo { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .9rem; }
.cobro-modo-rotulo { font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.cobro-modo label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cobro-modo input[type="radio"] { accent-color: var(--secondary-dark); }
.cobro-linea.anulada, .cobro-pago.anulado { opacity: .55; text-decoration: line-through; }
.cobro-pago.anulado .tacha { text-decoration: none; color: var(--danger); font-weight: 700; }
.cobro-pago .quitar {
border: none; background: none; cursor: pointer; color: var(--muted); padding: 0 2px; margin-left: 4px;
display: inline-grid; place-items: center; vertical-align: middle;
}
.cobro-pago .quitar svg { width: 15px; height: 15px; }
.cobro-pago .quitar:hover { color: var(--danger); }
.cobro-cifras .anulada { color: var(--muted); text-decoration: line-through; }
.cobro-a-nombre, .dialogo p.cobro-a-nombre { margin: 0 0 8px; font-size: .86rem; color: var(--muted); }
.aviso-suave.anulada { background: var(--neutro-soft); }
.pista.debe, .dialogo p.pista.debe { color: var(--danger); text-align: left; font-weight: 600; }
.dialogo.motivo { width: min(480px, 100%); }
.dialogo.motivo .campo { margin-top: 6px; }
.dialogo.motivo select, .dialogo.motivo input { width: 100%; }
/* --- Editar la orden ----------------------------------------------------- */
.dialogo.editar-orden .cfg-banderas.orden-casillas { margin: 8px 0 4px; }
.ed-cifras { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* --- Ingresos: pestañas, filtros, tablas -------------------------------- */
.ing-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 12px; }
.ing-filtros .filtros-botones { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
/* «Quitar los filtros» es .btn.chico (~29px) al lado de casillas de ~39px:
se veía como una tira fina. Aquí, de la altura de las casillas. */
.ing-filtros .filtros-botones .btn { padding-block: 9px; font-size: .86rem; }
@media (max-width: 900px) { .ing-filtros { grid-template-columns: 1fr 1fr; } }
.ing-tabla { font-size: .82rem; }
.ing-tabla td, .ing-tabla th { white-space: nowrap; }
.ing-tabla td.ing-examenes { white-space: normal; max-width: 260px; }
.ing-tabla tfoot th { background: var(--secondary-soft); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .82rem; position: static; }
.ing-tabla td.debe { color: var(--danger); font-weight: 700; }
.ing-tabla tr.devolucion td { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.tabla-envoltorio.compacta { margin-top: 6px; box-shadow: none; }
.tabla-envoltorio.compacta th { padding: 8px 10px; }
.tabla-envoltorio.compacta td { padding: 7px 10px; }
.paginador { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 2px; font-size: .84rem; color: var(--muted); }
.res-pestanas .crece { flex: 1; }
/* El nombre del paciente en la bitacora tambien es un boton-enlace, pero de
los que solo se subrayan al pasar por encima. El `text-decoration: none` se
escribe ahora a proposito: la regla de arriba subraya todo `button.enlace`,
y sin esto este se quedaria subrayado siempre. */
.bh-nombre.enlace { border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--primary); padding: 0; text-decoration: none; }
.bh-nombre.enlace:hover { text-decoration: underline; }
.bh-dev { color: var(--danger); font-size: .74rem; }
.kpi.credito .kpi-cifra { color: var(--warn); }
/* --- Hoja de trabajo: correo ---------------------------------------------- */
.hoja-correo { margin-top: 10px; }
/* `hidden` tiene que ganar aunque la clase ponga display (flex/grid) */
.campo[hidden], .ver-mas[hidden], .orden-casillas [hidden], .ficha-rejilla[hidden] { display: none !important; }
.filtros-casilla .cfg-banderas label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .86rem; color: var(--ink); }
/* === 027 · sede de pruebas === */
/* La franja fija bajo la barra: en ámbar, que es el color que aquí ya
significa «ojo, esto no está cerrado» (pendiente, a crédito). */
.franja-pruebas {
position: sticky; top: var(--barra); z-index: 39;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 7px clamp(16px, 2.5vw, 40px);
background: var(--warn); color: #fff;
font-size: .86rem; font-weight: 600; line-height: 1.3;
box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.franja-pruebas[hidden] { display: none; }
.franja-pruebas b {
font-family: var(--display); font-weight: 800; font-size: .7rem;
letter-spacing: 1px; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.2);
white-space: nowrap;
}
.franja-pruebas button {
margin-left: auto; cursor: pointer;
padding: 5px 12px; border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.75); background: transparent; color: #fff;
font-family: var(--font); font-size: .82rem; font-weight: 700;
transition: background .16s ease, color .16s ease;
}
.franja-pruebas button:hover { background: #fff; color: var(--warn); }
/* El punto y el rótulo de la sucursal cambian de color cuando se está en Pruebas */
body.en-pruebas .nav-btn.sede { color: #FFD48A; }
body.en-pruebas .nav-btn.sede .punto-sede,
.menu .punto-sede.pruebas { background: var(--warn); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
body.en-pruebas h1 .en-sede { color: var(--warn); }
/* En el menú, la sucursal en la que se está va marcada */
.menu button.activa { font-weight: 700; color: var(--primary); background: var(--secondary-soft); }
.menu .punto-sede { box-shadow: 0 0 0 2px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .12); }
/* === 028 · correcciones de dinero y bandeja === */
/* Editar: la cabecera de cada perfil, con su botón «Quitar el perfil» */
.ed-examen.perfil-cab { background: var(--secondary-soft, hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .06)); border-style: solid; margin-top: 4px; }
.ed-examen.perfil-cab b { font-family: var(--display); letter-spacing: .3px; }
.ed-examen.perfil-cab.quitando { text-decoration: none; }
.ed-examen.perfil-cab.quitando .cuerpo { text-decoration: line-through; }
/* Cobro: por qué un pago no se puede anular (tiene una devolución encima) */
.cobro-pago small.apunte { color: var(--warn); font-style: italic; }
/* === 028 · ronda 2 (PRUEBAS-1): hoja de trabajo === */
/* M4: la barra Cerrar/Imprimir de la vista previa. impreso.css la apaga con
`body:not(.previsualizando) .previa-barra` (la hoja usa `previsualizando-hoja`)
y la regla que la vestía estaba escrita como `.previa-barra.hoja-papel`.
El id gana en especificidad; en papel sigue oculta por el @media print. */
#paraHoja .previa-barra.hoja {
position: sticky; top: 0; left: auto; right: auto; z-index: 5;
display: flex; align-items: center; justify-content: flex-start; gap: 10px;
padding: 10px 16px; background: hsl(from #0f2540 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: #fff; font-weight: 700;
}
#paraHoja .previa-barra.hoja .crece { flex: 1; }
/* M3: la fila urgente de la hoja ya no lleva la clase `.urgente` de la
pastilla (texto blanco, mayúsculas, 0.66rem): solo el fondo durazno. */
.hoja-papel tr.hoja-urgente td { background: #fff4ec; }
/* ===========================================================================
029 · LA TASA DEL DÍA EN LA BARRA
Como la tira de Cobros: la tasa vive arriba, se pone sola y se corrige
pulsándola. En las filas de pago ya no se pregunta: allí va el monto en
dólares y al lado a cuántos bolívares equivale.
=========================================================================== */
.nav-btn[hidden] { display: none; }
.nav-btn.tasa {
gap: 7px; padding: 0 12px; margin: 10px 6px;
border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
background: rgba(255, 255, 255, .07);
}
.nav-btn.tasa .tasa-rotulo {
font-size: .66rem; font-weight: 800; letter-spacing: .8px;
text-transform: uppercase; color: hsl(from #8FA9C4 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.nav-btn.tasa .tasa-valor {
font-family: var(--cifra); font-size: .95rem; font-weight: 700; color: #fff;
font-variant-numeric: tabular-nums;
}
/* Ámbar: la tasa no es de hoy y hay que revisarla. Turquesa: la corrigieron a mano. */
.nav-btn.tasa.tasa-vieja .tasa-valor { color: #F3C26B; }
.nav-btn.tasa.tasa-mano .tasa-valor { color: var(--secondary); }
.nav-btn.tasa.tasa-vieja .tasa-rotulo::after { content: ' !'; }
@media (max-width: 820px) {
.nav-btn.tasa { padding: 0 10px; }
.nav-btn.tasa .tasa-rotulo { display: none; }
}
.dialogo.tasa-cuadro { width: min(400px, 100%); }
/* Con la tasa corregida a mano hay tres botones y en 400px no caben: «Usar
esta tasa» bajaba solo a otro renglón. Más ancha solo entonces. */
.dialogo.tasa-cuadro:has([data-bcv]) { width: min(520px, 100%); }
.dialogo.tasa-cuadro .campo { margin: 12px 0 4px; }
.dialogo.tasa-cuadro .campo input {
font-family: var(--cifra); font-size: 1.15rem; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.dialogo.tasa-cuadro .apunte { margin: 0 0 4px; }
/* La casilla de bolívares al lado de la de dólares */
#ordBs, #cbBs { font-variant-numeric: tabular-nums; }
#ordBs:disabled, #cbBs:disabled { background: var(--fondo); color: var(--muted); }
/* === 029 · precio por renglón ============================================= */
/* Cada renglón de «La orden» (y de la cotización, y lo que se añade al
editar) puede salir de una lista de precios distinta. El selector es
pequeño y va bajo el nombre; cuando el renglón se fijó a mano se marca,
para que se vea que el selector de arriba ya no lo mueve. */
.ren-lista {
align-self: flex-start;
margin-top: 3px;
max-width: 100%;
padding: 2px 22px 2px 7px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--fondo) no-repeat right 7px center/8px 5px
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%235F7086' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
color: var(--muted);
font: 600 .68rem/1.5 var(--font);
letter-spacing: .2px;
appearance: none;
cursor: pointer;
}
.ren-lista:hover { border-color: var(--field-border); color: var(--ink); }
.ren-lista:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
/* Cada renglón de «La orden» lleva su lista escrita y con su color: verde el
precio en divisas —el del dólar—, azul el regular —el de los bolívares—.
Así no hace falta ninguna etiqueta al lado ni ningún aviso debajo: el
renglón se explica solo (Iralis, 11/09/2026). */
.ren-lista.lista-divisas {
border-color: var(--divisas);
background-color: var(--divisas-soft);
color: var(--divisas);
font-weight: 700;
}
.ren-lista.lista-regular {
border-color: var(--regular);
background-color: var(--regular-soft);
color: var(--regular);
font-weight: 700;
}
/* También DESPLEGADAS: al abrir la lista, cada opción con su color. Chrome en
Windows —que es lo que hay en la clínica— sí pinta los . */
option.op-divisas { background-color: var(--divisas-soft); color: var(--divisas); font-weight: 700; }
option.op-regular { background-color: var(--regular-soft); color: var(--regular); font-weight: 700; }
.ren-lista.lista-divisas:hover { border-color: var(--divisas); color: #0F5334; }
.ren-lista.lista-regular:hover { border-color: var(--regular); color: hsl(from #14365F calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
/* Cuando el examen solo tiene precio en una lista no hay nada que elegir:
se dice de cuál sale, sin selector. */
.ren-lista-fija {
display: inline-block;
margin-top: 3px;
padding: 1px 8px;
border-radius: 999px;
background: var(--info-soft);
color: var(--info);
font-size: .68rem; font-weight: 700; letter-spacing: .2px;
}
/* El renglón fijado a otra lista: una barra fina a la izquierda, como los
avisos de la bandeja. */
.elegido.renglon-fijado,
.ed-examen.nuevo.renglon-fijado {
box-shadow: inset 3px 0 0 var(--info);
}
.renglon-aviso {
margin: 0 16px 8px;
padding: 6px 10px;
border-radius: var(--radius-sm);
background: var(--info-soft);
color: var(--info);
font-size: .74rem; line-height: 1.45;
}
/* 032: lo que entra sin cobrar. No es un error —la orden se guarda igual— pero
tiene que saltar a la vista, que es dinero que no se factura. */
.renglon-aviso.mal { background: var(--warn-soft); color: var(--warn); }
.elegido.renglon-sin-precio .precio { color: var(--warn); font-weight: 700; }
.sin-precio-marca {
background: var(--warn-soft); color: var(--warn);
padding: 1px 7px; border-radius: 999px; font-weight: 600;
}
/* 034 · La casilla para escribir el precio de lo que no lo tiene. Va donde
iría el importe, del mismo ancho, para que la columna no baile. */
.precio.precio-a-mano {
display: inline-flex; align-items: center; gap: 3px;
background: var(--field-bg); border: 1px solid var(--warn);
border-radius: var(--radius-sm); padding: 2px 8px;
}
.precio.precio-a-mano span { color: var(--muted); font-weight: 600; }
.precio.precio-a-mano input {
width: 68px; border: none; background: none; padding: 0;
font: inherit; font-variant-numeric: tabular-nums; text-align: right;
color: var(--ink);
}
.precio.precio-a-mano input:focus { outline: none; }
.precio.precio-a-mano:focus-within { box-shadow: 0 0 0 3px var(--warn-soft); }
/* En el catálogo: el que no tiene precio en la lista de la orden pero sí en
otra ya NO sale apagado — se puede vender, y la fila dice con cuál. */
.fila-examen.de-otra-lista .precio { color: var(--info); }
.fila-examen.de-otra-lista .cuerpo small { color: var(--info); }
/* El cobro y el comprobante: de qué lista salió cada renglón */
.cobro-linea .ren-lista-fija { margin: 0 0 0 6px; vertical-align: 1px; }
.cmp-lista { color: #444; font-size: .82em; }
/* === 026 · ronda 3 (PRUEBAS-2C): configuración ============================= */
/* C2-1 · El formato del informe elegido necesita una imagen que no está
cargada: se dice arriba, y el recuadro que falta se marca. */
/* Por defecto es un APUNTE, no una alarma: en los formatos 1 y 3, no cargar
imagen solo significa que sale la de Laboratorio Demo. Se pone en rojo
(`cfg-aviso-grave`) únicamente cuando falta una que no tiene reserva. */
.cfg-falta-imagen {
margin: 10px 0 0;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--info-soft);
color: var(--info);
font-size: .8rem; line-height: 1.5;
}
.cfg-falta-imagen.cfg-aviso-grave { background: var(--danger-soft); color: var(--danger); }
.cfg-imagen.cfg-imagen-falta .cfg-imagen-cuadro {
border-color: var(--danger);
box-shadow: inset 0 0 0 1px var(--danger);
}
.cfg-imagen.cfg-imagen-falta .cfg-imagen-texto b { color: var(--danger); }
/* C2-3 · La casilla del reloj DD:HH:MM que se sale de su tope */
.cfg-tiempo input.cfg-mal {
border-color: var(--danger);
box-shadow: inset 0 0 0 1px var(--danger);
}
/* C2-5 · En la rejilla de precios, el ítem que no está a la venta pero
conserva su precio en la lista */
.cfg-precio.apagado .cuerpo b { opacity: .55; }
.cfg-precio.apagado .cuerpo small { color: var(--danger); }
/* C2-6 · La vista previa de la carga masiva de precios */
/* La vista previa de «Cargar precios» no existía como ancha: salía a 430 px
con la tabla de 4 columnas apretada y sin tope de alto. */
.dialogo.cfg-previa { width: min(760px, 100%); max-height: 92vh; overflow-y: auto; }
.cfg-previa .cfg-previa-mal { color: var(--danger); }
.cfg-previa-errores {
margin: 4px 0 12px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--danger-soft);
color: var(--danger);
font-size: .78rem; line-height: 1.5;
}
.cfg-previa-errores ul { margin: 6px 0 0; padding-left: 18px; }
.cfg-previa-tabla { max-height: 46vh; overflow: auto; }
.cfg-previa-tabla table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.cfg-previa-tabla th {
position: sticky; top: 0;
background: #fff;
text-align: left; font-weight: 700; color: var(--muted);
padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.cfg-previa-tabla td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.cfg-previa-tabla td:nth-child(3) { color: var(--muted); }
/* El «Cargar precios» es un con el también lo pinta el sistema: va el nuestro */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before {
content: ''; display: inline-block; width: 14px; height: 14px;
margin-right: 6px; vertical-align: -2px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/14px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/14px no-repeat;
transition: transform .16s ease;
}
details[open] > summary::before { transform: rotate(90deg); }
/* ---------------------------------------------------------------------------
Al día (app/al-dia.js)
--------------------------------------------------------------------------- */
/* La tira que avisa de que hay una versión nueva. Va arriba del todo, por
encima de la barra, y no se cierra sola: se recarga cuando a uno le venga
bien, nunca a media orden. */
.tira-version {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 9px 16px;
background: var(--secondary-soft, hsl(from #E4F4F5 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))));
border-bottom: 1px solid var(--secondary);
color: var(--primary); font-size: .86rem; font-weight: 600;
}
.tira-version .btn { background: #fff; }
.tira-version-cerrar {
border: none; background: none; cursor: pointer;
color: var(--muted); font: 600 .8rem var(--font); text-decoration: underline;
}
.tira-version-cerrar:hover { color: var(--primary); }
@media (max-width: 560px) { .tira-version { font-size: .8rem; gap: 8px; padding: 8px 10px; } }
/* El botón de refrescar de la barra de arriba */
.nav-btn.icono-solo { padding: 6px 8px; display: grid; place-items: center; }
.nav-btn.icono-solo svg { width: 17px; height: 17px; }
.nav-btn.icono-solo.girando { pointer-events: none; opacity: .6; }
.nav-btn.icono-solo.girando svg { animation: girar-refrescar .8s linear infinite; }
@keyframes girar-refrescar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.nav-btn.icono-solo.girando svg { animation: none; }
}
/* ===========================================================================
053 · LA PESTAÑA «ADJUNTOS»
El PDF que llega del laboratorio externo. Se apoya en lo que ya hay
(`.btn chico`, `.casilla-linea`, `.aviso-suave`); aquí solo va la lista y
el formulario de subir.
=========================================================================== */
.res-adjuntos { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 8px; }
.adjuntos-lista { display: flex; flex-direction: column; gap: 8px; }
.adjunto {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: var(--radius-sm);
background: var(--tarjeta, #fff); border: 1px solid var(--line);
}
/* El que ES el resultado de un examen se distingue del que solo se anexa:
borrar uno u otro no tiene las mismas consecuencias. */
.adjunto.reemplaza { border-left: 3px solid var(--secondary); }
.adjunto-ico { color: var(--muted); display: grid; place-items: center; flex: none; }
.adjunto-ico svg { width: 20px; height: 20px; }
.adjunto-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.adjunto-datos b { font-size: .92rem; overflow-wrap: anywhere; }
.adjunto-datos small { color: var(--muted); font-size: .78rem; }
.adjunto-marca { font-size: .78rem; color: var(--secondary-ink, var(--primary)); font-weight: 700; }
.adjunto-marca.suelta { color: var(--muted); font-weight: 600; }
.adjunto-botones { display: flex; gap: 6px; flex: none; }
.adjuntos-subir {
border: 1px dashed var(--line); border-radius: var(--radius-sm);
padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.adjuntos-subir h3 { margin: 0; font-size: .95rem; color: var(--primary); }
.adjuntos-subir .apunte { margin: 0; }
.adjuntos-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adjuntos-fila .archivo-elegido {
flex: 1; min-width: 180px; font-size: .88rem; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adjuntos-fila .archivo-elegido.puesto { color: var(--ink); font-weight: 600; }
.adjuntos-examenes {
display: flex; flex-direction: column; gap: 6px;
margin-left: 22px; padding-left: 12px; border-left: 2px solid var(--line);
max-height: 260px; overflow-y: auto;
}
.adjuntos-examenes[hidden] { display: none; }
.vacio-suave { margin: 0; padding: 18px; text-align: center; color: var(--muted); font-size: .9rem; }
/* La pestaña de adjuntos NO lleva color propio: hereda el de las demás. Con
`.activa { color: var(--primary) }` la palabra «Adjuntos» quedaba azul
marino sobre el fondo azul marino de la pestaña activa, o sea invisible;
solo se leía «ninguno», que va en su propio color. */
/* El relojito que abre el histórico de un analito. Vive junto al NOMBRE y
casi no se ve hasta que se pasa por encima: el valor anterior ya no se
pinta en la fila (Iralis, 10/09/2026), pero quien lo quiera mirar lo tiene
a un clic. */
.campo-nombre .ver-historico {
border: none; background: none; margin-left: 2px;
/* Discreto, pero visible: --line daba 1,19 sobre 1 contra el blanco, que es
invisible, no discreto. Este da 3,05, que es el mínimo de la norma para un
icono que significa algo, y sigue quedando un escalón por debajo del
nombre del analito, que es lo que se quería. */
color: #8695A8; cursor: pointer; vertical-align: -6px;
width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center;
border-radius: 6px;
}
.campo-nombre .ver-historico svg { width: 15px; height: 15px; }
.campo-fila:hover .ver-historico { color: var(--muted); }
.campo-nombre .ver-historico:hover { color: var(--primary); }
/* ===========================================================================
062 · LAS COMPUTADORAS DEL LABORATORIO, EN LA CABECERA
Un puntito por analizador: verde si su puente dio señales en los últimos
tres minutos, rojo si no. Al pasar por encima dice desde cuándo y en qué
máquina. Va junto a la tasa del dólar, que es donde se mira de reojo.
=========================================================================== */
.nav-btn.puentes { cursor: default; padding: 4px 10px; }
.nav-btn.puentes:hover { background: none; }
.puentes-luces { display: flex; align-items: center; gap: 12px; }
.puente-luz {
display: inline-flex; align-items: center; gap: 5px;
font-size: .68rem; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; color: rgba(255, 255, 255, .72);
cursor: help;
}
.puente-luz i {
width: 8px; height: 8px; border-radius: 99px; flex: none;
background: var(--danger); box-shadow: 0 0 0 3px rgba(200, 70, 31, .22);
}
/* Verde y con un halo que respira: se ve de reojo desde el otro lado del
mostrador, que es para lo que está. */
.puente-luz.si i { background: #2ECC71; box-shadow: 0 0 0 3px rgba(46, 204, 113, .22); }
.puente-luz.si { color: rgba(255, 255, 255, .92); }
/* Gris y quieto: «no se sabe». Es el estado de una computadora a la que
todavía no se le ha copiado el puente que avisa. No es una alarma. */
.puente-luz.sin i { background: rgba(255, 255, 255, .35); box-shadow: none; }
.puente-luz.sin { color: rgba(255, 255, 255, .45); }
/* El rojo SÍ parpadea: que algo no esté entrando tiene que molestar un poco.
El verde no, que si no la barra entera sería una feria. */
.puente-luz.no i { animation: puenteAviso 1.6s ease-in-out infinite; }
@keyframes puenteAviso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .puente-luz.no i { animation: none; } }
/* 03/11 (Jean): con «ESPECIALES» la barra se cortaba en las pantallas
pequeñas. Ahora el punto y la inicial (H, Q, E), y un aviso escrito SOLO
cuando alguno no da señal. El detalle sigue en el `title` de cada punto. */
.puentes-luces { gap: 9px; }
.puente-luz { gap: 4px; font-size: .74rem; }
.puentes-texto {
font-size: .68rem; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; color: #FFB4A1; white-space: nowrap;
}
.puentes-texto:empty { display: none; }
/* Medido el 03/11: con «HEMATOLOGÍA SIN SEÑAL» (147 px) la barra necesita
~1.500 px; a 1366 «Caja del día» ya se montaba sobre la tasa. Por debajo de
1520 basta la letra roja que parpadea (y su `title` dice cuál es). */
@media (max-width: 1519px) { .puentes-texto { display: none; } }
@media (max-width: 900px) {
/* En pantalla estrecha, solo los puntos: letras y aviso sobran */
.puente-luz { font-size: 0; gap: 0; }
.puentes-texto { display: none; }
}
/* ===========================================================================
AUDITORÍA DEL 11/09/2026 · QUE ESTO SE PUEDA USAR DESDE EL TELÉFONO
Todo lo de aquí abajo salió de medir la página desplegada con una pantalla
de 375 px, que es la del teléfono de Iralis. Va al final del archivo a
propósito: no cambia ni una regla de las de arriba, solo las pisa donde
hace falta, y así se puede quitar entero si algún día estorba.
Ninguna toca el mostrador salvo la del velo, que es un arreglo, no un
cambio de diseño.
=========================================================================== */
/* 1 · LA BARRA DE ARRIBA CABÍA EN 570 px Y LA PANTALLA TIENE 375
---------------------------------------------------------------------------
Con la tasa y las luces de los puentes a la vista —lo normal desde que se
conectaron los equipos— la barra pedía 570 px. Lo que sobraba no
desaparecía: se metía DEBAJO del bloque del usuario, y ahí «Bandeja» y
«Pacientes» se quedaban con CERO píxeles que respondieran al dedo. Desde el
teléfono no se podía cambiar de pantalla.
Lo único de la barra que puede ceder sitio es el nombre de la sucursal, así
que se recorta con puntos suspensivos. El `min-width: 0` no es adorno: sin
él, un flex se niega a encoger a sus hijos por debajo de su contenido, que
es justo lo que pasaba.
Medido con el arreglo puesto: «Reportes» pasa de 26 a 59 px vivos y la
página deja de arrastrarse de lado. */
@media (max-width: 720px) {
.nav-sup { flex: 1 1 auto; min-width: 0; }
.nav-sup > * { min-width: 0; }
.nav-btn { padding: 0 9px; }
.nav-btn.sede { min-width: 0; overflow: hidden; }
/* Azul noche (24/09/2026): el puntito de la pestaña activa y el cristal
del dólar piden sitio que aquí no hay. */
.nav-sup .nav-btn { margin: 10px 0; }
.nav-sup .nav-btn.activo::before { display: none; }
.nav-btn.tasa { margin: 10px 2px; padding: 0 8px; }
.nav-btn.sede .texto {
min-width: 0; max-width: 13ch;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
}
/* 2 · EL DESPLEGABLE DE «REPORTES» SE SALÍA 155 px DE LA PANTALLA
---------------------------------------------------------------------------
`.menu` pide 232 px de ancho mínimo y se ancla a la IZQUIERDA de su botón.
En el teléfono ese botón está en x=298: el menú llegaba a x=530 en una
pantalla de 375. Las tres opciones salían cortadas («Estadíst…»,
«Resultad…») y la página se iba de lado.
Anclado a la derecha y con el ancho de su contenido, cabe entero: medido,
x 179..296 en una ventana de 375. */
@media (max-width: 720px) {
.menu { min-width: 0; width: max-content; max-width: calc(100vw - 16px); }
.menu-envoltorio .menu { left: auto; right: 0; }
}
/* 3 · LOS SIETE BOTONES DE CADA FILA MEDÍAN 32 × 32 px
---------------------------------------------------------------------------
Es el 53 % del área que pide la guía de accesibilidad (44 × 44), y entre
«enviar por WhatsApp al paciente» y «cobrar» quedaban DOS píxeles. La
pastilla del número —la que abre la orden— medía 81 × 23, y la campanita de
observaciones 15 × 15, por debajo del mínimo duro de WCAG 2.2.
Va colgado de `pointer: coarse` y no de un ancho de pantalla, y la
diferencia importa: en el mostrador hay ratón, y ahí 32 px está bien porque
cabe más fila en pantalla. El dedo es el que pide sitio.
En un teléfono de 375 px los siete caben justos en una línea:
7 × 44 + 6 × 2 = 320 de los 327 que tiene la tarjeta. Comprobado. */
@media (pointer: coarse) {
.icono { width: 44px; height: 44px; border-radius: 10px; }
.icono svg { width: 20px; height: 20px; }
.acciones { gap: 2px; }
.orden-pastilla { padding: 10px 12px; }
.marca-obs { width: 32px; height: 32px; border-radius: 8px; vertical-align: middle; }
.marca-obs svg { width: 17px; height: 17px; }
/* La hojita de las notas, del tamaño del dedo */
.marca-notas { width: 34px; height: 34px; border-radius: 9px; }
.marca-notas svg { width: 18px; height: 18px; }
/* El histórico de cada analito: sale trece veces en una hematología y con el
dedo hay que poder darle. Además `:hover` no existe aquí, así que es lo
único que lo hace alcanzable. */
.campo-nombre .ver-historico { width: 32px; height: 32px; color: var(--muted); }
.campo-nombre .ver-historico svg { width: 18px; height: 18px; }
}
/* 4 · UN CUADRO LARGO DEJABA SUS BOTONES FUERA, SIN MANERA DE LLEGAR
---------------------------------------------------------------------------
`.velo` centraba con `place-items: center` y sin `overflow`. Un cuadro más
alto que la pantalla se parte por los dos extremos y no hay forma de
desplazarlo: medido en un teléfono de 812 px de alto, el botón «Volver» del
cuadro de «le faltan datos al paciente» caía 604 px por debajo del borde y
el velo no se movía ni pidiéndoselo.
`align-items: start` con `margin: auto 0` en el hijo da exactamente lo mismo
que `center` cuando el cuadro cabe —que es casi siempre— y deja desplazar
cuando no cabe. Los cuadros que ya llevan `max-height: 92vh` siguen igual.
Con el arreglo, ese mismo botón se alcanza. */
.velo {
display: grid; justify-items: center; align-items: start;
overflow-y: auto; overscroll-behavior: contain;
}
.velo > * { margin: auto 0; }
/* 5 · EL IPHONE AMPLIABA LA PÁGINA CADA VEZ QUE SE TOCABA UN CAMPO
---------------------------------------------------------------------------
Safari en iOS amplía al enfocar cualquier campo con letra menor de 16 px, y
después no la devuelve sola. Los nuestros están a 14,88 px, así que pasaba
en todos: escribir la cédula dejaba la pantalla ampliada y había que
pellizcar para volver.
El atajo feo sería `maximum-scale=1` en el viewport; no se hace, porque eso
le quita a TODO EL MUNDO el poder ampliar la pantalla. Se sube la letra solo
donde hay dedo. En el mostrador, con ratón, no cambia nada. */
@media (pointer: coarse) {
input, select, textarea { font-size: 16px; }
.cfg-fila input:not([type=checkbox]),
.cfg-campo input, .cfg-campo select,
.cfg-grupo input, .cfg-grupo select,
.campo-valor .valor { font-size: 16px; }
}
/* ===========================================================================
LO QUE LLEGA DE LOS EQUIPOS (071)
Se rehízo entero el 13/09/2026: Iralis lo vio y dijo «hay textos pisados y
no se entienden muchas cosas». Tenía razón, y la causa era mía: la primera
versión usaba nombres de color que NO EXISTEN en esta hoja —`--acento`,
`--borde`, `--tarjeta`, `--ok`— así que sus 19 usos caían en el valor de
reserva y todo salía del mismo gris. Sin color no hay jerarquía, y sin
jerarquía una lista densa es un muro de letra pequeña.
Ahora usa los de la casa: `--primary`, `--secondary`, `--line`, `--success`,
`--warn`, `--info`, `--muted`, `--cifra`. Los mismos de Cobros.
Lo demás que cambia, y por qué:
· Los datos de cada trama iban con `space-between`, así que en una pantalla
de 1.497 px el nombre quedaba a la izquierda del todo y sus cifras a la
derecha del todo, con medio metro de vacío en medio. Ahora van en una
REJILLA de columnas fijas: cada trama alinea su muestra debajo de la
muestra de la de arriba, y el ojo baja en línea recta.
· El modelo salía dos veces («Hematología BK-3100 BK-3100») porque el
nombre ya lo lleva dentro. Fuera.
· El botón de recoger a mano ocupaba el ancho entero de la tarjeta con un
borde finito: parecía un campo de texto vacío, no un botón.
=========================================================================== */
/* --- Las dos tarjetas de arriba ------------------------------------------- */
.eq-tarjetas {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
margin: 16px 0 26px;
}
.eq-tarjeta {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
box-shadow: var(--sombra);
}
/* Recoger a mano es un estado excepcional, y se tiene que ver de lejos: el
borde de la izquierda es como esta aplicación marca «esto no es lo normal». */
.eq-tarjeta.capturando { border-left: 4px solid var(--secondary); background: var(--secondary-soft); }
.eq-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eq-nombre b {
font-family: var(--display); font-size: 1.02rem; font-weight: 800;
color: var(--primary); letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Los dos datos del equipo, cada uno en su pastilla. Antes iban pegados en una
sola línea gris («Sin señal 7 sin asignar») y se leían como una sola frase
sin sentido. Y el estado no se dice SOLO con color: lleva su palabra. */
.eq-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-chip {
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
background: var(--neutro-soft); color: var(--neutro);
}
.eq-chip.vivo { background: var(--success-soft); color: var(--success); }
.eq-chip.mudo { background: var(--neutro-soft); color: var(--neutro); }
.eq-chip.espera { background: var(--warn-soft); color: var(--warn); }
.eq-tarjeta .eq-interruptor { align-self: flex-start; }
.eq-tarjeta .nota {
margin: 0; font-size: .78rem; line-height: 1.45; color: var(--muted);
border-top: 1px solid var(--line); padding-top: 9px;
}
/* Que el candado se lea antes de pulsar, no despues (076). Va en su propia
linea porque es una condicion, no una coletilla de la frase de arriba. */
.eq-tarjeta .nota .eq-llave {
display: block; margin-top: 5px; font-weight: 600; color: var(--ink);
}
/* --- La barra de filtros --------------------------------------------------- */
.eq-filtros {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.eq-filtros label { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; }
.eq-cuenta { font-size: .8rem; color: var(--muted); }
/* --- La lista de tramas ---------------------------------------------------- */
.eq-lista { display: flex; flex-direction: column; gap: 8px; }
.eq-trama { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.eq-trama.pendiente { border-left: 4px solid var(--warn); }
.eq-trama.aplicada { border-left: 4px solid var(--success); }
/* LA REJILLA, que es el arreglo de fondo: cuatro columnas siempre en el mismo
sitio, así todas las filas se leen en vertical sin buscar. */
.eq-cab {
display: grid; align-items: center; gap: 10px 18px;
grid-template-columns: minmax(190px, 1.5fr) 150px 160px minmax(150px, .9fr);
padding: 11px 15px; cursor: pointer; width: 100%; text-align: left;
background: none; border: 0; font: inherit; color: inherit;
}
.eq-cab:hover { background: var(--fondo); }
.eq-cab:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.eq-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eq-quien b { font-weight: 700; color: var(--ink); font-size: .9rem; }
.eq-cuando { font-size: .78rem; color: var(--muted); }
/* El número de muestra en la tipografía de cifras, como el resto de la app:
es el dato que se compara de un vistazo con lo que dice el equipo. */
.eq-muestra {
font-family: var(--cifra); font-size: .8rem; justify-self: start;
background: var(--fondo); color: var(--ink);
padding: 3px 9px; border-radius: 7px; white-space: nowrap;
}
.eq-muestra.sin { font-family: var(--font); font-style: italic; color: var(--muted); background: none; padding-left: 0; }
.eq-cuantos { font-size: .82rem; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
/* Los códigos que no sabemos traducir son la lista de tareas de esta pantalla,
no un error: se marcan en el azul de avisar, no en el rojo de alarma. */
.eq-nuevos { color: var(--info); font-weight: 700; font-size: .76rem; }
.eq-destino { justify-self: end; text-align: right; font-size: .82rem; min-width: 0; }
.eq-destino .eq-ok { color: var(--success); font-weight: 700; }
.eq-destino .eq-falta { color: var(--warn); font-weight: 700; }
.eq-destino .eq-quien-es { display: block; color: var(--muted); font-size: .78rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-aviso { margin: 0; padding: 0 15px 11px; font-size: .8rem; color: var(--muted); }
/* --- Lo que se despliega --------------------------------------------------- */
.eq-cuerpo { padding: 14px 15px 16px; border-top: 1px solid var(--line); background: var(--fondo); }
/* La nota que va debajo de una tabla, separada del borde (no pegada) */
.eq-cuerpo .eq-valores + .apunte, .eq-cuerpo .fz-tabla + .apunte { margin-top: 12px; }
.eq-valores { width: 100%; font-size: .84rem; background: #fff; border-radius: var(--radius-sm); overflow: hidden; border-collapse: collapse; }
.eq-valores th {
font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--muted); font-weight: 700; text-align: left; padding: 8px 10px;
border-bottom: 1px solid var(--line);
}
.eq-valores td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.eq-valores tr:last-child td { border-bottom: 0; }
.eq-valores td.num { text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums; }
/* Jean, 27/09 · el encabezado de una columna de cifras, encima de sus cifras (a la derecha, como ellas) */
.eq-valores th.num { text-align: right; }
.eq-valores code { font-family: var(--cifra); font-size: .8rem; color: var(--primary); }
.eq-valores tr.sin-identificar { background: var(--info-soft); }
.eq-valores tr.sin-identificar em { color: var(--info); font-style: normal; font-size: .8rem; }
.eq-asignar { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; max-width: 520px; }
.eq-sugerencias { display: flex; flex-direction: column; gap: 5px; }
.eq-sug { justify-content: flex-start; text-align: left; width: 100%; }
.eq-sug b { font-family: var(--cifra); margin-right: 6px; }
/* --- En pantalla estrecha la rejilla se deshace en renglones --------------- */
@media (max-width: 820px) {
.eq-cab { grid-template-columns: 1fr auto; gap: 6px 10px; }
.eq-quien { grid-column: 1 / -1; }
.eq-destino { justify-self: start; text-align: left; grid-column: 1 / -1; }
.eq-cuerpo { overflow-x: auto; }
}
/* 072 · Las preguntas del equipo (ORM): están, pero no piden nada a nadie */
.eq-trama.peticion { border-left: 3px solid var(--line); background: var(--fondo); }
.eq-trama.peticion .eq-quien b { font-weight: 600; color: var(--muted); }
.eq-cab-quieta {
display: grid; align-items: center; gap: 10px 18px;
grid-template-columns: minmax(190px, 1.5fr) 150px 160px minmax(150px, .9fr);
padding: 11px 15px;
}
.eq-cab-quieta .eq-muestra { background: #fff; color: var(--muted); }
.eq-nada { color: var(--muted); font-size: .8rem; }
@media (max-width: 820px) {
.eq-cab-quieta { grid-template-columns: 1fr auto; gap: 6px 10px; }
.eq-cab-quieta .eq-quien, .eq-cab-quieta .eq-destino { grid-column: 1 / -1; }
}
/* 073 · Elegir qué valores pasan, y decir qué es cada código */
.eq-valores th.col-marca, .eq-valores td.col-marca { width: 34px; text-align: center; padding-left: 12px; }
.eq-valores input[type=checkbox] { cursor: pointer; }
/* Un valor que ya se le pasó a alguien no se puede volver a repartir: se ve,
pero apagado, para que quede claro por qué no tiene casilla. */
.eq-valores tr.ya-usado { opacity: .5; }
.eq-valores tr.ya-usado td { font-style: italic; }
.eq-analito { font-weight: 600; }
/* Las dos marcas de la traducción. «Sin comprobar» es un BOTÓN porque de eso se
trata: se pulsa cuando el valor de al lado casa con lo que enseña el equipo. */
.eq-sello {
display: inline-block; margin-left: 7px; font-size: .68rem; font-weight: 700;
padding: 2px 7px; border-radius: 999px; border: 0; vertical-align: middle;
}
.eq-sello.bien { background: var(--success-soft); color: var(--success); }
.eq-sello.duda { background: var(--warn-soft); color: var(--warn); cursor: pointer; }
.eq-sello.duda:hover { background: var(--warn); color: #fff; }
.eq-quitar {
margin-left: 6px; font-size: .7rem; background: none; border: 0; padding: 2px 4px;
color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.eq-quitar:hover { color: var(--danger); }
/* La lista para decir qué es. Va dentro de la tabla, al lado del valor, porque
es comparando el VALOR con la pantalla del equipo como se identifica —por el
nombre del código no: el BK-3100 usa tres con un significado que no es suyo. */
.eq-elegir-analito {
width: 100%; max-width: 280px; font-size: .82rem; padding: 4px 8px;
border: 1px solid var(--field-border); background: var(--field-bg);
border-radius: 8px; color: var(--ink);
}
.eq-cuantos-van { margin: 0 0 2px; font-size: .84rem; color: var(--muted); }
.eq-cuantos-van b { color: var(--primary); }
/* 074 · La pestaña «Claves», solo para administradoras */
.clv-tabla { width: 100%; margin-top: 10px; }
.clv-tabla td, .clv-tabla th { vertical-align: top; padding: 9px 10px; }
.clv-si, .clv-no {
display: inline-block; font-size: .74rem; font-weight: 700;
padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.clv-si { background: var(--success-soft); color: var(--success); }
.clv-no { background: var(--warn-soft); color: var(--warn); }
.clv-lista { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; }
.clv-aviso {
margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--warn-soft); color: var(--warn); font-size: .85rem;
border-left: 3px solid var(--warn);
}
/* 075 · De dónde sale cada clave, y los botones de cambiarla */
.clv-heredada {
display: inline-block; font-size: .74rem; font-weight: 700;
padding: 2px 9px; border-radius: 999px; white-space: nowrap;
background: var(--info-soft); color: var(--info);
}
.clv-acciones { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; white-space: nowrap; }
.clv-acciones .btn { font-size: .8rem; padding: 5px 10px; }
/* Un icono suelto dentro de la celda del precio no puede crecer sin freno.
Pasó el 13/09/2026: el lápiz de «Exámenes» y «Perfiles» salía a 62 × 62 px
porque un `` con `viewBox` y sin medidas se estira hasta llenar a su
padre, y esa celda mide 62 px de ancho por ser la columna de los importes.
Los dos lápices se mudaron a `.marca`, que es su sitio; esto es el seguro
para el día que alguien vuelva a meter un icono donde van números. */
.fila-examen .precio svg { width: 15px; height: 15px; flex: none; }
/* --- Tiempos de entrega aprendidos (078) ---------------------------------- */
/* La tabla puede traer 60 examenes: se desplaza dentro del cuadro, no estira
el dialogo hasta sacarlo de la pantalla. */
/* Con las dos clases, porque `.dialogo.cfg-detalles` (560px) tiene la misma
fuerza y va antes: un solo `.tm-cuadro` perdia y la tabla salia cortada. */
.dialogo.tm-cuadro { width: min(880px, 100%); }
.tm-tabla { max-height: 46vh; overflow: auto; margin-top: 12px; }
/* El nombre manda; las cifras ocupan lo justo y no se parten. */
.tm-tabla td:first-child, .tm-tabla th:first-child { width: 46%; }
.tm-tabla .tm-veces { display: block; font-size: .74rem; color: var(--muted); }
.tm-tabla td.cifra, .tm-tabla th.cifra {
text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Los que todavia no tienen muestras suficientes se ven, pero apagados: son la
lista de lo que falta por medir, no una propuesta. */
.tm-tabla tr.tm-flojo td { color: var(--muted); }
/* --- Ver los examenes por perfil (080) ------------------------------------ */
/* El separador del segundo grupo de opciones de la fila «Ordenar por». Sin el,
las cinco opciones parecian una sola lista y no se entendia que son dos
preguntas distintas. */
.ordenar-aparte {
font-size: .85rem; color: var(--muted); font-weight: 600;
margin-left: 10px; padding-left: 16px; border-left: 1px solid var(--line);
}
/* La etiqueta del perfil lleva NOMBRE, no codigo: «PERFIL 20» se entiende y
«PER20» no. Por eso puede partirse en dos lineas, al reves que las de un
examen suelto, que son cortas por definicion. */
.chip.perfil {
font-family: var(--font); font-weight: 700; letter-spacing: .2px;
white-space: normal; max-width: 100%;
display: inline-flex; align-items: baseline; gap: 6px;
}
/* Cuantos de los suyos estan listos. Va en cifras y mas apagado: acompaña al
nombre, no compite con el. */
.chip.perfil i {
font-style: normal; font-family: var(--font); font-size: .72rem;
font-variant-numeric: tabular-nums; opacity: .8; font-weight: 600;
}
/* Con los perfiles agrupados caben menos etiquetas y mas anchas. */
.examenes:has(.chip.perfil) { max-width: min(620px, 38vw); }
/* El perfil es un botón: se pulsa y dice qué lleva dentro. Hay que devolverle
a mano lo que el navegador le quita a un `button` —tipografía, borde,
alineación— o dejaría de parecerse a las demás etiquetas de la fila. */
button.chip.perfil {
border: none; font: inherit; font-family: var(--font); font-weight: 700;
/* El tamaño, a mano y después de `font: inherit`, que lo borra: si se deja
heredar, el perfil mide lo que mida la fila y el examen de al lado mide
otra cosa. Los dos, .88rem. */
font-size: .8rem;
letter-spacing: .3px; text-align: left; cursor: pointer;
transition: box-shadow .12s ease, transform .12s ease;
}
button.chip.perfil:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px var(--chip-b, var(--line)),
0 5px 12px -6px var(--chip-t, hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .6));
}
button.chip.perfil:active { transform: translateY(1px); }
/* --- Qué lleva este perfil --------------------------------------------------
Una ventana de solo mirar: el nombre de cada examen a la izquierda, su
estado a la derecha, y nada que se pueda pulsar por error. */
.dialogo.perfil-dentro { width: min(520px, 100%); }
.perfil-lista {
list-style: none; margin: 14px 0 0; padding: 0;
border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.perfil-linea {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 12px; border-bottom: 1px solid var(--line);
}
.perfil-linea:last-child { border-bottom: none; }
.perfil-linea:nth-child(odd) { background: hsl(from #FBFDFF calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.perfil-nombre {
min-width: 0; font-size: .88rem; color: var(--ink); line-height: 1.35;
}
/* El código, al lado del nombre y apagado: sirve para reconocerlo de un
vistazo en la fila, no para leerlo. */
.perfil-nombre small {
display: block; font-family: var(--cifra); font-size: .72rem; color: var(--muted);
letter-spacing: .3px;
}
.perfil-linea .chip { flex: none; }
/* ===========================================================================
092 · El cambio que manda el equipo sobre un examen YA FIRMADO
---------------------------------------------------------------------------
Iralis, 14/09/2026: «si está validado que no lo cambie, pero que salga ahí
mismo al lado del candado, con dos botoncitos, rechazar o aceptar».
Va en ámbar —no en rojo— porque no es un error de nadie: es la bioanalista
que corrigió en el equipo y volvió a transmitir. Es una decisión que tomar,
no una alarma.
=========================================================================== */
.propuesta-equipo {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
margin: 0 16px 12px; padding: 10px 14px;
background: var(--warn-soft); border: 1px solid var(--warn);
border-radius: 8px; font-size: .88rem;
}
.propuesta-equipo .propuesta-que { flex: 1 1 260px; min-width: 0; }
.propuesta-equipo b { color: var(--warn); }
.propuesta-equipo ul { margin: 4px 0 0; padding-left: 18px; }
.propuesta-equipo li { margin: 1px 0; }
.propuesta-equipo .antes { text-decoration: line-through; color: var(--muted); }
.propuesta-equipo .ahora { font-weight: 700; }
.propuesta-equipo .unidad { color: var(--muted); }
.propuesta-botones { display: flex; gap: 8px; margin-left: auto; }
.propuesta-botones .btn.aceptar { border-color: var(--warn); color: var(--warn); }
/* ===========================================================================
CAJA DEL DÍA (db/111 · 19/09/2026)
Lo que entró, lo que salió y el cierre. Casi todo sale prestado de lo que ya
hay —`.kpis`, `.caja.bloque`, `.tabla-envoltorio`, la barra de día de la
bandeja—; aquí va solo lo que esta pantalla necesita y no existía.
=========================================================================== */
/* El título de un bloque con su botón a la derecha. */
#pantallaCaja .bloque + .bloque, #pantallaCaja .kpis + .bloque { margin-top: 14px; }
/* Lo mismo en Ingresos y en el Reporte masivo: las tarjetas sueltas quedaban
borde con borde. Con `>`: las dos de una .dos-columnas también son
hermanas, y la de la derecha no debe bajar. */
#pantallaIngresos > .caja.bloque + .caja.bloque,
#pantallaReporte > .caja.bloque + .caja.bloque { margin-top: 14px; }
.bloque-cabecera {
display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.bloque-cabecera .bloque-titulo { margin: 0; }
.bloque-cabecera .btn { margin-left: auto; }
/* El apunte es de párrafo (12px por abajo): dentro de una fila centrada lo
subía, y en una celda o en la columna del pago la hacía crecer. Solo el
margen de arriba y abajo: el `margin-right: auto` de .crece se queda. */
.bloque-cabecera .apunte, .caja-cierre-pie .apunte,
.caja-resumen .apunte, .cobro-pago .apunte { margin-top: 0; margin-bottom: 0; }
/* Las cifras de dinero, en la tipografía de cifras y alineadas por la coma:
contar una columna de dólares con la letra del texto es contar dos veces. */
.mono { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.caja-tabla td, .caja-tabla th { vertical-align: middle; }
.caja-tabla td .apunte { display: block; margin: 2px 0 0; font-size: .78rem; }
/* La casilla de contar: nace vacía con lo que dice el sistema en gris detrás,
para que escribir el mismo número no sea lo primero que se hace. */
.caja-tabla input.caja-contado {
width: 108px; text-align: right;
font-family: var(--cifra); font-variant-numeric: tabular-nums;
padding: 6px 9px; border: 1.5px solid var(--field-border); border-radius: 9px;
background: #fff; color: var(--ink);
}
.caja-tabla input.caja-contado:focus {
outline: none; box-shadow: none;
border-color: var(--secondary-dark); border-width: 2px;
}
/* LA DIFERENCIA, EN PALABRAS Y EN COLOR. Las dos cosas: el color solo no lo ve
todo el mundo, y esta columna decide si alguien se queda buscando dinero.
«cuadra» en verde, «sobra» en ámbar —hay de más, hay que averiguar por
qué— y «falta» en rojo. Igual que el cierre de Cobros. */
.caja-tabla .dif { font-weight: 600; color: var(--muted); }
.caja-tabla .dif.cuadra { color: var(--success); }
.caja-tabla .dif.sobra { color: var(--warn); }
.caja-tabla .dif.falta { color: var(--danger); }
/* La pastilla de cada método: «contar» mientras el efectivo siga sin contarse
—es lo único que de verdad puede faltar— y «contado» en cuanto se escribe
algo. Lo electrónico no la lleva hasta entonces: se cuadra con el banco. */
.pastilla-conteo {
display: inline-block; margin-top: 4px;
padding: 2px 9px; border-radius: 99px;
font-size: .72rem; font-weight: 700; letter-spacing: .02em;
text-transform: uppercase;
}
.pastilla-conteo.es-contar { background: var(--warn-soft); color: var(--warn); }
.pastilla-conteo.es-contado { background: var(--success-soft, #DFF3EA); color: var(--success); }
/* El resumen del cuadre, lo último antes de cerrar: el resultado de haber
contado, no una instrucción previa. Alineado a la derecha, pegado a los
botones, porque se lee justo antes de pulsar. */
.caja-resumen {
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px;
margin-top: 16px; padding: 11px 14px;
background: var(--fondo); border-radius: 12px;
font-size: .88rem; color: var(--muted);
}
.caja-resumen:empty { display: none; }
.caja-resumen .cuadra { color: var(--success); font-weight: 600; }
.caja-resumen .sobra { color: var(--warn); font-weight: 600; }
.caja-resumen .falta { color: var(--danger); font-weight: 600; }
.caja-resumen .apunte { flex-basis: 100%; text-align: right; }
/* EL VEREDICTO DE UN DÍA YA CERRADO. El mismo resumen, pero arriba del todo y
leído de izquierda a derecha: aquí ya no se está contando, se está mirando
qué pasó. Va sobre el verde del cierre hecho, como el panel de Cobros. */
.caja-veredicto {
justify-content: flex-start; margin: 10px 0 0;
background: var(--success-soft);
border-left: 3px solid var(--success);
font-size: .92rem;
}
.caja-veredicto .apunte { text-align: left; }
/* Las casillas de un cierre ya hecho: se leen, no se escriben. Sin el gris de
«apagado» de siempre, que aquí diría «esto no sirve» cuando lo que dice es
«esto ya está». */
.caja-tabla input.caja-contado:disabled {
background: var(--fondo); color: var(--ink);
border-color: transparent; cursor: default; opacity: 1;
}
/* LAS TRES PARTES DEL VOUCHER, EN FILA, como en el cierre de Cobros (Jean,
19/09/2026: «que se vea lo más parecido a cobros»). Antes iban una debajo de
otra porque la tabla ocupaba media pantalla y «Visa / Mastercard» no cabía;
desde que el cierre es un solo cuadro a ancho completo, caben las tres. El
nombre va ENCIMA de su casilla: al lado empujaba la casilla fuera. */
/* Dos botones que son en realidad UNA pregunta: entra o sale. Es el mismo
control segmentado que Cobros usa para elegir moneda. */
.pl-eleccion {
display: flex; gap: 6px; background: var(--field-bg);
border: 1.5px solid var(--field-border); border-radius: 11px; padding: 4px;
}
.pl-eleccion button {
flex: 1; border: none; background: none; cursor: pointer; font: inherit;
font-weight: 700; font-size: .92rem; color: var(--muted);
padding: 10px 12px; border-radius: 8px;
}
.pl-eleccion button.activo {
background: #fff; color: var(--primary);
box-shadow: 0 1px 3px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18);
}
.caja-partes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: flex-end; }
/* Cada parte con el ANCHO DE SU CASILLA y el nombre centrado encima. Antes el
nombre iba pegado a la derecha y «Visa / Mastercard», que es más ancho que
la casilla, se salía y parecía el rótulo de la de al lado. */
/* Un poco más anchas que las de una sola casilla (Iralis, 21/09/2026: «esos 3
cuadritos los puedes hacer un poquito más grande»): aquí se escribe el
voucher del punto, que es la cifra más larga del cierre —392.498,59— y
entraba justa. */
.caja-parte { display: grid; gap: 3px; justify-items: stretch; width: 124px; }
.caja-parte > span {
font-size: .72rem; color: var(--muted); font-weight: 600;
text-align: center; line-height: 1.2; white-space: normal;
}
.caja-parte input.caja-contado { width: 100%; }
/* Los egresos del día: una línea cada uno, el monto a la derecha y la × al
final, con aire entre ellos. */
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-simple li {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; border-radius: 10px; background: var(--fondo);
}
.lista-simple li .crece { flex: 1; min-width: 0; }
.lista-simple li small { display: block; }
/* El cierre, en su propia caja y ENTRE lo que entró y lo que salió: se cuenta,
se cierra, y el detalle de los egresos queda debajo. Es el orden de Cobros.
El pie es el mismo de allá: la nota a la izquierda y estrecha —una frase, no
un párrafo—, y los botones en una fila a la derecha, con el de más peso al
final. La caja chica vive aquí y no arriba porque reponerla es una decisión
del cierre, no parte de contar. */
.caja-cierre-nota { max-width: 420px; margin: 16px 0 0; }
.caja-cierre-nota .apunte { display: block; margin-top: 5px; }
.caja-cierre-pie {
display: flex; align-items: center; justify-content: flex-end;
gap: 9px; flex-wrap: wrap; margin-top: 16px;
}
.caja-cierre-pie .crece { margin-right: auto; }
.caja-cierre-pie .btn { flex: none; }
.caja-cierre-fila { display: flex; align-items: flex-end; gap: 12px; }
.caja-cierre-fila .campo { margin: 0; }
.caja-cierre-fila .btn { flex: none; }
.kpi.kpi-fuerte { border-color: var(--secondary); }
/* --- La ventana de anotar un egreso ----------------------------------------
Copiada pieza por pieza de la de Cobros (Jean, 19/09/2026: «hazla igualita a
la pantalla de egresos de cobros»): la tasa arriba a la derecha, el monto en
una sola fila con sus dos casillas, y el total con la tasa escrita al lado.
--------------------------------------------------------------------------- */
.eg-cabecera { display: flex; align-items: center; gap: 10px; }
.eg-cabecera h2 { margin: 0; }
.eg-tasas { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.eg-tasa-sel, .eg-tasa-propia {
font-family: var(--cifra); font-size: .82rem; font-weight: 600;
padding: 6px 8px; border: 1.5px solid var(--field-border); border-radius: 9px;
background: var(--field-bg); color: var(--ink);
}
.eg-tasa-propia { width: 92px; }
/* `.dialogo.dialogo-ancho select` (.98rem) le ganaba al desplegable de la
tasa, que salía más grande y más alto que «Acordada» a su lado. */
.dialogo .eg-tasas select.eg-tasa-sel { font-size: .82rem; }
/* Atenuado, no apagado: se ve que ya no manda él sino la casilla de al lado,
pero sigue pulsable —y pulsarlo borra la acordada—. */
.eg-tasa-sel.no-manda { opacity: .45; }
/* (db/182) «Mandar a pagar», a la derecha del rótulo como en Cobros. El rótulo
lleva la misma letra que los demás `.campo > span`: no es un span porque
tiene que apuntar a su casilla (`for`), y sin copiar la letra se veía
distinto de los rótulos de abajo. */
.eg-rotulo-con-boton { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* «Mandar a pagar» va en la línea del rótulo: del tamaño de un botón normal
la hacía el doble de alta que los demás rótulos de la ventana. */
.eg-rotulo-con-boton .btn { padding: 3px 10px; font-size: .78rem; }
.eg-rotulo-con-boton label {
font-size: .78rem; font-weight: 700; letter-spacing: .4px;
text-transform: uppercase; color: var(--muted);
}
/* El botón ámbar de Cobros, tal cual (su `.btn-tinte-ambar`): fondo blanco con
el filo y la letra del color. El ámbar de la casa (#C17A10) no llega al
mínimo legible ni sobre blanco; #8A5308 sí (el mismo de `.marca-cashea`).
ENCENDIDO se pinta por dentro (Jean, 20/08/2026: «que se pinte de amarillo
por dentro también cuando se pulse»), con la letra más oscura para que se
siga leyendo. */
.btn.btn-tinte-ambar { background: #fff; border-color: #DFBB74; color: #8A5308; }
.btn.btn-tinte-ambar:hover { border-color: #8A5308; color: #8A5308; }
.btn.btn-tinte-ambar.btn-activo,
.btn.btn-tinte-ambar.btn-activo:hover { background: #F3CE82; border-color: #8A5308; color: #6B3F05; }
/* (db/182) Cómo va cada egreso en Revisión: por pagar, pagado, la clínica le
debe, devuelto. Pequeña y al lado del concepto, como la de Cashea. Lo
pendiente en ámbar —lo mismo que el botón que lo mandó—, lo que la clínica
debe en el azul de la información, y lo hecho en verde. */
.pastilla-eg {
display: inline-block; margin-left: 8px; vertical-align: 1px;
padding: 1px 8px; border-radius: 999px;
font-size: .7rem; font-weight: 700; letter-spacing: .2px; text-transform: uppercase;
}
.pastilla-eg.pendiente { background: var(--warn-soft); color: #8A5308; }
.pastilla-eg.se-debe { background: var(--info-soft); color: var(--info); }
.pastilla-eg.hecho { background: var(--success-soft, #DFF3EA); color: var(--success); }
/* ===========================================================================
LOS VUELTOS POR PAGO MÓVIL EN LA CAJA (db/274 · PLAN-VUELTO parte 5)
La misma lista de los egresos, con el estado delante —lo primero que se
busca— y el monto en su columna. Si hay algo sin resolver, la tarjeta sube
sobre el cierre con el filo ámbar: es trabajo pendiente, no un detalle.
=========================================================================== */
.pastilla-eg.rechazado { background: var(--danger-soft); color: var(--danger); }
.pastilla-eg.anulado { background: var(--neutro-soft); color: var(--neutro); }
.lista-vueltos .pastilla-eg { margin-left: 0; flex: none; min-width: 96px; text-align: center; }
.caja-vueltos.con-pendientes { box-shadow: inset 3px 0 0 var(--warn); }
.caja-vueltos .bloque-cabecera .apunte { margin-left: auto; }
.vj-aviso {
margin: 0 0 12px; padding: 10px 13px; border-radius: 10px;
background: var(--warn-soft); color: #6E4606; font-size: .88rem; line-height: 1.45;
}
.vj-aviso b { color: #5A3905; }
.lista-vueltos li { gap: 14px; padding: 10px 12px; }
.lista-vueltos li.es-anulado { opacity: .62; }
.lista-vueltos li.es-anulado .vj-monto b { text-decoration: line-through; }
/* El que viene de otro día lleva su fecha y un filo: es el que se escapó. */
.lista-vueltos li.de-otro-dia { box-shadow: inset 3px 0 0 var(--warn); }
.lista-vueltos .crece > b { font-weight: 650; color: var(--ink); }
.lista-vueltos .crece small.apunte { margin: 2px 0 0; font-size: .8rem; }
.vj-motivo {
display: block; margin-top: 4px; color: var(--danger); font-size: .8rem; font-weight: 600;
}
.vj-monto { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 112px; }
.vj-monto b { font-size: .95rem; color: var(--ink); }
.vj-monto small { font-size: .76rem; color: var(--muted); }
.vj-ref { display: flex; align-items: baseline; gap: 5px; flex: none; min-width: 124px; justify-content: flex-end; }
.vj-ref small { font-size: .72rem; font-weight: 700; color: var(--success); text-transform: uppercase; letter-spacing: .03em; }
.vj-ref .copiable { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.lista-vueltos li > .btn { flex: none; min-width: 124px; }
/* La línea de la caja chica, dentro del cierre: una frase y su botón, con aire
por arriba —separa de la tabla que se cuenta— y sin caja propia. */
.caja-chica-linea {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
margin-top: 16px; padding: 11px 14px; border-radius: 12px;
border: 1px dashed var(--line); font-size: .88rem; color: var(--muted);
}
.caja-chica-linea b { color: var(--ink); }
.caja-chica-linea .crece { flex: 1; min-width: 220px; }
.dialogo p.rc-sugerido {
padding: 10px 12px; border-radius: 10px; background: var(--secondary-soft); color: var(--ink); font-size: .9rem;
}
@media (max-width: 640px) {
.lista-vueltos li { flex-wrap: wrap; }
.lista-vueltos .crece { flex-basis: calc(100% - 110px); }
.vj-monto { align-items: flex-start; min-width: 0; }
.vj-ref, .lista-vueltos li > .btn { margin-left: auto; }
}
.eg-tasa-sel:focus, .eg-tasa-propia:focus {
outline: none; box-shadow: none;
border-color: var(--secondary-dark); border-width: 2px;
}
.eg-tasa-propia::placeholder { font-family: var(--font); font-weight: 500; }
/* La fila del monto: la bolsa, los dólares y los bolívares. */
.eg-linea { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.eg-linea select { flex: 1 1 auto; min-width: 90px; }
.eg-linea .campo-monto { flex: none; width: 104px; }
.eg-linea .campo-monto.monto-bs { width: 150px; }
/* En el teléfono ni la cabecera ni la fila del monto cabían (la fila pide
~360px) y se salían por la derecha. Como .linea-pago-campos: el método en
su renglón, y las dos casillas se reparten el de abajo. */
@media (max-width: 560px) {
.eg-cabecera { flex-wrap: wrap; }
.eg-tasas { margin-left: 0; flex: 1 1 100%; }
.eg-linea { flex-wrap: wrap; }
.eg-linea select { flex: 1 1 100%; }
.eg-linea .campo-monto, .eg-linea .campo-monto.monto-bs { flex: 1 1 0; width: auto; }
}
/* (db/358, Jean 29/10) El Pago móvil Clínica: a quién se le paga y los
frecuentes. Copiado de Cobros (.eg-pm de db/360 y db/483), con los tokens. */
.eg-pm { margin: 10px 0 0; padding: 12px 14px; border: 1px solid hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .38);
border-left: 4px solid var(--secondary); border-radius: 10px; background: var(--secondary-soft); min-width: 0; }
.eg-pm legend { padding: 0 6px; font-weight: 700; font-size: .85rem; color: var(--primary); }
.eg-pm-ayuda { margin: 0 0 8px; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.eg-pm-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
.eg-pm-rejilla label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700;
color: var(--muted); min-width: 0; }
.eg-pm-ancho { grid-column: 1 / -1; }
.eg-pm input, .eg-pm select { font: inherit; font-size: .92rem; font-weight: 500; color: var(--ink); min-height: 40px;
padding: 8px 10px; border: 1.5px solid var(--field-border); border-radius: 9px; background: #fff;
width: 100%; min-width: 0; box-sizing: border-box; }
.eg-pm input:focus, .eg-pm select:focus { outline: none; border-color: var(--secondary-dark); }
.eg-pm-doc { display: flex; gap: 6px; }
.eg-pm-doc select { width: 64px; flex: none; }
@media (max-width: 560px) { .eg-pm-rejilla { grid-template-columns: 1fr; } }
.eg-pm-busca { position: relative; margin: 0 0 12px; }
.eg-pm-busca-lupa { position: absolute; left: 11px; top: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.eg-pm-busca-lupa svg { width: 16px; height: 16px; display: block; }
.eg-pm .eg-pm-busca input { padding-left: 34px; }
.eg-pm-busca-lista { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px;
list-style: none; max-height: 248px; overflow-y: auto; background: #fff; border: 1px solid var(--field-border);
border-radius: 10px; box-shadow: 0 8px 24px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .14); }
.eg-pm-busca-lista li[role="option"] { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
border-radius: 7px; cursor: pointer; color: var(--primary); }
.eg-pm-busca-lista li[role="option"] b { font-size: .88rem; font-weight: 700; }
.eg-pm-busca-lista li[role="option"] span { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.eg-pm-busca-lista li[role="option"]:hover,
.eg-pm-busca-lista li[aria-selected="true"] { background: var(--secondary-soft); }
.eg-pm-busca-nada { padding: 8px 10px; font-size: .84rem; color: var(--muted); }
.eg-pm-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.eg-pm-pie:empty { display: none; }
.eg-pm-ya { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--secondary-dark); }
.eg-pm-ya-ico svg { width: 16px; height: 16px; display: block; }
.eg-pm .eg-pm-quitar { min-height: 36px; padding: 4px 10px; border: 0; border-radius: 8px; background: none;
font: inherit; font-size: .82rem; font-weight: 600; color: var(--danger); text-decoration: underline;
text-underline-offset: 3px; cursor: pointer; }
.eg-pm .eg-pm-quitar:hover { background: var(--danger-soft); }
.eg-pm-guardar { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: .86rem;
font-weight: 600; color: var(--primary); cursor: pointer; }
.eg-pm .eg-pm-guardar input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
accent-color: var(--secondary-dark); flex: none; }
/* La casilla de dinero: el símbolo y el número dentro del mismo marco. El «$»
va delante y el «Bs» detrás, como se escribe aquí y como lo hace Cobros:
$101.825,50, pero 101.825,50 Bs. */
.campo-monto {
display: flex; align-items: center; gap: 3px;
background: var(--field-bg); border: 1.5px solid var(--field-border);
border-radius: 9px; padding: 0 8px; min-width: 0;
}
/* SIN ANILLO NINGUNO al entrar en la casilla (Jean, 19/09/2026, dos veces:
«al seleccionar sale como una burbuja que quiero eliminar»). No vale dejarlo
para `:focus-visible`: en una casilla de texto, el navegador lo considera
visible también cuando se entra con el ratón, así que la burbuja seguía
saliendo. La señal de dónde se está escribiendo la da el borde, que cambia
de color y engorda: se ve, y no monta un halo sobre lo de al lado. */
.campo-monto:focus-within {
border-color: var(--secondary-dark); border-width: 2px;
/* El borde engorda 0,5 px por lado: se le quita al relleno para que la
casilla no dé un salto al entrar en ella. */
padding: 0 7.5px;
}
/* ⚠️ Y LA SOMBRA TAMBIÉN, que es de donde salía la burbuja de verdad: el
`input:focus` de la casa dibuja un aro de 4 px, y aquí dentro el input no
tiene borde propio —lo pone el marco de fuera—, así que el aro flotaba por
encima. Es el mismo arreglo que ya llevaba `.cashea-monto`. */
.campo-monto input:focus, .campo-monto input:focus-visible {
outline: none; box-shadow: none; background: transparent;
}
.campo-monto .simbolo { color: var(--muted); font-size: 12px; font-weight: 600; flex: none; }
.campo-monto input {
border: none; background: none; outline: none; width: 100%; min-width: 0;
padding: 8px 0; text-align: right;
font-family: var(--cifra); font-variant-numeric: tabular-nums; color: var(--ink);
}
.campo-monto.monto-bs .simbolo { order: 2; padding-left: 2px; }
/* `hidden` no basta en un elemento con `display:flex`: el flex gana. Sin esto,
la casilla de bolívares seguía saliendo en las líneas pagadas en dólares. */
.campo-monto[hidden] { display: none; }
.campo-monto.monto-bs input { text-align: left; }
/* El total, en la misma línea de siempre: gris, con la cifra en negrita. */
.resumen-eg {
display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
margin-top: 10px; padding: 9px 11px; border-radius: 10px;
background: var(--fondo); font-family: var(--cifra); font-size: .86rem;
}
.resumen-eg:empty { display: none; }
/* Anotar un egreso necesita más sitio que un diálogo de «¿seguro?»: son cinco
campos y un desplegable con seis bolsas agrupadas. El diálogo normal mide
430 px y ahí los rótulos se partían en dos líneas (Jean, 19/09/2026: «haz la
ventana más grande»). `width` y no solo `max-width`, porque el ancho base
está puesto con `min()` y un max-width solo no lo levanta. */
.dialogo.dialogo-ancho { width: min(620px, 100%); max-width: 620px; }
/* --- LA LISTA DE EXÁMENES ---------------------------------------------------
Una ventana para MIRAR precios mientras se atiende el teléfono, así que lo
que manda es ver muchas líneas de una vez: la ventana crece hasta casi toda
la pantalla y solo la lista se desplaza, para que el buscador y los filtros
no se vayan de la vista al bajar.
--------------------------------------------------------------------------- */
.dialogo.dialogo-lista {
width: min(920px, 96vw); max-width: 920px;
display: flex; flex-direction: column; height: min(720px, 88vh);
}
/* Una sola línea de mandos: buscar, área, lista y moneda. El buscador se
queda con el sitio que sobra, porque es por donde se empieza. */
.lx-mandos { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.lx-buscar {
flex: 1 1 180px; min-width: 150px;
padding: 9px 12px; border: 1.5px solid var(--field-border); border-radius: 11px;
background: var(--field-bg); color: var(--ink); font-family: var(--font); font-size: .95rem;
}
.lx-buscar:focus { outline: none; border-color: var(--secondary-dark); border-width: 2px; box-shadow: none; }
.lx-campo { margin: 0; flex: 0 1 auto; min-width: 0; }
/* Los nombres de área de Nubelab son largos —«UNIDAD DE DIAGNOSTICO
MOLECULAR»— y estiraban el desplegable hasta partir la fila. */
.lx-campo select { max-width: 180px; }
/* El de la lista se queda con lo que necesite: cortar «PRECIOS REGULARES» a
«PRECIOS REGULA…» quitaba justo la palabra que distingue una lista de otra. */
#lxCampoLista select { max-width: none; }
/* LA MONEDA, ARRIBA Y APARTE (Jean, 19/09/2026: «esto lo puedes poner más
arriba, que no sea la misma fila de precios regulares»). Y tiene razón de
fondo: elegir lista es decir QUÉ precio, y elegir moneda es decir CÓMO se
lee. Puestas en la misma fila parecían dos mitades de lo mismo.
El hueco de la derecha es para la × de cerrar, que va flotando. */
.lx-cabecera {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; padding-right: 38px;
}
.lx-cabecera h2 { margin: 0; }
.lx-cabecera .pl-eleccion { flex: 0 0 auto; margin-top: 2px; }
.lx-cabecera .pl-eleccion button { white-space: nowrap; }
/* Solo la lista se desplaza: el buscador y los filtros no se van de la vista
al bajar, que es lo que se necesita para ir mirando precios. */
.lx-cuerpo { overflow-y: auto; flex: 1 1 auto; padding-right: 4px; margin-top: 12px; }
.bar-cabeza + .lx-cuerpo { margin-top: 0; }
.lx-pie { padding-top: 8px; }
.lista-titulo {
margin: 12px 0 6px; font-size: .78rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.lista-titulo:first-child { margin-top: 0; }
/* La fila: el nombre manda y el precio se lee en columna, a la derecha. */
.lista-precios li { padding: 8px 11px; }
.lista-precios li b.mono { font-size: .98rem; color: var(--primary); }
/* El tinte de cada lista, en TODAS las filas. Más claro que el de las
etiquetas (`--regular-soft` es un azul de pastilla, y repetido en sesenta
renglones cansa): aquí el color tiene que decir de qué lista es, no gritar.
El precio sí va en el color fuerte, que es lo que se viene a leer. */
.lx-cuerpo.lista-regular .lista-precios li { background: hsl(from #EAF1FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.lx-cuerpo.lista-regular .lista-precios li b.mono { color: var(--regular); }
.lx-cuerpo.lista-divisas .lista-precios li { background: var(--divisas-soft); }
.lx-cuerpo.lista-divisas .lista-precios li b.mono { color: var(--divisas); }
/* LO QUE TRAE UN PERFIL (Iralis, 25/09/2026: «que se pueda desplegar para ver
todo lo que trae ese perfil»). La fila entera es el botón; la flecha gira al
abrir. Lo de dentro va en blanco sobre el tinte de la lista, con sangría, para
que se lea como «dentro de» y no como filas sueltas con otro precio. */
.lista-precios li.lx-perfil { flex-wrap: wrap; }
.lx-abre {
display: flex; align-items: center; gap: 8px; min-width: 0;
background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
text-align: left; cursor: pointer;
}
.lx-abre:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.lx-flecha { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .15s ease; }
.lx-perfil.abierto .lx-flecha { transform: rotate(90deg); color: var(--primary); }
.lx-abre:hover .lx-flecha { color: var(--primary); }
.lx-dentro-caja { flex-basis: 100%; }
.lx-dentro-caja[hidden] { display: none; }
.lx-dentro {
list-style: none; margin: 8px 0 2px 24px; padding: 6px 10px;
background: rgba(255, 255, 255, .75); border-radius: 8px;
display: grid; gap: 2px;
}
.lx-cuerpo .lista-precios .lx-dentro li {
background: none; padding: 4px 0; border-radius: 0; gap: 8px;
font-size: .9rem; border-bottom: 1px solid var(--line);
}
.lx-cuerpo .lista-precios .lx-dentro li:last-child { border-bottom: 0; }
.lx-dentro li small { display: inline; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .lx-flecha { transition: none; } }
/* Los baremos: el nombre del laboratorio hace de título de su grupo, con
cuántos exámenes lleva al lado. Los días, a la derecha y en la tipografía de
cifras, porque es la columna que se recorre con la vista. */
/* DOS CAMINOS, uno debajo del otro y del mismo tamaño: ninguno es «el
botón pequeño». Cada uno dice en una línea qué se encuentra al pulsarlo,
porque «resumen» y «editar» suenan parecido cuando se va con prisa. */
/* El n.º de factura, al final de la fila de «contado / crédito»: se rellena
cuando ya se decidió cómo se cobra, y es opcional, así que no abre la fila. */
.campo-factura { margin: 0 0 0 auto; max-width: 240px; }
/* Al pie de la orden de trabajo va la primera de la fila y pegada a la
izquierda: se rellena antes de pulsar Guardar, no después. */
.facturacion-pie .campo-factura { margin: 0 auto 0 0; max-width: 200px; }
.campo-factura .apunte { font-weight: 400; text-transform: none; letter-spacing: 0; }
.elegir-camino { display: grid; gap: 10px; margin-top: 14px; }
.camino {
display: grid; gap: 3px; text-align: left; cursor: pointer;
padding: 13px 15px; border-radius: 13px;
border: 1.5px solid var(--line); background: #fff; color: var(--ink);
font-family: var(--font); transition: border-color .12s ease, background .12s ease;
}
.camino b { font-size: 1rem; color: var(--primary); }
.camino small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.camino:hover, .camino:focus-visible {
border-color: var(--secondary); background: var(--fondo); outline: none;
}
.camino:focus-visible { box-shadow: 0 0 0 3px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .28); }
/* Los baremos van en UNA lista, sin carpetas: cada fila dice su laboratorio en
su columna, así que agruparlas solo añadía un clic (Jean, 19/09/2026). */
.bar-lista li { padding: 8px 11px; }
/* TRES COLUMNAS: el examen, a qué laboratorio va y cuánto tarda (Jean,
19/09/2026: «que cada examen tenga una columna que diga de qué laboratorio
es»). Está también en el título del grupo, pero al buscar un examen suelto
la fila tiene que decirlo sola: es justo el dato que se va a repetir por
teléfono. Anchos fijos para que las tres columnas queden en columna de
verdad, no escalonadas. */
.bar-lab {
flex: 0 0 132px; text-align: right;
font-size: .78rem; font-weight: 700; letter-spacing: .02em;
color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Desde la 133 la columna lleva la pastilla de color del laboratorio, no el
nombre suelto; en la cabecera sigue siendo un rótulo. */
.bar-lista .bar-lab { display: flex; justify-content: flex-end; }
.bar-dias { flex: 0 0 116px; text-align: right; color: var(--ink); font-size: .92rem; }
.bar-dias .mono { color: var(--primary); font-size: .98rem; }
/* La cabecera de las columnas, una sola vez y fuera de la zona que se
desplaza: repetirla en cada grupo sería ruido. */
.bar-cabeza {
display: flex; align-items: center; gap: 10px;
padding: 10px 11px 6px; margin-top: 12px;
border-bottom: 1px solid var(--line);
font-size: .72rem; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted);
}
.bar-cabeza .crece { flex: 1; }
/* Los rótulos encima de sus valores: la cabecera descuenta lo mismo que las filas
(11 del li + 4 de .lx-cuerpo + el hueco de la barra, reservado en las dos) */
.bar-cabeza { padding-right: 15px; overflow: hidden; scrollbar-gutter: stable; }
#barCuerpo { scrollbar-gutter: stable; }
/* El botón de la línea de ordenar, empujado al extremo. */
.ordenar .lx-abrir { margin-left: auto; }
.dialogo.dialogo-ancho select { font-size: .98rem; }
/* El egreso se escribe de arriba abajo: en qué se gastó (una línea entera,
que los conceptos son largos), luego de dónde salió y cuánto, y al final la
nota. La rejilla de las fichas metía tres campos por fila y el desplegable
de la forma salía cortado a la mitad. */
.eg-rejilla {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px;
}
.eg-rejilla .ancho2 { grid-column: 1 / -1; }
.eg-rejilla .campo { margin: 0; min-width: 0; }
.eg-rejilla select, .eg-rejilla input { width: 100%; }
@media (max-width: 560px) { .eg-rejilla { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
.caja-cierre-fila { flex-direction: column; align-items: stretch; }
/* En el teléfono los botones del cierre ocupan la fila entera: son los dos
que terminan el día y se pulsan con el pulgar. */
.caja-cierre-pie { justify-content: stretch; }
.caja-cierre-pie .btn { flex: 1 1 100%; }
.caja-cierre-nota { max-width: none; }
.caja-tabla input.caja-contado { width: 88px; }
/* Las tres del punto se encogen con el resto, pero cada una sigue llenando
su hueco: si no, la casilla queda más estrecha que su propio rótulo. */
.caja-parte { width: 100px; }
.caja-parte input.caja-contado { width: 100%; }
}
/* Una aclaración debajo de una lista, separada de ella: en la caja del día
explica qué parte de lo que salió no estaba en la gaveta. */
.apunte-pie { margin: 10px 2px 0; }
/* Las categorías de egreso (db/114) reusan la fila de las formas de pago, pero
solo tienen dos cosas: el nombre y el interruptor. La rejilla de las formas
está hecha para cuatro columnas y dejaba el nombre en un dedo de ancho. */
.cfg-forma.cfg-categoria {
display: flex; align-items: center; gap: 10px;
}
.cfg-forma.cfg-categoria input[data-cat-k="nombre"] { flex: 1; min-width: 0; }
/* (db/184) A cuál de Contabilidad equivale: al lado del nombre, más estrecho,
y en el teléfono baja de renglón en vez de aplastar el nombre. */
.cfg-forma.cfg-categoria { flex-wrap: wrap; }
.cfg-forma.cfg-categoria select.cfg-cat-contab {
flex: 0 1 240px; min-width: 160px;
font-family: var(--font); font-size: .84rem; color: var(--ink); padding: 6px 8px;
}
.cfg-forma.cfg-categoria .cfg-clave { flex: none; }
/* ===========================================================================
POR RESOLVER: emparejar el baremo con el catálogo (db/132)
Iralis, 19/09/2026: «me montas algo dinámico para hacerlo fácil el lunes».
La fila es una pregunta con sus respuestas al lado, y la respuesta más
probable va PRIMERO y ya escrita: la mayoría se contesta sin leer más allá
del primer botón. Solo si esa no sirve se despliega el buscador.
=========================================================================== */
.pr-cuenta {
flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
padding: 6px 12px; border-radius: 999px;
background: var(--secondary-soft); color: var(--secondary-dark);
font-size: .86rem; white-space: nowrap;
}
.pr-cuenta b { font-family: var(--cifra); font-weight: 800; }
.pr-titulo {
margin: 20px 0 2px; font-size: .95rem; color: var(--primary);
padding-top: 14px; border-top: 1px solid var(--line);
}
.lx-cuerpo > .pr-titulo:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.pr-explica { margin: 0 0 10px; }
.dialogo p.pr-explica { margin-bottom: 10px; } /* `.dialogo p` le quitaba el margen: iba pegada a la lista */
.pr-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-fila {
border: 1px solid var(--line); border-radius: 10px;
background: #fff; padding: 9px 11px;
}
.pr-fila.abierta { border-color: var(--secondary); background: var(--fondo); }
.pr-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-quien { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pr-nombre { font-weight: 600; color: var(--ink); line-height: 1.25; }
.pr-quien .apunte { font-size: .8rem; }
.pr-acciones { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* El botón de la propuesta se distingue de los demás: es el que se va a
pulsar nueve de cada diez veces. */
/* El nombre propuesto se lee ENTERO. Cortado con puntos suspensivos
(«¿Es "HERPES VIRUS 2 IgM CUANTITAT…»?) el botón pide justo lo que no
enseña; que ocupe dos renglones es más barato que una equivocación. */
.pr-sugerido, .pr-quiza {
max-width: 34ch; white-space: normal; text-align: left; line-height: 1.25;
}
.pr-sugerido {
background: var(--secondary-soft); border-color: var(--field-border);
color: var(--secondary-dark); font-weight: 700;
}
.pr-sugerido:hover { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.pr-no { color: var(--muted); }
.pr-elegir { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.pr-buscar {
width: 100%; padding: 7px 10px; border-radius: 8px;
border: 1px solid var(--field-border); background: #fff; font-size: .95rem;
}
.pr-buscar:focus { outline: none; border-color: var(--secondary-dark); border-width: 2px; }
.pr-opciones { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.pr-opcion {
display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
background: #fff; cursor: pointer; font: inherit; color: var(--ink);
}
.pr-opcion:hover, .pr-opcion:focus-visible {
border-color: var(--secondary); background: var(--secondary-soft); outline: none;
}
.pr-op-nombre { flex: 1 1 auto; min-width: 0; }
.pr-op-area { flex: 0 0 auto; font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.pr-op-codigo { flex: 0 0 auto; font-size: .82rem; color: var(--muted); }
.pr-hecho {
margin: 0; padding: 12px; border-radius: 10px;
background: var(--secondary-soft); color: var(--secondary-dark); font-weight: 600;
}
/* La propuesta DUDOSA no se viste de certeza: lleva interrogación y el color
de un botón cualquiera. «PCR TOXOPLASMA» se parece muchísimo a «TEST AVIDEZ
TOXOPLASMA» y no son lo mismo; el que contesta tiene que leerla, no
pulsarla de carrerilla. */
.pr-quiza { color: var(--muted); }
.pr-quiza:hover { color: var(--ink); border-color: var(--secondary); }
/* ===========================================================================
EL COLOR DE CADA LABORATORIO DE FUERA (db/133)
Iralis, 19/09/2026: «vamos a definir colores para esos laboratorios y las
pruebas que referimos a ellos saldrán de esos colores». Son los mismos de
su Excel: MAS SALUD azul, NEOGEN verde, UNILAB morado.
EL AZUL YA ERA EL DE «REFERIDA» —el estado, igual para los tres—. Ahora es
el del DESTINO, y como MAS SALUD se queda en azul, lo de siempre se ve
igual que ayer; los otros dos se despegan.
Cada clase solo define dos variables, y todo lo demás las usa. Así el color
viaja solo: se lo pone el contenedor y lo heredan la pastilla, el borde y
la cabecera del examen.
Contraste medido sobre su propio fondo suave (mínimo de la casa 4,5):
azul 7,3 · verde 5,5 · morado 6,8 · turquesa 5,4
=========================================================================== */
/* Tres tonos por laboratorio y no dos: la letra (`--ref`), el fondo suave
(`--ref-soft`) y el ARO (`--ref-aro`), que es el mismo color a media asta.
Iralis, 19/09/2026: «los bordes no se los quites en su totalidad, pero
ponlos más claritos, porque se marcan mucho». El aro tiene que decir «este
no es como los demás» de reojo, no gritarlo: con quince etiquetas en una
fila, quince aros a todo color convierten la bandeja en una reja. */
.ref-azul { --ref: hsl(from #1D4E89 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --ref-soft: hsl(from #DCEAF8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --ref-aro: hsl(from #A8C4E6 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.ref-verde { --ref: #2F6B2F; --ref-soft: #E1F0DA; --ref-aro: #AFD0A7; }
.ref-morado { --ref: #5B3D91; --ref-soft: #EDE4F7; --ref-aro: #C7B3E2; }
.ref-turquesa { --ref: var(--secondary-dark); --ref-soft: var(--secondary-soft); --ref-aro: hsl(from #A6D8D9 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.ref-naranja { --ref: #9A5410; --ref-soft: #FBEBDA; --ref-aro: #E2BC94; }
.ref-rosa { --ref: #97306A; --ref-soft: #FAE3F0; --ref-aro: #DEAAC8; }
/* 205 · NEOGEN: el verde de antes se confundía con «Validado» (Iralis, 25/09/2026) */
.ref-oliva { --ref: #66701A; --ref-soft: #F0F2D8; --ref-aro: #CFD49A; }
.ref-neutro { --ref: var(--neutro); --ref-soft: var(--neutro-soft); --ref-aro: #C0C9D4; }
/* La pastilla con el NOMBRE dentro. El color agrupa de un vistazo; el nombre
es el que informa. Quien no distinga verde de morado lo lee igual. */
.pastilla-lab {
display: inline-block; padding: 2px 9px; border-radius: 999px;
background: var(--ref-soft, var(--neutro-soft)); color: var(--ref, var(--neutro));
font-size: .74rem; font-weight: 800; letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* La de «se procesa aquí» lleva su punto delante: no es un destino. */
.pastilla-lab.aqui::before { content: '● '; opacity: .7; }
/* Los botones que eligen laboratorio llevan SU color, el mismo con el que va a
salir el examen después (db/133). Se elige por el color que se va a ver. */
.btn.btn-lab {
background: var(--ref-soft); border-color: var(--ref-soft); color: var(--ref);
font-weight: 700;
}
.btn.btn-lab:hover, .btn.btn-lab:focus-visible {
background: var(--ref); border-color: var(--ref); color: #fff;
}
/* El lápiz de la lista de exámenes es un BOTÓN, no un adorno: abre el examen
igual que pulsar su nombre (Iralis, 20/09/2026). Hay que quitarle la
vestimenta que trae de fábrica para que siga viéndose como el de antes, y
darle su estado al pasar por encima, que es lo que faltaba para que se
notara que se puede pulsar. */
button.marca {
border: none; background: none; padding: 0; font: inherit; cursor: pointer;
}
.cfg-fila-examen button.marca:hover,
.cfg-fila-examen button.marca:focus-visible {
background: var(--secondary-soft); color: var(--secondary-dark); outline: none;
}
.cfg-fila-examen button.marca:focus-visible { box-shadow: 0 0 0 2px var(--secondary); }
/* ===========================================================================
LA TABLA DE ÓRDENES DE LA CAJA Y DE INGRESOS (135)
Iralis, 20/09/2026: «que la hora esté debajo de la fecha para ahorrar
espacio, y al lado de formas de pago una columna que quepan 4 dígitos que
diga N.º Factura».
=========================================================================== */
/* La fecha y su hora, una encima de otra. Se gana ANCHO, que es lo que falta
en esta tabla; el alto ya lo fija la casilla del paciente, que lleva el
nombre y la cédula en dos renglones. */
.ing-tabla td.fecha { line-height: 1.25; }
.ing-tabla td.fecha small { color: var(--muted); font-size: .92em; }
/* El número de factura: cuatro dígitos y su margen, ni un milímetro más.
El ANCHO lo mandan los dígitos, no el título; por eso el título va partido
en dos renglones en el HTML. Y la tipografía de las cifras es solo para la
casilla, no para la cabecera, que tiene la suya y la comparte con las demás. */
.ing-tabla .ing-factura { width: 7ch; text-align: right; }
.ing-tabla th.ing-factura { line-height: 1.15; }
.ing-tabla td.ing-factura {
font-family: var(--cifra); font-variant-numeric: tabular-nums; color: var(--ink);
}
/* ===========================================================================
EL DETALLE DEL COBRO (db/136)
Iralis, 20/09/2026: «un botón que diga Ver, para ver el resumen de su pago
bien detallado en una ventana». Se mira y se cierra: aquí no hay un botón
que cambie nada.
=========================================================================== */
/* La columna del botón: lo justo para la palabra, pegada al borde derecho. */
.ing-tabla .dc-ver { width: 1%; text-align: right; padding-left: 4px; }
.ing-tabla td.dc-ver .btn { padding: 3px 11px; font-size: .78rem; }
/* El rótulo de la cabecera existe para quien navega con lector de pantalla:
una columna sin nombre no se puede anunciar. A la vista no hace falta. */
.solo-lectores {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dc-factura {
flex: 0 0 auto; text-align: right; padding: 6px 14px; border-radius: 10px;
background: var(--secondary-soft); color: var(--secondary-dark);
}
.dc-factura span { display: block; font-size: .68rem; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.dc-factura b { font-family: var(--cifra); font-size: 1.05rem; }
.dc-factura.sin { background: var(--neutro-soft); color: var(--muted); }
.dc-factura.sin b { font-size: .9rem; font-weight: 600; }
/* Las cuatro cifras de arriba: lo que se cobró, de un vistazo y en columnas,
porque es la primera pregunta y no debería hacer falta leer una tabla. */
.dc-cifras {
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px; margin-bottom: 4px;
}
.dc-cifra {
padding: 9px 12px; border-radius: 10px; background: var(--fondo);
display: flex; flex-direction: column; gap: 2px;
}
.dc-cifra span { font-size: .7rem; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted); }
.dc-cifra b { font-family: var(--cifra); font-size: 1.1rem; color: var(--ink); }
.dc-cifra.buena b { color: var(--success); }
.dc-cifra.mala b { color: var(--danger); }
.dc-titulo { margin: 18px 0 8px; font-size: .95rem; color: var(--primary); }
.dc-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dc-tabla th, .dc-tabla td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; }
.dc-tabla thead th {
font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--muted); border-bottom: 1.5px solid var(--line);
}
.dc-tabla .num { text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.dc-tabla tfoot th { background: var(--secondary-soft); color: var(--ink);
font-size: .85rem; text-transform: none; letter-spacing: 0; }
.dc-tabla tr.dc-devolucion td { background: var(--danger-soft); }
.dc-tabla tr.dc-anulado td { opacity: .5; text-decoration: line-through; }
.dc-aviso, .dialogo p.dc-aviso { margin-top: 8px; }
/* El detalle del cobro mide lo que trae, como el cobro junto: con un pago y
un examen quedaba un hueco blanco hasta «Cerrar». */
.dialogo.dialogo-lista.dc { height: auto; max-height: 88vh; }
.dc-lineas li { padding: 6px 10px; }
/* ===========================================================================
UN SOLO COBRO PARA VARIOS PACIENTES (db/137 a 141)
Iralis, 20/09/2026. La bolsa de pacientes en «Nueva orden» y la ventana
donde se cobra todo de una vez.
=========================================================================== */
/* La bolsa: solo sale cuando hay más de uno, así que puede permitirse ocupar
sitio arriba del todo. Es la lista de lo que se va a crear. */
.grupo-cobro { border-color: var(--secondary); }
.gc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gc-fila {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 11px; border-radius: 10px; background: var(--fondo);
border: 1.5px solid transparent;
}
.gc-fila.paga { border-color: var(--secondary); background: var(--secondary-soft); }
.gc-fila.en-pantalla { border-style: dashed; border-color: var(--line); }
.gc-paga { display: flex; align-items: center; gap: 5px; flex: none; cursor: pointer; }
.gc-paga span { font-size: .7rem; font-weight: 800; letter-spacing: .05em;
text-transform: uppercase; color: var(--muted); }
.gc-fila.paga .gc-paga span { color: var(--secondary-dark); }
.gc-quien { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gc-total { flex: none; font-size: 1rem; }
.gc-marca {
flex: none; font-size: .7rem; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted);
}
.gc-botones { flex: none; display: flex; gap: 5px; }
.gc-pie {
display: flex; align-items: center; gap: 12px; margin-top: 10px;
padding-top: 10px; border-top: 1px solid var(--line);
}
.gc-pie .apunte { flex: 1; }
.gc-suma { font-size: 1.15rem; color: var(--primary); }
/* El aviso que sustituye a la fila de cobro cuando hay varios pacientes. */
.cobro-en-orden.gc-aviso { background: var(--secondary-soft); border-color: var(--secondary); }
/* La ventana del cobro junto */
/* LA VENTANA, DEL ALTO DE LO QUE LLEVA DENTRO (Iralis, 20/09/2026: «la ventana
completa la podemos hacer mas pequena»). `.dialogo-lista` la clava en 720px
porque alla dentro va la lista de examenes, que es larga y se desplaza. Un
cobro de dos o tres ordenes no llena ni la mitad, y lo que sobraba era un
palmo de blanco entre la ultima fila y los botones. Ahora crece con lo que
tiene y solo se desplaza cuando de verdad no cabe.
`min-height: 0` es lo que deja que el cuerpo se desplace dentro del tope:
sin eso un flex no se encoge por debajo de su contenido y el desbordamiento
se lo come la ventana entera. */
/* 760 y no 680 (20/09/2026): la fila de pago gano el boton naranja de
verificar el pago movil, y con 680 el metodo se quedaba en «Pago…» —que no
distingue «Pago movil» de «Punto de venta»— o la cifra en bolivares se
cortaba. Es el ancho MINIMO en el que caben las cinco cosas del renglon sin
recortar ninguna. */
.dialogo.dialogo-lista.cj { height: auto; max-height: 88vh; width: min(760px, 96vw); }
.dialogo.cj .lx-cuerpo { min-height: 0; }
.cj-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cj-tabla th, .cj-tabla td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: left; }
.cj-tabla thead th {
font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--muted);
}
.cj-tabla .num { text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.cj-tabla tr.paga td { background: var(--secondary-soft); }
.cj-tabla tr.anulada td { opacity: .5; text-decoration: line-through; }
.cj-tabla td.debe, .cj-tabla th.debe { color: var(--danger); font-weight: 700; }
.cj-tabla tfoot th { background: var(--fondo); text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--ink); }
/* EL TOTAL, PEGADO A LOS NOMBRES Y NO EN LA OTRA PUNTA (Iralis, 20/09/2026:
«la columna de total ponla alli donde te puse la raya roja, y asi puedes
hacer que la ventana sea mas pequena»). Una tabla al 100% le regala todo el
hueco que sobra a la columna mas ancha —la de pacientes—, y la cifra se iba
a la orilla derecha, a un palmo del nombre al que pertenece. Esta columna
vacia se queda con el hueco: las demas se encogen a lo que ocupan y el
total queda donde la vista ya estaba. Las bandas de color siguen llegando
al borde, que es lo que hace que cada fila se lea como una sola. */
/* El 12% es medido, no elegido: es lo que deja la cifra del total donde
Iralis la pidio —a un palmo del nombre, no en la orilla— sin apretar la
columna de pacientes. Con el nombre mas largo de la casa, MARIA GABRIELA
CASTELLANO RODRIGUEZ, la fila sigue cabiendo en un renglon. */
.cj-tabla .cj-relleno { width: 12%; padding: 0; }
.cj-tabla td.mono, .cj-tabla thead th:first-child { white-space: nowrap; }
.cj-marca {
font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--secondary-dark); background: #fff; padding: 1px 6px; border-radius: 999px;
}
/* EN COLUMNA, no en fila (20/09/2026). Aqui habia UNA fila de pago y todo
cabia de lado; ahora hay una fila por metodo, el boton de anadir y la
barra, y cada cosa va en su renglon. Con el `flex-wrap` de antes las filas
se ponian una al lado de la otra y el rotulo se colaba en medio. */
.cj-cobrar {
display: flex; flex-direction: column; align-items: stretch; gap: 10px;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.cj-cobrar .campo { margin: 0; }
.cj-cobrar .apunte { margin: 0; }
.cj-cobrar .bloque-cashea { margin: 0; }
.cj-cobrar .pm-linea { margin: 0; }
/* La equis de quitar un metodo, como en la orden de un solo paciente. */
.cj-cobrar .quitar {
border: none; background: none; cursor: pointer; color: var(--muted);
display: grid; place-items: center; padding: 2px; flex: none;
}
.cj-cobrar .quitar:hover { color: var(--danger); }
.cj-cobrar .quitar svg { width: 17px; height: 17px; }
.cj-cobrar .btn-otro-pago, .cj-cobrar #cjCobrar { align-self: flex-start; }
.cj-cobrar .resumen-pago { margin-top: 2px; }
/* 150 · CUANTO VA EN DIVISAS Y CUANTO EN BOLIVARES. Desde el 20/09/2026 van
en el PIE de la tabla, en el mismo renglon que el total y con las monedas a
la izquierda: asi las tres cifras que hay que mirar antes de cobrar se leen
de un tiron, y el total cae debajo de su columna. */
.cj-monedas { display: inline-flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.cj-moneda { display: inline-flex; align-items: center; gap: 7px; }
.cj-moneda b { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-weight: 700; }
/* Los pagos anotados y todavia sin registrar. Se reusa `.cobro-pago` de la
orden nueva —es la misma lista y tiene que leerse igual—; aqui solo el
sitio y el rotulo de arriba. */
.cj-anotados { margin-top: 14px; }
.cj-anotados > .apunte { margin: 0 0 6px; }
.cj-cobrar #cjCobrar { flex: none; }
/* Mientras falte algo por anotar, el cobro no se registra: el aviso va en
ambar y no en gris, porque no informa, frena. */
/* `hidden` no basta con `display:flex`: el flex gana y el aviso seguia
saliendo con la cuenta ya cuadrada. */
.cj-falta[hidden], .dialogo p.cj-falta[hidden] { display: none; }
.cj-falta, .dialogo p.cj-falta {
margin: 0; display: flex; align-items: center; gap: 8px;
padding: 9px 12px; border-radius: 10px;
background: var(--warn-soft); color: var(--warn);
font-size: .88rem; font-weight: 600;
}
.cj-falta svg { width: 18px; height: 18px; flex: none; }
.cj-listo, .dialogo p.cj-listo {
margin: 16px 0 0; padding: 12px; border-radius: 10px;
background: var(--success-soft); color: var(--success); font-weight: 700;
display: flex; align-items: center; gap: 8px;
}
/* El visto bueno, del tamano de una letra. Sin esto el SVG se estiraba a lo
ancho de la ventana —es flex y no trae medidas propias— y el aviso de
«cobrado entero» salia con un garabato de media pantalla. */
.cj-listo svg { width: 18px; height: 18px; flex: none; }
/* EL AVISO DE QUE TODAVIA NO HAY ORDENES (db/152). Es la tercera vez que
muerde lo mismo: los iconos de `comun.js` no traen medidas propias, asi
que dentro de un flex el SVG se estira a lo ancho de la ventana. Aqui
salia un triangulo de media pantalla encima de la tabla. */
.cj-aviso-borrador, .dialogo p.cj-aviso-borrador {
margin: 6px 0 0; display: flex; align-items: center; gap: 8px;
padding: 8px 11px; border-radius: 10px;
background: var(--warn-soft); color: var(--warn);
font-size: .84rem; font-weight: 600;
}
.cj-aviso-borrador svg { width: 17px; height: 17px; flex: none; }
/* Y otra vez lo mismo: `display: flex` le gana a [hidden]. Sin esta linea
el aviso seguia puesto despues de cobrar, diciendo que las ordenes no
existen justo encima de sus numeros recien estrenados. */
.cj-aviso-borrador[hidden], .dialogo p.cj-aviso-borrador[hidden] { display: none; }
/* EL N.º DE FACTURA DENTRO DE LA VENTANA (22/09/2026). A la derecha de quién
paga, del ancho de un número de talonario. Cuando Cashea lo pide se pinta
en ámbar, el color de «falta algo», y se apaga en cuanto se escribe. */
.cj-factura { flex: 0 0 170px; }
.cj-factura.falta > span { color: var(--warn); }
.cj-factura.falta input { border-color: var(--warn); background: var(--warn-soft); }
@media (max-width: 560px) {
.cj .lx-cabecera { flex-wrap: wrap; }
.cj-factura { flex: 1 1 100%; max-width: none; margin: 0; }
}
.cj-trozos { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--fondo); }
.cj-trozos .apunte { margin: 0 0 6px; }
.cj-trozos li { padding: 4px 0; }
/* 155 · «De eso, dejado a la clinica». Va pegado debajo de «Cobrado» y en
gris: no es una cifra mas de la cuenta, es la explicacion de por que la
de arriba pasa del total. */
.dc-dejado { color: var(--muted); font-size: .85rem; }
.dc-dejado span:last-child { font-variant-numeric: tabular-nums; }
/* «Se cobró junto con…» (db/142). Va arriba, antes de las cifras, porque
cambia cómo se lee todo lo de abajo: ese dinero no lo puso este paciente, y
quien vaya a devolver tiene que saberlo antes de tocar nada. */
.dc-junto, .dialogo p.dc-junto {
margin: 10px 0 0; padding: 8px 12px; border-radius: 10px;
background: var(--secondary-soft); color: var(--secondary-dark);
font-size: .86rem;
}
.dc-junto b { font-weight: 800; }
/* El boton para volver al cobro entero, en la misma linea del aviso: es
donde esta el comprobante de las N ordenes y, cerrada aquella ventana,
no habia ninguna otra puerta para volver a ella. */
.dc-junto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-junto .btn { margin-left: auto; }
/* ---------------------------------------------------------------------------
DEVOLVER DINERO, EN SU BOTÓN (20/09/2026)
Iralis: «quita el modelo de cobro de antes de todos lados». En la orden de
trabajo el cobro son ahora las mismas filas de la orden nueva, así que el
renglón «Transacción · Pago / Devolución» que había encima sobraba. La
devolución no desaparece —se usa, 10 veces en dos semanas— pero se pide
aparte: un botón discreto que abre el cuadro de siempre.
--------------------------------------------------------------------------- */
.dev-abrir { margin-top: 10px; color: var(--danger); border-color: var(--line); }
.dev-abrir svg { width: 15px; height: 15px; }
.dev-abrir:hover { border-color: var(--danger); background: var(--danger-soft); }
/* Con el cuadro abierto, el rótulo de arriba dice qué se está haciendo y el
«Cancelar» lo cierra: sin los botones de radio, volverse atrás tenía que
seguir siendo posible de un vistazo. */
.cobro-form .cobro-modo .btn { margin-left: auto; }
/* ---------------------------------------------------------------------------
VERIFICAR EL PAGO MÓVIL, ABAJO Y EN NARANJA (20/09/2026)
Iralis: «este botón de verificar pago móvil azul con ese texto quítalo, y
que el botón salga en la misma fila de registrar el cobro, al final, a mano
izquierda; ponlo del mismo color de la foto que te envié».
Estaba dentro de una franja ámbar que ocupaba un renglón entero y partía en
dos la lista de formas de pago. Y era azul, el color de la acción principal
de la pantalla, cuando no lo es: es un paso que FALTA antes de cobrar. El
naranja es el de «pendiente» de la casa, el mismo de las pastillas de la
bandeja.
Blanco sobre #C25E08 da 4,86 sobre 1, por encima del 4,5 que hace falta
(#DC9230, el token tal cual, se queda en 2,6 y no vale para letra blanca).
--------------------------------------------------------------------------- */
/* EL NARANJA ES EL QUE ELLA MANDÓ EN UNA FOTO (Iralis, 20/09/2026: «ponlo más
anaranjado bonito, así como este»), con su letra blanca. Es el tercero que
probamos: primero uno oscuro (#C25E08), que le pareció apagado; luego uno
claro con letra marrón, que tampoco; este es el de la foto.
LO QUE HAY QUE SABER: blanco sobre #E8730C da 3,0 de contraste y la regla de
la casa es 4,5. Se queda porque lo eligió ella a propósito, sobre este botón
concreto —una palabra corta, en negrita, dentro de su fila— y no sobre un
texto que haya que leer. Si algún día cuesta leerlo en la pantalla del
mesón, #C25E08 tiene el mismo tono y sí llega a 4,86: se cambia una línea. */
.btn.btn-verificar-pm {
background: #E8730C; border-color: #E8730C; color: #fff; font-weight: 700;
}
.btn.btn-verificar-pm:hover:not(:disabled) { background: #D26608; border-color: #D26608; color: #fff; }
.btn.btn-verificar-pm svg { width: 15px; height: 15px; }
/* EN LA MISMA FILA DEL PAGO MÓVIL Y DEL ALTO DE LAS CASILLAS (Iralis,
20/09/2026: «pon el botón de verificar pago móvil al lado de la fila del
pago móvil, y que sea del mismo tamaño verticalmente que los que van los
montos, pero ponlo allí en la misma fila»).
Y al rato, viéndolo puesto: «puedes hacer que el botón sea un poquito más
pequeño, que se vea bien allí». Así que no llega al alto de la fila: queda
centrado, un par de milímetros por dentro. El color se decidió aparte, con
una foto suya (ver `.btn.btn-verificar-pm`, más arriba). */
.btn.btn-verificar-pm.en-fila {
align-self: center; height: 32px; padding: 0 11px;
font-size: .82rem; white-space: nowrap; flex: none;
}
.btn.btn-verificar-pm[hidden] { display: none; }
/* YA COMPROBADO POR EL BANCO: VERDE (Iralis, 21/09/2026: «me gustaria que el
boton cambie de color a verde y diga pago movil verificado como sale en la
app de cobros»). El verde es el mismo de Cobros —#1E8E5A, su `.validado`—
y aqui coincide con `--success`, asi que se usa el token de la casa.
El boton ya no se esconde al verificar: se queda diciendo que esta hecho,
y pulsarlo vuelve a abrir la ventana del banco por si hay que cambiarlo. */
.btn.btn-verificar-pm.validado {
background: var(--success); border-color: var(--success); color: #fff;
}
.btn.btn-verificar-pm.validado:hover:not(:disabled) {
background: #19754A; border-color: #19754A; color: #fff;
}
/* DÓNDE VA CADA BOTÓN EN LA FILA DE ABAJO (Iralis, 20/09/2026: «pon el botón
de guardar y cobrar de primero pero a mano derecha, y el de agregar otro
paciente de segundo, y poner en espera después, y verificar pago móvil queda
al final a mano izquierda como está»).
O sea la fila queda así:
[Verificar pago móvil] ······ [Guardar y cobrar] [Otro paciente] [En espera]
Lo que falta por hacer, solo en su esquina izquierda; lo que termina la
orden, junto y a la derecha, con el botón principal el primero de su grupo.
`margin-left: auto` en «Guardar» empuja a ese grupo hasta el borde, y los
avisos («Falta elegir al paciente») van antes, pegados a la izquierda, que
es donde se leen. */
/* El empujon lo lleva el PRIMERO del grupo de la derecha. En la orden nueva es
«Cerrar»; en la orden de trabajo, «Guardar». Los dos, por si acaso: el que no
esté en esa fila no pinta nada. */
.facturacion-pie #ordCerrar,
.facturacion-pie.edicion #ordGuardar { margin-left: auto; }
.dialogo-botones .btn-verificar-pm { margin-right: auto; }
/* ---------------------------------------------------------------------------
CON QUÉ SE PAGÓ CADA ORDEN, DEBAJO DE SU FILA (20/09/2026)
Iralis: «acá debería enseñarte cómo se paga cada cosa, los bolívares y los
dólares exactos que se pagaron por cada orden». Va colgando de la fila de su
orden —sangrado bajo la columna del paciente— para que se lea como parte de
ella y no como una lista aparte.
--------------------------------------------------------------------------- */
.cj-pagos-de > td { padding-top: 0; border-top: 0; }
.cj-pagos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; }
.cj-pagos li {
display: flex; align-items: baseline; gap: 8px;
font-size: .82rem; color: var(--muted);
}
.cj-pagos .cj-pago-forma { flex: 1 1 auto; }
.cj-pagos b { color: var(--ink); font-weight: 700; }
.cj-pagos li.anulado { opacity: .55; text-decoration: line-through; }
.cj-pagos li.anulado .tacha { text-decoration: none; color: var(--danger); font-weight: 700; }
/* ===========================================================================
199 · ENVÍOS A LOS LABORATORIOS (fases 2 y 3 de auditoria/PLAN-REFERIDOS.md)
=========================================================================== */
/* En la tarjeta del examen: la pastilla «Por enviar · UNILAB» es un botón
(se pulsa para cambiar el laboratorio o hacerlo aquí). Punteada: todavía
no se fue; cuando se envía pasa a la pastilla llena de siempre. */
button.pastilla-lab.por-enviar {
cursor: pointer; font: inherit; font-size: .74rem; font-weight: 800;
border: 1.5px dashed var(--ref-aro, var(--line)); background: #fff; color: var(--ref, var(--neutro));
}
button.pastilla-lab.por-enviar:hover { filter: brightness(.96); }
button.pastilla-lab.por-enviar:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.examen-remesa {
margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .86rem;
background: var(--info-soft); color: var(--ink);
}
.res-dx { margin-top: 4px; }
/* La casilla Diagnóstico, al lado de Observaciones en la orden */
.cifras-apuntes .campo-dx { flex: 0 1 220px; min-width: 150px; } /* (07/10) que no se encoja: baja de renglón */
.cifras-apuntes .campo-dx textarea { width: 100%; }
/* La ventana de Envíos */
.dialogo.envios .env-pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
/* Las pestañas y, a la derecha, «Desmarcar todo» */
.dialogo.envios .env-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dialogo.envios .env-barra #envTodos { flex: none; }
.env-pestana {
display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
font: inherit; font-weight: 700; font-size: .88rem; color: var(--ink);
}
.env-pestana.activa { background: var(--primary); border-color: var(--primary); color: #fff; }
.env-cuantos {
min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
font-family: var(--cifra); font-size: .78rem; background: var(--fondo); color: var(--ink);
}
.env-pestana.activa .env-cuantos { background: rgba(255,255,255,.2); color: #fff; }
.env-orden { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.env-orden header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.env-num { font-family: var(--cifra); color: var(--primary); }
.env-fecha { font-family: var(--cifra); font-size: .86rem; }
.env-pac { color: var(--primary); }
.env-dx { margin: 6px 0 0 30px; font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
/* La casilla del diagnóstico (uno por paciente): se escribe aquí antes de enviar */
.env-dx-campo { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; }
.env-dx-campo input {
flex: 1; min-width: 0; font: inherit; color: var(--ink); padding: 5px 9px;
border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.env-dx-campo input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.env-dx-campo input.guardado { border-color: var(--success); }
.env-dx-campo input.mal { border-color: var(--danger, #C0392B); }
.env-obs { flex: 0 1 auto; }
/* 208 · Diagnóstico y observaciones, cada uno con su botón y su casilla. La
envoltura no pinta nada: sus hijos siguen siendo parte de la fila .env-dx,
así que se ven uno al lado del otro y la casilla abierta ocupa lo que haya. */
.env-nota { display: contents; }
/* Plegada: un botoncito; con diagnóstico, el texto. Al pulsar se abre la casilla */
.env-dx-abrir {
font: inherit; font-size: .82rem; cursor: pointer; text-align: left; max-width: 100%;
padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line); background: none; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.env-dx-abrir:hover, .env-dx-abrir:focus-visible { border-color: var(--primary); color: var(--primary); }
.env-dx-abrir.tiene { border-style: solid; color: var(--ink); background: var(--secondary-soft, hsl(from #EEF4F8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); }
.env-dx-abrir.mal { border-color: var(--danger); color: var(--danger); }
.env-dx-campo[hidden], .env-dx-abrir[hidden] { display: none; }
.env-orden ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 30px; display: flex; flex-direction: column; gap: 4px; }
.env-orden li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.env-marca { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.env-marca input { width: 17px; height: 17px; accent-color: var(--primary); }
/* Un poco más grande y con sitio para su flecha (Iralis, 25/09/2026: «en MAS SALUD no se ve la flechita») */
.env-otro { font-size: .84rem; padding: 5px 30px 5px 10px; border-radius: 8px; min-width: 132px; max-width: 190px;
background-position: right 9px center; background-size: 14px 14px; }
.env-pie { align-items: center; }
.env-historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.env-historial li {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.env-historial li button { margin-left: auto; }
/* 203 · Lo que sigue fuera de cada envío */
.env-faltan { font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--warn); background: var(--warn-soft); }
.env-faltan.todo { color: var(--success); background: var(--success-soft); }
.env-faltan.sin-hoja { color: var(--muted); background: var(--secondary-soft, hsl(from #EEF4F8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); font-weight: 600; }
/* La hoja solo existe para la impresora */
#paraRemesa { display: none; }
/* El botón de la bandeja con algo por mandar: se nota sin gritar */
#btnEnvios.hay-envios { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
/* ===========================================================================
VISTA PREVIA DE LA HOJA DE ENVÍO (app/remesas.js → verHoja). Iralis,
25/09/2026: ver la hoja antes de imprimir, porque imprimir la marca como
enviada. La hoja va del tamaño del papel (Carta apaisada, 10 mm de margen)
y se encoge con `zoom` para caber; en la impresora no sale nada de esto.
=========================================================================== */
.velo.previa-remesa-velo { z-index: 1100; }
.dialogo.previa-remesa {
width: min(1200px, 96vw); height: min(92vh, 900px); padding: 0; gap: 0; overflow: hidden;
}
.previa-remesa-barra {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fff;
}
.previa-remesa-barra b { display: block; color: var(--ink); }
.previa-remesa-barra .apunte { display: block; margin-top: 2px; }
.previa-remesa-hoja {
flex: 1; min-height: 0; overflow: auto; padding: 16px;
background: hsl(from #E9EEF3 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); display: flex; justify-content: center; align-items: flex-start;
}
.previa-remesa-papel {
width: 259.4mm; min-height: 195.9mm; padding: 10mm; background: #fff;
box-shadow: 0 2px 14px hsl(from rgb(15 30 50) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18); flex: none;
}
/* Hoja por hoja (Jean, 28/09/2026: «ver cómo se van a ver las órdenes por hoja
carta horizontal antes de imprimir»): cada una del tamaño exacto del papel
(279,4 × 215,9 mm con sus márgenes), con «Hoja N de M» abajo a la derecha
como en la impresión. `hojasDeLaPrevia` de remesas.js las reparte. */
.previa-hojas { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* El tamaño ENTERO del papel: con `box-sizing: border-box` el margen va dentro */
.previa-remesa-papel.previa-hoja { position: relative; min-height: 0; width: 279.4mm; height: 215.9mm; padding: 10mm 10mm 12mm; overflow: hidden; }
.hoja-envio.hoja-previa { min-height: 0; }
.he-tabla.he-fija { table-layout: fixed; }
.previa-hoja-n { position: absolute; right: 10mm; bottom: 4.5mm; font: 7pt 'Inter', 'Segoe UI', sans-serif; color: #5F7086; }
/* En el teléfono (Jean, 23/10/2026, «Ver la hoja» de Envíos anteriores): el
título a todo el ancho y los dos botones debajo, mitad y mitad */
@media (max-width: 640px) {
.previa-remesa-barra { padding: 12px 14px; }
.previa-remesa-barra .crece { flex: 1 1 100%; }
.previa-remesa-barra > .btn { flex: 1 1 0; }
.previa-remesa-hoja { padding: 10px; }
}
@media print { .previa-remesa-velo { display: none !important; } }
/* ===========================================================================
215 · RESULTADOS DE FUERA (app/pantallas/fuera.js): los PDF que mandan los
laboratorios de referencia al correo. Sigue a «Lo que llega de los equipos»
(eq-*): la misma lista de tarjetas, las mismas pastillas y la misma tabla,
para que quien ya sabe leer una sepa leer la otra.
=========================================================================== */
#btnFuera.hay-envios { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
/* Las tres vistas, como pestañas */
.fz-vistas {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding-bottom: 8px; border-bottom: 1px solid var(--line); margin: 4px 0 12px;
}
.fz-vista {
font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted);
background: none; border: 1px solid transparent; border-radius: 999px;
padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.fz-vista:hover { background: var(--fondo); color: var(--ink); }
.fz-vista.activa { background: var(--primary); color: #fff; }
.fz-vista:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.fz-n {
font-family: var(--cifra); font-size: .74rem; font-variant-numeric: tabular-nums;
background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: 1px 7px;
}
.fz-vista.activa .fz-n { background: rgba(255, 255, 255, .2); color: #fff; }
.fz-vistas .eq-cuenta { margin-left: auto; }
/* 07/10 · El buscador (orden, paciente o cédula), a la derecha de las pestañas */
.fz-vistas .fz-busca { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.fz-vistas .fz-busca + .eq-cuenta { margin-left: 4px; }
.fz-busca svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.fz-busca input { width: min(260px, 60vw); font: 500 .88rem var(--font); color: var(--ink); background: var(--field-bg);
border: 1px solid var(--field-border); border-radius: 999px; padding: 6px 12px 6px 32px; }
.fz-busca input:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
/* Cada PDF: la franja de la izquierda dice su estado sin leer */
.fz-pdf { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.fz-pdf.por_revisar { border-left: 4px solid var(--warn); }
.fz-pdf.cargado { border-left: 4px solid var(--success); }
.fz-pdf.ignorado, .fz-pdf.deshecho, .fz-pdf.ensayo { border-left: 4px solid var(--line); }
/* 227 · el modelo D: la franja dice qué hay que hacer (Jean, 27/09/2026). ⚠ fz-d-*: .fz-bien y .fz-mal ya existen (texto de la sombra) */
.fz-pdf.fz-d-falta { border-left: 4px solid var(--pendiente); }
.fz-pdf.fz-d-bien { border-left: 4px solid var(--success); }
.fz-pdf.fz-d-mal { border-left: 4px solid var(--danger); }
.fz-fila { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.fz-cab {
flex: 1; min-width: 0; display: grid; align-items: center; gap: 8px 18px;
grid-template-columns: 250px minmax(0, 1fr) 260px; /* fijas: que «qué trae» empiece en la misma línea en todas */
padding: 11px 15px; cursor: pointer; text-align: left;
background: none; border: 0; font: inherit; color: inherit;
}
.fz-cab:hover { background: var(--fondo); }
.fz-cab:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.fz-de { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fz-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fz-quien b { font-weight: 700; color: var(--ink); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-que { font-size: .82rem; color: var(--muted); }
.fz-estado { justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.fz-orden { font-family: var(--cifra); font-size: .8rem; color: var(--success); font-weight: 600; }
.fz-ojo { flex: none; }
.fz-ojo svg { width: 17px; height: 17px; }
/* 227 · qué trae (con su valor) y qué hay que hacer */
.fz-de { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 2px; }
.fz-trae { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: .88rem; }
.fz-trae-l { display: block; overflow: hidden; text-overflow: ellipsis; }
.fz-trae-l b { font-weight: 700; color: var(--ink); margin-right: 6px; }
.fz-trae-v { font-weight: 600; color: var(--primary); }
.fz-trae-v.cifra { font-family: var(--cifra); font-weight: 500; }
.fz-trae-v.fuera { color: var(--retrasado); font-weight: 700; }
.fz-trae-nada { color: var(--muted); font-size: .82rem; }
.fz-hacer { font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.fz-hacer-falta { background: var(--warn-soft); color: var(--warn); }
.fz-hacer-bien { background: var(--success-soft); color: var(--success); }
.fz-hacer-mal { background: var(--danger-soft); color: var(--danger); }
.fz-hacer-mudo { background: var(--neutro-soft); color: var(--neutro); }
.fz-botones { display: flex; gap: 6px; flex: none; }
.fz-botones .btn svg { width: 15px; height: 15px; }
.fz-porque { margin: 0; padding: 0 15px 4px; font-size: .78rem; color: var(--muted); }
.fz-mas {
display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px dashed var(--line);
padding: 7px 15px; font: 600 .84rem var(--texto, inherit); color: var(--primary); cursor: pointer;
}
.fz-mas:hover { background: var(--fondo); }
.fz-mas:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
/* 230 · Que se distinga una orden de otra (Jean, 27/09: «difícil de distinguir entre una y otra»):
más aire entre tarjetas, una sombra, la franja más gruesa y la cabeza de cada tarjeta teñida con
el color de lo que hay que hacer; «Ver todo» queda en blanco, debajo */
#pantallaFuera .eq-lista { gap: 16px; }
#pantallaFuera .fz-pdf { border-color: hsl(from #D3DDE8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); box-shadow: 0 1px 2px hsl(from rgb(15 45 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .06), 0 6px 16px -8px hsl(from rgb(15 45 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18); }
#pantallaFuera .fz-pdf.fz-d-falta { border-left-width: 6px; }
/* Llegando desde la orden (#/fuera?id=…): la tarjeta de ese PDF destella */
#pantallaFuera .fz-pdf { scroll-margin-top: 68px; } /* que la barra de arriba (52 px) no la tape */
#pantallaFuera .fz-pdf.fz-senalado { animation: fzSenalado 2.4s ease-out; }
@keyframes fzSenalado {
0%, 35% { box-shadow: 0 0 0 4px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .35), 0 6px 16px -8px hsl(from rgb(15 45 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18); }
100% { box-shadow: 0 1px 2px hsl(from rgb(15 45 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .06), 0 6px 16px -8px hsl(from rgb(15 45 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18); }
}
@media (prefers-reduced-motion: reduce) { #pantallaFuera .fz-pdf.fz-senalado { animation: none; outline: 3px solid hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .35); } }
#pantallaFuera .fz-pdf.fz-d-bien, #pantallaFuera .fz-pdf.fz-d-mal, #pantallaFuera .fz-pdf.fz-d-mudo { border-left-width: 6px; }
.fz-pdf.fz-d-falta > .fz-fila { background: #FFF8EC; }
.fz-pdf.fz-d-bien > .fz-fila { background: #F1FAF5; }
.fz-pdf.fz-d-mal > .fz-fila { background: #FDF3F0; }
.fz-pdf > .fz-fila { border-bottom: 1px solid hsl(from rgb(15 45 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .07); }
.fz-pdf > .fz-fila .fz-cab:hover { background: hsl(from rgb(15 45 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .035); }
#pantallaFuera .fz-quien b { font-size: 1rem; }
/* «Ver lo que trae el PDF» / «Esconder»: un pie que se ve como botón (Jean, 27/09: «esta línea no se ve») */
#pantallaFuera .fz-mas { display: flex; align-items: center; gap: 10px; border-top: 1px solid hsl(from #E2E9F1 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); background: hsl(from #F4F7FB calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
padding: 9px 15px; font-weight: 700; font-size: .86rem; color: var(--primary); }
#pantallaFuera .fz-mas:hover { background: hsl(from #E6EEF7 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.fz-mas-flecha { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); }
.fz-mas-flecha::before { content: ''; position: absolute; left: 8px; top: 6px; width: 5px; height: 5px;
border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.fz-mas[aria-expanded="true"] .fz-mas-flecha::before { top: 9px; transform: rotate(-135deg); }
/* 230 · «Envíos» y «Resultados referidos» en el azul de «referido» (Jean, 27/09): son las dos mitades
del mismo camino. Cada uno con su flecha: «Envíos» sale (↗), «Resultados referidos» vuelve (↙).
Van detrás de sus reglas de antes (naranja) y las pisan por orden, sin tocarlas. */
#btnEnvios.hay-envios, #btnFuera.hay-envios { border-color: hsl(from #A8C4E6 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: var(--info); background: var(--info-soft); }
#btnEnvios.hay-envios:hover, #btnFuera.hay-envios:hover { border-color: var(--info); background: hsl(from #D5E5F7 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
#btnEnvios::before, #btnFuera::before { content: ''; flex: none; width: 14px; height: 14px; margin-right: 6px;
background: currentColor; -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; }
#btnEnvios { --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); }
#btnFuera { --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M15 17H7V9'/%3E%3C/svg%3E"); }
/* 230 · LOS RESULTADOS QUE LLEGARON (Jean, 27/09: «son resultados que llegaron, es importante revisarlos»):
el botón con la bolita roja (modelo C) y, debajo de la barra, la franja «Llegaron N resultados…»
(modelo D; #zonaReferidos, app.js pintarFranjaReferidos) con «Revisarlos →» que late (modelo F). */
/* El botón, modelo C (Jean, 27/09: «este botón ponlo así»): azul claro como «Envíos» y el número en una
bolita roja arriba a la derecha, que late suave mientras hay algo por revisar (.late) */
#btnFuera.hay-envios { position: relative; margin-right: 10px; }
#btnFuera .n-circulo { position: absolute; top: -9px; right: -10px; min-width: 21px; height: 21px; padding: 0 6px;
border-radius: 999px; display: inline-grid; place-items: center; background: #DC2F1B; color: #fff;
font: 700 .74rem var(--cifra, monospace); box-shadow: 0 0 0 2px #fff; }
#btnFuera.late .n-circulo { animation: fr-bolita 2s ease-in-out infinite; }
@keyframes fr-bolita {
0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(220, 47, 27, .5); }
50% { box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(220, 47, 27, 0); }
}
@media (prefers-reduced-motion: reduce) { #btnFuera.late .n-circulo { animation: none; } }
#zonaReferidos { padding: 0 14px 12px; }
.franja-referidos { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px;
background: linear-gradient(90deg, var(--info-soft), hsl(from #F1F6FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); border: 1px solid hsl(from #A8C4E6 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-left: 5px solid var(--info); }
.franja-referidos .fr-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--info); position: relative; }
.franja-referidos .fr-ico::before { content: ''; position: absolute; inset: 10px; background: #fff;
-webkit-mask: var(--flecha-vuelve) center / contain no-repeat; mask: var(--flecha-vuelve) center / contain no-repeat; }
.franja-referidos { --flecha-vuelve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M15 17H7V9'/%3E%3C/svg%3E"); }
.franja-referidos .fr-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.franja-referidos .fr-texto b { color: var(--primary); font-weight: 800; font-size: .98rem; }
.franja-referidos .fr-det { color: var(--muted); font-size: .85rem; }
.franja-referidos .fr-falta { color: var(--warn); font-weight: 700; }
.franja-referidos .fr-listo { color: var(--success); font-weight: 700; }
.franja-referidos .fr-ir { margin-left: auto; flex: none; background: var(--info); color: #fff; border-color: var(--info); }
.franja-referidos .fr-ir:hover { background: hsl(from #1F5592 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-color: hsl(from #1F5592 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
/* «Revisarlos →» late con el botón de arriba (Jean, 27/09: «que se expanda y se encoja, pero que no
salga del cuadro ni toque las líneas»): como mucho un 6 % y un aro de 3 px; la franja le deja 15 px
arriba y abajo y 18 a la derecha, así que nunca llega al borde */
.franja-referidos .fr-ir { margin-right: 4px; transform-origin: center; animation: fr-late 3s ease-in-out infinite; }
.franja-referidos .fr-ir:hover, .franja-referidos .fr-ir:focus-visible { animation: none; }
@keyframes fr-late {
0%, 55%, 100% { transform: scale(1); box-shadow: 0 0 0 0 hsl(from rgb(37 99 168) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / 0); }
70% { transform: scale(1.1); box-shadow: 0 0 0 3px hsl(from rgb(37 99 168) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .18); } /* Jean: «que expanda un poquito más» */
85% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .franja-referidos .fr-ir { animation: none; } }
@media (max-width: 700px) { .franja-referidos { flex-wrap: wrap; } .franja-referidos .fr-ir { margin-left: 48px; } }
.fz-trae-tabla tr.fz-sub td { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--primary); background: hsl(from #F6F9FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.fz-trae-tabla td.fz-sens { color: var(--success); font-weight: 700; }
.fz-trae-tabla td.fz-resis { color: var(--danger); font-weight: 700; }
.fz-trae-tabla td.fz-fuera { color: var(--retrasado); font-weight: 700; }
.fz-trae-tabla { margin-bottom: 14px; }
/* Por qué no se cargó, y lo que habría hecho en la sede principal */
.fz-motivo { margin: 0; padding: 0 15px 6px; font-size: .84rem; color: var(--ink); }
.fz-sombra {
margin: 0 15px 11px; padding: 7px 10px; font-size: .8rem; color: var(--muted);
background: var(--fondo); border-radius: 8px;
}
.fz-sombra b { color: var(--ink); font-family: var(--cifra); font-weight: 600; }
.fz-bien { color: var(--success); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.fz-bien svg { width: 14px; height: 14px; }
.fz-mal { color: var(--danger); font-weight: 700; }
/* 378 · ¿Quién será? Debajo del motivo de un PDF cuyo paciente no se reconoció */
.fz-qs { margin: 0 15px 11px; font-size: .84rem; }
.fz-qs-buscando { color: var(--muted); font-style: italic; }
.fz-qs-nadie {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px;
background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); border-radius: 10px;
}
.fz-qs-nadie svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.fz-qs-nadie p { margin: 0; line-height: 1.45; }
.fz-qs-nadie b { font-size: .92rem; }
.fz-qs-titulo { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.fz-qs-lista { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.fz-qs-op {
display: grid; grid-template-columns: minmax(150px, auto) 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline;
padding: 8px 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
background: #fff; border: 1px solid var(--line); border-radius: 9px;
transition: border-color .15s ease-out, background-color .15s ease-out;
}
.fz-qs-op:hover { border-color: var(--secondary); background: var(--secondary-soft); }
.fz-qs-op:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.fz-qs-por { grid-row: span 2; font-size: .74rem; font-weight: 700; color: var(--warn); }
.fz-qs-quien { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.fz-qs-quien span { color: var(--muted); font-size: .8rem; }
.fz-qs-pend { color: var(--muted); font-size: .8rem; }
@media (max-width: 640px) { .fz-qs-op { grid-template-columns: 1fr; } .fz-qs-por { grid-row: auto; } }
/* Lo que se despliega */
.fz-titulo {
margin: 0 0 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--muted); font-weight: 700;
}
.fz-tabla { overflow-x: auto; }
.fz-tabla .eq-valores td { vertical-align: middle; }
/* Con nota debajo del desplegable (sugerido / otra unidad), la fila se alinea por
su primer renglón: el resultado a la altura del desplegable, no del centro */
.fz-tabla .eq-valores tr:has(.fz-sugerido, .fz-otra-unidad) td { vertical-align: baseline; }
.fz-vacio { color: var(--muted); font-style: italic; }
.fz-nuevo { color: var(--info); font-weight: 700; font-size: .8rem; }
.fz-va { min-width: 240px; max-width: 100%; font-size: .84rem; }
.fz-va.falta { border-color: var(--warn); background-color: var(--warn-soft); }
.fz-resolver { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.fz-paso { display: flex; flex-direction: column; gap: 6px; }
.fz-paciente { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.fz-buscar { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.fz-encontrados { display: flex; flex-direction: column; gap: 5px; }
.fz-encontrados .btn { justify-content: flex-start; text-align: left; }
/* Encontrada por su número de orden (Jean, 26/10): va primero y se distingue */
.fz-encontrados .fz-por-orden { background: var(--secondary-soft); border-color: var(--secondary); }
.fz-ordenes { display: flex; flex-direction: column; gap: 6px; }
.fz-opcion {
display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; cursor: pointer;
background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: .86rem;
}
.fz-opcion:has(input:checked) { border-color: var(--secondary); background: var(--secondary-soft); }
.fz-opcion.no { background: var(--fondo); } /* 217 · de la sede principal: solo para enseñar */
.fz-opcion small { display: block; margin-top: 2px; color: var(--muted); }
.fz-opcion .eq-chip { margin-left: 6px; }
/* Jean, 27/09 · una orden de la paciente que no tiene el examen del PDF: se ve apagada */
.fz-opcion.sin-examen:not(:has(input:checked)) > span { opacity: .6; }
.fz-opcion small.fz-sin-examen { color: var(--warn); font-weight: 600; }
.fz-ignorar { display: flex; flex-direction: column; gap: 7px; max-width: 520px; }
.fz-ignorar label { font-size: .86rem; font-weight: 600; color: var(--ink); }
.fz-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* En la orden: el ojito junto a «Volvió de…» */
/* Se parte entre sus dos enlaces (en el teléfono no cabían en un renglón, 21/10) */
.ojo-fuera { margin-left: 4px; }
.ojo-fuera .enlace { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ojo-fuera svg { width: 15px; height: 15px; }
/* 363 · El «·» va con su botón: escondido el botón, no queda un punto suelto
al final de la línea (Jean, 31/10, la depuración de BUN de la 11150) */
.ojo-fuera [data-poner-texto]::before, .ojo-fuera [data-tal-cual-abrir]::before {
content: '·'; display: inline-block; margin-right: 4px; font-weight: 400; color: var(--ink); }
/* 230 · El PDF colgado (Resultados referidos, con botón): el texto a la izquierda y
«Cargar los valores del PDF» a la derecha de la franja (Jean, 27/09) */
.pdf-colgado { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.pdf-colgado > .btn { margin-left: auto; }
.pdf-colgado > .btn svg { width: 15px; height: 15px; }
@media (max-width: 1100px) {
.fz-cab { grid-template-columns: 190px minmax(0, 1fr) auto; gap: 8px 12px; }
}
/* 335 · Sin sitio para los botones al lado (ventana de menos de ~1180 px), bajan
a su propia línea: si no, le quitaban el ancho a «qué trae» y el texto salía
en trocitos de 3 letras (Jean, 20/10, en el navegador estrecho) */
@media (max-width: 1180px) {
.fz-fila { flex-wrap: wrap; padding-bottom: 8px; }
.fz-cab { flex-basis: 100%; }
.fz-botones { padding-left: 15px; }
}
@media (max-width: 820px) {
.fz-cab { grid-template-columns: 1fr auto; gap: 6px 10px; }
.fz-quien { grid-column: 1 / -1; order: -1; }
.fz-que, .fz-trae { grid-column: 1 / -1; }
.fz-estado { align-items: flex-start; justify-self: start; }
.fz-fila { flex-wrap: wrap; padding-bottom: 8px; }
.fz-botones { padding-left: 15px; }
}
.adjunto-botones a.btn { text-decoration: none; }
/* «Ordenar por» en lista desplegable (Iralis, 25/09/2026): deja sitio a los botones */
.ordenar-lista { display: inline-flex; align-items: center; gap: 8px; }
.ordenar-lista span { font-size: .85rem; color: var(--muted); font-weight: 600; }
.ordenar-lista select { width: auto; min-width: 0; padding-top: 6px; padding-bottom: 6px; font-size: .89rem; }
/* Una lista desplegable con el menú de la casa (comun.js · vestirSelect): el
se esconde y en su sitio va este botón, vestido como las casillas;
lo que se despliega es el `.menu` de la barra de arriba. */
.lista-casa { position: relative; display: inline-flex; flex: none; }
.lista-casa-oculta { display: none !important; }
.lista-casa-btn {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
font-family: var(--font); color: var(--ink); white-space: nowrap; cursor: pointer;
padding-right: 11px;
background: var(--field-bg); border: 1.5px solid var(--field-border); border-radius: var(--radius-sm);
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.lista-casa-btn:hover { border-color: var(--secondary); }
.lista-casa-btn:focus-visible, .lista-casa-btn[aria-expanded="true"] {
outline: none; background: #fff; border-color: var(--secondary);
box-shadow: 0 0 0 4px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .15);
}
.lista-casa-btn svg { width: 15px; height: 15px; color: var(--muted); flex: none; transition: transform .16s ease; }
.lista-casa-btn[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--secondary-dark); }
.menu.lista-casa-menu { top: calc(100% + 6px); min-width: max(100%, 180px); }
.lista-casa-menu button { justify-content: space-between; }
.lista-casa-menu button:focus-visible { outline: none; background: var(--secondary-soft); color: var(--primary); }
.lista-casa-menu button[aria-selected="true"] { font-weight: 600; color: var(--primary); }
.lista-casa-menu button svg { width: 16px; height: 16px; color: var(--secondary-dark); flex: none; }
@media (prefers-reduced-motion: reduce) { .lista-casa-btn svg, .lista-casa-menu { transition: none; animation: none; } }
/* Y la fila más apretada, para que los cuatro botones quepan en una línea
también en las pantallas de 1280 px de la clínica */
.ordenar { gap: 10px 8px; }
.ordenar .btn { padding: 6px 11px; font-size: .85rem; }
.ordenar .ordenar-aparte { margin-left: 2px; padding-left: 10px; }
.ordenar .radio { gap: 5px; }
/* 216 · El rango del PDF de fuera en la orden: cuál se usa y el botón para
cambiarlo; y el aviso si el PDF trae otra unidad que la nuestra */
/* Se parte por dentro, entre sus trozos (Jean 21/10/2026: a 768 px se salía
de la franja y cortaba «usar los nuestros»); cada trozo sigue entero */
.rango-fuera-elegir { white-space: normal; }
.rango-fuera-elegir b, .rango-fuera-elegir .enlace { white-space: nowrap; }
.rango-fuera-elegir b { color: var(--ink); }
.unidad-fuera {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
font-size: .72rem; font-weight: 700; white-space: nowrap;
background: var(--warn-soft); color: var(--warn);
}
.fz-no-carga { align-self: center; font-size: .84rem; color: var(--muted); }
/* ===========================================================================
225 · ENVÍOS A PACIENTES (app/envios-pacientes.js): el botón redondo encima
de «Informe operativo» y su panel de cuatro partes (Jean, 27/09/2026). El
número del botón cuenta lo que pide hacer algo. Sustituye al botón «Por
avisar» de la fila de la bandeja (218), que la partía en dos.
=========================================================================== */
.fab.envios { background: linear-gradient(160deg, #2BA46C, #17744A); }
.fab.sin-funcion { display: none; }
.fab .fab-numero {
position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 6px;
border-radius: 99px; background: var(--pendiente); color: #fff; border: 2px solid #fff;
font: 700 .72rem/17px var(--font); text-align: center; font-variant-numeric: tabular-nums;
}
.fab .fab-numero[hidden] { display: none; }
/* El panel, «modelo E» (Jean, 27/09/2026): cuatro tarjetas de color con su
número y lo que hay que hacer; debajo, la lista entera de la que se pulse.
Grande, porque un día de anexos son 15–20 pacientes. Colores de la casa:
verde = primera vez, azul (--info) = el correo de las 4, ámbar = por avisar,
rojo (--danger) = correos malos. Las que están en cero se apagan. */
.dialogo.envios-pac { width: min(1100px, 100%); max-width: 1100px; padding: 26px 28px 22px; gap: 14px; }
.envios-pac h2 { margin: 0; font: 800 1.6rem var(--display); color: var(--primary); }
.envios-pac .ep-sub { margin: -8px 0 2px; color: var(--muted); font-size: .92rem; }
.envios-pac .ep-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.envios-pac .ep-tarjeta {
position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left;
padding: 14px 15px 15px; border-radius: 16px; border: 2px solid var(--ep-borde);
background: var(--ep-suave); color: var(--ep-tinta); font: inherit; cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.envios-pac .ep-tarjeta:hover { transform: translateY(-2px); }
.envios-pac .ep-tarjeta:focus-visible { outline: 3px solid var(--ep-fuerte); outline-offset: 3px; }
.envios-pac .ep-tarjeta.activa { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ep-fuerte) 30%, transparent); }
.envios-pac .ep-tarjeta.activa::after {
content: ""; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
border: 10px solid transparent; border-top-color: var(--ep-borde); border-bottom: 0;
}
.envios-pac .ep-t-cab { display: flex; align-items: center; }
.envios-pac .ep-t-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ep-fuerte); color: #fff; }
.envios-pac .ep-t-ic svg { width: 24px; height: 24px; }
.envios-pac .ep-t-n { margin-left: auto; font: 800 2.4rem/1 var(--display); font-variant-numeric: tabular-nums; }
.envios-pac .ep-t-titulo { font: 800 1.05rem var(--display); }
.envios-pac .ep-t-frase { font-size: .86rem; line-height: 1.4; }
.envios-pac .ep-tarjeta.en-cero:not(.activa) { background: #fff; border-style: dashed; }
.envios-pac .ep-tarjeta.en-cero:not(.activa) .ep-t-ic { background: var(--fondo); color: var(--ep-fuerte); }
.envios-pac .ep-tarjeta.en-cero:not(.activa) .ep-t-n { color: var(--muted); }
.envios-pac .ep-detalle { border-radius: 16px; border: 2px solid var(--ep-borde); background: var(--ep-suave); padding: 14px 16px 12px; }
.envios-pac .ep-d-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; color: var(--ep-tinta); }
.envios-pac .ep-d-ic svg { width: 22px; height: 22px; display: block; }
.envios-pac .ep-d-cab h3 { margin: 0; font: 800 1.12rem var(--display); }
.envios-pac .ep-hago { margin: 0 0 0 auto; max-width: 62ch; background: #fff; border-radius: 10px; padding: 7px 11px; font-size: .88rem; line-height: 1.4; }
.envios-pac .ep-hago b { font-weight: 800; }
.envios-pac .ep-lista { max-height: min(46vh, 420px); overflow: auto; border-radius: 10px; }
.envios-pac .ep-tabla { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: .92rem; }
.envios-pac .ep-tabla td { background: #fff; padding: 9px 11px; vertical-align: middle; }
.envios-pac .ep-tabla td:first-child { border-radius: 10px 0 0 10px; }
.envios-pac .ep-tabla td:last-child { border-radius: 0 10px 10px 0; }
.envios-pac .ep-tabla small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; line-height: 1.4; }
.envios-pac .ep-motivo { color: var(--ep-tinta); font-weight: 600; }
.envios-pac .ep-orden { white-space: nowrap; width: 1%; }
/* El número de orden, como la pastilla de la bandeja (Jean, 27/09: «el número de orden se ve poco») */
.envios-pac .ep-num { display: inline-block; padding: 4px 11px; border-radius: 9px; background: var(--primary); color: #fff; font: 700 .92rem var(--font); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.envios-pac .ep-cuantos { color: var(--muted); font-size: .86rem; white-space: nowrap; text-align: right; }
.envios-pac .ep-accion { text-align: right; white-space: nowrap; width: 1%; }
.envios-pac .ep-atrasado td { background: var(--warn-soft); }
.envios-pac .ep-atrasado small b { color: var(--warn); }
.envios-pac .ep-nota { font-size: .8rem; color: var(--muted); }
.envios-pac .ep-vacio { margin: 2px 0 4px; color: var(--ep-tinta); font-weight: 500; font-size: .92rem; }
/* Las filas se despliegan al tocarlas: lo que va ahora, lo que ya se mandó y
lo que falta; «Abrir la orden →» y, al volver, el panel se abre solo. */
.envios-pac .ep-fila { cursor: pointer; }
.envios-pac .ep-fila:hover td { background: hsl(from #F6F9FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.envios-pac .ep-fila.abierta td { background: hsl(from #F6F9FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.envios-pac .ep-flecha { display: inline-block; width: 1.1em; color: var(--ep-fuerte); font-weight: 800; }
.envios-pac td.ep-accion > * + * { margin-left: 8px; }
.envios-pac .ep-abrir { background: #fff; border: 1.5px solid var(--line); color: var(--primary); }
/* «Enviar ahora» en el correo de las 4:00 p. m.: en su azul, para lo que no puede esperar */
.envios-pac .ep-ahora { background: var(--ep-fuerte); border: 1.5px solid var(--ep-fuerte); color: #fff; }
.envios-pac .ep-desplegada td { background: #fff; padding: 0 14px 12px 38px; border-radius: 0 0 10px 10px; }
.envios-pac .ep-fila.abierta td:first-child { border-radius: 10px 0 0 0; }
.envios-pac .ep-fila.abierta td:last-child { border-radius: 0 10px 0 0; }
.envios-pac .ep-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.envios-pac .ep-g h4 { margin: 10px 0 6px; font: 700 .76rem var(--font); letter-spacing: .05em; text-transform: uppercase; }
.envios-pac .ep-g ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.envios-pac .ep-g li { font-size: .85rem; padding: 5px 9px; border-radius: 8px; }
.envios-pac .ep-g p { margin: 4px 0; font-size: .85rem; color: var(--muted); }
.envios-pac .ep-g-va h4 { color: var(--ep-tinta); }
.envios-pac .ep-g-va li { background: var(--ep-suave); color: var(--ep-tinta); font-weight: 600; }
.envios-pac .ep-g-ya h4 { color: var(--success); }
.envios-pac .ep-g-ya li { background: #F1F7F3; color: #2F5E45; }
.envios-pac .ep-g-dia { font-weight: 600; color: var(--ink) !important; }
.envios-pac .ep-g-falta h4 { color: var(--warn); }
.envios-pac .ep-g-falta li { background: var(--warn-soft); color: #7A5A18; }
.envios-pac .ep-g-nota { font-size: .8rem !important; }
.envios-pac .ep-cargando { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
@media (max-width: 900px) { .envios-pac .ep-grupos { grid-template-columns: 1fr; } .envios-pac .ep-desplegada td { padding-left: 14px; } }
.envios-pac .ep-verde { --ep-fuerte: var(--success); --ep-suave: #E3F4EA; --ep-borde: #B6E0C8; --ep-tinta: #15603E; }
.envios-pac .ep-azul { --ep-fuerte: var(--info); --ep-suave: hsl(from #E4EEF9 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --ep-borde: hsl(from #BCD3EE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --ep-tinta: hsl(from #1B4C82 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.envios-pac .ep-ambar { --ep-fuerte: var(--pendiente); --ep-suave: var(--warn-soft); --ep-borde: #F0D9A8; --ep-tinta: #7A4E06; }
.envios-pac .ep-rojo { --ep-fuerte: var(--danger); --ep-suave: #FBE9E3; --ep-borde: #F2C7B8; --ep-tinta: #8C2D10; }
/* 237 · «WhatsApp enviados»: un botón arriba, junto a la fecha (Jean, 28/09: «que salga el
botón arriba en vez de ese cuadro»); su lista, en verde azulado, distinto del verde de «Primera vez» */
.envios-pac .ep-whatsapp { --ep-fuerte: hsl(from #0E7C6B calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); --ep-suave: #E0F2EE; --ep-borde: #A8D8CD; --ep-tinta: hsl(from #0B5A4E calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.envios-pac .ep-sub-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 2px; }
.envios-pac .ep-sub-fila .ep-sub { margin: 0; flex: 1 1 280px; }
.envios-pac .ep-boton-wa { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; cursor: pointer;
border: 1.5px solid #A8D8CD; background: #fff; color: hsl(from #0B5A4E calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); font: 700 .9rem var(--font); }
.envios-pac .ep-boton-wa svg { width: 18px; height: 18px; color: hsl(from #0E7C6B calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.envios-pac .ep-boton-wa b { min-width: 22px; padding: 0 7px; border-radius: 99px; background: hsl(from #0E7C6B calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); color: #fff; font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.envios-pac .ep-boton-wa:hover, .envios-pac .ep-boton-wa.activa { background: #E0F2EE; border-color: hsl(from #0E7C6B calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.envios-pac .ep-boton-wa.activa { box-shadow: 0 0 0 3px hsl(from rgb(14 124 107) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .22); }
.envios-pac .ep-boton-wa:focus-visible { outline: 3px solid hsl(from #0E7C6B calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); outline-offset: 2px; }
.envios-pac .ep-semana { margin-left: auto; white-space: nowrap; }
/* WhatsApp: «¿Qué hago?» cede ancho y el botón queda pegado a su lado, en el mismo renglón */
.envios-pac .ep-hago + .ep-semana { margin-left: 0; }
.envios-pac .ep-d-cab:has(.ep-semana) .ep-hago { flex: 1 1 280px; }
@media (max-width: 900px) {
.envios-pac .ep-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.envios-pac .ep-tarjeta.activa::after { display: none; }
}
@media (max-width: 640px) {
.dialogo.envios-pac { padding: 20px 14px 16px; }
.envios-pac .ep-t-frase { display: none; }
.envios-pac .ep-t-n { font-size: 1.9rem; }
.envios-pac .ep-hago { margin-left: 0; }
.envios-pac .ep-tabla tr { display: grid; grid-template-columns: 1fr auto; }
.envios-pac .ep-tabla td { border-radius: 0 !important; }
.envios-pac .ep-orden { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .envios-pac .ep-tarjeta { transition: none; } .envios-pac .ep-tarjeta:hover { transform: none; } }
/* ===========================================================================
ENVÍOS A LABORATORIOS, la ventana nueva (app/remesas.js; Jean, 27/09/2026,
la propuesta 4): tarjetas de laboratorio arriba —blancas con el borde de su
color; la pulsada, con su color suave— y debajo la lista de la elegida,
agrupada por lo que lleva esperando (rojo 8 días o más, ámbar 4–7, verde).
Dx en amarillo y Obs en azul, los colores de la hojita de notas de la
bandeja. Estas reglas van después de las de la ventana vieja y le ganan.
=========================================================================== */
.dialogo.envios { width: min(1080px, 96vw); max-width: 1080px; height: min(820px, 92vh); gap: 12px; }
.dialogo.envios .lx-cabecera h2 { font: 800 1.55rem var(--display); color: var(--primary); }
.dialogo.envios .lx-cabecera .apunte { margin: 2px 0 0; max-width: 70ch; }
.env-labs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.env-lab {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
padding: 12px 14px 13px; border-radius: 16px; border: 1.5px solid var(--ref); background: #fff; color: var(--ref);
font: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.env-lab:hover { transform: translateY(-2px); }
.env-lab:focus-visible { outline: 3px solid var(--ref); outline-offset: 3px; }
.env-lab.activa { background: var(--ref-soft); border-width: 2.5px; box-shadow: 0 0 0 4px var(--ref-aro); }
.env-lab.en-cero:not(.activa) { border: 1.5px dashed var(--line); color: var(--muted); }
.env-lab b { font: 800 1.05rem var(--display); padding-right: 52px; }
.env-lab > span { font-size: .85rem; }
.env-lab .env-lab-n { position: absolute; right: 14px; top: 10px; font: 800 2.2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.env-lab .env-lab-viejo { margin-top: 4px; border-radius: 99px; padding: 2px 10px; font-weight: 700; font-size: .8rem; }
.env-lab-viejo.d-rojo { background: var(--danger); color: #fff; }
.env-lab-viejo.d-ambar { background: var(--pendiente); color: #fff; }
.env-lab-viejo.d-verde, .env-lab-viejo.al-dia { background: #E3F4EA; color: var(--success); }
.env-detalle { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 16px;
border: 2px solid var(--ref-aro); background: var(--ref-soft); padding: 12px 14px 8px; }
.env-d-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ref); }
.env-d-cab > b { font: 800 1.08rem var(--display); }
.env-d-cab { flex-wrap: nowrap; }
.env-d-cab > b { flex: none; }
.env-d-cab #envTodos { flex: none; }
.env-hago { margin: 0 0 0 auto; flex: 0 1 50ch; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: .85rem; color: var(--ink); }
.env-hago[hidden] { display: none; }
.env-detalle .lx-cuerpo { margin-top: 8px; }
.env-grupo { display: flex; align-items: center; gap: 8px; margin: 10px 2px 6px; font: 800 .98rem var(--display); }
.env-grupo small { margin-left: 4px; font: 600 .8rem var(--font); color: var(--muted); }
.env-bola { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.env-grupo.g-rojo { color: var(--danger); } .g-rojo .env-bola { background: var(--danger); }
.env-grupo.g-ambar { color: var(--warn); } .g-ambar .env-bola { background: var(--pendiente); }
.env-grupo.g-verde { color: var(--success); } .g-verde .env-bola { background: var(--success); }
.dialogo.envios .env-orden { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: #fff; }
.env-fila { display: grid; grid-template-columns: auto auto minmax(170px, 240px) 1fr auto; gap: 10px; align-items: center; }
.dialogo.envios .env-num { display: inline-block; padding: 3px 10px; border-radius: 9px; background: var(--primary); color: #fff;
font: 700 .9rem var(--font); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.env-quien b { font-size: .93rem; color: var(--primary); }
.env-quien small { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; }
.env-examenes { display: flex; flex-wrap: wrap; gap: 5px; }
.env-ex { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1.5px solid var(--ref-aro); background: var(--ref-soft);
color: var(--ref); border-radius: 8px; padding: 3px 9px 3px 6px; font-size: .8rem; font-weight: 600; }
.env-ex input { width: 15px; height: 15px; accent-color: var(--ref); }
.env-ex.fuera { background: #fff; color: var(--muted); border-style: dashed; } /* 246: desmarcado es lo normal (aún sin muestra): sin tachar */
.env-acc { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.env-nb { height: 26px; padding: 0 9px; border-radius: 7px; border: 1.5px dashed; background: #fff; font: 700 .74rem var(--font); cursor: pointer; white-space: nowrap; }
.env-nb.dx { border-color: #EBCF7A; color: #8A5E00; }
.env-nb.obs { border-color: hsl(from #A9C6EA calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: var(--info); }
.env-nb.dx.lleno { border: 1.5px solid #E3A600; background: #E3A600; color: #3D2A00; }
.env-nb.obs.lleno { border: 1.5px solid hsl(from #3E7BC4 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); background: hsl(from #3E7BC4 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: #fff; }
.env-nb.mal { border-color: var(--danger); color: var(--danger); }
.env-otro-abrir { border: 0; background: none; padding: 0 2px; font: 600 .76rem var(--font); color: var(--muted); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.env-otro-abrir:hover { color: var(--primary); }
.env-notas { display: flex; flex-direction: column; gap: 4px; margin: 0 0 0 58px; }
.env-notas:has(> :not([hidden])) { margin-top: 6px; }
.env-nota-texto { margin: 0; padding: 6px 10px; border-radius: 8px; font-size: .85rem; }
.env-nota-texto[hidden] { display: none; }
.env-nota-texto.dx { background: #FFFBEA; border: 1px solid #F0D273; color: #5E4300; }
.env-nota-texto.dx b { color: #8A5E00; }
.env-nota-texto.obs { background: hsl(from #E4EEF9 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border: 1px solid hsl(from #A9C6EA calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: hsl(from #1B4C82 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.env-nota-texto.obs b { color: var(--info); }
.dialogo.envios .env-dx-campo { padding: 6px 10px; border-radius: 8px; background: #fff; border: 2px solid var(--primary); }
.dialogo.envios .env-dx-campo.dx { border-color: #E3A600; }
.dialogo.envios .env-dx-campo.obs { border-color: hsl(from #3E7BC4 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.dialogo.envios .env-dx-campo b { font-size: .84rem; white-space: nowrap; }
.dialogo.envios .env-otros { margin: 6px 0 2px 58px; padding: 8px 10px; border-radius: 8px; background: var(--fondo); }
.dialogo.envios .env-otros[hidden] { display: none; }
.env-ver-notas { border: 1.5px solid var(--line); border-radius: 99px; padding: 7px 13px; background: #fff; color: var(--primary);
font: 600 .88rem var(--font); cursor: pointer; white-space: nowrap; }
.env-ver-notas[hidden] { display: none; }
.env-ver-notas b { display: inline-block; margin-left: 4px; border-radius: 99px; padding: 0 7px; font-size: .78rem; color: #fff;
background: linear-gradient(90deg, #E3A600 50%, hsl(from #3E7BC4 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))) 50%); }
.dialogo.envios .env-pie #envCuenta { color: var(--ink); font-size: .95rem; }
/* 232 · Deshacer un envío hecho por error, y el envío deshecho en «Envíos anteriores» */
.env-historial .env-deshacer { margin-left: auto; border-color: #F2C7B8; color: var(--danger); }
.env-historial .env-deshacer + button { margin-left: 0; }
.env-historial .env-deshacer:hover { background: #FBE9E3; }
/* Ver la hoja de un envío ya hecho, con el ojito (Jean, 23/10/2026): va antes de
«Reimprimir la hoja»; los tres botones juntos a la derecha */
.env-historial .env-ver-hoja { display: inline-flex; align-items: center; gap: 6px; }
.env-historial .env-ver-hoja + button { margin-left: 0; }
.env-faltan.deshecho { color: var(--muted); background: var(--fondo); text-decoration: none; font-weight: 600; }
@media (max-width: 900px) {
.env-fila { grid-template-columns: auto auto 1fr; }
.env-examenes, .env-acc { grid-column: 1 / -1; justify-content: flex-start; }
.env-notas, .dialogo.envios .env-otros { margin-left: 0; }
.env-hago { margin-left: 0; }
.env-d-cab { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .env-lab { transition: none; } .env-lab:hover { transform: none; } }
/* 218 · El correo de la ficha rebotó porque no existe: se corrige ahí mismo */
.correo-rebotado { color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 1px 7px; font-size: .85em; font-weight: 600; }
.correo-rebotado-nota { display: block; margin-top: .3rem; color: var(--warn); font-size: .8rem; line-height: 1.3; }
.correo-rebotado-nota[hidden] { display: none; }
input.correo-malo { border-color: var(--warn); background: var(--warn-soft); }
/* 220 · Los correos de los laboratorios (Resultados de fuera) */
.fz-cab-quieta { cursor: default; }
.fz-cab-quieta:hover { background: none; }
.fz-correo { font-family: var(--cifra); font-size: .82rem; color: var(--ink); word-break: break-all; }
/* La tarjeta del correo desconocido: el remitente con su renglón entero y sin
«…» (es el dato que hay que leer para añadirlo); la hora baja si no cabe */
.fz-quien b.fz-correo, #pantallaFuera .fz-quien b.fz-correo { font-size: .82rem; white-space: normal; overflow: visible; }
.fz-cab-quieta .fz-de { flex-wrap: wrap; row-gap: 2px; }
.fz-separado { margin-top: 22px; }
.fz-inactivo td { color: var(--muted); }
.fz-anadir { align-items: center; padding: 0 15px 12px; }
.fz-anadir label { font-size: .86rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.fz-anadir select { width: auto; min-width: 170px; padding-top: 6px; padding-bottom: 6px; }
.fz-anadir .fz-busca { width: 280px; max-width: 100%; padding-top: 6px; padding-bottom: 6px; }
.fz-anadir .btn { padding-top: 6px; padding-bottom: 6px; } /* los botones, del alto de las casillas (~33 px) */
.fz-tabla + .fz-anadir { padding: 0; } /* «Añadir un correo», suelta: al borde, como la tabla y el título */
/* ===========================================================================
242 · EL MONITOR DE FALLOS (app/fallos.js; Jean, 28/09/2026): el botón
redondo encima del de «Envíos a pacientes», solo para quien tiene
perfiles.ve_fallos. Rojo cuando hay algo nuevo; apagado si no hay nada roto.
=========================================================================== */
.fab.fallos { background: linear-gradient(160deg, #C4532C, #8E2F12); }
.fab.fallos.tranquilo { background: linear-gradient(160deg, #6B7C90, #465566); }
.fab.fallos.no-ve { display: none; }
.fab.fallos .fab-numero { background: #fff; color: var(--danger); border-color: var(--danger); }
.dialogo.fallos { width: min(900px, 100%); max-width: 900px; gap: 12px; }
/* Con pocos fallos, la ventana mide lo que lleva: sin bloque en blanco antes de «Cerrar» */
.dialogo.dialogo-lista.fallos { height: auto; max-height: min(720px, 88vh); }
.fallos .fl-cab h2 { margin: 0 0 4px; font: 800 1.5rem var(--display); color: var(--primary); }
.fallos .fl-cab .apunte { margin: 0; max-width: 70ch; }
.fallos .fl-filtros { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.fallos .fl-vistas { border: 0; padding: 0; margin: 0; }
.fallos .fl-dias { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); }
/* background-color y no `background`: el atajo borraba la flecha de la casa */
.fallos .fl-dias select { font: inherit; padding: 5px 30px 5px 10px; border-radius: 8px; border: 1px solid var(--line); background-color: #fff; background-position: right 9px center; background-size: 14px 14px; }
.fallos .fl-desp { font-size: .88rem; color: var(--muted); margin-left: auto; }
.fallos .fl-cuerpo { display: flex; flex-direction: column; gap: 10px; max-height: min(62vh, 640px); overflow-y: auto; padding: 2px; }
.fallos .fl-vacio { padding: 28px 0; text-align: center; }
.fl-fallo {
--fl-fuerte: var(--warn); --fl-suave: var(--warn-soft);
border: 1px solid var(--line); border-left: 5px solid var(--fl-fuerte); border-radius: var(--radius-sm);
background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.fl-fallo.fl-rojo { --fl-fuerte: var(--danger); --fl-suave: var(--danger-soft); }
.fl-fallo.fl-naranja { --fl-fuerte: var(--pendiente); --fl-suave: #FBEEDC; }
.fl-fallo.fl-azul { --fl-fuerte: var(--info); --fl-suave: var(--info-soft); }
.fl-fallo.fl-ambar { --fl-fuerte: var(--warn); --fl-suave: var(--warn-soft); }
.fl-fallo.fl-gris { --fl-fuerte: #9AA8B8; --fl-suave: hsl(from #F1F4F8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.fl-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-chip { background: var(--fl-suave); color: var(--fl-fuerte); font: 700 .78rem var(--font); padding: 3px 10px; border-radius: 99px; letter-spacing: .01em; }
.fl-volvio { background: var(--danger); color: #fff; font: 700 .74rem var(--font); padding: 3px 9px; border-radius: 99px; }
.fl-veces { margin-left: auto; color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.fl-veces b { color: var(--ink); font-size: 1.05rem; }
.fl-mensaje { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fl-meta { margin: 0; font-size: .84rem; color: var(--muted); }
.fl-que { margin: 0; font-size: .86rem; color: var(--ink); background: var(--fl-suave); border-radius: 8px; padding: 7px 10px; }
.fl-resuelto { margin: 0; font-size: .84rem; color: var(--success); font-weight: 600; }
.fl-acciones, .fl-nota { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fl-nota input { flex: 1 1 260px; font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); }
.fl-acciones .fl-ok { color: var(--success); border-color: #B9E0CB; }
.fl-detalle { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fl-vez { font-size: .82rem; color: var(--ink); }
.fl-vez pre { margin: 4px 0 0; padding: 8px 10px; background: hsl(from #F4F7FA calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-radius: 8px; font: .76rem/1.4 'IBM Plex Mono', ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
@media (max-width: 600px) { .fallos .fl-desp { margin-left: 0; } }
.fallos .fl-copia { width: 100%; font: .78rem/1.45 'IBM Plex Mono', ui-monospace, monospace; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: hsl(from #F4F7FA calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); resize: vertical; }
/* 244 · ¿UNA FALTA DE ORTOGRAFÍA? (app/ortografia.js; Jean, 28/09/2026: «CEREO»)
Que se vea (Jean: con una rayita «al ojo humano no parece un error»): la
casilla en ámbar con borde grueso, el icono de aviso a la izquierda y,
justo debajo, «¿Está bien escrito?» con el botón «Cambiar a …». */
.campo-fila.posible-falta .campo-valor .valor {
border: 2px solid var(--pendiente); border-style: solid; background: #FFF3E0; color: #7A4E06; font-weight: 700;
}
.campo-fila.posible-falta .marca-campo { background: var(--pendiente); color: #fff; }
.aviso-orto {
/* En una línea, ocupando el hueco de la unidad y el rango (las casillas de
texto casi nunca llevan): la columna del valor es estrecha */
display: flex; align-items: center; gap: 8px; width: max-content; max-width: 70vw; white-space: nowrap;
position: relative; z-index: 1; padding: 3px 4px 3px 10px; border-radius: 999px; background: #FFF3E0;
font-size: .78rem; font-weight: 700; color: #7A4E06;
}
.aviso-orto[hidden] { display: none; }
.aviso-orto span { display: inline-flex; align-items: center; gap: 4px; }
.aviso-orto svg { width: 14px; height: 14px; color: var(--pendiente); }
.aviso-orto .orto-cambiar {
font: 700 .78rem var(--font); color: #fff; background: var(--pendiente); border: 0;
border-radius: 999px; padding: 4px 11px; cursor: pointer; box-shadow: 0 2px 6px -2px rgba(154, 98, 8, .5);
}
.aviso-orto .orto-cambiar:hover { filter: brightness(1.07); }
.aviso-orto .orto-cambiar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 335 · «Está bien escrita»: la otra salida, más callada que «Cambiar a …» */
.aviso-orto .orto-agregar {
font: 700 .78rem var(--font); color: #7A4E06; background: #fff; border: 1px solid #F0C58C;
border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.aviso-orto .orto-agregar:hover { background: #FFF8EC; border-color: var(--pendiente); }
.aviso-orto .orto-agregar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Con el aviso debajo, la fila crece: los botones = ↑ ↓ suben arriba para que el aviso no los tape */
.campo-fila.posible-falta .campo-extra { align-self: start; padding-top: 4px; }
/* Filas con algo DEBAJO de la casilla (chips, «Intp.», «¿Está bien escrito?»):
nombre, unidad y rango a la altura de la casilla (por la línea de la letra),
no al centro de la fila. La marca, arriba y centrada con la casilla (33 px la
casilla, 24 la marca). Solo escritorio: por debajo de 760 px la rejilla es otra. */
@media (min-width: 761px) {
.campo-fila:has(.chips-respuesta, .interp-caja), .campo-fila.posible-falta { align-items: baseline; }
:is(.campo-fila:has(.chips-respuesta, .interp-caja), .campo-fila.posible-falta) > .marca-campo { align-self: start; margin-top: 4.5px; }
}
/* ===========================================================================
248 · «POR VOLVER» (Jean, 28/09/2026): lo enviado a los laboratorios que no
ha vuelto, con semáforo. La ventana usa las piezas de «Envíos a
laboratorios» (.dialogo.envios, .env-lab, .env-detalle, .env-grupo,
.env-orden) y aquí solo va lo suyo. Jean: «que no se vean pisadas»: cada
paciente es una tarjeta con su cabecera y debajo un examen por línea.
=========================================================================== */
.fab.por-volver { background: linear-gradient(160deg, #7E5BC0, #4B2F86); }
.fab.por-volver.tranquilo { background: linear-gradient(160deg, #8B7AAE, #5E4F80); }
.fab.por-volver.no-ve { display: none; }
.fab.por-volver .fab-numero { background: var(--danger); }
/* La cabecera del laboratorio elegido: título y qué hacer a la izquierda, el teléfono a la derecha */
.pv-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ref); }
.pv-cab-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-cab-texto > b { font: 800 1.08rem var(--display); }
.pv-hago { margin: 0; font-size: .86rem; color: var(--ink); }
.pv-hago:empty { display: none; }
.pv-telefono { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px;
background: #fff; color: var(--ink); font-size: .88rem; }
.pv-telefono svg { width: 18px; height: 18px; color: var(--ref); flex: none; }
.pv-telefono span { display: flex; flex-direction: column; line-height: 1.25; }
.pv-telefono b { font-variant-numeric: tabular-nums; }
.pv-telefono small { color: var(--muted); font-size: .78rem; }
.pv-link { border: 0; background: none; padding: 2px 0; font: 600 .82rem var(--font); color: var(--primary);
text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.pv-link:hover { color: var(--ref); }
.env-detalle .pv-cabecera + .lx-cuerpo { margin-top: 12px; }
/* Un paciente */
.dialogo.por-volver .pv-orden { padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; }
.pv-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.dialogo.por-volver .pv-num { border: 0; cursor: pointer; font: inherit; }
.dialogo.por-volver .pv-num:hover { filter: brightness(1.2); text-decoration: underline; }
.pv-quien, .pv-salio { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.pv-quien b { color: var(--primary); font-size: .95rem; }
.pv-quien small, .pv-salio small { color: var(--muted); font-size: .78rem; }
.pv-salio { text-align: right; }
.pv-salio b { font-size: .84rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pv-llamar { border-color: var(--danger); color: var(--danger); }
.pv-llamar:hover { background: #FCE9E4; }
/* Sus exámenes: uno por línea, con el color del semáforo */
/* .env-orden ul y .env-orden li (de Envíos) le meten sangría y reparto: aquí no */
.pv-orden .pv-exs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pv-exs .pv-e { display: grid; justify-content: normal; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
padding: 7px 8px 7px 12px; border-radius: 9px; border: 1px solid; }
.pv-punto { width: 10px; height: 10px; border-radius: 50%; }
.pv-nombre { font-weight: 700; font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
.pv-nombre small { font-weight: 600; }
.pv-dia { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
padding: 2px 10px; border-radius: 99px; background: #fff; }
.pv-botones { display: flex; align-items: center; gap: 10px; }
.pv-e.t-rojo { border-color: #F2B7A6; background: #FDF1ED; color: #8E2F12; }
.pv-e.t-rojo .pv-punto { background: var(--danger); }
.pv-e.t-ambar { border-color: #F2D49B; background: #FFF8EA; color: #7A4B00; }
.pv-e.t-ambar .pv-punto { background: var(--pendiente); }
.pv-e.t-verde { border-color: #C6E6D2; background: #F2FAF5; color: #17613D; }
.pv-e.t-verde .pv-punto { background: var(--success); }
.pv-e.t-llego { border-color: hsl(from #C7DAF1 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); background: hsl(from #F0F6FD calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: var(--info); }
.pv-e.t-llego .pv-punto { background: var(--info); }
.pv-volvio { border-color: #9ED3B4; color: #17613D; background: #fff; }
.pv-volvio:hover { background: #EAF7EF; }
.pv-llamada { margin: 8px 0 0; padding: 6px 12px; border-radius: 8px; font-size: .82rem; background: var(--fondo); color: var(--ink); }
.pv-llamada.hoy { background: #EAF7EF; }
.pv-llamada b { color: var(--primary); }
/* Los grupos y las tarjetas de laboratorio */
.env-grupo.g-llego { color: var(--info); } .g-llego .env-bola { background: var(--info); }
.env-lab-viejo.pv-d-llego { background: var(--info-soft); color: var(--info); }
.env-lab-viejo.pv-d-llamado { background: #FCE9E4; color: #8E2F12; border: 1.5px solid #F2B7A6; }
.pv-rojo { color: var(--danger); }
/* Los cuadritos (la nota de la llamada, los días, el teléfono) */
.pv-cuadro { width: min(480px, 100%); gap: 10px; }
/* `align-items: end`: si una etiqueta se parte en dos renglones, las casillas
siguen apoyadas en la misma línea de abajo (Jean, 28/09/2026, «Teléfono de UNILAB») */
.pv-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; }
.pv-campos .campo:has(textarea), .pv-campos .campo.pv-ancho { grid-column: 1 / -1; }
.pv-campos textarea { width: 100%; resize: vertical; font: inherit; }
.pv-error { margin: 0; color: var(--danger); font-weight: 600; font-size: .88rem; }
.pv-error[hidden] { display: none; }
@media (max-width: 760px) {
/* En el teléfono la ventana crece con su contenido y se desplaza entera: el pie no tapa la lista */
.dialogo.por-volver { height: auto; max-height: 94vh; overflow-y: auto; }
.dialogo.por-volver .env-detalle { flex: none; min-height: auto; }
.dialogo.por-volver .env-detalle .lx-cuerpo { overflow: visible; max-height: none; }
.pv-cabecera { flex-direction: column; align-items: stretch; }
.pv-cab { grid-template-columns: auto minmax(0, 1fr); }
.pv-salio { text-align: left; grid-column: 2; }
.pv-cab > .btn, .pv-cab > span:last-child { grid-column: 1 / -1; justify-self: start; }
.pv-e { grid-template-columns: 10px minmax(0, 1fr); }
.pv-dia, .pv-botones { grid-column: 2; justify-self: start; }
.pv-campos { grid-template-columns: 1fr; }
}
/* Sin hueco vacío abajo cuando hay poco: la ventana mide lo que lleva, hasta su máximo */
.dialogo.por-volver { height: auto; max-height: min(820px, 92vh); }
/* 250 · «Correos malos» (Jean, 28/09/2026): un buscador por nombre o cédula en
vez del cartel, y el correo ya corregido en verde para reenviarle */
.envios-pac .ep-buscar { margin: 0 0 0 auto; flex: 0 1 340px; }
.envios-pac .ep-buscar input { width: 100%; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line);
background: #fff; font: inherit; font-size: .9rem; }
.envios-pac .ep-buscar input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.envios-pac .ep-tabla tr[hidden] { display: none; }
.envios-pac .ep-sin-resultado[hidden] { display: none; }
.envios-pac .ep-tabla tr.ep-corregido td { background: #EAF7EF; }
.envios-pac .ep-tabla tr.ep-corregido td:first-child { border-left: 4px solid var(--success); }
.envios-pac .ep-tabla tr.ep-corregido small s { color: var(--muted); }
.envios-pac .ep-tabla tr.ep-corregido small b { color: #17613D; }
.ep-pildora-ok { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 99px; background: var(--success);
color: #fff; font-size: .72rem; font-weight: 800; vertical-align: 1px; }
.envios-pac .ep-reintentar { border-color: var(--success); color: #17613D; background: #fff; }
.envios-pac .ep-reintentar:hover { background: #EAF7EF; }
@media (max-width: 760px) { .envios-pac .ep-buscar { margin-left: 0; flex-basis: 100%; } }
/* 312 · «Correos con problema» (maqueta C de Jean, 08/10/2026): dos pestañas,
«No existe» en el rojo de la tarjeta y «Buzón lleno» en naranja, con su
píldora; las que ya tienen su WhatsApp y nada pendiente, en gris claro. */
.envios-pac .ep-pestanas { display: inline-flex; gap: 4px; background: #fff; border-radius: 99px; padding: 3px; }
.envios-pac .ep-pestana { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 0; border-radius: 99px;
background: transparent; color: var(--ep-tinta); font: 700 .86rem var(--font); cursor: pointer; }
.envios-pac .ep-pestana b { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--ep-suave); font-size: .76rem; text-align: center; font-variant-numeric: tabular-nums; }
.envios-pac .ep-pestana[aria-selected="true"] { background: var(--ep-fuerte); color: #fff; }
.envios-pac .ep-pestana[aria-selected="true"] b { background: #fff; color: var(--ep-fuerte); }
.envios-pac .ep-pestana.ep-p-lleno[aria-selected="true"] { background: #B4530F; }
.envios-pac .ep-pestana.ep-p-lleno[aria-selected="true"] b { color: #B4530F; }
.envios-pac .ep-pestana:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ep-pildora-lleno { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 99px; background: #B4530F;
color: #fff; font-size: .72rem; font-weight: 800; vertical-align: 1px; }
.envios-pac .ep-pildora-wa { display: inline-block; padding: 4px 10px; border-radius: 99px; background: #E0F2EE; color: hsl(from #0B5A4E calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)));
font-size: .8rem; font-weight: 600; white-space: nowrap; }
.envios-pac .ep-tabla tr.ep-ya-tiene td { background: hsl(from #F7F9FA calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.envios-pac .ep-liberar { background: #fff; border: 1.5px solid #F1CDAE; color: #7C3A0B; }
.envios-pac .ep-liberar:hover { background: #FCEEE2; }
/* La fila de entrega dice por qué no le llegó (Jean, 28/09/2026: «que se vea
que no se le envió por eso»): rojo si rebotó o falló a ESE correo; verde
suave si el que rebotó era el anterior y ya está corregido */
.entrega-fila.no-llego .entrega-check { border-color: var(--danger); background: #FCE9E4; color: var(--danger); }
.entrega-fila.no-llego .entrega-porque { color: var(--danger); font-weight: 600; }
.entrega-fila.corregido .entrega-check { border-color: var(--success); background: var(--success-soft); color: var(--success); opacity: .7; }
.entrega-fila.corregido .entrega-porque { color: #17613D; font-weight: 600; }
.entrega-rotulo .entrega-porque { display: block; margin-top: 2px; }
/* «Va a» con lo sugerido por el nombre (Jean, 28/09/2026): verde claro, para revisarlo antes de cargar */
.fz-va.sugerido { border-color: var(--success); background-color: #EAF7EF; }
.fz-sugerido { display: block; margin-top: 3px; color: #17613D; font-size: .76rem; font-weight: 600; }
/* «Va a» con otra unidad que la nuestra (Jean, 28/09/2026: el CEA en UI/mL y el nuestro en ng/mL) */
.fz-va.otra-unidad { border-color: var(--danger); background-color: #FDF1ED; }
.fz-otra-unidad { display: block; margin-top: 3px; color: var(--danger); font-size: .76rem; font-weight: 700; max-width: 60ch; }
/* ===========================================================================
IMPRESORA FISCAL (Jean, 28/09/2026) — app/impresora-fiscal.js
La misma ventana que en Cobros (Cierre de caja → Impresora fiscal) y el
mismo botón que late. Lo que se cambie aquí, se cambia también allá.
=========================================================================== */
/* --- El botón de la cabecera de la Caja del día ----------------------------
Modelo «D» que eligió Jean: blanco, con segunda línea y un latido de corazón
(«tucu tucu y esperar», cada 2,6 s). Se queda quieto con el ratón encima. */
.cif-boton {
margin-left: auto; align-self: center;
display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
background: #fff; color: var(--primary); border: 0; border-radius: 14px;
padding: 9px 18px 9px 9px; text-align: left; font-family: var(--font);
box-shadow: 0 0 0 3px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .55), 0 10px 22px -8px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .35);
animation: cifLatido 2.6s ease-in-out infinite, cifHalo 2.6s ease-in-out infinite;
}
.cif-boton:hover { animation-play-state: paused; }
.cif-boton:focus-visible { outline: 3px solid var(--secondary-dark); outline-offset: 3px; }
.cif-ico {
flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
background: linear-gradient(160deg, var(--secondary), var(--secondary-dark)); color: #fff;
}
/* Sin ligaduras: la Jakarta junta «fi» y la i de «fiscal» perdía el punto. */
.cif-t1 { display: block; font: 800 1rem/1.2 var(--display); font-variant-ligatures: none; }
.cif-t2 { display: block; font: 500 .74rem/1.3 var(--font); color: var(--muted); margin-top: 1px; font-variant-ligatures: none; }
@keyframes cifLatido {
0%, 16%, 34%, 100% { transform: scale(1); } 8% { transform: scale(1.07); } 24% { transform: scale(1.05); }
}
@keyframes cifHalo {
0%, 16%, 34%, 100% { box-shadow: 0 0 0 3px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .55), 0 10px 22px -8px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .35); }
8%, 24% { box-shadow: 0 0 0 7px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .35), 0 10px 22px -8px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .35); }
}
@keyframes cifLatidoSuave {
0%, 16%, 34%, 100% { transform: scale(1); } 8% { transform: scale(1.04); } 24% { transform: scale(1.03); }
}
/* Con las animaciones de Windows apagadas igual late (Jean lo pidió para que
se note), pero crece menos. El `!important` le gana a la regla general
`* { animation-duration: .01ms !important }`, que lo hacía temblar. */
@media (prefers-reduced-motion: reduce) {
.cif-boton { animation: cifLatidoSuave 2.6s ease-in-out infinite, cifHalo 2.6s ease-in-out infinite;
animation-duration: 2.6s !important; }
}
@media (max-width: 720px) { .cif-boton { margin-left: 0; } }
/* --- La ventana ------------------------------------------------------------- */
.dialogo.ifp {
/* Espaciados y tonos de Cobros que esta hoja no tiene */
--e2: 8px; --e3: 12px; --e4: 16px;
--renglon: hsl(from #F7FAFC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --tinta-media: hsl(from #51637A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --warn-soft: #FCF1DE;
width: min(620px, 100%); display: block; background: var(--fondo);
}
.ifp-columnas { display: grid; gap: var(--e3) 18px; }
.ifp-col { min-width: 0; }
.ifp-col > * + * { margin-top: var(--e3); }
@media (min-width: 900px) {
.dialogo.ifp { width: min(1060px, 100%); }
.ifp-columnas { grid-template-columns: 1fr 1fr; align-items: start; }
}
.ifp-cab { display: flex; align-items: center; gap: var(--e2); margin: 0 38px var(--e4) 0; flex-wrap: wrap; }
.ifp-cab h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.22rem; }
.ifp-cab h2 svg { width: 22px; height: 22px; color: var(--secondary-dark); flex: none; }
.ifp-pildoras { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dialogo .ifp-cargando { color: var(--muted); }
.ifp-pildora {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 11px; border-radius: 999px; white-space: nowrap;
font-size: .76rem; font-weight: 700; letter-spacing: .2px;
background: var(--neutro-soft); color: var(--neutro);
}
.ifp-pildora::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ifp-pildora--ok { background: var(--success-soft); color: var(--success); }
.ifp-pildora--prueba { background: var(--warn-soft); color: #8A5308; }
.ifp-pildora--real { background: var(--danger-soft); color: #B23A17; }
.ifp-pildora--mal { background: var(--danger-soft); color: #B23A17; }
/* El ticket: el estado de la impresora pintado como el papel térmico */
.ifp-ticket {
position: relative; background: #fff;
border: 1.5px solid var(--line); border-bottom: 0;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: var(--e4) var(--e4) calc(var(--e4) + 4px);
font-family: var(--cifra); color: var(--ink);
margin-bottom: 14px;
}
.ifp-ticket::after {
content: ""; position: absolute; left: -1.5px; right: -1.5px; bottom: -10px; height: 10px;
background:
linear-gradient(135deg, #fff 50%, transparent 50%) 0 0 / 12px 10px repeat-x,
linear-gradient(225deg, #fff 50%, transparent 50%) 0 0 / 12px 10px repeat-x;
filter: drop-shadow(0 1.5px 0 var(--line));
}
.ifp-ticket-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.ifp-ticket-fila + .ifp-ticket-fila { margin-top: 8px; }
.ifp-serial { font-size: 1.08rem; font-weight: 600; color: var(--primary); letter-spacing: .5px; }
.ifp-modelo { font-size: .78rem; color: var(--muted); }
.ifp-dato { font-size: .8rem; color: var(--muted); }
.ifp-dato strong { color: var(--ink); font-weight: 600; font-size: .92rem; }
.ifp-sep { border: 0; border-top: 1.5px dashed var(--field-border); margin: 12px 0; }
.ifp-memoria-cab { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.ifp-memoria-cab strong { color: var(--ink); font-weight: 600; }
.ifp-barra { height: 8px; border-radius: 999px; background: var(--neutro-soft); overflow: hidden; }
.ifp-barra > span { display: block; height: 100%; border-radius: inherit;
background: linear-gradient(90deg, var(--secondary), var(--secondary-dark));
transform-origin: left; animation: ifp-llenar .7s cubic-bezier(.2,.8,.2,1) both; }
.ifp-barra--alerta > span { background: linear-gradient(90deg, #F08A6A, var(--danger)); }
@keyframes ifp-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ifp-memoria-nota { margin-top: 6px; font-family: var(--font); font-size: .8rem; color: var(--muted); }
.ifp-memoria-nota--alerta { color: #B23A17; font-weight: 600; }
.ifp-aviso {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 14px; border-radius: var(--radius-sm);
font-size: .86rem; line-height: 1.45; margin-bottom: var(--e3);
background: var(--warn-soft); color: #6B4207;
}
.ifp-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ifp-aviso--mal { background: var(--danger-soft); color: #8E2D10; }
.ifp-aviso .btn { margin-left: auto; align-self: center; }
/* Tarjetas */
.ifp-bloque { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px var(--e4); background: #fff; }
.ifp-bloque + .ifp-bloque { margin-top: var(--e3); }
.ifp-bloque-titulo { display: flex; align-items: baseline; gap: var(--e2); margin: 0 0 10px; flex-wrap: wrap;
font-family: var(--display); font-size: .98rem; font-weight: 700; color: var(--primary); }
.ifp-bloque-titulo small { font-family: var(--font); font-weight: 500; font-size: .8rem; color: var(--muted); }
/* Los dos reportes: mosaicos grandes, todo el mosaico es el botón */
.ifp-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.ifp-accion {
display: flex; gap: 12px; align-items: flex-start; text-align: left;
min-height: 76px; padding: 14px; border-radius: var(--radius-sm);
border: 1.5px solid var(--field-border); background: var(--renglon);
font-family: var(--font); color: var(--ink); cursor: pointer;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ifp-accion:hover:not(:disabled) { border-color: var(--secondary); background: #fff;
transform: translateY(-2px); box-shadow: var(--sombra); }
.ifp-accion:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.ifp-accion svg { width: 26px; height: 26px; flex: none; color: var(--secondary-dark); margin-top: 1px; }
.ifp-accion b { display: block; font-size: .95rem; color: var(--primary); }
.ifp-accion span { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.ifp-accion--z { border-color: #F1C2B3; background: #FFF8F5; }
.ifp-accion--z svg { color: var(--danger); }
.ifp-accion--z b { color: #B23A17; }
.ifp-accion--z:hover:not(:disabled) { border-color: var(--danger); }
.ifp-accion:disabled { cursor: not-allowed; opacity: .55; }
/* Por número / por cédula */
.ifp-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--neutro-soft); margin-bottom: var(--e3); }
.ifp-seg button {
min-height: 36px; padding: 6px 16px; border: 0; border-radius: 9px; background: transparent;
font-family: var(--font); font-size: .84rem; font-weight: 700; color: var(--neutro); cursor: pointer;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ifp-seg button[aria-pressed="true"] { background: #fff; color: var(--primary); box-shadow: var(--sombra); }
.ifp-seg button:focus-visible { outline: 3px solid var(--secondary); outline-offset: 1px; }
.ifp-fila { display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; }
.ifp-campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 0; }
.ifp-campo label { font-size: .74rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tinta-media); }
.ifp-campo input { min-height: 44px; font-size: .95rem; }
.ifp-campo input.cifra { font-family: var(--cifra); }
.ifp-fila > .btn { min-height: 44px; flex: none; }
/* Con .dialogo delante: .dialogo p (letra .92rem, tinta) pesaba más. */
.dialogo .ifp-ayuda { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }
.ifp-atajos { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ifp-chip {
min-height: 32px; padding: 5px 13px; border-radius: 999px; cursor: pointer;
border: 1.5px solid var(--field-border); background: #fff;
font-family: var(--font); font-size: .8rem; font-weight: 600; color: var(--primary-light);
transition: border-color .18s ease, background .18s ease;
}
.ifp-chip:hover { border-color: var(--secondary); background: var(--secondary-soft); }
.ifp-chip[aria-pressed="true"] { border-color: var(--secondary); background: var(--secondary-soft); color: var(--secondary-dark); }
.ifp-descargas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-top: var(--e4); }
.ifp-descargas .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.ifp-descargas .btn svg { width: 17px; height: 17px; flex: none; }
.dialogo .ifp-msg { margin: var(--e3) 0 0; font-size: .86rem; color: var(--success); font-weight: 600; }
.ifp-msg:empty { display: none; }
.dialogo .ifp-msg--mal { color: #B23A17; }
.dialogo.ifp .dialogo-botones { margin-top: var(--e4); }
@media (max-width: 560px) {
.ifp-acciones, .ifp-descargas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.ifp-barra > span { animation: none; }
.ifp-accion, .ifp-accion:hover { transition: none; transform: none; }
}
/* --- El aviso «Falta el reporte Z» (Jean, 02/10/2026) -----------------------
Sale al pulsar «Cerrar la caja del día» si la impresora tiene facturas sin su
Z (`avisarFaltaZ` en impresora-fiscal.js). El modelo «B» que eligió Jean
entre tres (auditoria/modelos-aviso-reporte-z.html): el candado rojo del
mosaico del Z, la cifra grande y el botón a todo el ancho. */
.dialogo.ifz { width: min(440px, 100%); gap: 0; }
.ifz-cab { display: flex; gap: 16px; align-items: center; margin-right: 30px; }
.ifz-ico {
flex: none; width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; color: #fff;
background: linear-gradient(160deg, #E0603A, var(--danger));
box-shadow: 0 0 0 4px var(--danger-soft), 0 10px 22px -10px rgba(176,58,22,.7);
}
.ifz-ico svg { width: 30px; height: 30px; }
.dialogo .ifz-cab h2 { margin: 6px 0 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.3px; text-wrap: balance; }
.ifz-cifra {
display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 16px;
border: 1.5px solid #F1C2B3; background: #FFF8F5; border-radius: 12px;
}
.ifz-cifra strong { font: 600 2.4rem/1 var(--cifra); color: #B23A17; }
.ifz-cifra span { font-size: .92rem; color: var(--ink); line-height: 1.35; }
.ifz-cifra small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.ifz-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.ifz-botones .btn { min-height: 48px; font-size: 1rem; justify-content: center; gap: 8px; }
.ifz-botones .btn svg { width: 18px; height: 18px; flex: none; }
.ifz-botones .btn:not(.primario) { border-color: transparent; background: none; color: var(--muted); box-shadow: none; }
.ifz-botones .btn:not(.primario):hover { color: var(--primary); background: var(--neutro-soft); }
/* ===========================================================================
SIN VALIDAR (284, Jean, 02/10/2026) — app/sin-validar.js
Las pruebas completas, trabajadas a mano o del equipo, que siguen sin
validar. Maqueta elegida: auditoria/modelos-sin-validar.html. Las ventanas
son las `.ifz-` del aviso del reporte Z, en ámbar.
=========================================================================== */
/* 1 · La tarjeta: ámbar fuerte, «Lista para validar» y el botón que late */
.examen.lista-sin-validar { border-left-width: 6px; border-left-color: #D0801E; box-shadow: 0 0 0 2px #F3C98B, var(--sombra); }
.examen.lista-sin-validar > .examen-cab { background: linear-gradient(180deg, #FBE3BC, #F8D7A3); }
.examen.lista-sin-validar .examen-quien h3 { color: #8A4B05; }
.examen-estado.lista-validar { background: linear-gradient(180deg, #E29A3C, #D0801E); color: #fff; font-weight: 800;
box-shadow: 0 6px 14px -8px rgba(192,111,18,.9); }
.btn.candado.validar-ya { background: linear-gradient(180deg, #E29A3C, #D0801E); color: #fff; border-color: #C06F12;
box-shadow: 0 8px 18px -8px rgba(192,111,18,.85); animation: validarLate 2.6s ease-in-out infinite; }
.btn.candado.validar-ya:hover { background: #C06F12; color: #fff; animation-play-state: paused; }
@keyframes validarLate { 0%, 16%, 34%, 100% { transform: scale(1); } 8% { transform: scale(1.06); } 24% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .btn.candado.validar-ya { animation: none; } }
/* La fila de la barra de abajo: qué falta por validar en esta orden */
.res-faltan { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 12px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-weight: 600; }
.res-faltan[hidden] { display: none; }
.res-faltan .punto { width: 11px; height: 11px; border-radius: 50%; background: #F0AD4E; box-shadow: 0 0 0 4px rgba(240,173,78,.3); flex: none; }
.res-faltan b { font-family: var(--display); font-size: .95rem; }
.res-faltan .chip { cursor: pointer; border: 0; font-family: var(--font); }
.res-faltan .btn { margin-left: auto; background: #F0AD4E; color: #3D2402; border-color: transparent; font-weight: 800; }
.res-faltan .btn:hover { background: #E29A3C; color: #3D2402; }
/* 2 y 4 · Las ventanas */
.ifz-ico.ambar { background: linear-gradient(160deg, #EAA64A, #C06F12); box-shadow: 0 0 0 4px #FCF1DE, 0 10px 22px -10px rgba(192,111,18,.7); }
.ifp-pildora.ambar { background: #FCF1DE; color: #8A5308; }
.lista-faltan { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.lista-faltan .renglon { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-radius: 12px;
border: 1.5px solid #EFCF98; background: #FFFAF2; text-align: left; font-family: var(--font); }
.lista-faltan .renglon b { flex: 1; font: 700 .95rem var(--display); color: var(--primary); }
.lista-faltan .renglon > span:not(.sv-pruebas) { font: 600 .8rem var(--cifra); color: #146A43; }
.lista-faltan .renglon small { flex: 1 0 100%; color: var(--muted); font-size: .8rem; }
.lista-faltan button.renglon { cursor: pointer; }
.lista-faltan button.renglon:hover { border-color: #D0801E; background: #FFF3E0; }
.dialogo .nota-dialogo { margin: 14px 0 0; font-size: .86rem; color: var(--muted); }
.lista-sin-validar-dialogo .lista-faltan { max-height: 55vh; overflow-y: auto; }
/* Cada prueba con la fecha y hora de su último cambio (Jean, 02/10), en dos
columnas: la prueba a la izquierda y la fecha alineada a la derecha, con una
raya punteada entre renglones (la mezcla que eligió de los modelos A y B de
auditoria/modelos-lista-sin-validar.html: «se veía muy desordenado»). */
.lista-faltan .sv-pruebas { flex: 1 0 100%; display: flex; flex-direction: column; }
.lista-faltan .sv-prueba { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 5px 0; border-top: 1px dashed #EFCF98; font: 500 .84rem var(--font); color: var(--ink); }
.lista-faltan .sv-prueba i { font: 600 .78rem var(--cifra); font-style: normal; color: #9A3412; white-space: nowrap; }
/* 3 · La bandeja (desde las 12:30). La etiqueta: el modelo «O» que eligió Jean
en auditoria/modelos-chip-sin-validar.html («la roja con borde no me
gusta»): naranja casi rojo (tono 16°, entre el naranja de pendiente y el
rojo de retrasada), maciza, letra blanca y el latido del botón «Validar».
«N sin validar» bajo el número y el número del botón de arriba, igual. */
.chip.sin-validar { background: linear-gradient(180deg, #EE6A2E, #DD4F14); color: #fff; border: 1px solid #C2410C;
animation: sinValidarLate 2.6s ease-in-out infinite; }
.alerta-sin-validar { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 9px; border-radius: 999px;
background: linear-gradient(180deg, #EE6A2E, #DD4F14); color: #fff; border: 1px solid #C2410C;
font: 800 .72rem var(--font); letter-spacing: .2px; white-space: nowrap; animation: sinValidarLate 2.6s ease-in-out infinite; }
.alerta-sin-validar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
td.orden .alerta-sin-validar { display: flex; width: max-content; }
/* Centrado bajo la pastilla del número (Jean, 04/10/2026: «un poquito más a la
izquierda para que esté centrado con la píldora de arriba»): el aviso es más
ancho que la pastilla (101 px frente a 86) y empezaba en su mismo borde, así
que su centro caía 8 px a la derecha. Su centro, al centro de la pastilla
(min-width 86px de .orden-pastilla). */
td.orden .alerta-sin-validar { position: relative; left: 43px; transform: translateX(-50%); }
@keyframes sinValidarLate {
0%, 16%, 34%, 100% { box-shadow: 0 0 0 0 rgba(221,79,20,0); }
8%, 24% { box-shadow: 0 0 0 4px rgba(221,79,20,.5); }
}
@media (prefers-reduced-motion: reduce) {
.chip.sin-validar, .alerta-sin-validar { animation: none; box-shadow: 0 0 0 3px rgba(221,79,20,.4); }
}
.btn-sin-validar:not([hidden]) { border-color: #DD4F14; color: #9A3412; display: inline-flex; align-items: center; gap: 7px; }
.btn-sin-validar .n-circulo { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
background: linear-gradient(180deg, #EE6A2E, #DD4F14); color: #fff; font: 700 .74rem var(--cifra, monospace); }
/* ===========================================================================
FACTURA FISCAL DE LA ORDEN Y NOTA DE CRÉDITO (db/257, Jean, 28/09/2026)
app/factura-fiscal.js. La misma ventana que en Cobros (`.ffa-` allá también):
a la izquierda se llena, a la derecha el papel tal como va a salir. Usa las
piezas `ifp-` de la ventana «Impresora fiscal» (bloque de arriba).
=========================================================================== */
/* El N.º de factura con su botón al lado. La casilla crece lo justo para el
botón: el resto sigue siendo de observaciones. */
.cifras-apuntes .campo-factura.con-fiscal { flex: 0 0 176px; }
.ffa-casilla { display: flex; gap: 6px; align-items: stretch; }
.ffa-casilla input { flex: 1; min-width: 0; }
input.ffa-fija, .ffa-casilla input.ffa-fija {
background: var(--secondary-soft); border-color: var(--secondary);
color: var(--secondary-dark); font-family: var(--cifra); font-weight: 600; cursor: default;
}
.ffa-boton {
flex: none; width: 40px; min-height: 40px; display: grid; place-items: center;
border-radius: var(--radius-sm); border: 1.5px solid var(--field-border); background: #fff;
color: var(--secondary-dark); cursor: pointer;
font-family: var(--font); font-size: .74rem; font-weight: 800; letter-spacing: .3px;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.ffa-boton svg { width: 20px; height: 20px; }
.ffa-boton:hover:not(:disabled) { border-color: var(--secondary); background: var(--secondary-soft); }
.ffa-boton:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.ffa-boton:disabled { opacity: .45; cursor: not-allowed; }
.ffa-boton--nc { color: var(--danger); }
/* «Nota de crédito» en la barra de abajo de la orden (29/09/2026) */
.facturacion-pie .btn-nc { color: var(--danger); border: 1.5px solid var(--danger); } /* el borde en rojo de verdad (Jean, 29/09) */
.facturacion-pie .btn-nc svg { width: 18px; height: 18px; }
.facturacion-pie .btn-nc:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
.ffa-boton--nc:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
/* La ventana */
.dialogo.ifp.ffa { width: min(960px, 100%); }
.ffa-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.ffa-cuerpo .ifp-bloque + .ifp-bloque { margin-top: 12px; }
.ffa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ffa-grid .ffa-ancho { grid-column: 1 / -1; }
.ffa-cuerpo .ifp-campo label i { color: var(--danger); font-style: normal; }
.dialogo p.ffa-nota { font-size: .8rem; color: var(--muted); margin: -2px 0 10px; }
.ffa-nota b { color: var(--ink); }
.ffa-renglon { display: flex; gap: 10px; align-items: center; }
.ffa-renglon + .ffa-renglon { margin-top: 8px; }
.ffa-renglon input[type="text"] { flex: 1; min-width: 0; min-height: 40px; }
.ffa-renglon input[type="checkbox"] { flex: none; width: 18px; height: 18px; accent-color: var(--secondary-dark); }
.ffa-monto { flex: none; font-family: var(--cifra); font-weight: 600; color: var(--primary); white-space: nowrap; }
/* Del mismo ancho y a la derecha: así las casillas de texto quedan parejas. */
.ffa-renglon > span.ffa-monto { min-width: 7.2em; text-align: right; }
.ffa-renglon input.ffa-monto-casilla { flex: none; max-width: 9.5em; text-align: right; }
.ffa-contador { font-family: var(--cifra); font-size: .72rem; color: var(--muted); text-align: right; margin-top: 3px; }
.ffa-contador--lleno { color: #B23A17; }
.ffa-cuerpo input.ffa-falta { background: #fff; border-color: var(--secondary); box-shadow: 0 0 0 4px var(--secondary-soft); }
.ffa-sueltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ffa-sueltas .btn { min-height: 36px; font-size: .82rem; }
.ifp-pildora.ffa-num { background: var(--secondary-soft); color: var(--secondary-dark); font-family: var(--cifra); }
.ifp-pildora.ffa-num::before { display: none; }
/* El papel */
.ffa-lado h4 { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .5px;
text-transform: uppercase; color: var(--tinta-media); }
.ffa-papel {
position: relative; background: #fff;
border: 1.5px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0;
padding: 16px 14px 24px;
font-family: var(--cifra); font-size: .72rem; line-height: 1.55; color: hsl(from #1F2A36 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
box-shadow: 0 18px 30px -22px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .45);
overflow-wrap: anywhere;
/* EL ANCHO DEL PAPEL DE VERDAD (Jean, 29/09/2026: «que la muestra enseñe el
tamaño real horizontalmente»): la PP9-PLUS imprime 48 columnas, y en letra
de ancho fijo `48ch` son exactamente 48 caracteres. Así los montos caen
donde caen en el papel y las rayitas van de borde a borde. */
box-sizing: content-box; width: 48ch; max-width: calc(100vw - 96px);
}
.ffa-papel::after {
content: ""; position: absolute; left: -1.5px; right: -1.5px; bottom: -10px; height: 10px;
background:
linear-gradient(135deg, #fff 50%, transparent 50%) 0 0 / 12px 10px repeat-x,
linear-gradient(225deg, #fff 50%, transparent 50%) 0 0 / 12px 10px repeat-x;
filter: drop-shadow(0 1.5px 0 var(--line));
}
.ffa-papel .c { text-align: center; }
.ffa-papel .f { display: flex; justify-content: space-between; gap: 8px; }
.ffa-papel hr { border: 0; border-top: 1px dashed hsl(from #9FB0C2 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); margin: 7px 0; }
.ffa-papel .sello { font-weight: 600; letter-spacing: 1px; }
.ffa-papel .tenue { color: #8A99AB; }
.ffa-papel .falta { color: var(--danger); background: var(--danger-soft); padding: 0 3px; border-radius: 3px; }
.ffa-papel .ffa-marca { color: #B45309; margin-top: 6px; }
.dialogo p.ffa-ayuda { margin: 16px 0 0; font-size: .76rem; color: var(--muted); }
/* El pie: la cuenta a la izquierda, los botones a la derecha */
.ffa-pie { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1.5px solid var(--line); }
.ffa-pie .ffa-cuenta { margin-right: auto; font-size: .82rem; color: var(--muted); }
.ffa-pie .ffa-cuenta b { font-family: var(--cifra); color: var(--ink); font-weight: 600; }
.ffa-pie .btn { min-height: 46px; }
.ffa-pie .btn.peligro:disabled { background: #E7B3A4; border-color: transparent; box-shadow: none; color: #fff; cursor: not-allowed; }
.dialogo p.ffa-error { color: #B23A17; font-weight: 600; font-size: .86rem; margin: 12px 0 0; }
.ffa-error:empty { display: none; }
@media (max-width: 800px) {
.ffa-cuerpo { grid-template-columns: 1fr; }
.ffa-pie { flex-wrap: wrap; }
.ffa-pie .ffa-cuenta { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.ffa-boton { transition: none; }
}
/* --- «1 · Factura fiscal» → «2 · Guardar Cobro» (Jean, 29/09/2026) ----------
La barra de Cobros («modelo 9»), al pie de la orden: «el botón de la factura
igual al de la app de cobros, abajo al lado de Guardar Cobro». */
.facturacion-pie.barra-cobro { align-items: center; }
.barra-ico { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.barra-ico::before {
content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.barra-ico-factura { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2zM9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.barra-ico-listo { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); }
/* Paso 1: turquesa lleno mientras falta; verde con su número cuando salió la
factura real; ámbar si lo que salió fue una PRUEBA (esa se puede repetir). */
.barra-cobro .barra-paso1 {
background: linear-gradient(145deg, hsl(from #43C3C5 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))), var(--secondary-dark)); border-color: transparent; color: #fff;
box-shadow: 0 6px 16px -6px hsl(from rgb(44 142 144) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .55);
}
.barra-cobro .barra-paso1:hover:not(:disabled) { color: #fff; border-color: transparent; filter: brightness(1.05); }
.barra-cobro .barra-paso1:disabled:not(.paso-hecho) { opacity: .5; cursor: not-allowed; box-shadow: none; }
.barra-cobro .barra-paso1.paso-hecho,
.barra-cobro .barra-paso1.paso-hecho:hover {
background: var(--success-soft); border-color: var(--success); color: var(--success); box-shadow: none; opacity: 1; cursor: default;
}
.barra-cobro .barra-paso1.paso-prueba,
.barra-cobro .barra-paso1.paso-prueba:hover {
background: var(--warn-soft); border-color: #DFBB74; color: #8A5308; box-shadow: none;
}
/* 354 · «Primero la nota de crédito de la N° X»: no se pulsa, pero se LEE.
Apagado al 50 % parecía roto; va en ámbar entero, con su borde punteado de
«falta un paso antes», y el porqué en el title. */
.barra-cobro .barra-paso1.paso-espera,
.barra-cobro .barra-paso1.paso-espera:disabled {
background: var(--warn-soft); border: 1.5px dashed #DFBB74; color: #8A5308;
box-shadow: none; opacity: 1; cursor: help; white-space: normal; text-align: left; line-height: 1.25;
}
/* 354 · La factura de lo añadido. Debajo del N.º de factura, las otras de la
orden («También: N° 131 (lo añadido, 29/10)»), pequeño y sin competir con la
casilla; y en la ventana de la factura, de qué factura es complemento. */
.campo-factura .ffa-tambien {
margin: 4px 0 0; font-size: .74rem; line-height: 1.35; color: var(--muted);
text-transform: none; letter-spacing: 0; font-weight: 500;
}
.campo-factura .ffa-tambien b { color: var(--secondary-dark); font-weight: 700; }
/* La tecleada que ya no es como se facturó: se dice, en ámbar, sin frenar nada */
.campo-factura .ffa-sin-nota {
margin: 4px 0 0; padding: 5px 8px; border-radius: var(--radius-sm);
background: var(--warn-soft); color: var(--warn); font-size: .74rem; line-height: 1.35;
text-transform: none; letter-spacing: 0; font-weight: 500;
}
.dialogo p.ffa-anadido {
margin: 0 0 var(--e3, 12px); padding: 9px 13px; border-radius: var(--radius-sm);
background: var(--secondary-soft); color: var(--secondary-dark); font-size: .86rem; line-height: 1.45;
}
.ffa-anadido b { color: var(--primary); }
/* 354 · «¿Cuál factura anulas?»: una tarjeta por factura vigente, elegible
entera con el ratón o con las flechas (son radios de verdad). */
.dialogo.nc-eleccion { width: min(480px, 100%); }
.nc-opciones { display: flex; flex-direction: column; gap: 8px; }
.nc-opcion {
display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
transition: border-color .18s ease, background .18s ease;
}
.nc-opcion:hover { border-color: var(--field-border); background: var(--fondo); }
.nc-opcion:has(input:checked) { border-color: var(--secondary); background: var(--secondary-soft); }
.nc-opcion:has(input:focus-visible) { outline: 2px solid var(--secondary-dark); outline-offset: 2px; }
.nc-opcion input { margin: 3px 0 0; accent-color: var(--secondary-dark); flex: none; }
.nc-opcion-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nc-opcion-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.nc-opcion-cab b { font-size: 1rem; color: var(--primary); }
.nc-opcion-tipo { font-size: .8rem; font-weight: 600; color: var(--muted); }
.nc-opcion-marca {
font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
background: var(--danger-soft); color: var(--danger);
}
.nc-opcion-cifras { font-size: .82rem; color: var(--ink); }
.nc-opcion-examenes { font-size: .8rem; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
/* La flecha entre los dos pasos */
.barra-cobro .barra-flecha {
width: 20px; height: 20px; flex: none; background: var(--muted);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Paso 2: el «2 ·» por CSS, para que sobreviva a los cambios de texto del botón */
.barra-cobro .barra-paso2::before { content: "2 · "; white-space: pre; }
/* Con la factura real ya impresa, Guardar se resalta: es lo que falta */
.barra-cobro.facturado .barra-paso2 { box-shadow: 0 0 0 4px var(--secondary-soft), var(--sombra-btn); }
@media (max-width: 860px) { .barra-cobro .barra-flecha { display: none; } }
/* Como en Cobros: «2 · Guardar Cobro» sin el iconito, que quedaba pegado al «2 ·» */
.barra-cobro .barra-paso2 > svg { display: none; }
/* ===========================================================================
268 · La referencia y la unidad del PDF, enteras y corregibles, desde
resultados (Jean, 29/09/2026: «poder verla allí mismo pulsando algo»)
=========================================================================== */
.ver-ref-pdf {
display: inline-flex; align-items: center; gap: 4px; flex: none;
padding: 2px 8px; border-radius: 999px; border: 1px solid var(--info);
background: var(--info-soft); color: var(--info); font: inherit; font-size: .72rem; font-weight: 700;
cursor: pointer;
}
.ver-ref-pdf svg { width: 13px; height: 13px; }
.ver-ref-pdf:hover { background: var(--info); color: #fff; }
.ver-ref-pdf:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
/* Que el botón no se salga de su columna (Jean, 01/10: con una referencia larga
chocaba con «= ↑ ↓» de al lado). Si no cabe junto a la referencia, baja debajo. */
.campo-rango:has(> .ver-ref-pdf) { flex-wrap: wrap; row-gap: 4px; }
.campo-rango:has(> .ver-ref-pdf) > .rango-fijo { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ver-ref-pdf { max-width: 100%; }
.dialogo.ref-pdf { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.ref-pdf h3 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.ref-de { margin: 0 0 12px; color: var(--muted); font-size: .88rem; }
.ref-de .enlace svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.ref-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ref-bloque { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--fondo); }
.ref-bloque.ref-sale { background: var(--info-soft); border-color: var(--info); margin-bottom: 12px; }
.ref-texto { margin: 0; font-family: var(--cifra); font-size: .86rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.ref-unidad { margin: 6px 0 0; font-size: .86rem; }
.ref-nada { color: var(--muted); font-style: italic; font-family: inherit; }
.ref-campo { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .86rem; margin-top: 8px; }
.ref-campo textarea, .ref-campo input { font-family: var(--cifra); font-weight: 400; width: 100%; }
.ref-poner { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.ref-nota { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.ref-pdf .casilla-linea { margin-top: 6px; }
/* 341 · «Poner el texto del PDF» (Jean, 26/10/2026): el bloque tal cual vino y
dónde ponerlo. El botón de la franja nace escondido (`revelarTextoPdf`). */
[data-poner-texto][hidden] { display: none; }
.dialogo.texto-pdf { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.texto-pdf .tp-de { margin: 0 0 8px; color: var(--muted); font-size: .88rem; }
.texto-pdf .tp-bloque {
margin: 0 0 12px; padding: 10px 12px; max-height: 38vh; overflow: auto;
background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 10px;
font: .86rem/1.4 var(--cifra); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.texto-pdf .tp-elegir { border: 0; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.texto-pdf .tp-donde {
display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; cursor: pointer;
border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px;
}
.texto-pdf .tp-donde:has(input:checked) { border-color: var(--secondary); background: var(--secondary-soft); }
.texto-pdf .tp-donde input { margin-top: 3px; flex: none; }
.texto-pdf .tp-donde b { display: block; font-size: .9rem; color: var(--ink); }
.texto-pdf .tp-donde small { display: block; font-size: .8rem; color: var(--muted); margin-top: 1px; }
.texto-pdf .tp-elegir legend { padding: 0; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
/* ===========================================================================
267 · Resultados referidos: elegir la unidad y la referencia la primera vez,
lo recién cargado y «Lo que sabe la app»
=========================================================================== */
.fz-decidir {
margin: 10px 14px 12px; padding: 12px 14px; border-radius: 10px;
border: 1.5px solid var(--warn); background: var(--warn-soft);
}
.fz-decidir > .fz-titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.fz-decidir > .fz-titulo svg { width: 18px; height: 18px; }
.fz-dec { padding: 10px 0; border-top: 1px dashed var(--line); }
.fz-dec:first-of-type { border-top: 0; padding-top: 2px; }
.fz-dec-cab { margin: 0 0 2px; }
.fz-dec-porque, .fz-dec-nota { margin: 0 0 6px; font-size: .86rem; color: var(--muted); }
.fz-dec-grupo { border: 0; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.fz-dec-grupo legend { font-weight: 800; font-size: .74rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.fz-dec-op { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.35; }
.fz-dec-op input[type=radio] { margin-top: 3px; flex: none; }
.fz-dec-rango { display: block; font-family: var(--cifra); font-size: .82rem; color: var(--ink); margin-left: 2px; }
.fz-dec-op > .fz-dec-rango { flex-basis: 100%; }
.fz-dec-op:has(.fz-dec-rango) { flex-wrap: wrap; }
.fz-dec-op:has(.fz-dec-rango) .fz-dec-rango { padding-left: 24px; }
.fz-dec-texto { font-family: var(--cifra); }
textarea.fz-dec-texto { width: 100%; margin-left: 24px; max-width: calc(100% - 24px); }
input.fz-dec-texto { width: 12ch; padding: 2px 6px; }
.fz-dec-falta { font-size: .84rem; color: var(--muted); align-self: center; }
.fz-recien-lista { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.fz-recien {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
padding: 10px 14px; border-radius: 10px; border: 1px solid var(--success); background: var(--success-soft);
}
.fz-recien-txt { display: inline; line-height: 1.5; }
.fz-recien-txt svg { width: 18px; height: 18px; color: var(--success); vertical-align: -4px; margin-right: 4px; }
.fz-recien-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.fz-memoria-lab { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin: 4px 0 8px; }
.fz-rango-fijo { font-family: var(--cifra); color: var(--muted); }
/* ===========================================================================
DAR VUELTO (Jean, 30/09/2026 · PLAN-VUELTO.md · app/vuelto.js)
La ventana reparte lo que sobra entre $ del día / caja chica, Bs en efectivo
y pago móvil del banco. Se lee de arriba abajo: cuánto sobra, cómo se
reparte, y abajo si cuadra. El «cuadra» es lo que enciende «Listo»: verde
cuando sí, ámbar cuando falta, coral cuando se pasa, como la barra de pago.
=========================================================================== */
.dialogo.dar-vuelto { width: min(600px, 100%); gap: 14px; }
.dv-cabeza {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
color: var(--muted); font-size: .9rem;
}
.dv-cabeza .dv-sobra {
font-family: var(--cifra); font-size: 2rem; font-weight: 600;
color: var(--primary); letter-spacing: -.02em;
}
/* LA BARRA QUE SE LLENA (propuesta A, Jean 30/09/2026). Vacía, a rayas; cada
reparto la pinta de su color. Los colores son los de su fila. */
.dv-barra {
height: 14px; border-radius: 999px; display: flex; overflow: hidden; margin-top: -4px;
background: repeating-linear-gradient(135deg, var(--fondo) 0 6px, hsl(from #E4EBF2 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))) 6px 12px);
box-shadow: inset 0 0 0 1px var(--line);
}
.dv-barra i { display: block; height: 100%; width: 0; transition: width .28s cubic-bezier(.2, .8, .2, 1); }
.dv-barra [data-b="bsEf"] { background: #B7730C; }
.dv-barra [data-b="pm"] { background: var(--secondary); }
.dv-barra [data-b="usd"] { background: #1E8E5A; }
@media (prefers-reduced-motion: reduce) { .dv-barra i { transition: none; } }
.dv-cabeza .dv-tasa { margin-left: auto; }
.dv-cabeza .dv-tasa b { font-family: var(--cifra); font-weight: 500; color: var(--ink); }
.dv-filas { display: flex; flex-direction: column; }
/* (Jean, 30/09/2026) El vuelto en dólares no se anota: el pago se escribe por
lo que se queda. Una nota discreta arriba, para quien lo busque. */
.dialogo p.dv-sin-dolares {
margin: 4px 0 2px; padding: 9px 12px; border-radius: 10px;
background: var(--fondo); color: var(--muted); font-size: .84rem; line-height: 1.45;
}
.dv-sin-dolares b { color: var(--ink); }
/* Las dos filas con el MISMO margen por dentro y el mismo borde (transparente
en la de bolívares): así las casillas y los «Todo» de las dos acaban a la
misma altura por la derecha (Jean: «al ras con el final del cuadro de
arriba»). */
.dv-fila {
display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
padding: 12px 14px; border: 1px solid transparent; border-left-width: 4px;
border-bottom-color: var(--line);
}
.dv-titulo { display: flex; align-items: center; gap: 8px; }
.dv-fila .dv-titulo::before {
content: ""; width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--c, var(--muted));
}
.dv-fila[data-fila="bsEf"] { --c: #B7730C; }
.dv-fila[data-fila="pm"] { --c: var(--secondary); }
.dv-fila[data-fila="usd"] { --c: #1E8E5A; }
/* Los dólares, con su casilla del mismo ancho que la del pago móvil: las dos
quedan al ras con la de bolívares. */
.dv-fila[data-fila="usd"] .dv-monto { grid-template-columns: 104px auto; }
.dv-fila[data-fila="usd"] .dv-monto .campo-monto { width: 104px; }
.dv-fila .dv-ayuda { padding-left: 19px; }
.dv-fila:last-child { border-bottom: none; }
.dv-que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-titulo { font-weight: 700; color: var(--primary); font-size: .95rem; }
.dv-ayuda { color: var(--muted); font-size: .8rem; }
.dv-origen { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.dv-origen label {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600;
border: 1.5px solid var(--field-border); color: var(--muted); background: #fff;
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dv-origen input { accent-color: var(--primary); margin: 0; }
/* Sin el recuadro del foco en el círculo (Jean, 30/09/2026: «al pulsar se ve
un cuadro dentro del círculo que se ve feo»). Era el borde de foco general
de las casillas, cuadrado sobre el círculo del navegador. Aquí sobra: la
pastilla entera ya se marca al elegirla, y con el teclado se rodea la
pastilla (la regla de :has(:focus-visible), justo debajo). */
.dv-origen input[type="radio"][type] { border-radius: 50%; }
.dv-origen input[type="radio"][type]:focus,
.dv-origen input[type="radio"][type]:focus-visible { outline: none; box-shadow: none; }
/* CUÁNTO HAY (Jean, 30/09/2026), pegado a cada origen: se lee al elegir. En la
cifra de cifras para que cuadre con la caja; «no hay» en gris claro. */
.dv-hay {
margin-left: 4px; padding-left: 7px; border-left: 1px solid var(--line);
font-family: var(--cifra); font-variant-numeric: tabular-nums;
font-size: .76rem; font-weight: 600; color: var(--muted);
}
.dv-hay.vacia { font-family: inherit; font-weight: 500; opacity: .75; }
.dv-ayuda .dv-hay { margin-left: 0; padding-left: 0; border-left: 0; }
.dv-origen label:has(input:checked) { border-color: var(--primary); color: var(--primary); background: var(--info-soft); }
.dv-origen label:has(input:focus-visible) { outline: 2px solid var(--secondary-dark); outline-offset: 2px; }
.dv-monto { display: grid; grid-template-columns: 128px auto; gap: 4px 8px; align-items: center; justify-items: end; }
.dv-monto .campo-monto { width: 128px; }
.dv-monto .dv-usd {
width: 100%; border: none; background: none; text-align: right; padding: 8px 0;
font-family: var(--cifra); font-size: 1.02rem; color: var(--ink); outline: none;
}
.dv-todo {
border: none; background: none; cursor: pointer; padding: 6px 4px;
font: inherit; font-size: .78rem; font-weight: 700; color: var(--secondary-dark);
border-radius: 6px;
}
.dv-todo:hover { background: var(--secondary-soft); }
.dv-todo:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 1px; }
.dv-bs {
grid-column: 1 / -1; font-family: var(--cifra); font-size: .82rem; color: var(--muted);
min-height: 1.1em;
}
/* Los datos del pago móvil: solo salen cuando hay algo que mandar por el banco */
.dv-pm {
margin: 0; padding: 14px 16px 12px; border: 1.5px solid var(--field-border);
border-radius: var(--radius-sm); background: var(--field-bg);
}
/* EL PAGO MÓVIL SE VE DISTINTO (Jean, 30/09/2026: «que se diferencie de lo
demás para encontrarlo rápido al ojo humano»). Es la única fila que saca
dinero del BANCO: va en su propia tarjeta turquesa, con el filo a la
izquierda, y los datos de a quién se manda, debajo, en el mismo color para
que se lean como una sola cosa. */
.dv-fila[data-fila="pm"] {
margin-top: 4px; padding: 12px 14px;
border: 1px solid hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .38); border-left: 4px solid var(--secondary);
border-radius: 12px; background: var(--secondary-soft);
}
.dv-fila:has(+ .dv-fila[data-fila="pm"]) { border-bottom: none; }
.dv-fila[data-fila="pm"] .dv-titulo { color: var(--secondary-dark); }
.dv-fila[data-fila="pm"] .dv-ayuda { color: hsl(from #2C6F71 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.dv-fila[data-fila="pm"] .caja-monto { background: #fff; }
/* La casilla del pago móvil, más estrecha: caben cuatro cifras con su «$», y
los bolívares que salen van DEBAJO, en su color, no pegados a la frase. */
.dv-fila[data-fila="pm"] .dv-monto { grid-template-columns: 104px auto; }
.dv-fila[data-fila="pm"] .dv-monto .campo-monto { width: 104px; }
/* Que la frase no ensanche la columna (si no, la casilla deja de estar al ras
con la de arriba): no cuenta para el ancho y sobresale hacia la izquierda. */
.dv-fila[data-fila="pm"] .dv-bs {
color: var(--secondary-dark); font-weight: 600; white-space: nowrap;
contain: inline-size; display: flex; justify-content: flex-end;
grid-column: 1 / 2;
}
.dv-pm:not([hidden]) {
margin: 8px 0 6px; border-color: hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .38);
border-left: 4px solid var(--secondary); background: var(--secondary-soft);
}
.dv-pm legend { background: var(--secondary-soft); border-radius: 6px; }
.dv-pm legend { padding: 0 6px; font-weight: 700; font-size: .85rem; color: var(--primary); }
/* minmax(0, 1fr) y no 1fr: con 1fr la columna crecía hasta el ancho natural de
la casilla y, en la ventana estrecha de «Corregir los datos», el teléfono y
el banco se salían por la derecha (Jean, 30/09/2026). */
.dv-pm-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.dv-pm-rejilla label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .78rem; font-weight: 700; color: var(--muted); }
.dv-pm-rejilla .dv-banco { grid-column: 1 / -1; }
.dv-pm-rejilla input, .dv-pm-rejilla select {
font: inherit; font-size: .92rem; font-weight: 500; color: var(--ink);
padding: 8px 10px; border: 1.5px solid var(--field-border); border-radius: 9px; background: #fff;
min-height: 40px; width: 100%; min-width: 0; box-sizing: border-box;
}
.dv-pm-rejilla input:focus, .dv-pm-rejilla select:focus { border-color: var(--secondary-dark); outline: none; }
.dv-doc-caja { display: flex; gap: 6px; }
.dv-doc-caja select { width: 64px; flex: none; }
.dv-doc-caja input { flex: 1; min-width: 0; font-family: var(--cifra); }
#dvTelefono, #cvTelefono { font-family: var(--cifra); }
.dialogo p.dv-nota { margin-top: 10px; font-size: .8rem; color: var(--muted); }
/* Bajo la barra: lo que falta (o que cuadra) y cuánto va de cuánto. */
.dv-cuenta {
display: flex; align-items: center; gap: 10px; justify-content: space-between;
margin-top: -6px; font-weight: 600; font-size: .88rem;
}
.dv-cuenta > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.dv-cuenta b { font-family: var(--cifra); }
.dv-cuenta svg { width: 17px; height: 17px; flex: none; }
.dv-cuenta .dv-lleva { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-weight: 500; }
.dv-cuenta.cuadra { color: #14724A; }
.dv-cuenta.falta { color: #8A5308; }
.dv-cuenta.pasa { color: var(--danger); }
/* (Jean, 06/10/2026) El pie, solo Cancelar y Listo en una fila; «lo que falta
queda para la clínica» es una tarjeta encima, con su monto. */
.dv-pie { align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.dv-pie .btn { white-space: nowrap; }
.dv-dejar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 12px; margin-top: 4px;
padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); cursor: pointer; }
.dv-dejar[hidden] { display: none; }
.dv-dejar:hover { border-color: var(--field-border); }
.dv-dejar:has(input:checked) { border-color: var(--secondary); background: var(--secondary-soft); }
.dv-dejar input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; }
.dv-dejar-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dv-dejar-texto b { font-size: .92rem; }
.dv-dejar-texto small { font-size: .8rem; color: var(--muted); }
.dv-dejar-monto { font: 600 1.05rem var(--cifra); font-variant-numeric: tabular-nums; color: var(--primary); white-space: nowrap; }
.dialogo p.dv-aviso { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; color: #8A5308; }
.dv-aviso span { display: flex; gap: 6px; align-items: flex-start; }
.dv-aviso svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
@media (max-width: 520px) {
.dv-fila { grid-template-columns: 1fr; }
.dv-monto { justify-items: start; }
.dv-pm-rejilla { grid-template-columns: 1fr; }
.dv-cabeza .dv-tasa { margin-left: 0; width: 100%; }
}
/* El botón en la barra de pago, y el reparto ya hecho */
.resumen-pago .btn-dar-vuelto {
margin-left: 4px; align-self: center;
border: 1.5px solid #8A5308; background: #fff; color: #8A5308;
border-radius: 999px; padding: 5px 13px; font: inherit; font-size: .82rem; font-weight: 700;
cursor: pointer; transition: background .14s ease, color .14s ease;
}
.resumen-pago .btn-dar-vuelto:hover { background: #8A5308; color: #fff; }
.resumen-pago .btn-dar-vuelto:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 2px; }
.resumen-pago.estado-vuelto { background: var(--success-soft); border-left-color: #14724A; }
.resumen-pago.estado-vuelto .estado-pago { color: #14724A; }
.resumen-pago .vuelto-dice { flex-basis: 100%; text-align: right; font-size: .82rem; color: #14724A; font-weight: 600; }
.resumen-pago.estado-vuelto .btn-dar-vuelto { border-color: #14724A; color: #14724A; }
.resumen-pago.estado-vuelto .btn-dar-vuelto:hover { background: #14724A; color: #fff; }
/* (Jean, 30/09/2026) El mismo «Dar vuelto» en la pregunta «Sobran $…», junto al
«Sí, lo deja a la clínica»: mismo ámbar que el de la barra, para que se
reconozca como el mismo botón. */
.dialogo-botones .btn.btn-dar-vuelto { border: 1.5px solid #8A5308; background: #fff; color: #8A5308; font-weight: 700; }
.dialogo-botones .btn.btn-dar-vuelto:hover { background: #8A5308; color: #fff; }
/* El comprobante del vuelto por pago móvil */
.dialogo.comprobante-vuelto { width: min(460px, 100%); }
.cv-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.cv-estado { display: flex; align-items: center; gap: 12px; }
.cv-estado h2 { margin: 0; }
.cv-estado > svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 999px; }
.cv-estado.bien > svg { background: var(--success-soft); color: #14724A; }
.cv-estado.mal > svg { background: var(--danger-soft); color: var(--danger); }
.cv-estado.duda > svg { background: var(--warn-soft); color: #8A5308; }
.cv-rueda {
width: 26px; height: 26px; flex: none; border-radius: 999px;
border: 3px solid var(--line); border-top-color: var(--secondary-dark);
animation: cvGira .8s linear infinite;
}
@keyframes cvGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cv-rueda { animation-duration: 2.4s; } }
.dialogo p.cv-monto {
display: flex; flex-direction: column; gap: 2px;
font-family: var(--cifra); font-size: 1.9rem; font-weight: 600; color: var(--primary);
letter-spacing: -.02em; line-height: 1.15;
}
.cv-monto small { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.dialogo p.cv-a { color: var(--muted); font-size: .88rem; }
.cv-ref {
display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
border-radius: 10px; background: var(--success-soft);
}
.cv-ref span { font-size: .78rem; font-weight: 700; color: #14724A; }
.cv-ref b { font-family: var(--cifra); font-size: 1.35rem; color: var(--ink); letter-spacing: .02em; }
.dialogo p.cv-motivo { padding: 10px 12px; border-radius: 10px; background: var(--neutro-soft); font-weight: 600; }
.dialogo p.cv-texto { color: var(--muted); }
/* EL RECHAZO EN PALABRAS DE LA CAJA (Jean, 30/09/2026): primero qué pasó, en
negrita; debajo qué hacer; y la frase del banco al final, pequeña y gris,
para quien tenga que reclamarle al banco. */
.cv-rechazo {
display: flex; flex-direction: column; gap: 4px;
padding: 11px 13px; border-radius: 10px;
background: var(--danger-soft); border-left: 3px solid var(--danger);
}
.cv-rechazo b { color: var(--danger); font-size: .98rem; }
.cv-rechazo span { color: var(--ink); font-size: .9rem; line-height: 1.45; }
.cv-rechazo small { color: var(--muted); font-size: .76rem; margin-top: 2px; }
/* La fila de Bs en efectivo lleva dos casillas: $ y Bs, y cada una calcula la otra */
.dv-monto.doble { grid-template-columns: 112px 142px auto; }
.dv-monto.doble .campo-monto { width: auto; }
.dv-monto .dv-bsin {
width: 100%; border: none; background: none; text-align: right; padding: 8px 0;
font-family: var(--cifra); font-size: 1.02rem; color: var(--ink); outline: none;
}
@media (max-width: 520px) { .dv-monto.doble { grid-template-columns: 1fr 1fr auto; width: 100%; } }
/* ===========================================================================
(Jean, 01/10/2026) «VERIFICAR PAGO MÓVIL / TRANSFERENCIA», DISEÑO A2 —
IDÉNTICO A COBROS (allí: PLAN_VENTANA_VERIFICAR_PAGO.md). Prefijo `pmv-`.
=========================================================================== */
.dialogo.pmv { width: min(820px, 100%); padding: 0; gap: 0; overflow: hidden; border-top: 4px solid var(--secondary);
max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.pmv-cab { display: flex; align-items: flex-start; gap: 12px; background: var(--primary); padding: 16px 22px; }
.dialogo .pmv-cab h2 { margin: 0; font-size: 1.2rem; color: #fff; letter-spacing: -.01em; font-weight: 800; }
.pmv-cab p { margin: 3px 0 0; color: hsl(from #B9CCE0 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); font-size: .86rem; }
.pmv-cab .dialogo-cerrar { position: static; margin-left: auto; width: 34px; height: 34px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.pmv-cab .dialogo-cerrar:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.pmv-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 4px; overflow: auto; }
#pmEstado { display: flex; flex-direction: column; gap: 18px; }
.pmv-sec h4 { margin: 0 0 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
.pmv svg { flex: none; }
.pmv-cuenta { display: grid; grid-template-columns: auto auto auto auto 1fr; column-gap: 24px; align-items: end;
background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 14px; padding: 14px 18px; }
.pmv-op { color: var(--muted); font-family: var(--cifra); font-size: 1.2rem; padding-bottom: 4px; }
.pmv-dato span { display: block; font-size: .76rem; font-weight: 600; color: hsl(from #51637A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.pmv-dato b { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
.pmv-dato b small { font-size: .72em; font-weight: 500; }
.pmv-res { justify-self: end; min-width: 200px; text-align: right; border-radius: 10px; padding: 6px 12px; }
.pmv-res span { font-weight: 700; }
.pmv-res b { font-size: 1.45rem; }
.pmv-res.falta { background: var(--danger-soft); } .pmv-res.falta span, .pmv-res.falta b { color: var(--danger); }
.pmv-res.cuadra { background: var(--success-soft); } .pmv-res.cuadra span, .pmv-res.cuadra b { color: var(--success); }
.pmv-res.sobra { background: var(--warn-soft); } .pmv-res.sobra span, .pmv-res.sobra b { color: var(--warn); }
.pmv-elegidos { display: grid; gap: 6px; }
.pmv-elegido { display: grid; grid-template-columns: 70px 142px minmax(0, 1fr) 92px 30px; gap: 12px; align-items: center;
border: 1px solid; border-radius: 12px; padding: 8px 8px 8px 14px; font-size: .9rem; }
.pmv-elegido.corto { background: #FFF1DF; border-color: #F0C58C; }
.pmv-elegido.corto .hora { color: var(--warn); }
.pmv-elegido.completo { background: var(--success-soft); border-color: #A9D9BF; }
.pmv-elegido.completo .hora { color: var(--success); }
.pmv-elegido .hora { font-family: var(--cifra); font-weight: 600; white-space: nowrap; }
.pmv-elegido .monto { font-family: var(--cifra); font-weight: 600; text-align: right; white-space: nowrap; }
.pmv-elegido .quien { color: hsl(from #51637A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmv-quitar { width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 0; background: transparent; color: var(--muted);
display: grid; place-items: center; cursor: pointer; }
.pmv-quitar:hover { background: #fff; color: var(--danger); }
.pmv-quitar svg, .pmv-caja svg, .pmv-chip svg { width: 14px; height: 14px; }
.pmv-nota-sobra { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px;
background: var(--warn-soft); color: #6E4508; font-size: .88rem; }
.pmv-nota-sobra svg { width: 18px; height: 18px; color: var(--warn); }
/* La referencia: los 4 últimos en un cuadro amarillo. */
.pmv .ref { font-family: var(--cifra); font-size: .84rem; color: var(--muted); white-space: nowrap; }
.pmv .ref b { display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 6px;
background: #FFE9A6; border: 1px solid #EDC75A; color: #4F3500; font-weight: 600; letter-spacing: .02em; }
.pmv .pmv-fila.ocupada .ref b { background: #FBF3D9; border-color: #EBDDB0; color: #7A6A45; }
.pmv-herr { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pmv-buscar { flex: 1; position: relative; margin: 0; }
.pmv-buscar svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.pmv-buscar input { width: 100%; height: 40px; margin: 0; padding: 0 12px 0 38px; border-radius: 11px;
border: 1px solid var(--field-border); background: var(--field-bg); font: inherit; color: var(--ink); }
.pmv-buscar input:focus { outline: none; border-color: var(--secondary-dark); box-shadow: 0 0 0 3px var(--secondary-soft); background: #fff; }
.pmv-dia { display: flex; align-items: center; height: 40px; border: 1px solid var(--field-border); border-radius: 11px; background: #fff; }
.pmv-dia button { width: 34px; height: 38px; border: 0; background: transparent; color: var(--primary); font-size: 1.2rem; cursor: pointer; }
.pmv-dia button:disabled { color: hsl(from #B4C2D1 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); cursor: default; }
.pmv-dia span { min-width: 92px; text-align: center; font-size: .86rem; font-weight: 600; color: var(--primary); }
.pmv-icono { width: 40px; height: 40px; padding: 0; border-radius: 11px; border: 1px solid var(--field-border); background: #fff;
color: var(--primary); display: grid; place-items: center; cursor: pointer; }
.pmv-icono:hover { background: var(--fondo); }
.pmv-icono.girando svg { animation: pmvGira .9s linear infinite; }
@keyframes pmvGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pmv-icono.girando svg { animation: none; } }
.pmv-tabla { border: 1px solid var(--field-border); border-radius: 12px; max-height: 330px; overflow: auto; }
/* El estado aquí es más largo que en Cobros («Usado Capitolio · cobro 22351»): más ancho. */
.pmv-thead, .pmv-fila { display: grid; grid-template-columns: 24px 68px 112px minmax(0, 1fr) 88px 210px; gap: 9px; align-items: center; }
.pmv-thead { position: sticky; top: 0; z-index: 1; background: var(--primary); color: #fff; padding: 9px 14px;
font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.pmv-thead .der { text-align: right; }
.pmv-fila { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 10px 14px;
text-align: left; font: inherit; font-size: .88rem; color: var(--ink); }
.pmv-fila:last-child { border-bottom: 0; }
.pmv-fila:nth-child(odd) { background: hsl(from #F7FAFC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.pmv-fila .hora { font-family: var(--cifra); color: var(--muted); white-space: nowrap; }
.pmv-fila .monto { font-family: var(--cifra); font-weight: 600; text-align: right; color: var(--primary); white-space: nowrap; }
.pmv-fila .quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmv-fila .estado { display: flex; justify-content: flex-end; }
.pmv-caja { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid hsl(from #9DB0C3 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); display: grid; place-items: center; color: #fff; }
.pmv-fila.libre { cursor: pointer; }
.pmv-fila.libre:hover, .pmv-fila.libre:focus-visible { background: var(--secondary-soft); }
.pmv-fila.elegida, .pmv-fila.elegida:nth-child(odd) { cursor: pointer; background: var(--success-soft); }
.pmv-fila.elegida .pmv-caja { background: var(--success); border-color: var(--success); }
.pmv-fila.elegida.corto, .pmv-fila.elegida.corto:nth-child(odd) { background: #FFF1DF; }
.pmv-fila.elegida.corto .pmv-caja { background: var(--warn); border-color: var(--warn); }
.pmv-fila.ocupada, .pmv-fila.ocupada:nth-child(odd) { background: hsl(from #F1F5F9 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: #7D8DA0; }
.pmv-fila.ocupada .monto { color: #7D8DA0; }
.pmv-fila.ocupada .pmv-caja { visibility: hidden; }
.pmv-ocupado .pmv-fila.libre { pointer-events: none; opacity: .6; }
.pmv-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: .74rem;
font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pmv-chip.tuyo { background: var(--success-soft); color: var(--success); }
.pmv-chip.usada { background: #EDF1F6; color: #5C6B7F; }
.pmv-chip.enuso { background: var(--warn-soft); color: #8A5609; }
.pmv-chip.justo { background: var(--secondary-soft); color: hsl(from #1F6F71 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.pmv-vacio { padding: 22px; text-align: center; color: var(--muted); font-size: .9rem; }
.pmv-pie { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px;
padding: 14px 22px 18px; background: hsl(from #F4F8FB calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-top: 1px solid var(--field-border); }
.pmv-pista { margin: 0 auto 0 0; font-size: .84rem; color: var(--muted); }
/* (Jean, 06/10/2026) Cancelar y Confirmar siempre en una fila */
.pmv-pie > .btn { white-space: nowrap; }
.pmv-pista[hidden] { display: none; }
.btn.primario.pmv-confirmar { background: #1E8E5A; border-color: #1E8E5A; }
.btn.primario.pmv-confirmar.falta { background: #E8730C; border-color: #E8730C; opacity: 1; }
@media (max-width: 760px) {
.pmv-cuenta { grid-template-columns: 1fr 1fr; } .pmv-op { display: none; }
.pmv-res { grid-column: 1 / -1; justify-self: stretch; text-align: left; }
.pmv-elegido { grid-template-columns: 62px 1fr 30px; } .pmv-elegido .quien, .pmv-elegido .ref { display: none; }
.pmv-thead, .pmv-fila { grid-template-columns: 22px 62px 1fr auto; }
.pmv-thead span:nth-child(4), .pmv-thead span:nth-child(5), .pmv-fila .quien, .pmv-fila .ref { display: none; }
}
/* ===========================================================================
(Jean, 01/10/2026) EL COMPROBANTE DEL VUELTO, MODELO «A», IDÉNTICO A COBROS.
Cabecera azul marino con su sello, el monto sobre el azul de las casillas, la
referencia con los 4 últimos en amarillo y el pie azulado. Prefijo `cva-`.
=========================================================================== */
.dialogo.comprobante-vuelto.cva { width: min(460px, 100%); padding: 0; gap: 0; overflow: hidden; border-top: 4px solid var(--secondary); }
.dialogo.cva .cv-cuerpo { gap: 0; }
.cva-cab { display: flex; align-items: center; gap: 12px; background: var(--primary); padding: 16px 18px 16px 20px; }
.dialogo .cva-cab h2 { margin: 0; color: #fff; font-size: 1.1rem; letter-spacing: -.01em; }
.cva-cab p { margin: 2px 0 0; color: hsl(from #B9CCE0 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); font-size: .82rem; }
.cva-sello { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; flex: none; color: #fff; }
.cva-sello svg { width: 20px; height: 20px; }
.cva-sello.bien { background: #1E8E5A; }
.cva-sello.mal { background: var(--danger); }
.cva-sello.duda, .cva-sello.aviso { background: #B7730C; }
.cva-sello.yendo { background: rgba(255, 255, 255, .12); }
.cva-sello.yendo .cv-rueda { width: 22px; height: 22px; border-color: rgba(255, 255, 255, .28); border-top-color: #fff; }
.cva-cab .dialogo-cerrar { position: static; margin-left: auto; width: 34px; height: 34px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.cva-cab .dialogo-cerrar:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.cva-cuerpo { padding: 18px 20px 2px; display: flex; flex-direction: column; gap: 14px; }
.cva-monto { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 14px; padding: 14px 16px; }
.cva-monto span { display: block; font-size: .76rem; font-weight: 600; color: hsl(from #51637A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.cva-monto b { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 600;
color: var(--primary); letter-spacing: -.02em; white-space: nowrap; }
.cva-monto b small { font-size: .55em; font-weight: 500; }
.cva-usd { font-family: var(--cifra); font-size: .82rem; color: var(--muted); text-align: right; white-space: nowrap; }
.cva-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
.cva-datos dt { color: var(--muted); font-size: .8rem; font-weight: 600; }
.cva-datos dd { margin: 0; color: var(--ink); }
.cva-ref { display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--success-soft); border: 1px solid #A9D9BF; border-radius: 12px; padding: 10px 10px 10px 14px; }
.cva-ref span { display: block; font-size: .72rem; font-weight: 700; color: #14724A; text-transform: uppercase; letter-spacing: .05em; }
.cva-ref b { font-family: var(--cifra); font-size: 1.15rem; letter-spacing: .04em; color: var(--ink); }
.cva-ref b em { font-style: normal; margin-left: 1px; padding: 0 5px; border-radius: 6px;
background: #FFE9A6; border: 1px solid #EDC75A; color: #4F3500; }
.cva-pie { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px;
padding: 14px 20px 18px; background: hsl(from #F4F8FB calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-top: 1px solid var(--field-border); }
@media (max-width: 480px) { .cva-pie .btn { flex: 1 1 100%; justify-content: center; } }
/* ===========================================================================
(Jean, 01/10/2026) EL SOBRANTE EN «VERIFICAR PAGO MÓVIL», IGUAL QUE EN COBROS.
La pregunta en ámbar, dos tarjetas («Quedan para la clínica» /
«Devolvérselos por pago móvil») y, si se devuelve, a quién.
=========================================================================== */
.pmv-sec h4.pmv-pregunta { color: var(--warn); font-size: .86rem; letter-spacing: .04em; margin-bottom: 10px; }
.pmv-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pmv-opcion { position: relative; border: 1.5px solid var(--field-border); background: hsl(from #F5F9FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-radius: 12px;
padding: 12px 14px 12px 42px; cursor: pointer; transition: border-color .2s, background .2s; }
.pmv-opcion input { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; margin: 0; accent-color: var(--secondary-dark); }
.pmv-opcion b { display: block; font-size: .92rem; color: var(--primary); }
.pmv-opcion span { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.pmv-opcion:has(input:checked) { border-color: var(--secondary-dark); background: var(--secondary-soft); }
.pmv-opcion:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--secondary-soft); }
.pmv-pm { margin-top: 10px; border: 1px solid var(--field-border); background: hsl(from #F5F9FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-radius: 12px; padding: 12px 14px; }
.pmv-pm p { margin: 0 0 10px; font-size: .84rem; color: hsl(from #51637A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.pmv-pm p b { font-family: var(--cifra); color: var(--primary); }
.pmv-pm-rejilla { display: grid; grid-template-columns: 1.1fr 1fr 1.5fr; gap: 10px; }
.pmv-pm label { display: grid; gap: 4px; font-size: .76rem; font-weight: 600; color: hsl(from #51637A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.pmv-pm input, .pmv-pm select { height: 40px; margin: 0; }
.pmv-pm input[type=text] { width: 100%; min-width: 0; background: var(--field-bg); border: 1px solid var(--field-border);
border-radius: 11px; padding: 0 12px; font: inherit; font-size: .95rem; color: var(--ink); }
.pmv-pm input[type=text]:focus { outline: none; border-color: var(--secondary-dark); box-shadow: 0 0 0 3px var(--secondary-soft); background: #fff; }
.pmv-pm select { border: 1px solid var(--field-border); border-radius: 11px; background: #fff; padding: 0 8px; font: inherit; font-size: .9rem; }
.pmv-ced { display: flex; gap: 6px; }
.pmv-ced select { flex: none; width: 58px; }
@media (max-width: 760px) { .pmv-opciones, .pmv-pm-rejilla { grid-template-columns: 1fr; } }
/* ===========================================================================
(Jean, 01/10/2026) LA FACTURA FISCAL CON EL COLOR DE COBROS («ponerle un poco
de color a este cuadro, está muy pálido»). El color dice DÓNDE MIRAR: el
papel va sobre una bandeja azul marino, como un ticket sobre el mostrador; lo
elegido, en color; los bloques, blancos con un tinte turquesa; la cabecera,
una banda turquesa clara de lado a lado (no azul: el azul fuerte es del
papel). Solo esta ventana (`.ffa-color`, la pone dialogoFacturaFiscal).
=========================================================================== */
.dialogo.ffa-color .ifp-cab { margin: -24px -24px 16px; padding: 14px 56px 14px 22px;
border-radius: var(--radius) var(--radius) 0 0;
background: linear-gradient(100deg, hsl(from #D9F0F1 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))) 0%, hsl(from #EAF5F6 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))) 45%, hsl(from #F3F7FB calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))) 100%);
border-bottom: 1px solid hsl(from #CDE4E7 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.dialogo.ffa-color .ifp-cab h2 { color: var(--primary); font-size: 1.22rem; }
.dialogo.ffa-color .ifp-cab h2 svg { width: 36px; height: 36px; padding: 7px; border-radius: 10px;
background: #fff; border: 1.5px solid hsl(from #9BD3D4 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); color: var(--secondary-dark); box-sizing: border-box;
box-shadow: 0 4px 10px -6px hsl(from rgb(44 142 144) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .6); }
.dialogo.ffa-color > .dialogo-cerrar { top: 17px; right: 14px; background: #fff; }
.dialogo.ffa-color .ifp-bloque { border-color: hsl(from #D5E7EA calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); background: linear-gradient(180deg, hsl(from #EEF8F8 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))) 0, #fff 52px); }
.dialogo.ffa-color .ifp-bloque-titulo { color: var(--primary); }
.dialogo.ffa-color .ifp-seg { background: hsl(from #E3ECF4 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.dialogo.ffa-color .ifp-seg button[aria-pressed="true"] { background: var(--primary); color: #fff;
box-shadow: 0 4px 10px -4px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .55); }
.dialogo.ffa-color .ffa-lado { padding: 16px 18px 18px; border-radius: var(--radius);
background: linear-gradient(160deg, hsl(from #1A4A78 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))) 0%, var(--primary) 70%);
box-shadow: 0 18px 34px -22px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .8); }
.dialogo.ffa-color .ffa-lado h4 { color: hsl(from #BFE6E7 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a))); }
.dialogo.ffa-color .ffa-lado p.ffa-ayuda { color: hsl(from #C9D7E6 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.dialogo.ffa-color .ffa-papel { border-color: transparent; box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .55); }
.dialogo.ffa-color .ffa-papel::after { filter: none; }
.dialogo.ffa-color .ffa-pie .ffa-cuenta b:last-child { padding: 2px 9px; border-radius: 999px;
background: var(--secondary-soft); color: var(--secondary-dark); }
/* ==========================================================================
VERIFICAR PAGO EN DIVISAS (287/289, Jean, 04/10/2026: «lo copias al 100%»)
Los estilos de Cobros (su bloque «VERIFICAR PAGO EN DIVISAS» del 04/10)
sobre la ventana A2 del pago móvil (`.pmv-`). Lo nuevo es la columna del
método (el color de cada banco en un punto, no en toda la fila), las
pestañas por banco, el ojito del correo y los montos en dólares.
========================================================================== */
.dialogo.pmv.pc2 { width: min(900px, 100%); }
#pcEstado { display: flex; flex-direction: column; gap: 18px; }
.pc-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pc-pestana { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
border: 1px solid var(--field-border); border-radius: 999px; background: #fff; color: var(--primary);
font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.pc-pestana:hover { background: var(--fondo); }
.pc-pestana.activa { background: var(--primary); border-color: var(--primary); color: #fff; }
.pc-pestana.activa .pc-metodo { color: #fff; }
.pc-pestana:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 2px; }
.pc-cuenta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
background: var(--field-bg); color: var(--primary); font-family: var(--cifra); font-size: .74rem; font-variant-numeric: tabular-nums; }
.pc-pestana.activa .pc-cuenta { background: rgba(255,255,255,.18); color: #fff; }
.pc-metodo { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
.pc-metodo i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pc-metodo.claro { color: #fff; }
.pmv-thead.pc-thead, .pmv-fila.pc-fila { grid-template-columns: 24px 68px 112px 92px minmax(0,1fr) 84px 150px 30px; }
/* El ojito. Apagado cuando el correo ya no se guarda (30 días). */
.pc-ojo { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--primary);
display: grid; place-items: center; cursor: pointer; padding: 0; }
.pc-ojo:hover, .pc-ojo:focus-visible { background: var(--secondary-soft); color: var(--secondary-dark); outline: none; }
.pc-ojo:focus-visible { box-shadow: 0 0 0 2px var(--secondary-dark); }
.pc-ojo.apagado { color: hsl(from #B4C2D1 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); cursor: not-allowed; background: transparent; }
/* La ventana del correo: el correo del banco a su ancho natural (~600px). */
.dialogo.pmv.pc-correo-dlg { width: min(720px, 100%); height: min(88vh, 900px); display: flex; flex-direction: column; }
.pc-correo-dlg .pmv-cab p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-correo-marco { flex: 1; width: 100%; border: 0; background: #fff; }
.pc-fila .quien, .pc-elegido .quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pc-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-nota { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-fila .hora.aprox { text-decoration: underline dotted hsl(from #9DB0C3 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); text-underline-offset: 3px; cursor: help; }
.pc-fila.ocupada .pc-metodo { color: #7D8DA0; }
.pc-sinref { color: hsl(from #B4C2D1 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.pmv-elegido.pc-elegido { grid-template-columns: 68px 112px 92px minmax(0,1fr) 30px 30px; }
.pc-sobra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
background: var(--warn-soft); color: #6B4A12; font-size: .86rem; line-height: 1.4; }
.pc-sobra .pc-cifra { font-family: var(--cifra); }
/* El botón de la orden cuando se guarda sin el aviso, con clave: ámbar, no verde. */
.btn.btn-verificar-pm.sin-aviso, .btn.btn-verificar-pm.sin-aviso:hover:not(:disabled) {
background: var(--warn-soft); border-color: #E8C27A; color: #7A4E06; }
/* (Revisión del 04/10) «Usado en el laboratorio · orden #10441 · 04/10» no
cabe en 150 px: la pastilla de la piel .pmv- lo cortaba con «…» y justo ese
enlace era lo que pidió Jean. Aquí puede ir en dos renglones (y lleva su
title con el texto entero). */
.pc-fila .pmv-chip { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; text-align: right; }
/* (Revisión del 04/10, lo mismo que Cobros) Estrecho —el panel de la app mide
~747 px—: antes se escondían quién pagó, la referencia y el método. Nada se
esconde (regla de Jean): cada aviso va en DOS renglones, y no manda el ancho
de la pantalla sino el de la propia lista (container query). */
.pc2 .pmv-tabla, .pc2 .pmv-elegidos { container-type: inline-size; }
@container (max-width: 760px) {
.pmv-thead.pc-thead { display: none; }
.pmv-fila.pc-fila {
grid-template-columns: 22px 60px minmax(0, 1fr) auto 30px;
grid-template-areas: "caja hora quien monto ojo" "caja metodo ref estado ojo";
row-gap: 3px;
}
.pc-fila > .pmv-caja { grid-area: caja; } .pc-fila > .hora { grid-area: hora; }
.pc-fila > .pc-metodo { grid-area: metodo; } .pc-fila > .monto { grid-area: monto; }
.pc-fila > .quien { grid-area: quien; } .pc-fila > .ref { grid-area: ref; }
.pc-fila > .estado { grid-area: estado; } .pc-fila > .pc-ojo { grid-area: ojo; }
.pc-fila > .quien, .pc-fila > .ref, .pc-fila > .pc-metodo { display: flex; }
}
@container (max-width: 540px) {
.pmv-elegido.pc-elegido {
grid-template-columns: 60px minmax(0, 1fr) auto 30px 30px;
grid-template-areas: "hora quien monto ojo x" "metodo quien monto ojo x";
row-gap: 3px;
}
.pc-elegido > .hora { grid-area: hora; } .pc-elegido > .pc-metodo { grid-area: metodo; }
.pc-elegido > .monto { grid-area: monto; } .pc-elegido > .quien { grid-area: quien; }
.pc-elegido > .pc-ojo { grid-area: ojo; } .pc-elegido > :last-child { grid-area: x; }
}
@media (max-width: 760px) {
.pc-sobra { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
PAGOS SIN EL AVISO DEL BANCO, EN LA CAJA (290, Jean, 04/10/2026)
El mismo aire que «Vueltos por pago móvil»: filo ámbar, aviso ámbar y una
fila por pago con lo que le pasa delante. Lo que espera a alguien
(«pendiente», «sin verificar») lleva el filo; lo guardado con clave, no.
========================================================================== */
.sa-bloque { box-shadow: inset 3px 0 0 var(--warn); }
.sa-bloque .bloque-cabecera .apunte { margin-left: auto; font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.sa-aviso { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 13px; border-radius: 10px;
background: var(--warn-soft); color: #6E4606; font-size: .88rem; line-height: 1.45; }
.sa-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--warn); }
.sa-aviso b { color: #5A3905; }
.sa-lista { display: flex; flex-direction: column; gap: 6px; }
.sa-fila { display: grid; grid-template-columns: 116px minmax(0, 1.2fr) 112px minmax(0, 1.6fr) auto; gap: 12px;
align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sa-fila.pendiente { box-shadow: inset 3px 0 0 var(--warn); }
.sa-fila small { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-tipo { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px;
font-size: .78rem; font-weight: 700; white-space: nowrap; }
.sa-tipo.divisas { background: var(--field-bg); color: var(--primary); }
.sa-tipo.divisas i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sa-tipo.bs { background: var(--secondary-soft); color: var(--secondary-dark); }
.sa-orden { min-width: 0; color: var(--ink); font-size: .9rem; }
.sa-orden b { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.sa-monto { text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.sa-que { min-width: 0; font-size: .86rem; color: #6E4606; font-weight: 600; }
.sa-fila.a-mano .sa-que { color: var(--ink); font-weight: 500; }
.sa-botones { display: flex; gap: 6px; justify-content: flex-end; }
.sa-bloque.sa-llamar { animation: saLlamar 1.6s ease-out; }
@keyframes saLlamar { 0%, 40% { box-shadow: inset 3px 0 0 var(--warn), 0 0 0 4px rgba(193, 122, 16, .35); }
100% { box-shadow: inset 3px 0 0 var(--warn), 0 0 0 0 rgba(193, 122, 16, 0); } }
@media (prefers-reduced-motion: reduce) { .sa-bloque.sa-llamar { animation: none; } }
@media (max-width: 760px) {
.sa-fila { grid-template-columns: 1fr auto; }
.sa-monto { grid-row: 1; grid-column: 2; }
.sa-orden, .sa-que { grid-column: 1 / -1; }
.sa-botones { grid-column: 1 / -1; justify-content: flex-start; }
}
/* ===========================================================================
296 · CUENTAS CON LABORATORIOS (Jean, 05/10/2026) — app/cuentas-laboratorios.js
La ventana de Envíos de tamaño y de piel (las tarjetas con el color de cada
laboratorio, ref-*), pero lo que manda aquí es el dinero: «Por pagar» en
cifra grande y mono en cada tarjeta, y la tabla con la columna del precio.
(Revisión del 05/10: el verde de «pagado» más oscuro —3,7 de contraste no
se leía—, la letra de la casa en las tarjetas, las filas «sin precio» todas
resaltadas, sin cabecera pegajosa —su caja no es la que se desplaza— y a
lo ancho en el teléfono.)
=========================================================================== */
/* El velo es una rejilla que crece con el contenido: el ancho va fijado a la
pantalla menos su margen (20 px a cada lado), si no se sale en el teléfono */
.dialogo.cuentas-lab { width: min(1080px, calc(100vw - 40px)); max-width: 1080px; height: min(820px, 92vh); gap: 12px; }
.dialogo.cuentas-lab .lx-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dialogo.cuentas-lab .lx-cabecera h2 { font: 800 1.55rem var(--display); color: var(--primary); }
.dialogo.cuentas-lab .lx-cabecera .apunte { margin: 2px 0 0; max-width: 70ch; }
.cl-cuerpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px; }
.cl-contenido { display: flex; flex-direction: column; gap: 12px; }
.cl-cifra { font-family: var(--cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-pestanas { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--line); }
.cl-pestanas button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font: 600 .9rem var(--font); color: var(--muted); cursor: pointer; }
.cl-pestanas button.activa { background: #fff; color: var(--primary); box-shadow: var(--sombra); }
.cl-pestanas button:focus-visible, .cl-chip:focus-visible, .cl-lab:focus-visible, .cl-pago-ver:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.cl-fechas { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.cl-fechas label { display: inline-flex; align-items: center; gap: 6px; font: 600 .8rem var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cl-fechas input { font: 500 .92rem var(--font); color: var(--ink); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm); padding: 6px 10px; text-transform: none; letter-spacing: 0; }
.cl-fechas .cl-busca input { width: min(320px, 70vw); }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 12px; font: 600 .84rem var(--font); cursor: pointer; }
.cl-chip span { font-family: var(--cifra); color: var(--muted); margin-left: 2px; }
.cl-chip.activa { background: var(--primary); border-color: var(--primary); color: #fff; }
.cl-chip.activa span { color: hsl(from #CFE0F2 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.cl-chip.aviso:not(.activa) { border-color: #E9C98F; color: var(--warn); }
.cl-labs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cl-lab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; cursor: pointer; font: inherit;
background: #fff; border: 1.5px solid var(--ref-aro, var(--line)); border-radius: var(--radius); padding: 14px 16px; color: var(--ink);
transition: box-shadow .15s ease, border-color .15s ease; }
.cl-lab:hover { box-shadow: var(--sombra); border-color: var(--ref, var(--line)); }
.cl-lab.activa { background: var(--ref-soft); border-width: 2.5px; box-shadow: 0 0 0 4px var(--ref-aro); }
.cl-lab.en-cero:not(.activa) { border-style: dashed; }
.cl-lab-nombre { font: 800 1.02rem var(--display); color: var(--ref, var(--primary)); letter-spacing: .02em; }
.cl-lab-debe { display: flex; flex-direction: column; margin: 4px 0 2px; }
.cl-lab-debe small { font: 600 .72rem var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cl-lab-debe .cl-cifra { font-size: 1.7rem; font-weight: 600; color: var(--primary); line-height: 1.1; }
.cl-lab.en-cero .cl-lab-debe .cl-cifra { color: var(--muted); }
.cl-lab-datos { font-size: .84rem; color: var(--muted); }
.cl-lab.activa .cl-lab-datos, .cl-lab.activa .cl-lab-debe small { color: var(--ink); }
.cl-estado { display: inline-flex; align-items: center; margin-top: 6px; border-radius: 999px; padding: 2px 10px; font: 700 .76rem var(--font); }
.cl-estado.debe { background: var(--warn-soft); color: var(--warn); }
.cl-estado.aviso { background: var(--danger-soft); color: var(--danger); }
.cl-estado.bien { background: var(--success-soft); color: #15603E; }
.cl-estado.neutro { background: var(--neutro-soft); color: var(--neutro); }
.cl-tabla .cl-estado { margin-top: 0; }
.cl-detalle { border: 1.5px solid var(--ref-aro, var(--line)); border-radius: var(--radius); background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cl-d-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cl-d-cab h3 { margin: 0; font: 800 1.1rem var(--display); color: var(--ref, var(--primary)); }
.cl-d-cab h3 small { font: 500 .85rem var(--font); color: var(--muted); margin-left: 6px; }
.cl-resumen { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.cl-resumen b { color: var(--primary); }
/* relative: los textos ocultos (.cl-oculto) se colocan dentro de esta caja; si no,
se colocan respecto a la ventana y la ensanchan en el teléfono */
.cl-tabla-caja { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cl-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cl-tabla th { background: var(--primary); color: #fff; font: 700 .74rem var(--font); text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 8px 10px; white-space: nowrap; }
.cl-tabla td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.cl-tabla tbody tr:nth-child(even) td { background: hsl(from #FAFCFE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.cl-tabla tbody tr.sin-precio td { background: #FFF8EE; }
.cl-tabla .der, .cl-tabla .cl-precio { text-align: right; }
.cl-tabla .centro, .cl-tabla .cl-volvio { text-align: center; }
.cl-tabla td small { display: block; color: var(--muted); font-size: .78rem; }
.cl-tabla .cl-envio b, .cl-tabla .cl-orden { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.cl-tabla .cl-orden { font-weight: 600; color: var(--primary); }
.cl-tabla .cl-orden .cl-anulada { font-family: var(--font); color: var(--danger); font-weight: 700; }
.cl-tabla .cl-precio .cl-cifra { font-weight: 600; color: var(--primary); }
.cl-tabla .cl-perfil { color: var(--ref, var(--info)); font-weight: 600; }
.cl-tabla tbody tr.pagado td { color: var(--muted); }
.cl-tabla tbody tr.pagado .cl-precio .cl-cifra { color: #15603E; }
.cl-tabla .cl-est { text-align: right; white-space: nowrap; }
.cl-tabla .cl-codigo { font-family: var(--cifra); font-size: .82rem; color: var(--muted); }
.cl-si { color: #15603E; font-weight: 800; }
.cl-no { color: var(--muted); }
.cl-falta { color: var(--danger); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.cl-vacio { padding: 26px 14px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.cl-vacio.mal { color: var(--danger); border-color: #F2C3B3; }
.cl-vacio .btn { margin-left: 8px; }
.cl-pagos { display: flex; flex-direction: column; gap: 6px; }
.cl-pagos h4 { margin: 4px 0 0; font: 700 .78rem var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cl-pagos h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cl-pago { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 6px 8px 6px 4px; border-radius: var(--radius-sm); background: var(--success-soft); }
.cl-pago.visto { box-shadow: 0 0 0 2px #15603E inset; }
.cl-pago-ver { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink);
background: none; border: 0; border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; }
.cl-pago-ver:disabled { cursor: default; }
.cl-pago .cl-pago-monto .cl-cifra { font-weight: 600; color: #15603E; font-size: 1.05rem; }
.cl-pago small { display: block; color: var(--muted); font-size: .8rem; }
.cl-pago.anulado { background: var(--neutro-soft); }
.cl-pago.anulado .cl-pago-monto .cl-cifra { color: var(--muted); text-decoration: line-through; }
.dialogo.cl-ventanita { width: min(460px, 94vw); }
.cl-campo { display: flex; flex-direction: column; gap: 6px; font: 600 .82rem var(--font); color: var(--muted); }
.cl-campo input { font: 500 1rem var(--font); color: var(--ink); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm); padding: 9px 12px; }
.cl-opciones { display: grid; gap: 8px; margin-top: 4px; }
.cl-opcion { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; }
.cl-opcion input { grid-row: span 2; }
.cl-opcion span { font-size: .84rem; color: var(--muted); }
.cl-opcion:has(input:checked) { border-color: var(--secondary); background: var(--secondary-soft); }
@media (prefers-reduced-motion: reduce) { .cl-lab { transition: none; } }
@media (max-width: 760px) {
.dialogo.cuentas-lab { height: 96vh; padding: 18px 14px 14px; }
.cl-labs { grid-template-columns: 1fr; }
.cl-lab-debe .cl-cifra { font-size: 1.4rem; }
.cl-pago { grid-template-columns: 1fr; }
}
/* LA FILA DE «ORDENAR POR», EN UNA SOLA LÍNEA (Jean, 07/10/2026: «el sin
validar queda abajo, ¿cómo hacemos para que se vea en la misma fila?»).
Medido en el navegador: le faltaban ~130 px a 1290 de ancho. Se ganan con
«Uno por uno / Por perfil» como interruptor (sin los circulitos), el número
de «Sin validar» en bolita encima (como el de «Resultados referidos»), el
botón «Exámenes» con menú (antes dos: «Lista de exámenes» y «Baremos») y
los botones algo más ajustados. Si no cabe, sigue partiendo
la línea como antes (flex-wrap). */
.ordenar { gap: 10px 5px; padding-left: 10px; padding-right: 12px; }
.ordenar-lista { gap: 6px; }
.ordenar .ordenar-aparte { margin-left: 0; padding-left: 8px; }
.ordenar .btn { padding: 6px 8px; }
.ordenar > .seg {
display: inline-flex; gap: 2px; padding: 2px;
border: 1px solid var(--line); border-radius: 999px;
font-size: inherit; font-weight: 400; color: var(--ink);
}
.ordenar .seg .radio { position: relative; gap: 0; padding: 3px 9px; border-radius: 999px; font-size: .84rem; }
.ordenar .seg .radio:hover { background: var(--secondary-soft); }
.ordenar .seg .radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ordenar .seg .radio:has(input:checked) { background: var(--primary); color: #fff; font-weight: 600; }
.ordenar .seg .radio:has(input:focus-visible) { outline: 2px solid var(--secondary); outline-offset: 2px; }
#btnSinValidar { position: relative; margin-right: 2px; }
#btnSinValidar .n-circulo { position: absolute; top: -9px; right: -10px; box-shadow: 0 0 0 2px #fff; }
/* El menú de «Exámenes»: lista de exámenes o baremos, con su explicación debajo */
.ordenar .lx-abrir .lx-flecha { width: 14px; height: 14px; margin-left: 4px; flex: none; }
.ordenar .lx-abrir .btn[aria-expanded="true"] { border-color: var(--secondary); background: var(--secondary-soft); }
.ordenar .lx-abrir .menu { top: calc(100% + 4px); }
.ordenar .lx-abrir .menu button { flex-direction: column; align-items: flex-start; gap: 1px; font-weight: 600; color: var(--primary); }
.ordenar .lx-abrir .menu button small { font-size: .76rem; font-weight: 400; color: var(--muted); }
.ordenar .lx-abrir .menu button:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
/* EL OJITO: QUÉ TRAE UN PERFIL (Jean, 09/10/2026: «como en la app de cobros»;
app/que-trae.js). En el catálogo de la orden la fila es UN botón y no puede
llevar otro dentro: el ojito va al lado (`.fila-linea`), encima de un hueco
que la fila le deja antes del precio (`.ojo-hueco`). Para que caiga siempre
en el mismo sitio, el precio de esas filas mide fijo 68 px (medido el 09/10:
62 o 68). Si cambia el relleno, el borde o el hueco de `.fila-examen`, hay
que rehacer el `right` del ojito. */
.fila-linea { position: relative; }
.fila-examen.con-ojo .precio { width: 68px; min-width: 68px; }
.fila-examen .ojo-hueco { width: 28px; flex: none; }
.ojo-que-trae {
width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center;
padding: 0; border: 0; border-radius: 8px; background: transparent;
color: var(--info, #2563A8); cursor: pointer;
}
.ojo-que-trae svg { width: 18px; height: 18px; }
.ojo-que-trae:hover { background: var(--info-soft, hsl(from #E4EEF9 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); }
.ojo-que-trae:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
/* borde 1,5 + relleno 11 + precio 68 + hueco 10 de `.fila-examen` */
.ojo-que-trae.en-fila { position: absolute; top: 50%; right: 90.5px; transform: translateY(-50%); z-index: 1; }
.ojo-que-trae.en-lista { margin-right: -4px; }
.cuantos-con-ojo { display: flex; align-items: center; gap: 2px; }
.ojo-que-trae.en-renglon { width: 22px; height: 22px; border-radius: 6px; }
.ojo-que-trae.en-renglon svg { width: 15px; height: 15px; }
/* La ventanita */
.dialogo.que-trae { width: min(520px, 94vw); }
.que-trae-sub { margin: -4px 0 10px; color: var(--muted); font-size: .86rem; }
.que-trae-sub b { color: var(--primary); }
.que-trae-lista { list-style: none; margin: 0; padding: 4px 14px; max-height: 55vh; overflow-y: auto;
border: 1px solid var(--line); border-radius: var(--radius-sm); }
.que-trae-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.que-trae-lista li:last-child { border-bottom: 0; }
.que-trae-lista small { flex: none; color: var(--muted); font: 700 .72rem var(--cifra, monospace); letter-spacing: .3px; }
/* ===========================================================================
314 · LAS ALARMAS (app/alarmas.js · Jean, 12/10/2026)
El reloj de la barra de la bandeja, junto a «Exámenes», y la PASTILLA de
abajo a la izquierda, en todas las pantallas, abren el mismo panel. La
pastilla dice la que va más justa; en rojo cuando suena. Los avisos de la
app viven en esa misma esquina: con pastilla, suben por encima de ella.
=========================================================================== */
.ordenar .btn-alarmas { margin-left: auto; padding: 5px 9px; }
.ordenar .btn-alarmas + .lx-abrir { margin-left: 8px; }
.btn-alarmas svg { width: 18px; height: 18px; display: block; }
.btn-alarmas[aria-expanded="true"] { border-color: var(--secondary); color: var(--secondary-dark); background: var(--secondary-soft); }
body:has(#alPastilla:not([hidden])) .avisos { bottom: 70px; }
/* --- La pastilla ---------------------------------------------------------- */
.al-pastilla {
position: fixed; left: 18px; bottom: 18px; z-index: 190;
display: inline-flex; align-items: center; gap: 8px; max-width: min(440px, calc(100vw - 110px));
padding: 8px 14px 8px 11px; border: 0; border-radius: 99px; cursor: pointer;
background: var(--primary); color: #fff; box-shadow: var(--sombra-alta);
font: 700 .86rem var(--font);
transition: transform .18s ease, background-color .18s ease;
}
.al-pastilla[hidden] { display: none; }
/* Lo de dentro se repinta cada segundo (innerHTML): si el botón del ratón baja
sobre un trozo y sube sobre el nuevo, no hay clic (Jean, 12/10: «a veces le
doy clic y no abre»). Que el clic caiga siempre en la pastilla, que no cambia. */
.al-pastilla > * { pointer-events: none; }
.al-pastilla:hover { transform: translateY(-2px); }
.al-pastilla:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }
.al-pastilla svg { width: 18px; height: 18px; flex: none; }
.al-p-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.al-p-t { font: 600 .98rem var(--cifra); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.al-p-meta { margin-left: -3px; font: 500 .78rem var(--cifra); color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.al-p-mas { flex: none; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: .74rem; }
.al-pastilla.al-parada { background: hsl(from #4D5F75 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.al-pastilla.al-pausada { background: var(--warn); }
.al-pastilla.al-sonando { background: var(--danger); animation: alLlama 1.4s ease-out infinite; }
.al-pastilla.al-mudo { background: var(--warn-soft); color: var(--warn); box-shadow: var(--sombra-alta), inset 0 0 0 1.5px var(--warn); }
@keyframes alLlama {
0% { box-shadow: var(--sombra-alta), 0 0 0 0 rgba(176, 58, 22, .45); }
70% { box-shadow: var(--sombra-alta), 0 0 0 12px rgba(176, 58, 22, 0); }
100% { box-shadow: var(--sombra-alta), 0 0 0 0 rgba(176, 58, 22, 0); }
}
/* --- El panel --------------------------------------------------------------- */
.al-panel {
position: fixed; left: 18px; bottom: 18px; z-index: 195;
width: min(620px, calc(100vw - 36px)); max-height: min(74vh, 660px); overflow-y: auto;
padding: 16px 18px 14px; border-radius: var(--radius);
background: #fff; color: var(--ink); box-shadow: 0 22px 48px -18px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .45), 0 2px 6px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .08);
animation: menuIn .16s ease-out;
}
.al-panel[hidden] { display: none; }
.al-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.al-cab h2 { margin: 0; font: 800 1.2rem var(--display); color: var(--primary); letter-spacing: -.2px; }
.al-sede { padding: 2px 9px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: .74rem; font-weight: 700; }
.al-cerrar {
margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px;
background: transparent; color: var(--muted); cursor: pointer;
}
.al-cerrar:hover { background: var(--secondary-soft); color: var(--primary); }
.al-cerrar svg { width: 18px; height: 18px; }
/* Poner una: las fijas y «Otra…» */
.al-nuevas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.al-tipo {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px;
border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer;
font: 700 .86rem var(--font); color: var(--primary);
transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.al-tipo svg { width: 14px; height: 14px; color: var(--secondary-dark); }
.al-tipo small { font: 500 .76rem var(--cifra); color: var(--muted); font-variant-numeric: tabular-nums; }
.al-tipo:hover { border-color: var(--secondary); background: var(--secondary-soft); transform: translateY(-1px); }
.al-tipo:disabled { opacity: .6; cursor: progress; transform: none; }
.al-otra-btn { color: var(--muted); border-style: dashed; }
.al-otra {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; padding: 10px 12px;
border-radius: var(--radius-sm); background: var(--fondo);
}
.al-otra label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 180px; }
.al-otra label span { font-size: .72rem; font-weight: 700; color: var(--muted); }
.al-otra .al-min { flex: 0 1 96px; }
.al-otra input { padding: 7px 10px; font-size: .9rem; }
.al-aviso-sonido {
display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 9px 12px; border-radius: var(--radius-sm);
background: var(--warn-soft); color: #6E4606; font-size: .86rem; line-height: 1.4; cursor: pointer;
}
.al-aviso-sonido svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--warn); }
.al-vacia { margin: 2px 2px 0; max-width: 52ch; color: var(--muted); font-size: .9rem; line-height: 1.45; }
/* Las puestas: una fila cada una, la barra debajo llenándose */
.al-lista { list-style: none; margin: 0; padding: 0; }
.al-fila {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px; row-gap: 8px;
padding: 11px 10px 10px; border-top: 1px solid var(--line);
}
.al-fila:first-child { border-top: 0; }
.al-que { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.al-nombre { font-size: .98rem; color: var(--ink); }
.al-nota {
width: 100%; max-width: 280px; margin-left: -8px; padding: 3px 8px; font-size: .84rem;
background: transparent; border-color: transparent;
}
.al-nota:hover { border-color: var(--field-border); }
.al-nota:focus { background: #fff; }
.al-nota:placeholder-shown { font-style: italic; }
.al-nota-txt { font-size: .86rem; color: var(--ink); }
.al-de { font-size: .74rem; color: var(--muted); }
/* En cuadrícula y no en flex con salto: con salto, el ancho que pedía la columna
era el del reloj y «Sin empezar» en UNA línea (~200 px en vez de ~120). */
.al-tiempo { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; column-gap: 5px; }
.al-t { font: 600 1.6rem var(--cifra); font-variant-numeric: tabular-nums; letter-spacing: -.5px; color: var(--ink); }
.al-meta { font: 500 .84rem var(--cifra); color: var(--muted); font-variant-numeric: tabular-nums; }
.al-estado { grid-column: 1 / -1; text-align: right; font-size: .74rem; font-weight: 700; color: var(--muted); }
.al-estado:empty { display: none; }
.al-botones { display: flex; gap: 6px; justify-content: flex-end; }
.al-barra { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.al-barra span { display: block; width: 100%; height: 100%; background: var(--secondary); transform-origin: left center; transition: transform .25s linear; }
.al-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer;
font: 700 .82rem var(--font); color: var(--primary); white-space: nowrap;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.al-btn svg { width: 15px; height: 15px; }
.al-btn:hover { border-color: var(--secondary); color: var(--secondary-dark); }
.al-btn:disabled { opacity: .55; cursor: progress; }
.al-btn.al-primario { background: linear-gradient(180deg, hsl(from #1A4674 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))), hsl(from #0F2D4D calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); border-color: hsl(from #0F2D4D calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); color: #fff; }
.al-btn.al-primario:hover { background: linear-gradient(180deg, hsl(from #235587 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))), var(--primary)); color: #fff; }
.al-btn.al-texto { border-color: transparent; background: transparent; color: var(--muted); }
.al-btn.al-texto:hover { color: var(--danger); background: var(--danger-soft); }
.al-btn.al-listo { padding: 8px 16px; background: var(--danger); border-color: var(--danger); color: #fff; font-size: .9rem; }
.al-btn.al-listo:hover { background: #C8461F; border-color: #C8461F; color: #fff; }
.al-btn:focus-visible, .al-tipo:focus-visible, .al-cerrar:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
/* Los estados: color Y palabra */
.al-fila.al-parada .al-t { color: var(--muted); }
.al-fila.al-pausada .al-estado { color: var(--warn); }
.al-fila.al-pausada .al-barra span { background: var(--warn); }
.al-fila.al-sonando { background: var(--danger-soft); border-radius: var(--radius-sm); border-top-color: transparent; }
.al-fila.al-sonando + .al-fila { border-top-color: transparent; }
.al-fila.al-sonando .al-t, .al-fila.al-sonando .al-estado { color: var(--danger); }
.al-fila.al-sonando .al-barra { background: rgba(176, 58, 22, .18); }
.al-fila.al-sonando .al-barra span { background: var(--danger); }
.al-fila.al-ajena .al-nombre { color: hsl(from #4D5F75 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.al-vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
.al-fila { grid-template-columns: minmax(0, 1fr) auto; }
.al-botones { grid-column: 1 / -1; justify-content: stretch; }
.al-botones .al-btn { flex: 1; justify-content: center; }
.al-t { font-size: 1.35rem; }
}
/* Todas las filas con las MISMAS columnas (Jean, 12/10: «¿por qué el cuadro de
abajo no se ve completo como arriba?»). Cada fila era su propia cuadrícula: la
parada («0:00 / 15:00» y «Iniciar») ocupa más a la derecha que la que corre
(«Pausar»), y le quitaba ancho al nombre y a la nota. Con subgrid la lista
pone las columnas y todas las filas las comparten. */
@supports (grid-template-columns: subgrid) {
.al-lista { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 14px; }
.al-fila { grid-column: 1 / -1; grid-template-columns: subgrid; }
@media (max-width: 640px) {
.al-lista { grid-template-columns: minmax(0, 1fr) auto; }
}
}
@media (prefers-reduced-motion: reduce) {
.al-pastilla.al-sonando, .al-panel { animation: none; }
.al-barra span, .al-pastilla, .al-tipo, .al-ajustes-flecha { transition: none; }
}
/* Configuración → Alarmas: el nombre ancho, los números estrechos */
.cfg-alarmas { max-width: 600px; }
.cfg-alarmas .cfg-fila { grid-template-columns: minmax(160px, 2fr) 100px 80px 50px; }
@media (max-width: 760px) { .cfg-alarmas .cfg-fila { grid-template-columns: 1fr 80px 64px 40px; } }
/* 315 · A quien se le quitaron las alarmas no le sale el reloj (.btn le gana a [hidden]) */
.btn-alarmas[hidden] { display: none; }
/* El sonido de esta computadora: el botón de la cabecera y su parte del panel */
.al-ajustes-btn {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
border: 0; border-radius: 99px; background: var(--fondo); color: var(--muted); cursor: pointer;
font: 600 .78rem var(--font); white-space: nowrap;
transition: background-color .16s ease, color .16s ease;
}
.al-ajustes-btn svg { width: 15px; height: 15px; }
.al-ajustes-btn svg.al-ajustes-flecha { width: 13px; height: 13px; margin-left: -2px; transition: transform .18s ease; }
.al-ajustes-btn[aria-expanded="true"] .al-ajustes-flecha { transform: rotate(180deg); }
.al-ajustes-btn:hover, .al-ajustes-btn[aria-expanded="true"] { background: var(--secondary-soft); color: var(--primary); }
.al-ajustes-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.al-ajustes-btn + .al-cerrar { margin-left: 0; }
.al-ajustes { display: flex; flex-direction: column; gap: 10px; margin: -2px 0 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--fondo); }
.al-sonidos { display: flex; flex-wrap: wrap; gap: 6px; }
.al-sonido { position: relative; cursor: pointer; }
.al-sonido input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-sonido span {
display: inline-block; padding: 6px 12px; border: 1.5px solid var(--field-border); border-radius: 99px;
background: #fff; color: var(--primary); font: 700 .8rem var(--font);
transition: border-color .16s ease, background-color .16s ease;
}
.al-sonido:hover span { border-color: var(--secondary); }
.al-sonido input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.al-sonido input:focus-visible + span { outline: 2px solid var(--secondary); outline-offset: 2px; }
.al-volumen { display: flex; align-items: center; gap: 10px; }
.al-volumen label { font-size: .78rem; font-weight: 700; color: var(--muted); }
/* La barra del volumen, dibujada aquí: con el aspecto general de las casillas
(relleno de 12 px, borde, fondo) el botón se quedaba a 12 px de cada borde y
parecía no llegar ni al 100 % ni al 0 % (Jean, 12/10). La pista se llena
hasta el CENTRO del botón: `--v` (0 a 1) lo pone alarmas.js al moverla. */
.al-volumen input[type=range] {
--v: .7; --boton: 18px;
flex: 1; min-width: 100px; height: 24px; margin: 0; padding: 0;
-webkit-appearance: none; appearance: none;
background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
}
.al-volumen input[type=range]:focus { background: transparent; box-shadow: none; }
.al-volumen input[type=range]::-webkit-slider-runnable-track {
height: 6px; border-radius: 999px;
background: linear-gradient(to right, var(--secondary-dark) calc(var(--boton) / 2 + (100% - var(--boton)) * var(--v)), var(--line) 0);
}
.al-volumen input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }
.al-volumen input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--secondary-dark); }
.al-volumen input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: var(--boton); height: var(--boton); margin-top: -6px;
border-radius: 50%; background: #fff; border: 2px solid var(--secondary-dark);
box-shadow: 0 1px 3px hsl(from rgb(23 43 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .25);
}
.al-volumen input[type=range]::-moz-range-thumb {
width: var(--boton); height: var(--boton); box-sizing: border-box;
border-radius: 50%; background: #fff; border: 2px solid var(--secondary-dark);
box-shadow: 0 1px 3px hsl(from rgb(23 43 77) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .25);
}
.al-volumen input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .35); }
.al-volumen input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .35); }
.al-vol-cifra { min-width: 3.4em; font: 600 .84rem var(--cifra); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.al-ajustes-nota { margin: 0; font-size: .74rem; color: var(--muted); }
@media (max-width: 640px) { .al-ajustes-btn span { display: none; } }
/* Configuración → Alarmas → Quién las ve (315) */
.cfg-alarmas-gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; max-width: 760px; }
.cfg-alarma-quien { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.cfg-alarma-quien:hover { background: var(--fondo); }
.cfg-alarma-quien input { width: 16px; height: 16px; accent-color: var(--secondary-dark); flex: none; }
.cfg-alarma-quien.apagado span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(95, 112, 134, .5); }
/* ===========================================================================
317 · LAS ALARMAS CON COLOR (Jean, 12/10/2026: «para que sea más fácil al
ojo»; de las maquetas eligió la C, la fila teñida, con el punto en la
pastilla y en los botones de poner: auditoria/maquetas-colores-alarmas.html).
La base da la palabra (alarmas_tipos.color); aquí, el tono fuerte (--pc:
nombre, barra, punto), el suave (--pc-suave: fondo) y el borde. Ninguno es
rojo, ámbar ni el verde azulado de la casa: esos dicen «suena», «en pausa»
y «corre», y siguen mandando.
=========================================================================== */
.al-c-gris { --pc: #5F7086; --pc-suave: hsl(from #F1F4F8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --pc-borde: hsl(from #D6DEE8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.al-c-violeta { --pc: #6A48BE; --pc-suave: #F3EFFC; --pc-borde: #DCD1F5; }
.al-c-azul { --pc: hsl(from #1F5FAE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --pc-suave: hsl(from #EBF2FC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); --pc-borde: hsl(from #C9DAF2 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.al-c-verde { --pc: #4C7A1C; --pc-suave: #F0F6E7; --pc-borde: #D3E5BC; }
.al-c-rosa { --pc: #A8326E; --pc-suave: #FBEEF5; --pc-borde: #F0CFE0; }
.al-c-cafe { --pc: #7A5230; --pc-suave: #F6EFE8; --pc-borde: #E4D3C2; }
/* Cada cuadro, una tarjeta con el fondo suave de su prueba */
.al-lista { display: grid; row-gap: 8px; }
.al-lista > .al-fila, .al-lista > .al-fila:first-child, .al-lista > .al-fila.al-sonando + .al-fila {
background: var(--pc-suave, hsl(from #F1F4F8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); border: 1px solid var(--pc-borde, hsl(from #D6DEE8 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); border-radius: var(--radius-sm);
padding: 11px 14px 10px;
}
.al-lista > .al-fila .al-nombre { color: var(--pc, var(--ink)); }
/* La nota, una casilla que se vea (Jean, 12/10: «no se nota muy bien»): blanca,
con borde del color de la prueba, alineada con el nombre */
.al-lista > .al-fila .al-nota {
margin-left: 0; background: #fff;
border: 1px solid var(--pc-borde, var(--field-border));
border-color: color-mix(in srgb, var(--pc, #5F7086) 32%, #fff);
}
.al-lista > .al-fila .al-nota::placeholder { color: #8391A3; }
.al-lista > .al-fila .al-nota:hover { border-color: color-mix(in srgb, var(--pc, #5F7086) 60%, #fff); }
.al-lista > .al-fila .al-nota:focus {
border-color: var(--pc, var(--secondary));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, hsl(from #38B6B8 calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)))) 18%, transparent);
}
.al-lista > .al-fila .al-barra { background: rgba(255, 255, 255, .85); }
.al-lista > .al-fila:not(.al-pausada):not(.al-sonando) .al-barra span { background: var(--pc, var(--secondary)); }
/* La que suena manda: rojo de fondo y un borde rojo que la saca de entre los colores */
.al-lista > .al-fila.al-sonando {
background: var(--danger-soft); border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger);
}
/* «Terminar todas», a la derecha de los botones de poner (Jean, 12/10) */
.al-nuevas .al-todas { margin-left: auto; align-self: center; }
/* El punto: en los botones de poner y en la pastilla */
.al-punto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, var(--muted)); }
.al-tipo .al-punto { box-shadow: 0 0 0 3px var(--pc-suave, transparent); }
.al-tipo[class*="al-c-"]:hover { border-color: var(--pc); background: var(--pc-suave); }
.al-pastilla .al-punto { width: 9px; height: 9px; margin-right: -2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
/* Configuración → Alarmas: la paleta de cada fija */
.cfg-alarmas { max-width: 780px; }
.cfg-alarmas .cfg-fila { grid-template-columns: minmax(160px, 2fr) 90px 70px 176px 50px; }
@media (max-width: 760px) { .cfg-alarmas .cfg-fila { grid-template-columns: 1fr 70px 56px 150px 36px; } }
.cfg-colores { display: flex; gap: 5px; align-items: center; border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-color { position: relative; display: inline-flex; cursor: pointer; }
.cfg-color input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cfg-color span {
width: 22px; height: 22px; border-radius: 50%; background: var(--pc);
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pc-borde); transition: box-shadow .14s ease, transform .14s ease;
}
.cfg-color:hover span { transform: scale(1.08); }
.cfg-color input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pc); }
.cfg-color input:focus-visible + span { outline: 2px solid var(--secondary); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .cfg-color span { transition: none; } .cfg-color:hover span { transform: none; } }
/* «Antes de mandar»: la orden y el paciente debajo del título (Jean, 13/10/2026:
«sería bueno que ese aviso te diga el número de orden y nombre y apellido»).
avisarListas({ sub }) en app/sin-validar.js. */
.dialogo .ifz-cab .ifz-sub { margin: 4px 0 0; font-size: .92rem; font-weight: 600; color: var(--primary); letter-spacing: .1px; }
/* 328 · La casilla de texto en varios renglones de Resultados (`valor-texto`,
Jean 19/10/2026): igual que las demás, sin tirador, y crece con su texto
(`altoDelTexto` en resultados.js). Ctrl + Enter hace un salto de línea. */
.campo-valor textarea.valor-texto {
display: block; resize: none; overflow: hidden; min-height: 34px;
line-height: 1.35; font-family: var(--cifra); white-space: pre-wrap;
}
/* …y ocupa también las columnas de unidad y referencia cuando están vacías:
así el examen al fresco no se vuelve una tira estrecha y altísima. Lo decide
`anchoDeLista` (resultados.js), igual que para la casilla con lista que trae
un texto largo. Con unidad o rango (la HbA1c es de texto) se quedan a la vista. */
@media (min-width: 761px) {
.campo-fila.valor-ancho > .campo-valor { grid-column: 3 / span 2; }
.campo-fila.valor-ancho3 > .campo-valor { grid-column: 3 / span 3; }
.campo-fila.valor-ancho > .campo-unidad,
.campo-fila.valor-ancho3 > .campo-unidad,
.campo-fila.valor-ancho3 > .campo-rango { display: none; }
}
/* «Vista previa» de una prueba sin validar, a la derecha de su franja «Volvió
de…» (Jean, 19/10/2026; `previaSinValidar` en informe.js) */
.examen-remesa .previa-prueba { float: right; margin: -2px 0 0 10px; }
/* 335 · La franja contiene el botón flotante: en una ventana estrecha bajaba bajo
el texto y se salía por debajo de la franja (Jean, 20/10) */
.examen-remesa:has(.previa-prueba) { display: flow-root; }
/* «Volvió de…» en dos renglones ordenados (Jean, 21/10/2026): arriba cuándo
volvió, abajo el PDF, «Qué se cargó» y la referencia; «Vista previa» a la
derecha, centrado. En una pantalla estrecha el botón baja, a la derecha. */
.examen-remesa.volvio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.examen-remesa.volvio .remesa-texto { flex: 1 1 320px; min-width: 0; }
.examen-remesa.volvio .remesa-cuando { display: block; }
.examen-remesa.volvio .ojo-fuera { margin-left: 0; }
/* Si el segundo renglón no cabe, la referencia baja ENTERA al tercero (no se
parte «Referencia:» de su valor); en el teléfono cada trozo se parte por dentro */
.examen-remesa.volvio .ojo-fuera,
.examen-remesa.volvio .rango-fuera-elegir { display: inline-block; max-width: 100%; }
.examen-remesa.volvio .previa-prueba { float: none; margin: 0 0 0 auto; flex-shrink: 0; }
/* ===========================================================================
347 · Cargar tal cual (Jean, 28/10/2026): el examen referido que no encaja
en nuestras casillas lleva como resultado el texto del PDF. El recuadro de la
tarjeta (resultados.js · `recuadroTalCual`), sus casillas recogidas, la
ventana (`dialogoTalCual` y la de fuera.js · `cargarTalCual`) y lo cargado en
Resultados referidos. El botón de la franja nace escondido (`revelarTalCual`).
=========================================================================== */
[data-tal-cual-abrir][hidden] { display: none; }
.tal-cual {
margin: 10px 14px 12px; padding: 12px 14px; border-radius: 10px;
border: 1.5px solid var(--info); background: var(--info-soft);
}
.tal-cual-titulo { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--info); }
.tal-cual-titulo small { color: var(--muted); font-size: .8rem; }
textarea.tal-cual-texto {
display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 5.5em;
padding: 10px 12px; border-radius: 10px;
background: var(--field-bg); border: 1px solid var(--field-border);
font: .9rem/1.45 var(--cifra); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
textarea.tal-cual-texto:disabled { opacity: 1; color: var(--ink); }
.tal-cual-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* 348 · Así sale en el informe: el texto con las negritas del PDF, en letra de papel */
.tal-cual-vista { margin-top: 8px; padding: 10px 12px; border-radius: 10px;
background: #fff; border: 1px dashed var(--field-border); }
.tal-cual-vista[hidden] { display: none; }
.tal-cual-vista > small { display: block; margin-bottom: 6px; color: var(--muted); font-size: .76rem; }
.tal-cual-vista-texto { font-size: .9rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.tal-cual-vista-texto b, .fz-tal-cual-texto b { font-weight: 700; color: var(--ink); }
/* 363 · el tal cual en columnas: filas como las del informe */
.tc-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tc-tabla td { padding: 5px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.tc-tabla tr:first-child td { border-top: 0; }
.tc-tabla .tc-nombre { font-weight: 600; color: var(--ink); }
.tc-tabla .tc-valor { font-family: var(--cifra); white-space: nowrap; }
.tc-tabla .tc-valor.fuera { font-weight: 700; color: var(--danger); }
.tc-tabla .tc-uni, .tc-tabla .tc-ref { font-family: var(--cifra); color: var(--muted); white-space: nowrap; }
.tc-tabla .tc-nota { color: var(--muted); padding: 7px 8px 6px 24px; border-top: 0; }
.tal-cual-casillas { margin: 0 14px 10px; }
.tal-cual-casillas > summary {
cursor: pointer; padding: 6px 0; font-size: .86rem; font-weight: 700; color: var(--muted);
}
.tal-cual-casillas[open] > summary { margin-bottom: 6px; }
.tal-cual-casillas > .campos { opacity: .75; }
.dialogo.tal-cual-dialogo { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.tal-cual-dialogo .tc-de { margin: 0 0 10px; color: var(--muted); font-size: .88rem; }
.tal-cual-dialogo .tc-elegir { border: 0; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.tal-cual-dialogo .tc-elegir legend { padding: 0; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.tal-cual-dialogo .tc-rotulo { display: block; margin: 4px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.tal-cual-dialogo .tc-examen { margin-bottom: 12px; }
.tal-cual-dialogo .tc-examen .casilla-linea { margin-bottom: 4px; }
.tal-cual-dialogo .tc-examen:has(input[data-tc-usa]:not(:checked)) textarea { opacity: .55; }
.fz-tal-cual { margin: 8px 0; }
.fz-tal-cual p { margin: 0 0 4px; }
.fz-tal-cual-texto {
margin: 0; padding: 10px 12px; border-radius: 10px;
background: var(--info-soft); border: 1px solid var(--line);
font: .86rem/1.4 var(--cifra); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* =========================================================================
350 · LAS CITAS (auditoria/PLAN-CITAS.md · app/citas.js)
El paciente paga hoy y viene otro día. Todo en el AZUL DE INFORMACIÓN
(--info): no es trabajo pendiente (ámbar) ni algo que vaya mal (rojo), es
un dato de cuándo. Sobre --info-soft el azul da 5,4:1.
========================================================================= */
/* La pastilla junto al nombre, de la familia de «Urgente» pero sin gritar:
contorno y no relleno. «Viene el 30/10» espera; «Pagó el 25/10» ya llegó. */
.pastilla-cita {
display: inline-block; vertical-align: 1px; margin-left: 7px;
padding: 1px 7px; border-radius: 99px;
font-size: .7rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--info); background: var(--info-soft); border: 1px solid hsl(from #B9D1EE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.pastilla-cita.llego { background: #fff; color: hsl(from #3D5E86 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-color: var(--line); }
/* En la bandeja va en la línea de la edad: «30 años [Viene el 30/10]» */
td.nombre .edad-bandeja .pastilla-cita { margin-left: 8px; vertical-align: 0; }
td.nombre .edad-bandeja.sin-edad .pastilla-cita { margin-left: 0; }
/* El estatus de la fila: ni «Falta» ni «Retrasada», que el paciente no ha venido */
.marca-estado.cita { color: var(--info); }
/* La fila que espera su cita, un punto más callada: todavía no hay nada que hacer */
.tabla-envoltorio tbody tr.fila-cita td.conteo { color: var(--muted); }
/* --- El campo «Viene el» de la orden ------------------------------------- */
/* Un botón con la ropa exacta de las casillas de al lado (input/select), para
que en la fila de Procedencia y Urgencia no se note que es otra cosa. */
.cita-casilla { position: relative; display: flex; }
.cita-casilla > #ordCita {
width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px;
font-family: var(--font); font-size: .93rem; color: var(--muted); text-align: left;
padding: 9px 12px; cursor: pointer;
background: var(--field-bg); border: 1.5px solid var(--field-border); border-radius: var(--radius-sm);
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cita-casilla > #ordCita svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.cita-casilla > #ordCita span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita-casilla > #ordCita:hover { border-color: var(--secondary); }
.cita-casilla > #ordCita:focus-visible {
outline: none; background: #fff; border-color: var(--secondary);
box-shadow: 0 0 0 4px hsl(from rgb(56 182 184) calc(h + var(--giro-a)) calc(s * var(--sat-a)) calc(l + var(--luz-a)) / .15);
}
/* Con fecha: el día en azul y en negrita, y sitio a la derecha para la equis */
.cita-casilla.con-fecha > #ordCita {
color: var(--info); font-weight: 700; padding-right: 40px;
background: var(--info-soft); border-color: hsl(from #B9D1EE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.cita-casilla.con-fecha > #ordCita svg { color: var(--info); }
.cita-quitar {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; display: grid; place-items: center;
border: none; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.cita-quitar svg { width: 17px; height: 17px; }
.cita-quitar:hover { background: #fff; color: var(--danger); }
.cita-quitar:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
/* Ya llegó: se lee, no se toca */
.cita-leida {
margin: 0; min-height: 40px; display: flex; align-items: center;
font-size: .93rem; color: var(--ink);
}
/* En la tira cerrada del bloque, la cita va primero y en su azul */
.orden-mas .om-cita {
flex: none; padding: 2px 8px; border-radius: 999px;
background: var(--info-soft); color: var(--info);
font-size: .74rem; font-weight: 800; letter-spacing: .2px;
}
/* --- La franja «Por atender» de encima de la bandeja (app/por-atender.js) --- */
/* Jean, 28/10/2026, la propuesta A de auditoria/maquetas/cabecera-bandeja.html:
una línea con tres pestañas de color —en espera sin cobrar (ámbar), pagadas
en Cobros (fucsia) y los que pagaron antes (azul)— que abren su lista debajo,
una a la vez. Las listas comparten columnas (subgrid) para que todo quede
alineado de arriba abajo; en pantalla estrecha cada paciente va en dos
renglones. */
.por-atender {
margin: 0 0 12px;
background: #fff; border: 1px solid hsl(from #D5E0EC calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-radius: 12px;
box-shadow: 0 1px 2px hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .05);
overflow: hidden;
}
.pa-fila { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.pa-rotulo { font: 700 .92rem var(--display); color: var(--primary); margin: 0 6px 0 4px; letter-spacing: -.01em; }
.pa-tab {
all: unset; box-sizing: border-box; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: 10px; border: 1px solid transparent;
font: 600 .86rem var(--font);
transition: border-color .15s ease, background-color .15s ease;
}
.pa-tab b {
min-width: 20px; padding: 1px 6px; border-radius: 99px; text-align: center;
font: 800 .8rem var(--font); color: #fff; font-variant-numeric: tabular-nums;
}
.pa-tab i { font-style: normal; font-weight: 500; }
.pa-tab.espera { color: #8A5308; background: var(--warn-soft); } .pa-tab.espera b { background: #B9760F; }
.pa-tab.cobros { color: #7E1053; background: var(--cobros-soft); } .pa-tab.cobros b { background: var(--cobros); }
.pa-tab.antes { color: hsl(from #1D4F86 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); background: var(--info-soft); } .pa-tab.antes b { background: var(--info); }
.pa-tab.antes i { color: #8A5308; }
.pa-tab .pa-aviso-marca { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 99px;
background: var(--danger); color: #fff; font: 800 .72rem var(--font); }
.pa-tab:hover { border-color: currentColor; }
.pa-tab[aria-selected="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.pa-tab:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pa-tab { transition: none; } }
.pa-ocultar {
all: unset; cursor: pointer; margin-left: auto;
display: inline-flex; align-items: center; gap: 4px;
font: 600 .82rem var(--font); color: var(--info); padding: 4px 6px; border-radius: 8px;
}
.pa-ocultar svg { width: 16px; height: 16px; transform: rotate(180deg); }
.pa-ocultar:hover { background: var(--info-soft); }
.pa-ocultar:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.pa-panel { border-top: 1px solid var(--line); padding: 2px 14px 10px; }
.pa-subtitulo { margin: 10px 0 0; font: 700 .76rem var(--font); text-transform: uppercase; letter-spacing: .05em; color: hsl(from #1D4F86 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.pa-subtitulo.pa-ambar { color: #8A5308; }
.pa-lista {
list-style: none; margin: 0; padding: 0;
display: grid; column-gap: 18px;
/* El paciente toma lo que necesita su nombre (sin dejar un hueco grande);
los exámenes se quedan con lo que sobra */
grid-template-columns: minmax(170px, max-content) max-content minmax(0, 1fr) max-content max-content max-content;
}
/* Jean, 29/10 noche: el botón principal («Retomar», «Llegó», con «Quitar»
al lado) a la IZQUIERDA del nombre, todos en la misma columna; «Cambiar
fecha» al final, a la derecha (.pa-acc-fin). En el HTML siguen al final:
`order` los trae delante solo en pantalla ancha. */
@media (min-width: 1181px) {
.pa-lista { grid-template-columns: max-content minmax(150px, max-content) max-content minmax(110px, 1fr) max-content max-content; }
.pa-lista.pa-con-fin { grid-template-columns: max-content minmax(130px, max-content) max-content minmax(110px, 1fr) max-content max-content max-content; }
.pa-lista > li > .pa-acc:not(.pa-acc-fin), .pa-lista > li.pa-cab > span:nth-child(6) { order: -1; }
.pa-lista > li.pa-aviso .pa-aviso-texto { grid-column: 4 / 7; }
}
.pa-acc-fin { justify-content: flex-start; }
/* El color de la pestaña abierta, solo donde están los pacientes: la fila de
las pestañas y la de los títulos se quedan blancas (Jean, 29/10 noche) */
.pa-panel { padding-top: 0; }
.pa-panel.pa-espera { background: var(--warn-soft); }
.pa-panel.pa-cobros { background: var(--cobros-soft); }
.pa-panel.pa-antes { background: var(--info-soft); }
.pa-panel .pa-lista > li.pa-cab { background: #fff; box-shadow: -14px 0 0 #fff, 14px 0 0 #fff; border-bottom: 1px solid var(--line); }
.pa-panel .pa-lista > li { border-top-color: hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .08); }
.pa-panel .pa-lista > li.pa-cab + li { border-top: 0; }
/* Un título de grupo dentro de la lista («Vienen hoy», «Pagaron y no han venido»…) */
.pa-lista > li.pa-grupo { padding: 12px 0 2px; border-top: 0; }
.pa-lista > li.pa-grupo > span {
grid-column: 1 / -1; font: 700 .76rem var(--font); text-transform: uppercase; letter-spacing: .05em; color: hsl(from #1D4F86 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.pa-lista > li.pa-grupo.pa-ambar > span { color: #8A5308; }
/* Cada grupo con su línea encima, para que se vea dónde empieza (Jean, 29/10 noche) */
.pa-lista > li.pa-grupo { border-top: 1px solid hsl(from rgb(17 52 88) calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)) / .14); margin-top: 4px; }
.pa-lista > li.pa-cab + li.pa-grupo { border-top: 0; margin-top: 0; }
.pa-lista > li {
grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
padding: 8px 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink);
}
.pa-lista > li.pa-cab {
padding: 8px 0 4px; border-top: 0;
font: 700 .72rem var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.pa-paciente { display: flex; flex-direction: column; min-width: 0; }
.pa-paciente a.paciente, .pa-paciente > b {
font-weight: 700; color: var(--primary); text-decoration: none; text-transform: uppercase; overflow-wrap: anywhere;
}
.pa-paciente a.paciente:hover { text-decoration: underline; text-underline-offset: 3px; }
.pa-paciente small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.pa-paciente .urgente, .pa-paciente .pastilla-aparte { margin: 2px 0 0; align-self: flex-start; }
.pa-m { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-m b { color: var(--ink); }
.pa-ambar, .pa-m.pa-ambar { color: #8A5308; }
.pa-ex { min-width: 0; display: flex; align-items: center; gap: 6px; }
.pa-ex-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El ojito delante de los exámenes (Jean, 29/10): ver lo cargado sin retomar */
.pa-ojo {
flex: none; width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--secondary); cursor: pointer;
}
.pa-ojo svg { width: 16px; height: 16px; }
.pa-ojo:hover { background: var(--info-soft); border-color: transparent; }
.pa-ojo:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.pa-ojo:disabled { opacity: .5; cursor: progress; }
/* La ventana del ojito: exámenes con su precio y el total */
.dialogo.dialogo-examenes { width: min(480px, 100%); }
.pa-ver-lista { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.pa-ver-lista > li {
display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink);
}
.pa-ver-lista > li:first-child { border-top: 0; }
.pa-ver-nombre { display: flex; flex-direction: column; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pa-ver-nombre small, .pa-ver-precio small { font-weight: 400; color: var(--muted); font-size: .78rem; }
.pa-ver-precio { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.pa-ver-lista > li.pa-ver-total { border-top: 2px solid var(--ink); font-weight: 700; }
.dialogo p.pa-ver-pie { color: var(--muted); font-size: .88rem; }
.pa-ver-pie b { color: var(--ink); }
.pa-tel { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.pa-sin { font-style: italic; }
.pa-acc { display: flex; justify-content: flex-end; gap: 6px; }
.por-atender .btn-chico { padding: 5px 12px; font-size: .84rem; }
.pa-paciente a.paciente:focus-visible, .pa-tel:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 4px; }
/* El aviso de Cobros: su texto ocupa lo que en las otras filas son exámenes, estado y teléfono */
.pa-lista > li.pa-aviso .pa-aviso-texto { grid-column: 3 / 6; color: var(--danger); font-size: .84rem; }
/* Pantalla estrecha: cada paciente en dos renglones (nombre · hora u orden · botones /
exámenes · estado · teléfono) */
@media (max-width: 1180px) {
.pa-lista { display: block; }
.pa-lista > li > .pa-acc-fin { grid-column: 1 / -1; }
.pa-lista > li > .pa-acc-fin:empty { display: none; }
.pa-lista > li.pa-cab { display: none; }
.pa-lista > li {
grid-template-columns: minmax(0, 1fr) max-content max-content;
grid-template-areas: "n o a" "e c t"; column-gap: 14px; row-gap: 3px;
}
.pa-lista > li > :nth-child(1) { grid-area: n; }
.pa-lista > li > :nth-child(2) { grid-area: o; }
.pa-lista > li > :nth-child(3) { grid-area: e; color: var(--muted); font-size: .8rem; }
.pa-lista > li > :nth-child(4) { grid-area: c; font-size: .8rem; }
.pa-lista > li > :nth-child(5) { grid-area: t; font-size: .8rem; }
.pa-lista > li > :nth-child(6) { grid-area: a; }
.pa-lista > li.pa-aviso { grid-template-areas: "n o a" "e e e"; }
.pa-lista > li.pa-aviso .pa-aviso-texto { grid-column: auto; }
.pa-lista > li.pa-aviso > :nth-child(4) { grid-area: a; }
}
@media (max-width: 560px) {
.pa-lista > li { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "n o" "e e" "c t" "a a"; }
.pa-acc { justify-content: stretch; } .pa-acc .btn { flex: 1; justify-content: center; }
}
/* 350 · El número de una orden que espera su cita: azul y no el ámbar de
«Faltan», que todavía no falta nada (blanco sobre este azul: 6,3:1) */
.orden-pastilla.cita { background: linear-gradient(180deg, hsl(from #2B6CB5 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))), hsl(from #20589A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)))); --pastilla-sombra: hsl(from #20589A calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
/* «Llegó» en la fila de la bandeja (la cita que viene antes de su día) y en
la cabecera de Editar orden */
.acciones .btn.btn-llego { margin-right: 6px; }
.res-cabecera .btn.btn-llego { margin-left: 8px; vertical-align: 3px; }
.btn.btn-llego {
padding: 4px 10px; font-size: .8rem; font-weight: 700;
color: var(--info); background: var(--info-soft); border-color: hsl(from #B9D1EE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
}
.btn.btn-llego:hover:not(:disabled) { background: hsl(from #D3E3F7 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border-color: hsl(from #8FB3E0 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.btn.btn-llego:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
/* =========================================================================
353 · «SIN ORDEN» (auditoria/PLAN-SIN-ORDEN.md · app/citas.js, por-atender.js)
La orden que viene otro día no tiene número hasta «Llegó». Se queda en la
familia azul de la cita (--info), pero SOBRIA: sin relleno de color ni
relieve, porque no hay trabajo que hacer todavía y no debe competir con
las pastillas verdes, ámbar y rojas de la bandeja. Azul sobre --info-soft:
5,4:1.
========================================================================= */
.orden-pastilla.sin-orden {
background: var(--info-soft); color: var(--info);
box-shadow: inset 0 0 0 1px hsl(from #B9D1EE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); text-shadow: none;
font-variant-numeric: normal; letter-spacing: 0;
}
.orden-pastilla.sin-orden:hover { background: hsl(from #D3E3F7 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); box-shadow: inset 0 0 0 1px hsl(from #8FB3E0 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); }
.orden-pastilla.sin-orden:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.orden-pastilla.sin-orden.anulada { background: var(--neutro-soft); color: var(--muted); box-shadow: none; }
/* La columna «Orden» de la franja: «Sin orden» y debajo, pequeña, «Ref. P-0012» */
.pa-m.pa-sin-orden { display: flex; flex-direction: column; color: var(--info); font-weight: 700; line-height: 1.25; }
.pa-m.pa-sin-orden small { color: var(--muted); font-weight: 500; font-size: .74rem; letter-spacing: .01em; }
/* El tercer grupo, «Vienen otro día»: gris, que todavía no toca */
.pa-lista > li.pa-grupo.pa-gris > span { color: var(--muted); }
/* La cabecera de Editar orden / Resultados: «Sin orden Ref. P-0012» */
.res-quien h1 .res-ref {
margin-left: 6px; font: 600 .78rem var(--font); color: var(--muted);
letter-spacing: .01em; vertical-align: 2px;
}
/* Resultados mientras espera: el aviso con «Llegó» a la derecha */
.res-banner.espera-llegada {
background: var(--info-soft); color: hsl(from #1D4F86 calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p))); border: 1px solid hsl(from #B9D1EE calc(h + var(--giro-p)) calc(s * var(--sat-p)) calc(l + var(--luz-p)));
justify-content: space-between;
}
.res-banner.espera-llegada .rel-texto { min-width: 0; }
.res-banner.espera-llegada .rel-texto small { display: block; color: var(--muted); font-size: .8rem; }
.res-banner.espera-llegada .btn.btn-llego { background: #fff; }
/* Cobro junto: la fecha de cada uno que viene otro día */
.gc-cita, .cj-cita { color: var(--info); font-weight: 700; }
/* 365 · Pago a Bioanalista: usa las clases `cl-` de Cuentas con laboratorios;
aquí solo lo suyo. El resumen por prueba («INSULINA BASAL · 9 × $1 = $9») */
.pb-resumen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 18px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.pb-resumen li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px;
border-radius: var(--radius-sm); background: var(--ref-soft, var(--neutro-soft)); font-size: .88rem; }
.pb-resumen li > span:first-child { font-weight: 600; color: var(--ink); }
.pb-resumen .cl-cifra { white-space: nowrap; color: var(--muted); }
.pb-resumen .cl-cifra b { color: var(--primary); }
.pb-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.cl-campo select { font: 500 1rem var(--font); color: var(--ink); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm); padding: 9px 12px; }
.cl-ventanita .cl-campo + .cl-campo { margin-top: 10px; }
/* 01/11 · El calendario: el título abre los meses y el año */
.cal-titulo { border: none; background: none; cursor: pointer; padding: 4px 10px; border-radius: 999px;
font-family: var(--display); font-size: .92rem; font-weight: 700; color: var(--primary); text-transform: capitalize; }
.cal-titulo:hover { background: var(--field-bg); }
.cal-titulo:focus-visible, .cal-mes:focus-visible, .cal-año:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
.cal-año { font: 700 .92rem var(--display); color: var(--primary); background: var(--field-bg); border: 1px solid var(--field-border);
border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; }
.cal-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cal-mes { height: 38px; border: none; border-radius: var(--radius-sm); background: none; color: var(--ink); cursor: pointer;
font: 600 .86rem var(--font); text-transform: capitalize; transition: background .12s ease; }
.cal-mes:hover:not(:disabled) { background: var(--field-bg); }
.cal-mes.elegido { background: var(--primary); color: #fff; }
.cal-mes:disabled { color: var(--muted); opacity: .4; cursor: default; }
.cl-chip:disabled { opacity: .45; cursor: default; }
.pb-resumen li > span:first-child { min-width: 0; overflow-wrap: anywhere; }