/* ============================================================
   Planejamento de Obra — identidade visual do sistema
   Preto suave + laranja usado com parcimônia, como acento.
   ============================================================ */
:root{
  /* superfícies — cinza-carvão levemente quente, sem preto puro */
  --bg:    #17191c;
  --bg2:   #1e2125;
  --bg3:   #23262b;
  --bg4:   #2a2e34;
  --ln:    #2f343a;      /* borda padrão, discreta */
  --ln2:   #3a4047;      /* borda em foco/hover */

  /* texto */
  --tx:    #e7e9ec;
  --tx2:   #98a0a9;      /* secundário */
  --tx3:   #6c757e;      /* terciário / metadados */

  /* laranja da marca — tom forte e vibrante */
  --o:     #EB5B26;      /* laranja da marca */
  --o-dim: #C24A1D;
  --o-soft:#31200f;      /* fundo de destaque */
  --o-tx:  #FF8A47;      /* laranja vibrante e legível sobre escuro */

  /* estados — dessaturados para não competir com a marca */
  --ok:    #6FA97C;  --ok-bg:#1d2620;
  --warn:  #C9A25A;  --warn-bg:#272219;
  --err:   #C97A72;  --err-bg:#2a1e1d;

  --r:  10px;   /* raio padrão */
  --r2: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:'Poppins',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--tx);
  font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- cabeçalho ---------- */
.top{
  display:flex; align-items:center; gap:14px; height:68px; padding:0 22px;
  background:var(--bg2); border-bottom:1px solid var(--ln);
  position:sticky; top:0; z-index:30;
}
.top img{height:34px; width:auto; object-fit:contain; opacity:1}
.top .nome{font-size:15px; font-weight:600; letter-spacing:-.15px}
.top .sp{flex:1}
.top .quem{font-size:12px; color:var(--tx2)}

/* ---------- menu do usuário ---------- */
.uwrap{position:relative}
.ubtn{
  display:flex; align-items:center; gap:9px; background:transparent; border:1px solid transparent;
  color:var(--tx); border-radius:24px; padding:5px 12px 5px 5px; cursor:pointer;
  font-family:inherit; font-size:12.5px; transition:background .12s, border-color .12s;
}
.ubtn:hover,.uwrap.on .ubtn{background:var(--bg3); border-color:var(--ln)}
.ubtn .av{
  width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  background:var(--o-soft); color:var(--o-tx); border:1px solid #5a3d1e;
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
}
.ubtn .nm{font-weight:500; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ubtn .ca{font-size:8px; color:var(--tx3); transition:transform .15s}
.uwrap.on .ubtn .ca{transform:rotate(180deg)}
.umenu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; display:none;
  min-width:224px; background:var(--bg2); border:1px solid var(--ln); border-radius:12px;
  padding:5px; box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.uwrap.on .umenu{display:block}
.umenu .cab{padding:10px 12px 9px; border-bottom:1px solid var(--ln); margin-bottom:4px}
.umenu .cab b{display:block; font-size:13px; font-weight:600}
.umenu .cab i{font-style:normal; font-size:10.5px; color:var(--tx3)}
.umenu a,.umenu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; text-decoration:none;
  background:transparent; border:0; color:var(--tx); padding:9px 12px; border-radius:8px;
  cursor:pointer; font-size:12.5px; font-family:inherit;
}
.umenu a:hover,.umenu button:hover{background:var(--bg3)}
.umenu span{flex:0 0 18px; text-align:center; color:var(--tx3)}
.umenu hr{border:0; border-top:1px solid var(--ln); margin:4px 2px}
.umenu .sair{color:var(--err)}
.umenu .sair:hover{background:var(--err-bg)}

/* ---------- botões ---------- */
.btn{
  background:var(--bg3); border:1px solid var(--ln); color:var(--tx);
  border-radius:8px; padding:8px 13px; font-size:12px; font-weight:500;
  cursor:pointer; text-decoration:none; font-family:inherit;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--bg4); border-color:var(--ln2)}
