:root {
  /* Color styles */
  --pagina-blanco: rgba(255, 255, 255, 1);
  --pagina-fuerte: rgba(120, 21, 15, 1);
  --pagina-principal: rgba(190, 70, 53, 1);
  --pagina-tenue: rgba(228, 117, 111, 1);
  --pagina-tenue-claro: rgba(254, 225, 229, 1);
  --aceptado-desactivado: #ABEBC6;
  --aceptado-activado: rgb(49, 185, 81);
  --aceptado-hover: rgb(30, 139, 56);
  --cancelar-desactivado: rgb(209, 134, 129);
  --cancelar-activado: rgb(223, 87, 87);
  --cancelar-hover: rgb(182, 65, 65);
  --pagina-fondo: #EEE5E5/*#F1ECEC*/;
  --pagina-gris: #b9b4b4;

  --soli-doc-aprovada: #dfeafc;
  --soli-doc-error: #f6face;
  --soli-aceptada: #def8e3;
  --soli-rechazada: #ffe1df;
  --icon-solicitudes: rgba(27, 2, 37, 0.35);

  --gris-0: #f8f8f8; /* Blanco apagado */
  --gris-1: #efefef; /* Blanco apagado */
  --gris-2: #e0e0e0; /* Gris claro */
  --gris-3: #c0c0c0; /* Gris medio */
  --gris-4: #a0a0a0; /* Gris */
  --gris-5: #808080; /* Gris neutro */
  --gris-6: #606060; /* Gris oscuro */
  --gris-7: #404040; /* Gris profundo */
  --gris-8: #202020; /* Gris intenso */
  --negro: #000000; /* Negro absoluto */
}

:root {
  font-size: 14px; /* Establecer la fuente base */
}

body {
  font-size: 14px;
}

* {
  box-sizing: border-box;
}


/*Clases de estolo de Colores*/


/* Clases para aplicar colores de fondo */
.fondo-gris-0 {
  background-color: var(--gris-0) !important;
}

.fondo-gris-1 {
  background-color: var(--gris-1) !important;
}

.fondo-gris-2 {
  background-color: var(--gris-2) !important;
}

.fondo-gris-3 {
  background-color: var(--gris-3) !important;
}

.fondo-gris-4 {
  background-color: var(--gris-4) !important;
}

.fondo-gris-5 {
  background-color: var(--gris-5) !important;
}

.fondo-gris-6 {
  background-color: var(--gris-6) !important;
}

.fondo-gris-7 {
  background-color: var(--gris-7) !important;
}

.fondo-gris-8 {
  background-color: var(--gris-8) !important;
}

.fondo-negro {
  background-color: var(--negro) !important;
}

/* Clases para aplicar colores de texto */
.texto-gris-1 {
  color: var(--gris-1) !important;
}

.texto-gris-2 {
  color: var(--gris-2) !important;
}

.texto-gris-3 {
  color: var(--gris-3) !important;
}

.texto-gris-4 {
  color: var(--gris-4) !important;
}

.texto-gris-5 {
  color: var(--gris-5) !important;
}

.texto-gris-6 {
  color: var(--gris-6) !important;
}

.texto-gris-7 {
  color: var(--gris-7) !important;
}

.texto-gris-8 {
  color: var(--gris-8) !important;
}

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

.pagina-blanco {
  background-color: var(--pagina-blanco) !important;
}

.pagina-fondo {
  background-color: var(--pagina-fondo) !important;
}

.pagina-fuerte {
  background-color: var(--pagina-fuerte) !important;
}

.pagina-principal {
  background-color: var(--pagina-principal) !important;
}

.pagina-tenue {
  background-color: var(--pagina-tenue) !important;
}

.pagina-tenue-claro {
  background-color: var(--pagina-tenue-claro) !important;
}

.pagina-fondo {
  background-color: var(--pagina-fondo);
}

.aceptado-desactivado {
  background-color: var(--aceptado-desactivado) !important;
}

.aceptado-activado {
  background-color: var(--aceptado-activado) !important;
}

.aceptado-hover {
  background-color: var(--aceptado-hover) !important;
}

.cancelar-desactivado {
  background-color: var(---cancelar-desactivado) !important;
}

.cancelar-activado {
  background-color: var(--cancelar-activado) !important;
}

