@media (max-width: 768px) {
  /* Hide the third column on screens smaller than 768px */
  table td:nth-child(3),
  table th:nth-child(3) {
      display: none;
  }
}
body {
  overflow: auto; /* This handles the scrollbar automatically on resize */
}
.header {
  position: sticky;
  top: 0;
}
.wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
    flex: 1;
    padding: 10px;
    transition: margin-right 0.3s;
}

.sidebar {
    width: 300px;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    transition: transform 0.3s;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
}

.sidebar.collapsed {
    transform: translateX(100%);
}

.toggle-btn {
    position: fixed;
    right: 310px;
    top: 20px;
    z-index: 1000;
    transition: right 0.3s;
}

.toggle-btn.collapsed {
    right: 20px;
}

.nav-link {
    color: #4b5563;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s;
}

.nav-link:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.nav-link.active {
    background: #e5e7eb;
    color: #1f2937;
    font-weight: 500;
}

.sidebar-header {
    border-bottom: 1px solid #e5e7eb;
}

.notification-badge {
    background: #ef4444;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
}

.user-status {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
    }
    .toggle-btn {
        right: 20px;
    }
}
.form-label.required::after {
    content: "*";
    color: red;
    margin-left: 0.25rem; /* Optional: Add some space */
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: grayligth;
    opacity: 1; /* Firefox */
}
.search-container {
    position: relative;
}

.search-input {
    height: 50px;
    border-radius: 30px;
    padding-left: 35px;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #888;
}

.gradient-custom-2 {
    /* fallback for old browsers */
    background: #fccb90;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #c5c5c5, #949494, #5f5f5f, #202020);
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #c5c5c5, #949494, #5f5f5f, #202020);
    }
    
    @media (min-width: 768px) {
    .gradient-form {
    height: 100vh !important;
    }
    }
    @media (min-width: 769px) {
    .gradient-custom-2 {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    }
    }
.navbar-light .navbar-nav .nav-link {
    color: #000;
}
.btn {
    padding: .55rem 1.5rem .45rem;
  }

.alert-outline-primary {
    background-color: transparent;
    border-color: var(--bs-primary); /* Uses Bootstrap's primary color variable */
    color: var(--bs-primary);
  }

  /* customize button PURPLE */
.alert-outline-purple {
  color: #6f42c1; /* Tomato color for text */
  border-color: #6f42c1; /* Tomato color for border */
}

.alert-outline-purple:hover {
  background-color: #6f42c1; /* Tomato background on hover */
  border-color: #6f42c1;
  color: #fff; /* White text on hover */

}

.nav-link-purple {
  color: #000;
}

.alert-outline-purple:active,
.alert-outline-purple.active {
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: #fff;
}

.alert-outline-purple:focus {
  box-shadow: 0 0 0 0.25rem rgba(128, 0, 128, 0.5); /* Custom focus ring */
}

/* _____________________________________________ */
  .alert-outline-success {
    background-color: transparent;
    border-color: var(--bs-success); /* Uses Bootstrap's green color variable */
    color: var(--bs-success);
  }

  .alert-outline-warning {
    background-color: transparent;
    border-color: var(--bs-warning); /* Uses Bootstrap's yellow color variable */
    color: var(--bs-warning);
  }

  .alert-outline-danger {
    background-color: transparent;
    border-color: var(--bs-danger); /* Uses Bootstrap's red color variable */
    color: var(--bs-danger);
  }
  .alert-outline-dark {
    background-color: transparent;
    border-color: var(--bs-dark); /* Uses Bootstrap's gray dark color variable */
    color: var(--bs-dark);
  }

   .bg-gray {
    background-color: #e2e3e5; /* gray table.row */
  }

  .back-link {
    display: inline-block;
    padding: 8px 12px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .back-link:hover {
    background-color: #0056b3;
  }
  
  .back-link:active {
    background-color: #004080;
  }
  
  .back-link:focus {
    outline: 2px solid #80bdff;
    outline-offset: 2px;
  }
  
  .pages-summ {
    font-size: .8em;
    font-weight: lighter;
    line-height: 15px;
  }

  .text-justify {
    text-align: justify;
  }

  .btn-size {
    padding: 0.25rem 0.5rem; /* Example: even smaller padding */
    font-size: 0.85rem; /* Example: even smaller font size */
  }
  /* customize button outline.css */
  /* Color source */
  /* https://getbootstrap.com/docs/5.0/customize/css-variables/ */

/* customize button ORANGE */  
.btn-outline-orange {
  color: #ff6347; /* Tomato color for text */
  border-color: #ff6347; /* Tomato color for border */
}

.btn-outline-orange:hover {
  background-color: #ff6347; /* Tomato background on hover */
  border-color: #ff6347;
  color: #fff; /* White text on hover */

}

.btn-outline-orange:active,
.btn-outline-orange.active {
  background-color: #ff6347;
  border-color: #ff6347;
  color: #fff;
}

.btn-outline-orange:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 99, 71, 0.5); /* Custom focus ring */
}

