/* ===== Portal .38 — Módulo PROJETOS (front) ===== */
#p38-root{ --p38-bg:#0f0f12; --p38-card:#17171c; --p38-card2:#1c1c23; --p38-bd:#2a2a33;
  --p38-gold:#e0a94f; --p38-goldink:#1a1205; --p38-txt:#e9e9ee; --p38-mut:#9a9aa6; --p38-mut2:#71717c;
  --p38-red:#e0685f; --p38-green:#5bbf7a; --p38-blue:#6aa8e0; --p38-teal:#3fae8f;
  color:var(--p38-txt); font-family:inherit; }
#p38-root *{ box-sizing:border-box; }
#p38-root .p38-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
#p38-root .p38-title{ font-size:22px; font-weight:700; margin:0; color:#fff; }
#p38-root .p38-sub{ color:var(--p38-mut); font-size:13px; margin:2px 0 0; }
/* abas como botões segmentados (ativo = dourado) */
#p38-root .p38-tabs{ display:inline-flex; gap:6px; margin:0 0 22px; flex-wrap:wrap; background:var(--p38-card); border:1px solid var(--p38-bd); border-radius:12px; padding:6px; max-width:100%; }
#p38-root .p38-tab{ background:transparent; border:1px solid transparent; color:var(--p38-mut); font:inherit; font-size:13px; font-weight:600; padding:9px 16px; cursor:pointer; border-radius:9px; margin:0; display:inline-flex; align-items:center; gap:8px; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; }
#p38-root .p38-tab:hover{ background:var(--p38-card2); color:var(--p38-txt); border-color:#33333e; }
#p38-root .p38-tab.on{ background:var(--p38-gold); color:var(--p38-goldink); border-color:var(--p38-gold); box-shadow:0 2px 10px rgba(224,169,79,.25); }
#p38-root .p38-tab.on:hover{ background:var(--p38-gold); color:var(--p38-goldink); filter:brightness(1.05); }
#p38-root .p38-tab.on .p38-badge{ background:#1a1205; color:var(--p38-gold); }

/* mosaico de projetos (cards com capa) */
#p38-root .p38-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
#p38-root .p38-card{ background:var(--p38-card); border:1px solid var(--p38-bd); border-radius:14px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform .15s,border-color .15s,box-shadow .15s; }
#p38-root .p38-card:hover{ transform:translateY(-2px); border-color:rgba(224,169,79,.55); box-shadow:0 10px 26px rgba(0,0,0,.4); }
#p38-root .p38-card .cv{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#22222b 0%,#15151a 100%); display:grid; place-items:center; overflow:hidden; }
#p38-root .p38-card .cv img{ width:100%; height:100%; object-fit:cover; display:block; }
#p38-root .p38-card .cv .ph{ color:#3b3b48; }
#p38-root .p38-card .cv .ph svg{ width:52px; height:52px; }
/* selos em linha própria, abaixo da capa (imagem fica limpa) */
#p38-root .p38-card .tags{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:2px; }
#p38-root .p38-card .tags .un{ background:var(--p38-card2); border:1px solid var(--p38-bd); color:var(--p38-mut); font-size:11px; font-weight:600; padding:4px 9px; border-radius:6px; }
#p38-root .p38-card .tags .prw{ margin-left:auto; }
#p38-root .p38-card .bd{ padding:14px 16px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
#p38-root .p38-card .tt{ font-weight:700; color:#fff; font-size:15px; line-height:1.3; }
#p38-root .p38-card .cd{ color:var(--p38-mut2); font-size:11px; letter-spacing:.03em; }
#p38-root .p38-card .mt{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--p38-mut); }
#p38-root .p38-card .mt b{ color:var(--p38-txt); font-weight:600; }
#p38-root .p38-card .ft{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid #202027; font-size:12px; color:var(--p38-mut); }
#p38-root .p38-card .p38-bar{ flex:1; }

