/* Ajustes del modo claro: texto más oscuro y links más claros que los de Nifty.
 * Van acotados a [data-bs-theme=light]; el modo oscuro usa los valores de Nifty. */
[data-bs-theme=light] {
  --bs-body-bg: #edf1f6;
  --bs-body-color: #1b313d !important;
  --bs-card-bg: #fff;
  --bs-dropdown-bg: #fff;
  --bs-headings-color: #373c43;
  --bs-muted-color: #a5b1b8;
  --bs-link-color: #03a9f4;
  --bs-link-color-rgb: 3, 169, 244;
  --bs-border-color: rgba(0, 0, 0, 0.07);
  --bs-border-radius: 0.4375rem;
  --bs-table-striped-color: var(--bs-body-color) !important;
}

/* Variables de Nifty 3 que siguen leyendo librerías adaptadas por Nifty (mc-datepicker, y gridjs, litepicker,
 * tabulator… si se llegan a usar). Nifty 4.2 ya no las define; se derivan de las suyas en los dos modos. */
:root {
  --bs-comp-active-bg: var(--bs-primary);
  --bs-comp-active-bg-rgb: var(--bs-primary-rgb);
  --bs-comp-active-color: #fff;
  --bs-comp-active-color-rgb: 255, 255, 255;
}

[data-bs-theme=dark] {
  --bs-card-bg: var(--bs-component-bg);
  --bs-dropdown-bg: var(--bs-component-bg);
  --bs-headings-color: var(--bs-emphasis-color);
  --bs-muted-color: var(--bs-secondary-color);
}

.content {
  color: var(--bs-body-color);
}

/*.text-muted {*/
/*    color: #20262c !important;*/
/*}*/

.mainnav__inner .text-muted {
  color: #84868a !important;
}

.table-striped > tbody > tr {
  color: var(--bs-body-color) !important;
}


.bg-overlay {
  position: relative;
  background-size: cover;
  height: 100vh;
}

.bg-overlay:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(
    255,
    255,
    255,
    0.4
  ); /* Puedes ajustar la opacidad aquí */
}

.account-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  background-color: transparent;
}

.aa-content {
  padding: 10px 10px;
  /*background-color: #fff;*/
  margin-top: 0;
}

.aa-content input {
  text-align: center;
}

.logo-name {
  color: #d6d6d6;
  font-size: 180px;
  font-weight: 800;
  letter-spacing: -10px;
  margin-bottom: 0;
}

.socialaccount_provider.google {
  color: #fff;
  background-color: #cb2027;
  border-color: #cb2027;
}

.socialaccount_provider.microsoft {
  color: #fff;
  background-color: #2672ec;
  border-color: #2672ec;
}

.socialaccount_provider.apple {
  color: #fff;
  background-color: #111111;
  border-color: #111111;
}

.form-check-input {
  float: none !important;
}

.gray-bg {
  background-color: #fafafa;
}

.logo {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

.logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  /*width: 600px;*/
}

.logo-action img {
  max-width: 400px;
}


@media (min-width: 992px) {
  .brand-wrap {
    max-width: 80% !important;
  }
}

/* Escudo de la marca (top_navbar.html): sustituye al logo ancho con el menú colapsado y en pantallas chicas.
 * Va con .header__brand para ganarle a `.brand-img img` de Nifty, que lo fija al tamaño de un ícono. */
.header__brand .logo-escudo {
  height: 2.5rem;
  margin-inline: auto;
  width: auto;
}

/* CONTENIDO SOBRE EL HEADER
 * Con `content__header overlapping` (Nifty 4.2) el contenido sube encima de la franja de color con un margen
 * negativo. El header es `position: relative` y el contenido no: el navegador pinta el header después y tapa todo lo
 * que no tenga posición propia. Las cards sí la tienen, pero controles sueltos (los filtros del directorio) quedaban
 * detrás de la franja. */
.content__header.overlapping + .content__boxed {
  position: relative;
}

