/* =============== COLORES ===============================*/
.hoko-primary {
  color : #153b44;
}
.hoko-secondary {
  color : #2d6e7e;
}
.hoko-accent {
  color : #c6de41;
}
.hoko-dark {
  color : #071c21;
}
.hoko-gray-light {
  color : #e4e6f0;
}
.hoko-gray {
  color : #83a5ad;
}
.hoko-primary-bg{
  background-color : #153b44;
}
.hoko-secondary-bg {
  background-color : #2d6e7e;
}
.hoko-accent-bg {
  background-color : #c6de41;
}
.hoko-dark-bg {
  background-color : #071c21;
}
.hoko-gray-bg {
  background-color : #83a5ad;
}
.hoko-gray-light-bg {
  background-color : #e4e6f0;
}
.bg-accent-300 {
  background-color : #F18F01;
}
.bg-accent-100 {
  background-color : #b6ccd8;
}
.bg-accent-200 {
  background-color : #dcf1d9;
}
.bg-accent-700{
  background-color : #ffbfab;
}
.bg-accent-400 {
  background-color :#F5ECD7
}
.hoko-gradient-1 {
  background: rgb(21,59,68);
  background: linear-gradient(0deg, rgba(21,59,68,1) 0%, rgba(45,110,126,1) 35%, rgba(220,231,233,1) 100%);
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-green-home {
  background-color :#c6ffe6;
}
/* SIDEBAR ==================================================*/
.hokoSidebar {
  height: 100%; /* Altura completa */
  width: 0; /* Ancho inicial, sidebar oculta */
  position: fixed;
  z-index: 1;
  top: 0; /* Posición vertical inicial */
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: width 0.5s ease; /* Transición suave para el ancho */
  padding-top: 60px;
  color: white;
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.5);
}

/* Opcional: Ajustes para el botón cerrar si se desea */
.hokoSidebarCloseBtn {
  position: absolute;
  top: 0;
  right: 25px;
  padding: 10px;
  color: red;
  font-size: 18px;
}

.hokoSidebarCloseBtn:hover {
  color: #ee9c9c;
  text-decoration: none;
}
/*======================================================================================*/
.iniciales {
  width: 30px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  margin-right: 10px;
}
.info-socio {
  display: inline-block;
  vertical-align: middle;
}

.info-socio span {
  display: block;
}
.bttable-gray600 thead th {
  background-color: #70657b;
  color: #fff;
  font-weight: bold;
}
/* ========== INICIO ============================================*/
.card.homevta {
  background-color: #dcf1d9;
  position: relative;
}
.card.homecot {
  background-color: #ffb787;
  position: relative;
}
.card.homeped {
  background-color: #fd5732;
  position: relative;
}
.card.homebank {
  background-color: #bfebec;
  position: relative;
}
.card.home .icono {
  font-size: 50px;
  opacity: 0.2;
  position: absolute;
  right: -10px;  /* Aumenta este valor para mover el ícono más a la derecha */
  top: 60px;  /* Aumenta este valor para mover el ícono más abajo */
}
/* Barra de calor inicio ===================================*/
.gradient-bar {
  height: 20px;
  width: 300px; /* O el ancho que prefieras */
  background: linear-gradient(to right, 
    #ffff80 0%,   /* 0 - Amarillo claro */
    #ffcc00 16.7%, /* 5 - Amarillo */
    #ff9900 33.3%, /* 10 - Naranja claro */
    #ff6600 50%,   /* 15 - Naranja */
    #ff5050 66.7%, /* 20 - Rojo claro */
    #ff0000 83.3%, /* 25 - Rojo */
    #cc0000 100%); /* 30 - Rojo oscuro */
}
.card-splide {
  width: 100%;
}
#card-carousel .splide__track {
  padding: 10px 0; /* Ajusta el padding según tu diseño */
}
.card-progress {
  position: relative;
}

.card-progress .progress-bar-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px; /* Altura de la barra de progreso */
  width: 0;
  background-color: red;
}
/* TABLAS ===============================================*/
.selectedrowhoko {
  color: black;
  background-color: #c6de41;
}
/* Equipo ===============================================*/
.fill-rest {
  flex-grow: 1;
  display: flex;
}
.content-column {
  flex: 1; /* Esto hace que cada columna ocupe un espacio igual */
}
.overflow-auto {
  overflow-y: auto;
}
.custom-height {
  height: calc(80vh - 60px); 
}
.custom-height-teamuser {
  height: calc(90vh); 
}

.tuser-now-tabs {
  display: none;
}
.tuser-now-tabs.active {
  display: block;
}