/* alternador de visualização (mosaico / lista) */
#p38-root .p38-view{ display:inline-flex; gap:3px; background:var(--p38-card2); border:1px solid var(--p38-bd); border-radius:9px; padding:3px; margin-left:auto; }
#p38-root .p38-view button{ background:transparent; border:none; color:var(--p38-mut); font:inherit; font-size:12px; font-weight:600; padding:6px 11px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
#p38-root .p38-view button.on{ background:var(--p38-gold); color:var(--p38-goldink); }

/* capa no detalhe */
#p38-root .p38-cover{ width:100%; aspect-ratio:21/9; border-radius:12px; overflow:hidden; margin-bottom:16px; background:#15151a; border:1px solid var(--p38-bd); }
#p38-root .p38-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
#p38-root .p38-anexo .ico.img{ background:#2a2a35; color:#9fb0c8; }
#p38-root .p38-anexo .capa-tag{ font-size:10px; font-weight:700; color:var(--p38-gold); border:1px solid rgba(224,169,79,.4); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:middle; }

/* KPI cards */
#p38-root .p38-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:20px; }
#p38-root .p38-kpi{ background:var(--p38-card); border:1px solid var(--p38-bd); border-radius:12px; padding:16px 18px; }
#p38-root .p38-kpi .l{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--p38-mut); }
#p38-root .p38-kpi .v{ font-size:30px; font-weight:700; color:#fff; margin-top:6px; line-height:1; }
#p38-root .p38-kpi .s{ font-size:12px; color:var(--p38-mut); margin-top:6px; }
#p38-root .p38-kpi.gold .v{ color:var(--p38-gold); }

/* panels */
#p38-root .p38-panel{ background:var(--p38-card); border:1px solid var(--p38-bd); border-radius:12px; padding:18px 20px; margin-bottom:18px; }
#p38-root .p38-panel h3{ margin:0 0 4px; font-size:16px; color:#fff; }
#p38-root .p38-panel .desc{ color:var(--p38-mut); font-size:12px; margin:0 0 14px; }
#p38-root .p38-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
#p38-root .p38-toolbar input, #p38-root .p38-toolbar select{ background:var(--p38-card2); border:1px solid var(--p38-bd); color:var(--p38-txt); border-radius:8px; padding:9px 11px; font:inherit; font-size:13px; }
#p38-root .p38-toolbar input[type=search]{ min-width:200px; flex:1; }

/* buttons */
#p38-root .p38-btn{ background:var(--p38-card2); border:1px solid var(--p38-bd); color:var(--p38-txt); border-radius:9px; padding:10px 16px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
#p38-root .p38-btn:hover{ border-color:#3a3a45; }
#p38-root .p38-btn.gold{ background:var(--p38-gold); color:var(--p38-goldink); border-color:var(--p38-gold); }
#p38-root .p38-btn.gold:hover{ filter:brightness(1.06); }
#p38-root .p38-btn.red{ background:transparent; color:var(--p38-red); border-color:#5a2f2c; }
#p38-root .p38-btn.red:hover{ background:rgba(224,104,95,.1); }
#p38-root .p38-btn.green{ background:var(--p38-green); color:#08130c; border-color:var(--p38-green); }
#p38-root .p38-btn.lg{ padding:14px 26px; font-size:15px; }
#p38-root .p38-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* tables */
#p38-root table.p38-t{ width:100%; border-collapse:collapse; font-size:13px; }
#p38-root table.p38-t th{ text-align:left; color:var(--p38-mut); font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:.04em; padding:0 12px 10px; border-bottom:1px solid var(--p38-bd); }
#p38-root table.p38-t td{ padding:12px; border-bottom:1px solid #202027; vertical-align:middle; }
#p38-root table.p38-t tr:hover td{ background:rgba(255,255,255,.02); }
#p38-root table.p38-t tr{ cursor:pointer; }
#p38-root .p38-code{ color:var(--p38-mut); font-size:12px; }