/* SECUNDARIO VERDE AZULADO
 * Nifty 4.2 trae btn-secondary gris (#b6bbc2); se conserva el verde azulado de Nifty 3,
 * que se usa en toda la plataforma (botones de DataTables, acciones secundarias). */
:root {
  --bs-secondary: #26a69a;
  --bs-secondary-rgb: 38, 166, 154;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #26a69a;
  --bs-btn-border-color: #26a69a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #208d83;
  --bs-btn-hover-border-color: #1e857b;
  --bs-btn-focus-shadow-rgb: 71, 179, 169;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1b746c;
  --bs-btn-active-border-color: #1d7d74;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #26a69a;
  --bs-btn-disabled-border-color: #26a69a;
  box-shadow: 0 0 0 #26a69a, 0 0 0 rgba(26, 29, 33, 0.25);
}

.btn-secondary:hover {
  box-shadow: 0 0.1rem 0.5rem rgba(38, 166, 154, 0.5), 0 0.25rem 1rem rgba(38, 166, 154, 0.5);
}

.btn-secondary:active {
  box-shadow: 0 0 0.5rem #26a69a, 0 0 0.75rem rgba(26, 29, 33, 0.2) !important;
}

.btn-secondary:focus, .btn-secondary:active:focus {
  box-shadow: 0 0 0 1px #26a69a, 0 0 0.7rem 0.25rem rgba(38, 166, 154, 0.4) !important;
}

.btn-outline-secondary {
  --bs-btn-color: #26a69a;
  --bs-btn-border-color: #26a69a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #26a69a;
  --bs-btn-hover-border-color: #26a69a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #26a69a;
  --bs-btn-active-border-color: #26a69a;
}

/* NAVY INSTITUCIONAL
 * Navy del esquema de pase, disponible en cualquier dominio aunque su esquema sea otro.
 * En oficialía marca el rol de Oficialía (CAP/ADM) en los encabezados de card, donde
 * bg-primary ya es el naranja del dominio. Mismo patrón que las utilidades bg-* de Bootstrap. */
:root {
  --pase-navy: #24447f;
  --pase-navy-rgb: 36, 68, 127;
}

.bg-navy {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pase-navy-rgb), var(--bs-bg-opacity)) !important;
}

/* DATATABLES */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background: transparent;
}

.dataTables_wrapper {
  padding-bottom: 30px;
}

.dataTables_length {
  float: left;
}

.dataTables_filter label {
  margin-right: 5px;
}

.html5buttons {
  float: right;
}

.html5buttons a {
  border: 1px solid #e7eaec;
  background: #fff;
  color: #676a6c;
  box-shadow: none;
  padding: 6px 8px;
  font-size: 12px;
}

.html5buttons a:hover,
.html5buttons a:focus:active {
  background-color: #eee;
  color: inherit;
  border-color: #d2d2d2;
}

div.dt-button-info {
  z-index: 100;
}

@media (max-width: 768px) {
  .html5buttons {
    float: none;
    margin-top: 10px;
  }

  .dataTables_length {
    float: none;
  }
}

.dt-bootstrap5 .form-control-sm {
  height: 29px !important;
  padding: 2px 10px;
}

.mc-calendar {
  z-index: 1055 !important;
}

/* *************************************
 *  SPINNERS
 ************************************* */
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-rotating-plane"></div>
 *
 */
.sk-spinner-rotating-plane.sk-spinner {
  width: 30px;
  height: 30px;
  background-color: #1c84c6;
  margin: 0 auto;
  -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
  animation: sk-rotatePlane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-double-bounce">
 *      <div class="sk-double-bounce1"></div>
 *      <div class="sk-double-bounce2"></div>
 *    </div>
 *
 */
.sk-spinner-double-bounce.sk-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
}

.sk-spinner-double-bounce .sk-double-bounce1,
.sk-spinner-double-bounce .sk-double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #1c84c6;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
  animation: sk-doubleBounce 2s infinite ease-in-out;
}

