body {
  
  padding: 0px;
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  background-color: #fcfcfc;
  
}

/* Contenedor principal */
#contenedor {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  padding: 20px;
  background-color: #ebebeb;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  
}

h2 {
  margin-bottom: 20px;
  color: #acacac;
}

form {
  width: 100%;
  margin-bottom: 20px;
}
.table-container td {
  border: 1px solid #aaaaaa;
  padding: 4px;
  text-align: center;
  position: relative;
  width: 70px;
  height: 20px;
}





#form button {
  margin-left: 0px; /* Espacio entre los botones botonesform*/
  border-color:1px grey;
  font-size: 13px;
}


button { /*botons foerm*/
  color: #000000;
  font-size: 13px;
  background-color: #e6e6e6;
  border-radius: 5px;

  border-color: #ebebeb;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
button:hover {
  background-color: #d1d1d1;
  color: #BF0000;
  
  border-color: #f1f1f1;
}

.qc-100 {
  background-color: #75d16b;  /* Verd fosc */
  color: white;
}

.qc-99 {
  background-color: #adff5c;  /* Verd clar */
}

.qc-50 {
  background-color: #FFFF00;  /* Groc */
}

.qc-0 {
  background-color: #fd847b;  /* Taronja */
  color: white;
}

.qc-nd {
  background-color: #ccc;     /* Gris per sense dades */
  color: black;
}






.mes-sin-datos-futuro {
  background-color: #CCCCCC; /* Gris para meses futuros sin datos */
  color: black;
}

/* Tooltip */
#infoQC {
  position: absolute;
  display: none;
  background-color: #797979;
  color: white;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 4px #797979;
  font-size: 13px;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-40px, -115px);
}

#infoQC.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Saturación de celdas */
.celda-saturada {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.1) 50%, transparent 90%);
  transition: background-image 0.3s ease;
}

/* Estilos para el formulario */
#consultaForm {
  margin-left: 50px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

/* Estilo para las leyendas */
.legend-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-left: 40px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.color-box {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: 1px solid #ccc;
}

.greenfosc {
  background-color: #75d16b; /* Verd fosc per a 100% */
}

.green {
  background-color: #adff5c; /* Verd clar per a >= 99% */
}

.yellow {
  background-color: #FFFF00; /* Groc per a >= 50% */
}

.orange {
  background-color: #fd847b; /* Taronja per a >= 0% */
}

.grey {
  background-color: #ccc; /* Gris per 0% o sense dades */
}


/* Estilos para el contenedor sticky */
#sticky-container {
  position: sticky;
  top: 10px;
  z-index: 2;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10PX;
  display: flex;
  align-items: center;
}

/* Aseguramos que los botones estén alineados correctamente */
#consultaForm button {
  cursor: pointer;
}

#downloadCsvBtn {
  margin-top: -10px;
}

/* Elimina márgenes y paddings entre tablas */
#gridContainer {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Opcional: Asegurar márgenes internos mínimos para las tablas */

.table-container {
  margin-top: 20px;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}


a[title="SPGIC - Servei de Posicionament Geodèsic Integrat de Catalunya"] {
  margin-left: auto;
  padding-right: 50px; /* Siempre a 50px del borde derecho del título */
}

/* Amplada i centrament de totes les cel·les */
.table-container th {
  font-weight: normal;  /* 🔸 Elimina el bold */
  text-align: center;
  width: 70px;
  padding: 4px;
}



.total-global {
  background-color: #00000082;   /* negre */
  color: #fff;              /* text blanc */
}