#sinConexion {
    display: none;
    position: fixed;
    inset: 0;
    background-color: #ffffff;
    color: #721c24;
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}


    #sinConexion h1 {
      font-size: 32px;
      margin-bottom: 10px;
    }

    #sinConexion p {
      font-size: 18px;
      margin-bottom: 25px;
    }

    #sinConexion button {
      padding: 12px 24px;
      font-size: 16px;
      background-color: #5c1219;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    #sinConexion button:hover {
      background-color: #a71d2a;
    }

    .signal {
      margin-bottom: 30px;
      display: flex;
      gap: 5px;
      align-items: flex-end;
      height: 50px;
    }

    .bar {
      width: 10px;
      background: #721c24;
      border-radius: 3px;
      animation: pulse 1s infinite;
    }

    .bar:nth-child(1) { height: 10px; animation-delay: 0s; }
    .bar:nth-child(2) { height: 20px; animation-delay: 0.1s; }
    .bar:nth-child(3) { height: 30px; animation-delay: 0.2s; }
    .bar:nth-child(4) { height: 40px; animation-delay: 0.3s; }

    @keyframes pulse {
      0%, 100% { opacity: 0.3; transform: scaleY(1); }
      50% { opacity: 1; transform: scaleY(1.5); }
    }
        #contenido {
            padding: 20px;
        }