/* Base styles - mobile first */
html {
  min-height: 100%;
  font-size: 14px;
  position: relative;
  /* Removed padding-bottom to avoid extra space */
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  background: linear-gradient(rgba(157, 111, 83, 0.8), rgba(20, 118, 188, 0.8)), url("../img/background.250da9dd7b90.jpg") no-repeat center center / cover;

  background-size: cover;
  background-position: center;
  /* Removed padding-bottom to avoid extra space */
  box-sizing: border-box;
}

.main-content {
  flex-grow: 1;
}

.bg-custom {
  background-color: #2d3436 !important;
}

.btn-primary {
  font-weight: bold;
  background-color: #6f4e37;
  border-color: #6f4e37;
}

.btn-primary:hover {
  background-color: #6f4e37;
  border-color: #6f4e37;
}

.btn-cancel-outline {
  border: 1px solid #6f4e37;
  /* Borde de color café */
  color: #6f4e37;
  /* Texto de color café */
  font-weight: bold;
}

.btn-cancel-outline:hover {
  background-color: #6f4e37;
  /* Se rellena de café al pasar el mouse */
  color: white;
}

/* ==========================================================================
   ESTILOS PARA EL HEADER
   ========================================================================== */

/* --- Contenedor Principal del Header --- */
.main-header {
  display: flex;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* --- Logo (Izquierda) --- */
/* Usamos selectores específicos para anular los estilos existentes de .logo-container */
.main-header .logo-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #1e1e1e;
  padding: 15px 30px;
  min-width: 250px;
  text-align: center;
  /* Anulamos cualquier otro text-align */
}

.main-header .logo-container .logo {
  height: 80px;
  width: auto;
}

.logo-text {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 18px;
  margin-top: 3px;
  letter-spacing: 0.5px;
}

/* --- Wrapper de Navegación (Derecha) --- */
.main-header .nav-wrapper {
  display: flex;
  flex-direction: column;
  /* Apila las 3 barras verticalmente */
  flex-grow: 1;
  width: 100%;
}

/* --- Las 3 Barras --- */
.top-bar {
  background-color: #be9374;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  flex-grow: 2;
}

.top-bar .main-navigation {
  flex-grow: 1;
  /* Esto hace que ocupe todo el espacio central disponible */
}

.middle-bar {
  background-color: #6f4e37;
  height: 20px;
  width: 100%;
  flex-shrink: 0;
}

.bottom-bar {
  background-color: #b38b72;
  display: flex;
  justify-content: flex-end;
  /* Alinea las banderas a la derecha */
  align-items: center;
  padding: 0 25px;
  flex-grow: 1;
}

/* --- ANULACIÓN DE ESTILOS DE .WIZARD-BREADCRUMB --- */
/* Hacemos los selectores muy específicos para ganar la batalla del CSS */
.top-bar .wizard-breadcrumb {
  display: flex;
  justify-content: center;
  /* Alineación a la izquierda */
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border-radius: 0;
}

.top-bar .wizard-breadcrumb li {
  position: static;
  padding: 0;
  cursor: default;
  color: white;
  font-weight: normal;
  transition: none;
  border: none !important;
  /* Anulamos cualquier borde del modo "active" */
}

.top-bar .wizard-breadcrumb li:hover {
  color: white;
  /* Quitamos el hover azul */
  transform: none;
  /* Quitamos la animación de escala */
}

.top-bar .wizard-breadcrumb li.active {
  color: white;
  font-weight: normal;
  /* Quitamos el bold */
  border: none;
}

.top-bar .wizard-breadcrumb li a {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: white !important;
  /* Forzamos el color blanco */
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: normal;
  transition: background-color 0.3s;
}

.top-bar .wizard-breadcrumb li a:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: white !important;
}

.top-bar .wizard-breadcrumb li a i {
  margin-right: 8px;
  font-size: 1.1rem;
}

.top-bar .wizard-breadcrumb li+li::before {
  content: none;
  /* Eliminamos el separador ">" del wizard */
}

/* --- Menú de Opciones y Dropdown de Usuario --- */
.options-menu .nav-link.dropdown-toggle {
  color: white;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.options-menu .nav-link.dropdown-toggle i {
  margin-right: 8px;
}

/* --- Banderas en la barra inferior --- */
.bottom-bar .language-selector img {
  height: 10px;
  width: auto;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid #a18062;
  transition: transform 0.2s;
}


.bottom-bar .language-selector {
  margin-left: auto;
  margin-bottom: 5px;
}

.bottom-bar-links {
  display: flex;
  gap: 20px;
  /* Espacio entre "About" y "Privacy Policy" */
}

.bottom-bar-link {
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.bottom-bar-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.page-controls-bar {
  background-color: #1e1e1e;
  /* Fondo oscuro, igual que el del logo */
  padding: 5px 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-top: 1px solid #444;
  /* Línea sutil de separación con el header */
}

/* Anulamos los colores verdes de Bootstrap y aplicamos los de nuestro tema */
.page-controls-bar .btn {
  font-weight: bold;
  min-width: 100px;
  display: inline-flex;
  /* Permite alinear el contenido interno fácilmente */
  align-items: center;
  /* Centra verticalmente la imagen y el texto */
  justify-content: center;
  /* Centra todo el contenido horizontalmente */
  gap: 8px;
  padding: 1px 12px 3px 12px;
}

.botonantsig-icon {
  width: 18px;
  /* Ancho del ícono. ¡Ajusta si es necesario! */
  height: 18px;
  /* Alto del ícono. ¡Ajusta si es necesario! */
}

/* Estilo para el botón "Anterior" */
.page-controls-bar #prevBtn {
  color: #e0e0e0;
  border-color: transparent;
}

.page-controls-bar #prevBtn:hover {
  background-color: #555;
  border-color: #777;
}

