/* =========================================================================
   Gestión Interna Vergy — hoja de estilos única
   Paleta coherente con la identidad de Vergy. La herramienta es autónoma:
   no depende de la hoja de estilos de ningún otro dashboard.
   ========================================================================= */

:root{
  /* Marca Vergy */
  --navy:#1b355d; --navy-700:#27497a; --navy-soft:#eaeef5;
  --green:#90d7aa; --green-deep:#3f9d6b; --green-soft:#e4f5ec;
  --amber:#f2b84b; --amber-deep:#b9831a; --amber-soft:#fcf2da;
  --red:#b3261e; --red-soft:#fdeaea;
  --grey:#8794a6; --grey-l:#dde3ec;

  /* Superficies */
  --bg:#eef1f6; --surface:#fff; --surface-soft:#f7f9fc;
  --border:#e2e8f1; --border-strong:#cdd6e4;
  /* --text-3 es el gris de los rótulos. Más claro que --text-2 a propósito:
     la etiqueta tiene que retroceder para que el dato destaque. */
  --text:#283543; --text-2:#6c7a8c; --text-3:#9dabbd;

  /* Formas */
  --r-card:16px; --r-sm:10px; --r-xs:6px;
  --shadow:0 1px 2px rgba(27,53,93,.04), 0 4px 16px rgba(27,53,93,.06);
  --shadow-lg:0 12px 40px rgba(27,53,93,.18);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --sidebar-w:248px;

  /* ---- Cronograma ----------------------------------------------------
     Las barras tienen su propia paleta, más saturada que la de los chips:
     una barra de 20 px pide más contraste que una etiqueta pequeña.

     El PROYECTO se lleva el azul: es la barra que ordena la lectura y la que
     tiene que destacar. Eso obliga a que ninguna tarea sea azul, o volvería
     el problema de antes —dos cosas distintas del mismo color en filas
     contiguas—. Por eso «En curso» pasa a turquesa: es la única familia que
     queda libre entre el azul del proyecto, el verde de completada, el ámbar
     de revisión y el rojo de bloqueada.

     Y «Pendiente» se va a un gris limpio, sin nada de azul: antes era un
     gris azulado que parecía una versión desvaída de «En curso». */
  --bar-proyecto:#3b74d4; --bar-proyecto-borde:#2a58a6;
  --bar-pendiente:#aeb6c2;
  --bar-curso:#0e9c9c;
  --bar-revision:#e0921f;
  --bar-bloqueada:#c0392b;
  --bar-completada:#3f9d6b;
  --bar-cancelada:#c9d1dc;

  --gantt-label-w:220px;
  --gantt-fecha-w:82px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:var(--navy-700)}

/* ============================ LAYOUT ==================================== */
.layout{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--navy); color:#eef2f8;
  display:flex; flex-direction:column; gap:20px; padding:24px 16px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px}
