:root {
  --color-main: #298DC0;
  --color-main-hover: rgba(41, 141, 192, 0.8);
  --color-secondary: #2699FB;
  --color-hover: #E5DDED;
  --color-texto: #6E6E7F;
  --color-danger: #D00924;
  --color-border-btn: #7A8FA6;
  --color-background: #FCFAFC;
  --color-background-modal: #F5F5F5;
  --bs-body-color: #2C2C2C;
  --color-teal: #00897b;
  --color-teal-hover: rgba(0, 137, 123, 0.8);
  --color-green-2: #5DC18C;
  --color-red: #ee6e73;
  --color-red-hover: rgba(238, 110, 115, 0.8);
  --color-purple: #673ab7;
  --color-purple-hover: rgba(103, 58, 183, 0.8);
}

* {
  font-family: 'Poppins', sans-serif;
}

html {
  font-size: 15px;
  color: var(--color-texto);
}

body {
  font-family: 'Poppins', sans-serif !important;
  padding-right: 5px !important;
}

.ND {
  display: none;
  visibility: hidden;
}

.bold {
  font-weight: bold;
}

.select2-container .select2-selection--single {
  height: 30px !important;
}

/* Cuando el contenedor de Select2 recibe foco */
.select2-container--default .select2-selection--single:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* Para múltiples */
.select2-container--default .select2-selection--multiple:focus-visible {
  outline: 2px solid #FF5722; /* naranja */
}

/* Cambiar color de texto y fondo */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #f9f9f9;   /* fondo */
  color: #333;                 /* texto */
  border: 1px solid #4CAF50;   /* borde verde */
  border-radius: 4px;
  padding: 6px;
}

/* Cuando recibe foco */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 3px var(--color-main);
}

.vertical-header .dx-datagrid-text-content {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  height: 160px;
  display: flex;
  align-items: center;
  /* transform: rotate(180deg);  */
  white-space: nowrap;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td, .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
  vertical-align: bottom !important;
}

.dx-datagrid-content .dx-datagrid-table .dx-data-row > td {
  vertical-align: top !important;
}

#countPlantilla {
  color: var(--color-texto);
  font-size: 1.1rem;
  margin-top: 6px;
}

#editor-container .ql-editor {
  font-size: 1rem;
}

.ql-snow .ql-editor h2 {
  font-size: 1.3em !important;
}

.ql-align-center {
  text-align: center;
}

/* Nivel 1 → decimal */
ol { list-style-type: decimal; }

/* Nivel 2 → letras */
ol ol { list-style-type: lower-alpha; }

/* Nivel 3 → romanos */
ol ol ol { list-style-type: lower-roman; }

.swal2-styled.swal2-confirm {
  border: 0;
  border-radius: .25em;
  background: initial;
  background-color: var(--color-main) !important;
  color: #fff !important;
  font-size: 1em;
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(41, 141, 192, .5) !important;
}

.required_label::after {
  content: "*";
  color: var(--color-danger);
  margin-left: 5px;
}

.form-control:read-only {
  background-color: var(--bs-secondary-bg);
}

.detalle-uniforme {
  font-size: 15px !important;
}

#resultadosInventarioDetalle p {
  color: #3A3A3A;
  font-weight: 600;
}

.detalle-uniforme li {
  color: var(--color-texto) !important;
}

.flatpickr-input[readonly] {
  cursor: pointer;
  background: #FFF !important;
}

.modal-title {
  margin-bottom: 0;
  color: var(--color-main);
  font-weight: 600;

}

.dx-datagrid .dx-link {
  color: var(--color-main) !important;
}

.dx-datagrid .dx-row .dx-cell-comentarios {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* h1, h2, h3, h4 {
  font-family: 'Lora', serif !important;
} */

.form-select option {
  background-color: #F7F4F2;
  color: #272320;
}

.subtituloReporte {
  color: #61B087;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.subtituloReporte_ {
  color: #CB645F;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.subtituloReporte_apoyo {
  color: #4A7A8A;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.modal-content {
  color: #9e9e9e !important;
}

.hidden {
  display: none;
  visibility: hidden;
}

.label-detalle-guia {
  color: #212529;
}

.bg-light {
  background-color: #f8f9fa !important;
  color: #6E6E6E;
}

.mayus {
  text-transform: uppercase;
}

.border-left-decoration-blue {
  border-left: 6px solid var(--color-border-btn);
}

.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.z-depth-3 {
  -webkit-box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
  box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

.btn-Option {
  transition: all 0.6s ease;
  text-align: center;
  font-size: 18px;
}

.btn-Option:hover {
  background: #7A8FA6;
  color: #FFF;
  border: solid 1px transparent;
  -webkit-box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%) !important;
  box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%) !important;
}

.pointer {
  cursor: pointer;
}

.color-texto {
  color: var(--color-texto);
}

.color-black {
  color:var(--bs-body-color) !important;
}

