/* Este archivo tenía secciones duplicadas/superpuestas para los mismos
   selectores (ej. tres bloques distintos para .kcol-h/.tbl td, uno
   "base" y dos "pases de pulido" posteriores que se iban acumulando sin
   limpiar el anterior) -- 110 selectores en total, no solo esos dos.
   Causó al menos un bug real en producción (la clase "empty" de celda
   vacía chocaba con la ".empty" genérica de "sin proyectos todavía").
   Consolidados en un solo bloque por selector (último valor por
   propiedad gana, igual que ya pasaba antes de consolidar) y verificado
   que el estilo computado de cada elemento, en las 5 vistas, en claro y
   oscuro, y en angosto, queda IDÉNTICO antes y después (cero
   diferencias en más de 4000 comparaciones con Puppeteer). */
:root{
  /* Sin esto, los controles nativos del navegador (selector de fecha,
     selector de color, scrollbars) siguen la preferencia del SISTEMA, no el
     tema que elegiste a mano acá dentro -- si el sistema está en claro y acá
     elegiste oscuro, el calendario del <input type="date"> se abría blanco
     en medio de una app oscura. Los overrides de abajo fuerzan el esquema
     real cuando hay una elección explícita en vez de la del sistema. */
  color-scheme:light dark;
  --blue:#298ECE;--blue-d:#1C6EA8;--blue-l:#E8F3FB;--blue-g:#F2F8FD;
  --gray:#ADB1B6;--bg:#FFFFFF;--panel:#F8F9FA;--card:#FFFFFF;
  --ink:#000000;--ink2:#4A5257;--ink3:#8B959C;
  --line:#E6EAED;--line-s:#F0F3F5;
  --ok:#1F9D6B;--bad:#D1495B;--warn:#E0913A;
  --sh-s:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --sh-m:0 4px 10px rgba(16,24,40,.07),0 12px 24px rgba(16,24,40,.06);
  --sh-l:0 18px 40px rgba(16,24,40,.12),0 2px 8px rgba(16,24,40,.06);
  --ease:cubic-bezier(.22,.61,.36,1);--snap:cubic-bezier(.34,1.3,.64,1);
  --t-fast:150ms;--t-base:220ms;--t-slow:380ms;
  --rail:272px;--r-lg:20px;--r:14px;--r-sm:9px;--r-xs:6px;
  --font-title:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --canvas:#F1F3F7;--grid:#ECEFF3;--row-h:44px;--cell-hover:#F5F7FA;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --blue:#3EA0E6;--blue-d:#8ECBF1;--blue-l:rgba(62,160,230,.14);--blue-g:rgba(62,160,230,.07);
    --bg:#0B0B0B;--panel:#141414;--card:#1E1E1E;
    --ink:#F2F2F2;--ink2:#B8B8B8;--ink3:#8A8A8A;
    --line:#333333;--line-s:#262626;
    --sh-s:0 1px 2px rgba(0,0,0,.5);--sh-m:0 8px 22px rgba(0,0,0,.5);--sh-l:0 22px 48px rgba(0,0,0,.6);
  }
}

html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== Layout ===== */

.sidebar{width:var(--rail);min-width:var(--rail);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;z-index:40;position:relative;
  background:var(--card);border-right:1px solid var(--line);
  transition:transform var(--t-slow) var(--ease)}

.sb-icon{width:40px;height:40px;background:linear-gradient(135deg,#8ECBF1,#298ECE);border-radius:11px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:800;font-family:var(--font-title);font-size:19px;
  box-shadow:0 4px 14px rgba(41,142,206,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.sb-name{font-family:var(--font-title);font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.05}
.sb-sub{font-size:11px;color:var(--ink3);margin-top:3px;letter-spacing:.03em;text-transform:uppercase;font-weight:500}
.sb-group{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.sb-add{background:var(--blue-l);border:1px solid var(--line);color:var(--blue-d);border-radius:var(--r-xs);
  width:24px;height:24px;cursor:pointer;font-size:15px;line-height:1;
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--snap)}
.sb-add:hover{background:var(--blue)}.sb-add:hover{color:#fff}.sb-add:active{transform:scale(.92)}

.nav-btn:hover{color:var(--ink);background:var(--blue-g);transform:translateX(2px)}
.nav-btn.active{color:var(--blue-d);border-left-color:var(--blue);background:var(--blue-l);font-weight:600}

.nav-btn .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#8ECBF1,#298ECE);object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;border:2px solid var(--card);
  box-shadow:0 2px 8px rgba(41,142,206,.25)}
.sb-user{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-role{font-size:11px;color:var(--ink3)}
.scrim{display:none}

.btn.menu-btn{display:none}
.tb-title{flex:1;min-width:0}

.tb-actions{display:flex;align-items:center;gap:8px}
.ro-badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--blue-l);color:var(--blue-d);white-space:nowrap}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--r-sm);font-size:12.5px;font-weight:500;cursor:pointer;
  border:none;white-space:nowrap;
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-fast) var(--snap)}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#4ea8e0,#1C6EA8);color:#fff;font-weight:600;box-shadow:0 3px 12px rgba(41,142,206,.32)}
.btn-primary:hover{box-shadow:0 6px 18px rgba(41,142,206,.45)}
.btn-outline{background:var(--card);color:var(--ink2);border:1.5px solid var(--line);box-shadow:var(--sh-s)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue-d)}
.btn-danger{background:rgba(209,73,91,.1);color:var(--bad);border:1px solid rgba(209,73,91,.22)}
.btn-danger:hover{background:rgba(209,73,91,.18)}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;font-size:15px}
.btn-sm{padding:6px 11px;font-size:12px}

/* ===== Toolbar (views + filters) ===== */

.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{border:none;background:none;padding:6px 13px;border-radius:var(--r-xs);cursor:pointer;font-size:12.5px;font-weight:500;color:var(--ink2);
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.seg button:hover{color:var(--blue-d)}
.seg button.on{background:var(--card);color:var(--blue-d);font-weight:600;box-shadow:var(--sh-s)}
.search{flex:1;min-width:160px;max-width:300px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;background:var(--card);outline:none;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.search:focus,.fsel:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}

.spacer{flex:1}

/* ===== Project header ===== */

.phead-main{flex:1;min-width:240px}
.phead-desc{color:var(--ink2);font-size:13px;line-height:1.6;max-width:70ch}

.stackbar i{display:block;height:100%;transition:width var(--t-slow) var(--ease)}

/* ===== Groups / table ===== */

.group-head button{background:none;border:none;cursor:pointer;color:var(--gc);font-size:12px;width:22px;height:22px;border-radius:var(--r-xs);
  transition:transform var(--t-base) var(--ease),background-color var(--t-fast) var(--ease)}
.group-head button:hover{background:var(--line-s)}
.group.closed .group-head button{transform:rotate(-90deg)}
.group-head h3{font-family:var(--font-title);font-size:16px;font-weight:700;color:var(--gc);letter-spacing:-.01em}

.group.closed .tbl-wrap{display:none}

.tbl tbody tr{transition:background-color var(--t-fast) var(--ease)}
.tbl tbody tr:hover{background:var(--blue-g)}

.cell-in:focus{border-color:var(--blue);background:var(--card)}
.cell-in:disabled{color:var(--ink);opacity:1}

.cell-in[type=date]{width:100%;color:var(--ink2)}
.cell-in.over{color:var(--bad);font-weight:600}
.cell-in.soon{color:var(--warn);font-weight:600}

.open-btn .n{color:var(--blue-d);font-weight:600}
tr:hover .open-btn,.open-btn:focus-visible,.open-btn.has{opacity:1}

.add-in:focus{border-color:var(--blue);border-style:solid;background:var(--card);color:var(--ink)}

.pill:focus-visible{box-shadow:0 0 0 3px var(--blue-l)}
.pill:disabled{cursor:default;background-image:none;padding-right:12px;text-align:center}
.pill option{background:var(--card);color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600;white-space:nowrap;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 72%,var(--ink))}

.prog .bar i.full{background:var(--ok)}

/* ===== Kanban ===== */

.kcol.drop{border-color:var(--gc);background:color-mix(in srgb,var(--gc) 7%,var(--panel))}

.kcard:hover{box-shadow:var(--sh-m);border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.kcard.dragging{opacity:.5;transform:scale(.97)}

/* Tarjeta fantasma que sigue al dedo durante el arrastre táctil (ver touchDrag en app.js) */
.drag-ghost{position:fixed;top:0;left:0;z-index:999;pointer-events:none;opacity:.92;box-shadow:var(--sh-m);transform:rotate(-2deg);margin:0}

.kmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--ink3)}
.kmeta .over{color:var(--bad);font-weight:600}.kmeta .soon{color:var(--warn);font-weight:600}

/* ===== Timeline ===== */
.tl-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.tl{border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-s);overflow-x:auto}
.tl-inner{min-width:860px;position:relative}
.tl-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line-s);min-height:42px}
.tl-row:last-child{border-bottom:none}
.tl-row.alt{background:color-mix(in srgb, var(--panel) 55%, var(--card))}
.tl-row.alt .tl-label-wrap{background:color-mix(in srgb, var(--panel) 55%, var(--card))}
.tl-row:not(.head):hover{background:var(--blue-g)}
.tl-row:not(.head):hover .tl-label-wrap{background:var(--blue-g)}
.tl-row.head{background:var(--panel);border-bottom:1px solid var(--line);min-height:32px;font-size:10.5px;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.tl-row.tl-months{min-height:26px}
/* Columna de tareas "congelada" (sticky) con una sombra sutil en vez de solo un
   borde, para que se note que el resto de la fila sigue scrolleando debajo. */
.tl-label-wrap{flex:0 0 240px;width:240px;position:sticky;left:0;z-index:3;background:var(--card);
  display:flex;align-items:center;gap:2px;padding:0 6px 0 10px;border-right:1px solid var(--line);
  box-shadow:2px 0 6px rgba(16,24,40,.05);overflow:hidden;transition:background-color var(--t-fast) var(--ease)}
.tl-row.head .tl-label-wrap{background:var(--panel)}
.tl-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;cursor:pointer;flex:1;min-width:0}
.tl-row.head .tl-label{cursor:default;text-transform:uppercase;letter-spacing:.05em}
.tl-label:hover{color:var(--blue-d)}
.tl-label-wrap .avs{flex:0 0 auto;margin-left:2px}
.tl-label-wrap .av{width:18px;height:18px;font-size:8px;border:none}
.tl-label-wrap .avs .av+.av{margin-left:-6px}
.tl-depbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;border:none;background:none;color:var(--ink3);font-size:10.5px;
  cursor:pointer;opacity:0;padding:3px 6px;border-radius:var(--r-xs);transition:opacity var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.tl-depbtn svg{width:11px;height:11px}
