:root {
  /* Primary Colors */
  --primary-dark: #082457;    /* Navy blue */
  --primary-orange: #FF7100;  /* Orange */
    
  /* Secondary Colors */
  --secondary-yellow: #ffbb00;
  --secondary-blue: #00abdc;
  --secondary-green: #47b874;
  --secondary-purple: #3b4bc9;
  --secondary-orange: #ff5200;

  /* Traffic Light Colors */
  --traffic-red: #ff1f21;
  --traffic-yellow: #ffbb00;  /* Same as secondary yellow */
  --traffic-green: #66b420;

  --navbar-height: 64px;
  --footer-height: 1px;
}

/* Add these rules at the top of your existing CSS file */
.sidebar,
.bslib-sidebar-layout .sidebar,
.sidebar.bg-white {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: none !important;
  background-color: #082457 !important;
  min-height: 100vh !important;
  width: 300px !important;
}

/* Update container rules */
.container,
.container-fluid,
.container-fluid.p-0,
.bslib-sidebar-layout,
.bslib-sidebar-layout > *,
.page-fillable,
.d-flex,
.navbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove scrollbars */
html, body {
  overflow: hidden !important;
}

.page-fillable {
  overflow-y: auto !important;  /* Allow scrolling only in content area if needed */
}

/* Add margin to navbar logo */
.navbar-brand {
  height: var(--navbar-height) !important;
  padding-left: 15px !important;  /* Only left padding */
  display: flex !important;
  align-items: center !important;
}


/* Base styles */

/* I want to separate html and body styles */
html {
    margin-top: 0;
    padding: 0;
    width: 100%;
    height: 100%;  /* Resta 10% de la altura para los márgenes */
    overflow: hidden; /* Evita barras de desplazamiento */
    overflow-y: scroll;
}

body {
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita barras de desplazamiento */
    overflow-y: scroll;
}

.container {
    width: 100vw; /* Ancho completo del viewport */
    height: 56.25vw; /* Mantén la relación 16:9 (9 / 16 = 56.25%) */
    max-height: 100vh; /* Evita que exceda la altura de la pantalla */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    /* background-color: #f0f0f0; Color de fondo opcional */
    display: flex; /* Centra contenido interno */
    justify-content: center; /* Centrado horizontal */
    /* align-items: center; */ /* Centrado vertical */
}

.navbar {
  height: var(--navbar-height) !important;
  min-height: var(--navbar-height) !important;
  background-color: var(--primary-dark) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.container-fluid, .navbar-collapse {
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.navbar-nav {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-item {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.nav-link {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#qenta-logo, .navbar-brand {
  height: 100% !important;
  padding: 5px 0 !important;
}

#login_btn {
  height: var(--navbar-height) !important;
  margin: 0 !important;
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) !important;
  color: white !important;
  border-radius: 0 !important;  /* Remove rounded corners */
  padding: 0 15px !important;  /* Add some horizontal padding */
  transition: color 0.3s ease !important;
}

#login_btn:hover {
  color: var(--primary-dark) !important;  /* Dark blue on hover */
}

.navbar-header, .navbar-collapse {
  padding: 0 !important;
  margin: 0 !important;
}

.navbar .container-fluid {
  flex-wrap: nowrap !important;
}

.navbar-nav {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.nav-item {
  white-space: nowrap;
}

.nav-link {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.navbar-brand {
  margin-right: 5px !important;
}

#qenta-logo {
  height: 40px !important;
  width: auto;
}

.navbar img[src*='Logo_RC_blanco.png'] {
  height: 40px !important;
  width: auto;
}

  /* Change all navbar/sidebar breakpoints from 991.98px to 1199.98px */
  @media (max-width: 1199.98px) {
    .navbar-collapse {
      position: fixed !important;
      top: var(--navbar-height) !important;
      left: 0 !important;
      right: 0 !important;
      max-height: calc(100vh - 90px) !important;
      height: auto !important;
      overflow-y: auto !important;
      background-color: #06245C !important;
      z-index: 1030 !important;
      padding: 0 !important;
    }
    .navbar-toggler {
      display: block !important;
      padding: 0.25rem 0.75rem;
      font-size: 1.25rem;
      line-height: 1;
      background-color: transparent;
      border: 1px solid transparent;
      border-radius: 0.25rem;
      transition: box-shadow 0.15s ease-in-out;
      align-self: center;
    }
    .navbar-toggler-icon {
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      vertical-align: middle;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
    }
    .navbar-nav .nav-item {
      padding: 2px 0;
    }
    .navbar-nav .nav-link {
      font-size: 1.1rem;
      padding: 8px 15px !important;
    }
    /* Align the last option (input_dark icon) */
    .navbar-nav .nav-item:last-child {
      margin-left: 15px;
    }
    .navbar-nav .nav-item:last-child .nav-link {
      padding-left: 0 !important;
    }
  }

  /* Styles for larger screens */
  @media (min-width: 1199.98px) {
    .navbar-toggler {
      display: none !important;
    }
  }

  /* Unified styles for navbar items and login button */
  .navbar-nav .nav-item,
  #loginLogoutButton {
    height: 100%;
    display: flex;
    align-items: center;

  }

  .navbar-nav .nav-link,
  #loginLogoutButton .btn {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px !important;
    color: white !important;
    background: transparent;
    border: none;
    transition: background-color 0.3s ease;
    transition: color 0.3s ease;
    font-size: 1.25rem; /* Aumenta el tamaño de la fuente de los elementos del menú */
    font-weight: bold;  /* Opcional: Aplica un peso más fuerte al texto */
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus,
  .navbar-nav .nav-link:active,
  #loginLogoutButton .btn:hover
 #loginLogoutButton .btn:focus {
    color: #FF7100 !important; /* Color naranjo al pasar el mouse */
}
  #loginLogoutButton .btn:active {
   background-color: #FF7100;
    }

  /* Remove default button styles */
  #loginLogoutButton .btn {
    box-shadow: none !important;
    outline: none !important;
  }

  /* Transparent Footer styles */
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    background-color: rgba(6, 36, 92, 1.0);
    backdrop-filter: blur(3px);
    padding: 5px 0;
    text-align: center;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footer-logo {
    max-height: calc(var(--footer-height) - 10px);
    width: auto;
    display: block;
  }

  /* Space between panel titles and cards */
  .nav-tabs {
    margin-bottom: 0px;
  }

  /* controls the margins at the top of the cards in the calculator */
  .card {
    margin-top: 0px;
  }

  .calculator-container {
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: calc(100vh - 0px);
    display: flex;
    flex-direction: column;
  }

  .calculator-container > * {
    flex: 1;
  }

  .input-label {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
  }

  .input-label .bslib-tooltip-icon {
    font-size: 16px;
  }

/* Styles for form inputs */
.form-control {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  color: #6c757d; /* Set the default text color */
}

.form-control:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control:hover {
  border-color: #80bdff;
}

/* Style for placeholder text */
.form-control::placeholder {
  color: #6c757d;
  opacity: 1; /* Firefox */
}

/* Style for select placeholder option */
select.form-control option:first-child {
  color: #6c757d;
}

/* Style for select when no option is selected */
select.form-control:invalid,
select.form-control option:disabled:checked {
  color: #6c757d;
}

/* Style for inputs with user-entered data */
.form-control:not(:placeholder-shown),
select.form-control:valid {
  color: #6c757d;
}

/* If you need to target text inputs specifically */
input[type="text"].form-control {
  /* Add any specific styles for text inputs here */
  background-color: #f8f9fa;
  border-radius: 0.25rem;
  padding-left: 10px;
  width: calc(100% - 10px);
}

input[type="text"].form-control:first-child {
    /* Add any specific styles for text inputs here */
    color: #6c757d;
 }

/* If you need to target select inputs specifically */
select.form-control {
  /* Add any specific styles for select inputs here */
}

.font-size-controls {
    position: fixed;
    right: 20px;
    top: 60px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
}

.font-size-btn {
    margin: 0 10px 0 3px !important;  /* top right bottom left */
    width: 30px;
    height: 30px;
    font-weight: bold;
    border: none;
    background-color: var(--primary-orange) !important;
    color: white !important;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
}

/* First button (A-) dark blue */
.font-size-btn:first-child {
    background-color: var(--primary-orange) !important;
    color: white !important;
}

/* Second button (A+) orange */
.font-size-btn:last-child {
    background-color: var(--primary-orange) !important;
    color: white !important;
}

.font-size-btn:hover {
    background-color: var(--primary-dark) !important;
    color: var(--primary-orange) !important;
}

/* Add this to your existing CSS */
.page-fillable {
  margin-top: var(--navbar-height) !important;
}

