/* ===== Cold Block — identidade visual ===== */
:root {
  --cb-cyan: #29abd4;
  --cb-cyan-escuro: #1b8fb5;
  --cb-cyan-claro: #d9f1f8;
  --cb-navy: #0e2233;
  --cb-navy-suave: #1c3a52;
  --cb-fundo: #f4f7f9;
  --cb-borda: #e3e9ee;
  --cb-perigo: #d64545;
  --cb-ok: #2e9e5b;
  --cb-alerta: #e9a13b;
}

body {
  background-color: var(--cb-fundo);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
  color: #23313d;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* ---- Navbar ---- */
.cb-navbar {
  background: linear-gradient(90deg, var(--cb-navy) 0%, var(--cb-navy-suave) 100%);
  box-shadow: 0 2px 12px rgba(14, 34, 51, .25);
}
.cb-navbar .navbar-brand img {
  height: 38px;
  background: #fff;
  border-radius: 6px;
  padding: 3px 8px;
}
.cb-navbar .nav-link {
  color: #cfe3ee;
  font-weight: 500;
}
.cb-navbar .nav-link:hover,
.cb-navbar .nav-link.active { color: #fff; }
.cb-navbar .nav-link.active { border-bottom: 2px solid var(--cb-cyan); }

/* ---- Botões ---- */
.btn-cb {
  background-color: var(--cb-cyan);
  border-color: var(--cb-cyan);
  color: #fff;
  font-weight: 600;
}
.btn-cb:hover, .btn-cb:focus {
  background-color: var(--cb-cyan-escuro);
  border-color: var(--cb-cyan-escuro);
  color: #fff;
}
.btn-outline-cb {
  border: 1px solid var(--cb-cyan);
  color: var(--cb-cyan-escuro);
  font-weight: 600;
}
.btn-outline-cb:hover { background-color: var(--cb-cyan-claro); color: var(--cb-navy); }

/* ---- Cards ---- */
.cb-card {
  border: 1px solid var(--cb-borda);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(14, 34, 51, .06);
}
.cb-card .card-header {
  background: #fff;
  border-bottom: 1px solid var(--cb-borda);
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
  color: var(--cb-navy);
}

/* ---- Página de login ---- */
.cb-login {
  max-width: 400px;
  margin: 8vh auto;
}
.cb-login .logo { max-width: 230px; }

/* ---- Cronograma ---- */
.cb-fase {
  background: var(--cb-navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .85rem;
}
.tabela-cronograma td, .tabela-cronograma th { vertical-align: middle; }
.tabela-cronograma .nome-tarefa { min-width: 260px; }
.badge-atraso {
  background-color: var(--cb-perigo);
  font-size: .72rem;
}
.badge-executada { background-color: var(--cb-ok); font-size: .72rem; }
.badge-parcial { background-color: var(--cb-alerta); font-size: .72rem; }
.badge-marco { background-color: var(--cb-navy); font-size: .72rem; }

/* ---- Alertas do executor ---- */
.cb-alerta-pendencia {
  border-left: 5px solid var(--cb-perigo);
  background: #fdf0f0;
  border-radius: 8px;
}
.cb-alerta-ok {
  border-left: 5px solid var(--cb-ok);
  background: #eefaf3;
  border-radius: 8px;
}

/* ---- Métricas do dashboard ---- */
.cb-metrica { font-size: 1.9rem; font-weight: 700; color: var(--cb-navy); }
.cb-metrica-rotulo {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7d8a;
}
.cb-progress { height: 10px; border-radius: 6px; }
.cb-progress .progress-bar { background-color: var(--cb-cyan); }

/* ---- Legenda de setores ---- */
.legenda-cor {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.15);
  vertical-align: -3px;
  margin-right: 4px;
}

/* ---- Fotos ---- */
.foto-miniatura {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--cb-borda);
}

/* ---- Rodapé ---- */
.cb-footer {
  background: var(--cb-navy);
  color: #9db4c4;
  font-size: .8rem;
}

/* ---- Wizard do cronograma (drag & drop) ---- */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
tr.drop-alvo td { border-top: 3px solid var(--cb-cyan) !important; }

/* Mobile: tabela do cronograma com rolagem horizontal */
@media (max-width: 768px) {
  .tabela-cronograma { font-size: .82rem; }
}