.datos-brutos {
  margin-top: 20px;
  display: none;
}
.label-dato {
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 5px;
  display: block;
      }
      .dato-box {
          background-color: #f0f8ff; /* Azul claro */
          color: #0056b3; /* Azul fuerte */
          border: 1px solid #b3d9ff;
          border-radius: 8px;
          padding: 10px;
          font-size: 1.2rem;
          text-align: center;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      }
      .anno-box {
        background-color: #f0f8ff; /* Azul claro */
        color: #0056b3; /* Azul fuerte */
        border: 1px solid #b3d9ff;
        border-radius: 8px;
        padding: 10px;
        font-size: 1.5rem;
        text-align: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }
          /*end previous*/

          /*REFACTORED*/

        .general-summary-container {
          width: 100%; 
          padding-top: 20px; 
          display: flex; 
          gap: 20px;
        }
        .summary-container-controls {
          width: 30%; 
          background-color: #f5f5f5; 
          border-radius: 10px; 
          padding: 10px; 
          border: solid black 1px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }
        .summary-container-controls-micro {
          display: flex; 
          width: 100%;
        }
        .summary-container-dataDisplay {
          width: 80%; 
          display: flex; 
          flex-direction: column;
        }
        .dataDisplay-title {
          width: 100%; 
          height: 20%;
        }

        .dataDisplay-title h2 {
          margin-block-start:0px;
        }

        .dataDisplay-title span {
          color: #DC1914
        }

        .dataDisplay-cards {
          height: 80%;  
          /*padding: 10px; */
          display: flex; 
          justify-content: space-between; 
          gap: 7px;
        }

        .emisions-card {
          margin: auto;
          text-align: center;
          border: solid #888 1px;
          padding: 5px;
          /*text-align: center;*/
          width: 16%;
          border-radius: 15px;
        }

        .emisions-card a:hover {
          cursor: pointer;
          color: #DC1914;
        }

        .emisions-card a {
          text-decoration: none;
          color: #222222;
        }

        .emisions-card hr {
          margin-block-start: 0px;
          margin-block-end: 10px;
        }

        .emisions-card-titleContainer {
          display: flex; 
          align-items: center; 
          gap:9px; 
          justify-content: 
          space-between;padding: 7px
        }


        .emisions-card-title-icon {
          font-size: 17px;
        }

        .emisions-card-title {
          font-weight: bold;
          font-size: 15px;
          text-align: justify;
        }

        .emisions-card-quantity {
          font-weight: bold;
        }

        @media only screen and (max-width: 800px) {
          .general-summary-container {
            display: flex;
            flex-direction: column;
          }
          .summary-container-dataDisplay {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin: auto;
            text-align: center;
            justify-content: center;
          }

          .emisions-card-titleContainer {
            display: block;
            /*justify-content: center;*/
          }

          .dataDisplay-title {
            width: 100%;
            text-align: left;

          }
          .dataDisplay-cards {
            width: 100%;
          }
          .summary-container-controls {
            width: 100%;
          }
          .dataDisplay-cards {
            padding: 0;
            display: flex;
            flex-direction: column;
          }
          .emisions-card {
            width: 100%;
          }
          }