.tl-row:hover .tl-depbtn{opacity:1}
.tl-depbtn:hover{color:var(--blue-d);background:var(--blue-g)}
.pop-ic{display:inline-flex;color:var(--ink3);flex-shrink:0}
.pop-ic svg{width:14px;height:14px}
.pop-opt.on .pop-ic{color:var(--blue-d)}
.tl-track{position:relative;flex:0 0 auto;min-height:42px}
.tl-month{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);border-left:1px solid var(--line);overflow:hidden;white-space:nowrap}
.tl-today-flag{position:absolute;top:1px;transform:translateX(-50%);background:var(--bad);color:#fff;font-size:9.5px;font-weight:700;
  padding:1px 6px;border-radius:0 0 5px 5px;letter-spacing:.03em;text-transform:uppercase;pointer-events:none;z-index:2}
.tl-weekend{position:absolute;top:0;bottom:0;background:color-mix(in srgb, var(--ink3) 7%, transparent);pointer-events:none}
.tl-bar{position:absolute;top:9px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--c) 22%,var(--card));border:1.5px solid var(--c);
  overflow:visible;cursor:pointer;box-shadow:0 1px 3px rgba(16,24,40,.1);transition:box-shadow var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.tl-bar.rw{cursor:grab}
.tl-bar.rw:active{cursor:grabbing}
.tl-bar:hover{box-shadow:var(--sh-m);transform:translateY(-1px)}
.tl-bar i{position:absolute;inset:0 auto 0 0;background:var(--c);opacity:.7;border-radius:5.5px 0 0 5.5px;pointer-events:none}
/* Mientras se arrastra (mover o estirar) la barra se resalta con un anillo y queda por
   encima de las demás -- antes no había ninguna señal de que algo se estaba agarrando. */
.tl-bar.tl-dragging{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--c),var(--sh-m);z-index:5;transition:none}
.tl-bar.tl-milestone{top:0;bottom:0;height:auto;background:none;border:none;box-shadow:none}
.tl-bar.tl-milestone.tl-dragging{box-shadow:none}
.tl-bar.tl-milestone::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;background:var(--c);
  border:1.5px solid color-mix(in srgb, var(--c) 55%, #000);transform:translate(-50%,-50%) rotate(45deg);border-radius:3px;
  box-shadow:0 1px 2px rgba(16,24,40,.12);transition:transform var(--t-fast) var(--snap)}
.tl-bar.tl-milestone:hover::after{transform:translate(-50%,-50%) rotate(45deg) scale(1.15)}
.tl-h{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize}
.tl-h-l{left:-4px}
.tl-h-r{right:-4px}
/* Asa con una marca visible en forma de agarradera -- antes era un área invisible: se
   podía estirar la barra si por casualidad caías en esos 8px, pero nada mostraba dónde
   agarrar ni que ahí el arrastre cambia de "mover" a "cambiar duración". Aparece al
   pasar el mouse sobre la barra (no solo sobre el asa) para que se note antes de agarrar. */
.tl-bar:not(.tl-milestone) .tl-h::before{content:"";position:absolute;top:50%;left:50%;width:4px;height:14px;border-radius:2px;
  background:var(--c);transform:translate(-50%,-50%);opacity:0;transition:opacity var(--t-fast) var(--ease)}
.tl-bar.rw:hover .tl-h::before,.tl-bar.rw.tl-dragging .tl-h::before{opacity:.9}
.tl-bar.rw:hover .tl-h,.tl-bar.rw.tl-dragging .tl-h{background:color-mix(in srgb, var(--c) 14%, transparent);border-radius:4px}
/* El hito (rombo) es tan angosto -- su caja entera mide un solo día de ancho, 13px o
   menos según el zoom -- que las asas de 8px de antes casi se pisaban entre sí y con
   la zona de "mover" del medio: acertar el borde sin mover la fecha era casi un tiro
   de precisión. Ahora las asas del hito son más anchas Y se corren bien afuera del
   rombo (no pegadas a su borde), dejando una zona de "mover" clara en el centro y dos
   zonas de "estirar" grandes a los costados, cada una con su propio puntito agarrable
   que ya se ve SIN pasar el mouse primero -- si había que descubrirlo con el mouse
   exactamente encima, era el mismo problema de siempre. */
.tl-bar.tl-milestone .tl-h{width:18px}
.tl-bar.tl-milestone .tl-h-l{left:-20px}
.tl-bar.tl-milestone .tl-h-r{right:-20px}
.tl-bar.tl-milestone .tl-h::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--card);border:2px solid var(--c);transform:translate(-50%,-50%);opacity:.55;
  box-shadow:0 1px 2px rgba(16,24,40,.15);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.tl-bar.tl-milestone:hover .tl-h::before,.tl-bar.tl-milestone.tl-dragging .tl-h::before{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
/* En pantallas táctiles el asa de 8px es muy angosta para el dedo: se agranda
   solo ahí (no cambia nada en escritorio con mouse). Para el hito ya son grandes
   en escritorio, pero en táctil crecen todavía más, igual que las normales. */
@media (pointer:coarse){
  .tl-h{width:18px}.tl-h-l{left:-9px}.tl-h-r{right:-9px}
  .tl-bar.tl-milestone .tl-h{width:26px}.tl-bar.tl-milestone .tl-h-l{left:-28px}.tl-bar.tl-milestone .tl-h-r{right:-28px}
}
/* Burbuja que sigue al cursor/dedo durante el arrastre con la fecha que va a quedar. */
#tlTip{position:fixed;z-index:200;background:#1F2933;color:#fff;font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:6px;pointer-events:none;box-shadow:0 2px 8px rgba(16,24,40,.3);white-space:nowrap}
.tl-tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--line-s);pointer-events:none}
.tl-tick.big{border-left:1px solid var(--line)}
.tl-tick span{position:absolute;top:9px;left:5px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;color:var(--ink3)}
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);opacity:.75;pointer-events:none;z-index:2}
.tl-deps{position:absolute;top:0;left:0;pointer-events:none;z-index:1;overflow:visible}
.tl-note{font-size:12px;color:var(--ink3);margin-top:10px}

/* ===== Overview ===== */

.kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}.kpi:nth-child(4){animation-delay:.15s}
/* Barra de acento en el borde izquierdo (no arriba) con revelado animado y
   fondo con un tinte sutil del mismo color -- mismo tratamiento que ya usan
   las tarjetas KPI de reporte-cartera, en vez del borde superior plano que
   tenía esta tarjeta antes. */
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--blue));
  transform:scaleY(0);transform-origin:top;animation:kpibar .5s var(--ease) .2s forwards}
@keyframes kpibar{to{transform:scaleY(1)}}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
.kpi-value{font-family:var(--font-title);font-size:38px;font-weight:800;line-height:1;margin-bottom:6px;letter-spacing:-.04em}
.kpi-label{font-size:12px;font-weight:600;color:var(--ink2)}
.kpi-sub{font-size:11.5px;color:var(--ink3);margin-top:2px}
.sec-title{font-family:var(--font-title);font-size:17px;font-weight:700;letter-spacing:-.01em;margin:4px 0 12px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:14px}

/* ===== Paginación (listas largas: proyectos, entregas, detenidas) =====
   Mismo componente que reporte-cartera (.pag), para no tener listas sin
   fin -- solo cambian los tokens de color, que ya son los mismos acá. */
.pag{display:flex;gap:7px;align-items:center;justify-content:flex-end;margin:14px 0 30px;flex-wrap:wrap}
.pag button{padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-size:12.5px;color:var(--ink2);cursor:pointer;transition:all .15s var(--ease)}
.pag button:hover:not(:disabled){border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.pag button:disabled{opacity:.35;cursor:default}
.pag button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.pag .info{font-size:12px;color:var(--ink3);margin-right:auto}

.pcard::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--pc)}

.pcard h3{font-family:var(--font-title);font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}

.pcard .big,.area-head .big,.sub-card .big{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.pcard .big b,.area-head .big b,.sub-card .big b{font-family:var(--font-title);font-size:30px;font-weight:800;letter-spacing:-.04em}
.big b.novalue,.pstat b.novalue,.ps b.novalue{font-size:15px;font-weight:600;color:var(--ink3);letter-spacing:0}
.pcard .big span,.area-head .big span,.sub-card .big span{font-size:12px;color:var(--ink3)}
.pcard .flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-s);overflow:hidden;margin-bottom:24px}
.list-tbl{width:100%;border-collapse:collapse;min-width:620px}
.list-tbl th{font-size:11px;font-weight:600;color:var(--ink3);padding:10px 16px;text-align:left;background:var(--panel);border-bottom:1px solid var(--line)}
.list-tbl td{padding:11px 16px;border-bottom:1px solid var(--line-s);font-size:12.5px}
.list-tbl tr:last-child td{border-bottom:none}
.list-tbl tbody tr{cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.list-tbl tbody tr:hover{background:var(--blue-g)}
.pdot{display:inline-block;width:8px;height:8px;border-radius:3px;background:var(--pc);margin-right:7px;vertical-align:middle}
.muted{color:var(--ink3)}
.over-t{color:var(--bad);font-weight:600}.soon-t{color:var(--warn);font-weight:600}

/* ===== Empty ===== */
.empty{max-width:460px;margin:9vh auto;text-align:center}
.empty h2{font-family:var(--font-title);font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.empty p{color:var(--ink2);line-height:1.65;margin-bottom:20px}
.empty-sm{padding:28px;text-align:center;color:var(--ink3);font-size:12.5px}

/* ===== Modal / Drawer ===== */
.scrim-m{position:fixed;inset:0;background:rgba(13,17,23,.42);z-index:90;animation:fadeIn var(--t-base) var(--ease)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,94vw);max-height:88vh;overflow-y:auto;z-index:100;padding:24px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-l);animation:modalIn var(--t-slow) var(--ease)}
.modal h2{font-family:var(--font-title);font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.drawer{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);width:min(470px,calc(100vw - 24px));z-index:100;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-l);animation:drawerIn var(--t-slow) var(--ease)}
.dr-head{display:flex;align-items:flex-start;gap:10px;padding:18px 18px 12px;border-bottom:1px solid var(--line)}
.dr-head textarea{flex:1;font-family:var(--font-title);font-size:19px;font-weight:700;letter-spacing:-.02em;border:1.5px solid transparent;background:transparent;border-radius:var(--r-sm);
  padding:4px 6px;resize:none;outline:none;line-height:1.3;transition:border-color var(--t-base) var(--ease)}