.sk-spinner-double-bounce .sk-double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wave">
 *      <div class="sk-rect1"></div>
 *      <div class="sk-rect2"></div>
 *      <div class="sk-rect3"></div>
 *      <div class="sk-rect4"></div>
 *      <div class="sk-rect5"></div>
 *    </div>
 *
 */
.sk-spinner-wave.sk-spinner {
  margin: 0 auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.sk-spinner-wave div {
  background-color: #1c84c6;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}

.sk-spinner-wave .sk-rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-spinner-wave .sk-rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-spinner-wave .sk-rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-spinner-wave .sk-rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wandering-cubes">
 *      <div class="sk-cube1"></div>
 *      <div class="sk-cube2"></div>
 *    </div>
 *
 */
.sk-spinner-wandering-cubes.sk-spinner {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  position: relative;
}

.sk-spinner-wandering-cubes .sk-cube1,
.sk-spinner-wandering-cubes .sk-cube2 {
  background-color: #1c84c6;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
  animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
}

.sk-spinner-wandering-cubes .sk-cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-pulse"></div>
 *
 */
.sk-spinner-pulse.sk-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background-color: #1c84c6;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
  animation: sk-pulseScaleOut 1s infinite ease-in-out;
}

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-chasing-dots">
 *      <div class="sk-dot1"></div>
 *      <div class="sk-dot2"></div>
 *    </div>
 *
 */
.sk-spinner-chasing-dots.sk-spinner {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  animation: sk-chasingDotsRotate 2s infinite linear;
}

.sk-spinner-chasing-dots .sk-dot1,
.sk-spinner-chasing-dots .sk-dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #1c84c6;
  border-radius: 100%;
  -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  animation: sk-chasingDotsBounce 2s infinite ease-in-out;
}

.sk-spinner-chasing-dots .sk-dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-three-bounce">
 *      <div class="sk-bounce1"></div>
 *      <div class="sk-bounce2"></div>
 *      <div class="sk-bounce3"></div>
 *    </div>
 *
 */
.sk-spinner-three-bounce.sk-spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}

.sk-spinner-three-bounce div {
  width: 18px;
  height: 18px;
  background-color: #1c84c6;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.sk-spinner-three-bounce .sk-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.sk-spinner-three-bounce .sk-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */
.sk-spinner-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}

.sk-spinner-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-spinner-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 20%;
  background-color: #1c84c6;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.sk-spinner-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-spinner-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-spinner-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-spinner-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-spinner-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-spinner-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-spinner-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-spinner-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-spinner-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-spinner-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-spinner-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.sk-spinner-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-spinner-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-spinner-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-spinner-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-spinner-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-spinner-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-spinner-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-spinner-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-spinner-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-spinner-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-spinner-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-cube-grid">
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *    </div>
 *
 */
.sk-spinner-cube-grid {
  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */
}

.sk-spinner-cube-grid.sk-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

.sk-spinner-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #1c84c6;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-spinner-cube-grid .sk-cube:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(4) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(5) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(6) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(8) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-spinner-cube-grid .sk-cube:nth-child(9) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wordpress">
 *      <span class="sk-inner-circle"></span>
 *    </div>
 *
 */
.sk-spinner-wordpress.sk-spinner {
  background-color: #1c84c6;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: relative;
  margin: 0 auto;
  -webkit-animation: sk-innerCircle 1s linear infinite;
  animation: sk-innerCircle 1s linear infinite;
}

.sk-spinner-wordpress .sk-inner-circle {
  display: block;
  background-color: #fff;
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 8px;
  top: 5px;
  left: 5px;
}

@-webkit-keyframes sk-innerCircle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes sk-innerCircle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-fading-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */
.sk-spinner-fading-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}