.brand .logo{
  width:34px;height:34px;border-radius:9px;background:var(--green);
  color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:15px;flex-shrink:0;
}
.brand b{display:block;font-size:14.5px;font-weight:650;color:#fff;line-height:1.2}
.brand span{display:block;font-size:11.5px;color:#9fb1cb;margin-top:2px}

.nav-section{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:#7e91ad;font-weight:600;padding:0 12px;margin-bottom:-8px;
}
.nav{display:flex;flex-direction:column;gap:3px}
.nav-item{
  display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:10px;
  color:#c2cddd;font-size:13.5px;font-weight:500;text-align:left;width:100%;
  transition:background .12s,color .12s;
}
.nav-item .ic{width:18px;text-align:center;opacity:.85;flex-shrink:0}
.nav-item .count{
  margin-left:auto;font-size:11px;font-weight:600;background:#22406f;
  color:#a9bdd8;padding:1px 7px;border-radius:20px;
}
.nav-item:hover{background:#22406f}
.nav-item.active{background:var(--navy-700);color:#fff;font-weight:600}
.nav-item.active .ic{color:var(--green);opacity:1}
.nav-item.active .count{background:var(--green);color:var(--navy)}

.sidebar-foot{margin-top:auto;padding:14px 12px 0;border-top:1px solid #2b4a7a}
.sidebar-foot .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#7e91ad;font-weight:600;margin-bottom:7px}
.sidebar-foot select{
  width:100%;background:#22406f;border:1px solid #33578c;color:#e8eef7;
  padding:8px 10px;border-radius:9px;font-size:12.5px;
}
/* Con sesión iniciada el usuario no se elige: se muestra. Mismo hueco y
   mismo peso visual que el desplegable para que el pie no baile. */
.sidebar-foot .user-fixed{
  display:flex;align-items:center;gap:8px;
  background:#22406f;border:1px solid #33578c;color:#e8eef7;
  padding:8px 10px;border-radius:9px;font-size:12.5px;font-weight:600;
}
.sidebar-foot .user-fixed .avatar{background:#33578c;color:#e8eef7;width:22px;height:22px;font-size:9.5px}
.sidebar-foot .ver{font-size:10.5px;color:#6d81a0;margin-top:12px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:18px 28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;
}
.topbar-title h1{font-size:19px}
.topbar-title p{margin:3px 0 0;font-size:12.5px;color:var(--text-2)}
.topbar-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.content{padding:24px 28px 56px;flex:1}

/* ============================ BOTONES =================================== */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-sm);
  font-size:13px;font-weight:550;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);transition:background .12s,border-color .12s,box-shadow .12s;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-soft);border-color:var(--grey)}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-danger{color:var(--red);border-color:#e9c9c7}
.btn-danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn-icon{padding:6px 8px;border-radius:8px;border-color:transparent;background:transparent;color:var(--text-2);line-height:1}
.btn-icon:hover{background:var(--navy-soft);color:var(--navy)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ============================ TARJETAS KPI ============================== */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
/* La tarjeta ENTERA lleva el color de su estado. Antes era blanca con un
   punto de color: el punto se perdía y las cinco tarjetas se leían como una
   fila indistinta. Tiñendo el fondo, el estado se reconoce sin leer nada.

   Los tonos son las versiones suaves de la paleta, no los saturados: cinco
   tarjetas a todo color competirían con los datos en lugar de ordenarlos. */
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:16px 18px;box-shadow:var(--shadow);
}
.kpi.t-grey {background:#eef2f7;border-color:#d8e0ea}
.kpi.t-navy {background:var(--navy-soft);border-color:#cfdaea}
.kpi.t-green{background:var(--green-soft);border-color:#c2e6d3}
.kpi.t-amber{background:var(--amber-soft);border-color:#f0dfb2}
.kpi.t-red  {background:var(--red-soft);border-color:#f5cccc}

.kpi .k-label{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--text-2);font-weight:550;
  text-transform:uppercase;letter-spacing:.05em;
}
/* El número toma el tono fuerte del estado: con el fondo ya teñido, es lo
   que da el contraste que antes ponía el punto. */
.kpi.t-navy  .k-value{color:var(--navy)}
.kpi.t-green .k-value{color:var(--green-deep)}
.kpi.t-amber .k-value{color:var(--amber-deep)}
.kpi.t-grey  .k-label,
.kpi.t-navy  .k-label{color:var(--navy-700)}
.kpi.t-green .k-label{color:var(--green-deep)}
.kpi.t-amber .k-label{color:var(--amber-deep)}
.kpi.t-red   .k-label{color:var(--red)}
/* El rojo es el único que pide actuar hoy, así que también tiñe la cifra. */
.kpi.t-red .k-value{color:var(--red)}
.kpi .k-value{font-size:28px;font-weight:700;line-height:1.15;margin-top:6px;letter-spacing:-.02em}
.kpi .k-hint{font-size:11.5px;color:var(--text-2);margin-top:3px}
.kpi.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s}
.kpi.clickable:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(27,53,93,.12)}

/* ============================ PANELES =================================== */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden;
}
.card-head{
  padding:15px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.card-head h2{font-size:15px}
.card-head .sub{font-size:12.5px;color:var(--text-2)}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:18px}
.card-body.flush{padding:0}

/* ============================ FILTROS =================================== */
.filters{
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  padding:14px 18px;background:var(--surface-soft);border-bottom:1px solid var(--border);
}
.field{display:flex;flex-direction:column;gap:5px;min-width:150px}
.field.grow{flex:1;min-width:200px}
.field label{font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em}
/* Etiqueta de una casilla dentro de un campo: es texto normal, no un rótulo
   de filtro. Sin esta regla heredaría el estilo en mayúsculas de arriba. */
.field label.chk{
  display:flex;align-items:center;gap:8px;padding:8px 0;
  font-size:12.5px;font-weight:500;color:var(--text);
  text-transform:none;letter-spacing:0;white-space:nowrap;cursor:pointer;
}
.field label.chk.tight{padding:3px 0;white-space:normal}
/* Las casillas no deben estirarse al 100% como el resto de controles. */
.field input[type="checkbox"],.field input[type="radio"]{width:auto;accent-color:var(--navy-700)}
.check-list{max-height:150px;overflow-y:auto;border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;background:var(--surface)}
.field select,.field input,.field textarea{
  padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;
  background:var(--surface);font-size:13px;width:100%;
}
.field select:focus,.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(39,73,122,.12);
}
.filters .btn{margin-bottom:1px}

/* ============================ TABLAS ==================================== */
.scroll-x{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
/* La cabecera de columnas iba sobre --surface-soft, casi blanco: los
   rótulos se confundían con las filas y la tabla parecía no tener cabecera.
   Ahora es una banda con su propio tono y borde inferior marcado. */
table.tbl thead th{
  text-align:left;font-size:11px;font-weight:700;color:var(--text);
  text-transform:uppercase;letter-spacing:.06em;padding:11px 14px;
  background:#eaeef4;border-bottom:2px solid var(--border-strong);white-space:nowrap;
}
/* Cabeceras ordenables. La marca «⇅» apagada avisa de que la columna se
   puede pulsar; al ordenar por ella se sustituye por la flecha del sentido. */
table.tbl thead th.sortable{cursor:pointer;user-select:none;transition:color .12s}
table.tbl thead th.sortable:hover{color:var(--navy)}
table.tbl thead th.sorted{color:var(--navy)}
.sort-ic{margin-left:5px;font-size:9px;opacity:.35}
.sortable:hover .sort-ic,.sorted .sort-ic{opacity:1}

table.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-soft)}
table.tbl tbody tr.done .t-title{color:var(--text-2)}
table.tbl tbody tr.cancelled .t-title{color:var(--text-2);text-decoration:line-through}
.t-title{font-weight:550;color:var(--text)}
.t-desc{font-size:11.5px;color:var(--text-2);margin-top:2px;max-width:420px}
.cell-actions{text-align:right;white-space:nowrap}
.nowrap{white-space:nowrap}
.num{text-align:center;font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.tiny{font-size:11.5px}

/* ============================ CHIPS / TONOS ============================= */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.tone-grey{background:var(--grey-l);color:#55637a}
.tone-muted{background:#f0f2f6;color:#96a2b3}
.tone-navy{background:var(--navy-soft);color:var(--navy)}
.tone-green{background:var(--green-soft);color:var(--green-deep)}
.tone-amber{background:var(--amber-soft);color:var(--amber-deep)}
.tone-red{background:var(--red-soft);color:var(--red)}

.tag{
  display:inline-block;padding:2px 8px;border-radius:var(--r-xs);background:var(--surface-soft);
  border:1px solid var(--border);font-size:10.5px;color:var(--text-2);font-weight:550;margin-right:4px;
}

/* Alertas automáticas de proyecto: van juntas y compactas, para que se lean
   de un vistazo como una sola frase al lado del estado. */
.alerts{display:flex;flex-wrap:wrap;gap:4px}
.alerts .chip{font-size:10.5px;padding:2px 7px}
.th-note{font-weight:500;text-transform:none;letter-spacing:0;font-size:10px;opacity:.65}

/* Selector de ámbito «Mis tareas / Todo el equipo». */
.segmented{display:inline-flex;background:var(--surface-soft);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:2px}
.segmented button{
  padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-2);
  transition:background .12s,color .12s;white-space:nowrap;
}
.segmented button:hover{color:var(--text)}
.segmented button.on{background:var(--navy);color:#fff;box-shadow:0 1px 3px rgba(27,53,93,.18)}
.segmented button b{font-weight:700;opacity:.65;margin-left:2px}
.segmented button.on b{opacity:.8}
.seg-ic{font-size:11px;opacity:.8}

/* Cabeceras de sección de «Mis tareas». Son filas de la misma tabla, para
   que las columnas de los dos bloques queden alineadas.

   Los dos tonos salen de la misma familia, sin tocar los colores que ya
   significan algo (verde = completada, ámbar = alerta, rojo = vencida):
   gris neutro para lo personal, azul de marca para lo de proyecto. */
table.tbl tbody tr.tblock > td{
  padding:9px 18px;border-bottom:1px solid var(--border);
}
table.tbl tbody tr.tblock:hover{background:inherit}
.tblock .tb-ic{font-size:11px;margin-right:9px;vertical-align:1px}
.tblock .tb-name{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.tblock .tb-sub{font-size:11px;margin-left:10px;opacity:.75}

/* Las DOS tienen que leerse como una banda. «Personales» iba sobre
   --surface-soft, que es casi blanco: al lado de las filas normales no se
   distinguía y la sección parecía no tener cabecera. */
.tblock.personales > td{background:#e2e7ee;color:var(--text)}
.tblock.personales .tb-ic{color:var(--text-2)}

.tblock.proyectos > td{background:#dae4f5;color:var(--navy)}
.tblock.proyectos .tb-ic{color:var(--navy-700)}

/* Ficha de persona. */
.pf-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.pf-who{flex:1;min-width:0}
.pf-who b{display:block;font-size:14px;font-weight:600}
/* El proyecto, bajo el título de la tarea: en la ficha de una persona sus
   tareas cruzan varios proyectos y sin esto no se sabe de cuál es cada una. */
.tl-proj{display:block;font-size:10.5px;color:var(--text-3);font-weight:500;margin-top:1px}
.tl-row .tl-title{white-space:normal;line-height:1.3}

/* Aviso de copia de seguridad. */
.backup-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--amber-soft);border:1px solid #eccf8e;
  border-radius:var(--r-sm);padding:12px 16px;margin-bottom:20px;font-size:12.5px;color:#7a5a12;
}
.backup-banner b{color:var(--amber-deep)}
.backup-banner .acciones{margin-left:auto;display:flex;gap:8px}
.backup-note{
  font-size:10.5px;line-height:1.5;color:#9fb1cb;background:#22406f;
  border-radius:8px;padding:9px 11px;margin-top:10px;
}
.backup-note b{color:var(--amber);font-weight:650}
.overdue{color:var(--red);font-weight:600}
.overdue-pill{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--r-xs);
  background:var(--red-soft);color:var(--red);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}

.avatar{
  width:26px;height:26px;border-radius:50%;background:var(--navy-soft);color:var(--navy);
  display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0;
}
.avatar.lg{width:44px;height:44px;font-size:15px}
.avatar.off{background:var(--grey-l);color:var(--grey)}
.person{display:flex;align-items:center;gap:8px}

/* Selector de estado embebido en tabla y kanban */
.state-select{
  border:1px solid var(--border-strong);border-radius:20px;padding:3px 8px;
  font-size:11.5px;font-weight:600;background:var(--surface);cursor:pointer;max-width:132px;
}
.state-select:focus{outline:none;border-color:var(--navy-700)}

/* ============================ PROGRESO ================================== */
.progress{height:7px;border-radius:20px;background:var(--grey-l);overflow:hidden;min-width:80px;flex:1}
.progress > i{display:block;height:100%;border-radius:20px;background:var(--green-deep);transition:width .25s}
.progress.warn > i{background:var(--amber)}
.progress.bad > i{background:var(--red)}
.progress-wrap{display:flex;align-items:center;gap:9px;min-width:96px}
.progress-wrap b{font-size:12px;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

/* ============================ KANBAN ==================================== */
/* --cols lo fija la vista (5 columnas, o 6 al mostrar las canceladas). */
.kanban{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(200px,1fr));gap:14px;align-items:start}
.kb-col{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--r-card);display:flex;flex-direction:column;min-height:160px}
.kb-col.over{background:var(--navy-soft);border-color:var(--navy-700);border-style:dashed}
.kb-col-head{
  padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;
  background:var(--surface-soft);border-radius:var(--r-card) var(--r-card) 0 0;
}
.kb-col-head .name{font-size:12.5px;font-weight:650}
.kb-col-head .n{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-2);background:var(--surface);border:1px solid var(--border);padding:1px 8px;border-radius:20px}
.kb-cards{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:70px}
.kb-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 12px;box-shadow:0 1px 2px rgba(27,53,93,.05);cursor:grab;
}
.kb-card:active{cursor:grabbing}
.kb-card.dragging{opacity:.4;border-style:dashed}

.kb-title{font-size:13px;font-weight:600;line-height:1.35;margin-bottom:5px}
.kb-proj{font-size:11.5px;color:var(--text-2);line-height:1.4;margin-bottom:10px}

/* Prioridad y fecha a la izquierda; quién lleva la tarea, a la derecha.
   Sin botones: la tarjeta entera se pulsa para abrirla. */
.kb-foot{display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px solid var(--border)}
.kb-due{white-space:nowrap}
.kb-people{margin-left:auto;display:flex;flex-shrink:0}
/* Preparado para varias personas: los avatares se solapan como en Trello. */
.kb-people .avatar{width:24px;height:24px;font-size:10px;margin-left:-6px;border:2px solid var(--surface)}
.kb-people .avatar:first-child{margin-left:0}
.kb-empty{padding:14px;text-align:center;font-size:11.5px;color:var(--grey)}

/* ============================ CRONOGRAMA ================================ */
.gantt{min-width:960px;position:relative}
/* Cuatro columnas: nombre · inicio · fin · línea de tiempo. Las fechas van
   en texto además de en la barra: leer «12 sep» es inmediato, deducirlo de
   la posición de una barra no lo es. */
.gantt-head{
  display:grid;
  grid-template-columns:var(--gantt-label-w) var(--gantt-fecha-w) var(--gantt-fecha-w) 1fr;
  border-bottom:1px solid var(--border-strong);background:var(--surface);
}
.gantt-head .gh-label,
.gantt-head .gh-fecha{
  padding:9px 10px;font-size:10.5px;font-weight:650;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.05em;
}
.gantt-head .gh-label{padding-left:14px}
.gantt-scale{display:flex;flex-direction:column;min-width:0}
.gantt-months{position:relative;height:26px}
.gantt-month{
  position:absolute;top:0;bottom:0;border-left:1px solid var(--border);
  padding:7px 0 0 8px;font-size:11px;font-weight:600;color:var(--text-2);
  text-transform:capitalize;overflow:hidden;white-space:nowrap;
}
/* Marcas de día: sin ellas no se sabe a qué altura del mes cae una barra. */
.gantt-days{position:relative;height:17px;border-top:1px solid var(--border)}
.gantt-day{
  position:absolute;top:0;padding-left:3px;
  font-size:9.5px;line-height:17px;color:var(--text-3);
  border-left:1px solid var(--border);
}

/* Flechas para moverse en el tiempo sin cambiar de escala. */
.tl-nav{display:flex;gap:5px;align-items:center}
.tl-nav .btn{min-width:30px;justify-content:center}
.tl-nav .btn.on{color:var(--text-3)}
.gantt-body{position:relative}
/* La capa de fondo empieza donde empieza la línea de tiempo, es decir tras
   las tres columnas de texto. */
.gantt-layer{
  position:absolute;top:0;bottom:0;right:0;pointer-events:none;z-index:0;
  left:calc(var(--gantt-label-w) + var(--gantt-fecha-w) * 2);
}
.gantt-line{position:absolute;top:0;bottom:0;width:1px;background:var(--border)}
/* En la vista de un mes hay una línea por día: tienen que ser mucho más
   tenues o el fondo se convierte en una rejilla ilegible. */
.gantt-line.dia{background:var(--border);opacity:.45}
.gantt-today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);opacity:.55}
.gantt-today::after{
  content:'HOY';position:absolute;top:2px;left:4px;font-size:9px;font-weight:800;
  color:var(--red);letter-spacing:.06em;
}
.gantt-row{
  display:grid;
  grid-template-columns:var(--gantt-label-w) var(--gantt-fecha-w) var(--gantt-fecha-w) 1fr;
  border-bottom:1px solid var(--border);position:relative;z-index:1;
}
.gantt-row:hover{background:rgba(234,238,245,.55)}
.gantt-row.project-row{background:var(--surface-soft)}
.gantt-row.project-row:hover{background:var(--navy-soft)}
.gl{padding:9px 14px;display:flex;align-items:center;gap:8px;min-width:0}
.gl .gl-name{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt-row.project-row .gl-name{font-weight:650}
.gantt-row.task-row .gl{padding-left:30px}

.gantt-fecha{
  padding:9px 10px;display:flex;align-items:center;
  font-size:11px;color:var(--text-2);white-space:nowrap;
  border-left:1px solid var(--border);
}
.gantt-row.project-row .gantt-fecha{font-weight:600;color:var(--text)}
.gantt-fecha.overdue{color:var(--red);font-weight:600}
.gantt-track{position:relative;height:38px}
.gantt-bar{
  position:absolute;top:9px;height:20px;border-radius:6px;min-width:6px;
  display:flex;align-items:center;padding:0 7px;font-size:10.5px;font-weight:600;
  color:#fff;overflow:hidden;white-space:nowrap;cursor:default;
}
/* El proyecto es un CONTENEDOR: va en azul sólido, más alto que las tareas
   y con el texto en blanco. Lo que lo separa de las tareas ya no es el color
   —ninguna tarea es azul— sino el tamaño y el peso. */
.gantt-bar.b-project{
  background:var(--bar-proyecto);border:1px solid var(--bar-proyecto-borde);
  color:#fff;font-weight:700;top:6px;height:26px;
}
.gantt-bar.b-grey  {background:var(--bar-pendiente)}
.gantt-bar.b-navy  {background:var(--bar-curso)}
.gantt-bar.b-amber {background:var(--bar-revision)}
.gantt-bar.b-red   {background:var(--bar-bloqueada)}
.gantt-bar.b-green {background:var(--bar-completada)}
.gantt-bar.b-muted {background:var(--bar-cancelada);color:var(--text-2)}

/* Vencida es un ATRIBUTO, no un estado: antes pintaba la barra de rojo y se
   perdía el estado real, además de confundirse con «Bloqueada». Ahora la
   barra conserva su color y se le añade un contorno rojo. */
.gantt-bar.vencida{box-shadow:0 0 0 2px var(--red)}
.milestone{
  position:absolute;top:12px;width:14px;height:14px;background:var(--amber);
  border:2px solid #fff;border-radius:2px;transform:rotate(45deg);margin-left:-7px;
  box-shadow:0 0 0 1px var(--amber-deep);
}
.gantt-legend{display:flex;gap:16px;flex-wrap:wrap;padding:14px 18px 0;font-size:11.5px;color:var(--text-2)}
.gantt-legend span{display:inline-flex;align-items:center;gap:6px}
.gantt-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ============================ EQUIPO ==================================== */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.person-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:14px;
}
.person-card.inactive{opacity:.62}
.pc-head{display:flex;align-items:flex-start;gap:12px}
.pc-head .who{flex:1;min-width:0}
.pc-head .who b{display:block;font-size:14.5px;font-weight:650}
.pc-head .who .role{font-size:12px;color:var(--text-2);margin-top:1px}
.pc-head .who .mail{font-size:11.5px;color:var(--navy-700);margin-top:4px;word-break:break-all}
.pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.pc-stats div{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 4px}
.pc-stats b{display:block;font-size:17px;font-weight:700;line-height:1.2}
.pc-stats span{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.pc-stats .st-red b{color:var(--red)}
.pc-stats .st-green b{color:var(--green-deep)}
.pc-projects{font-size:11.5px;color:var(--text-2)}
.pc-projects .lbl{font-weight:650;text-transform:uppercase;font-size:10px;letter-spacing:.05em;display:block;margin-bottom:5px}
.pc-foot{display:flex;gap:7px;padding-top:12px;border-top:1px solid var(--border);margin-top:auto}

/* ============================ MODAL ===================================== */
.overlay{
  position:fixed;inset:0;background:rgba(21,36,60,.5);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;
  z-index:100;overflow-y:auto;
}
.modal{
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-lg);
  width:100%;max-width:680px;overflow:hidden;animation:pop .16s ease-out;
}
.modal.sm{max-width:440px}
/* Las fichas crecen 320 px respecto a la columna principal para que la
   conversación de la derecha pase de 320 a 640: se dobla el espacio de los
   comentarios sin robarle ni un píxel al contenido de la izquierda.
   El centrado lo sigue haciendo el .overlay (flex + justify-content:center). */
