/* MINSA Proyectos — lo que la piel (minsa-ui.css, generada de marca/minsa-design/ui/base.css con
   --sin-paleta) NO trae: la PALETA, las fuentes locales, el acomodo de cada pantalla, el tablero de
   4 columnas y la entrada.
   v0.7.0 (2026-09-12): la paleta es la del Tablero de escritorio (minsa-tablero-app/app/src/estilos.css,
   la de Seekwise que Carlos pidio el 2026-09-03), copiada LITERAL en claro y oscuro, a peticion de
   Carlos («vamos a utilizar los colores de minsa-tablero»). Los .mn-* la consumen por el shim de
   abajo, igual que en el tablero; los componentes no cambian. */

/* ---- fuentes locales (OFL). La piel solo trae las variables --font-*; los @font-face los pone la app. */
@font-face { font-family: "Saira"; font-weight: 500; font-display: swap; src: url("./vendor/fuentes/Saira-500.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 600; font-display: swap; src: url("./vendor/fuentes/Saira-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("./vendor/fuentes/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("./vendor/fuentes/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("./vendor/fuentes/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("./vendor/fuentes/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("./vendor/fuentes/IBMPlexMono-500.woff2") format("woff2"); }
/* v0.12.1: rotulo «PROYECTOS» del rail (Carlos, 12-sep, opcion E30 del artifact). Solo el 700 latin; no entra a --font-*. */
@font-face { font-family: "Bai Jamjuree"; font-weight: 700; font-display: swap; src: url("./vendor/fuentes/BaiJamjuree-700.woff2") format("woff2"); }

/* ==== PALETA (copiada de minsa-tablero-app/app/src/estilos.css; si cambia alla, cambia aqui) ==== */
:root {
  --ink-900: #1c1c1c; --ink-700: #383d41;
  --blue-800: #072884; --blue-700: #0833a3; --blue-600: #0f45c4; --blue-100: #e4ecfe;
  --orange-700: #d4620f; --orange-500: #f0913f; --orange-100: #fdeee2;
  --teal-700: #0d9488; --teal-500: #22b8a6; --teal-100: #e0f5f2;
  --green-800: #1f6b28; --green-700: #2c8a37; --green-500: #61cd6a; --green-100: #e6f8e8;
  --sky-700: #0a76b4; --sky-600: #0f8fd6; --sky-400: #69c6ff; --sky-100: #e8f6ff;
  --slate-950: #171717; --slate-900: #262626; --slate-800: #333333; --slate-600: #5c5c5c;
  --slate-500: #767676; --slate-400: #9c9c9c; --slate-300: #c4c4c4; --slate-200: #e4e4e4;
  --slate-150: #ebebeb; --slate-100: #f2f2f2; --slate-50: #f7f7f7;
  --red-700: #9c211c; --red-600: #c8322b; --red-100: #fdeceb;
  --amber-700: #a86400; --amber-600: #e08c00; --amber-100: #fff5e2;

  --page: var(--slate-50); --card: #ffffff; --sunken: var(--slate-100); --banda: #f4f4f4;   /* v0.29.0: cebra de .dtabla, mas tenue que --sunken */
  --rail: #ffffff; --rail-on: var(--slate-100);
  --rail-tx: var(--slate-800); --rail-tx-strong: var(--slate-950); --rail-tx-mute: var(--slate-500); --rail-tx-faint: var(--slate-400);
  --rail-line: var(--slate-200); --rail-hover: var(--slate-50); --rail-chip: var(--slate-100);
  --tx: var(--slate-950); --tx-body: var(--slate-800); --tx-mute: var(--slate-500); --tx-faint: var(--slate-400);
  --line: var(--slate-200); --line-soft: var(--slate-150);
  --brand: var(--blue-700); --on-brand: #ffffff;
  --serie: var(--orange-700); --serie2: var(--teal-700);
  --ok-fg: var(--green-800); --ok-bg: var(--green-100); --ok-solid: var(--green-700);
  --warn-fg: var(--amber-700); --warn-bg: var(--amber-100); --warn-solid: var(--amber-600);
  --bad-fg: var(--red-700); --bad-bg: var(--red-100); --bad-solid: var(--red-600);
  --info-fg: var(--sky-700); --info-bg: var(--sky-100); --info-solid: var(--sky-600);
  --idle-fg: var(--slate-600); --idle-bg: var(--slate-100); --idle-solid: var(--slate-400);
  --sobre-solido: #ffffff;   /* v0.27.0: tinta sobre un relleno solido (icono de archivo, etiqueta de expediente) */
  --f-display: "Saira", "Barlow", system-ui, sans-serif;
  --f-ui: "Barlow", system-ui, -apple-system, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, monospace;

  /* Colores de EQUIPO (config.js los referencia por nombre). Los 4 primeros son los del rail del
     tablero; los 2 de Ventas son propuesta aceptada en el artifact c52cb229 (2026-09-12). */
  --eq-calytek: var(--ok-solid); --eq-pitepec: var(--serie); --eq-rabasa: var(--serie2);
  --eq-administracion: var(--info-solid); --eq-ventas-quimicos: var(--brand); --eq-ventas-ambiental: var(--warn-solid);
}
/* ---- shim: los 34 tokens semanticos que minsa-ui.css consume (vendorizar.py --sin-paleta los lista) ---- */
:root {
  --surface-page: var(--page); --surface-card: var(--card); --surface-sunken: var(--sunken);
  --surface-hover: var(--rail-hover); --surface-active: var(--rail-chip); --surface-selected: var(--sunken);
  --text-strong: var(--tx); --text-body: var(--tx-body); --text-muted: var(--tx-mute); --text-faint: var(--tx-faint);
  --text-link: var(--brand); --brand-primary: var(--brand); --brand-accent: var(--ok-solid); --text-on-brand: var(--on-brand);
  --focus-ring: var(--sky-400);
  --border-hairline: var(--line-soft); --border-default: var(--line);
  --status-ok-fg: var(--ok-fg); --status-ok-bg: var(--ok-bg); --status-ok-solid: var(--ok-solid);
  --status-warn-fg: var(--warn-fg); --status-warn-bg: var(--warn-bg); --status-warn-solid: var(--warn-solid);
  --status-danger-fg: var(--bad-fg); --status-danger-bg: var(--bad-bg); --status-danger-solid: var(--bad-solid);
  --status-info-fg: var(--info-fg); --status-info-bg: var(--info-bg); --status-info-solid: var(--info-solid);
  --status-idle-fg: var(--idle-fg); --status-idle-bg: var(--idle-bg); --status-idle-solid: var(--idle-solid);
  --font-display: var(--f-display); --font-ui: var(--f-ui); --font-data: var(--f-data);
}
/* Las DOS listas oscuras son la MISMA (media query y atributo); se cambian juntas, como en el tablero. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #131313; --card: #1f1f1f; --sunken: #181818; --banda: #1a1a1a;
    --rail: #0f0f0f; --rail-on: #2e3236;
    --rail-tx: var(--slate-300); --rail-tx-strong: #ffffff; --rail-tx-mute: var(--slate-500); --rail-tx-faint: var(--slate-600);
    --rail-line: rgba(255,255,255,.07); --rail-hover: rgba(255,255,255,.06); --rail-chip: rgba(255,255,255,.09);
    --tx: #ffffff; --tx-body: var(--slate-150); --tx-mute: var(--slate-300); --tx-faint: #8a8a8a;
    --line: #333333; --line-soft: #2a2a2a;
    --brand: #7f9bff; --on-brand: #0f0f0f;
    --serie: var(--orange-500); --serie2: var(--teal-500);
    --ok-fg: #86efac; --ok-bg: rgba(97,205,106,.14); --ok-solid: var(--green-500);
    --warn-fg: #fbbf5c; --warn-bg: rgba(224,140,0,.18); --warn-solid: #fbbf5c;
    --bad-fg: #f4948b; --bad-bg: rgba(200,50,43,.20); --bad-solid: #f4948b;
    --info-fg: #8fd6ff; --info-bg: rgba(15,143,214,.16); --info-solid: #8fd6ff;
    --sobre-solido: #141414;
    --idle-fg: var(--slate-300); --idle-bg: #2b2b2b; --idle-solid: #454545;
    --shadow-pop: 0 10px 34px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40); --shadow-raise: 0 1px 3px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #131313; --card: #1f1f1f; --sunken: #181818; --banda: #1a1a1a;
  --rail: #0f0f0f; --rail-on: #2e3236;
  --rail-tx: var(--slate-300); --rail-tx-strong: #ffffff; --rail-tx-mute: var(--slate-500); --rail-tx-faint: var(--slate-600);
  --rail-line: rgba(255,255,255,.07); --rail-hover: rgba(255,255,255,.06); --rail-chip: rgba(255,255,255,.09);
  --tx: #ffffff; --tx-body: var(--slate-150); --tx-mute: var(--slate-300); --tx-faint: #8a8a8a;
  --line: #333333; --line-soft: #2a2a2a;
  --brand: #7f9bff; --on-brand: #0f0f0f;
  --serie: var(--orange-500); --serie2: var(--teal-500);
  --ok-fg: #86efac; --ok-bg: rgba(97,205,106,.14); --ok-solid: var(--green-500);
  --warn-fg: #fbbf5c; --warn-bg: rgba(224,140,0,.18); --warn-solid: #fbbf5c;
  --bad-fg: #f4948b; --bad-bg: rgba(200,50,43,.20); --bad-solid: #f4948b;
  --info-fg: #8fd6ff; --info-bg: rgba(15,143,214,.16); --info-solid: #8fd6ff;
  --sobre-solido: #141414;
  --idle-fg: var(--slate-300); --idle-bg: #2b2b2b; --idle-solid: #454545;
  --shadow-pop: 0 10px 34px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40); --shadow-raise: 0 1px 3px rgba(0,0,0,.35);
}
/* El rail toma los tokens --rail-* del tablero (blanco en claro, negro en oscuro). */
.rail { background: var(--rail); color: var(--rail-tx); border-color: var(--rail-line); }

/* ---- utilidades propias */
.oculto { display: none !important; }
/* Todo `display:` de la piel pisa el [hidden] del UA: «ver 50 más (0 restantes)» y «ver toda» se veian
   con .hidden = true (revisor, 2026-09-12), y las insignias del rail (Mensajes, Mis tareas, Proyectos)
   pintaban «0» aunque el JS las ocultara (`.mn-rail-hot { display: inline-grid }`; Carlos, 2026-09-14). */
[hidden] { display: none !important; }
.solo-oscuro { display: none; }
:root[data-theme="dark"] .solo-claro { display: none; }
:root[data-theme="dark"] .solo-oscuro { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solo-claro { display: none; }
  :root:not([data-theme="light"]) .solo-oscuro { display: inline; }
}

/* ---- armazon */
.app.sin-sesion { grid-template-columns: 1fr; }
.contenido { min-width: 0; padding: var(--sp-4) var(--sp-5) calc(var(--sp-7) + env(safe-area-inset-bottom)); }
.rail .marca { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
.rail .marca .logo { width: 92px; height: auto; }
/* v0.12.1: «PROYECTOS» en Bai Jamjuree 700 versalitas, separado del lockup por un hairline verde en degradado (30 px) — elegido por Carlos entre 106 variantes (artifact «Rotulo Proyectos», 12-sep). El ::before es la linea; el color sale de --brand-accent, asi que en claro es el verde 700 y en oscuro el 500 legible. */
/* v0.13.0 (Carlos, 12-sep): mas chico —12 px, tracking .12em— para que quepa dentro del rail (232 px) sin recortarse; el hairline baja a 24 px. */
.rail .marca span { font-family: "Bai Jamjuree", var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; margin-top: -2px; display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
.rail .marca span::before { content: ""; flex: none; width: 1px; height: 24px; margin: 0 10px 0 2px; background: linear-gradient(180deg, transparent, var(--brand-accent) 30%, var(--brand-accent) 70%, transparent); }
.rail nav { display: contents; }
.rail nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail .equipos { margin-top: var(--sp-3); display: grid; gap: 1px; }
/* v0.7.0: rotulo de RAMA como el .railgroup del tablero (mayusculas, tracking .15em) y cada equipo con su icono. */
.rail .equipos .rama { padding: var(--sp-3) var(--sp-3) var(--sp-1); letter-spacing: .15em; color: var(--rail-tx-faint); }
.rail .equipos button { min-height: var(--control-h-sm); font-weight: 500; font-size: .82rem; gap: var(--sp-2); }
.rail .equipos button .n { margin-left: auto; font-family: var(--font-data); font-size: .72rem; font-weight: 500; padding: 1px 6px; border-radius: var(--r-pill); background: var(--rail-chip); color: var(--rail-tx); }
.rail .equipos button.is-on { background: var(--rail-on); color: var(--rail-tx-strong); font-weight: 600; }
/* El elegido NO rellena el icono (revisor 12-sep: trazo blanco sobre los pasteles del oscuro daba 1.6–2.6:1); el fondo del boton ya lo marca, como en el tablero. */

/* ---- icono de equipo (comun.js iconoEquipo): cuadro tenue del color del equipo, trazo del color. Reusa el
   mismo `--c` en rail, lista, cabecera del proyecto y tarjeta. color-mix: Chrome 111+ / Safari 16.2+. */
.eqi { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.eqi svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eqi.is-sm { width: 24px; height: 24px; border-radius: var(--r-sm); } .eqi.is-sm svg { width: 14px; height: 14px; }
.eqi.is-lg { width: 40px; height: 40px; border-radius: var(--r-md); } .eqi.is-lg svg { width: 22px; height: 22px; }
.kv .proy { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.kv .proy .eqi { vertical-align: middle; }
.rail .sesion { margin-top: auto; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border-hairline); display: grid; gap: var(--sp-2); font-size: .8rem; color: var(--text-muted); }
/* A5: el nombre en negrita + el rol como chip; el correo va en el title. `break-all` partia
   «gerencia» en «gerenci» + «a»; `anywhere` solo parte cuando de verdad no cabe. */
.rail .sesion .quien { overflow-wrap: anywhere; color: var(--text-strong); display: grid; gap: 2px; }
.rail .sesion .quien b { font-weight: 600; }
/* Auditoria 2026-09-12 (#1, #13): el pie del rail tenia tres botones distintos lado a lado —«Actualizar»
   sin borde y gris, «···» en 700, sol/luna con filete tenue— porque `.mn-rail button` (0,1,1) pisa a
   `.mn-btn` (0,1,0) en borde, fondo, color y gap. Todo control del rail que sea `.mn-btn` vuelve al
   boton de la piel con esta regla (0,2,0); los menus ya no re-implementan el boton: llevan `.mn-btn.is-sm`
   en el HTML. El gap sigue en --sp-1 solo aqui: el rail mide 232 px y con --sp-2 el pie se parte en dos. */
.rail .sesion-botones { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.rail .mn-btn { border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); justify-content: center; gap: var(--sp-2); }
.rail .mn-btn:hover { background: var(--surface-hover); }
/* D6 (v0.6.0): el pie del rail apilaba seis controles en dos renglones; Equipo, Ver en SharePoint y
   Salir van en un menu «···» que abre HACIA ARRIBA (el rail termina en el borde de la ventana). */
.menu-rail { position: relative; }
.menu-rail > summary { list-style: none; cursor: pointer; letter-spacing: .1em; }
.menu-rail > summary::-webkit-details-marker { display: none; }
.menu-rail .menu-caja { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: var(--z-pop); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--sp-2); display: grid; gap: var(--sp-2); min-width: 190px; }
.menu-caja .salir { margin-top: var(--sp-1); }
.sync { font-size: .72rem; color: var(--text-faint); }
.sync.viejo { color: var(--status-warn-fg); }
.tema { display: inline-flex; gap: var(--sp-1); margin-left: auto; }
.tema .mn-btn { color: var(--text-muted); }
.tema button[aria-pressed="true"] { color: var(--brand-primary); border-color: var(--brand-primary); }
.tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---- v0.28.0: rail PLEGABLE en escritorio (Carlos, 14-sep). `.app.rail-plegado` deja 64 px con solo
   iconos: los rotulos, la marca, el nombre y el sync se ocultan; los contadores saltan a la esquina
   del icono; el pie se apila. El title de cada pestana lo pone app.js (el rotulo ya no se ve). En
   celular no aplica: ahi el rail ya es la barra de pestanas y el boton no se muestra. */
/* v0.28.1: la marca entera es el boton de plegar (se queda como estaba, solo gana cursor y hover); el chevron vive solo plegado. */
.rail .marca-btn { display: flex; align-items: center; gap: var(--sp-2); min-height: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.rail .marca-btn:hover { background: none; opacity: .8; }
.app:not(.rail-plegado) .rail .plegar { display: none; }
.rail .plegar { margin-left: auto; width: 28px; height: 28px; min-height: 0; padding: 0; justify-content: center; border-radius: var(--r-sm); color: var(--text-muted); flex: none; }
.rail .plegar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
@media (min-width: 721px) {
  .app.rail-plegado { grid-template-columns: 64px 1fr; }
  .rail-plegado .rail { padding-inline: var(--sp-2); }
  .rail-plegado .rail .marca { padding: 0 0 var(--sp-3); justify-content: center; }
  .rail-plegado .rail .marca-btn { display: none; }
  .rail-plegado .rail .plegar { margin-left: 0; }
  .rail-plegado .rail .plegar svg { transform: rotate(180deg); }
  .rail-plegado .rail nav button > span, .rail-plegado .rail .equipos .rama, .rail-plegado .rail .equipos button > span:not(.eqi):not(.n),
  .rail-plegado .rail .sesion .quien, .rail-plegado .rail .sesion .sync, .rail-plegado .rail #btnActualizar > span { display: none; }
  .rail-plegado .rail nav button, .rail-plegado .rail .equipos button { position: relative; justify-content: center; padding: 0; gap: 0; }
  .rail-plegado .rail .equipos { gap: 2px; }
  .rail-plegado .rail .mn-rail-hot { position: absolute; top: 2px; right: 2px; margin: 0; }
  .rail-plegado .rail .equipos .n { position: absolute; top: 0; right: 0; margin: 0; }
  .rail-plegado .rail .sesion { padding-inline: 0; }
  .rail-plegado .rail .sesion-botones { flex-direction: column; align-items: stretch; }
  .rail-plegado .rail .sesion-botones .tema { margin-left: 0; flex-direction: column; }
  .rail-plegado .rail #btnActualizar { padding: 0; }
  .rail-plegado .rail .menu-rail > summary { width: 100%; }
}
#btnActualizar .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* barra movil: solo por debajo de 720 px (el rail se vuelve pestanas abajo y no cabe la sesion) */
.barra-movil { display: none; }
@media (max-width: 720px) {
  .contenido { padding: var(--sp-3) var(--sp-3) calc(var(--sp-7) + 24px + env(safe-area-inset-bottom)); }
  .rail .marca, .rail .equipos, .rail .sesion, .rail .plegar { display: none; }
  .rail nav button svg { width: 20px; height: 20px; }
  .barra-movil { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-2); }
  .barra-movil .logo.chica img { width: 84px; height: auto; }
  .barra-movil .rol-movil { font-size: .72rem; color: var(--text-muted); }
  .menu-movil { margin-left: auto; position: relative; }
  .menu-movil summary { list-style: none; cursor: pointer; }
  .menu-movil summary::-webkit-details-marker { display: none; }
  .menu-caja { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-pop); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--sp-2); display: grid; gap: var(--sp-2); min-width: 200px; }
  .menu-caja .tema { margin-left: 0; }
  .menu-caja .tema button { flex: 1; }
  /* U8: en celular «Nueva tarea» flota abajo a la derecha, encima de las pestanas; si no aplica, no estorba. */
  #btnNuevaTarea { position: fixed; right: var(--sp-3); bottom: calc(var(--sp-7) + 20px + env(safe-area-inset-bottom)); z-index: var(--z-pop); border-radius: var(--r-pill); box-shadow: var(--shadow-pop); padding: 0 var(--sp-4); min-height: var(--control-h); }
  #btnNuevaTarea:disabled { display: none; }
  /* B5: el FAB flota sobre la columna y tapaba el pie de la ultima tarjeta (205 x 60 px). */
  .tablero-caja, .docs, .tabla, .chat { padding-bottom: calc(var(--control-h) + var(--sp-3)); }
  /* A7: con un dialogo abierto el FAB asomaba sobre el backdrop y parecia pulsable. Va DENTRO del
     @media: arriba de 720 px «Nueva tarea» es un boton mas de la barra y no hay nada que esconder. */
  body:has(dialog[open]) #btnNuevaTarea { visibility: hidden; }
}
/* A6: «Al dia · leido hace N s» se pintaba dos veces en escritorio (rail + #syncMovil). */
#syncMovil { display: none; }
@media (max-width: 720px) { #syncMovil:not(.oculto) { display: block; } }
/* A8: parrafo de ayuda. .mn-label es un rotulo de UNA linea (mayusculas, mono, tracking);
   en 3-5 renglones de prosa se vuelve ilegible. */
.mn-help { font-size: .85rem; color: var(--text-muted); line-height: 1.45; margin: var(--sp-1) 0; }
.mn-help code { font-family: var(--font-data); font-size: .92em; }
/* A4: «Copiar liga» como boton de icono: en la cabecera de la tarjeta se partia en dos lineas
   y empujaba el titulo a tres (220 px de cabecera antes del primer dato). */
.mn-btn.is-icono { padding: 0; min-width: var(--control-h-sm); justify-content: center; }
.mn-btn.is-icono svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mn-dialog-head h2 { min-width: 0; overflow-wrap: anywhere; }
.rail .sesion a.mn-btn { text-decoration: none; }
/* F12: «ver toda» pegado al titulo de la tarjeta de actividad. v0.15.1 (captura de Carlos 13-sep): era float: right, y
   como el h2 no contenia el flotante, la lista .mini (un grid = contexto de formato propio) se ACORTABA a su lado en toda
   su altura (171 de 246 px en la lateral a 1366; el hover del renglon se partia). El h2 es ahora flex y contiene al boton. */
.mn-card h2:has(.ver-toda) { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.mn-card h2 .ver-toda { text-transform: none; letter-spacing: 0; }
/* U6: «ver las N anteriores» en Hecho — un .mn-btn.is-ghost.is-sm mas (auditoria #8: era un boton de texto
   propio de 27 px, radio 0 y .78rem; en la rejilla de la columna hay que anclarlo, o se estira a lo ancho). */
.col .mas { justify-self: start; }
/* U10: grupos de Documentos */
/* Auditoria #14: los rotulos propios de la app llevan la metrica de .mn-label (.68rem · .07em · 600); los de «dias» (.62rem) igual entre si. */
/* v0.16.0: Docs agrupa por PESTAÑA que sobresale (opción C del artifact 2a9932bc, Carlos 13-sep): lengüeta sólida con icono, nombre de la tarjeta y conteo; la caja con filete de marca envuelve a sus archivos; «Del proyecto» en gris. */
/* v0.17.0: Documentos y #archivos son UNA tabla (estilo «My Documents», Carlos 13-sep). La lengüeta de v0.16.0
   (opcion C) vive ahora en el renglon de grupo (tr.pest > td > .cab). En celular la tabla se apila en fichas. */
.dtabla { width: 100%; border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--surface-card); overflow: visible; }   /* visible: el menu «⋯» flota fuera; el ancho lo cuidan las container queries, no un scroll */
.dtabla th:first-child { border-top-left-radius: var(--r-md); } .dtabla th:last-child { border-top-right-radius: var(--r-md); }
.dtabla table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.dtabla th { text-align: left; font-family: var(--font-data); font-size: .66rem; letter-spacing: .07em; font-weight: 600; text-transform: uppercase; color: var(--text-muted); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-hairline); background: var(--surface-sunken); white-space: nowrap; }
/* v0.18.0: ordenar por columna (el mismo patron F10 de la Lista de tareas) */
.dtabla th[data-sort] { cursor: pointer; user-select: none; }
.dtabla th[data-sort]:hover, .dtabla th[data-sort]:focus-visible { color: var(--text-strong); }
.dtabla th[data-sort]:focus-visible { outline: 2px solid var(--brand-primary, currentColor); outline-offset: -2px; }
.dtabla th[aria-sort="ascending"]::after { content: " ↑"; }
.dtabla th[aria-sort="descending"]::after { content: " ↓"; }
.dtabla td { padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--border-hairline); vertical-align: middle; white-space: nowrap; }   /* v0.29.0 (Carlos, 14-sep; artifact c43ad139 T6+H2): COMPACTA (padding vertical a la mitad) y NADA envuelve: el sobrante es de Nombre y solo Nombre recorta */
.dtabla tbody tr:last-child td { border-bottom: 0; }
.dtabla tr.doc { display: table-row; border: 0; padding: 0; background: none; }
.dtabla tr.doc:hover td { background: var(--surface-hover); }
/* v0.29.0: CEBRA — la banda es un tono mas tenue que --surface-sunken para no competir con el encabezado; nth-of-type cuenta tambien los
   renglones de grupo, asi que la paridad se corre tras cada grupo (Carlos lo vio asi en el artifact y lo eligio). El hover pisa a la banda. */
.dtabla tbody tr.doc:nth-of-type(even) td { background: var(--banda); }
.dtabla tbody tr.doc:nth-of-type(even):hover td { background: var(--surface-hover); }
.dtabla .c-nombre { width: auto; min-width: 0; }   /* v0.19.0: la UNICA columna auto — el sobrante es de Nombre; las demas van a 1% (min-content). Con 100% aqui y 1% en las demas, Chrome repartia el sobrante a Tarjeta */
.dtabla .c-tipo, .dtabla .c-acc { white-space: nowrap; }
.dtabla .c-estado .mn-chip { white-space: nowrap; }   /* v0.29.0: la celda ya no parte (nowrap en todo td): chip + «Buscar el archivado» van en un renglon */
.dtabla .c-acc { width: 1%; text-align: right; }
/* v0.19.0: todas las columnas menos Nombre a su min-content (width: 1%), para que el sobrante lo tome Nombre y no Tarjeta
   (a 1366 el titulo se recortaba con ~250 px vacios entre Tarjeta y «⋯»; revisor 13-sep). Estado sigue partiendo en dos renglones. */
.dtabla .c-del, .dtabla .c-tipo, .dtabla .c-estado, .dtabla .c-tarjeta { width: 1%; }   /* v0.29.0: Ligado por y Ligada ya no son columnas */
/* v0.19.0: un solo renglon — [icono] [emisor] titulo [rev]; la ruta se fue al title y a «Copiar ruta». Es GRID con el titulo
   en minmax(0, 1fr) y no flex: en una tabla de layout automatico el flex aporta el ancho de su texto nowrap como minimo y la
   tabla desborda (99 px a 1366 en #archivos, medido); la pista de 0 minimo deja que el titulo se recorte. Columnas fijas por
   posicion (emisor y rev son opcionales: sin gap, cada pieza trae su margen). */
.dtabla .nombre { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; min-width: 200px; align-items: center; }   /* v0.29.0: 240 -> 200, que ahora todo lo demas es nowrap */
.dtabla .nombre .fico { grid-column: 1; }
.dtabla .nombre .emisor { grid-column: 2; margin-left: var(--sp-2); font-family: var(--font-data); font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.dtabla .nombre .t { grid-column: 3; margin-left: var(--sp-2); }
.dtabla .nombre .rev { grid-column: 4; margin-left: var(--sp-2); font-family: var(--font-data); font-size: .66rem; padding: 0 6px; background: var(--status-idle-bg); color: var(--status-idle-fg); }
.dtabla td.c-del { font-family: var(--font-data); font-size: .78rem; color: var(--text-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtabla td .t { font-weight: 600; color: var(--text-strong); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtabla td .t a { color: inherit; text-decoration: none; } .dtabla td .t a:hover { text-decoration: underline; }
.dtabla td .p { font-family: var(--font-data); font-size: .68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtabla .fico { width: 24px; height: 26px; } .dtabla .fico svg { width: 22px; height: 22px; }   /* v0.29.0: compacta */
.dtabla .quien { display: inline-flex; gap: var(--sp-1); align-items: center; white-space: nowrap; } .dtabla .quien .av { width: 22px; height: 22px; font-size: .58rem; } .dtabla .quien > span:last-child { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
/* cuando el PANEL (no la ventana) se estrecha, la tabla cede columnas antes que desbordar: primero quien, luego la fecha */
.docs > .lista { container-type: inline-size; }
/* v0.19.0: con la columna Fecha (del documento) la tabla ya no cabe en el panel de Docs a 1366 (810 px) con «Ligado por» y
   «Ligada»: bajo 900 se ceden las dos (la fecha que importa es la del documento; la de la liga sigue en escritorio ancho). */
@container (max-width: 900px) { .dtabla .c-tipo { display: none; } }   /* v0.29.0: quien y fecha ya no existen; Tipo sigue cediendo */   /* y Tipo: el icono ya lo dice, y sus ~86 px van al titulo (medido: la tabla del panel de Docs a 1366 mide 808 y Nombre quedaba en 270) */
@container (max-width: 760px) { .dtabla .nombre { min-width: 170px; } .dtabla .c-tarjeta select { width: 150px; } }
/* v0.29.0: la nota «Ligado por X · fecha» del menu «⋯» (antes dos columnas) */
.fila-menu .menu .menu-nota { display: inline-flex; gap: var(--sp-2); align-items: center; padding: var(--sp-1) var(--sp-2) var(--sp-2); margin-bottom: 2px; border-bottom: 1px solid var(--border-hairline); font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.fila-menu .menu .menu-nota .av { width: 20px; height: 20px; font-size: .56rem; }
.dtabla .c-tarjeta select { min-height: var(--control-h-sm); font: inherit; font-family: var(--font-ui); font-size: .82rem; padding: 0 var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-body); width: 180px; max-width: 100%; }   /* v0.19.0: width fijo, no max-width: con max-width la tabla reservaba a la columna el ancho de la opcion mas larga del select (~400 px) y recortaba el Nombre */
/* v0.29.0: la tarjeta es una PILDORA de ancho fijo con «…» (boton en #archivos, texto en lectura); el select de Docs ya media 180 */
.dtabla .tarjeta-liga { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-card); font: inherit; font-size: .8rem; color: var(--text-body); text-align: left; padding: 2px 10px; }
.dtabla button.tarjeta-liga { color: var(--text-link); cursor: pointer; } .dtabla button.tarjeta-liga:hover { border-color: var(--text-link); }
.dtabla .tarjeta-liga.sin { color: var(--text-faint); border-style: dashed; }
.dtabla td .estado { display: inline-flex; gap: var(--sp-1); align-items: center; flex-wrap: wrap; }
/* chip del tipo de archivo, con el color del icono */
/* v0.27.0 (Carlos, 14-sep, artifact 24ba421e «B6»): el chip de tipo es una ETIQUETA DE EXPEDIENTE —pestaña sólida con
   punta a la derecha, sigla en versalitas monospace, blanco sobre el color del tipo—. El color vive en --c, uno por tipo. */
.mn-chip.tipo { --c: var(--idle-solid); font-family: var(--font-data); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; padding: 2px 12px 2px 7px; background: var(--c); color: var(--sobre-solido); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
.mn-chip.tipo.is-pdf { --c: var(--bad-solid); } .mn-chip.tipo.is-word { --c: var(--brand); } .mn-chip.tipo.is-excel { --c: var(--ok-solid); } .mn-chip.tipo.is-ppt { --c: var(--serie); }
.mn-chip.tipo.is-imagen { --c: var(--serie2); } .mn-chip.tipo.is-lote, .mn-chip.tipo.is-correo { --c: var(--info-solid); } .mn-chip.tipo.is-plano { --c: var(--sky-700); } .mn-chip.tipo.is-zip { --c: var(--amber-700); }
/* v0.27.0 («C7»): el chip de ESTADO de la tabla de documentos es un SELLO —contorno cuadrado del color, versalitas
   monospace, un grado y medio girado, como el «RECIBIDO» sobre papel—. Solo en la tabla: los chips del resto de la app no cambian. */
.dtabla .c-estado .mn-chip { --c: var(--idle-solid); display: inline-flex; border-radius: 3px; background: transparent; border: 1.5px solid var(--c); color: var(--c); text-transform: uppercase; font-family: var(--font-data); font-size: .62rem; letter-spacing: .12em; padding: 2px 7px; transform: rotate(-1.5deg); }
.dtabla .c-estado .mn-chip.is-ok { --c: var(--ok-solid); } .dtabla .c-estado .mn-chip.is-info { --c: var(--info-solid); } .dtabla .c-estado .mn-chip.is-danger { --c: var(--bad-solid); } .dtabla .c-estado .mn-chip.is-warn { --c: var(--warn-solid); }
/* renglon de grupo: la lengüeta de v0.16.0 */
.dtabla tr.pest td { padding: var(--sp-3) var(--sp-3) 0; border-bottom: 0; background: var(--surface-card); }
.dtabla tr.pest + tr.doc td { border-top: 1px solid var(--border-hairline); }
.pest .cab { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; min-width: 0; padding: var(--sp-1) var(--sp-3); background: var(--brand-primary); color: var(--text-on-brand); border: 0; border-radius: var(--r-sm); font: inherit; text-align: left; }
button.cab.grupo-proy { cursor: pointer; } button.cab.grupo-proy:hover { filter: brightness(1.08); }
.pest .cab svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pest .cab .grupo { font-family: var(--font-display); font-weight: 600; font-size: .85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pest .cab .n { font-family: var(--font-data); font-size: .68rem; opacity: .8; flex: none; }
.pest.is-proyecto .cab { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border-default); }
/* menu «⋯» por renglon */
.fila-menu { position: relative; display: inline-block; }
.fila-menu > summary { list-style: none; cursor: pointer; color: var(--text-muted); display: inline-flex; }
.fila-menu > summary::-webkit-details-marker { display: none; }
.fila-menu .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-pop); display: grid; gap: 2px; min-width: 200px; padding: var(--sp-2); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-pop); text-align: left; }
.fila-menu .menu .mn-btn { justify-content: flex-start; width: 100%; }
.fila-menu .menu .is-peligro { color: var(--status-danger-fg); }
/* barra de la pestaña Docs: chips + conteo + buscador */
.docs-barra { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.docs-barra .p { font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); margin-left: auto; }
.docs-barra .buscador { flex: 0 1 260px; }
/* fichas apiladas cuando el PANEL baja de 720 px (celular, o la pestaña Docs en tableta): container query, no media */
@container (max-width: 720px) {
  .dtabla { overflow: visible; border: 0; background: none; }
  .dtabla table, .dtabla tbody { display: block; }
  .dtabla thead { display: none; }
  .dtabla tr.doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--surface-card); }
  .dtabla tr.doc td { display: block; padding: 0; border: 0 !important; background: none !important; }
  .dtabla tr.doc .c-nombre { grid-column: 1; grid-row: 1; width: auto; }
  .dtabla tr.doc .c-acc { grid-column: 2; grid-row: 1; }
  .dtabla tr.doc .c-tipo, .dtabla tr.doc .c-estado, .dtabla tr.doc .c-del { display: inline-block; grid-column: 1 / -1; grid-row: auto; width: auto; margin-right: var(--sp-2); }
  .dtabla tr.doc td { white-space: normal; }   /* v0.29.0: en ficha apilada si envuelve */
  /* v0.19.0: la fecha del documento va con el TIPO (renglon 2: «PDF … 01/07/2025» se lee como la fecha del archivo) y no junto a quien
     ligo, donde se leia como la fecha de la liga (revisor 13-sep); el estado baja al renglon 3 con quien. */
  .dtabla tr.doc .c-tipo { grid-row: 2; } .dtabla tr.doc .c-del { grid-row: 2; grid-column: 2; justify-self: end; }
  .dtabla tr.doc .c-estado { grid-row: 3; grid-column: 2; justify-self: end; }
  .dtabla tr.doc .c-tarjeta { grid-column: 1 / -1; grid-row: 4; }
  .dtabla tr.doc .c-tarjeta select { max-width: 100%; width: 100%; }
  .dtabla tr.pest { display: block; } .dtabla tr.pest td { display: block; padding: var(--sp-2) 0 var(--sp-1); }
  .dtabla .t { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  .docs-barra .buscador { flex-basis: 100%; }
}
.doc .t .mn-chip { margin-right: var(--sp-1); vertical-align: middle; }
/* U11: imprimir = lo que hay en pantalla, sin cromo. Ctrl+P o el boton «Imprimir». */
@media print {
  .mn-rail, .barra-movil, .sync, #avisos, #sinRed, .tabs, .filtros, .col-tabs, .proyecto-cab .acciones, .cab-plegar, .sel-lista, .sel-proyecto > summary svg, .lateral, .col .mas, .ver-toda, .pie, .tema, .docs-acciones { display: none !important; }
  body { background: #fff; color: #000; }
  .contenido { padding: 0; }
  .mn-shell { display: block; }
  .dos-columnas, .dos-columnas.ancha { grid-template-columns: 1fr; }
  .tablero { grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .col, .tarjeta, .mn-card, .pficha, .doc { break-inside: avoid; box-shadow: none; }
  .tabla { overflow: visible; }
  a[href]::after { content: none; }
}

/* ---- avisos: TOAST fijo abajo (U1). En celular queda encima de la barra de pestanas. */
#avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); z-index: var(--z-pop); width: min(34rem, calc(100% - 2 * var(--sp-3))); display: grid; gap: var(--sp-2); pointer-events: none; }
#avisos:empty { display: none; }
.mensaje { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--status-info-bg); color: var(--status-info-fg); font-size: .9rem; box-shadow: var(--shadow-pop); pointer-events: auto; }
.mensaje .texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mensaje .cerrar { border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 var(--sp-1); opacity: .7; }
.mensaje .cerrar:hover { opacity: 1; }
.mensaje.error { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.mensaje.ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.mensaje.ojo { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.mensaje .accion { border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: .82rem; font-weight: 600; border-radius: var(--r-sm); padding: 0 var(--sp-2); min-height: 28px; cursor: pointer; white-space: nowrap; }
/* T2: sin red se ve, no se guarda. La banda va arriba del contenido; el cuerpo lleva .sin-red y apaga lo que escribe. */
.sin-red-banda { background: var(--status-warn-bg); color: var(--status-warn-fg); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; margin-bottom: var(--sp-3); }
.sin-red .mn-btn.is-primary, .sin-red #tMover button, .sin-red #tOrden button, .sin-red #btnCubetas, .sin-red #tAnotar, .sin-red [data-quitar], .sin-red [data-buscar], .sin-red [data-ligar], .sin-red [data-subir], .sin-red [data-enlace], .sin-red [data-tarjeta-de], .sin-red #btnCerrarProyecto, .sin-red #btnReabrirProyecto, .sin-red #btnEditarProyecto, .sin-red #btnLigar, .sin-red #btnSubir, .sin-red #btnEnlace { opacity: .5; pointer-events: none; }
@media (max-width: 720px) { #avisos { bottom: calc(var(--sp-7) + 16px + env(safe-area-inset-bottom)); } }
.dlg-avisos:empty { display: none; }
.dlg-avisos { margin-bottom: var(--sp-3); }
.dlg-avisos .mensaje { box-shadow: none; }
.deny { background: var(--status-danger-bg); color: var(--status-danger-fg); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: .85rem; }

/* ---- entrada */
.entrada { min-height: 80vh; display: grid; place-items: center; }
.entrada-caja { width: min(26rem, 100%); background: var(--ink-900); color: #ffffff; border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-3); }
.entrada-caja .logo { width: 180px; height: auto; }
.entrada-titulo { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.05; letter-spacing: -.02em; }
.entrada-titulo em { font-style: normal; color: var(--green-500); }
.entrada .lema { margin: 0 0 var(--sp-3); color: var(--slate-300); }
.entrada .mn-btn.is-primary { background: var(--sky-400); color: var(--slate-950); }
.entrada .mn-label { color: var(--slate-400); min-height: 1.2em; }

/* ---- cabeceras y pantallas */
.pantalla { display: grid; gap: var(--sp-4); align-content: start; }
.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.cabecera h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; color: var(--text-strong); }
.cabecera .sub { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: .9rem; }
.proyecto-cab .titulo { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; min-width: 0; }
.proyecto-cab .titulo h1 { min-width: 0; }
/* v0.29.0 (Carlos, 14-sep; artifact c43ad139, M5): el titulo es un SELECTOR de proyecto (<details>). El summary es el h1 con un
   chevron tenue; la lista flota debajo (misma caja que .acc-menu .acciones) con un renglon por frente activo: icono del
   equipo, titulo, «N abiertas · M vencidas»; el actual va marcado. Y la cabecera se CONTRAE con #btnCabecera. */
.sel-proyecto { position: relative; min-width: 0; }
.sel-proyecto > summary { display: inline-flex; align-items: center; gap: var(--sp-1); list-style: none; cursor: pointer; border-radius: var(--r-sm); padding: 0 var(--sp-1); margin: 0 calc(-1 * var(--sp-1)); max-width: 100%; }
.sel-proyecto > summary::-webkit-details-marker { display: none; }
.sel-proyecto > summary:hover, .sel-proyecto[open] > summary { background: var(--surface-hover); }
.sel-proyecto > summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sel-proyecto > summary svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.sel-proyecto[open] > summary svg { transform: rotate(180deg); }
.sel-lista { position: absolute; left: 0; top: calc(100% + 4px); z-index: var(--z-pop); display: grid; gap: 2px; width: max-content; min-width: 260px; max-width: min(420px, 90vw); padding: var(--sp-2); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.sel-lista button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--control-h-sm); padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-body); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.sel-lista button:hover, .sel-lista button:focus-visible { background: var(--surface-hover); outline: none; }
.sel-lista button.is-on { background: var(--surface-sunken); color: var(--text-strong); font-weight: 600; }
.sel-lista button .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-lista button .n { flex: none; font-family: var(--font-data); font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.sel-lista button .n.is-danger { color: var(--status-danger-fg); font-weight: 600; }
.sel-lista .vacio { padding: var(--sp-2); font-size: .85rem; color: var(--text-muted); }
.cab-plegar svg { transition: transform var(--dur-fast); }
.proyecto-cab.contraida .cab-plegar svg { transform: rotate(180deg); }
.proyecto-cab.contraida #pDesc, .proyecto-cab.contraida #pResumen { display: none; }
/* Auditoria #9: un grupo de botones hermanos separa --sp-2 en toda la app (cabecera, pie de dialogo,
   acciones de Documentos, acciones de la tarjeta); --sp-1 queda para chips y para el pie del rail. */
.proyecto-cab .acciones { display: flex; gap: var(--sp-2); margin-left: auto; }
/* B1 → v0.13.0 (Carlos, 12-sep): el menu «⋮» existe en todos los anchos (antes solo en celular). Dentro, cada accion es un
   renglon a todo el ancho; «Editar» es un <details> anidado con Editar datos · Cerrar/Reabrir · Eliminar (rojo). */
.acc-menu { display: block; margin-left: auto; position: relative; }
.acc-menu > summary { display: inline-flex; list-style: none; cursor: pointer; color: var(--text-muted); }   /* el tamano y el borde los pone .mn-btn.is-sm.is-icono */
.acc-menu > summary::-webkit-details-marker { display: none; }
.acc-menu .acciones { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-pop); display: grid; gap: 2px; min-width: 200px; margin: 0; padding: var(--sp-2); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.acc-menu .acciones .mn-btn { justify-content: flex-start; width: 100%; }
.acc-sub > summary { list-style: none; display: flex; align-items: center; justify-content: space-between !important; cursor: pointer; }
.acc-sub > summary::-webkit-details-marker { display: none; }
.acc-sub > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.acc-sub[open] > summary svg { transform: rotate(90deg); }
.acc-sub .acc-sub-caja { display: grid; gap: 2px; margin-top: 2px; padding-left: var(--sp-3); border-left: 2px solid var(--border-hairline); }
.acc-menu .acciones .mn-btn.is-danger { color: var(--status-danger-loud); border-color: transparent; }
.acc-menu .acciones .mn-btn.is-danger:hover { background: var(--status-danger-bg); }
/* La linea-resumen es para CELULAR: en escritorio la lateral ya dice «En curso 3 · En revisión 2 ·
   Fin del frente», y pintar las dos es el mismo defecto que A6 («Al día» dos veces). */
.resumen-linea { display: none; flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--text-muted); }
.resumen-linea.is-danger { color: var(--status-danger-fg); font-weight: 600; }
.solo-movil { display: none; }
.t-corto { display: none; }
.pie { margin: var(--sp-6) 0 0; font-size: .72rem; color: var(--text-faint); }

/* 2026-09-12: la lateral gana 40 px (300 → 340) y la principal lleva minmax(0, 1fr): en Inicio la principal
   casi siempre trae pocos proyectos y la lateral es la que tiene texto que leer (captura del 12-sep). */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); min-width: 0; }
.dos-columnas.ancha { grid-template-columns: minmax(0, 1fr) 260px; }
.apilado { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
/* Con la lateral, las 4 columnas del tablero necesitan ~1100 px; por debajo la lateral baja. */
@media (max-width: 1200px) { .dos-columnas.ancha { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .dos-columnas, .dos-columnas.ancha { grid-template-columns: 1fr; } }

/* ---- listas de proyectos */
.lista { display: grid; gap: var(--sp-2); }
/* v0.25.0 «calendario de mes» (opcion B5 del artifact 5276f348, Carlos 2026-09-14): un renglon por frente, plano (sin
   encabezado por equipo) y por lo que vence antes. Hoja de calendario (mes con el color del semaforo + dia grande) ·
   icono · titulo · «Rama · Unidad» · tres cifras a la derecha. Sustituye a las fichas por unidad de v0.23.0; Carlos
   pidio que no lleve nada debajo del titulo (ni anillo, ni barra, ni «sigue:», ni chips, ni avatares). */
.fichas { display: grid; gap: var(--sp-2); }
.pficha { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-md); text-align: left; color: inherit; font: inherit; cursor: pointer; min-width: 0; width: 100%; }
.pficha:hover { background: var(--surface-hover); }
.pficha .cal { display: grid; grid-template-rows: 16px 1fr; width: 56px; height: 56px; border: 1px solid var(--border-default); border-radius: var(--r-md); overflow: hidden; text-align: center; }
.pficha .cal .mes { font-family: var(--font-data); font-size: .56rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 16px; color: var(--text-on-brand); background: var(--brand-primary); }
.pficha .cal .dia { display: grid; place-items: center; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-strong); background: var(--surface-card); }
.pficha.is-danger .cal .mes { background: var(--status-danger-solid); }
.pficha.is-warn .cal .mes { background: var(--status-warn-solid); }
.pficha.is-cerrado .cal .mes { background: var(--status-ok-solid); }
.pficha .cal.sin .mes { background: var(--surface-sunken); color: var(--text-faint); }
.pficha .cal.sin .dia { color: var(--text-faint); font-size: 1.1rem; }
.pficha .cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); align-items: center; min-width: 0; }
/* .tt es un bloque de texto: el titulo y la etiqueta corren en linea, y la etiqueta cae a la siguiente cuando no cabe (a 820 px con la
   etiqueta en su propia columna nowrap el titulo se estrangulaba a 75 px — revisor 14-sep). */
.pficha .tt { min-width: 0; line-height: 1.25; }
.pficha .t { font-weight: 600; color: var(--text-strong); font-size: .98rem; overflow-wrap: anywhere; }
.pficha .uni { display: inline-block; margin-left: var(--sp-2); vertical-align: 1px; font-family: var(--font-data); font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--text-muted)); white-space: nowrap; }
.pficha .stats { display: flex; gap: var(--sp-3); }
.pficha .stats span { display: grid; justify-items: end; min-width: 3.6rem; }
.pficha .stats b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-strong); }
.pficha .stats b.bad { color: var(--status-danger-fg); }
.pficha .stats small { font-family: var(--font-data); font-size: .56rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px; }
/* Auditoria #12: el avatar tiene DOS tamanos, 26 (.av) y 20 (.av.is-sm); antes habia 26/22/20/18. */
.av.is-sm, .tarjeta .f .av, .filtros button .av { width: 20px; height: 20px; font-size: .58rem; }
.segbar { display: flex; gap: 2px; height: 5px; width: 100%; }
.segbar i { display: block; flex: 0; border-radius: 2px; }
.segbar i.h { background: var(--status-ok-solid); } .segbar i.r { background: var(--status-info-solid); } .segbar i.c { background: var(--brand-primary); } .segbar i.p { background: var(--border-default); }
/* Filtro por equipo en celular (el rail por rama no cabe en la barra de pestanas). */
.filtro-movil { align-items: center; gap: var(--sp-2); }
/* Auditoria #6: un solo select «suelto» (fuera de .mn-field): pildora, 32/40 px, .85rem. Lo usan el filtro movil y «tarjeta:» de Documentos. */
.filtro-movil select, .doc .tarjeta-de select { min-height: var(--control-h-sm); font: inherit; font-family: var(--font-ui); font-size: .85rem; padding: 0 var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-body); min-width: 0; }
.filtro-movil select { flex: 1; }
.barra { height: 6px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--brand-accent); border-radius: var(--r-pill); width: 0; transition: width var(--dur); }
.cerrados summary { cursor: pointer; color: var(--text-muted); font-size: .82rem; font-weight: 600; padding: 0; min-height: var(--control-h-sm); display: flex; align-items: center; }   /* misma metrica que .editar summary */
.filtros { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* Auditoria #5: UN chip-boton (pildora, 32/40 px, .8rem, pad 0 12) para los filtros, las pestanas de columna
   en celular y los atajos de fecha; antes eran tres reglas con padding 12/12/8 y fuente .8/.8/.75. */
.filtros button, .col-tabs button, .atajos-fecha button { min-height: var(--control-h-sm); padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: var(--sp-1); align-items: center; }
.filtros button.is-on, .col-tabs button.is-on, .atajos-fecha button.is-on { background: var(--surface-selected); color: var(--brand-primary); border-color: var(--brand-primary); }
.filtros button .av { margin: 0 var(--sp-1) 0 calc(-1 * var(--sp-2)); vertical-align: middle; }
/* F9: filtro de tarjetas dentro del proyecto (chips + texto) */
.tareas-filtros { align-items: center; }
.tareas-filtros .chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* Auditoria #7: es el mismo .buscador de Proyectos y Mis tareas; aqui solo cambia el acomodo. */
.tareas-filtros .buscador { margin-left: auto; min-width: 0; width: min(13rem, 100%); }   /* v0.20.0: 13rem (era 16) para que el conmutador quepa en la fila a 1366 */
/* C3 (v0.6.0): el mismo buscador en Proyectos y Mis tareas, a lo ancho del contenido. */
.buscador { min-height: var(--control-h-sm); font: inherit; font-size: .85rem; padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-body); width: min(24rem, 100%); }
.buscador:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
/* C8: el reloj del frente junto al % de la cabecera */
.proyecto-cab .reloj:empty { display: none; }
/* U3: los KPI de Inicio son botones */
button.mn-kpi { font: inherit; text-align: left; color: inherit; cursor: pointer; display: block; width: 100%; }
button.mn-kpi:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ---- mini listas (vencimientos, actividad, quienes)
   2026-09-12: dos columnas (avatar · cuerpo), no tres. Con la hora como tercera columna nowrap, la frase se
   quedaba con ~110 px de los 268 de la lateral y caia a una palabra por linea (8 entradas = ~2,700 px).
   Ahora la cabecera lleva quien + cuando, la frase ocupa todo el ancho, el titulo «…» va en negrita y
   recortado a 2 lineas (integro en title), y el «de X a Y» baja a linea propia como «X → Y». */
