<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Animaciones, Variables y Responsive</title>
  <style>
    /* 1. Declaración de variables CSS en :root */
    :root {
      --bg-pagina: #f8fafc;
      --bg-tarjeta: #ffffff;
      --color-texto: #0f172a;
      --color-borde: #cbd5e1;
      --color-acento: #2563eb;
    }

    /* Variables para modo oscuro */
    .modo-oscuro {
      --bg-pagina: #0f172a;
      --bg-tarjeta: #1e293b;
      --color-texto: #f8fafc;
      --color-borde: #334155;
      --color-acento: #38bdf8;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: var(--bg-pagina);
      color: var(--color-texto);
      margin: 0;
      padding: 30px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .tarjeta-animada {
      background-color: var(--bg-tarjeta);
      border: 1px solid var(--color-borde);
      border-radius: 14px;
      padding: 26px;
      max-width: 480px;
      margin: 0 auto;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    /* Cabecera con luz indicadora */
    .cabecera-estado {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    /* 2. Animación con @keyframes */
    @keyframes pulso-verde {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      }
      70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }
    }

    .luz-pulso {
      width: 14px;
      height: 14px;
      background-color: #10b981;
      border-radius: 50%;
      animation: pulso-verde 2s infinite;
    }

    .btn-toggle-tema {
      background-color: var(--color-acento);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 15px;
    }

    /* 3. Media Query Responsiva */
    @media (max-width: 600px) {
      body {
        padding: 15px;
      }
      .tarjeta-animada {
        padding: 18px;
      }
    }
  </style>
</head>
<body>

  <div class="tarjeta-animada">
    <div class="cabecera-estado">
      <div class="luz-pulso"></div>
      <strong style="color: #10b981; font-size: 0.9rem; text-transform: uppercase;">
        Servidor Kilopolis en Vivo
      </strong>
    </div>

    <h2 style="margin-top: 0;">Animaciones & Variables CSS3</h2>
    <p style="font-size: 0.95rem; line-height: 1.6; opacity: 0.85;">
      El punto verde late de forma autónoma con <code>@keyframes</code>, mientras que todos los colores se consumen mediante variables <code>var(--variable)</code>.
    </p>

    <button class="btn-toggle-tema" onclick="alternarTema()">
      🌓 Alternar Tema Claro / Oscuro
    </button>
  </div>

  <script>
    function alternarTema() {
      document.body.classList.toggle('modo-oscuro');
    }
  </script>

</body>
</html>