.dr-head textarea:focus{border-color:var(--blue);background:var(--card)}
.dr-body{flex:1;overflow-y:auto;padding:16px 18px 20px}
.field{margin-bottom:14px}
.field label{font-size:11.5px;font-weight:600;color:var(--ink2);display:block;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;color:var(--ink);outline:none;background:var(--card);
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.field textarea{resize:vertical;min-height:80px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.field input[type=range]{padding:0;border:none;box-shadow:none;accent-color:var(--blue)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;border-radius:var(--r-xs);border:2px solid transparent;cursor:pointer;background:var(--sw);
  transition:transform var(--t-fast) var(--snap),border-color var(--t-fast) var(--ease)}
.swatches button.on{border-color:var(--ink);transform:scale(1.08)}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.actions .left{margin-right:auto}
.upd{border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px;transition:border-color var(--t-fast) var(--ease)}
.upd:hover{border-color:var(--line-s);background:var(--panel)}
.upd-h{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink3);margin-bottom:4px}
.upd-h img{width:20px;height:20px;border-radius:50%}
.upd-h b{color:var(--ink2);font-weight:600}
.upd p{font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.upd p .mention{color:var(--blue-d);font-weight:600}
.chip-x.edit:hover{color:var(--blue-d)}
/* Editar/eliminar solo aparecen al pasar el mouse o enfocar con teclado -- antes
   quedaban siempre visibles en cada comentario, incluso los ajenos (solo el de
   eliminar, para quien modera), ensuciando una lista que se supone se lee como
   conversación. */
.upd-h .chip-x{opacity:0;transition:opacity var(--t-fast) var(--ease)}
.upd:hover .chip-x,.upd:focus-within .chip-x{opacity:1}
.meta-line{font-size:11.5px;color:var(--ink3);margin-top:12px}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);z-index:200;padding:10px 18px;border-radius:999px;font-size:12.5px;font-weight:500;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-m);animation:fadeUp var(--t-base) var(--ease)}
.toast.err{color:var(--bad)}

.skel{height:44px;border-radius:var(--r-sm);margin-bottom:10px;background:linear-gradient(90deg,var(--line-s),var(--panel),var(--line-s));background-size:200% 100%;animation:shimmer 1.2s linear infinite}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes kpiIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes drawerIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== Sidebar footer actions ===== */
.sb-foot-actions{display:flex;gap:6px;margin-left:auto}
.sb-foot-actions button{background:var(--line-s);border:1px solid var(--line);color:var(--ink2);border-radius:var(--r-xs);
  height:28px;padding:0 9px;font-size:11.5px;cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--snap)}
.sb-foot-actions button:hover{background:var(--blue-l);color:var(--blue-d)}
.sb-foot-actions button:active{transform:scale(.95)}

/* ===== Users ===== */
.roles-help{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.role-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-s)}
.role-card b{display:block;font-family:var(--font-title);font-size:15px;margin-bottom:4px}
.role-card p{font-size:12px;color:var(--ink2);line-height:1.55}
.list-tbl select{border:1.5px solid var(--line);border-radius:var(--r-xs);padding:5px 8px;background:var(--card);outline:none}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.check input{width:16px;height:16px;accent-color:var(--blue)}
.check-list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;background:var(--panel)}
.field .invite-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:var(--r-xs);cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.invite-row:hover{background:var(--blue-g)}
.invite-row input{flex-shrink:0}
.invite-row .av{width:24px;height:24px;font-size:9.5px;border:none;flex-shrink:0}
.invite-row span:not(.av){font-size:12.5px;color:var(--ink)}
.invite-row .muted{font-size:11px}
.form-err{background:rgba(209,73,91,.1);color:var(--bad);border:1px solid rgba(209,73,91,.25);border-radius:var(--r-sm);padding:10px 14px;font-size:12.5px;margin-bottom:14px}
.hint{font-size:11.5px;color:var(--ink3);margin-top:5px}

/* ===== Login ===== */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0b3f62 0%,#0f587f 45%,#1C6EA8 100%)}
.login-wrap::before,.login-wrap::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
.login-wrap::before{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(142,203,241,.45),transparent 70%)}
.login-wrap::after{width:420px;height:420px;bottom:-160px;left:-100px;background:radial-gradient(circle,rgba(41,142,206,.5),transparent 70%)}
.login-card{position:relative;z-index:1;width:min(400px,100%);padding:32px 30px 28px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-l);animation:fadeUp .4s var(--ease) both}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.sso-divider{display:flex;align-items:center;gap:10px;margin:16px 0 10px;color:var(--ink2);font-size:11.5px}
.sso-divider::before,.sso-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.login-card h1{font-family:var(--font-title);font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px}
.login-card .lead{font-size:13px;color:var(--ink2);margin-bottom:20px;line-height:1.55}
.login-card .btn-primary{width:100%;justify-content:center;padding:11px 16px;font-size:14px}

/* ===== Vista pública de un proyecto (enlace temporal, sin sesión) =====
   Antes era una tarjeta blanca plana sobre fondo liso -- se veía genérica y
   vacía, sin nada de la identidad que sí tiene el resto de la app (color por
   proyecto, anillo de avance, avatares). Mismo tratamiento que .kpi/.area-block:
   fondo con degradado tintado del color del proyecto + animación de entrada. */
.pub-wrap{min-height:100%;display:flex;justify-content:center;align-items:flex-start;padding:48px 20px;
  background:radial-gradient(ellipse 1200px 600px at 50% -10%,var(--blue-g),var(--bg) 60%)}
.pub-card{width:min(760px,100%);background:linear-gradient(160deg,var(--card) 0%,color-mix(in srgb,var(--pc,var(--blue)) 5%,var(--card)) 100%);
  border:1px solid color-mix(in srgb,var(--pc,var(--blue)) 18%,var(--line));border-radius:var(--r-lg);box-shadow:var(--sh-l);
  padding:34px 38px 32px;position:relative;overflow:hidden;animation:fadeUp .4s var(--ease) both}
.pub-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--pc,var(--blue))}
.pub-empty{text-align:center;padding:48px 36px}
.pub-brand{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink3);font-weight:600;margin-bottom:24px}
.pub-brand .sb-icon{width:26px;height:26px;border-radius:7px;font-size:13px}
.pub-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.pub-head h1{font-family:var(--font-title);font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.pub-head .lead{font-size:13.5px;color:var(--ink2);margin-bottom:4px;line-height:1.55;max-width:50ch}
.pub-ring{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pub-ring b{font-family:var(--font-title);font-size:19px;font-weight:800;letter-spacing:-.03em;display:block;line-height:1.1}
.pub-ring span{font-size:10.5px;color:var(--ink3)}
.pub-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pub-stats{display:flex;gap:10px;margin:22px 0 4px}
.pub-stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.pub-stat b{font-family:var(--font-title);font-size:22px;font-weight:800;letter-spacing:-.02em;display:block}
.pub-stat b small{font-size:13px;font-weight:600;color:var(--ink3)}
.pub-stat span{font-size:11px;color:var(--ink3);font-weight:600}
.pub-stat.bad b{color:var(--bad)}
.pub-group{margin-top:24px}
.pub-group h2{font-family:var(--font-title);font-size:14.5px;font-weight:700;letter-spacing:-.005em;margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--line-s);display:flex;align-items:center}
.pub-task{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 12px;margin-bottom:4px;border-radius:10px;
  border-left:3px solid var(--sc,var(--line));background:var(--panel);transition:background-color var(--t-fast) var(--ease)}
.pub-task:hover{background:var(--blue-g)}
.pub-task-over{background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
.pub-task-title{font-size:13.5px;font-weight:500;flex:1;min-width:140px}
.pub-task-meta{font-size:11.5px;white-space:nowrap}
.pub-task-over .pub-task-meta{color:var(--bad);font-weight:600}
.pub-avs .av{width:22px;height:22px;font-size:9.5px}
.pub-sub{padding-left:28px;position:relative;background:transparent;border-left-color:var(--line)}
.pub-sub::before{content:'↳';position:absolute;left:10px;color:var(--ink3);font-size:12px}
.pub-foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line-s);font-size:12px;text-align:center}

/* ===== Barra lateral: contador, estado del proyecto, cerrados ===== */

