:root {
  --gz-bg: #F4F5F6;
  --gz-surface: #FFFFFF;
  --gz-primary: #22475A;
  --gz-primary-dark: #1A3745;
  --gz-primary-light: #DCE7EC;
  --gz-accent: #463A72;
  --gz-accent-light: #E4E1EC;
  --gz-text: #22262B;
  --gz-text-muted: #6B7280;
  --gz-border: #E3E6E8;
  --gz-radius: 10px;
}

.gz-box {
  border-radius: var(--gz-radius);
  border: 1px solid var(--gz-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}

.gz-box-header {
  background: var(--gz-bg) !important;
  border-left: 4px solid var(--gz-primary);
  border-radius: 0 !important;
  padding: 14px 18px !important;
}

.gz-btn-primary {
  background: var(--gz-primary) !important;
  border-color: var(--gz-primary) !important;
  color: #EAF2F5 !important;
  border-radius: 8px !important;
}
.gz-btn-primary:hover, .gz-btn-primary:focus {
  background: var(--gz-primary-dark) !important;
  border-color: var(--gz-primary-dark) !important;
}

.gz-table thead {
  background: var(--gz-bg);
}
.gz-table thead th {
  color: var(--gz-text);
  font-weight: 500;
  border-bottom: 2px solid var(--gz-border) !important;
}
.gz-table tbody tr:hover {
  background: var(--gz-primary-light);
}
.gz-table td, .gz-table th {
  vertical-align: middle;
}

.gz-modal-header {
  background: var(--gz-primary) !important;
  color: #EAF2F5 !important;
  border-radius: 0;
}
.gz-modal-header .close {
  color: #EAF2F5;
  opacity: .85;
}
.gz-modal-content {
  border-radius: 12px;
  overflow: hidden;
}

.gz-badge-filial {
  display: inline-block;
  background: var(--gz-primary-light);
  color: var(--gz-primary);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
}
.gz-badge-especial {
  display: inline-block;
  background: var(--gz-accent-light);
  color: var(--gz-accent);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
}

#modalAgregarCliente .input-group-addon,
#modalEditarCliente .input-group-addon {
  background: var(--gz-bg);
  border-color: var(--gz-border);
  color: var(--gz-primary);
  border-radius: 8px 0 0 8px;
}
#modalAgregarCliente .form-control,
#modalEditarCliente .form-control {
  border-color: var(--gz-border);
  border-radius: 0 8px 8px 0;
}
#modalAgregarCliente .form-control:focus,
#modalEditarCliente .form-control:focus {
  border-color: var(--gz-primary);
  box-shadow: 0 0 0 2px var(--gz-primary-light);
}
#modalAgregarCliente .btn-primary,
#modalEditarCliente .btn-primary {
  background: var(--gz-primary);
  border-color: var(--gz-primary);
  border-radius: 8px;
}