:root { --primary:#00567c; --secondary:#2a6f97; --background:#fbf8ff; --surface:#fff; --foreground:#12222b; --muted:#4a5a66; --border:#6e8496; --border-subtle:#e5e5e5; --focus:#00567c; --success:#256b4d; --warning:#7a5000; --danger:#b3261e; --surface-low:#f8f5fa; --radius-card:12px; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--background); color:var(--foreground); font-family:Geist,Arial,sans-serif; font-size:16px; line-height:1.5; }
button { font:inherit; } button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.app-header { min-height:80px; display:flex; align-items:center; gap:16px; padding:12px max(16px,calc((100vw - 1440px)/2)); background:#e5f1f8; border-bottom:1px solid #d0e9f3; }
.brand { display:flex; align-items:center; gap:8px; color:var(--primary); font-size:20px; font-weight:600; white-space:nowrap; }.brand__mark { width:40px; height:40px; padding:10px; border-radius:50%; background:#d0e9f3; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.app-header__copy { display:grid; gap:0; flex:1; }.app-header__copy strong { font-size:17px; }.app-header__copy span,.card__subtitle { color:var(--muted); font-size:14px; }
.icon-button { display:grid; width:48px; height:48px; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--foreground); cursor:pointer; }.icon-button svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }.icon-button:hover { background:#d0e9f3; }
.page { width:min(1440px,100%); margin:auto; padding:32px 24px 48px; }.page__intro { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:24px; }.page__intro > p { max-width:430px; color:var(--muted); margin:0; }.eyebrow { margin:0 0 4px; color:var(--primary); font-size:14px; font-weight:500; }h1 { margin:0; font-size:clamp(24px,3vw,36px); line-height:1.12; font-weight:500; }
.canvas-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(140px,auto)); gap:8px; }.canvas-card { min-width:0; padding:16px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-card); box-shadow:0 1px 2px rgb(18 34 43 / 6%); overflow:hidden; }.canvas-card:hover { border-color:#8ecae3; box-shadow:0 5px 14px rgb(0 86 124 / 12%); }.card__trigger { display:flex; width:100%; min-height:48px; align-items:center; gap:8px; padding:0 0 8px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }.card__icon { flex:none; width:32px; height:32px; padding:7px; color:var(--primary); background:#e7f4fa; border-radius:50%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.card__title { display:block; font-size:17px; line-height:1.2; font-weight:600; }.card__expand { width:20px; height:20px; margin-left:auto; color:var(--primary); fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }.canvas-card ul { margin:0; padding-left:18px; color:var(--foreground); font-size:13px; line-height:1.42; }.canvas-card li+li { margin-top:6px; }.canvas-card li::marker { color:var(--secondary); }.canvas-card h3 { margin:6px 0 3px; color:var(--muted); font-size:12px; font-weight:500; }.pending { margin:12px 0 0; padding:12px; color:var(--warning); background:#fff6e5; border-radius:8px; font-size:13px; line-height:1.4; }
.card--justificativas { grid-column:1; grid-row:1 / span 2; }.card--objetivo { grid-column:1; grid-row:3 / span 2; }.card--beneficios { grid-column:1; grid-row:5 / span 2; }.card--produto { grid-column:2; grid-row:1 / span 2; }.card--requisitos { grid-column:2; grid-row:3 / span 4; }.card--stakeholders { grid-column:3; grid-row:1 / span 3; }.card--equipe { grid-column:3; grid-row:4 / span 2; }.card--restricoes { grid-column:3 / span 2; grid-row:6; }.card--premissas { grid-column:4; grid-row:1 / span 3; }.card--entregas { grid-column:4; grid-row:4 / span 2; }.card--riscos { grid-column:5; grid-row:1 / span 3; }.card--tempo { grid-column:5; grid-row:4 / span 2; }.card--custos { grid-column:5; grid-row:6; }
.detail-dialog { width:min(860px,calc(100% - 32px)); max-height:calc(100% - 32px); padding:0; border:0; background:transparent; }.detail-dialog::backdrop { background:rgb(18 34 43 / 52%); backdrop-filter:blur(4px); }.detail-dialog__surface { max-height:calc(100vh - 32px); overflow:auto; padding:24px; border-radius:var(--radius-card); background:var(--surface); box-shadow:0 24px 60px rgb(18 34 43 / 28%); }.detail-dialog header { display:flex; justify-content:space-between; align-items:start; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--border-subtle); }.detail-dialog h2 { margin:0; font-size:24px; line-height:1.25; }.detail-dialog__content { padding-top:20px; font-size:17px; line-height:1.65; }.detail-dialog__content ul { margin:0; padding-left:24px; }.detail-dialog__content h3 { color:var(--muted); font-size:14px; }.detail-dialog__content .card__trigger { display:none; }.detail-dialog__content .pending { font-size:16px; }
@media (max-width:960px) { .canvas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }.canvas-card { grid-column:auto!important; grid-row:auto!important; min-height:200px; }.card--restricoes { grid-column:1 / -1!important; }.page__intro { align-items:start; flex-direction:column; gap:12px; } }
@media (max-width:600px) { .app-header { padding:12px 16px; }.app-header__copy span { display:none; }.brand { font-size:18px; }.page { padding:20px 16px 32px; }.canvas-grid { grid-template-columns:1fr; gap:12px; }.canvas-card { min-height:0; padding:16px; }.card--restricoes { grid-column:auto!important; }.canvas-card ul { font-size:14px; }.card__trigger { padding-bottom:12px; }.detail-dialog { width:calc(100% - 16px); max-height:calc(100% - 16px); }.detail-dialog__surface { max-height:calc(100vh - 16px); padding:20px 16px; }.detail-dialog__content { font-size:16px; } }
@media (prefers-reduced-motion:no-preference) { .canvas-card,.icon-button { transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }.detail-dialog[open] .detail-dialog__surface { animation:rise .18s ease-out; } @keyframes rise { from { transform:translateY(12px); opacity:0; } to { transform:none; opacity:1; } } }
@media print { .app-header { position:static; }.page { width:100%; padding:8mm; }.canvas-grid { gap:3px; }.canvas-card { border-radius:0; box-shadow:none; }.icon-button { display:none; } }