/* ================================================================
STAR BIEN · Sistema de captura
Construido por DV Nova
Tema claro y clínico: se usa ocho horas al día, en tablet y con
luz de clínica. Contrastes medidos, no elegidos a ojo.
================================================================ */
:root{
--fondo:#F6F8FA;
--superficie:#FFFFFF;
--linea:#E4E9EF; /* separadores decorativos */
--borde:#8494A6; /* borde de campo: 3.10 sobre blanco */
--tinta:#1C3762; /* 11.85 · el azul marino de la marca */
--tinta-suave:#5A6B7A; /* 5.17 */
--azul:#017A8F; /* 5.02 · acciones y navegación */
--verde:#15794F; /* 5.08 · confirmado, al corriente */
--ambar:#9A5B06; /* 5.09 · por confirmar, aviso */
--rojo:#B3241C; /* 6.19 · solo deuda vencida y alertas */
--azul-tenue:rgba(1,122,143,.08);
--verde-tenue:rgba(21,121,79,.09);
--ambar-tenue:rgba(154,91,6,.10);
--rojo-tenue:rgba(179,36,28,.08);
/* --- la marca, tal como está en el logo -------------------------------
* Medidos del archivo, no elegidos a ojo:
*
* #1C3762 el azul marino del fondo del círculo
* #019BB5 el turquesa de «Bien» y de la articulación
* #69D4FE el azul claro del aro
*
* ⚠ EL TURQUESA DE MARCA NO SE USA PARA TEXTO NI PARA BOTONES. Sobre
* blanco da 3.30 de contraste y hace falta 4.5. Se usa oscurecido a
* #017A8F —5.02, el mismo tono— para todo lo que hay que leer, y el de
* marca queda para superficies grandes, donde el contraste no aplica.
* El aro (#69D4FE) da 1.69: sobre blanco no se ve, y por eso solo va
* sobre el marino.
*
* Se usan ocho horas al día, en tablet y con luz de clínica. Un color de
* marca que no se lee deja de ser un color de marca. */
--marca-marino:#1C3762;
--marca-turquesa:#019BB5;
--marca-cielo:#69D4FE;
--radio:10px;
--sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
--num:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
background:var(--fondo);color:var(--tinta);
font-family:var(--sans);font-size:16px;line-height:1.55;
-webkit-font-smoothing:antialiased;
display:flex;flex-direction:column;min-height:100vh;
}
/* ------------------------------------------------------ encabezado */
.barra{
background:var(--superficie);
border-bottom:1px solid var(--linea);
box-shadow:0 1px 2px rgba(22,35,46,.04);
position:sticky;top:0;z-index:40;
}
.barra-in{
max-width:1200px;margin:0 auto;padding:.9rem 1.5rem;
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.marca{display:flex;align-items:center;gap:.9rem;min-width:0}
/* Hueco reservado para el logo real; hasta entonces, la palabra. */
.logo-starbien{height:38px;width:auto;display:block}
.logo-texto{
font-size:1.35rem;font-weight:700;letter-spacing:.02em;
color:var(--azul);white-space:nowrap;
}
.sucursal{
font-size:1rem;color:var(--tinta-suave);
padding-left:.9rem;border-left:1px solid var(--linea);white-space:nowrap;
}
.usuario{font-size:.9rem;color:var(--tinta-suave);text-align:right;white-space:nowrap}
.usuario b{color:var(--tinta);font-weight:600;display:block}
.salir{
background:none;border:none;color:var(--azul);cursor:pointer;
font-family:inherit;font-size:.85rem;text-decoration:underline;padding:0;
}
main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:1.75rem 1.5rem 3rem}
/* ---------------------------------------------------------- pie */
.pie{
border-top:1px solid var(--linea);background:var(--superficie);
padding:1.25rem 1.5rem;text-align:center;
}
.logo-dvnova{height:16px;opacity:.4;filter:grayscale(1);margin-bottom:.4rem}
.pie-linea{font-size:.8rem;color:var(--tinta-suave)}
.pie-linea i{font-style:normal;color:#9AA7B4;padding:0 .3em}
/* -------------------------------------------------------- buscador */
.buscador{margin-bottom:1.5rem}
.buscador label{
display:block;font-size:.85rem;font-weight:600;
color:var(--tinta-suave);margin-bottom:.4rem;
}
/* ⚠ Por exclusión y no por enumeración, y costó encontrarlo.
Esto era una lista de `input[type=text]`, `input[type=search]`… y un selector
de atributo NO casa con un `` que no lleva `type` escrito — aunque el
navegador lo trate como texto. Tres campos reales se quedaban fuera: el
motivo de anular un gasto, la nota de la caja y la fecha del filtro del
corte. Se veían sin borde y, peor, con la letra por defecto del navegador
—13px—, que es justo lo que hace que Safari en iOS amplíe la página al
enfocarlos y no la devuelva. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]),
select,textarea{
width:100%;background:var(--superficie);
border:1px solid var(--borde);border-radius:var(--radio);
color:var(--tinta);font-family:inherit;font-size:1rem;
padding:.7rem .85rem;
}
input:focus,select:focus,textarea:focus{
outline:3px solid var(--azul-tenue);border-color:var(--azul);
}
.buscador input{font-size:1.15rem;padding:.9rem 1rem}
.pista{font-size:.82rem;color:var(--tinta-suave);margin-top:.4rem}
/* ------------------------------------------------------ resultados */
.resultados{
background:var(--superficie);border:1px solid var(--linea);
border-radius:var(--radio);overflow:hidden;margin-bottom:1.5rem;
}
.resultado{
display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
padding:.85rem 1.1rem;border-bottom:1px solid var(--linea);
cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;
width:100%;text-align:left;font-family:inherit;font-size:1rem;color:inherit;
}
.resultado:last-child{border-bottom:none}
.resultado:hover,.resultado:focus{background:var(--azul-tenue);outline:none}
.resultado-nombre{font-weight:600}
.resultado-detalle{font-size:.85rem;color:var(--tinta-suave);margin-top:.15rem}
.resultado-saldo{font-family:var(--num);font-weight:600;text-align:right;white-space:nowrap}
.vacio{padding:1.5rem;text-align:center;color:var(--tinta-suave)}
/* ----------------------------------------------------------- ficha */
.ficha{
background:var(--superficie);border:1px solid var(--linea);
border-radius:var(--radio);box-shadow:0 1px 3px rgba(22,35,46,.05);
overflow:hidden;
}
.ficha-cab{
padding:1.3rem 1.5rem;border-bottom:1px solid var(--linea);
display:flex;justify-content:space-between;align-items:flex-start;
gap:1.5rem;flex-wrap:wrap;
}
.ficha-nombre{font-size:1.45rem;font-weight:700;letter-spacing:-.01em}
.ficha-sub{font-size:.9rem;color:var(--tinta-suave);margin-top:.25rem}
.cifras{
display:grid;gap:1px;background:var(--linea);
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
border-bottom:1px solid var(--linea);
}
.cifra{background:var(--superficie);padding:1.1rem 1.25rem}
.cifra-et{
font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--tinta-suave);margin-bottom:.4rem;
}
.cifra-val{font-family:var(--num);font-size:1.5rem;font-weight:700;line-height:1.1}
.cifra-val.debe{color:var(--rojo)}
.cifra-val.ok{color:var(--verde)}
.cifra-pie{font-size:.8rem;color:var(--tinta-suave);margin-top:.25rem}
/* ------------------------------------------------------- etiquetas */
.etiqueta{
display:inline-flex;align-items:center;gap:.35rem;
font-size:.78rem;font-weight:600;padding:.22rem .6rem;border-radius:99px;
}
.etiqueta.verde{background:var(--verde-tenue);color:var(--verde)}
.etiqueta.ambar{background:var(--ambar-tenue);color:var(--ambar)}
.etiqueta.roja{background:var(--rojo-tenue);color:var(--rojo)}
.etiqueta.azul{background:var(--azul-tenue);color:var(--azul)}
.etiqueta::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* ---------------------------------------------------------- avisos */
.aviso{
padding:.85rem 1.25rem;font-size:.95rem;
border-left:4px solid var(--verde);background:var(--verde-tenue);color:var(--tinta);
}
.aviso.atencion{border-left-color:var(--ambar);background:var(--ambar-tenue)}
/* ⚠ UN RECHAZO NO PUEDE SALIR EN VERDE. El aviso era siempre verde, asi que
«falta decir como pago» se leia igual que «ticket guardado»: quien captura
cree que guardo, sigue con el siguiente paciente, y el movimiento no existe.
El color es la primera lectura, antes que el texto. */
.aviso.mal{border-left-color:var(--rojo);background:var(--rojo-tenue)}
.confirmar-sesiones{
padding:1.25rem 1.5rem;background:var(--ambar-tenue);
border-bottom:1px solid var(--linea);border-left:4px solid var(--ambar);
}
.confirmar-sesiones h3{font-size:1.05rem;margin-bottom:.3rem;color:var(--tinta)}
.confirmar-sesiones p{font-size:.9rem;color:var(--tinta-suave);margin-bottom:.9rem;max-width:70ch}
.confirmar-fila{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.confirmar-fila .campo{max-width:150px}
/* ------------------------------------------------------ formulario */
.seccion{padding:1.4rem 1.5rem;border-bottom:1px solid var(--linea)}
.seccion:last-child{border-bottom:none}
.seccion h3{
font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--tinta-suave);margin-bottom:1rem;
}
.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.campo label{
display:block;font-size:.85rem;font-weight:600;
color:var(--tinta-suave);margin-bottom:.35rem;
}
.campo-ancho{grid-column:1/-1}
.opcional{font-weight:400;color:var(--tinta-suave)}
.acciones{display:flex;gap:.75rem;align-items:center;margin-top:1.25rem;flex-wrap:wrap}
.btn{
background:var(--azul);color:#fff;border:1px solid var(--azul);
border-radius:var(--radio);cursor:pointer;
font-family:inherit;font-size:1rem;font-weight:600;
padding:.75rem 1.4rem;transition:filter .15s;
}
.btn:hover{filter:brightness(1.1)}
.btn:focus{outline:3px solid var(--azul-tenue);outline-offset:2px}
.btn.verde{background:var(--verde);border-color:var(--verde)}
.btn.secundario{background:none;color:var(--azul)}
.btn.secundario:hover{background:var(--azul-tenue);filter:none}
.atajo{font-size:.82rem;color:var(--tinta-suave)}
kbd{
font-family:var(--num);font-size:.78rem;background:var(--fondo);
border:1px solid var(--borde);border-bottom-width:2px;border-radius:5px;
padding:.1rem .35rem;color:var(--tinta);
}
/* ---------------------------------------------------------- tablas */
.tabla-caja{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{
text-align:left;font-size:.76rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--tinta-suave);
padding:.6rem .85rem;border-bottom:1px solid var(--linea);white-space:nowrap;
}
td{padding:.65rem .85rem;border-bottom:1px solid var(--linea);vertical-align:top}
tr:last-child td{border-bottom:none}
.num{font-family:var(--num);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tenue{color:var(--tinta-suave);font-size:.88rem}
/* ------------------------------------------------------- dirección */
.tarjetas{
display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
margin-bottom:1.75rem;
}
.tarjeta{
background:var(--superficie);border:1px solid var(--linea);
border-radius:var(--radio);padding:1.2rem 1.3rem;
}
.tarjeta-et{
font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--tinta-suave);margin-bottom:.5rem;
}
.tarjeta-val{font-family:var(--num);font-size:1.75rem;font-weight:700;line-height:1}
.tarjeta-pie{font-size:.82rem;color:var(--tinta-suave);margin-top:.3rem}
.panel{
background:var(--superficie);border:1px solid var(--linea);
border-radius:var(--radio);margin-bottom:1.5rem;overflow:hidden;
}
.panel-cab{padding:1.1rem 1.4rem;border-bottom:1px solid var(--linea)}
.panel-cab h2{font-size:1.05rem;font-weight:700}
.panel-cab p{font-size:.88rem;color:var(--tinta-suave);margin-top:.25rem;max-width:80ch}
.panel-cuerpo{padding:0 .5rem}
/* ------------------------------------------- elegir sucursal */
/* La pantalla que enseña que esto está pensado para muchas sucursales. Cada sucursal
es su propio botón: un toque y dentro, sin desplegable de por medio. */
.lista-sucursales{display:flex;flex-direction:column;gap:.5rem;padding:.75rem}
.sucursal-op{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
width:100%;min-height:56px;padding:.9rem 1.1rem;
background:var(--superficie);border:1px solid var(--linea);
border-radius:var(--radio);cursor:pointer;
font-family:inherit;font-size:1.05rem;color:inherit;text-align:left;
}
.sucursal-op:hover,.sucursal-op:focus{
border-color:var(--azul);background:var(--azul-tenue);outline:none;
}
.sucursal-op-nombre{font-weight:600}
.sucursal-op-ir{font-size:.9rem;color:var(--azul);font-weight:600;white-space:nowrap}
/* ------------------------------------------------- dónde mirar */
/* La pantalla que hace posible tener sesenta: se abre en el teléfono, se leen
cinco renglones y se sabe a quién escribirle. Por eso el nombre y el número
viven dentro del aviso y no detrás de un enlace. */
.lista-avisos{list-style:none;padding:0;margin:.6rem 0 0}
.lista-avisos>li{padding:.7rem 0;border-bottom:1px solid var(--linea)}
.lista-avisos>li:last-child{border-bottom:none}
.a-quien{list-style:none;padding:0;margin:.6rem 0 0}
.a-quien>li{
display:flex;align-items:center;justify-content:space-between;
gap:.75rem;flex-wrap:wrap;
padding:.55rem .75rem;margin-bottom:.4rem;
background:var(--fondo);border-radius:8px;
}
.a-quien b{font-weight:600}
.a-quien .tenue{display:block;font-size:.82rem}
.a-quien-acciones{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.a-quien-acciones .btn{padding:.45rem .8rem;font-size:.9rem}
/* El teléfono se toca y marca. En el celular es la acción entera. */
.a-quien-acciones a[href^="tel:"]{font-family:var(--num);white-space:nowrap}
/* ----------------------------------------------------------- login */
.login-caja{
max-width:400px;margin:6vh auto 0;background:var(--superficie);
border:1px solid var(--linea);border-radius:14px;padding:2.5rem 2rem;
box-shadow:0 2px 12px rgba(22,35,46,.06);text-align:center;
}
.login-caja .logo-texto{font-size:1.9rem;margin-bottom:.4rem}
.login-caja .lema{font-size:.9rem;color:var(--tinta-suave);margin-bottom:2rem}
.login-caja form{text-align:left}
.login-caja .campo{margin-bottom:1rem}
.login-caja .btn{width:100%;margin-top:.5rem}
.login-firma{
margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--linea);
font-size:.82rem;color:var(--tinta-suave);
}
.error{
background:var(--rojo-tenue);color:var(--rojo);border-left:4px solid var(--rojo);
padding:.7rem .9rem;border-radius:6px;font-size:.9rem;margin-bottom:1rem;text-align:left;
}
@media (prefers-reduced-motion:reduce){
*{transition:none !important;animation:none !important}
}
/* ------------------------------------------------ dirección cubriendo */
/* Se ve en todas las pantallas mientras dure: es la única situación en que
dirección escribe, y no puede pasar desapercibida. */
.cubriendo{
display:flex;gap:1rem;align-items:center;justify-content:space-between;
flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:.7rem 1.25rem;
background:var(--ambar-tenue);border-bottom:3px solid var(--ambar);
color:var(--ambar);font-size:.92rem;
}
.cubriendo b{font-weight:700}
/* Dato calculado que se enseña pero no se teclea. Antes era un input
deshabilitado y seguía leyéndose como un campo que se podía llenar. */
.valor-fijo{
display:flex;align-items:center;gap:.5rem;
padding:.6rem .75rem;border:1px dashed var(--linea);border-radius:8px;
background:var(--fondo-suave,rgba(0,0,0,.02));
font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;
}
/* ------------------------------------------------------------- tickets */
/* El papel, enmarcado dentro de la aplicación. El ancho es el real: 58 mm,
para que lo que se ve en pantalla sea lo que sale de la térmica. */
.papel-marco{
width:58mm;margin:0 auto;padding:0;background:#fff;
border:1px solid var(--linea);border-radius:4px;
box-shadow:0 2px 12px rgba(0,0,0,.12);overflow:hidden;
}
.papel-marco .tk{color:#000}
tr.recien td{background:var(--verde-tenue,rgba(22,120,60,.10))}
/* --------------------------------------------------------- comisiones */
/* El desglose va plegado: el número se lee de un vistazo y el detalle está
ahí para auditarlo cuando alguien pregunte de dónde salió. */
.detalle-comision{margin-top:1rem;border-top:1px solid var(--linea);padding-top:.75rem}
.detalle-comision>summary{
cursor:pointer;font-size:.92rem;color:var(--azul);padding:.35rem 0;
}
.detalle-comision>summary:hover{text-decoration:underline}
.detalle-comision[open]>summary{font-weight:600;margin-bottom:.6rem}
/* -------------------------------------------------------- inventario */
.seccion-interna{
border:1px solid var(--linea);border-radius:8px;padding:.9rem;
}
.seccion-interna h4{margin:0 0 .7rem;font-size:.95rem}
/* ⚠ EL ANCHO ESTRECHO SE PIDE CON `flex`, NO CON `width`, Y NO ES ESTILO.
El selector base de campos es por exclusión —ocho `:not([type=…])`— y cada
uno cuenta como un selector de atributo, así que pesa (0,8,1) y su
`width:100%` GANA a `.fila-producto input[type=number]` (0,2,1) por
especificidad, pase lo que pase con el orden. El resultado se ve: la
cantidad se estira al ancho entero y el desplegable del producto se queda en
un cuadrito de 29px donde no se lee qué se está eligiendo.
`flex-basis` no compite con `width`: fija el tamaño principal del elemento
dentro del flex y el `width:100%` deja de importar. Por eso va así, y por eso
NO se arregla subiendo la especificidad ni con `!important`: los dos dejan la
trampa puesta para el siguiente campo estrecho. */
.fila-producto{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.fila-producto select{flex:1;min-width:0}
.fila-producto input[type=number]{flex:0 0 4.5rem;width:4.5rem}
/* Los renglones de SERVICIO, hermanos de los de producto. El importe es
ESTRECHO y se pide con `flex-basis`, NO con `width`, por lo mismo que la
cantidad de arriba: el selector base de campos va por exclusion
—`input:not([type=checkbox])...`, ocho `:not`, (0,8,1)— y su `width:100%`
gana por especificidad a `.fila-servicio input[type=text]` (0,2,1). Con
`width` el importe se estiraria al ancho entero y el nombre del servicio se
quedaria en un cuadrito ilegible, que es justo lo que paso con el producto
(§19.7). No se arregla con `!important`: eso deja la trampa puesta. */
.fila-servicio{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.fila-servicio select{flex:1 1 16rem;min-width:0}
.fila-servicio input[type=text]{flex:0 0 7rem}
/* Un importe en solo lectura es una cortesia: se ve que esta en cero y que no
se teclea, sin apagarlo — un campo deshabilitado no viajaria (§19.4). */
.fila-servicio input[readonly]{background:var(--fondo);color:var(--tinta-suave)}
/* En los renglones de REGALO hay DOS desplegables: el producto y su estado
(entregado / pendiente). Con `flex:1` los dos crecen igual y el producto se
queda con la mitad — y ahi el nombre no cabe («Desinfectante de calzado
Nacional 240 ml»). No es estetica: si no se ve QUE se esta entregando, se
descuenta del estante sin saber cual, que es el error del ticket 3698 otra
vez. El estado lleva ancho fijo y el producto se queda con el resto. */
.fila-producto select[name=regalo_estado]{flex:0 0 10rem}
.fila-producto select[name=producto_id],
.fila-producto select[name=regalo_id]{flex:1 1 14rem}
.obligatorio{color:var(--rojo)}
/* -------------------------------------------------------------- volver */
/* Antes, al entrar a una sección la única salida era la flecha del navegador.
En el iPad esa flecha queda lejos del pulgar y en pantalla completa no está.
Va pegada bajo la barra, con área de toque de sobra. */
.volver{
max-width:1100px;margin:0 auto;padding:.75rem 1rem 0;
display:flex;gap:.5rem;flex-wrap:wrap;
}
.volver .btn{padding:.55rem .9rem}
/* --------------------------------------------------- ¿tomó sesión hoy? */
/* La pregunta que antes el sistema deducía. Va destacada porque es la
respuesta que mueve el contador, y las dos opciones son igual de grandes:
ninguna es «la normal». En el iPad se toca con el dedo, así que el área
sensible es la etiqueta entera, no solo el círculo. */
.pregunta-sesion{
margin-top:1rem;padding:.9rem;border-radius:8px;
border:1px solid var(--azul);background:var(--azul-tenue);
}
.si-no{display:flex;gap:.6rem;flex-wrap:wrap}
.si-no .opcion{
flex:1 1 14rem;display:flex;align-items:flex-start;gap:.6rem;
padding:.7rem .8rem;border:1px solid var(--linea);border-radius:8px;
background:var(--superficie);cursor:pointer;font-size:1rem;line-height:1.35;
}
.si-no .opcion:hover{border-color:var(--azul)}
.si-no .opcion input[type=radio]{
width:1.25rem;height:1.25rem;margin:.1rem 0 0;flex:none;
}
/* :has() no está en todos los navegadores; si no lo entiende, la opción
elegida se distingue igual por el propio círculo marcado. */
.si-no .opcion:has(input:checked){
border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul);
}
/* La lista de fichas que podrían ser la misma persona. Cada una con su botón
de abrir: decir «ojo, ya existe» y dejar que lo busque a mano otra vez es
pedirle justo el paso que se salta cuando hay cola. */
.parecidos{list-style:none;margin:.6rem 0 0;padding:0}
.parecidos li{
display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
padding:.4rem 0;border-top:1px solid var(--linea);
}
.parecidos li b{font-weight:600}
.casilla{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.casilla input[type=checkbox]{width:1.15rem;height:1.15rem}
/* ------------------------------------------------------ línea de tiempo */
/* El recorrido del paciente. Va de lo más reciente hacia atrás: lo que la
administradora necesita saber primero es lo último que pasó. */
.linea-tiempo{list-style:none;margin:0;padding:0}
.linea-tiempo .ev{
display:flex;gap:.9rem;align-items:baseline;
padding:.5rem .2rem;border-bottom:1px solid var(--linea);
}
.linea-tiempo .ev:last-child{border-bottom:0}
.ev-fecha{flex:0 0 6.5rem;font-size:.85rem;color:var(--tinta-suave);
font-variant-numeric:tabular-nums}
.ev-cuerpo{flex:1;min-width:0}
.ev-detalle{display:block;font-size:.85rem;color:var(--tinta-suave)}
.ev-monto{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.ev-monto .tenue{display:block;font-size:.78rem}
/* Un filete de color a la izquierda dice de un vistazo de qué es cada renglón. */
.ev-visita{border-left:3px solid var(--verde);padding-left:.7rem}
.ev-abono{border-left:3px solid var(--azul);padding-left:.7rem}
.ev-producto{border-left:3px solid var(--ambar);padding-left:.7rem}
.ev-paquete{border-left:3px solid var(--tinta-suave);padding-left:.7rem}
.ev-alta{border-left:3px solid var(--linea);padding-left:.7rem}
/* Se corrigio el nombre. En ambar como todo lo que es una decision de
direccion y no un hecho capturado. */
.ev-nombre{border-left:3px solid var(--ambar);padding-left:.7rem}
/* ------------------------------------------------------------- regalos */
.marca-regalo{
display:flex;align-items:center;gap:.3rem;white-space:nowrap;
font-size:.86rem;color:var(--tinta-suave);
}
.marca-regalo input{margin:0}
.lista-regalos{margin:.2rem 0 .6rem;padding-left:1.1rem;font-size:.9rem}
.lista-regalos li{margin-bottom:.25rem}
/* -------------------------------------------- el cobro de hoy, en el alta */
/* El precio del paquete y lo que el paciente entrega hoy son dos cosas
distintas. Mientras compartieron fila, se tecleó una en el sitio de la otra
y quedó un crédito que decía costar lo que se pagó de entrada. El bloque
aparte y la cuenta a la vista existen para que eso salte antes de guardar. */
.cobro-hoy{background:var(--azul-tenue);border-color:var(--azul)}
.cuenta-alta{
display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-top:.9rem;
padding-top:.7rem;border-top:1px dashed var(--borde);
font-size:.9rem;color:var(--tinta-suave);font-variant-numeric:tabular-nums;
}
.cuenta-alta b{color:var(--tinta)}
.cuenta-alta i{font-style:normal;opacity:.6}
.cuenta-saldo b{color:var(--rojo)}
/* Un saldo negativo es casi siempre precio y anticipo cambiados de sitio. */
.cuenta-saldo.mal{
background:var(--rojo);color:#fff;border-radius:4px;padding:0 .4rem;
}
.cuenta-saldo.mal b{color:#fff}
/* ---------------------------------------------------- anulado y corregido */
/* Nada se borra: se anula dejando quién, cuándo y por qué. Lo anulado sigue a
la vista, tachado, porque esconderlo sería otra forma de borrarlo. */
.anulado{opacity:.6}
.anulado .folio-anulado, tr.anulado td:first-child{text-decoration:line-through}
.motivo{
display:block;font-size:.82rem;color:var(--tinta-suave);margin-top:.15rem;
}
.caja-anular{
border:1px solid var(--rojo);border-radius:8px;padding:.9rem;
margin-top:1rem;background:var(--rojo-tenue);
}
.caja-anular h4{margin:0 0 .5rem;font-size:.95rem;color:var(--rojo)}
.caja-anular .atajo{display:block;margin-bottom:.6rem}
.btn.rojo{background:var(--rojo);border-color:var(--rojo)}
/* ------------------------------------------- el eco del contador de sesiones */
/* El campo pregunta cuántas sesiones traía el paciente ANTES de hoy, y se leyó
como «en qué sesión va»: se puso 2 pensando en la que se iba a registrar. El
eco enseña la cuenta hecha mientras se teclea, para que el error no dependa
de que alguien lea bien la etiqueta. */
.eco-contador{
align-self:end;font-size:.9rem;color:var(--azul);font-weight:600;
white-space:nowrap;padding-bottom:.75rem;
}
.eco-contador.aviso-extra{color:var(--rojo)}
/* --------------------------------- deshacer una anulación, desde la lista */
/* Vive en la última columna de la tabla de correcciones, la que no tiene
nombre: en el teléfono esa columna ocupa el ancho entero de la tarjeta, así
que el campo y el botón se acomodan solos y no hace falta ninguna regla de
móvil aparte. El campo del motivo NO declara tamaño de letra a propósito —lo
toma del selector por exclusión de arriba, que es lo que garantiza los 16px
con los que Safari deja de ampliar la página. */
.deshacer{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.deshacer input[name=motivo]{flex:1 1 11rem;min-width:9rem}
.deshacer .btn{white-space:nowrap}
/* ⚠ EL BLOQUE DEL TELÉFONO VA AL FINAL DEL ARCHIVO, Y NO ES ORDEN:
estaba a media hoja y las secciones de abajo lo pisaban con la misma
especificidad — `.detalle-comision>summary` se quedaba en 34px de alto
donde el móvil pedía 44. Al final, gana siempre. Lo que se escriba
DESPUÉS de aquí vuelve a tener el mismo problema. */
/* ============================================================= móvil ===
Dirección revisa y audita desde el teléfono. Capturar NO: eso se hace en
iPad, y por eso aquí no se optimiza el mostrador sino la revisión.
Tres reglas, y las tres se pueden comprobar mirando la pantalla:
1. Nada obliga a hacer zoom. Ningún campo baja de 16px — por debajo de
eso Safari amplía la página solo al enfocarlo y ya no vuelve.
2. Nada obliga a desplazarse en horizontal. Las tablas de muchas
columnas se convierten en tarjetas apiladas.
3. Todo lo que se toca mide al menos 44px de alto.
===================================================================== */
@media (max-width:760px){
body{font-size:15px}
.barra-in{padding:.75rem 1rem;flex-wrap:wrap;gap:.6rem}
.sucursal{padding-left:0;border-left:none}
main{padding:1.25rem 1rem 2.5rem}
.ficha-cab{padding:1.1rem}
.seccion{padding:1.1rem}
.cifras{grid-template-columns:1fr 1fr}
.rejilla{grid-template-columns:1fr}
/* --- 1 · nada de zoom -------------------------------------------------
⚠ 16px NO es una preferencia estética. Safari en iOS amplía la página
entera al enfocar un campo de menos de 16px, y después no la devuelve:
dirección se queda con la pantalla corrida a la mitad de la junta. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]),
select,textarea{
font-size:16px;padding:.8rem .85rem;
}
/* --- 3 · todo lo que se toca, con dedo -------------------------------- */
.btn{padding:.85rem 1.2rem;min-height:44px}
/* Los de la barra son enlaces de texto: en escritorio se apunta con el
cursor, con el dedo hacen falta 44px de alto de verdad. */
.salir{
display:inline-flex;align-items:center;min-height:44px;
padding:0 .5rem;font-size:.95rem;
}
.usuario{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.usuario b{display:inline}
.volver{padding:.75rem 1rem 0}
.volver .btn{flex:1 1 auto;text-align:center}
select{min-height:46px}
/* La fila de producto no cabe entera en un teléfono: desplegable, cantidad,
«Regalo» y «Quitar» en una línea dejaban el producto en 35px, que es tan
ilegible como el fallo que esto vino a arreglar. Se deja envolver y el
producto se lleva su propia línea. Capturar se hace en iPad —donde la
fila cabe y no cambia nada—, pero dirección abre estas pantallas desde el
teléfono para revisar, y ahí hay que poder leer qué se eligió. */
.fila-producto{flex-wrap:wrap}
.fila-producto select{flex:1 1 100%}
/* ⚠ EL BLANCO ES LA ETIQUETA, NO EL CUADRITO. Y «Quitar» se va a su línea.
Medido a 375 px: «Regalo» era un blanco de 59x21 con OCHO píxeles de aire
hasta un botón que borra el renglón entero, los tres en la misma línea. Un
pulgar cubre unos 40 px: eso no es incomodidad, es un borrado accidental
esperando a pasar. Y encima en el campo que viaja con el ÍNDICE de la fila
(§19.3), donde equivocarse entrega el producto de al lado.
El cuadrito de un checkbox no se puede agrandar sin que se vea deforme; lo
que se agranda es la ETIQUETA que lo envuelve, que es lo que de verdad se
toca. El borde no es adorno: sin él no se ve dónde acaba el blanco. */
.fila-servicio .marca-regalo,
.fila-producto .marca-regalo,
label.casilla{
min-height:44px;font-size:1rem;
padding:.25rem .7rem;border:1px solid var(--linea);border-radius:var(--radio);
}
.fila-producto .marca-regalo{flex:1 1 auto;justify-content:center}
/* Fuera de la línea de los otros dos: una acción que borra no se pone al lado
del blanco más pequeño de la pantalla. */
.fila-producto [data-quita-producto]{flex:1 1 100%;margin-top:.4rem}
/* Lo mismo en los renglones de servicio, y aquí importa más: el desplegable
lleva nombres largos («Serie de aplicaciones Mesoheal (sesión
consecutiva)») y el importe es dinero que se teclea. A 375 px cada cosa
ocupa su línea en vez de tres cuartos de dedo. */
.fila-servicio{flex-wrap:wrap;gap:.4rem}
.fila-servicio select{flex:1 1 100%}
.fila-servicio input[type=text]{flex:1 1 100%}
.fila-servicio .marca-regalo{flex:1 1 auto;justify-content:center}
.fila-servicio [data-quita-servicio]{flex:1 1 100%;margin-top:.4rem}
/* El atajo de la fecha medía 108x17 con letra de 13 px: es un enlace, así que
Safari no amplía al tocarlo, pero fallarlo obliga a teclear la fecha
entera. */
a[data-poner-hoy]{
display:inline-flex;align-items:center;min-height:44px;
padding:0 .5rem;font-size:1rem;
}
/* El desplegable de un es un enlace de una línea en escritorio;
con el dedo hay que poder darle sin apuntar. */
.detalle-comision>summary{padding:.75rem 0;font-size:1rem}
/* Los accesos del panel de dirección: en escritorio son una fila de
botones; en el teléfono, una lista donde cada uno se lee y se toca. */
.acciones{flex-direction:column;align-items:stretch}
.acciones .btn{width:100%;text-align:center}
.tarjetas{grid-template-columns:1fr 1fr;gap:.7rem}
.tarjeta{padding:.9rem 1rem}
.tarjeta-val{font-size:1.4rem}
.tarjeta-pie{font-size:.76rem}
.panel-cab{padding:1rem 1.1rem}
.panel-cuerpo{padding:0}
/* --- 2 · las tablas se apilan ----------------------------------------
Una tabla de seis columnas en un teléfono es scroll horizontal o letra
de 8px: las dos cosas se ven mal y las dos esconden datos. Cada fila
pasa a ser una tarjeta con sus renglones «etiqueta … valor».
El nombre de cada columna lo pone `campos.js` en `data-etiqueta`,
leyéndolo de la propia cabecera: así una tabla nueva se apila sola sin
tener que acordarse de nada. */
.tabla-caja{overflow-x:visible}
.tabla-caja table,
.tabla-caja tbody,
.tabla-caja tfoot,
.tabla-caja tr,
.tabla-caja td,
.tabla-caja th{display:block}
.tabla-caja thead{display:none}
.tabla-caja tbody tr,
.tabla-caja tfoot tr{
border:1px solid var(--linea);border-radius:10px;
background:var(--superficie);padding:.5rem .85rem;margin-bottom:.7rem;
}
.tabla-caja tbody tr:last-child{margin-bottom:.2rem}
.tabla-caja td{
display:flex;justify-content:space-between;align-items:baseline;
gap:1rem;padding:.4rem 0;border-bottom:1px dashed var(--linea);
text-align:left;overflow-wrap:anywhere;
}
.tabla-caja tr td:last-child{border-bottom:none}
.tabla-caja td::before{
content:attr(data-etiqueta);
flex:0 0 auto;max-width:45%;
font-size:.74rem;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--tinta-suave);
}
/* La primera columna es el nombre de la fila —el paciente, la sucursal, el
folio, el día— y hace de título de la tarjeta: la etiqueta pequeña arriba y
el valor grande debajo.
Se conserva la etiqueta a propósito. Quitarla dejaba tarjetas donde el
título era un dato sin nombre —en la auditoría, una fecha suelta— y quien
lee esto en una junta no tiene por qué adivinar de qué columna viene. */
.tabla-caja tbody td:first-child{
display:block;font-size:1.15rem;font-weight:600;line-height:1.3;
padding:.1rem 0 .5rem;
}
.tabla-caja tbody td:first-child::before{
display:block;max-width:none;margin-bottom:.1rem;font-weight:600;
}
/* Una celda sin contenido no pinta un renglón vacío con su etiqueta. */
.tabla-caja td.celda-vacia{display:none}
/* La columna sin nombre es la de los botones: ocupa el ancho de la tarjeta
y queda al final, que es donde se busca la acción. */
.tabla-caja td.celda-accion{
display:block;padding-top:.6rem;border-bottom:none;
}
.tabla-caja td.celda-accion .btn,
.tabla-caja td.celda-accion button{width:100%;text-align:center}
.tabla-caja .num{text-align:right}
.tabla-caja tfoot tr{background:var(--fondo);font-weight:700}
.tabla-caja tfoot th{
display:flex;justify-content:space-between;gap:1rem;
padding:.35rem 0;border:none;white-space:normal;text-transform:none;
font-size:.95rem;color:var(--tinta);
}
/* Los formularios que viven dentro de una celda —anular un gasto, registrar
un consumo— se estiran en vez de apretarse contra el borde. */
.tabla-caja td form{width:100%;flex-wrap:wrap}
.tabla-caja td input{max-width:none !important}
/* El papel del ticket mide 58 mm de verdad: en un teléfono estrecho se deja
encoger en vez de sacar barra horizontal. */
.papel-marco{max-width:100%}
}
/* Teléfonos estrechos: las cifras de arriba dejan de caber de dos en dos. */
@media (max-width:400px){
.tarjetas{grid-template-columns:1fr}
.cifras{grid-template-columns:1fr}
}