/* PM TGI — Identidad visual Titanium Group Investments */
:root {
  --azul-acero: #3C5889;
  --azul-corp: #3C74BB;
  --azul-medio: #6194D7;
  --azul-hielo: #E4E8F0;
  --azul-claro: #B4D2EB;
  --gris-tgi: #7C7C7D;
  --dorado: #D4AF6E;
  --nogal: #5C3D2E;
  --oscuro: #0D1B2E;
  --borde: #D0D8E8;
  --offwhite: #FAFBFC;
  --footer-bg: #F4F6FA;
  --fila-sub: #EAF1FB;
  --f-tit: 'Montserrat', sans-serif;
  --f-cuerpo: 'Lato', sans-serif;
  --f-label: 'IBM Plex Sans', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--f-cuerpo); font-size: 14px; color: var(--azul-acero); background: var(--offwhite); }
/* Pantalla de carga — estilos viven inline en index.html para evitar caché */

/* ---------- Layout ---------- */
#app { display: flex; min-height: 100vh; }
.sidebar {
  width: 210px; min-width: 210px; background: var(--azul-acero); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .logo { background: var(--oscuro); padding: 14px 14px 12px; border-bottom: 2px solid var(--dorado); display: block; text-decoration: none; cursor: pointer; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.nav-sec { font-family: var(--f-label); font-weight: 600; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--azul-medio); padding: 12px 16px 5px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 16px; color: var(--azul-hielo);
  text-decoration: none; font-size: 13px; border-left: 3px solid transparent; cursor: pointer;
}
.nav-item:hover { background: rgba(255,255,255,0.06); }
.nav-item.active { background: rgba(255,255,255,0.1); border-left-color: var(--dorado); color: #fff; font-weight: 700; }
.nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
.sidebar .user-chip {
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 12px;
  display: flex; align-items: center; gap: 8px; color: var(--azul-claro);
}
.user-chip .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--dorado); color: #2A1A00; font-weight: 800; font-family: var(--f-tit); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.user-chip a { color: var(--azul-medio); font-size: 11px; margin-left: auto; cursor: pointer; text-decoration: underline; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hamb { display: none; background: none; border: none; font-size: 22px; line-height: 1; color: var(--azul-acero); cursor: pointer; padding: 2px 8px; margin-right: 2px; }
.nav-backdrop { display: none; }
.sidebar .nav-equipo { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 4px; }

/* ---------- Móvil / tablet ---------- */
@media (max-width: 820px) {
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; min-width: 240px; width: 240px; z-index: 60;
    transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 2px 0 18px rgba(0,0,0,0.28);
  }
  #app.nav-open .sidebar { transform: translateX(0); }
  #app.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(13,21,32,0.5); z-index: 55; }
  .hamb { display: inline-flex; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar h1 { font-size: 15px; }
  .content { padding: 14px; }
  /* !important porque varias pantallas (KPIs de Mis tareas/Seguimiento, gráficas de
     Reporte) fijan grid-template-columns por style inline — sin !important esa regla
     de escritorio gana y las tarjetas quedan apretadas en celular. */
  .grid { grid-template-columns: 1fr !important; }
  /* Selector genérico: varias pantallas (captura rápida de Mis tareas, "Nueva entrada" de
     Bitácora, etc.) arman su propia rejilla con columnas de ancho fijo en px directo en el
     style="" — no usan la clase .grid, así que la regla de arriba no las alcanza y esas
     columnas se salen de la pantalla en celular. Esto las colapsa a una sola columna igual. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* tablas anchas: scroll horizontal en vez de romper el layout */
  table.tgi, table.tbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  /* Editor de WBS/EDT: cada fila es una franja flex con varias columnas de ancho mínimo fijo
     (responsable, fechas, días, avance, acciones) que no caben en una pantalla angosta.
     En vez de romper el layout de toda la página, se deja scroll horizontal solo en las filas. */
  .wbs-rows { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wbs-row { min-width: 820px; }
  .modal { width: 94vw; max-width: 94vw; }
}
.topbar {
  background: #fff; border-bottom: 0.5px solid var(--borde); padding: 12px 24px;
  display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-family: var(--f-tit); font-weight: 800; font-size: 18px; color: var(--azul-acero); letter-spacing: -0.3px; }
.topbar .code { font-family: var(--f-label); font-weight: 300; font-size: 11px; color: var(--gris-tgi); }
.topbar .spacer { flex: 1; }
.content { padding: 22px 64px 60px 24px; width: 100%; }

/* ---------- Componentes ---------- */
.btn {
  font-family: var(--f-label); font-weight: 600; font-size: 12px; padding: 8px 14px;
  border-radius: 6px; border: 0.5px solid var(--borde); background: #fff; color: var(--azul-acero);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--azul-hielo); }
.btn.primary { background: var(--azul-corp); color: #fff; border-color: var(--azul-corp); }
.btn.primary:hover { background: var(--azul-acero); }
.btn.gold { background: var(--dorado); color: #2A1A00; border-color: var(--dorado); }
.btn.danger { color: var(--nogal); }
.btn.small { padding: 4px 9px; font-size: 11px; }
.btn.ghost { border: none; background: transparent; }

/* ---------- Campanita de notificaciones ---------- */
.campanita-wrap { position: relative; display: inline-block; }
.campanita { position: relative; }
.campanita-badge {
  position: absolute; top: -6px; right: -6px; background: var(--nogal); color: #fff;
  font-family: var(--f-label); font-size: 9.5px; font-weight: 700; line-height: 1;
  min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.campanita-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 0.5px solid var(--borde); border-radius: 8px; box-shadow: 0 8px 24px rgba(13,27,46,0.18); z-index: 30;
}
.campanita-head {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  border-bottom: 0.5px solid var(--borde); font-family: var(--f-label); font-weight: 700; font-size: 12.5px; color: var(--azul-acero);
}
.campanita-head a { font-size: 11px; font-weight: 600; color: var(--azul-corp); }
.campanita-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 0.5px solid var(--borde); font-size: 12.5px; }
.campanita-item:last-child { border-bottom: none; }
.campanita-item:hover { background: var(--offwhite); }
.campanita-item .meta { font-size: 10.5px; color: var(--gris-tgi); margin-top: 2px; }
.campanita-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 0.5px solid var(--borde);
  background: #fff; color: var(--gris-tgi); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.campanita-check:hover { background: var(--azul-acero); color: #fff; border-color: var(--azul-acero); }
.campanita-backdrop { position: fixed; inset: 0; z-index: 25; }

.card { background: #fff; border: 0.5px solid var(--borde); border-radius: 6px; padding: 16px; }
.card.top-azul { border-top: 2px solid var(--azul-acero); }
.card.top-corp { border-top: 2px solid var(--azul-corp); }
.card.top-medio { border-top: 2px solid var(--azul-medio); }
.card.top-dorado { border-top: 2px solid var(--dorado); }
.card.top-nogal { border-top: 2px solid var(--nogal); }
.card.top-gris { border-top: 2px solid var(--gris-tgi); }

.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.c5 { grid-template-columns: repeat(5, 1fr); }
@media screen and (max-width: 1000px) { .grid.c4 { grid-template-columns: 1fr 1fr; } .grid.c5 { grid-template-columns: 1fr 1fr; } .grid.c3 { grid-template-columns: 1fr; } .grid.c2 { grid-template-columns: 1fr; } }

.label { font-family: var(--f-label); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul-acero); }
.label.gris { color: var(--gris-tgi); }
.kpi { font-family: var(--f-tit); font-weight: 800; font-size: 26px; line-height: 1.2; }
.meta { font-family: var(--f-label); font-weight: 300; font-size: 11px; color: var(--gris-tgi); }
h2.sec { font-family: var(--f-tit); font-weight: 700; font-size: 15px; color: var(--azul-acero); margin: 22px 0 10px; }
h2.sec:first-child { margin-top: 0; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-label); font-weight: 600;
  font-size: 10px; padding: 2px 8px; border-radius: 3px; border: 0.5px solid var(--borde); white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--azul-acero); color: var(--azul-hielo); }
.badge.info { background: var(--azul-medio); color: #fff; }
.badge.warn { background: var(--dorado); color: #2A1A00; }
.badge.crit { background: var(--nogal); color: var(--azul-hielo); }
.badge.off { background: var(--gris-tgi); color: #fff; }
.badge.outline { background: transparent; }
.badge.outline.ok { color: var(--azul-acero); }
.badge.outline.info { color: var(--azul-medio); }
.badge.outline.warn { color: #A87F35; }
.badge.outline.crit { color: var(--nogal); }

/* Tablas Tipo 1 — Ejecutiva */
table.tgi { width: 100%; border-collapse: collapse; border: 0.5px solid var(--borde); background: #fff; }
table.tgi th {
  background: var(--azul-acero); color: var(--azul-hielo); font-family: var(--f-label);
  font-weight: 600; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 10px; text-align: left; white-space: nowrap;
}
table.tgi td { padding: 7px 10px; font-size: 13px; border-bottom: 0.5px solid #EDF0F6; vertical-align: middle; }
table.tgi tr:nth-child(even) td { background: var(--footer-bg); }
table.tgi td.num { font-family: var(--f-label); font-weight: 400; text-align: right; }
table.tgi tr.total td { background: var(--azul-acero); color: #fff; font-family: var(--f-tit); font-weight: 800; }
table.tgi tr.total td .gold { color: var(--dorado); }
table.tgi tr.grupo td { background: var(--azul-hielo) !important; font-weight: 700; font-size: 12.5px; }
/* Tablas con jerarquia (Mis tareas): el color dice el nivel, no la paridad de la
   fila. El rayado alterno se apagaba con el fondo de las subtareas y una misma
   tarea principal salia gris o blanca segun donde cayera. */
table.tgi.jerarquica tr:nth-child(even) td { background: #fff; }
table.tgi.jerarquica tr.sub td { background: var(--fila-sub); }
table.tgi td input, table.tgi td select { font-family: var(--f-cuerpo); font-size: 12.5px; }

/* Barra de avance inline */
.pbar { background: var(--azul-hielo); border-radius: 3px; height: 9px; min-width: 60px; overflow: hidden; position: relative; }
.pbar > i { display: block; height: 100%; background: var(--azul-corp); border-radius: 3px; }
.pbar.gold > i { background: var(--dorado); }
.pcell { display: flex; align-items: center; gap: 8px; }
.pcell .pv { font-family: var(--f-label); font-size: 11px; width: 36px; text-align: right; }

/* Formularios */
input[type=text], input[type=date], input[type=number], input[type=password], select, textarea {
  border: 0.5px solid var(--borde); border-radius: 5px; padding: 7px 9px; font-family: var(--f-cuerpo);
  font-size: 13px; color: var(--azul-acero); background: #fff; width: 100%;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul-corp); }
.field { margin-bottom: 14px; }
.field .label { display: block; margin-bottom: 5px; }
input.mini { width: 62px; padding: 4px 6px; font-size: 12px; text-align: right; }
select.mini { width: auto; padding: 4px 6px; font-size: 12px; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(13,27,46,0.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: 10px; border: 0.5px solid var(--borde); width: 520px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.modal.wide { width: 900px; }
.modal header { background: var(--azul-acero); color: #fff; padding: 14px 18px; font-family: var(--f-tit); font-weight: 700; border-bottom: 3px solid var(--dorado); border-radius: 10px 10px 0 0; }
.modal .body { padding: 18px; }
.modal footer { padding: 12px 18px; border-top: 0.5px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; background: var(--footer-bg); border-radius: 0 0 10px 10px; }

/* Visor de PDF a pantalla completa (Planos) — estilo Google Drive: barra delgada + PDF a todo lo alto */
.pdf-viewer-overlay { position: fixed; inset: 0; background: #fff; z-index: 200; display: flex; flex-direction: column; }
.pdf-viewer-bar { background: var(--azul-acero); color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 3px solid var(--dorado); }
.pdf-viewer-title { font-family: var(--f-tit); font-weight: 700; font-size: 14px; }
.pdf-viewer-bar .btn.small { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }
.pdf-viewer-bar .btn.small:hover { background: rgba(255,255,255,0.22); }
.pdf-viewer-frame { flex: 1; width: 100%; border: none; }

/* Login — misma composicion que la portada del sitio: el volumen azul cortado
   en diagonal con la linea dorada corriendo pegada al corte, y el acceso a la
   derecha. Los cuatro porcentajes definen la diagonal una sola vez. */
.login-wrap {
  position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: var(--offwhite);
  --dx-sup: 38.6%; --dx-inf: 46%;   /* borde del volumen azul */
  --gx-sup: 39.3%; --gx-inf: 46.7%; /* borde exterior de la linea dorada */
}
.login-oro {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(170deg, var(--azul-corp) 0%, var(--dorado) 26%,
                              var(--dorado) 70%, var(--nogal) 100%);
  clip-path: polygon(0 0, var(--gx-sup) 0, var(--gx-inf) 100%, 0 100%);
}
.login-hero {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(150deg, var(--azul-acero) 0%, var(--oscuro) 100%);
  clip-path: polygon(0 0, var(--dx-sup) 0, var(--dx-inf) 100%, 0 100%);
  display: flex; align-items: center; padding-left: 8%;
}
.login-hero-inner { text-align: left; }
.login-hero-logo { height: auto; width: min(268px, 25vw); display: block; }
.login-panel {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center;
  padding-left: calc(var(--dx-inf) + 64px); padding-right: 6vw;
}
.login-card { width: 360px; max-width: 100%; }
.login-welcome { font-family: var(--f-tit); font-weight: 800; font-size: 26px; color: var(--azul-acero); letter-spacing: -0.4px; }
.login-hint { font-size: 13px; color: var(--gris-tgi); margin: 5px 0 26px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-family: var(--f-label); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul-acero); margin-bottom: 5px; }
.login-field input { width: 100%; padding: 11px 12px; font-size: 14px; border: 0.5px solid var(--borde); border-radius: 7px; color: var(--azul-acero); background: #fff; }
.login-field input:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul-corp); }
.login-err { color: var(--nogal); font-size: 12.5px; min-height: 18px; margin: 2px 0 6px; }
.login-btn { width: 100%; padding: 12px; font-size: 14px; margin-top: 4px; }
.login-foot { text-align: center; font-size: 11px; color: var(--gris-tgi); margin-top: 22px; }
/* Movil: no cabe el corte de lado, asi que pasa al pie de la banda de marca. */
@media (max-width: 860px) {
  .login-wrap { display: flex; flex-direction: column; height: auto; }
  .login-oro { display: none; }
  .login-hero { position: static; height: 200px; padding: 0; justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .login-hero-logo { width: 184px; }
  .login-panel { position: static; flex: 1; padding: 34px 22px 50px; justify-content: center; }
}
}

/* Perfil */
.perfil-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.perfil-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--azul-corp); color: #fff; font-family: var(--f-tit); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.perfil-avatar.sm { width: 26px; height: 26px; font-size: 12px; }
.perfil-nombre { font-family: var(--f-tit); font-weight: 700; font-size: 15px; color: var(--azul-acero); }
.perfil-rol { font-size: 11.5px; color: var(--gris-tgi); }

/* Portada de proyecto (Datos generales) */
.proj-cover { position: relative; border: 0.5px solid var(--borde); border-radius: 8px; overflow: hidden; background: var(--azul-hielo); }
.proj-cover-img { width: 100%; height: 420px; object-fit: contain; display: block; background: var(--azul-hielo); }
.proj-cover-ph { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gris-tgi); }
.proj-cover-bar { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.proj-cover.empty .proj-cover-bar { position: static; padding: 12px; justify-content: center; }
.proj-cover.drag { outline: 2px dashed var(--azul-corp); outline-offset: -5px; background: var(--azul-claro); }

/* Selector de archivo compacto (Planos, foto de Bitácora) — mismo lenguaje visual que .proj-cover */
.file-picker { border: 1px dashed var(--borde); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--azul-hielo); flex-wrap: wrap; transition: background 0.15s, border-color 0.15s; }
.file-picker-ph { display: flex; align-items: center; gap: 8px; color: var(--gris-tgi); }
.file-picker-bar { display: flex; align-items: center; gap: 10px; }
.file-picker.drag { border: 2px dashed var(--azul-corp); background: var(--azul-claro); }
.file-picker.has-file { border-style: solid; border-color: var(--azul-corp); }

/* PDF completo del proyecto (dossier) — oculto en pantalla */
.print-proyecto { position: absolute; left: -10000px; top: 0; width: 1000px; background: #fff; }

/* Panel de proyectos */
.proj-card { cursor: pointer; transition: box-shadow 0.15s; position: relative; }
.proj-card:hover { box-shadow: 0 4px 14px rgba(60,88,137,0.15); }
.rag { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rag.verde { background: #4C7A45; }
.rag.amarillo { background: var(--dorado); }
.rag.rojo { background: #A0453A; }
.rag.gris { background: var(--gris-tgi); }

/* Comparativa real vs programado */
.cmp-row { padding: 12px 0; border-bottom: 0.5px solid #EDF0F6; }
.cmp-row:last-child { border-bottom: none; }
.cmp-name { font-family: var(--f-tit); font-weight: 800; font-size: 13.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.cmp-line { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.cmp-label { font-family: var(--f-label); font-weight: 300; font-size: 9.5px; color: var(--gris-tgi); width: 34px; text-align: right; }
.cmp-track { flex: 1; background: transparent; height: 16px; position: relative; }
.cmp-track > i { display: block; height: 100%; border-radius: 3px; }
.cmp-track.real > i { background: var(--azul-corp); }
.cmp-track.prog > i { background: var(--azul-hielo); border: 0.5px solid var(--borde); }
.cmp-track.prom > i { background: var(--azul-medio); border: 0.5px solid var(--borde); }
.cmp-val { font-family: var(--f-label); font-weight: 600; font-size: 11px; width: 40px; }

/* Árbol WBS */
.wbs-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 0.5px solid #EDF0F6; }
.wbs-row:hover { background: var(--footer-bg); }
.wbs-row .code { font-family: var(--f-label); font-weight: 600; font-size: 11px; color: var(--azul-corp); min-width: 42px; }
.wbs-row.lvl1 { background: var(--azul-hielo); font-weight: 700; }
.wbs-row.lvl1 .code { color: var(--azul-acero); }
.wbs-row input.name { border: none; background: transparent; font-weight: inherit; font-size: 13px; flex: 1; padding: 3px 5px; }
.wbs-row input.name:hover { background: #fff; border: 0.5px solid var(--borde); }
.wbs-row .acts { visibility: hidden; display: flex; gap: 3px; }
.wbs-row:hover .acts { visibility: visible; }

/* SVG contenedores */
.svg-scroll { overflow: auto; background: #fff; border: 0.5px solid var(--borde); border-radius: 6px; }
.svg-scroll svg { display: block; }

/* Tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 0.5px solid var(--borde); }
.tab { padding: 8px 14px; font-family: var(--f-label); font-weight: 600; font-size: 12px; color: var(--gris-tgi); cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--azul-acero); border-bottom-color: var(--dorado); }

/* Filtros */
.filters { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filters select { width: auto; }
.filters input[type=date] { width: auto; }

/* Dropdown de selección múltiple (checkboxes) — mismo alto/borde que un select normal */
.msel-wrap { position: relative; display: inline-block; }
.msel-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: space-between;
  border: 0.5px solid var(--borde); border-radius: 5px; padding: 7px 9px; background: #fff;
  font-family: var(--f-cuerpo); font-size: 13px; color: var(--azul-acero); cursor: pointer; min-width: 150px;
}
.msel-btn:hover { border-color: var(--azul-corp); }
.msel-caret { font-size: 10px; color: var(--gris-tgi); }
.msel-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 80; min-width: 190px; max-height: 220px;
  overflow-y: auto; background: #fff; border: 0.5px solid var(--borde); border-radius: 6px;
  box-shadow: 0 8px 22px rgba(13,27,46,0.16); padding: 6px;
}
.msel-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12.5px; cursor: pointer; border-radius: 4px; }
.msel-opt:hover { background: var(--azul-hielo); }

/* Toast */
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--azul-acero); color: #fff; padding: 10px 18px; border-radius: 6px; border-left: 3px solid var(--dorado); font-size: 13px; z-index: 200; }

/* Notas / citas */
.nota { border-left: 2px solid var(--dorado); padding: 6px 12px; color: var(--gris-tgi); font-size: 12.5px; margin: 10px 0; }

/* ---------- Gantt ---------- */
.gantt-wrap { overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 250px); border: 0.5px solid var(--borde); border-radius: 6px; background: #fff; position: relative; }
.g-inner { position: relative; }
.g-row { display: flex; height: 30px; border-bottom: 0.5px solid #EDF0F6; }
.g-row-act .g-left, .g-row-act .g-mid { background: var(--azul-hielo); font-weight: 700; }
.g-left { position: sticky; left: 0; z-index: 3; display: flex; background: #fff; border-right: 1px solid var(--borde); flex-shrink: 0; box-shadow: 2px 0 4px rgba(0,0,0,0.06); }
.g-mid { display: flex; background: #fff; border-right: 1px solid var(--borde); flex-shrink: 0; }
.g-cell { display: flex; align-items: center; justify-content: center; font-size: 12px; border-right: 0.5px solid #EDF0F6; overflow: hidden; padding: 0 3px; }
.g-cell-h { font-family: var(--f-label); font-weight: 600; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul-hielo); background: var(--azul-acero); }
.g-head { position: sticky; top: 0; z-index: 5; height: 40px; }
.g-head .g-left { z-index: 6; }
.g-head-right { background-color: #fff; }
.g-mes { position: absolute; top: 0; height: 18px; font-family: var(--f-label); font-weight: 600; font-size: 9.5px; color: var(--azul-acero); border-left: 1px solid var(--borde); padding: 2px 0 0 5px; white-space: nowrap; overflow: hidden; }
.g-dia { position: absolute; top: 20px; height: 20px; font-family: var(--f-label); font-weight: 300; font-size: 8.5px; color: var(--gris-tgi); text-align: center; padding-top: 3px; }
.g-dia.finde { color: #B9BFCB; }
.g-right { position: relative; flex-shrink: 0; }
.g-bar-act { position: absolute; top: 8px; height: 14px; background: var(--azul-claro); border-radius: 3px; overflow: hidden; }
.g-bar-act.crit { background: var(--azul-corp); box-shadow: inset 0 0 0 1.5px var(--nogal); }
.g-bar-act > i { display: block; height: 100%; background: var(--dorado); opacity: 0.92; }
.g-bar-sub { position: absolute; top: 10px; height: 10px; background: #D7E4F5; border-radius: 2px; overflow: hidden; }
.g-bar-sub > i { display: block; height: 100%; background: var(--azul-medio); }
.g-real-mark { position: absolute; top: 7px; font-size: 11px; z-index: 2; text-shadow: 0 0 2px #fff; }
/* z-index por debajo de .g-left/.g-mid (3) a propósito: la línea "HOY" no debe pasar
   por encima de la columna fija ni de las columnas de datos cuando cae cerca de ellas. */
.g-hoy { position: absolute; top: 40px; bottom: 0; width: 0; border-left: 1.6px dashed var(--nogal); z-index: 1; pointer-events: none; }
.g-hoy-tag { position: absolute; top: 42px; font-family: var(--f-label); font-weight: 600; font-size: 8px; color: var(--nogal); z-index: 1; pointer-events: none; }
.g-inp { border: none; background: transparent; font-size: 11px; font-family: var(--f-label); color: var(--azul-acero); width: 100%; padding: 2px; }
.g-inp:hover, .g-inp:focus { background: #fff; border: 0.5px solid var(--borde); border-radius: 3px; }
.g-inp.num { text-align: center; }
.g-ro { font-family: var(--f-label); font-size: 11px; color: var(--azul-acero); }

/* ---------- Mis tareas ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-family: var(--f-label); font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-tgi); text-align: center; padding: 4px 0; }
.cal-day { min-height: 78px; background: #fff; border: 0.5px solid var(--borde); border-radius: 5px; padding: 4px; font-size: 11px; }
.cal-day.otro { background: var(--offwhite); opacity: 0.55; }
.cal-day.hoy { border: 1.5px solid var(--dorado); }
.cal-day .n { font-family: var(--f-label); font-weight: 600; font-size: 10px; color: var(--gris-tgi); }
.cal-chip { display: block; font-size: 9.5px; padding: 1px 5px; border-radius: 3px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.cal-chip.personal { background: var(--azul-hielo); color: var(--azul-acero); border-left: 2px solid var(--azul-corp); }
.cal-chip.proyecto { background: #FBF3E3; color: #6b5320; border-left: 2px solid var(--dorado); }
.cal-chip.vencida { background: #F3E9E4; color: var(--nogal); border-left: 2px solid var(--nogal); }
.eis-col { min-height: 200px; }
.eis-item { background: #fff; border: 0.5px solid var(--borde); border-radius: 5px; padding: 7px 9px; margin-top: 7px; font-size: 12.5px; }

/* ---------- Impresión (PDF) ---------- */
.print-header { display: none; }
.print-header .meta { font-size: 10px; }

@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { height: auto; background: #fff; font-size: 11px; }
  #app { display: block; }
  .main { display: block; }
  .sidebar, .btn, .filters, .acts, .toast, .no-print, .modal-bg, .tabs, .login-wrap { display: none !important; }
  .topbar { position: static; border-bottom: none; padding: 0; background: transparent; }
  .topbar h1 { font-size: 15px; }
  .topbar select { display: none; }
  .content { padding: 6px 0 0; max-width: 100%; }
  .print-header { display: flex !important; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--azul-acero); padding-bottom: 6px; margin-bottom: 10px; }

  /* compactar */
  .card { padding: 10px; break-inside: avoid; border-radius: 4px; }
  .grid { gap: 8px; }
  .grid.c2, .grid.c3, .grid.c4 { break-inside: avoid; }
  .kpi { font-size: 18px; }
  h2.sec { margin: 12px 0 6px; font-size: 13px; }
  .field { margin-bottom: 8px; }
  .nota { margin: 6px 0; font-size: 10px; }
  table.tgi td { padding: 4px 8px; font-size: 10px; }
  table.tgi th { padding: 5px 8px; font-size: 8.5px; }

  /* colores garantizados */
  table.tgi th { background: var(--azul-acero) !important; color: var(--azul-hielo) !important; }
  table.tgi tr.grupo td { background: var(--azul-hielo) !important; }
  table.tgi tr.total td { background: var(--azul-acero) !important; color: #fff !important; }
  .pbar { background: var(--azul-hielo) !important; }
  .pbar > i { background: var(--azul-corp) !important; }
  .pbar.gold > i { background: var(--dorado) !important; }

  /* inputs como texto plano */
  input, select, textarea { border: none !important; padding: 1px 0 !important; background: transparent !important; resize: none; }

  /* diagramas SVG completos, ajustados al ancho de página */
  .svg-scroll { overflow: visible !important; max-height: none !important; border: none; }
  .svg-scroll svg { width: 100% !important; height: auto !important; max-width: 100%; }

  /* Gantt completo a escala */
  .gantt-wrap { overflow: visible !important; max-height: none !important; border: none; }
  .g-inner { zoom: var(--print-zoom, 1); }
  .g-left { position: static; }
  .g-head { position: static; }

  /* PDF completo del proyecto (dossier) */
  body.printing-proyecto #app { display: none !important; }
  body.printing-proyecto .print-proyecto { position: static !important; left: auto !important; width: auto !important; display: block; }
  body:not(.printing-proyecto) .print-proyecto { display: none; }
  .proj-cover { display: none !important; } /* la portada va en la página de portada, no duplicada */
  .pp-cover { text-align: center; padding-top: 30px; break-after: page; page-break-after: always; }
  .pp-cover-logo { height: 58px; margin: 0 auto 22px; display: block; }
  .pp-cover-name { font-family: var(--f-tit); font-weight: 800; font-size: 26px; color: var(--azul-acero); }
  .pp-cover-meta { color: var(--gris-tgi); font-size: 13px; margin-top: 6px; }
  .pp-cover-hero { max-width: 92%; max-height: 480px; object-fit: contain; margin: 24px auto; display: block; border-radius: 6px; border: 0.5px solid var(--borde); }
  .pp-cover-foot { color: var(--gris-tgi); font-size: 11px; margin-top: 18px; }
  .pp-sec { break-before: page; page-break-before: always; }
  .pp-sec-title { font-family: var(--f-tit); font-weight: 800; font-size: 14px; color: #fff !important; background: var(--azul-acero) !important; padding: 6px 12px; margin: 0 0 12px; }
}

/* ---------- Bitácora: miniatura de foto ---------- */
.bit-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; cursor: pointer; vertical-align: middle; border: 0.5px solid var(--borde); }

/* ---------- Comentarios de tarea (reemplaza "Notas") ---------- */
.comentarios-lista { max-height: 220px; overflow-y: auto; border: 0.5px solid var(--borde); border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; background: var(--offwhite); }
.comentario { padding: 6px 0; border-bottom: 0.5px solid var(--borde); }
.comentario:last-child { border-bottom: none; }
.comentario-meta { font-family: var(--f-label); font-size: 10.5px; color: var(--gris-tgi); margin-bottom: 2px; }
.comentario-texto { font-size: 12.5px; color: var(--azul-acero); white-space: pre-wrap; }

/* ---------- Kanban de Seguimiento de tareas ---------- */
.kanban-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: start; }
.kanban-col { background: var(--offwhite); border-radius: 6px; padding: 8px; min-height: 60px; }
.kanban-col-head { font-family: var(--f-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul-acero); padding: 4px 4px 8px; display: flex; justify-content: space-between; }
.kanban-card { background: #fff; border: 0.5px solid var(--borde); border-left: 3px solid var(--azul-corp); border-radius: 5px; padding: 8px 9px; margin-bottom: 8px; }
.kanban-card .kc-nombre { font-size: 12px; color: var(--azul-acero); cursor: pointer; display: block; margin-bottom: 4px; }
.kanban-card .kc-nombre:hover { text-decoration: underline; }
.kanban-card .kc-meta { font-family: var(--f-label); font-size: 10px; color: var(--gris-tgi); display: flex; justify-content: space-between; align-items: center; gap: 4px; }
@media (max-width: 900px) {
  .kanban-board { grid-template-columns: 1fr; }
}