.modal.lg{max-width:1200px}
.modal.xl{max-width:1360px}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.modal-head h3{font-size:16px;min-width:0}
.modal-head h3 .sub{font-size:12px;font-weight:500;color:var(--text-2);margin-left:6px}
.modal-head .btn-icon{margin-left:auto;font-size:18px}
.modal-body{padding:20px 22px;max-height:calc(100vh - 240px);overflow-y:auto}
.modal-foot{
  padding:15px 22px;border-top:1px solid var(--border);background:var(--surface-soft);
  display:flex;gap:9px;justify-content:flex-end;
}
.modal-foot .left{margin-right:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.form-grid textarea{resize:vertical;min-height:70px}
.form-err{color:var(--red);font-size:12px;margin-top:10px;font-weight:550}
.hint{font-size:11px;color:var(--text-2);margin-top:4px}

/* ---------------------- FICHAS A DOS COLUMNAS -------------------------
   Ficha de tarea (campos + conversación) y ficha de proyecto (datos y sus
   tareas + alertas, resumen y equipo). Misma estructura para las dos. */
/* Cada columna se desplaza por su cuenta: si scrollasen juntas, al bajar por
   la lista de tareas se perderían de vista las alertas y el resumen. */
.modal-body.split{padding:0;display:grid;grid-template-columns:minmax(0,1fr) 640px;overflow:hidden}
.split-main{padding:20px 22px;min-width:0;overflow-y:auto;max-height:calc(100vh - 240px)}
.split-side{
  background:var(--surface-soft);border-left:1px solid var(--border);
  padding:20px 18px 24px;min-width:0;overflow-y:auto;max-height:calc(100vh - 240px);
}
.side-lbl{
  font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.09em;margin-bottom:9px;
}
.side-person{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0}

/* Título grande y editable de la ficha de tarea. */
.detail-title{
  width:100%;font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--text);
  border:1px solid transparent;border-radius:var(--r-sm);padding:8px 10px;
  margin:-8px 0 16px -10px;background:transparent;
}
.detail-title:hover{background:var(--surface-soft)}
.detail-title:focus{outline:none;background:var(--surface);border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(39,73,122,.12)}

