/* ══ LA BARRA LATERAL ══════════════════════════════════════════════════════════════════════════
   Etapa 1 del rediseño CoopOS (docs/superpowers/specs/2026-08-08-coopos-revision-propuesta.md).
   Antes acá vivía la fila de pestañas del encabezado (.navwrap/.navfam/.fammenu/.famtrig): 34
   pestañas en 9 grupos, con menús que se abrían hacia abajo. Dos problemas que la barra resuelve:
   no se veía DÓNDE estabas (el grupo activo era un subrayado de 3px) ni CUÁNTO había (todo estaba
   detrás de un clic), y en celular el menú se abría tapando la pantalla.

   Las MISMAS pestañas y los MISMOS grupos: la barra no trae taxonomía nueva, la lee de TABS y
   TAB_GROUPS. Los prefijos de clase pasaron de nav- y fam- a side-, así que si algo quedó apuntando a
   una clase vieja no se ve raro: no se ve. Buscar 'navfam|famtrig|fammenu|configtab|famsolo|navcur'
   antes de dar esto por terminado.
   (Y ojo con escribir esos prefijos con asterisco dentro de un comentario de CSS: la secuencia
   cierra el comentario y se lleva puesta la primera regla que venga después. Pasó acá, y el síntoma
   fue que .shell no era flex y la barra quedaba ARRIBA del contenido en vez de al lado.)

   ── 09/08: la barra pasó a VERDE ──────────────────────────────────────────────────────────────
   Pedido de Matías: «me gustaría que sea verde, como el banner de arriba». Es --brand, el mismo del
   encabezado, así que el chrome del tablero es ahora una sola pieza.

   Invertir el fondo NO es cambiar una línea: obliga a rehacer texto, hover, item activo, títulos y
   —la que se olvida— las señales de alerta. Dos reglas que funcionaban sobre blanco quedaban
   prácticamente invisibles sobre verde, y se cambiaron por eso, no por gusto:
     .side-item.alerted        --neg     sobre --brand   1,42:1  ← una mancha oscura sobre verde
     .side-grp.activo          --accent  sobre --brand   1,54:1  ← la señal de grupo activo se perdía
   Y el item activo era «blanco sobre --brand»: con la barra ya verde habría sido verde sobre verde.

   Contraste de lo que quedó, CALCULADO (y verificado después en el navegador con getComputedStyle):
     .side-item          #fff sobre --brand                8,07:1
     .side-item.active   --brand sobre #fff (invertido)    8,07:1
     .side-gtrig / .chev rgba(255,255,255,.78)             5,65:1  (12px mayúsculas: el peor caso)
     .bq-preg            rgba(255,255,255,.78)             5,65:1
     .tabbadge           --ink sobre --neg-bright          5,57:1
     .tabbadge vs fondo  --neg-bright sobre --brand        2,72:1  ← por eso lleva anillo blanco
   Los claros son blanco con alfa y no un color nuevo: si el verde cambia, acompañan solos.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* La fila barra + contenido. El ancho máximo se mudó de .wrap a .shell: el que tiene que medir
   --maxw ahora es el PAR, o si no la barra empujaba el contenido fuera de la caja centrada.
   .wide es SiViRP (la pantalla de la TV del taller), que usa el monitor completo. */
/* 09/08: .shell ya NO tiene ancho máximo ni va centrada. Mientras el encabezado verde cruzaba la
   pantalla, la barra podía vivir dentro de la caja centrada; ahora que llega arriba, tiene que pegarse
   al borde izquierdo de la ventana o quedaría un rectángulo verde flotando en el medio.
   Lo que se centra ahora es el contenido de la columna derecha: .wrap y .topbar y .tk-inner tienen
   cada uno su max-width:var(--maxw), así que las tres cosas siguen alineadas entre sí. */
.shell{display:flex;align-items:flex-start}
.shell > .col{flex:1 1 auto;min-width:0}
/* SiViRP (la pantalla de la TV del taller) usa el monitor completo. */
.shell.wide > .col > .wrap{max-width:1760px}
.shell > .col > .wrap{flex:1 1 auto;min-width:0}

/* STICKY Y NO FIXED, y desde el 10/08 esto volvió a importar: el encabezado cruza otra vez la pantalla
   completa y está ARRIBA de esta barra. La barra arranca debajo de él y recién se pega al borde superior
   cuando el encabezado salió de la pantalla con el scroll.
   POR QUÉ LA ALTURA DEL HEADER NO SE COMPENSA CON UN NÚMERO. Un `top:171px` (o un
   `height:calc(100vh - 171px)`) se rompe en el primer teléfono: esa altura cambia según la fila del
   header envuelva o no, y con el ticker escondido cambia otra vez.
   Lo que hay es una altura MEDIDA: --headh, que publica medirHeader() en comun/chasis.js. Estas dos
   líneas de acá abajo son el caso BASE —100vh, el valor de siempre— y el bloque de escritorio más
   adelante en este archivo las reemplaza por 100vh − --headh. En pantalla angosta el asunto no existe:
   ahí el header no es fijo y .side es static, sin min-height ni max-height (ver el bloque de celular). */