.dropdown-especial {
  background-color: #f5e1a5; /* Aquí puedes cambiar el color de fondo */
}
.dropdown-especial a:hover, .dropdown-especial li:hover {
  background-color: #e7c45b; /* Aquí puedes cambiar el color de fondo al pasar el cursor */
}
.select-wrapper {
  position: relative;
}
.select-wrapper::after {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f078"; /* Código Unicode para el ícono fa-chevron-down de Font Awesome */
  position: absolute;
  top: 50%;
  right: 25px; /* Aumenta este valor para mover el ícono más a la izquierda */
  transform: translateY(-50%);
  pointer-events: none;
}
.select-wrapper select {
  -webkit-appearance: none; /* Remueve el estilo predeterminado en Chrome y Safari */
  -moz-appearance: none; /* Remueve el estilo predeterminado en Firefox */
  appearance: none; /* Remueve el estilo predeterminado en otros navegadores */
  padding-right: 40px;
}

.noborder{
  border:none;
}
.table .editcell input,.table .editcell select{
  background-color: #ffc107 !important;
}
.editcell {
  background-color: #ffc107;
}
.selected-row {
  background-color: #20c997;
}
.input-icon {
  position: relative;
}

/* Posiciona el ícono dentro del input */
.input-icon i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
}

/* Agrega padding a la derecha del input para que el texto no pase sobre el ícono */
.input-with-icon {
  padding-right: 30px;
}

#resultado {
  resize: vertical;
  min-height: 150px;
  font-size: 15px;
  line-height: 1.6;
}

/* MAPA INICIO -------------------------------------*/
.foto-marker {
  background: none !important;
  border: none !important;
}
.foto-marker-inner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(30,144,255,.13);
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-marker-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto-marker-shadow {
  width: 24px;
  height: 8px;
  background: rgba(30,144,255,0.19);
  border-radius: 12px;
  margin: 0 auto;
  position: relative;
  top: -7px;
  z-index: 1;
}

.popup-usuario-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  margin-right: 12px;
  border: 2px solid #1bc366;
  vertical-align: middle;
}
.popup-usuario-nombre {
  font-weight: 600;
  font-size: 1rem;
  color: #606060;
  margin-bottom: 2px;
  display: inline-block;
  vertical-align: middle;
}
.popup-usuario-nombre a {
  text-decoration: none;
  color: #606060;
}
.popup-usuario-nombre a:hover {
  color: #1bc366;
}
.popup-usuario-info {
  margin-top: 8px;
  margin-left: 60px;
  text-align: left;
  font-size: 0.98rem;
}
.popup-usuario-info b {
  color: #444;
}


/*=== PANELES =======================================*/
.dialog {
  display: none;
}
.ui-dialog .ui-dialog-titlebar {
  background: #4CAF50; /* Cambia el color de fondo del encabezado */
  color: white; /* Cambia el color del texto del encabezado */
  border: none;
}
.ui-dialog .ui-dialog-titlebar-close {
  color: white; /* Cambia el color del botón de cierre */
}
/*==== SWEETALERT ===================================*/
.swal2-toast-error {
    background-color: #dc3545 !important;
    color: white !important;
    border-left: 4px solid #ff0000 !important;  /* Borde izquierdo más oscuro */
}

/* Color del título y texto */
.swal2-toast-error .swal2-title,
.swal2-toast-error .swal2-html-container {
    color: white !important;
}


.swal2-container {
  z-index: 99999 !important; /* Mayor que el del modal */
}

/* Opcional: Si el fondo no se oscurece */
.swal2-backdrop-show {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
/* Contenedor del modal de Bootstrap */
.modalSwal {
  z-index: 1050 !important; /* Valor por defecto, no lo modifiques */
}

/* SweetAlert2 personalizado */
.swal2-z-index {
  z-index: 99999 !important;
}
/*======== MODALS ==============================================================*/
.modalcustomsize .modal-dialog {
  max-width: 100%;
}

.modalcustomsize .modal-content {
  height: auto; /* resetea la altura */
  display: flex;
  flex-direction: column; /* asegura que el contenido se expanda verticalmente de manera correcta */
}

.modalcustomsize .modal-body {
  flex-grow: 1; /* permite que el cuerpo del modal crezca según sea necesario */
}
/*======== MODAL CALENDARIO OPERATIVO RECETAS ==============================*/

/* Estilos para el modal más estrecho */
#modal-infocalope-viewrecetas .modal-dialog {
  max-width: 750px;
  width: auto;
  margin: 1.75rem auto;
  height: auto;
  max-height: 90vh;
}

#modal-infocalope-viewrecetas .modal-content {
  height: auto;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#modal-infocalope-viewrecetas .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Ajustes para las cards en modal más estrecho */
#infocalope-recetas-container .card {
  margin-bottom: 15px;
}

#infocalope-recetas-container .card-img {
  max-height: 250px;
  object-position: center;
}

#infocalope-recetas-container .card-title {
  font-size: 1.25rem;
}

#infocalope-recetas-container .list-group-item {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Scrollbar más discreta */
#modal-infocalope-viewrecetas .modal-body::-webkit-scrollbar {
  width: 6px;
}


/* Mejora el scroll */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}