* {
   margin: 0;
   padding: 0;
}


:root {
    --brand-blue: #6f42c1;
    --brand-teal: #8b5fc7;
    --brand-soft: #f3effb;
    --brand-gradient: linear-gradient(135deg, #805ad5, #5b3bb5);
}
:root {
   --main-color: #1D4D7A;
   --darker-main-color: #194268;
   --white-color: #ffffff;
   --black-color: #000000;
   --gray-subtle: #f5f5f5;
}

.bg-main {
   background-color: var(--main-color);
   color: var(--white-color);
}

.text-main {
   color: var(--main-color);
}

.pointer {
   cursor: pointer;
}

.btn-main {
   background-color: var(--main-color);
   color: var(--white-color);
   border: none;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
   cursor: pointer;
}

.btn-main:hover {
   background-color: var(--darker-main-color);
   color: var(--white-color);
}

.w-15 {
   width: 15%;
}

.w-20 {
   width: 20%;
}

.w-25 {
   width: 25%;
}

.w-40 {
   width: 40%;
}

.w-45 {
   width: 45%;
}

.main-section {
   height: 100vh;
   overflow-y: auto;
}

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

.section-sidebar {
   min-height: 100vh;
   max-height: 100vh;
}

.sidebar-list .sidebar-option:first-child {
   border-top: 1px solid var(--gray-subtle);
   border-bottom: 1px solid var(--gray-subtle);
   transition: all 0.3s ease-in-out;
}

.sidebar-list .sidebar-option {
   border-bottom: 1px solid var(--gray-subtle);
   transition: all 0.3s ease-in-out;
}

.sidebar-list .sidebar-option:hover {
   background: #0d375e;
}

/* Sección del loader */
.loader-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2000;
}

.loader {
  --color-1: #4F49DF;
  --color-2: #fff;
  --size: 0.85px;

  box-sizing: border-box;
  position: relative;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  animation: spin 1s linear infinite;
}
.loader:after,
.loader:before {
  content: '';
  width: calc(24 * var(--size));
  height: calc(24 * var(--size));
  position: absolute;
  border-radius: 50%;
  background: var(--color-1);
  animation: spin 1s linear infinite;
  transform-origin: 0 100%;
}
.loader:before {
  transform-origin: 0 50%;
  background: var(--color-2);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Campo obligatorio vacío al intentar guardar (marcarCamposRequeridos en js/main.js) */
.campo-requerido,
.campo-requerido:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(219, 21, 41, 0.404) !important;
}