:root{
  --col-task: clamp(220px, 26vw, 360px);
  --row-h: 56px;
  --gap: 4px;
  --border: var(--color-border, #E5E7EB);
  --bg: var(--color-surface-alt, #F8FAFC);
  --sticky: var(--color-text-primary, #111827);
  --task-chip: var(--color-surface, #F3F4F6);
  --task-chip-text: var(--color-text-secondary, #374151);
  --wk-alt: var(--color-surface-alt, #F1F5F9);
  --accent: var(--color-accent, #0ea5e9);
  --bar-shadow: 0 4px 10px rgba(0,0,0,.12);
}

*{ box-sizing: border-box; }
body{ margin:0; font-family: var(--font-family-sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial); color: var(--color-text-primary, #0f172a); background: var(--color-background, #fff); }

.gantt-root, .gantt-root *{ text-align: initial; }

.wrapper{ padding: 16px; max-width: 1200px; margin: 0 auto; }
.card{ 
    border:1px solid var(--border);
    border-radius:16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(2,6,23,.06);
    background: var(--color-surface, #fff);
    display: flex;
    flex-direction: column; 
}

.card-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); background: var(--color-surface, #fff); }
.title{ font-weight:800; font-size:18px; }

.legend{ display:flex; flex-wrap:wrap; gap:8px; }
.legend-item{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:12px; color: var(--color-text-secondary, #1f2937); }
.legend-swatch{ width:14px; height:14px; border-radius:3px; border:1px solid rgba(0,0,0,.1); }

.grid-static{ background: var(--bg); overflow: visible; }

.header-grid{ position: sticky; top: 0; z-index: 100; display:grid; align-items:center; column-gap: var(--gap); padding-bottom:8px; background: var(--color-surface, #fff); border-bottom:1px solid var(--border); }

.sticky-left{ position: sticky; left:0; z-index: 35; }

.head-tasks{ grid-row: 1 / 3; grid-column: 1 / 2; height: 64px; display:flex; align-items:center; justify-content:center; border-radius: 12px; margin: 8px 0; color:#fff; background: var(--sticky); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1), 0 2px 0 rgba(0,0,0,.03); }

.month-badge{ align-self: center; justify-self: stretch; text-align:center; padding:6px 10px; border-radius: 10px; font-weight:700; color:#fff; box-shadow: var(--bar-shadow); }
.tw-badge{ align-self: center; justify-self: stretch; text-align:center; padding:4px 10px; border-radius: 8px; font-weight:600; font-size: 12px; border:2px solid var(--accent); color: var(--color-text-secondary, #1f2937); background:#fff; }

#body.body-grid{ display:grid; grid-auto-rows: var(--row-h); column-gap: var(--gap); position:relative; }

.wk-col{ grid-row: 1 / -1; background:#fff; border-left:1px solid var(--border); position:relative; z-index: 0; pointer-events: none; }
.wk-col.alt{ background: var(--wk-alt); }

.task-chip{ grid-column: 1 / 2; height: calc(var(--row-h) - 16px); align-self:center; display:flex; align-items:center; padding: 0 12px; margin: 8px 0; border-radius: 12px; background: var(--task-chip); color: var(--task-chip-text); border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); position: sticky; left: 0; z-index: 40; }

.bar{ height: 28px; border-radius: 14px; border:1px solid rgba(0,0,0,.08); box-shadow: var(--bar-shadow); overflow:hidden; z-index: 2; align-self: center; position: relative; }
.bar .label{ display:none; }
.dot{ width: 26px; height: 26px; border-radius: 8px; border:1px solid rgba(0,0,0,.08); box-shadow: var(--bar-shadow); z-index: 2; align-self: center; }


/* =========================================
   RESPONSIVIDADE MOBILE 
   ========================================= */

:root {
  --day-width: 1fr; 
}

@media (max-width: 768px) {
  :root {
    --day-width: 40px; 
    --col-task: 160px; 
  }

  .grid-static {
    display: block; 
    overflow-x: auto; 
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .header-grid, 
  .body-grid {
    width: max-content;
    min-width: 100%;
  }

  .sticky-left, 
  .task-chip {
    position: relative !important; 
    left: auto !important;
    box-shadow: none !important; 
    z-index: 1 !important; 
    background: transparent !important; 
  }

  .task-chip {
    width: 100%;
    margin-right: 8px;
    background: var(--task-chip) !important;
    
    font-size: 11px !important; 
    padding: 0 6px !important;  
    line-height: 1.2;           
  }

  .head-tasks {
    font-size: 12px !important;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}