/* Piezas de la ficha de proyecto (lectura). */
.detail-chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-bottom:18px}
.detail-block{margin-bottom:20px}
.link{
  color:var(--navy-700);font-size:inherit;font-weight:600;text-decoration:underline;
  padding:0;background:none;border:0;
}

/* Avance frente a plazo consumido. Las dos barras juntas son la lectura
   real del proyecto: un 20 % no dice nada sin saber cuánto plazo se ha ido. */
.pj-progress{
  background:var(--surface-soft);border:1px solid var(--border);
  border-radius:var(--r-card);padding:14px 16px;margin-bottom:18px;
}
.pp-row{display:flex;align-items:center;gap:10px}
.pp-row + .pp-row{margin-top:9px}
.pp-lbl{
  width:118px;flex-shrink:0;font-size:10.5px;font-weight:650;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.05em;
}
.pp-bar{flex:1;height:9px;border-radius:20px;background:var(--grey-l);overflow:hidden}
.pp-bar > i{display:block;height:100%;border-radius:20px;background:var(--green-deep);transition:width .25s}
.pp-bar.late > i{background:var(--red)}
.pp-bar.time > i{background:var(--navy-700);opacity:.45}
.pp-row b{min-width:42px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.pp-note{font-size:11.5px;color:var(--text-2);margin:10px 0 0 128px}

/* Cronología: inicio → hoy → hito → objetivo en una sola línea. */
.pj-timeline{margin-bottom:18px}
.tl-track{position:relative;height:8px;border-radius:20px;background:var(--grey-l);margin:20px 0 9px}
.tl-fill{position:absolute;top:0;bottom:0;left:0;border-radius:20px;background:var(--navy);opacity:.22}
.tl-today{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--red)}
.tl-today::after{
  content:'HOY';position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:8.5px;font-weight:800;color:var(--red);letter-spacing:.06em;
}
.tl-mile{
  position:absolute;top:-3px;width:14px;height:14px;margin-left:-7px;
  background:var(--amber);border:2px solid var(--surface);border-radius:3px;
  transform:rotate(45deg);box-shadow:0 0 0 1px var(--amber-deep);
}
.tl-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--text-2)}
.tl-ends b{font-weight:650;color:var(--text)}

