.navbar-header {
  border-bottom: 1px solid #FFBF80;
}

.navbar-brand-box {
    padding: 0 0rem;
}

.auth-full-bg {
    background-color: rgba(255, 255, 255, 0);
}

.center-logo-front {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

.center-text-front {
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:100%;
}

.modal-header {
    border-radius: 3px;
}

.modal-content {
    border-radius: 4px;
}

body[data-sidebar=dark] .menu-title {
  color: #FFBF80;
}

label.required:after{
    content: " *";
    color: #e73d4a
}

span.requerido:after{
    content: "*";
    color: #922222
}

select.requerido:after{
    content: "*";
    color: #922222
}

.width20{
    width: 20px !important;
}
.width30{
    width: 30px !important;
}
.width50{
    width: 50px !important;
}

.width70{
    width: 70px !important;
}
.width80{
    width: 80px !important;
}
.width100{
    width: 100px !important;
}
.width120{
    width: 120px !important;
}
.width140{
    width: 140px !important;
}
.width160{
    width: 160px !important;
}
.width200{
  width: 200px !important;
}
.width2p{
  width: 2% !important;
}
.width3p{
  width: 3% !important;
}
.width4p{
  width: 4% !important;
}
.width5p{
  width: 5% !important;
}
.width6p{
  width: 6% !important;
}
.width7p{
  width: 7% !important;
}
.width8p{
  width: 8% !important;
}
.width9p{
  width: 9% !important;
}
.width10p{
  width: 10% !important;
}
.width11p{
  width: 11% !important;
}
.width12p{
  width: 12% !important;
}
.width13p{
  width: 13% !important;
}
.width14p{
  width: 14% !important;
}
.width15p{
  width: 15% !important;
}
.width16p{
  width: 16% !important;
}
.width17p{
  width: 17% !important;
}
.width18p{
  width: 18% !important;
}
.width19p{
  width: 19% !important;
}
.width20p{
  width: 20% !important;
}
.width21p{
    width: 21% !important;
}
.width22p{
    width: 22% !important;
}
.width23p{
    width: 23% !important;
}
.width24p{
    width: 24% !important;
}
.width25p{
  width: 25% !important;
}
.width26p{
  width: 26% !important;
}
.width27p{
  width: 27% !important;
}
.width28p{
  width: 28% !important;
}
.width29p{
  width: 29% !important;
}
.width30p{
  width: 30% !important;
}
.width35p{
  width: 35% !important;
}
.width40p{
  width: 40% !important;
}
.width45p{
  width: 45% !important;
}
.width50p{
  width: 50% !important;
}
.width55p{
  width: 55% !important;
}
.width60p{
  width: 60% !important;
}
.width65p{
  width: 65% !important;
}
.width70p{
  width: 70% !important;
}
.width75p{
  width: 75% !important;
}
.width80p{
  width: 80% !important;
}
.width85p{
  width: 85% !important;
}
.width90p{
  width: 90% !important;
}
.width95p{
  width: 95% !important;
}
.pl-1{
  padding-left:1rem !important;
}
.pl-2{
  padding-left:2rem !important;
}
.pl-20{
  padding-left:20px !important;
}
.pl-30{
  padding-left:40px !important;
}
.pl-40{
  padding-left:40px !important;
}
.pl-50{
  padding-left:50px !important;
}
.pl-60{
  padding-left:60px !important;
}

.header-profile-thirds {
  height: 50px;
  width: 50px;
  background-color: var(--bs-tertiary-bg);
  padding: 3px;
}

.rounded-thirds {
  border-radius: 0.7rem !important;
}

.avatar-mini {
  height: 1.3rem;
  width: 1.3rem;
  margin: 10px 10px;
}

.third-active {
  background-color: #15DA0C !important;
}

.third-inactive {
  background-color: #EF1608 !important;
}

.form-check-input-third {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .5rem;
  margin-right: .5rem;
}

.form-check-inactive .form-check-input:checked {
  background-color: #EF1608;
  border-color: #EF1608;
}

.form-check-active .form-check-input:checked {
  background-color: #15DA0C;
  border-color: #15DA0C;
}

.border-inactive {
  border: var(--bs-border-width) var(--bs-border-style) #EF1608 !important;
}

.border-active {
  border: var(--bs-border-width) var(--bs-border-style) #15DA0C !important;
}

/* Ajusta el modal para que ocupe el máximo de altura disponible */
.modal-body {
  max-height: 80vh;
  overflow-y: auto;
}

/* Asegura que cada tab-pane ocupe todo el espacio disponible */
.tab-pane {
  display: none;
  height: 100%;
}

.tab-pane.active {
  display: block;
}

/* Asegura que las tarjetas dentro de las pestañas se ajusten correctamente */
.tab-pane .card {
  height: 100%;
}

/* Ajusta los formularios dentro de las pestañas para que se adapten al tamaño del modal */
.tab-pane .row {
  height: 100%;
}

.tab-pane .col-sm-3 {
  margin-bottom: 1rem;
}

.modal-fullscreen98 {
  width: 98vw;
  max-width: none;
  height: 98%;
  position: relative;
  margin: 0.5rem;
}

.table-edits input, .table-edits select {
  height: calc(1.5em + .5rem + calc(var(--bs-border-width)* 2));
}

.select2-container--default .select2-selection--single {
  height: calc(1.5em + .5rem + calc(var(--bs-border-width)* 2)); /* Altura similar a la de .form-control-sm */
  padding: 0.25rem 0.5rem;
  font-size: 0.7109375rem; /* Tamaño de fuente similar a .form-control-sm */
  line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5; /* Alineación vertical del texto */
}

.select2-container--bootstrap-5 .select2--small.select2-selection--single {
  height: calc(1.5em + .5rem + calc(var(--bs-border-width)* 2)); /* Altura similar a la de .form-control-sm */
  padding: 0.25rem 0.5rem;
  font-size: 0.7109375rem; /* Tamaño de fuente similar a .form-control-sm */
  line-height: 1.5;
}

.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__rendered {
  line-height: 1.5; /* Alineación vertical del texto */
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 25px;
}

.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option, .select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-search .select2-search__field {
  font-size: 0.7109375rem;
}

.form-label {
    margin-bottom: 0.15rem;
}

.form-control:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* CSS para la barra lateral de menus (sidebar) */
#sidebar-menu {
  padding: 10px 0 10px 0;
}