/* Estilo para el botón "Siguiente" */
.page-controls-bar #nextBtn {
  background-color: transparent;
  border-color: transparent;
  color: #fff;
}

.page-controls-bar #nextBtn:hover {
  background-color: #555;
  border-color: #777;
}


/* ==========================================================================
   ESTILOS PERSONALIZADOS PARA EL MENÚ DESPLEGABLE DE USUARIO
   ========================================================================== */
.options-menu .nav-link.dropdown-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* Bootstrap 5 usa un SVG para la flecha del dropdown.
  Esta regla reemplaza el SVG por defecto (que es negro) por uno blanco.
*/
.options-menu .dropdown-toggle::after {
  border: none;
  /* Quitamos el borde que a veces Bootstrap usa */
  content: ' ';
  /* Limpiamos el contenido por si acaso */
  vertical-align: middle;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}


/* 2. El contenedor del menú que se despliega */
.options-menu .dropdown-menu {
  background-color: #6f4e37;
  /* Fondo oscuro para el menú */
  border: 1px solid #6f4e37;
  /* Borde sutil un poco más claro */
  border-radius: 8px;
  /* Esquinas redondeadas */
  padding: 8px 0;
  /* Relleno vertical */
  margin-top: 8px !important;
  /* Pequeño espacio entre el botón y el menú */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* Sombra para darle profundidad */
}

/* 3. Los enlaces dentro del menú (Dashboard, Logout, etc.) */
.options-menu .dropdown-item {
  color: #e0e0e0;
  /* Texto de color gris claro */
  font-weight: 500;
  padding: 8px 20px;
  /* Relleno para que no estén tan apretados */
  transition: background-color 0.2s ease, color 0.2s ease;
  /* Transición suave */
}

/* 4. El estilo al pasar el cursor sobre un enlace del menú */
.options-menu .dropdown-item:hover,
.options-menu .dropdown-item:focus {
  color: #ffffff;
  /* Texto se vuelve blanco puro */
  background-color: #4a4a4a;
  /* Fondo se vuelve un gris un poco más claro */
}


/* ==========================================================================
   Layout Containers
   ========================================================================== */
.main-container .main-container-centered {
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
}

.content-header {
  max-width: 700px;
  margin: 0 auto;
}

/* ==========================================================================
   Language Selector
   ========================================================================== */

/* Language selector buttons */
.language-selector {
  margin-top: 5px;
  /* move down from edge */
  display: flex;
  gap: 10px;
}

.language-selector button {
  background: transparent;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  padding: 2px 8px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-selector button:hover {
  opacity: 1;
}

.language-selector button.selected {
  opacity: 1;
  font-weight: bold;
  text-decoration: underline;
}

.language-selector select:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.language-selector select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7);
}

/* Ajustar el color de las opciones del select */
.language-selector select option {
  background-color: #2d3436;
  color: white;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: static;
  /* Changed from fixed to static to allow natural flow */
  height: auto;
  background-color: #1d71b8;
  color: white;
  padding: 0 1rem;
  box-sizing: border-box;
  z-index: 1000;

  display: flex;
  align-items: center;
  flex-direction: column;
}

/* Las tres columnas ocupan espacio igual */
.footer-left,
.footer-center,
.footer-right {
  flex: 1;
}

/* Centrar texto en la columna central */
.footer-center {
  text-align: center;
}

/* Alinear botones a la izquierda */
.footer-left {
  text-align: left;
}

/* Ajustar el contenido del footer */
.page-footer .container {
  padding: 0;
  margin: 0;
  height: 100%;
}

.page-footer .row {
  margin: 0;
  padding: 0;
  height: 100%;
}

.footer-links {
  /* Mantiene los links en una línea horizontal */
  display: flex;
  gap: 80px;

  /* LA LÍNEA SEPARADORA */
  width: 100%;
  /* Hacemos que ocupe todo el ancho para la línea */
  justify-content: center;
  /* Centramos los links dentro de este div */
  padding-bottom: 1rem;
  /* Espacio entre los links y la línea */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  /* La línea blanca semi-transparente */
  margin-bottom: 5px;
  /* Espacio entre la línea y el copyright */
}

.footer-bar-link {
  color: white;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.footer-bar-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
  background-color: transparent;
  color: #222222;
  border: none;
}

td {
  background-color: transparent !important;
  background-color: transparent;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

th {
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  padding: 8px;
}


/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}


/* ==========================================================================
   Miscellaneous
   ========================================================================== */
.row {
  align-items: start !important;
  /* O 'flex-start' */
}

.row-equal-height {
  align-items: stretch !important;
}

.boton-fijo {
  min-width: 100px;
  text-align: center;
}

.status-fijo {
  min-width: 70px;
  text-align: center;
}

.transformacion .spinner-border,
.modelo .spinner-border {
  width: 2rem;
  height: 2rem;
}

.nugget-input,
.sill-input,
.range-input {
  width: 125px;
  max-width: 140px;
}

.post-btn {
  background-color: #6f4e37;
  color: white;
  border-radius: 0.375rem;
  border: none;
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
}

.post-btn:hover {
  background-color: #5a3f2b;
  /* Un tono de café un poco más oscuro */
  color: white;
  /* Nos aseguramos que el texto siga siendo blanco */
}