/* min-height junto con max-height: la columna mide SIEMPRE el alto de la pantalla. Con el fondo verde
   esto dejó de ser un detalle — mientras la barra era blanca sobre gris claro, que terminara donde se
   acaban las pestañas no se notaba; en verde termina en un borde horizontal a mitad de página y se ve
   inconcluso, como si faltara algo abajo. Y si las pestañas no entran, scrollea adentro. */
/* Columna flex: es lo que permite que el sello de la foto quede PEGADO ABAJO (.upd usa margin-top:auto)
   sin importar cuántas pestañas tenga el usuario ni cuántos grupos estén abiertos. */
.side{flex:0 0 var(--sidew);width:var(--sidew);align-self:flex-start;position:sticky;top:0;
      display:flex;flex-direction:column;
      min-height:100vh;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;
      background:var(--brand);border-right:1px solid rgba(0,0,0,.22);padding:14px 0 24px}

/* LA MARCA YA NO ESTÁ ACÁ. «CoopOS» y la localidad vivían arriba de esta barra; se mudaron a la barra
   clara el 10/08 (.tb-marca / .tb-loc en 02-encabezado.css) porque al plegarse la barra desaparecía el
   nombre del sistema. Con eso el reparto quedó explícito: el header es el chrome que SIEMPRE está, y
   esta barra es sólo navegación — es lo único que se plega. La barra arranca ahora con el buscador.
   Se fueron .side-marca y .side-loc: si algo quedó apuntando a esas clases, no se ve raro, no se ve. */

.side-nav{display:flex;flex-direction:column;gap:1px;padding:0 8px;flex:0 0 auto}

/* EL SELLO DE LA FOTO, al pie. margin-top:auto lo empuja abajo mientras las pestañas no llenen la
   columna; cuando la llenan, queda después de la última y se llega scrolleando la barra.
   Se reescribe .upd entera porque la de 02-encabezado.css está pensada para la barra CLARA: allá es
   texto oscuro alineado a la derecha con una línea a la izquierda; acá va sobre verde, alineado a la
   izquierda y con una línea arriba que lo separa del menú. */
/* EL SELECTOR DE PERÍODO, al pie y encima del sello. margin-top:auto está acá y NO en .upd: es el
   primero de los dos que van abajo, así que es el que se lleva el espacio libre; el sello lo sigue
   pegado. Si estuviera en los dos, se repartirían el hueco y quedaría un agujero entre ellos.
   El desplegable va translúcido con borde blanco, el mismo lenguaje que tenía en el encabezado verde y
   que ya usa el botón ☰ del celular. El option se pinta oscuro porque el sistema operativo lo dibuja
   sobre fondo claro, herede lo que herede del select. */
.side > .period{margin-top:auto;flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:0 14px;margin-left:8px;margin-right:8px}
.side > .period label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.side > .period select{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 10px;font-size:13px;
  font-family:inherit}
.side > .period select option{color:#1c2620}
/* Deshabilitado en las 15 pestañas que no usan el período: lo atenúa .period.inactivo, que ya está en
   04-componentes.css y sigue aplicando acá. No se repite la regla: duplicarla sería tener el mismo
   criterio en dos lugares y descubrirlo el día que cambie en uno solo. */

.side > .upd{margin-top:8px;flex:0 0 auto;padding:14px 14px 0;margin-left:8px;margin-right:8px;
  text-align:left;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.78);
  border-left:0;border-top:1px solid rgba(255,255,255,.18)}
.side > .upd b{color:#fff}

/* flex y no block: el item lleva su texto y, cuando corresponde, la insignia roja pegada a la
   derecha (ver .tabbadge más abajo). */
.side-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;text-align:left;background:transparent;color:#fff;
  border:none;border-radius:var(--r-sm);padding:9px 12px;font:inherit;font-size:14px;font-weight:550;
  line-height:1.3;cursor:pointer}
/* El blanco PLENO queda reservado para dos cosas: el título del grupo abierto y la pestaña activa. Los
   items en reposo van un punto por debajo (6,8:1, bien arriba del mínimo), y al pasar el mouse suben a
   blanco. Sin esa diferencia, treinta y cuatro renglones del mismo blanco compiten todos entre sí y
   ninguno gana — que es la otra mitad de lo monótono. */