.form-check-input {
  border: 1px solid var(--color-main) !important;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.color-danger {
  color: var(--color-danger) !important;
}

.badge-top-right {
  font-size: 16px;
  margin-left: 4px;
}

.bg-blue {
  background-color: var(--color-main) !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.bg-blue:hover,
.bg-blue:active {
  background-color: var(--color-main-hover) !important;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.bg-purple {
  background-color: var(--color-purple) !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.bg-purple:hover,
.bg-purple:active {
  background-color: var(--color-purple-hover) !important;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.bg-red {
  background-color: var(--color-red) !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.bg-red:hover,
.bg-red:active {
  background-color: var(--color-red-hover) !important;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.bg-teal {
  background-color: var(--color-teal) !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.bg-teal:hover,
.bg-teal:active {
  background-color: var(--color-teal-hover) !important;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.modal-content {
  border: 0 !important;
  outline: 0 !important;
}

.navbar {
  background-color: var(--color-main) !important;
  border-radius: 6px;
}

.navbar-brand {
  color: #fff !important;
}

.nav-link {
  display: block;
  color: #fff !important;
  text-decoration: none;
  background: 0 0;
  border: 0;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  border-bottom: 2px solid transparent;
}

.navbar-toggler {
  color: #fff !important;
  border: 1px solid #fff !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

.navbar-nav .nav-link.active {
  color: #fff !important;
  border-bottom: 2px solid #fff;
}

.nav-link {
  font-size: initial !important;
  padding: 6px 16px !important;
}

.navbar {
  padding: 8px 6px !important;
}

.swal2-title {
  font-size: 1.275em !important;
}

.swal2-html-container {
  font-size: 1.1em !important;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-ligup-primary {
  background-color: var(--color-main);
  color: whitesmoke;
  fill: whitesmoke;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  min-width: 130px;
}

.btn-ligup-primary:hover,
.btn-ligup-primary:active,
.btn-ligup-primary:focus {
  opacity: 90%;
  background-color: var(--color-main);
  color: whitesmoke;
  fill: whitesmoke;
}

.btn-ligup-primary:first-child:active {
  opacity: 60%;
  background-color: var(--color-main);
  color: whitesmoke;
  fill: whitesmoke;
}

.btn-ligup-secondary {
  background-color: var(--color-secondary);
  color: whitesmoke;
  fill: whitesmoke;
}

.btn-ligup-secondary:hover,
.btn-ligup-secondary:active,
.btn-ligup-secondary:focus {
  opacity: 90%;
  background-color: var(--color-secondary);
  color: whitesmoke;
  fill: whitesmoke;
}

.btn-ligup-secondary:first-child:active {
  opacity: 60%;
  background-color: var(--color-secondary);
  color: whitesmoke;
  fill: whitesmoke;
}

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

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--color-main);
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  /* box-shadow: inset 0px 1px 0px #f1f0f1; */
  box-shadow: none !important;
}

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

.color-secondary {
  color: var(--color-secondary);
}

.required {
  margin-left: 5px;
  color: var(--color-danger);
}

.center-float {
  margin: 0 auto !important;
}

h1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0px;
}

.h3,
h3 {
  font-size: 1.45rem !important;
}

.h4,
h4 {
  font-size: 1.35rem !important;
}

.btn-100 {
  width: 100%;
}

.btn-f16 {
  font-size: 1.2rem !important;
  padding: 16px 14px !important;
}

.btnGeneral {
  text-align: center;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  border: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.4s ease;
  margin-bottom: 10px;
}

.btnGeneral i {
  font-size: 18px;
}

.btnGeneral:hover {
  background: linear-gradient(135deg, #2E7D32);
  transform: translateY(-2px);
  filter: brightness(1.1);
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.btnGeneral:active {
  transform: scale(0.98);
}

.btnGeneral-2 {
  text-align: center;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--color-main), var(--color-main-hover));
  border: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.4s ease;
  margin-bottom: 10px;
}

.btnGeneral-2 i {
  font-size: 18px;
}

.btnGeneral-2:hover {
  background: linear-gradient(135deg, var(--color-main-hover));
  transform: translateY(-2px);
  filter: brightness(1.1);
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.btnGeneral-2:active {
  transform: scale(0.98);
}

#LoaderLGU {
  display: none;
  visibility: hidden;
}

.result-box {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  background: #F7F4F2;
  z-index: 1000;
  width: 94%;
  box-shadow: 0 2px 4px var(--color-main);
}

.resultado-item {
  padding: 8px;
  cursor: pointer;
}

.resultado-item:hover {
  background-color: #f0f0f0;
}

/**
 * VISTA Login
 */

.form-check-label {
  font-size: 14px;
  line-height: 16px;
}

.z-depth-2 {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.z-depth-3 {
  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

.btn-desk {
  background: var(--color-green);
  color: #FFF;
  padding: 16px 8px;
  border: 0;
  border-radius: 6px;
  width: 100%;
  font-size: 17px;
  font-weight: 500;
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
  margin-bottom: 12px;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn-desk:hover {
  background: var(--color-green-2);
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

.card-body {
  color: var(--color-texto);
}

.box-450 {
  max-width: 450px;
}

.box-formulario-login {
  border: solid 1px #ddd;
  padding: 15px 20px 15px;
  border-radius: 6px;
  margin-top: calc(40vh - 50%);
  background: #FFF;
}

.card {
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 0;
  border: 0px solid transparent;
  -webkit-box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  background: transparent;
}

.card .card-body {
  float: left;
  padding: 0;
  position: relative;
  width: 100%;
  border: 0px solid #ABABAB;
  border-radius: 6px;
}

.navbar-brand-login {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  font-family: cursive;
}

/**
 * Fin de Login
 */