.mini { display: grid; }
.mini .it { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; padding: var(--sp-2) 0; border-top: 1px solid var(--border-hairline); font-size: .85rem; line-height: 1.45; }
.mini .it:first-child { border-top: 0; padding-top: 0; }
.mini .it .av { margin-top: 2px; }
.mini .it .cab { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; min-width: 0; }
.mini .it .q { font-weight: 600; color: var(--text-strong); }
.mini .it .f { color: var(--text-body); }
.mini .it .f b { font-weight: 600; color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini .it .f .sino { display: block; font-size: .8rem; color: var(--text-muted); }
.mini .it .w { color: var(--text-faint); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .it .d { font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.mini .it .d.is-danger { color: var(--status-danger-fg); font-weight: 600; }
.mini .it .d.is-warn { color: var(--status-warn-fg); font-weight: 600; }
.mini .vacio { color: var(--text-faint); font-size: .85rem; }
/* v0.14.0: en la columna ancha de Inicio (Actividad reciente bajo Proyectos activos) la frase corre en UNA linea
   (verbo, titulo y complemento seguidos) y el proyecto va a la derecha en la misma cabecera; el acomodo apilado
   de 3-4 renglones era para la lateral de 340 px. Por debajo de 900 px la tarjeta vuelve a ser angosta y aplica lo de arriba. */
@media (min-width: 901px) {
  #inicioActividad .it { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-2) 0; }
  #inicioActividad .it .cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; }
  #inicioActividad .it .cab .q { white-space: nowrap; }
  #inicioActividad .it .f { display: block; }
  #inicioActividad .it .f b { display: inline; -webkit-line-clamp: unset; overflow: visible; }
  #inicioActividad .it .f .sino { display: inline; margin-left: var(--sp-1); }
  #inicioActividad .it .w { font-size: .78rem; }
}
/* C9 (v0.6.0): el renglon de actividad con tarjeta es un boton que la abre (mismo acomodo que el div). */
.mini button.it { width: 100%; background: none; border: 0; border-top: 1px solid var(--border-hairline); font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-sm); }
.mini button.it:first-child { border-top: 0; }
.mini button.it:hover { background: var(--surface-hover); }
.mini button.it:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-primary); color: var(--text-on-brand); font-family: var(--font-display); font-size: .68rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.av.is-tercero { background: var(--surface-sunken); color: var(--text-muted); }

/* ---- tabs */
.tabs { display: flex; gap: var(--sp-1); align-items: center; border-bottom: 1px solid var(--border-hairline); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--sp-2) var(--sp-3); color: var(--text-muted); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; min-height: var(--control-h); }
.tab.is-on { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.tabs .mn-btn { margin-left: auto; }

/* ---- tablero de 4 columnas */
.tablero { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-1); }
/* A3: entre 721 y 900 px (tableta, ventana chica de laptop) las pestanas de columna todavia no
   existen; con `repeat(4, 240px)` el tablero volvia al scroll horizontal y cortaba «En revisión».
   2 x 2 conserva la vista de tablero completa sin desbordar. */