/* status pills */
#p38-root .p38-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
#p38-root .p38-pill .dot{ width:7px; height:7px; border-radius:50%; }
#p38-root .p38-pill.rascunho{ background:rgba(138,138,149,.14); color:#b6b6c0; } #p38-root .p38-pill.rascunho .dot{ background:#8a8a95; }
#p38-root .p38-pill.aguardando{ background:rgba(224,169,79,.14); color:#e8c07f; } #p38-root .p38-pill.aguardando .dot{ background:var(--p38-gold); }
#p38-root .p38-pill.aprovado{ background:rgba(91,191,122,.14); color:#8fd7a5; } #p38-root .p38-pill.aprovado .dot{ background:var(--p38-green); }
#p38-root .p38-pill.reprovado{ background:rgba(224,104,95,.14); color:#ed968f; } #p38-root .p38-pill.reprovado .dot{ background:var(--p38-red); }
#p38-root .p38-pill.execucao{ background:rgba(106,168,224,.14); color:#a7cef0; } #p38-root .p38-pill.execucao .dot{ background:var(--p38-blue); }
#p38-root .p38-pill.concluido{ background:rgba(63,174,143,.16); color:#7fd3ba; } #p38-root .p38-pill.concluido .dot{ background:var(--p38-teal); }
#p38-root .p38-pill.cancelado{ background:rgba(113,113,124,.14); color:#9a9aa6; } #p38-root .p38-pill.cancelado .dot{ background:#71717c; }
#p38-root .p38-pill.arquivado{ background:rgba(90,100,120,.14); color:#9fb0c8; } #p38-root .p38-pill.arquivado .dot{ background:#5a6478; }

/* priority chips */
#p38-root .p38-prio{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
#p38-root .p38-prio.baixa{ color:#8a8a95; } #p38-root .p38-prio.normal{ color:#9fb0c8; }
#p38-root .p38-prio.alta{ color:#e6a24a; } #p38-root .p38-prio.urgente{ color:var(--p38-red); }

/* days-waiting badge (progressive) */
#p38-root .p38-dias{ display:inline-block; padding:3px 9px; border-radius:16px; font-size:12px; font-weight:600; }
#p38-root .p38-dias.d0{ background:rgba(138,138,149,.14); color:#b6b6c0; }
#p38-root .p38-dias.d1{ background:rgba(224,169,79,.16); color:#e8c07f; }
#p38-root .p38-dias.d2{ background:rgba(230,120,60,.18); color:#f0a878; }
#p38-root .p38-dias.d3{ background:rgba(224,104,95,.2); color:#f0a49d; animation:p38pulse 1.8s ease-in-out infinite; }
@keyframes p38pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* forms */
#p38-root .p38-form{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
#p38-root .p38-field{ display:flex; flex-direction:column; gap:6px; }
#p38-root .p38-field.full{ grid-column:1/-1; }
#p38-root .p38-field label{ font-size:12px; color:var(--p38-mut); font-weight:600; }
#p38-root .p38-field label .opt{ color:var(--p38-mut2); font-weight:400; }
#p38-root .p38-field input, #p38-root .p38-field select, #p38-root .p38-field textarea{
  background:var(--p38-card2); border:1px solid var(--p38-bd); color:var(--p38-txt); border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; width:100%; }
#p38-root .p38-field textarea{ min-height:80px; resize:vertical; }
#p38-root .p38-field input:focus, #p38-root .p38-field select:focus, #p38-root .p38-field textarea:focus{ outline:none; border-color:var(--p38-gold); }

/* detail layout */
#p38-root .p38-detail{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
#p38-root .p38-kv{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #202027; font-size:13px; }
#p38-root .p38-kv .k{ color:var(--p38-mut); } #p38-root .p38-kv .v{ color:var(--p38-txt); text-align:right; font-weight:500; }
#p38-root .p38-block{ margin:16px 0; }
#p38-root .p38-block h4{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--p38-mut); margin:0 0 8px; }
#p38-root .p38-block p{ margin:0; font-size:14px; line-height:1.55; color:#d7d7de; white-space:pre-wrap; }

