body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    height: 100vh;
    box-sizing: border-box;
  }
  
  .container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  
  .left-panel, .right-panel {
    flex: 1;
    text-align: center;
  }
  
  .center-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Elemento LED usando la imagen PNG como fondo y máscara */
  .led {
    width: 150px;
    height: 150px;
    background-color: #ccc; /* Color inicial: LED sin color */
    /* Se utiliza solo la imagen como máscara */
    -webkit-mask-image: url("resources/ledfinal.png");
    mask-image: url("resources/ledfinal.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: brightness(1);
    transition: filter 0.3s, background-color 0.3s;
  }
  
  
  .color-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 10px;
    border: 2px solid #333;
    cursor: pointer;
    display: inline-block;
  }
  
  .slider-container {
    margin: 20px;
  }