.sb-toggle:hover{color:#fff}

/* ===== Cabecera del proyecto ===== */
.phead-top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.phead-top .phead-desc{flex:1;min-width:220px;padding-top:4px}

/* ===== Tabla: orden, subtareas, responsables, etiquetas ===== */

.th-sort:hover,.th-sort.on{color:var(--blue-d)}
.sort-ic{display:inline-flex;vertical-align:-1px;margin-left:3px;font-size:10px}
.exp{flex-shrink:0;width:20px;height:20px;border:none;background:none;border-radius:var(--r-xs);cursor:pointer;color:var(--ink3);font-size:11px;
  opacity:.35;transition:opacity var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.exp.has,tr:hover .exp,.exp[aria-expanded="true"]{opacity:1}
.exp:hover{background:var(--line-s);color:var(--blue-d)}
.exp-sp{width:20px;flex-shrink:0}
.sub-ind{flex-shrink:0;width:20px;text-align:right;color:var(--ink3);font-size:12px}

.tbl tr.sub .cell-in.title{font-weight:400}
.tbl tr.sub.add td{height:36px}

.cell-btn:disabled{cursor:default}

tr:hover .pick-empty,.cell-btn:focus-visible .pick-empty{opacity:1}
.avs{display:inline-flex;align-items:center}

.avs .av+.av{margin-left:-8px}
.av.more{background:var(--line);color:var(--ink2)}

.tag.sm{padding:2px 8px;font-size:10.5px}

/* ===== Grupos ===== */
.gname{font-family:var(--font-title);font-size:16px;font-weight:700;color:var(--gc);letter-spacing:-.01em;border:1.5px solid transparent;background:transparent;
  border-radius:var(--r-xs);padding:2px 6px;outline:none;min-width:60px;max-width:420px;field-sizing:content}
.gname:hover{border-color:var(--line)}
.gname:focus{border-color:var(--blue);background:var(--card)}

.gmenu:hover{border-color:var(--line);color:var(--blue-d);background:var(--card)}

.add-group:hover{border-color:var(--blue);color:var(--blue-d)}

/* ===== Selector (responsables / etiquetas) ===== */
.pop{position:fixed;z-index:150;width:270px;max-height:360px;display:flex;flex-direction:column;padding:8px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-l);animation:fadeIn var(--t-fast) var(--ease)}
.pop.pop-wide{width:300px}
.pop-q{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;outline:none;background:var(--card);margin-bottom:6px}
.pop-q:focus{border-color:var(--blue)}
/* Explica en español llano, sin jerga de Gantt, qué significa agregar la dependencia
   -- antes el único texto visible eran los códigos FS/SS/FF/SF del selector de abajo. */
.pop-depintro{font-size:12px;line-height:1.4;color:var(--ink2);margin:2px 2px 8px}
.pop-depseg{width:100%;margin-bottom:6px}
.pop-depseg button{flex:1;padding:5px 2px;font-size:10.5px}
.pop-depexplain{font-size:11.5px;line-height:1.4;color:var(--ink3);margin:0 2px 8px}
.pop-list{overflow-y:auto;flex:1;min-height:0}
.pop-opt{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;border-radius:var(--r-xs);padding:6px 8px;cursor:pointer;text-align:left}
.pop-opt:hover{background:var(--blue-g)}
.pop-opt.on{background:var(--blue-l)}
.pop-opt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-opt i{font-style:normal;color:var(--blue-d);font-weight:700;width:14px}
.pop-deptype{font-size:9.5px;font-weight:700;color:var(--ink3);background:var(--panel);border-radius:5px;padding:2px 5px;letter-spacing:.02em;flex-shrink:0}
.pop-opt .av{flex:0 0 24px;width:24px;height:24px;font-size:10px;border:none}
.tdot{width:12px;height:12px;border-radius:4px;background:var(--c);flex-shrink:0}
.pop-empty{padding:12px 8px;color:var(--ink3);font-size:12px}
.pop-new,.pop-clear{border:none;background:none;text-align:left;padding:8px;border-radius:var(--r-xs);cursor:pointer;font-weight:600;color:var(--blue-d);border-top:1px solid var(--line-s);margin-top:4px}
.pop-clear{color:var(--ink3);font-weight:500}
.pop-new:hover,.pop-clear:hover{background:var(--blue-g)}

/* ===== Notificaciones ===== */
#notifBtn{position:relative}
#notifBtn svg{width:16px;height:16px}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;
  border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;
  box-shadow:0 0 0 2px var(--card)}
.notif-panel{width:340px;max-height:440px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.notif-panel::before{content:'';height:3px;flex-shrink:0;background:linear-gradient(90deg,var(--blue),var(--blue-d) 60%,#0f2438)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-s);flex-shrink:0}
.notif-head b{font-size:13px}
.notif-head .linkish{font-size:11.5px}
.notif-list{overflow-y:auto;display:flex;flex-direction:column}
.notif-item{display:flex;align-items:flex-start;gap:8px;text-align:left;padding:10px 14px;border:none;background:none;
  border-bottom:1px solid var(--line-s);cursor:pointer;width:100%;transition:background-color var(--t-fast) var(--ease)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--panel)}
.notif-item.unread{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.notif-dot{width:7px;height:7px;border-radius:999px;background:var(--blue);margin-top:5px;flex:0 0 auto;opacity:0}
.notif-item.unread .notif-dot{opacity:1}
.notif-text{font-size:12.5px;line-height:1.4}
.notif-at{font-size:11px;color:var(--ink3);margin-top:2px}
.notif-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;
  border-top:1px solid var(--line-s);flex-shrink:0;font-size:11.5px;color:var(--ink3)}
.notif-foot .linkish{font-size:11.5px;flex-shrink:0}

/* ===== Kanban extras ===== */
.kmeta .spacer{flex:1}
.kmeta .av{width:22px;height:22px;font-size:9.5px}

/* ===== Calendario ===== */
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cal-head h2{font-family:var(--font-title);font-size:19px;font-weight:700;letter-spacing:-.01em;text-transform:capitalize;min-width:170px;text-align:center}
.cal{border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-s);overflow:hidden;overflow-x:auto}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));min-width:784px}
.cal-dow{padding:9px 10px;font-size:10.5px;font-weight:700;color:var(--ink3);background:var(--panel);border-bottom:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.05em;text-align:center}
.cal-dow:nth-child(6),.cal-dow:nth-child(7){color:var(--ink2)}
/* Columnas de sábado/domingo con la misma franja tenue que el fin de semana en
   el cronograma, para que ambas vistas lean igual de un vistazo. */
.cal-day:nth-child(7n-1),.cal-day:nth-child(7n){background:color-mix(in srgb, var(--ink3) 5%, transparent)}
.cal-day{min-height:116px;max-height:190px;display:flex;flex-direction:column;padding:7px;border-right:1px solid var(--line-s);
  border-bottom:1px solid var(--line-s);transition:background-color var(--t-fast) var(--ease)}
.cal-day:nth-child(7n){border-right:none}
.cal-day:hover{background:var(--blue-g)}
.cal-day.out{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.cal-day.out:hover{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.cal-day.out .cal-n{opacity:.45}
.cal-day.drop{background:var(--blue-l)}
.cal-n{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ink2);margin:0 0 5px 2px;width:22px;height:22px;display:flex;
  align-items:center;justify-content:center;border-radius:50%}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--blue)}
.cal-day.today .cal-n{background:var(--blue);color:#fff;font-weight:700}
/* Las tarjetas scrollean dentro de su día en vez de alargar toda la fila de la
   semana cuando hay muchas tareas el mismo día (mismo criterio que en el Kanban). */
.cal-chips{overflow-y:auto;flex:1 1 auto;min-height:0;margin:0 -2px;padding:0 2px}
.cchip{display:flex;align-items:center;gap:4px;font-size:11.5px;padding:3px 7px;margin-bottom:3px;border-radius:var(--r-xs);cursor:pointer;
  background:color-mix(in srgb,var(--c) 16%,transparent);border-left:3px solid var(--c);color:var(--ink);
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--snap)}
.cchip:hover{background:color-mix(in srgb,var(--c) 28%,transparent);transform:translateX(1px)}
.cchip.done{text-decoration:line-through;color:var(--ink3)}
.cchip.dragging{opacity:.5}
.cchip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.cchip .avs{flex:0 0 auto}
.cchip .av{width:14px;height:14px;font-size:6.5px;border:none}

/* ===== Actividad ===== */
.act-card{padding:6px 18px 14px}
.act-day{font-size:11.5px;font-weight:600;color:var(--ink3);margin:14px 0 6px;text-transform:capitalize}
.act{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line-s)}
.act:last-child{border-bottom:none}
.act .av{width:26px;height:26px;border:none}
.act-b{flex:1;min-width:0;display:flex;gap:10px;justify-content:space-between;font-size:12.5px;line-height:1.5}
.act-b b{font-weight:600}
.act-b>span{color:var(--ink3);font-size:11.5px;white-space:nowrap}
.linkish{border:none;background:none;padding:0;color:var(--blue-d);font-weight:500;cursor:pointer;text-align:left}
.linkish:hover{text-decoration:underline}

/* ===== Resumen: filtros por estado ===== */
.sec-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.sec-row .sec-title{margin:0}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer;color:var(--ink2);
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.fchip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.fchip b{font-weight:600;color:var(--ink3);font-size:11px}
.fchip:hover{border-color:var(--blue)}
.fchip.on{border-color:var(--blue);background:var(--blue-l);color:var(--blue-d)}
.pcard-h{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;margin-bottom:4px}
.pcard-h h3{margin-bottom:0}
.pcard.closed{opacity:.72}

/* ===== Áreas: área (padre) con sus sub-áreas (hijas) anidadas =====
   Mismo tratamiento que .kpi (Resumen general): fondo con degradado tintado
   del color de la propia área (--pc) + entrada kpiIn, en vez de la tarjeta
   plana de antes. El color de --pc es identidad del área, no gravedad -- la
   gravedad (vencidas/por vencer) se comunica solo con las píldoras de
   areaFlagsHTML, nunca tiñendo todo el bloque de rojo (así lo pide el manual
   de marca: ok/bad/warn solo por significado puntual). */
.area-block{background:linear-gradient(160deg,var(--card) 0%,color-mix(in srgb,var(--pc) 7%,var(--card)) 100%);
  border:1px solid color-mix(in srgb,var(--pc) 22%,var(--line));border-radius:var(--r);box-shadow:var(--sh-s);
  padding:22px 24px 24px;margin-bottom:22px;position:relative;overflow:hidden;
  animation:kpiIn .4s var(--ease) both;transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.area-block:hover{box-shadow:var(--sh-m);transform:translateY(-2px)}
.area-block::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--pc);
  transform:scaleX(0);transform-origin:left;animation:kpibarx .5s var(--ease) .15s forwards}
