:root{
  --bg:#f4f7fb; --panel:#ffffff; --text:#16253f; --muted:#64748b; --line:#dbe3ef;
  --blue:#164290; --blue2:#2f5daa; --green:#2e8b57; --orange:#ee7210; --purple:#526fb5;
  --teal:#267b91; --cyan:#4e82b8; --navy:#12366f; --danger:#c83e3e;
  --shadow:0 8px 30px rgba(25, 59, 92, .08);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:linear-gradient(180deg,#f8fbfe 0,#eef5fa 100%);
  color:var(--text);
}
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{
  background:#fff;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  z-index:20;
}
.toprow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;gap:14px;align-items:center;min-width:0;max-width:100%;flex:1 1 700px}
.logo{
  width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,#0b5eb8,#38a1e7);
  position:relative;box-shadow:0 8px 20px rgba(31,111,209,.2)
}
.logo:before,.logo:after{
  content:"";position:absolute;left:13px;right:13px;height:8px;border:3px solid #fff;border-radius:4px
}
.logo:before{top:14px}.logo:after{bottom:12px}
h1{font-size:26px;line-height:1.05;margin:0;color:#164d87}
.subtitle{margin-top:5px;color:var(--muted);font-weight:600}
.badge{
  background:#eef7ff;border:1px solid #b7d8f7;color:#1c5a92;
  padding:10px 14px;border-radius:12px;font-weight:700;font-size:13px;line-height:1.35
}
.toolbar{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.planner-nav{margin-top:14px;display:grid;gap:8px}
.nav-project-row,.nav-tools-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-tools-row[hidden]{display:none}
.nav-project-row{padding:6px;background:#f7faff;border:1px solid #d9e5f2;border-radius:14px}
.nav-project-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nav-tools-row{align-items:stretch}
.nav-group{display:flex;align-items:center;gap:6px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:12px;min-height:48px}
.nav-group-label{padding:0 4px;font-size:10px;font-weight:850;color:#647b92;text-transform:uppercase;letter-spacing:.45px;white-space:nowrap}
.nav-group.filters{flex:1;min-width:440px}
.nav-group.filters .search{flex:1;min-width:170px}
.nav-group.gantt-scale-control{margin-left:auto;white-space:nowrap}
.nav-menu{position:relative;display:flex}
.nav-menu>summary{list-style:none;display:flex;align-items:center;gap:7px;user-select:none}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary:after{content:"▾";font-size:11px;color:#6c8196}
.nav-menu[open]>summary{border-color:#9db8d7;background:#eef5fc}
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 7px);z-index:60;display:grid;gap:5px;min-width:190px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(25,59,92,.2)}
.nav-menu-panel .btn{width:100%;text-align:left}
.nav-menu-panel .btn.orange{color:#fff}
button,select,input,textarea{font:inherit}
.btn{
  border:1px solid var(--line);
  background:#fff;color:var(--text);
  padding:9px 12px;border-radius:10px;
  cursor:pointer;font-weight:700;transition:.15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(20,50,80,.08)}
.btn:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.success{background:var(--green);border-color:var(--green);color:#fff}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.ghost{background:#f8fbfd}
.btn.danger{color:#b83434}.application-title{margin:0;font-size:26px;line-height:1.05;font-weight:800;color:#164d87;width:min(700px,75vw)}.phase-actions{display:flex;gap:3px;justify-content:flex-end}.phase-actions button,.phase-toggle{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:6px;padding:3px 5px;cursor:pointer;font-size:11px;font-weight:800}.phase-actions button:hover,.phase-toggle:hover{background:rgba(255,255,255,.32)}.phase-actions button:disabled{opacity:.35;cursor:not-allowed}.phase-toggle{width:26px;padding:3px}
.toolbar .spacer{flex:1}
.project-switcher{display:flex;align-items:center;gap:7px;padding:5px 7px;background:#eef4fc;border:1px solid #c9d8ef;border-radius:12px}
.project-switcher label{font-size:11px;font-weight:850;color:#164290;text-transform:uppercase;letter-spacing:.35px}
.project-switcher .select{width:var(--project-selector-width,312px);min-width:312px;max-width:min(680px,55vw);font-weight:750;border-color:#b8c9e1;transition:width .18s ease}
.storage-status{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:7px 9px;border-radius:10px;background:#f4f7fb;border:1px solid var(--line);font-size:11px;font-weight:800;color:#557089;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storage-status:before{content:"";width:8px;height:8px;border-radius:50%;background:#7890a7}
.storage-status.local:before{background:#2e8b57}.storage-status.syncing:before{background:#ee7210}.storage-status.mysql:before{background:#164290}.storage-status.host:before{background:#526fb5}.storage-status.error:before{background:#c83e3e}
.storage-fields{display:none}.storage-fields.visible{display:contents}.storage-help{font-size:12px;line-height:1.45;color:var(--muted);background:#f7faff;border:1px solid #d9e5f2;border-radius:10px;padding:10px 12px}
.storage-modal{width:min(760px,96vw)}
.storage-schema-panel{grid-column:1/-1;margin-top:4px;padding:13px;border:1px solid #ceddec;border-radius:12px;background:#f8fbff}
.storage-schema-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.storage-schema-head strong{color:#164290;font-size:13px}.storage-schema-actions{display:flex;gap:6px}
.storage-schema-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.storage-schema-item{padding:9px 10px;border:1px solid #dce7f1;border-radius:9px;background:#fff}.storage-schema-item small{display:block;margin-bottom:4px;color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.35px}.storage-schema-item strong{display:block;color:#24445f;font-size:12px}
.storage-schema-value.ok{color:#247148}.storage-schema-value.pending{color:#a24f0d}.storage-schema-value.error{color:#b83434}
.storage-schema-detail{margin:9px 0 0;color:#60788e;font-size:11px;line-height:1.45}.storage-schema-detail:empty{display:none}
.storage-schema-panel.loading{opacity:.72}.storage-schema-panel[hidden]{display:none!important}
.select,.search{
  border:1px solid var(--line);background:white;padding:9px 10px;border-radius:10px;color:var(--text)
}
.search{min-width:220px}

.content{flex:1;min-height:0;padding:14px 16px 16px}
.section-tabs{display:inline-flex;align-items:center;gap:4px;margin-bottom:10px;padding:4px;background:#eaf1f8;border:1px solid #d5e1ed;border-radius:13px}
.section-tab{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#587087;padding:9px 14px;border-radius:9px;cursor:pointer;font-weight:800;transition:.15s}
.section-tab:hover{color:var(--blue);background:rgba(255,255,255,.55)}
.section-tab.active{color:#fff;background:var(--blue);box-shadow:0 5px 14px rgba(22,66,144,.2)}
.section-tab small{font-size:10px;font-weight:750;opacity:.82}
.workspace-view[hidden]{display:none!important}
.board{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column
}
.summary{
  display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));
  gap:10px;padding:12px;background:#fbfdff;border-bottom:1px solid var(--line)
}
.card{
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.card .k{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.card .v{font-size:20px;font-weight:800;margin-top:2px;color:#194f85}

.gantt-shell{--task-list-width:390px;height:580px;display:grid;grid-template-columns:var(--task-list-width) 7px minmax(0,1fr)}
.left,.right{min-height:0;overflow:auto}
.left{background:#fcfeff}
.right{position:relative;overflow:auto;background:#fff}
.gantt-column-resizer{position:relative;z-index:15;background:#edf3f9;border-left:1px solid #d4e0ec;border-right:1px solid #d4e0ec;cursor:col-resize;touch-action:none;outline:none}
.gantt-column-resizer:before{content:"";position:absolute;left:50%;top:50%;width:3px;height:42px;transform:translate(-50%,-50%);border-radius:999px;background:#9bb1c7;transition:.15s}
.gantt-column-resizer:hover,.gantt-column-resizer:focus-visible,.gantt-column-resizer.active{background:#dceafb}
.gantt-column-resizer:hover:before,.gantt-column-resizer:focus-visible:before,.gantt-column-resizer.active:before{height:64px;background:#164290}
body.gantt-resizing{cursor:col-resize;user-select:none}
.left-header{
  position:sticky;top:0;z-index:10;
  height:72px;background:linear-gradient(180deg,#eaf5ff,#f5faff);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:42px 1fr 120px;align-items:end;
  padding:0 8px 10px;font-weight:800;color:#2c5b87
}
.timeline-header{
  position:sticky;top:0;z-index:12;height:72px;background:#f7fbff;border-bottom:1px solid var(--line)
}
.month-row,.week-row{display:flex;position:absolute;left:0;right:0}
.month-row{top:0;height:34px}
.week-row{top:34px;height:38px}
.month-cell{
  border-right:1px solid #d7e7f5;background:linear-gradient(180deg,#338ee0,#62abe8);
  color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.week-cell{
  border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#41617f;background:#f8fbfe
}
.phase-row{
  height:32px;display:grid;grid-template-columns:34px minmax(0,1fr) 154px;align-items:center;
  color:#fff;font-weight:800;font-size:13px;padding:0 8px
}
.task-row{
  height:34px;display:grid;grid-template-columns:34px 1fr 94px;align-items:center;
  padding:0 8px;border-bottom:1px solid #edf2f6;font-size:12px;
}
.task-row:hover{background:#f7fbfe}
.task-no{color:#7790a7;font-weight:800;text-align:center}
.task-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.task-progress{font-size:11px;font-weight:800;text-align:right;color:#4b6a86}
.task-actions{display:flex;align-items:center;justify-content:flex-end;gap:3px}.task-actions .task-progress{min-width:30px}.row-order-btn{display:grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid #d5e1ed;border-radius:5px;background:#fff;color:#164290;font-size:11px;font-weight:900;cursor:pointer}.row-order-btn:hover{background:#eaf2fb}.row-order-btn:disabled{opacity:.3;cursor:not-allowed}
.timeline-row{height:34px;position:relative;border-bottom:1px solid #edf2f6}
.timeline-phase{height:32px;position:relative}
.phase-range-line{position:absolute;top:13px;height:6px;min-width:4px;border-radius:999px;background:#102a43;box-shadow:0 1px 3px rgba(7,27,45,.38);z-index:2;pointer-events:none}
.phase-range-line:before,.phase-range-line:after{content:"";position:absolute;top:-3px;width:2px;height:12px;border-radius:2px;background:#102a43}.phase-range-line:before{left:0}.phase-range-line:after{right:0}
.phase-range-key{display:inline-block;width:22px;height:5px;margin-right:5px;border-radius:999px;background:#102a43;vertical-align:2px}
.view-check{display:inline-flex;align-items:center;gap:5px;padding:0 5px;color:#355675;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}.view-check input{width:15px;height:15px;margin:0;accent-color:#164290;cursor:pointer}
.gridline{position:absolute;top:0;bottom:0;border-left:1px dashed #d7e3ec;pointer-events:none}
.todayline{position:absolute;top:0;bottom:0;width:2px;background:#e44;z-index:3;pointer-events:none}
.bar{
  position:absolute;height:20px;top:7px;border-radius:8px;color:#fff;
  font-size:10px;font-weight:800;line-height:20px;padding:0 8px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);cursor:grab;user-select:none;
  min-width:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.bar.dragging{opacity:.75;cursor:grabbing}.bar.readonly{cursor:default}.bar.readonly .handle{display:none}
.drag-date-tooltip{position:fixed;z-index:120;min-width:220px;max-width:min(340px,calc(100vw - 24px));padding:9px 11px;border:1px solid #ee7210;border-radius:10px;background:#12366f;color:#fff;box-shadow:0 10px 28px rgba(12,39,77,.28);pointer-events:none;font-size:11px;line-height:1.35}
.drag-date-tooltip:after{content:"";position:absolute;left:18px;bottom:-7px;width:12px;height:12px;border-right:1px solid #ee7210;border-bottom:1px solid #ee7210;background:#12366f;transform:rotate(45deg)}
.drag-date-tooltip strong{display:block;margin-bottom:3px;color:#fff;font-size:12px}.drag-date-tooltip span{display:block;color:#dbe9f8}.drag-date-tooltip b{color:#ffd6b5}
.drag-date-tooltip[hidden]{display:none!important}
.gantt-change-toast{position:fixed;right:18px;bottom:18px;z-index:120;max-width:min(380px,calc(100vw - 36px));padding:10px 13px;border-left:4px solid #2e8b57;border-radius:10px;background:#fff;color:#24445f;box-shadow:0 12px 34px rgba(25,59,92,.22);font-size:12px;font-weight:750;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}
.gantt-change-toast.show{opacity:1;transform:translateY(0)}
.bar .handle{
  position:absolute;top:0;width:7px;height:100%;background:rgba(255,255,255,.35);
  cursor:ew-resize
}
.bar .handle.left{left:0;border-radius:8px 0 0 8px}
.bar .handle.right{right:0;border-radius:0 8px 8px 0}
.bar-progress{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.15);pointer-events:none}
.bar-label{position:relative;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.milestone{
  position:absolute;width:15px;height:15px;top:9px;transform:rotate(45deg);
  background:var(--danger);border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.18)
}
.legend{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 12px;
  border-top:1px solid var(--line);background:#fbfdff;font-size:11px;color:#516c85
}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:-1px}
.footer-note{margin-left:auto;font-weight:700;color:#6a8197}

.stats-section{
  margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.stats-section.workspace-view{margin-top:0}
.stats-panel{
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden
}
.stats-header{
  padding:12px 14px;border-bottom:1px solid var(--line);font-weight:800;color:#1f5b9e;
  background:linear-gradient(180deg,#f8fbff,#f2f7fc)
}
.stats-body{padding:12px}
.stats-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.chart-wrap{
  border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;min-height:320px
}
.chart-title{font-weight:800;color:#355977;margin:0 0 8px}
.table-wrap{
  border:1px solid var(--line);border-radius:12px;background:#fff;overflow:auto;max-height:350px
}
.mini-table{width:100%;border-collapse:collapse;font-size:12px}
.mini-table th,.mini-table td{padding:8px 10px;border-bottom:1px solid #edf2f6;text-align:left}
.mini-table th{background:#f8fbfe;color:#4b6a86;position:sticky;top:0}
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{
  padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.kpi small{display:block;color:var(--muted);font-weight:700;margin-bottom:4px}
.kpi strong{font-size:22px;color:#194f85}
.portfolio-report{display:grid;gap:14px}
.portfolio-report .stats-panel{overflow:visible}
.portfolio-report-subtabs{display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;padding:4px;border:1px solid #d5e1ed;border-radius:10px;background:#eaf1f8}
.portfolio-report-subtab{padding:7px 12px;border:0;border-radius:7px;background:transparent;color:#587087;font-weight:800;cursor:pointer;transition:.15s}
.portfolio-report-subtab:hover{color:var(--blue);background:rgba(255,255,255,.65)}
.portfolio-report-subtab.active{color:#fff;background:var(--blue);box-shadow:0 4px 10px rgba(22,66,144,.18)}
.portfolio-report-view[hidden]{display:none!important}
.portfolio-report-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.portfolio-report-heading p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.portfolio-report-count{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:#e8f1fd;color:#164290;font-size:11px;font-weight:850}
.portfolio-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.portfolio-report-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px}
.portfolio-chart{position:relative;height:340px}
.portfolio-table .project-progress-cell{min-width:140px}
.portfolio-progress-track{height:7px;overflow:hidden;margin-top:5px;border-radius:999px;background:#dce6ef}
.portfolio-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#164290,#2b8de4)}
.portfolio-state{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:850;white-space:nowrap}
.portfolio-state.completed{background:#e6f7ee;color:#247148}.portfolio-state.progress{background:#e8f1fd;color:#164290}.portfolio-state.pending{background:#eef2f6;color:#60758a}.portfolio-state.delayed{background:#fdeaea;color:#aa2929}.portfolio-state.empty{background:#fff4df;color:#9a5b0b}
.portfolio-open{padding:5px 8px;border:1px solid #bcd0e4;border-radius:7px;background:#fff;color:#164290;font-weight:800;cursor:pointer}
@media(max-width:1100px){.portfolio-kpis{grid-template-columns:repeat(3,1fr)}.portfolio-report-grid{grid-template-columns:1fr}}
@media(max-width:650px){.portfolio-kpis{grid-template-columns:repeat(2,1fr)}.portfolio-report-subtabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.portfolio-report-subtab{padding:8px 6px}.portfolio-report-heading{display:block}.portfolio-report-count{display:inline-flex;margin-top:8px}.portfolio-chart{height:300px}.portfolio-report .stats-body{padding:9px}}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(11,30,48,.35);display:none;
  align-items:center;justify-content:center;z-index:100
}
.modal-backdrop.open{display:flex}
.modal{
  width:min(680px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);padding:20px
}
.modal h2{margin:0 0 14px;color:#164d87}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:800;color:#587087}
.field input,.field select,.field textarea{
  box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;color:var(--text)
}
.field textarea{min-height:80px;resize:vertical}
.task-status-derived{font-weight:850;cursor:default}.task-status-derived.pending{border-color:#c5d0dc;background:#f4f7fa;color:#61758a}.task-status-derived.progress{border-color:#91bce7;background:#edf6ff;color:#1766aa}.task-status-derived.done{border-color:#9bd0b1;background:#edf9f2;color:#247148}
.task-progress-label{display:flex;align-items:center;justify-content:space-between;gap:10px}.task-progress-value{min-width:46px;padding:3px 8px;border-radius:999px;background:#164290;color:#fff;font-size:11px;font-weight:900;text-align:center}
.task-progress-control{display:flex;align-items:center;min-height:40px;padding:0 4px}.task-progress-control input[type="range"]{width:100%;height:8px;padding:0;border:0;border-radius:999px;background:linear-gradient(90deg,#2e8b57 0 var(--progress,0%),#dbe5ee var(--progress,0%) 100%);accent-color:#164290;cursor:pointer}.task-progress-control input[type="range"]::-webkit-slider-thumb{width:20px;height:20px}.task-progress-control input[type="range"]:focus{outline:3px solid rgba(40,121,199,.15);outline-offset:5px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.task-modal{display:flex;flex-direction:column;width:min(1040px,calc(100vw - 40px));max-height:min(780px,calc(100dvh - 32px));overflow:hidden;padding:24px}
.task-modal h2{flex:0 0 auto;margin-bottom:18px}
.task-form-grid{grid-template-columns:repeat(12,minmax(0,1fr));flex:1;min-height:0;overflow-y:auto;padding:2px 5px 5px 2px;align-content:start}
.task-field-name,.task-field-description{grid-column:1/-1}.task-field-phase,.task-field-status,.task-field-owner{grid-column:span 4}.task-field-start,.task-field-end{grid-column:span 3}.task-field-progress{grid-column:span 6}
.task-field-description textarea{min-height:120px}
.task-modal>.modal-actions{flex:0 0 auto;margin-top:18px;padding-top:16px;border-top:1px solid #e1e9f0;background:#fff}
@media(max-width:900px){.task-modal{width:min(760px,calc(100vw - 28px));padding:20px}.task-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-field-name,.task-field-owner,.task-field-progress,.task-field-description{grid-column:1/-1}.task-field-phase,.task-field-status,.task-field-start,.task-field-end{grid-column:span 1}}
@media(max-width:600px){#taskModal{align-items:flex-end;padding:0}.task-modal{width:100%;max-height:calc(100dvh - 48px);padding:18px 16px 14px;border-radius:18px 18px 0 0}.task-modal h2{margin-bottom:14px;font-size:20px}.task-form-grid{grid-template-columns:minmax(0,1fr);gap:11px;padding-right:3px}.task-form-grid>.field{grid-column:1!important}.task-field-description textarea{min-height:92px}.task-modal>.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:12px}.task-modal>.modal-actions .btn{width:100%;min-height:42px}.task-modal #deleteTaskBtn{grid-column:1/-1;margin-right:0!important}}
@media(max-height:620px) and (min-width:601px){.task-modal{max-height:calc(100dvh - 20px);padding-top:18px;padding-bottom:14px}.task-modal h2{margin-bottom:10px}.task-form-grid{gap:9px}.task-field-description textarea{min-height:72px}.task-modal>.modal-actions{margin-top:10px;padding-top:10px}}
.gantt-color-modal{width:min(760px,94vw)}
.gantt-color-intro{margin:-4px 0 16px;color:var(--muted);font-size:12px;line-height:1.5}
.gantt-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.gantt-color-option{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#f9fbfd}
.gantt-color-option input[type="color"]{width:52px;height:42px;padding:3px;border:1px solid #b9cce0;border-radius:9px;background:#fff;cursor:pointer}
.gantt-color-option strong{display:block;color:#173f75;font-size:12px}.gantt-color-option small{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}
.gantt-color-preview{margin-top:16px;padding:13px;border:1px solid #cbddec;border-radius:12px;background:#f5f8fb}
.gantt-color-preview>strong{display:block;margin-bottom:10px;color:#334f68;font-size:11px}
.gantt-preview-list{display:grid;gap:9px}.gantt-preview-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;color:#587087;font-size:10px;font-weight:800}
.gantt-preview-bar{position:relative;height:18px;overflow:hidden;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(10,42,80,.1)}.gantt-preview-bar span{position:absolute;inset:0 auto 0 0;width:45%}
.gantt-color-modal>.modal-actions{flex-wrap:wrap}
@media(max-width:600px){.gantt-color-grid{grid-template-columns:1fr}.gantt-color-modal{width:96vw;padding:17px}.gantt-preview-row{grid-template-columns:78px minmax(0,1fr)}.gantt-color-modal>.modal-actions{display:grid;grid-template-columns:1fr 1fr}.gantt-color-modal>.modal-actions .btn{width:100%;min-height:42px}.gantt-color-modal>.modal-actions .btn:first-child{grid-column:1/-1;margin-right:0!important}}
.project-management-modal{width:min(1180px,98vw);height:min(720px,84vh);display:flex;flex-direction:column;overflow:hidden}
.project-crud-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex:0 0 auto}
.project-crud-head h2{margin-bottom:4px}.project-crud-head p{margin:0;color:var(--muted);font-size:12px}
.project-crud-list{display:grid;align-content:start;gap:8px;flex:1;min-height:0;overflow-y:auto;padding:2px 5px 2px 2px}
.project-management-modal>.modal-actions{flex:0 0 auto;padding-top:4px}
.project-crud-empty{display:grid;place-items:center;min-height:180px;padding:24px;border:1px dashed #b9cce0;border-radius:12px;background:#f7faff;color:var(--muted);font-size:13px;text-align:center}
.project-crud-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfdff}
.project-crud-copy{min-width:0}.project-crud-copy strong{display:block;color:#164290;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-crud-copy small{display:block;margin-top:4px;color:var(--muted)}
.project-crud-actions{display:flex;align-items:center;gap:6px}.project-state{padding:4px 7px;border-radius:999px;background:#e8f6ee;color:#247148;font-size:10px;font-weight:850}.project-state.busy{background:#fff1e4;color:#a24f0d}
.import-preview{grid-column:1/-1;display:grid;gap:12px}
.import-preview[hidden],.backup-options[hidden]{display:none!important}
.import-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #cbddec;border-radius:11px;background:#f7faff}
.import-summary strong{display:block;color:#164290}.import-summary small{display:block;margin-top:3px;color:var(--muted)}
.import-project-list{display:grid;gap:7px;max-height:260px;overflow:auto;padding:2px}
.import-project-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.import-project-option:has(input:checked){border-color:#75a7d7;background:#f2f8ff}
.import-project-option input{margin-top:3px;accent-color:#164290}
.import-project-copy{min-width:0}.import-project-copy strong{display:block;color:#164290;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.import-project-copy small{display:block;margin-top:3px;color:var(--muted)}
.import-source-state{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#e7f0fc;color:#164290;font-size:9px;font-weight:850;vertical-align:1px}
.import-mode-options{display:grid;gap:7px}
.import-mode-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.import-mode-option:has(input:checked){border-color:#ee7210;background:#fff8f1}.import-mode-option input{margin-top:3px;accent-color:#ee7210}.import-mode-option strong{display:block;font-size:12px;color:#334f68}.import-mode-option small{display:block;margin-top:2px;color:var(--muted);line-height:1.35}
.import-mode-option:has(input:disabled){cursor:not-allowed;opacity:.55}
.export-modal{width:min(620px,94vw)}
.export-section-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.export-section-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.export-section-option:has(input:checked){border-color:#ee7210;background:#fff8f1;box-shadow:0 0 0 1px rgba(238,114,16,.12)}
.export-section-option input{margin-top:3px;accent-color:#ee7210}
.export-section-option strong{display:block;color:#164290;font-size:13px}.export-section-option small{display:block;margin-top:4px;color:var(--muted);line-height:1.4}
@media(max-width:650px){.export-section-options{grid-template-columns:1fr}}
@media(max-width:650px){.project-management-modal{width:98vw;height:90vh;padding:16px}.project-crud-head,.project-crud-row{display:block}.project-crud-head .btn{margin-top:10px}.project-crud-actions{margin-top:10px;flex-wrap:wrap}}

@media(max-width:1400px){
  .nav-group.filters{order:5;flex-basis:100%}
  .nav-group.gantt-scale-control{order:6;margin-left:auto}
}
@media(max-width:1100px){
  .summary{grid-template-columns:repeat(3,1fr)}
  .stats-section,.stats-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .gantt-shell{--task-list-width:320px;grid-template-columns:var(--task-list-width) 7px minmax(0,1fr)}
  .left-header{grid-template-columns:36px 1fr 100px}.phase-row{grid-template-columns:32px minmax(0,1fr) 146px}.task-row{grid-template-columns:32px 1fr 92px}
  .nav-project-actions{width:100%;margin-left:0}
  .nav-project-actions .btn.success{margin-left:auto}
  .nav-group.filters{min-width:100%}
}
@media(max-width:650px){
  .topbar{padding:12px 10px}
  .project-switcher{width:100%;flex-wrap:wrap}
  .project-switcher .select{width:auto;min-width:0;max-width:100%;flex:1 1 220px}
  .nav-project-actions{align-items:stretch}
  .nav-project-actions .storage-status{order:5;width:100%;max-width:none}
  .nav-group{width:100%;flex-wrap:wrap}
  .nav-group.filters .select,.nav-group.filters .search{width:100%;flex-basis:100%}
  .nav-menu{flex:1}.nav-menu>summary{width:100%;justify-content:center}
  .section-tabs{display:flex;width:100%}.section-tab{flex:1;justify-content:center;padding:9px 7px}.section-tab small{display:none}
  .storage-schema-grid{grid-template-columns:1fr 1fr}.storage-schema-head{align-items:flex-start;flex-direction:column}.storage-schema-actions{width:100%;flex-wrap:wrap}
}
/* Identidad visual corporativa */
.company-logo-wrap{width:190px;height:62px;display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto;overflow:hidden}.company-logo{width:185px;height:auto;max-height:58px;object-fit:contain;display:block}.brand-copy{min-width:0;flex:1}.application-title{width:100%;max-width:680px;color:#164290;font-size:28px;line-height:1.08;font-weight:850}.project-name-line,.responsible-line{font-size:13px;margin-top:4px;color:#4b5f78}.project-label,.responsible-line span{color:#6b7c91;font-weight:700}.project-name-line strong,.responsible-line strong{color:#164290}.badge{border-color:#c9d8ef;background:linear-gradient(135deg,#f4f8ff,#fff5ec)}.badge-title{color:#164290;font-weight:850}.badge-project-label{color:#4b5f78;font-weight:700}.badge-project-label{color:#4b5f78;font-weight:700}.left-project-info{min-height:54px;padding:8px 12px;background:linear-gradient(135deg,#164290,#244f9a);color:#fff;border-bottom:1px solid #0f3475}.left-project-title{font-size:13px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.left-project-responsible{font-size:11px;margin-top:3px;color:#e9eef8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.left-header{background:linear-gradient(180deg,#eef4fc,#f8fbff);color:#164290}.btn.primary{background:#164290;border-color:#164290}.btn.orange{background:#ee7210;border-color:#ee7210}.btn.success{background:#2e8b57;border-color:#2e8b57}.month-cell{background:linear-gradient(180deg,#164290,#2f5daa)}
.left-head-stack{position:sticky;top:0;z-index:12;height:72px;background:#f7fbff}
.left-head-stack .left-project-info{height:34px;min-height:34px;padding:3px 12px}
.left-head-stack .left-project-title{font-size:11px;line-height:13px}
.left-head-stack .left-project-responsible{font-size:9px;line-height:11px;margin-top:1px}
.left-head-stack .left-header{position:static;top:auto;height:38px;grid-template-columns:42px 1fr 72px;padding:0 8px 7px}
@media(max-width:900px){.left-head-stack .left-header{grid-template-columns:36px 1fr 100px}}

/* Cabecera compacta: prioriza el área de trabajo y evita información duplicada. */
.topbar{padding:8px 16px 7px}
.toprow{align-items:center;gap:10px;flex-wrap:nowrap}
.brand{gap:11px;flex:0 0 auto}
.company-logo-wrap{width:145px;height:44px}
.company-logo{width:140px;max-height:42px}
.application-title{max-width:640px;font-size:23px;line-height:1}
.project-name-line,.responsible-line,.subtitle,.badge{display:none}
.planner-nav{margin-top:5px;gap:4px}
.nav-project-row{padding:2px;border-radius:10px}
.toprow .nav-project-row{flex:1 1 auto;min-width:0}
.nav-project-row,.nav-tools-row{gap:4px}
.project-switcher{padding:2px 4px;border-radius:9px}
.nav-project-actions{gap:5px}
.nav-group{min-height:36px;gap:4px;padding:2px;border-radius:9px}
.btn{padding:6px 9px;border-radius:8px}
.select,.search{padding:6px 8px;border-radius:8px}
.storage-status{padding:5px 7px;border-radius:8px}
.content{padding:6px 10px 10px}
.workspace-overview{display:flex;align-items:stretch;gap:5px;margin-bottom:5px}
@media(max-width:900px){.toprow{flex-wrap:wrap}.toprow .nav-project-row{width:100%;flex-basis:100%}}
.workspace-overview .section-tabs{flex:0 0 auto;margin:0;padding:3px;border-radius:10px}
.section-tab{padding:6px 10px;border-radius:7px}
.workspace-overview .summary{flex:1;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:#fbfdff}
.workspace-overview .summary[hidden]{display:none!important}
.workspace-overview .card{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:4px 8px;border-radius:8px}
.card .k{font-size:10px}
.card .v{font-size:16px;margin-top:0;white-space:nowrap}
@media(max-width:1100px){
  .workspace-overview{display:block}
  .workspace-overview .section-tabs{display:flex;margin-bottom:5px}
  .workspace-overview .summary{grid-template-columns:repeat(3,1fr);margin-bottom:5px}
}
@media(max-width:650px){
  .topbar{padding:8px 10px}
  .planner-nav{margin-top:5px}
  .content{padding:8px 10px 10px}
  .workspace-overview .summary{grid-template-columns:repeat(2,1fr)}
  .workspace-overview .card{display:block;padding:6px 8px}
  .nav-group.filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nav-group.filters .nav-group-label{grid-column:1/-1}
  .nav-group.filters .select{width:100%;min-width:0;flex-basis:auto}
  .nav-group.filters .search{grid-column:1/-1;width:100%;min-width:0;flex-basis:auto}
}

/* Barra de herramientas adaptable: evita controles comprimidos y textos cortados. */
.nav-tools-row>*{min-width:0}
.nav-group.create-tools{flex:0 0 auto}
.nav-group.view-tools{flex:1 1 auto;flex-wrap:wrap}
.nav-group.filters .select{min-width:0}
.nav-group.filters #phaseFilter{flex:1 1 220px}
.nav-group.filters #statusFilter{flex:0 1 180px}

@media(max-width:1400px) and (min-width:1101px){
  .workspace-overview{display:block}
  .workspace-overview .section-tabs{display:flex;margin-bottom:5px}
  .workspace-overview .summary{margin-bottom:5px}
}

@media(max-width:1850px) and (min-width:1101px){
  .nav-tools-row{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr) max-content max-content max-content;
  }
  .nav-group.create-tools{grid-column:1;grid-row:1}
  .nav-group.view-tools{grid-column:2/-1;grid-row:1}
  .nav-group.filters{grid-column:1/3;grid-row:2;min-width:0;order:initial}
  .nav-menu.export-menu{grid-column:3;grid-row:2}
  .nav-menu.data-menu{grid-column:4;grid-row:2}
  .nav-group.gantt-scale-control{grid-column:5;grid-row:2;margin-left:0;order:initial}
}

@media(max-width:1100px){
  .nav-tools-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:stretch}
  .nav-group.create-tools,.nav-group.view-tools,.nav-group.filters{grid-column:1/-1;min-width:0;order:initial}
  .nav-menu.export-menu{grid-column:1;grid-row:4}
  .nav-menu.data-menu{grid-column:2;grid-row:4}
  .nav-group.gantt-scale-control{grid-column:3;grid-row:4;margin-left:0;order:initial;width:auto}
  .nav-menu>summary{height:100%}
}

@media(max-width:650px){
  .nav-tools-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nav-group.create-tools,.nav-group.view-tools,.nav-group.filters,.nav-group.gantt-scale-control{grid-column:1/-1;width:100%}
  .nav-group.create-tools .nav-group-label,.nav-group.view-tools .nav-group-label{flex:1 0 100%;padding:2px 4px}
  .nav-group.create-tools .btn{flex:1 1 90px}
  .nav-group.view-tools .select,.nav-group.view-tools .btn{flex:1 1 105px;min-width:0}
  .nav-group.view-tools .view-check{flex:1 1 170px;min-height:34px;padding:0 8px}
  .nav-group.filters .view-check{grid-column:1/-1;min-height:34px;padding:0 4px;white-space:normal}
  .nav-menu.export-menu{grid-column:1;grid-row:auto}
  .nav-menu.data-menu{grid-column:2;grid-row:auto}
  .nav-group.gantt-scale-control{grid-row:auto}
  .nav-group.gantt-scale-control .select{flex:1;min-width:0}
}

@media(max-width:420px){
  .nav-group.filters{grid-template-columns:minmax(0,1fr)}
  .nav-group.filters .nav-group-label,.nav-group.filters .view-check,.nav-group.filters .search{grid-column:1}
  .nav-group.filters .select{grid-column:1;width:100%}
}

.runtime-error{position:fixed;right:16px;bottom:16px;z-index:9999;max-width:440px;padding:12px 16px;border-radius:8px;background:#8b1e1e;color:#fff;box-shadow:0 8px 24px #0004}