/* ============================================================
   gs-shell.css — GS ERP · shell galáxia das páginas internas
   Carregado por último. Só apresentação — nenhum HTML mudou.
   Padrão A (header com .nav-links, ex.: financeira): SIDEBAR fixa.
   Padrão B (toolbar com .btn-hub, ex.: projetos): TOPBAR navy.
   ============================================================ */

body{background:radial-gradient(900px 500px at 110% -10%,rgba(95,183,214,.14),transparent 60%),#F2F6FA !important;color:#122436}
body::before{display:none !important}
/* textos secundários (Admin/e-mail/usuários etc.) legíveis no tema claro */
body{--dim:#5B6B7D;--mid:#3D4F63}

/* ---------- PADRÃO A: sidebar (páginas com .nav-links no topo) ---------- */
body:has(> header.topo .nav-links){padding-left:248px}
header.topo:has(.nav-links){position:fixed;left:0;top:0;bottom:0;width:248px;z-index:100;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;padding:22px 16px;border-bottom:none;background:linear-gradient(175deg,#0A2E3D 0%,#0D3B4E 55%,#11485F 100%);box-shadow:8px 0 30px rgba(10,46,61,.15)}
header.topo:has(.nav-links)::after{content:"";position:absolute;inset:0;opacity:.32;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(420px 520px at 50% 0%,#000 20%,transparent 80%)}
header.topo:has(.nav-links) .brand{color:#fff !important;font-size:15px;position:relative;z-index:2}
header.topo:has(.nav-links) .brand-icon{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#2F8FD6,#20789A 55%,#0A2E3D) !important;box-shadow:0 8px 20px rgba(47,143,214,.35);color:#fff !important;font-size:13px}
header.topo:has(.nav-links) .nav-links{flex-direction:column;align-items:stretch;gap:4px;margin-top:8px;flex:1;position:relative;z-index:2}
header.topo:has(.nav-links) .nav-btn{justify-content:flex-start;gap:11px;padding:12px 13px !important;border:none !important;border-radius:11px !important;color:#AFC9D4 !important;font-size:12.5px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:700 !important;background:transparent !important;box-shadow:none !important;text-align:left;cursor:pointer}
header.topo:has(.nav-links) .nav-btn:hover{background:rgba(255,255,255,.08) !important;color:#fff !important;transform:translateX(3px)}
header.topo:has(.nav-links) .nav-btn.active{background:linear-gradient(90deg,rgba(47,143,214,.25),rgba(47,143,214,.08)) !important;color:#fff !important}
header.topo:has(.nav-links) .topo-info{text-align:left;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;color:#7FA6B5 !important;font-size:10.5px;position:relative;z-index:2}
header.topo:has(.nav-links) .topo-info strong{color:#82CBE3 !important}

/* ---------- PADRÃO B: cabeçalho CLARO (esboços lotes 2–5) — o navy fica no trilho lateral ---------- */
.topo:has(.btn-hub){position:sticky;top:0;z-index:95;background:rgba(255,255,255,.95) !important;backdrop-filter:blur(8px);border-bottom:1px solid #E3EAF2 !important;box-shadow:0 4px 14px rgba(10,46,61,.05)}
.topo:has(.btn-hub) .brand,.topo:has(.btn-hub) .brand *{color:#0A2E3D !important}
.topo:has(.btn-hub) .brand-icon{background:linear-gradient(135deg,#2F8FD6,#20789A 55%,#0A2E3D) !important;box-shadow:0 6px 16px rgba(47,143,214,.3);color:#fff !important}
.topo:has(.btn-hub) .arrow{color:#20789A !important}
.topo:has(.btn-hub) .tag{background:rgba(47,143,214,.1) !important;border:1px solid rgba(47,143,214,.3) !important;color:#175F7C !important;border-radius:100px !important;font-weight:800}
.topo:has(.btn-hub) .topo-info{color:#8195A8 !important}
.topo:has(.btn-hub) .topo-info strong{color:#20789A !important}
.btn-hub{border:1.5px solid #E3EAF2 !important;color:#3D4F63 !important;border-radius:10px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:0 !important;background:#fff !important;transition:all .16s !important;box-shadow:0 2px 8px rgba(10,46,61,.04)}
.btn-hub:hover{background:#ECF5F9 !important;color:#20789A !important;border-color:#20789A !important;transform:translateY(-1px)}
.topo:has(.btn-hub) .primary,.topo:has(.btn-hub) button.primary{background:linear-gradient(135deg,#2F8FD6,#20789A) !important;border:none !important;color:#fff !important;box-shadow:0 8px 20px rgba(32,120,154,.35) !important}

/* ---------- TRILHO LATERAL (gs-rail.js) — igual aos esboços ---------- */
body.gs-has-rail{padding-left:76px}
#gs-rail{position:fixed;left:0;top:0;bottom:0;width:76px;z-index:120;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0;background:linear-gradient(175deg,#0A2E3D 0%,#0D3B4E 55%,#11485F 100%);box-shadow:8px 0 30px rgba(10,46,61,.18)}
.gs-rail-logo{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#2F8FD6,#20789A 55%,#0A2E3D);display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;text-decoration:none;margin-bottom:10px;box-shadow:0 8px 20px rgba(47,143,214,.35);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.gs-rail-nav{display:flex;flex-direction:column;gap:5px;flex:1;width:100%;align-items:center}
.gs-rail-it{position:relative;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#AFC9D4;font-size:19px;text-decoration:none;transition:background .16s,color .16s}
.gs-rail-it:hover{background:rgba(255,255,255,.08);color:#fff}
.gs-rail-it.on{background:linear-gradient(90deg,rgba(47,143,214,.28),rgba(47,143,214,.08));color:#fff}
.gs-rail-it.on::before{content:"";position:absolute;left:-15px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#82CBE3,#2F8FD6);box-shadow:0 0 14px rgba(95,183,214,.8)}
.gs-rail-sair{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:none;background:none;color:#7FA6B5;font-size:18px;cursor:pointer;transition:.16s}
.gs-rail-sair:hover{background:rgba(226,75,74,.18);color:#fff}
/* com o trilho presente, o cabeçalho claro e a barra flutuante respeitam o espaço */
body.gs-has-rail .topo:has(.btn-hub){left:0}
@media(max-width:900px){body.gs-has-rail{padding-left:0}#gs-rail{display:none}}

/* ---------- refinamentos comuns ---------- */
.page-title{letter-spacing:-.03em !important;font-weight:800 !important}
.page-title em{font-style:normal !important;background:linear-gradient(90deg,#2F8FD6,#5FB7D6);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.eyebrow{color:#20789A !important;letter-spacing:.16em !important;font-weight:800}

/* ---------- MOBILE (funcionários no celular) ---------- */
@media(max-width:900px){
  body:has(> header.topo .nav-links){padding-left:0}
  header.topo:has(.nav-links){position:sticky;top:0;left:auto;bottom:auto;width:auto;flex-direction:row;align-items:center;gap:10px;padding:10px 14px}
  header.topo:has(.nav-links)::after{display:none}
  header.topo:has(.nav-links) .nav-links{flex-direction:row;flex:1;margin-top:0;overflow-x:auto;scrollbar-width:none;gap:2px}
  header.topo:has(.nav-links) .nav-btn{padding:9px 11px !important;white-space:nowrap}
  header.topo:has(.nav-links) .nav-btn:hover{transform:none}
  header.topo:has(.nav-links) .topo-info{display:none}
  .topo:has(.btn-hub){overflow-x:auto;scrollbar-width:none}
  .topo:has(.btn-hub) .topo-info{display:none}
}

/* ---------- FIDELIDADE AO ESBOÇO — Gestão de Projetos (só aparência) ---------- */
.proj-card{position:relative;background:#fff !important;border:1px solid #E3EAF2 !important;border-radius:16px !important;box-shadow:0 2px 8px rgba(10,46,61,.05),0 8px 24px rgba(10,46,61,.06) !important;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s !important}
.proj-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mod-color,#2F8FD6);z-index:2}
.proj-card:hover{transform:translateY(-4px);box-shadow:0 4px 14px rgba(10,46,61,.08),0 24px 60px rgba(10,46,61,.13) !important;border-color:#BFDDE9 !important}
.proj-card.is-cancelado{opacity:.6;filter:grayscale(.4)}

/* filtros de prazo em pílula, ativo em degradê azul */
.filtro-prazo{border-radius:100px !important;font-weight:700 !important;transition:.15s !important}
.filtro-prazo:hover{border-color:#20789A !important;color:#20789A !important}
.filtro-prazo.active{background:linear-gradient(135deg,#2F8FD6,#20789A) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 6px 14px rgba(32,120,154,.3) !important}
.filtro-prazo.active .filtro-count{background:rgba(255,255,255,.25) !important;color:#fff !important}

/* linhas de "Minhas tarefas" com hover suave */
.tarefa{transition:background .13s !important;border-radius:8px}
.tarefa:hover{background:#FAFCFE !important}

/* ================================================================
   FIDELIDADE TOTAL AOS ESBOÇOS — v2 (reorganização via CSS grid)
   ================================================================ */

/* ===== Gestão de Projetos: cards viram LINHAS (esboço lote 2, Tela A) ===== */
.grid-projetos{grid-template-columns:1fr !important;gap:12px !important}
.proj-card{display:grid !important;grid-template-columns:minmax(0,1fr) 200px 235px;grid-template-areas:"head bar meta" "cli bar meta" "st bar meta";column-gap:26px;row-gap:3px;align-items:center;padding:16px 22px 16px 26px !important}
.pc-head{grid-area:head;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 !important}
.pc-nome{font-size:15.5px !important;font-weight:800 !important;letter-spacing:-.015em}
.pc-badge{font-size:10px !important;font-weight:800 !important;padding:3px 11px !important;border-radius:100px !important;background:color-mix(in srgb,var(--mod-color,#2F8FD6) 12%,#fff) !important;color:var(--mod-color,#175F7C) !important;border:1px solid color-mix(in srgb,var(--mod-color,#2F8FD6) 32%,#fff) !important;text-transform:uppercase;letter-spacing:.05em}
.pc-cliente{grid-area:cli;font-size:12px !important;color:#8195A8 !important;font-weight:600;margin:0 !important}
.pc-status{grid-area:st;justify-self:start;font-size:10px !important;font-weight:800;border-radius:100px !important;padding:4px 11px !important;margin-top:4px !important}
.pc-bar-wrap{grid-area:bar;width:100%;margin:0 !important}
.pc-bar{height:8px !important;border-radius:6px !important;background:#E9F0F6 !important;overflow:hidden}
.pc-bar-fill{background:linear-gradient(90deg,#2EC483,#5FB7D6) !important;border-radius:6px}
.pc-bar-lbl{font-size:11px !important;font-weight:700;color:#8195A8;display:flex;justify-content:space-between;margin-bottom:5px !important}
.pc-bar-lbl .pct{color:#122436;font-weight:800;font-size:12px}
.pc-meta{grid-area:meta;display:flex !important;flex-direction:column;gap:9px;text-align:right;border-left:1px solid #EDF2F7;padding-left:22px;margin:0 !important}
.pc-meta-item .k{font-size:9.5px !important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8195A8 !important}
.pc-meta-item .v{font-size:12.5px !important;font-weight:700;color:#122436 !important}
@media(max-width:900px){
  .proj-card{grid-template-columns:1fr;grid-template-areas:"head" "cli" "bar" "meta" "st"}
  .pc-meta{border-left:none;padding-left:0;text-align:left;flex-direction:row;gap:20px}
}

/* KPIs com borda lateral colorida (esboço) */
.kpis .kpi{border-left:4px solid #2F8FD6 !important;border-radius:14px !important}
.kpis .kpi.alerta{border-left-color:#E39A23 !important}
.kpis .kpi.ok{border-left-color:#2EC483 !important}
.kpis .kpi.dinheiro{border-left-color:#5FB7D6 !important}

/* chips de tipo em pílula com ativo em degradê */
.chip{border-radius:100px !important;font-weight:700 !important;transition:.15s !important}
.chip:hover{border-color:#20789A !important;color:#20789A !important}
.chip.active{background:linear-gradient(135deg,#2F8FD6,#20789A) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 6px 14px rgba(32,120,154,.3) !important}

/* ===== Perícias: cards do esboço lote 5 ===== */
.per-card{border-radius:16px !important;box-shadow:0 2px 8px rgba(10,46,61,.05),0 8px 24px rgba(10,46,61,.06) !important;border:1px solid #E3EAF2 !important;transition:transform .2s,box-shadow .2s !important}
.per-card:hover{transform:translateY(-4px);box-shadow:0 4px 14px rgba(10,46,61,.08),0 24px 60px rgba(10,46,61,.13) !important}
.per-card .pill{border-radius:100px !important;font-weight:800 !important;letter-spacing:.05em}
.per-card .per-top{border-top-width:4px !important}

/* ===== Financeira: abas em segmentado pílula (esboço lote 3) ===== */
.tabs-wrap{background:#fff !important;border:1px solid #E3EAF2 !important;border-radius:13px !important;padding:5px !important;gap:4px !important;border-bottom:1px solid #E3EAF2 !important;width:max-content;box-shadow:0 2px 8px rgba(10,46,61,.05)}
.tabs-wrap .tab{border-radius:9px !important;border-bottom:none !important;margin-bottom:0 !important;padding:10px 16px !important;color:#8195A8 !important;font-weight:700 !important}
.tabs-wrap .tab:hover{color:#20789A !important}
.tabs-wrap .tab.active{background:linear-gradient(135deg,#2F8FD6,#20789A) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 6px 14px rgba(32,120,154,.3)}