:root {
  --ink: #17202a;
  --muted: #6b7583;
  --line: #e4e7ec;
  --surface: #ffffff;
  --canvas: #f4f5f7;
  --accent: #df5a3f;
  --accent-dark: #bd402b;
  --navy: #23354d;
  --phase-color: #1f6f8b;
  --task-color: #5b9bd5;
  --completion-color: #264478;
  --dependency-color: #3f6f9f;
  --level-1-color: #1f6f8b;
  --level-2-color: #5b9bd5;
  --level-3-color: #70ad47;
  --level-4-color: #ffc000;
  --level-5-color: #8064a2;
  --level-1-font-size: 12px;
  --level-2-font-size: 11px;
  --level-3-font-size: 11px;
  --level-4-font-size: 10px;
  --level-5-font-size: 10px;
  --row-height: 48px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); min-width: 1100px; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-header { height: 68px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: white; }
.brand { display: flex; gap: 11px; align-items: center; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; }
.brand-mark img { display: block; width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.22)); }
.brand strong { display: block; font-size: 18px; letter-spacing: .02em; }
.brand span { display: block; margin-top: 1px; font-size: 11px; color: #b9c4d1; }
.header-actions, .header-action-group { display: flex; align-items: center; gap: 8px; }
.header-actions { min-width: 0; justify-content: flex-end; }
.header-separator { align-self: stretch; width: 1px; margin: 4px 3px; background: #425269; }
.header-account-group { flex: 0 0 auto; }
.project-switch { width: 220px; border: 1px solid #526176; border-radius: 7px; padding: 7px 9px; background: #263a55; color: #edf2f7; font-size: 12px; }
.project-picker-button { position: relative; display: grid; min-width: 180px; max-width: 260px; grid-template-columns: minmax(0, 1fr) 16px; grid-template-rows: auto auto; text-align: left; }
.project-picker-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.project-picker-button small { overflow: hidden; color: #aebdd0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-picker-button b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 13px; text-align: right; }
.language-switch { width: 58px; border: 1px solid #526176; border-radius: 7px; padding: 7px 8px; background: #263a55; color: #edf2f7; font-size: 11px; font-weight: 750; }
.button { border: 1px solid transparent; border-radius: 7px; padding: 8px 14px; font-weight: 650; font-size: 13px; }
.button.primary { background: var(--accent); color: white; }
.button.primary:hover { background: var(--accent-dark); }
.button.ghost { background: transparent; border-color: #d8dde4; color: #344054; }
.app-header .button.ghost { color: #e8edf3; border-color: #526176; }

main { padding: 18px 24px 30px; }
.workspace-tabs { display:flex; align-items:flex-end; gap:4px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.workspace-tab { position:relative; border:0; padding:11px 18px; background:transparent; color:var(--muted); font-size:12px; font-weight:750; }
.workspace-tab.active { color:var(--ink); }
.workspace-tab.active::after { content:""; position:absolute; right:12px; bottom:-1px; left:12px; height:3px; border-radius:3px 3px 0 0; background:var(--task-color); }
.workspace-tab span { display:inline-grid; min-width:18px; height:18px; margin-left:5px; place-items:center; border-radius:999px; background:#bd4d3b; color:white; font-size:9px; }
.workspace-panel[hidden] { display:none !important; }
.summary-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px; border:1px solid var(--line); border-radius:10px 10px 0 0; background:var(--surface); }
.summary-head h1 { margin:5px 0 3px; font-size:22px; }
.summary-head p { margin:0; color:var(--muted); font-size:11px; }
.summary-dashboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:18px; border:1px solid var(--line); border-top:0; background:var(--surface); }
.summary-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:9px; background:var(--canvas); }
.summary-card > span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.09em; }
.summary-card > strong { display:block; margin:7px 0 4px; font-size:21px; }
.summary-card > small { color:var(--muted); font-size:10px; }
.summary-section { grid-column:span 2; }
.summary-section h2 { margin:0 0 12px; font-size:14px; }
.summary-list { display:grid; gap:8px; }
.summary-alert { display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; padding:9px 0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
.summary-alert:last-child { border-bottom:0; }
.summary-alert small { color:var(--muted); }
.materials-workspace { margin:0 24px 30px; }
.project-bar { min-height: 54px; display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; padding: 8px 14px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.project-bar label { display: grid; gap: 5px; }
.project-bar label > span, .eyebrow { font-size: 9px; font-weight: 800; color: #8a94a3; letter-spacing: .13em; }
.project-bar input, .project-bar select { border: 1px solid #d7dce3; border-radius: 6px; padding: 7px 8px; color: #263241; background: white; }
.project-title-wrap { order: 1; flex: 0 1 620px; width: clamp(360px, 38vw, 620px); min-width: 360px; }
.project-title-line { display: flex; align-items: center; gap: 7px; }
.project-title { border: 0 !important; padding: 0 !important; font-size: 15px; font-weight: 700; width: 100%; outline: 0; }
.project-title:focus { background: #f7faff; box-shadow: 0 2px 0 var(--task-color); }
.rename-project { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #d7dce3; border-radius: 6px; background: white; color: #667284; font-size: 15px; }
.rename-project:hover { color: var(--completion-color); border-color: #aab6c5; background: #f7f9fc; }
.project-meta { display: none; }
.compliance-summary { order: 2; min-height: 0; display: flex; flex: 0 0 auto; align-items: center; gap: 16px; padding: 0; border: 0; background: transparent; }
.project-start-control { order: 3; margin-left: auto; }
.project-view-control { order: 4; }
.project-cutoff-control { order: 5; }
.compliance-summary > div { display: grid; gap: 2px; min-width: 70px; }
.compliance-summary span { color: #8a94a3; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.compliance-summary strong { color: var(--ink); font-size: 14px; }
.compliance-summary strong.late { color: #d45b48; }
.compliance-summary strong.warning { color: #d49a2e; }
.compliance-summary strong.on-track { color: #3c9b6d; }
.compliance-summary p { display: none; }
.save-state i { display: inline-block; width: 7px; height: 7px; background: #36a269; border-radius: 50%; margin-right: 4px; }
.save-state.saving i { background: #e0a337; }
.save-state.offline i { background: #bd4d3b; }
.toolbar { height: 43px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-top: 0; background: #fafbfc; }
.toolbar p { color: #87909d; font-size: 11px; margin: 0; }
.toolbar-right { display: flex; align-items: center; gap: 14px; }
.precedence-legend { color: #7b8797; font-size: 10px; white-space: nowrap; }
.precedence-legend kbd { display: inline-block; min-width: 23px; padding: 2px 5px; border: 1px solid #c8d0da; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: #4e5a69; font: 700 9px/1.2 inherit; text-align: center; }
.dual-horizontal-scrollbars { display: grid; grid-template-columns: minmax(380px, 49%) minmax(380px, 1fr); min-width: 0; height: 11px; padding: 2px 4px; gap: 8px; border: 1px solid var(--line); border-top: 0; background: var(--surface); }
.pane-scrollbar { height: 7px; min-width: 0; overflow-x: scroll; overflow-y: hidden; border-radius: 999px; scrollbar-width: thin; scrollbar-color: #65758b transparent; }
.pane-scrollbar:first-child { border-right: 0; }
.pane-scrollbar > div { height: 1px; }
.pane-scrollbar::-webkit-scrollbar { height: 7px; }
.pane-scrollbar::-webkit-scrollbar-track { border-radius: 999px; background: color-mix(in srgb, var(--line) 45%, transparent); }
.pane-scrollbar::-webkit-scrollbar-thumb { min-width: 36px; border-radius: 999px; background: #65758b; }
.pane-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--task-color); }
.pane-scrollbar::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.horizontal-scrollbar > div { height: 1px; }
.selection-actions { display: flex; align-items: center; gap: 4px; }
.icon-button { height: 28px; min-width: 30px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #596474; }
.icon-button:hover { background: #eef0f3; color: #1f2937; }
.icon-button:disabled { cursor: default; opacity: .35; }
.icon-button:disabled:hover { background: transparent; color: #596474; }
.history-button { display: inline-flex; align-items: center; justify-content: center; }
.history-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.danger { padding: 0 8px; font-size: 11px; color: #af4232; }
.icon-button.dependency-toggle { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 9px; font-size: 11px; }
.icon-button.dependency-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.dependency-toggle.active { color: white; background: var(--completion-color); border-color: var(--completion-color); }
.icon-button.baseline-save, .icon-button.baseline-toggle, .icon-button.baseline-delete { width: auto; padding: 0 9px; font-size: 10px; }
.baseline-status { color: #7b8797; font-size: 9px; white-space: nowrap; }
.button.danger { color: #bd4d3b; border-color: rgba(189, 77, 59, .45); }
.button.danger:hover { color: white; background: #a94334; border-color: #a94334; }
.icon-button.baseline-save { color: var(--completion-color); border-color: color-mix(in srgb, var(--completion-color) 35%, transparent); }
.icon-button.baseline-toggle.active { color: white; background: #6f7e91; border-color: #6f7e91; }
.toolbar-divider { height: 18px; width: 1px; background: var(--line); margin: 0 4px; }

.gantt-shell { position: relative; border: 1px solid var(--line); border-top: 0; background: white; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; max-height: calc(100vh - 306px); min-height: 360px; }
.floating-controls { position: sticky; top: 7px; z-index: 20; display: flex; align-items: center; gap: 3px; width: max-content; height: 30px; padding: 3px 5px; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--task-color)); border-radius: 7px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 3px 12px rgba(11, 20, 32, .18); backdrop-filter: blur(5px); color: var(--muted); font-size: 9px; }
.floating-controls > span:first-child { padding: 0 3px; font-weight: 750; }
.floating-controls button { height: 22px; min-width: 23px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font-size: 10px; }
.floating-controls button:hover { background: color-mix(in srgb, var(--task-color) 18%, transparent); }
.zoom-controls { position: absolute; top: 59px; right: 12px; }
.zoom-controls #zoomValue { min-width: 38px; text-align: center; font-weight: 750; }
.table-size-controls { position: absolute; top: 7px; left: 12px; }
.gantt-bottom-legend { position: absolute; z-index: 15; right: 14px; bottom: 9px; padding: 4px 7px; border-radius: 5px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 1px 5px rgba(11, 20, 32, .14); backdrop-filter: blur(4px); }
.gantt-grid { display: grid; grid-template-columns: minmax(380px, 49%) minmax(380px, 1fr); width: 100%; min-width: 0; }
.table-pane { position: relative; z-index: 4; width: auto; min-width: 0; overflow-x: auto; overflow-y: hidden; background: white; box-shadow: 5px 0 10px rgba(27, 39, 55, .06); scrollbar-color: #788596 #e2e6eb; }
.row-grid { display: grid; width: var(--table-width, 1156px); grid-template-columns: var(--table-columns, 28px 280px 150px 190px 130px 78px 100px 200px); }
.table-head, .timeline-head { height: 52px; position: sticky; top: 0; z-index: 6; background: #f7f8fa; border-bottom: 1px solid #ccd2da; }
.table-head > div { position: relative; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--line); font-size: 9px; font-weight: 800; color: #687384; letter-spacing: .09em; }
.column-resizer { position: absolute; z-index: 8; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.column-resizer::after { content: ""; position: absolute; top: 9px; bottom: 9px; left: 3px; width: 2px; border-radius: 2px; background: transparent; }
.column-resizer:hover::after, body.resizing-column .column-resizer[data-resize-column]::after { background: var(--task-color); }
body.resizing-column { cursor: col-resize; user-select: none; }
.task-row { height: var(--row-height); border-bottom: 1px solid #eceef1; align-items: stretch; background: white; font-size: var(--row-font-size, 11px); }
.task-row:hover { background: #f7f9fc; }
.task-row.parent { background: #f0f3f6; font-weight: 700; }
.task-row.selected, .task-row.parent.selected { position: relative; background: #dceafb; box-shadow: inset 4px 0 0 var(--completion-color), inset 0 1px 0 #a9c6e9, inset 0 -1px 0 #a9c6e9; }
.task-row.selected input, .task-row.selected select { color: #172b49; }
.quick-add-row { position: sticky; bottom: 0; z-index: 5; background: #fbfcfe; border-top: 2px solid #cfd6df; box-shadow: 0 -4px 12px rgba(35, 53, 77, .06); }
.quick-add-row:hover { background: #f6f9fc; }
.quick-add-row > div { display: flex; align-items: center; min-width: 0; padding: 4px 8px; border-right: 1px solid #eef0f3; }
.quick-add-row input, .quick-add-row select { min-width: 0; width: 100%; border: 1px dashed #c6cdd7; border-radius: 5px; padding: 6px; background: white; color: #4e5968; font-size: 11px; }
.quick-add-row input:focus, .quick-add-row select:focus { outline: none; border-style: solid; border-color: var(--task-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--task-color) 15%, transparent); }
.quick-add-icon { justify-content: center; color: var(--task-color); font-weight: 800; font-size: 17px; }
.quick-add-row .task-name { font-weight: 650; }
.task-row > div { display: flex; align-items: center; min-width: 0; padding: 4px 8px; border-right: 1px solid #eef0f3; }
.task-row input { min-width: 0; width: 100%; border: 1px solid transparent; padding: 5px 4px; background: transparent; color: inherit; border-radius: 4px; text-overflow: ellipsis; }
.task-row input:focus { outline: none; border-color: #9aabbf; background: white; }
.task-row select { min-width: 0; width: 100%; border: 1px solid transparent; padding: 5px 3px; background: transparent; color: #596474; border-radius: 4px; font-size: 10px; text-overflow: ellipsis; }
.task-row select:focus { outline: none; border-color: #9aabbf; background: white; }
.task-row select:disabled { appearance: none; opacity: .7; }
.drag-col { color: #b0b7c1; justify-content: center; cursor: grab; font-size: 14px; user-select: none; }
.drag-col:active { cursor: grabbing; }
.task-row.drop-parent { background: #e5f0fb; outline: 2px solid var(--task-color); outline-offset: -2px; }
.name-col { gap: 5px; overflow: hidden; }
.collapse { width: 18px; height: 20px; padding: 0; border: 0; background: transparent; color: #727d8a; }
.task-code-input { flex: 0 0 42px; width: 42px !important; color: #6f7b8b !important; font-size: 10px; text-align: center; }
.task-material-badge { flex:0 0 auto; border:0; border-radius:999px; padding:4px 7px; background:#e5edf6; color:#315c83; font-size:8px; font-weight:800; white-space:nowrap; }
.task-material-badge.alert { background:#f7ddc4; color:#93451f; }
.task-name { font-weight: inherit; }
.parent .task-name { text-transform: uppercase; letter-spacing: .025em; }
.duration-col { justify-content: center; font-size: 11px; color: #5f6976; }
.progress-col { position: relative; justify-content: center; flex-direction: column; gap: 1px; text-align: center; }
.progress-col input { text-align: center; font-weight: 750; }
.progress-col small { color: #8994a3; font-size: 8px; white-space: nowrap; }
.progress-col::before { content: ""; position: absolute; left: 3px; width: 4px; height: 18px; border-radius: 3px; background: #8994a3; }
.progress-col.on-track::before { background: #3c9b6d; }
.progress-col.warning::before { background: #d49a2e; }
.progress-col.late::before { background: #d45b48; }

.timeline-pane { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-color: #788596 #e2e6eb; }
.table-pane, .timeline-pane { scrollbar-width: none; }
.table-pane::-webkit-scrollbar, .timeline-pane::-webkit-scrollbar { width: 0; height: 0; }
.gantt-below .dual-horizontal-scrollbars { display: none; }
.gantt-below .gantt-grid { grid-template-columns: minmax(0, 1fr); }
.gantt-below .table-pane, .gantt-below .timeline-pane { width: 100%; scrollbar-width: thin; scrollbar-color: #65758b transparent; }
.gantt-below .table-pane { border-bottom: 8px solid var(--surface); box-shadow: 0 5px 10px rgba(27, 39, 55, .08); }
.gantt-below .timeline-pane { border-top: 1px solid var(--line); }
.gantt-below .table-pane::-webkit-scrollbar, .gantt-below .timeline-pane::-webkit-scrollbar { width: auto; height: 9px; }
.gantt-below .table-pane::-webkit-scrollbar-track, .gantt-below .timeline-pane::-webkit-scrollbar-track { background: color-mix(in srgb, var(--line) 45%, transparent); }
.gantt-below .table-pane::-webkit-scrollbar-thumb, .gantt-below .timeline-pane::-webkit-scrollbar-thumb { border-radius: 999px; background: #65758b; }
.gantt-below .table-pane::-webkit-scrollbar-button, .gantt-below .timeline-pane::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.timeline-head { display: grid; }
.time-cell { display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #dfe3e8; color: #778190; font-size: 9px; }
.time-cell strong { display: block; color: #394555; font-size: 11px; margin-bottom: 2px; }
.time-cell.non-working { background: #eef0f3; color: #929aa5; }
.time-cell.non-working strong { color: #7d8794; }
.time-cell.today { background: #fff6f2; }
.time-cell.target-period { background: color-mix(in srgb, #4386c6 16%, transparent); box-shadow: inset 0 -3px 0 #4386c6; }
.time-cell.target-period.warning { background: color-mix(in srgb, #d49a2e 18%, transparent); box-shadow: inset 0 -3px 0 #d49a2e; }
.time-cell.target-period.late { background: color-mix(in srgb, #d45b48 18%, transparent); box-shadow: inset 0 -3px 0 #d45b48; }
.project-target-head { --target-color: #4386c6; position: absolute; z-index: 9; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--target-color); color: var(--target-color); pointer-events: none; }
.project-target-head.warning { --target-color: #d49a2e; }
.project-target-head.late { --target-color: #d45b48; }
.project-target-head > span { position: absolute; left: -7px; bottom: -5px; font-size: 13px; line-height: 13px; }
.project-target-head > strong { position: absolute; top: 3px; left: 5px; max-width: 130px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--target-color) 55%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 1px 4px rgba(20, 31, 45, .14); color: var(--target-color); font-size: 8px; line-height: 11px; letter-spacing: .04em; white-space: nowrap; }
.project-target-head.label-left > strong { right: 5px; left: auto; }
.time-cell.out-of-scale-time { background: color-mix(in srgb, var(--surface) 82%, var(--task-color)); border-right-style: dashed; }
.time-cell.out-of-scale-time strong { font-size: 8px; letter-spacing: .04em; }
.time-cell.time-break { position: relative; border-left: 4px double var(--muted); }
.time-cell.time-break::before { content: "//"; position: absolute; left: -9px; top: 17px; padding: 0 2px; background: var(--surface); color: var(--muted); font-weight: 900; transform: rotate(-12deg); }
.timeline-body { position: relative; }
.timeline-period-break { position: absolute; z-index: 5; top: 0; bottom: 0; width: 4px; border-left: 1px dashed color-mix(in srgb, var(--muted) 70%, transparent); border-right: 1px dashed color-mix(in srgb, var(--muted) 70%, transparent); pointer-events: none; }
.timeline-period-break span { position: sticky; top: 5px; display: block; width: 22px; margin-left: -11px; padding: 2px 3px; border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: -3px; transform: rotate(-12deg); }
.timeline-row { position: relative; height: var(--row-height); border-bottom: 1px solid #eceef1; background-image: linear-gradient(to right, transparent calc(100% - 1px), #e9ecf0 calc(100% - 1px)); background-size: var(--cell-width) 100%; }
.non-working-columns { position: absolute; inset: 0 auto 0 0; z-index: 0; pointer-events: none; }
.non-working-column { position: absolute; top: 0; bottom: 0; background: rgba(80, 91, 105, .08); }
.project-target-period { position: absolute; z-index: 0; top: 0; bottom: 0; background: rgba(67, 134, 198, .08); pointer-events: none; }
.project-target-period.warning { background: rgba(212, 154, 46, .09); }
.project-target-period.late { background: rgba(212, 91, 72, .10); }
.project-target-line { --target-color: #4386c6; position: absolute; z-index: 6; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--target-color); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--target-color) 30%, transparent)); pointer-events: none; }
.project-target-line.warning { --target-color: #d49a2e; }
.project-target-line.late { --target-color: #d45b48; }
.timeline-row.parent { background-color: #f0f3f6; }
.timeline-row.selected, .timeline-row.parent.selected { background-color: #dceafb; box-shadow: inset 0 1px 0 #a9c6e9, inset 0 -1px 0 #a9c6e9; }
.bar { position: absolute; z-index: 3; top: calc((var(--row-height) - 20px) / 2); height: 20px; min-width: 8px; border-radius: 4px; background: var(--bar-color, var(--level-2-color)); box-shadow: 0 1px 2px rgba(38, 68, 120, .2); cursor: ew-resize; color: white; font-size: var(--bar-font-size, 10px); line-height: 20px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.progress-fill { position: absolute; z-index: 0; inset: 0 auto 0 0; background: var(--completion-color); opacity: .72; pointer-events: none; }
.bar-label { position: relative; z-index: 1; margin-left: 5px; }
.bar.out-of-scale { overflow: visible; border: 1px dashed color-mix(in srgb, var(--bar-color) 65%, white); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bar-color) 78%, #111 22%) 0 10px, color-mix(in srgb, var(--bar-color) 55%, transparent) 10px 18px); border-radius: 4px; }
.bar.out-of-scale::before { content: "//"; position: absolute; z-index: 4; top: -3px; left: 50%; transform: translateX(-50%) skew(-10deg); height: 24px; padding: 0 3px; background: var(--canvas); color: #fff; font: 900 15px/24px system-ui, sans-serif; letter-spacing: -3px; }
.bar.out-of-scale .bar-label { display: inline-block; min-width: max-content; padding-right: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.75); }
.compliance-dot { position: absolute; z-index: 4; top: 2px; left: 2px; width: 6px; height: 6px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: #8994a3; }
.bar.on-track .compliance-dot { background: #48c185; }
.bar.warning .compliance-dot { background: #ffc857; }
.bar.late .compliance-dot { background: #ef6651; }
.bar.milestone .compliance-dot { top: 5px; left: 5px; width: 6px; height: 6px; }
.milestone-check { position: absolute; z-index: 5; inset: 0; color: white; font-size: 10px; line-height: 16px; text-align: center; transform: rotate(-45deg); }
.bar.parent { top: calc((var(--row-height) - 14px) / 2); height: 14px; line-height: 14px; background: var(--bar-color, var(--level-1-color)); border-radius: 2px; }
.bar.parent::before, .bar.parent::after { content: ""; position: absolute; bottom: -4px; border-top: 5px solid var(--bar-color, var(--level-1-color)); }
.bar.parent::before { left: 0; border-right: 5px solid transparent; }
.bar.parent::after { right: 0; border-left: 5px solid transparent; }
.bar.milestone { width: 16px !important; min-width: 16px; height: 16px; top: calc((var(--row-height) - 16px) / 2); padding: 0; border-radius: 2px; transform: rotate(45deg); background: var(--bar-color, var(--milestone-color)); }
.task-end-milestone { position: absolute; z-index: 5; top: calc((var(--row-height) - 16px) / 2); width: 16px; height: 16px; border-radius: 2px; transform: rotate(45deg); background: var(--milestone-color); box-shadow: 0 1px 2px rgba(38, 68, 120, .2); pointer-events: none; }
.baseline-bar { position: absolute; z-index: 2; bottom: 5px; height: 6px; min-width: 6px; border: 1px solid #aab4c1; border-radius: 2px; background: repeating-linear-gradient(135deg, #7d8998 0 3px, #aeb7c2 3px 6px); opacity: .9; pointer-events: none; }
.baseline-bar.milestone { width: 10px !important; min-width: 10px; height: 10px; bottom: 3px; transform: rotate(45deg); }
.deviation-badge { position: absolute; z-index: 5; top: 2px; padding: 1px 4px; border-radius: 7px; background: #697587; color: white; font-size: 8px; font-weight: 800; line-height: 13px; pointer-events: none; }
.deviation-badge.late { background: #bd4d3b; }
.deviation-badge.early { background: #37845f; }
.deviation-badge.on-time { background: #687587; }
.milestone-label { position: absolute; z-index: 4; top: calc((var(--row-height) - 20px) / 2); height: 20px; max-width: 220px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: var(--completion-color); font-size: var(--bar-font-size, 10px); font-weight: 700; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.dependency-handle { position: absolute; right: 2px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: 2px solid white; border-radius: 50%; background: var(--completion-color); cursor: crosshair; z-index: 3; }
.bar.parent .dependency-handle { right: -1px; }
.bar.dependency-target { outline: 3px solid var(--completion-color); outline-offset: 2px; }
.dependency-layer { position: absolute; inset: 0; z-index: 2; overflow: visible; pointer-events: none; }
.dependency-line { fill: none; stroke: var(--dependency-color); stroke-width: 2; opacity: .92; filter: drop-shadow(0 1px 1px rgba(255,255,255,.35)); }
.dependency-arrow { fill: var(--dependency-color); }
.dependency-line:hover { opacity: 1; stroke-width: 2.5; }
.dependency-line.precedence-active { stroke: #ffc857; stroke-width: 3; opacity: 1; filter: drop-shadow(0 0 2px rgba(255, 200, 87, .55)); }
.dependency-line.precedence-muted { opacity: .14; }
.task-row.precedence, .timeline-row.precedence { background-color: color-mix(in srgb, #ffc857 13%, transparent); box-shadow: inset 3px 0 0 #ffc857; }
.task-row.precedence-muted, .timeline-row.precedence-muted { opacity: .38; }
.task-row.selected, .timeline-row.selected { opacity: 1; }
.timeline-row.precedence .bar { outline: 2px solid #ffc857; outline-offset: 2px; filter: saturate(1.15); }
.dependency-line-hit { fill: none; stroke: transparent; stroke-width: 13; pointer-events: stroke; cursor: pointer; }
.dependency-line-hit:hover { stroke: rgba(210, 61, 61, .28); }
.dependency-help { position: fixed; z-index: 30; pointer-events: none; padding: 6px 9px; border-radius: 5px; background: #253449; color: white; font-size: 10px; transform: translate(12px, 12px); }
.today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(223,90,63,.55); z-index: 2; pointer-events: none; }
.hint { margin: 9px 3px; color: #7c8694; font-size: 11px; }

dialog { width: 620px; border: 0; border-radius: 12px; padding: 0; box-shadow: 0 24px 80px rgba(22, 31, 44, .26); }
#settingsDialog { width: min(900px, calc(100vw - 32px)); }
#settingsForm { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: min(760px, calc(100vh - 32px)); }
.project-picker-dialog { width: min(760px, calc(100vw - 40px)); }
.project-history-dialog { width: min(700px, calc(100vw - 40px)); }
.project-history-list { min-height: 180px; max-height: min(520px, calc(100vh - 210px)); padding: 12px 24px; overflow-y: auto; }
.project-history-empty { padding: 42px 12px; color: var(--muted); text-align: center; }
.project-history-row { display: grid; grid-template-columns: minmax(155px, .8fr) minmax(180px, 1fr) auto; align-items: center; gap: 14px; padding: 11px 8px; border-bottom: 1px solid var(--line); }
.project-history-row strong, .project-history-row small { display: block; }
.project-history-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.project-history-row .button { white-space: nowrap; }
.project-picker-tools { display: flex; align-items: end; gap: 16px; padding: 16px 24px 12px; }
.project-picker-tools label { display: grid; flex: 1; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.project-picker-tools input { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; background: var(--surface); color: var(--ink); }
.project-picker-tools > span { padding-bottom: 10px; color: var(--muted); font-size: 9px; }
.project-picker-list { max-height: min(58vh, 560px); overflow-y: auto; padding: 0 24px 18px; }
.project-client-group { margin-top: 10px; }
.project-client-group > h3 { position: sticky; top: 0; z-index: 2; margin: 0; padding: 9px 8px 6px; background: var(--surface); color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.project-picker-item { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 11px 12px; border: 1px solid var(--line); border-bottom: 0; background: transparent; color: var(--ink); text-align: left; }
.project-picker-item:first-of-type { border-radius: 7px 7px 0 0; }
.project-picker-item:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 7px 7px; }
.project-picker-item:hover, .project-picker-item.current { background: color-mix(in srgb, var(--task-color) 12%, transparent); }
.project-picker-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-picker-item time { color: var(--muted); font-size: 9px; }
.project-picker-item small { color: var(--muted); font-size: 9px; }
.project-picker-empty { padding: 30px; color: var(--muted); text-align: center; }
dialog::backdrop { background: rgba(26, 35, 48, .42); backdrop-filter: blur(2px); }
.dialog-head { display: flex; justify-content: space-between; padding: 22px 24px 15px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 4px 0 0; font-size: 21px; }
.dialog-description { margin: 6px 0 0; color: #768191; font-size: 11px; }
.dialog-close { border: 0; background: transparent; font-size: 25px; color: #727c89; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px 24px; }
.form-grid label { display: grid; gap: 6px; font-size: 11px; font-weight: 700; color: #586373; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select { width: 100%; border: 1px solid #d8dde3; border-radius: 6px; padding: 9px; color: #273342; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 20px; padding: 20px 24px; }
.settings-grid label { display: grid; grid-auto-rows: max-content; align-content: start; align-self: start; gap: 6px; font-size: 11px; font-weight: 700; color: #586373; }
.settings-grid input[type="date"], .settings-grid input[type="number"] { box-sizing: border-box; width: 100%; height: 39px; border: 1px solid #d8dde3; border-radius: 6px; padding: 9px; color: #273342; }
.settings-grid select { box-sizing: border-box; width: 100%; height: 39px; border: 1px solid #d8dde3; border-radius: 6px; padding: 9px; color: #273342; background: white; }
.settings-grid small { font-weight: 400; color: #8a94a3; }
.working-days { grid-column: 1 / -1; margin: 2px 0 0; padding: 12px 14px 10px; border: 1px solid #d8dde3; border-radius: 8px; }
.working-days legend { padding: 0 5px; color: #586373; font-size: 11px; font-weight: 750; }
.working-days > div { display: flex; gap: 7px; margin: 2px 0 8px; }
.working-days label { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 8px 5px; border: 1px solid #d8dde3; border-radius: 6px; background: #f8fafc; cursor: pointer; }
.working-days input { accent-color: var(--task-color); }
.settings-tabs { display: flex; gap: 5px; min-width: 0; overflow-x: auto; padding: 14px 24px 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.settings-tab { position: relative; flex: 0 0 auto; border: 0; border-radius: 7px 7px 0 0; padding: 10px 13px; background: transparent; color: #778292; font-size: 11px; font-weight: 700; cursor: pointer; }
.settings-tab:hover { background: rgba(91, 155, 213, .08); color: var(--ink); }
.settings-tab.active { background: rgba(91, 155, 213, .12); color: var(--completion-color); }
.settings-tab.active::after { content: ""; position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: var(--completion-color); }
.settings-panels { min-height: 0; overflow-y: auto; }
.settings-panel { min-height: 100%; }
.settings-panel[hidden] { display: none; }
.level-settings { padding: 15px 24px 20px; }
.level-settings-head, .level-setting { display: grid; grid-template-columns: 48px minmax(210px, 1fr) 110px; align-items: center; gap: 14px; }
.level-settings-head { padding: 0 10px 7px; color: #8a94a3; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.level-setting { padding: 8px 10px; border-top: 1px solid var(--line); color: #586373; }
.level-setting strong { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(91,155,213,.13); color: var(--completion-color); }
.resource-settings { padding: 16px 24px 22px; }
.resource-settings-head, .resource-setting { display: grid; grid-template-columns: minmax(190px, 1fr) 100px 135px 34px; align-items: center; gap: 10px; }
.resource-settings-head { padding: 0 5px 7px; color: #8a94a3; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.resource-setting { padding: 7px 5px; border-top: 1px solid var(--line); }
.resource-setting input { box-sizing: border-box; width: 100%; height: 36px; border: 1px solid #d8dde3; border-radius: 6px; padding: 8px; color: #273342; }
.resource-setting .resource-percent { text-align: center; }
.resource-color-control { display: flex; align-items: center; gap: 8px; }
.resource-color-enabled { width: 16px !important; height: 16px !important; accent-color: var(--task-color); }
.resource-color { width: 72px !important; padding: 3px !important; }
.resource-color:disabled { opacity: .35; }
.resource-remove { width: 30px; height: 30px; border: 1px solid #d8dde3; border-radius: 6px; background: transparent; color: #c65343; cursor: pointer; }
.resource-add { margin: 12px 0 8px; }
.resource-settings > small { display: block; color: #8a94a3; font-size: 10px; }
.currency-settings { padding:16px 24px 22px; }
.currency-base-setting { display:grid; grid-template-columns:160px 160px 1fr; align-items:center; gap:10px; margin-bottom:18px; color:#586373; font-size:11px; font-weight:700; }
.currency-base-setting select, .currency-setting input { height:36px; border:1px solid #d8dde3; border-radius:6px; padding:7px 9px; background:white; color:#273342; }
.currency-base-setting small, .currency-settings > small { color:#8a94a3; font-size:10px; font-weight:400; }
.currency-settings-head, .currency-setting { display:grid; grid-template-columns:130px minmax(220px,1fr) 34px; align-items:center; gap:10px; }
.currency-settings-head { padding:0 5px 7px; color:#8a94a3; font-size:9px; font-weight:700; text-transform:uppercase; }
.currency-setting { padding:5px; border-top:1px solid var(--line); }
.currency-rate-wrap { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; color:var(--muted); font-size:10px; }
.currency-remove { width:30px; height:30px; border:1px solid #d8dde3; border-radius:6px; background:white; color:#bd4d3b; font-size:17px; }
.currency-add { margin:12px 0; }
.material-category-settings { padding:16px 24px 22px; }
.material-category-settings-head, .material-category-setting { display:grid; grid-template-columns:minmax(220px,1fr) 34px; align-items:center; gap:10px; }
.material-category-settings-head { padding:0 5px 7px; color:#8a94a3; font-size:9px; font-weight:700; text-transform:uppercase; }
.material-category-setting { padding:5px; border-top:1px solid var(--line); }
.material-category-setting input { height:36px; border:1px solid #d8dde3; border-radius:6px; padding:7px 9px; background:white; color:#273342; }
.material-category-remove { width:30px; height:30px; border:1px solid #d8dde3; border-radius:6px; background:white; color:#bd4d3b; font-size:17px; }
.material-category-add { margin:12px 0; }
.material-category-settings > small { color:#8a94a3; font-size:10px; }
.font-control { display: flex; align-items: center; gap: 6px; }
.font-control input { min-width: 0; width: 72px; border: 1px solid #d8dde3; border-radius: 6px; padding: 9px; color: #273342; }
.font-control small { color: #8a94a3; font-weight: 500; }
.color-control { display: flex; align-items: center; gap: 10px; height: 39px; border: 1px solid #d8dde3; border-radius: 6px; padding: 5px 9px; }
.color-control input { width: 42px; height: 27px; border: 0; padding: 0; background: transparent; }
.color-control output { color: #6c7684; font: 500 11px/1 monospace; text-transform: uppercase; }
.import-dialog { width: min(920px, calc(100vw - 50px)); }
.mapping-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; padding: 18px 24px; }
.mapping-grid label { display: grid; gap: 5px; color: #596474; font-size: 10px; font-weight: 700; }
.mapping-grid label strong { color: var(--accent); font-size: 8px; text-transform: uppercase; }
.mapping-grid select { min-width: 0; width: 100%; border: 1px solid #d8dde3; border-radius: 6px; padding: 8px; color: #273342; background: white; }
.import-preview-wrap { padding: 0 24px 20px; }
.import-preview { max-height: 230px; margin-top: 7px; overflow: auto; border: 1px solid #dde2e8; border-radius: 7px; }
.import-preview table { width: 100%; border-collapse: collapse; font-size: 10px; white-space: nowrap; }
.import-preview th { position: sticky; top: 0; background: #edf1f5; color: #526072; text-align: left; }
.import-preview th, .import-preview td { max-width: 230px; padding: 7px 9px; overflow: hidden; border-right: 1px solid #e4e8ed; border-bottom: 1px solid #e4e8ed; text-overflow: ellipsis; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 24px; background: #f7f8fa; border-radius: 0 0 12px 12px; }
.app-dialog { width: min(480px, calc(100vw - 32px)); }
.app-dialog-body { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 22px 24px 24px; }
.app-dialog-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(91,155,213,.14); color: var(--completion-color); font-size: 19px; font-weight: 800; }
.app-dialog-icon.danger { background: rgba(189,77,59,.14); color: #bd4d3b; }
.app-dialog-body p { margin: 2px 0 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.app-dialog-body label { display: grid; gap: 6px; color: #586373; font-size: 10px; font-weight: 750; }
.app-dialog-body label[hidden] { display: none !important; }
.app-dialog-body input { width: 100%; border: 1px solid #d8dde3; border-radius: 7px; padding: 10px; color: #273342; background: white; outline: 0; }
.app-dialog-body input:focus { border-color: var(--task-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-color) 16%, transparent); }
.button.danger-solid { color: white; background: #bd4d3b; border-color: #bd4d3b; }
.button.danger-solid:hover { background: #a43d30; }
.png-export-dialog { width: min(680px, calc(100vw - 32px)); }
.project-detail-dialog { width: min(760px, calc(100vw - 32px)); }
.project-detail-body { padding: 20px 24px 24px; }
.detail-period { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fb; }
.detail-period > div { flex: 1; display: grid; gap: 3px; }
.detail-period span, .detail-card span { color: #7c8796; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-period strong { font-size: 16px; }
.detail-period i { color: var(--muted); font-style: normal; font-size: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.detail-card { display: grid; gap: 5px; min-height: 78px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.detail-card strong { color: var(--ink); font-size: 19px; line-height: 1.1; }
.detail-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
body.theme-dark .detail-period, body.theme-dark .detail-card { background: #1b2736; border-color: #415168; }
body.theme-dark .detail-period strong, body.theme-dark .detail-card strong { color: #e8eef6; }
@media (max-width: 650px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.png-export-body { display: grid; gap: 10px; padding: 20px 24px 24px; }
.png-export-body > p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.export-group { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
.export-group legend { padding: 0 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.export-depth label { display: grid; grid-template-columns: 1fr minmax(190px, 45%); align-items: center; gap: 14px; font-size: 12px; font-weight: 700; }
.export-depth select { width: 100%; }
.export-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.export-option { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.export-option:has(input:checked) { border-color: var(--task-color); background: color-mix(in srgb, var(--task-color) 9%, transparent); }
.export-option input, .export-check input { accent-color: var(--task-color); }
.export-option span { display: grid; gap: 3px; }
body.theme-dark .export-group { border-color: #415168; }
@media (max-width: 560px) { .export-content { grid-template-columns: 1fr; } .export-depth label { grid-template-columns: 1fr; } }
.export-option strong { font-size: 12px; }
.export-option small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.export-check { display: flex; align-items: center; gap: 8px; margin-top: 3px; color: var(--ink); font-size: 11px; }
#toast { position: fixed; right: 24px; bottom: 24px; padding: 11px 16px; background: #253449; color: white; border-radius: 7px; font-size: 12px; opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none; z-index: 20; }
#toast.show { opacity: 1; transform: translateY(0); }
.login-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 20%, #1e344e, #08111d 65%); }
.login-screen[hidden] { display: none; }
.login-card { width: min(400px, calc(100vw - 48px)); padding: 42px; border: 1px solid #344a65; border-radius: 18px; background: rgba(18, 29, 43, .97); box-shadow: 0 24px 80px rgba(0,0,0,.45); color: #eef4fb; text-align: center; }
.login-card > img { width: 82px; height: 82px; margin-bottom: 20px; object-fit: contain; }
.login-card h1 { margin: 8px 0 10px; font-size: 27px; }
.login-card p { margin: 0 0 26px; color: #aebccd; }
.login-card small { display: block; margin-top: 24px; color: #8090a4; }
.google-signin-button { display: flex; justify-content: center; min-height: 44px; }
.login-status { min-height: 20px; margin-top: 12px; color: #ff9c8e; font-size: 12px; }
.authenticated-user { display: flex; align-items: center; gap: 8px; }
.authenticated-user[hidden] { display: none; }
.authenticated-user img { width: 28px; height: 28px; border-radius: 50%; background: #26374c; }
.authenticated-user span { max-width: 130px; overflow: hidden; color: #dce6f2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-dialog-actions { display: flex; gap: 8px; margin-right: auto; }
.sharing-setting { display: grid; gap: 7px; }
.sharing-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding: 20px 24px; }
.sharing-users-setting { grid-column: auto; }
.sharing-setting textarea { width: 100%; resize: vertical; border: 1px solid #d8dde3; border-radius: 7px; padding: 9px; background: white; color: #273342; font: inherit; line-height: 1.45; }
.owner-management { display: flex; gap: 7px; }
.owner-management input { box-sizing: border-box; flex: 1; min-width: 0; height: 39px; }
.sharing-setting > span { color: #596474; font-size: 10px; font-weight: 700; }
.sharing-rows { display: grid; gap: 7px; }
.sharing-row { display: grid; grid-template-columns: minmax(180px, 1fr) 130px 34px; gap: 7px; }
.sharing-row input, .sharing-row select { min-width: 0; }
.sharing-remove { border: 1px solid #d8dde3; border-radius: 7px; background: transparent; color: #bd4d3b; font-size: 17px; }
.read-only .drag-handle, .read-only .dependency-handle, .read-only .bar { pointer-events: none !important; }
.read-only #saveState::after { content: " · Solo lectura"; color: #e0a94e; }
body.theme-dark .sharing-setting > span { color: #b5c0ce; }
body.theme-dark .sharing-setting textarea { background: #1b2736; border-color: #415168; color: #e8eef6; }
body.theme-dark .sharing-panel input { background: #1b2736; border-color: #415168; color: #e8eef6; }
body.theme-dark .sharing-remove { border-color: #415168; color: #ef7664; }

body.theme-dark { color-scheme: dark; --ink: #e7edf5; --muted: #94a2b5; --line: #344255; --surface: #151e2b; --canvas: #0c131d; --navy: #0d1622; background: var(--canvas); color: var(--ink); }
body.theme-dark .project-bar, body.theme-dark .table-pane, body.theme-dark .task-row { background: #151e2b; }
body.theme-dark .compliance-summary { background: #151e2b; border-color: #344255; }
body.theme-dark .toolbar, body.theme-dark .table-head, body.theme-dark .timeline-head { background: #111a26; border-color: #344255; }
body.theme-dark .precedence-legend { color: #98a6b8; }
body.theme-dark .baseline-status { color: #98a6b8; }
body.theme-dark .precedence-legend kbd { border-color: #4b5b70; background: #1b2736; color: #e2eaf4; }
body.theme-dark .gantt-shell, body.theme-dark .timeline-row { background-color: #101823; border-color: #2b394b; }
body.theme-dark { --dependency-color: #82baf2; }
body.theme-dark .dependency-line { filter: drop-shadow(0 0 2px rgba(5,12,20,.9)); }
body.theme-dark .task-row, body.theme-dark .timeline-row { border-bottom-color: #293748; }
body.theme-dark .task-row.parent, body.theme-dark .timeline-row.parent { background-color: #1a2737; }
body.theme-dark .task-row:hover { background: #1b2a3c; }
body.theme-dark .task-row.selected, body.theme-dark .task-row.parent.selected, body.theme-dark .timeline-row.selected, body.theme-dark .timeline-row.parent.selected { background-color: #263d59; box-shadow: inset 4px 0 0 #6ea8e6, inset 0 1px 0 #426b99, inset 0 -1px 0 #426b99; }
body.theme-dark .task-row.precedence, body.theme-dark .timeline-row.precedence { background-color: #332f21; box-shadow: inset 3px 0 0 #ffc857; }
body.theme-dark .task-row input, body.theme-dark .task-row select, body.theme-dark .project-bar input, body.theme-dark .project-bar select { color: #e5edf7; }
body.theme-dark .task-material-badge { background:#253a50; color:#9dc5e8; }.theme-dark .task-material-badge.alert { background:#503523; color:#efb17e; }
body.theme-dark .task-row input:focus, body.theme-dark .task-row select:focus, body.theme-dark .project-bar input, body.theme-dark .project-bar select { background: #1a2635; border-color: #526780; }
body.theme-dark .quick-add-row { background: #121c29; border-top-color: #43536a; }
body.theme-dark .quick-add-row input, body.theme-dark .quick-add-row select { background: #192535; border-color: #4b5c72; color: #e6edf6; }
body.theme-dark .horizontal-scrollbar { background: #131d2a; border-color: #344255; scrollbar-color: #708198 #1a2635; }
body.theme-dark .time-cell { border-color: #2c3a4b; color: #9ba8b9; }
body.theme-dark .time-cell strong { color: #d6deea; }
body.theme-dark .time-cell.non-working { background: #0b121c; color: #69778a; }
body.theme-dark .time-cell.non-working strong { color: #8290a3; }
body.theme-dark .non-working-column { background: rgba(0, 0, 0, .22); }
body.theme-dark .timeline-row { background-image: linear-gradient(to right, transparent calc(100% - 1px), #2a3747 calc(100% - 1px)); }
body.theme-dark dialog { background: #151e2b; color: #e8eef6; }
body.theme-dark .dialog-head, body.theme-dark .dialog-actions { border-color: #344255; background: #111a26; }
body.theme-dark .form-grid label, body.theme-dark .settings-grid label, body.theme-dark .mapping-grid label { color: #b5c0ce; }
body.theme-dark .settings-tab { color: #8f9caf; }
body.theme-dark .settings-tab:hover { color: #e8eef6; }
body.theme-dark .settings-tab.active, body.theme-dark .level-setting strong { color: #81b7ed; }
body.theme-dark .level-setting { color: #c2ccd8; }
body.theme-dark .form-grid input, body.theme-dark .form-grid select, body.theme-dark .settings-grid input, body.theme-dark .settings-grid select, body.theme-dark .mapping-grid select, body.theme-dark .color-control, body.theme-dark .font-control input { background: #1b2736; border-color: #415168; color: #e8eef6; }
body.theme-dark .resource-setting input { background: #1b2736; border-color: #415168; color: #e8eef6; }
body.theme-dark .resource-remove { border-color: #415168; color: #ef7664; }
body.theme-dark .currency-base-setting { color:#b5c0ce; }
body.theme-dark .currency-base-setting select, body.theme-dark .currency-setting input, body.theme-dark .currency-remove { background:#1b2736; border-color:#415168; color:#e8eef6; }
body.theme-dark .material-category-setting input, body.theme-dark .material-category-remove { background:#1b2736; border-color:#415168; color:#e8eef6; }
body.theme-dark .app-dialog-body label { color: #b5c0ce; }
body.theme-dark .app-dialog-body input { background: #1b2736; border-color: #415168; color: #e8eef6; }
body.theme-dark .working-days { border-color: #415168; }
body.theme-dark .working-days legend { color: #b5c0ce; }
body.theme-dark .working-days label { background: #1b2736; border-color: #415168; color: #dce5f1; }
body.theme-dark .import-preview { border-color: #3a495d; }
body.theme-dark .import-preview th { background: #202d3d; color: #d7e0eb; }
body.theme-dark .import-preview td { border-color: #344255; }
body.theme-dark .milestone-label { background: rgba(15, 24, 35, .92); color: #c9dcf2; }
body.theme-dark .rename-project, body.theme-dark .button.ghost { background: #162131; border-color: #506078; color: #dce5f1; }

.materials-dialog { max-width:none; }
.tasks-layout { min-height:calc(100vh - 150px); border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.tasks-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px 18px; border-bottom:1px solid var(--line); }
.tasks-head h2 { margin:4px 0; font-size:21px; }.tasks-head p { margin:0; color:var(--muted); font-size:10px; }
.tasks-summary { display:grid; grid-template-columns:repeat(4,minmax(110px,180px)); gap:10px; padding:14px 24px 0; }
.tasks-summary div { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:8px; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:var(--canvas); }
.tasks-summary strong { font-size:18px; }.tasks-summary span { color:var(--muted); font-size:10px; }.tasks-summary .alert strong { color:#d45b48; }
.tasks-toolbar { display:flex; gap:10px; padding:14px 24px; }.tasks-toolbar input { flex:1; }.tasks-toolbar input,.tasks-toolbar select { min-width:170px; height:36px; border:1px solid #d8dde3; border-radius:7px; padding:7px 10px; background:white; color:#273342; font-size:10px; }
.project-tasks-table-wrap { position:relative; overflow:auto; margin:0 24px 24px; border:1px solid var(--line); border-radius:8px; }
.project-tasks-table { width:100%; min-width:1250px; border-collapse:collapse; table-layout:fixed; }.project-tasks-table th { padding:9px 8px; background:#edf1f5; color:#667384; font-size:9px; text-align:left; text-transform:uppercase; }.project-tasks-table th:nth-child(1){width:290px}.project-tasks-table th:nth-child(2){width:230px}.project-tasks-table th:nth-child(3){width:115px}.project-tasks-table th:nth-child(4){width:90px}.project-tasks-table th:nth-child(5){width:145px}.project-tasks-table th:nth-child(6){width:125px}.project-tasks-table th:nth-child(7){width:190px}.project-tasks-table th:last-child{width:42px}
.project-tasks-table td { padding:8px; border-top:1px solid var(--line); vertical-align:top; }.project-tasks-table input,.project-tasks-table select,.project-tasks-table textarea { width:100%; border:1px solid #d8dde3; border-radius:5px; padding:6px 7px; background:white; color:#273342; font:inherit; font-size:10px; }.project-tasks-table textarea { margin-top:5px; resize:vertical; color:var(--muted); }.project-task-title { font-weight:750!important; }.project-tasks-table tr.done { opacity:.62; }.project-tasks-table tr.done .project-task-title { text-decoration:line-through; }.project-task-open-activity { margin-top:5px; border:0; padding:0; background:transparent; color:var(--completion-color); font-size:9px; }.project-task-remove { width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:#b04d3d;font-size:18px}.tasks-empty { display:grid; justify-items:center; gap:5px; padding:55px; color:var(--muted); font-size:10px }.tasks-empty strong{color:var(--ink);font-size:13px}.tasks-empty[hidden]{display:none}.project-task-dialog textarea{width:100%;border:1px solid #d8dde3;border-radius:6px;padding:8px;background:white;color:#273342;resize:vertical}
.project-task-quick-row { position:sticky; bottom:0; background:#fbfcfe; box-shadow:0 -3px 10px rgba(35,53,77,.08); }.project-task-quick-row td { vertical-align:middle; border-top:2px solid #cfd6df; }.project-task-quick-row input,.project-task-quick-row select { border-style:dashed; }.quick-default { color:var(--muted); font-size:9px; }.project-task-quick-add { width:29px;height:29px;border:1px solid var(--task-color);border-radius:6px;background:color-mix(in srgb,var(--task-color) 12%,transparent);color:var(--task-color);font-size:18px;font-weight:800; }
body.theme-dark .tasks-layout { background:#151e2b;border-color:#344255 } body.theme-dark .tasks-toolbar input,body.theme-dark .tasks-toolbar select,body.theme-dark .project-tasks-table input,body.theme-dark .project-tasks-table select,body.theme-dark .project-tasks-table textarea,body.theme-dark .project-task-dialog textarea{background:#1b2736;border-color:#415168;color:#e8eef6} body.theme-dark .project-tasks-table th{background:#202d3d;color:#c2ceda}
body.theme-dark .project-task-quick-row { background:#121c29; }.theme-dark .project-task-quick-row td { border-top-color:#43536a; }
.materials-layout { display:grid; grid-template-rows:auto auto minmax(0,1fr); min-height:calc(100vh - 150px); border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.materials-head { align-items: flex-start; }
.materials-request-summary { align-self:center; border:1px solid var(--line); border-radius:999px; padding:7px 11px; background:var(--canvas); color:var(--muted); font-size:10px; }
.materials-sections { display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--line); }
.materials-sections button { position:relative; border:0; padding:10px 12px; background:transparent; color:var(--muted); font-size:10px; font-weight:750; }
.materials-sections button.active { color:var(--ink); }
.materials-sections button.active::after { content:""; position:absolute; right:8px; bottom:-1px; left:8px; height:2px; background:var(--task-color); }
.materials-section.active { min-height:0; }
.materials-section[data-materials-section="items"] { grid-template-rows:auto minmax(360px,1fr) auto auto; }
.materials-section[data-materials-section="items"].active { display:grid; }
.materials-section[hidden] { display:none; }
.materials-settings { align-content:start; }
.materials-meta { display: grid; grid-template-columns: 150px 180px 180px 110px minmax(240px, 1fr); gap: 16px 12px; padding: 24px; }
.materials-meta label { display: grid; gap: 5px; color: #586373; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.materials-meta input, .materials-meta select { min-width: 0; height: 36px; border: 1px solid #d8dde3; border-radius: 6px; padding: 7px 9px; background: white; color: #273342; font-size: 11px; text-transform: none; }
.materials-contingency-field { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.materials-contingency-field input { width:90px; text-align:right; }
.materials-settings-help { margin:0 24px; padding:14px 16px; border-radius:7px; background:var(--canvas); color:var(--muted); font-size:10px; }
.materials-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; }
.materials-toolbar > div { display: flex; gap: 8px; }
.materials-toolbar > span { color: var(--muted); font-size: 10px; }
.material-delivery-summary { display:flex; gap:6px !important; margin-left:auto; }
.delivery-chip { padding:5px 8px; border-radius:999px; background:#edf1f5; color:#586373; font-size:9px; font-weight:750; }
.delivery-chip.risk { background:#fff0cf; color:#8a5a00; }.delivery-chip.late { background:#f8d9d5; color:#9c3025; }.delivery-chip.received { background:#d9f0e5; color:#236c4d; }
.material-required-display { display:flex; justify-content:space-between; gap:6px; color:var(--muted); font-size:9px; }
.material-required-display strong { color:var(--ink); }
.material-field-label { display:grid; gap:3px; color:var(--muted); font-size:8px; font-weight:700; }
.material-field-label > span { text-transform:uppercase; letter-spacing:.04em; }
.material-required-explanation { color:var(--muted); font-size:8px; line-height:1.35; }
.material-delivery-state { display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:9px; font-weight:750; }
.material-delivery-state::before { content:""; width:7px; height:7px; border-radius:50%; background:#8793a2; }
.material-delivery-state.on-time::before,.material-delivery-state.received::before { background:#3c9b6d; }.material-delivery-state.risk::before { background:#d49a2e; }.material-delivery-state.late::before { background:#d45b48; }
.material-task-link { border:0; padding:0; background:transparent; color:var(--completion-color); font-size:9px; text-align:left; }
.material-critical-check { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; }
.material-critical-check input { width:auto; height:auto; }
.materials-category-filter { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.materials-category-filter select { min-width:150px; border:1px solid #d8dde3; border-radius:7px; padding:7px 9px; background:white; color:#273342; }
.materials-table-wrap { width:calc(100% - 48px); min-height:0; overflow:auto; margin:0 24px; border:1px solid var(--line); border-radius:8px; }
.materials-table { width:100%; min-width:1050px; border-collapse:collapse; table-layout:fixed; }
.materials-table th { position: sticky; z-index: 2; top: 0; padding: 9px 8px; border-bottom: 1px solid var(--line); background: #edf1f5; color: #667384; font-size: 9px; text-align: left; text-transform: uppercase; }
.materials-table th:nth-child(1) { width:260px; }.materials-table th:nth-child(2) { width:85px; }.materials-table th:nth-child(3) { width:300px; }.materials-table th:nth-child(4) { width:170px; }.materials-table th:nth-child(5) { width:140px; }.materials-table th:nth-child(6) { width:135px; }.materials-table th:nth-child(7) { width:52px; }
.materials-table td { height:54px; padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:middle; }
.materials-table tr[data-material-id] { cursor:pointer; transition:background .12s ease; }
.materials-table tr[data-material-id]:hover { background:color-mix(in srgb, var(--task-color) 7%, var(--surface)); }
.materials-table tr:last-child td { border-bottom: 0; }
.materials-table .material-category-row td { position:sticky; z-index:1; top:31px; padding:7px 10px; background:#f5f7fa; color:#536274; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.material-cell-stack { display:grid; gap:4px; }
.material-cell-line { display: grid; grid-template-columns: 1fr 70px; gap: 5px; }
.material-cell-line.equal { grid-template-columns: 1fr 1fr; }
.materials-table input, .materials-table select { width:100%; height:30px; border:1px solid #d8dde3; border-radius:5px; padding:5px 7px; background:white; color:#273342; font-size:10px; }
.materials-table input[type="number"] { text-align: right; }
.material-code { color: #697789; }
.material-planning-grid { display:grid; grid-template-columns:1fr 1fr 76px; align-items:end; gap:5px; }
.material-task-field { grid-column:1 / -1; }
.material-task-link { grid-column:1 / -1; margin-top:-2px; }
.material-required-manual { grid-column:2 / -1; }
.material-required-display { min-height:30px; align-items:center; padding:0 7px; border-radius:5px; background:var(--canvas); }
.material-input-suffix { position:relative; }
.material-input-suffix input { padding-right:22px; }
.material-input-suffix span { position:absolute; right:7px; top:8px; color:var(--muted); font-size:9px; pointer-events:none; }
.material-cost-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 5px; }
.material-cost-result { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; min-height:25px; gap:6px; color:var(--muted); font-size:9px; }
.material-cost-result strong { color: var(--ink); font-size: 10px; }
.material-remove { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #a24b42; font-size: 18px; }
.material-summary-main { display:grid; gap:3px; min-width:0; }
.material-summary-main strong,.material-summary-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.material-summary-main strong { font-size:11px; }
.material-summary-main span,.material-summary-task small { color:var(--muted); font-size:9px; }
.material-summary-task { display:grid; gap:3px; min-width:0; }
.material-summary-task strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.material-summary-dates { display:flex; gap:10px; color:var(--muted); font-size:9px; }
.material-summary-dates b { color:var(--ink); font-weight:700; }
.material-summary-cost { font-size:11px; text-align:right; }
.material-summary-status { display:grid; gap:4px; }
.material-summary-status .material-delivery-state { margin:0; }
.material-critical-dot { display:inline-flex; align-items:center; gap:4px; color:#b04d3d; font-size:8px; font-weight:800; text-transform:uppercase; }
.material-edit { width:32px; height:32px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--completion-color); font-size:14px; }
.material-detail-dialog { width:min(540px,calc(100vw - 32px)); max-width:none; height:100vh; max-height:100vh; margin:0 0 0 auto; padding:0; border:0; background:var(--surface); color:var(--ink); box-shadow:-12px 0 35px rgba(10,20,32,.24); }
.material-detail-dialog[open] { display:block; }
.material-detail-dialog::backdrop { background:rgba(8,16,27,.38); }
.material-detail-dialog form { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }
.material-detail-head { display:flex; justify-content:space-between; gap:18px; padding:22px 24px 18px; border-bottom:1px solid var(--line); }
.material-detail-head h2 { margin:5px 0 3px; font-size:19px; }
.material-detail-head p { margin:0; color:var(--muted); font-size:10px; }
.material-detail-body { overflow:auto; padding:18px 24px 26px; }
.material-detail-section { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid var(--line); }
.material-detail-section:last-child { margin:0; border:0; }
.material-detail-section h3 { grid-column:1/-1; margin:0 0 2px; color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.material-detail-field { display:grid; gap:5px; min-width:0; color:var(--muted); font-size:9px; font-weight:750; text-transform:uppercase; }
.material-detail-field.wide { grid-column:1/-1; }
.material-detail-field input,.material-detail-field select { width:100%; min-width:0; height:36px; border:1px solid #d8dde3; border-radius:6px; padding:7px 9px; background:white; color:#273342; font-size:11px; text-transform:none; }
.material-detail-field input[type="number"] { text-align:right; }
.material-detail-check { display:flex; align-items:center; gap:8px; align-self:end; min-height:36px; color:var(--ink); font-size:10px; }
.material-detail-check input { width:16px; height:16px; }
.material-detail-calculated { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:7px; background:var(--canvas); color:var(--muted); font-size:10px; }
.material-detail-calculated strong { color:var(--ink); font-size:12px; }
.material-detail-actions { display:flex; justify-content:space-between; gap:12px; padding:14px 24px; border-top:1px solid var(--line); background:var(--surface); }
.materials-empty { display: grid; justify-items: center; gap: 5px; padding: 54px 20px; color: var(--muted); text-align: center; }
.materials-empty strong { color: var(--ink); font-size: 13px; }
.materials-empty[hidden] { display: none; }
.materials-summary { display: grid; grid-template-columns:repeat(3,190px); justify-content:end; align-items:center; gap: 14px; padding: 16px 24px; }
.materials-summary > div { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:10px; }
.materials-summary strong { color:var(--ink); font-size:12px; }
.materials-grand-total { border-left: 1px solid var(--line); padding-left: 16px; }
.materials-save-hint { margin-right:auto; color:var(--muted); font-size:10px; }
.material-mapping-grid { grid-template-columns:repeat(5,1fr); }
.import-sheet-picker { display:flex; align-items:center; gap:10px; padding:14px 24px 0; color:#586373; font-size:10px; font-weight:750; }
.import-sheet-picker[hidden] { display:none; }
.import-sheet-picker select { min-width:240px; border:1px solid #d8dde3; border-radius:6px; padding:8px; background:white; color:#273342; }
body.theme-dark .materials-meta label { color:#b5c0ce; }
body.theme-dark .workspace-tabs { border-color:#344255; }
body.theme-dark .summary-head, body.theme-dark .summary-dashboard, body.theme-dark .materials-layout { background:#151e2b; border-color:#344255; }
body.theme-dark .summary-card { background:#111a26; border-color:#344255; }
body.theme-dark .materials-meta input, body.theme-dark .materials-meta select, body.theme-dark .materials-table input, body.theme-dark .materials-table select { background:#1b2736; border-color:#415168; color:#e8eef6; }
body.theme-dark .materials-request-summary,body.theme-dark .materials-settings-help { background:#111a26; border-color:#344255; }
body.theme-dark .materials-table th { background:#202d3d; color:#c2ceda; }
body.theme-dark .materials-table .material-category-row td { background:#192635; color:#aebdca; }
body.theme-dark .material-remove { color:#e18a7f; }
body.theme-dark .material-edit { background:#1b2736; border-color:#415168; color:#a8c8eb; }
body.theme-dark .material-detail-dialog { background:#151e2b; color:#e8eef6; }
body.theme-dark .material-detail-field input,body.theme-dark .material-detail-field select { background:#1b2736; border-color:#415168; color:#e8eef6; }
body.theme-dark .delivery-chip { background:#253345; color:#bdc9d6; }.theme-dark .delivery-chip.risk { background:#4b3b1d; color:#f0c669; }.theme-dark .delivery-chip.late { background:#4b2928; color:#ee9b91; }.theme-dark .delivery-chip.received { background:#1f3d34; color:#8ed1b5; }
body.theme-dark .materials-category-filter select { background:#1b2736; border-color:#415168; color:#e8eef6; }
body.theme-dark .import-sheet-picker { color:#b5c0ce; }
body.theme-dark .import-sheet-picker select { background:#1b2736; border-color:#415168; color:#e8eef6; }
@media (max-width: 1000px) {
  .materials-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .materials-notes-label { grid-column:1/-1; }
  .materials-summary { grid-template-columns:1fr 1fr; }
  .materials-grand-total { border-left:0; padding-left:0; }
  .material-mapping-grid { grid-template-columns:repeat(2,1fr); }
}

/* Tamaños configurables para las grillas operativas. */
.project-tasks-table td,
.project-tasks-table input,
.project-tasks-table select,
.project-tasks-table textarea { font-size:var(--project-tasks-font-size, 11px); }
.project-tasks-table th,
.quick-default { font-size:calc(var(--project-tasks-font-size, 11px) - 1px); }
.materials-table td,
.materials-table input,
.materials-table select { font-size:var(--materials-font-size, 11px); }
.materials-table th { font-size:calc(var(--materials-font-size, 11px) - 1px); }