@keyframes kpibarx{to{transform:scaleX(1)}}
.area-block:nth-child(2){animation-delay:.05s}.area-block:nth-child(3){animation-delay:.1s}.area-block:nth-child(4){animation-delay:.15s}.area-block:nth-child(n+5){animation-delay:.2s}
.area-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;cursor:pointer}
.area-head h2{font-family:var(--font-title);font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:0;display:flex;align-items:center}
.area-head .big{margin-top:0}
.area-block>.pbar{margin-top:14px}
.area-block>.flags{margin-top:10px}
.area-prog{display:flex;align-items:center;gap:14px}
.area-prog.sm{gap:9px}
.area-prog.sm .ring{flex-shrink:0}
.sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-s)}
.sub-card{background:color-mix(in srgb,var(--pc) 4%,var(--line-s));border:1px solid var(--line-s);border-radius:12px;padding:14px 15px 13px;cursor:pointer;transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.sub-card:hover{border-color:var(--pc,var(--blue));transform:translateY(-1px);box-shadow:var(--sh-s)}
.sub-card h4{font-family:var(--font-title);font-size:13.5px;font-weight:700;letter-spacing:-.005em;margin-bottom:3px}
.sub-card .pcard-meta{margin:0 0 4px}
.sub-card .area-prog{margin-top:6px}
.sub-card .big b{font-size:22px}
.sub-card .flags{margin-top:8px}

/* ===== Estados y etiquetas ===== */
.set-tbl tbody tr{cursor:default}
.set-tbl td{padding:6px 16px}
.colorin{width:34px;height:28px;border:1.5px solid var(--line);border-radius:var(--r-xs);background:var(--card);padding:2px;cursor:pointer}
.btn-xs{width:28px;height:28px;font-size:13px}
.set-tbl .add-in{padding:8px 4px}

/* ===== Detalle de la tarea ===== */
.dr-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);overflow-x:auto}
.dr-tabs button{border:none;background:none;padding:10px 10px 9px;font-size:12.5px;font-weight:500;color:var(--ink2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.dr-tabs button:hover{color:var(--blue-d)}
.dr-tabs button.on{color:var(--blue-d);border-bottom-color:var(--blue);font-weight:600}
.d-upd{width:100%;min-height:70px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;outline:none;background:var(--card);resize:vertical;line-height:1.6}
.d-upd:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.upd-h .av{width:22px;height:22px;font-size:9.5px;border:none}
.pick-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pick-row .chips{flex-wrap:wrap}
.person{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 2px;font-size:12px}
.person .av{width:22px;height:22px;font-size:9.5px;border:none}
.chip-x{border:none;background:none;color:var(--ink3);font-size:15px;line-height:1;cursor:pointer;padding:0;margin-left:2px}
.chip-x:hover{color:var(--bad)}
.subrow{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:3px 6px 3px 10px;margin-bottom:6px}
.subrow input[type=checkbox]{width:16px;height:16px;accent-color:var(--ok);flex-shrink:0}
.subrow .cell-in{flex:1;padding:5px 6px}
.subrow .cell-in.done{text-decoration:line-through;color:var(--ink3)}
.subrow .av{width:22px;height:22px;font-size:9.5px}
.drawer .add-in{border:1.5px dashed var(--line)}
.drop-zone{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px dashed var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;cursor:pointer;text-align:center;
  transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease)}
.drop-zone b{font-weight:600;color:var(--blue-d)}
.drop-zone span{font-size:11.5px;color:var(--ink3)}
.drop-zone:hover,.drop-zone.drop{border-color:var(--blue);background:var(--blue-g)}
.file{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:8px}
.file-ic{width:38px;height:38px;border-radius:var(--r-xs);background:var(--blue-l);color:var(--blue-d);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file-b{flex:1;min-width:0}
.file-b a{display:block;color:var(--ink);font-weight:500;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-b a:hover{color:var(--blue-d);text-decoration:underline}
.file-b span{font-size:11px;color:var(--ink3)}

.field select.pill:focus{box-shadow:0 0 0 3px var(--blue-l)}
.repo-link{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--ink2);text-decoration:none;border:1.5px solid var(--line);
  border-radius:999px;padding:5px 12px;background:var(--card);white-space:nowrap}
.repo-link:hover{border-color:var(--blue);color:var(--blue-d)}
.repo-link.sm{padding:1px 8px;font-size:11px;font-family:ui-monospace,Consolas,monospace}

/* =====================================================================
   Tablero estilo Monday: lienzo gris, panel blanco redondeado, cuadrícula,
   celdas de estado de color completo y fila resumen por grupo.
   ===================================================================== */
:root[data-theme="dark"]{color-scheme:dark;--blue:#3EA0E6;--blue-d:#8ECBF1;--blue-l:rgba(62,160,230,.14);--blue-g:rgba(62,160,230,.07);--bg:#0B0B0B;--panel:#141414;--card:#1E1E1E;--ink:#F2F2F2;--ink2:#B8B8B8;--ink3:#8A8A8A;--line:#333333;--line-s:#262626;--sh-s:0 1px 2px rgba(0,0,0,.5);--sh-m:0 8px 22px rgba(0,0,0,.5);--sh-l:0 22px 48px rgba(0,0,0,.6);--canvas:#000000;--grid:#2C2C2C;--cell-hover:#232323}
:root[data-theme="light"]{color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--canvas:#000000;--grid:#2C2C2C;--cell-hover:#232323}}

.app{display:flex;height:100%;overflow:hidden;position:relative;background:var(--canvas)}
.app::before{content:'';position:absolute;inset:-20% auto auto -10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(41,142,206,.16),transparent 70%);pointer-events:none;z-index:0;display:none}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;z-index:1;margin:8px 8px 8px 8px;border-radius:var(--r);background:var(--bg);box-shadow:var(--sh-s);border:1px solid var(--line)}

.tb-title h1{font-family:var(--font-title);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Cabecera del proyecto: compacta, sin tarjetas */
.phead{display:flex;align-items:flex-start;gap:18px;margin-bottom:20px;flex-wrap:wrap;margin:10px 0 6px}
.phead-stats{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap;align-items:center}
.pstat{display:flex;align-items:baseline;gap:6px}
.pstat b{display:inline;font-family:var(--font-title);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pstat span{font-size:12px;color:var(--ink3)}
.stackbar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--line-s);margin-top:10px;max-width:420px}

/* Pestañas de vista subrayadas */
.vtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 12px;overflow-x:auto}

.vtabs button.on{color:var(--ink);font-weight:600}
.vtabs button.on::after{transform:scaleX(1)}

/* Barra de herramientas: botones fantasma */
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.search-wrap{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-xs);padding:0 8px;height:32px;cursor:text;
  transition:background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.search-wrap:hover{background:var(--cell-hover)}
.search-wrap:focus-within{background:var(--card);box-shadow:0 0 0 1.5px var(--blue)}
.search-wrap svg{width:14px;height:14px;fill:var(--ink2)}
.search-wrap .search{border:none;background:none;padding:0;width:120px;min-width:0;box-shadow:none!important;transition:width var(--t-base) var(--ease)}
.search-wrap .search:focus{width:200px}

.fsel:hover{background:var(--cell-hover);color:var(--ink)}
.fsel.on{background:var(--blue-l);color:var(--blue-d);font-weight:500}
.toolbar .seg{padding:2px}
.toolbar .seg button{padding:4px 10px;font-size:12px}

/* ----- Grupos ----- */

.group-head .gtoggle,.group-head button[data-toggle]{color:var(--gc);font-size:11px}

.group:hover .group-head .count{opacity:1}
.gmenu{margin-left:2px;background:none;border:1px solid transparent;border-radius:var(--r-xs);width:30px;height:26px;cursor:pointer;color:var(--ink3);font-size:16px;line-height:1;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.group:hover .gmenu{opacity:1}

/* ----- Tabla ----- */
.tbl-wrap{overflow-x:auto;border:none;border-radius:0;background:transparent;box-shadow:none}

.th-sort{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0;white-space:nowrap;font-weight:700}

.tbl tbody tr:hover td{background:var(--cell-hover)}
.tbl tbody tr:hover td.cs{background:var(--card)}

.tbl td.c{padding:0 6px}

.tbl tfoot td{border-bottom:none;border-left:none;padding-left:8px}

.add-in::placeholder{color:var(--ink3)}
.add-in:hover{border-color:transparent;background:transparent}

.title-cell{display:flex;align-items:center;gap:4px;height:var(--row-h)}
.cell-in{width:100%;border:1.5px solid transparent;background:transparent;border-radius:var(--r-xs);padding:5px 6px;outline:none;min-width:0;transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease)}

.cell-in:hover:not(:disabled){border-color:var(--grid)}
.open-btn{border:none;background:none;color:var(--ink3);border-radius:var(--r-xs);padding:4px 6px;font-size:11px;cursor:pointer;flex-shrink:0;opacity:0;transition:opacity var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);display:inline-flex;align-items:center;gap:3px;height:28px;font-weight:600}

.open-btn.has{color:var(--blue)}
.open-btn:hover{border-color:var(--blue);color:var(--blue-d);background:var(--line-s)}
.open-btn span{font-size:11px}
.subcount{flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--ink3);background:transparent;border-radius:999px;padding:2px 7px;font-variant-numeric:tabular-nums;border:1px solid var(--grid)}

/* Celda de estado / prioridad: color completo, texto blanco */

.stcell:hover:not(:disabled){filter:brightness(1.07) saturate(1.05)}
.stcell:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.stcell:disabled{opacity:1;cursor:default}
.stcell option{background:var(--card);color:var(--ink);text-align:left}

/* Persona */
.cell-btn{width:100%;min-height:30px;display:flex;align-items:center;border:none;background:transparent;border-radius:var(--r-xs);padding:2px 4px;cursor:pointer;text-align:left;overflow:hidden;transition:border-color var(--t-base) var(--ease);justify-content:center}
.cell-btn:hover:not(:disabled){border-color:var(--line);background:var(--line-s)}
.av-empty{width:18px;height:18px;fill:var(--ink3);opacity:.55;transition:opacity var(--t-fast) var(--ease)}
tr:hover .av-empty{opacity:1}
.pick-empty{font-size:16px;color:var(--ink3);opacity:0;transition:opacity var(--t-fast) var(--ease);line-height:1}

