/* ================= SUBSISTEMA DE GESTIÓN (Proyectos, Tareas, Comunicación) =====================
   Estas reglas se inyectaban desde JavaScript: cada render escribía un <style> dentro de su panel.
   Eran 33 reglas en proyectos.js, 10 en comunicacion.js y 10 más repetidas en el calendario de
   Proyectos. Traerlas acá arregla tres cosas que el <style> inyectado causaba:

   1) PISABAN la hoja de estilos sin que se notara. Un <style> dentro del panel va DESPUÉS de los
      nueve archivos de styles/, así que con igual especificidad ganaba. .pv-chip y .pk-card estaban
      declaradas en los dos lados: lo que se veía era siempre la versión de JavaScript, y editar
      04-componentes.css no tenía ningún efecto.
   2) .comcal-* estaba DOS VECES, en Proyectos y en Comunicación, con valores distintos (celda de
      78px contra 82px, y la versión de Comunicación con display:flex y el punto de color). Cuál
      ganaba dependía del orden de los paneles en el HTML, no de la pestaña que estabas mirando:
      apenas se abría el calendario de Proyectos, el de Comunicación cambiaba de alto. Acá está una
      sola vez, con la versión de Comunicación, que es la más completa y la que se veía hasta hoy.
   3) Se re-inyectaban en cada render. Un tablero con muchas idas y vueltas acumulaba <style> nuevos.

   Este archivo se carga ÚLTIMO en index.html a propósito: así conserva la prioridad que tenía el
   <style> inyectado y el paso no cambia lo que se ve. */

/* ---- Tablero kanban de Proyectos y Tareas ---- */
.pk-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
/* La columna se corta a la altura de la pantalla y scrollea: con muchos activos crecía sin límite y
   había que bajar toda la página para ver el resto del tablero. */
