/* Navbar - Corregido */
.navbar {
  background-color: #0f2c4d;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.35rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.logo {
  height: 29px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 100%;
}

.nav-links a {
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 4px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-links .active {
  color: #ffffff;
  font-size: 1rem;
  border-bottom: 2px solid #48b2ff;
}

.nav-links .inactive {
  color: #758291;
  font-size: 0.95rem;
}

.nav-links a:hover {
  opacity: 0.8;
}

.navbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-info {
  text-align: right;
}

.user-name {
  font-weight: bold;
  color: #ffffff;
}

.user-role {
  font-size: 0.85rem;
  color: #7DB8FE;
}

.user-avatar {
  background-color: #7DB8FE;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #192E47;
}

.user-avatar-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-dropdown-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* ¡Evita el scroll global! */
  font-family: 'Segoe UI', sans-serif;
  background-color: #f5f6fa;
}

/* Filter - Section */
.vin-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 24px;
  padding-bottom: 10px;
}

.vin-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vin-search input {
  width: 400px;
  height: 36px;
  padding: 0 1rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
}

.search-btn {
  height: 36px;
  padding: 0 1.2rem;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.search-btn:hover {
  background-color: #005fa3;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.excel-btn,
.new-btn {
  height: 36px;
  padding: 0 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.excel-btn {
  background-color: white;
  border: 1px solid #192E47;
}

.excel-btn:hover {
  background-color: #f0f0f0;
}

.new-btn {
  background-color: #83C617;
  color: #192E47;
  border: none;
}

.new-btn:hover {
  background-color: #5f920e;
}

.btn-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.filters-section { 
  background-color: #f5f6fa;
  padding: 0px 30px 0px 30px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
}

.filter-buttons {
  display: flex;
  padding: 5px 0px 5px 0px;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filter {
  width: 190px;
  height: 34px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.7rem 0 0.7rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.2s;
}

.filter:hover {
  background-color: #f0f0f0;
}

.icon {
  height: 20px;
  width: 20px;
  object-fit: contain;
}

.filter span {
  font-size: 12px;
  font-weight: 400;
  flex-grow: 1;
  text-align: left;
  padding: 0 0.4rem;
  color: #565656;
}

.dropdown-icon {
  width: 12px;
  height: 12px;
}




/* Table - Section */

.table-wrapper {
  background-color: white;
  margin: 0px 30px 20px 30px;
  padding: 0 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
  box-sizing: border-box;
  overflow: hidden;
}

/* Encabezado */
.table-header .table-row.header {
  display: flex;
  align-items: center;
  height: 40px;
  font-weight: bold;
  color: #e57200;
  font-size: 15px;
  padding: 0 0px;
  box-sizing: border-box;
}



/* Scrollable content */
.table-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 14px;
  box-sizing: content-box;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 6px;
}

/* Cada fila */
.row-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* Círculo rojo */
.indicator-space {
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.new-indicator {
  width: 12px;
  height: 12px;
  background-color: #dc3545;
  border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite;
}

.new-indicator::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background-color: #dc3545;
  border-radius: 50%;
  opacity: 0.3;
  animation: pulse-ring 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Tarjeta blanca */
.data-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 10px;
  height: 50px;
  width: 1748px;
  border: 1px solid #ddd;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.data-card .cell {
  flex: 1;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
}

/* Footer */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0;
  font-size: 14px;
  color: #333;
}

.results-count {
  margin-left: 2px;
}

.pagination button {
  background: none;
  border: 1px solid #ccc;
  padding: 6px 12px;
  margin-left: 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.pagination button.active {
  background-color: #e57200;
  color: white;
  border-color: #e57200;
}

.header-card {
  display: flex;
  background-color: transparent;
  height: 30px;
  width: 1748px;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.header-card .cell {
  flex: 1;
  font-size: 15px;
  font-weight: bold;
  color: #e57200;
  display: flex;
  align-items: center;
}


/* User Form */

.user-form-card {
  background-color: #314F73;
  margin: 20px 30px 0 30px;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  gap: 20px;
  box-sizing: border-box;
}

.user-input {
  height: 36px;
  width: 380px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.user-select {
  height: 36px;
  width: 380px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
  background-color: white;
  appearance: none;
  background-image: url('/assets/images/flecha-dd.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

.user-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #7db8fe;
}

.save-btn {
  height: 36px;
  width: 174px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  background-color: #83C617;
  color: #192E47;
  border: none;
  transition: background 0.3s;
}

.save-btn:hover {
  background-color: #5f920e;
}

.save-btn .btn-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}


/* User Table */

.user-table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 40px 30px 20px;
  overflow: hidden;
}

.user-table-header {
  position: sticky;
  top: 0;
  background-color: #f5f6fa;
  z-index: 10;
  padding-right: 6px;
  box-sizing: border-box;
}

.user-header-card {
  display: flex;
  align-items: center;
  min-width: 1816px;
  height: 50px;
  color: #e57200;
  font-weight: bold;
  font-size: 15px;
  padding: 0 20px;
  box-sizing: border-box;
  background: #f5f6fa;
}

.user-cell {
  flex: 1;
  padding: 0 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.user-table-body {
  overflow-y: auto;
  padding-right: 12px; /* Separación del borde */
  padding-left: 4px;
  box-sizing: content-box;
  flex: 1;
}

.user-table-body::-webkit-scrollbar {
  width: 6px;
}

.user-table-body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 6px;
}

.user-row {
  display: flex;
  margin-bottom: 10px;
}

.user-data-card {
  display: flex;
  align-items: center;
  min-width: 1816px;
  height: 50px;
  background-color: white;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 0 20px;
  gap: 10px;
  box-sizing: border-box;
}

.password-toggle-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 12px; /* espacio final */
  box-sizing: border-box;
}

.password-text {
  font-size: 14px;
  color: #333;
  font-family: monospace;
  flex: 1;
}

.toggle-password-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.toggle-switch {
  width: 40px;
  height: 24px;
  appearance: none;
  background: #ccc;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-switch:checked {
  background: #83C617;
}

.toggle-switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
}

.toggle-switch:checked::before {
  transform: translateX(16px);
}

.icon-action {
  width: 24px;
  height: 24px;
  cursor: pointer;
}


@media (max-width: 1920px) {
  .user-data-card,
  .user-header-card {
    min-width: 100%;
  }
}

.dashboard-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}


/* CSS para Inicio */

.inicio-header-card {
  max-width: calc(100% - 60px);
  height: 130px;
  margin: 20px 30px 0 30px;
  border-radius: 10px;
  background: linear-gradient(to right, #11365F, #055AA3);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
  color: white;
}


/* Contenido a la izquierda */
.inicio-card-content {
  display: flex;
  align-items: center;
  padding-left: 30px;
  gap: 30px;
  height: 100%;
}

/* Círculo con borde */
.fecha-circulo {
  width: 100px;
  height: 100px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.fecha-numero {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
}

.fecha-mes {
  font-size: 18px;
  line-height: 1;
}

/* Línea divisora */
.linea-divisora {
  width: 1px;
  height: 100px;
  background-color: white;
}

/* Textos de saludo */
.texto-bienvenida {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.saludo {
  font-size: 18px;
}

.mensaje-dia {
  font-size: 26px;
  font-weight: bold;
  max-width: 550px;
}

/* Imagen decorativa */
.inicio-card-imagen img {
  height: 130px;
  width: 400px;
  object-fit: cover;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: block;
}

@media (max-width: 1440px) {
  .inicio-header-card {
    flex-direction: column;
    height: auto;
  }

  .inicio-card-content {
    padding: 20px;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .inicio-card-imagen img {
    width: 100%;
    height: auto;
    border-radius: 0 0 10px 10px;
  }
}

@media (max-width: 768px) {
  .fecha-circulo {
    width: 80px;
    height: 80px;
  }

  .fecha-numero {
    font-size: 28px;
  }

  .fecha-mes {
    font-size: 14px;
  }

  .mensaje-dia {
    font-size: 20px;
  }

  .saludo {
    font-size: 16px;
  }

  .linea-divisora {
    height: 80px;
  }
}


/* Estadisticas */

.estadisticas-row {
  display: flex;
  gap: 20px;
  margin: 20px 30px;
  box-sizing: border-box;
  flex-wrap: wrap;
}


.estadistica-card {
  flex: 1;
  min-width: 260px;
  height: 110px;
  background-color: #dbe9f7;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.estadistica-info {
  display: flex;
  flex-direction: column;
}

.estadistica-label {
  font-size: 16px;
  font-weight: bold;
  color: #103A5D;
  margin-bottom: 5px;
}

.estadistica-valor {
  font-size: 40px;
  font-weight: bold;
  color: #4273AD;
}

.estadistica-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  align-self: flex-end;
}

/* Ajuste responsivo para tarjetas de estadísticas */
@media (max-width: 1279px) {
  .estadisticas-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  .estadistica-card {
    flex: 0 0 calc(50% - 20px); /* dos por fila con separación */
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .estadistica-card {
    flex: 0 0 100%; /* una por fila en móviles */
  }
}


/* Bento BOX inicio */

.seccion-panel-completo {
  display: flex;
  justify-content: space-between;
  margin: 20px 30px 0px 30px; /* ← Esto asegura 20px inferior */
  padding-bottom: 20px;
  gap: 20px;
  height: calc(100vh - 380px); /* Se ajusta 360px → 380px */
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Columna izquierda */
.panel-columna-izquierda {
  flex: 0 0 calc(50% - 10px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  height: 100%;
}


/* Placeholder visual */
.panel-mapa,
.panel-areas,
.panel-transportistas {
  border-radius: 10px;
  background-color: #b3c4e6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a6a6a;
  font-size: 16px;
  font-style: italic;
  box-sizing: border-box;
}

/* Tamaños aproximados adaptados a 1920px */
.panel-mapa {
  height: calc(66.66% + 40px); /* 2/3 + mitad del extra */
}

.panel-areas {
  height: calc(33.33% - 40px); /* 1/3 - mitad del extra */
}


.panel-transportistas {
  height: calc(100%); /* 2/3 + mitad del extra */
}

@media (max-width: 1279px) {
  .seccion-panel-completo {
    flex-direction: column;
    height: auto; /* Elimina altura fija al colapsar */
  }

  .panel-columna-izquierda,
  .panel-transportistas {
    width: 100%;
    flex: none;
  }

  .panel-mapa,
  .panel-areas,
  .panel-transportistas {
    height: auto;
    min-height: 200px;
  }
}



/* Sección mapa */

.panel-mapa {
  /*background-image: url('../images/map.png');  Ajusta la ruta según estructura */
  background-size: cover;
  background-position: center;
  position: relative;
  height: calc(66.66% + 40px);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Overlay lateral derecho */
.mapa-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}

/* Contenido dentro del overlay */
.info-mercados {
  color: white;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

/* Títulos */
.titulo-mercados {
  font-size: 30px;
  font-weight: bold;
  color: #3AB5FC;
  margin-bottom: 0; /* aseguramos que no tenga margen extra */
}

.subtitulo-mercados {
  font-size: 16px;
  opacity: 0.85;
  margin-top: -5px; /* solo separación con el título */
  margin-bottom: 20px; /* separación hacia abajo */
  color: #3AB5FC;
}

/* Datos generales */
.datos-mercados {
  display: flex;
  align-items: flex-start;
  margin-top: 12px;
}

/* Bloques de importación y exportación */
.bloque-izquierdo,
.bloque-derecho {
  display: flex;
  flex-direction: column;
  gap: 50px; /* separación entre los pares */
}

/* Línea divisora */
.linea-central {
  width: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 30px; /* separación a ambos lados */
  height: 180px;
}

/* Cada dato */
.dato {
  display: flex;
  flex-direction: column;
  gap: 6px; /* espacio entre etiqueta y número */
}

.dato-label {
  font-size: 18px;
  opacity: 0.8;
}

.dato-numero {
  font-size: 34px;
  font-weight: bold;
  line-height: 1;
}

.dato-numero span {
  font-size: 14px;
  font-weight: normal;
  margin-left: 4px;
  opacity: 0.8;
  vertical-align: middle;
}

/* Responsivo: baja 2px fuentes */
@media (max-width: 1280px) {
  .titulo-mercados {
    font-size: 22px;
  }

  .subtitulo-mercados {
    font-size: 14px;
  }

  .dato-numero {
    font-size: 22px;
  }

  .dato-label,
  .dato-numero span {
    font-size: 12px;
  }

  .linea-central {
    height: 80px;
  }
}


/* Áreas */

.card-areas {
  background-color: white;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #B8B8B8;
}

.card-header {
  background-color: #316392;
  color: white;
  font-weight: bold;
  padding-left: 14px;
  height: 40px;
  display: flex;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 14px;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.area-table {
  flex-grow: 1;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.area-headers,
.area-values {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  margin-left: 20px;
  margin-right: 20px;
}

.area-headers span {
  color: #777;
  font-size: 14px;
  flex: 1;
  text-align: center;
}

.area-values span {
  color: #0a2e4e;
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.area-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 20px;
}

.average-summary {
  border-left: 1px solid #e0e0e0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 75%;
}

.average-number {
  font-size: 32px;
  font-weight: bold;
  color: #0a2e4e;
}

.average-label {
  font-size: 14px;
  color: #0a2e4e;
  margin-top: 0;
}



/* Transportistas */

.panel-transportistas {
  flex: 1 1 auto;
  min-height: 300px;
  background-color: white;
  border-radius: 10px;
  border: 1px solid #B8B8B8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header azul */
.tabla-header-barra {
  background-color: #3AB5FC;
  color: white;
  font-weight: bold;
  font-size: 16px;
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-sizing: border-box;
  width: 100%;
}

/* Encabezados */
.tabla-encabezados {
  display: flex;
  width: calc(100% - 40px);   /* 100% menos 20px de cada lado */
  margin: 14px 20px 0 20px;   /* Top 14px, laterales 20px */
  font-size: 14px;
  font-weight: 500;
  color: #555;
  gap: 8px;
  box-sizing: border-box;
}

.columna-col {
  flex: 1;
  text-align: left;
}

.columna-col.transportista {
  flex: 1.8; /* Más ancho para nombres largos */
}

.tabla-divisor {
  width: calc(100% - 40px);   /* También restamos los 20px por lado */
  height: 1px;
  background-color: #ccc;
  margin: 14px 20px 0 20px;   /* Separación superior + margen lateral */
  box-sizing: border-box;
}


/* Línea divisoria */
.tabla-divider {
  height: 1px;
  background-color: #ccc;
  margin: 0 20px;
}

/* Cuerpo con scroll */
.tabla-body-scroll {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: auto; /* Asegura que haya scroll horizontal si es necesario */
  max-height: 470px; /* Ajusta según el alto disponible de la tabla */
  padding-right: 6px; /* espacio para el scroll */
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.tabla-body-scroll table {
  width: 100%; /* Asegura que la tabla ocupe todo el ancho del contenedor */
  table-layout: fixed; /* Establece un diseño fijo para las columnas */
}

.tabla-body-scroll td, .tabla-body-scroll th {
  width: auto; /* Ajuste automático de las celdas */
}

.tabla-body-scroll::-webkit-scrollbar {
  width: 6px;
}

.tabla-body-scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 6px;
}

/* Filas */
.fila-transportista {
  display: flex;
  margin: 0 20px; /* margen lateral izquierdo y derecho */
  padding: 12px 0;
  align-items: center;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

/* Columnas */
.fila-transportista .col {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #333;
}

.fila-transportista .col-nombre {
  flex: 1.4;
  text-align: left;
  font-weight: bold;
  color: #103A5D;
}




/* Nuevo registro */

.contenedor-principal {
  height: calc(100vh); /* 20px arriba y 20px abajo */
  min-height: 720px;   /* Altura mínima segura */
  max-height: 1080px;  /* Altura máxima si quieres limitarlo */
  margin: 0px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden; /* evita scroll doble */
}

/*.form-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 0px); 
  box-sizing: border-box;
  overflow: hidden; 
  unicode-bidi: isolate;
}*/

.form-card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  height: auto;
  /*flex: 1;  ocupa todo el espacio posible */
  overflow-y: hidden;
  box-sizing: border-box;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; /* Espaciado hacia lo que venga después */
}

.left-title h2 {
  font-size: 24px;
  font-weight: bold;
  color: #191F2F;
  margin: 0; /* Eliminamos márgenes por defecto del h2 */
}

.right-buttons {
  display: flex;
  gap: 20px;
}

.btn-cancelar {
  height: 38px;
  width: 160px;
  background-color: transparent;
  border: 1px solid #A8A8A8; /* gris claro */
  color: #A8A8A8;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-guardar {
  height: 38px;
  width: 160px;
  background-color: #346298;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

/* Botón eliminar */
.btn-eliminar {
  height: 38px;
  width: 160px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 15px;
  transition: all 0.3s ease;
}

.btn-eliminar:hover,
.btn-cancelar:hover,
.btn-guardar:hover {
  opacity: 0.9;
}


.card-gris-scrollable {
  background-color: #ebebeb;
  padding: 20px;
  border-radius: 8px;
  height: calc(100vh - 220px); /* Ajusta este número según el espacio que ocupan header/top bar/márgenes */
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #A0A0A0 transparent;
}

/* Scrollbar para navegadores Webkit (Chrome, Edge, etc.) */
.card-gris-scrollable::-webkit-scrollbar {
  width: 8px;
}

.card-gris-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.card-gris-scrollable::-webkit-scrollbar-thumb {
  background-color: #A0A0A0;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Ejemplo de tarjetas internas */
.inner-card {
  background-color: white;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #717171;
  margin-bottom: 20px; /* Espacio inferior por si viene algo después */
  text-align: left;
}

.input-group {
  display: flex;
  gap: 20px; /* Espacio entre inputs */
  flex-wrap: wrap; /* Para que se acomode bien en pantallas más pequeñas */
  padding-bottom: 20px;
  justify-content: space-between;
}


.input-field,
.dropdown-field {
  flex: 1 1 0%;
  min-width: 250px;
  max-width: 410px;
  height: 38px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #191F2F;
  box-sizing: border-box;
}

.input-field::placeholder {
  color: #A0A0A0;
  font-weight: 400;
}

.dropdown-field {
  appearance: none;
  padding-right: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%220%200%2010%205%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%205%205-5z%22%20fill%3D%22%23191F2F%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 5px;
}


/* Segunda fila general */

.input-group-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 20px;
  justify-content: space-between;
}


@media (min-width: 1440px) {
  .input-group-2 {
    gap: 30px;
  }
}

@media (min-width: 1680px) {
  .input-group-2 {
    gap: 38px;
  }
}



/* Contenedor para los inputs pequeños */
.small-group {
  display: flex;
  gap: 10px;
  max-width: 410px;
  width: 100%;
  flex-shrink: 0;
  flex-wrap: wrap; /* Ayuda en casos extremos */
}

/* Inputs pequeños */
.small-input {
  flex: 1 1 0;
  min-width: 0;
  height: 38px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #191F2F;
  box-sizing: border-box;
}

/* Observaciones largo */
.long-input {
  flex: 1;
  height: 38px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #191F2F;
  box-sizing: border-box;
  min-width: 0;
}

.long-input-field {
  flex: 1 1 0%;
  min-width: 250px;
  max-width: 100%;
  height: 38px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #191F2F;
  box-sizing: border-box;
}


/* Style Input text como Google */

.floating-input {
  position: relative;
  margin-top: 20px;
  width: 100%;
  max-width: 410px; /* mismo que input-field */
  min-width: 250px;
  flex: 1 1 0%;
}

/* INPUT CON ESTILO DE .input-field */
.floating-input input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  color: #191F2F;
  box-sizing: border-box;
}

/* PLACEHOLDER OCULTO PARA ACTIVAR FLOATING */
.floating-input input::placeholder {
  color: transparent; /* ocultamos para usar el label */
}

/* LABEL flotante */
.floating-input label {
  position: absolute;
  top: 10px;
  left: 12px;
  color: #A0A0A0;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  background-color: white;
  padding: 0 4px;
}

/* Cuando el input está enfocado o tiene texto */
.floating-input input:focus + label,
.floating-input input:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #565656;
}



.floating-long-input {
  position: relative;
  margin-top: 20px;
  width: 100%;
  flex: 1;
  min-width: 250px;
  max-width: 100%;
}

/* Input alargado con estilos actuales */
.floating-long-input input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  color: #191F2F;
  box-sizing: border-box;
  flex: 1;
}

/* Ocultamos placeholder visual */
.floating-long-input input::placeholder {
  color: transparent;
}

/* Label flotante */
.floating-long-input label {
  position: absolute;
  top: 10px;
  left: 12px;
  color: #A0A0A0;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  background-color: white;
  padding: 0 4px;
}

/* Activación de floating cuando hay foco o texto */
.floating-long-input input:focus + label,
.floating-long-input input:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #3f4041;
}



.floating-dropdown {
  position: relative;
  margin-top: 20px;
  width: 100%;
  flex: 1 1 0%;
  min-width: 250px;
  max-width: 410px;
}

/* Select estilizado */
.floating-dropdown select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  color: #191F2F;
  box-sizing: border-box;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%220%200%2010%205%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%205%205-5z%22%20fill%3D%22%23191F2F%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 5px;
}

/* Label flotante */
.floating-dropdown label {
  position: absolute;
  top: 10px;
  left: 12px;
  color: #A0A0A0;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  background-color: white;
  padding: 0 4px;
}

/* Flotante cuando hay selección (y no está vacío) */
.floating-dropdown select:focus + label,
.floating-dropdown select:not([value=""]) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #3f4041;
}



/* Contenedor flotante */
.floating-date-field {
  position: relative;
  height: 38px;
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}



/* Input de fecha con estilo igual al input-field */
.date-input-field {
  flex: 1 1 0%;
  min-width: 250px;
  max-width: 410px;
  height: 38px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #191F2F;
  box-sizing: border-box;
  font-family: inherit;
}

/* Label flotante fijo arriba */
.floating-date-field label {
  font-size: 12px;
  color: #A0A0A0;
  position: absolute;
  top: -8px;
  left: 12px;
  background: #ffffff;
  padding: 0 4px;
  pointer-events: none;
}

/* Clase base para todos los inputs flotantes en grupos */
.floating-wrapper {
  flex: 1 1 0%;
  min-width: 250px;
  max-width: 410px;
}

.floating-small-input {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  max-width: 150px; /* Puedes ajustar este ancho */
  margin-top: 20px;
}

.floating-small-input input {
  width: 100%;
  height: 38px;
  padding: 8px 12px 0 12px;
  font-size: 14px;
  border: 1px solid #CDCDCD;
  border-radius: 10px;
  background-color: #ffffff;
  color: #191F2F;
  box-sizing: border-box;
}

.floating-small-input input::placeholder {
  color: transparent; /* oculta placeholder visualmente */
}

.floating-small-input label {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 14px;
  color: #A0A0A0;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  background-color: #ffffff;
  padding: 0 4px;
}

.floating-small-input input:focus + label,
.floating-small-input input:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #3f4041;
}

.panel-grafica {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #B8B8B8;
  padding: 10px 36px;
  box-sizing: border-box;
  height: calc(66.66% + 40px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.grafica-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.grafica-titulo {
  font-size: 24px;
  font-weight: 700;
  color: #1a3365;
}

.grafica-controles {
  display: flex;
  align-items: end;
  gap: 20px;
}

.grafica-toggle {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: bold;
  font-size: 14px;
  color: #333;
  background-color: #fdfdfd;
}

.grafica-toggle.importacion .punto {
  background-color: #2b6cb0;
}

.grafica-toggle.exportacion .punto {
  background-color: #c53030;
}

.punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
}

.grafica-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  background-color: white;
}

.toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.toggle-label {
  font-size: 10px;
  color: #666;
  margin-left: 4px;
}

.grafica-placeholder {
  position: relative;
  width: 100%;
  height: calc(70%);
  box-sizing: border-box;
}
/* Tablets (<= 1279px) */
@media (max-width: 1279px) {
  .grafica-placeholder {
    height: calc(55%);
  }
}

/* Móviles grandes (<= 768px) */
@media (max-width: 768px) {
  .grafica-placeholder {
    height: calc(45%);
  }
}

/* Móviles pequeños (<= 480px) */
@media (max-width: 480px) {
  .grafica-placeholder {
    height: calc(38%);
  }
}

#mercadosChart {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Estilos para textarea flotante */
.floating-textarea-wrapper {
  position: relative;
  margin-top: 20px;
  width: 100%;
  flex: 1;
  min-width: 250px;
  max-width: 100%;
}

.floating-textarea-wrapper textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #CDCDCD;
  background-color: #ffffff;
  border-radius: 10px;
  color: #191F2F;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}

.floating-textarea-wrapper textarea::placeholder {
  color: transparent;
}

.floating-textarea-wrapper label {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #A0A0A0;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  background-color: white;
  padding: 0 4px;
}

.floating-textarea-wrapper textarea:focus + label,
.floating-textarea-wrapper textarea:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #565656;
}

.floating-textarea-wrapper textarea:focus {
  outline: none;
  border-color: #48b2ff;
}

/* Estilos para notas de campo */
.field-note {
  display: block;
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  font-style: italic;
}

/* Estilo especial para campos readonly */
.floating-date-field input[readonly] {
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

.floating-date-field input[readonly] + .field-note {
  color: #8a8a8a;
}