/* Próximo hito, destacado como una línea propia. */
.pj-hito{
  display:flex;align-items:center;gap:10px;font-size:13px;
  background:var(--amber-soft);border:1px solid #eccf8e;border-radius:var(--r-sm);
  padding:10px 13px;margin-bottom:18px;
}
.pj-hito.vencido{background:var(--red-soft);border-color:#e9c9c7}
.pj-hito-ic{color:var(--amber-deep);font-size:11px}
.pj-hito.vencido .pj-hito-ic{color:var(--red)}

/* Cliente, responsable y equipo en una sola banda compacta. Cada dato en su
   propia tarjeta: separa visualmente los tres y refuerza que el texto grande
   es el dato y el pequeño de arriba es su rótulo. */
.pj-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.pj-meta.dos{grid-template-columns:repeat(2,1fr)}
/* Equipo en varias columnas: en la columna principal cabe de sobra y así no
   se convierte en una lista larga. */
.pj-equipo{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px}
.pj-meta > div{
  background:var(--surface-soft);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:10px 13px;min-width:0;
}
.avatars{display:flex;padding-top:2px}
.avatars .avatar{margin-right:-7px;border:2px solid var(--surface)}

/* Chips de filtro del listado de tareas. */
.tl-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.tl-filters button{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;
  border:1px solid var(--border-strong);background:var(--surface);
  font-size:11.5px;font-weight:600;color:var(--text-2);transition:all .12s;
}
.tl-filters button:hover{border-color:var(--grey);color:var(--text)}
.tl-filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.tl-filters button.cero{opacity:.5}
.tl-filters button b{font-weight:700;opacity:.7}
/* Rótulo y dato tienen que distinguirse a simple vista. El rótulo va
   pequeño, claro y espaciado; el dato, grande y oscuro. Sin ese contraste
   los dos se leen como el mismo párrafo, que es justo lo que pasaba. */
.detail-lbl{
  font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.09em;display:block;margin-bottom:4px;
}
.detail-lbl-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.detail-lbl-row .detail-lbl{margin-bottom:0}
.detail-lbl-row .btn{margin-left:auto}
.detail-val{font-size:14px;font-weight:550;color:var(--text);line-height:1.45}
.detail-text{margin:0;font-size:13.5px;font-weight:400;line-height:1.65;white-space:pre-wrap}
/* Un texto largo se lee mejor como bloque citado que como un dato más. */
.detail-text.note{
  background:var(--surface-soft);border-left:3px solid var(--border-strong);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 14px;
}

/* Listado de tareas dentro de la ficha de proyecto. */
.task-list{display:flex;flex-direction:column;gap:6px}
.tl-row{
  display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  transition:border-color .12s,background .12s;
}
.tl-row:hover{border-color:var(--border-strong);background:var(--surface-soft)}
.tl-row.cerrada{opacity:.55}
.tl-title{flex:1;min-width:0;font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
/* Celdas de ancho fijo: son las que permiten que la cabecera ordenable quede
   alineada justo encima de lo que ordena. */
.tl-com{width:32px;flex-shrink:0;text-align:right}
.tl-c-est{width:106px;flex-shrink:0}
.tl-c-pri{width:88px;flex-shrink:0}
.tl-date{width:52px;flex-shrink:0;text-align:right}

/* Cabecera del listado de tareas de la ficha. */
.tl-head{
  display:flex;align-items:center;gap:9px;padding:2px 11px 6px;
  border-bottom:1px solid var(--border);margin-bottom:7px;
}
.tl-head-gap{width:26px;flex-shrink:0}
.tl-head button{
  display:inline-flex;align-items:center;gap:4px;padding:0;
  font-size:10px;font-weight:600;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.09em;
}
.tl-head button:hover{color:var(--navy)}
.tl-head button.sorted{color:var(--navy);font-weight:700}
.tl-head .tl-date{justify-content:flex-end}

/* Buscador dentro de la ficha. */
.tl-search{
  width:100%;padding:8px 11px;margin-bottom:9px;font-size:12.5px;
  border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);
}
.tl-search:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(39,73,122,.12)}
/* KPI del lateral: son el filtro del listado, así que se comportan como
   botones y marcan cuál está activo. */
