body {
  background: #f3f3f3;
  font-size: 13px;
}

/* ===== CABEÇALHO ===== */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions .form-control {
  height: 36px;
  min-width: 260px;
}

.header-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ===== BLOCO ATR ===== */
.atr-row {
  background: #fff;
  border: 1px solid #e0e0e0;
  display: flex;
  width: 100%;
}

/* ===== COLUNA ESQUERDA ===== */
.atr-left {
  width: 460px;
  display: flex;
  padding: 10px;
  border-right: 1px solid #e6e6e6;
  gap: 12px;
}

.atr-info {
  width: 160px;
  flex-shrink: 0;
  flex-direction: column;
}

.atr-people {
  flex: 1;
  border-left: 1px solid #e6e6e6;
  padding-left: 10px;
}

/* ===== MENU ===== */
.atr-menu {
  width: 140px;
  border-right: 1px solid #e6e6e6;
}

.atr-menu-item {
  padding: 6px 10px;
  cursor: pointer;
  color: #666;
}

.atr-menu-item.active {
  background: #f2f2f2;
  font-weight: 600;
  color: #000;
}

.atr-content {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}

.painel {
  min-height: 0;
}

.painel.active {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
  flex: 1;
  padding: 10px;
}

/* ===== CARD ATR ===== */
.atr-box {
  width: 320px;
  border: 1px solid #dcdcdc;
  padding: 8px 10px;
  flex: 0 0 320px;
  box-sizing: border-box;
  border-left-width: 4px;
  border-left-style: solid;
}

.dot {
  width: 105px;
  height: 10px;
  background: #f1c40f;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

small { color: #777; font-size: 12px; }

/* RESPONSÁVEIS */
.person-row {
  padding: 4px 0;
}

.person-time {
  min-width: 58px;
  text-align: right;
}

.atr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* CORES */
.atr-quente      { background: #dc3545; }
.atr-frio        { background: #0d6efd; }
.atr-eletricidade{ background: #ffc107; }
.atr-altura      { background: #0dcaf0; }
.atr-escavacao   { background: #212529; }
.atr-confinado   { background: #6c757d; }
.atr-classificada{ background: #198754; }
.atr-icamento    { background: #6610f2; }
.atr-tubulacao   { background: #20c997; }

.lista-desvios {
  max-height: 300px;
  overflow-y: auto;
  display: block;
}

.btn-group .btn {
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
}

.btn-group .btn i,
.btn-group .btn svg {
  font-size: 12px;
}

#finalizadosContainer .table th,
#finalizadosContainer .table td {
  vertical-align: middle;
  font-size: 14px;
}

.linha-atividade-finalizada:hover {
  background-color: #f8f9fa;
}

/* ================================================
   POPUP ATRs FINALIZADAS — isolado do Bootstrap
   ================================================ */

.pfp {
  font-size: 13px;
  color: #212529;
  box-sizing: border-box;
}

.pfp *,
.pfp *::before,
.pfp *::after {
  box-sizing: border-box;
}

/* --- Header do popup --- */
.pfp .ph {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-left: 4px solid #0d6efd;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pfp .ph-title {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 2px;
}

.pfp .ph-sub {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

.pfp .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pfp .chip {
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  color: #495057;
  font-weight: 500;
}

/* --- Grid de cards --- */
.pfp .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

/* --- Card individual --- */
.pfp .atr-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.pfp .atr-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Header do card — borda colorida no topo, SEM gradiente --- */
.pfp .atr-card-hdr {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  border-top: 4px solid #6c757d;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

/* --- Header do card — cor vem inline do tipo de ATR --- */
.pfp .atr-card-hdr {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  border-top: 4px solid #adb5bd; /* fallback, sobrescrito inline */
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

/* remova ou deixe comentado — não são mais necessárias:
.pfp .atr-card-hdr.s1 { border-top-color: #0d6efd; }
.pfp .atr-card-hdr.s2 { border-top-color: #198754; }
.pfp .atr-card-hdr.s0 { border-top-color: #dc3545; }
.pfp .atr-card-hdr.sd { border-top-color: #adb5bd; }
*/

.pfp .codigo {
  font-size: 17px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 2px;
  letter-spacing: 0.3px;
}

.pfp .tipo {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

/* --- Badges de status — sem conflito com .badge do Bootstrap --- */
.pfp .atr-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

.pfp .atr-badge.bi {
  background: #cfe2ff;
  color: #084298;
  border-color: #9ec5fe;
}

.pfp .atr-badge.bs {
  background: #d1e7dd;
  color: #0a3622;
  border-color: #a3cfbb;
}

.pfp .atr-badge.bd {
  background: #f8d7da;
  color: #58151c;
  border-color: #f1aeb5;
}

.pfp .atr-badge.bx {
  background: #e9ecef;
  color: #495057;
  border-color: #ced4da;
}

/* --- Body do card --- */
.pfp .atr-body {
  padding: 12px 14px;
}

/* --- Grid de infos 2x2 --- */
.pfp .irow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.pfp .ibox {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 7px 10px;
}

.pfp .ilabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  display: block;
  margin-bottom: 3px;
}

.pfp .ivalue {
  font-size: 12px;
  color: #212529;
  word-break: break-word;
  line-height: 1.4;
}

/* --- Caixa de descrição --- */
.pfp .dbox {
  background: #f0f6ff;
  border-left: 3px solid #0d6efd;
  border-radius: 0 6px 6px 0;
  padding: 9px 12px;
  margin-bottom: 10px;
}

.pfp .dlabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  margin-bottom: 4px;
}

.pfp .dtext {
  font-size: 12px;
  color: #212529;
  line-height: 1.5;
}

/* --- Seção responsáveis --- */
.pfp .rsec {
  border-top: 1px solid #e9ecef;
  padding-top: 10px;
}

.pfp .rlabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  margin-bottom: 8px;
}

.pfp .rgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pfp .ritem {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 6px 10px;
}

.pfp .rnome {
  font-size: 12px;
  font-weight: 500;
  color: #212529;
  display: block;
  margin-bottom: 1px;
}

.pfp .rcargo {
  font-size: 10px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Valores vazios --- */
.pfp .empty {
  color: #adb5bd;
  font-style: italic;
  font-weight: 400;
}

/* --- Footer chips --- */
.pfp .fchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9ecef;
}

.pfp .mchip {
  font-size: 10px;
  color: #6c757d;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 2px 8px;
}

/* --- Estado vazio --- */
.pfp .empty-state {
  padding: 48px 20px;
  text-align: center;
  color: #6c757d;
  font-size: 14px;
}

/* --- Garante isolamento no modal do Bootstrap --- */
.modal-body .pfp * {
  box-sizing: border-box;
}