/* MIZU Operación — se usa en la calle, con sol y a veces con las manos mojadas: contraste alto, botones grandes, nada de gris sobre gris. */ /* Los colores salen del logo, no del gusto de nadie: la tinta de MIZU PÁRAMO medida sobre el propio archivo es #404687, un indigo. La app venia usando #1E4B9F, un azul royal mas frio que no era el de la marca. Todos los pares de color estan medidos contra el minimo de 4.5:1 que exige WCAG AA. No es un lujo: esto se lee al sol del mediodia en Ibague, con el brillo del telefono peleando contra el reflejo. Los tres que fallaban antes eran el gris de los subtitulos (4.36), el naranja del fiado (3.19) y el verde de exito (3.39) — y el naranja se usa para mostrar PLATA. */ :root { --azul: #3B3F80; /* la tinta del imagotipo MIZU · 9.51:1 en blanco */ --azul-oscuro: #272A5C; /* fin del degradado del encabezado */ --azul-claro: #ECEDF7; --azul-tenue: #C7CAE8; /* textos secundarios sobre indigo · 5.90:1 */ --verde: #047857; /* 5.48:1 */ --naranja: #B45309; /* 5.02:1 */ --rojo: #C0261F; /* 5.94:1 */ --fondo: #F5F6FB; --tarjeta: #FFFFFF; --texto: #1B1E33; /* 16.40:1 */ --suave: #565F82; /* 6.26:1 */ --borde: #DDDFEC; --r: 14px; --sombra: 0 1px 3px rgba(27,30,51,.08), 0 4px 16px rgba(27,30,51,.06); --alto-barra: 64px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--fondo); color: var(--texto); font-size: 16px; line-height: 1.45; overscroll-behavior-y: none; } /* El teléfono puede tener notch; se respetan las zonas seguras. */ #app { min-height: 100%; padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); } /* ── Encabezado ─────────────────────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 20; background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%); color: #fff; padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 12px rgba(39,42,92,.28); } /* La flor de la marca, en blanco, a la izquierda del titulo. Da presencia de marca en cada pantalla sin robarle sitio al nombre de la pantalla, que es lo que el operario necesita leer. `brightness(0) invert(1)` la pasa a blanco solido, asi el mismo archivo sirve en claro y en oscuro. */ header .marca { width: 32px; height: 32px; flex: none; filter: brightness(0) invert(1); } header h1 { font-size: 17px; margin: 0; font-weight: 600; flex: 1; letter-spacing: .2px; } /* Ahora lleva el nombre Y el día que se está trabajando, así que en un teléfono angosto hay que recortarlo en vez de empujar el chip de rol y el botón de menú fuera de la pantalla. */ header .sub { font-size: 12px; opacity: .8; font-weight: 400; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } header button { background: rgba(255,255,255,.18); border: 0; color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; } /* Distintivo del modo: la administradora ve dorado, el operario azul. Al primer vistazo se sabe con qué permisos se está entrando. */ .chip-modo { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .chip-modo.admin { background: #F5C24C; color: #4A3606; } /* ── Contenido ──────────────────────────────────────────────────────────── */ /* El padding inferior extra deja libre la franja donde flota el indicador de sincronización, para que no se siente encima del último elemento. */ main { padding: 16px 16px 56px; max-width: 640px; margin: 0 auto; } h2 { font-size: 15px; margin: 22px 0 10px; color: var(--suave); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; } h2:first-child { margin-top: 4px; } .tarjeta { background: var(--tarjeta); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra); margin-bottom: 12px; } .tarjeta.plana { box-shadow: none; border: 1px solid var(--borde); } /* La tarjeta de cabecera: la cifra que manda en cada modo — el efectivo que el operario debe entregar, los ingresos del dia de la administradora. Antes el degradado iba escrito a mano en el JS de cada modo, con los colores repetidos en seis sitios; al vivir aca, cambiar la marca es tocar una sola linea. */ .tarjeta.principal { background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%); color: #fff; } /* Mas especifico que `.chico`, que pinta gris: dentro de la tarjeta oscura los subtitulos van en el tono claro de la marca (5.90:1 sobre el indigo). */ .tarjeta.principal .chico, .chico.tenue { color: var(--azul-tenue); } .fila { display: flex; align-items: center; gap: 12px; } .fila + .fila { margin-top: 10px; } .crece { flex: 1; min-width: 0; } .derecha { margin-left: auto; text-align: right; } .entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .grande { font-size: 26px; font-weight: 700; letter-spacing: -.5px; } .mediano { font-size: 19px; font-weight: 700; } .chico { font-size: 13px; color: var(--suave); } /* * Cifras que no se salen del cuadro. * * En las tarjetas de tres columnas un "$1.234.567" desbordaba el borde y se * veía cortado. `cqi` mide el ancho de SU tarjeta —no el de la pantalla—, así * que la letra se achica solo cuando esa casilla en particular se queda * corta. El mínimo de 13px sigue siendo legible a un brazo de distancia, y * `tabular-nums` mantiene las cifras alineadas entre columnas. */ .tarjeta { container-type: inline-size; } .ajusta { font-variant-numeric: tabular-nums; white-space: nowrap; } .grande.ajusta { font-size: clamp(15px, 17cqi, 26px); } .mediano.ajusta { font-size: clamp(13px, 15cqi, 19px); } .negrita { font-weight: 600; } .verde { color: var(--verde); } .rojo { color: var(--rojo); } .naranja { color: var(--naranja); } .azul { color: var(--azul); } .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Formularios ────────────────────────────────────────────────────────── */ label { display: block; font-size: 13px; font-weight: 600; color: var(--suave); margin-bottom: 6px; } input, select, textarea { width: 100%; padding: 13px 14px; font-size: 16px; /* 16px evita el zoom de iOS */ border: 1.5px solid var(--borde); border-radius: 11px; background: #fff; color: var(--texto); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); } .campo { margin-bottom: 14px; } input[readonly] { background: var(--fondo); color: var(--suave); } /* `a.boton` va en todas las reglas junto a `button`: "Llamar" y "Cómo llegar" tienen que ser enlaces de verdad —href tel: y maps:— para que el teléfono los entienda, pero deben verse exactamente igual que un botón. */ button, a.boton { font-family: inherit; font-size: 16px; font-weight: 600; border: 0; border-radius: 11px; padding: 14px 18px; background: var(--azul); color: #fff; cursor: pointer; transition: transform .06s, filter .15s; } button:active, a.boton:active { transform: scale(.985); filter: brightness(.94); } button:disabled { opacity: .45; } button.ancho, a.boton.ancho { width: 100%; } button.fantasma, a.boton.fantasma { background: #fff; color: var(--azul); border: 1.5px solid var(--borde); } button.exito { background: var(--verde); } button.peligro { background: var(--rojo); } /* `.chico` hace doble oficio: texto atenuado y botón pequeño. En un botón hay que devolverle el color, o el gris de --suave se come el texto sobre el fondo de color. */ button.chico, a.boton.chico { padding: 9px 13px; font-size: 14px; color: #fff; } button.chico.fantasma, a.boton.chico.fantasma { color: var(--azul); } /* `wrap` porque tres botones no caben en una fila de 390 px y "Cómo llegar" se partía en dos líneas dentro de su propio botón. */ .botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .botones > * { flex: 1 1 auto; min-width: fit-content; text-align: center; } /* ── Listas ─────────────────────────────────────────────────────────────── */ .lista { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; } .item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borde); background: #fff; width: 100%; text-align: left; color: inherit; font-size: 16px; font-weight: 400; border-radius: 0; } .item:last-child { border-bottom: 0; } .item:active { background: var(--azul-claro); } /* Contador de cantidad: − 4 + . Los objetivos táctiles son de 44px porque se usa en movimiento, no sentado en un escritorio. */ .contador { display: flex; align-items: center; gap: 0; } .contador button { width: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; background: var(--azul-claro); color: var(--azul); border-radius: 11px; } .contador input { width: 58px; text-align: center; border: 0; font-size: 18px; font-weight: 700; padding: 0 4px; background: transparent; } .contador input:focus { box-shadow: none; } .etiqueta { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .etiqueta.ok { background: #DCFCE7; color: #14653F; } .etiqueta.aviso { background: #FEF3C7; color: #92400E; } .etiqueta.mal { background: #FEE2E2; color: #991B1B; } .etiqueta.info { background: var(--azul-claro); color: var(--azul); } /* ── Barra inferior ─────────────────────────────────────────────────────── */ nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: #fff; border-top: 1px solid var(--borde); display: flex; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 14px rgba(26,35,50,.06); } nav button { flex: 1; background: none; color: var(--suave); padding: 9px 2px 8px; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; } nav button .ico-svg { margin-bottom: 1px; } nav button.on { color: var(--azul); } /* ── Avisos ─────────────────────────────────────────────────────────────── */ /* Barra de total fija al pie. El `bottom` descuenta la altura de la navegación: si se deja en 12px, los botones de cobrar quedan escondidos detrás de la barra inferior y no se pueden tocar. */ .barra-total { position: sticky; bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + 12px); margin-top: 16px; z-index: 10; box-shadow: 0 -4px 20px rgba(26,35,50,.14); } .aviso { padding: 12px 14px; border-radius: 11px; font-size: 14px; margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; } .aviso.info { background: var(--azul-claro); color: var(--azul-oscuro); } .aviso.bien { background: #DCFCE7; color: #14653F; } .aviso.ojo { background: #FEF3C7; color: #92400E; } .aviso.mal { background: #FEE2E2; color: #991B1B; } /* Estado de sincronización: siempre visible, porque el operario necesita saber si lo que registró ya salió del teléfono o sigue en la cola. */ .sync { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + 12px); z-index: 40; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: var(--texto); box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .25s; } .sync.ver { opacity: 1; } .sync.pend { background: var(--naranja); } .sync.ok { background: var(--verde); } .sync.mal { background: var(--rojo); } /* ── Modal ──────────────────────────────────────────────────────────────── */ .fondo-modal { position: fixed; inset: 0; z-index: 50; background: rgba(16,24,40,.5); display: flex; align-items: flex-end; justify-content: center; } .modal { background: #fff; width: 100%; max-width: 640px; border-radius: 20px 20px 0 0; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: subir .22s cubic-bezier(.2,.8,.3,1); } @keyframes subir { from { transform: translateY(100%); } } .modal h3 { margin: 0 0 16px; font-size: 19px; } .agarre { width: 38px; height: 4px; background: var(--borde); border-radius: 2px; margin: -6px auto 16px; } /* ── Iconos ─────────────────────────────────────────────────────────────── */ /* Eran emojis. Cada teléfono los dibujaba distinto, no se podían pintar del color de la marca y a tamaño de barra se leían como manchas. Ahora son SVG de trazo que heredan el color del texto de al lado. */ .ico-svg { display: block; flex: none; } /* En una fila con texto, el icono se alinea con la primera línea y nunca se deja aplastar aunque el texto sea largo. */ .aviso .ico-svg, .item > .ico-svg { flex: none; } /* Distintivo de puesto del ranking. Sustituye a 🥇🥈🥉, que solo llegaban al tercero y en varios Android se ven como tres discos casi iguales. */ .puesto { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-size: 13px; font-weight: 700; } .puesto.oro { background: #F5C24C; color: #4A3606; } /* ── Mapa de activos ────────────────────────────────────────────────────── */ /* Alto fijo: el contenedor se crea con innerHTML y Leaflet necesita medirlo. Si dependiera del contenido, mediría cero y el mapa saldría en blanco. */ .mapa { height: 260px; border-radius: var(--r); overflow: hidden; margin-bottom: 14px; background: var(--azul-claro); box-shadow: var(--sombra); } /* Leaflet reparte z-index hasta 1000 entre sus capas y controles. Bajarlos uno por uno es pelear con cada versión nueva; `isolation: isolate` crea un contexto de apilamiento propio y deja TODO lo del mapa encerrado por debajo del encabezado (20) y de la barra inferior (30). Sin esto, la atribución de OpenStreetMap se monta sobre el encabezado al desplazar. */ .mapa { position: relative; z-index: 0; isolation: isolate; } /* Fotos de la ficha: fachada, cédula y firma. */ .fotos-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; } .fotos-ficha figure { margin: 0; } .fotos-ficha img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); background: #fff; } .fotos-ficha figcaption { font-size: 12px; color: var(--suave); text-transform: capitalize; margin-top: 4px; } /* Lienzo de firma. `touch-action: none` es imprescindible: sin eso, arrastrar el dedo desplaza la página en vez de dibujar y no se puede firmar. */ .lienzo-firma { width: 100%; height: 170px; display: block; background: #fff; border: 1.5px dashed var(--borde); border-radius: 12px; touch-action: none; cursor: crosshair; } /* Nombre de quien tiene el activo, pegado a su alfiler en el mapa. Va sin la flechita ni el borde de Leaflet: con varios alfileres cerca, las flechas se cruzan con los nombres de al lado y no se entiende cuál es de cuál. Fondo sólido y sombra suave para que se lea sobre el mapa. */ .leaflet-tooltip.etiqueta-mapa { background: var(--texto); color: #fff; border: 0; border-radius: 7px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.28); } .leaflet-tooltip.etiqueta-mapa::before { display: none; } /* Barra de avance de la meta de producción. El color no es el único indicador: al lado siempre va el número ("480 de 500"). Quien distingue mal el verde del ámbar —y en una planta con luz de sol se distinguen mal los dos— lee la cifra y entiende igual. */ .avance { height: 8px; border-radius: 999px; overflow: hidden; background: var(--borde); width: 100%; } .avance i { display: block; height: 100%; border-radius: 999px; transition: width .3s; } .avance i.ok { background: var(--verde); } .avance i.medio { background: #F59E0B; } .avance i.bajo { background: var(--rojo); } /* La barra dentro de la tarjeta oscura del panel necesita más contraste: sobre el azul profundo, el gris del borde desaparece. */ .tarjeta.principal .avance, .con-flor .avance { background: rgba(255,255,255,.22); } /* Botón de foto con su miniatura al lado. */ .fila-foto { display: flex; align-items: center; gap: 12px; } .miniatura img { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; border: 1px solid var(--borde); display: block; } /* Un que se ve igual que un