.bslib-sidebar-layout {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* This ensures the toggle is visible */
/*.bslib-sidebar-layout .sidebar {
  top: var(--navbar-height) !important;
  padding: 0 !important;
}*/

/*.bslib-sidebar-layout .sidebar-content {
  padding: 0 !important;
}*/

.sidebar {
  width: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #082457 !important;
}



/* Style for additional logo */
.navbar .navbar-nav img {
    height: 40px; /* Ajusta la altura del segundo logo */
    width: auto; /* Mantén la proporción */
    margin-right: 10px; /* Espaciado entre el logo y otros elementos */
}

/* Add this to your existing rules */
.tab-pane,
div#tab-1542-7.tab-pane,
.html-fill-item.html-fill-container.bslib-gap-spacing.activ {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: none !important;
}

/* Add this to your existing rules */
div.flex-grow-1 {
  height: calc(100vh - var(--navbar-height)) !important;  /* Full height minus navbar */
  overflow-y: scroll !important;  /* Enable vertical scrolling */
  scrollbar-width: none !important;  /* Firefox */
  -ms-overflow-style: none !important;  /* IE and Edge */
  margin-top: 0 !important;  /* Remove the top margin */
}

/* Hide WebKit scrollbar */
div.flex-grow-1::-webkit-scrollbar {
  display: none !important;
}

/* Add this to your existing rules */
.btn.btn-info.action-button,
.btn.btn-primary.action-button,
.btn.btn-secondary.action-button {
  width: 100% !important;        /* Full width of container */
  margin: 20px 15px !important;  /* Match input margins exactly */
  padding: 10px 15px !important;

  /* Colors */
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) !important;
  border-radius: 0.25rem !important;

  /* Center icon and text */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;

  /* Text styles */
  color: white !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Ensure icon and text are properly aligned */
.btn.btn-info.action-button i,
.btn.btn-primary.action-button i,
.btn.btn-secondary.action-button i {
  display: inline-flex !important;
  align-items: center !important;
}


/* Update existing color references */
.navbar,
.sidebar,
.bslib-sidebar-layout .sidebar {
  background-color: var(--primary-dark) !important;
}

.btn.btn-info.action-button,
.btn.btn-primary.action-button {
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) !important;
}

/* Add hover states */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
#loginLogoutButton .btn:hover,
#loginLogoutButton .btn:focus {
  color: var(--primary-orange) !important;
}

/* For status indicators or alerts */
.status-error {
  color: var(--traffic-red);
}

.status-warning {
  color: var(--traffic-yellow);
}

.status-success {
  color: var(--traffic-green);
}

/* Add this to control the button's container */
div[style*="position: sticky"] {
  padding: 15px !important;
}