.menu-title {
  padding: 6px 10px 0px 10px!important;
}

#sidebar-menu ul li a {
  padding: .5rem 1.5rem 0.1rem 1.5rem;
}

#sidebar-menu ul li ul.sub-menu li a {
  padding: .1rem 1.5rem .1rem 3.5rem;
}

#sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
  padding: .1rem 1.5rem .1rem 4.5rem;
}

.label-required::after {
  content: ' *';
  color: red;
}

.field-required > label::after {
  content: ' *' !important;
  color: red;
}

.field-required-fs > label::after {
  content: ' *' !important;
  color: red;
}

.thumbnail-active {
  border-bottom: 2px solid #f34d4d; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.row {
  --bs-gutter-x: 10px;
}

.card {
  --bs-card-spacer-y: .75rem;
  --bs-card-spacer-x: .75rem;
  --bs-card-cap-padding-x: .75rem;  
 }

.opacity-zone {
  pointer-events: none;
  opacity: 0.5;
}

.opacity-zone-revert {
  pointer-events: auto;
  opacity: 1;
}

/* Alinear texto o números al centro */
input[type="text"].centered, 
input[type="number"].centered {
    text-align: center;
}

/* Alinear texto o números a la derecha */
input[type="text"].right, 
input[type="number"].right {
    text-align: right;
}

.horizontal-checkboxes {
  display: flex;
  gap: 10px; /* Espaciado entre los elementos */
}

.horizontal-checkboxes li {
  list-style: none; /* Opcional: elimina el estilo de lista */
}

.overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  flex-direction: column; /* Alineación en columna */
  justify-content: center;
  align-items: center;
}

.overlay-text-container {
  margin-top: 0.5rem; /* Espaciado entre logo y texto */
  font-size: 1.25rem; 
  font-weight: 400; /* Peso seminegrita */
  color: #333;
}

.overlay-image-container {
  width: 2.5rem; 
  height: auto; 
  animation: blink 1.5s infinite;
}

.modal-fixed-size {
  max-width: 800px !important; /* Ancho fijo del modal */
  height: 600px !important;    /* Alto fijo del modal */
}

.modal-fixed-size .modal-content {
  height: 75%; 
}

.modal-fixed-size .modal-body {
  overflow-y: auto; /* Permite scroll si el contenido excede el alto */
}