.side-gitems > .side-item{color:rgba(255,255,255,.90);font-weight:500}
.side-item:hover{background:rgba(255,255,255,.10);color:#fff}
.side-item.active:hover{color:var(--brand)}
/* El item activo se INVIERTE: antes era blanco sobre verde y ahora es verde sobre blanco. Es el mismo
   par de colores dado vuelta, así que conserva los 8,07:1 y sigue siendo la señal más fuerte de la
   barra — lo que no podía quedar es el verde sobre verde, que habría desaparecido. */
.side-item.active{background:#fff;color:var(--brand);font-weight:650}

/* El título del grupo ES el control que lo despliega: no hay una flechita aparte que sea el único
   punto clicable. La flecha gira, no cambia de glifo, para que no salte de ancho. */
/* El aire entre grupos es más que el aire entre items del mismo grupo: sin esa diferencia la barra es
   una lista de 34 renglones iguales, que es lo que Matías describió como monótono. */
.side-grp{margin-top:var(--sp-5)}
.side-gtrig{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%;
  background:transparent;color:rgba(255,255,255,.78);border:none;border-radius:var(--r-sm);
  padding:var(--sp-4) var(--sp-6);font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;text-align:left}
.side-gtrig:hover{background:rgba(255,255,255,.10)}
/* El rótulo se lleva el espacio libre: .side-gtrig reparte con space-between y, con el ícono adelante,
   sin esto los tres hijos (ícono · rótulo · flecha) quedarían separados a tercios. */
.side-gtrig .side-gl{flex:1 1 auto;min-width:0}
/* ── LOS ÍCONOS DE SECCIÓN ──────────────────────────────────────────────────────────────────────
   Uno por sección de primer nivel: CONSEJO · FINANZAS · ADMINISTRACIÓN · OPERACIONES · GESTIÓN ·
   NOVEDADES, más Inicio, que también es una fila de primer nivel (es un grupo de una pestaña y se dibuja
   como item directo), así el borde izquierdo de todas las filas de primer nivel queda parejo.
   NINGUNO adentro de los grupos: ver el comentario de SIDE_ICONOS en comun/chasis.js.
   El color NO se declara acá: el SVG usa stroke="currentColor", así que el ícono sigue al texto solo —el
   blanco al 78% del título, el blanco pleno del grupo activo, y el verde de la pestaña activa cuando se
   invierte—. Cualquier color propio se despegaría del texto en el primer cambio.
   El -1px es óptico y no tipográfico: los rótulos van en MAYÚSCULAS, que no tienen descendentes, así que
   su masa visual queda un pelo arriba del centro de la caja de línea. Alineado a la caja el ícono se ve
   caído. Medido en el navegador. */
.side-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-top:-1px}
.side-ico svg{display:block;width:16px;height:16px}
/* El rótulo del item también se lleva el espacio libre, por el mismo motivo que el del título: sin esto
   la insignia roja de alertas y el ícono se irían a los extremos opuestos. Los items SIN ícono lo llevan
   igual —una sola forma de armar el item— y ahí sirve para cortar con puntos suspensivos un nombre largo
   en la barra de 236px. */
.side-lab{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-gtrig .chev{font-size:10px;color:rgba(255,255,255,.78);transition:transform .15s;flex:0 0 auto}
.side-grp.cerrado .side-gtrig .chev{transform:rotate(-90deg)}
/* ── LA SANGRÍA, que era el problema de verdad ──
   Hasta el 09/08 el título del grupo y sus pestañas arrancaban en el MISMO borde izquierdo (12px los
   dos), así que «FINANZAS» y «Flujo» se leían como pares y no como madre e hijas. Que el título fuera
   en mayúsculas no alcanzaba: distinguía el estilo, no la pertenencia.

   Ahora los items del grupo van corridos y con una línea vertical que los abraza. La línea hace el
   trabajo que la sangría sola no hace: marca dónde EMPIEZA y dónde TERMINA el grupo, que es lo que
   permite leer «estas seis cuelgan de Finanzas» sin contar renglones.

   Y las pestañas que NO están en ningún grupo (Inicio, Resumen, y los sueltos Definiciones y
   Novedades) se quedan sin sangría a propósito: esa diferencia ahora significa algo —«esto no cuelga
   de nada»— donde antes era casualidad. */
.side-gitems{display:flex;flex-direction:column;gap:1px;
  margin-left:var(--sp-6);padding-left:var(--sp-5);
  border-left:1px solid rgba(255,255,255,.16)}
.side-grp.cerrado .side-gitems{display:none}
/* El grupo de la pestaña activa, en acento: cuando hay varios grupos abiertos a la vez, el item
   marcado solo no alcanza para ver a qué familia pertenece lo que estás mirando. */
/* Blanco pleno y no --accent: el acento es un verde y sobre este fondo daba 1,54:1, o sea que la
   señal de "a esta familia pertenece lo que estás mirando" se perdía por completo. El contraste con
   el resto de los títulos (blanco al 78%) alcanza para distinguirlo. */
.side-grp.activo > .side-gtrig{color:#fff}

/* El grupo sin nombre de TAB_GROUPS (Definiciones · Novedades). Iban "sueltos a la derecha" en la
   fila de arriba; acá van al pie, separados por una línea. */
.side-sueltos{display:flex;flex-direction:column;gap:1px;margin-top:var(--sp-5);
  padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.18)}

/* La insignia (Definiciones sin resolver, Novedades sin ver, menciones nuevas): la pone setBadge()
   en gestion/comun-gestion.js. Los tres casos actuales son items de primer nivel —Inicio es un grupo
   de uno, Definiciones y Novedades son los sueltos—, así que ninguna insignia queda escondida dentro
   de un grupo plegado. Si algún día se le pone insignia a una pestaña de adentro de un grupo, hay que
   subir la señal al título del grupo o no se va a ver. */
.tabbadge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;background:var(--neg-bright);color:var(--ink);border-radius:9px;font-size:11px;
  font-weight:700;line-height:1;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.55);
  animation:tabblink 1.3s ease-in-out infinite}
