#wrapper {
        width: 100%;
        margin: 0 auto;
        background-color: #f0f0f0;
        padding: 5px;
        }
        .card-body{      /* CAJA COTENEDORA DE LAS TARJETAS 1 FILA */
            height: 60px; /* ALTURA CAJA */
            margin-top: 2px;
            margin-right: 10px;
            margin-bottom: 80px;
            margin-left: 10px;
        }
        .card-body-lateral{  /* CAJA COTENEDORA DE LAS TARJETAS LATERALES */
            height: 100px;
        }
        .card-body-plot{ /* CAJA COTENEDORA DEL PLOT */
            height: 580px;
       
        }
        .card-body-plot1{ /* CAJA COTENEDORA DEL PLOT */
            height: 560px;
       
        }
        #grafico {   /* AJUSTE DEL PLOT */
            width: 100%; /* Ancho al 100% de la ventana */
            height: 570px; /* Altura del 100% de la ventana */

        }
        #grafico-1 {   /* AJUSTE DEL PLOT */
            width: 100%; /* Ancho al 100% de la ventana */
            height: 570px; /* Altura del 100% de la ventana */

        }
         #footer-alt {   /* AJUSTE DEL PLOT */
            width: 100%; /* Ancho al 100% de la ventana */
            height: 20px; /* Altura del 100% de la ventana */

        }
        .row    {
            width: 100%;
        }
        .col-lateralL{
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .text-container-Titulo{
        font-size: 10px;  /*  1 tamaño de la fuente de cabecera */
        font-weight: normal;
        text-transform: uppercase; 
        text-align: justify;

        }
        .subtitulo {  /*  2 tamaño de la fuente de cabecera */
            font-size: 22px; 
            font-weight: bold; /* Puedes ajustar el peso de la fuente según tus preferencias */
            color: white; /* Puedes ajustar el color del texto según tus preferencias */
            align-items: center;
            text-transform: uppercase;
        }
        .text-container-Pie {  /*  2 tamaño de la fuente de cabecera */
        font-size: 18px; 
        font-weight: bold; /* Puedes ajustar el peso de la fuente según tus preferencias */
        color: white; /* Puedes ajustar el color del texto según tus preferencias */
        align-items: center;
        text-transform: uppercase;
        }
        .subtituloHora { /*  3 tamaño de la fuente de cabecera */
        font-size: 20px; 
        font-weight: bold; /* Puedes ajustar el peso de la fuente según tus preferencias */
        color: white; /* Puedes ajustar el color del texto según tus preferencias */
        text-align: right;
        text-transform: uppercase;
        }



        
        #clima {

              width: 300px;

              padding: 10px;

              background-color: #f1f1f1;

              border: 1px solid #ccc;

              border-radius: 4px;

              font-family: Arial, sans-serif;

         }
        .icono {  /*    TAMAÑO DEL ICONO CLIMA*/
          width: 50px;
          height: 50px;

        }
          .icon { /*    TAMAÑO DEL ICONO SOFTRONICA*/
            width: 80px;
            height: 80px;
        }
        .icono-co2 {  /*    TAMAÑO DEL ICONO CLIMA*/

          width: 250px;
          height: 120px;
          padding: 10px 20px; /* Margen interno de 10px arriba y abajo, 20px a la izquierda y derecha */

        }
        .icono-carbon {  /*    TAMAÑO DEL ICONO CLIMA*/

          width: 200px;
          height: 100px;

        }
        .icono-arbol {  /*    TAMAÑO DEL ICONO CLIMA*/

          font-size: 20px;

        }


        .nav-item1 {
        margin-top: 0;
        margin-bottom: 0;
        }
        .custom-font {
        font-size: 21px;  /*  tamaño de la fuente de cabecer primeraa */
        font-weight: bold;
        align-items: center;
        text-transform: uppercase; 
        color: #4e73df; /* Puedes 1cc88a cambiar esto al color que desees #4e73df!important*/
        }
        .custom-font1 {
        font-size: 40px;  /*  tamaño de la fuente de METRICAS cabecera */
        font-weight: bold;
        color: #5a5c69; /* Puedes cambiar esto al color que desees */
        }
        .custom-fontLateral {
        font-size: 21px;  /*  tamaño de la fuente de Título LATERAL */
        font-weight: bold; 
        text-transform: uppercase; 
        color: #4e73df; /* Puedes cambiar esto al color que desees */
         padding: 10px 10px; /* Margen interno de 10px arriba y abajo, 20px a la izquierda y derecha */
        }
        .display-5{    
        font-size: 46px; /* Tamaño de la fuente de METRICAS LATERAL reducido en 10px */
        font-weight: bold;
        color: #5a5c69; /* Puedes cambiar esto al color que desees */
        text-align: right; /* Alinea el texto a la derecha */
        display: flex;
        align-items: center; /* Centra verticalmente el texto */
        padding: 20px; /* Margen interno de 10px alrededor del texto */

        }
        .custom-fontPlot {
        font-size: 21px;  /*  tamaño de la fuente de METRICAS cabecera */
        font-weight: bold;
        text-transform: uppercase; 
        color: #4e73df; /* Puedes cambiar esto al color que desees */
         padding: 10px 20px; /* Margen interno de 10px arriba y abajo, 20px a la izquierda y derecha */
        }



        .flex-row-1 {
        
        margin-bottom: 10px; /* cabecera */
            /* Puedesagregar más estilos según tus necesidades */
        }
        .card-header-1 {
        background-color: #195634; /* Color de fondo verde */
        color: white; /* Color de texto blanco para que sea legible en el fondo verde */
        padding: 1rem; /* Espaciado interno para el contenido dentro del card-header */
        margin-bottom: 20px; /* entre título y primera fila cabecera */
        align-items: center;
        justify-content: space-between;
        height: 120px;  /* Establece la altura deseada para el contenedor principal */
        }
        .card-header-2 {
        background-color: #195634; /* Color de fondo verde */
        padding: 2rem; /* Espaciado interno para el contenido dentro del card-header */
        margin-top: 2px; /* entre título y primera fila cabecera */
        align-items: center;
        height:40px;  /* Establece la altura deseada para el contenedor principal */
        display:flex;
        justify-content: center;
        line-height: 200px;
        }
        .texto-blanco {
        color: white; /* Cambia el color del texto a blanco */
        font-weight: bold;
        text-transform: uppercase; 
    
        }
        .texto-blancoPie {
        color: white; /* Cambia el color del texto a blanco */
        font-weight: bold;
        text-transform: uppercase; 
    
        }
        /* Estilos para el logotipo y el contenedor del logotipo */

        .logo-container {
            height: 100%; /* Asegura que el contenedor del logo ocupe el 100% de la altura de card-header-1 */
        }

        .logo-wrapper {
            display: flex;
            align-items: center;
            height: 100%; /* Asegura que el contenedor del logo ocupe el 100% de la altura del contenedor del logo */
        }

        .logo {
            height: 80px; /* Altura del logo */
            width: auto; /* Ancho se ajustará automáticamente para mantener las proporciones */
            margin-left: 0;
            padding-left: 0;
            float: left; /* Alinea el logo a la izquierda */
        }