@font-face {
  font-family: 'Adam';
  src: url('Adam-Medium.ttf') format('truetype');
}

.shiny-output-error.shiny-output-error-shiny\.silent\.error.shiny-output-error-validation.htmlwidgets-error {
  color: white !important;
}
/*https://www.highcharts.com/docs/chart-design-and-style/style-by-css*/
.highcharts-title,
.highcharts-axis,
.highcharts-axis-labels,
.highcharts-axis-title,
.highcharts-tooltip text,
.highcharts-tooltip-header,
.highcharts-series,
.highcharts-menu-item,
.highcharts-legend-title,
.highcharts-data-label,
.highcharts-credits,
.highcharts-tooltip,
.highcharts-legend-title,
.highcharts-legend{
    font-family: 'Montserrat', sans-serif;
}
.fas.fa-sliders {
  color: white;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  background-image: url('imagen_fondo.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /*background-color: white;*/
  height: 100%;
  margin: 0;
  padding: 0;
}

.leaflet .legend {
  font-family: 'Montserrat', sans-serif;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: none;
  color: #00FFFF;
  border-radius: 4px;
  border: 1px solid #00FFFF;
}
 
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  background: none;
  color: #00FFFF;
}


.sidebar-content {
  overflow-y: hidden;
  padding: 0;
}

.sidebar-logo {
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: 15px;
}

.sidebar-item img {
  margin-right: 0.5rem;
}

.sidebar-item.active a {
  background-color: #000000 !important; /* Color de fondo activo */
  border-radius: 10px !important; /* Radio del borde activo */
  text-align: center;
}

.sidebar-item.active a span {
  color: #00FFFF !important;
  border-radius: 10px !important;
  text-align: center;
}


.leaflet-top {
  z-index:999!important;
}

/* Estilo general para el sidebar */
.sidebar {
  flex-direction: column;
  justify-content: space-between; /* Espacio entre los elementos */
  transition: width 0.3s;
  width: 198px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  display: flex;
  z-index: 1000;
  background-color: #000000 !important;
}

/* Estilo para el sidebar colapsado */
.sidebar.collapsed {
  width: 65px;
}

/* Estilo para los items del sidebar */
.sidebar-item {
  position: relative;
  width: 100%; /* Ajuste de ancho para llenar el contenedor */
  border-radius: 10px !important;
  margin-left: 0; /* Eliminar el margen izquierdo para colapsar correctamente */
  text-align: center;
  padding-left: 15px;
  background-color: #000000 !important;
}

/* Estilo para el enlace dentro del item del sidebar */
.sidebar-item a {
  padding: 1rem !important;
  border-radius: 10px; /* Radio del borde */
  display: flex;
  align-items: center;
  color:white;
  background-color: #000000; /* Fondo de los ítems */
  transition: background-color 0.3s, border-radius 0.3s; /* Transición suave */
}

/* Estilo para el icono dentro del ítem */
.sidebar-item a .icon {
  color: #000000 !important; /* Color del icono */
  margin-right: 0.5rem; /* Espacio entre icono y texto */
}


/* Estilo para esconder el texto de los ítems cuando el sidebar está colapsado */
.sidebar-item span {
  font-size: 1rem;
  color:white;
}

/* Estilo para eliminar el borde del item activo cuando el sidebar está colapsado */
.sidebar.collapsed .sidebar-item.active a {
  border: none;
}

/* Estilo para el contenido principal */
.content {
    margin-left: 180px;
    transition: margin-left 0.3s ease;
    padding: 20px;
    width: calc(100% - 290px);
    overflow-y: auto;
    height: 100vh;
    padding-bottom: 0px!important;
    padding-right: 5px!important;
}

.content.collapsed {
  margin-left: 50px; /* Ajuste cuando la barra lateral está colapsada */
  width: calc(100% - 60px);
}

.sidebar.collapsed .sidebar-item span {
  opacity: 0;
  display: none;
}

.sidebarToggle {
  margin-bottom: 1rem;
}

.icon, .icon::before {
  color: white!important;
}

.fas.fa-bars {
  background-color: gray;
}