/* Sobre verde la insignia pasó de --neg a --neg-bright con tinta oscura (5,57:1). El --neg de antes
   daba 1,42:1 CONTRA EL FONDO: no era un rojo poco legible, era una mancha oscura sobre verde oscuro.
   El anillo blanco está porque incluso el rojo claro separa 2,72:1 del verde, por debajo del 3:1 que
   pide una forma; el anillo hace el trabajo que el color no puede.
   Y el texto del item alertado ya NO se pinta de rojo (era 1,42:1): la alarma la lleva la insignia,
   que para eso tiene fondo propio. */
.side-item.alerted{color:#fff}
.side-item.active.alerted{color:var(--brand)}
/* En el item activo, que ahora es BLANCO, la insignia vuelve al rojo oscuro: sobre blanco da 5,68:1 y
   el rojo claro se perdería. */
.side-item.active .tabbadge{background:var(--neg);color:#fff;box-shadow:none}
@keyframes tabblink{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.tabbadge{animation:none}}

/* La fila de celular (☰ Menú · pestaña actual) no existe en escritorio: ahí la pestaña activa ya se
   ve marcada en la lista, que está entera a la vista. */
/* La fila del ☰. Oculta por omisión: la usan el cajón de celular (≤900px) y la barra PLEGADA de
   escritorio (≥901px), y sus estilos base viven acá —fuera de las dos medias queries— porque son el
   mismo control con el mismo significado. Antes estaban sólo dentro del bloque de celular; traerlos acá
   es lo que evita una segunda copia para el plegado. Lo específico de celular (el alto de 44px del
   objetivo táctil) se queda allá. */
.side-bar{display:none;align-items:center;gap:var(--sp-6);padding:0 14px}
.side-ham{display:inline-flex;align-items:center;gap:var(--sp-4);background:rgba(255,255,255,.12);
  color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);
  padding:7px 12px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;flex:0 0 auto}
.side-ham:hover{background:rgba(255,255,255,.2)}
.side-cur{font-size:15px;font-weight:650;color:#fff;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── PLEGAR LA BARRA EN ESCRITORIO ──────────────────────────────────────────────────────────────
   236px son el 18% de un monitor de 1280. El control las devuelve al contenido.
   PLEGADA NO ES «SÓLO ÍCONOS»: las 34 pestañas son texto y no tienen ícono, y treinta y cuatro íconos
   inventados darían pares indistinguibles («Flujo» / «Flujo bis»). Plegada, la lista se esconde.
   Y LA TIRA ES HORIZONTAL a propósito: al pie de la barra viven el Período y el sello «Mes cerrado /
   Actualizado». Con una tira vertical de 40px los dos desaparecerían, y la fecha del dato ya se perdió
   dos veces en este proyecto. Como fila de ~40px arriba del contenido, el Período queda a cero acciones
   y el sello a la vista; lo único que hay que reabrir es la lista, que es lo que se plegó a propósito.
   Todo esto vive DENTRO de min-width:901px: abajo de 900px manda el cajón y estas reglas no existen, así
   que los dos mecanismos no pueden cruzarse por más que se achique y agrande la ventana. */
.side-plegar{display:none}

/* ── LAS DOS BARRAS SE CORREN LA ALTURA DEL HEADER FIJO ─────────────────────────────────────────
   Desde el 10/08 el encabezado es sticky en escritorio (ver 02-encabezado.css), así que un `top:0` acá
   metería las barras POR DEBAJO de él. Se las desplaza --headh, que NO es un número escrito: lo mide y lo
   publica medirHeader() en comun/chasis.js, porque la altura del header cambia cuando su fila envuelve y
   otra vez si el ticker no se dibuja. Es el mismo número frágil que este archivo ya se negó dos veces a
   clavar; la diferencia es que ahora se mide.
   El alto también sale de ahí: con el header fijo, el espacio disponible ya no es 100vh sino
   100vh − --headh, o si no el pie de la barra —el Período y el sello— quedaría siempre debajo del pliegue.
   El respaldo `0px` del var() es deliberado: si el JS no llegó a medir, las reglas valen lo mismo que
   antes de este cambio en vez de dejar la barra descolocada.
   Abajo de 900px nada de esto aplica: el header no es fijo, medirHeader publica 0 y .side es static. */
@media(min-width:901px){
  .side{top:var(--headh,0px);
    min-height:calc(100vh - var(--headh,0px));max-height:calc(100vh - var(--headh,0px))}
  .mt{top:var(--headh,0px);max-height:calc(100vh - var(--headh,0px))}
  .mt .mt-panel{max-height:calc(100vh - var(--headh,0px))}
}

@media(min-width:901px){
  /* EN EL FLUJO, no absoluto, y la razón es un error que ya se cometió. Nació con
     position:absolute;top:10px;right:8px, y en ese momento arriba de la barra estaba la marca: los 10px
     caían sobre ella y no molestaban. Cuando la marca se mudó al encabezado, el primer elemento del flujo
     pasó a ser el BUSCADOR y el botón quedó encima — medido: el botón en y=144..170 y el buscador en
     y=148..195, o sea 22px de solape. Un elemento absoluto posicionado «donde hoy no hay nada» es una
     bomba de tiempo: depende de lo que tenga al lado, no de sí mismo.
     Como ítem de la columna flex con align-self:flex-end queda arriba a la derecha por geometría, y no
     puede superponerse con nada por construcción. Lo verifica verificar-barra-lateral.cjs comparando
     rectángulos. */
  .side-plegar{display:inline-flex;align-items:center;justify-content:center;
    align-self:flex-end;flex:0 0 auto;margin:0 8px 2px 0;width:26px;height:26px;
    background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
    border-radius:var(--r-sm);font:inherit;font-size:13px;line-height:1;cursor:pointer;padding:0}
  .side-plegar:hover{background:rgba(255,255,255,.2)}
  /* La barra deja de ser una columna y pasa a ser una fila que ocupa el ancho entero; el contenido cae
     abajo y se reacomoda solo (.shell ya es flex, sólo hay que dejarlo envolver). */
  /* La clase va también en #app: el <header> es hermano de .shell, así que desde .shell no se lo
     puede seleccionar, y con la barra plegada el encabezado tiene que dejar de reservar el hueco (ver
     .tb-marca en 02-encabezado.css). Una sola función las escribe: sideAplicarPlegado(). */
  .shell.plegada{flex-wrap:wrap}
  .shell.plegada > .side{flex:0 0 100%;width:auto;align-self:stretch;
    min-height:0;max-height:none;overflow:visible;
    flex-direction:row;align-items:center;gap:var(--sp-6);padding:var(--sp-3) 0;
    border-right:0;border-bottom:1px solid rgba(0,0,0,.22)}
  /* Lo que se esconde al plegar: la marca, el buscador y la lista. El ☰ los trae de vuelta. */
  .side.plegada .side-busca,
  .side.plegada .side-nav,
  .side.plegada .side-plegar{display:none}
  .side.plegada .side-bar{display:flex}
  /* El Período y el sello se acomodan en la misma fila, a la derecha. margin-left:auto en el PRIMERO de
     los dos (el mismo criterio que el margin-top:auto de la versión en columna: si estuviera en los dos
     se repartirían el hueco y quedaría un agujero entre ellos). */
  .side.plegada > .period{margin:0 0 0 auto;padding:0 4px 0 14px;flex:0 0 auto;width:auto}
  .side.plegada > .period select{min-width:150px}
  /* El sello conserva sus DOS renglones («Mes cerrado» y «Actualizado»): a 11,5px con line-height 1,45
     miden 33px y entran en la tira. Se intentó ponerlos en una línea escondiendo el <br>, y no se puede:
     después del <br> hay un nodo de TEXTO, no un elemento, así que no hay nada a lo que darle margen y
     las dos frases quedaban pegadas («…jul 26Actualizado…»). */
  .side.plegada > .upd{margin:0;padding:0 14px;border-top:0;border-left:1px solid rgba(255,255,255,.18);
    flex:0 0 auto;white-space:nowrap;line-height:1.35}
}

/* ── Pantalla angosta ────────────────────────────────────────────────────────────────────────────
   El corte es 900px y no los 760px del resto del tablero a propósito: el problema no es el celular,
   es que a partir de ~900px la barra de 236px le deja al contenido menos de lo que necesitan las
   tablas de once meses. Entre 760 y 900 la barra ya está colapsada y el contenido usa todo el ancho.

   La barra colapsada es un cajón EN EL FLUJO del documento, no un panel superpuesto: al abrirse
   empuja el contenido hacia abajo en vez de taparlo. Guardia y el Parte de guardia se cargan desde el
   teléfono, y una barra fija encima del formulario es peor que la navegación que había. */
@media(max-width:900px){
  .shell{display:block}
  .shell > .wrap{max-width:none}
  /* min-height:0 y no sólo max-height:none: en escritorio la columna mide 100vh, y sin este reset el
     cajón CERRADO ocuparía la pantalla entera de verde con nada más que «☰ Menú» adentro. */
  .side{position:static;flex:none;width:auto;min-height:0;max-height:none;overflow:visible;
        border-right:0;border-bottom:1px solid rgba(0,0,0,.22);padding:var(--sp-4) 0}
  /* La marca ya no está en esta barra (se mudó a la barra clara el 10/08), así que con el cajón
     cerrado la barra es UN renglón: «☰ Menú · <pestaña actual>». */
  /* El sello se queda VISIBLE con el cajón cerrado, a diferencia del menú y del buscador. Ya pasó una
     vez que se escondió en celular y el teléfono se quedó sin saber de cuándo era el dato (está
     comentado en 02-encabezado.css). Se compacta: sin la línea de arriba y sin el aire de sección, es
     un pie de dos renglones de 11px. */
  /* El período se queda visible con el cajón cerrado, igual que el sello: cambia lo que muestra TODA
     la página, y esconderlo detrás del menú lo vuelve imposible de encontrar en un teléfono. */
  .side > .period{padding:8px 14px 0;margin:0}
  .side > .upd{margin-top:6px;padding:0 14px;border-top:0}
  /* .side-bar / .side-ham / .side-cur tienen sus estilos base más arriba en este archivo, FUERA de las
     medias queries, porque los comparten el cajón de celular y la barra plegada de escritorio: es el
     mismo control con el mismo significado y no puede tener dos definiciones. Acá queda sólo lo propio
     del celular — que la fila se vea, el objetivo táctil de 44px y el cuerpo más grande del rótulo. */
  .side-bar{display:flex}
  .side-ham{padding:9px 14px;min-height:44px}
  .side-nav{display:none;padding:0 10px}
  .side.open .side-nav{display:flex;margin-top:var(--sp-4)}
  /* Con el cajón abierto los grupos entran todos: ahí sí conviene verlos, porque la lista no compite
     con el contenido (está encima de él, no al lado). */
  .side-item{padding:11px 12px;font-size:15px}
  .side-gtrig{padding:10px 12px}
}

/* ---- Buscador global (comun/buscador.js) ----
   Arriba de la lista de pestañas: es la otra forma de llegar a una pestaña, y ponerla ANTES del menú
   es lo que hace que se use. Los resultados se despliegan en el flujo, empujando la lista hacia
   abajo, y no flotando encima: flotando taparían el menú justo cuando se está eligiendo, y en el
   cajón de celular no hay lugar para una capa más. */
.side-busca{padding:8px 8px 4px}
.side-bq{width:100%;padding:8px 10px;font-family:inherit;font-size:13px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
/* El campo se queda BLANCO sobre el verde: es donde se escribe, y el blanco es lo que dice "acá se
   tipea". El foco pasa a blanco porque el acento verde sobre este fondo no se vería. */
.side-bq:focus{outline:2px solid #fff;outline-offset:-1px;border-color:#fff}
/* El aspa que Chrome le pone al type=search desalinea la caja y no hace falta: Escape ya limpia. */
.side-bq::-webkit-search-cancel-button{display:none}
.side-bqres{display:none}
.side-bqres.on{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.bq-it{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  padding:7px 10px;border:none;border-radius:var(--r-sm);background:transparent;cursor:pointer;
  font-family:inherit;font-size:13px;color:#fff;text-align:left}
.bq-it b{font-weight:650}
/* `.sel` la mueven las flechas del teclado y `:hover` el mouse: las dos señales tienen que verse
   igual, o navegar con el teclado se siente como otra pantalla. */
.bq-it:hover,.bq-it.sel{background:rgba(255,255,255,.14)}
.bq-it .bq-preg{font-size:11.5px;color:rgba(255,255,255,.78);line-height:1.3}
.bq-nada{padding:7px 10px;font-size:12px;color:rgba(255,255,255,.78);line-height:1.35}
@media(max-width:900px){
  /* Igual que .side-nav: dentro del cajón, y sólo cuando está abierto. Si quedara visible con el
     cajón cerrado, la fila «☰ Menú» pasaría a ser dos renglones en todas las pestañas. */
  .side-busca{display:none}
  .side.open .side-busca{display:block;margin-top:var(--sp-4)}
  /* 16px es el mínimo que evita que iOS haga zoom al enfocar un campo, y ese zoom deja la pantalla
     corrida con el menú abierto. */
  .side-bq{font-size:16px}
}

/* ══ LA BARRA DERECHA — «PARA HACER» ═══════════════════════════════════════════════════════════
   Los pendientes con vencimiento, agrupados por URGENCIA y no por proyecto (el porqué está en el
   comentario largo de comun/mitrabajo.js: agrupada por proyecto, las 8 vencidas quedan repartidas bajo
   ocho títulos y la lista deja de contestar «qué atiendo hoy»).

   Es el TERCER hijo de .shell, o sea un hermano de la barra izquierda y del contenido: al abrirse
   empuja, no tapa. Eso es lo que evita que una tabla de once meses quede debajo de un panel flotante —
   el mismo criterio con el que el cajón de celular está «en el flujo» y no superpuesto.
   Sin colores nuevos: --brand-bg, --card, --line y los tokens de estado que ya existen. */
.mt{flex:0 0 auto;align-self:stretch;display:flex;align-items:flex-start;
  position:sticky;top:0;max-height:100vh}
/* El disparador es lo único que se ve cerrada. Vertical para que la tira mida 34px y no 150: el texto
   rotado acá se justifica —es UNA etiqueta de dos palabras, no contenido que haya que leer— y es lo que
   permite que cerrada casi no cueste ancho. */
.mt-trig{writing-mode:vertical-rl;transform:rotate(180deg);
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin:12px 4px 0 0;
  background:var(--brand);color:#fff;border:1px solid var(--brand);border-right:0;
  border-radius:10px 0 0 10px;padding:12px 7px;font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;cursor:pointer}
.mt-trig:hover{background:var(--brand2)}
.mt.abierta .mt-trig{border-color:var(--brand)}
/* El contador. Cuando no hay datos NO SE DIBUJA (ver mtContador: devuelve null y quien pinta no pone
   nada) — un 0 ahí se leería como «no tenés nada pendiente», que es la conclusión opuesta a «no sé».
   El 0 legítimo, en cambio, sí se muestra, y va en gris para no parecer una alarma de cero. */
/* El contador va sobre el verde del disparador, así que lleva ANILLO BLANCO: el rojo --neg contra
   --brand da 2,72:1 —el mismo caso que .tabbadge, ver arriba— y sin el anillo la chapa se pierde en el
   fondo. El texto de adentro es blanco sobre --neg: 5,68:1.
   El 0 legítimo va en blanco translúcido y no en --line: sobre verde, un gris claro se lee como un
   hueco. Y el 0 SÓLO aparece cuando de verdad no hay nada — cuando no hay datos no se dibuja el
   contador, ver mtContador() en comun/mitrabajo.js. */
.mt-n{background:var(--neg);color:#fff;border-radius:99px;padding:2px 6px;font-size:11px;
  font-variant-numeric:tabular-nums;line-height:1.2;box-shadow:0 0 0 1.5px var(--brand),0 0 0 2.5px rgba(255,255,255,.9)}
.mt-n.cero{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.mt-panel{width:330px;max-width:82vw;flex:0 0 auto;overflow-y:auto;max-height:100vh;
  background:var(--card);border-left:1px solid var(--line);padding:12px 12px 24px}
/* ── LA CABECERA VA EN EL VERDE DE MARCA ────────────────────────────────────────────────────────
   Pedido de Matías: «¿el "para hacer" no debería ser del verde de la barra lateral izquierda?». Tenía
   razón — las dos barras son el mismo tipo de chrome y se veían distintas. Con la cabecera y el
   disparador en --brand, las dos se leen como una familia y el contenido queda enmarcado entre las dos.

   LA LISTA SE QUEDA SOBRE FONDO CLARO, y esto NO es una preferencia: es una medición. Los renglones
   llevan el rojo de «vencida» y el ámbar de «vence hoy», y sobre este verde el rojo da 1,42:1 — es el
   mismo número que obligó a sacar el rojo de los items alertados de la barra izquierda cuando pasó a
   verde (está anotado arriba en este archivo). Pasar la lista a verde significa rehacer esas dos
   señales, que son justamente las que le dan sentido a la barra, y eso lo decide Matías.
   Medido sobre claro: vencida 6,54:1 y vence hoy 5,65:1. Sobre verde: 1,42:1 y 2,1:1.
   La franja sangra hasta los bordes del panel con márgenes negativos que cancelan su padding de 12px:
   una franja con 12px de blanco a los costados se lee como una tarjeta, no como la cabecera de la barra. */
.mt-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:-12px -12px 10px;padding:10px 12px;background:var(--brand);color:#fff}
.mt-hd b{font-size:15px}
/* La ✕ sobre verde: blanco al 78%, el mismo claro que los títulos de grupo de la barra izquierda —5,65:1
   sobre --brand—, y blanco pleno al pasar el mouse. No lleva --muted, que sobre verde da 1,7:1. */
.mt-x{background:none;border:0;font:inherit;font-size:15px;color:rgba(255,255,255,.78);cursor:pointer;padding:2px 4px}
.mt-x:hover{color:#fff}
.mt-cargando,.mt-vacio{font-size:13px;color:var(--muted);padding:10px 2px}
/* El conmutador mías / del equipo. Mías es el estado por omisión y va primero. */
.mt-tabs{display:flex;gap:6px;margin-bottom:10px}
.mt-tab{flex:1 1 0;background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:5px 8px;font:inherit;font-size:12.5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-tab b{font-variant-numeric:tabular-nums}
.mt-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* El título de cada grupo de urgencia. «Vencidas» es el único que lleva color: es el que hay que ver
   primero y el único que describe un incumplimiento. Los otros cuatro son tramos de tiempo. */
.mt-grupo{margin-bottom:12px}
.mt-gh{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:0 0 5px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.mt-gn{font-weight:700;font-variant-numeric:tabular-nums}
.mt-g-vencidas .mt-gh{color:var(--neg)}
/* «Sin fecha» va en gris y al final: son 64 de 91 y no son un problema, son trabajo sin fechar. Que se
   VEAN es lo que evita que la gente invente fechas para figurar en la lista. */
.mt-g-sinfecha .mt-gh{color:var(--muted)}
.mt-fila{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:8px;
  padding:7px 9px;margin-bottom:6px;cursor:pointer;background:var(--card)}
.mt-fila:hover{background:var(--accent-bg)}
.mt-fila:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mt-fila.venc{border-left-color:var(--neg)}
.mt-tit{font-size:13.5px;line-height:1.35;font-weight:550}
.mt-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px;font-size:11px;color:var(--muted)}
.mt-prio{font-weight:700}
.mt-resp{font-style:italic}
/* «En curso» es la ÚNICA marca de estado que se dibuja, y va sutil: 80 de las 91 abiertas dicen «por
   hacer» y no hay ninguna «en revisión», así que una columna de estado sería casi constante. */
.mt-encurso{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--warn);border:1px solid var(--warn);border-radius:99px;
  padding:0 5px;vertical-align:1px}

/* PANTALLA ANGOSTA: .shell deja de ser fila, así que la barra pasa a ser un panel fijo sobre el
   contenido —acá no hay ancho para empujar— y el disparador flota en el borde derecho, arriba del
   botón «＋ Nueva tarea». NO arranca abierta (lo fuerza mtMontar) y abrirla cierra el cajón del menú:
   una sola barra a la vez, o se tapan entre ellas. */
@media(max-width:900px){
  /* El disparador flota ARRIBA DEL BOTÓN «＋ Nueva tarea» (.fab, bottom:20px en 04-componentes.css) y no
     a una altura contada desde arriba. Tenía top:96px, y ese 96 era un número elegido para caer «debajo
     del encabezado»: con el header de 247px en 375×812 caía ENCIMA de él. Anclado abajo no depende de la
     altura de nada y siempre queda al alcance del pulgar, que es donde tiene que estar en un teléfono. */
  .mt{position:fixed;right:0;top:auto;bottom:80px;z-index:60;max-height:none}
  .mt-trig{margin:0}
  .mt-panel{position:fixed;right:0;top:0;bottom:0;width:min(340px,88vw);max-width:none;
    max-height:none;z-index:61;box-shadow:var(--shadow-pop)}
}