@media (max-width: 900px) { .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; } }
/* U5: en celular, pestanas de columna y UNA columna a lo ancho; en escritorio las pestanas no existen. */
.tablero-caja { display: grid; gap: var(--sp-2); min-width: 0; }
.col-tabs { display: none; }
@media (max-width: 720px) {
  .col-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; padding-bottom: 2px; }
  .col-tabs button { flex: none; }
  .col-tabs button .n { font-family: var(--font-data); font-size: .72rem; font-weight: 500; }
  .tablero { grid-template-columns: 1fr; overflow-x: visible; }
  .col:not(.is-activa) { display: none; }
}
.col { background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--sp-2); display: grid; gap: var(--sp-2); align-content: start; min-height: 200px; }
.col h3 { margin: 0; font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--text-strong); display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-1) var(--sp-1) 0; }
.col h3 .n { margin-left: auto; font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.col .vacio { color: var(--text-faint); font-size: .78rem; padding: var(--sp-1); }
.tarjeta { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left-width: 3px; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-1); text-align: left; color: inherit; font: inherit; cursor: pointer; min-width: 0; }   /* auditoria #10: sin sombra, como .mn-card, .doc y .urgente; la piel lo dice */
.tarjeta:hover { border-color: var(--border-default); }
/* D4 (v0.6.0): la prioridad alta era el borde izquierdo. v0.20.0 (iteracion 2): el borde izquierdo (3 px en TODAS)
   es semaforo de FECHA — gris en tiempo, rojo vencida, ambar hoy o en CONFIG.semaforoDias, verde hecha — y la
   prioridad alta pasa a un PUNTO de marca delante del titulo (tarjeta) y en la columna «P» (Lista). Las reglas de
   color van despues del bloque [data-tono], que pinta border-color entero y las pisaria. */