.d-flex.align-items-center {
  margin-left: 0.10rem;
}

.col-lg {
  margin-left: 25px!important;
}

/* Estilo específico para el logo del menú */
.menu-logo {
  height: 50px;
  width: 225px;
}

.menu-logo-container {
  margin-top: auto; /* Empuja el logo al final del contenido */
}

.p-3 {
  padding: 0.2rem !important;
  margin-left: -10px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  padding: 2px 0px;
  margin-top:-15px!important;
}

.foot-sidebar{
  color:white;
}
/*Nuevo CSS*/
.name_principal{
  background-color: #00FFFF;
  color:#000000;
  font-size:18px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
  font-family: 'Adam', sans-serif;
}

.name_principal_unico{
  background-color: white;
  color:black;
  font-size:18px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

.name_glacial_new{
  border: 2px solid #00FFFF;
  color: #00FFFF;
  background-color: transparent;
  font-size: 16px;
  padding-left: 20px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: center;
  padding-right: 20px;
  margin-left: 20px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

#home-sidebarToggle:hover, #nieve-sidebarToggle:hover, #glaciar-sidebarToggle:hover,#carbon-sidebarToggle:hover, #visor_imagenes-sidebarToggle:hover, #meteorology-sidebarToggle:hover,#home-sidebarToggle, #nieve-sidebarToggle, #glaciar-sidebarToggle, #carbon-sidebarToggle, #visor_imagenes-sidebarToggle, #meteorology-sidebarToggle, 
#black_carbon-sidebarToggle, #black_carbon-sidebarToggle:hover{
  background-color: #000000!important;
  border-color: #000000!important;
} 

.title_date{
  color:white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

.selectize-input.items.full.has-options.has-items::after {
  border-color: white !important;
  font-family: 'Montserrat', sans-serif;
}

.selectize-input {
  height: 10% !important;
  font-size: 12px;
  width: 125px!important;
  background-color: transparent!important;
  color:white;
  font-family: 'Montserrat', sans-serif;
}

.single.selectize-dropdown.shiny-input-select{
  width: 100px!important;
  font-family: 'Montserrat', sans-serif;
}

.selectize-input > *{
  color:white;
  font-family: 'Montserrat', sans-serif;
}

.selectize-control {
  padding-left: 10px;
  padding-top: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

/* Card BLanca */
.card {
  max-width: 98%;
  border-radius: 20px 20px 20px 20px;
  background-color: white;
  padding: 5px!important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Montserrat', sans-serif;
  height: 142px;
}

.card_unica {
  max-width: 98%;
  border-radius: 20px 20px 20px 20px;
  background-color: white;
  padding: 10px!important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Montserrat', sans-serif;
  height: 80px;
}

.section {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}
.icon {
  font-size: 0px;
  margin-right: 15px;
}
.label {
  font-size: 16px;
  margin: 0;
  color: #262626;
  font-family: 'Montserrat', sans-serif;
}
.value {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  width: 150%;
}
.separator {
  height: 1px;
  background-color: #858889;
  margin: 5px 0;
  font-family: 'Montserrat', sans-serif;
}
.glacial-icon {
background-color: #00FFFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin-right: 0px;
  height: 3.8rem;
  width: 150%;
}
.glacial-icon img {
  width: 50%;
  height: 40%;
  max-width: 50%;
}

.glacial-icon2 {
  background-color: #00FFFF; /* Color del fondo */
  border-radius: 50%;       /* Hace el fondo circular */
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 15%;
  margin-right: 5px;
  height: 3.8rem;
  width:20%;
}
.glacial-icon2 img {
  width: 50%;
  height: 40%;
  max-width: 50%;
}

/* Card Rocoso */
.card-rocoso {
  max-width: 98%;
  max-height: 25%;
  background-color: #56533C; /* Color de fondo */
  border-radius: 20px 20px 20px 20px;
  padding: 8px!important;
  display: flex;
  align-items: center;
  color: white;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.icon-rocoso {
  width: 64px;
  height: 3rem;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.icon-rocoso img {
  width: 100%;
  height: 120%;
}
.card-rocoso .content_card {
  width: 309px;
  height: 58px;
}
.card-rocoso .content_card p {
  margin: 0;
}
.title-rocoso {
  font-size: 20px;
  margin-bottom: 5px;
}
.value-rocoso {
  font-size: 18px;
  font-weight: bold;
}

/* Card Carbon */
.card-carbon {
  max-width: 98%;
  max-height: 20%;
  background-color: #262626; /* Color de fondo */
  border-radius: 20px 20px 20px 20px;
  padding: 5px!important;
  display: flex;
  align-items: center;
  color: white;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.icon-carbon {
  width: 70px;
  height: 3rem;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0px;
  border-radius: 20%;
}
.icon-carbon img {
  width: 100%;
  height: 130%;
}
.content-carbon {
  width: 309px;
  height: 69px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content-carbon .header {
  font-size: 20px;
  margin-bottom: 5px;
 text-align: center;
}
.content-carbon .details {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-top: 0px;
}

.title-new{
  color: #00FFFF;
  display: flex; /* Usar flexbox para facilitar la alineación */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  text-align: center; /* Asegurar el texto centrado dentro del span */
  width: 100%; /* Asegurar que ocupe todo el ancho del contenedor */
  font-size: 1.1rem; /* Ajusta el tamaño de la fuente según sea necesario */
  font-weight: bold; /* Destacar el título */
  margin: 10px 0; /* Agrega un margen opcional */
}

.card-superfie-glaciar{
  max-width: 98%;
  max-height: 20%;
  background-color: white!important; /* Color de fondo */
  border-radius: 20px 20px 20px 20px;
  padding: 8px!important;
  display: flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#black_carbon-email,#meteorology-email{
  font-family: 'Montserrat', sans-serif;
  margin: 10px;
  padding: 10px 20px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espacio entre el texto y el icono */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  background-color: #C00000; /* Rojo */
  width: 12rem;
}

#black_carbon-descargar, #meteorology-descargar{
  font-family: 'Montserrat', sans-serif;
  margin: 10px;
  padding: 10px 20px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espacio entre el texto y el icono */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
   background-color: #20569B; 
   width: 11.2rem;
}

#black_carbon-descargar:hover,#meteorology-descargar:hover{
    background-color: #0d47a1; /* Azul más oscuro al pasar el mouse */
  transform: scale(1.05); /* Efecto de ampliación al hover */
}

#black_carbon-email:hover,#meteorology-email:hover{
  background-color: #b71c1c; /* Rojo más oscuro al pasar el mouse */
  transform: scale(1.05); /* Efecto de ampliación al hover */
}

.fa-envelope, .fa-download{
  font-size: 20px;
  font-weight: bold;
}

/* Iconos alineados */
.action-button .fa {
  margin-left: 5px; /* Espaciado entre texto e ícono */
}

/* Contenedor principal de la tarjeta */
.black-carbon-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  max-width: 450px; /* Ancho máximo de la tarjeta */
  margin: 0 auto; /* Centrado horizontal */
  text-align: center;
}

/* Fila de encabezado */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  margin-left: 60px;
}

/* Iconos del encabezado */
.header-row .icon {
  width: 50%;
  height: 40%;
  max-width: 50%;
}

/* Columnas de la tabla simulada */
.black-carbon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

.black-carbon-row:last-child {
  border-bottom: none; /* Quitar borde del último elemento */
}

/* Estilo de las etiquetas */
.label-black-carbon {
  padding: 5px 10px;
  color: white;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

.label-green {
  background-color: #00FF00;
  font-family: 'Montserrat', sans-serif;
  width: 4.5rem;
  text-align: center;
}

.label-red {
  background-color: #C00000;
  font-family: 'Montserrat', sans-serif;
  width: 4.5rem;
  text-align: center;
}
/* Estilo de las card button */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.card-first-button {
  background: #fff;
  border-radius: 10%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0px;
  transition: transform 0.3s;
  position: relative;
  width: 20rem;
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
}
}
.card-first-button:hover {
  transform: scale(1.05);
}

.card-first-button button {
  background: transparent;
  color: black;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 10px 10px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  margin-top: 0px;
  border-color: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: bold;
}
.card-first-button button:hover,
#meteorology-ver_mas:active,
#meteorology-ver_mas1:active,
#meteorology-ver_mas2:active,
#meteorology-ver_mas3:active,
#meteorology-ver_mas4:active,
#meteorology-ver_mas5:active,
#meteorology-ver_mas6:active{
  color: #00FFFF;
  border-color: transparent;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
}

.image_button {
  width: 90%;
  height: 10rem;
  border-radius: 20%;
}

.custom-select-container .selectize-control {
  background-color: transparent !important;
  font-size: 12px;
  text-align: center;
  margin-left: 0px;
  font-family: 'Montserrat', sans-serif;
}

.custom-select-container1 .selectize-control {
  background-color: transparent !important;
  font-size: 12px;
  text-align: center;
  margin-left: -100px;
  font-family: 'Montserrat', sans-serif;
}

.selectize-control.single .selectize-input:not(.no-arrow)::after{
  background-color: white!important;
  font-family: 'Montserrat', sans-serif;
  width: 5px;
  height: 5px;
}

.custom-select-container .item,.custom-select-container1 .item {
  font-size: 15px;
  font-weight: bold;
  border-color: transparent !important;
  color:#00FFFF;
  font-family: 'Montserrat', sans-serif;
}

.custom-select-container .selectize-input, .custom-select-container .single.selectize-dropdown.shiny-input-select,.custom-select-container1 .selectize-input, .custom-select-container1 .single.selectize-dropdown.shiny-input-select{
   min-width: 20.5rem!important;
   border-color: #00FFFF;
   font-family: 'Montserrat', sans-serif;
} 
 /* Color del Selector del sectinput*/
.selectize-dropdown .selected{
  background-color: gray;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

/* Crear botoenes del modulo de meteorology*/
.quick-view-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  font-family: 'Montserrat', sans-serif;
}

.quick-view-group {
  margin-right: 20px;
  font-family: 'Montserrat', sans-serif;
}

.quick-view-button {
  display: block;
  margin-bottom: 5px;
  padding: 5px 5px 0px 0px;
  border: 0px solid transparent;
  border-radius: 0px;
  background-color: #fff;
  color: #000;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

.quick-view-button:hover {
  background-color: #e6e6e6;
  font-family: 'Montserrat', sans-serif;
}

.quick-view-button.active, 
#meteorology-last_2_days:hover, #meteorology-last_2_days:focus,
#meteorology-last_7_days:hover, #meteorology-last_7_days:focus,
#meteorology-last_30_days:hover, #meteorology-last_30_days:focus,
#meteorology-last_90_days:hover, #meteorology-last_90_days:focus,
#meteorology-last_6_months:hover, #meteorology-last_6_months:focus,
#meteorology-yesterday:hover, #meteorology-yesterday:focus,
#meteorology-last_week:hover, #meteorology-last_week:focus,
#meteorology-week_before:hover, #meteorology-week_before:focus,
#meteorology-last_month:hover, #meteorology-last_month:focus,
#meteorology-this_week:hover, #meteorology-this_week:focus,
#meteorology-this_month:hover, #meteorology-this_month:focus,
#meteorology-this_year:hover, #meteorology-this_year:focus,
#meteorology-last_12_months:hover, #meteorology-last_12_months:focus,
#meteorology-last_3_hours:hover, #meteorology-last_3_hours:focus,
#meteorology-last_6_hours:hover, #meteorology-last_6_hours:focus,
#meteorology-last_12_hours:hover, #meteorology-last_12_hours:focus,
#meteorology-last_24_hours:hover, #meteorology-last_24_hours:focus{
  background-color: #00dff8;
  color: #fff;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

.date-inputs {
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
}

.date-inputs label {
  font-weight: bold;
  margin-bottom: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

.date-inputs input {
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
}

.title-date {
  font-weight: bold;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}

.label-date {
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}

.cards-meteorology {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}

/* Estilo general para las cards */
.card-dentro {
  width: 100%; /* Para que ocupe todo el espacio disponible */
  max-width: 330px; /* Tamaño máximo */
  min-width: 300px; /* Tamaño mínimo para evitar que sea demasiado pequeña */
  color: white;
  padding: 15px;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px !important;
  height: 6rem;
  font-family: 'Montserrat', sans-serif;
  word-wrap: break-word; /* Rompe palabras largas */
  overflow: hidden; /* Ocultar cualquier contenido desbordado */
}

/* Icono en la card */
.card-dentro-icon {
  width: 30px;
  height: 40px;
  margin-right: 10px;
  flex-shrink: 0; /* Asegura que el icono no se reduzca demasiado */
}

/* Contenedor de texto y valor */
.card-dentro-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

/* Título de la card y el valor */
.card-dentro-title {
  font-size: 14px; /* Tamaño más pequeño para textos largos */
  font-weight: bold;
  margin: 0;
  flex-grow: 1;
  width: auto; /* Ajustar ancho automáticamente */
}

.card-dentro-value {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  white-space: nowrap; /* Evita saltos de línea */
  text-overflow: ellipsis; /* Añade puntos suspensivos si es muy largo */
  overflow: hidden;
}

/* Línea divisoria */
.card-dentro-divider {
  width: 1px;
  height: 40px;
  background-color: white;
}

/* Línea divisoria */
.card-dentro-divider2 {
  width: 2px;
  height: 160px;
  margin-top: 25px;
  background-color: #56533C;
  margin-left: -30px;
  font-family: 'Montserrat', sans-serif;
}

.custom-select-label {
  color: white;
  margin-left: 90px  ;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

.title-meteo {
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

.header-container-meteo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
}

.bslib-card{
  box-shadow: none!important;
  background-color: transparent!important;
  margin:0!important;
  padding:0!important;
}

.name_blank {
  color: white;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 10px;
}

/*VISOR IMAGENES*/
.gallery-button {
  display: flex;
  max-height: 500px; /* Altura máxima para el contenedor */
  overflow-y: scroll; /* Activar desplazamiento vertical */
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  margin-bottom: 10px;
  border: 0px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  background-color: white;
  transition: background-color 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  width: 100%; /* Para asegurarse de que los botones ocupen el mismo ancho */
  max-width: 300px; /* Ancho máximo para consistencia */
  box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho */
}
.gallery-button.selected,.gallery-button.selected:focus{
  background-color: #00FFFF;
  font-family: 'Montserrat', sans-serif;
  color: black;
  border-color: #00FFFF;
}

.gallery-button:hover {
  background-color: #00FFFF;
  color: black;
    border-color:transparent;
}
.gallery-content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.gallery-icon {
  font-size: 24px;
  margin-right: 10px;
}
.gallery-info {
  flex-grow: 1;
}
.gallery-info .date {
  font-size: 12px; /* Estilo del texto pequeño sin usar etiquetas específicas */
  color: #555;
}
.edit-delete {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}
.edit-delete span {
  cursor: pointer;
  font-size: 14px;
  color: #C00000;
  font-family: 'Montserrat', sans-serif;
}
.edit-delete span.edit {
  color: black;
  font-family: 'Montserrat', sans-serif;
}
.edit-delete span:hover {
  text-decoration: underline;
  font-family: 'Montserrat', sans-serif;
}
.media-preview {
  margin-top: 2px;
  border: 0px solid transparent;
  padding: 10px;
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
}

.well {
  background-color: white;
  color: black;
  padding: 0.0rem 0.7rem 0.7rem 0.7rem;
  border-radius: 10px!important;
  font-family: 'Montserrat', sans-serif;
  max-height: 300px;
  overflow-y: scroll;
  margin-top: 10px;
}

#home-satelital, #nieve-satelital, #glaciar-satelital, #black_carbon-satelital  {
  border-radius: 10px!important;
}

/* Botones Next y Prev */
.calendar-icon {
  font-size: 20px;
}

#home-prev_btn, 
#home-next_btn,
#nieve-prev_btn, 
#nieve-next_btn,
#glaciar-prev_btn, 
#glaciar-next_btn,
#black_carbon-prev_btn, 
#black_carbon-next_btn{
  width: 10px;
  height: 55px;
  font-size: 15px;
  font-weight: bold;
  color: black;
  background-color: transparent;
  border-color: transparent;
}

.fas{
  font-size: 25px;
}

.fa-calendar::before,.fa-caret-left::before,.fa-caret-right::before{
  color: white;
}

#home-next_btn > .btn-primary.disabled:hover,
#home-prev_btn > .btn-primary.disabled:hover,
#nieve-next_btn > .btn-primary.disabled:hover,
#nieve-prev_btn > .btn-primary.disabled:hover,
#glaciar-next_btn > .btn-primary.disabled:hover,
#glaciar-prev_btn > .btn-primary.disabled:hover,
#black_carbon-next_btn > .btn-primary.disabled:hover,
#black_carbon-prev_btn > .btn-primary.disabled:hover,{
  color: gray;
  font-weight: bold;
}


#visor_imagenes-slider_images_videos, #visor_imagenes-slider_images_videos > div{
  height: 50px!important;
  background: ;
}