.btn.pri{background:var(--o); border-color:var(--o); color:#1a1207; font-weight:600}
.btn.pri:hover{background:#EC8340; border-color:#EC8340}
.btn.sm{padding:5px 10px; font-size:11px; border-radius:7px}
.btn.dg{color:var(--err); border-color:#4a3230}
.btn.dg:hover{background:#2a1e1d; border-color:var(--err)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- etiquetas de perfil ---------- */
.tag{
  font-size:9.5px; font-weight:600; letter-spacing:.3px; padding:3px 9px;
  border-radius:20px; background:var(--bg4); color:var(--tx2);
  border:1px solid var(--ln); white-space:nowrap;
}
.tag.admin {background:var(--o-soft); color:var(--o-tx);  border-color:#4a3524}
.tag.editor{background:#1d2620;      color:#8FBF9B;      border-color:#2c3a30}
.tag.viewer{background:#1c2126;      color:#93A8BC;      border-color:#2b3540}
.tag.off   {background:#2a1e1d;      color:var(--err);   border-color:#40302e}

/* ---------- formulários ---------- */
label{display:block; font-size:10.5px; color:var(--tx2); margin-bottom:5px; font-weight:500}
input,select,textarea{
  width:100%; background:var(--bg); border:1px solid var(--ln); color:var(--tx);
  border-radius:8px; padding:8px 10px; font-size:12.5px; font-family:inherit;
  transition:border-color .12s;
}
input:hover,select:hover{border-color:var(--ln2)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--o); background:var(--bg2)}
input[readonly]{color:var(--tx2)}
input.inline{
  background:transparent; border:1px solid transparent; padding:5px 7px;
  font-size:12.5px; border-radius:6px;
}
input.inline:hover{background:var(--bg3); border-color:var(--ln)}
input.inline:focus{background:var(--bg); border-color:var(--o)}

/* ---------- tabelas ---------- */
table{width:100%; border-collapse:collapse; font-size:12px}
th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--tx3); padding:9px 10px; border-bottom:1px solid var(--ln); font-weight:600;
}
td{padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.02)}
.mut{color:var(--tx2); font-size:11px}
.mut2{color:var(--tx3); font-size:10.5px}

/* ---------- avisos ---------- */
.msg{
  font-size:12px; border-radius:9px; padding:11px 14px; margin-bottom:16px;
  display:none; line-height:1.55; border:1px solid transparent;
}
.msg.on{display:block}
.msg.ok {background:var(--ok-bg);  border-color:#2c3a30; color:#9CCFA8}
.msg.err{background:var(--err-bg); border-color:#40302e; color:#E6A29A}
code{
  background:var(--bg); border:1px solid var(--ln); border-radius:5px;
  padding:2px 7px; font-size:11.5px; word-break:break-all;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace; color:var(--o-tx);
}

/* ---------- cartões ---------- */
.card{background:var(--bg2); border:1px solid var(--ln); border-radius:var(--r2); padding:20px}
.kpi{background:var(--bg2); border:1px solid var(--ln); border-radius:var(--r); padding:14px 15px}
.kpi b{display:block; font-size:21px; font-weight:600; line-height:1.2; letter-spacing:-.4px}
.kpi span{font-size:10.5px; color:var(--tx3)}
.kpi.destaque b{color:var(--o-tx)}

/* ---------- diálogo ---------- */
.modal{
  position:fixed; inset:0; background:rgba(10,11,13,.72); z-index:200;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal.on{display:flex}
.modal .box{
  width:100%; max-width:430px; background:var(--bg2); border:1px solid var(--ln);
  border-radius:var(--r2); padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.modal h3{margin:0 0 6px; font-size:14.5px; font-weight:600}
.modal p{margin:0 0 18px; font-size:11.5px; color:var(--tx2); line-height:1.6}
.modal .acoes{display:flex; gap:8px; justify-content:flex-end; margin-top:18px}

/* ---------- dica ao passar o mouse (tooltip minimalista) ---------- */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%) translateY(-3px);
  background:#0f1113; color:#e7e9ec; border:1px solid var(--ln2);
  border-radius:7px; padding:6px 9px; font-size:10.5px; font-weight:500; line-height:1.4;
  letter-spacing:.1px; white-space:normal; width:max-content; max-width:230px; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; z-index:400;
  transition:opacity .13s ease, transform .13s ease; transition-delay:.35s;
}
[data-tip]::before{
  content:""; position:absolute; left:50%; top:calc(100% + 3px);
  transform:translateX(-50%); border:5px solid transparent; border-bottom-color:var(--ln2);
  opacity:0; pointer-events:none; z-index:401;
  transition:opacity .13s ease; transition-delay:.35s;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1; transform:translateX(-50%) translateY(0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1}
[data-tip].tip-b::after{top:auto; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(3px)}
[data-tip].tip-b::before{top:auto; bottom:calc(100% + 3px); border-bottom-color:transparent; border-top-color:var(--ln2)}
[data-tip].tip-b:hover::after{transform:translateX(-50%) translateY(0)}
[data-tip].tip-e::after{left:auto; right:0; transform:translateY(-3px)}
[data-tip].tip-e:hover::after{transform:translateY(0)}
[data-tip].tip-e::before{left:auto; right:14px; transform:none}
/* na coluna de ações a dica encosta na direita, senão o cartão a corta */
.acoes [data-tip]::after{left:auto; right:0; transform:translateY(3px)}
.acoes [data-tip]:hover::after{transform:translateY(0)}
.acoes [data-tip]::before{left:auto; right:16px; transform:none}
[data-tip=""]::after,[data-tip=""]::before{display:none}
@media (hover:none){ [data-tip]::after,[data-tip]::before{display:none} }

/* ---------- utilitários ---------- */
.linha-topo{height:2px; background:linear-gradient(90deg,var(--o-dim),var(--o) 60%,#D9A05A)}
.sep{height:1px; background:var(--ln); margin:18px 0}
.hint{font-size:11.5px; color:var(--tx2); line-height:1.65; margin:0 0 16px}
.vazio{padding:24px 16px; text-align:center; color:var(--tx3); font-size:12px; line-height:1.7}
.so-mob{display:none}

/* ============================================================
   Celulares e tablets
   ============================================================ */
@media (max-width:900px){
  .top{height:62px; padding:0 14px; gap:10px}
  .top img{height:28px}
  .top .nome{font-size:13.5px}
  .card{padding:16px}
}

@media (max-width:640px){
  body{font-size:13.5px}
  .top{
    height:auto; min-height:56px; padding:9px 13px; gap:8px 9px;
    flex-wrap:wrap; position:sticky;
  }
  .top img{height:26px}
  .top .nome{font-size:13px; max-width:calc(100% - 130px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .top .sp{flex:1 0 auto}
  .top .quem{font-size:11px; order:5}
  .top .tag{order:6}
  .top .btn{order:7; padding:7px 11px}

  .btn{padding:10px 14px; font-size:12.5px}   /* alvo de toque maior */
  .btn.sm{padding:8px 11px; font-size:11.5px}
  input,select,textarea{font-size:16px; padding:10px 12px}  /* 16px evita zoom no iOS */
  input.inline{font-size:16px}

  .card{padding:14px; border-radius:12px}
  .modal{padding:12px; align-items:flex-end}
  .modal .box{max-width:100%; border-radius:16px 16px 10px 10px; padding:18px}
  .modal .acoes{flex-direction:column-reverse}
  .modal .acoes .btn{width:100%; justify-content:center}

  /* tabelas viram cartões empilhados */
  table.resp thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block; width:100%}
  table.resp tr{
    border:1px solid var(--ln); border-radius:10px; background:var(--bg2);
    padding:10px 12px; margin-bottom:10px;
  }
  table.resp td{border:0; padding:5px 0; display:flex; gap:10px; align-items:center}
  table.resp td::before{
    content:attr(data-l); flex:0 0 92px; color:var(--tx3);
    font-size:9.5px; text-transform:uppercase; letter-spacing:.7px; font-weight:600;
  }
  table.resp td[data-l=""]::before{content:none}
  .so-mob{display:block}
  .nao-mob{display:none!important}
}