.p-alta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); flex: none; }
.tarjeta .t .p-alta { margin-right: 6px; vertical-align: 1px; }
.tabla .col-p { width: 14px; padding-left: var(--sp-1); padding-right: 0; }
.tabla td.col-p .p-alta { display: block; margin-top: .3em; }
.col { container-type: inline-size; }
.col h3 .n { white-space: nowrap; }
.col h3 .n .largo { display: none; }   /* «· 1 vencida» solo en cubetas de 240 px o mas (a 1366 con lateral miden 195): abajo queda el rojo y el title */
@container (min-width: 240px) { .col h3 .n .largo { display: inline; } }
.col h3 .n.is-hot, .col-tabs button .n.is-hot { color: var(--status-danger-fg); font-weight: 600; }
/* Leyenda del filete, bajo las columnas: la misma barrita de 3 px que llevan las tarjetas. */
.leyenda-sem { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: .72rem; color: var(--text-muted); padding: 0 var(--sp-1); }
.leyenda-sem span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-sem i { display: inline-block; width: 3px; height: 12px; border-radius: 2px; background: var(--border-hairline); }
.leyenda-sem .is-vencida i { background: var(--status-danger-solid); } .leyenda-sem .is-pronto i { background: var(--status-warn-solid); } .leyenda-sem .is-hecha i { background: var(--status-ok-solid); }
.leyenda-sem .alta i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); }
/* Conmutador Cómodo / Compacto: en la fila de FILTROS, tras el buscador (en la de pestañas desbordaba 84 px a 820);
   solo se ve en el tablero. En celular vive, como los filtros, detrás de «Filtrar». */
.densidad { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-card); flex: none; }
.densidad button { border: 0; background: none; font: inherit; font-size: .74rem; font-weight: 600; padding: 0 var(--sp-2); min-height: calc(var(--control-h-sm) - 4px); border-radius: var(--r-pill); color: var(--text-muted); cursor: pointer; }   /* 28 px dentro de 32: el mismo alto que los chips de al lado */
.densidad button[aria-pressed="true"] { background: var(--brand-primary); color: var(--text-on-brand); }
.densidad button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
/* Compacto: una linea por tarjeta — titulo con puntos suspensivos · avatar · chip de fecha. El nombre, las
   insignias, «en el buzon» y «sin movimiento» se esconden (siguen en el title y en la ficha). */
.tablero.is-compacto .col { gap: 4px; }
.tablero.is-compacto .tarjeta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: 4px var(--sp-2); min-height: 36px; }   /* 36 px: el umbral tactil que mide driver.js (revisor: a 32 salian «chicos») */
.tablero.is-compacto .tarjeta .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: .84rem; }
.tablero.is-compacto .tarjeta .f { flex-wrap: nowrap; }
.tablero.is-compacto .tarjeta .f > :not(.av):not(.vence) { display: none; }
.tablero.is-compacto .tarjeta .f .mn-chip { padding: 0 6px; font-size: .68rem; }
.tarjeta .t { font-weight: 600; color: var(--text-strong); font-size: .88rem; line-height: 1.3; }
.tarjeta .f { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; font-size: .75rem; color: var(--text-muted); }
.tarjeta .stale { color: var(--status-warn-fg); font-weight: 600; }
/* La caja de la tarjeta se conserva (Mis tareas y la E2E la usan); desde v0.11.0 ya no lleva el atajo «→ siguiente». */
.tarjeta-caja { display: grid; gap: 2px; min-width: 0; }

