/*
//////////////////////
esto va en un helper
function hexToRgb($hex) {
    $hex = str_replace('#', '', $hex);
    if (strlen($hex) === 3) {
        $r = hexdec(str_repeat($hex[0], 2));
        $g = hexdec(str_repeat($hex[1], 2));
        $b = hexdec(str_repeat($hex[2], 2));
    } else {
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
    }
    return "$r, $g, $b";
}

////////////esto va en el header
:root {
    --bs-primary: #1e90ff;
    --bs-primary-rgb: 30, 144, 255;

    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;

    --bs-primary-dark: #0f78d4;
    --bs-secondary-dark: #5c636a;

    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-primary-dark);
  } */

  /* PRIMARY ============================= */
  .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff;
  }
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
  }

  .badge-primary,
  .bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
  }
  .text-primary {
    color: var(--bs-primary) !important;
  }
  .text-primary:hover {
    color: var(--bs-primary-dark) !important;
  }

  .alert-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    color: var(--bs-primary) !important;
  }

  .nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff;
  }
  .nav-pills .nav-link:hover {
    background-color: var(--bs-primary-dark) !important;
    color: #fff;
  }
  .nav-tabs .nav-link.active {
    border-color: var(--bs-primary) var(--bs-primary) #fff;
    color: var(--bs-primary) !important;
  }
  .nav-tabs .nav-link:hover {
    color: var(--bs-primary-dark);
  }

  .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }

  .form-control:focus,
  .form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
  }

  .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }

  /* SECONDARY =========================== */
  .btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
  }
  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:active {
    background-color: var(--bs-secondary-dark);
    border-color: var(--bs-secondary-dark);
  }

  .badge-secondary,
  .bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
  }
  .text-secondary {
    color: var(--bs-secondary) !important;
  }
  .text-secondary:hover {
    color: var(--bs-secondary-dark) !important;
  }

  .alert-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.2);
    border-color: rgba(var(--bs-secondary-rgb), 0.5);
    color: var(--bs-secondary);
  }

  .nav-pills .nav-link.active.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
  }
  .nav-pills .nav-link.bg-secondary:hover {
    background-color: var(--bs-secondary-dark) !important;
  }
  .nav-tabs .nav-link.active.bg-secondary {
    border-color: var(--bs-secondary) var(--bs-secondary) #fff;
    color: var(--bs-secondary);
  }
  .nav-tabs .nav-link.bg-secondary:hover {
    color: var(--bs-secondary-dark);
  }

  .page-item.active .page-link.bg-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }

  .spinner-border.text-secondary,
  .spinner-grow.text-secondary {
    color: var(--bs-secondary);
  }

  .accordion-button:not(.collapsed).bg-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
    color: var(--bs-secondary);
  }

  .form-check-input:checked.bg-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }

  .badge-primary {
    background-color: var(--bs-primary) !important;
    color: white;
}

.badge-secondary {
    background-color: var(--bs-secondary) !important;
    color: white;
}

.badge-success {
    background-color: var(--bs-success, #29de35) !important;
    color: white;
}

.badge-danger {
    background-color: var(--bs-danger, rgb(220, 53, 53)) !important;
    color: white;
}

.badge-warning {
    background-color: var(--bs-warning, #ffc107) !important;
    color: black;
}

.badge-info {
    background-color: var(--bs-info, #0dcaf0) !important;
    color: black;
}