/* Fecha como texto, clic abre el calendario */

.date-cell.rw{cursor:pointer}
.date-cell.rw:hover{background:var(--line-s)}
.date-cell.due-empty.rw:hover span::before{content:'+';color:var(--ink3);font-size:15px}
.date-cell input{position:absolute;left:50%;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:none;padding:0}
.date-cell.over span{color:var(--bad);font-weight:500}
.date-cell.soon span{color:var(--warn);font-weight:500}
.date-cell.done span{color:var(--ink2)}

.warn-ic{background:var(--bad)}
.ok-ic{background:#00C875}
.date-x{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:none;background:var(--ink3);color:#fff;
  font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.date-cell:hover .date-x{opacity:1}

/* Avance */
.prog{display:flex;align-items:center;gap:8px;min-width:0;padding:0 4px}
/* Ancho fijo para la barrita de "Avance por área" del Resumen -- a propósito
   SIN la clase .prog encima (que también es flex): envolver un .prog dentro
   de otro .prog hacía que el de adentro se encogiera a su contenido en vez de
   llenar el ancho fijo, y la barra (flex:1 dentro de un contenedor sin ancho
   real) quedaba invisible aunque el porcentaje sí se viera. */
.areaw{width:140px;flex-shrink:0}
.areaw-sm{width:110px;flex-shrink:0}
/* Filas clickeables del Resumen (área y persona con vencidas) */
.arow,.ovrow{cursor:pointer;border-radius:var(--r-xs);transition:background-color var(--t-fast) var(--ease)}
.arow:hover,.ovrow:hover{background:var(--panel)}
/* Fila de lista simple dentro de un modal angosto (ej. detalle de vencidas por
   persona) -- a propósito NO .list-tbl: esa trae min-width:620px pensado para
   las tablas anchas de página completa, y metida en un modal de 520px solo
   fuerza scroll horizontal para tres columnas que caben de sobra en flex. */
.lrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line-s);cursor:pointer;border-radius:var(--r-xs);transition:background-color var(--t-fast) var(--ease)}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--panel)}

/* Fila resumen (batería) */

.battery i{display:block;height:100%;transition:flex-grow var(--t-slow) var(--ease)}

/* Subtareas */
.tbl tr.sub td{background:color-mix(in srgb,var(--card) 70%,var(--canvas));height:40px}
.tbl tr.sub td.first{padding-left:34px;border-left-color:color-mix(in srgb,var(--gc) 45%,transparent)}
.tbl tr.sub.add td.first{padding-left:40px}

.add-group{border:1px dashed var(--grid);background:none;border-radius:var(--r-xs);padding:8px 14px;color:var(--ink2);cursor:pointer;font-weight:500;transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);font-size:13px}

/* ----- Kanban con encabezado de color ----- */
/* flex (no grid de 5 fijas): en modo "Grupos" el número de columnas es variable
   (un grupo = una columna, ej. "Sprint 1".."Sprint 8"), así que cada columna
   crece para llenar el espacio pero no se angosta más de 220px -- con muchas
   columnas el tablero scrollea en vez de aplastarlas. */
.kanban{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;padding-bottom:10px}
.kcol{background:var(--canvas);border:none;border-radius:var(--r-sm);padding:8px;min-height:200px;max-height:calc(100vh - 300px);display:flex;flex-direction:column;gap:8px;flex:1 0 220px;max-width:320px;transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease)}
.kanban .kcol-addg{flex:0 0 auto;align-self:flex-start;margin-top:2px;white-space:nowrap}
/* Las tarjetas scrollean dentro de su columna -- antes el kcol crecía con la
   lista entera y una columna con cientos de tareas alargaba toda la página. */
.kcol-body{overflow-y:auto;flex:1 1 auto;min-height:0}

.kcol-h h3{font-family:var(--font-body);font-size:13.5px;font-weight:700;flex:1;color:var(--ink)}
.kcol-h span{font-size:12px;color:var(--ink2);font-weight:600;background:color-mix(in srgb,var(--gc) 16%,transparent);padding:1px 7px;border-radius:999px}

.kadd{width:100%;border:1.5px dashed var(--line);background:transparent;border-radius:var(--r-sm);padding:8px;color:var(--ink3);cursor:pointer;transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);border-color:transparent}
.kadd:hover{border-color:var(--blue);color:var(--blue-d);background:var(--card)}
.kmeta .tag{border-radius:var(--r-xs)}

/* Pills del detalle con el color sólido */
.field select.pill{border:none;padding:9px 30px 9px 14px;background-color:var(--c);box-shadow:none;color:#fff;font-weight:600;border-radius:var(--r-xs)}
.field select.pill option{color:var(--ink)}
.pill{appearance:none;-webkit-appearance:none;border:none;border-radius:var(--r-xs);padding:6px 26px 6px 12px;font-size:12px;font-weight:600;cursor:pointer;width:100%;min-width:0;background-color:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 72%,var(--ink));background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%;background-size:4px 4px;background-repeat:no-repeat;outline:none;transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.pill.pill-auto{width:auto;min-width:130px;background-color:var(--c);color:#fff}

/* Resumen y otras vistas: tarjetas más limpias */
.kpi,.pcard,.card,.role-card{border-color:var(--line);box-shadow:none}
.pcard:hover{box-shadow:var(--sh-m);transform:translateY(-2px)}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;margin-top:10px}


/* Barra de avance (área / proyecto) */
.pbar{height:8px;max-width:420px;border-radius:999px;background:var(--line-s);overflow:hidden;margin-top:10px}
.pbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#579BFC,#00C875);transition:width var(--t-slow) var(--ease)}

.commit-chip{display:inline-block;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--ink2);background:var(--line-s);border:1px solid var(--grid);
  border-radius:var(--r-xs);padding:2px 8px;text-decoration:none;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
a.commit-chip:hover{border-color:var(--blue);color:var(--blue-d)}

/* =====================================================================
   Capa "premium": más aire, menos color simultáneo, jerarquía más clara.
   ===================================================================== */
body{height:100%;font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:13.5px;transition:background-color var(--t-slow) var(--ease),color var(--t-slow) var(--ease);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ----- Barra lateral más limpia ----- */
.sb-header{padding:22px 20px 18px;border-bottom:1px solid var(--line-s);display:flex;align-items:center;gap:12px;position:relative}
.nav-btn{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer;border:none;border-left:3px solid transparent;color:var(--ink2);font-size:13px;font-weight:500;background:none;width:100%;text-align:left;transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-fast) var(--ease);border-radius:11px}
.nav-btn .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--pc,var(--blue))}
.nav-btn .sdot{width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0;box-shadow:0 0 0 2px var(--card);display:none}
.nav-btn .pct{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums;font-weight:500}
.nav-btn.active .pct{color:var(--blue-d)}
.nav-btn .badge{font-size:10.5px;font-weight:600;background:var(--blue-l);color:var(--blue-d);border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.sb-footer{margin-top:auto;padding:12px 20px;border-top:1px solid var(--line-s);display:flex;align-items:center;gap:10px}

/* ----- Topbar: nombre, estado y descripción ----- */
.topbar{display:flex;align-items:center;gap:16px;padding:14px 32px 12px;min-height:78px;flex-shrink:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line);box-shadow:none;transition:background-color var(--t-slow) var(--ease);border-radius:var(--r) var(--r) 0 0}
.tb-h{display:flex;align-items:center;gap:12px;min-width:0}
/* Título y controles (pastilla de estado, favorito) van en dos cajas separadas --
   antes eran 4 hijos sueltos del mismo flex sin wrap, así que en pantallas chicas
   el título se achicaba hasta casi desaparecer para hacerle lugar a la pastilla y
   la estrella, que nunca cedían espacio. Ver el bloque responsive al final del
   archivo: ahí `.tb-h` pasa a wrap y `.tb-h-controls` cae a su propia línea cuando
   no entra junto al título, en vez de robarle el espacio. */