/* ---- Mis tareas: lo urgente arriba (U4) */
.urgentes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--sp-2); }
.urgente { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-2); align-items: stretch; border: 1px solid var(--border-hairline); border-left: 3px solid var(--status-warn-fg); border-radius: var(--r-sm); background: var(--surface-card); padding: var(--sp-2); min-width: 0; }
.urgente.is-danger { border-left-color: var(--status-danger-fg); }
.urgente .k { display: grid; align-content: center; justify-items: center; gap: 2px; font-family: var(--font-display); color: var(--status-warn-fg); }
.urgente.is-danger .k { color: var(--status-danger-fg); }
.urgente .k b { font-size: 1.8rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.urgente .k small { font-size: .62rem; font-weight: 600; text-align: center; line-height: 1.1; font-family: var(--font-data); text-transform: uppercase; letter-spacing: .07em; }
.urgente .tarjeta { border: 0; padding: var(--sp-1) 0; }

/* ---- lista (tabla) */
.tabla { overflow-x: auto; }
.tabla table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.tabla th { text-align: left; font-family: var(--font-data); font-size: .68rem; letter-spacing: .07em; font-weight: 600; text-transform: uppercase; color: var(--text-muted); padding: var(--sp-2); border-bottom: 1px solid var(--border-hairline); }
.tabla td { padding: var(--sp-2); border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: var(--surface-hover); }
/* F10: ordenar por columna */
.tabla th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.tabla th[data-sort]:hover { color: var(--text-strong); }
.tabla th[aria-sort="ascending"]::after { content: " ↑"; }
.tabla th[aria-sort="descending"]::after { content: " ↓"; }
.tabla .vacio { color: var(--text-faint); }

/* v0.18.0: acciones rapidas de Inicio (Nueva tarea · Ligar documento · Nuevo proyecto), con el proyecto al que van las dos primeras */
.acciones-rapidas { display: grid; gap: var(--sp-2); }
.acciones-rapidas .botones { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.acciones-rapidas .en { display: flex; flex: 1 1 160px; min-width: 0; align-items: center; gap: var(--sp-2); font-family: var(--font-data); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.acciones-rapidas .en select { flex: 1; min-width: 0; min-height: var(--control-h-sm); font: inherit; font-family: var(--font-ui); font-size: .85rem; text-transform: none; letter-spacing: 0; padding: 0 var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-body); }

/* ---- documentos */
.docs { display: grid; gap: var(--sp-3); }
.docs-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.docs-acciones .mn-label { margin-left: auto; }
/* 2026-09-12: la 2.a columna iba en `1fr` (minimo automatico = el contenido) y el select de
   «tarjeta:» empujaba la pagina 103 px a la derecha en cuanto el proyecto tenia ligas — lo cazo el
   barrido de capturas, no la E2E. `minmax(0, 1fr)` es lo que deja encoger de verdad. */
.doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--surface-card); min-width: 0; }   /* auditoria #11: primer nivel = r-md; anidado (.urgente, .eq-ficha, .lg-resultado) = r-sm */
.doc .t { font-weight: 600; color: var(--text-strong); font-size: .88rem; }
.doc .t a { color: inherit; text-decoration: none; }
.doc .t a:hover { text-decoration: underline; }
.doc .p { font-family: var(--font-data); font-size: .68rem; color: var(--text-muted); word-break: break-all; }
.doc .lado { display: grid; gap: var(--sp-1); justify-items: end; }
.doc .estado { display: inline-flex; gap: var(--sp-1); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.doc .tarjeta-de { display: flex; gap: var(--sp-1); align-items: center; }
.doc .tarjeta-de select { max-width: 100%; }
.reemplazo { color: var(--status-warn-fg); }

/* ---- dialogo de tarjeta */
.kv { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-1) var(--sp-3); font-size: .85rem; margin-bottom: var(--sp-3); }
.kv b { color: var(--text-muted); font-weight: 500; }
.mover { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-3); }
.mover .mn-btn.is-here { background: var(--surface-selected); border-color: var(--brand-primary); color: var(--brand-primary); }
.orden { display: flex; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-3); font-size: .8rem; color: var(--text-muted); }
.orden:empty { display: none; }
.editar summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-link); padding: 0; min-height: var(--control-h-sm); display: flex; align-items: center; }   /* misma altura que un .is-sm: 32 / 40 tactil */
/* v0.12.0: el pie de un formulario de dialogo ya NO lleva margen negativo: se salia del ancho del <dialog> (el boton primario
   cortado y 14 px de scroll vertical en «Cubetas», medido con capturas.mjs: dialog=512x427 scrollH=441). */
.forma .mn-dialog-foot { margin: 0; }
/* Auditoria #2: en todo pie el primario va al FINAL; el destructivo, solo, a la izquierda. */
.mn-dialog-foot .is-danger { margin-right: auto; }
/* Un pie cuyo unico boton esta oculto (Actividad sin «ver 50 mas») no deja la barra vacia. */
.mn-dialog-foot:has(> [hidden]:only-child) { display: none; }
.editar .forma .mn-dialog-foot { margin: var(--sp-3) 0 0; background: transparent; border: 0; padding: 0; }
.progreso { font-size: .78rem; color: var(--text-muted); min-height: 1.2em; }
.mn-dialog .kv:empty { display: none; }
.head-botones { display: flex; gap: var(--sp-2); flex: none; }
/* A2: Equipo. La tabla de 5 columnas mide mas que el dialogo en celular (354 px) y se cortaba
   despues de «Rol», sin barra visible que lo dijera. En <=720 px se pinta como fichas. */
.eq-fichas { display: none; }
@media (max-width: 720px) {
  .eq-tabla { display: none; }
  .eq-fichas { display: grid; gap: var(--sp-2); }
  .eq-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); align-items: center; padding: var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--surface-card); }
  .eq-ficha .n { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
  .eq-ficha .c { grid-column: 2 / -1; font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); overflow-wrap: anywhere; }
  .eq-ficha .ch { display: flex; gap: var(--sp-1); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  .eq-ficha.inactivo { opacity: .65; }
}
/* documentos y notas de la tarjeta (F3 · F5) */
.tdocs { display: grid; gap: var(--sp-1); margin: var(--sp-1) 0 var(--sp-3); font-size: .85rem; }
.tdoc { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.tdoc a { color: var(--text-link); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.tdoc a:hover { text-decoration: underline; }
.tdoc .mn-btn { margin-left: auto; }
.tdoc-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
.tdocs .vacio, .notas .vacio { color: var(--text-faint); font-size: .82rem; }
.notas { display: grid; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); font-size: .85rem; }
.nota { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; }
.nota .w { color: var(--text-muted); font-size: .75rem; }
.nota p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-forma { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-2); align-items: end; margin-bottom: var(--sp-3); }
.nota-forma textarea { font: inherit; font-size: .85rem; padding: var(--sp-2); border: 1px solid var(--border-default); border-radius: var(--r-sm); background: var(--surface-card); color: var(--text-body); resize: vertical; min-width: 0; }
/* C4 (v0.6.0): contador «180/250» desde los 200 caracteres; en rojo al tope. */
.nota-forma .cont { font-size: .72rem; color: var(--text-muted); align-self: end; padding-bottom: var(--sp-2); }
.nota-forma .cont:empty { display: none; }
.nota-forma .cont.is-danger { color: var(--status-danger-fg); font-weight: 600; }
/* C6: con rol lectura, una linea gris en vez de cuatro botones apagados + banda roja */
.solo-lectura { margin: 0 0 var(--sp-3); }
.lg-acciones { display: flex; justify-content: flex-end; margin: var(--sp-3) 0; }
.lg-resultado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); font-size: .85rem; }
.lg-resultado .p { font-family: var(--font-data); font-size: .68rem; color: var(--text-muted); word-break: break-all; }

/* C2 + D1: atajos de fecha y la fecha leida en el formato de la casa (el campo nativo la pinta en
   el idioma del DISPOSITIVO: mm/dd/yyyy en una laptop en ingles). */
.atajos-fecha { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin-top: var(--sp-1); }
.atajos-fecha .leida { font-size: .75rem; color: var(--text-body); }
/* D3: a media anchura el select corta los nombres de mas de 15 caracteres («Persona de Pruel»).
   Cuatro dialogos heredan esta fila. */
@media (max-width: 480px) { .mn-row { grid-template-columns: 1fr; } }

/* ==== celular (<=720 px) — v0.5.0. Va AL FINAL a proposito: una regla movil escrita arriba
   la pisa su regla base de mas abajo con la misma especificidad (paso justo el 2026-09-12
   con .acc-menu, .solo-movil y .sig). Lo movil se escribe despues de lo que corrige. ==== */
@media (max-width: 720px) {
  /* ---- B1/B2/B4/B7 (2026-09-12): a 390 px la primera tarjeta del tablero arrancaba a ~630 px, bajo
     el pliegue de una pantalla de 844; la lateral que resume el frente quedaba a ~1,900 px. */
  .solo-movil { display: inline-flex; }
  .resumen-linea { display: block; }
  .resumen-linea:empty { display: none; }
  /* Con «Resumen» y «Filtrar» la fila de pestanas ya no cabe en 390 px (desbordaba 14 px el
     documento entero): rueda dentro de si misma, no arrastra la pagina. */
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab, .tabs .mn-btn { flex: none; }
  .tabs .tab { padding: var(--sp-2); }
  .tab.solo-movil { align-items: center; justify-content: center; }   /* auditoria #4: .solo-movil = inline-flex y el texto subia */
  .t-largo { display: none; }
  .t-corto { display: inline; }
  .proyecto-cab { gap: var(--sp-1) var(--sp-2); }
  .proyecto-cab h1 { font-size: 1.15rem; }
  .proyecto-cab .titulo h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* B1: el menu «⋮» ya es global desde v0.13.0; aqui no queda nada propio del celular. */
  /* B1: la descripcion, a una linea con «más» (clic en el propio parrafo) */
  #pDesc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  #pDesc.abierta { -webkit-line-clamp: 99; }
  /* B1: filtros y buscador detras de «Filtrar» */
  #filtroTareas.plegado { display: none; }
  #btnFiltros.is-on { background: var(--surface-selected); color: var(--brand-primary); border-color: var(--brand-primary); }
  /* B2: la lateral es la pestana «Resumen», no un scroll de cuatro pantallas */
  #p-proyecto .lateral { display: none; }
  #p-proyecto.ver-resumen .lateral { display: grid; }
  /* B4: los chips de persona, solo avatar (el nombre va en el title); con 10 cuentas serian 4 renglones */
  .tareas-filtros .chips button[data-quien] { padding: 0 var(--sp-1); }
  .tareas-filtros .chips button[data-quien] .nom { display: none; }
  .tareas-filtros .chips button[data-quien] .av { margin: 0; }
  /* En celular el renglon de Documentos baja su costado (estado + «tarjeta:») a su propia linea:
     con tres columnas, el select dejaba al nombre del archivo una palabra por renglon. */
  .doc { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); }
  .doc .lado { grid-column: 1 / -1; justify-items: stretch; }
  .doc .estado, .doc .tarjeta-de { justify-content: flex-start; }
  .doc .tarjeta-de select { flex: 1; min-width: 0; }
  /* B7: «Origen en la KB» lo trae 1 de 17 tarjetas y se comia una columna de la Lista */
  /* ---- v0.6.0 ---- */
  /* B3: Inicio media 2,400 px a 390 px; los 4 KPI en 2 x 2 ocupaban 370. Una fila de «mini»
     (numero + etiqueta a 2 lineas); el 5.o («sin dueño», solo si hay) cae a la fila de abajo. */
  .mn-kpis { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--sp-1); }
  .mn-kpi { padding: var(--sp-2) var(--sp-2) var(--sp-2) calc(var(--sp-2) + 3px); }
  .mn-kpi .mn-kpi-label { font-size: .58rem; letter-spacing: .04em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
  .mn-kpi .mn-kpi-val { font-size: 1.35rem; margin-top: 2px; }
  /* C4: el boton «Anotar» debajo del textarea, a todo el ancho; el contador arriba del boton a la derecha */
  .nota-forma { grid-template-columns: 1fr; }
  .nota-forma .cont { justify-self: end; padding-bottom: 0; }
  .nota-forma .mn-btn { width: 100%; }
  /* C3: el buscador a todo el ancho */
  .buscador { width: 100%; }
  /* v0.25.0: a 390 px la hoja de calendario se encoge y las tres cifras bajan a su propia linea, bajo el titulo */
  .pficha { grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-1) var(--sp-2); padding: var(--sp-2); }
  .pficha .cal { width: 48px; height: 48px; grid-row: span 2; }
  .pficha .stats { grid-column: 2; justify-content: flex-start; }
  .pficha .stats span { justify-items: start; min-width: 0; }
  .pficha .uni { display: block; margin-left: 0; margin-top: 2px; }
}
/* B6: objetivos tactiles. Medido a 390 px: todos los .is-sm, chips y pestanas median 32 px, y
   «→ siguiente» 24. El corte va en 900 px, no en 720: A3 acaba de declarar que 721-900 es tableta
   —dedo, no raton— y dejarlo en 720 habria contado como resuelto un ancho que no lo estaba. */
@media (max-width: 900px) {
  :root { --control-h-sm: 40px; }
  .kv .proy a { display: inline-block; padding: 8px 0; }   /* D2: la liga «Proyecto» media 17 px a 820 */
}

/* ==== v0.8.0 (2026-09-12): chat por proyecto, @menciones, iconos de archivo, insignias, color por persona ==== */
/* ---- avatar con color por persona (comun.js tonoDe: 8 tonos, el mismo correo siempre el mismo). Tonos OSCUROS
   con texto blanco: 4.9:1 o mas en claro (el teal original daba 3.74, revisor 12-sep); en oscuro se aclaran un paso y el texto va negro. */
:root {
  --av-1: #0f45c4; --av-2: #0f766e; --av-3: #b45309; --av-4: #7c3aed; --av-5: #be185d; --av-6: #1f6b28; --av-7: #0a76b4; --av-8: #6d5a1e;
  --av-tx: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --av-1: #7f9bff; --av-2: #5eead4; --av-3: #fbbf5c; --av-4: #c4b5fd; --av-5: #f9a8d4; --av-6: #86efac; --av-7: #8fd6ff; --av-8: #e3d29a; --av-tx: #0f0f0f; }
}
:root[data-theme="dark"] { --av-1: #7f9bff; --av-2: #5eead4; --av-3: #fbbf5c; --av-4: #c4b5fd; --av-5: #f9a8d4; --av-6: #86efac; --av-7: #8fd6ff; --av-8: #e3d29a; --av-tx: #0f0f0f; }
.av[data-tono="1"] { background: var(--av-1); color: var(--av-tx); } .av[data-tono="2"] { background: var(--av-2); color: var(--av-tx); }
.av[data-tono="3"] { background: var(--av-3); color: var(--av-tx); } .av[data-tono="4"] { background: var(--av-4); color: var(--av-tx); }
.av[data-tono="5"] { background: var(--av-5); color: var(--av-tx); } .av[data-tono="6"] { background: var(--av-6); color: var(--av-tx); }
.av[data-tono="7"] { background: var(--av-7); color: var(--av-tx); } .av[data-tono="8"] { background: var(--av-8); color: var(--av-tx); }

/* ---- icono de archivo (comun.js iconoArchivo): hoja con la esquina doblada rellena del color del tipo, la marca
   encima. Sustituye al cuadro con «pdf»/«docx» escrito. Colores de Office por convencion (Word azul, Excel verde,
   PowerPoint naranja, PDF rojo) tomados de la paleta para que sigan al tema. */
.fico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 38px; flex: none; color: var(--idle-solid); }
.fico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* v0.27.0 (Carlos, 14-sep, artifact 24ba421e «A2»): HOJA SOLIDA — cuerpo relleno del color, doblez relleno mas claro, la
   marca del tipo y las letras «PDF» en blanco. El enlace sigue siendo solo trazo. */
.fico svg .cuerpo { fill: currentColor; }
.fico svg .doblez { fill: color-mix(in srgb, currentColor 55%, var(--sobre-solido)); stroke: none; }
.fico svg .marca { stroke: var(--sobre-solido); stroke-width: 1.7; }
.fico.is-sm { width: 22px; height: 22px; } .fico.is-sm svg { width: 20px; height: 20px; stroke-width: 2; }
.fico.is-pdf { color: var(--bad-solid); } .fico.is-word { color: var(--brand); } .fico.is-excel { color: var(--ok-solid); } .fico.is-ppt { color: var(--serie); }
.fico.is-imagen { color: var(--serie2); } .fico.is-correo { color: var(--info-solid); } .fico.is-plano { color: var(--sky-700); } .fico.is-zip { color: var(--amber-700); }
.fico.is-lote { color: var(--info-solid); } .fico.is-enlace { color: var(--text-muted); }
.fico svg .letras { fill: var(--sobre-solido); stroke: none; font-family: var(--font-display); font-weight: 700; font-size: 6px; text-anchor: middle; letter-spacing: .02em; }
.fico.is-sm svg .marca { stroke-width: 2; }

