:root {
  --color-navy: #bb0000;               /* Rojo base principal */
  --color-navy-hover: #990000;         /* Hover más oscuro */
  --color-navy-dark: #660000;          /* Rojo muy oscuro para bordes o sombras */
  --color-navy-light: #ffd6d6;         /* Rojo claro para fondos suaves */
  --color-navy-gradient-top: #e00000;  /* Parte superior del gradiente */
  --color-navy-gradient-bottom: #990000; /* Parte inferior del gradiente */
  --color-navy-text: #800000;          /* Rojo oscuro para texto */
}





.bg-navy {
  background-color: var(--color-navy) !important;
  color: #fff !important;
}
.bg-navy:hover {
  background-color: var(--color-navy-hover) !important;
}
.text-navy {
  color: var(--color-navy-text) !important;
}
.bg-gradient-navy {
  background-image: linear-gradient(to bottom, var(--color-navy-gradient-top), var(--color-navy-gradient-bottom)) !important;
}
.border-navy {
  border-color: var(--color-navy-dark) !important;
}
.btn-navy {
  background-color: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy-dark);
}
.btn-navy:hover {
  background-color: var(--color-navy-hover);
  border-color: var(--color-navy-dark);
}


/* Enlace activo del menú lateral */
.nav-sidebar .nav-item > .nav-link.active {
  background-color: var(--color-navy) !important;
  color: #fff !important;
}

/* Para íconos activos */
.nav-sidebar .nav-item > .nav-link.active i {
  color: #fff !important;
}

/* Solo aplica estilo si el menú realmente tiene un subítem activo */
.nav-sidebar .menu-open > .nav-link.active {
  background-color: var(--color-navy-dark) !important;
  color: #fff !important;
}


/* Ítem activo en submenús */
.nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--color-navy-light) !important;
  color: var(--color-navy-text) !important;
}

.card.card-navy {
  border-top: 3px solid var(--color-navy);
  border-left: 1px solid var(--color-navy-dark);
  border-right: 1px solid var(--color-navy-dark);
  border-bottom: 1px solid var(--color-navy-dark);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.card.card-navy > .card-header {
  background-color: var(--color-navy);
  color: #ffffff;
  border-bottom: 1px solid var(--color-navy-dark);
}

.card.card-navy > .card-header a {
  color: #ffffff;
}

.card.card-navy > .card-body {
  background-color: #ffffff;
  color: #000;
}


/* Estilo del botón normal */
.btn.bg-gradient-navy,
.btn.bg-navy {
  background-color: var(--color-navy) !important;
  background-image: linear-gradient(to bottom, var(--color-navy-gradient-top), var(--color-navy-gradient-bottom)) !important;
  border-color: var(--color-navy-dark) !important;
  color: #fff !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Estilo del botón cuando el mouse pasa encima */
.btn.bg-gradient-navy:hover,
.btn.bg-navy:hover {
  background-color: var(--color-navy-hover) !important;
  background-image: none !important;
  border-color: var(--color-navy-hover) !important;
  color: #fff !important;
}

/* Cambiar color a enlaces */
a {
  color: var(--color-navy);
}
a:hover {
  color: var(--color-navy-hover);
}

/* Estilo para opción seleccionada en <select> */
select > option:checked {
  background-color: var(--color-navy-selected-bg) !important;
  color: var(--color-navy-selected-text) !important;
}


/*CODIGO PARA LOS TAPS EJEMPLO ALUMNO-MAMA-PAPA-APODERADO PARA DARLE UN COLOR DE FONDO ESPECIAL*/

/* Activo: pestaña seleccionada */
.nav-tabs .nav-link.active {
  background-color: var(--color-navy);
  color: white;
}

/* Transiciones suaves */
.nav-tabs .nav-link {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover: cuando el mouse está sobre la pestaña */
.nav-tabs .nav-link:hover {
  background-color: var(--color-navy-hover);
  color: white;
}

/* Cambiar el color de la fecha seleccionada */

.daterangepicker td.active {
  background-color: var(--color-navy);
  color: white;
}

.daterangepicker .ranges li.active {
  background-color: var(--color-navy);
  color: white;
}

.btn-confirm-custom {
  background-color: var(--color-navy) !important;
  color: white !important;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.btn-confirm-custom:hover {
  background-color: var(--color-navy-hover) !important;
}


.icheck-navy > input[type="checkbox"]:checked + label::before {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy-dark) !important;
}


.user-header.bg-navy-light {
  background-color: var(--color-navy-light) !important;
  color: var(--color-navy-text) !important;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #e0e0e0 !important; /* Gris más oscuro que el actual */
  color: var(--color-navy-text) !important;
  transition: background-color 0.2s ease;
}

.dropdown-menu .dropdown-item:hover i {
  color: var(--color-navy-text) !important;
}

.icheck-navy input[type="radio"]:checked + label::before {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy-dark) !important;
}

.icheck-navy input[type="radio"] + label::before {
  border-color: var(--color-navy-dark) !important;
}