.actualizar-btn {
  background-color: #6f4e37;
  color: white;
  border-radius: 0.375rem;
  border: none;
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-imagen-desactivar {
  /* --- 1. Tu imagen de fondo --- */
  /* ¡IMPORTANTE! Reemplaza la URL con la ruta a tu nueva imagen */
  background-image: url("../img/Desactivar_bot.2da94b87b8db.png");

  /* --- 2. Tamaño del botón --- */
  /* Ajusta el ancho y alto para que coincida con tu imagen */
  width: 30px;
  height: 30px;

  /* --- 3. Ajustes de la imagen de fondo --- */
  background-size: contain;
  /* La imagen cabe sin cortarse */
  background-repeat: no-repeat;
  /* No se repite */
  background-position: center;
  /* Se centra */

  /* --- 4. Eliminamos el estilo original del botón --- */
  background-color: transparent;
  border: none;
  padding: 0;

  /* --- 5. Ocultamos el texto "Desactivar" del botón --- */
  text-indent: -9999px;
}

/* --- (Opcional) Efecto al pasar el cursor --- */
.btn-imagen-desactivar:hover {
  opacity: 0.8;
  cursor: pointer;
}

.link-cafe {
  color: #6f4e37;
  /* El mismo color café del botón */
  text-decoration: none;
  /* Opcional: quita el subrayado */
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

.link-cafe:hover {
  color: #5a3f2b;
  /* Un tono más oscuro al pasar el mouse */
  text-decoration: underline;
  /* Opcional: añade el subrayado al pasar el mouse */
}

/* ==========================================================================
   Wizard (Step-by-step) Component
   ========================================================================== */
.breadcrumb {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
}

.breadcrumb-item a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb-item a:hover {
  color: #ffffff;
}

.breadcrumb-item.active {
  color: #6c757d;
  font-weight: 700;
}

.breadcrumb-item a {
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  color: #ffffff;
}

.wizard-breadcrumb li {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  color: #6c757d;
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease;
}

.wizard-breadcrumb li:hover {
  color: #ffffff;
  transform: scale(1.05);
}

.wizard-breadcrumb li.active {
  color: #ffffff;
  font-weight: 600;
  border-bottom: 2px solid #ffffff;
}

.wizard-breadcrumb li.active i {
  animation: bounce 1s ease infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.btn {
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: scale(1.05);
}

.wizard-content {
  min-height: 300px;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  background-color: #fff;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  opacity: 1;
}

.wizard-content.fade-out {
  opacity: 0;
  transform: translateX(-20px);
}

.wizard-content.fade-in {
  opacity: 1;
  transform: translateX(0);
}

.wizard-breadcrumb {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  list-style: none;
  padding-left: 0;
}

.wizard-breadcrumb li {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  color: #6c757d;
  font-weight: 500;
}

.wizard-breadcrumb li.active,
.wizard-breadcrumb li:hover {
  color: #0d6efd;
}

.wizard-breadcrumb li+li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
}

.wizard-content {
  min-height: 300px;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  background-color: #fff;
}

.wizard-navigation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.wizard-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: '';
}

.breadcrumb-icon {
  width: 20px;
  /* Ancho deseado del ícono */
  height: 20px;
  /* Alto deseado del ícono */
  object-fit: contain;
  /* Evita que la imagen se estire o deforme */
  vertical-align: middle;
  /* Ayuda a alinear mejor con el texto */
  margin-right: 8px;
  /* Espacio entre el ícono y el texto, igual que con los <i> */
}

.wizard-breadcrumb li.active .breadcrumb-icon {
  animation: bounce 1s ease infinite;
}

.toast-message {
  position: relative;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  color: #fff;
  min-width: 250px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0.95;
  font-family: sans-serif;
}

.toast-close {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
}

.alert-message {
  background-color: #fa8e00;
  color: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  min-width: 250px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-message.success {
  background-color: #198754;
}

.alert-message.error {
  background-color: #dc3545;
}

.alert-message.warning {
  background-color: #ffc107;
  color: black;
}

.alert-close {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

/* ==========================================================================
   Image Gallery
   ========================================================================== */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;

  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.image-card {
  flex: 1 1 48%;
  max-width: 450px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  background-color: #fff;
  text-align: center;
}

.image-card img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.image-card h5 {
  margin-top: 0.5rem;
  font-weight: 600;
  color: #333;
}

/* ==========================================================================
   Map Containers
   ========================================================================== */
.mapa-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 2%;
  flex-wrap: nowrap;
  /* Mantiene las imágenes lado a lado siempre */
  overflow: hidden;
  /* Evita que se desborde visualmente */
}


#mapa_ponderacion.image-card {
  max-width: 1066px;
  flex: 1 1 auto;
}

.mapa-img {
  flex: 1 1 48%;
  /* Que crezcan y se adapten, sin romper */
  min-width: 350px;
  /* Permite reducir más en pantallas medianas */
  height: auto;
  object-fit: contain;
}

/* RESPONSIVE para móviles */
@media (max-width: 768px) {
  .mapa-container {
    flex-direction: column;
    height: auto;
  }
}

.custom-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  width: auto;
  max-width: 400px;
  z-index: 9999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  padding: 1rem 1.5rem;
}

#botones-actualizar-generar {
  display: none;
}