.pk-col{background:#f4f6f4;border:1px solid var(--line);border-radius:10px;padding:8px;min-height:120px;max-height:min(70vh,720px);overflow-y:auto;overscroll-behavior:contain}
/* El encabezado queda fijo arriba: al scrollear se sigue viendo de qué columna y cuántas son. */
.pk-col>.pk-colh{position:sticky;top:-8px;z-index:2;margin:-8px -8px 9px;padding-left:11px;padding-right:11px;border-radius:9px 9px 0 0;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.pk-col.drag{outline:2px dashed var(--accent);outline-offset:-3px}
.pk-colh{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:9px}
.pk-colh span:last-child{background:rgba(255,255,255,.6);border-radius:20px;padding:0 8px;font-size:12px;letter-spacing:0}
/* Encabezados de columna por estado. Eran 9 pares de pastel + tinta oscura escritos a mano: 18 hex
   que no salían de ninguna paleta declarada, la CUARTA del tablero.

   Se resolvió derivándolos del MISMO token de estado que usan los chips, con color-mix: el fondo es
   ese color al 12% sobre blanco. Así cada estado tiene UN color en todo el tablero —el chip de "en
   curso" y la columna "En curso" son el mismo ámbar— y los 18 hex se van sin inventar una paleta.

   La tinta NO es el token tal cual, y esto se midió: --st-idea y --st-espera tienen 4,51:1 y 4,53:1
   sobre BLANCO, o sea justo en el límite, así que sobre un fondo con 12% de tinte caían a 3,91:1 y
   el texto de 12px dejaba de cumplir AA. La tinta es el mismo color un 22% más oscuro, que mantiene
   la identidad del estado y deja los ocho encabezados por encima de 4,5:1.

   Por qué no se usa el relleno saturado del chip: en un tablero kanban el encabezado ocupa el ancho
   de la columna y compite con las tarjetas de abajo. Pastel + tinta oscura es lo correcto acá; lo
   que estaba mal era que el pastel no tuviera relación con el color del estado.

   Los estados de TAREA (c-por_hacer, c-en_curso…) y los de PROYECTO (c-p-idea, c-p-activo…) se
   mapean al mismo juego de tokens: idea/por hacer gris, espera/pausado ámbar, activo verde,
   hecho azul, revisión vino, archivado gris oscuro. */
.pk-colh.c-por_hacer{background:color-mix(in srgb,var(--st-idea) 12%,#fff);color:color-mix(in srgb,var(--st-idea) 78%,#000)}
.pk-colh.c-en_curso{background:color-mix(in srgb,var(--st-espera) 12%,#fff);color:color-mix(in srgb,var(--st-espera) 78%,#000)}
.pk-colh.c-en_revision{background:color-mix(in srgb,var(--st-revision) 12%,#fff);color:color-mix(in srgb,var(--st-revision) 78%,#000)}
.pk-colh.c-hecha{background:color-mix(in srgb,var(--st-activo) 12%,#fff);color:color-mix(in srgb,var(--st-activo) 78%,#000)}
.pk-colh.c-p-idea{background:color-mix(in srgb,var(--st-idea) 12%,#fff);color:color-mix(in srgb,var(--st-idea) 78%,#000)}
.pk-colh.c-p-activo{background:color-mix(in srgb,var(--st-activo) 12%,#fff);color:color-mix(in srgb,var(--st-activo) 78%,#000)}
.pk-colh.c-p-pausado{background:color-mix(in srgb,var(--st-espera) 12%,#fff);color:color-mix(in srgb,var(--st-espera) 78%,#000)}
.pk-colh.c-p-hecho{background:color-mix(in srgb,var(--st-hecho) 12%,#fff);color:color-mix(in srgb,var(--st-hecho) 78%,#000)}
.pk-colh.c-p-archivado{background:color-mix(in srgb,var(--st-archivado) 12%,#fff);color:color-mix(in srgb,var(--st-archivado) 78%,#000)}
/* .pk-card se completa acá: el min-height y la caja flexible están en 04-componentes.css, que es
   donde vive el componente. Antes esto pisaba a aquello sin que se notara. */
.pk-card{background:var(--card);border:1px solid var(--line);border-left:3px solid #ccc;border-radius:8px;padding:7px 9px;margin-bottom:7px;font-size:13px}
/* Identificador visible. user-select:all => un clic selecciona el ID entero para copiarlo. */
.pid{font-size:11px;font-weight:700;color:var(--muted);background:var(--line-soft);border-radius:5px;padding:1px 5px;font-variant-numeric:tabular-nums;user-select:all;flex:none;white-space:nowrap}
.pk-card.cw{cursor:grab}
.pk-card b{font-size:14px;display:block;margin-bottom:2px}
.pk-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;align-items:center;font-size:11px;color:var(--muted)}
/* ---- Tarjetas de proyecto ----
   .proy-cards / .proy-card (la fila que se deslizaba arriba del kanban) y el anillo .pring del
   resumen de tres tarjetas se fueron con la partición de la pantalla del 10/08: la cartera dibuja
   las tarjetas con .pk-card + .pcard (más abajo en este archivo) y el avance general es uno de los
   cinco indicadores de .pind, sin anillo. Lo único que sobrevive es la barra de progreso, que ahora
   la usan la tarjeta de la cartera y nada más.
   (Quedan en pie .proy-card:hover .acts de 04-componentes.css y .pring de 04/05, que son de otras
   pantallas o inertes: sacarlas es un barrido de CSS y no de esta tarea.) */
.proy-bar{height:6px;background:#e6ebe6;border-radius:4px;overflow:hidden;margin-top:7px}
.proy-bar>span{display:block;height:100%;background:var(--accent);transition:width .9s cubic-bezier(.22,.8,.3,1)}
/* .pv-chip vive en 04-componentes.css (es el chip de filtro de toda la app). Acá queda sólo la
   variante sin borde que usa el conmutador de vista de Proyectos. */
.pv-chip2{cursor:pointer;padding:4px 12px;font-size:13px;background:var(--card)}
.pv-chip2.on{background:var(--accent);color:#fff}
.ovd{color:var(--st-alta);font-weight:700}
/* «Vence hoy» NO es «vencido»: uno es el trabajo del día y el otro un incumplimiento. Va en el ámbar
   de aviso (--warn, 00-tokens.css) y no en el rojo de .ovd, que es la única alarma real de la lista. */
.hoyv{color:var(--warn);font-weight:700}
@media(max-width:1150px){.pk-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pk-cols{grid-template-columns:1fr}}

/* ════════ PROYECTOS — LA CARTERA Y LA VISTA PROPIA DE CADA PROYECTO (etapas A y B) ════════════
   La pantalla se partió en dos: acá arriba la cartera (sólo proyectos) y, al tocar una tarjeta, la
   vista del proyecto con sus pestañas. Todo lo de abajo usa tokens de 00-tokens.css: no hay ningún
   color nuevo, y los cuatro chips de situación se midieron (ver el bloque .psit). */

/* ════════ LA BARRA DE ESPACIOS ════════════════════════════════════════════════════════════════
   Tres zonas separadas a la vista: la VISTA agregada │ General ‖ los equipos ‖ mi espacio privado │
   Más espacios. El reparto lo decide espReparto() en gestion/espacios.js, y los espacios personales de
   OTRAS personas no se dibujan nunca (era el problema, y sólo lo tenía el owner: veía los 9 del padrón).
   Sin colores nuevos: todo sale de 00-tokens.css. */
.espbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
/* El separador de zonas. Es un pelo vertical y no un « | » de texto: un carácter se selecciona, se
   copia y se lee en voz alta por el lector de pantalla como contenido, y esto no es contenido. */
.espbar .espsep{flex:none;width:1px;height:18px;background:var(--line);margin:0 3px}
/* «TODOS LOS ESPACIOS» NO ES UNA CHAPA DE ESPACIO, y la forma es lo que lo dice: esquinas de 7px contra
   las píldoras de 999px de .pv-chip. Confundirla con un espacio es exactamente lo que habilitaba crear
   con espacio_id en NULL, así que la diferencia no es decorativa. */
.espvista{display:inline-flex;align-items:center;gap:5px;flex:none;cursor:pointer;
  padding:4px 11px;font-size:13px;font-weight:600;border-radius:7px;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
.espvista:hover{background:color-mix(in srgb,var(--ink) 4%,var(--card))}
.espvista.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* La cuenta de proyectos de cada chapa: dice cuánto hay adentro sin obligar a entrar.
   SIN opacity, y no es un detalle. Tenía opacity:.75 para que pesara menos que el rótulo, y medido con
   getComputedStyle sobre la chapa ACTIVA daba 3,62:1 — blanco al 75% sobre el acento #0a7d58 compone
   rgb(194,223,213), que no llega al 4,5:1 de AA para 11,5px. Sin la opacidad: 5,14:1 sobre la chapa
   activa y 16,6:1 sobre la inactiva.
   OJO AL MEDIR ESTO: getComputedStyle devuelve el color DECLARADO, no el que se ve; con opacidad hay
   que componer fg*α + bg*(1−α) a mano. Sin ese paso el chequeo «pasa» con texto que no cumple — es la
   segunda vez que este archivo se lleva la sorpresa (ver el comentario largo de .pk-colh).
   La jerarquía la dan el tamaño (11,5 contra 13px) y las cifras tabulares, que alcanzan. */
.espn{font-weight:700;font-variant-numeric:tabular-nums;font-size:11.5px}
/* GENERAL se lee distinto de un equipo porque no es un equipo: no tiene integrantes, lo ve todo el
   mundo, y es el que más trabajo tiene. El tinte de marca al 12% lo distingue del blanco de los equipos
   sin sacarlo de la paleta. */
.espbar .espgen{background:color-mix(in srgb,var(--brand) 12%,#fff);border-color:color-mix(in srgb,var(--brand) 26%,#fff)}
.espbar .espgen.on{background:var(--accent);border-color:var(--accent)}
/* Mi espacio privado: el candado ya lo marca, así que sólo se lo separa del resto con el borde punteado
   —el mismo recurso que .comcal-gu.vacio usa para «esto no es como los demás»—. */
.espbar .espmio{border-style:dashed}
.espbar .espadm{color:var(--muted)}
/* El desplegable «Más espacios» reusa .cmpdrop/.cmpdpanel/.cmpopt de los filtros de Comprobantes (más
   arriba en este archivo): es el mismo control y no puede verse distinto. Sólo se le saca el ancho
   mínimo de 280px, que ahí hace falta para listar proveedores y acá sobra. */
.espdrop .cmpdpanel{min-width:220px}
.espdrop>button{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  font:inherit;font-size:13px;padding:4px 12px;cursor:pointer;color:var(--ink)}
/* CELULAR: la barra envuelve en varias líneas y NUNCA scrollea horizontalmente. Los separadores
   sobrantes al final de una línea no molestan porque miden 1px. En 375px se aprieta el aire. */
/* CELULAR: la barra ENVUELVE, nunca scrollea de costado, y no se esconde nada detrás de un cajón — los
   tres equipos SON los contextos de trabajo y en un teléfono son lo más difícil de alcanzar si están
   dentro de un desplegable. Lo que la volvió viable en 375px no es el CSS: es que los 8 espacios
   personales ajenos ya no se dibujen. MEDIDO en 375×812 con el perfil owner, que es el único que los
   veía: la barra pasó de 439 px y 16 chapas a 166 px y 8 — un 62% menos de alto, y sin esconder nada.
   Acá sólo se aprieta el aire para que entren dos chapas cortas por renglón en vez de una. */
@media(max-width:640px){
  .espbar{gap:5px;margin-bottom:10px}
  .espbar .espsep{margin:0 1px;height:16px}
  .espvista{padding:4px 9px;font-size:12.5px}
  .espbar .pv-chip{padding:3px 9px;font-size:12.5px}
  .espdrop>button{padding:3px 9px;font-size:12.5px}
}
/* El select de espacio que todavía no fue elegido: se marca para que no se pase por alto en un
   formulario de ocho campos. Ámbar de aviso, el mismo de .conswarn y .chip.pgpend. */
select.pidefalta{border-color:var(--warn);background:var(--warn-bg);color:var(--warn);font-weight:600}

/* Título de la pantalla + bajada + la acción, en una fila que envuelve en celular. */
.phd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.phd .phd-t{margin:0}
.phd .phd-s{font-size:13px;color:var(--muted);margin-top:2px}

/* Fila de indicadores: número grande + etiqueta chica. Es una grilla y no un flex para que las cinco
   columnas midan lo mismo y los números queden en la misma vertical; en celular baja a dos. */
.pind{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}
.pin{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
.pin .n{font-size:26px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums lining-nums}
.pin .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
@media(max-width:900px){.pind{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.pind{grid-template-columns:repeat(2,minmax(0,1fr))}.pin .n{font-size:22px}}

/* CHIP DE SITUACIÓN. Texto de 11px sobre pastel, o sea el caso donde este repo ya tuvo que corregir
   una vez (ver el comentario largo de .pk-colh más arriba: --st-idea daba 4,51:1 sobre BLANCO y caía a
   3,91:1 sobre un fondo con tinte). Por eso acá NO se usa color-mix sobre un token de relleno: se usan
   los pares tinta/fondo que 00-tokens.css ya declara como pares, y el contraste medido va al lado.
   Medido con getComputedStyle sobre el chip real, no estimado:
     atrasado  --neg  #b93a26 sobre --neg-bg  #fdece9  → 4,96:1
     riesgo    --warn #8a5f00 sobre --warn-bg #fdf3e0  → 5,13:1
     termino   --pos  #0b7a44 sobre --pos-bg  #e6f5ea  → 4,80:1
     sinfecha  --muted #5a6862 sobre --line-soft #eef2f0 → 5,18:1
   Los cuatro pasan AA (4,5:1) para texto chico. Si alguien cambia un token, hay que volver a medir. */
.psit{display:inline-block;padding:1px 8px;font-size:11px;font-weight:700;border-radius:99px;
  white-space:nowrap;cursor:help;letter-spacing:.01em}
.psit-atrasado{background:var(--neg-bg);color:var(--neg)}
.psit-riesgo{background:var(--warn-bg);color:var(--warn)}
.psit-termino{background:var(--pos-bg);color:var(--pos)}
/* «Sin fecha objetivo» va en gris y no en color: NO es una situación, es la ausencia de una. Pintarla
   de ámbar la haría leer como «en riesgo», que es justo la conclusión que no se puede sacar. */
.psit-sinfecha{background:var(--line-soft);color:var(--muted)}
/* .psit-bloqueado — ETAPA C. Deliberadamente NO declarada: la clase no se emite (ver proySituacion en
   gestion/proyectos.js) y una regla para un chip que nunca se dibuja es CSS que nadie va a poder
   verificar. Cuando la etapa C habilite el valor, va acá con --st-alta y su contraste medido. */

/* Tarjeta de proyecto en la cartera. Reusa .pk-card (kanban) y sólo agrega el reparto interno. */
.pcard{cursor:pointer}
.pcard-top{display:flex;align-items:center;gap:7px}
.pcard-n{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
/* .pav (el círculo de iniciales) se mudó a 04-componentes.css el 10/08: dejó de ser de Proyectos
   cuando el «quién sos» del encabezado pasó a usar el MISMO círculo. Un componente que viven dos
   subsistemas va donde viven los componentes compartidos, o la próxima vez se hace una segunda copia.
   Acá queda sólo la fila de avatares del equipo, que sí es de la vista de proyecto. */
.pav-row{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:8px}
/* El casillero «Archivados» de la fila de filtros: mismo alto que los chips vecinos. */
.parch{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:400;color:var(--muted)}

/* DE QUÉ PROYECTO ES LA TAREA, en «Todas las tareas». Es un enlace de verdad (abre el proyecto) y
   tiene que verse como tal dentro de una fila de metadatos que no lo son: de ahí el color de acento y
   el subrayado al pasar. Se corta con ellipsis porque hay nombres de 50 caracteres y no puede empujar
   al resto de la fila fuera de la tarjeta.
   Contraste medido con getComputedStyle: --accent #0a7d58 sobre --card #fff = 5,14:1, y
   --warn #8a5f00 (el «sin proyecto») sobre lo mismo = 5,65:1. Los dos pasan AA a 11px. */
.ptp{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--accent);font-weight:600;cursor:pointer}
.ptp:hover{text-decoration:underline}
/* «sin proyecto» NO es un enlace y no puede parecerlo: no lleva el acento ni el cursor de mano. Va en
   ámbar porque es un faltante que conviene completar (mismo criterio que .bombafalta y .hitoconf),
   no una alarma. */
.ptp-sin{color:var(--warn);font-weight:700;cursor:help;text-decoration:none}
.ptp-sin:hover{text-decoration:none}

/* MIGAS Y ENCABEZADO DE LA VISTA DE PROYECTO */
.pmigas{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:2px 0 8px}
.pmigas a{color:var(--accent);font-weight:600;text-decoration:none}
.pmigas .sep{opacity:.5}
.pmigas b{color:var(--ink)}
/* Se mantiene visible mientras se trabaja: al scrollear el tablero de tareas hay que seguir sabiendo
   de qué proyecto son. top:0 funciona porque en esta app nada arriba está fijo (la que es sticky es la
   barra lateral, ver 03-navegacion.css) y ningún ancestro del panel recorta con overflow. */
.pdh{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:9px 12px;margin:0 0 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.pdh-l{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 260px}
.pdh-tx{min-width:0}
.pdh-n{font-size:16px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pdh-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:3px}
.pdh-r{display:flex;align-items:center;gap:10px;flex:none}
.pdh-av{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;line-height:1}
.pdh-av-l{font-size:11.5px;color:var(--muted);line-height:1.35}
/* CELULAR (375px): EL ENCABEZADO NO PUEDE COMERSE LA PANTALLA, y acá las dos cosas que se le piden
   chocan. Medido en 375×812 con el peor caso real (un proyecto de 50 caracteres, «Carga de excepciones
   de mora en ProCoop (EXC_MORA)»): pegado arriba medía 171 px, el 21% del alto — y en un teléfono, con
   la barra del navegador, más de un cuarto del área útil ocupada de forma permanente.
   Se resuelve a favor del área de trabajo, que es a lo que se entra:
     · deja de estar PEGADO abajo de 640 px. Sigue siendo el primer bloque de la pantalla y basta un
       gesto para volver a verlo; en desktop mide 60 px de un renglón y ahí sí se queda pegado, que es
       donde el sticky rinde (columnas largas de kanban y mucho scroll).
     · el % y su leyenda quedan en UNA sola línea, y el aire se recorta.
   El nombre NO se corta con ellipsis a propósito: dos proyectos que empiezan igual se verían idénticos,
   y eso es peor que ocupar un renglón más. */
@media(max-width:640px){
  .pdh{position:static;padding:7px 9px;gap:7px}
  .pdh-n{font-size:14.5px}
  .pdh-r{gap:7px;width:100%;justify-content:flex-start}
  .pdh-av{font-size:20px}
  .pdh-av-l{font-size:11px}
  .pdh-av-l br{display:none}
  .pdh-av-l .ovd{margin-left:5px}
}
.pdtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;border-bottom:1px solid var(--line);padding-bottom:9px}

/* ---- Calendario mensual (lo usan Comunicación y la vista Calendario de Proyectos) ----
   Una sola definición para las dos. Antes eran dos, y la que ganaba dependía del orden de los
   paneles en el HTML. */
.comcal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;color:var(--muted);font-weight:600;text-align:center;margin-bottom:4px}
.comcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.comcal-cell{min-height:82px;border:1px solid var(--line);border-radius:6px;padding:3px;background:#fbfcfb;overflow:hidden}
.comcal-cell.empty{background:transparent;border:none}
.comcal-cell.today{background:#eef5ff;border-color:#9bbcf0}
.comcal-d{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:2px}
.comcal-it{font-size:11px;background:var(--card);border-radius:4px;padding:2px 4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px;border-left:3px solid #ccc}
.comcal-it .dot{width:7px;height:7px;border-radius:50%;flex:none}
.comcal-more{font-size:11px;color:var(--muted)}
@media(max-width:640px){.comcal-cell{min-height:56px}}

/* ---- Tablas de árbol de Ingresos y Egresos ----
   .trtab (el árbol de rubros) y .wktab (el de capital de trabajo) tenían dos bloques inyectados
   casi idénticos: la única diferencia real era una regla de tercer nivel que sólo usa .trtab. */
.trtab td,.trtab th,.wktab td,.wktab th{white-space:nowrap;text-align:right}
.trtab td:first-child,.trtab th:first-child,.wktab td:first-child,.wktab th:first-child{text-align:left}
.trtab tr.grp.lvl0>td,.wktab tr.grp.lvl0>td{font-weight:700;background:#eef3fb}
.trtab tr.grp.lvl1>td,.wktab tr.grp.lvl1>td{font-weight:600;background:#f6f8fc}
.trtab tr.grp.lvl2>td{font-weight:600}
.trtab tr.total>td,.wktab tr.total>td{font-weight:700;border-top:2px solid #325a9b;background:#eef3fb}
.trtab .wktog,.wktab .wktog{display:inline-block;width:12px;color:#325a9b}

/* EGRESOS › COMPROBANTES — el movimiento diario de compras.
   Acá va SOLO lo que la tabla necesita de más: el hover, el rayado y el marco los pone 07-tablas.css
   como en el resto del tablero. Lo único propio es que la fila se abre en el lugar para mostrar el
   detalle —en ProCoop eso es otra ventana— y que hay estados que hay que poder ver sin leer. */
table.cmptab tbody tr.cmprow{ cursor:pointer }
table.cmptab tbody tr.cmprow.abierta td{ font-weight:600 }
/* El rayado par/impar del estilo base no sirve acá: las filas vienen de a dos (comprobante +
   detalle) y el patrón queda salteado. Se apaga y el detalle se distingue por su propio fondo. */
.tscroll table.cmptab tbody tr:nth-child(even) td{ background:transparent }
.tscroll table.cmptab tbody tr.cmprow:hover td{ background:var(--accent-bg) }
/* Una nota de crédito RESTA. Mostrarla igual que una factura invita a sumarlas mal. */
table.cmptab tbody tr.esnc td:nth-child(3){ color:var(--pos); font-style:italic }
td.cmptog{ width:18px; color:var(--muted); text-align:center }
td.cmpvenc{ color:var(--neg); font-weight:600 }
.cmptarde{ display:inline-block; margin-left:5px; font-size:10px; font-weight:700;
  color:var(--warn-bright); border:1px solid var(--warn-bright); border-radius:99px; padding:0 4px }
.tscroll table.cmptab tbody tr.cmpdet td{ padding:0; background:color-mix(in srgb, var(--ink) 4%, transparent) }
.cmpdetbox{ padding:10px 14px }
table.cmpit{ border-collapse:collapse; font-size:12px; background:var(--card);
  border:1px solid var(--line); border-radius:8px; overflow:hidden }
table.cmpit th{ text-align:left; padding:5px 8px; color:var(--muted); font-weight:600;
  border-bottom:1px solid var(--line); font-size:11px }
table.cmpit td{ padding:5px 8px; border-bottom:1px solid var(--line-soft) }
table.cmpit td:nth-child(2), table.cmpit td:nth-child(3), table.cmpit td:nth-child(4){
  text-align:right; font-variant-numeric:tabular-nums }
.cmpobse{ margin-top:8px; padding:8px 10px; font-size:12px; border-radius:8px;
  background:color-mix(in srgb, var(--warn) 10%, transparent); border-left:3px solid var(--warn) }
.cmpchip{ display:inline-block; margin:2px 3px 2px 0; padding:2px 7px; font-size:11px;
  border:1px solid var(--line); border-radius:99px; background:var(--card) }

/* Los filtros múltiples de Movimientos. Reemplazan un buscador de texto libre que perdía el foco en
   cada tecla —el panel se redibujaba entero— y que además obligaba a recordar cómo estaba escrito
   lo que se buscaba. Acá se elige de una lista de lo que existe, con su cantidad. */
.cmpfrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.cmpdrop{ position:relative }
.cmpdrop .chev{ font-size:10px; opacity:.7 }
.cmpdpanel{
  display:none; position:absolute; z-index:40; top:calc(100% + 4px); left:0; min-width:280px;
  max-width:420px; padding:8px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.cmpdrop.open .cmpdpanel{ display:block }
.cmpdbusca{ width:100%; padding:6px 9px; border:1px solid var(--line); border-radius:7px;
  font-size:13px; margin-bottom:6px }
.cmpdlista{ max-height:46vh; overflow:auto }
.cmpopt{ display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px;
  font-size:13px; cursor:pointer }
/* display:flex le gana al display:none que el navegador le pone a [hidden], asi que sin esta regla
   el buscador marcaba las opciones como ocultas y no desaparecia ninguna. Pasa con cualquier
   elemento al que se le dé display y despues se lo quiera esconder con el atributo hidden. */
.cmpopt[hidden]{ display:none }
.cmpopt:hover{ background:var(--accent-bg) }
.cmpopt .cmpotxt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cmpopt .cmpn{ color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums }
.cmpdclear{ width:100%; margin-top:6px }
.cmpfmodo{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px }
.cmpflab{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted);
  margin-bottom:6px }
.cmpflab input{ padding:5px 8px; border:1px solid var(--line); border-radius:7px; font-size:13px;
  color:var(--ink) }
/* El resumen de lo filtrado: un renglón, porque los KPIs se mudaron a Análisis de carga. */
.cmpresumen{ padding:6px 2px 10px; font-size:13px; font-variant-numeric:tabular-nums }

/* CONCEPTOS: los mismos filtros que Movimientos, más las marcas de problema. Antes eran cinco tablas
   apiladas y un concepto con dos problemas aparecía dos veces, en dos listas: no se veía que era el
   mismo, que es justo el que hay que arreglar primero. */
.cncatajos{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.cncm{ display:inline-block; margin:1px 3px 1px 0; padding:1px 7px; font-size:11px; font-weight:600;
  border-radius:99px; white-space:nowrap; cursor:help }
.cncm-dup{ background:color-mix(in srgb, var(--neg) 16%, transparent); color:color-mix(in srgb, var(--neg) 82%, #000) }
.cncm-par{ background:color-mix(in srgb, var(--warn) 18%, transparent); color:color-mix(in srgb, var(--warn) 88%, #000) }
.cncm-gen{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:color-mix(in srgb, var(--accent) 84%, #000) }
.cncm-una{ background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--muted) }
td.cncalto{ color:var(--neg); font-weight:600 }
table.cnctab td{ font-variant-numeric:tabular-nums }

/* Las cuentas contables del concepto. La cadena es COD_RUB -> RUB_PYS (COD_CTAC / COD_CTAV) -> CTPLAN,
   la misma que muestra la grilla de ProCoop. Sin cuenta el concepto no puede entrar a un asiento, así
   que "falta" tiene que verse de lejos. */
td.cnccta{ font-size:12px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cncok{ font-variant-numeric:tabular-nums; font-weight:600 }
.cncfalta{ color:var(--neg); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em }
.cncm-sincta{ background:color-mix(in srgb, var(--neg) 22%, transparent); color:color-mix(in srgb, var(--neg) 86%, #000) }
/* La letra dice de qué catálogo sale el código: P = productos y servicios, C = conceptos de compra.
   Hace falta porque el MISMO número significa cosas distintas en cada uno. */
.cnccat{ display:inline-block; margin-left:4px; padding:0 4px; font-size:9px; font-weight:700;
  border-radius:3px; background:color-mix(in srgb, var(--ink) 10%, transparent); color:var(--muted) }

/* Las columnas de TEXTO de la tabla de movimientos van a la izquierda. La regla base de 07-tablas.css
   alinea todo a la derecha —tiene sentido, casi todas las tablas del tablero son numéricas— y solo
   deja el primer td a la izquierda. Poner text-align en el <th> no alcanza: no se hereda a las
   celdas. Van por CSS y no inline para no repetirlo en cada fila. */
table.cmptab td:nth-child(2),   /* Vence — la primera columna va a la izquierda por la regla
                                   del primer td, y dos fechas pegadas con distinta alineación se
                                   leen como un error */
table.cmptab td:nth-child(3),   /* Comprobante */
table.cmptab td:nth-child(4),   /* Proveedor   */
table.cmptab td:nth-child(5),   /* Rubro       */
table.cmptab td:nth-child(6){   /* Cargó       */
  text-align:left;
}

/* El hueco de la bomba sin número de suministro. Rojo y en mayúsculas a propósito: mientras falte,
   el costo de Agua está subestimado, y eso tiene que incomodar hasta que alguien lo complete. */
.bombafalta{ color:var(--neg); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em }

/* HITOS — la marca de un dato que falta. Misma idea que .bombafalta en el margen de Agua: un
   faltante a la vista se completa, uno escondido se olvida. */
.hitoconf{ display:inline-block; font-size:10px; font-weight:700; color:var(--warn-bright);
  border:1px solid var(--warn-bright); border-radius:99px; padding:0 5px; vertical-align:2px }

/* HITOS — la franja de aviso. Va arriba de las dos vistas, y desaparece sola cuando la pieza
   de este año existe. */
.hitoaviso{ display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:10px; padding:10px 14px; border-radius:10px;
  background:var(--warn-bg); border:1px solid var(--warn); border-left-width:4px }
.hitoaviso .sub{ font-size:12px; color:var(--muted) }

/* Un hito en el calendario no es una pieza: no lleva color de estado (no tiene estado) y se
   distingue por el fondo y la estrella. El color del borde es el ámbito. */
.comcal-hito{ font-size:11px; font-weight:600; line-height:1.25; margin:2px 0; padding:2px 4px;
  border-left:3px solid var(--line); border-radius:4px;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* OPERACIONES › CONSUMO — el consumo medido, mes a mes.
   La tabla reusa .trtab (alineación numérica y el triangulito .wktog del árbol de Flujo y Margen):
   acá va solo lo propio. */
/* La primera columna lleva DOS renglones —suministro + titular arriba, categoría y medidor abajo—.
   Sin esto heredaría el white-space:nowrap de .trtab y la fila se estiraría hasta donde llegue el
   nombre más largo, corriendo los doce meses fuera de la pantalla. */
.constab td:first-child{white-space:normal;min-width:250px;max-width:340px}
.constab .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.constab td{font-variant-numeric:tabular-nums}
/* Tres niveles: categoría › suministro › contador. La sangría es lo único que dice en qué nivel está
   parado el ojo cuando hay una categoría abierta con cincuenta suministros adentro. */
.constab tr.conscat td{font-weight:600}
.constab td.n1{padding-left:22px}
.constab td.n2{padding-left:44px}
/* Las series desplegadas de un suministro: son el detalle de la fila de arriba, no filas del mismo
   rango, y se leen como tal. */
.constab tr.consserie td{color:var(--muted)}
.constab td.conssen{text-align:left;white-space:normal;max-width:190px}
/* El mes sin registro DENTRO de la serie: ese mes no se leyó, y es justo lo que la pestaña existe
   para mostrar. El de afuera (antes del alta, después del último registro) va apagado — ver
   consCelda(): pintar la mitad de la fila de un suministro nuevo lo haría ver peor que uno con un
   problema real. */
.conshueco{color:var(--warn);font-weight:700;cursor:help}
.conssin{color:var(--muted)}
/* Los chips de señal. Mismo patrón que .cncm de Comprobantes (color-mix sobre el token, no una
   paleta nueva) y con el porqué en el title, que es lo que evita la pregunta "¿y esto por qué está
   marcado?". «sin consumo» va en gris a propósito: es un hecho, no una alarma. */
.conschip{display:inline-block;margin:1px 3px 1px 0;padding:1px 7px;font-size:11px;font-weight:600;
  border-radius:99px;white-space:nowrap;cursor:help}
.conschip.sev-alta{background:color-mix(in srgb, var(--neg) 16%, transparent);color:color-mix(in srgb, var(--neg) 82%, #000)}
.conschip.sev-media{background:color-mix(in srgb, var(--warn) 18%, transparent);color:color-mix(in srgb, var(--warn) 88%, #000)}
.conschip.sev-nota{background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--muted)}
/* El buscador y el multiselect de categorías. El desplegable, sus opciones y sus chapas reusan las
   clases de los filtros de Comprobantes (.cmpdrop / .cmpopt / .cmpchip, más arriba en este archivo):
   es el mismo control, así que tiene que verse igual y no traer una segunda forma de lo mismo. */
.consq{ padding:6px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px;
  min-width:230px; color:var(--ink) }
.conschips{ display:flex; flex-wrap:wrap; gap:2px; margin:-6px 0 12px }
/* La × de una chapa: es un botón de verdad (se llega con el tabulador) pero sin la caja de un botón,
   porque adentro de una chapa de 11px un borde más la parte al medio. */
.conscatx{ border:0; background:none; padding:0 0 0 3px; cursor:pointer; color:var(--muted);
  font-size:13px; line-height:1 }
.conscatx:hover{ color:var(--neg) }
/* El casillero que suma el suministro al gráfico. Va dentro de la primera celda, así que se lo baja
   medio pixel para que quede en la línea de base del número que tiene al lado. */
.constab input.conssel{ vertical-align:-1px; margin-right:2px; cursor:pointer }
.constab input.conssel:disabled{ cursor:not-allowed; opacity:.45 }
/* El aviso del tope de 5. Es el único mensaje de esta pestaña que informa de un LÍMITE y no de un
   dato, así que no puede verse igual que la línea de apoyo de al lado. */
.conswarn{ padding:7px 10px; border-radius:8px; border-left:3px solid var(--warn);
  background:color-mix(in srgb, var(--warn) 10%, transparent) }
/* Los cuatro apartados de «Medido contra facturado». Son listas de excepciones dentro de UNA tarjeta:
   con cuatro tarjetas la comparación se leía como cuatro temas y el conteo del 99,4% se despegaba de
   la lista que explica. Por eso es un h4 y no un .sec-title (que titulosAfuera sacaría de la tarjeta). */
.conscmph{ margin:16px 0 4px; font-size:13px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted) }
.conscmph:first-of-type{ margin-top:10px }

/* TESORERÍA › CONCILIACIÓN — la marca de "diferencia grande" es por CELDA (un mes puntual de una
   cuenta), no por fila entera (una cuenta tiene varios meses, y no todos difieren igual). El resto
   del tablero usa .warn-row en la <tr> (07-tablas.css: "tr.warn-row td"); acá el mismo nombre de
   clase va en la <td> misma, así que necesita su propia regla en vez de heredar la de fila.
   Especificidad: tiene que ganarle a ".tscroll tbody tr:nth-child(even) td" (07-tablas.css), que si
   no queda por encima y la fila par se ve sin marcar. */
.tscroll tbody tr td.warn-row,
.tscroll tbody tr:nth-child(even) td.warn-row{ background:var(--warn-bg); color:var(--warn); font-weight:600 }


/* OPERACIONES › CONSUMO › EDEN — el único bloque del tablero que se carga a mano.
   Va TRANSPUESTO: los meses son columnas, como el resto de la pestaña. Con los meses en las filas
   cada campo nuevo pedía una columna, y los que no entraban terminaban escondidos detrás de un «⋯» —
   así quedó invisible la reactiva, que es justo la que alimenta el cos φ. */
/* El selector de año. Con los treinta meses del histórico en columnas la grilla mide 4.650 px y el
   navegador la encoge al 39%: elegir un año es lo que la vuelve legible, y además es lo que da dónde
   escribir un mes que todavía no tiene dato. Los chips son los mismos .pv-chip del resto de la app. */
.edanios{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.edanios .sub{margin:0}
.edentab{font-variant-numeric:tabular-nums}
/* La primera columna es el rótulo de la fila: queda fija al scrollear a la derecha, porque con once
   meses el nombre de la fila se sale de la pantalla y uno pierde de vista qué está mirando. */
.edentab tbody th{position:sticky;left:0;z-index:1;background:var(--card);text-align:left;
  white-space:nowrap;font-weight:600;padding-right:14px;border-right:1px solid var(--line)}
.edentab thead th:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
.edentab tbody th i{font-style:normal;font-weight:400;color:var(--muted);font-size:11.5px}
/* El rotulo que tiene ayuda se marca con subrayado punteado, no con un signo al lado: doce «?»
   en la primera columna se leen como un error de renderizado, no como una invitacion. */
.edentab tbody th.ayu{cursor:help;text-decoration:underline dotted var(--line);text-underline-offset:3px}
.edentab td{text-align:right;white-space:nowrap;padding:1px 6px;min-width:96px}
/* Cada celda tiene la MISMA estructura: el valor a la izquierda del hueco de variación, y el hueco
   existe siempre —aunque esa fila no varíe—. Sin eso el borde derecho del número se corre fila por
   fila: las calculadas quedaban pegadas al borde y las de carga adentro de la caja del input, dos
   verticales distintas en la misma columna. Es lo que se veía torcido. */
.edentab .edcell{display:flex;justify-content:flex-end;align-items:baseline;gap:2px}
.edentab .edv{flex:1 1 auto;min-width:0;text-align:right}
.edentab .edp{flex:0 0 46px;text-align:right}
/* El input hereda de .pin (sin borde, transparente) pero acá no lleva el padding lateral: el número
   tiene que caer en la misma vertical que el de una fila calculada, que no tiene caja. */
.edentab input.pin{padding:4px 0;font-size:13px}
/* Las filas calculadas que son la conclusión —Comprado, Pérdida, Cobertura— pesan más que las de
   carga: son las que se leen de un vistazo. */
.edentab tr.fuerte td,.edentab tr.fuerte th{font-weight:700;font-size:15px}
.edentab tr.sep th,.edentab tr.sep td{border-top:1px solid var(--line)}
/* La columna de la derecha (acumulado o máximo) se separa del resto: no es un mes más. */
.edentab .edtot{border-left:2px solid var(--line);text-align:right}
/* Las casillas de carga: angostas y alineadas a la derecha, para que la grilla se lea como números
   y no como un formulario. */
/* La fecha es un control nativo: no se puede alinear el texto adentro como un número, así que se
   la deja a la izquierda de su celda a propósito y con el mismo alto que el resto. */
.edentab input.edfec{text-align:left;font-size:12px}
/* La variación usa .pct, el mismo de Flujo y Egresos (styles/07-tablas.css): flecha, valor
   absoluto y verde/rojo/gris. Acá solo se la achica un punto, porque la grilla tiene once columnas. */
.edentab .pct{font-size:11px;margin-left:3px}
/* Pérdida negativa o cobertura arriba de 100: facturamos más de lo comprado ese mes. No es un error,
   es el desfase de fechas — por eso va en gris con ayuda y no en rojo de alarma. */
.edneg{color:var(--muted);cursor:help}
.edalto{color:var(--warn);font-weight:600}
.edacum{font-size:17px;font-weight:700}
.edojo{margin-left:4px;color:var(--warn);font-weight:700;cursor:help}
/* Subtítulo dentro de una tarjeta, para la segunda grilla del bloque. */
.sec-sub{margin:22px 0 2px;font-size:15px;font-weight:700}
/* Margen negativo: acá el rojo SÍ corresponde. Es la única alarma de verdad del bloque. */
.edmal{color:var(--neg);font-weight:700}

/* Calendario de GUARDIA. Reusa la grilla .comcal-* de Comunicación —es la misma grilla de mes y no
   tiene sentido una segunda— y le agrega lo único propio: marcar el día SIN CUBRIR. Ver el hallazgo
   abierto sobre las paletas paralelas: acá a propósito no se inventa un color por persona, va el
   apellido, que con turnos semanales informa más que un color. */
.comcal-cell.gu-sincubrir{background:#fdf6f6;border-color:#e8cfcf}
/* --pos-bg (verde tenue, "cubierto" — misma semántica que .pnbox/.kpi .delta.up en 05-resumen.css y
   06-ayuda.css) en vez del --card blanco de antes: un turno de varios días son varias celdas seguidas
   con este mismo fondo, y repetido día tras día es lo que arma el bloque continuo (ver el comentario
   largo en guCalendario(), guardia.js, del pedido de Matías del 08/08 sobre la línea punteada que
   producía el fondo blanco + un borde de 3px). El borde izquierdo NO se toca: sigue siendo la marca de
   fin de semana (.finde de acá abajo) y no hay que pisarla agregándole un segundo significado. */
.comcal-gu{font-size:11px;font-weight:600;background:var(--pos-bg);border-left:3px solid var(--brand2);
  border-radius:4px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comcal-gu.finde{border-left-color:var(--warn)}
/* El slot vacío ("sin asignar", sólo se pinta con permiso de carga): no es una guardia, así que NO
   lleva el --pos-bg de arriba —heredarlo pintaría un día sin cubrir del mismo verde que uno cubierto,
   el error opuesto al que se vino a corregir—. Vuelve al fondo neutro y al trazo punteado que tenía
   ANTES .comcal-gu en general: acá el punteado sí es el estilo correcto, porque no hay ningún tramo
   continuo que mostrar, es una invitación a cargar un día suelto. */
.comcal-gu.vacio{background:var(--card);opacity:.5;border-style:dashed}

/* Parte de guardia. Pensado para CELULAR: los dos botones de arriba son lo único que el técnico viene
   a tocar, y de madrugada con una mano. De ahí el tamaño y que ocupen el ancho en pantalla chica. */
.pgbotones{ display:flex; gap:10px; flex-wrap:wrap }
.btn.pgbig{ flex:1; min-width:180px; padding:16px 18px; font-size:16px; font-weight:600 }
@media (max-width:640px){ .btn.pgbig{ flex:1 1 100%; padding:20px } }

/* El filtro de la tabla única (Todas / Pendientes de cargar / Este turno). Reemplaza a las tres
   tablas separadas que se solapaban, así que su lugar es pegado a la tabla que gobierna: 10px arriba
   y 8px abajo, no el aire de una sección nueva. En celular envuelve en dos líneas antes que salirse. */
.pgfiltro{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 8px }

/* Los partes pasaron de una tarjeta por novedad (.pgitem/.pgcab, ya no se emiten desde
   parteguardia.js) a una fila por novedad en .tscroll/.trtab, el patrón de tabla del repo (ver
   guardia.js). .trtab está pensada para tablas numéricas —nowrap y alineado a la derecha— y acá el
   contenido es texto libre del técnico: forzar una sola línea habría vuelto «Qué pasó» una columna
   kilométrica en lugar de legible, así que .pgtab pisa esas dos reglas. Va después de 07-tablas.css
   en el orden de <link> de index.html, así que gana con la misma especificidad sin necesitar !important. */
.pgtab td,.pgtab th{ text-align:left; white-space:normal; vertical-align:top }

/* El chip «pendiente» salía IDÉNTICO al de «cargado»: .chip trae su propio fondo (var(--brand-bg),
   08-varios.css) y warn-row sólo está definida para filas y celdas de tabla (07-tablas.css:
   "tr.warn-row td"), nunca para un <span> suelto — lo encontró la revisión final del conjunto. Este
   modificador usa los tokens de alerta que ya existen (var(--warn) #8a5f00 / var(--warn-bg) #fdf3e0,
   00-tokens.css) en vez de un color nuevo: el proyecto ya tiene un hallazgo abierto por acumular
   paletas paralelas. Además de pintar el chip, la <tr> de una fila pendiente lleva class="warn-row"
   (la de 07-tablas.css, la misma que usan el resto de las tablas del tablero), así la fila entera se
   nota en una tabla de veinte y no sólo el chip. */
.chip.pgpend{ background:var(--warn-bg); color:var(--warn) }

/* Los dos botones grandes del parte salían IDÉNTICOS, y la causa no es la que parecía a primera
   vista. La revisión de la tarea 2 marcó que .pri sólo tiene regla combinada con .goto, nunca con
   .btn; pero mirando 04-componentes.css el asunto es el inverso: .btn YA trae el fondo de marca, así
   que el primario está bien y el que está mal es el SEGUNDO — «Sin novedades» se ve como una acción
   primaria cuando es la alternativa tranquila.
   Se corrige al que sobra, no al que falta: el botón sin .pri pasa a secundario. Va por :not(.pri)
   para no tocar el HTML del módulo mientras otra tarea lo está editando. */
.pgbotones .btn.pgbig:not(.pri){ background:var(--card); color:var(--ink); border:1px solid var(--line) }
.pgbotones .btn.pgbig:not(.pri):hover{ background:color-mix(in srgb, var(--ink) 4%, var(--card)) }

/* Resultados del buscador de suministro (tarea 3). Cada fila es clickeable —elige el socio— y la
   dirección que puede traer sólo aparece para quien tiene cargar_parte_guardia (ver parteguardia.js). */
.pgsum{ padding:6px 8px; border:1px solid var(--line); border-radius:6px; margin-top:6px;
  cursor:pointer; font-size:14px }
.pgsum:hover{ background:color-mix(in srgb, var(--ink) 4%, var(--card)) }