/* customize button PURPLE */
.btn-outline-purple {
  color: #6f42c1; /* Tomato color for text */
  border-color: #6f42c1; /* Tomato color for border */
}

.btn-outline-purple:hover {
  background-color: #6f42c1; /* Tomato background on hover */
  border-color: #6f42c1;
  color: #fff; /* White text on hover */

}

.btn-outline-purple:active,
.btn-outline-purple.active {
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: #fff;
}

.btn-outline-purple:focus {
  box-shadow: 0 0 0 0.25rem rgba(128, 0, 128, 0.5); /* Custom focus ring */
}

.bg-outline-purple {
  color: #6f42c1; /* Tomato color for text */
  border-color: #6f42c1; /* Tomato color for border */
}
/* ___________________________________________________ */
/* customize button CREAM */
.btn-outline-cream {
  color: #550c72; /* Tomato color for text */
  border-color: #fbe5c8; /* Tomato color for border */
}

.btn-outline-cream:hover {
  background-color: #fbe5c8; /* Tomato background on hover */
  border-color: #fbe5c8;
  color: #550c72; /* White text on hover */

}

.btn-outline-cream:active,
.btn-outline-cream.active {
  background-color: #fbe5c8;
  border-color: #fbe5c8;
  color: #fff;
}

.btn-outline-cream:focus {
  box-shadow: 0 0 0 0.25rem rgba(251, 229, 200, 1); /* Custom focus ring */
}

/* ___________________________________________________ */
/* customize button YELLOW */
.btn-outline-yellow {
  color: #ffc107; /* Tomato color for text */
  border-color: #ffc107; /* Tomato color for border */
}

.btn-outline-yellow:hover {
  background-color: #ffc107; /* Tomato background on hover */
  border-color: #ffc107;
  color: #fff; /* White text on hover */

}

.btn-outline-yellow:active,
.btn-outline-yellow.active {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
}

.btn-outline-yellow:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 1); /* Custom focus ring */
}

.bg-outline-yellow {
  color: #ffc107; /* Tomato color for text */
  border-color: #ffc107; /* Tomato color for border */
}
.check_resize {
  transform: scale(1.2);
}

.alert-custom-warning {
  background-color: #fffbef; /* A new orange/red color */
  border-color: #ffeab6;
  color: #000; /* White text for better contrast */
}
/* --------------------------------------------------------------------------------------------- */
/* código por probar no comprobado o no utilizado ...*/
/* --------------------------------------------------------------------------------------------- */
.top-section {
  /* Spans the top section across both columns */
  grid-column: 1 / span 2; 
  background-color: #f0f0f0;
  padding: 15px;
  border: 1px solid #ccc;
}

.bottom-left-grid {
  grid-column: 1; /* Assigns this to the first column */
  background-color: #e0e0e0;
  padding: 15px;
  border: 1px solid #ccc;
  /* Ensures content can be a grid/table independently */
  display: flex; 
  flex-direction: column;
  overflow-x: auto; /* Enable horizontal scrollbar */
  max-width: 100%;  /* Prevent extending past parent */  
}

