/* ========================================   VARIABLES CSS (Personalizables)======================================== */:root {  --primary-color: #2f1951;  --danger-color: #dc3545;  --success-color: #28a745;  --warning-color: #ffc107;  --ogange-color: #ff7f2a;   --light-bg: #f8f9fa;  --dark-text: #343a40;  --border-radius: 0.375rem;  --transition-speed: 0.2s;  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  --card-padding: 1rem;  --font-size-base: 1rem;  --font-size-sm: 0.875rem;}/* ========================================   GENERAL STYLES======================================== *//* ========================================   CARD COMPONENT======================================== */.card {  background-color: #fff;  border-radius: var(--border-radius);  box-shadow: var(--box-shadow);  padding: var(--card-padding);  margin-bottom: 1.5rem;  transition: box-shadow var(--transition-speed) ease;}.card:hover {  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}.card-header {  font-weight: bold;  font-size: 1.125rem;  border-bottom: 1px solid #dee2e6;  padding-bottom: 0.75rem;  margin-bottom: 1rem;}/* ========================================   TABLES======================================== */.table {  width: 100%;  border-collapse: collapse;  background-color: #fff;  border-radius: var(--border-radius);  overflow: hidden;  box-shadow: var(--box-shadow);}.table thead {  background-color: var(--ogange-color);  color: #fff !important;}.table th,.table td {  padding: 0.75rem;  text-align: left;  border-bottom: 1px solid #dee2e6;  font-size: var(--font-size-sm);}.table tbody tr:hover {  background-color: #f1f1f1;}/* ========================================   FORMS======================================== */.form-group {  margin-bottom: 1rem;}.form-label {  font-weight: 600;  display: block;  margin-bottom: 0.5rem;}.form-control {  width: 100%;  padding: 0.5rem 0.75rem;  border: 1px solid #ced4da;  border-radius: var(--border-radius);  font-size: var(--font-size-sm);  transition: border-color var(--transition-speed);}.form-control:focus {  border-color: var(--primary-color);  outline: none;}/* ========================================   BUTTONS (Brand)======================================== */.btn {  display: inline-block;  font-weight: 600;  font-size: var(--font-size-sm);  padding: 0.5rem 1rem;  border: none;  border-radius: var(--border-radius);  cursor: pointer;  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);  text-align: center;  text-decoration: none;  white-space: nowrap;}.btn:hover {  opacity: 0.9;}.btn-primary {  background-color: var(--primary-color);  color: #fff;}.btn-danger {  background-color: var(--danger-color);  color: #fff;}.btn-success {  background-color: var(--success-color);  color: #fff;}.btn-warning {  background-color: var(--warning-color);  color: #212529;}.btn-outline {  background-color: transparent;  border: 1px solid currentColor;}.btn-sm {  padding: 0.375rem 0.75rem;  font-size: 0.75rem;}/* ========================================   UTILITIES======================================== */.text-center {  text-align: center;}.text-right {  text-align: right;}.text-muted {  color: #6c757d;}.mb-1 {  margin-bottom: 0.25rem;}.mb-2 {  margin-bottom: 0.5rem;}.mb-3 {  margin-bottom: 1rem;}.mt-2 {  margin-top: 0.5rem;}.mt-3 {  margin-top: 1rem;}.p-2 {  padding: 0.5rem;}.p-3 {  padding: 1rem;}.rounded {  border-radius: var(--border-radius);}/* ========================================   MODALS======================================== */.modal {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  display: none;  background-color: rgba(0, 0, 0, 0.5);  align-items: center;  justify-content: center;  z-index: 1050;}.modal.active {  display: flex;}.modal-dialog {  background-color: #fff;  padding: 1.5rem;  border-radius: var(--border-radius);  box-shadow: var(--box-shadow);  width: 90%;  max-width: 500px;}.modal-header {  font-size: 1.125rem;  font-weight: bold;  margin-bottom: 1rem;}.modal-footer {  margin-top: 1rem;  text-align: right;}/* ========================================   BADGES======================================== */.badge {  display: inline-block;  padding: 0.35em 0.65em;  font-size: 0.75rem;  font-weight: 600;  line-height: 1;  color: #fff;  background-color: var(--primary-color);  border-radius: 0.25rem;}.badge-danger {  background-color: var(--danger-color);}.badge-success {  background-color: var(--success-color);}/* ========================================   RESPONSIVE ADJUSTMENTS======================================== */@media (max-width: 768px) {  .table thead {    display: none;  }  .table tr {    display: block;    margin-bottom: 1rem;    border-bottom: 2px solid #dee2e6;  }  .table td {    display: flex;    justify-content: space-between;    padding: 0.75rem;    border-bottom: 1px solid #dee2e6;  }  .table td::before {    content: attr(data-label);    font-weight: bold;    text-transform: uppercase;    color: #6c757d;  }  .modal-dialog {    width: 95%;  }}