.archivo-nombre {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

table.dataTable {
  table-layout: fixed !important;
  width: 100% !important;
}

/* ==========================================================================
   Plotly Charts
   ========================================================================== */
.responsive-plotly-wrapper {
  display: flex;
  flex-wrap: nowrap;
  /* evitamos salto de línea */
  gap: 20px;
  min-width: 100%;
  width: max-content;
  /* fuerza scroll horizontal */
}

/* Cada gráfico ocupa ancho fijo en pantallas grandes */
.plotly-container {
  width: 600px;
  height: 700px;
  flex-shrink: 0;
}

/* En pantallas pequeñas, que se apilen */
@media (max-width: 768px) {
  .responsive-plotly-wrapper {
    flex-direction: column;
    width: 100%;
  }

  .plotly-container {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

.plotly-container-full {
  width: 700px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  flex-grow: 1;
}

.plotly-card {
  flex: 1 1 100%;
  /* Que ocupe todo el ancho posible */
  max-width: 100%;
  /* Sin límite de 450px */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  background-color: #fff;
  text-align: center;
}

@media (max-width: 768px) {
  .plotly-container-full {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.plotly-tab-content {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.plotly-tab-content .tab-pane {
  height: auto;
}

.plotly-image-gallery {
  display: block;
  /* o flex pero sin wrap y sin justify-content */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  /* si quieres scroll horizontal */
  box-sizing: border-box;
}

/* Added CSS for Leaflet map container */
#map {
  width: 100%;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

.chart {
  width: 100%;
  min-width: 300px;
  position: relative;
  margin-right: 20px;
  overflow: visible !important;
}

/* ==========================================================================
   File Inputs
   ========================================================================== */
.custom-file-input:lang(es)~.custom-file-label::after {
  content: "Examinar";
  background-color: #6c757d;
  color: white;
}

.custom-file-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Estilos para el nombre del archivo */
#file-name-display {
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  background-color: #f8fafc;
  border: 1px dashed #d1d5db;
  color: #64748b;
  font-size: 14px;
  min-width: 200px;
  transition: all 0.3s ease;
}

#file-name-display.has-file {
  color: #1e40af;
  background-color: #e0f2fe;
  border-style: solid;
  border-color: #93c5fd;
}

/* ==========================================================================
   Overlay Loader
   ========================================================================== */
#overlayLoader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20000 !important;
  pointer-events: all !important;
}

#overlayLoader .loader-content {
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  user-select: none;
}

/* ==========================================================================
   Map Markers
   ========================================================================== */
.marker-label {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #555;
  font-weight: bold;
  font-size: 12px;
}

.marker-label span {
  color: #333;
}

/* ==========================================================================
   Select2 Plugin
   ========================================================================== */
.select2-container .select2-selection--single {
  height: calc(1.5em + .75rem + 2px) !important;
  padding: .375rem .75rem;
  border: 1px solid #ced4da;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  padding-left: 0;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + .75rem + 2px) !important;
}

.vertical-divider-right {
  border-right: 0.5px solid #dee2e6;
  /* Color de borde de Bootstrap */
}

.table-scroll-vertical {
  max-height: 400px;
  /* Puedes ajustar esta altura según tus necesidades */
  overflow-y: auto;
  /* Habilita el scroll vertical cuando el contenido excede el max-height */
}

.table-scroll-container {
  /* Define una altura máxima. El scroll aparecerá cuando el contenido la supere.
     '65vh' significa 65% de la altura de la ventana, es una buena medida responsiva. */
  max-height: 65vh;

  /* Añade el scroll vertical solo cuando sea necesario */
  overflow-y: auto;

  /* Contexto de posicionamiento para el encabezado fijo */
  position: relative;
}

.table-scroll-container thead th {
  /* Fija el encabezado en la parte superior del contenedor */
  position: sticky;
  top: 0;

  /* Asegura que el encabezado esté por encima del contenido del body */
  z-index: 1;

  /* Un color de fondo es crucial para que el texto que se desplaza por debajo no se vea */
  background-color: rgba(197, 185, 178, 0.9);
  /* Un gris claro estándar de Bootstrap */
}


.campo-simetrico {
  display: flex;
  align-items: center;
  gap: 15px;
  /* Espacio entre la etiqueta y el campo */
}

.campo-simetrico label {
  flex: 1;
  /* Ocupa un espacio igual */
  white-space: nowrap;
  /* Evita que el texto de la etiqueta se envuelva */
}

.campo-simetrico input,
.campo-simetrico select {
  flex: 2;
  /* Ocupa el doble de espacio que la etiqueta */
}

/* ==========================================================================
   Detalle Proyecto Page
   ========================================================================== */

/* Botones siempre visibles para consistencia */
#pozosTable .btn-accion {
  opacity: 1;
  pointer-events: auto;
}

/* Fila de "agregar pozo" siempre visible */
#pozosTable .fila-agregar {
  display: table-row;
}

/* Que la columna de addParam no ensanche la tabla */
#pozosTable th.col-addParam,
#pozosTable td.col-addParam {
  width: 1%;
  white-space: nowrap;
}

/* Compactar botones para no romper celdas */
.btn-accion.btn {
  padding: .25rem .4rem;
  line-height: 1;
}

/* Flag icons are loaded from CDN */

/* Columna de agregar parámetro siempre visible */
#pozosTable th.col-addParam,
#pozosTable td.col-addParam {
  display: table-cell;
}

#file-name-display {
  white-space: nowrap;
  /* Evita que el texto salte a la siguiente línea */
  overflow: hidden;
  /* Oculta el texto que se desborda */
  text-overflow: ellipsis;
  /* Añade los puntos suspensivos */
  min-width: 0;
  /* Importante para que funcione correctamente dentro de un contenedor flex */
}

.sticky-header {
  position: -webkit-sticky;
  /* Para compatibilidad con Safari */
  position: sticky;
  top: 0;
  /* Fija el encabezado en la parte superior del contenedor */
  z-index: 1;
  /* Asegura que el encabezado esté por encima del contenido */
}


/* ==========================================================================
   Cardd body
   ========================================================================== */
.card {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;

  /* 1. Ancho máximo para pantallas GRANDES */
  max-width: 1200px;

  /* 2. Ancho flexible para pantallas PEQUEÑAS */
  width: 95%;

  /* Estas dos líneas centran la tarjeta horizontalmente */
  margin-left: auto;
  margin-right: auto;
}

