/* Tema oscuro como variables: todos los colores estructurales salen de acá. Antes eran 489 literales dispersos; si uno cambiaba había que buscarlo en toda la hoja. Ahora un token es un token y no hay forma de que se desincronicen el claro y el oscuro: cada propiedad se declara una vez y el tema claro la sobreescribe. Los colores semánticos (score, situación BCRA, envguard, testbar, suspect, edited) NO van acá: son información y tienen que ser iguales en ambos temas para no romper el significado. PALETA MIEL (2026-09-01). El ámbar de este tablero ya estaba ocupado por señales —sit-3, dot.media, bcra-unid, --sig-warn, .stale, el marco de envguard— así que pintar el cromo del mismo ámbar las apagaba a todas. La regla que lo evita: la miel del cromo va desaturada y sobre superficies grandes (fondos, bordes, la barra del botón); el ámbar de señal va saturado y sobre marcas chicas (texto, puntitos, filetes de 3px). Son dos familias con el mismo matiz y distinta pureza, y el ojo las separa por eso. Lo dominante no se toca, que es lo que salva la lectura del ejecutivo: en claro la tarjeta sigue siendo blanco puro, en oscuro sigue siendo el fondo más profundo de la pantalla. La calidez está alrededor, no abajo del dato. Cada token rotó el matiz conservando la luminosidad, así que los contrastes medidos en los comentarios de abajo siguen valiendo. */ :root { color-scheme: dark; /* La serif de titulares. Vive acá y no en body.pubbody —donde estaba— para que el dashboard también la tenga: el cajón de herramientas la usa. Sin binario propio ni CDN, que la CSP no admite; Georgia está en Windows y macOS y la cadena cubre Linux y Android. */ --display: Georgia, "Iowan Old Style", Charter, "Bitstream Charter", "Liberation Serif", serif; /* Azul marino y no el gris casi negro de antes: es el fondo contra el que la miel del acento tiene que resaltar, y un neutro no la hace resaltar, la deja flotando. Complementario y frío, para que todo lo cálido de encima se lea como puesto ahí a propósito. */ --bg: #0b1220; --bg2: #0e1728; --card: #141f33; --border: #1f2d47; --border2: #1c2841; /* #2c3d5c daba 1,65:1 contra --bg2 y 1,51:1 contra --card: por debajo del 3:1 que WCAG pide para el borde de un control (1.4.11). Mismo matiz, más claro: #4f6ea6 da 3,51:1 contra --bg2 y 3,23:1 contra --card. */ --border3: #4f6ea6; --row-alt: #101b2d; --row-hover: #131f34; --row-grp: #17253c; --pin-bg: #0b1220; --pin-hover: #131f34; /* La selección se vuelve cálida en los dos temas: es la única forma de que el acento miel y la fila elegida sean la misma idea. Eso obligó a mover --tomada-*, que era el amarillo de antes, al marino: ver abajo. */ --sel-bg: #33280f; --sel-hover: #43340f; --sel-bdr: #7a5c1c; /* "Tomada por otro ejecutivo" era amarillo pálido y ahora ese lugar lo ocupa la selección. Se va al marino elevado, que además dice mejor lo que significa: no es una alerta, es una fila que no es tuya. */ --tomada-bg: #1d2942; --tomada-hv: #24324f; /* Miel sobre marino. #e8b25c da 9,1:1 contra --on-accent y es más naranja y menos puro que el #f0c419 de sit-3 y dot.media, que son las dos señales de las que hay que poder distinguirlo. Ayuda que el acento vive en el cromo (botones, solapas, links) y esas dos viven adentro de la grilla. */ --accent: #e8b25c; --accent2: #f2c880; /* Texto que va encima de --accent. No se puede fijar un color solo: el acento oscuro es celeste claro y el claro es azul fuerte, así que el mismo negro que contrasta acá se hunde en el otro tema. */ --on-accent: #241705; --txt: #f0e7d8; --txt2: #d5c9b4; --muted: #a99c86; /* Mismo problema que en el tema claro: #6b7280 no llegaba a 4,5:1 contra el fondo oscuro. Se mide contra --card (#141f33), que es el fondo real de las notas al pie y las etiquetas de los ejes, no contra --bg. El marino es un pelo más claro que el gris que reemplazó, así que el gris cálido se aclaró para compensar: #98907e da 5,2:1 y sigue por debajo de --muted. */ --muted2: #98907e; --drawer-bg: #0e1728; --tip-bg: #070d18; --modal-bg: #0e1728; --skel1: #141f33; --skel2: #1e2c46; --pgbtn-bg: #111c2e; --pgbtn-hv: #1a2740; /* Botón genérico de las pantallas /dev. Más claro que --card para que el botón se despegue visualmente del panel que lo contiene. */ --btn-bg: #1b2942; --btn-bdr: #2c3d5c; } /* Tema claro. El ejecutivo usa la pantalla a plena luz del dia: el fondo blanco reduce el cansancio visual respecto del oscuro en ambientes con mucha luz. Los tokens semanticos (score, sit-*, suspect, edited, testbar, envguard) se dejan intactos porque son senales, no decoracion. */ :root.light { color-scheme: light; /* --bg es papel cálido y --card sigue siendo blanco puro. Esa diferencia es todo el tema claro: la tarjeta donde el ejecutivo lee la grilla no cambió ni un punto, y lo que se entibió es la hoja de atrás. Si se invirtiera —tarjeta miel sobre fondo blanco— el dato quedaría leyéndose sobre color, que es justo lo que no se quiere. */ --bg: #faf6ec; --bg2: #ffffff; --card: #ffffff; --border: #ddd0b6; --border2: #ebe1cd; /* #cdbc9c daba 1,86:1 contra el blanco de --bg2/--card: mismo problema que en oscuro. Mismo matiz, más oscuro: #a98c56 da 3,2:1. */ --border3: #a98c56; --row-alt: #f9f4e8; --row-hover: #f3ebd9; --row-grp: #ece0c6; --pin-bg: #faf6ec; --pin-hover: #f3ebd9; --sel-bg: #fcefd0; --sel-hover: #f8e3b0; --sel-bdr: #dcae4e; /* Antes era el amarillo pálido #fefce8 y ahora ese lugar lo ocupa la selección. Queda como papel apagado, sin el borde ámbar que sí lleva la fila seleccionada: son parecidas de tono y se distinguen por el filete. */ --tomada-bg: #f4eee0; --tomada-hv: #ebe3d0; /* Marrón miel oscuro y no la miel clara del tema oscuro: sobre blanco, la miel clara no llega ni a 2:1. #8a5a12 da 5,75:1 contra el blanco del botón, casi lo mismo que daba el azul #1d6cc8 que reemplaza. */ --accent: #8a5a12; --accent2: #6d460b; --on-accent: #ffffff; --txt: #241c11; --txt2: #4a3d2c; --muted: #514734; /* #6b7280 daba 4,46:1 sobre el fondo claro y el mínimo AA para texto normal es 4,5:1. Lo usan las notas al pie y las etiquetas de los ejes, que son justo el texto chico que más necesita el contraste. El equivalente cálido #6b6154 da 6,06:1 sobre blanco. */ --muted2: #6b6154; --drawer-bg: #ffffff; --tip-bg: #2b2214; --modal-bg: #ffffff; --skel1: #efe7d6; --skel2: #ddd0b6; --pgbtn-bg: #f9f4e8; --pgbtn-hv: #ebe1cd; --btn-bg: #faf6ec; --btn-bdr: #ddd0b6; } /* Señales de las pantallas de administración: verde "salió bien", ámbar "mirá esto", rojo "falló", naranja "quedó a medias". El significado lo lleva el tono, así que el tono no cambia entre temas; lo que cambia es la luminosidad. Eso es lo que las distingue de los tokens semánticos que se dejan literales: aquellos ya se leen en los dos fondos, estos no. El mismo #6fcf97 que contrasta 7:1 sobre el fondo oscuro da 2:1 sobre blanco, y con los literales que había /dev/scrapeo mostraba las cifras de "Calidad de los datos" en ámbar sobre blanco y /dev/revision dibujaba los diffs como barras negras en medio de la página. Van acá y no en cada hoja de /dev porque las cuatro pantallas usaban el mismo ámbar escrito cuatro veces. */ :root { --sig-ok: #6fcf97; --sig-warn: #ffd479; --sig-bad: #ff8f8f; --sig-alert: #ffb454; --ok-bg: #16281d; --ok-bdr: #2f7d4f; --ok-txt: #d7ffe6; --aviso-bg: #2a2113; --aviso-bdr: #6b5320; --aviso-txt: #ffd479; --peligro-bg: #2a1717; --peligro-bdr: #5a2b2b; --peligro-txt: #ff8f8f; } :root.light { --sig-ok: #15803d; --sig-warn: #a16207; --sig-bad: #b91c1c; --sig-alert: #c2410c; --ok-bg: #e7f6ec; --ok-bdr: #2f7d4f; --ok-txt: #14532d; --aviso-bg: #fdf3dc; --aviso-bdr: #a16207; --aviso-txt: #4a3208; --peligro-bg: #fdecec; --peligro-bdr: #f0b4b4; --peligro-txt: #b91c1c; } /* Tamaño de letra (sidebar.ts, grupo "Configuración"): tres pasos alrededor del cuerpo actual de 14px. data-letra lo pone THEME_BOOT_JS, leyendo localStorage, antes del primer pintado — mismo mecanismo que el tema y que la barra colapsada. No reemplaza cada tamaño fijo del sistema: eso sería una campaña aparte. Escala lo que promete el enunciado de la opción — la grilla (table, más abajo), la barra (sidebar.ts), el consultor (consulta-page.ts) y las tarjetas (.card, más abajo) — y deja el resto en sus tamaños de siempre. */ :root { --fs-base: 14px; } :root[data-letra="chica"] { --fs-base: 13px; } :root[data-letra="grande"] { --fs-base: 16px; } /* ---- Escala de botones ------------------------------------------------- Un solo lugar define cuánto mide un botón. Antes cada pantalla tenía la suya y el mismo control cambiaba de tamaño al navegar: medido el 2026-09-16, "Ingresar" media 32px en la portada y 44px en /login, y "Buscar" 50px en la portada contra 42px en el consultor. Eso es lo que se ve como que los botones "se desfiguran" al cruzar de página. Los tres tamaños, y cuándo va cada uno: sm 32px acciones densas dentro de una tabla o de una fila de /dev, donde un botón de 40 rompe el renglón. md 40px el default de todo el sitio. Es la altura de botón estándar de Material 3 y la que usan los productos con los que se lo compara. lg 48px la acción principal de una pantalla: entrar, buscar, guardar un formulario entero. Pasa el mínimo táctil de 44px de Apple y el criterio 2.5.5 de WCAG. El buscador de la portada queda aparte, a 56px, porque es el control más importante del sitio y el único que tiene que leerse como invitación. Se usa min-height y no solo padding: con padding, el alto depende del tamaño de letra —que el usuario cambia desde Configuración— y la escala se desarma sola en "letra grande". */ :root { --btn-h-sm: 32px; --btn-pad-sm: 0 12px; --btn-fs-sm: 12.5px; --btn-r-sm: 7px; --btn-h-md: 40px; --btn-pad-md: 0 18px; --btn-fs-md: 14px; --btn-r-md: 9px; --btn-h-lg: 48px; --btn-pad-lg: 0 26px; --btn-fs-lg: 15px; --btn-r-lg: 11px; } /* Color de acento (mismo grupo): cuatro opciones sobre --accent/--accent2. --on-accent no se toca: en los dos temas ya es un extremo (casi negro en oscuro, blanco en claro) y contrasta igual de bien contra cualquiera de los cuatro colores medidos abajo. Azul, verde y violeta comparten el mismo esquema que ya usaba ámbar: en oscuro el tono es claro y --accent2 lo aclara más para el hover; en claro el tono es oscuro y --accent2 lo oscurece más. Contraste contra --on-accent, medido con la fórmula WCAG: oscuro #6ea8fe / #0b1220 → 7,75:1 claro #1d6cc8 / #ffffff → 5,21:1 oscuro #57c98a / #0b1220 → 9,03:1 claro #1f7a4c / #ffffff → 5,32:1 oscuro #b18cf7 / #0b1220 → 7,09:1 claro #6b3fc0 / #ffffff → 6,78:1 Los tres pasan holgado el 4,5:1 que pide texto chico contra --on-accent real de cada tema (#241705 oscuro, #ffffff claro es igual al blanco de acá; el oscuro es más oscuro todavía que el #0b1220 medido, así que el contraste real es mayor, nunca menor). */ :root[data-accent="azul"] { --accent: #6ea8fe; --accent2: #96c2fe; } :root[data-accent="verde"] { --accent: #57c98a; --accent2: #7fdba8; } :root[data-accent="violeta"] { --accent: #b18cf7; --accent2: #cbb0fb; } :root.light[data-accent="azul"] { --accent: #1d6cc8; --accent2: #14508f; } :root.light[data-accent="verde"] { --accent: #1f7a4c; --accent2: #155c38; } :root.light[data-accent="violeta"] { --accent: #6b3fc0; --accent2: #55329c; } /* Todas estas pantallas nacen cortas y crecen cuando vuelve el fetch. En ese momento aparece la barra de scroll y corre el ancho util ~15px: se mueve la pagina entera, incluso el encabezado, que no crecio. Reservar el canal desde el principio es lo que evita ese salto lateral. */ html { scrollbar-gutter: stable; } * { box-sizing: border-box; } body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--txt); font-size: var(--fs-base); } header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } header .grow { flex: 1; } /* El flex: none va porque los contenedores donde entra son flex y el navegador achica las imágenes antes que al texto cuando falta lugar. */ .brandmark { flex: none; display: block; } /* El logo perdió el fondo crema, y la mitad gris del cubo queda casi contra el fondo del tema oscuro: medido a 26px, sus tonos dominantes dan 1,42:1 y 1,81:1. El filtro los sube a 2,05:1 y 2,98:1 sin tocar el archivo, que en el tema claro está bien como está. No llega a 3:1 y se deja así: el logo va con alt vacío y siempre tiene al lado un título que dice el mismo nombre, así que es decorativo y no hay información que dependa de verlo. Subir más el brillo quema el azul. */ :root:not(.light) .brandmark { filter: brightness(1.5) saturate(1.15); } /* 26px cabe en el alto que ya tienen los botones del encabezado (~35px), así que el logo no empuja la grilla ni un pixel hacia abajo. */ header .brandmark { width: 26px; height: 26px; } h1 { font-size: 18px; margin: 0; } a { color: var(--accent); } main { padding: 24px; } /* Boton de cambio de tema. Va en el header junto al nombre del usuario. Ocupa el mismo alto que los botones del encabezado para no desalinear nada. El icono no es un emoji: es texto ASCII que funciona en todos los sistemas sin depender de fuentes externas. */ /* El botón dice el modo al que cambia, así que su texto alterna entre "Claro" (57,2 px) y "Oscuro" (69,2 px). El HTML sale del servidor con uno y el JS pone el otro al arrancar, y esos 12 px de diferencia alcanzaban para que en un teléfono el encabezado envolviera distinto y "Salir" saltara de renglón a los 120 ms — justo cuando el dedo va hacia él. Se reserva el ancho de la palabra más larga y el texto puede cambiar sin mover nada. */ #themeToggle { background: transparent; border: 1px solid var(--border3); color: var(--muted); border-radius: 8px; padding: 5px 10px; min-width: 70px; cursor: pointer; font-size: 12px; font-family: inherit; } #themeToggle:hover { color: var(--txt); border-color: var(--muted); } /* La lista se cuenta en ediciones, así que si el scrapeo se cae sigue mostrando las últimas N aunque sean viejas y nada en pantalla lo delata. Este cartel es el que lo delata: va arriba de todo y no se puede cerrar, porque el problema no se resuelve mirándolo. */ /* .stale y .testbar y .envguard son senales de estado del sistema: sus colores no son decoracion sino informacion (ambar = atencion requerida, violeta = modo prueba). Se dejan como literales para que sean identicos en ambos temas y no puedan confundirse con el fondo del tema claro. */ .stale { background: #3a2a12; border: 1px solid #7a5a1e; color: #f0d9a8; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; } .stale b { color: #ffd479; } /* .stale es la excepcion a la regla de arriba: no es chrome del sistema como .testbar y .envguard, es un parrafo adentro del contenido. Dejarlo marron oscuro sobre el fondo claro no lo hace mas visible, lo hace parecer un error de pintado. Sigue siendo ambar —la senal no cambia—, invertido al patron habitual de alerta: fondo suave, texto oscuro. */ /* El #fdf3dc de antes daba contra el #f4f6f8 gris azulado que era el fondo claro; contra el papel cálido #faf6ec de la paleta miel son prácticamente el mismo color y el cartel desaparecía dentro de la página. Es el caso exacto de la regla de arriba: cuando el cromo se entibia, la señal ámbar tiene que subir de saturación para seguir siendo señal. */ :root.light .stale { background: #fbe6b0; border-color: #c08a1a; color: #5a3d05; } :root.light .stale b { color: #3d2903; } /* Nunca hay que adivinar en qué modo se está: la banda va arriba de todo, fija, y no se puede cerrar. Un ensayo que se confunde con trabajo real es el único error que este modo no puede permitirse. */ .testbar { position: sticky; top: 0; z-index: 50; background: #3d1f4a; border-bottom: 1px solid #7a4a94; color: #e9d5f5; text-align: center; padding: 6px 14px; font-size: 13px; font-weight: 600; } .testbar b { color: #f0c8ff; } /* Marca de entorno: aparece solo cuando el hostname no es el de producción. El error que viene a evitar es escribir en la pestaña equivocada, y eso no lo evita un cartel que hay que ir a mirar: el marco alrededor de todo el viewport se ve con el rabillo del ojo, que es el único momento en que uno todavía puede frenar. El cartel abajo a la izquierda dice cuál es el host, para cuando ya frenaste y querés saber dónde estás parado. Sombra interior y no borde: un borde empujaría el layout de la grilla, la sombra no ocupa lugar. El script lee location.hostname en el cliente, así que si una config del server se olvida, el error cae del lado barato (parece desarrollo) y no del caro (parece producción sin serlo). Usaba los tokens ámbar de .stale, y con la paleta miel eso dejó de funcionar: un marco cálido alrededor de una pantalla cálida es camuflaje, justo en la señal que más necesita entrar por el rabillo del ojo. Pasa al violeta de .testbar, que es la única familia de color que la paleta miel no toca en ningún lado. No es un tono inventado: .testbar y .envguard dicen la misma cosa —"esto que estás mirando no es lo real"— por dos motivos distintos, y ahora se parecen tanto como se parece lo que significan. */ .envguard { position: fixed; inset: 0; z-index: 9999; pointer-events: none; box-shadow: inset 0 0 0 3px #7a4a94; } .envguard b { position: absolute; bottom: 12px; left: 12px; background: #3d1f4a; border: 1px solid #7a4a94; color: #e9d5f5; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; line-height: 1.3; } /* El cajón de las bajas. Va en las dos pantallas que listan usuarios: las cuentas se crean y se desactivan, nunca se borran, así que sin plegarlas la lista deja de contestar de un vistazo quién entra hoy. */ /* Las pantallas /dev se arman enteras con un solo fetch, y su alto final depende del dato (cuántos meses tiene el calendario, cuánta gente hay). Reservar el alto de antemano sería adivinar, así que se pinta una sola vez, ya armada: lo que nunca se vio no puede saltar. El cartel de espera va fijo, fuera del flujo, para que sacarlo tampoco mueva nada. */ .devmain { visibility: hidden; } .devmain.ready { visibility: visible; } /* #6b7280 era el gris de la paleta anterior (Tailwind slate-500), frío y a 3,87:1 sobre --bg, por debajo del 4,5:1 que pide texto de este tamaño. --muted da 6,94:1 y comparte temperatura con el cromo marino. */ .booting { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--muted); font-size: 13px; } .devmain.ready + .booting { display: none; } .offbox { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; } .offbox > summary { cursor: pointer; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; min-width: 140px; } .card .n { font-size: calc(var(--fs-base) + 10px); font-weight: 700; } .card .l { font-size: calc(var(--fs-base) - 2px); color: var(--muted); text-transform: uppercase; } /* Las cuatro reservaban el alto con un  , así que durante la espera eran cuatro rectángulos en blanco: reservar el lugar sin decir para qué se lee como que las tarjetas se rompieron, sobre todo al lado de los renglones de abajo, que sí se animan. El gris usa el mismo latido y las mismas dos variables, y se va solo cuando renderCards() reemplaza el contenido. */ .card.waiting .n, .card.waiting .l { border-radius: 3px; background: linear-gradient(90deg, var(--skel1), var(--skel2), var(--skel1)); background-size: 200% 100%; animation: skel 1.1s linear infinite; } .card.waiting .l { width: 70%; } /* Ocupa el lugar de las cuatro tarjetas cuando no hay filas. Del ancho de la pantalla y no del de una tarjeta: es lo unico que hay para leer ahi, y achicarlo lo devolveria a la categoria de nota al pie que nadie mira. */ /* El borde lateral era #2f3a4d, un literal sin token entre --border y --border3. El borde izquierdo ya usa var(--border3) (vía border-left), así que el perimetral va al mismo token para que los cuatro lados sean una sola decisión. Los bordes de baja especificidad no comunican información, así que el contraste mínimo de 3:1 no aplica aquí. */ .emptyNote { flex: 1; background: var(--card); border: 1px solid var(--border3); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 18px; } .emptyNote .t { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .emptyNote .d { font-size: 13px; color: var(--muted); margin-bottom: 10px; } /* El enlace al padrón de ARCA viaja al lado de "Ver todos" y tiene que leerse como el mismo tipo de salida. La regla button.ghost está atada a la etiqueta button, así que la copia para el ancla va acá y no se puede resolver aflojando aquel selector: hay .tab.ghost y .publink.ghost que heredarían el padding. */ .emptyNote a.ghost { display: inline-block; margin-left: 8px; padding: 6px 12px; border-radius: 6px; font-size: 13px; background: transparent; color: var(--muted); text-decoration: none; border: 1px solid var(--border3); } .emptyNote a.ghost:hover { color: var(--txt); border-color: var(--accent); } /* Una sola fila de herramientas (2026-09-17): buscador, fecha, los seis filtros de a varios como pastillas chicas y, a la derecha, agrupar / seleccionar / exportar. Antes cada filtro era un
con su , ocho cajas con borde propio que hacían tres renglones completos arriba de la tabla; esa clase se retiró entera porque ya no la usa nadie (el picker ya dice "Tipo: todos" solo, con su placeholder). */ .filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; } .filterbar #q { flex: 1 1 240px; min-width: 200px; } .filterbar .grow { flex: 1 1 auto; min-width: 8px; } /* Un filtro puesto se ve puesto: el borde y el texto en azul. Los filtros se guardan por usuario y sobreviven al cierre de sesion, asi que sin la marca la lista aparece corta al dia siguiente sin motivo aparente. */ input.set, select.set { border-color: var(--accent); color: var(--accent); } /* Buscador con chips: el control de todos los filtros que admiten varios valores. La lista se posiciona sobre el contenido y no empuja la barra de filtros: si la barra creciera, la grilla saltaría en cada tecla. */ .pick { position: relative; display: inline-block; } /* Un solo ancho para todos los filtros: el desplegable de bancos se estiraba hasta el nombre más largo y su caja quedaba del doble que las demás. El nombre completo sigue estando en el título y en la lista abierta. */ .pick .pq { width: 200px; } /* Lo elegido queda a la vista: los filtros suman varios valores y sin verlos no se sabe por que la lista quedo corta. Todos los chips van juntos en un renglon propio debajo de la barra, y no dentro de cada pastilla. Adentro, cada chip empujaba a su vecino: poner un tipo mandaba el segmento a otro renglon y corria el resto de la fila. El div solo se monta (Filtros.tsx) cuando hay al menos un chip puesto: a diferencia de la version anterior, ya no reserva un renglon en blanco de forma permanente — eso era alto que la tabla perdia sin que hubiera nada que leer ahi (medido el 2026-09-17). */ .chipbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; } .pchip .ptag { color: var(--muted2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .pchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 4px 2px 8px; border-radius: 999px; color: var(--accent); border: 1px solid var(--accent); background: var(--card); } .pchip .px { border: 0; background: none; cursor: pointer; padding: 0 3px; color: var(--accent); font-size: 14px; line-height: 1; } .pchip .px:hover { color: #f87171; } .plist { display: none; position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 4px; min-width: 320px; max-height: 300px; overflow-y: auto; background: var(--card); border: 1px solid var(--border3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.55); } .pick.open .plist { display: block; } .pitem { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 6px 10px; font-size: 13px; } .pitem.on { background: var(--row-alt); } /* El tilde ocupa lugar siempre, puesto o no: si apareciera solo cuando el valor esta elegido, el renglon se correria al elegirlo. */ .pitem .ptick { flex: 0 0 12px; color: var(--accent); font-size: 11px; } .pitem.puesta .pname { color: var(--accent); } .pitem .pname { flex: 1; color: var(--txt); } .pitem .pkind { font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: .04em; } .pitem .pn { color: var(--muted); min-width: 28px; text-align: right; } .pempty { padding: 8px 10px; font-size: 13px; color: var(--muted2); } .emptyRow { padding: 28px 10px; font-size: 13px; color: var(--muted2); text-align: center; } /* El interruptor del header usa el mismo control que los de la barra de filtros: sin esta segunda mitad del selector quedaba sin estilo, pegado al texto y con otro tamano que el resto del encabezado. */ .filters .toggle, header .toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; } /* El display:flex de arriba le gana al atributo hidden del navegador: sin esta linea, el interruptor se le mostraba igual a quien no puede usarlo. */ header .toggle[hidden] { display: none; } /* La pestaña Personal esconde la grilla con el atributo hidden, y el atributo pierde contra cualquier display: flex del CSS del bloque: con Personal activa seguían a la vista las pestañas, las tarjetas y los filtros (visto el 2026-09-11). El !important es lo que vuelve al atributo lo que debería ser: la última palabra. */ [hidden] { display: none !important; } input, select, textarea { background: var(--card); color: var(--txt); border: 1px solid var(--border3); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; } input[type=search] { min-width: 260px; } /* La tabla arranca vacía y se llena recién cuando vuelve /api/cross. Sin este alto reservado, el pie de la lista se dibuja arriba del pliegue y se va al fondo de golpe cuando llegan las filas. */ /* El scroll de costado es de la tabla, no de la página. Hasta el 2026-09-13 lo era de la página, y eso rompía dos cosas que Romen reportó juntas: al correrse para leer Zona se iban también el cartel de datos viejos, las tarjetas de resumen y los filtros —quedaba media pantalla en blanco—, y la columna pegada (Sociedad) se anclaba al borde de la VENTANA, así que con el cajón lateral desplegado quedaba debajo de él. Confinar el eje X obliga a confinar también el Y: no existe la combinación overflow-x scrolleable con overflow-y visible —el motor computa el visible como auto—, y clip tampoco sirve: se probó el 2026-09-13 y el encabezado sticky dejaba de pegarse (quedaba en -2390 al bajar la página), porque una caja de recorte también le sirve de ancla al sticky. Así que la tabla pasa a ser la cápsula de abajo, con su propio scroll en los dos ejes, que es justamente la forma que pidió Romen. El alto se acota contra la VENTANA y no contra el contenido: la zona de arriba mide 610px, así que restarla dejaría la tabla en 250px en una pantalla de 860. Acotando contra la ventana, esos 610px se van con el scroll de la página como siempre y la tabla queda ocupándola entera. Se descuenta --topbar (la banda de modo prueba) para que no la tape. */ .tablewrap { min-height: 60vh; position: relative; overflow: auto; max-height: calc(100vh - var(--topbar, 0px) - 12px); overscroll-behavior-x: contain; } /* Los renglones grises de la primera espera. Absolutos y encima de la tabla: adentro del tbody interferirían con el de layout:fixed. Con layout:fixed el encabezado ya no salta al llegar los datos —el ancho lo fijan las columnas declaradas, no el contenido—, pero se mantienen absolutos de todos modos para no sumar nodos al tbody mientras carga. */ .skel { position: absolute; inset: 0; pointer-events: none; } /* En #card-list, en cambio, van en el flujo: ese contenedor arranca en cero y una capa absoluta adentro de algo sin alto no se ve. Los renglones grises pasan a reservar el alto que la lista de fichas nunca reservó. */ .skel-flow { position: static; padding-top: 8px; } .skel i { display: block; height: 11px; margin: 0 10px 23px; border-radius: 3px; background: linear-gradient(90deg, var(--skel1), var(--skel2), var(--skel1)); background-size: 200% 100%; animation: skel 1.1s linear infinite; } .skel i:nth-child(even) { opacity: .7; } @keyframes skel { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skel i { animation: none; } } table { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-base) - 1px); } th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border2); } /* La lista se recorre de arriba hacia abajo llamando: cada pixel de alto de fila es una fila menos que se ve sin scrollear. La celda de Gestion no puede envolver y la de situacion tampoco, que parte "5 Irrecuperable". */ td.gestion, [class^="sit-"] { white-space: nowrap; } /* Textos largos dentro de una celda de ancho fijo (table-layout:fixed): el span recorta con ellipsis y el title del span expone el valor completo. display:block es necesario porque un inline no respeta max-width del padre. */ .cell-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La linea del encabezado va como sombra y no como border-bottom: con border-collapse el borde le pertenece a la tabla y no viaja con la celda pegada, asi que al scrollear las filas se metian debajo del encabezado sin nada que las separara. El z-index va por encima del .reportBox (20). */ /* top: 0 y no var(--topbar) desde el 2026-09-13: el encabezado ya no se pega contra la ventana sino contra .tablewrap, que es el contenedor que scrollea, y ahí el cero es su propio borde de arriba. La banda de modo prueba se descuenta del max-height de la cápsula, así que no hay nada que esquivar acá. Antes --topbar era el alto de lo que estuviera pegado más arriba: con la banda en pantalla, un top 0 metía el encabezado debajo de ella. */ /* La linea de familia se suma a la sombra en vez de ser un border-top por lo mismo que dice el parrafo de arriba: con border-collapse el borde le pertenece a la tabla y no viaja con la celda pegada. Sin familia, var(--fam) cae en transparent y el encabezado queda como estaba. */ th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--bg); z-index: 25; border-bottom: none; box-shadow: inset 0 3px 0 var(--fam, transparent), inset 0 -1px 0 var(--border2); } /* Las 19 columnas miden 1998px y no entran ni en una pantalla de 1900: al correrse para leer Zona o Nacionalidad, el ejecutivo pierde de vista de qué sociedad es el renglón que está mirando. Score y Sociedad se quedan pegadas a la izquierda. Cuál es la última pegada lo decide el JS —depende de qué columnas tenga escondidas cada uno—, así que el corrimiento de la segunda viaja en --pin1 y no está escrito acá. El scroll horizontal es el de .tablewrap (desde el 2026-09-13; antes era el de la página), así que left se mide contra el borde del contenedor. Eso es justamente lo que hace que la columna pegada ya no quede debajo del cajón lateral cuando está desplegado: el contenedor empieza donde termina el cajón. El fondo tiene que ser opaco y repetir el color de cada estado (normal, hover, grupo) porque debajo pasan las columnas que se corren. */ th.pin, td.pin { position: sticky; background: var(--pin-bg); } td.pin { z-index: 15; } th.pin { z-index: 30; } /* --pin0 es cero salvo en modo seleccion, donde adelante de todo aparece la columna de casillas y hay que correr a las pegadas por su ancho. */ .pin-0 { left: var(--pin0, 0px); } .pin-1 { left: calc(var(--pin0, 0px) + var(--pin1, 0px)); } /* La costura marca donde termina lo que no se mueve. */ .pin-last { min-width: 170px; box-shadow: 1px 0 0 var(--border), 4px 0 8px -2px #00000073; } th.pin-last { box-shadow: inset 0 3px 0 var(--fam, transparent), inset 0 -1px 0 var(--border2), 1px 0 0 var(--border), 4px 0 8px -2px #00000073; } /* Cada uno se acomoda la grilla arrastrando el encabezado. El cursor es la única señal de que se puede: un ícono de agarre en las 19 celdas ensuciaba la única fila que se lee de un vistazo. */ #head th { cursor: grab; user-select: none; } #head th.dragging { cursor: grabbing; opacity: .45; } /* La linea marca donde va a caer la columna. Va como box-shadow y no como border porque un borde ensancharia la celda y correria toda la fila un px. */ #head th.drop-before { box-shadow: inset 2px 0 0 var(--accent); } #head th.drop-after { box-shadow: inset -2px 0 0 var(--accent); } tr:hover td { background: var(--row-hover); } tr:hover td.pin { background: var(--pin-hover); } /* Familias de columnas (COLUMN_GROUPS). Hasta ahora la agrupacion existia solo en el panel del dev: en la grilla eran catorce columnas del mismo color y habia que leer el encabezado para saber si lo que se mira lo publico el Boletin o lo contesto el BCRA. El color lo dice sin leer. Dos intensidades, y la diferencia es deliberada. La linea del encabezado va a color pleno porque es la que agrupa. La banda del cuerpo va casi transparente porque ahi abajo compiten senales que si deciden a quien se llama —la situacion crediticia, la fila tomada por otro, el hover— y una banda fuerte les ganaria la atencion sin merecerla. Los tonos son cinco matices separados y desaturados, no los colores de estado: verde y rojo estan tomados por la situacion crediticia y repetirlos aca haria leer riesgo donde solo hay una familia de columnas. El par de cada familia se escribe junto —el pleno y el aguado— y no con color-mix, que no se usa en ninguna otra regla de esta hoja. El selector va sin elemento adelante porque los mismos cinco pares los usan tres cosas: el de la banda, el de la linea y la leyenda de arriba de la tabla. Que el color de "La persona" sea uno solo en los tres lados es justamente lo que hace que la leyenda sirva. */ La opacidad de la banda cambia con el tema y los colores no. Sobre el marino el mismo 7% que en el papel se pierde: el fondo claro tiene de donde restar y el oscuro no. Va como variable y no como cinco reglas repetidas por tema, que es la unica diferencia entre los dos. */ :root { --fam-a: .13; } :root.light { --fam-a: .07; } .fam-prioridad { --fam: #d9a441; --fam-bg: rgba(217, 164, 65, var(--fam-a)); } .fam-sociedad { --fam: #5b8bd0; --fam-bg: rgba( 91, 139, 208, var(--fam-a)); } .fam-socio { --fam: #9b7fd4; --fam-bg: rgba(155, 127, 212, var(--fam-a)); } .fam-banco { --fam: #4aa8a0; --fam-bg: rgba( 74, 168, 160, var(--fam-a)); } .fam-gestion { --fam: #d4798a; --fam-bg: rgba(212, 121, 138, var(--fam-a)); } /* La banda se declara sobre el , que el navegador pinta por debajo del fondo de la celda. Por eso el hover, la fila marcada y la tomada por otro la tapan sin que haya que repetir ninguna de esas reglas aca, y por eso tampoco se ve en las columnas pegadas: su fondo es opaco a proposito, porque debajo pasan las que se corren. En esas dos la familia la dice la linea del encabezado, que si se ve. */ col[class*="fam-"] { background: var(--fam-bg); } /* Leyenda de los colores. Cada item lleva su muestra como pseudoelemento y no como un mas: el texto de la leyenda ya dice todo lo que hay que leer, y un elemento vacio de adorno seria una parada mas para quien navega con lector de pantalla. */ .famkey { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 8px; padding: 0; font-size: 11.5px; color: var(--muted2); letter-spacing: .01em; } .famkey li { display: inline-flex; align-items: center; gap: 6px; } .famkey li::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--fam); } /* Modo seleccion. La casilla va en columna propia y pegada a la izquierda. Ancho fijo porque no muestra un dato. */ th.selcol, td.selcol { position: sticky; left: 0; background: var(--pin-bg); width: 34px; min-width: 34px; padding: 4px 8px; text-align: center; } td.selcol { z-index: 15; } th.selcol { z-index: 30; cursor: default; } tr:hover td.selcol { background: var(--pin-hover); } td.selcol input { cursor: pointer; } /* .55 y no .35: el mismo criterio que button:disabled (mas abajo) es bajar el fondo, no el texto; para una casilla nativa que no tiene fondo propio que bajar, .35 dejaba la marca del check sin leerse. */ td.selcol input:disabled { cursor: not-allowed; opacity: .55; } /* La fila marcada se pinta entera, incluidas las pegadas. */ tr.picked td, tr.picked td.pin, tr.picked td.selcol { background: var(--sel-bg); } tr.picked:hover td, tr.picked:hover td.pin, tr.picked:hover td.selcol { background: var(--sel-hover); } /* Otro ejecutivo esta contactando este prospecto ahora. Ambar y no rojo: rojo ya significa deuda irrecuperable en la columna de situacion. Los tokens de ambar se dejan como literales iguales en ambos temas: son senales, no decoracion, y tienen que seguir siendo distinguibles en el tema claro. */ tr.tomada td, tr.tomada td.pin, tr.tomada td.selcol { background: var(--tomada-bg); } tr.tomada:hover td, tr.tomada:hover td.pin, tr.tomada:hover td.selcol { background: var(--tomada-hv); } /* La barra de lote aparece pegada arriba de la tabla y solo con algo marcado. */ .bulkbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--sel-bg); border: 1px solid var(--sel-bdr); font-size: 13px; color: var(--muted); } /* El atributo hidden del HTML vale display:none con especificidad de atributo, y la regla de arriba es una clase: sin esto la barra vacia se dibujaba igual y quedaba una franja azul arriba de la tabla. */ .bulkbar[hidden] { display: none; } .bulkbar b { color: var(--txt); } /* Los badges son semanticos: el verde es "cliente", el gris es "no cliente", el violeta es "prospecto", etc. Sus colores se mantienen identicos en ambos temas para que el significado no cambie con la luz del monitor. */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .badge.yes { background: #1f6f3f; color: #d7ffe6; } .badge.no { background: #333; color: #bbb; } /* Concurso o quiebra: el único rojo de la fila, porque es la única celda que puede decir que la empresa ya no es un prospecto. */ .badge.concurso { background: #7f1d1d; color: #ffe1e1; } .badge.prospect { background: #7a4dff; color: #fff; } .badge.mixta { background: #7a4dff; color: #fff; } .badge.captacion { background: #1f6f3f; color: #d7ffe6; } .badge.greenfield { background: #2b6cb0; color: #dbeeff; } .badge.profundizacion { background: #8a5a00; color: #ffe9c2; } .badge.group { background: #185f63; color: #ccf5f7; cursor: help; } /* Gris a proposito: "empresa" no es una alarma como el rojo del ⚠ ni una categoria comercial como el violeta de prospecto. Es de que tipo es el contacto, y compite por atencion con el nombre que tiene al lado. */ .badge.org { background: #4a4a52; color: #e4e4ea; cursor: help; margin-left: 5px; padding: 1px 6px; font-size: 10px; font-weight: 500; } .score { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-variant-numeric: tabular-nums; } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .dot.alta { background: #57d68d; box-shadow: 0 0 6px #57d68d80; } .dot.media { background: #f0c419; } /* #4b5563 era Tailwind slate-600: frío y a 2,18:1 sobre --card, por debajo del 3:1 de WCAG 1.4.11 para componentes UI (el punto comunica el nivel de score). Va --muted2 y no un gris propio: da 5,20:1, y sobre todo cambia solo al pasar a claro, que es lo que un literal no hace. Los otros dos puntos sí son literales porque son señal saturada; este es la ausencia de señal, que es lo que ese token significa en el resto de la pantalla. */ .dot.baja { background: var(--muted2); } .sit-1 { color: #57d68d; } .sit-2 { color: #b7d657; } .sit-3 { color: #f0c419; } .sit-4 { color: #f0932b; } .sit-5, .sit-6 { color: #eb4d4b; } /* Los mismos cinco pasos, oscurecidos para el fondo claro. El matiz no se toca —verde sigue verde, ambar ambar, rojo rojo— porque lo que el ojo reconoce es el color, no el tono exacto. Lo que cambia es el contraste: medido sobre el fondo #f4f6f8, los tonos pensados para el tema oscuro daban entre 1,5:1 y 2,2:1, y la situacion crediticia es el dato por el que se levanta el telefono. Estos pasan 4,5:1, que es el minimo legible. */ :root.light .sit-1 { color: #157347; } :root.light .sit-2 { color: #5c6d10; } :root.light .sit-3 { color: #8a6100; } :root.light .sit-4 { color: #a4470a; } :root.light .sit-5, :root.light .sit-6 { color: #b02a28; } /* Los dos estados sin situación crediticia. No entran a la escala verde-rojo a propósito: esa escala es un juicio sobre cómo paga alguien, y acá no hay con qué juzgar. "No figura" es un dato del BCRA y se lee como texto normal; "Sin identificar" es una falla nuestra de identificación y va en el ámbar de aviso, porque nada de esa fila se puede dar por verificado. El punteado avisa que hay una explicación al pasar el mouse. */ .bcra-absent { color: var(--txt2); border-bottom: 1px dotted var(--muted2); cursor: help; } .bcra-unid { color: #f0932b; border-bottom: 1px dotted currentColor; cursor: help; } :root.light .bcra-unid { color: #a4470a; } .muted { color: var(--muted2); } .sub { display: block; color: var(--muted2); font-size: 11px; } /* La localidad deducida se subraya punteada: no la dijo el aviso, la infiro la geometria de la calle y acierta 94 de cada 100 veces. */ .sub.deducida { border-bottom: 1px dotted var(--muted2); cursor: help; } /* El capital sin desglose que lo confirme se marca igual y por lo mismo. */ td.estimado { border-bottom: 1px dotted var(--muted2); cursor: help; } /* El cargo se lee de un vistazo o no sirve. */ .rol { text-transform: capitalize; color: var(--txt2); font-weight: 600; } /* La nacionalidad importa cuando no es la de todos: 1302 de los 18798 socios que la declaran. Antes aca decia "362 de 3983", que era cierto cuando la base tenia la mitad; el numero envejecio y la proporcion no. Azul claro: identico en ambos temas porque es una senal de atencion. */ td.extranjero { color: #93c5fd; } /* Mismo azul, corrido a donde se lee: 1,66:1 sobre el fondo claro no era una senal de atencion, era un texto que desaparecia. */ :root.light td.extranjero { color: #1d4ed8; } .barrio { font-size: 11px; color: var(--muted); } /* "Cargar más" va abajo de la tabla y no arriba: el ejecutivo llega acá después de recorrer la lista, no antes. */ .pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 24px; } .pgbtn { background: var(--pgbtn-bg); color: var(--txt2); border: 1px solid var(--border3); border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: 13px; } .pgbtn:hover:not(:disabled) { background: var(--pgbtn-hv); border-color: var(--muted2); } .pgbtn:disabled { opacity: .4; cursor: default; } .pgpos { color: var(--muted); font-size: 13px; } /* "Ver de a" queda al costado y en gris: es un ajuste, no la accion. */ .pgstep { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } .pgstep select { background: var(--pgbtn-bg); color: var(--txt); border: 1px solid var(--border3); border-radius: 6px; padding: 4px 6px; font-size: 13px; } .tip { position: relative; cursor: help; border-bottom: 1px dotted var(--border); } /* El tipbox tiene fondo oscuro fijo en ambos temas: es texto blanco sobre negro, que da el maximo contraste y no confunde con el contenido de abajo. */ /* position: fixed y no absolute desde el 2026-09-13, cuando la tabla pasó a tener su propio scroll (ver .tablewrap). Un absolute es hijo del contenedor y el contenedor ahora recorta: el desglose de la primera fila se cortaba contra el borde de arriba —medido: el globo empezaba en 599 y la cápsula en 610—. Un fixed se mide contra la ventana y el overflow de los ancestros no lo recorta, siempre que ninguno tenga transform (ninguno lo tiene). A cambio, las coordenadas no las puede poner el CSS: las calcula posicionarTip() en Tabla.tsx, en el hover. */ .tipbox { display: none; position: fixed; z-index: 60; background: var(--tip-bg); border: 1px solid var(--border3); border-radius: 8px; padding: 8px 10px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.45); font-size: 12px; color: #e6e6e6; } .tipbox div { padding: 1px 0; } /* focus-within además de hover: el globo era inalcanzable sin mouse, y el desglose (de dónde sale el score, el monto banco por banco) no está escrito en ningún otro lado. El .tip lleva tabindex desde el 2026-09-14. */ .tip:hover .tipbox, .tip:focus-within .tipbox { display: block; } /* El punto de prioridad sobre papel blanco: medido el 2026-09-14, el verde (#57d68d) daba 1,84:1 y el ámbar (#f0c419) 1,66:1 contra --card, cuando un componente gráfico necesita 3:1 (WCAG 1.4.11). En el tema oscuro pasan; es el claro el que nunca recibió su override, a diferencia de .sit-*. */ :root.light .dot.alta { background: #3d9663; } :root.light .dot.media { background: #a88912; } /* Los botones de acomodar columnas del cajón. Angostos y sin fondo: la fila es una casilla con su nombre, y el orden es la acción secundaria. */ #colTools { border: 0; padding: 0; margin: 0; } /* Botón de icono: CUADRADO, con el ancho atado al alto. Medía 26x22 —casi cuadrado— hasta que button.small pasó a tener min-height 32px con la escala de botones del 2026-09-16: con el ancho todavía en 26 quedó de 26x32, más alto que ancho. Un botón que solo contiene una flecha se lee mal apenas deja de ser cuadrado, y eso es lo que Romen vio como "el botón de la columna quedó rectangular". El padding se va: con las dos medidas atadas al mismo token, el contenido se centra con flex y no hay nada que descuadrar. */ .colmov { min-width: var(--btn-h-sm); min-height: var(--btn-h-sm); padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* El deshabilitado baja el fondo, no el texto: con opacity .35 sobre el botón entero la flecha dejaba de verse, que es el mismo criterio ya escrito para los botones del cajón. */ .colmov[disabled] { cursor: default; color: var(--muted2); border-color: var(--border2); background: transparent; } .tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .note { color: var(--muted); font-size: 12px; margin: 8px 0 16px; } .login { max-width: 320px; margin: 12vh auto; padding: 28px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .login h1 { margin: 0 0 16px; } /* Centrado y grande: en el ingreso el logo es lo único que confirma que llegaste al lugar correcto, y no compite con nada por el espacio. */ .login .brandmark { width: 64px; height: 64px; margin: 0 auto 16px; } .login input { width: 100%; margin-bottom: 12px; } /* Toda ruta que no existe termina redirigida acá, y el sitio es público: el que erra una letra del link que le pasaron por WhatsApp aterriza en un formulario que no puede completar, sin nada que lo devuelva a la página que estaba buscando. Es el mismo callejón que ya se había resuelto en la pantalla de "Mensaje recibido". */ .login .back { display: block; margin-top: 16px; font-size: 13px; text-align: center; color: var(--muted); } button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--btn-r-md); min-height: var(--btn-h-md); padding: var(--btn-pad-md); font-weight: 600; cursor: pointer; font-size: var(--btn-fs-md); line-height: 1; } button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border3); } button.small { min-height: var(--btn-h-sm); padding: var(--btn-pad-sm); font-size: var(--btn-fs-sm); border-radius: var(--btn-r-sm); } /* Para el botón que cambia de rótulo según su estado —"Seguir"/"Siguiendo", "Apagar"/"Confirmar"/"Activar"—. Reserva el ancho del texto más largo, que es lo único que evita que la fila se mueva al tocarlo. 10ch alcanza para los rótulos que hay hoy; si aparece uno más largo, se sube acá y no con un estilo suelto en la pantalla de turno. */ button.alterna { min-width: calc(10ch + 36px); justify-content: center; display: inline-flex; align-items: center; } /* Apagado pero legible, mismo criterio que .ing-btn[disabled]: baja el fondo, no el texto. El único disabled que existía para estos botones venía del bloque de /dev (opacity .45 sobre el beige), y con 45% de opacidad el texto dejaba de leerse: era la mitad de lo que se veía "roto" en el cajón. */ button:disabled { cursor: not-allowed; background: color-mix(in srgb, var(--accent) 30%, var(--bg2)); color: var(--muted2); } button.ghost:disabled { background: transparent; color: var(--muted2); border-color: var(--border2); } /* #b02a28 y no el #eb4d4b del resto de los rojos: acá el par que hay que medir es el texto blanco contra el fondo del botón, y eso no cambia con el tema. Con #eb4d4b da 3,7:1, por debajo del 4,5:1 que pide un botón de este tamaño; con #b02a28 da 6,6:1 en oscuro y en claro por igual. */ button.danger { background: #b02a28; color: #fff; } .err { color: #eb4d4b; font-size: 13px; margin-bottom: 12px; } .ok { color: #57d68d; font-size: 13px; } /* El rojo de los mensajes de error se aclara demasiado sobre fondo blanco: #eb4d4b da 3,7:1 contra el 4,5:1 que pide texto de este tamaño. Mismo reemplazo que ya usa :root.light .sit-5. En oscuro el original está bien. */ :root.light .err, :root.light .tmErr, :root.light .pdErr { color: #b02a28; } /* Avisos apilados abajo a la derecha. Van fijos y fuera del flujo. */ #toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; } .toast { pointer-events: auto; cursor: pointer; max-width: 380px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; background: var(--card); border: 1px solid var(--border); color: var(--txt); box-shadow: 0 8px 24px -6px #000000a6; opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; } .toast.on { opacity: 1; transform: none; } .toast.t-error { border-color: #6b2b2a; border-left: 3px solid #eb4d4b; } .toast.t-ok { border-color: #2f7d4f; border-left: 3px solid #57d68d; } @media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: none; } } /* Diálogo de entrada de texto propio, reemplaza prompt() nativo en las pantallas /dev/*. El nativo no permite mostrar el error junto al campo ni manejar el foco: con un valor vacío no hay forma de avisar sin cerrar la ventana. Mismo token de colores y mismo patrón que #tabModal y #bulkModal. */ #pdModal { width: min(400px, 92vw); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--modal-bg); color: var(--txt); } #pdModal::backdrop { background: rgba(0,0,0,.55); } .pdHead { padding: 16px 18px 10px; border-bottom: 1px solid var(--border2); } .pdHead h3 { margin: 0; font-size: 15px; } .pdBody { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .pdBody label { color: var(--muted); } .pdBody input { width: 100%; } .pdErr { color: #eb4d4b; font-size: 12px; min-height: 16px; } .pdFoot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border2); } /* Diálogo de confirmación propio, reemplaza confirm() nativo. A diferencia de #pdModal no necesita campo de entrada, pero agrega el concepto de gravedad variable: con peligro:true el botón de confirmar usa .danger y un texto descriptivo de la consecuencia ("Borrar", "Generar clave"), en lugar del genérico "Aceptar" que no dice nada sobre lo que va a pasar. El contraste del botón se arregla arriba, en button.danger, y no acá: el problema es del par blanco/rojo y no del tema. */ #cdModal { width: min(380px, 92vw); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--modal-bg); color: var(--txt); } #cdModal::backdrop { background: rgba(0,0,0,.55); } .cdHead { padding: 16px 18px 10px; border-bottom: 1px solid var(--border2); } .cdHead h3 { margin: 0; font-size: 15px; } .cdBody { padding: 14px 18px; font-size: 13px; } .cdBody p { margin: 0; line-height: 1.5; } .cdFoot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border2); } /* Caja de herramientas del ejecutivo. Ya no es una columna que empuja la grilla: es un panel flotante que sale pegado al borde derecho de la barra lateral (sidebar.ts), a --barra-w del borde de la ventana (220px salvo que el usuario haya movido el tirador) o a 56px si la barra está colapsada. Su propio ancho es --herr-w (340px salvo que el usuario haya movido su propio tirador, ver .herr-resize). El truco del translateX: la distancia tiene que ser al menos "left" + ancho propio para que el borde derecho quede en x<=0 sin importar el estado de la barra; con los dos anchos variables ya no alcanza una constante y se calcula con --barra-w (que es siempre >= al left real, 56px colapsada incluido) + --herr-w. Calcularlo con un porcentaje (translateX(-100%)) dependía de "left: 0" para funcionar: con la barra de por medio, un -100% relativo al propio ancho del panel ya no alcanza. */ #sidebar { position: fixed; top: 0; left: var(--barra-w, 220px); bottom: 0; width: var(--herr-w, 340px); background: var(--drawer-bg); border-right: 1px solid var(--border); /* 42: ENTRE el scrim (41) y la barra lateral (45, sidebar.ts). Estaba en 40, o sea por encima de la barra, y el efecto era el que Romen reportó el 2026-09-15: el panel se veía pasar por arriba de la barra al abrirse y al cerrarse, tapando los iconos de navegación durante todo el viaje. Como el panel se esconde desplazándose hacia la izquierda —tiene que cruzar los 220px de la barra para salir de pantalla—, ese cruce era inevitable mientras estuviera por encima. Por debajo de la barra, el mismo movimiento se lee como lo que conceptualmente es: el cajón SALE DE ATRÁS de la barra y vuelve a guardarse ahí. No hay que tocar la animación ni el translateX. Por encima del scrim sí, porque el cajón no debe oscurecerse con él. */ z-index: 42; /* Sombra hacia la derecha: con el scrim oscureciendo el contenido, el canto del panel se confundía con el fondo. La sombra lo despega sin agregar un borde más. */ box-shadow: 6px 0 24px rgba(0,0,0,.28); transform: translateX(calc(-1 * (var(--barra-w, 220px) + var(--herr-w, 340px)))); transition: left .15s ease, transform .18s ease, width .15s ease, visibility 0s .15s; overflow-y: auto; padding: 18px; /* Cerrado, "visibility: hidden" saca los controles del orden de tabulación además de esconderlos con el translateX; el "inert" que pone dashboard.js hace lo mismo para el lector de pantalla. El retraso de .15s (mismo tiempo que la transición del transform) deja que la animación de cierre termine antes de desaparecer del todo. */ visibility: hidden; } html.barra-cerrada #sidebar { left: 56px; } #sidebar.open { transform: translateX(0); visibility: visible; transition: left .15s ease, transform .18s ease, width .15s ease; } .herr-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: col-resize; background: transparent; touch-action: none; } .herr-resize:hover, .herr-resize:focus-visible { background: var(--accent); opacity: .5; } .herr-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Mismo criterio que .barra :focus-visible (sidebar.ts): el flotante tiene su propio anillo de foco porque vive fuera de .barra. */ #sidebar :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* El encabezado del cajón, con el gesto editorial de la portada: el nombre de la herramienta en la serif de titulares y un filete de acento abajo. Antes era un h2 de 15px en sans, que al lado de su propio contenido de 13px no se leía como encabezado de nada. El filete arranca en el canto izquierdo y no cruza el ancho entero: la columna mide 340px y una línea de punta a punta la parte en dos. */ .sidehead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border2); position: relative; } .sidehead::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px; background: var(--accent); } #sidebar h2 { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -.01em; line-height: 1.2; } /* El cuerpo de cada herramienta. **Esto es el arreglo del 2026-09-13 y conviene no volver a perderlo.** Las tres reglas de abajo vivían bajo .tool, que era el
del dashboard viejo. La migración a React del 2026-09-12 retiró dashboardPage y con él ese
: hoy no lo dibuja nadie —quedó nombrado solo en un comentario—, así que las reglas dejaron de aplicar sin que nada fallara. Medido en el navegador antes de tocar: el cuerpo quedaba en display:block sin gap ni padding, con font-size heredado de 14px, y el textarea medía **179px dentro de los 303 disponibles**, con min-height 0 (50px de alto). Afectaba a las cuatro herramientas a la vez, porque las cuatro dibujan .body. Ahora cuelgan de #sidebar, que es quien las dibuja. */ #sidebar .body { display: flex; flex-direction: column; gap: 10px; font-size: 13px; } /* Todos los label del cajón, no solo los hijos directos del cuerpo: los 28 de "Mis columnas" cuelgan de #colTools, y con el selector acotado quedaban con el checkbox pegado al texto ("[x]Tipo"). Es lo que hacía .tool label. */ #sidebar label { display: flex; align-items: flex-start; gap: 8px; } /* El checkbox no se estira con el texto de dos renglones ("Actividad declarada (apagada para el equipo)"): sin esto, flex lo deforma. */ #sidebar label input[type="checkbox"] { flex: none; margin-top: 2px; } #sidebar textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; } /* El botón de la acción primaria del cajón no se estira al ancho de la columna (queda un bloque de 300px que grita), pero tampoco se encoge al largo de su texto: se alinea a la izquierda con un ancho mínimo cómodo. */ #sidebar .body > button { align-self: flex-start; min-width: 128px; } /* Los botones de "Mis columnas" (PanelColumnas) sí van apilados y anchos: son una lista de acciones, no una acción primaria. */ #colTools { display: flex; flex-direction: column; gap: 8px; } /* Estado vacío con forma. Antes era una línea gris suelta adentro de una caja con borde —y en el buzón no había ni eso: la lista vacía dibujaba un rectángulo hueco sin una palabra—. El punteado dice "acá va a haber algo" en vez de parecer un error de carga. */ .emptybox { border: 1px dashed var(--border3); border-radius: 8px; padding: 16px 14px; text-align: center; color: var(--muted2); font-size: 12px; line-height: 1.5; margin: 0; } /* La pizarra (comun/Pizarra.tsx). Va en STYLE y no en el CSS de una pantalla porque la dibujan dos: el cajón de la barra lateral y "Mi día", y las dos cargan /css/app.css. Que el estilo esté en un solo lado es lo que evita que vuelvan a separarse — era la mitad del problema del 2026-09-13. */ /* La línea que explica para qué es la herramienta. Antes era un .meta muted —11px, el mismo tratamiento que una fecha al pie de un ítem—, así que la única frase que explicaba el cajón se leía como un pie de foto. */ .pz-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--txt2); border-left: 2px solid var(--border3); padding-left: 10px; } .pz { display: flex; flex-direction: column; gap: 10px; } .pz-texto { width: 100%; box-sizing: border-box; min-height: 70px; resize: vertical; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--txt); padding: 8px 10px; font: inherit; } /* Adentro del cajón, "#sidebar textarea" le gana por especificidad (un id contra una clase) y la dejaba en 64px: la misma pizarra medía distinto en cada pantalla por seis píxeles. El selector con el id empata y devuelve la decisión a la pieza. */ #sidebar .pz-texto { min-height: 70px; } .pz > button { align-self: flex-start; min-width: 128px; } .pz-lista { list-style: none; margin: 0; padding: 0; } .pz-lista li { padding: 10px 0; border-top: 1px solid var(--border2); } .pz-lista li:first-child { border-top: 0; } /* white-space: pre-wrap porque una nota es texto que la persona escribió con sus propios renglones: sin esto, una lista de tres ítems se lee como un párrafo corrido. */ .pz-body { margin: 0 0 6px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } /* La fecha y el Borrar van juntos, no uno en cada punta. Con justify-content: space-between quedaban pegados a los bordes: bien en la columna de 300px del cajón, y separados por 400px de vacío en Mi día, donde la tarjeta mide 500 — la misma nota se leía como dos cosas distintas. */ .pz-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted2); } .pz-err { color: var(--sig-bad); font-size: 12px; } /* panellink es la acción primaria del encabezado, así que va en el acento y no en un azul fijo. El literal #1d4ed8 se justificaba cuando el acento también era azul y la diferencia entre los dos era invisible; con la paleta miel quedaban dos botones primarios de colores distintos al lado del otro —"Ayuda" azul y "Salir" miel— sin que nada explicara por qué. */ .panellink { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h-md); padding: var(--btn-pad-md); border-radius: var(--btn-r-md); background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; font-size: var(--btn-fs-md); line-height: 1; } .panellink:hover { background: var(--accent2); } /* 41 y no 30: por encima de todo lo que vive adentro de la tabla, incluido el bloque sticky de arriba del Panel comercial (.pc-top, 40 en panel-react-page.ts), que el 2026-09-17 pasó a dibujarse por encima del scrim y del cajón (Romen: bug2). Las capas de la izquierda y el #drawer suben con él; el orden completo está en sidebar.ts. */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 41; display: none; } .scrim.open { display: block; } .iconbtn { background: transparent; border: 1px solid var(--border3); color: var(--txt); border-radius: var(--btn-r-md); min-height: var(--btn-h-md); min-width: var(--btn-h-md); padding: 0 11px; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .who { font-size: 12px; color: var(--muted); } .listbox { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .item { border-bottom: 1px solid var(--border2); padding-bottom: 6px; font-size: 12px; } .item:last-child { border-bottom: 0; } .item .meta { color: var(--muted2); font-size: 11px; } .daterange .sep { color: var(--muted2); } .daterange input { width: 130px; } .dateWindow { display: flex; align-items: center; gap: 6px; margin: 6px 0; } .dateWindow input { flex: 1; min-width: 0; } .winDays { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; } .tfaSecret { font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: 1px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin: 8px 0; user-select: all; word-break: break-all; } .winDays button.on { border-color: var(--accent); color: var(--accent); } .reply { margin: 6px 0 0 12px; padding-left: 8px; border-left: 2px solid var(--border); } /* #4b7bec era el azul de la paleta de series anterior. Con el sistema marino actual ese azul frío no tiene token ni rol semántico acá: el filete de "respuesta del dev" necesita distinguirse del gris del hilo normal (--border) y de las señales de estado (ámbar, verde, rojo). --c1 (#6ea8fe) es el azul de series decorativas y cumple ese rol sin inventar un color nuevo. */ .reply.dev { border-left-color: var(--c1); } .replyBox { margin-top: 6px; } .replyBox textarea { width: 100%; min-height: 52px; margin-bottom: 4px; } .sugActions { display: flex; gap: 4px; margin-top: 4px; } .thread.hidden { display: none; } .item.closed { opacity: .55; } /* .flag es ambar y semantico: igual en ambos temas. */ .flag { margin-left: 6px; color: #f0932b; } /* Vista agrupada. */ tr.grp { cursor: pointer; background: var(--row-alt); } tr.grp:hover { background: var(--row-grp); } tr.grp td { border-top: 1px solid var(--border); } tr.grp b { margin-right: 8px; } tr.grp .grpline { position: sticky; left: 10px; display: inline-block; } .caret { display: inline-block; width: 14px; color: var(--muted2); } /* El triángulo del grupo es un