:root{
  --navy:#042569; --navy-dark:#031b4d;
  --green:#4ab90d; --green-dark:#3a9309;
  --amber:#e8a33d; --amber-dark:#c8801a;
  --red:#d63a3a; --red-dark:#b32c2c;
  --blue:#2f80ed; --blue-dark:#1c5fc2;
  --ink:#0f1b2d; --muted:#5c6b80; --bg:#ffffff; --panel:#f4f7fb; --line:#e6ebf2; --radius:18px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--panel); color:var(--ink);
}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

header.app-header{
  position:sticky; top:0; z-index:10; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
header.app-header .brand{color:#fff; font-weight:700; font-size:1.1rem;}
header.app-header nav{display:flex; gap:18px; align-items:center;}
header.app-header nav a{color:#fff; opacity:.85;}
header.app-header nav a.active{opacity:1; font-weight:600; border-bottom:2px solid #fff;}
#navToggle{display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer;}

@media (max-width:720px){
  header.app-header nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--navy-dark); flex-direction:column; padding:12px 24px; gap:12px;
  }
  header.app-header nav.open{display:flex;}
  #navToggle{display:block;}
}

main{padding:32px 0 60px;}

.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap;}
.page-head h1{margin:0; font-size:1.5rem;}
.breadcrumb{color:var(--muted); font-size:.9rem; margin-bottom:6px;}
.breadcrumb a{color:var(--muted);}

.flash{padding:12px 16px; border-radius:12px; margin-bottom:20px; font-size:.95rem;}
.flash-success{background:rgba(74,185,13,.12); color:var(--green-dark); border:1px solid rgba(74,185,13,.3);}
.flash-error{background:rgba(214,58,58,.1); color:var(--red-dark); border:1px solid rgba(214,58,58,.3);}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:8px;
}
.card .logo{width:100%; height:110px; object-fit:contain; background:var(--panel); border-radius:12px;}
.card h3{margin:0; font-size:1.05rem;}
.card .meta{color:var(--muted); font-size:.85rem;}

.pill{display:inline-block; padding:3px 12px; border-radius:999px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px;}
.pill-em-andamento{background:rgba(47,128,237,.14); color:var(--blue-dark);}
.pill-concluido{background:rgba(74,185,13,.14); color:var(--green-dark);}
.pill-paralisado{background:rgba(214,58,58,.14); color:var(--red-dark);}
.pill-ativo{background:rgba(74,185,13,.14); color:var(--green-dark);}
.pill-inativo{background:rgba(92,107,128,.14); color:var(--muted);}

.btn{
  display:inline-flex; align-items:center; gap:6px; border:none; border-radius:999px;
  padding:10px 20px; font-size:.9rem; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-dark);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-dark);}
.btn-outline{background:#fff; color:var(--navy); border:1px solid var(--line);}
.btn-danger{background:var(--red); color:#fff;}
.btn-danger:hover{background:var(--red-dark);}
.btn-sm{padding:6px 14px; font-size:.8rem;}

.search-box{
  width:100%; max-width:320px; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:.95rem; font-family:inherit; margin-bottom:16px;
}
.search-box:focus{outline:2px solid var(--green); border-color:transparent;}
table.data-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden;}
table.data-table th, table.data-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem;}
table.data-table th{background:var(--panel); color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase;}
table.data-table td.actions{white-space:nowrap; display:flex; gap:8px;}
table.data-table tr:last-child td{border-bottom:none;}

.form-card{background:#fff; border-radius:var(--radius); padding:26px; max-width:560px;}
.field{margin-bottom:16px;}
.field label{display:block; font-weight:600; font-size:.85rem; margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:.95rem; font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--green); border-color:transparent;}
.field .hint{color:var(--muted); font-size:.8rem; margin-top:4px;}

.timeline-item{background:#fff; border-radius:var(--radius); padding:18px 20px; margin-bottom:14px;}
.timeline-item .data{font-weight:700; color:var(--navy);}
.timeline-item .autor{color:var(--muted); font-size:.85rem;}
.timeline-item .atividade{margin:10px 0;}
.thumbs{display:flex; gap:8px; flex-wrap:wrap;}
.thumbs img{width:90px; height:90px; object-fit:cover; border-radius:10px; border:1px solid var(--line);}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin:16px 0;}
.gallery img{width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid var(--line);}

.empty-state{padding:40px; text-align:center; color:var(--muted); background:#fff; border-radius:var(--radius);}

.planta-wrap{position:relative; width:100%; background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0;}
.planta-wrap img{width:100%; height:auto; display:block;}
.planta-svg{position:absolute; top:0; left:0; width:100%; height:100%;}
.planta-svg .trecho-clicavel{cursor:pointer;}
.trecho-linha{stroke:rgba(214,58,58,.7); stroke-width:var(--lw, 1); transition:stroke .15s, stroke-width .15s;}
.planta-svg .trecho-clicavel:hover .trecho-linha, .planta-svg .trecho-clicavel:focus .trecho-linha{stroke-width:calc(var(--lw, 1) * 1.4);}
.trecho-linha.trecho-parcial{stroke:rgba(232,163,61,.95);}
.trecho-linha.trecho-concluido{stroke:rgba(74,185,13,.9); stroke-width:calc(var(--lw, 1) * 1.7);}

.camada-switch{
  position:absolute; top:10px; left:60px; z-index:1000;
  display:flex; gap:6px; background:#fff; padding:4px; border-radius:12px;
  box-shadow:0 1px 4px rgba(15,27,45,.25);
}
.camada-btn{
  border:none; background:transparent; color:var(--muted); font-weight:600; font-size:.85rem;
  padding:8px 14px; border-radius:9px; cursor:pointer; transition:background .15s, color .15s;
}
.camada-btn:hover{background:var(--panel);}
.camada-btn.ativo{background:var(--navy); color:#fff;}

.pill-trecho-pendente{background:rgba(214,58,58,.14); color:var(--red-dark);}
.pill-trecho-parcial{background:rgba(232,163,61,.18); color:var(--amber-dark);}
.pill-trecho-concluido{background:rgba(74,185,13,.14); color:var(--green-dark);}

.planta-editor{position:relative; width:100%; background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0; cursor:crosshair;}
.planta-editor img{width:100%; height:auto; display:block; -webkit-user-select:none; user-select:none;}
.planta-editor svg{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;}
.ponto-marcador{fill:var(--blue); stroke:#fff; stroke-width:2;}
.linha-preview{stroke:var(--blue); stroke-linecap:round;}

.login-wrap{max-width:380px; margin:80px auto 0;}
.login-wrap .form-card{max-width:none;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(15,27,45,.55); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:#fff; border-radius:var(--radius); padding:24px; width:100%; max-width:440px;
  max-height:90vh; overflow-y:auto; position:relative;
}
#mapaTrechos{position:relative; z-index:0; isolation:isolate; height:640px;}
@media (max-width:720px){
  #mapaTrechos{height:380px;}
}

.modal-fechar{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.6rem;
  line-height:1; cursor:pointer; color:var(--muted);
}