.tb-h-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.tb-h-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-h-title h1{font-size:24px;letter-spacing:-.03em;min-width:0}
.tb-dot{width:12px;height:12px;border-radius:4px;background:var(--pc);flex-shrink:0}
.tb-title p{font-size:13px;color:var(--ink3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:80ch}
.tb-h-controls .pill.pill-auto{width:auto;min-width:0;height:26px;padding:0 26px 0 12px;font-size:12px;border-radius:999px;flex-shrink:0}
.tb-h-controls .tag{flex-shrink:0}
.btn-ghost{background:transparent;color:var(--ink2);border:1px solid transparent}
.btn-ghost:hover{background:var(--line-s);color:var(--ink)}
.page{flex:1;overflow-y:auto;padding:22px 32px 56px}

/* ----- Franja de indicadores del proyecto ----- */
.pstrip{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:12px;margin:0 0 22px}
.ps{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;
  transition:border-color var(--t-base) var(--ease)}
.ps:hover{border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
.ps b{font-family:var(--font-title);font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.ps b small{font-size:14px;color:var(--ink3);font-weight:600;margin-left:1px}
.ps b.bad{color:var(--bad)} .ps b.warn{color:var(--warn)}
.ps-l{font-size:12px;color:var(--ink3);font-weight:500}
.ps-prog{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}
.ps-prog>div{display:flex;flex-direction:column;gap:2px}
.ring .ring-bg{fill:none;stroke:var(--line);stroke-width:5}
.ring .ring-fg{fill:none;stroke:url(#none);stroke:#00C875;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset var(--t-slow) var(--ease)}

/* ----- Vistas + herramientas en una sola barra ----- */
.viewbar{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}

.vtabs button:hover{background:transparent;color:var(--ink)}
.vtabs button::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--blue);transform:scaleX(0);transition:transform var(--t-base) var(--ease)}

.viewbar .seg{margin-left:6px}
.viewbar .btn-primary{margin-left:8px;box-shadow:0 2px 8px rgba(41,142,206,.28)}
.fsel{border:none;border-radius:var(--r-xs);padding:0 10px;background:none;outline:none;max-width:180px;height:32px;color:var(--ink2);cursor:pointer;font-size:13px;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}

/* ----- Grupos ----- */
.group{margin-bottom:30px;animation:fadeUp .3s var(--ease) both}
.group-head{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding-left:2px}
.gname,.group-head h3{font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--gc)}
.group-head .count{font-size:11.5px;color:var(--ink3);opacity:1;transition:opacity var(--t-fast) var(--ease);margin-left:6px;background:var(--line-s);border-radius:999px;padding:2px 9px}
.group.closed .group-head{opacity:.85}
.group.closed .group-head .count{background:transparent;padding-left:0}

/* ----- Tabla: más aire y menos líneas ----- */
.tbl{width:100%;border-collapse:separate;min-width:1040px;table-layout:fixed;border-spacing:0}
.tbl th{font-size:10.5px;font-weight:700;color:var(--ink3);padding:6px 8px;text-align:center;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--grid);background:var(--panel);white-space:nowrap;height:38px;border-top:1px solid var(--grid);border-right:1px solid var(--grid);border-right-color:transparent;border-top-color:var(--grid)}
.tbl th:first-child{text-align:left;padding-left:14px;border-left:6px solid var(--gc);border-top-left-radius:var(--r-xs);border-left-width:4px}
.tbl th:last-child{border-top-right-radius:var(--r-xs);border-right:1px solid var(--grid)}
.tbl td{padding:0;border-bottom:1px solid var(--grid);vertical-align:middle;height:var(--row-h);text-align:center;border-right:1px solid var(--grid);background:var(--card);transition:background-color var(--t-fast) var(--ease);border-right-color:transparent;border-bottom-color:var(--grid)}
.tbl td:last-child{border-right:1px solid var(--grid)}
.tbl td.first{border-left:6px solid var(--gc);padding-left:10px;padding:0 6px 0 8px;text-align:left;border-left-width:4px}
.tbl .addrow td.first{border-left:6px solid color-mix(in srgb,var(--gc) 45%,transparent);border-right:1px solid var(--grid);background:var(--card);padding-left:30px;border-left-width:4px}
.tbl tbody tr:hover td,.tbl tbody tr:hover td.cs{background:var(--cell-hover)}
.cell-in.title{font-weight:450;font-size:13.5px;color:var(--ink)}

.tbl tr.sum td:nth-child(n+2):nth-child(-n+8){border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);border-right-color:transparent}
.tbl tr.sum td:last-child{border-bottom-right-radius:var(--r-xs);border-right:1px solid var(--grid)}
.tbl tr.sum td.first{border-left:4px solid transparent;border-right:1px solid var(--grid);border-right-color:transparent}
.tbl tr.sum td:nth-child(2){border-right:1px solid var(--grid);border-left:1px solid var(--grid)}

/* Estado: bloque de color con respiro; prioridad: etiqueta suave */
.tbl td.cs{padding:5px 6px}
.stcell{appearance:none;-webkit-appearance:none;display:block;width:100%;height:32px;border:none;border-radius:8px;margin:0;padding:0 10px;background:var(--c);color:#fff;font-size:12.5px;font-weight:600;text-align:center;text-align-last:center;cursor:pointer;outline:none;transition:filter var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);letter-spacing:.01em}
.stcell.soft{background:color-mix(in srgb,var(--c) 13%,transparent);color:color-mix(in srgb,var(--c) 85%,var(--ink));font-weight:600}
:root[data-theme="dark"] .stcell.soft{background:color-mix(in srgb,var(--c) 26%,transparent);color:color-mix(in srgb,var(--c) 45%,#fff)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stcell.soft{background:color-mix(in srgb,var(--c) 26%,transparent);color:color-mix(in srgb,var(--c) 45%,#fff)}}
.stcell.soft:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--c) 20%,transparent)}
.stcell.soft:focus-visible{box-shadow:0 0 0 2px var(--blue-l)}

/* Detalles */

.av{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;color:#fff;background:var(--av,#298ECE);border:2px solid var(--card);letter-spacing:.02em}
.prog .bar{flex:1;height:8px;border-radius:999px;background:var(--line-s);overflow:hidden}
.prog .bar i{display:block;height:100%;border-radius:999px;background:#00C875;transition:width var(--t-slow) var(--ease)}
.prog .bar i:not(.full){background:var(--blue)}
.prog span{font-size:12px;color:var(--ink2);width:34px;text-align:right;font-variant-numeric:tabular-nums}
.date-cell{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;height:30px;border-radius:var(--r-xs);font-size:13px;color:var(--ink2);transition:background-color var(--t-fast) var(--ease)}
.warn-ic,.ok-ic{font-style:normal;width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0}
.range{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:var(--line-s);color:var(--ink2);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600;white-space:nowrap}
:root[data-theme="dark"] .range{background:var(--line)}
.battery{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:0;background:var(--line-s)}
.tbl tr.sum td{background:transparent;border-bottom:none;border-right:none;height:44px;padding:4px 6px;vertical-align:middle}
.add-in{width:100%;border:1.5px solid transparent;background:transparent;border-radius:var(--r-xs);padding:6px 4px;outline:none;color:var(--ink3);transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);font-size:13px}
.open-btn svg{width:17px;height:17px;fill:currentColor}

/* Kanban: tarjetas con más aire */
.kcol-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:2px solid var(--gc);background:color-mix(in srgb,var(--gc) 10%,var(--card));color:var(--ink);border-radius:10px;flex:0 0 auto}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:8px;box-shadow:0 1px 2px rgba(16,24,40,.05);cursor:pointer;transition:box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-fast) var(--snap);border-color:transparent}
.kcard h4{font-size:13.5px;font-weight:500;line-height:1.4;margin-bottom:8px;word-break:break-word}

