body {
      background-color: #1e1e1e;
      color: #fff;
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #00ccff;
      margin-bottom: 30px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    th, td {
      border: 1px solid #444;
      padding: 5px;
      text-align: center;
      vertical-align: top;
    }

    th {
      background-color: #333;
      color: #00ccff;
    }

    .rele {
      background-color: #2ecc71;
      padding: 10px;
      border-radius: 8px;
      transition: background-color 0.3s;
      color: #000;
      font-size: 0.9em;
    }

    .rele.activado {
      background-color: #e74c3c;
      color: #fff;
    }

    .rele input[type="text"] {
      width: 90%;
      padding: 4px;
      margin-top: 5px;
      border-radius: 4px;
      border: none;
      font-size: 0.9em;
    }

    .rele button {
      margin-top: 5px;
      padding: 5px 8px;
      font-size: 0.8em;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #444;
      color: #fff;
    }

    .rele button:hover {
      background-color: #666;
    }

    .modo {
      width: 80px;
      font-weight: bold;
      background-color: #222;
    }

    @media (max-width: 1000px) {
      table, thead, tbody, th, td, tr {
        display: block;
      }
      th {
        display: none;
      }
      td {
        margin-bottom: 10px;
      }
    }