/* ---- insignias en la cara de la tarjeta (Trello): notas y documentos, sin abrirla. */
.insig { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-data); font-size: .7rem; color: var(--text-muted); }
.insig svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---- punto de color en la cabecera de cada columna = la barra segmentada de la lista de proyectos (misma leyenda). */
.col h3 .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); flex: none; }
/* v0.11.0: el color va por POSICION de la cubeta (data-cls: p primera · c segunda · r demas · h hecho), no por su nombre. */
.col[data-cls="c"] h3 .punto { background: var(--brand-primary); }
.col[data-cls="r"] h3 .punto { background: var(--status-info-solid); }
.col[data-cls="h"] h3 .punto { background: var(--status-ok-solid); }
/* Cubeta huerfana (una tarjeta quedo en una cubeta que ya no existe): se ve, marcada, hasta que alguien la mueva. */
.col.is-huerfana { outline: 1px dashed var(--status-warn-fg); outline-offset: -1px; }
.col.is-huerfana h3 .punto { background: var(--status-warn-fg); }
/* Mas de 4 cubetas (hasta 8): la rejilla las reparte a lo ancho y scrollea si no caben. */
.tablero[data-n="5"] { grid-template-columns: repeat(5, minmax(160px, 1fr)); }
.tablero[data-n="6"] { grid-template-columns: repeat(6, minmax(150px, 1fr)); }
.tablero[data-n="7"] { grid-template-columns: repeat(7, minmax(150px, 1fr)); }
.tablero[data-n="8"] { grid-template-columns: repeat(8, minmax(150px, 1fr)); }
/* ---- editor de cubetas (v0.11.0) */
.cubetas { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cubeta { display: grid; grid-template-columns: auto 1fr auto auto auto auto; gap: var(--sp-2); align-items: center; }
.cubeta .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); }
.cubeta .punto.is-c { background: var(--brand-primary); } .cubeta .punto.is-r { background: var(--status-info-solid); } .cubeta .punto.is-h { background: var(--status-ok-solid); }
.cubeta input { min-width: 0; font: inherit; min-height: var(--control-h-sm); padding: 0 var(--sp-2); color: var(--text-strong); background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--r-sm); }   /* v0.12.0: misma piel que .mn-field input (era el input crudo de 21 px) */
.cubeta .n { font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
/* En celular la cuenta baja a un segundo renglon; el nombre y los tres botones se quedan en el primero. */
@media (max-width: 720px) { .cubeta { grid-template-columns: auto 1fr auto auto auto; row-gap: 2px; } .cubeta .n { grid-column: 2 / -1; grid-row: 2; } }
/* ---- contador en la pestana (Documentos · N, Chat · N) */
.tab .n { margin-left: 6px; font-family: var(--font-data); font-size: .7rem; font-weight: 500; padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-muted); }
.tab.is-on .n { background: var(--surface-selected); color: var(--brand-primary); }

/* ---- chat por proyecto: hilo con lo ultimo abajo y el redactor debajo, como cualquier chat. */
.chat { display: grid; gap: var(--sp-2); min-width: 0; }
.chat .hilo { display: grid; gap: var(--sp-1); align-content: start; max-height: min(62vh, 640px); overflow-y: auto; padding: var(--sp-3); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-md); scrollbar-width: thin; }
.chat .hilo .vacio { color: var(--text-faint); font-size: .85rem; margin: 0; }
.chat .dia { justify-self: center; margin: var(--sp-2) 0 var(--sp-1); padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-sunken); font-family: var(--font-data); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }   /* muted, no faint: 2.45:1 a 10 px (revisor) */
.msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-2); align-items: start; padding: var(--sp-1) 0; }
.msg .av-hueco { width: 26px; height: 1px; }
.msg .cuerpo { display: grid; gap: 2px; min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--msg-tono, var(--text-muted)) 9%, var(--surface-card)); }
/* v0.14.0 (Carlos 13-sep): cada persona escribe en su burbuja, del tono de su avatar (comun.js tonoDe), para que el hilo no sea
   un solo bloque del mismo color. 9 % del tono sobre la tarjeta: en claro y oscuro el texto sigue siendo el del cuerpo (los
   tonos de --av-N ya cambian con el tema). Los mensajes seguidos de la misma persona se pegan: la burbuja de arriba pierde
   el redondeo de abajo y la de abajo el de arriba, con 2 px entre ellas. v0.15.1 (Carlos 13-sep): sin el filete de 3 px a la
   izquierda; el tono lo da solo el fondo. */
.msg[data-tono="1"] { --msg-tono: var(--av-1); } .msg[data-tono="2"] { --msg-tono: var(--av-2); } .msg[data-tono="3"] { --msg-tono: var(--av-3); } .msg[data-tono="4"] { --msg-tono: var(--av-4); }
.msg[data-tono="5"] { --msg-tono: var(--av-5); } .msg[data-tono="6"] { --msg-tono: var(--av-6); } .msg[data-tono="7"] { --msg-tono: var(--av-7); } .msg[data-tono="8"] { --msg-tono: var(--av-8); }
.msg:has(+ .msg.is-seguido) .cuerpo { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.msg.is-seguido .cuerpo { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.msg.is-seguido { padding-top: 2px; }
.msg .cab { display: flex; gap: var(--sp-2); align-items: baseline; }
.msg .cab .q { font-weight: 600; color: var(--text-strong); font-size: .85rem; }
.msg.is-mio .cab .q { color: var(--brand-primary); }
.msg .cab .h { font-size: .72rem; color: var(--text-muted); }
.msg .t { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
/* La nota de una tarjeta dentro del hilo: un chip-boton que la nombra y la abre. */
.msg .ref { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; justify-self: start; min-height: 24px; padding: 0 var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-muted); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.msg .ref span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .ref svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.msg .ref:hover:not(:disabled) { color: var(--brand-primary); border-color: var(--brand-primary); }
.msg .ref:disabled { cursor: default; opacity: .6; }
/* La mencion: chip; la propia resalta (es la razon de «Te mencionaron»). */
.mencion { display: inline; padding: 0 4px; border-radius: 4px; background: var(--surface-selected); color: var(--brand-primary); font-weight: 600; }
.mencion.is-yo { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.chat-forma { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--sp-2); align-items: end; }
.chat-forma textarea { font: inherit; font-size: .9rem; padding: var(--sp-2); border: 1px solid var(--border-default); border-radius: var(--r-sm); background: var(--surface-card); color: var(--text-body); resize: vertical; min-width: 0; width: 100%; box-sizing: border-box; }
.chat-forma .cont { font-size: .72rem; color: var(--text-muted); align-self: end; padding-bottom: var(--sp-2); }
.chat-forma .cont:empty { display: none; }
.chat-forma .cont.is-danger { color: var(--status-danger-fg); font-weight: 600; }
.chat .solo-lectura { margin: 0; }
/* El selector de @menciones cuelga del textarea (chat y nota de la tarjeta). */
.chat-caja { position: relative; min-width: 0; display: grid; }
.selector { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: var(--z-pop); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--sp-1); display: grid; gap: 1px; max-height: 240px; overflow-y: auto; }
.selector button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 36px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-body); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; }
.selector button .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text-strong); }
.selector button .a { font-size: .72rem; color: var(--text-muted); }
.selector button.is-on, .selector button:hover { background: var(--surface-selected); }
.selector button.is-on .n { color: var(--brand-primary); }
.sin-red #chatEnviar, .sin-red #chatArroba { opacity: .5; pointer-events: none; }
@media (max-width: 720px) {
  .chat .hilo { max-height: min(56vh, 520px); padding: var(--sp-2); }
  /* Bajo el texto, UNA fila: «@» a la izquierda y «Enviar» llenando el resto (como «Anotar», C4); el contador arriba a la derecha. */
  .chat-forma { grid-template-columns: auto minmax(0, 1fr); }
  .chat-forma .chat-caja { grid-column: 1 / -1; }
  .chat-forma .cont { grid-column: 1 / -1; justify-self: end; padding-bottom: 0; }
  .chat-forma #chatArroba { grid-column: 1; }
  .chat-forma #chatEnviar { grid-column: 2; width: 100%; }
}
@media print { .chat-forma, .selector { display: none !important; } .chat .hilo { max-height: none; overflow: visible; } }
/* B6 para el chip de la tarjeta en el chat: media 24 px a 390/820. Va AL FINAL porque la regla base `.msg .ref`
   (misma especificidad) esta arriba y la pisaria (el revisor cazo la primera version dentro del @media de B6). */
@media (max-width: 900px) { .msg .ref { min-height: 36px; } }

/* ==== v0.9.0 (2026-09-12): borrar comentario, «nuevos desde tu ultima visita», enlaces clicables, cabecera de dialogo marcada ==== */
/* ---- cabecera de dialogo: Carlos pidio que se distinga de lo editable. Fondo hundido, filete mas firme abajo y una
   linea de marca arriba; el pie ya era hundido, asi que el cuerpo (lo editable) queda como la unica superficie clara. */
.mn-dialog-head { background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface-sunken)); border-bottom: 1px solid var(--border-default); border-radius: var(--r-md) var(--r-md) 0 0; }   /* v0.12.0: la franja azul de arriba (inset 3px) salio a pedido de Carlos, 12-sep */
.mn-dialog-foot { border-top-color: var(--border-default); }
/* Las secciones DENTRO del dialogo de tarjeta (Mover a… · Notas · Documentos · Editar): un filete arriba y aire, para que
   cada bloque se lea como bloque y no como una lista continua de rotulos. El primero no lleva filete. */
.mn-dialog-body > .mn-label, .t-main > .mn-label, .t-side > .mn-label { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-hairline); }
.mn-dialog-body > .mn-label:first-child, .mn-dialog-body > .kv + .mn-label, .mn-dialog-body > .dlg-avisos + .mn-label, .t-side > .mn-label:first-child, .t-main > .t-chips + .mn-label, .t-main > .t-desc + .mn-label, .t-main > .deny + .mn-label, .t-main > .solo-lectura + .mn-label { margin-top: 0; padding-top: 0; border-top: 0; }   /* v0.24.0: tambien dentro de las dos columnas */
.mn-dialog-body > .editar { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-hairline); }
/* ---- borrar comentario/nota: boton de icono al final del renglon; en escritorio aparece al pasar el raton o con el
   foco, en tactil (sin hover) siempre, para que exista sin ensuciar el hilo. */