.slick-slide{
  background: transparent!important;
}

.slick-item { cursor: pointer; }
.slick-slide { margin: 0 5px; }

.slick-prev::before, .slick-next::before {
  color: white!important
}

.custom-button {
  background-color: #00FF00;
  color: black;
  border-radius: 10px;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}
.custom-button:hover {
  background-color: #00CC00;
  cursor: pointer;
}
.custom-button i {
  font-size: 20px;
}

/* Botón de Crear Nueva Carpeta */
.crear-carpeta-btn {
    background-color: rgba(0, 255, 0, 0.5); /* Verde más suave */
    color: black;
    border: none;
    border-radius: 10px;
    padding: 10px 15px;
    font-weight: bold;
}

/* Contenedor general */
.campania-container {
    background-color: rgba(240, 240, 240, 0.9); /* Fondo gris claro */
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

/* Nombre de carpetas */
.nombre-carpeta {
    font-weight: 600;
    color: #333;
}

/* Fechas */
.fecha {
    font-size: 0.85em;
    color: gray;
}

/* Botón Editar */
.btn.btn-default.action-button.btn-warning.btn-sm.shiny-bound-input {
    color: black;
    background: none;
    border: none;
    font-size: 0.9em;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    margin: -35px -50px 0px 30px !important;
}

/* Botón Eliminar */
.btn.btn-default.action-button.btn-danger.btn-sm.shiny-bound-input {
    color: #C00000;
    background: none;
    border: none;
    font-size: 0.9em;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    margin: -35px 0px 0px 30px !important;
}

#visor_imagenes-refresh_button,#visor_imagenes-refresh_button:focus,#visor_imagenes-refresh_button:active {
  background: none;
  border: none;
  color: #000;
  font-size: 12px;
  padding-left: 5px;
  margin-left:10px;
  margin-top: -10px;
}

.fa-arrows-rotate::before, .fa-refresh::before, .fa-sync::before{
  font-size: 20px;
}

#visor_imagenes-eliminar {
  background-color: white;
  padding: 5px !important;
  margin-left: 10px;
}

#visor_imagenes-eliminar:hover {
  background-color: white!important;
  padding: 5px !important;
  margin-left: 10px!important;
  color: black!important;
}

#visor_imagenes-eliminar:active {
  background-color: white!important;
  padding: 5px !important;
  margin-left: 10px!important;
  color: black!important;
}

.name_principal_home{
  background-color: #00FFFF;
  color: #000000;
  font-size:20px;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
  font-family: 'Adam', sans-serif;
}

.name_series{
  color:white;
  font-size:18px;
  font-weight: bold;
}

#home-hover {
  background: transparent;
  color: white;
  margin-top: 10px;
  border-color: transparent;
}

#black_carbon-but1,#black_carbon-but2,#black_carbon-but3 {
  border-color: transparent;
}

.image_black{
  width: 220px;
  height: 180px;
  border-radius: 10px;
}

thead {
  background-color: white;
}

.card-container_home {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.card_home {
  background: white;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: left;
}

.horizontal-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.horizontal {
  display: flex;
  align-items: center;
  gap: 10px;
}