/* ---------- 1. Design tokens ---------- */
  :root{
    --font-display:'Fraunces',Georgia,'Iowan Old Style',serif;
    --font-body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

    /* light palette (default) */
    --color-bg:#FAF3E7;
    --color-bg-raised:#FFFFFF;
    --color-bg-sunken:#F1E7D3;
    --color-border:#E4D6BA;
    --color-border-strong:#D2BF97;
    --color-ink:#221A10;
    --color-ink-secondary:#6E5F47;
    --color-ink-muted:#A0906F;
    --color-navy:#132043;
    --color-navy-ink:#F3EEE2;

    --color-accent:#9A6526;
    --color-accent-strong:#7C4F1B;
    --color-accent-ink:#FFFFFF;
    --color-accent-soft:#F0DFBC;

    --color-red:#C22F3D;
    --color-red-soft:#F7DBDE;
    --color-red-ink:#FFFFFF;

    --color-good:#2E7A52;
    --color-good-soft:#DCEEE2;
    --color-good-ink:#FFFFFF;

    --color-warn:#A96A1C;
    --color-warn-soft:#F1DFB9;

    --shadow-card:0 1px 2px rgba(34,26,16,.06), 0 1px 1px rgba(34,26,16,.04);
    --radius-sm:6px;
    --radius-md:10px;
    --radius-pill:999px;
  }

  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --color-bg:#12151D;
      --color-bg-raised:#191D28;
      --color-bg-sunken:#0D0F16;
      --color-border:#2C3140;
      --color-border-strong:#3B4154;
      --color-ink:#F1ECDF;
      --color-ink-secondary:#B7AD97;
      --color-ink-muted:#7C7460;
      --color-navy:#0A1024;
      --color-navy-ink:#F1ECDF;

      --color-accent:#DBA765;
      --color-accent-strong:#EFC48A;
      --color-accent-ink:#1C1406;
      --color-accent-soft:#3A2C16;

      --color-red:#F1707C;
      --color-red-soft:#3A1B21;
      --color-red-ink:#241014;

      --color-good:#5FC993;
      --color-good-soft:#12301F;
      --color-good-ink:#08170F;

      --color-warn:#E8AC55;
      --color-warn-soft:#382C15;

      --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
    }
  }
  :root[data-theme="dark"]{
    --color-bg:#12151D;
    --color-bg-raised:#191D28;
    --color-bg-sunken:#0D0F16;
    --color-border:#2C3140;
    --color-border-strong:#3B4154;
    --color-ink:#F1ECDF;
    --color-ink-secondary:#B7AD97;
    --color-ink-muted:#7C7460;
    --color-navy:#0A1024;
    --color-navy-ink:#F1ECDF;

    --color-accent:#DBA765;
    --color-accent-strong:#EFC48A;
    --color-accent-ink:#1C1406;
    --color-accent-soft:#3A2C16;

    --color-red:#F1707C;
    --color-red-soft:#3A1B21;
    --color-red-ink:#241014;

    --color-good:#5FC993;
    --color-good-soft:#12301F;
    --color-good-ink:#08170F;

    --color-warn:#E8AC55;
    --color-warn-soft:#382C15;

    --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  }

  /* ---------- 2. Reset & base ---------- */
  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--color-bg);
    color:var(--color-ink);
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance;}
  p{margin:0;}
  button{font-family:inherit;}
  input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}
  ::selection{background:var(--color-accent-soft);}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  }
  a{color:var(--color-accent-strong);}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
  :focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px;border-radius:4px;}

  /* ---------- 3. Page shell ---------- */
  .app{max-width:1180px;margin:0 auto;padding:0 20px 64px;}

  .masthead{
    background:linear-gradient(155deg,var(--color-navy) 0%,#1C2C57 100%);
    color:var(--color-navy-ink);
    border-radius:0 0 var(--radius-md) var(--radius-md);
    margin:0 -20px 20px;
    padding:28px 24px 22px;
    position:relative;
    overflow:hidden;
  }
  .masthead::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(420px 160px at 88% -20%, rgba(226,73,86,.35), transparent 70%);
    pointer-events:none;
  }
  .masthead-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;}
  .masthead-eyebrow{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:#D9B98A;opacity:.9;
  }
  .masthead h1{font-size:clamp(24px,3.4vw,32px);margin-top:2px;}
  .masthead h1 em{font-style:normal;color:#E8828C;}
  .masthead-sub{color:#C7CBDE;font-size:13.5px;margin-top:4px;max-width:56ch;}
  .masthead-meta{
    display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;position:relative;
    font-family:var(--font-mono);font-size:12px;color:#CBD0E4;
  }
  .masthead-meta b{color:var(--color-navy-ink);font-weight:600;}

  /* ---------- 4. Tab bar ---------- */
  .tabbar{
    position:sticky; top:0; z-index:20;
    display:flex; gap:4px; flex-wrap:wrap;
    background:var(--color-bg); padding:10px 0 12px;
    border-bottom:1px solid var(--color-border);
    margin-bottom:20px;
  }
  .tab-btn{
    appearance:none; border:1px solid transparent; background:transparent;
    color:var(--color-ink-secondary); font-weight:600; font-size:13.5px;
    padding:8px 14px; border-radius:var(--radius-pill); cursor:pointer;
    display:flex; align-items:center; gap:7px;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{background:var(--color-bg-sunken);}
  .tab-btn .tab-ico{font-size:14px;}
  .tab-btn[aria-selected="true"]{
    background:var(--color-navy); color:var(--color-navy-ink); border-color:var(--color-navy);
  }

  /* ---------- 5. Tab panels (kept in layout while hidden, for chart/mermaid rendering) ---------- */
  .tab-content{position:relative;}
  .tabpanel{display:block;width:100%;}
  .tabpanel.is-hidden{position:absolute;inset:0;height:0;min-height:0;overflow:hidden;visibility:hidden;pointer-events:none;}
  .panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
  .panel-head h2{font-size:21px;}
  .panel-head .panel-desc{color:var(--color-ink-secondary);font-size:13px;max-width:60ch;margin-top:4px;}

  /* ---------- 6. Cards / surfaces ---------- */
  .card{
    background:var(--color-bg-raised); border:1px solid var(--color-border);
    border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  }
  .card-pad{padding:18px 18px;}

  /* ---------- 7. Stat tiles (Resumen) ---------- */
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px;}
  .stat-tile{padding:16px 16px 14px;}
  .stat-tile .stat-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--color-ink-muted);font-weight:600;}
  .stat-tile .stat-value{font-family:var(--font-display);font-size:30px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;}
  .stat-tile .stat-value small{font-family:var(--font-body);font-size:14px;color:var(--color-ink-secondary);font-weight:500;}
  .stat-tile .stat-sub{font-size:12px;color:var(--color-ink-secondary);margin-top:4px;}
  .progress-track{height:6px;border-radius:var(--radius-pill);background:var(--color-bg-sunken);overflow:hidden;margin-top:10px;}
  .progress-fill{height:100%;background:var(--color-good);border-radius:var(--radius-pill);transition:width .3s ease;}

  /* ---------- 8. Section layout helpers ---------- */
  .two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
  @media (max-width:820px){.two-col{grid-template-columns:1fr;}}

  /* ---------- 9. Phase bar chart (Resumen) ---------- */
  .phase-chart-row{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:10px;padding:7px 0;}
  .phase-chart-row + .phase-chart-row{border-top:1px solid var(--color-border);}
  .phase-chart-label{font-family:var(--font-mono);font-size:12px;color:var(--color-ink-secondary);}
  .phase-chart-track{height:12px;border-radius:4px;background:var(--color-bg-sunken);overflow:hidden;position:relative;}
  .phase-chart-fill{height:100%;background:var(--color-good);border-radius:4px 0 0 4px;}
  .phase-chart-count{font-family:var(--font-mono);font-size:12px;text-align:right;color:var(--color-ink-secondary);font-variant-numeric:tabular-nums;}

  /* ---------- 10. Notes / risk cards ---------- */
  .note-card{display:flex;gap:10px;padding:13px 14px;border-radius:var(--radius-md);border:1px solid var(--color-border);}
  .note-card + .note-card{margin-top:10px;}
  .note-card .note-ico{font-size:16px;line-height:1.3;}
  .note-card.risk{background:var(--color-red-soft);border-color:transparent;}
  .note-card.risk .note-title{color:var(--color-red);}
  .note-card.info{background:var(--color-accent-soft);border-color:transparent;}
  .note-card.info .note-title{color:var(--color-accent-strong);}
  .note-title{font-weight:700;font-size:13px;margin-bottom:2px;}
  .note-body{font-size:12.8px;color:var(--color-ink-secondary);}

  textarea.notes-area{
    width:100%; min-height:120px; resize:vertical;
    background:var(--color-bg-sunken); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); padding:10px 12px; color:var(--color-ink); font-size:13px;
  }

  /* ---------- 11. Chips / pills ---------- */
  .chip{
    display:inline-flex; align-items:center; gap:4px;
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em;
    padding:2px 8px; border-radius:var(--radius-pill);
    background:var(--color-bg-sunken); color:var(--color-ink-secondary);
    border:1px solid var(--color-border);
  }
  .chip.chip-block{background:var(--color-red-soft);color:var(--color-red);border-color:transparent;}
  .chip.chip-action{background:var(--color-accent-soft);color:var(--color-accent-strong);border-color:transparent;}

  .filter-pill{
    appearance:none; cursor:pointer; border:1px solid var(--color-border);
    background:var(--color-bg-raised); color:var(--color-ink-secondary);
    font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:var(--radius-pill);
  }
  .filter-pill[aria-pressed="true"]{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent);}
  .filter-pill:hover:not([aria-pressed="true"]){border-color:var(--color-border-strong);}

  /* ---------- 12. Tareas: filter bar + list ---------- */
  .filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;}
  .filter-group{display:flex;flex-wrap:wrap;gap:6px;}
  .search-input{
    flex:1 1 220px; min-width:180px;
    background:var(--color-bg-raised); border:1px solid var(--color-border); border-radius:var(--radius-pill);
    padding:7px 14px; font-size:13px; color:var(--color-ink);
  }
  .filter-reset{
    background:transparent;border:1px dashed var(--color-border-strong);color:var(--color-ink-secondary);
    font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--radius-pill);cursor:pointer;
  }
  .filter-reset:hover{border-color:var(--color-red);color:var(--color-red);}

  .phase-section + .phase-section{margin-top:22px;}
  .phase-section-head{
    display:flex; align-items:center; gap:10px; margin-bottom:8px;
    font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--color-ink-muted);
  }
  .phase-section-head .line{flex:1;height:1px;background:var(--color-border);}

  .task-row{
    display:flex; gap:12px; align-items:flex-start;
    padding:11px 12px; border-radius:var(--radius-sm);
  }
  .task-row + .task-row{border-top:1px solid var(--color-border);}
  .task-row:hover{background:var(--color-bg-sunken);}
  .task-row.is-done .task-title{color:var(--color-ink-muted);text-decoration:line-through;text-decoration-color:var(--color-border-strong);}
  .task-row.is-done .task-desc{color:var(--color-ink-muted);}

  .task-check{
    appearance:none; width:19px; height:19px; margin-top:1px; flex:none;
    border:1.5px solid var(--color-border-strong); border-radius:5px; cursor:pointer;
    background:var(--color-bg-raised); position:relative;
  }
  .task-check:checked{background:var(--color-good);border-color:var(--color-good);}
  .task-check:checked::after{
    content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
    border:solid var(--color-good-ink); border-width:0 2px 2px 0; transform:rotate(40deg);
  }
  .task-id{font-family:var(--font-mono);font-size:11px;color:var(--color-accent-strong);font-weight:600;flex:none;min-width:38px;padding-top:1px;}
  .task-body{flex:1;min-width:0;}
  .task-title{font-weight:600;font-size:13.6px;}
  .task-desc{font-size:12.5px;color:var(--color-ink-secondary);margin-top:2px;}
  .task-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
  .task-empty{padding:30px 10px;text-align:center;color:var(--color-ink-muted);font-size:13px;}

  /* ---------- 13. Gantt ---------- */
  .gantt-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .gantt-controls label{font-size:12.5px;color:var(--color-ink-secondary);font-weight:600;}
  .date-input{
    background:var(--color-bg-raised); border:1px solid var(--color-border); border-radius:var(--radius-sm);
    padding:6px 10px; font-size:13px; color:var(--color-ink); font-family:var(--font-mono);
  }
  .gantt-scroll{overflow-x:auto; padding-bottom:6px;}
  .gantt-grid{display:grid; min-width:820px;}
  .gantt-weeks{display:grid; grid-template-columns:170px 1fr; margin-bottom:2px;}
  .gantt-weeks-inner{position:relative; display:grid;}
  .gantt-week-label{
    font-family:var(--font-mono); font-size:10px; color:var(--color-ink-muted);
    border-left:1px solid var(--color-border); padding-left:5px; padding-bottom:4px; align-self:end;
  }
  .gantt-row{display:grid; grid-template-columns:170px 1fr; align-items:center; min-height:34px;}
  .gantt-row-label{font-size:12px; font-weight:600; padding-right:10px; color:var(--color-ink-secondary);}
  .gantt-row-track{position:relative; height:24px; background:linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px); background-size: calc(100%/1) 100%;}
  .gantt-bar{
    position:relative; height:22px; border-radius:6px; display:flex; align-items:center;
    font-family:var(--font-mono); font-size:10.5px; color:var(--color-accent-ink); padding:0 8px;
    white-space:nowrap; overflow:hidden; background:var(--color-accent); cursor:default;
  }
  .gantt-bar.kind-pre{background:transparent;border:1.5px dashed var(--color-border-strong);color:var(--color-ink-muted);}
  .gantt-bar.kind-buffer{background:var(--color-bg-sunken);border:1.5px dashed var(--color-border-strong);color:var(--color-ink-secondary);}
  .gantt-bar.kind-prework{background:var(--color-navy);color:var(--color-navy-ink);}
  .gantt-today{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--color-red);}
  .gantt-today::after{
    content:"hoy"; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    font-family:var(--font-mono); font-size:9px; color:var(--color-red); white-space:nowrap;
  }
  .gantt-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--color-ink-secondary);}
  .gantt-legend span{display:inline-flex;align-items:center;gap:5px;}
  .legend-swatch{width:10px;height:10px;border-radius:3px;display:inline-block;}

  /* ---------- 14. Decisiones ---------- */
  .decision-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
  .decision-card{padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;}
  .decision-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
  .decision-id{font-family:var(--font-mono);font-size:11px;color:var(--color-ink-muted);}
  .decision-title{font-size:14.5px;font-weight:700;margin-top:2px;}
  .decision-desc{font-size:12.8px;color:var(--color-ink-secondary);}
  .decision-unlocks{font-size:11.5px;color:var(--color-ink-muted);font-style:italic;}
  .status-toggle{display:flex;gap:6px;}
  .status-btn{
    flex:1; border:1px solid var(--color-border); background:var(--color-bg-sunken); color:var(--color-ink-secondary);
    font-size:12px; font-weight:700; padding:6px 8px; border-radius:var(--radius-sm); cursor:pointer;
  }
  .status-btn[data-active="true"].pend{background:var(--color-warn-soft);border-color:var(--color-warn);color:var(--color-warn);}
  .status-btn[data-active="true"].resp{background:var(--color-good-soft);border-color:var(--color-good);color:var(--color-good);}
  textarea.decision-note{
    width:100%; min-height:52px; resize:vertical; background:var(--color-bg-sunken);
    border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:7px 9px; font-size:12px; color:var(--color-ink);
  }

  /* ---------- 15. Diagramas ---------- */
  .diagram-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
  .diagram-card{padding:18px;margin-bottom:16px;}
  .diagram-card h3{font-size:15px;margin-bottom:4px;}
  .diagram-caption{font-size:12.5px;color:var(--color-ink-secondary);margin-bottom:12px;max-width:70ch;}
  .mermaid-wrap{overflow-x:auto;background:var(--color-bg-sunken);border-radius:var(--radius-sm);padding:14px;}
  pre.mermaid{margin:0;background:transparent !important;}

  /* ---------- 16. Calendario ---------- */
  .cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;font-size:12px;color:var(--color-ink-secondary);}
  .cal-legend span{display:inline-flex;align-items:center;gap:5px;}
  .cal-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
  .cal-month{padding:14px 14px 16px;}
  .cal-month h4{font-size:14px;margin-bottom:10px;text-transform:capitalize;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cal-dow{font-family:var(--font-mono);font-size:9.5px;color:var(--color-ink-muted);text-align:center;padding-bottom:2px;}
  .cal-day{
    aspect-ratio:1/1; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-variant-numeric:tabular-nums; color:var(--color-ink-secondary);
    background:var(--color-bg-sunken);
  }
  .cal-day.empty{background:transparent;}
  .cal-day.is-today{box-shadow:inset 0 0 0 2px var(--color-red); font-weight:700; color:var(--color-ink);}
  .cal-milestones{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
  .milestone-row{display:flex;align-items:center;gap:10px;font-size:12.5px;}
  .milestone-dot{width:8px;height:8px;border-radius:50%;flex:none;}
  .milestone-date{font-family:var(--font-mono);font-size:11.5px;color:var(--color-ink-muted);min-width:78px;}

  footer.app-foot{margin-top:36px;padding-top:16px;border-top:1px solid var(--color-border);font-size:11.5px;color:var(--color-ink-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}