@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('/assets/material-symbols-outlined.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Clase usada en el HTML */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  /* Variación típica para Material Symbols variable font (ajusta si tu woff2 no es variable) */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

td,
th {
  vertical-align: middle;
}

th,
nav,
.bg-login {
  background-color: rgba(25, 66, 126, 1) !important;
  color: white !important;
}

tr {
  text-align: center;
}

.per-RW {
  color: var(--bs-success);
}

.per-R {
  color: var(--bs-primary);
}

.per-N {
  color: var(--bs-danger);
}

.dis {
  background-color: var(--bs-secondary-bg) !important;
  pointer-events: none;
}


.subCell {
  height: 50px;
  display: grid;
  place-items: center;
}

.razon_social {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}

.select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  color: var(--bs-body-color) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  min-height: calc(3.5rem + calc(var(--bs-border-width)* 2)) !important;
  vertical-align: middle !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: var(--bs-link-hover-color) !important;
  color: var(--bs-body-bg) !important;
}

.select2-container--bootstrap-5 .select2-selection {
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  min-height: calc(3.5rem + calc(var(--bs-border-width)* 2)) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: var(--bs-body-color) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color) !important;
}

.input-group>.btn~.select2-container--bootstrap-5 .select2-selection,
.input-group>.dropdown-menu~.select2-container--bootstrap-5 .select2-selection,
.input-group>.input-group-text~.select2-container--bootstrap-5 .select2-selection {
  display: flex;
  align-items: center;
}

.print {
  background-color: rgb(66, 13, 87) !important;
  border-color: rgb(55, 13, 71) !important;
}

.print:hover {
  background-color: rgb(55, 13, 71) !important;
  border-color: rgb(66, 13, 87) !important;
}

.modal-title {
  font-size: 1.8rem !important;
}

[data-bs-theme=dark] .carousel-control-prev-icon,
[data-bs-theme=dark] .carousel-control-next-icon {
  filter: none !important;
}

[data-bs-theme=light] .carousel-control-prev-icon,
[data-bs-theme=light] .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
  ;
}

.carousel-indicators [data-bs-target] {
  background-color: rgba(25, 66, 126, 1) !important;
}

.modal-xxl {
  --bs-modal-width: 1500px !important;
}

.container-xl {
  max-width: 1400px !important;
}

.container-xxl {
  max-width: 2000px !important;
  width: 100% !important;
}

.carousel-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bg-yellow {
  background-color: var(--bs-warning-bg-subtle) !important;
  color: var(--bs-warning-text-emphasis) !important;
  border: solid 1px var(--bs-warning-text-emphasis) !important;
}

.bg-green {
  background-color: var(--bs-success-bg-subtle) !important;
  color: var(--bs-success-text-emphasis) !important;
  border: solid 1px var(--bs-success-text-emphasis) !important;
}

.bg-blue {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
  border: solid 1px var(--bs-primary-text-emphasis) !important;
}

.bg-sky {
  background-color: var(--bs-info-bg-subtle) !important;
  color: var(--bs-info-text-emphasis) !important;
  border: solid 1px var(--bs-info-text-emphasis) !important;
}

.bg-sky:hover {
  background-color: rgb(13, 38, 71) !important;
  border: solid 1px rgb(36, 63, 136) !important;
}

.bg-gray {
  background-color: var(--bs-secondary-bg-subtle) !important;
  color: var(--bs-secondary-text-emphasis) !important;
  border: solid 1px var(--bs-secondary-text-emphasis) !important;
}

.bg-orange {
  background-color: #e0751c !important;
  color: #fae3b1 !important;
  border: solid 1px #fae3b1 !important;
}

.bg-red {
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
  border: solid 1px var(--bs-danger-text-emphasis) !important;
}

.bg-red:hover {
  background-color: rgb(71, 13, 13) !important;
  border: solid 1px rgb(136, 36, 36) !important;
}

.bg-violet {
  background-color: rgb(55, 13, 71) !important;
  color: rgb(183, 120, 247) !important;
  border: solid 1px rgb(183, 120, 247) !important;
}

.bg-violet:hover {
  background-color: rgb(86, 36, 136) !important;
  border: solid 1px rgb(114, 48, 180) !important;
}

.btn-violet {
  background-color: rgb(55, 13, 71) !important;
  color: white !important;
}

.btn-violet:hover {
  background-color: rgb(86, 36, 136) !important;
}

.loader {
  height: 50px;
  aspect-ratio: 2.5;
  --_g: no-repeat radial-gradient(farthest-side, rgba(25, 66, 126, 1) 90%, #0000);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 20% 50%;
  animation: l43 1s infinite linear;
}

@keyframes l43 {
  0% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }

  16.67% {
    background-position: calc(0*100%/3) 0, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }

  33.33% {
    background-position: calc(0*100%/3) 100%, calc(1*100%/3) 0, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }

  50% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 100%, calc(2*100%/3) 0, calc(3*100%/3) 50%
  }

  66.67% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 100%, calc(3*100%/3) 0
  }

  83.33% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 100%
  }

  100% {
    background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
  }
}

.rowAgrupado {
  height: 70px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 0.005em solid var(--bs-border-color);
  /*line-height: 65px;  */
}

/* Botón anaranjado personalizado - orange-500 */
.btn-orange {
  color: #ffffff !important;
  background-color: #f97316 !important;
  border-color: #f97316 !important;
}

.btn-orange:hover {
  color: #ffffff !important;
  background-color: #ea580c !important;
  border-color: #ea580c !important;
}

.btn-orange:focus,
.btn-orange.focus {
  color: #ffffff !important;
  background-color: #ea580c !important;
  border-color: #ea580c !important;
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.5) !important;
}

.btn-orange:active,
.btn-orange.active {
  color: #ffffff !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.btn-orange:disabled,
.btn-orange.disabled {
  color: #ffffff !important;
  background-color: #f97316 !important;
  border-color: #f97316 !important;
  opacity: 0.65;
}

/* Versión outline del botón anaranjado */
.btn-outline-orange {
  color: #f97316 !important;
  background-color: transparent !important;
  border-color: #f97316 !important;
}

.btn-outline-orange:hover {
  color: #ffffff !important;
  background-color: #f97316 !important;
  border-color: #f97316 !important;
}

.btn-outline-orange:focus,
.btn-outline-orange.focus {
  color: #ffffff !important;
  background-color: #f97316 !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.5) !important;
}

.btn-outline-orange:active,
.btn-outline-orange.active {
  color: #ffffff !important;
  background-color: #f97316 !important;
  border-color: #f97316 !important;
}

.btn-outline-orange:disabled,
.btn-outline-orange.disabled {
  color: #f97316 !important;
  background-color: transparent !important;
  border-color: #f97316 !important;
  opacity: 0.65;
}

.bg-orange {
  background-color: #f97316 !important;
  color: #ffffff !important;
  border: solid 1px #f97316 !important;
}

/* Material Symbols Font */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url('material-symbols-outlined.woff2') format('woff2');
  font-display: swap;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  user-select: none;
  opacity: 0;
  animation: fadeInIcon 0.4s ease-in-out 0.2s forwards;
  -webkit-animation: fadeInIcon 0.4s ease-in-out 0.2s forwards;
}

@keyframes fadeInIcon {
  to {
    opacity: 1;
  }
}

/* Estilos mejorados para botones */
.btn .material-symbols-outlined {
  font-size: 1.6em;
  vertical-align: middle;
  line-height: 1;
}

/* Variantes de tamaño */
.material-symbols-outlined.small {
  font-size: 18px;
}

.material-symbols-outlined.large {
  font-size: 36px;
}