.pagina-gris {
  background-color: var(--pagina-gris) !important;
}

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

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

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

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

.texto-pagina-tenue-claro {
  color: var(--pagina-tenue-claro);
}

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

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

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

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

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

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

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

.borde-pagina-blanco {
  border-color: var(--pagina-blanco) !important;
}

.borde-pagina-gris {
  border-color: var(--pagina-gris) !important;
}

.borde-pagina-fuerte {
  border-color: var(--pagina-fuerte) !important;
}

.borde-pagina-principal {
  border-color: var(--pagina-principal) !important;
}

.borde-pagina-tenue {
  border-color: var(--pagina-tenue) !important;
}

.borde-pagina-tenue-claro {
  border-color: var(--pagina-tenue-claro) !important;
}

.borde-aceptado-desactivado {
  border-color: var(--aceptado-desactivado) !important;
}

.borde-aceptado-activado {
  border-color: var(--aceptado-activado) !important;
}

.borde-aceptado-hover {
  border-color: var(--aceptado-hover) !important;
}

.borde-cancelar-desactivado {
  border-color: var(--cancelar-desactivado) !important;
}

.borde-cancelar-activado {
  border-color: var(--cancelar-activado) !important;
}

.borde-punteado {
  border: 1px dashed #000; /* Puedes ajustar el color y el grosor según tus necesidades */
}

.conte-sort {
  min-height: 0px;
}

.altura-min-conte-sort-edge{
  min-height: 3px;
}

/* Login */
.login-contenedor {  
  max-width: 500px;
  border-radius: 20px;
  border: 0.5px solid #5E5858;
}

.register-contenedor
{  
  max-width: 460px;
  border-radius: 20px;
  border: 0.5px solid #5E5858;
}
/* Componenetes */

.btn-guardar{
  width: auto; 
  font-size: medium; 
  color: #676767; 
  font-weight: 400; 
  background-color: #D5F5E2;
  border-radius: 10px;
}

.btn-aceptado {
  color: #fff;
  background-color: var(--aceptado-activado);
  border-color: var(--aceptado-activado);
  font-weight: bold;
  border-radius: 10px;
  font-size: 17px; 
}

.btn-aceptado:hover {
  color: #fff;
  background-color: var(--aceptado-hover);
  border-color: var(--aceptado-hover);
}
/*
.btn-aceptado:focus, .btn-aceptado.focus {
  box-shadow: 0 0 0 0.0rem var(--aceptado-hover);
}*/

.btn-aceptado.disabled, .btn-aceptado:disabled {
  color: #fff;
  background-color: #a7a7a7;
  border-color: #a7a7a7;
}

.btn-aceptado:not(:disabled):not(.disabled):active, .btn-aceptado:not(:disabled):not(.disabled).active,
.show > .btn-aceptado.dropdown-toggle {
  color: #fff;
  background-color: var(--aceptado-hover);
  border-color: var(--aceptado-hover);
}

.btn-cancelar {
  color: #fff;
  background-color: var(--cancelar-activado);
  border-color: var(--cancelar-activado);
  font-weight: bold;
  border-radius: 10px;
  font-size: 17px; 
}

.btn-cancelar:hover {
  color: #fff;
  background-color: var(--cancelar-hover);
  border-color: var(--cancelar-hover);
}
/*
.btn-aceptado:focus, .btn-aceptado.focus {
  box-shadow: 0 0 0 0.0rem var(--aceptado-hover);
}*/

.btn-cancelar.disabled, .btn-cancelar:disabled {
  color: #fff;
  background-color: #a7a7a7;
  border-color: #a7a7a7;
}

.btn-cancelar:not(:disabled):not(.disabled):active, .btn-cancelar:not(:disabled):not(.disabled).active,
.show > .btn-cancelar.dropdown-toggle {
  color: #fff;
  background-color: var(--cancelar-hover);
  border-color: var(--cancelar-hover);
}

/*
.btn-aceptado:not(:disabled):not(.disabled):active:focus, .btn-aceptado:not(:disabled):not(.disabled).active:focus,
.show > .btn-aceptado.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--aceptado-hover);
} */

/* btn-pagina-tenue */

.btn-pagina-tenue {
  color: #fff; 
  background-color: var(--pagina-tenue); 
  border-color: var(--pagina-tenue); 
  padding: 0.5rem 1rem;
  font-size: 1rem;
  margin: 0.5rem;
}