.msg.has-borrar { grid-template-columns: 26px minmax(0, 1fr) auto; }
.nota.has-borrar { grid-template-columns: auto 1fr auto; }
.borrar-msg { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; align-self: start; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.borrar-msg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msg:hover .borrar-msg, .nota:hover .borrar-msg, .borrar-msg:focus-visible { opacity: 1; }
.borrar-msg:hover, .borrar-msg:focus-visible { color: var(--status-danger-fg); background: var(--status-danger-bg); }
@media (hover: none) { .borrar-msg { opacity: 1; width: 36px; height: 36px; } }
/* ---- «N nuevos desde tu ultima visita»: raya ambar en el hilo, y el contador de la pestana Chat en ambar. */
.chat .nuevos { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-1); font-family: var(--font-data); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--status-warn-fg); }
.chat .nuevos::before, .chat .nuevos::after { content: ''; flex: 1; height: 1px; background: var(--status-warn-fg); opacity: .5; }
.tab .n.is-nuevo { background: var(--status-warn-bg); color: var(--status-warn-fg); font-weight: 600; }
/* ---- una direccion pegada en el chat o en una nota se abre con un clic. */
.msg .t .enlace, .nota p .enlace, .mini .enlace { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* ==== v0.10.0 (2026-09-12): Roadmap · Calendario · Mensajes · Archivos · Reportes, y el titulo con icono (foto de referencia de Carlos) ==== */
/* ---- titulo de pantalla con su icono a la izquierda, en un cuadro tenue de marca (como el icono de equipo en la cabecera del proyecto). */
.titulo-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); flex: none; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.titulo-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---- rail: la insignia de Mensajes es informativa (azul), no alarma (rojo, la de vencidas). */
.mn-rail .mn-rail-hot.is-info { background: var(--status-info-bg); color: var(--status-info-fg); }
/* v0.13.0 (Carlos, 12-sep): el contador del rail deja la pildora por un cuadrado redondeado de 20 px con borde fino del mismo tono; solo cambia la forma, los colores siguen de minsa-ui. */
.mn-rail .mn-rail-hot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); font-size: .7rem; line-height: 1; }
/* ---- gantt: etiqueta fija a la izquierda + pista en %; la cabecera trae meses y el dia del lunes de cada semana. */
.gantt-caja { overflow-x: auto; min-width: 0; }
/* La tarjeta que contiene el gantt no puede tomar el ancho minimo de su contenido (a 390 desbordaba 176 px, medido). */
#p-roadmap .mn-card { min-width: 0; }
.gantt { --eti: 230px; display: grid; gap: 0; min-width: 640px; font-size: .82rem; }
.g-fila { display: grid; grid-template-columns: var(--eti) minmax(0, 1fr); align-items: stretch; border-top: 1px solid var(--border-hairline); }
.g-cab { display: grid; grid-template-columns: var(--eti) minmax(0, 1fr); align-items: stretch; position: sticky; top: 0; background: var(--surface-card); z-index: 1; }
.g-cab .g-eti { align-self: end; padding-bottom: var(--sp-1); }
.g-eje { position: relative; height: 40px; }
.g-meses { position: absolute; left: 0; right: 0; height: 20px; }
.g-semanas { position: absolute; left: 0; right: 0; height: 20px; top: 20px; }
.g-meses span, .g-semanas span { position: absolute; top: 0; height: 20px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 4px; box-sizing: border-box; border-left: 1px solid var(--border-default); }
.g-meses span { font-family: var(--font-display); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.g-semanas span { font-family: var(--font-data); font-size: .66rem; color: var(--text-faint); border-left-color: var(--border-hairline); }
.g-eti { min-width: 0; padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; display: flex; align-items: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--text-muted); }
.g-fila .g-eti { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 500; color: var(--text-body); }
.g-fila.is-grupo { background: var(--surface-sunken); }
.g-grupo { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--text-muted); }
.g-grupo .n { font-family: var(--font-data); font-weight: 500; color: var(--text-faint); }
.g-grupo .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); }
.g-grupo .punto.is-c { background: var(--brand-primary); } .g-grupo .punto.is-r { background: var(--status-info-solid); } .g-grupo .punto.is-h { background: var(--status-ok-solid); }   /* v0.11.0: por posicion de la cubeta */
.g-tarea, .g-proy { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; width: 100%; min-height: 36px; padding: 2px 4px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.g-tarea:hover, .g-proy:hover { background: var(--surface-hover); }
.g-tarea .t, .g-proy .t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g-proy .cuerpo { display: grid; min-width: 0; } .g-proy .m { font-size: .72rem; color: var(--text-faint); font-family: var(--font-data); }
.g-pista { position: relative; min-height: 36px; background: var(--bandas, none); }   /* v0.22.0: los meses alternan fondo (gradiente calculado del rango en gantt()) */
.g-sem { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border-hairline); }
.g-hoy { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--status-danger-solid); z-index: 1; }
/* v0.22.0 (iteracion 4): la raya de hoy lleva etiqueta en la cabecera (sobre la fila de semanas, fija al hacer scroll); cerca del borde derecho se lee hacia la izquierda */
.g-cab .g-hoy { top: 20px; z-index: 2; }
.g-cab .g-hoy b { position: absolute; top: 2px; left: 3px; font-family: var(--font-data); font-size: .62rem; font-weight: 600; line-height: 16px; padding: 0 5px; border-radius: 3px; background: linear-gradient(var(--status-danger-bg), var(--status-danger-bg)), var(--surface-card); color: var(--status-danger-fg); white-space: nowrap; }   /* fondo opaco: el token es translucido y en oscuro se leia el numero de la semana detras */
.g-cab .g-hoy.is-der b { left: auto; right: 3px; }
/* v0.22.0: el gantt con hitos (el global) es mas alto —56 px por fila— para que quepan los rombos sobre la barra y su titulo debajo */
.gantt.is-hitos .g-pista { min-height: 56px; }
.gantt.is-hitos .g-barra { top: 10px; justify-content: flex-end; }   /* el avance va al final de la barra: al principio lo taparian los rombos */
.gantt.is-hitos .g-txt.g-fuera, .gantt.is-hitos .g-sinfecha { top: 13px; }
.g-rombo { position: absolute; top: 14px; width: 14px; height: 14px; padding: 0; box-sizing: border-box; border: 2px solid var(--brand-primary); border-radius: 2px; background: var(--surface-card); transform: translateX(-50%) rotate(45deg); cursor: pointer; z-index: 3; }
.g-rombo:hover { transform: translateX(-50%) rotate(45deg) scale(1.25); }
.g-rombo::after { content: ""; position: absolute; inset: -11px; }   /* objetivo tactil de 36 px sin agrandar el rombo */
.g-rombo:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.g-rombo.is-hecha, .g-rombo-mini.is-hecha { background: var(--status-ok-solid); border-color: var(--status-ok-solid); }
.g-rombo.is-vencida, .g-rombo-mini.is-vencida { background: var(--status-danger-solid); border-color: var(--status-danger-solid); }
.g-rombo.is-pronto, .g-rombo-mini.is-pronto { background: var(--status-warn-solid); border-color: var(--status-warn-solid); }
.g-rombo.is-grupo { width: 16px; height: 16px; top: 13px; }
.g-rombo-txt { position: absolute; top: 37px; padding: 0 2px 0 8px; font-family: var(--font-data); font-size: .64rem; line-height: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 2; box-sizing: border-box; }
.g-rombo-txt.is-grupo { font-weight: 600; color: var(--text-strong); }
.g-fin { position: absolute; top: 6px; height: 31px; border-left: 2px solid var(--text-faint); z-index: 4; pointer-events: none; }   /* encima del rombo: un hito el dia del fin no la tapa; sin robarle el clic */
.g-fin b { position: absolute; top: 31px; right: 1px; font-family: var(--font-data); font-size: .64rem; line-height: 14px; color: var(--text-faint); white-space: nowrap; }
.g-leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; margin-top: var(--sp-3); font-size: .75rem; color: var(--text-muted); }
.g-leyenda > span { display: inline-flex; align-items: center; gap: 8px; }
.g-leyenda .fin { flex-basis: 100%; font-family: var(--font-data); font-size: .7rem; color: var(--text-faint); }
.g-rombo-mini { display: inline-block; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid var(--brand-primary); border-radius: 2px; background: var(--surface-card); transform: rotate(45deg); }
.g-barra { position: absolute; top: 7px; height: 22px; box-sizing: border-box; display: flex; align-items: center; padding: 0 6px; border: 0; border-radius: 4px; background: var(--status-idle-bg); color: var(--status-idle-fg); font: inherit; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; cursor: default; z-index: 2; min-width: 6px; }
button.g-barra { cursor: pointer; } button.g-barra:hover { filter: brightness(.95); } button.g-barra:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.g-barra .g-txt { position: relative; overflow: hidden; text-overflow: ellipsis; }
.g-barra .g-pct { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; opacity: .18; }
.g-barra.is-idle { background: var(--surface-sunken); border: 1px solid var(--border-default); color: var(--text-muted); }   /* revisor: en oscuro el gris se perdia sobre la tarjeta */
.g-barra.is-brand { background: color-mix(in srgb, var(--brand-primary) 22%, var(--surface-card)); color: var(--brand-primary); }
.g-barra.is-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.g-barra.is-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.g-barra.is-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.g-barra.is-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.g-barra.is-hito { background: none; padding-left: 14px; overflow: visible; color: var(--text-strong); }
.g-barra.is-hito::before { content: ""; position: absolute; left: -2px; top: 5px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--brand-primary); border-radius: 2px; }
.g-barra.is-hito.is-danger::before { background: var(--status-danger-solid); }
.g-txt.g-fuera { position: absolute; top: 10px; padding: 0 6px; font-size: .72rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; pointer-events: none; }
.g-sinfecha { position: absolute; left: 6px; top: 10px; font-size: .72rem; color: var(--text-faint); font-style: italic; }
.g-resumen { margin: 0; font-size: .8rem; color: var(--text-muted); }
#tab-roadmap { display: grid; gap: var(--sp-3); min-width: 0; }
/* v0.26.0: la linea de tiempo a pantalla completa. La tarjeta se fija a la ventana entera por encima del rail (z-pop),
   la cabecera del gantt sigue pegada arriba al hacer scroll, y el gantt crece a todo el ancho (su min-width solo manda
   cuando la caja es mas angosta). El body pierde el scroll mientras dure, para que la rueda no mueva la pagina de atras. */
#roadmapLinea.is-full { position: fixed; inset: 0; z-index: var(--z-pop); border-radius: 0; overflow: auto; padding: var(--sp-3) var(--sp-4); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--sp-2); }
#roadmapLinea.is-full .gantt-caja { overflow: auto; min-height: 0; }
#roadmapLinea.is-full .gantt { width: 100%; }
#roadmapLinea.is-full .g-leyenda { position: sticky; bottom: 0; background: var(--surface-card); padding-top: var(--sp-2); }
body.sin-scroll { overflow: hidden; }
/* ---- fines de frente proximos («Upcoming milestones»): fecha grande a la izquierda. */
.hitos { display: grid; }
.hito { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; width: 100%; padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--border-hairline); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-sm); }
.hito:first-child { border-top: 0; } .hito:hover { background: var(--surface-hover); }
.hito .fecha { display: grid; justify-items: center; line-height: 1; padding: 4px 0; border-radius: var(--r-sm); background: var(--surface-sunken); }
.hito .fecha small { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.hito .fecha b { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-strong); }
.hito.is-warn .fecha { background: var(--status-warn-bg); } .hito.is-warn .fecha b { color: var(--status-warn-fg); }
.hito.is-danger .fecha { background: var(--status-danger-bg); } .hito.is-danger .fecha b { color: var(--status-danger-fg); }
.hito .cuerpo { display: grid; min-width: 0; } .hito .t { font-weight: 600; color: var(--text-strong); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hito .m { font-size: .75rem; color: var(--text-muted); }
/* ---- calendario */
.cal-nav { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cal-titulo { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-strong); text-transform: capitalize; margin-left: var(--sp-1); }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); border-radius: var(--r-md); overflow: hidden; }
.cal-dow { background: var(--surface-sunken); padding: var(--sp-1) var(--sp-2); font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--text-faint); }
.cal-dia { background: var(--surface-card); min-height: 96px; padding: var(--sp-1); display: grid; align-content: start; gap: 2px; min-width: 0; cursor: pointer; }
.cal-dia:hover { background: var(--surface-hover); }
.cal-dia:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.cal-dia.is-fuera { background: var(--surface-page); } .cal-dia.is-fuera .num { color: var(--text-faint); }
.cal-dia .num { font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); justify-self: end; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
.cal-dia.is-hoy .num { background: var(--brand-primary); color: var(--text-on-brand); font-weight: 700; }
.cal-dia.is-elegido { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.cal-it { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 2px 6px; border: 0; border-left: 3px solid var(--status-idle-solid); border-radius: 3px; background: var(--status-idle-bg); color: var(--status-idle-fg); font: inherit; font-size: .7rem; font-weight: 600; text-align: left; cursor: pointer; }
.cal-it .t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-it.is-brand { background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface-card)); color: var(--brand-primary); border-left-color: var(--brand-primary); }
.cal-it.is-info { background: var(--status-info-bg); color: var(--status-info-fg); border-left-color: var(--status-info-solid); }
.cal-it.is-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); border-left-color: var(--status-ok-solid); text-decoration: line-through; }
.cal-it.is-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border-left-color: var(--status-danger-solid); }
.cal-it.is-hito { background: var(--surface-sunken); color: var(--text-strong); border-left-color: var(--brand-primary); }
.cal-it .av { width: 20px; height: 20px; font-size: .55rem; } .cal-it .eqi.is-sm { width: 18px; height: 18px; } .cal-it .eqi.is-sm svg { width: 11px; height: 11px; }
.cal-it .m { font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; padding-left: 6px; max-width: 45%; }
.cal-mas { border: 0; background: none; font: inherit; font-size: .68rem; color: var(--text-link); cursor: pointer; text-align: left; padding: 0 6px; }
.cal-detalle { display: grid; gap: var(--sp-1); } .cal-detalle h2 { margin-bottom: var(--sp-1); }
.cal-detalle .cal-it { font-size: .82rem; padding: 6px 8px; min-height: 36px; }
.cal-agenda { display: none; }
/* ---- mensajes: bandeja */
.bandeja { gap: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 0 var(--sp-3); }
.msg-proy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; width: 100%; padding: var(--sp-3) 0; border: 0; border-top: 1px solid var(--border-hairline); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.msg-proy:first-child { border-top: 0; } .msg-proy:hover { background: var(--surface-hover); }
.msg-proy .cuerpo { display: grid; gap: 2px; min-width: 0; }
.msg-proy .cab { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; min-width: 0; }
.msg-proy .t { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; color: var(--text-strong); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-proy .d { font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.msg-proy .m { font-size: .85rem; color: var(--text-body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-proy .m b { font-weight: 600; color: var(--text-muted); }
.msg-proy.is-nuevo .m, .msg-proy.is-nuevo .t { color: var(--text-strong); } .msg-proy.is-nuevo .m { font-weight: 500; }
.msg-proy.is-vacio .m { color: var(--text-faint); font-style: italic; }
.msg-proy .lado { display: inline-flex; gap: var(--sp-1); align-items: center; }
.msg-men { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; width: 100%; padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--border-hairline); background: none; font: inherit; font-size: .85rem; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-sm); }
.msg-men:first-child { border-top: 0; } .msg-men:hover { background: var(--surface-hover); }
.msg-men .cuerpo { display: grid; min-width: 0; } .msg-men .cab { display: flex; justify-content: space-between; gap: var(--sp-2); } .msg-men .q { font-weight: 600; color: var(--text-strong); } .msg-men .d { font-family: var(--font-data); font-size: .72rem; color: var(--text-muted); }
.msg-men .w { color: var(--text-faint); font-size: .75rem; }
/* ---- archivos */
.archivos-filtros { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.archivos-filtros .buscador { flex: 1 1 240px; }
.archivos-filtros > select { height: var(--control-h-sm); padding: 0 var(--sp-3); border: 1px solid var(--border-default); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-body); font: inherit; font-size: .85rem; }
.grupo-proy { display: inline-flex; align-items: center; gap: var(--sp-2); width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; padding: var(--sp-2) 0 0; border-radius: var(--r-sm); }
.grupo-proy:hover { color: var(--brand-primary); } .grupo-proy .n { font-family: var(--font-data); font-weight: 500; color: var(--text-faint); }
.doc .tarjeta-liga { border: 0; background: none; font: inherit; color: var(--text-link); cursor: pointer; text-align: left; padding: 0; }
/* ---- reportes */
.rep-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-4); }
.rep-global { display: grid; }
.rep-anillo { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.anillo .fondo { fill: none; stroke: var(--surface-sunken); stroke-width: 4; }
.anillo .seg { fill: none; stroke-width: 4; stroke-linecap: butt; }
.anillo .seg.is-h { stroke: var(--status-ok-solid); } .anillo .seg.is-r { stroke: var(--status-info-solid); } .anillo .seg.is-c { stroke: var(--brand-primary); } .anillo .seg.is-p { stroke: var(--border-default); }
.anillo .pct { font-family: var(--font-display); font-weight: 600; font-size: 8px; fill: var(--text-strong); }
.leyenda { display: grid; gap: var(--sp-1); font-size: .82rem; color: var(--text-body); }
.leyenda span { display: inline-flex; align-items: center; gap: var(--sp-2); } .leyenda b { font-family: var(--font-data); font-weight: 500; margin-left: auto; }
.leyenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-default); }
.leyenda .is-h i { background: var(--status-ok-solid); } .leyenda .is-r i { background: var(--status-info-solid); } .leyenda .is-c i { background: var(--brand-primary); }
.rep-lista { display: grid; }
.rep-fila { display: grid; grid-template-columns: minmax(160px, 52%) minmax(0, 1fr); gap: var(--sp-3); align-items: center; width: 100%; padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--border-hairline); background: none; font: inherit; color: inherit; text-align: left; }
.rep-fila:first-child { border-top: 0; } button.rep-fila { cursor: pointer; border-radius: var(--r-sm); } button.rep-fila:hover { background: var(--surface-hover); }
.rep-fila .eti { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--sp-2); align-items: center; min-width: 0; }
.rep-fila .eti .t { font-weight: 600; color: var(--text-strong); font-size: .85rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rep-fila .eti .m { grid-column: 2; font-size: .72rem; color: var(--text-faint); font-family: var(--font-data); }
.rep-barra { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: var(--sp-2); align-items: center; }
.rep-barra > b { font-size: .8rem; text-align: right; color: var(--text-strong); }
.segbar.alta { height: 18px; gap: 2px; } .segbar.alta i { display: flex; align-items: center; justify-content: center; min-width: 0; font-family: var(--font-data); font-size: .66rem; font-weight: 500; color: var(--text-on-brand); border-radius: 3px; }
.segbar.alta i.p { color: var(--text-muted); }
.hbar { display: flex; gap: 2px; height: 18px; }
.hbar i { display: flex; align-items: center; justify-content: center; border-radius: 3px; min-width: 0; font-family: var(--font-data); font-size: .66rem; font-weight: 600; }
.hbar i.abiertas { background: var(--brand-primary); } .hbar i.vencidas { background: var(--status-danger-solid); color: var(--text-on-brand); } .hbar i.act { background: var(--status-info-solid); }
.rep-cols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-1); align-items: end; height: 150px; }
.rep-cols .col-s { display: grid; grid-template-rows: auto 1fr auto; height: 100%; align-items: end; justify-items: center; min-width: 0; }
.rep-cols .col-s b { font-family: var(--font-data); font-size: .72rem; font-weight: 500; color: var(--text-strong); }
.rep-cols .col-s i { width: 70%; align-self: end; background: var(--status-ok-solid); border-radius: 4px 4px 0 0; min-height: 2px; }
.rep-cols .col-s i.cero { background: var(--border-hairline); }
.rep-cols .col-s small { font-family: var(--font-data); font-size: .6rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* ---- avance del proyecto: el anillo junto a la barra en la lateral */
.avance-anillo { display: flex; justify-content: center; margin-bottom: var(--sp-2); }
@media print { .cal-nav, #btnImprimirReportes, .archivos-filtros { display: none !important; } .gantt-caja { overflow: visible; } }
/* ---- celular */
@media (max-width: 720px) {
  .rail .rail-extra { display: none; }   /* Roadmap · Archivos · Reportes viven en el menu «···» de la barra movil */
  /* La insignia de la barra movil es absolute con right:25% (piel): sin position:relative en el boton se anclaba al rail entero y el «1» de Mis tareas caia sobre Mensajes (medido a 390 con 5 pestanas). */
  .rail nav button { position: relative; }
  .titulo-ico { width: 32px; height: 32px; } .titulo-ico svg { width: 18px; height: 18px; }
  .cal-rejilla, .cal-detalle { display: none !important; }
  .cal-agenda { display: grid; gap: var(--sp-2); }
  .cal-ag { display: grid; gap: 4px; padding: var(--sp-2) var(--sp-3); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--r-md); }
  .cal-ag h3 { margin: 0 0 2px; font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--text-muted); text-transform: capitalize; }
  .cal-ag.is-hoy { border-color: var(--brand-primary); } .cal-ag.is-hoy h3 { color: var(--brand-primary); }
  .cal-ag.is-pasado { opacity: .75; }
  .cal-ag .cal-it { font-size: .82rem; padding: 6px 8px; min-height: 40px; }
  .gantt { --eti: 150px; min-width: 520px; }
  .rep-rejilla { grid-template-columns: 1fr; }
  .rep-fila { grid-template-columns: 1fr; gap: var(--sp-1); }
  .msg-proy .t { font-size: .9rem; }
}

