/* 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;
  --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); }
.loading { padding: 60px; text-align: center; color: var(--gris-tgi); font-family: var(--f-label); }

/* ---------- 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); }
.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; }
.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 24px 60px; max-width: 1400px; 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; }

.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; }
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 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; }

/* Login */
.login-wrap { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--azul-acero) 0%, var(--oscuro) 100%); }
.login-card { background: #fff; border-radius: 10px; padding: 32px 36px 36px; width: 400px; text-align: center; border-top: 4px solid var(--dorado); }
.login-logo { background: var(--oscuro); border-radius: 8px; padding: 18px; display: flex; justify-content: center; }
.login-users { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.login-users button {
  padding: 12px; border-radius: 6px; border: 0.5px solid var(--borde); background: var(--offwhite);
  font-family: var(--f-cuerpo); font-size: 14px; color: var(--azul-acero); cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.login-users button:hover { background: var(--azul-hielo); border-color: var(--azul-corp); }
.login-users .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--azul-corp); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }

/* 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; }

/* 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; 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 { 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; }
.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; }
.g-hoy { position: absolute; top: 40px; bottom: 0; width: 0; border-left: 1.6px dashed var(--nogal); z-index: 4; 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: 4; 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; }
}