.btn-pagina-tenue:hover {
  /* Estilos para el estado hover (al pasar el cursor sobre el botón) */
  background-color: var(--pagina-principal);
  border-color: var(--pagina-principal);
  color: #fff; 
}

/*
.btn-pagina-tenue:focus,
.btn-pagina-tenue.focus {
  /* Estilos para el estado de enfoque (al hacer clic en el botón) 
  box-shadow: 0 0 0 0.0rem var(--pagina-tenue); 
} */

.btn-pagina-tenue:active,
.btn-pagina-tenue.active {
  /* Estilos para el estado activo (al presionar el botón) */
  background-color: var(--pagina-tenue); 
  border-color: var(--pagina-tenue); 
}

/* Estilo para el checkbox principal */
.checkbox-principal.form-check-input:checked {
  background-color: var(--pagina-principal);
  border-color: var(--pagina-fuerte);
}

/*
.checkbox-principal.form-check-input:checked:focus {
  box-shadow: 0 0 0 0.25rem var(--pagina-fuerte);
}*/

.checkbox-principal.form-check-input:checked:hover {
  background-color: var(--pagina-principal);
  border-color: var(--pagina-principal);
}

/* Estilo para el label (etiqueta) del checkbox principal */
.checkbox-principal.form-check-label {
  color: var(--pagina-fuerte);
}

.checkbox-principal.form-check-input:disabled {
  background-color: var(--pagina-principal);
  opacity: 0.65;
}

.handle {
  cursor: move;  
}

.handle2 {
  cursor: move;  
}

.handle3 {
  cursor: move;  
}

.nav .nav-link.active {
  border-color: var(--pagina-principal);
  border-left: 12px solid; 
  background-color: var(--pagina-fuerte);
}



.nav-pills-opciones .nav-link.active{  
  background-color: #F9EDEB;
  color: #676767;
  /*box-shadow: 0px 2px 1px #e1e1e1;*/

}

.confpage-ul a {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0.7rem;
}

.nopadding {
  padding: 0 !important;  
}

.nomargin {  
  margin: 0 !important;
}

.line-height-normal {
  line-height: normal; /* O el valor que desees para el line-height */
}

a {
  color: #007bff; /* Color del enlace normal */
  text-decoration: none; /* Eliminar subrayado de los enlaces */  
}

/* Clase para fuente normal */
.font-normal {
  font-weight: normal !important;
}

/* Clase para fuente en negrita */
.font-bold {
  font-weight: bold !important;
}

/* Clase para fuente semi-bold */
.font-semi-bold {
  font-weight: 600 !important;
}

/* Clase para fuente ligera */
.font-light {
  font-weight: lighter !important;
}

/* Clase para fuente más negrita */
.font-bolder {
  font-weight: bolder !important;
}

/* Clase para fuente con peso personalizado */
.font-custom-weight {
  font-weight: 700 !important; /* Cambia el valor a tu preferencia */
}

.font-xxs {
  font-size: 0.714rem; /* 10px / 14px */
}

.font-xs {
  font-size: 0.857rem; /* 12px / 14px */
}

.font-sm {
  font-size: 1rem; /* 14px / 14px */
}

.font-md {
  font-size: 1.143rem; /* 16px / 14px */
}

.font-lg {
  font-size: 1.286rem; /* 18px / 14px */
}

.font-xl {
  font-size: 1.429rem; /* 20px / 14px */
}

.font-xxl {
  font-size: 1.857rem; /* 26px / 14px */
}

.font-sl {
  font-size: 4rem; /* 26px / 14px */
}
/*
.font-xs {
  font-size: 12px;
}

.font-sm {
  font-size: 14px;
}

.font-md {
  font-size: 16px;
}

.font-lg {
  font-size: 18px;
}

.font-xl {
  font-size: 20px;
}

.font-xxl {
  font-size: 26px;
}
*/


.hidden-ready {  
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Animación de transición suave */
}

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

.opcion-digit {
  max-width: 3.5rem;
}

.elem-tipo-select {
  min-width: 6rem;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse; /* Combina los bordes de las celdas */
}