/* ==== v0.12.0 (2026-09-12): colores a elegir para cubetas y tarjetas; sin franja en la cabecera del dialogo; sin «← Proyectos» ni «N/M hechas» ==== */
/* La paleta: una clave por tono (COLORES en reglas.js). El tono es un SOLIDO; el fondo suave sale con color-mix sobre la
   superficie, asi que en oscuro se atenua solo. Se aplica por `data-tono="<clave>"` en el elemento. */
:root {
  --tono-azul: var(--brand); --tono-celeste: var(--sky-600); --tono-verde: var(--green-700); --tono-ambar: var(--amber-600);
  --tono-rojo: var(--red-600); --tono-morado: #7c3aed; --tono-rosa: #db2777; --tono-gris: var(--slate-400);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tono-azul: #7f9bff; --tono-morado: #a78bfa; --tono-rosa: #f472b6; } }
:root[data-theme="dark"] { --tono-azul: #7f9bff; --tono-morado: #a78bfa; --tono-rosa: #f472b6; }
[data-tono="azul"] { --tono: var(--tono-azul); } [data-tono="celeste"] { --tono: var(--tono-celeste); } [data-tono="verde"] { --tono: var(--tono-verde); }
[data-tono="ambar"] { --tono: var(--tono-ambar); } [data-tono="rojo"] { --tono: var(--tono-rojo); } [data-tono="morado"] { --tono: var(--tono-morado); }
[data-tono="rosa"] { --tono: var(--tono-rosa); } [data-tono="gris"] { --tono: var(--tono-gris); }
/* Donde se ve: el punto y el fondo de la columna, el punto del editor, el segmento de barra/anillo/leyenda, y la tarjeta. */
.col[data-tono] { background: color-mix(in srgb, var(--tono) 9%, var(--surface-sunken)); }
.col[data-tono] h3 .punto, .cubeta .punto[data-tono], .leyenda span[data-tono] i { background: var(--tono); }
.segbar i[data-tono] { background: var(--tono); }
.anillo .seg[data-tono] { stroke: var(--tono); }
.tarjeta[data-tono] { background: color-mix(in srgb, var(--tono) 13%, var(--surface-card)); border-color: color-mix(in srgb, var(--tono) 38%, var(--border-hairline)); }
.tarjeta[data-tono]:hover { border-color: color-mix(in srgb, var(--tono) 60%, var(--border-default)); }
.urgente .tarjeta[data-tono] { border: 0; background: transparent; }   /* la lista «Urgentes» de Inicio no lleva tinte (revisor 12-sep) */
/* v0.20.0: semaforo de fecha en el filete izquierdo — despues del tinte, que escribe border-color entero. */
.tarjeta.is-vencida, .tarjeta.is-vencida:hover { border-left-color: var(--status-danger-solid); }
.tarjeta.is-pronto, .tarjeta.is-pronto:hover { border-left-color: var(--status-warn-solid); }
.tarjeta.is-hecha, .tarjeta.is-hecha:hover { border-left-color: var(--status-ok-solid); }
/* Selector de color: una fila de circulos, el elegido con anillo; «sin color» es el primero (un circulo hueco). */
.tonos { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.tonos button { width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--tono, transparent); cursor: pointer; box-shadow: 0 0 0 1px var(--border-default); }
.tonos button[data-tono=""] { background: var(--surface-card); position: relative; }
.tonos button[data-tono=""]::after { content: ""; position: absolute; inset: 9px 2px auto 2px; height: 2px; background: var(--border-default); transform: rotate(-45deg); }
.tonos button[aria-checked="true"] { border-color: var(--surface-card); box-shadow: 0 0 0 2px var(--text-strong); }
.tonos button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cubeta .tonos { grid-column: 2 / -1; gap: 3px; } .cubeta .tonos button { width: 20px; height: 20px; }
.mn-field .tonos { min-height: var(--control-h); align-items: center; }
/* Estado «cerrado» en la cabecera del proyecto: un chip donde antes iba «N/M hechas · %». */
.proyecto-cab .estado:empty { display: none; }
@media (max-width: 720px) { .tonos button { width: 28px; height: 28px; } }

/* ---- v0.15.0: el mismo canal (auditoria como usuario, 2026-09-13) ---- */
/* ✓ visto bajo cada mensaje del chat: quienes lo vieron (texto data) y el boton en lo ajeno; encendido = tu visto. */
.msg .vistos { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: 2px; font-size: .72rem; color: var(--text-muted); }
.msg .vistos .q { font-family: var(--font-data); }
.visto-btn { font: inherit; font-size: .72rem; line-height: 1; min-height: 24px; padding: 0 8px; border: 1px solid var(--border-default); border-radius: var(--r-pill); background: transparent; color: var(--text-muted); cursor: pointer; }
.visto-btn.is-on { background: var(--status-ok-bg); color: var(--status-ok-fg); border-color: transparent; font-weight: 600; }
.visto-btn:hover, .visto-btn:focus-visible { color: var(--text-strong); border-color: var(--text-muted); }
@media (hover: none) { .visto-btn { min-height: 36px; min-width: 40px; padding: 0 12px; } }
/* ---- v0.21.0 (iteracion 3): Inicio «Hoy» — KPI con tendencia y sparkline, y la cola por urgencia
   (sustituye a #cardNuevo / #inicioNuevo / #inicioMenciones / #inicioVence, que se fueron con sus tarjetas). */
.kpis-hoy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-hoy .mn-kpi { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; grid-template-areas: "l l" "v s" "t t"; align-items: end; gap: 0 var(--sp-2); }
.kpis-hoy .mn-kpi-label { grid-area: l; }
.kpis-hoy .mn-kpi-val { grid-area: v; }
.kpis-hoy .mn-kpi-tend { grid-area: t; font-size: .72rem; color: var(--text-muted); margin-top: var(--sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpis-hoy .mn-kpi-tend b { font-family: var(--font-data); font-weight: 600; color: var(--text-body); }
.kpis-hoy .mn-kpi-tend.is-peor b { color: var(--status-danger-fg); }
.kpis-hoy .mn-kpi-tend.is-mejor b { color: var(--status-ok-fg); }
/* El sparkline hereda el color del filete (currentColor por estado); sin estado va gris. */
.kpis-hoy .spark { grid-area: s; width: 100%; height: 22px; display: block; color: var(--status-idle-solid); justify-self: end; }
.kpis-hoy .mn-kpi.is-info .spark { color: var(--status-info-solid); }
.kpis-hoy .mn-kpi.is-warn .spark { color: var(--status-warn-solid); }
.kpis-hoy .mn-kpi.is-danger .spark { color: var(--status-danger-solid); }
.kpis-hoy .mn-kpi.is-ok .spark { color: var(--status-ok-solid); }
.cola-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cola-cab h2 { margin: 0; }
.cola-cab h2 .n:not(:empty)::before { content: "· "; }
.cola-lista { display: grid; }
/* El encabezado de grupo: texto en mayusculas chicas, conteo mono; el color dice la urgencia. */
.hoy-g { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: 0 0 var(--sp-1); border-bottom: 1px solid var(--border-hairline); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--text-muted); }
.hoy-g:first-child { margin-top: 0; }
.hoy-g .n { font-family: var(--font-data); font-weight: 600; letter-spacing: 0; }
.hoy-g.is-danger { color: var(--status-danger-fg); } .hoy-g.is-warn { color: var(--status-warn-fg); } .hoy-g.is-info { color: var(--status-info-fg); }
button.hoy-g { width: 100%; min-height: 36px; background: none; border: 0; border-bottom: 1px solid var(--border-hairline); font: inherit; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; text-align: left; cursor: pointer; border-radius: 0; }
/* «+N más · ver en …»: cierra un grupo recortado a 6; boton de texto a la derecha, 36 px de alto (tactil). */
.hoy-mas { justify-self: end; min-height: 36px; padding: 0 var(--sp-2); border: 0; background: none; font: inherit; font-size: .75rem; font-weight: 600; color: var(--brand-primary); cursor: pointer; border-radius: var(--r-sm); }
.hoy-mas:hover, .hoy-mas:focus-visible { background: var(--surface-hover); }
button.hoy-g::after { content: "ver en su tablero →"; margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-faint); }
button.hoy-g:hover::after, button.hoy-g:focus-visible::after { color: var(--brand-primary); }
/* Un renglon: punto · cuerpo (titulo + subtitulo) · avatar · verbo. Boton entero, 40 px minimo (tactil). */
.hoy-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; width: 100%; min-height: 40px; padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--border-hairline); background: none; font: inherit; color: inherit; text-align: left; border-radius: var(--r-sm); }
.hoy-g + .hoy-r { border-top: 0; }
button.hoy-r { cursor: pointer; }
button.hoy-r:hover { background: var(--surface-hover); }
button.hoy-r:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.hoy-r .st { width: 8px; height: 8px; border-radius: 50%; background: var(--status-idle-solid); margin-left: 2px; }
.hoy-r .st.is-danger { background: var(--status-danger-solid); } .hoy-r .st.is-warn { background: var(--status-warn-solid); } .hoy-r .st.is-info { background: var(--status-info-solid); }
.hoy-r .cuerpo { display: grid; min-width: 0; gap: 1px; }
.hoy-r .t { font-size: .85rem; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.hoy-r .p { font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-r .av.is-nadie { background: var(--surface-hover); color: var(--text-faint); }
.cola-lista .vacio { color: var(--text-faint); font-size: .85rem; margin: 0; }
/* Fines de frente (lateral): chip de dias · titulo · fecha y avance, boton entero como los .it */
.fines .it { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.fines .it .mn-chip { font-family: var(--font-data); min-width: 3.6rem; justify-content: center; }
.fines .it .q { font-weight: 600; color: var(--text-strong); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  /* En celular los 3 KPI van en una fila sin sparkline (el ancho de 390 no da para la curva) y el titulo de la cola parte en 2 lineas. */
  .kpis-hoy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis-hoy .mn-kpi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "v" "t"; }
  .kpis-hoy .spark { display: none; }
  .hoy-r .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* Equipo: la tabla de 5 columnas se cortaba en «Abiertas» a 1366 (auditoria 13-sep): el dialogo crece y el correo parte. */
#dlgEquipo { width: min(96vw, 760px); }
.eq-tabla td, .eq-tabla th { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  /* El FAB «Nueva tarea» tapaba el ultimo mensaje y el redactor quedaba bajo la barra: en el chat no hay FAB y el hilo mide menos. */
  body.is-chat #btnNuevaTarea { display: none; }
  .chat .hilo { max-height: 40vh; }
}

/* ==== v0.24.0 (2026-09-13): la tarjeta a dos columnas (iteracion 6 del artifact ed5130eb) ==== */
/* El dialogo crece a 860 px: IZQUIERDA lo que se lee y se escribe (chips, descripcion, Mover a…, notas), DERECHA lo que
   se consulta (frente, documentos) sobre fondo hundido, y «Editar la tarjeta» cruza las dos abajo (su formulario no cabe
   en 280 px). El cuerpo pierde su padding y cada columna trae el suyo, para que el fondo de la derecha llegue al borde.
   Bajo 900 px (tableta y celular) se apila: primero la izquierda, luego la derecha, en el orden del DOM. */
#dlgTarea { width: min(860px, calc(100vw - var(--sp-5))); }
#dlgTarea .t-cuerpo { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
#dlgTarea .dlg-avisos { grid-column: 1 / -1; margin: var(--sp-3) var(--sp-4) 0; }
.t-main { padding: var(--sp-4); min-width: 0; }
.t-side { padding: var(--sp-4); min-width: 0; background: var(--surface-sunken); border-left: 1px solid var(--border-hairline); align-self: stretch; }
#dlgTarea .editar { grid-column: 1 / -1; margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--border-hairline); }
#dlgTarea .editar .forma { max-width: 36rem; }   /* a 860 px el campo de fecha a todo el ancho se veia como una barra; el formulario conserva el ancho de siempre */
/* Chips bajo el titulo: quien (con avatar) · cubeta · vence · prioridad. El chip que se puede cambiar es un boton sin
   caja que abre «Editar la tarjeta» en su campo; el foco lo dibuja el anillo de la casa. */
.t-chips { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.t-chips .mn-chip { font-size: .78rem; padding: 3px 10px; }
.t-chips .mn-chip .av { width: 16px; height: 16px; font-size: .5rem; margin-left: -4px; }
.t-chips .chip-btn { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; border-radius: var(--r-pill); display: inline-flex; align-items: center; min-height: var(--control-h-sm); }   /* el chip mide 25 px; el objetivo, 32 / 40 tactil (medido a 390: chip-btn 143x25 sin esto) */
.t-chips .chip-btn:hover .mn-chip { filter: brightness(.95); }
.t-chips .chip-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.t-desc { margin: 0 0 var(--sp-3); font-size: .9rem; color: var(--text-body); white-space: pre-line; overflow-wrap: anywhere; }
/* «Mover a…» en UNA fila: tantas columnas como cubetas quepan a 7 rem; con las 4 de siempre caben en la izquierda (≈540 px),
   con 6 parten en dos filas. El texto del boton puede partir («En revisión · actual») en vez de desbordar. */
#dlgTarea .mover { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sp-1); }
#dlgTarea .mover .mn-btn { white-space: normal; line-height: 1.2; padding-inline: var(--sp-2); min-height: var(--control-h-sm); height: auto; }
/* La columna derecha: rotulo, kv a una columna de rotulo estrecha, documentos en renglones que parten. */
.t-side .kv { grid-template-columns: 82px minmax(0, 1fr); font-size: .82rem; }
.t-side .kv span { overflow-wrap: anywhere; }
.t-side .kv .proy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }   /* en 280 px el titulo del frente parte en dos lineas y el icono del equipo caia solo en una tercera: el icono va en su columna, a la derecha */
.t-side .tdocs { margin-bottom: 0; }
.t-side .tdoc .mn-btn { margin-left: 0; }
.t-side .tdoc-acciones .mn-btn { padding-inline: var(--sp-2); }
.mn-label .n:not(:empty)::before { content: " · "; }
.mn-label .n { font-weight: 500; color: var(--text-muted); }
@media (max-width: 900px) {
  #dlgTarea .t-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .t-side { border-left: 0; border-top: 1px solid var(--border-hairline); align-self: auto; }
}