.sk-spinner-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-spinner-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 18%;
  height: 18%;
  background-color: #1c84c6;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.sk-spinner-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-spinner-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-spinner-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-spinner-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-spinner-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-spinner-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-spinner-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-spinner-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-spinner-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-spinner-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-spinner-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.sk-spinner-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-spinner-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-spinner-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-spinner-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-spinner-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-spinner-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-spinner-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-spinner-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-spinner-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-spinner-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-spinner-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

.ibox-content > .sk-spinner {
  display: none;
}

.ibox-content.sk-loading {
  position: relative;
}

.ibox-content.sk-loading:after {
  content: '';
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ibox-content.sk-loading > .sk-spinner {
  display: block;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  z-index: 2000;
}

/* Capital Humano PERSONAL */
#resultado_curp h3 {
  font-size: 1.3em;
}

.nav:not(.nav-pills) .nav-link .nav-icon, .nav:not(.nav-pills) .nav-link i {
  color: unset !important;
}

#perfilesTab {
  display: flex;
  justify-content: center;
}

/* Pestaña activa de perfiles: el Bootstrap de Nifty deja todos los íconos de pestañas a media opacidad
 * (`.nav:not(.nav-pills) .nav-link i`), incluido el activo, y heredaba el color del enlace, casi igual al de los
 * inactivos. El activo va opaco y en el color de enlace, brillante en claro y en oscuro; los inactivos siguen
 * atenuados. */
#perfilesTab .nav-link.active i {
  color: var(--bs-link-color) !important;
  opacity: 1;
}

.orgchart .node .content {
  height: 81px !important;
  text-overflow: unset !important;
  white-space: initial !important;
  overflow: auto;
  overflow-wrap: break-word;
  inline-size: 130px;
}