.pc-stats.clickable div{cursor:pointer;transition:background .12s,border-color .12s}
.pc-stats.clickable div:hover{border-color:var(--navy-700)}
.pc-stats.clickable div.on{background:var(--navy);border-color:var(--navy)}
.pc-stats.clickable div.on b,.pc-stats.clickable div.on span{color:#fff}
/* Alertas que llevan a un filtro del listado. */
.alerts .chip[data-filtro]{cursor:pointer}
.alerts .chip[data-filtro]:hover{box-shadow:0 0 0 2px rgba(27,53,93,.15)}

/* Conversación y fechas de la ficha de tarea. */
.comments{display:flex;flex-direction:column;gap:9px;margin-bottom:4px}
.comment{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px}
.comment .meta{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--text-2);margin-bottom:5px;font-weight:600}
.comment .meta .avatar{width:20px;height:20px;font-size:9px}
.comment p{margin:0;font-size:12.5px;white-space:pre-wrap;line-height:1.5}
.comment .meta em{font-style:normal;color:var(--text-3)}

/* Editar y borrar. Los botones se ven siempre, no sólo al pasar el ratón:
   en pantalla táctil no hay «pasar el ratón» y quedarían inalcanzables. */
.com-actions{margin-left:auto;display:flex;gap:2px;flex-shrink:0}
.com-actions button{
  padding:2px 5px;border-radius:6px;font-size:11px;line-height:1;
  color:var(--text-3);transition:background .12s,color .12s;
}
.com-actions button:hover{background:var(--navy-soft);color:var(--navy)}

.comment.editando{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(39,73,122,.10)}
.comment textarea{
  width:100%;padding:8px 10px;font-size:12.5px;line-height:1.5;
  border:1px solid var(--border-strong);border-radius:8px;
  resize:vertical;background:var(--surface);
}
.comment textarea:focus{outline:none;border-color:var(--navy-700)}
.com-foot{display:flex;justify-content:flex-end;gap:7px;margin-top:7px}
.comment-add{margin-bottom:14px}
.comment-add input{
  width:100%;padding:8px 10px;border:1px solid var(--border-strong);
  border-radius:8px;background:var(--surface);font-size:12.5px;margin-bottom:7px;
}
.comment-add input:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(39,73,122,.12)}
.comment-add .btn{width:100%;justify-content:center}
.act{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--text-2);padding:3px 0}
.act b{margin-left:auto;font-weight:600;color:var(--text);white-space:nowrap}

/* Registro de actividad: quién, qué y hace cuánto, una línea por hecho. */
.act-list{display:flex;flex-direction:column;gap:11px}
.act-item{display:flex;gap:8px;align-items:flex-start}
.act-item .avatar{width:22px;height:22px;font-size:9px;margin-top:1px}
.act-body{min-width:0;display:flex;flex-direction:column}
.act-text{font-size:11.5px;line-height:1.45;color:var(--text-2);word-break:break-word}
.act-text b{color:var(--text);font-weight:600}
.act-when{font-size:10.5px;color:var(--text-3);margin-top:2px}

