body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px 48px} .wrap.wide{max-width:1760px} /* EL ENCABEZADO CRUZA LA PANTALLA COMPLETA, arriba de las DOS barras laterales (10/08). Es hijo directo de #app y hermano de .shell. Historia, porque la regla fue y volvió y conviene que no vuelva a moverse por descuido: era una banda VERDE de lado a lado; el 09/08, al pasar la barra lateral a verde, se metió dentro de la columna derecha (`.col > header`) para que el verde llegara al borde superior; el 10/08 volvió a cruzar la pantalla, ahora en CLARO. No es una contradicción: cambió el color del header y con él lo que conviene. `#app > header` y no `header` a secas — la regla sin acotar le pegaba a CUALQUIER
, y desde que el encabezado de pestaña es un
le pintaba el fondo encima. Queda claro (--card) con una línea abajo. El ticker se pinta su propio verde (ver .ticker). */ #app > header{background:var(--card);border-bottom:1px solid var(--line)} /* ── FIJO AL SCROLLEAR, SÓLO EN ESCRITORIO ─────────────────────────────────────────────────────── Pedido de Matías, y arregla una contradicción del propio diseño: el comentario de la franja de guardia dice que va ESTÁTICA porque «un dato que se corre de la pantalla no contesta ¿a quién llamo ahora?», y sin embargo el header entero se iba con el scroll. SE FIJA TODO EL HEADER, ticker incluido, y el número lo respalda: 133px medidos en 1280×900 son el 15% del alto. La alternativa era fijar sólo la fila de arriba (93px, el 10%) y dejar que el ticker se vaya; se descartó porque el ticker son los cinco números que todos preguntan y los 40px de diferencia no pagan perder eso. Si algún día el header envuelve tanto que pase de ~200px en escritorio, hay que volver a mirarlo. EN CELULAR NO SE FIJA, y es la mitad de la decisión: 247px en 375×812 son el 30% de la pantalla, y fijar un tercio del alto en el dispositivo donde se carga el parte de guardia es peor que el problema que resuelve. El umbral es el mismo 900px que ya usan el cajón de la barra y sideAngosta(). z-index:50 — arriba de los globitos de ayuda (30 y 40, que viven en el contenido) y abajo de las ventanas modales (60) y del aviso al pie (70): un modal tiene que poder tapar el encabezado. */ @media(min-width:901px){ #app > header{position:sticky;top:0;z-index:50} } /* LA BARRA CLARA. Izquierda: el nombre del sistema y qué está pasando (guardia y clima). Derecha: los controles y quién sos. El .tb-sp los separa empujando, así que si la fila envuelve en un celular, los controles bajan juntos y no salteados. LA COSTURA VERTICAL SE CONTINÚA HACIA ARRIBA. Pedido de Matías del 10/08, dicho con la referencia exacta: «la parte de Guardia debería arrancar a la misma altura horizontal en la que arranca, en la pantalla de Inicio, la pregunta ¿Qué tengo que atender hoy?». O sea: la MARCA ocupa el ancho de la barra de secciones, y todo lo que viene después arranca en el mismo x que el contenido. El borde entre la barra verde y el contenido deja de cortarse en el header. LA CUENTA, y por eso el column-gap es 20 y no 12: la marca mide --sidew con box-sizing:border-box, así que su caja va de 0 a 236; el siguiente elemento arranca en 236 + column-gap. El contenido arranca en --sidew + el padding de .wrap, que son 20. Con el gap en 20 los dos dan 256 exacto. El 20 no es un número suelto: ES el padding lateral del contenido, el mismo de .wrap. El ancho sale de --sidew (00-tokens.css), el MISMO token que usa .side: repetirlo acá sería tener el mismo número en dos lugares y descubrirlo el día que la barra cambie de ancho. Los otros DOS estados no reservan nada, y ahí la marca se lleva su propio renglón para que lo que sigue arranque igual en el borde del contenido: · barra PLEGADA — no hay columna de barra, el contenido se corre a 20 y el header lo acompaña; · CELULAR — no hay columna, y además la fila ya envolvía sola. El caso base de acá abajo es justamente ése (flex:0 0 100% + padding de 20 en la fila), y la reserva se agrega sólo en escritorio con la barra desplegada. */ .topbar{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center; gap:var(--sp-4) var(--sp-8);flex-wrap:wrap} /* .tb-rest es TODO lo que no es la marca, y existe para que la alineación no dependa de que la fila no envuelva. Con la marca y la guardia como ítems hermanos, a 940px el header envolvía y la guardia caía a un renglón nuevo arrancando en x=0 mientras la pregunta de Inicio estaba en 256 — la alineación era una coincidencia del ancho. Con dos ítems (marca | resto), el resto arranca donde arranca el contenido y envuelve ADENTRO, así que todos sus renglones arrancan ahí. El gap interno es el de siempre (12px): la cuenta de la costura depende del column-gap de .topbar, no de éste, así que acá no hace falta el 20 y cuatro controles con 20 entre sí pedirían un renglón más. */ /* flex-basis 0 y NO auto, y esto costó una medición: con `flex:1 1 auto` el tamaño hipotético del ítem es el de su CONTENIDO —la franja de guardia y clima es texto largo—, y el algoritmo de flex reparte en líneas según ese tamaño hipotético, ANTES de encoger. Así que a 940px .tb-rest no entraba al lado de la marca y se iba a un renglón nuevo, arrancando en x=0 mientras la pregunta de Inicio estaba en 256: el envoltorio solo no alcanzaba. Con basis 0 el ítem siempre entra en la línea y después crece con el `1 1`, que es justo lo que hace falta para que el resto arranque pegado a la marca a cualquier ancho. */ .tb-rest{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:var(--sp-4) var(--sp-6);flex-wrap:wrap} .tb-sp{flex:1 1 auto} /* EL NOMBRE DEL SISTEMA, primero de la fila. Vino de la barra lateral el 10/08: al poder plegarse la barra, el nombre del sistema desaparecía con ella. El modelo quedó más claro — el header es el chrome que SIEMPRE está, la barra lateral es sólo navegación y es lo único que se plega. Sobre fondo claro los dos claros que usaba allá (blanco y blanco al 78%) no sirven: van los tokens de fondo claro. Medido con getComputedStyle sobre los elementos reales: CoopOS --brand-ink #164636 sobre --card #fff 11,73:1 la localidad --muted #5a6862 sobre --card #fff 5,85:1 (11,5px en mayúsculas: el peor caso) La localidad va al LADO y no debajo: la fila mide 41px de alto y un segundo renglón la estiraría a 56; se separa con un punto medio dibujado por ::before, que no es contenido y no se copia con el texto. */ /* flex:0 0 100% es el caso BASE (celular y barra plegada): la marca se lleva su renglón y lo que sigue arranca en el borde del contenido. La reserva de --sidew se agrega abajo, sólo en escritorio con la barra desplegada. */ .tb-marca{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.1; color:var(--brand-ink);display:inline-flex;align-items:baseline;gap:8px;flex:0 0 100%} .tb-loc{font-size:11.5px;font-weight:700;letter-spacing:.10em;color:var(--muted);white-space:nowrap} .tb-loc::before{content:'·';margin-right:7px;color:var(--line);font-weight:400} /* ESCRITORIO CON LA BARRA DESPLEGADA: la marca reserva el ancho de la barra, y con el column-gap de 20 lo que viene después arranca en --sidew + 20, exactamente donde arranca el contenido de .wrap. El padding lateral de la fila pasa a 0 a la izquierda porque ese aire ya lo pone la marca adentro de su caja: si estuviera en los dos, el hueco mediría 20 de más y la costura se correría. #app NO lleva .plegada en este caso — la clase la pone sideAplicarPlegado() en #side, .shell y #app a la vez, y con la barra plegada esta regla se apaga y vuelve el caso base (marca en su renglón). */ @media(min-width:901px){ #app:not(.plegada) .topbar{padding-left:0} #app:not(.plegada) .tb-marca{flex:0 0 var(--sidew);padding-left:var(--sp-8)} } /* En celular la marca se compacta y la localidad baja de cuerpo. Se queda con su renglón propio (el flex:0 0 100% del caso base), que es lo que hace que la guardia arranque en el mismo x que el contenido — el padding de la fila es 20, igual que el de .wrap. */ @media(max-width:640px){ .tb-marca{font-size:15px;gap:6px} .tb-loc{font-size:10.5px;letter-spacing:.08em} } /* Acá estuvo .tb-coop, el nombre largo de la cooperativa. Se fue el 09/08: la cooperativa se identifica por su localidad, que desde el 10/08 vive al lado de CoopOS acá mismo (.tb-loc). */ /* EL CONTORNO del engranaje y de «Salir». Los dos pasaron de .btn.ghost (blanco translúcido, hecho para el encabezado verde: sobre la barra clara eran invisibles en reposo) a .goto, que es el botón de fondo claro del tablero. Con eso el TEXTO pasó a medir 16,56:1 en reposo — el defecto quedó arreglado—, pero medido después quedaba un segundo problema: el borde de .goto es --line, que sobre el blanco de la barra da 1,23:1, o sea que la CAJA del botón no se ve aunque su texto sí. WCAG 1.4.11 pide 3:1 para el contorno de un control. Adentro de los paneles .goto vive entre tarjetas, tablas y bordes que dan estructura, así que ahí ese borde alcanza; acá los dos botones están solos sobre blanco y el contorno es lo único que dice que son botones. Por eso el borde se refuerza SOLO en la barra clara —mismo componente, contexto distinto— y no se toca .goto, que se usa en un centenar de lugares. Medido con getComputedStyle: --muted al 78% sobre blanco = 3,2:1. */ .topbar .goto{border-color:color-mix(in srgb,var(--muted) 78%,#fff)} .topbar .goto:hover{border-color:var(--accent)} /* QUIÉN SOS: el círculo de iniciales (.pav, en 04-componentes.css — el mismo de las tarjetas de proyecto) y el nombre al lado. */ .tb-user{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap; display:inline-flex;align-items:center;gap:7px} .tb-un{overflow:hidden;text-overflow:ellipsis;max-width:22ch} /* La campanita: el número va pegado y no encima, para no tapar el glifo en 13px. */ .tb-bell{position:relative;background:transparent;border:none;cursor:pointer;font-size:15px; line-height:1;padding:6px 8px;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:5px} .tb-bell:hover{background:var(--bg)} /* ── [hidden] NO alcanza, y esto ya había pasado en este repo ── El navegador implementa [hidden] como display:none, pero cualquier regla de display con la misma especificidad le gana. .tb-bell declara inline-flex y .tb-bn inline-flex, así que el atributo hidden del HTML no escondía nada: la campanita aparecía SIEMPRE, con un círculo rojo vacío al lado, incluso sin ninguna mención. Lo mismo le pasó al botón flotante de nueva tarea (ver .fab[hidden] en 04-componentes.css): el atributo estaba puesto y el botón se le veía a gente que no puede crear tareas. Se descubrió mirando una captura, no con un chequeo. */ .tb-bell[hidden],.tb-bn[hidden]{display:none} .tb-bn{background:var(--neg);color:#fff;border-radius:9px;min-width:16px;height:16px;padding:0 4px; font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center} /* flex-wrap: sin esto, en un celular de 375px la fila del encabezado (marca + textos + período + Salir) suma más ancho del que hay y empuja la PÁGINA ENTERA 159px a la derecha — el scroll horizontal no era de ninguna tabla, era de acá. El diagnóstico lo atribuyó al botón Salir, pero el botón no tiene nada raro: lo que faltaba era permitir que la fila baje de renglón. */ /* padding-bottom: lo daba la fila de pestañas, que se mudó a la barra lateral. Sin esto el encabezado quedaba pegado al borde del bloque verde cuando el ticker no se dibuja (el ticker se esconde si el agregado no cargó, y ése es justo el momento en que la pantalla no debe verse rota). El aire entre la fila y el ticker sigue siendo 14px: es este padding, y por eso el ticker ya no lleva margen. */ /* Acá vivían .hd, .htxt y .hd .spacer: la fila verde con el círculo COOP VLIA, el nombre largo de la cooperativa y el subtítulo «Sistema de gestión». Se fueron el 09/08 — el nombre del sistema es ahora CoopOS y va arriba de la barra lateral, sin logo ni bajada, y el nombre de la cooperativa se identifica ahora por su localidad debajo de CoopOS (.side-loc, en 03-navegacion.css) y ese bloque es el h1 de la página. .brandmark sigue definida en 08-varios.css pero ya no la usa nadie en esta pantalla. */ .upd{font-size:12px;color:var(--muted);text-align:right;line-height:1.4;padding-left:13px;border-left:1px solid var(--line)} .upd b{color:var(--ink)} /* El selector de Período se mudó al pie de la barra lateral el 09/08 (encima del sello «Mes cerrado»): sus estilos viven ahora en 03-navegacion.css, donde está el fondo verde sobre el que se dibuja. */ /* ══ LA FRANJA DE GUARDIA Y CLIMA (#bnr) ═══════════════════════════════════════════════════════ Etapa 2 del rediseño CoopOS. Vive entre la fila del encabezado y el ticker de indicadores, que no se toca. Es ESTÁTICA: el ticker de abajo se desplaza solo, y un dato que se corre de la pantalla no sirve para «¿a quién llamo ahora?» ni para «¿viene tormenta?». NO ES UNA BANDA OSCURA como el ticker: va sobre el verde de marca, con una línea fina que la separa de la fila de arriba y alineada con el contenido (misma caja centrada que .hd). Así el encabezado queda con UNA sola banda oscura —la del ticker— en vez de dos apiladas casi iguales. COLORES: los tres que ya usa este archivo, ninguno nuevo. Contraste MEDIDO con getComputedStyle sobre el fondo real (que resolvió a rgb(29,90,69) = --brand #1d5a45), no estimado: #fff (los valores: apellidos, temperaturas, «sin cubrir») 8,07:1 #bcd6ca (etiquetas y la palabra de la condición) 5,23:1 #dfeee7 (el ícono del clima, 15px) 6,74:1 Se descartaron a propósito los dos colores «de aviso» del ticker: #ff9a93 da 3,96:1 y #9dc4b3 da 4,22:1 sobre este verde — los dos abajo de 4,5:1. Por eso «sin cubrir» va en BLANCO con un ⚠ adelante: el aviso lo llevan el glifo y la palabra, no el color solo, que además es lo que corresponde para quien no distingue colores. El aire entre la fila del encabezado y esta franja lo sigue dando el padding-bottom de .hd. */ /* Ya no es una franja propia: son dos bloques DENTRO de la barra clara, así que pierde el ancho máximo, el centrado y la línea de arriba (los daba cuando era una banda aparte). */ .bnr{display:flex;align-items:center;gap:var(--sp-4) var(--sp-7);flex-wrap:wrap;font-size:13px} /* Invertido con la barra: los tres claros que se usaban sobre verde (#fff, #bcd6ca, #dfeee7) no existen sobre blanco. Van los tokens de siempre, que están hechos para fondo claro: --ink #16211c 16,4:1 los valores (apellidos, temperaturas, «sin cubrir») --muted #5a6862 5,9:1 etiquetas y la palabra de la condición Y «sin cubrir» sigue con ⚠ delante: el aviso lo lleva el glifo y la palabra, no el color. */ /* Cada bloque va ENMARCADO (pedido de Matías: «una línea suave que las enmarque»). El marco no es decorativo: la guardia y el clima son dos datos de origen distinto —uno lo carga una persona, el otro viene de un pronóstico— y sin marco se leían como una sola tira de texto donde no se sabía dónde terminaba uno. --line es la línea más suave de la paleta, la misma de las tarjetas del contenido. */ .bn{display:inline-flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;color:var(--ink); font-size:13px;line-height:1.35;text-align:left; border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 11px;background:var(--card)} .bn .bn-lab{color:var(--muted)} .bn b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums lining-nums} .bn .bn-sub{color:var(--muted)} /* ── Por qué esto es una regla y no un tamaño de letra ── Los símbolos del clima venían monocromos en Windows. Dos causas, y hacían falta las dos correcciones: 1) Casi todos esos caracteres (☀ U+2600, ☁ U+2601, 🌤 U+1F324, ⛈ U+26C8…) tienen presentación de TEXTO por omisión en Unicode, así que el navegador los dibuja como glifo negro. Se corrigió en el mapa de chasis.js agregándoles el selector de presentación emoji (U+FE0F). 2) Aun con el selector, la fuente que resuelve el glifo la elige el navegador según la pila de fuentes heredada, y "Segoe UI" —la del tablero— tiene versión monocroma de varios de ellos. Con la fuente de color declarada primero, gana la de color. El orden cubre Windows, Mac/iOS y Linux/Android, en ese orden. */ .bn-ico{font-size:15px;line-height:1; font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif} /* Las dos cuadrillas, FIJAS y una al lado de la otra (no rotando: rotando la mitad del tiempo no ves la que te importa). La línea las separa sin necesitar un separador de texto, que se confundiría con el « · » que ya separa a dos personas dentro de una misma cuadrilla. */ .bn-gu-c{display:inline-flex;align-items:center;gap:var(--sp-3)} .bn-gu-c + .bn-gu-c{padding-left:var(--sp-6);border-left:1px solid var(--line)} .bn-cl-d{display:inline-flex;align-items:center;gap:var(--sp-3)} /* La franja de guardia lleva a la pestaña Guardia. Es un