/* =========================================================
   17. P11 · Página de proyecto (#projectPage): cabecera, banner de marca (verde + ondas lima) y Overview por secciones
   ========================================================= */
:root { --pj-green: #0f2a24; --pj-green-2: #1b4332; --pj-lime: #c8ff00; --pj-muted: #8a8f98; --pj-mono: ui-monospace, SFMono-Regular, Menlo, monospace; }
#projectPage { position: fixed; inset: 0; z-index: 55; background: var(--bg-canvas); overflow: auto; }
#projectPage[hidden] { display: none; }
.project { max-width: 1160px; }
.project .brand .crumbs { font-weight: 400; color: var(--fg-3); }
.project .tabs { padding: 0; }
.project-body { display: flex; flex-direction: column; gap: 4px; padding-bottom: 40px; }
.pj-content { display: flex; flex-direction: column; gap: 12px; }
.pj-content .spacer { flex: 1; }
.pj-content .hint { font-size: 12.5px; color: var(--fg-3); }

/* Banner */
.pj-banner { position: relative; overflow: hidden; border-radius: 22px; color: #fff; /* fondo: .grad-<id> de la Main instance (P12) */ min-height: 132px; padding: 24px 32px; display: flex; align-items: center; gap: 24px; margin-top: 6px; }
.pj-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pj-wave path { fill: none; stroke: #fff; stroke-width: 58; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pj-wave path:first-child { opacity: .16; }
.pj-wave path:last-child { stroke-width: 34; opacity: .1; }
.pj-banner-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: 62%; }
.pj-banner.overview { min-height: 220px; padding: 28px 32px; }
.pj-banner.overview .pj-banner-card { background: rgba(7, 20, 17, .84); border-radius: 18px; padding: 22px 26px; backdrop-filter: blur(6px); }
.pj-chip { display: inline-block; align-self: flex-start; background: rgba(255, 255, 255, .92); color: #1b1b1f; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; letter-spacing: .01em; }
.pj-banner h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.pj-banner.overview h1 { font-size: 30px; }
.pj-banner-meta { font-family: var(--pj-mono); font-size: 11.5px; color: #9fb1ab; word-break: break-word; }
.pj-hero { position: relative; z-index: 1; margin-left: auto; height: 176px; max-width: 42%; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }
.pj-emoji { position: relative; z-index: 1; margin-left: auto; width: 76px; height: 76px; display: grid; place-items: center; font-size: 40px; line-height: 1; background: rgba(7, 20, 17, .6); border-radius: 50%; }

/* Tagline */
.pj-tagline-wrap { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 8px; padding: 14px 40px 4px; }
.pj-tagline { margin: 0; text-align: center; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.pj-tagline.hint { font-size: 13px; color: var(--fg-3); }
.pj-tagline-edit { position: absolute; right: 0; top: 12px; opacity: .5; }
.pj-tagline-edit:hover { opacity: 1; }

/* Secciones del Overview */
.pj-sections { display: flex; flex-direction: column; margin-top: 8px; }
.pj-section { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid var(--border); }
.pj-section.is-empty { padding: 18px 0; }
.pj-sec-head { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pj-num { font-family: var(--pj-mono); font-size: 10.5px; color: var(--pj-muted); letter-spacing: .12em; }
.pj-sec-head h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.pj-tools { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity .12s; }
.pj-section:hover .pj-tools, .pj-tools:focus-within { opacity: 1; }
.pj-tools .icon-btn { width: 24px; height: 24px; font-size: 13px; }
.pj-sec-body { min-width: 0; }
.pj-empty { font-size: 13px; color: var(--fg-3); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 10px 14px; }
.pj-add { padding: 18px 0 0; border-top: 1px solid var(--border); }
.pj-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pj-link { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-style: italic; color: var(--fg); text-decoration: none; background: var(--panel); }
.pj-link:hover { border-color: var(--border-strong); background: var(--hover); }
.pj-text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--fg); max-width: 640px; }
.pj-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pj-metric { background: var(--ctr-root-bg); border-radius: 12px; padding: 14px 18px; min-width: 128px; display: flex; flex-direction: column; gap: 2px; }
.pj-metric b { font-size: 22px; line-height: 1.1; }
.pj-metric span { font-size: 10.5px; color: var(--pj-muted); }
.pj-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pj-timeline li { position: relative; padding-left: 22px; }
.pj-tl-dot { position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--pj-lime); border: 1px solid rgba(0, 0, 0, .08); }
.pj-tl-label { font-family: var(--pj-mono); font-size: 10.5px; color: #3a7d44; letter-spacing: .04em; }
.pj-timeline p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.pj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pj-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.pj-code { font-family: var(--pj-mono); font-size: 10.5px; color: var(--pj-muted); }
.pj-card b { font-size: 14px; }
.pj-card p { margin: 0; font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
.pj-quote { background: linear-gradient(135deg, #1f5a3c 0%, #123a2b 55%, var(--pj-green) 100%); color: #fff; border-radius: 18px; padding: 26px 30px; display: flex; flex-direction: column; gap: 18px; }
.pj-quote blockquote { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 500; }
.pj-quote em { font-style: normal; color: var(--pj-lime); }
.pj-quote-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pj-quote-items > div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 10px 12px; }
.pj-quote-items b { font-size: 12px; display: block; }
.pj-quote-items p { margin: 2px 0 0; font-size: 10.5px; opacity: .8; line-height: 1.4; }
.pj-goals { list-style: none; margin: 0; padding: 0; }
.pj-goals li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.pj-goals li:last-child { border-bottom: 0; }
.pj-pill { font-family: var(--pj-mono); font-size: 10.5px; background: #8b6cf0; color: #fff; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pj-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pj-checklist li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; background: var(--panel); }
.pj-check { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 12px; flex: none; }
.pj-checklist li.done .pj-check { background: var(--pj-green-2); border-color: var(--pj-green-2); color: #fff; }
.pj-check-text { flex: 1; min-width: 0; }
.pj-check-status { font-size: 10.5px; color: var(--pj-muted); white-space: nowrap; }
.pj-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pj-people li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); min-width: 0; }
.pj-people li > span:last-child { min-width: 0; }
.pj-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--pj-green-2); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.pj-people b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-people small { font-size: 10.5px; color: var(--pj-muted); }
:root[data-theme="dark"] .pj-tl-label { color: #7ccf8e; }
@media (max-width: 720px) {
  .pj-banner { padding: 20px; flex-wrap: wrap; } .pj-banner-card { max-width: 100%; } .pj-hero { max-width: 100%; height: 120px; margin-left: 0; }
  .pj-section { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; } .pj-links { justify-content: flex-start; } .pj-tools { opacity: 1; }
  .pj-tagline-wrap { padding: 12px 36px 4px 0; } .project .brand .crumbs { display: none; }
}