/* Gestão de Obras — SR ECO ENGENHARIA (azul #1369BF / verde #33B54D) */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --azul: #1369bf;
  --azul-escuro: #0b3d6e;
  --laranja: #ea580c;
  --fundo: #f1f5f9;
  --branco: #ffffff;
  --texto: #1e293b;
  --cinza: #64748b;
  --borda: #e2e8f0;
  --verde: #33b54d;
  --verde-escuro: #1f8a38;
  --vermelho: #dc2626;
  --amarelo: #ca8a04;
}
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
}
a { color: var(--azul); text-decoration: none; }

/* Layout com barra lateral */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--azul-escuro); color: #cbd5e1;
  display: flex; flex-direction: column;
}
.marca { padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: center; }
.marca .logo-box { background: #fff; border-radius: 10px; padding: 8px 10px 4px; display: block; }
.marca img { max-width: 100%; height: 74px; object-fit: contain; }
.marca .marca-cliente { display: block; margin-top: 8px; font-size: 11.5px; color: #cde9ff; letter-spacing: .04em; }
.marca .marca-cliente strong { color: #7fe89a; }
.sidebar nav { flex: 1; padding: 10px 0; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; color: #cbd5e1; font-size: 14px;
}
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav a.ativo { background: var(--azul); color: #fff; }
.sidebar-rodape { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.usuario-nome { font-size: 13px; color: #fff; }
.usuario-nome small { color: #94a3b8; text-transform: capitalize; }

.conteudo { flex: 1; padding: 24px 28px; max-width: 1200px; }
.conteudo h1 { font-size: 22px; margin-bottom: 18px; }
.conteudo h2 { font-size: 17px; margin: 22px 0 10px; }

/* Cartões */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cartao {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 10px; padding: 16px;
}
.cartao .rotulo { font-size: 13px; color: var(--cinza); }
.cartao .valor { font-size: 26px; font-weight: 700; margin-top: 4px; }

/* Painéis / formulários */
.painel {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 10px; padding: 18px; margin-bottom: 20px;
}
form label { display: block; font-size: 13px; color: var(--cinza); margin-bottom: 10px; }
form input, form select, form textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px;
  font: inherit; background: #fff; color: var(--texto);
}
form textarea { min-height: 70px; resize: vertical; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.form-grade .campo-largo { grid-column: 1 / -1; }

/* Botões */
.btn {
  display: inline-block; background: var(--azul); color: #fff;
  border: 0; border-radius: 8px; padding: 9px 16px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn-mini { padding: 4px 10px; font-size: 13px; font-weight: 500; }
.btn-cinza { background: var(--cinza); }
.btn-vermelho { background: var(--vermelho); }
.btn-verde { background: var(--verde); }
form.inline { display: inline; }

/* Tabelas */
table { width: 100%; border-collapse: collapse; background: var(--branco); border-radius: 10px; overflow: hidden; border: 1px solid var(--borda); }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borda); font-size: 14px; }
th { background: #f8fafc; color: var(--cinza); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.acoes { white-space: nowrap; text-align: right; }

/* Selos de status */
.selo { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; }
.selo-andamento, .selo-ativo, .selo-entrada { background: #dcfce7; color: var(--verde); }
.selo-planejamento { background: #dbeafe; color: var(--azul); }
.selo-pausada, .selo-ferias, .selo-afastado { background: #fef9c3; color: var(--amarelo); }
.selo-concluida { background: #e2e8f0; color: var(--cinza); }
.selo-desligado, .selo-saida { background: #fee2e2; color: var(--vermelho); }

/* Barra de progresso */
.progresso { background: var(--borda); border-radius: 99px; height: 10px; min-width: 90px; overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--verde); border-radius: 99px; }

/* Mensagens */
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash-ok { background: #dcfce7; color: #166534; }
.flash-erro { background: #fee2e2; color: #991b1b; }

/* Cabeçalho timbrado (impressão e telas de relatório/RDO) */
.timbrado { display: flex; align-items: center; gap: 18px; background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; }
.timbrado img { height: 76px; }
.timbrado .timbrado-dados { font-size: 13px; color: var(--cinza); line-height: 1.5; }
.timbrado .timbrado-dados strong { color: var(--texto); font-size: 15px; }

/* Campo que exige atenção do usuário (ex.: direcionar empreiteira) */
.campo-atencao {
  background: #fef9c3; border: 2px solid var(--amarelo);
  border-radius: 10px; padding: 10px 12px;
  color: #713f12 !important; font-weight: 600;
}
.campo-atencao small { color: #854d0e; font-weight: 400; }

/* Abas dentro de uma seção (Funcionários | Documentação, etc.) */
.abas { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid var(--borda); }
.aba {
  padding: 9px 18px; font-weight: 600; color: var(--cinza);
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 9px 9px 0 0; margin-bottom: -2px;
}
.aba:hover { color: var(--azul); }
.aba.ativa {
  background: var(--branco); color: var(--azul);
  border-color: var(--borda); border-bottom: 2px solid var(--branco);
}

/* Tela de login / instalação */
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 70%); }
.cartao-login .logo-login { display: block; margin: 0 auto 10px; height: 120px; }
.cartao-login {
  background: var(--branco); border-radius: 14px; padding: 32px;
  width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.cartao-login h1 { font-size: 20px; margin-bottom: 6px; }
.cartao-login h2 { font-size: 16px; margin-bottom: 4px; }
.cartao-login p { color: var(--cinza); font-size: 14px; margin-bottom: 16px; }
.cartao-login .btn { width: 100%; margin-top: 6px; }

/* Barra de filtros */
.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filtros label { margin-bottom: 0; }
.filtros input, .filtros select { width: auto; min-width: 160px; }

/* Impressão (relatórios e RDO) */
@media print {
  .sidebar, .btn, .filtros, .nao-imprimir { display: none !important; }
  .conteudo { padding: 0; max-width: none; }
  body { background: #fff; }
  .painel, table { border: 1px solid #999; }
}
@media (max-width: 800px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; }
}

/* ===== RDO mobile (tela do encarregado) ===== */
.rdo-form label{display:block;margin:10px 0 0}
.rdo-form input[type=date],.rdo-form select,.rdo-form textarea{width:100%;font-size:16px;padding:12px;border:1px solid var(--borda,#DCE4DF);border-radius:10px}
.linha-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rdo-climas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.rdo-climas fieldset{border:1px solid var(--borda,#DCE4DF);border-radius:10px;padding:8px;display:flex;gap:4px;flex-wrap:wrap}
.rdo-climas legend{font-size:.8rem;color:var(--cinza,#5B6B7A);padding:0 6px}
.rdo-clima input{position:absolute;opacity:0}
.rdo-clima span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border:2px solid transparent;border-radius:10px;font-size:1.3rem;cursor:pointer}
.rdo-clima small{font-size:.6rem;color:var(--cinza,#5B6B7A)}
.rdo-clima input:checked + span{border-color:var(--verde,#2FB449);background:#E3F5E7}
.rdo-clima input:focus-visible + span{outline:2px solid var(--azul,#0C60A8)}
.rdo-efetivo{float:right;font-size:.95rem;background:#E3F5E7;color:#1F8A35;border-radius:999px;padding:4px 14px}
.rdo-dica{color:var(--cinza,#5B6B7A);font-size:.85rem;margin:4px 0 8px}
.rdo-presencas{border:1px solid var(--borda,#DCE4DF);border-radius:12px;overflow:hidden}
.rdo-equipe{background:#F4F7F4;padding:6px 12px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--cinza,#5B6B7A)}
.rdo-func{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--borda,#DCE4DF)}
.rdo-func-nome{line-height:1.2}
.rdo-func-nome small{display:block;color:var(--cinza,#5B6B7A);font-size:.75rem}
.rdo-pmf{display:flex;gap:6px}
.rdo-pmf input{position:absolute;opacity:0}
.pmf{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:2px solid var(--borda,#DCE4DF);font-weight:700;cursor:pointer;user-select:none}
.rdo-pmf input:checked + .pmf-presente{background:#2FB449;border-color:#2FB449;color:#fff}
.rdo-pmf input:checked + .pmf-meia{background:#E9A400;border-color:#E9A400;color:#fff}
.rdo-pmf input:checked + .pmf-falta{background:#C43B3B;border-color:#C43B3B;color:#fff}
.rdo-pmf input:focus-visible + .pmf{outline:2px solid var(--azul,#0C60A8)}
.rdo-add-foto{border:2px dashed var(--borda,#DCE4DF);border-radius:12px;padding:16px;text-align:center;cursor:pointer;margin-top:8px}
.rdo-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0}
.rdo-fotos figure{margin:0;text-align:center}
.rdo-fotos img{width:100%;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--borda,#DCE4DF)}
.rdo-acoes{display:flex;gap:10px;margin-top:16px}
.rdo-acoes .btn{flex:1;padding:16px;font-size:1.05rem;text-align:center}

/* Selos de situação do RDO */
.selo-rascunho{background:#EEF1F3;color:#5B6B7A}
.selo-enviado{background:#E2EEFA;color:#0C60A8}
.selo-aprovado{background:#E3F5E7;color:#1F8A35}
.selo-reprovado{background:#FBE4E4;color:#C43B3B}

@media print{
  .rdo-fotos-impressao{grid-template-columns:1fr 1fr}
  .rdo-fotos-impressao img{height:auto;max-height:280px}
}
@media (max-width:640px){
  .linha-campos,.rdo-climas{grid-template-columns:1fr}
}

/* Pré-visualização das notas antes do envio (enviar-nota.php e gastos.php) */
.previa-notas{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.previa-item{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:130px;
  padding:6px;background:#fff;border:1px solid #D8E0DA;border-radius:10px;font-size:22px}
.previa-item img{display:block;max-width:118px;max-height:118px;border-radius:6px;object-fit:cover}
.previa-item small{font-size:11px;color:var(--cinza);text-align:center;word-break:break-word}
.previa-erro{border-color:#C43B3B;background:#FBE4E4}
.previa-erro small{color:#C43B3B}

/* ✕ de remover na pré-visualização */
.previa-item{position:relative}
.previa-remover{position:absolute;top:2px;right:2px;width:24px;height:24px;line-height:1;
  border:0;border-radius:50%;background:#C43B3B;color:#fff;font-size:13px;cursor:pointer}