.orgchart {
  background: var(--bs-card-bg, #fff) !important;
}

.orgchart td.left,
.orgchart td.right,
.orgchart td.top {
  border-color: var(--bs-card-bg, #fff);
}

.orgchart td > .down {
  background-color: var(--bs-card-bg, #fff);
}

.orgchart .titular .title {
  background-color: #0b509c !important;
}

.orgchart .titular .content {
  border-color: #0b509c !important;
}

.titular.circle {
  color: #0b509c !important;
}

.orgchart .subsecretaria .title {
  background-color: #36b749 !important;
}

.orgchart .subsecretaria .content {
  border-color: #36b749 !important;
}

.subsecretaria.circle {
  color: #36b749 !important;
}

.orgchart .dir-general .title {
  background-color: #2fb4e8 !important;
}

.orgchart .dir-general .content {
  border-color: #2fb4e8 !important;
}

.dir-general.circle {
  color: #2fb4e8 !important;
}

.orgchart .dir-area .title {
  background-color: #662e93 !important;
}

.orgchart .dir-area .content {
  border-color: #662e93 !important;
}

.dir-area.circle {
  color: #662e93 !important;
}

.orgchart .coordinacion .title {
  background-color: #de4759 !important;
}

.orgchart .coordinacion .content {
  border-color: #de4759 !important;
}

.coordinacion.circle {
  color: #de4759 !important;
}

.bigger-font p {
  font-size: 1.2em;
}

.form-control,
.form-select,
.input-group-text {
  border: 1px solid rgba(0, 0, 0, .30) !important;
}

.form-control.is-invalid,
.form-select.is-invalid,
.input-group-text.is-invalid {
  border-color: #df5645 !important;
}

.form-text {
  color: #6c757d !important;
}

.foto-xs {
  height: 2.25rem;
  width: 2.25rem;
  object-fit: cover;
}

.foto-sm {
  height: 4rem;
  width: 4rem;
  object-fit: cover;
}

.foto-md {
  /* similar a fluid, pero, que no se desfigure la imagen, como la propiedad cover, ya que debe tener ancho y alto definidos */
  height: 8rem;
  width: 8rem;
  object-fit: cover;
}

.foto-lg {
  height: 6rem;
  width: 6rem;
  object-fit: cover;
}

.foto-xl {
  height: 8rem;
  width: 8rem;
  object-fit: cover;
}

.foto-xxl {
  height: 10rem;
  width: 10rem;
  object-fit: cover;
}

legend {
  font-size: 1.2rem !important;
}

.table {
  width: 100% !important;
}

/* MODO OSCURO
 * Librerías sin modo oscuro propio y utilidades de Bootstrap fijas en claro. Todo va acotado a
 * [data-bs-theme=dark] para no tocar el modo claro. */

/* Bootstrap: bg-light y table-light son siempre claros; en oscuro, superficie terciaria.
 * Los badges bg-light text-dark se quedan claros a propósito (se leen igual). */
[data-bs-theme=dark] .bg-light:not(.badge) {
  background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme=dark] .table-light {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-secondary-bg);
  --bs-table-hover-bg: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Paleta de Nifty con tonos claros fijos, usada como celdas de etiqueta (detalle de asuntos en oficialía). */
[data-bs-theme=dark] .bg-gray-500 {
  background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme=dark] .bg-blue-100 {
  background-color: rgba(var(--bs-info-rgb), 0.2) !important;
}

/* btn-dark / border-dark: casi negros, en oscuro se pierden contra el fondo. En oscuro pasan a un gris medio. */
[data-bs-theme=dark] .btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
}

[data-bs-theme=dark] .border-dark {
  border-color: #6c757d !important;
}

/* Select2 (tema default) */
[data-bs-theme=dark] .select2-container--default .select2-selection--single,
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple,
[data-bs-theme=dark] .select2-dropdown,
[data-bs-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme=dark] .select2-container--default .select2-search--inline .select2-search__field {
  color: var(--bs-body-color);
}

[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}

[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice,
[data-bs-theme=dark] .select2-container--default .select2-results__option--selected,
[data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme=dark] .select2-container--default.select2-container--disabled .select2-selection--single,
[data-bs-theme=dark] .select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--bs-secondary-bg);
}

/* FullCalendar */
[data-bs-theme=dark] .fc {
  --fc-page-bg-color: var(--bs-component-bg);
  --fc-neutral-bg-color: var(--bs-tertiary-bg);
  --fc-list-event-hover-bg-color: var(--bs-tertiary-bg);
  --fc-today-bg-color: rgba(var(--bs-primary-rgb), 0.15);
  --fc-border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .fc .fc-col-header-cell-cushion,
[data-bs-theme=dark] .fc .fc-daygrid-day-number,
[data-bs-theme=dark] .fc .fc-list-day-text,
[data-bs-theme=dark] .fc .fc-list-day-side-text {
  color: var(--bs-body-color);
}

/* mc-datepicker: sus textos vienen fijos en negro */
[data-bs-theme=dark] .mc-calendar {
  --mc-active-text-color: var(--bs-body-color) !important;
  --mc-inactive-text-color: var(--bs-secondary-color) !important;
  --mc-picker-foreground: var(--bs-body-color) !important;
  --mc-picker-header-inactive: var(--bs-secondary-color) !important;
  --mc-date-inactive-today-foreground: var(--bs-secondary-color) !important;
  --mc-date-inactive-today-background: var(--bs-tertiary-bg) !important;
  --mc-date-active-today-background: var(--bs-tertiary-bg) !important;
  --mc-prev-active-pick-background: var(--bs-tertiary-bg) !important;
  --mc-prev-inactive-def-foreground: var(--bs-secondary-color) !important;
  --mc-prev-inactive-pick-foreground: var(--bs-secondary-color) !important;
  --mc-prev-inactive-pick-background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme=dark] .mc-btn#mc-btn__cancel {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}


/* Editor de avisos (kothing): es la vista previa de un correo, que siempre se lee en fondo blanco; se queda en
 * claro. Sin esto hereda el texto claro del modo oscuro y sus botones quedan en blanco sobre blanco. */
[data-bs-theme=dark] .kothing-editor {
  color: #333;
  color-scheme: light;
}