/* Para tarjetas con altura completa en filas de altura igual */
.row-equal-height {
  max-width: 1200px;
  /* límite total del bloque */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.row-equal-height .card {
  max-width: 100% !important;
  /* cada card se adapta a su columna */
  width: 100% !important;
  margin: 0 !important;
}

/* 2. Cabecera Oscura de la Tarjeta
-----------------------------------------------------------------------------*/
.card-header {
  background-image: url("../img/EncabezadoPrinc.5d88fc2552c2.png");
  background-size: 350px 80px;
  background-repeat: no-repeat;
  border-bottom: none !important;
  background-position: 10px 10px;
  height: 75px;
  color: white;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-header-dashboard {
  background-image: url("../img/EncabezadoPrinc.5d88fc2552c2.png");
  background-size: 350px 80px;
  background-repeat: no-repeat;
  border-bottom: none !important;
  background-position: 10px 10px;
  height: 75px;
  color: white;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.card-header-dashboard .form-title {
  font-size: 1.2rem;
  color: white;
  max-width: 220px;
  word-wrap: break-word;
  /* Para compatibilidad con navegadores antiguos */
  overflow-wrap: break-word
}

.card-header-dashboard .form-label {
  font-size: 1.25rem;
  color: white;
  max-width: 220px;
  word-wrap: break-word;
  /* Para compatibilidad con navegadores antiguos */
  overflow-wrap: break-word
}

.card-header-secondary {
  background-image: url("../img/EncabezadoSec.e3674ff74692.png");
  background-size: 350px 80px;
  background-repeat: no-repeat;
  border-bottom: none !important;
  background-position: 5px 5px;
  border-radius: 15px 15px 0 0 !important;
  display: flex;

  color: white;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-header-secondary-dashboard {
  background-image: url("../img/EncabezadoSec.e3674ff74692.png");
  background-size: 270px 80px;
  background-repeat: no-repeat;
  border-bottom: none !important;
  background-position: 5px 5px;
  border-radius: 15px 15px 0 0 !important;
  display: flex;

  color: white;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 2. Estilos para el nuevo contenedor de la imagen */
.header-background-container {
  background-image: url("../img/EncabezadoPrinc.5d88fc2552c2.png");
  background-size: 350px 80px;
  background-repeat: no-repeat;
  border-bottom: none !important;
  background-position: 10px 10px;
  height: 75px;
  color: white;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 3. Estilos para centrar el título DENTRO del contenedor de la imagen */
.header-background-container .form-title {
  font-size: 1.25rem;
  color: white;
  max-width: 250px;
  word-wrap: break-word;
  /* Para compatibilidad con navegadores antiguos */
  overflow-wrap: break-word;
}

.header-background-container-secondary {
  background-image: url("../img/EncabezadoSec.e3674ff74692.png");
  background-size: 350px 80px;
  background-repeat: no-repeat;
  border-bottom: none !important;
  background-position: 10px 10px;
  height: 75px;
  color: white;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 3. Estilos para centrar el título DENTRO del contenedor de la imagen */
.header-background-container-secondary .form-title {
  font-size: 1.2rem;
  color: white;
  max-width: 220px;
  word-wrap: break-word;
  /* Para compatibilidad con navegadores antiguos */
  overflow-wrap: break-word;
}

.header-background-container-secondary .form-label {
  font-size: 1.25rem;
  color: white;
  max-width: 220px;
  word-wrap: break-word;
  /* Para compatibilidad con navegadores antiguos */
  overflow-wrap: break-word;
}

/* 1. EL CONTENEDOR (Define la imagen de fondo y el layout) */
.header-locEspacial-container-secondary {
  background-image: url("../img/EncabezadoSec.e3674ff74692.png");
  background-size: 300px 80px;
  background-repeat: no-repeat;
  border-bottom: none !important;
  background-position: 10px 10px;
  height: 75px;
  color: white;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-background-container-secondary .form-title {
  font-size: 1.2rem;
  color: white;
  max-width: auto;
  word-wrap: break-word;
  /* Para compatibilidad con navegadores antiguos */
  overflow-wrap: break-word;
}

/* 2. EL TÍTULO DENTRO del contenedor (Define el tamaño y el quiebre de texto) */
.header-locEspacial-container-secondary .form-label {
  font-size: 1.25rem;
  color: white;
  max-width: 220px;
  /* <-- El ancho máximo va aquí, en el texto */
  word-wrap: break-word;
  hyphens: auto;
  min-width: 0;
}

/* 3. Cuerpo de la Tarjeta
-----------------------------------------------------------------------------*/
.card-body {
  background-color: transparent;
}

.content-container-stable {
  position: relative;
  width: 100%;
  height: 70vh;
  /* Altura del 70% de la ventana. ¡Puedes ajustar este valor! */
  min-height: 550px;
  /* Altura mínima para pantallas no muy altas. */
}

/* ==========================================================================
   Estilos para Tabla 
   ========================================================================== */
.table {
  background-color: transparent;
  color: #3b3b3b;
  /* Texto oscuro para que sea legible */
  border: none;
}

/* Cabecera de la tabla */
.table thead th {
  color: #222;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  border-bottom: 2px solid #654836;
  /* Línea inferior marrón */
  background-color: transparent;
}

/* Celdas de la tabla */
.table th,
.table td {
  padding: 0.5rem;
  vertical-align: middle;
  border: none;
  color: #212529;
}

/* Línea divisoria entre filas */
.table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.table tbody tr:last-child {
  border-bottom: none;
  /* La última fila no necesita línea */
}

/* Quitamos el hover que teníamos antes */
.table tbody tr:hover {
  background-color: transparent;
}

/* Estilos para los íconos de acción en la tabla */
.table .action-icon {
  font-size: 1.2rem;
  cursor: pointer;
  text-decoration: none;
}

.table .icon-view {
  color: #555;
  /* Color para el ícono de ver */
}

.table .icon-deactivate {
  color: #d9534f;
  /* Color rojo para el ícono de desactivar */
}

/* Para el texto "ACTIVO" en color verde */
.status-active {
  color: #28a745;
  font-weight: bold;
}

.table-scroll-vertical thead th {
  /* Habilita el comportamiento "pegajoso" para los encabezados */
  position: sticky;

  /* Pega los encabezados en la parte superior del contenedor de scroll */
  top: 0;

  /* Asegura que el encabezado se muestre por encima del contenido del body de la tabla */
  z-index: 1;

  /* ¡CLAVE! Asigna un color de fondo sólido para evitar transparencias.
     Este color es un marrón claro opaco que coincide con el tema de la página. */
  background-color: rgba(255, 255, 255, 0.8);

}

.table-scroll-vertical thead th:not(:last-child) {
  border-right: 1px solid rgba(101, 72, 54, 0.4);
  /* Línea sutil con el color del tema */
}


/* 5. Estilos para los Campos de Formulario (Inputs)
-----------------------------------------------------------------------------*/
.form-group label {
  font-weight: bold;
  color: #444;
  margin-bottom: 5px;
}

.form-control {
  background-color: rgba(255, 255, 255, 0.5);
  /* Fondo del input semi-transparente */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  /* Bordes redondeados */
  color: #333;
  height: 40px;
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: #654836;
  /* Borde marrón al seleccionar */
  box-shadow: 0 0 0 0.2rem rgba(101, 72, 54, 0.25);
}

.form-select {
  background-color: rgba(255, 255, 255, 0.5);
  /* Fondo del input semi-transparente */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  /* Bordes redondeados */
  color: #333;
  height: 40px;
}

.form-select:focus {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: #654836;
  /* Borde marrón al seleccionar */
  box-shadow: 0 0 0 0.2rem rgba(101, 72, 54, 0.25);
}

/* 6. Estilos para el botón "Save Project"
-----------------------------------------------------------------------------*/
.btn-save-project {
  background-color: #28a745;
  /* Verde como en la imagen anterior */
  color: white;
  font-weight: bold;
  border: none;
  width: 100%;
  padding: 10px;
}

.btn-save-project:hover {
  background-color: #176127;
  color: rgb(207, 207, 207);
  font-weight: bold;
  border: none;
  width: 100%;
  padding: 10px;
}

/* ==========================================================================
   ESTILOS CUSTOM BOTONES
   ========================================================================== */

.btn-con-imagen {
  /* --- 1. Tu imagen de fondo --- */
  /* ¡IMPORTANTE! Reemplaza la URL con la ruta correcta a tu imagen */
  background-image: url("../img/ver_bot.dfde852abc24.png");

  /* --- 2. Tamaño del botón --- */
  /* Ajusta el ancho y alto para que coincida con tu imagen */
  width: 30px;
  height: 30px;

  /* --- 3. Ajustes de la imagen de fondo --- */
  background-size: contain;
  /* Asegura que toda la imagen se vea sin cortarse */
  background-repeat: no-repeat;
  /* Evita que la imagen se repita */
  background-position: center;
  /* Centra la imagen en el botón */

  /* --- 4. Eliminamos el estilo original del botón --- */
  background-color: transparent;
  /* Quitamos cualquier color de fondo */
  border: none;
  /* Quitamos el borde */
  padding: 0;
  /* Quitamos el relleno interno */

  /* --- 5. Ocultamos el texto del botón --- */
  /* Un truco para mover el texto fuera de la pantalla */
  text-indent: -9999px;
}

/* --- (Opcional) Efecto al pasar el cursor --- */
.btn-con-imagen:hover {
  opacity: 0.85;
  /* Hacemos la imagen un poco transparente */
  cursor: pointer;
  /* Nos aseguramos de que el cursor sea una manita */
}


/* ==========================================================================
   AJUSTES PARA LA TABLA DE DETALLES DE PROYECTO (#pozosTable)
   ========================================================================== */

/* --- 1. Hace más compactos los botones 'Activar' y 'Desactivar' --- */
#pozosTable tbody .btn-accion {
  min-width: auto;
  /* Anulamos el 'min-width: 100px' de .boton-fijo */
  padding: 0.25rem 0.6rem;
  /* Reducimos el relleno para hacerlos más pequeños */
  font-size: 0.8rem;
  /* Hacemos la letra un poco más chica */
  white-space: nowrap;
  /* Evitamos que el texto se parta en dos líneas */
}

/* --- 2. Reduce el tamaño del botón '+ Add parameter' --- */
#pozosTable thead .btn-accion {
  min-width: auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
}



/* ==========================================================================
   GEOESTADISTICA STYLES
   ========================================================================== */
/* ==========================================================================
     Estilos para Pestañas de Estadísticas (#statsTab)
     ========================================================================== */

/* 1. Estilo base para todos los botones de las pestañas */
#statsTab .nav-link,
#mapsTab .nav-link,
#GraficasCompTab .nav-link {
  border: 1px solid transparent;
  /* Quitamos el borde por defecto de Bootstrap */
  border-radius: 8px;
  /* Redondeamos las esquinas */
  padding: 8px 16px;
  /* Ajustamos el relleno para más espacio */
  color: #654836;
  /* Un color café oscuro de tu tema para el texto */
  font-weight: 500;
  margin: 0 5px;
  /* Añadimos un pequeño espacio entre pestañas */
  transition: all 0.3s ease;
  /* Transición suave para el hover */
}

/* 4. Añade el separador vertical a la derecha de cada pestaña, excepto la última */
#statsTab .nav-item:not(:last-child) .nav-link,
#mapsTab .nav-item:not(:last-child) .nav-link,
#GraficasCompTab .nav-item:not(:last-child) .nav-link {
  border-right: 1px solid #6f4e37 !important;
  /* Línea vertical gris claro */
}

/* 2. Estilo al pasar el cursor sobre una pestaña (que NO esté activa) */
#statsTab .nav-link:not(.active):hover,
#mapsTab .nav-link:not(.active):hover,
#GraficasCompTab .nav-link:not(.active):hover {
  background-color: rgba(101, 72, 54, 0.1);
  /* Fondo café muy sutil */
  border-color: rgba(101, 72, 54, 0.2);
  color: #3b2a20;
  /* Texto un poco más oscuro */
}

/* 3. Estilo para la pestaña ACTIVA */
#statsTab .nav-link.active,
#mapsTab .nav-link.active,
#GraficasCompTab .nav-link.active {
  background-color: #be9374;
  /* Fondo blanco sólido */
  color: #ffffff;
  /* Texto oscuro para que sea legible */
  font-weight: 600;
  /* Letra en negrita */
  border-color: #dee2e6;
  /* Un borde gris claro sutil */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Sombra suave para darle profundidad */
  border-radius: 15px 15px 0 0;
}

/* ==========================================================================
   ESTILOS PARA COMP_REDES
   ========================================================================== */

.input-group-text {
  background-color: rgba(190, 147, 116, .5);
}

/* Estilo para la fila resaltada en estado normal */
.table tbody tr.fila-resaltada td {
  background-color: #d1e7dd !important;
  /* Color verde de Bootstrap (.table-success) */
  color: #000000;
  /* Texto oscuro para que sea legible */
}

/* Estilo para la fila resaltada al pasar el mouse (hover) */
/* Esto asegura que el color se mantenga o se oscurezca un poco, pero que no desaparezca */
.table.table-hover tbody tr.fila-resaltada:hover td {
  background-color: #c3e6cb !important;
  /* Un verde un poco más oscuro */
}

/* Selector más específico para anular el estilo por defecto de DataTables */
.table thead.header-translucido th {
  background-color: rgba(255, 255, 255, 0.8) !important;
  /* Blanco translúcido forzado */
  color: #3b2a20;
  /* Texto oscuro para que sea legible */
  border-bottom: 2px solid #654836;
  /* Línea inferior de tu tema */
}

.table thead.header-translucido th:not(:last-child) {
  border-right: 1px solid rgba(101, 72, 54, 0.3);
  /* Línea vertical sutil */
}

.btn-export-excel {
  background-color: #6f4e37;
  /* Verde consistente con otros botones de acción */
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* Evita que el texto se parta */
}

.btn-export-excel:hover {
  background-color: #5a402d;
  /* Verde más oscuro al pasar el mouse */
  color: white;
  transform: translateY(-2px);
  /* Ligero efecto de elevación */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-export-excel:disabled {
  display: none;
  /* Se activa y oculta el botón */
}

/*
 * =========================================
 * Estilos personalizados para Paginación de DataTables
 * =========================================
 */

/* 1. Define los colores para los botones normales (fondo y texto)
     (Esto cambia las cajas blancas con texto azul)
*/
.page-link {
  color: #6f4e37;
  /* Color del texto (antes azul) */
  background-color: transparent;
  /* Fondo de la caja (antes blanco) */
  border-color: transparent;
  /* Color del borde */
}

/* 2. Define los colores para el botón ACTIVO (la página actual)
     (Esto cambia la caja azul con texto blanco)
*/
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  /* Color del texto (usualmente blanco) */
  background-color: #6f4e37;
  /* Color de fondo (antes azul) */
  border-color: #6f4e37;
  /* Color del borde (igual al fondo) */
}

/* 3. Define los colores al pasar el mouse (hover) sobre un botón no activo
*/
.page-link:hover {
  z-index: 2;
  color: white;
  /* Texto un poco más oscuro */
  background-color: #796559;
  /* Fondo un poco más gris */
  border-color: #7a6a5f;
}

/* 4. (Opcional) Estilo para los botones deshabilitados (ej. "Anterior" en la pág 1)
*/
.page-item.disabled .page-link {
  color: white;
  background-color: rgba(109, 76, 53, 0.76);
  border-color: #6f4e37a6;
}


/* ==========================================================================
   ESTILOS RESPONSIVOS PARA MÓVILES Y TABLETS
   ========================================================================== */

/* Todas las reglas dentro de este bloque se aplicarán solo en pantallas 
   con un ancho máximo de 768px (tablets y móviles) */
@media (max-width: 768px) {

  /* --- 1. AJUSTES GENERALES --- */
  .card {
    width: 95%;
    margin-top: 20px;

    /* --- LÍNEAS AÑADIDAS --- */
    margin-left: auto;
    margin-right: auto;
  }

  .card-body {
    padding: 20px 15px;
  }

  /* Añadir separación vertical a las columnas cuando se apilan en móvil */
  .row>[class*="col-"] {
    margin-bottom: 1rem;
  }

  /* --- 2. ARREGLO PARA FORMULARIOS --- */
  /*
    Regla clave #1: Hacemos que la fila PRINCIPAL del formulario apile sus
    secciones verticalmente (Proyecto, Origen de Malla, etc.).
  */
  .card-body form>.row {
    flex-direction: column;
    gap: 1rem;
    /* Espacio vertical entre las secciones del formulario */
  }

  /*
    Regla clave #2: Apuntamos a las filas INTERNAS (las que contienen una
    etiqueta y su campo) y las forzamos a apilarse verticalmente.
  */
  .card-body form .row .row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alinea etiqueta y campo a la izquierda */
    gap: 0.5rem;
    /* Espacio entre la etiqueta y el campo */
  }

  /*
    Regla clave #3: Eliminamos el padding de las columnas internas para
    evitar desalineaciones.
  */
  .card-body form .row .row>[class*="col-"] {
    padding: 0;
  }

  /* --- 4. ARREGLOS PARA EL HEADER --- */
  .main-header {
    flex-direction: column;
  }

  .main-header .logo-container {
    width: 100%;
    min-width: 0;
    padding: 15px;
  }

  .main-header .logo-container .logo {
    height: 60px;
  }

  .top-bar {
    flex-direction: column;
    padding: 10px;
    gap: 15px;
  }

  body {
    background-attachment: fixed;
    /* Mejora la experiencia de scroll en móviles */
  }

  .main-header .logo-text {
    font-size: 16px;
    /* Reducir un poco el texto del logo */
  }

  .card-header,
  .card-header-dashboard,
  .card-header-secondary,
  .card-header-secondary-dashboard,
  .header-background-container,
  .header-background-container-secondary,
  .header-locEspacial-container-secondary {
    /*  background-size: contain;*/
    /* La imagen se ajustará sin ser cortada */

    min-height: 30px;
    padding: 10px 15px;
    background-size: 310px 60px;
  }

  .form-title,
  .form-label {
    font-size: 1rem;
    /* Tamaño de fuente más adaptable */
    max-width: 100%;
    word-wrap: break-word;
  }

  /* --- 3. TRANSFORMACIÓN DE TABLAS A TARJETAS (VERSIÓN LADO A LADO FLEXIBLE) --- */

  /* Oculta los encabezados originales en móvil */
  .table thead {
    display: none;
  }

  /* Convierte la tabla en un layout de bloques */
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  /* Cada fila se convierte en una tarjeta */
  .table tr {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0 15px;
    /* Padding solo horizontal, el vertical lo dará la celda */
  }

  /* --- ESTA ES LA SECCIÓN CLAVE A CAMBIAR --- */
  .table td {
    /* 1. Crear un contexto de posicionamiento para la etiqueta */
    position: relative;

    /* 2. Crear espacio a la izquierda para la etiqueta. Ajusta el 45% si es necesario. */
    padding-left: 45%;
    padding-top: 12px;
    padding-bottom: 12px;

    /* 3. Alinear el DATO a la derecha para un look limpio */
    text-align: right;
    border-bottom: 1px solid #eee;
  }

  .table tr td:last-child {
    border-bottom: none;
  }


  /* LA MAGIA ESTÁ AQUÍ 👇 */
  .table td::before {
    /* 1. Lee la etiqueta desde el HTML (¡esto ya lo tienes bien!) */
    content: attr(data-label);

    /* 2. Posiciona la etiqueta de forma absoluta a la izquierda */
    position: absolute;
    left: 15px;
    /* Coincide con el padding de la tarjeta (tr) */
    top: 50%;
    transform: translateY(-50%);
    /* Centrado vertical perfecto */
    width: calc(45% - 20px);
    /* Ocupa el espacio reservado por el padding */

    /* 3. Estilos de la etiqueta */
    font-weight: bold;
    font-size: 0.85em;
    color: #654836;
    text-transform: uppercase;
    text-align: left;
    /* La etiqueta se alinea a la izquierda */
  }

  .tabla-responsiva-tarjetas tr.fila-agregar,
  .tabla-responsiva-tarjetas tr.fila-agregar td {
    /* Anulamos los estilos de "tarjeta" */
    display: flex;
    width: 100%;
    border: none;
    margin-bottom: 0;
    padding: 10px 0;

    /* Centramos los botones */
    text-align: center;
  }

  .tabla-responsiva-tarjetas tr.fila-agregar td {
    padding-left: 0;
    /* Anula el padding de la etiqueta */
    border-bottom: none;
    /* Sin líneas separadoras */
  }

  /* Oculta las celdas vacías que solo usamos para alinear */
  .tabla-responsiva-tarjetas tr.fila-agregar td.col-acciones,
  .tabla-responsiva-tarjetas tr.fila-agregar td.col-addParam {
    display: none;
  }

  /* Oculta la pseudo-etiqueta 'data-label' en esta fila */
  .tabla-responsiva-tarjetas tr.fila-agregar td::before {
    display: none;
  }
}

/* Media query adicional para pantallas muy pequeñas */
@media (max-width: 480px) {
  html {
    font-size: 13px;
    /* Reducir aún más la fuente base */
  }

  .card-body {
    padding: 15px 10px;
  }
}

.top-bar .wizard-breadcrumb {
  justify-content: center;
  flex-wrap: wrap;
}

/* --- 5. ARREGLOS PARA EL FOOTER --- */
.footer {
  position: static;
  height: auto;
  flex-direction: column;
  padding: 20px;
  gap: 15px;
}

.footer-left,
.footer-center,
.footer-right {
  text-align: center;
}

/* --- 6. AJUSTES PARA CABECERAS DE TARJETAS --- */
.card-header,
.card-header-secondary {
  padding: 12px 15px;
  gap: 8px;
}

.card-header h5,
.card-header-secondary h5 {
  font-size: 1.1rem;
}

.table td input[type="text"],
.table td input[type="number"],
.table td select {
  max-width: 100%;
  box-sizing: border-box;
  /* Previene desbordamientos por padding/border */
}

.table-responsive {
  max-height: 65vh;
  /* Altura máxima antes de que aparezca el scroll vertical */
  overflow-y: auto;
  /* Muestra el scroll vertical SÓLO si es necesario */
}