/* Estilo para las celdas en el cuerpo de la tabla */
td {    
  padding: 5px; /* Agrega relleno para separar contenido de bordes */  
  overflow: hidden; /* Ocultar el contenido que desborda */
  white-space: nowrap; /* Evitar saltos de línea */
  text-overflow: ellipsis; /* Mostrar puntos suspensivos si se corta el texto */
}

th {    
  padding: 5px; /* Agrega relleno para separar contenido de bordes */  
  overflow: hidden; /* Ocultar el contenido que desborda */
  white-space: nowrap; /* Evitar saltos de línea */
  text-overflow: ellipsis; /* Mostrar puntos suspensivos si se corta el texto */
}

.custom-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.custom-modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.form-check-inline-custom{
  display: inline-block;
}

.horizontal-scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* Estilo para la tabla */
.custom-table-se {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;  
}

/* Estilo para las celdas del encabezado de la tabla */
.custom-table-se th {  
  color: var(--negro); /* Color del texto del encabezado */
  font-weight: normal;
  padding: 3px; /* Espaciado interno en el encabezado */
  text-align: center; /* Alineación del texto en el encabezado */
  border: 1px solid; /* División vertical y borde alrededor de las celdas del encabezado */
  border-color: var(--gris-5);
  white-space: normal; 
  word-wrap: break-word;
  background-color: #acacac7c; /* Color de fondo del encabezado */
}

/* Estilo para las celdas de datos de la tabla */
.custom-table-se td {
  padding: 3px; /* Espaciado interno en las celdas de datos */  
  text-align: center; /* Alinea el texto en el centro */
  border: 1px solid; /* División vertical y borde alrededor de las celdas de datos */
  border-color: var(--gris-3);
  white-space: normal;
  word-wrap: break-word;
  word-break:break-all
}

/* Estilo para filas alternas (para un efecto de rayas) */
.custom-table-se tr:nth-child(even) {
  background-color: var(--gris-1); /* Color de fondo para filas pares */
}

/* Estilo para filas alternas (para un efecto de rayas) */
.custom-table-se tr:nth-child(odd) {
  background-color: var(--pagina-blanco); /* Color de fondo para filas pares */
}

/* Estilo para la tabla */
.custom-table-simple {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;  
}

/* Estilo para las celdas del encabezado de la tabla */
.custom-table-simple th {  
  color: var(--negro); /* Color del texto del encabezado */
  font-weight: bold;
  padding: 0.5rem 0.5rem;/* Espaciado interno en el encabezado */  
  border: 0px solid; /* División vertical y borde alrededor de las celdas del encabezado */  
  border-bottom: 2px solid;
  border-color: var(--pagina-gris);
  white-space: normal; 
  word-wrap: break-word;
  background-color: var(--pagina-blanco); /* Color de fondo del encabezado */
}

/* Estilo para las celdas de datos de la tabla */
.custom-table-simple td {
  padding: 0.5rem 0.5rem;/* Espaciado interno en las celdas de datos */    
  border: 1px solid; /* División vertical y borde alrededor de las celdas de datos */
  border-left: 0px solid;
  border-right: 0px solid;
  border-color: var(--gris-3);
  vertical-align: middle;
  white-space: normal;
  word-wrap: break-word;
}

.form-control-label {
  border: none;
  margin: 2px; 
  
}

.red-errors .errorlist li {
  color: #dc3545; /* Este es el color por defecto de 'text-danger' en Bootstrap */
}

/* Estilos para Solicitudes */
.docRevicion {
  background-color: var(--pagina-blanco); 
}

.docError {
  background-color: var(--soli-doc-error); 
}

.docAprobada {
  background-color: var(--soli-doc-aprovada);  
}

.aceptado {
  background-color: var(--soli-aceptada);  
}

.rechazado {
  background-color: var(--soli-rechazada);  
}

i.docRevicion:before {
  content: "\f251";
  color: var(--icon-solicitudes)
}

i.docError:before {
  content: "\f071";
  color: var(--icon-solicitudes)
  
}

i.docAprobada:before {
  content: "\f250";
  color: var(--icon-solicitudes)
}

i.aceptado:before {
  content: "\f05d";
  color: var(--icon-solicitudes)
}

i.rechazado:before {
  content: "\f05c";
  color: var(--icon-solicitudes)
}

.bold-legends legend {
  font-weight: bold;
  font-size: 1.143rem; /* 16px / 14px */
  margin: 0;
}
