/* ===================================================================== TABLERO DE GESTIÓN DE PROYECTOS · Ops Console · RODECA Labs ───────────────────────────────────────────────────────────────────── Solicitud de Edna (2026-10-11). El ACOMODO es el de su referencia tipo SaaS (saludo + rango · cuatro indicadores · fila de tres · fila de dos · Kanban); la IDENTIDAD es la de RODECA, no la de la referencia. Decisión de Edna, ya tomada — aquí no se vuelve a discutir, se aplica. ENCAPSULAMIENTO — la regla dura de este archivo Todo selector cuelga de #view-tablero y toda clase que yo introduzco empieza con "tab-". Lo segundo no es redundante: cal.css necesitó un bloque entero de "blindaje" porque la maqueta del calendario traía nombres genéricos (.btn, .panel, .av, .sub) que app.css ya declara a nivel raíz, y prefijar el selector NO alcanza — gana la propiedad más específica, propiedad por propiedad, no la regla entera. Escribiendo desde cero con prefijo propio ese problema no puede existir, así que este archivo no tiene blindaje y no lo necesita. Lo único que se usa de app.css es su propio sistema, como fue diseñado: .view, .view-head, .eyebrow, .mono, .sr, h1/h2 y sus tokens de espaciado y de radio (--s1 a --s8, --r1, --r2). [No escribas aquí la forma abreviada de esos dos nombres con un asterisco seguido de diagonal: esa pareja de caracteres CIERRA el comentario, y toda la prosa que sigue se lee como CSS. Pasó en la primera versión de este archivo y lo cazó scripts/check-tab-sintaxis.mjs contando aperturas contra cierres de comentario.] PALETA — las reglas de la dirección de diseño del CMO (company/.../direccion-diseno-calendario.md, secciones 1 y 5): · Real = "aquí estás / esto está activo". Rango seleccionado, columna de Kanban activa, cabeceras de las columnas. Estructura y selección. · Naranja = "haz esto ahora", poco y a propósito. En TODA esta pantalla hay exactamente DOS usos: el único botón de compromiso (crear proyecto, .tab-btn.tab-pri) y los avisos de pendiente (el indicador de tareas pendientes y la marca de prioridad "urgente"). No hay un tercer uso — en particular NO pinta barras de progreso, que es el ejemplo que la dirección prohíbe por su nombre. · Celeste nunca es superficie ni color principal de identidad: aquí sólo es etiqueta Mono sobre fondo oscuro. · Sin sombras suaves y sin esquinas muy redondeadas. Radios: 10px para cajas (el mismo --r:10px de cal.css) y 999px de pastilla. Espaciados: los --s1..--s8 que ya existen en app.css. No hay escala nueva. GRÁFICAS — los cuatro colores de dato Se dibujan a mano en SVG (la Console sirve script-src 'self': no hay librería que cargar, y una dona y unas barras apiladas son geometría simple). Ningún color literal vive en el marcado de la gráfica: los cuatro estados pasan por token y se voltean abajo, igual que cal.css hace con sus tintes. La dona NO es la única portadora del dato: la leyenda lleva el número y el porcentaje, y la gráfica de actividad lleva además una tabla equivalente oculta (.sr) con las tres series por día. Los valores de los cuatro estados cambiaron el 2026-10-12 — ver el bloque largo "LOS CUATRO ESTADOS" junto a los tokens, más abajo. ===================================================================== */ #view-tablero{ /* marca */ --tab-tinta:var(--depths); --tab-real:var(--royal); --tab-celeste:var(--aster); --tab-naranja:var(--habanero); --tab-papel:var(--luster); --tab-arena:var(--tan); /* semánticos de la Console: escritos contra el token semántico y no contra el de marca, para heredar el modo oscuro en un solo lugar */ --tab-tx:var(--text-1); --tab-tx2:var(--text-3); --tab-fondo:var(--bg); --tab-sup:var(--surface); --tab-sup2:var(--surface2); --tab-borde:var(--border); --tab-r:10px; /* El radio de los botones DEL TABLERO. Edna, 2026-10-12: "los botoncitos están bien el de administrar. pero lo quisiera más redondeado". Es UN valor, no cinco: todo lo que se pica en esta pantalla usa este token y nada más. Las cajas y los paneles se quedan en --tab-r (10px) — la dirección de diseño pide "sin esquinas muy redondeadas" para las superficies, y esto es una excepción acotada a los controles, pedida por Edna y que NO sale de #view-tablero: el resto de la Console no se toca. */ --tab-br:14px; /* El alto del botón «Ver más» de una columna. Es un token y no un número suelto porque la banda azul del encabezado se dimensiona con él: las cuatro columnas miden lo mismo lleven botón o no, y si este valor cambia, la banda lo sigue sola. */ --tab-mas-h:24px; /* ═══════════════ LOS CUATRO ESTADOS DE TAREA ═══════════════ SÓLO LA PALETA DE MARCA · decisión de Edna del 2026-10-13, que REVIERTE la excepción de tonos derivados del 2026-10-12. Edna, 2026-10-13: "tomando únicamente la paleta de colores de RODECA" · "la paleta que usaste de colores complementarios no me agrada en lo absoluto porque están muy opacos". Los cuatro tonos derivados de la vuelta anterior (#E9BE23 ámbar, #189F84 teal, #2154DC azul y #591278 violeta) quedan FUERA. No se sustituyen por otros derivados: se vuelve a los seis colores de la tabla de marca y a nada más — Marino #111144, Real #223382, Celeste #9BACD8, Naranja #F98513, Marfil #F4F1EC, Arena #DAD1C8 — que es lo que la dirección de diseño del CMO pide desde el principio ("no se usa ningún color fuera de esta tabla, ni tonos derivados"). EL REPARTO Y POR QUÉ · hecho → Real. Es lo cerrado: el más pesado contra el papel. · en curso → Naranja. Es el único acento vivo de la marca y "en curso" es donde está la acción. · por validar → Celeste. Está en espera de alguien. · pendiente → Arena. Todavía no empieza: el más liviano. LO QUE SE PIERDE, DICHO CON NÚMEROS Y NO ESCONDIDO La marca no tiene cuatro colores separables en escala de grises. Medido: CLARO · luminancia · texto encima · contra el blanco pendiente #DAD1C8 0.6468 Marino 11.74:1 1.51:1 por validar #9BACD8 0.4143 Marino 7.82:1 2.26:1 en curso #F98513 0.3696 Marino 7.07:1 2.50:1 hecho #223382 0.0432 blanco 11.27:1 11.27:1 Pares en gris: pend/valida 1.501 · pend/curso 1.660 · pend/hecho 7.476 valida/curso 1.107 · valida/hecho 4.982 · curso/hecho 4.503 EL PAR MÁS PARECIDO: en curso / por validar, 1.107:1. Eso está POR DEBAJO del 1.80:1 que exigía el juego derivado, y por debajo incluso de la pareja Marino/Real (1.570:1) que Edna rechazó en la vuelta pasada. No hay forma de evitarlo dentro de la marca: los seis colores dan dos azules oscuros casi iguales (Marino 0.0094 y Real 0.0432, 1.570:1 entre sí), un celeste y un naranja casi iguales en luz (1.107:1), y dos neutros claros. Cualquier juego de cuatro cae debajo de 1.60:1 en algún par. Se buscó: con Marino dentro, el par Marino/Real reaparece; sin Arena, hay que meter Marino. No existe el juego que cumpla las dos cosas. ASÍ QUE LA DIFERENCIA LA CARGA LA FORMA, NO SÓLO EL COLOR Edna, 2026-10-13, ya rechazó dos veces una paleta optimizada por contraste y prefiere la de marca. El criterio manda sobre el número — y lo que compensa el número es la FORMA de la marca de color, que se ve igual en gris, en blanco y negro y sin distinguir colores: · hecho → RELLENO SÓLIDO · en curso → RELLENO SÓLIDO · por validar → RAYADO (franjas a 45°) · pendiente → RAYADO (franjas a −45°, y más separadas) Los dos estados resueltos o activos van sólidos y están a 4.503:1 entre sí, que es de sobra. Los dos estados en espera van rayados y se separan entre ellos por 1.501:1 MÁS la dirección de la raya. Y el par flojo de verdad —en curso 1.107:1 por validar— queda separado por sólido contra rayado, que es la diferencia de forma más fuerte de las cuatro. Nota de visión del color: Celeste contra Naranja es, además, el único par de la marca que SIGUE distinguiéndose con deficiencia rojo-verde (es el eje azul–amarillo, el que esa deficiencia conserva). El par que de verdad se perdería sin forma es pendiente/por validar, y por eso los dos llevan raya en dirección distinta. Las franjas van en Marino (claro) y en Marino también en oscuro: las dos marcas rayadas son claras en los dos temas, así que la tinta oscura encima se ve siempre. Marino es de la marca; no entra un color nuevo. DÓNDE SE APLICA LA FORMA: en la leyenda de la dona, en los arcos de la dona, en las barras de la gráfica de actividad y en los chips de estado — o sea, en todos los lugares donde el color de estado pinta ÁREA. Lo verifica scripts/check-tab-colores.mjs, que además exige que los cuatro valores sean de la tabla de marca y nada más. Y EL NARANJA NO PUEDE COMPETIR CON EL BOTÓN DE COMPROMISO. Ahora Naranja es además un estado de tarea, así que se acota: como estado sólo pinta MARCAS DE DATO (arco, barra, muestra de leyenda, punto de 8px) — nunca una superficie de control, nunca un botón, nunca un borde de panel. El único control naranja de la pantalla sigue siendo .tab-btn.tab-pri. El `-tx` de cada uno es lo que devuelve sobre() para ese color, y existe porque un chip de estado lleva texto ENCIMA del color: el JS no puede calcularlo (el color vive en CSS, no en el marcado) y escribirlo a ojo era la forma de que dejara de cuadrar. check-tab-colores.mjs compara cada `-tx` contra sobre() del color de al lado. */ --tab-g-pend:#DAD1C8; --tab-g-pend-tx:#111144; --tab-g-hecho:#223382; --tab-g-hecho-tx:#FFFFFF; --tab-g-curso:#F98513; --tab-g-curso-tx:#111144; --tab-g-valida:#9BACD8; --tab-g-valida-tx:#111144; /* La tinta de las franjas de las dos marcas rayadas. Marino en los dos temas: las dos marcas rayadas (Arena y Celeste) son claras siempre. */ --tab-raya:#111144; /* ═══════════════ LA CADENA COMERCIAL · fases del pipeline ═══════════════ Edna, 2026-10-13, con su cadena en la mano: seis fases de la 0 a la 5 y una línea entre la 2 y la 3 que dice "aquí se paga todo". NO SON SEIS COLORES, Y NO ES UNA OMISIÓN. Dentro de la tabla de marca no existen seis tonos separables — ya está medido arriba: ni siquiera hay CUATRO que lleguen a 1.80:1, el techo de la marca es 1.570:1. Con seis es peor. Y Naranja tiene exactamente dos usos en esta pantalla (el botón de compromiso y las marcas de pendiente) y no puede tener un tercero, por mucho que la imagen de Edna pinte la fase 3 de naranja. Lo que distingue a una fase es su POSICIÓN en la cadena y su RÓTULO: la barra va en orden de la 0 a la 5, cada segmento lleva su número adentro cuando cabe, y la leyenda de abajo lleva el nombre completo, el número de tareas y el cobro de cada una. EL COLOR CARGA UNA SOLA DISTINCIÓN: LA QUE VALE DINERO. · antes de la línea (todavía no se cobra) → la marca LIVIANA, que es el mismo Arena que ya es "pendiente": lo que aún no pesa; · después de la línea (ya cobrado) → la marca PESADA, que es el mismo Real que ya es "hecho" y que en oscuro se voltea a Marfil por la misma razón que él (Real contra #111328 queda a 1.62:1 y desaparece). Se escriben como ALIAS de los tokens de estado y no como una copia de sus valores: así el volteo de tema ya está resuelto en un solo lugar y no hay dos listas de hexadecimales que se puedan desincronizar. Ningún color entra a la hoja que no estuviera ya. Y LAS FASES VECINAS SE SEPARAN POR FORMA, no por tono: alternan sólido y rayado con los mismos de index.html, más un filo de 2 unidades entre segmentos que calcula barraFases() en tablero.js. Es el mismo recurso con el que la dona separa sus dos estados en espera. */ --tab-fase-gra:var(--tab-g-pend); --tab-fase-gra-tx:var(--tab-g-pend-tx); --tab-fase-pag:var(--tab-g-hecho); --tab-fase-pag-tx:var(--tab-g-hecho-tx); /* tintes, pistas y rejillas */ --tab-t-real:rgba(34,51,130,.05); --tab-t-hover:rgba(34,51,130,.08); --tab-t-naranja:rgba(249,133,19,.1); --tab-pista:rgba(34,51,130,.1); /* la pista de una barra de progreso */ --tab-rejilla:rgba(34,51,130,.12); /* las líneas de eje de una gráfica */ --tab-drop:rgba(34,51,130,.07); /* la columna que va a recibir la tarjeta */ --tab-esq:rgba(34,51,130,.07); /* el gris de un esqueleto de carga */ --tab-velo:rgba(17,17,68,.45); /* el fondo de un diálogo */ /* EL RECORRIDO GUIADO (2026-10-15). Su velo es MÁS OSCURO que el de un diálogo (.45) a propósito: un diálogo sólo tiene que apagar el fondo, y un recorrido tiene que hacer que el HUECO se lea como iluminado. Es el mismo .55 del recorrido de la Console (tour.css), y es el número correcto por una razón que se puede medir: Marino al 55% sobre Marfil deja el velo en 4.0:1 contra el hueco, y al 45% se queda en 3.2:1 — ahí el hueco deja de verse recortado y parece un reflejo. El filo es el borde del hueco. En claro casi no se nota y da igual; en OSCURO es lo único que lo separa del velo, porque negro al 66% sobre una superficie oscura casi no cambia el tono. */ --tab-rec-velo:rgba(17,17,68,.55); --tab-rec-filo:rgba(17,17,68,.2); --tab-sobre-real:var(--luster); /* texto marfil sobre Real */ --tab-rojo:var(--err-c); --tab-verde:var(--ok-c); } #view-tablero *, #view-tablero *::before, #view-tablero *::after{box-sizing:border-box} #view-tablero :focus-visible{outline:2px solid var(--tab-naranja);outline-offset:2px} /* ───────── saludo y selector de rango ───────── El rango manda sobre los cuatro indicadores y sobre nada más: el avance de un proyecto es de todo el proyecto, la dona y el Kanban son la población completa y la actividad son siempre los últimos 7 días. Eso se resuelve con rótulos honestos —la nota de aquí y el subtítulo de cada panel— y no agregando filtros que el dato no tiene. */ /* El rótulo del rango nombra las tarjetas sobre las que manda, así que es una frase y no una fecha suelta: la cabecera envuelve y el rótulo puede ocupar dos renglones en el teléfono en vez de desbordarse o cortar el nombre de una tarjeta a media palabra. */ #view-tablero .tab-kpis-h{display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:var(--s2) var(--s3);margin-bottom:var(--s2)} #view-tablero .tab-kpis-h .tab-panel-sub{min-width:0;flex:1 1 auto} /* "Agregar proyecto" vive AQUÍ y no en el panel de progreso. Edna, 2026-10-12: "lo que está en administrar, me gustaría más que esté fuera de esa celda, en la parte de arriba. Arriba de donde va a quedar el número de todas las tareas que sea agregar proyecto. Con todo lo que tiene la vista de administrar." Va al final de esta cabecera, que es justo encima de la cuarta tarjeta («Total de tareas») cuando los cuatro indicadores están en fila. Abre el MISMO diálogo que abría «Administrar» —crear, renombrar, color, responsable, archivar, reactivar y clasificar—: no se construyó una vista nueva, se movió el botón. */ #view-tablero .tab-kpis-h .tab-btn{flex:0 0 auto;margin-left:auto} #view-tablero .tab-sub-izq{display:block;text-align:left;margin-top:2px} /* EL SALUDO, con la foto del Calendario (Edna, 2026-10-13). Es lo primero que se ve y hasta ahora era una línea de 15px perdida entre la cabecera y las tarjetas. Ahora es un bloque de identidad con jerarquía de verdad: foto de 56px, el nombre a 28px/700 —la escala h1 de pantalla ancha de app.css, no una escala inventada— y la frase de contexto a 13px en el gris secundario. Tres pesos distintos, que es lo que faltaba. El círculo mide lo mismo haya foto o no: con iniciales se ve igual de terminado, que es el caso normal hoy. */ #view-tablero .tab-saludo{display:flex;align-items:center;gap:var(--s4); margin:0 0 var(--s6);color:var(--tab-tx2)} #view-tablero .tab-saludo .tab-av{width:56px;height:56px;font-size:19px;letter-spacing:.02em} #view-tablero .tab-saludo-t{display:flex;flex-direction:column;gap:3px;min-width:0} #view-tablero .tab-saludo b{font-size:28px;font-weight:700;letter-spacing:-.02em; line-height:1.15;color:var(--tab-tx)} #view-tablero .tab-saludo .tab-saludo-r{font-size:13px;color:var(--tab-tx2)} /* ───────── avisos ───────── Un fallo se dice; no se queda en silencio y no se queda en la consola del navegador. Mismo gesto que cal.css: franja con borde izquierdo de color y el mensaje que manda el servidor, tal cual. */ #view-tablero .tab-aviso{margin:0 0 var(--s4);padding:var(--s3);background:var(--err-bg); color:var(--tab-rojo);border-left:3px solid var(--tab-rojo);border-radius:0 var(--r2) var(--r2) 0; font-size:13px;line-height:1.5} #view-tablero .tab-aviso.tab-ok{background:var(--ok-bg);color:var(--tab-verde);border-left-color:var(--tab-verde)} /* ───────── botones ───────── .tab-pri es el ÚNICO naranja de botón en toda la pantalla: el botón de compromiso (crear un proyecto). Si algún día hace falta otro, primero se quita éste — la dirección de diseño pide uno por pantalla, no dos. */ #view-tablero .tab-btn{display:inline-flex;align-items:center;gap:var(--s2);height:34px; padding:0 var(--s4);background:var(--tab-sup);color:var(--tab-tx);border:1px solid var(--tab-borde); border-radius:var(--tab-br);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap; transition:background-color 150ms ease,border-color 150ms ease} @media(hover:hover){#view-tablero .tab-btn:hover{background:var(--tab-t-real);border-color:var(--tab-real)}} /* El chico lleva el MISMO radio y no uno proporcional: dos botones del mismo gesto a radios distintos es lo que hace que una pantalla se vea descuidada, y Edna pidió un radio, no una escala de radios. A 28px de alto, 14px de radio es media pastilla y se ve a propósito. */ #view-tablero .tab-btn.tab-sm{height:28px;padding:0 var(--s3);font-size:12px} #view-tablero .tab-btn.tab-pri{background:var(--tab-naranja);border-color:var(--tab-naranja);color:var(--depths);font-weight:600} @media(hover:hover){#view-tablero .tab-btn.tab-pri:hover{background:var(--tab-naranja);filter:brightness(1.06)}} #view-tablero .tab-btn.tab-peligro{color:var(--tab-rojo);border-color:var(--tab-borde)} @media(hover:hover){#view-tablero .tab-btn.tab-peligro:hover{background:var(--err-bg);border-color:var(--tab-rojo)}} #view-tablero .tab-btn[disabled]{opacity:.5;cursor:not-allowed} #view-tablero .tab-x{display:grid;place-items:center;width:30px;height:30px;border:0;background:none; color:var(--tab-tx2);border-radius:999px;cursor:pointer} #view-tablero .tab-x svg{width:18px;height:18px} @media(hover:hover){#view-tablero .tab-x:hover{background:var(--tab-t-real);color:var(--tab-tx)}} /* ───────── campos ───────── */ #view-tablero .tab-campo{display:flex;flex-direction:column;gap:var(--s1);min-width:0} #view-tablero .tab-campo > span{font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--tab-tx2)} #view-tablero .tab-campo input[type=text], #view-tablero .tab-campo input[type=date], #view-tablero .tab-campo select, #view-tablero .tab-campo textarea{height:34px;padding:0 var(--s2);background:var(--tab-sup); color:var(--tab-tx);border:1px solid var(--tab-borde);border-radius:var(--r2);font-size:13px; font-family:var(--sans);width:100%} #view-tablero .tab-campo textarea{height:auto;min-height:56px;padding:var(--s2);line-height:1.5;resize:vertical} #view-tablero .tab-campo input[type=color]{height:34px;width:46px;padding:2px;background:var(--tab-sup); border:1px solid var(--tab-borde);border-radius:var(--r2);cursor:pointer} #view-tablero .tab-campo input:focus, #view-tablero .tab-campo select:focus, #view-tablero .tab-campo textarea:focus{border-color:var(--tab-real);outline:0} /* Cuántos caracteres quedan. Va DEBAJO del campo y no a su lado: al lado le robaría ancho al campo en el teléfono, donde la fila del editor ya se envuelve. Alto fijo para que aparecer no empuje nada —el contador se pinta en cuanto se cablea el editor, no sólo al escribir— y tabular-nums para que el número no baile al pasar de 80 a 79. */ #view-tablero .tab-cuenta{font-variant-numeric:tabular-nums; font-size:11px;color:var(--tab-tx2);line-height:14px;height:14px; text-align:right} /* "Está por topar" se dice subiendo el contraste, NO con Naranja: la dirección de marca reserva Naranja para el botón de compromiso y para los avisos de pendiente, y un contador de caracteres no es ninguno de los dos (lo caza scripts/check-tab-css.mjs, que por eso existe). */ #view-tablero .tab-cuenta.tab-cuenta-cerca{color:var(--tab-tx)} /* ───────── paneles ───────── Una sola caja repetida cinco veces lee como "sin diseño" (hallazgo 3 de la dirección de diseño). Lo que distingue aquí no es un borde ni una sombra: es la cabecera, que lleva el título en peso 600 y su etiqueta Mono al otro extremo, y el borde superior de color donde el dato tiene dueño. */ /* LA DENSIDAD, 2026-10-13. Edna: el acomodo ya es el de su referencia, lo que faltaba era que SE SINTIERA como ella — "tarjetas con aire, jerarquía clara, números grandes que se lean de lejos, y la densidad baja". Todo estaba a --s3/--s4, o sea 12 y 16px, y con la tipografía casi toda del mismo tamaño: uniforme y apretado. Los paneles suben a --s5 (20px) de relleno, la cabecera a --s4 de separación, y el título del panel pasa de 14px a 17px/600, que es la escala h3 de app.css — no una nueva. */ #view-tablero .tab-panel{background:var(--tab-sup);border:1px solid var(--tab-borde); border-radius:var(--tab-r);padding:var(--s5);min-width:0;display:flex;flex-direction:column} #view-tablero .tab-panel-h{display:flex;align-items:center;justify-content:space-between; gap:var(--s3);margin-bottom:var(--s4);min-height:28px} #view-tablero .tab-panel-h h2{font-size:17px;font-weight:600;line-height:24px;letter-spacing:-.01em} #view-tablero .tab-panel-sub{font-size:11.5px;line-height:1.45;color:var(--tab-tx2);text-align:right} #view-tablero .tab-panel-b{flex:1;min-width:0} /* ───────── los cuatro indicadores ───────── */ #view-tablero .tab-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4);margin-bottom:var(--s4)} #view-tablero .tab-kpi{background:var(--tab-sup);border:1px solid var(--tab-borde); border-radius:var(--tab-r);padding:var(--s5);min-width:0} #view-tablero .tab-kpi .tab-kpi-e{font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--tab-tx2);display:block;margin-bottom:var(--s3)} #view-tablero .tab-kpi .tab-kpi-v{font-variant-numeric:tabular-nums; font-size:38px;font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--tab-tx);display:block} #view-tablero .tab-kpi .tab-kpi-d{font-size:12px;display:inline-block; margin-top:var(--s2);color:var(--tab-tx2)} #view-tablero .tab-kpi .tab-kpi-d.tab-sube{color:var(--tab-verde)} #view-tablero .tab-kpi .tab-kpi-d.tab-baja{color:var(--tab-rojo)} /* delta_pct = null significa "sin comparación", NO cero; nunca "↑0%". Y se dice con palabras QUE SE VEN: antes era un guion con el texto metido en un de 1×1 px, así que con "Mes anterior" o "Este año" eran tres de cuatro tarjetas enseñando un guion pelón (F4 de QA). El acomodo de la tarjeta no se rompe porque la línea del delta ya era un inline-block en su propio renglón; lo único que se cuida es que "sin comparación" no se parta en dos y no se lea como un dato (es Mono chico, gris, sin flecha y sin número). */ #view-tablero .tab-kpi .tab-kpi-d.tab-nada{color:var(--tab-tx2)} #view-tablero .tab-kpi .tab-kpi-d.tab-kpi-sc, #view-tablero .tab-kpi .tab-kpi-d.tab-kpi-nr{font-size:11px; white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} /* El rótulo propio de un indicador que no depende del rango. Es más largo que un delta, así que éste sí se envuelve en dos renglones en vez de cortarse: el dato que lleva es la FRASE, no un número. */ #view-tablero .tab-kpi .tab-kpi-d.tab-kpi-nr{white-space:normal;line-height:1.4; text-overflow:clip;text-wrap:balance} /* El indicador de pendientes es uno de los dos únicos naranjas de la pantalla: es un pendiente real, que es exactamente lo que la dirección de diseño autoriza para Naranja. */ #view-tablero .tab-kpi.tab-kpi-pend{border-left:3px solid var(--tab-naranja)} /* ───────── fila de tres y fila de dos ───────── */ #view-tablero .tab-f3, #view-tablero .tab-f2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-bottom:var(--s4)} /* ───────── progreso de proyectos ───────── Edna, 2026-10-12: "esto para que se haga más chiquita proceso de proyectos", "solo se pueden ver cuatro proyectos y los demás en un botón de ver más", y "son proyectos internos, no son proyectos que nos estén generando dinero, entonces los vamos a mover a una sección de proyectos internos. Puede ser ahí mismo. Pero dividir la celda y que diga proyectos internos." De dónde sale lo "más chiquito", que no es apretar la tipografía: · el tope de cuatro por bloque (lo pone tablero.js, TOPE_PROY); · la barra de avance DESAPARECE del proyecto que no tiene cronograma, que hoy son casi todos — y eso no es una decisión de espacio, es la de honestidad del punto 11 (ver pintarProyectos en tablero.js); · las filas pasan de --s3 a --s2 de separación. Dos bloques en la MISMA celda, divididos por una línea, con su rótulo cada uno. No son dos paneles: Edna pidió dividir la celda, no partirla en dos. */ #view-tablero .tab-proy{display:flex;flex-direction:column;gap:var(--s4)} #view-tablero .tab-proy-g{display:flex;flex-direction:column;gap:var(--s3);min-width:0} /* El bloque de internos se separa del de clientes con una línea y su rótulo. La línea es sólida y la de "Sin proyecto" es rayada, a propósito: ésta divide dos grupos de proyectos de verdad, aquélla separa lo que NO es un proyecto. */ #view-tablero .tab-proy-g + .tab-proy-g{margin-top:var(--s1);padding-top:var(--s3); border-top:1px solid var(--tab-borde)} #view-tablero .tab-proy-gh{display:flex;align-items:baseline;justify-content:space-between; gap:var(--s2);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--tab-tx2)} #view-tablero .tab-proy-gh b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tab-tx2)} /* Una fila de proyecto ES un botón: Edna pidió que cada proyecto se pueda picar para ver su detalle, y eso tiene que ser un control de verdad — alcanzable con Tab, disparable con Enter y con Espacio— y no un div con un click. Se le quitan los adornos de botón y se le deja el acomodo en rejilla, que es el que ya tenía. */ #view-tablero .tab-proy-f{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3); align-items:baseline;min-width:0;width:100%;text-align:left;background:none;border:0; padding:var(--s2);margin:0 calc(-1 * var(--s2));font:inherit;color:inherit; border-radius:var(--tab-br);transition:background-color 120ms ease} #view-tablero button.tab-proy-f{cursor:pointer} @media(hover:hover){#view-tablero button.tab-proy-f:hover{background:var(--tab-t-real)}} /* La flecha dice que la fila lleva a otro lado. Aparece en el hover y en el foco, no siempre: ocho flechas fijas en una columna angosta son ruido. */ #view-tablero .tab-proy-ir{font-size:14px;line-height:1;color:var(--tab-real);margin-left:var(--s2); opacity:0;transition:opacity 120ms ease} @media(hover:hover){#view-tablero button.tab-proy-f:hover .tab-proy-ir{opacity:1}} #view-tablero button.tab-proy-f:focus-visible .tab-proy-ir{opacity:1} #view-tablero .tab-proy-n{font-size:14px;font-weight:600;color:var(--tab-tx);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:var(--s2)} #view-tablero .tab-proy-pt{width:9px;height:9px;border-radius:999px;flex-shrink:0} #view-tablero .tab-proy-c{font-variant-numeric:tabular-nums;font-size:12px;font-weight:500; color:var(--tab-tx2);white-space:nowrap;display:block;text-align:right} /* "sin iniciar" y "sin cronograma" NO son porcentajes y no se pueden ver como uno: van en Mono gris, en minúscula, sin número al lado. */ #view-tablero .tab-proy-c .tab-proy-nada{font-weight:400;color:var(--tab-tx2);opacity:.9} /* "Ver más" / "Ver menos" de cada bloque. Dice CUÁNTOS faltan, no "ver más" a secas: el número es el dato que hace decidir si vale la pena abrirlo. */ /* El «ver más» del panel de proyectos, cuando va en la CABECERA y no al pie de un bloque: mismo control, alineado con el título. Edna pidió "solo el botón" en este panel — nada de la banda Real que llevan las columnas del flujo de tareas. */ #view-tablero .tab-proy-mas.tab-proy-mas-h{align-self:center;margin-left:auto;height:28px} #view-tablero .tab-panel-h .tab-proy-mas-h{flex:0 0 auto} #view-tablero .tab-proy-mas{align-self:flex-start;height:26px;padding:0 var(--s3); background:none;border:1px dashed var(--tab-borde);border-radius:var(--tab-br); font-size:12px;font-weight:500;color:var(--tab-tx2);cursor:pointer; transition:border-color 120ms ease,color 120ms ease} @media(hover:hover){#view-tablero .tab-proy-mas:hover{border-color:var(--tab-real);color:var(--tab-tx)}} /* El cronograma, cuando el proyecto lo tiene cargado. DOS números y el desfase: "comprometido 45% · real 31% · 2 semanas atrás". La barra lleva el avance REAL de relleno y una muesca donde va el comprometido, así que el atraso se ve además de leerse. */ /* DOS MAGNITUDES, UNA PISTA. La pista sube de 6 a 14px porque ahora lleva dos barras encajadas, no una: el comprometido a todo lo alto y el real encima, más delgado y centrado. Es la forma estándar de comparar "dónde deberíamos ir" contra "dónde vamos" sin poner dos renglones. Las dos van en el color del proyecto —que es DATO, lo manda el API y Edna lo puede cambiar— y lo que las distingue es el peso: el plan atenuado, el hecho a color pleno. Mismo color, dos pesos: no se inventa un segundo código de color encima del que ya existe. Naranja no entra aquí: la dirección de diseño lo prohíbe por su nombre en barras de progreso. */ #view-tablero .tab-proy-cr{grid-column:1 / -1;position:relative;height:14px; background:var(--tab-pista);border-radius:999px;overflow:hidden;margin-top:3px} /* el comprometido — el plan */ #view-tablero .tab-proy-cr b{position:absolute;left:0;top:0;bottom:0; border-radius:999px;opacity:.3} /* el real — lo hecho */ #view-tablero .tab-proy-cr i{position:absolute;left:0;top:4px;bottom:4px; display:block;border-radius:999px} /* el filo exacto del plan */ #view-tablero .tab-proy-cr u{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px; background:var(--tab-tx);border-radius:1px;text-decoration:none;opacity:.55} #view-tablero .tab-proy-f.tab-atrasado .tab-proy-cr u{background:var(--warn-c);opacity:1} /* LAS DOS MARCAS JUNTO A LOS NÚMEROS. Sin ellas la barra de arriba es un dibujo bonito que nadie sabe leer: la marca atenuada va pegada a "Comprometido" y la plena a "real", con el mismo peso que tienen en la barra. Es la leyenda, puesta donde se necesita, sin un renglón aparte. */ #view-tablero .tab-mk{display:inline-block;width:9px;height:9px;border-radius:2px; margin-right:5px;vertical-align:-1px;flex-shrink:0} #view-tablero .tab-mk-plan{opacity:.3} #view-tablero .tab-proy-c .tab-proy-sm, #view-tablero .tab-proy-c .tab-proy-ds{margin-left:var(--s1)} #view-tablero .tab-proy-ds{font-size:11.5px;font-weight:600;white-space:nowrap} #view-tablero .tab-proy-f.tab-atrasado .tab-proy-ds{color:var(--warn-c)} #view-tablero .tab-proy-f.tab-al-dia .tab-proy-ds{color:var(--tab-verde)} /* LA COBERTURA, donde iría el desfase cuando el avance no está medido. Mismo tamaño y mismo sitio que .tab-proy-ds, pero NUNCA verde ni rojo: es un dato de cuánto respaldo tiene el número de al lado, no un juicio de si el proyecto va bien. Por eso es su propia clase y no un modificador de .tab-proy-ds — un día alguien le pondría color a aquélla y se lo heredaría a ésta. */ #view-tablero .tab-proy-sm{font-size:11.5px;font-weight:400;white-space:nowrap;color:var(--tab-tx2)} /* La frase corta que explica el "real 0%". Va en renglón propio debajo de la barra, en minúscula y en el gris secundario: tiene que leerse, no competir con el nombre del proyecto. El párrafo largo vive en el detalle. */ #view-tablero .tab-proy-nm{grid-column:1 / -1;font-size:11px;line-height:1.35; color:var(--tab-tx2)} /* SIN MEDIR: LA BARRA SE PINTA IGUAL. Antes esta regla la atenuaba al 55% y el resultado era justo lo que Edna reclamó el 2026-10-13 — "los proyectos que ya están avanzados como PH y PM están sin líneas de color de medición": Perritos House tiene cobertura 58% y por eso `medido` llega en false, así que su fila salía desteñida y parecía vacía. La honestidad se conserva donde de verdad vive —sin desfase, sin "al día", sin verde ni rojo, y con la frase que explica el "real %" debajo— pero el dato se pinta a toda voz: el comprometido y el real se dibujan igual que en un proyecto medido. Lo único que esta clase sigue haciendo es quitarle peso a la muesca, porque el filo del plan no es un juicio. */ #view-tablero .tab-proy-f.tab-sin-medir .tab-proy-cr u{background:var(--tab-tx2);opacity:.45} /* La pista y el relleno. El relleno va en el color del proyecto, que es DATO (lo manda el API y Edna lo puede cambiar); la pista es un velo de Real. Naranja no entra aquí: la dirección de diseño prohíbe por su nombre usarlo en barras de progreso. */ #view-tablero .tab-proy-p{grid-column:1 / -1;height:6px;background:var(--tab-pista); border-radius:999px;overflow:hidden} #view-tablero .tab-proy-p i{display:block;height:100%;border-radius:999px} #view-tablero .tab-proy-m{grid-column:1 / -1;display:flex;gap:var(--s2);flex-wrap:wrap; align-items:center;font-size:11px;color:var(--tab-tx2)} /* EN QUÉ FASE DE LA CADENA VA ESTE PROYECTO (Edna, 2026-10-13). Va en una pastilla propia y no mezclada con el responsable y el estado, porque los dos casos tienen que verse DISTINTOS: · con fase → pastilla llena, es un dato; · sin fase → pastilla hueca y punteada, es una DECISIÓN QUE FALTA. Hoy los ocho proyectos activos están sin fase —nadie se las ha puesto, y eso es correcto—, así que la segunda es la que Edna va a ver ocho veces al abrir: el punteado es el gesto de "pendiente de decidir" que esta pantalla ya usa para el estado «pendiente», no el de "algo se rompió" (que aquí es .tab-falla, en rojo, y no se parece en nada). */ #view-tablero .tab-proy-fa{display:inline-block;padding:0 6px;border-radius:999px; background:var(--tab-sup2);border:1px solid var(--tab-borde);color:var(--tab-tx2); font-size:10.5px;line-height:17px;white-space:nowrap;max-width:100%; overflow:hidden;text-overflow:ellipsis} #view-tablero .tab-proy-fa.tab-proy-fa-no{background:none;border-style:dashed;font-style:italic} #view-tablero .tab-proy-f.tab-archivado .tab-proy-n{color:var(--tab-tx2);text-decoration:line-through} /* Un proyecto sin una sola tarea todavía. Al arrancar hay cuatro así (la migración sembró 10 proyectos y clasificó 40 tareas), y una pista vacía sin explicación se lee como un error. */ #view-tablero .tab-proy-f.tab-cero .tab-proy-c{color:var(--tab-tx2)} #view-tablero .tab-proy-f.tab-cero .tab-proy-p{opacity:.5} /* ───────── la fila "Sin proyecto" ───────── NO es un proyecto y no se puede ver como uno: al arrancar son 179 de 219 tareas y es el camino por el que Edna las va a ir repartiendo. Se separa del grupo con una línea, va al final para que los proyectos de verdad lean como proyectos, no lleva punto de color (no tiene identidad), su pista va rayada en vez de rellena de un color que no existe, y lleva su propio botón de acción. */ #view-tablero .tab-proy-sin{margin-top:var(--s3);padding-top:var(--s3); border-top:1px dashed var(--tab-borde)} #view-tablero .tab-proy-sin .tab-proy-n{color:var(--tab-tx2);font-style:normal} #view-tablero .tab-proy-sin .tab-proy-hueco{width:8px;height:8px;border-radius:999px; border:1px dashed var(--tab-tx2);flex-shrink:0;display:block} #view-tablero .tab-proy-sin .tab-proy-p{background:none;border:1px dashed var(--tab-borde);height:8px} #view-tablero .tab-proy-sin .tab-proy-cuenta{font-variant-numeric:tabular-nums; font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--tab-tx)} #view-tablero .tab-proy-sin .tab-ed-a{margin-top:var(--s2)} /* las filas del diálogo de clasificar */ #view-tablero .tab-sin-f{display:grid;grid-template-columns:1fr;gap:var(--s2);padding:var(--s3); background:var(--tab-fondo);border:1px solid var(--tab-borde);border-radius:var(--r2)} #view-tablero .tab-sin-f .tab-sin-t{font-size:13px;line-height:1.4;color:var(--tab-tx);overflow-wrap:anywhere} #view-tablero .tab-sin-f .tab-sin-r{display:flex;gap:var(--s2);align-items:flex-end;flex-wrap:wrap} #view-tablero .tab-sin-f .tab-sin-r .tab-campo{flex:1 1 160px} #view-tablero .tab-sin-f.tab-listo{border-color:var(--tab-verde)} /* ───────── LA COLUMNA COMPLETA, EN LISTA ───────── Edna, 2026-10-13: "cuando se pique el botón de ver más deben de abrirse las demás en lista". Es una LISTA y no una rejilla de tarjetas a propósito: lo que sobraba en la columna era el alto, y en lista el título va completo —sin el recorte de tres renglones de la tarjeta— con sus datos en una sola línea debajo y el botón de acciones a la derecha. Mismo control, mismos permisos: desde aquí se mueve y se clasifica igual que desde la tarjeta. */ #view-tablero .tab-lis-f{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3); background:var(--tab-fondo);border:1px solid var(--tab-borde);border-radius:var(--r2)} #view-tablero .tab-lis-c{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--s2)} #view-tablero .tab-lis-t{font-size:13px;line-height:1.45;color:var(--tab-tx);overflow-wrap:anywhere} #view-tablero .tab-lis-f .tab-btn{flex:0 0 auto} #view-tablero .tab-lis-d{display:inline-flex;align-items:center;gap:6px} /* La caja del desplegable de módulo, en el diálogo de clasificar. Vacía no ocupa nada: la mayoría de los proyectos no tiene cronograma. */ #view-tablero .tab-sin-m:empty{display:none} #view-tablero .tab-sin-m{margin-top:var(--s2)} /* Cuando no hay desplegable que ofrecer se dice por qué, en una línea gris. No es un error: un proyecto sin cronograma no tiene módulos, y punto. */ #view-tablero .tab-mod-esp{font-size:12px;line-height:1.45;color:var(--tab-tx2)} /* ───────── los módulos del cronograma, en el detalle ───────── Ligar tareas a módulos es lo que hace que `real_pct` exista, y `modulos_sin_tareas` NO es un error que esconder: es la lista de trabajo por hacer, y es lo que le dice a Edna por dónde empezar. Por eso el módulo sin tareas ligadas se marca, no se apaga. */ /* LAS DOS CELDAS, LO MÁS CHICAS POSIBLE (Edna, 2026-10-14: "estas dos celdas son muy largas y no me gusta … vamos a hacer las celdas lo más pequeñas posible"). Lo que se aprieta es el AIRE, no el contenido: ningún dato se fue en esta pasada, sólo los espacios entre renglones y los tamaños de letra de lo secundario. Doce módulos a 13px con --s2 de separación medían casi tanto como la columna entera. */ #view-tablero .tab-mods{display:flex;flex-direction:column;gap:var(--s1);margin:0;padding:0; list-style:none} /* CADA MÓDULO EN UN SOLO RENGLÓN: número, nombre, porcentaje y su barra (Edna, 2026-10-14: "el porcentaje de cada módulo, para que ya no esté tan larga la celda, y que sea con una barra de porcentaje en cada uno"). La barra es ancho fijo y no una fracción: doce barras que empiezan en la misma x se comparan de un vistazo, y una que mide distinto según lo largo que sea el nombre del módulo no se compara con nada. */ #view-tablero .tab-mod{display:grid;grid-template-columns:auto 1fr auto 64px; gap:2px var(--s2);align-items:center;padding-bottom:var(--s1); border-bottom:1px solid var(--tab-borde);min-width:0} #view-tablero .tab-mod:last-child{border-bottom:0;padding-bottom:0} #view-tablero .tab-mod-n{font-variant-numeric:tabular-nums;font-size:12px; color:var(--tab-tx2);min-width:2ch;text-align:right} #view-tablero .tab-mod-t{font-size:12px;line-height:1.3;color:var(--tab-tx);min-width:0; overflow-wrap:anywhere} /* La pista y el relleno. Mismo lenguaje que las barras de proyecto: pista apagada, relleno en Real. El módulo terminado se llena entero y además se marca su porcentaje en verde, que es la regla de "no dependas del color". */ #view-tablero .tab-mod-p{display:block;height:6px;border-radius:999px; background:var(--tab-pista);overflow:hidden;min-width:0} #view-tablero .tab-mod-p i{display:block;height:100%;background:var(--tab-real); border-radius:999px} #view-tablero .tab-mod.tab-mod-listo .tab-mod-p i{background:var(--tab-verde)} /* Un módulo SIN tareas ligadas no lleva barra: una barra vacía se lee como "no se ha avanzado" y lo que pasa es que no se ha MEDIDO. La pista se deja punteada para que el renglón no se desalinee con los demás. */ #view-tablero .tab-mod.tab-mod-vacio .tab-mod-p{background:none; border-bottom:1px dotted var(--tab-borde);height:0;align-self:center} #view-tablero .tab-mod-c{font-variant-numeric:tabular-nums;font-size:11px;font-weight:500; white-space:nowrap;color:var(--tab-tx2)} #view-tablero .tab-mod.tab-mod-listo .tab-mod-c{color:var(--tab-verde)} /* "sin tareas ligadas" es el renglón accionable de esta lista: se marca con el ámbar de pendiente, que es lo que significa. */ #view-tablero .tab-mod.tab-mod-vacio .tab-mod-c{color:var(--tab-tx); background:var(--tab-g-pend);color:var(--tab-g-pend-tx);border-radius:999px;padding:1px 7px} /* ───────── los cuatro colores de dato, como clases ───────── tablero.js NO escribe ni un color en el marcado de una gráfica: cada trazo lleva su clase y el token se resuelve aquí. Así el modo oscuro voltea la dona y las barras sin que el JS se entere, y check-tab-css.mjs puede exigir que no quede ningún literal. Dos familias y no una: la dona necesita `stroke` con `fill:none`, y las barras y las muestras de la leyenda necesitan `fill`/`background`. Con una sola clase que pusiera las tres propiedades, el fill:none del arco y el fill del color quedarían empatados en especificidad y ganaría el orden del archivo — frágil. Separadas, no hay ambigüedad. */ #view-tablero .tab-arco{fill:none} /* LOS DOS SÓLIDOS — hecho y en curso. Van a 4.503:1 entre sí en gris, que es de sobra, así que no necesitan forma: el color basta. */ #view-tablero .tab-s-hecho {stroke:var(--tab-g-hecho)} #view-tablero .tab-s-curso {stroke:var(--tab-g-curso)} #view-tablero .tab-f-hecho {fill:var(--tab-g-hecho); background-color:var(--tab-g-hecho)} #view-tablero .tab-f-curso {fill:var(--tab-g-curso); background-color:var(--tab-g-curso)} /* LOS DOS CON TEXTURA — por validar y pendiente. Son los que el color solo no separa (por validar contra en curso mide 1.107:1 en gris), así que la textura es la que carga la diferencia. Y son DOS TEXTURAS DISTINTAS, no la misma en dos direcciones: por validar va RAYADO y pendiente va PUNTEADO. La primera versión puso raya a los dos, a 45° y a −45°, y el guardián la rechazó con razón — entre ellos miden 1.501:1, también por debajo del piso viejo de 1.80:1, así que «raya contra raya» no los separaba. Cuatro estados, cuatro formas: sólido, sólido, rayado, punteado. En SVG la raya es un declarado una sola vez en index.html (#tab-ray-valida y #tab-ray-pend, dentro de .tab-defs). Se referencia con la sintaxis de pintura con respaldo —url(...) seguido de un color—, así que si algún día el bloque de patrones desapareciera del HTML el arco se pintaría en su color sólido en vez de quedarse invisible. En HTML la misma raya se dibuja con un degradado repetido, sin SVG. */ #view-tablero .tab-s-valida{stroke:url(#tab-ray-valida) var(--tab-g-valida)} #view-tablero .tab-s-pend {stroke:url(#tab-pun-pend) var(--tab-g-pend)} #view-tablero .tab-f-valida{fill:url(#tab-ray-valida) var(--tab-g-valida); background-color:var(--tab-g-valida); background-image:repeating-linear-gradient(45deg,var(--tab-raya) 0 1.5px,transparent 1.5px 5px)} #view-tablero .tab-f-pend {fill:url(#tab-pun-pend) var(--tab-g-pend); background-color:var(--tab-g-pend); background-image:radial-gradient(var(--tab-raya) 1px,transparent 1.3px);background-size:5px 5px} /* El bloque de patrones no ocupa lugar ni se lee: existe sólo para que url(#tab-ray-*) tenga a qué apuntar. No se pone display:none — un dentro de un SVG oculto así deja de resolverse en algunos navegadores. */ #view-tablero .tab-defs{position:absolute;width:0;height:0;overflow:hidden} #view-tablero .tab-ray-f{fill:var(--tab-raya)} /* Las franjas del patrón de SVG se pintan sobre el color base del estado. */ #view-tablero .tab-ray-b-valida{fill:var(--tab-g-valida)} #view-tablero .tab-ray-b-pend {fill:var(--tab-g-pend)} /* ───────── dona de tareas ───────── Edna, 2026-10-12: "tareas, quiero que el círculo esté más grande y los valores abajo". La leyenda iba al lado y por eso la dona no podía crecer: se repartían el ancho del panel. En columna, la dona se lleva todo el ancho y la leyenda cabe en dos columnas debajo, que además es más corto de leer que cuatro renglones en una sola. La caja del SVG pasó de 132 a 176 unidades y el radio de 52 a 68 (lo fijan DONA_CAJA y DONA_R en tablero.js, no aquí: la geometría es del JS y los guiones la verifican ahí). El número del centro sube a 34px, que es lo que Edna pidió con "que el número del centro respire". */ #view-tablero .tab-dona{display:flex;flex-direction:column;align-items:center;gap:var(--s4)} #view-tablero .tab-dona svg{width:176px;height:176px;max-width:100%;flex-shrink:0;display:block} #view-tablero .tab-dona-c{font-variant-numeric:tabular-nums; font-size:42px;font-weight:700;letter-spacing:-.025em;fill:var(--tab-tx)} #view-tablero .tab-dona-cs{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--tab-tx2)} /* La leyenda lleva el número y el porcentaje: la dona no puede ser la única portadora del dato. Dos columnas en vez de cuatro renglones, y el swatch más grande ahora que los cuatro colores son el dato que Edna va a juzgar. */ #view-tablero .tab-leyenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) var(--s4);min-width:0;width:100%} #view-tablero .tab-ley{display:grid;grid-template-columns:16px 1fr auto;align-items:center; gap:var(--s2);font-size:12.5px;color:var(--tab-tx);min-width:0} #view-tablero .tab-ley i{width:16px;height:16px;border-radius:3px;display:block; border:1px solid var(--tab-raya)} #view-tablero .tab-ley span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-tablero .tab-ley b{font-variant-numeric:tabular-nums;font-weight:600; font-size:12px;color:var(--tab-tx);white-space:nowrap} /* ───────── la cadena comercial · la vista «Fase» del panel de Tareas ───────── La barra es LINEAL porque la cadena lo es: el orden de la fase 0 a la 5 es el dato, y un anillo lo destruiría. Ver el bloque de tokens --tab-fase-* y el bloque largo de tablero.js para por qué no son seis colores. La geometría (anchos, filo, alto, dónde cae la línea del dinero) la calcula barraFases() en tablero.js y la verifican los guiones ahí: aquí sólo vive el color y el acomodo. */ #view-tablero .tab-fase{display:flex;flex-direction:column;gap:var(--s3);min-width:0} /* preserveAspectRatio="none" y alto fijo: la barra se estira al ancho del panel y su alto no cambia, igual que la gráfica de actividad. */ #view-tablero .tab-fase-g{display:block;width:100%;height:62px} /* LAS CUATRO MARCAS. Dos bases —la liviana de lo que no se cobra y la pesada de lo cobrado— por dos formas —sólida y rayada—, que es lo que separa a dos fases vecinas. Cada una con su respaldo sólido detrás del patrón, igual que los estados: si el bloque de faltara, el segmento se pinta de su color en vez de quedarse invisible. */ #view-tablero .tab-fa-gra {fill:var(--tab-fase-gra); background-color:var(--tab-fase-gra)} #view-tablero .tab-fa-pag {fill:var(--tab-fase-pag); background-color:var(--tab-fase-pag)} #view-tablero .tab-fa-gra-r{fill:url(#tab-ray-fgra) var(--tab-fase-gra); background-color:var(--tab-fase-gra); background-image:repeating-linear-gradient(45deg,var(--tab-raya) 0 1.5px,transparent 1.5px 5px)} #view-tablero .tab-fa-pag-r{fill:url(#tab-ray-fpag) var(--tab-fase-pag); background-color:var(--tab-fase-pag); background-image:repeating-linear-gradient(45deg,var(--tab-fase-pag-tx) 0 1.5px,transparent 1.5px 5px)} /* el fondo de cada patrón de SVG, que es el color base de su mitad */ #view-tablero .tab-ray-b-fgra{fill:var(--tab-fase-gra)} #view-tablero .tab-ray-b-fpag{fill:var(--tab-fase-pag)} /* y la tinta de la raya de la mitad pesada: el propio texto-sobre de su base (Marfil sobre Real en claro, Marino sobre Marfil en oscuro), que es lo único que contrasta con ella en los dos temas */ #view-tablero .tab-ray-f-fpag{fill:var(--tab-fase-pag-tx)} /* La marca de «sin fase» no es una fase: no se pinta de ninguna de las dos bases, va hueca y punteada — que es como se ve una decisión que falta. */ #view-tablero .tab-fa-sin{background:none;border-style:dashed} /* El número de la fase, DENTRO de su segmento. Es el rótulo que hace que la posición signifique algo sin bajar a la leyenda. */ #view-tablero .tab-fa-t{font-family:var(--mono);font-size:13px;font-weight:600} #view-tablero .tab-fa-t-gra{fill:var(--tab-fase-gra-tx)} #view-tablero .tab-fa-t-pag{fill:var(--tab-fase-pag-tx)} /* LA LÍNEA DEL DINERO. Es la pregunta de negocio de la cadena, así que se marca con una raya de verdad y con su rótulo — no con un color. */ #view-tablero .tab-fase-l{stroke:var(--tab-tx);stroke-width:1.5;stroke-dasharray:3 2} #view-tablero .tab-fase-lt{font-family:var(--mono);font-size:10px;letter-spacing:.06em; fill:var(--tab-tx2)} #view-tablero .tab-fase-nota{margin:0;font-size:11.5px;line-height:1.45;color:var(--tab-tx2)} /* La leyenda: mismo patrón que la de la dona, con una segunda línea para el cobro y el responsable de cada fase. Un renglón por fase y no dos columnas, porque aquí el ORDEN es el dato y dos columnas lo rompen. */ /* LA LEYENDA NO ES UNA LISTA. Edna, 2026-10-14: "la de fase sigue desplegando los parámetros en lista y se hace más grande la celda; acomodamos a modo de que entre la gráfica y los parámetros, pero no en lista". Siete renglones apilados eran siete veces el alto de un renglón; los mismos siete datos en una fila que envuelve ocupan dos. Es el mismo contenido con otra forma, que es exactamente lo que ella pidió. */ #view-tablero .tab-fley{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3); align-items:center;min-width:0;width:100%} #view-tablero .tab-fl{display:inline-flex;align-items:center;gap:6px; min-width:0;font-size:12.5px;color:var(--tab-tx);white-space:nowrap} #view-tablero .tab-fl i{width:12px;height:12px;border-radius:3px;display:block; border:1px solid var(--tab-raya);flex:0 0 auto} #view-tablero .tab-fl-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} #view-tablero .tab-fl b{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px; color:var(--tab-tx);white-space:nowrap} /* Una fase en CERO se queda en la lista —"no tenemos nada en Discovery" es un dato— pero se atenúa: no compite con las que sí tienen trabajo. */ #view-tablero .tab-fl.tab-fl-cero .tab-fl-n, #view-tablero .tab-fl.tab-fl-cero b{color:var(--tab-tx2)} #view-tablero .tab-fl.tab-fl-sin{padding-top:var(--s2);border-top:1px dashed var(--tab-borde)} /* El aviso de "ningún proyecto tiene fase todavía" no es un error: no lleva el tratamiento de fallo, lleva el de "falta decidirlo". */ #view-tablero .tab-vacio.tab-fase-nadie{padding-bottom:var(--s3)} /* ───────── esta semana ───────── Edna, 2026-10-12: "esta semana las juntas, sí se va, que se haga más pequeña también". Se hace más chica sin perder los siete días —son siete siempre, incluidos los vacíos, porque un día que falta deja un hueco que se lee como un error— apretando el renglón del día: la columna de la fecha baja de 46 a 38px, la separación de --s2 a --s1, y un día SIN juntas pasa a ser un renglón de una línea en vez de una caja con su propio texto. */ #view-tablero .tab-sem{display:flex;flex-direction:column;gap:var(--s1)} #view-tablero .tab-sem-d{display:grid;grid-template-columns:38px 1fr;gap:var(--s2); padding-bottom:var(--s1);border-bottom:1px solid var(--tab-borde);align-items:baseline} #view-tablero .tab-sem-d:last-child{border-bottom:0;padding-bottom:0} #view-tablero .tab-sem-f{font-size:11.5px;font-weight:600;color:var(--tab-tx2);line-height:1.35} /* Hoy en Real, que es "aquí estás" — el mismo gesto que la columna de hoy del calendario, no un color nuevo. */ #view-tablero .tab-sem-d.tab-hoy .tab-sem-f{color:var(--tab-real);font-weight:600} #view-tablero .tab-sem-d.tab-hoy{background:var(--tab-t-real);margin:0 calc(-1 * var(--s2)); padding:var(--s1) var(--s2) var(--s2);border-radius:var(--r2)} #view-tablero .tab-sem-j{display:flex;flex-direction:column;gap:var(--s1);min-width:0} /* Una junta es un