/* First, control the sticky container that holds all inputs */
div[style*="position: sticky"] > * {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Percentage indicator styles */
.percentage-indicator {
  display: block !important;              /* Changed to block for full width */
  width: calc(100% - 30px) !important;    /* Match input width */
  margin: 8px 15px !important;            /* Match input margins */
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-weight: bold !important;
  text-align: center !important;          /* Center the text */
}

/* Traffic light states based on percentage */
.percentage-exact {     /* Exactly 100% */
  background-color: var(--traffic-green) !important;
  color: white !important;
}

.percentage-under {     /* Below 100% */
  background-color: var(--traffic-yellow) !important;
  color: black !important;  /* Dark text for better contrast on yellow */
}

.percentage-over {      /* Over 100% */
  background-color: var(--traffic-red) !important;
  color: white !important;
}

span.percentage-indicator {
    font-size: 1.2rem !important;
    padding: 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px 15px !important;
    width: calc(100% - 30px) !important;
    min-height: 38px !important;
    color: white !important;
}

/* Semaphore colors */
span.percentage-indicator.percentage-under {
    background-color: #ffbb00 !important;
}

span.percentage-indicator.percentage-exact {
    background-color: #66b420 !important;
}

span.percentage-indicator.percentage-over {
    background-color: #ff1f21 !important;
}

/* Sidebar toggle button styles */
.sidebar-toggle {
    position: fixed !important;
    left: 10px !important;
    top: 100px !important;
    z-index: 1030 !important;
    background: #FF7100 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
}

/* Position when sidebar is collapsed */
.sidebar.collapsed .sidebar-toggle {
    left: 0 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Collapsed state */
.sidebar.bg-white.border-end.p-0.collapsed {
  margin-left: -300px !important;
}

/* Transition for smooth collapse/expand */
.sidebar.bg-white.border-end.p-0 {
  position: relative !important;
  transition: margin-left 0.3s ease !important;
}

/* Main columns container */
.row.g-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Production and Employment columns */
.col-12.col-lg-6 {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 0 !important;  /* Remove top margin */

    @media (min-width: 992px) {
        width: calc(50% - 0.75rem) !important;
        flex: 0 0 calc(50% - 0.75rem) !important;
    }
}

/* Metric cards container */
.row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Individual metric cards */
.col-12.col-sm-6 {
    width: 100% !important;
    padding: 0 !important;

    @media (min-width: 768px) {
        width: calc(50% - 0.25rem) !important;
        flex: 0 0 calc(50% - 0.25rem) !important;
    }
}

/* Metric card styling - MINIMAL HEIGHT */
.card.text-center.bg-info.text-white,
.card.text-center.bg-warning.text-white {
    padding: 0.5rem !important;
    min-height: 0 !important;
    height: fit-content !important;
}

/* Metric values - NO EXTRA MARGINS */
.card.text-center h2 {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Metric labels - NO EXTRA MARGINS */
.card.text-center p {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Table container specific styles */
.card-body.bslib-gap-spacing.html-fill-item.html-fill-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.5rem !important;
    min-height: 400px !important;
}

/* Table specific styles */
.position-relative {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    justify-content: center !important;
}

.reactable {
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.rt-table {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 350px !important;
}

.rt-noData {
    margin: auto !important;
    padding-top: 0 !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Card containers */
.card.h-100 {
    height: 100% !important;
    margin: 0 !important;
    border: none !important;
}

/* Remove spacing between cards and content */
.card-body {
    padding: 0 !important;
}

/* Title container - adjust spacing */
.text-center.py-2 {
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    background-color: var(--primary-dark) !important;
    width: 100% !important;
}

/* Ensure proper spacing between card sections */
.card-body {
    padding: 0.5rem !important;  /* Reduced from 1rem */
}

/* Ensure tables have proper spacing */
.position-relative {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove extra spacing between metric cards and table */
.card-body {
    padding: 1rem !important;
}

/* Remove top margin from table container */
.position-relative {
    margin-top: 0 !important;
}

/* Ensure metric cards container has no bottom margin */
.row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Ensure card bodies that contain tables have no top padding */
.card-body + .card-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Tighten up card spacing */
.card {
    margin: 0 !important;
    border: none !important;  /* Remove borders to reduce visual spacing */
}

/* Minimize padding in card bodies */
.card-body {
    padding: 0.5rem !important;  /* Reduced from 1rem */
}

/* Remove spacing between metric cards */
.row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;  /* Reduced from 1rem */
    margin: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Remove spacing between card sections */
.card-body + .card-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Compact table container */
.position-relative {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure tables are tight against their containers */
.reactable {
    margin: 0 !important;
}

/* Minimize header spacing */
.card-header {
    padding: 0.5rem !important;
    margin: 0 !important;
    border: none !important;
}

/* Keep table height consistent */
.position-relative {
    height: calc(100% - 120px) !important;  /* Adjust based on the space taken by cards above */
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure table container maintains height */
.reactable {
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Keep table header at top */
.rt-table {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Keep "No records found" message at top */
.rt-noData {
    margin-top: 0 !important;
    padding-top: 1rem !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
}

/* Full height table container */
.card-body.bslib-gap-spacing.html-fill-item.html-fill-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.5rem !important;
    min-height: 400px !important;  /* Ensure minimum height for ~7 rows */
}

/* Table container */
.position-relative {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    justify-content: center !important;  /* Center table vertically */
}

/* Table itself */
.reactable {
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;  /* Center table content */
}

/* Table content */
.rt-table {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 350px !important;  /* Minimum height for table content */
}

/* Keep "No records found" message centered */
.rt-noData {
    margin: auto !important;
    padding-top: 0 !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Metric cards section */
.card-body.bslib-gap-spacing.html-fill-item.html-fill-container:not(:has(.reactable)) {
    padding: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* Metric card styling */
.card.bslib-card.text-center.bg-info.text-white,
.card.bslib-card.text-center.bg-warning.text-white {
    padding: 0.75rem 0.75rem 1rem 0.75rem !important;
    height: auto !important;
    overflow: visible !important;
}

/* Metric card body only */
.card.bslib-card.text-center.bg-info .card-body.bslib-gap-spacing,
.card.bslib-card.text-center.bg-warning .card-body.bslib-gap-spacing {
    padding: 0 !important;
    margin: 0 !important;  /* Override the auto margins */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    height: auto !important;
    flex: none !important;  /* Override flex:1 1 auto */
}

/* Metric numbers */
.card.bslib-card.text-center.bg-info h2,
.card.bslib-card.text-center.bg-warning h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Metric labels */
.card.bslib-card.text-center.bg-info p,
.card.bslib-card.text-center.bg-warning p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Table container - restore original styles */
.card-body.bslib-gap-spacing.html-fill-item.html-fill-container:has(.reactable) {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.5rem !important;
    min-height: 400px !important;
}

/* Title container */
.text-center.py-2 {
    padding: 0.25rem 0 !important;  /* Reduced padding */
    margin: 0 !important;
    background-color: var(--primary-dark) !important;
    width: 100% !important;
}

/* Parent container of the title */
.html-fill-container > .text-center.py-2 {
    margin: -0.5rem -0.5rem 0.5rem -0.5rem !important;  /* Negative margins to extend to edges */
    width: calc(100% + 1rem) !important;  /* Compensate for parent padding */
}

/* Project title container */
.text-center.py-2 {
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    background-color: var(--primary-dark) !important;
    width: 100% !important;
}

/* Project title h3 */
.text-center.py-2 h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 26px !important;
}

/* Project title text div */
.text-center.py-2 h3 div {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Ensure the shiny output doesn't add extra space */
#calculator-titulo_resultados_ext {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Table card container */
.card-body.bslib-gap-spacing.html-fill-item.html-fill-container:has(.reactable) {
    position: relative !important;  /* For absolute positioning of button */
}

/* Download XLSX button */
.card-body:has(.reactable) .btn-download-xlsx {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    z-index: 10 !important;  /* Ensure button is above table */
    margin: 0 !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
}

/* Download XLSX button */
/* This rule is specifically for the XLSX download buttons inside the table cards. */.btn.btn-default.shiny-download-link {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    text-decoration: none !important;
}

/* Icon in download button */
.btn.btn-default.shiny-download-link i {
    font-size: 0.875rem !important;
}

/* Hover state */
.btn.btn-default.shiny-download-link:hover {
    background-color: var(--secondary-orange) !important;
    border-color: var(--secondary-orange) !important;
}

/* Main action buttons (Calcular impactos) */
.btn.btn-info.action-button,
.btn.btn-primary.action-button,
.btn.btn-secondary.action-button,
.btn.btn-default.action-button.btn-primary.btn-sm {  /* Added Generar Informe */
    width: calc(100% - 30px) !important;
    margin: 20px 15px !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Icon alignment */
.btn.btn-default.action-button.btn-primary.btn-sm span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Generar informe button container */
div[style*="position: sticky"] {
    padding: 15px !important;
}

/* Generar informe button */
div[style*="position: sticky"] .btn {
    width: calc(100% - 30px) !important;
    max-width: 300px !important;  /* Match sidebar width */
    margin: 0 auto !important;
    display: block !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Icon and text alignment */
div[style*="position: sticky"] .btn span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* PDF and DOCX buttons */
.btn-group.btn-group-sm {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.btn-group.btn-group-sm .btn {
    flex: 1 !important;
    max-width: 145px !important;  /* Half of max-width minus gap */
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
}

/* Main action buttons (Calcular impactos) */
.btn.btn-info.action-button,
.btn.btn-primary.action-button,
.btn.btn-secondary.action-button {
    width: 100% !important;
    margin: 20px 15px !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Generar informe button */
.btn.btn-info.action-button.generar-informe {
    width: 100% !important;
    margin: 20px 15px !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Rest of existing styles remain the same */

/* Main action buttons (Calcular impactos) */
.btn.btn-info.action-button,
.btn.btn-primary.action-button,
.btn.btn-secondary.action-button {
    width: 100% !important;
    margin: 20px 15px !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Generar informe button */
#calculator-generateReport {
    width: calc(100% - 30px) !important;  /* Same width as Calcular impactos */
    margin: 20px 15px !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Icon in generate report button */
#calculator-generateReport svg {
    margin-right: 4px !important;
}

/* Rest of existing styles remain the same */

/* Generar informe button */
.btn.btn-default.action-button.btn-primary.btn-sm {
    width: calc(100% - 30px) !important;
    margin: 20px 15px !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Icon and text alignment */
.btn.btn-default.action-button.btn-primary.btn-sm span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Rest of existing styles remain the same */

/* Generar informe button */
.card-header .btn.btn-default.action-button.btn-primary.btn-sm {
    width: 300px !important;  /* Match sidebar width */
    margin: 0 !important;
    padding: 10px 15px !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Download buttons container */
.card-header > div > div:last-child {
    display: flex !important;
    gap: 8px !important;
}

/* Download buttons (DOCX, PDF, HTML) */
.btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    text-decoration: none !important;
}

/* Icon in download buttons */
.btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm i {
    font-size: 0.875rem !important;
}

/* Hover state */
.btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm:hover {
    background-color: var(--secondary-orange) !important;
    border-color: var(--secondary-orange) !important;
}

/* Rest of existing styles remain the same */

/* Table download buttons (XLSX) */
.position-relative .btn.btn-default.shiny-download-link {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    z-index: 10 !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
}

/* Report download buttons (PDF, DOCX, HTML) */
.card-header .btn.btn-outline-secondary.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
    margin: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Icon in report download buttons */
.card-header .btn.btn-outline-secondary.btn-sm i {
    font-size: 0.875rem !important;
}

/* Rest of existing styles remain the same */

/* Container for report download buttons */
.card-header > div > div:last-child {
    display: flex !important;
    gap: 8px !important;
    min-width: 240px !important;  /* Ensure minimum width for all buttons */
    justify-content: flex-end !important;
}

/* Report download buttons (PDF, DOCX, HTML) */
.card-header .btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm:not([disabled]) {
    flex: 0 0 auto !important;  /* Don't shrink or grow */
    width: 70px !important;     /* Fixed width for each button */
    padding: 4px 8px !important;
    font-size: 0.875rem !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    position: relative !important;  /* Ensure proper stacking */
    z-index: 1 !important;
}

/* Disabled state for report download buttons */
.card-header .btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm[disabled] {
    flex: 0 0 auto !important;
    width: 70px !important;
    padding: 4px 8px !important;
    font-size: 0.875rem !important;
    background-color: #cccccc !important; /* Light gray */
    border-color: #cccccc !important;
    color: #666666 !important; /* Darker gray text */
    opacity: 0.6 !important; /* Faded appearance */
    cursor: not-allowed !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Icon in download buttons */
.card-header .btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm i {
    font-size: 0.875rem !important;
    margin-right: 4px !important;
}

/* Rest of existing styles remain the same */

/* Estilos para los sliders */
.sector-slider-label {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #082457 !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.slider-item {
  background: #f8f9fa !important;
  padding: 1.5rem !important;
  padding-bottom: 2.5rem !important; /* Aumentado para dar espacio al label */
  border-radius: 8px !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  margin-bottom: 1rem !important; /* Espacio entre sliders */
}

/* Estilo para el track del slider */
.irs--shiny .irs-line {
  height: 12px !important;
  background: #e9ecef !important;
  border: none !important;
  border-radius: 6px !important;
}

/* Estilo para el handle del slider */
.irs--shiny .irs-handle {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid #082457 !important;
  background-color: white !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  top: 50% !important; /* Centrar verticalmente */
  transform: translateY(-50%) !important; /* Ajuste fino del centrado */
}

/* Estilo para la barra de progreso del slider */
.irs--shiny .irs-bar {
  height: 12px !important;
  background: #082457 !important;
  border: none !important;
  border-radius: 6px !important;
}

/* Ajustar la posición del label */
.irs--shiny .irs-single {
  top: -8px !important; /* Cambiado a -8px para estar más cerca del handle */
  padding: 1px 5px !important; /* Reducir el padding para hacerlo más compacto */
  font-size: 12px !important; /* Reducir tamaño de fuente */
  line-height: 1.2 !important; /* Ajustar line-height */
  background: #082457 !important;
  border-radius: 3px !important;
}

/* Ajustar la flecha del label */
.irs--shiny .irs-single:before {
  border-top-color: #082457 !important;
  bottom: -6px !important; /* Ajustar posición de la flecha */
}

.sector-distribution-title {
  font-size: 24px !important;
  color: #082457 !important;
  font-weight: 600 !important;
}

/* Título con porcentaje para móvil */
.sector-distribution-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
}

.total-percentage-mobile {
  font-size: 14px !important;
  color: #082457 !important;
  font-weight: 500 !important;
  display: none !important; /* Oculto por defecto */
}

/* Mostrar porcentaje en móvil */
@media (max-width: 768px) {
  .total-percentage-mobile {
    display: block !important;
  }
}

/* Qenta Landing Page - Highly specific selectors */
.qenta-landing-page {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 90px); /* Account for navbar height */
  overflow-y: auto; /* Enable vertical scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.qenta-landing-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
  max-width: 1200px !important;
  margin: 0 10px !important;
  padding: 0 !important;
  overflow: hidden !important;  /* Changed from auto to hidden */
  height: 100vh !important;
  max-height: calc(100vh - var(--navbar-height)) !important;
  scrollbar-width: none !important;  /* Firefox */
  -ms-overflow-style: none !important;  /* IE and Edge */
}

/* Hide WebKit scrollbar */
.qenta-landing-wrapper::-webkit-scrollbar {
  display: none !important;
}

/* Only enable scrolling on mobile */
@media screen and (width <= 575px) {
    .qenta-landing-wrapper {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-x: hidden !important;
    }
}

.qenta-landing-text-section {
  flex: 1 !important;
}

.qenta-landing-image-section {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-right: 0 !important;  /* Reset margin */
  margin-top: 75px !important;
}

.qenta-landing-image {
  width: 100% !important;  /* Reset to 100% */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.qenta-landing-main-title {
  font-size: 32px !important;
  color: #082457 !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  margin-top: 60px !important;  /* Added top margin */
}

.qenta-landing-subtitle {
  font-size: 24px;  /* Increased from 18px */
  color: #082457;
  font-weight: bold;
  margin-bottom: 30px;
}

.qenta-landing-section-title {
  font-size: 26px;  /* Increased from 20px */
  color: #082457;
  font-weight: bold;
  margin: 25px 0 15px;
}

.qenta-landing-paragraph {
  font-size: 20px;  /* Increased from 16px */
  line-height: 1.6;
  color: #082457;
  margin-bottom: 20px;
}

/* Desktop layout - Only applies when screen is wide enough */
@media (min-width: 1199.98px) {
  .qenta-landing-wrapper {
    flex-direction: row !important;
    align-items: flex-start !important;
    margin: 0 20px !important;
  }

  .qenta-landing-text-section {
    flex: 0 0 40% !important;
  }

  .qenta-landing-image-section {
    flex: 0 0 60% !important;
  }
}

.qenta-landing-wrapper {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-x: hidden !important;
  height: 100vh !important;
  max-height: calc(100vh - var(--navbar-height)) !important;
}

@media screen and (width <= 575px) {
  .qenta-landing-wrapper {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      overflow-x: hidden !important;
  }
}

/* Navbar mobile fixes */
@media (max-width: 1199.98px) {
  .navbar-collapse {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100vh - 90px) !important;
    height: auto !important;
    overflow-y: auto !important;
    background-color: #06245C !important;
    z-index: 1030 !important; /* Ensure menu is above other content */
    padding: 0 !important;
  }

  .navbar-nav {
    width: 100% !important;
    padding: 15px 0 !important;
    margin: 0 !important;
  }

  .nav-item {
    width: 100% !important;
    padding: 8px 15px !important;
    margin: 0 !important;
  }

  .nav-link {
    color: white !important;
    padding: 12px 15px !important;
    font-size: 18px !important; /* Increased font size */
  }

  /* Ensure secondary logo and login button are visible */
  .nav-spacer {
    display: none !important;
  }

  /* Adjust spacing for the RC logo and login button */
  .navbar .nav-item img {
    height: 40px !important;
    margin: 10px 15px !important;
  }

  /* Login button specific adjustments */
  #loginLogoutButton {
    margin: 15px !important;
    width: calc(100% - 30px) !important;
  }

  #loginLogoutButton .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 50px !important; /* Full rounded corners */
    font-size: 18px !important;
    font-weight: 600 !important;
    background-color: #FF7100 !important; /* Qenta orange */
    border: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
  }

  #loginLogoutButton .btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  #loginLogoutButton .btn:hover {
    background-color: #ff8524 !important;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
  }
}

/* Calculator panel responsive layout */
@media (max-width: 1199.98px) {
  /* Container adjustments */
  .container-fluid.p-0 {
    margin-top: 90px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Flex container adjustments */
  .d-flex.flex-column.flex-lg-row.p-0 {
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* Sidebar adjustments */
  .sidebar {
    position: fixed !important;
    left: -300px !important;
    top: 90px !important;
    bottom: 0 !important;
    width: 300px !important;
    z-index: 1029 !important;
    transition: left 0.3s ease !important;
    background-color: white !important;
  }

  .sidebar.show {
    left: 0 !important;
  }

  /* Main content adjustments */
  .flex-grow-1.p-3 {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 15px !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    min-height: calc(100vh - 90px) !important;
  }

  /* Stack cards vertically */
  .row.g-4 {
    flex-direction: column !important;
    margin: 0 !important;
  }

  .col-12.col-lg-6 {
    width: 100% !important;
    margin-bottom: 1rem !important;
    padding: 0 10px !important;
  }

  /* Adjust card headers for mobile */
  .card-header .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* Make tables responsive */
  .reactable {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Toggle button styling */
  .sidebar-toggle {
    position: fixed !important;
    left: 10px !important;
    top: 100px !important;
    z-index: 1030 !important;
    background: #FF7100 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
  }

  /* Tab panel adjustments */
  .nav-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tab-content {
    padding-top: 15px !important;
  }
}

/* Ensure proper spacing when sidebar is hidden */
@media (max-width: 1199.98px) {
  .container-fluid.p-0 {
    margin-top: 90px !important;
  }

  .d-flex.flex-column.flex-lg-row.p-0 {
    margin-left: 0 !important;
  }
}

/* Scrolling fixes for both desktop and mobile */
/* Sidebar scrolling */
.sidebar {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  height: calc(100vh - 90px) !important; /* Subtract navbar height */
}

/* Main content scrolling */
.flex-grow-1.p-3 {
  padding-bottom: 80px !important; /* Significant bottom padding */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Mobile specific adjustments */
@media (max-width: 1199.98px) {
  /* Container adjustments */
  .container-fluid.p-0 {
    margin-top: 90px !important;
    width: 100% !important;
    padding: 0 !important;
    height: calc(100vh - 90px) !important;
    overflow: hidden !important;
  }

  /* Sidebar adjustments */
  .sidebar {
    position: fixed !important;
    left: -300px !important;
    top: 90px !important;
    bottom: 0 !important;
    width: 300px !important;
    z-index: 1029 !important;
    transition: left 0.3s ease !important;
    background-color: white !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar.show {
    left: 0 !important;
  }

  /* Main content adjustments */
  .flex-grow-1.p-3 {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 15px !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Rest of the mobile styles remain the same */
  .row.g-4 {
    flex-direction: column !important;
    margin: 0 !important;
  }

  .col-12.col-lg-6 {
    width: 100% !important;
    margin-bottom: 1rem !important;
    padding: 0 10px !important;
  }

  .card-header .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .reactable {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .sidebar-toggle {
    position: fixed !important;
    left: 10px !important;
    top: 100px !important;
    z-index: 1030 !important;
    background: #FF7100 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
  }

  .nav-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tab-content {
    padding-top: 15px !important;
  }
}

/* Desktop specific adjustments */
@media (min-width: 1199.98px) {
  .container-fluid.p-0 {
    height: calc(100vh - 90px) !important;
    overflow: hidden !important;
  }

  .d-flex.flex-column.flex-lg-row.p-0 {
    height: 100% !important;
  }

  .sidebar {
    height: 100% !important;
  }

  .flex-grow-1.p-3 {
    height: 100% !important;
  }
}

/* First, hide ALL default toggles */
/*.bslib-sidebar-toggle,
button[data-bs-toggle="collapse"],
button[aria-expanded] {
  display: none !important;
}*/

/* Single toggle button styles */
#sidebarToggle {
  position: fixed !important;
  z-index: 9999 !important;
  background: #FF7100 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  top: 100px !important;
  left: 290px !important;
}

/* Collapse states */
.sidebar.collapsed {
  margin-left: -300px !important;
}

/* .sidebar.collapsed ~ * #sidebarToggle {
  left: 10px !important;
  transform: rotate(180deg) !important;
} */

/* Hide any other toggle buttons */
/*.sidebar > button.sidebar-toggle {
  display: none !important;
}*/

/* Independent toggle button */
/* .independent-sidebar-toggle {
  position: fixed !important;
  left: 310px !important;
  top: 100px !important;
  z-index: 9999 !important;
  background: #FF7100 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
} */

/* Desktop styles */
@media (min-width: 1199.98px) {
  .sidebar.collapsed {
    transform: translateX(-295px) !important;
  }

  /* Hide navbar-toggler on desktop */
  /*.navbar-toggler {
    display: none !important;
  }*/
}

/* Mobile styles */
@media (max-width: 1199.98px) {
  .sidebar.bg-white.border-end.p-0 {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    height: calc(100vh - 60px) !important;
    z-index: 1030 !important;
    transition: left 0.2s ease-out !important;
  }

  .sidebar.collapsed {
    left: -295px !important;
  }

  /* Main content positioning */
  .flex-grow-1 {
    margin-left: 300px !important;
    transition: margin-left 0.2s ease-out !important;
  }

  .sidebar.collapsed ~ .flex-grow-1 {
    margin-left: 0 !important;
  }

  /* Explicitly show navbar-toggler on mobile */
  .navbar-toggler,
  button.navbar-toggler {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1031 !important; /* Higher than sidebar */
  }

  /* Reset any Bootstrap display properties */
  .navbar-expand-lg .navbar-toggler {
    display: block !important;
  }
}

/* Override any other styles that might hide the toggler */
.navbar .navbar-toggler {
  display: block !important;
}

@media (max-width: 1199.98px) {
  .navbar-expand-lg .navbar-toggler {
    display: block !important;
  }
}

/* Remove border and margin from sidebar layout */
.bslib-sidebar-layout.bslib-mb-spacing {
  margin-bottom: 0 !important;
  border: none !important;
  padding: 0 !important;
}

.bslib-sidebar-layout {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.calculator-container {
  margin-top: calc(var(--navbar-height) - 15px) !important;
  height: calc(100vh - var(--navbar-height) + 15px) !important;
  overflow: hidden;
}

.collapse-toggle {
  position: fixed !important;
  left: 5px !important;
  top: 114px !important;
  z-index: 1030 !important;
  background: #FF7100 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  cursor: pointer !important;
  transition: transform 0.2s ease-out !important;
}

/* When sidebar is collapsed */
.sidebar.collapsed ~ .collapse-toggle {
  left: 5px !important;
  transform: rotate(180deg) !important;
}

@media (max-width: 1199.98px) {
  .collapse-toggle {
    left: 5px !important; /* Keep same position as desktop */
  }

  .sidebar:not(.show) ~ .collapse-toggle {
    left: 5px !important;
  }
}

/* Update button states based on aria-expanded */
.collapse-toggle[aria-expanded="false"] {
  transform: rotate(180deg) !important;
}

.collapse-toggle[aria-expanded="true"] {
  transform: rotate(0deg) !important;
}

@media (max-width: 1199.98px) {
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.2s ease-out !important;
  }

  .sidebar.show {
    transform: translateX(0) !important;
  }

  /* Also optimize the toggle button transition */
  .collapse-toggle {
    transition: all 0.2s ease-out !important;
  }

  .collapse-toggle {
    left: 5px !important;
  }

  .sidebar.show ~ .collapse-toggle {
    left: 5px !important;
  }
}

/* Hide scrollbar but keep functionality */
.sidebar-content {
  overflow-y: auto !important;
  scrollbar-width: none !important;  /* Firefox */
  -ms-overflow-style: none !important;  /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sidebar-content::-webkit-scrollbar {
  display: none !important;
}

/* Show scrollbar only while scrolling (optional) */
.sidebar-content:hover {
  scrollbar-width: thin !important;
}

/* Ensure sidebar content takes full height */
.sidebar {
  height: 100vh !important;
  overflow: hidden !important;
}

/* Default styles (no media query) for screens 576px and up */
.nomenclatura-container {
  height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.nomenclatura-container::-webkit-scrollbar {
  display: none !important;
}

/* Show scrollbars for very small screens */
@media (max-width: 575.98px) {
  .nomenclatura-container {
    position: fixed !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 15px !important;
    overflow-y: visible !important;  /* Changed from scroll to visible */
    height: auto !important;  /* Changed from calc to auto */
  }

  /* Remove scrollbar hiding for small screens */
  .nomenclatura-container::-webkit-scrollbar,
  .nomenclatura-container {
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
  }
}


#calculator-titulo_resultados {
  margin-left: 20px;
}

/* Tab styling for mobile */
@media (max-width: 1199.98px) {
  /* Container for tabs */
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;  /* Firefox */
    -ms-overflow-style: none !important;  /* IE and Edge */
    padding: 0.5rem 0 !important;
    gap: 0.25rem !important;
  }

  /* Hide scrollbar */
  .nav-tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* Tab items */
  .nav-tabs .nav-item {
    flex: 0 0 auto !important;
    margin: 0 0.25rem !important;
  }

  /* Tab links */
  .nav-tabs .nav-link {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    min-height: 48px !important; /* Minimum touch target size */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.375rem !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    white-space: normal !important; /* Allow text to wrap if needed */
    text-align: center !important;
    line-height: 1.2 !important;
  }

  /* Active tab */
  .nav-tabs .nav-link.active {
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
    font-weight: 500 !important;
  }

  /* Hover/Focus states */
  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:focus {
    background-color: rgba(255, 113, 0, 0.1) !important;
    border-color: var(--primary-orange) !important;
    outline: none !important;
  }

  /* Add visual feedback for touch */
  .nav-tabs .nav-link:active {
    transform: scale(0.98) !important;
  }
}

/* Additional adjustments for very small screens */
@media (max-width: 576px) {
  .nav-tabs .nav-link {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* Active tab styling using primary orange background */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link[aria-selected="true"] {
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) var(--primary-orange) var(--primary-orange) !important;
  border-top-width: 2px !important;
  font-weight: bold !important;
  color: white !important;  /* Ensure text is visible against orange background */
}

/* Ensure tab content is always visible */
.nav-tabs .nav-link {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease-out !important;
  color: inherit !important;  /* Use default text color for inactive tabs */
}

/* Hover state for tabs */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  background-color: rgba(255, 113, 0, 0.1) !important;
  border-color: #e9ecef #e9ecef #dee2e6 !important;
  color: var(--primary-orange) !important;
}

/* Ensure active state persists with visible content */
.nav-tabs .nav-item .nav-link[aria-selected="true"],
.nav-tabs .nav-item.active .nav-link,
.nav-tabs .nav-link.active[aria-selected="true"] {
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) var(--primary-orange) var(--primary-orange) !important;
  color: white !important;  /* Ensure text is visible against orange background */
}

/* Adjust navbar list padding */
.navbar .navbar-nav {
    padding-left: 0 !important;   /* Remove left padding */
    margin-left: 0 !important;    /* Remove left margin */
}

/* If needed, also adjust the first nav-item specifically */
.navbar .navbar-nav .nav-item:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Hide empty nav items and remove their spacing */
.navbar .nav-item:empty,
.navbar .nav-item a:empty {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Update navbar breakpoint to 1200px */
@media (max-width: 1199.98px) {
  /* Force show hamburger button */
  .navbar-toggler {
    display: block !important;
    margin-left: 15px !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1031 !important;
    padding: 0.25rem 0.75rem !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  /* Override any Bootstrap classes that might hide the toggler */
  .navbar-expand-lg .navbar-toggler,
  .navbar .navbar-toggler {
    display: block !important;
  }

  .navbar-collapse {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    width: 270px !important;
    height: calc(100vh - var(--navbar-height)) !important;
    background-color: var(--primary-dark) !important;
    z-index: 1030 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    padding: 0 !important;
    overflow-y: auto !important;
    display: block !important;
    visibility: hidden !important;
  }

  .navbar-collapse.show {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Rest of mobile styles remain the same */
  .navbar-nav {
    width: 100% !important;
    flex-direction: column !important;
    padding: 15px 0 !important;
    margin: 0 !important;
  }

  .nav-item {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .nav-link {
    padding: 12px 20px !important;
    width: 100% !important;
    color: white !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Ensure proper stacking of navbar elements */
  .navbar > .container-fluid {
    justify-content: flex-start !important;
  }

  .navbar-brand {
    margin-right: auto !important;
  }
}

/* Hamburger icon styling */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Base navbar styles */
.navbar-toggler {
  display: none !important;
}

/* EVERYTHING below 1200px - NO EXCEPTIONS */
@media screen and (max-width: 1199.98px) {
  /* Force show hamburger button */
  .navbar-toggler,
  .navbar-expand-lg .navbar-toggler,
  .navbar .navbar-toggler,
  button.navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1031 !important;
    margin-left: 15px !important;
    padding: 0.25rem 0.75rem !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  /* Force hide expanded menu by default */
  .navbar-collapse,
  .navbar-expand-lg .navbar-collapse {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    width: 270px !important;
    height: calc(100vh - var(--navbar-height)) !important;
    background-color: var(--primary-dark) !important;
    z-index: 1030 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    padding: 0 !important;
    overflow-y: auto !important;
    display: block !important;
    visibility: hidden !important;
  }

  /* Show menu when activated */
  .navbar-collapse.show,
  .navbar-expand-lg .navbar-collapse.show {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Mobile menu styling */
  .navbar-nav {
    width: 100% !important;
    flex-direction: column !important;
    padding: 15px 0 !important;
    margin: 0 !important;
  }

  .nav-item {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .nav-link {
    padding: 12px 20px !important;
    width: 100% !important;
    color: white !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* Desktop styles - 1200px and up ONLY */
@media screen and (min-width: 1200px) {
  .navbar-toggler,
  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }

  .navbar-collapse,
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    transform: none !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  .navbar-nav {
    flex-direction: row !important;
  }
}

/* Hamburger icon styling */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* CRITICAL: Override Bootstrap's default breakpoints */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  /* Keep the working button positioning */
  .navbar > .container-fluid {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: var(--navbar-height) !important;
  }

  .navbar-brand {
    position: relative !important;
    z-index: 1032 !important;
  }

  /* Keep our working toggle button styles */
  .navbar-toggle,
  .navbar-toggle[aria-expanded="false"],
  .navbar-toggle[aria-expanded="true"] {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1031 !important;
    padding: 0.25rem 0.75rem !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    margin: 0 !important;
  }

  /* Add only the menu behavior */
  .navbar-collapse {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    width: 270px !important;
    height: calc(100vh - var(--navbar-height)) !important;
    background-color: var(--primary-dark) !important;
    z-index: 1030 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    padding: 0 !important;
    overflow-y: auto !important;
    display: block !important;
    visibility: hidden !important;
  }

  .navbar-collapse.show {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
}

/* Keep existing media query */
@media screen and (max-width: 1199.98px) {
  .navbar-toggle,
  .navbar-toggler,
  button.navbar-toggle,
  button.navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Add this new rule to ensure the hamburger button shows */
@media screen and (max-width: 1199.98px) {
  .navbar-toggle,
  .navbar-toggler,
  button.navbar-toggle,
  button.navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Adjust sidebar content height */
.sidebar-content {
  height: calc(100vh - var(--navbar-height)) !important;
  overflow-y: auto !important;
}

.sidebar-content > div {
  position: relative !important; /* Change from sticky */
  height: auto !important; /* Change from 100vh */
  min-height: min-content !important;
  overflow-y: visible !important;
  padding: 20px !important;
}

/* Ensure proper scrolling */
.sidebar {
  height: calc(100vh - var(--navbar-height)) !important;
  overflow: hidden !important;
}

/* Hide scrollbar but keep functionality */
.sidebar-content {
  scrollbar-width: none !important;  /* Firefox */
  -ms-overflow-style: none !important;  /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sidebar-content::-webkit-scrollbar {
  display: none !important;
}

/* Glossary specific styles */
.glosario-container {
  padding: 0 15px !important;
  margin-top: 4.5em !important;
  height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;  /* Firefox */
  -ms-overflow-style: none !important;  /* IE and Edge */
  padding-bottom: 2em !important; /* Added additional padding to container */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.glosario-container::-webkit-scrollbar {
  display: none !important;
}

.glosario-definition-box {
  background-color: #f9f9f9 !important;
  border: 1px solid #dedede !important;
  border-radius: 5px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.glosario-definition-box h6.glosario-blue-title {
  color: #002060 !important;
  font-weight: bold !important;
  margin-bottom: 15px !important;
}

.glosario-definition-box p {
  margin: 0 !important;
  line-height: 1.6 !important;
}

.glosario-title {
  color: #002060 !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
}

.font-size-controls {
  margin: 3em 0 30px 0 !important;
}

.font-size-btn {
  background: #002060 !important;
  color: white !important;
  border: none !important;
  padding: 5px 10px !important;
  margin-right: 10px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.font-size-btn:hover {
  background: #003090 !important;
}

#glossary-content {
  padding-bottom: 8em !important; /* Increased from 4em to 8em */
}

/* Nomenclatura card scrolling fix for mobile/tablet */
@media (max-width: 1200px) {
  #nomenclatura31, #nomenclatura54 {
    position: fixed !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem !important;
  }

  /* Title styling */
  #title31, #title54 {
    position: relative !important;
    margin-bottom: 1rem !important;
  }

  #title31 h4, #title54 h4 {
    margin-top: 0 !important;
  }

  .nomenclatura-main-card {
    margin-bottom: 1rem !important;
  }

  /* Ensure table container doesn't get cut off */
  .reactable-wrapper {
    padding-bottom: 20px !important;
  }

  /* Remove fixed heights from table */
  #nomenclatura31_table, #nomenclatura54_table {
    height: auto !important;
    max-height: none !important;
  }

  /* Ensure table rows are fully visible */
  .reactable {
    position: relative !important;
    width: 100% !important;
  }

  /* Footer card styling */
  .card-footer {
    margin-bottom: 2rem !important;
  }

  .card-footer a {
    display: block !important;
    word-wrap: break-word !important;
    white-space: normal !important;
  }
}

/* Hide footer card on desktop */
@media (min-width: 1201px) {
  .nomenclatura-footer-card {
    display: none !important;
  }
}

@media (max-width: 576px) {
  /* Ensure table doesn't take full height */
  .reactable {
    max-height: calc(100vh - 1px) !important; /* Increased space */
  }

  /* Position footer properly */
  .card-footer {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 1rem !important;
    margin-bottom: 12rem !important;  /* Large bottom margin */
    padding: 1rem !important;
    background-color: white !important;
  }

  /* Add more space at bottom of table container */
  .reactable-wrapper {
    margin-bottom: 1rem !important; /* Increased margin */
    padding-bottom: 1rem !important; /* Added padding */
  }

  /* Ensure last row is fully visible */
  .reactable-table {
    margin-bottom: 20rem !important;  /* Large bottom margin */
  }
}

/* First, let's consolidate all card-footer styles */
@media (max-width: 1200px) {
  #nomenclatura31, #nomenclatura54 {
    position: fixed !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem !important;
  }

  /* Add padding at bottom of content for visibility */
  #nomenclatura31 .card-body, #nomenclatura54 .card-body {
    padding-bottom: 8em !important;
  }
}

@media (max-width: 576px) {
  /* Ensure table doesn't take full height */
  .reactable {
    max-height: calc(100vh - 250px) !important;
  }

  /* Card footer specific styles for mobile */
  .card-footer {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 2rem !important; /* Increased margin */
    padding: 1rem !important;
    background-color: white !important;
    z-index: 1 !important; /* Ensure footer stays above table */
    width: 100% !important;
  }

  /* Add more space at bottom of table container */
  .reactable-wrapper {
    margin-bottom: 4rem !important;
    padding-bottom: 2rem !important;
  }

  /* Ensure last row is fully visible */
  .reactable-table {
    margin-bottom: 2rem !important;
  }

  /* Ensure footer link is visible and wraps properly */
  .card-footer a {
    display: block !important;
    word-wrap: break-word !important;
    white-space: normal !important;
  }
}

/* Reactable footer styling */
.reactable-footer {
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  background-color: white;
}

.reactable-footer a {
  color: #082457;
  text-decoration: none;
}

.reactable-footer a:hover {
  text-decoration: underline;
}

/* Ensure proper container sizing */
.nomenclatura-container {
  height: calc(100vh - var(--navbar-height)) !important;
  overflow-y: auto !important;
  padding: 20px !important;
}

/* Ensure table is visible */
.reactable {
  background: white !important;
  position: relative !important;
}

/* Table container styles */
.reactable-wrapper {
  margin-bottom: 4rem !important;
  padding-bottom: 2rem !important;
}

/* Table styles */
.reactable-table {
  margin-bottom: 2rem !important;
}

/* Footer styling */
.reactable-footer {
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  background-color: white;
  position: relative !important;
}

.reactable-footer a {
  color: #082457;
  text-decoration: none;
}

.reactable-footer a:hover {
  text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .reactable {
    max-height: calc(100vh - 250px) !important;
  }

  .reactable-wrapper {
    margin-bottom: 4rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Title control for nomenclatura tables */
#title31, #title54 {
  margin-bottom: 1rem !important;
  height: auto !important;
  min-height: 80px !important; /* Fixed height for title area */
}

#title31 h4, #title54 h4,
#title31 h5, #title54 h5 {
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Adjust table height calculation to account for fixed title height */
.reactable {
  height: calc(100vh - 220px) !important; /* Increased space for title */
}

/* Ensure footer visibility */
.card-footer {
  margin-top: 1rem !important;
  position: relative !important;
}

/* Base styles specific to nomenclatura footers */
#nomenclatura31 .card-footer,
#nomenclatura54 .card-footer {
  position: relative !important;
  bottom: 0 !important;
  width: 100% !important;
  padding: 1rem !important;
  background-color: white !important;
  z-index: 1 !important;
}

/* Styles for tablet and smaller desktop (576px to 1200px) */
@media (min-width: 576px) and (max-width: 1200px) {
  #nomenclatura31 .card-footer,
  #nomenclatura54 .card-footer {
    margin-top: 2rem !important;
    margin-bottom: 4rem !important;
  }
}

/* Mobile styles (below 576px) */
@media (max-width: 575.98px) {
  #nomenclatura31 .card-footer,
  #nomenclatura54 .card-footer {
    margin-top: 2rem !important;
    margin-bottom: 12rem !important;
  }
}

/* Common link styles specific to nomenclatura footers */
#nomenclatura31 .card-footer a,
#nomenclatura54 .card-footer a {
  display: block !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  text-decoration: none !important;
}

#nomenclatura31 .card-footer a:hover,
#nomenclatura54 .card-footer a:hover {
  text-decoration: underline !important;
}

/* Ensure proper height calculation for the table container */
.Reactable.ReactTable {
  height: calc(100vh - 120px) !important; /* Fix the negative calc */
  max-height: calc(100vh - 250px) !important; /* Add max-height to ensure footer visibility */
  overflow: auto !important;
}

/* Specific footer styles for nomenclatura sections */
#nomenclatura31 .card-footer,
#nomenclatura54 .card-footer {
  position: relative !important;
  bottom: 0 !important;
  width: 100% !important;
  margin-top: 2rem !important;
  padding: 1rem !important;
  background-color: white !important;
  z-index: 1 !important;
}

/* Add padding at bottom of table to ensure last rows are visible */
.reactable-wrapper {
  padding-bottom: 6rem !important;
}

/* Set dark blue color for text */
.qenta-landing-main-title,
.qenta-landing-subtitle,
.qenta-landing-section-title,
.qenta-landing-paragraph,
.card-title,
.card-text,
p,
h1, h2, h3, h4, h5, h6,
.sector-slider-label,
.sector-distribution-title,
.total-percentage-mobile,
label,
.form-label,
.control-label,
.shiny-text-output,
.shiny-html-output,
.card-header h3,
.card-header h4,
.card-body p,
.reactable-header-cell,
.selectize-dropdown-content .option,
.selectize-input .item,
.selectize-input input,
.selectize-control.single .selectize-input,
.nomenclatura-container *,
.glosario-container *,
.nomenclatura-title,
.glosario-title,
.nomenclatura-text,
.glosario-text,
.nomenclatura-item,
.glosario-item,
table td,
table th,
.table td,
.table th,
.reactable td,
.reactable th,
.datatable td,
.datatable th {
  color: #082457 !important;  /* Official dark blue color */
}

/* Exclude text that's meant to be white (e.g., on dark backgrounds or orange buttons) */
.navbar-dark .navbar-nav .nav-link,
.btn-primary,
.btn-info,
[class*="bg-dark"] *,
.sidebar *,
.btn.btn-info.action-button,
.btn.btn-primary.action-button,
.btn.btn-secondary.action-button,
#calculator-generateReport,
.btn.btn-default.action-button.btn-primary.btn-sm,
.btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm {
  color: white !important;
}

/* Calculator title styling */
#calculator-titulo_resultados_ext {
  color: white !important;  /* Make text white for contrast */
}

/* Exclude text that's meant to be white */
.navbar-dark .navbar-nav .nav-link,
.btn-primary,
.btn-info,
.sidebar *,
.btn.btn-info.action-button,
.btn.btn-primary.action-button,
.btn.btn-secondary.action-button,
#calculator-generateReport,
.btn.btn-default.action-button.btn-primary.btn-sm,
.btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm,
#calculator-titulo_resultados_ext {
  color: white !important;
}

/* Selectize dropdown styling - SEPARATE from other rules */
.selectize-dropdown {
  background: white !important;
}

.selectize-dropdown .option {
  background: white !important;
  color: #082457 !important;
}

.selectize-dropdown .active {
  background-color: rgba(255, 113, 0, 0.1) !important;
  color: #082457 !important;
}

/* Input text color fix */
.selectize-input > input {
  color: #082457 !important;
}

/* Input text visibility fix */
input[type="text"],
.form-control,
.selectize-input > input,
.selectize-input > div,
#project_title,
#investment {
  color: #082457 !important;
}

/* Keep existing selectize dropdown styling */
.selectize-dropdown {
  background: white !important;
}

.selectize-dropdown .option {
  background: white !important;
  color: #082457 !important;
}

.selectize-dropdown .active {
  background-color: rgba(255, 113, 0, 0.1) !important;
  color: #082457 !important;
}

/* Keep existing white text exclusions */
.navbar-dark .navbar-nav .nav-link,
.btn-primary,
.btn-info,
.sidebar *,
.btn.btn-info.action-button,
.btn.btn-primary.action-button,
.btn.btn-secondary.action-button,
#calculator-generateReport,
.btn.btn-default.action-button.btn-primary.btn-sm,
.btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm,
#calculator-titulo_resultados_ext {
  color: white !important;
}

/* Selectize dropdown highlighting fix */
.selectize-dropdown-content .option {
  background: white !important;
  color: #082457 !important;
}

.selectize-dropdown-content .option .highlight {
  background-color: transparent !important;
  color: var(--primary-orange) !important;
  font-weight: bold !important;
  text-decoration: underline !important;
}

.selectize-dropdown-content .active {
  background-color: rgba(255, 113, 0, 0.1) !important;
  color: #082457 !important;
}

.selectize-dropdown-content .active .highlight {
  color: var(--primary-orange) !important;
  background-color: transparent !important;
}

/* Header styling for calculator main sections */
#calculator-valor_produccion_header,
#calculator-ocupados_header {
  height: 100px !important;
  display: flex !important;
  align-items: center !important;
  background-color: #f8f9fa !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
}

/* Card header height consistency */
#calculator-valor_produccion .card-header,
#calculator-ocupados .card-header {
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
}

/* Main section headers with icons */
#calculator-valor_produccion_title,
#calculator-ocupados_title {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  background-color: #f8f9fa !important;
  padding: 15px !important;
}

/* Container height inheritance */
#calculator-ocupados_title {
  height: inherit !important;
  min-height: 0 !important;
  max-height: none !important;
}

#calculator-valor_produccion_title {
  height: auto !important;
}

/* Fixed height for main card headers */
.card-header:has(img[src="produccion5.png"]),
.card-header:has(img[src="empleo5.png"]) {
  height: 140px !important;  /* Increased height */
  background-color: white !important;
  display: flex !important;
  align-items: center !important;
}

/* Control text wrapping in headers */
.card-header:has(img[src="produccion5.png"]) h4,
.card-header:has(img[src="empleo5.png"]) h4 {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}


/* Calculator number outputs styling */
#calculator-nueva_produccion,
#calculator-pib,
#calculator-nuevo_empleo,
#calculator-empleo {
  font-family: var(--bs-body-font-family) !important;
  font-size: clamp(2rem, 3.56rem, 3.56rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: 100% !important;
  color: white !important;
}


/* Style for description text in calculator cards */
.card.bg-info .card-body p,
.card.bg-warning .card-body p {
  color: white !important;
  margin-bottom: 0 !important;
}

/* Table container base styles */
.card-body.bslib-gap-spacing.html-fill-item.html-fill-container:has(.reactable) {
    position: relative !important;
    padding: 1rem !important;
    height: auto !important;
    min-height: 400px !important;
}

/* Table wrapper */
.position-relative {
    width: 100% !important;
    height: auto !important;
    min-height: 350px !important;
}

/* Main table container */
.reactable {
    width: 100% !important;
    height: auto !important;
    min-height: 350px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 0.375rem !important;
}

/* Table header */
.rt-thead {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.rt-th {
    padding: 0.75rem !important;
    font-weight: 600 !important;
    color: #082457 !important;
}

/* Table body */
.rt-tbody {
    background: white !important;
}

.rt-tr {
    border-bottom: 1px solid #e9ecef !important;
}

.rt-td {
    padding: 0.75rem !important;
}

/* Download button */
.btn.btn-default.shiny-download-link {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    z-index: 10 !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
    border-radius: 0.25rem !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .card-body.bslib-gap-spacing.html-fill-item.html-fill-container:has(.reactable) {
        padding: 0.75rem !important;
    }

    .rt-th, .rt-td {
        padding: 0.5rem !important;
    }
}

/* Mobile-specific table adjustments */
@media (max-width: 1199.98px) {
  /* Container adjustments */
  .card-body.bslib-gap-spacing.html-fill-item.html-fill-container {
    height: auto !important;
    min-height: 0 !important;
    padding: 0.5rem !important;
    overflow: visible !important;
  }

  /* Table wrapper adjustments */
  .position-relative {
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Main table container */
  .reactable {
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Table content */
  .rt-table {
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Table body */
  .rt-tbody {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ensure proper spacing at bottom */
  .reactable-wrapper {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Additional mobile optimizations */
@media (max-width: 576px) {
  .reactable {
    margin-bottom: 1rem !important;
  }

  .rt-tbody {
    padding-bottom: 1rem !important;
  }
}


/* Keep only these specific styles */
.tab-pane[data-value="Inicio"] {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
}

.tab-pane[data-value="Inicio"] .qenta-landing-page {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
}

.tab-pane[data-value="Inicio"] .qenta-landing-wrapper {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

@media (min-width: 1199.98px) {
    .tab-pane[data-value="Inicio"] .qenta-landing-wrapper {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}

/* Reset previous landing page styles */
.tab-pane[data-value="Inicio"] {
    display: none !important; /* Hide by default */
}

/* Only show and apply styles when active */
.tab-pane[data-value="Inicio"].active {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
}

.tab-pane[data-value="Inicio"].active .qenta-landing-page {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
}

.tab-pane[data-value="Inicio"].active .qenta-landing-wrapper {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

@media (min-width: 1199.98px) {
    .tab-pane[data-value="Inicio"].active .qenta-landing-wrapper {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}

/* Add spacing for nomenclatura section headers */
.tab-pane[data-value="Nomenclatura 31"] .card-header,
.tab-pane[data-value="Nomenclatura 54"] .card-header {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
}

/* Add these rules to align tooltip text to the left */
.tooltip-inner {
  text-align: left !important;
  max-width: 300px !important;  /* Increased max-width for better readability */
  padding: 8px 12px !important;  /* Added more padding for better spacing */
}

/* Ensure tooltips on white backgrounds have dark text */
.tooltip {
  --bs-tooltip-color: #082457 !important;
  --bs-tooltip-bg: white !important;
  --bs-tooltip-opacity: 1 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border: 1px solid #082457 !important;
}

/* Ensure tooltip arrow matches background */
.tooltip .tooltip-arrow::before {
  border-right-color: #082457 !important;
}

.tooltip .tooltip-arrow::after {
  border-right-color: white !important;
  border-width: calc(var(--bs-tooltip-arrow-width) - 1px);
  margin-top: -1px;
}

/* Only for production and employment header tooltips */
.header-info-icon {
  color: #082457 !important;
  background-color: white !important;
  border-radius: 50% !important;
  padding: 2px !important;
  margin-left: 0px !important;
  font-size: 16px !important;
  position: relative !important;
  top: -5px !important;
}

.header-tooltip .tooltip {
  --bs-tooltip-color: white !important;
  --bs-tooltip-bg: #082457 !important;
  --bs-tooltip-opacity: 1 !important;
  border: none !important;
  pointer-events: auto !important;  /* Allow interaction with tooltip content */
  transition: opacity 0.3s ease-in-out !important;  /* Added transition */
}

.header-tooltip .tooltip .tooltip-inner {
  pointer-events: auto !important;  /* Ensure links are clickable */
}

.header-tooltip .tooltip .tooltip-arrow::before {
  border-right-color: #082457 !important;
}

.header-tooltip .tooltip .tooltip-arrow::after {
  display: none !important;
}

.tooltip-download-link {
  color: white !important;
  text-decoration: underline !important;
}

.tooltip-download-link:hover {
  color: #f0f0f0 !important;
}

/* Add hover delay */
.header-tooltip .tooltip:hover {
  opacity: 1 !important;
  transition-delay: 0.2s !important;  /* Added delay */
}


.qenta-landing-columns {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
  
  /* Default for mobile: stack vertically */
  grid-template-columns: 1fr;
  
  /* On larger screens (tablets and up): side by side */
  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
  }
}

/* Keep existing styles */
.qenta-landing-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 0;
}

/* First link orange */
.qenta-landing-links a:first-child {
  text-decoration: none;
  color: var(--primary-orange);
}

/* Other links dark blue */
.qenta-landing-links a:not(:first-child) {
  text-decoration: none;
  color: var(--primary-dark);
}

/* Optional: hover effects */
.qenta-landing-links a:hover {
  text-decoration: underline;
}

/* Landing page styles */
@media (max-width: 768px) {
  .qenta-landing-columns {
    flex-direction: column !important;
    gap: 3rem !important;
  }
  .qenta-landing-text-section {
    flex: 1 1 100% !important;
    order: 1;
    padding: 0 1rem;
  }
  .qenta-landing-image-section {
    flex: 1 1 100% !important;
    order: 2;
    padding: 0 1rem;
  }
}

.qenta-link {
  color: var(--primary-dark) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.qenta-link:hover {
  color: var(--primary-orange) !important;
}

/* Navbar list and items height */
.nav.navbar-nav {
  height: var(--navbar-height) !important;
  min-height: var(--navbar-height) !important;
  display: flex !important;
  align-items: center !important;
}

/* Individual nav items */
.nav.navbar-nav > li {
  height: var(--navbar-height) !important;
  display: flex !important;
  align-items: center !important;
}

/* Nav links */
.nav.navbar-nav .nav-link {
  height: var(--navbar-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 15px !important;  /* Horizontal padding for spacing */
}

/* Spacer elements */
.bslib-nav-spacer {
  height: var(--navbar-height) !important;
}

/* Logo container in navbar */
.bslib-nav-item.nav-item.form-inline {
  display: flex;
  align-items: center;
  margin: 0;
  height: var(--navbar-height) !important;
  padding: 2px 0 !important;  /* Minimal padding top/bottom */
}

/* Logo image */
.bslib-nav-item.nav-item.form-inline img {
  height: calc(var(--navbar-height) - 4px) !important;  /* Full height minus minimal padding */
  width: auto;
  margin: 0;
  object-fit: contain;
}

/* QentaCalc logo */
#qenta-logo {
  height: calc(var(--navbar-height) - 10px) !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Container fluid - add horizontal padding */
.container-fluid {
  height: 100% !important;
  padding: 0 !important;  /* 0 top/bottom, 15px left/right */
  margin: 0 !important;
}

/* Navbar brand (logo container) */
.navbar-brand {
  height: var(--navbar-height) !important;
  padding-left: 15px !important;  /* Add padding only to navbar brand */
  display: flex !important;
  align-items: center !important;
}

/* Add gap between navbar and sidebar */
.sidebar {
  margin-top: 5px !important;
}


/* Auth buttons (login/logout) */
.btn.btn-default.action-button.btn-outline-primary.me-2 {
  height: var(--navbar-height) !important;
  margin: 0 !important;
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) !important;
  color: white !important;
  border-radius: 0 !important;
  padding: 0 15px !important;
  transition: color 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: var(--navbar-height) !important;
}

/* Button content wrapper */
.btn.btn-default.action-button.btn-outline-primary.me-2 span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* Icon alignment */
.btn.btn-default.action-button.btn-outline-primary.me-2 .far {
  display: flex !important;
  align-items: top !important;
  height: 100% !important;
  font-size: 1.2em !important;
  margin-bottom: 2px !important;
  margin-left: 5px !important;  /* This provides the spacing */
}

/* Hover for both login and logout buttons */
#login_btn.btn.btn-default.action-button.btn-outline-primary.me-2:hover,
#logout_btn.btn.btn-default.action-button.btn-outline-primary.me-2:hover {
  color: var(--primary-dark) !important;
  background-color: var(--primary-orange) !important;
}

/* Hover for icons */
#login_btn.btn.btn-default.action-button.btn-outline-primary.me-2:hover .far,  /* Changed from .fa to .far */
#logout_btn.btn.btn-default.action-button.btn-outline-primary.me-2:hover .far {  /* Changed from .fa to .far */
  color: var(--primary-dark) !important;
}

/* ... existing code ... */

/* Card header responsive styles */
@media (max-width: 1199.98px) {
  .card-header .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  /* Adjust image size */
  .card-header img {
    height: 50px !important; /* Further reduced to give more space to text */
    width: auto !important;
    object-fit: contain !important;
    margin: 5px 0 !important;
  }

  /* Keep text large on mobile */
  .card-header h4.text-primary {
    font-size: 1.5rem !important; /* Larger font size */
    line-height: 1.4 !important;
    margin: 5px 0 !important;
    padding: 0 10px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
  }

  /* Adjust tooltip icon size but keep it proportional */
  .card-header .header-info-icon {
    height: 1.2em !important;
    width: 1.2em !important;
    vertical-align: -0.2em !important;
  }
}

/* Slightly smaller adjustments for very small screens */
@media (max-width: 575.98px) {
  .card-header img {
    height: 45px !important;
  }

  .card-header h4.text-primary {
    font-size: 1.35rem !important; /* Still keeping it relatively large */
  }
}

@media (max-width: 1199.98px) {
  /* Container for second logo */
  .bslib-nav-item.nav-item.form-inline {
    width: 100% !important;
    padding: 10px 15px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    background-color: var(--primary-dark) !important;
  }

  /* Second logo image */
  .bslib-nav-item.nav-item.form-inline img {
    height: 40px !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Ensure proper spacing in navbar collapse */
  .navbar-collapse .nav-item {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ... existing code ... */

/* Unified login button styles for both desktop and mobile */
#loginLogoutButton .btn,
#login_btn {
  height: var(--navbar-height) !important;
  margin: 0 !important;
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) !important;
  color: white !important;
  border-radius: 0 !important;
  padding: 0 15px !important;
  transition: color 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Button span container */
#loginLogoutButton .btn span,
#login_btn span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
}

/* Icon specific styling */
#loginLogoutButton .btn i,
#login_btn i {
  font-size: 1.25rem !important;
  margin: 0 !important;
}

/* Hover state */
#loginLogoutButton .btn:hover,
#login_btn:hover {
  color: var(--primary-dark) !important;
}

/* Mobile specific adjustments */
@media (max-width: 1199.98px) {
  #loginLogoutButton {
    width: calc(100% - 30px) !important;
    padding: 0 !important;
    margin: 15px auto !important;
  }

  #loginLogoutButton .btn,
  #login_btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 25px !important;
    padding: 0 25px !important;
    background-color: var(--primary-orange) !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Match desktop span styling for mobile */
  #loginLogoutButton .btn span,
  #login_btn span {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
  }

  #loginLogoutButton .btn i,
  #login_btn i {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin-bottom: 2px !important;
    margin-left: 5px !important;
  }

  #loginLogoutButton .btn:active,
  #login_btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }
}

/* Override Bootstrap's default navbar expansion */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }

  .navbar-expand-lg .navbar-toggler {
    display: block !important;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: column !important;
  }
}

/* Force mobile menu for everything below 1200px */
@media (max-width: 1199.98px) {
  /* Override any Bootstrap classes that might show the menu */
  .navbar-expand-lg .navbar-collapse,
  .navbar-collapse {
    display: none !important;
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    width: 270px !important;
    height: calc(100vh - var(--navbar-height)) !important;
    background-color: var(--primary-dark) !important;
    z-index: 1030 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    padding: 0 !important;
    overflow-y: auto !important;
    display: block !important;
    visibility: hidden !important;
  }

  /* Only show when explicitly toggled */
  .navbar-expand-lg .navbar-collapse.show,
  .navbar-collapse.show {
    display: block !important;
    transform: translateX(0) !important;
  }

  /* Always show the toggle button */
  .navbar-expand-lg .navbar-toggler,
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Desktop styles ONLY above 1200px */
@media (min-width: 1200px) {
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    transform: none !important;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none !important;
  }
}

/* Force consistent mobile sidebar positioning for ALL mobile breakpoints */
@media (max-width: 1199.98px) {
  .navbar-collapse,
  .navbar-expand-lg .navbar-collapse {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    height: calc(100vh - var(--navbar-height)) !important;
    background-color: var(--primary-dark) !important;
    z-index: 1030 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    padding: 0 !important;
    overflow-y: auto !important;
    display: none !important;
    margin: 0 !important; /* Reset any margins */
  }

  /* Ensure navbar items start from the top */
  .navbar-nav {
    width: 100% !important;
    flex-direction: column !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    align-items: flex-start !important; /* Force items to start from left */
  }

  /* Reset any potential item positioning */
  .nav-item {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Fix extra space before first menu item in 992-1200px range */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-nav {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .navbar-collapse .navbar-nav {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .navbar-collapse .nav-item:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Hide empty nav items and remove their spacing */
  .navbar .nav-item:empty,
  .navbar .nav-item a:empty {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Adjust spacer behavior */
  .bslib-nav-spacer {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/*
  DEFINITIVE OVERRIDE for disabled report download buttons.
  This rule is highly specific to force disabled buttons to be gray,
  overriding all other !important orange styles. It targets the `[disabled]`
  attribute which Shiny adds to the <a> tag.
*/
.card-header a.btn.btn-default.shiny-download-link.btn-outline-secondary.btn-sm[disabled] {
  background-color: #e9ecef !important; /* A light gray */
  border-color: #dee2e6 !important;     /* A slightly darker gray border */
  color: #6c757d !important;            /* Dark gray text for readability */
  pointer-events: none !important;      /* Prevent clicks */
  cursor: not-allowed !important;       /* Explicitly set cursor */
}

  cursor: not-allowed !important;       /* Explicitly set cursor */
}

/* ==========================================================================
   Report Download Buttons - Full Control Styling
   ========================================================================== */

/* Base style for the report download buttons. This is a highly specific selector
   to ensure it overrides other general button styles and establishes a consistent base. */
.card-header .btn.report-download-btn {
  flex: 0 0 auto !important;
  width: 70px !important;
  padding: 4px 8px !important;
  font-size: 0.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  border-radius: 0.25rem !important;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* ENABLED state: Applies when the button does NOT have the 'disabled' attribute.
   This selector is highly specific to ensure it applies the correct orange color. */
.card-header .btn.report-download-btn:not([disabled]) {
  background-color: var(--primary-orange) !important;
  border-color: var(--primary-orange) !important;
  color: white !important;
  cursor: pointer !important;
}

/* DISABLED state: Applies when the button HAS the 'disabled' attribute.
   This selector is highly specific to override the orange styles and apply the gray color.
   It targets both the [disabled] attribute and the .shinyjs-disabled class added by shinyjs. */
.card-header .btn.report-download-btn[disabled],
.card-header .btn.report-download-btn.shinyjs-disabled {
  background-color: #e9ecef !important; /* A light gray */
  border-color: #dee2e6 !important;     /* A slightly darker gray border */
  color: #6c757d !important;            /* Dark gray text for readability */
  pointer-events: none !important;      /* Prevent clicks */
  cursor: not-allowed !important;       /* Explicitly set cursor */
}