/* Contenedor en forma de "L" */
  .container {
      position: relative;
      width: 40px;
      /* Ancho total del contenedor */
      height: 272px;
      /* Altura total para representar de 2 a 600 */
      //background-color: black; /* Fondo negro */
      //border: 2px solid green; /* Borde verde */
      margin: 20px;
      background-image: url('assets/img/basti4.png');
      /* Ruta a la imagen de fondo */
      background-size: cover;
      /* Ajusta la imagen para que cubra todo el contenedor */
      background-position: center;
      /* Centra la imagen */
      background-repeat: no-repeat;
  }

  /* Parte blanca que representa la forma de "L" */
  .L-shape {
      position: absolute;
      top: 5;
      left: 0;
      width: 60px;
      /* Ancho de la parte vertical de la "L" */
      height: 100%;
      /* Altura completa de la "L" */
      //background-color: white;
  }

  /* Sección horizontal de la "L" */
  .L-shape::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 10px;
      /* Alineado con la parte vertical de la "L" */
      width: 70px;
      /* Ancho de la parte horizontal */
      height: 5px;
      /* Altura de la parte horizontal */
      background-color: #ffc846;
  }

  /* Rectángulo azul movible */
  .moving-rectangle {
      position: absolute;
      left: 40px;
      /* Alineado con el borde derecho de la parte vertical */
      width: 40px;
      height: 45px;
      //border: 1px solid green;
      //background-color: grey;
      background-image: url('assets/img/cabezalf1.png');
      /* Ruta a la imagen de fondo */
      background-size: cover;
      /* Ajusta la imagen para que cubra todo el contenedor */
      background-position: center;
      /* Centra la imagen */
      background-repeat: no-repeat;



  }

  .operando {
      color: green;
  }

  .detenido {
      color: red;
  }

  @font-face {
      font-family: 'DS-DIGI';
      src: url('assets/webfonts/DS-DIGI.TTF') format('truetype');
      font-weight: normal;
      font-style: normal;
  }

  .reloj-digital {
      font-family: 'DS-DIGI', monospace;
      font-size: 28px;
      /* Ajusta el tamaño según lo necesites */
      color: #00FF00;
      /* Color verde típico de relojes digitales */
      background-color: #434343;
      /* Fondo negro */
      padding: 1px;
      border-radius: 12px;
      text-align: center;
      width: 230px;
      border-radius: 12px;
      border: 5px solid #999;
      /* Grosor y color del borde */

  }

  .contenedor-barra {
      width: 50px;
      height: 300px;
      background: #e0e0e0;
      border: 4px solid #999;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      display: inline-block;
  }

  .barra-altura {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 0%;
      background: #4CAF50;
      transition: height 0.5s ease;
  }

  .valor-altura {
      font-size: 22px;
      margin-top: 8px;
      text-align: center;
      font-weight: bold;
  }

  .titulo-altura {
      font-size: 14px;
      font-weight: normal;
      margin-bottom: 1px;
  }

  /* Línea que marca el centro */
  .linea-centro {
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #838383;
      top: 50%;
      left: 0;
      z-index: 2;
  }

  .etiqueta-centro {
      position: absolute;
      top: 50%;
      left: 60px;
      /* distancia a la derecha de la barra */
      transform: translateY(-50%);
      font-size: 14px;
      font-weight: bold;
      color: #333;
      white-space: nowrap;
  }

  .contenedor-externo {
      display: flex;
      justify-content: center;
      /* Centra horizontalmente */
      position: relative;
  }

  .grafico-altura {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Centrado horizontal */
      //justify-content: center; /* Centrado vertical si se requiere */
      margin: 5px;
  }