/* ============================ VARIOS ==================================== */
.empty{padding:44px 20px;text-align:center;color:var(--text-2)}
.empty .ic{font-size:32px;opacity:.35;display:block;margin-bottom:10px}
.empty p{margin:0 0 14px;font-size:13px}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:var(--r-sm);
  font-size:13px;font-weight:550;box-shadow:var(--shadow-lg);z-index:200;
  animation:toastIn .2s ease-out;
}
.toast.err{background:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

.section-title{font-size:12.5px;font-weight:650;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin:22px 0 12px}

/* ============================ RESPONSIVE ================================ */

/* Las fichas a dos columnas pasan a una. El corte está en 1.200 px porque
   con la conversación a 640 px la columna principal necesita unos 520 para
   que su listado de tareas siga siendo legible; por debajo de eso es mejor
   apilar que estrujar. La conversación queda entonces bajo el contenido. */
@media(max-width:1200px){
  .modal-body.split{grid-template-columns:1fr;overflow-y:auto}
  .split-main,.split-side{max-height:none;overflow:visible}
  .split-side{border-left:0;border-top:1px solid var(--border)}
}
@media(max-width:1180px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kanban{grid-template-columns:repeat(3,minmax(230px,1fr))}
}
@media(max-width:940px){
  .detail-grid{grid-template-columns:1fr}
  .pj-meta{grid-template-columns:1fr 1fr}
  .pp-lbl{width:96px}
  .pp-note{margin-left:106px}
}
@media(max-width:900px){
  :root{--sidebar-w:64px}
  .sidebar{padding:20px 10px}
  .brand b,.brand span,.nav-item span,.nav-item .count,.nav-section,.sidebar-foot{display:none}
  .nav-item{justify-content:center}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kanban{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .content,.topbar{padding-left:16px;padding-right:16px}
}
@media print{
  .sidebar,.topbar-actions,.filters,.cell-actions,.btn{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
}

/* ===================== VISIÓN DESARROLLOS ==============================
   El color de este panel lo pone SIEMPRE el estado del proyecto, nunca el
   actor: los cinco actores comparten la identidad verde/azul de Vergy para
   que la vista vaya sola a lo que importa —qué está sin empezar y qué está
   en marcha— en lugar de repartirse entre cinco colores decorativos. */

/* ---- Filtros ---- */
.vd-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.vd-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:7px 14px 7px 11px;font-size:12.5px;
  cursor:pointer;color:var(--text-2);font-weight:500;font-family:inherit;
}
.vd-chip:hover{border-color:var(--border-strong)}
.vd-chip .n{font-weight:700;font-size:11px;color:var(--text-3);background:var(--surface-soft);border-radius:999px;padding:1px 7px}
.vd-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.vd-chip.on .n{background:rgba(255,255,255,.18);color:#fff}
.vd-nota{margin-left:auto;font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.vd-nota i{width:22px;height:9px;border:1px dashed var(--border-strong);border-radius:3px;opacity:.6;display:inline-block}

/* ---- El mapa ----
   Ancho mínimo y desplazamiento horizontal: si el diagrama se estruja, los
   nombres se parten en torres de cuatro líneas y el panel deja de leerse de
   un vistazo, que es justo para lo que existe. */
.vd-mapa{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:26px 28px 28px;margin-bottom:16px;overflow-x:auto;
}
/* El ancho mínimo está calculado para caber en el área de contenido de un
   portátil normal (200 + 28 + 132 + 28 + 200 = 588 más el relleno). Si se
   pone más alto, el diagrama obliga a hacer scroll lateral SIEMPRE, y un
   panel que hay que desplazar para verlo entero deja de servir para lo que
   existe: mirarlo de un vistazo. */
.vd-rejilla{
  display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr);
  gap:22px 28px;align-items:start;min-width:660px;
}
/* Partner y Microinversor ocupan toda la fila y se centran. Si se dejaran
   en la columna del logo la ensancharían a su ancho, y el diagrama entero
   pasaría de 590 a 950 px: la causa de que hubiera que hacer scroll siempre. */
.c-arriba   {grid-column:1/-1;grid-row:1;justify-self:center;width:min(320px,100%)}
.c-izquierda{grid-column:1;grid-row:2}
.c-centro   {grid-column:2;grid-row:2;justify-self:center;align-self:center}
.c-derecha  {grid-column:3;grid-row:2}
.c-abajo    {grid-column:1/-1;grid-row:3;justify-self:center;width:min(320px,100%)}

/* El eje: una cruz fina por detrás del logo, que lo une a los cuatro actores. */
.vd-hub{position:relative;width:132px;height:132px;display:grid;place-items:center}
.vd-hub::before,.vd-hub::after{content:'';position:absolute;background:var(--border-strong)}
.vd-hub::before{left:-30px;right:-30px;top:50%;height:1px}
.vd-hub::after{top:-24px;bottom:-24px;left:50%;width:1px}
.vd-hub .circulo{
  position:relative;z-index:1;width:132px;height:132px;border-radius:50%;
  background:var(--surface);border:2px solid var(--green);
  display:grid;place-items:center;box-shadow:0 0 0 8px var(--green-soft);
}
.vd-hub .dentro{text-align:center}
.vd-hub .marca{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
.vd-hub .marca span{color:var(--green-deep)}
.vd-hub .pie{font-size:10px;color:var(--text-3);margin-top:2px;letter-spacing:.04em;text-transform:uppercase}

/* ---- Tarjeta de actor ---- */
.vd-actor{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
/* La cabecera envuelve en lugar de recortar: en una tarjeta estrecha, los
   recuentos bajan a una segunda línea y el nombre del actor se lee entero.
   Cortar «Consumidor» en «Consu…» para que quepan tres cifras es cambiar lo
   importante por lo accesorio. */
.vd-actor-cab{display:flex;align-items:center;gap:11px 8px;flex-wrap:wrap;padding:13px 15px;background:var(--green-soft);border-bottom:1px solid #d5ecdf}
.vd-actor-cab .ico{
  width:34px;height:34px;border-radius:10px;background:var(--surface);
  display:grid;place-items:center;font-size:17px;flex-shrink:0;
  box-shadow:0 1px 2px rgba(27,53,93,.08);
}
.vd-actor-cab .txt{flex:1 1 auto;min-width:96px}
.vd-actor-cab .nom{display:block;font-weight:700;font-size:13.5px;color:var(--navy);line-height:1.25}
.vd-actor-cab .tot{display:block;font-size:11px;color:var(--text-2);margin-top:1px;white-space:nowrap}
.vd-cuenta{margin-left:auto;display:flex;gap:5px;flex-shrink:0}
.vd-cuenta b{
  display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;
  background:var(--surface);border-radius:var(--r-xs);padding:3px 7px;color:var(--text-2);
}
.vd-cuenta b.cero{opacity:.35}

/* ---- Fila de proyecto ---- */
.vd-proys{padding:8px;display:flex;flex-direction:column;gap:3px}
.vd-proy{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 10px;border-radius:var(--r-sm);border:1px solid transparent;
  background:none;font:inherit;font-size:12.5px;line-height:1.35;color:var(--text);cursor:pointer;
}
.vd-proy:hover{background:var(--surface);border-color:var(--border)}
.vd-proy .est{font-size:13px;line-height:1;flex-shrink:0;width:16px;text-align:center}
.vd-proy.pausado .est{opacity:.5}
/* No participas: se lee el nombre y nada más. Ni cursor de mano, ni hover. */
.vd-proy.ajeno{color:var(--text-3);cursor:default}
.vd-proy.ajeno:hover{background:transparent;border-color:transparent}
.vd-proy.ajeno .est{opacity:.45}
.vd-proy.ajeno .cerrado{margin-left:auto;font-size:10px;opacity:.5;flex-shrink:0}
.vd-vacio{margin:0;padding:14px 10px;font-size:11.5px;color:var(--text-3);font-style:italic;text-align:center}

/* ---- Franjas de ancho completo (Gestión genérica, Sin clasificar) ---- */
.vd-franja{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;
}
.vd-franja .vd-actor-cab{background:var(--navy-soft);border-bottom-color:#dbe3ef}
.vd-franja .cols{padding:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px 14px}
.vd-franja.pendiente .vd-actor-cab{background:var(--amber-soft);border-bottom-color:#f0e0bb}
.vd-aviso{margin:0;padding:11px 15px 0;font-size:11.5px;color:var(--text-2);line-height:1.5}

@media (max-width:880px){
  .vd-nota{margin-left:0;width:100%}
}

/* ---- Comentarios largos ----
   El degradado del final avisa de que hay más texto debajo sin necesidad de
   leer el botón. Al desplegar se quita el tope y el degradado. */
.com-cuerpo{position:relative}
.com-cuerpo .recortado{
  max-height:132px;overflow:hidden;margin:0;
  -webkit-mask-image:linear-gradient(180deg,#000 92px,transparent 132px);
          mask-image:linear-gradient(180deg,#000 92px,transparent 132px);
}
.com-cuerpo.abierto .recortado{max-height:none;-webkit-mask-image:none;mask-image:none}
.com-mas{
  display:inline-block;margin-top:4px;padding:2px 0;
  background:none;border:0;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--navy);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.com-mas:hover{color:var(--navy-700)}

/* ---- Selector de modo: listado o tablero ----
   Reutiliza .segmented (el de «Todas · Personales · De proyectos») para que
   los dos selectores de una misma cabecera se lean como hermanos. */
.segmented.vista{flex-shrink:0}
.segmented.vista button{white-space:nowrap}

/* ---- Barra de avance en la tarjeta de proyecto del tablero ---- */
.kb-avance{display:flex;align-items:center;gap:8px;margin-top:8px}
.kb-avance .barra{
  flex:1;height:5px;border-radius:999px;background:var(--grey-l);overflow:hidden;
}
.kb-avance .barra i{display:block;height:100%;background:var(--green-deep);border-radius:999px}
.kb-avance b{font-size:11px;font-weight:700;color:var(--text-2);min-width:30px;text-align:right}

/* ===================== NOTIFICACIONES ================================== */

/* El contador de avisos no es informativo como los demás: cuando aparece,
   hay algo que hacer. Por eso va en rojo y desaparece en cero. */
.nav-item .count.alerta{background:var(--red);color:#fff;font-weight:700}

.noti-list{display:flex;flex-direction:column}
.noti{
  display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
  border-top:1px solid var(--border);
}
.noti:first-child{border-top:0}
.noti .ic{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;font-size:14px;margin-top:1px;
  background:var(--surface-soft);
}
.noti .ic.tone-navy{background:var(--navy-soft)}
.noti .ic.tone-grey{background:var(--surface-soft)}

/* El cuerpo es el botón: toda la línea abre lo que anuncia el aviso. */
.noti .cuerpo{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
  background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;color:var(--text);
}
.noti .cuerpo:hover .txt{text-decoration:underline;text-underline-offset:2px}
.noti .txt{font-size:13px;line-height:1.45}
.noti .cuando{font-size:11px;color:var(--text-3)}

/* Sin leer: el punto a la izquierda y el fondo tenue. El punto es lo que
   permite barrer la lista de un vistazo sin leer nada. */
.noti.sin-leer{background:var(--navy-soft)}
.noti.sin-leer .txt{font-weight:550}
.noti.sin-leer::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--navy);
  flex-shrink:0;margin-top:14px;margin-left:-6px;
}
.noti:not(.sin-leer) .ic,
.noti:not(.sin-leer) .txt{opacity:.72}

.noti .marcar{
  flex-shrink:0;width:28px;height:28px;border-radius:var(--r-xs);
  background:none;border:1px solid transparent;color:var(--text-3);
  font-size:13px;cursor:pointer;line-height:1;
}
.noti .marcar:hover{border-color:var(--border-strong);background:var(--surface);color:var(--navy)}

/* ---- Plegar proyectos en el cronograma ---- */
/* La flecha se ve SIEMPRE, no sólo al pasar el ratón: con todo plegado por
   defecto, es lo que dice que ahí debajo hay tareas. */
.gl-plegar{
  width:20px;height:20px;flex-shrink:0;padding:0;line-height:1;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs);
  color:var(--navy);font-size:10px;cursor:pointer;
}
.gl-plegar:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.gl-plegar.vacio{cursor:default;visibility:hidden}
.gl-plegadas{
  color:var(--navy);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:999px;padding:0 6px;font-weight:700;white-space:nowrap;flex-shrink:0;
}
/* Plegado: el proyecto sigue leyéndose como cabecera, pero más apagado, para
   que se note que hay algo escondido debajo. */
.gantt-row.project-row.plegado{background:var(--surface-soft);opacity:.9}

/* ---- Columna de nombres ajustable a mano ----
   Los nombres de proyecto reales son largos y 220 px los recorta casi
   siempre. En vez de elegir un ancho fijo mayor —que robaría línea de tiempo
   a quien no lo necesita— se deja que cada uno lo ajuste. */
.gantt-head .gh-label{position:relative}
.gh-tirador{
  position:absolute;top:0;bottom:0;right:-3px;width:7px;
  cursor:col-resize;z-index:3;
}
.gh-tirador::after{
  content:'';position:absolute;top:5px;bottom:5px;left:3px;width:2px;
  background:var(--border-strong);border-radius:2px;opacity:0;transition:opacity .12s;
}
.gh-tirador:hover::after{opacity:1}
/* Durante el arrastre, el cursor manda en toda la página y se desactiva la
   selección de texto: si no, arrastrar acaba seleccionando media tabla. */
body.redimensionando{cursor:col-resize;user-select:none}
body.redimensionando .gh-tirador::after{opacity:1;background:var(--navy)}