/* Identidade Construmag: preto, laranja (#FF6A00) e branco. Laranja em destaques grandes; texto pequeno em preto/cinza. */
:root { --preto:#111; --laranja:#FF6A00; --laranja-txt:#B84A00; --branco:#fff; --fundo:#f4f4f4; --cinza:#6b6b6b; --borda:#e6e6e6; --verm:#c62828; --verde:#2e7d32; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--fundo); color:var(--preto); font-size:16px; line-height:1.35; }

/* cabeçalho: branco com o logo oficial e a barra laranja da marca */
header { background:var(--branco); border-bottom:4px solid var(--laranja); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:3; }
header .marca { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--preto); min-width:0; }
header .logo { height:26px; width:auto; display:block; }
header .app-nome { font-size:14px; font-weight:600; color:var(--cinza); white-space:nowrap; border-left:1px solid var(--borda); padding-left:10px; }
header .quem { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cinza); white-space:nowrap; }
header .perfil { background:var(--fundo); border-radius:999px; padding:4px 10px; }
button.link { background:none; border:none; color:var(--preto); font-size:14px; cursor:pointer; padding:6px 4px; font-weight:600; }
button.link.discreto { color:var(--cinza); font-size:12px; font-weight:400; }

/* abas de navegação: uma linha rolável, alvo de toque alto */
nav.abas { display:flex; gap:6px; padding:8px 12px; overflow-x:auto; background:var(--branco); border-bottom:1px solid var(--borda); scrollbar-width:none; }
nav.abas::-webkit-scrollbar { display:none; }
nav.abas a { flex:0 0 auto; padding:8px 14px; border-radius:999px; background:var(--fundo); color:var(--preto); text-decoration:none; font-size:14px; font-weight:600; line-height:20px; }
nav.abas a.ativa { background:var(--preto); color:var(--branco); }

main { max-width:760px; margin:0 auto; padding:14px 16px 96px; }
h1 { font-size:22px; margin:8px 0 4px; letter-spacing:-.2px; }
h2 { font-size:13px; margin:22px 0 8px; color:var(--cinza); text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
.card { background:var(--branco); border-radius:12px; padding:12px 14px; margin:8px 0; box-shadow:0 1px 2px rgba(0,0,0,.05); border:1px solid var(--borda); }
.grupo-cab { display:flex; justify-content:space-between; font-weight:700; padding:6px 2px; border-bottom:3px solid var(--laranja); margin-top:14px; }
.item { display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--borda); }
.item:last-child { border-bottom:none; }
.item input[type=checkbox] { width:24px; height:24px; margin-top:1px; accent-color:var(--laranja); flex:0 0 auto; }
.item .desc { flex:1; min-width:0; }
.item .desc a { color:var(--preto); text-decoration:none; font-weight:600; }
.item .meta { color:var(--cinza); font-size:13px; margin-top:2px; }
.item .valor { font-weight:700; white-space:nowrap; font-variant-numeric: tabular-nums; }
.tag { display:inline-block; font-size:11px; padding:2px 7px; border-radius:999px; background:#eee; color:#333; margin-left:4px; vertical-align:middle; font-weight:600; }
.tag.verm { background:#fde3e3; color:var(--verm); }
.tag.ok { background:#e3f3e5; color:var(--verde); }
.tag.lar { background:#ffe6d4; color:var(--laranja-txt); }

.barra { position:fixed; left:0; right:0; bottom:0; background:var(--branco); border-top:1px solid var(--borda); padding:10px 16px; display:flex; gap:10px; align-items:center; justify-content:space-between; box-shadow:0 -2px 8px rgba(0,0,0,.06); }
.barra .tot { font-weight:700; font-variant-numeric: tabular-nums; }
button.btn, a.btn { background:var(--laranja); color:var(--branco); border:none; border-radius:10px; padding:12px 18px; font-size:16px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; min-height:44px; }
button.btn.sec, a.btn.sec { background:var(--preto); }
button.btn.min { padding:8px 12px; font-size:14px; min-height:36px; }
button.btn.cinza { background:#e2e2e2; color:#222; }
input[type=text], input[type=password], input[type=date], select, input[type=file] { font-size:16px; padding:11px 12px; border:1px solid #cfcfcf; border-radius:10px; width:100%; background:var(--branco); }
input[type=password].pin { letter-spacing:8px; font-size:24px; text-align:center; }
label { display:block; font-size:13px; color:var(--cinza); margin:12px 0 4px; font-weight:600; }
.erro { background:#fde3e3; color:var(--verm); padding:10px 12px; border-radius:10px; margin:8px 0; }
.aviso { background:#fff3e6; color:var(--laranja-txt); padding:10px 12px; border-radius:10px; margin:8px 0; font-size:14px; border:1px solid #ffd9b8; }
.vazio { color:var(--cinza); padding:18px 0; text-align:center; }
.linha-tempo { list-style:none; padding:0; margin:0; }
.linha-tempo li { padding:6px 0 6px 14px; border-left:3px solid var(--laranja); margin-left:6px; font-size:14px; }
.linha-tempo small { color:var(--cinza); }
table.hist { width:100%; border-collapse:collapse; font-size:13px; background:var(--branco); border-radius:10px; overflow:hidden; border:1px solid var(--borda); }
table.hist th, table.hist td { padding:8px 8px; border-bottom:1px solid var(--borda); text-align:left; vertical-align:top; }
table.hist th { background:var(--preto); color:var(--branco); font-weight:600; font-size:12px; letter-spacing:.3px; }
table.hist td:last-child { font-variant-numeric: tabular-nums; white-space:nowrap; }
.filtros { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
summary { cursor:pointer; color:var(--cinza); font-size:13px; }
dl { display:grid; grid-template-columns:140px 1fr; gap:6px 10px; font-size:14px; margin:4px 0; }
dt { color:var(--cinza); }
dd { margin:0; font-variant-numeric: tabular-nums; }
a { color:var(--laranja-txt); }

/* menu inicial */
.menu { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:600px) { .menu { grid-template-columns:1fr 1fr; } }
.tile { display:block; background:var(--branco); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--preto); border:1px solid var(--borda); border-left:6px solid var(--laranja); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.tile:active { background:#fff3e8; }
.tile-num { font-size:30px; font-weight:800; line-height:1.1; color:var(--laranja); font-variant-numeric: tabular-nums; letter-spacing:-.5px; }
.tile-tit { font-size:17px; font-weight:700; margin-top:2px; }
.tile-sub { font-size:13px; color:var(--cinza); margin-top:3px; }

/* login */
.login { max-width:380px; margin:28px auto 0; text-align:center; }
.login .logo-grande { width:min(260px, 70%); height:auto; display:block; margin:0 auto 6px; }
.login-sub { color:var(--cinza); font-size:14px; margin:0 0 14px; }
.login .card { text-align:left; }

/* rodapé */
footer.rodape { text-align:center; color:var(--cinza); font-size:12px; margin-top:28px; padding-top:12px; border-top:1px solid var(--borda); }
footer.rodape .links { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-bottom:8px; }
footer.rodape .links a { color:var(--laranja-txt); font-weight:600; text-decoration:none; }