/* Resumen general */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-s);cursor:pointer;position:relative;overflow:hidden;transition:box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.pcard p{font-size:12px;color:var(--ink3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:18px}
.kpi{background:linear-gradient(160deg,var(--card) 0%,color-mix(in srgb,var(--accent,var(--blue)) 8%,var(--card)) 100%);
  border:1px solid color-mix(in srgb,var(--accent,var(--blue)) 24%,var(--line));border-radius:var(--r);padding:20px;position:relative;overflow:hidden;box-shadow:var(--sh-s);animation:kpiIn .4s var(--ease) both;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}

/* Panel de administración (usuarios/invitaciones): informacion de
   configuracion, no la salud operativa del trabajo -- tratamiento mas
   chico y discreto a proposito, para que no compita visualmente con los
   KPI principales de arriba. Eyebrow versal en vez de h2 grande, igual
   que usa el resto de la marca HEKA para secciones secundarias. */
.sec-title-sm{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:28px 0 10px}
.kpi-row-sm{gap:10px}
.kpi-sm{background:var(--panel);padding:13px 16px;box-shadow:none}
.kpi-sm::before{width:2px}
.kpi-sm .kpi-value{font-size:22px;margin-bottom:2px}
.kpi-sm .kpi-label{font-size:11px}
.kpi-sm .kpi-sub{font-size:10.5px}

/* Móvil */

/* Ajustes finos de la barra de vistas y celdas */
.viewbar .vtabs{border-bottom:none;margin:0;flex:0 0 auto;min-width:0;overflow:visible}

.chips{display:inline-flex;gap:4px;min-width:0;overflow:hidden;justify-content:center;flex-wrap:nowrap}
.chip{display:inline-block;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:500;background:color-mix(in srgb,var(--c) 18%,transparent);color:color-mix(in srgb,var(--c) 75%,var(--ink));flex-shrink:1;min-width:0}
.chip.more{--c:#8B959C;background:var(--line-s);color:var(--ink3);flex-shrink:0;max-width:none}

/* ===== Barra lateral: navegación con íconos y proyectos por estado ===== */

.nav-btn.nav-main.active{background:var(--blue-l);box-shadow:none}
.nav-btn.nav-main.active .nav-ic{color:var(--blue-d)}
.nav-ic{width:18px;height:18px;display:inline-flex;flex-shrink:0}
.nav-ic svg{width:17px;height:17px;fill:currentColor;stroke:none;opacity:.82;transition:opacity var(--t-fast) var(--ease)}
.nav-btn:hover .nav-ic svg,.nav-btn.active .nav-ic svg{opacity:1}

/* .sb-search/.sb-sec-*/.sb-toggle/.sb-empty: ya no los genera ningún
   renderer (quedaron de una versión anterior de la barra lateral), se
   dejan tal cual, sin usarse. */
.sb-search:focus-within{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.sb-search svg{width:15px;height:15px;fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.7;stroke-linecap:round;flex-shrink:0}

.sb-search input::placeholder{color:rgba(255,255,255,.58)}

.sb-sec-h{display:flex;align-items:center;gap:7px;width:100%;border:none;background:none;cursor:pointer;padding:6px 8px;border-radius:8px;
  color:rgba(255,255,255,.72);font-size:11.5px;font-weight:600;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.sb-sec-h:hover{color:#fff;background:rgba(255,255,255,.06)}
.sb-sec-h b{margin-left:auto;font-weight:600;font-size:10.5px;color:rgba(255,255,255,.55)}
.sb-sec-h .chev{font-style:normal;font-size:9px;transform:rotate(90deg);transition:transform var(--t-base) var(--ease);width:10px}
.sb-sec.folded .chev{transform:none}
.sb-sec-h .sdot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.sb-sec-b{display:flex;flex-direction:column;gap:1px}
.sb-sec.folded .sb-sec-b{display:none}

.nav-btn.nav-proj:hover{background:var(--blue-g)}
.nav-btn.nav-proj.active{background:var(--blue-l);font-weight:600;box-shadow:none}
.pj-ic{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pc);color:#fff;font-size:11px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.nav-btn.nav-proj .pct{font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.nav-btn.nav-proj.active .pct{color:var(--blue-d)}
.sb-empty{padding:6px 12px;font-size:12px;color:rgba(255,255,255,.68);line-height:1.5}
.sb-toggle{display:none;width:100%;text-align:left;background:none;border:none;color:rgba(255,255,255,.72);font-size:11.5px;font-weight:600;padding:10px 22px 6px;cursor:pointer}
.sb-search{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:0 10px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);min-height:34px;box-sizing:border-box}
.sb-search input{flex:1;min-width:0;border:none;background:none;outline:none;color:#fff;font-size:12.5px;height:32px;padding:0}

/* ===== Barra lateral corta: navegación + favoritos + recientes ===== */
.sb-nav{padding:14px 12px 6px;display:flex;flex-direction:column;gap:3px}
.nav-btn.nav-main{border-left:none;border-radius:11px;margin:0;width:100%;padding:10px 12px;font-weight:500}
.nav-btn .badge.soft{background:var(--line-s);color:var(--ink3);font-weight:500}
.sb-list{padding:0 12px;display:flex;flex-direction:column;gap:2px}
.nav-btn.nav-proj{border-left:none;border-radius:11px;margin:0;width:100%;padding:8px 10px;gap:11px;font-size:13px;font-weight:450}
.sb-hint{margin:14px 22px 0;font-size:11.5px;line-height:1.5;color:var(--ink3)}

/* ===== Cabecera: favorito y metadatos ===== */
.fav-btn{border:none;background:none;cursor:pointer;font-size:17px;line-height:1;color:var(--ink3);padding:4px;border-radius:8px;flex-shrink:0;
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--snap),background-color var(--t-fast) var(--ease)}
.fav-btn:hover{color:#E8B02E;background:var(--line-s)}
.fav-btn:active{transform:scale(.88)}
.fav-btn.on{color:#E8B02E}
.tb-sub{display:flex;align-items:center;gap:8px;margin-top:6px;min-width:0}
.tb-sub p{margin-top:0}
.meta-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--ink2);background:var(--line-s);border-radius:999px;padding:3px 10px;white-space:nowrap}
.meta-chip em{font-style:normal;color:var(--ink3)}
.meta-chip.invited{color:var(--blue-d);background:var(--blue-l)}
.pcard-meta{font-size:12px;color:var(--ink2);font-weight:500;margin:-2px 0 6px}

/* ===== Página Proyectos ===== */
.plist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.plist-h,.prow{display:grid;grid-template-columns:34px 36px minmax(220px,2.4fr) 1.1fr 1.4fr 1fr 1.2fr .9fr .8fr;align-items:center;gap:12px;padding:0 18px}
.plist-h{height:40px;background:var(--panel);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink3);font-weight:500}
.plist-g{display:flex;align-items:center;gap:8px;padding:18px 18px 8px;border-bottom:1px solid var(--line-s)}
.plist-g h3{font-family:var(--font-title);font-size:15px;font-weight:700;letter-spacing:-.01em}
.plist-g span{font-size:11.5px;color:var(--ink3);background:var(--line-s);border-radius:999px;padding:1px 8px}
.prow{min-height:62px;border-bottom:1px solid var(--line-s);cursor:pointer;transition:background-color var(--t-fast) var(--ease)}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(--blue-g)}
.prow .fav-btn{opacity:.35}
.prow:hover .fav-btn,.prow .fav-btn.on{opacity:1}
.pj-ic.lg{width:32px;height:32px;border-radius:10px;font-size:13.5px}
.prow-name{min-width:0;display:flex;flex-direction:column;gap:2px}
.prow-name b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow-name span{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow-c{font-size:12.5px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead{display:inline-flex;align-items:center;gap:7px}
.lead .av{width:24px;height:24px;font-size:9.5px;border:none}
.prow-prog{display:flex;align-items:center;gap:8px}
.prow-prog .bar{flex:1;height:6px;border-radius:999px;background:var(--line-s);overflow:hidden}
.prow-prog .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#579BFC,#00C875)}
.prow-prog span{font-size:12px;font-weight:600;color:var(--ink);width:34px;text-align:right;font-variant-numeric:tabular-nums}
.prow-n b{color:var(--ink);font-weight:600}
.viewbar .fsel{max-width:100px;text-overflow:ellipsis}
.viewbar .search-wrap .search{width:64px}
.viewbar .search-wrap .search:focus{width:150px}
.viewbar .toolbar{margin:0 0 8px;gap:2px;flex-wrap:nowrap;margin-left:auto}
.vtabs button{border:none;background:none;padding:10px 10px 12px;font-size:13.5px;font-weight:500;color:var(--ink3);cursor:pointer;position:relative;white-space:nowrap;border-radius:var(--r-xs) var(--r-xs) 0 0;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}

.sb-login{display:block;width:100%;text-align:center;padding:10px;border-radius:10px;background:var(--blue);color:#fff;font-weight:600;text-decoration:none;
  border:1px solid var(--blue);transition:background-color var(--t-fast) var(--ease)}
.sb-login:hover{background:var(--blue-d)}
.file-b b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =====================================================================
   Responsivo (tablet / celular)
   Todos los @media de ancho de pantalla viven acá a propósito, al final
   del archivo, en vez de repartidos cerca de cada componente como antes.
   Más de uno quedó "muerto" porque una regla SIN media query, declarada
   más abajo en el archivo, lo pisaba por orden de cascada (misma
   especificidad -- gana la última declaración, tenga o no condición).
   Pasó de verdad con .kpi-row (los KPI de Resumen general se quedaban
   en 4 columnas y el texto se cortaba en el celular) y con
   .viewbar .toolbar (los filtros de Proyectos nunca hacían wrap y se
   salían de la pantalla). Para que no vuelva a pasar: cualquier ajuste
   de breakpoint nuevo va ACÁ, después de todo lo demás, nunca mezclado
   entre los estilos base de cada componente. */

@media(max-width:1100px){
  .pstrip{grid-template-columns:repeat(3,1fr)}
  .pstrip .ps-prog{grid-column:1/-1}
  .plist-h{display:none}
  .prow{grid-template-columns:28px 32px 1fr auto;padding:10px 14px}
  .prow .prow-c{display:none}
  .prow .prow-prog{display:flex;width:110px}
}

@media(max-width:900px){
  /* Sidebar: de riel fijo a cajón deslizante */
  .sidebar{position:fixed;top:0;bottom:0;left:0;transform:translateX(-105%);padding-top:env(safe-area-inset-top,0px)}
  .sidebar.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(13,17,23,.4);z-index:30;animation:fadeIn var(--t-base) var(--ease)}
  .btn.menu-btn{display:inline-flex}

  /* Marco principal a pantalla completa, sin el margen de "tarjeta flotante" */
  .main{margin:0;border-radius:0;border:none}
  .topbar{padding:12px 16px;gap:10px;border-radius:0}
  .page{padding:6px 14px 40px}

  /* El título de la página nunca debe ceder espacio a la pastilla de estado
     o al favorito -- si no entran los dos juntos, los controles bajan de
     línea en vez de robarle el ancho al título (ver .tb-h-title/.tb-h-controls). */
  .tb-h{flex-wrap:wrap;row-gap:6px}
  /* min-width en vez de 0: con shrink libre el título nunca "obligaba" a que
     la pastilla/estrella bajaran de línea -- simplemente se achicaba él
     hasta casi desaparecer, que es justo el problema que esto soluciona. */
  .tb-h-title{min-width:150px}
  .tb-h-title h1{font-size:19px;white-space:normal;overflow:visible;text-overflow:clip}

  .kpi-row{grid-template-columns:1fr 1fr}
  .pstrip{grid-template-columns:1fr 1fr}
  .pstrip .ps-prog{grid-column:1/-1}
  .tb-actions .hide-m{display:none}
  .grid2{grid-template-columns:1fr}
  .roles-help{grid-template-columns:1fr}

  .viewbar .toolbar{flex-wrap:wrap}
  .viewbar .search-wrap .search{width:auto;flex:1;min-width:90px}
  .viewbar .fsel{max-width:140px}

  /* Cronograma: columna de nombre de tarea más angosta -- a 240px (el ancho de
     escritorio) se comía más de la mitad de un celular, sin dejar casi nada
     para la franja de fechas que es lo que de verdad hay que ver acá. */
  .tl-label-wrap{flex:0 0 140px;width:140px}
  /* A 140px, mostrar también los avatares de responsables dejaba el título
     reducido a 2 o 3 letras ("Co...", "M.."): en el celular el título manda,
     para ver quién es responsable se abre la tarea. El botón de dependencia
     dependía de :hover para aparecer -- en una pantalla táctil eso nunca
     pasa, así que quedaba un espacio reservado para un botón invisible e
     inalcanzable. Ahora queda siempre visible pero solo como ícono (sin el
     texto "dep."), para que ocupe lo mínimo y se pueda tocar. */
  .tl-label-wrap .avs{display:none}
  .tl-depbtn{opacity:1;padding:4px 5px}
  .tl-depbtn-txt{display:none}
  /* El selector de zoom (Día/Semana/Mes) quedaba pegado a la derecha con un
     hueco vacío enorme a la izquierda, como flotando -- en el celular todo
     lo demás arranca pegado al borde izquierdo. */
  .tl-toolbar{justify-content:flex-start}

  /* Calendario: columnas más angostas para que entren más días de un vistazo;
     el scroll horizontal del contenedor (.cal) sigue de respaldo para el resto. */
  .cal-grid{grid-template-columns:repeat(7,minmax(86px,1fr));min-width:602px}
}

@media(max-width:600px){
  .pub-card{padding:26px 20px 24px}
  .pub-task-title{min-width:100%;order:-1}
  .pub-head-top{flex-wrap:wrap}
  .pub-stats{flex-wrap:wrap}
}

/* Aviso "instalalo desde Safari" para iOS fuera de Safari (ver base.html) */
#iosHint{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;
  background:linear-gradient(135deg,var(--blue-d),var(--blue));color:#fff;font-size:12.5px;font-weight:500;
  line-height:1.4;padding:10px 44px 10px 16px;text-align:center}
#iosHint b{font-weight:700}
#iosHint button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  border:none;background:rgba(255,255,255,.22);color:#fff;font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
#iosHint button:hover{background:rgba(255,255,255,.34)}