#multasModal .modal-content,
#multaFormModal .modal-content,
#multaDetailModal .modal-content,
#multaPaymentModal .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
}

#multasModal .modal-header,
#multaFormModal .modal-header,
#multaDetailModal .modal-header,
#multaPaymentModal .modal-header {
  border-bottom: 1px solid #e5e7eb;
}

.multas-context {
  color: #64748b;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.multas-kpi {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .06);
  min-height: 104px;
}

.multas-kpi .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.multas-kpi-label {
  color: #64748b;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.multas-kpi-value {
  color: #0f172a;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.15;
  margin-top: .35rem;
}

.multas-toolbar {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .8rem;
}

.multas-toolbar .multas-search {
  flex: 1 1 300px;
}

.multas-table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: auto;
}

.multas-table {
  margin: 0;
  min-width: 980px;
}

.multas-table th {
  background: #f8fafc;
  color: #475569;
  font-size: .72rem;
  letter-spacing: .04em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.multas-table td {
  vertical-align: middle;
}

.multas-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .35rem .58rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.multas-empty {
  align-items: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  justify-content: center;
  min-height: 210px;
  padding: 2rem;
  text-align: center;
}

.multas-empty i {
  font-size: 2rem;
  opacity: .45;
}

.multas-detail-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.multas-detail-item {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: .8rem;
}

.multas-detail-item.wide {
  grid-column: 1 / -1;
}

.multas-detail-label {
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.multas-detail-value {
  color: #0f172a;
  font-weight: 650;
  margin-top: .25rem;
  overflow-wrap: anywhere;
}

.multas-history {
  border-left: 2px solid #cbd5e1;
  margin-left: .45rem;
  padding-left: 1rem;
}

.multas-history-item {
  margin-bottom: 1rem;
  position: relative;
}

.multas-history-item::before {
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #cbd5e1;
  content: '';
  height: 12px;
  left: -1.43rem;
  position: absolute;
  top: .3rem;
  width: 12px;
}

.multas-required-note {
  color: #b42318;
  font-size: .82rem;
}

.multas-loading {
  align-items: center;
  display: flex;
  gap: .65rem;
  justify-content: center;
  min-height: 220px;
}

@media (max-width: 900px) {
  .multas-detail-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .multas-detail-grid { grid-template-columns: 1fr; }
  .multas-detail-item.wide { grid-column: auto; }
}
