/* Contenedor desplazable horizontal */
.gallery-strip {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	padding-bottom: .25rem;
	scroll-snap-type: x mandatory;      /* scroll “a clicks” */
}
.gallery-strip::-webkit-scrollbar { height: 8px; }
.gallery-strip::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 4px; }

/* Miniaturas */
.thumb {
	flex: 0 0 auto;
	width: 160px;               /* cambia a gusto */
	height: 120px;              /* cambia a gusto */
	border: 1px solid #6c757d;
	border-radius: .5rem;
	object-fit: cover;
	background: #f8f9fa;
	scroll-snap-align: start;
}

/* Botones de navegación flotantes opcionales (ocúltalos en xs si quieres) */
.nav-btn {
	min-width: 42px;
	height: 42px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	z-index: 10;
}
    
/* Asegura coherencia tipográfica entre labels, checkboxes y enlaces */
body,
.form-check-label,
a {
  font-family: var(--bs-body-font-family) !important;
  font-size: var(--bs-body-font-size, 0.875rem); /* iguala a input-group-sm */
  font-weight: var(--bs-body-font-weight, 400);
  color: var(--bs-body-color);
}

/* Miniatura */
.thumb-wrap {
	position: relative;
	border: 1px solid #dee2e6;
	border-radius: .5rem;
	overflow: hidden;
	background: #f8f9fa;
	aspect-ratio: 4 / 3;          /* mantiene forma uniforme */
}
.thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}
.thumb-wrap:hover img { transform: scale(1.03); }
.thumb-overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.25);
	opacity: 0; transition: opacity .2s ease;
}
.thumb-wrap:hover .thumb-overlay { opacity: 1; }

/* Lightbox */
	#lightboxImg {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	background: #000;
}
.modal-dark .modal-content { background: #111; color: #fff; }
    
    
.legend-box {
    width: 20px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid #6c757d;
}
.legend-50 {
    background-color: #6E1680;
}
.legend-40 {
    background-color: #7E41B3;
}
.legend-30 {
    background-color: #916AB3;
}
.legend-25 {
    background-color: #FF0000;
}
.legend-20 {
    background-color: #FFA500;
}
.legend-15 {
    background-color: #FFFF00;
}
.legend-10 {
    background-color: #DDEBF7;
}
.legend-0 {
    background-color: #FFFFFF;
}
.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.legend-item span {
    font-size: 14px;
}
a {
  text-decoration: none;
}
body a {
  color: var(--bs-link-color) !important;
}
body a:hover {
  color: var(--bs-link-hover-color) !important;
}
.table-hover > tbody > tr:hover > * {
  background-color: #FAFA85 !important; /* verde claro */
  color: #000 !important;
}

.navbar a,
.navbar .nav-link {
  color: white !important;
}
.navbar a:hover,
.navbar .nav-link:hover {
  color: #f8f9fa !important; /* blanco más suave */
}

th {
  background-color: #007BFF!important;
  color: white!important;
}

.dash-title {
  font-size:16px;
  text-align:center;
}
.dash-value {
  font-size:40px;
}
.dash-block {
  border: 1px;
  border-style: solid;
  border-color: #C0C0C0; 
}
.dash-alert {
    background: #FADBD8
}
.alert_critical {
  background-color: red !important;
  font-weight: bold;
  color: white;
}

.sema-critical {
  color: red;
}
.sema-warning {
  color: #F7CE6F;
}
.sema-normal {
  color: #70F176;
}
/* The sidebar menu */
#myProgress {
  width: 100%;
  background-color: #F1F1F1;
}

.progress_div {
  width: 100%;
  background-color: #F1F1F1;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #70F176;
}

.progress_bar {
  width: 1%;
  height: 30px;
  background-color: #70F176;
}

.progress_bar_yellow {
  width: 1%;
  height: 30px;
  background-color: yellow;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.action_input {
  cursor: pointer;
  color: #0804FC;
  font-weight: bold;
}

.action_input:hover {
  cursor: pointer;
  color: #0300C0;
  font-weight: bold;
}

.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  background-color: #ECF0F1; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #454545;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #000000;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: white;
  color: #454545;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #000000;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

.notfavorite {
  color:#E5E7E9
}
.notfavorite:hover {
  color:#909497
}
.favorite {
  color:#F7DC6F
}
.favorite:hover {
  color:#D4AC0D
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
	width: 200px;
	height: 150px;
    font-size: 1.25em;
    font-weight: 700;
    text-align: center;
    color: black;
    background-color: #F2F3F4;
    display: inline-block;
    cursor: pointer; /* "hand" cursor */
    padding: 10px 0;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #D6EAF8;
}

.upload-file {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.upload-file + label {
    text-align: center;
    color: black;
    background-color: #F2F3F4;
    display: inline-block;
    cursor: pointer; /* "hand" cursor */
    padding: 10px 0;
}

.upload-file:focus + label,
.upload-file + label:hover {
    background-color: #D6EAF8;
}

.small-image {
  cursor: pointer;
}

.th-sorted {
  cursor: pointer;
}

.spot_red {
  height: 15px;
  width: 15px;
  background-color:red;
  border-radius: 50%;
  display: inline-block;
}

.spot_amber {
  height: 15px;
  width: 15px;
  background-color:#FFBF00;
  border-radius: 50%;
  display: inline-block;
}

.spot_green {
  height: 15px;
  width: 15px;
  background-color:green;
  border-radius: 50%;
  display: inline-block;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.tooltip-new {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip-new .tooltiptext-new {
  visibility: hidden;
  width: 150px;
  background-color: #06416A;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  top: 20px;
  right: 0%;
  z-index: 1;
}

.tooltip-new:hover .tooltiptext-new {
  visibility: visible;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}