.table_grid {
  /* width: 100%;*/
  border-collapse: collapse;
  margin-top: 10px;
  margin: 0;
  font-size: 0.8rem; /* 80% of the root font size */
  width: auto;
  min-width: 100%;
}

.table_grid, .th_grid, .td_grid {
  border: 1px solid #0000d5;
  padding: 8px;
  text-align: left;
  /*width: 25%;*/ /* Example: evenly distribute width */
  /*overflow: hidden;*/
  
}
.border-blue {
  border: 1px solid #0000ff;
  /*width: 25%;*/ /* Example: evenly distribute width */
  /*overflow: hidden;*/
}

.container_dos {
  display: grid;
  /*grid-template-columns: repeat(3, 1fr); /* Creates three columns of equal width */
  grid-template-columns: 40% 20% 40%;
  /*gap: 20px;  Optional: adds a gap between grid items */  
  gap: 15px; /* Adds space between sections */
  padding: 20px;
  /*height: 100vh; /* Optional: Makes the container take the full viewport height */
  min-width: 100%;
  width: 100vw;
}

.column {
  flex: 1; /* Makes each column grow and take up an equal share of the available space */
  padding: 15px;
  border: 1px solid #ccc;
  /* Add styling for your table/grid inside here if needed */
  display: flex;
  overflow-x: auto; /* Enable horizontal scrollbar */
  max-width: 100%;
}
.column_middle {
  flex: 1; /* Makes each column grow and take up an equal share of the available space */
  padding: 1px;
  border: 1px solid #ccc;
  /* Add styling for your table/grid inside here if needed */
  display: flex;
  overflow-x: auto; /* Enable horizontal scrollbar */
  max-width: 10%;
}

.bottom-right-grid {
  grid-column: 2; /* Assigns this to the second column */
  background-color: #d0d0d0;
  padding: 15px;
  border: 1px solid #ccc;
  /* Ensures content can be a grid/table independently */
  display: flex;
  flex-direction: column;
  overflow-x: auto; /* Enable horizontal scrollbar */
  max-width: 100%;  /* Prevent extending past parent */   
}

.container_grid {
  display: grid;
  /* Defines a single row for the top and a row for the bottom two */
  grid-template-rows: auto 1fr; 
  /* Defines two equal-width columns for the bottom row */
  grid-template-columns: 1fr 1fr; 
  gap: 15px; /* Adds space between sections */
  padding: 20px;
  height: 100vh; /* Optional: Makes the container take the full viewport height */
  /*width: auto;*/
  min-width: 100%;
  width: 90vw;
}
 /* *************************************************************** */
.container-flex {
  display: flex;
  /*width: 100%; /* Ensures the flex container spans the maximum screen width */
  justify-content: center; /* Center items along the main axis (vertical in column direction) */
  min-width: 100%;
  gap: 10px; /* Optional: adds space between columns */
  width: 95vw;
}

.column-flex {
  padding: 15px;
  border: 1px solid #ccc;
  text-align: center;
}

.left-flex, .right-flex {
  /* flex-grow: 1, flex-shrink: 1, flex-basis: auto (default) */
  flex: 1; 
  /* background-color: #add8e6; */
  overflow-x: auto; /* Enable horizontal scrollbar */  
}

.middle-flex {
  /* flex-grow: 0, flex-shrink: 0, flex-basis: auto */
  flex: 0 0 auto; /* Prevents the middle column from growing or shrinking, keeping it to content size */
  /* background-color: #90ee90;*/
  /* Optional: Prevents the content from wrapping if you want it on one line */
  /* white-space: nowrap; */
  overflow-x: auto; /* Enable horizontal scrollbar */  
}
/***********************************************************************************************************************/
.section-height { height: 200px; }
.sub-section-height { height: 100px; }
.c-flex {
  display: flex;
  /*width: 100%; /* Ensures the flex container spans the maximum screen width */
  justify-content: center; /* Center items along the main axis (vertical in column direction) */
  min-width: 100%;
  gap: 10px; /* Optional: adds space between columns */
  width: 95vw;
}