/* approvers list */
#p38-root .p38-aprov{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #202027; font-size:13px; }
#p38-root .p38-aprov .nm{ display:flex; flex-direction:column; }
#p38-root .p38-aprov .nm small{ color:var(--p38-mut2); font-size:11px; }

/* attachments */
#p38-root .p38-anexo{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--p38-card2); border:1px solid var(--p38-bd); border-radius:9px; margin-bottom:8px; font-size:13px; }
#p38-root .p38-anexo .ico{ width:30px; height:30px; border-radius:7px; display:grid; place-items:center; background:#24242c; color:var(--p38-gold); font-size:10px; font-weight:700; flex:none; }
#p38-root .p38-anexo .meta{ flex:1; min-width:0; } #p38-root .p38-anexo .meta b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#p38-root .p38-anexo .meta small{ color:var(--p38-mut); }

/* timeline */
#p38-root .p38-tl{ position:relative; padding-left:20px; }
#p38-root .p38-tl::before{ content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--p38-bd); }
#p38-root .p38-tl .ev{ position:relative; padding:0 0 16px 4px; }
#p38-root .p38-tl .ev::before{ content:''; position:absolute; left:-19px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--p38-gold); border:2px solid var(--p38-bg); }
#p38-root .p38-tl .ev .t{ font-size:13px; color:var(--p38-txt); }
#p38-root .p38-tl .ev .m{ font-size:11px; color:var(--p38-mut); margin-top:2px; }

/* progress steps */
#p38-root .p38-steps{ display:flex; align-items:center; gap:0; margin:6px 0 18px; flex-wrap:wrap; }
#p38-root .p38-steps .st{ display:flex; align-items:center; gap:8px; color:var(--p38-mut2); font-size:12px; }
#p38-root .p38-steps .st .cir{ width:22px; height:22px; border-radius:50%; border:2px solid var(--p38-bd); display:grid; place-items:center; font-size:11px; }
#p38-root .p38-steps .st.done{ color:var(--p38-green); } #p38-root .p38-steps .st.done .cir{ border-color:var(--p38-green); background:rgba(91,191,122,.15); }
#p38-root .p38-steps .st.now{ color:var(--p38-gold); } #p38-root .p38-steps .st.now .cir{ border-color:var(--p38-gold); background:rgba(224,169,79,.15); }
#p38-root .p38-steps .sep{ width:26px; height:2px; background:var(--p38-bd); margin:0 6px; }

/* info banner */
#p38-root .p38-note{ display:flex; gap:10px; background:rgba(224,169,79,.08); border:1px solid rgba(224,169,79,.25); border-left:3px solid var(--p38-gold); border-radius:9px; padding:12px 14px; font-size:13px; color:#e8c07f; margin-bottom:18px; }

/* empty / loading */
#p38-root .p38-empty{ text-align:center; color:var(--p38-mut); padding:44px 20px; font-size:14px; }
#p38-root .p38-bar{ height:6px; background:#202027; border-radius:4px; overflow:hidden; }
#p38-root .p38-bar>i{ display:block; height:100%; background:var(--p38-gold); }

