/* Fase 8 — Design system + UX (navy/âmbar) */

/* Header + menu mobile + nav de passos no topo */
.app-header{position:relative;padding:0!important;background:linear-gradient(135deg,var(--navy),var(--navy2));flex-shrink:0;color:#fff}
.app-header h1,.app-header p{margin:0}
.app-header-row{display:flex;flex-wrap:nowrap;align-items:center;gap:6px 8px;padding:8px clamp(10px,2vw,18px) 8px;min-height:0}
.app-header-titles{flex:0 1 auto;min-width:0;max-width:min(200px,26vw);order:1}
.app-header-titles h1{font-size:16px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-header-titles p{font-size:10px;opacity:.82;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-header-nav{flex:1 1 auto;min-width:0;order:2;display:flex;flex-direction:column;justify-content:center;gap:0;padding:0}
.app-header-nav.is-painel .app-header-steps{display:none}
.app-header-nav.is-painel .steps-compact{display:block}
.app-header-steps{display:flex;align-items:stretch;gap:3px;width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.app-header-steps::-webkit-scrollbar{display:none}
.steps-compact{display:none;text-align:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.2px;line-height:1.2;padding:0 4px;width:100%}
.steps-compact em{font-style:normal;color:var(--amber);font-weight:800}
.app-menu-btn{order:0;display:none;flex:none;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer;font-family:inherit;line-height:1;align-items:center;justify-content:center}
.app-header-actions{order:3;display:flex;gap:8px;flex-shrink:0;margin-left:0}
.app-header-actions .hdr-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;white-space:nowrap}
@media(max-width:720px){
 .app-menu-btn{display:flex}
 .app-header-actions--desktop{display:none}
 .app-header-row{flex-wrap:nowrap;align-items:center;gap:6px;padding-bottom:6px}
 .app-header-titles{flex:0 0 auto;width:max-content;max-width:min(158px,40vw);min-width:0;order:1;position:relative;z-index:2;padding-right:10px;margin-right:0;background:linear-gradient(135deg,var(--navy),var(--navy2));box-shadow:12px 0 14px -4px rgba(31,56,100,.95)}
 .app-header-titles::after{content:'';position:absolute;top:0;right:0;bottom:0;width:10px;background:linear-gradient(90deg,transparent,rgba(47,84,150,.4));pointer-events:none}
 .app-header-titles h1{font-size:14px}
 .app-header-titles p{display:none}
 .app-header-nav{flex:1 1 auto;order:2;min-width:0;padding-top:0;padding-left:4px;overflow:hidden;z-index:1}
 .app-header-steps{display:flex!important;padding-left:2px;scroll-padding-left:4px}
 .steps-compact{display:none!important}
}
@media(min-width:721px){
 .app-header-titles p{display:none}
 .steps-compact{display:none}
 .app-header-steps{display:flex}
}
.app-drawer{position:fixed;inset:0;z-index:10001;pointer-events:none;visibility:hidden}
.app-drawer.open{pointer-events:auto;visibility:visible}
.app-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.app-drawer.open .app-drawer-backdrop{opacity:1}
.app-drawer-panel{position:absolute;top:0;left:0;width:min(280px,88vw);height:100%;background:#fff;box-shadow:4px 0 24px rgba(0,0,0,.18);transform:translateX(-102%);transition:transform .22s ease;display:flex;flex-direction:column}
.app-drawer.open .app-drawer-panel{transform:translateX(0)}
.app-drawer-head{padding:16px 14px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff}
.app-drawer-head strong{display:block;font-size:15px}
.app-drawer-head span{font-size:11px;opacity:.85}
.app-drawer-nav{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.app-drawer-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;font-family:inherit;text-align:left}
.app-drawer-nav button:active{background:#eef3fb}
.app-drawer-foot{padding:12px;font-size:10.5px;color:var(--muted);border-top:1px solid var(--line)}

/* Actionbar — chip cliente */
.totbar{flex-wrap:wrap;gap:4px}
.totbar-left{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.totbar-client{font-size:11px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.totbar-client.muted{color:var(--muted);font-weight:500}

/* Hub accordions (Resumo) */
.f8-hub{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.f8-acc{border:1.5px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:0 1px 3px rgba(20,30,50,.06)}
.f8-acc[open]{border-color:rgba(31,56,100,.25);box-shadow:0 2px 8px rgba(31,56,100,.08)}
.f8-acc-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;cursor:pointer;font-size:14px;font-weight:800;color:var(--navy);list-style:none;user-select:none}
.f8-acc-sum::-webkit-details-marker{display:none}
.f8-acc-sum::after{content:'▾';font-size:12px;color:var(--muted);transition:transform .2s}
.f8-acc[open]>.f8-acc-sum::after{transform:rotate(180deg);color:var(--amber-d)}
.f8-acc-hint{font-size:11px;font-weight:500;color:var(--muted);flex:1;text-align:right}
.f8-acc-body{padding:0 12px 12px}
.f8-acc-body>.card:first-child{margin-top:0}
.f8-acc-body .card{box-shadow:none;border:1px solid var(--line)}
.f8-acc-body .card:last-child{margin-bottom:0}

/* Projetos — 3 passos */
.f8-proj-nav{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px;box-shadow:0 1px 3px rgba(20,30,50,.06)}
.f8-proj-status{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:10px;text-align:center}
.f8-proj-status b{color:var(--navy)}
.f8-proj-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.f8-proj-tab{padding:10px 4px;border:1.5px solid var(--navy);border-radius:10px;background:#eef3fb;font-size:10.5px;font-weight:700;color:var(--navy);cursor:pointer;font-family:inherit;text-align:center;line-height:1.25;min-height:44px;transition:.15s}
.f8-proj-tab.done{background:#eef3fb;border-color:var(--navy);color:var(--navy)}
.f8-proj-tab.active{background:#eef3fb;color:var(--navy);border-color:var(--navy);box-shadow:inset 0 -3px 0 var(--amber);font-weight:800}
@media(max-width:520px){.f8-proj-tabs{grid-template-columns:repeat(2,1fr)}.f8-proj-tab{font-size:10px;padding:8px 3px;min-height:40px}}

/* Config — abas */
.f8-cfg-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.f8-cfg-tab{padding:8px 12px;border:1.5px solid var(--line);border-radius:20px;background:var(--soft);font-size:11.5px;font-weight:700;color:var(--navy);cursor:pointer;font-family:inherit;white-space:nowrap;transition:.15s}
.f8-cfg-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.f8-cfg-panel{display:none;animation:f8FadeIn .2s ease}
.f8-cfg-panel.active{display:block}
.f8-cfg-ia-test{display:flex;align-items:flex-start;gap:10px;margin-top:10px;flex-wrap:wrap}
.f8-cfg-ia-status{font-size:11.5px;color:#6b7686;flex:1;min-width:0;line-height:1.45;word-wrap:break-word;overflow-wrap:break-word}
.f8-cfg-modo{margin-top:14px;padding:10px;background:#f4f6f9;border-radius:6px}
.f8-cfg-modo>label{font-size:12px;font-weight:700;color:var(--navy);display:block;margin-bottom:6px}
.f8-cfg-modo-list{display:flex;flex-direction:column;gap:0;font-size:11.5px}
.f8-cfg-modo-opt{display:flex;align-items:flex-start;gap:8px;cursor:pointer;padding:8px 0;border-bottom:1px solid #e2e8f0;width:100%;box-sizing:border-box}
.f8-cfg-modo-opt:last-child{border-bottom:none;padding-bottom:0}
.f8-cfg-modo-opt input{flex:none;margin:3px 0 0;width:16px;height:16px}
.f8-cfg-modo-opt span{flex:1;min-width:0;line-height:1.45;word-wrap:break-word;overflow-wrap:break-word}
@media(max-width:720px){
 .f8-cfg-tabs{position:static;top:auto;z-index:auto}
 #configModal>div{max-width:100%!important;margin:0 8px;padding:16px!important}
}
@keyframes f8FadeIn{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Painel — ações rápidas */
.f8-painel-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.f8-painel-hero .btn{margin:0}
@media(max-width:480px){.f8-painel-hero{grid-template-columns:1fr}}

/* Aviso file:// — DWG / WASM / PWA */
.file-proto-banner{background:#fef3c7;border-bottom:2px solid #f59e0b;color:#92400e;padding:10px 14px;font-size:12px;line-height:1.45}
.file-proto-banner strong{color:#78350f}
.file-proto-banner code{background:#fff;padding:2px 6px;border-radius:4px;font-size:11px}
.file-proto-banner a{color:#1f3864;font-weight:700}

/* Micro-UX */
.card{transition:box-shadow .15s ease}
.btn{transition:transform .1s ease,opacity .1s}
.btn:active:not(:disabled){transform:scale(.98)}
main{animation:f8FadeIn .25s ease}
.f8-toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:10px;font-size:12.5px;font-weight:700;z-index:99999;box-shadow:0 4px 16px rgba(0,0,0,.2);animation:fadeOut 2.4s forwards}