/* ============================================================
   DR Construção · Intranet · style.css (base)
   Login + Painel. Cores institucionais DR.
   ============================================================ */
:root{
  --cor-amarelo: #FFD400;
  --cor-cinza:   #7A7C7F;
  --cor-concreto:#5F6063;
  --cor-preto:   #1A1A1A;
  --cor-branco:  #FFFFFF;
  --cor-fundo:   #F4F4F5;
  --cor-borda:   #E3E3E5;
  --sombra: 0 2px 8px rgba(26,26,26,.08);
  --sombra-forte: 0 6px 20px rgba(26,26,26,.14);
  --raio: 8px;
  --fonte: "Inter","Helvetica Neue",Helvetica,system-ui,Arial,sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--fonte); color:var(--cor-preto); line-height:1.6; }

/* ---------------- LOGIN ---------------- */
.login-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1A1A1A 0%,#2A2A2A 100%); padding:20px;
}
.login-card{
  width:100%; max-width:380px; background:var(--cor-branco);
  border-radius:12px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.login-topo{
  background:var(--cor-preto); border-bottom:4px solid var(--cor-amarelo);
  padding:26px; text-align:center;
}
.login-topo img{ height:42px; }
.login-corpo{ padding:30px 28px 24px; }
.login-corpo h1{ font-size:1.4rem; margin:0 0 4px; color:var(--cor-preto); }
.login-sub{ margin:0 0 20px; color:var(--cor-cinza); font-size:.9rem; }
.login-corpo label{ display:block; font-size:.8rem; font-weight:600; color:var(--cor-concreto);
  margin-bottom:14px; }
.login-corpo input{
  width:100%; margin-top:5px; padding:11px 12px; border:1px solid var(--cor-borda);
  border-radius:6px; font-size:1rem; font-family:inherit;
}
.login-corpo input:focus{ outline:2px solid var(--cor-amarelo); border-color:var(--cor-amarelo); }
.btn-login{
  width:100%; margin-top:8px; padding:12px; border:none; border-radius:6px;
  background:var(--cor-preto); color:var(--cor-amarelo); font-weight:700; font-size:1rem;
  cursor:pointer; transition:.15s;
}
.btn-login:hover{ background:var(--cor-amarelo); color:var(--cor-preto); }
.login-erro{ background:#FDECEC; color:#B3261E; padding:10px 12px; border-radius:6px;
  font-size:.85rem; margin-bottom:16px; border-left:3px solid #B3261E; }
.login-aviso{ background:#FFFBEA; color:#7a5c00; padding:10px 12px; border-radius:6px;
  font-size:.85rem; margin-bottom:16px; border-left:3px solid var(--cor-amarelo); }
.login-rodape{ background:var(--cor-fundo); padding:14px; text-align:center;
  font-size:.72rem; color:var(--cor-cinza); border-top:1px solid var(--cor-borda); }

/* ---------------- TOPO (painel) ---------------- */
.painel-body{ background:var(--cor-fundo); min-height:100vh; }
.topo{
  background:var(--cor-preto); border-bottom:4px solid var(--cor-amarelo);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
}
.topo-logo{ height:38px; }
.topo-user{ color:var(--cor-branco); font-size:.88rem; display:flex; align-items:center; gap:14px; }
.topo-user a{ color:var(--cor-amarelo); text-decoration:none; font-weight:600; }
.topo-user a:hover{ text-decoration:underline; }

/* ---------------- PAINEL ---------------- */
.painel-wrap{ max-width:960px; margin:0 auto; padding:28px 24px; }
.painel-cabecalho h1{ font-size:1.7rem; margin:0 0 4px; }
.painel-cabecalho p{ margin:0 0 24px; color:var(--cor-concreto); }
.painel-secao{ margin-bottom:32px; }
.painel-secao h2{ font-size:1.1rem; padding-bottom:8px; border-bottom:2px solid var(--cor-amarelo);
  display:inline-block; margin:0 0 16px; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.card-link{
  display:block; text-decoration:none; color:var(--cor-preto); background:var(--cor-branco);
  border:1px solid var(--cor-borda); border-top:4px solid var(--cor-amarelo);
  border-radius:var(--raio); box-shadow:var(--sombra); padding:20px; transition:.15s;
}
.card-link:hover{ box-shadow:var(--sombra-forte); transform:translateY(-2px); }
.card-tag{ font-size:.72rem; font-weight:700; color:var(--cor-cinza); letter-spacing:.05em; }
.card-link h3{ margin:6px 0; font-size:1.15rem; }
.card-link p{ margin:0; font-size:.88rem; color:var(--cor-concreto); }

.arquivos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.arquivo{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--cor-preto);
  background:var(--cor-branco); border:1px solid var(--cor-borda); border-left:4px solid var(--cor-amarelo);
  border-radius:6px; padding:14px 16px; transition:.15s;
}
.arquivo:hover{ box-shadow:var(--sombra-forte); transform:translateY(-1px); }
.arquivo-ico{
  width:44px; height:44px; flex:none; border-radius:6px; background:var(--cor-preto);
  color:var(--cor-amarelo); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.7rem;
}
.arquivo-txt b{ display:block; font-size:.95rem; }
.arquivo-txt span{ font-size:.8rem; color:var(--cor-cinza); }
.vazio{ color:var(--cor-cinza); font-size:.9rem; }

/* ---------------- RODAPÉ ---------------- */
.rodape{ text-align:center; color:var(--cor-cinza); font-size:.8rem; padding:26px 24px 40px; }
.rodape .barra{ height:4px; width:60px; background:var(--cor-amarelo); margin:0 auto 14px; border-radius:2px; }

@media (max-width:560px){
  .topo{ padding:12px 16px; } .painel-wrap{ padding:20px 16px; }
}

/* ---------- Cards de FERRAMENTA (não são guias) ----------
   Visual propositalmente diferente dos cards de guia, para
   ninguém confundir "acompanhar obra" com "ler procedimento". */
.card-link.card-ferramenta{
  background:var(--cor-preto); color:var(--cor-branco);
  border:1px solid var(--cor-preto); border-top:4px solid var(--cor-amarelo);
  border-left:4px solid var(--cor-amarelo);
}
.card-link.card-ferramenta .card-tag{ color:var(--cor-amarelo); }
.card-link.card-ferramenta h3{ color:var(--cor-branco); }
.card-link.card-ferramenta p{ color:#C9C9CB; }