/* modal */
.p38-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99999; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.p38-modal .box{ background:#15151a; border:1px solid var(--p38-bd,#2a2a33); border-radius:14px; width:100%; max-width:640px; padding:22px 24px; color:#e9e9ee; }
.p38-modal h3{ margin:0 0 6px; color:#fff; font-size:18px; }
.p38-modal .foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* home card + sidebar badge */
#p38-home-card{ background:linear-gradient(135deg,rgba(224,169,79,.14),rgba(224,169,79,.04)); border:1px solid rgba(224,169,79,.3); border-radius:12px; padding:16px 20px; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; }
#p38-home-card .n{ font-size:30px; font-weight:800; color:#e0a94f; }
.p38-badge{ background:#e0685f; color:#fff; font-size:11px; font-weight:700; border-radius:11px; padding:1px 8px; margin-left:auto; }

/* ===== Fase 2 — decisão da Diretoria (mobile-first) ===== */
.p38-pill.ajuste{ background:rgba(224,169,79,.16); color:#e8c07f; }
/* painel de decisão em destaque */
#p38-root .p38-decisao{ border-color:rgba(224,169,79,.42); background:linear-gradient(180deg,rgba(224,169,79,.06),transparent 60%); }
/* ficha executiva: pares rótulo/valor, 2 colunas no desktop, 1 no celular */
#p38-root .p38-ficha{ display:grid; grid-template-columns:1fr 1fr; gap:2px 22px; margin:12px 0 18px; }
#p38-root .p38-ficha .fi{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #202027; font-size:13.5px; }
#p38-root .p38-ficha .fi .k{ color:var(--p38-mut); }
#p38-root .p38-ficha .fi .v{ color:var(--p38-txt); font-weight:600; text-align:right; }
/* três ações — lado a lado no desktop, empilhadas e largas no celular */
#p38-root .p38-acoes{ display:flex; gap:12px; flex-wrap:wrap; }
#p38-root .p38-acoes .p38-btn{ flex:1 1 auto; justify-content:center; }
/* o modal é anexado ao <body>, FORA do #p38-root: as variáveis --p38-* e a
   base de .p38-btn não chegam até ele. Reidratamos aqui para que Aprovar
   (dourado), Reprovar (vermelho) e Cancelar fiquem corretos nos modais. */
.p38-modal{ --p38-gold:#e0a94f; --p38-goldink:#1a1205; --p38-red:#e0685f;
  --p38-card2:#1c1c23; --p38-bd:#2a2a33; --p38-txt:#e9e9ee; }
.p38-modal .p38-btn{ background:var(--p38-card2); border:1px solid var(--p38-bd); color:var(--p38-txt);
  border-radius:9px; padding:10px 16px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.p38-modal .p38-btn.gold{ background:var(--p38-gold); color:var(--p38-goldink); border-color:var(--p38-gold); }
.p38-modal .p38-btn.red{ background:transparent; color:var(--p38-red); border-color:#5a2f2c; }
/* textarea padrão dos modais de decisão */
.p38-ta{ width:100%; min-height:96px; background:#1c1c23; border:1px solid #2a2a33; color:#e9e9ee;
  border-radius:10px; padding:12px; font:inherit; font-size:16px; line-height:1.5; resize:vertical; }
.p38-ta:focus{ outline:none; border-color:var(--p38-gold); }

@media(max-width:820px){
  #p38-root .p38-detail{ grid-template-columns:1fr; }
  #p38-root .p38-form{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  #p38-root{ padding:16px 12px !important; }
  #p38-root .p38-ficha{ grid-template-columns:1fr; }
  /* botões de decisão empilhados, alvo confortável de 52px */
  #p38-root .p38-acoes{ flex-direction:column; }
  #p38-root .p38-acoes .p38-btn.lg{ width:100%; padding:15px 20px; font-size:16px; min-height:52px; }
  /* modal cola no rodapé e vira folha de baixo p/ cima; botões grandes */
  .p38-modal{ align-items:flex-end; padding:0; }
  .p38-modal .box{ max-width:none; border-radius:16px 16px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px)); }
  .p38-modal .foot{ flex-direction:column-reverse; gap:10px; }
  .p38-modal .foot .p38-btn{ width:100%; justify-content:center; min-height:50px; font-size:15px; }
  /* anexos: ações não espremem o nome */
  #p38-root .p38-anexo{ flex-wrap:wrap; }
  #p38-root .p38-anexo .meta{ flex:1 1 100%; order:-1; }
  /* cabeçalho do detalhe empilha */
  #p38-root .p38-head{ flex-direction:column; align-items:flex-start; gap:8px; }
}