<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Eje Z y Capas CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f5f9;
      margin: 0;
      padding: 30px;
      color: #0f172a;
    }

    /* Tarjetas de fondo (capa base) */
    .tarjeta-base {
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 20px;
      max-width: 480px;
      margin-bottom: 20px;
    }

    /* Capa de velo oscuro (Backdrop) */
    .overlay-velo {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.65);
      z-index: 10; /* Por encima de la página */
    }

    /* Cuadro modal emergente */
    .modal-flotante {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 12px;
      padding: 26px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
      z-index: 20; /* Por encima del velo oscuro */
      text-align: center;
    }

    .btn-abrir {
      background: #2563eb;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="tarjeta-base">
    <h3>Contenido de Fondo en Kilopolis</h3>
    <p style="color: #64748b; font-size: 0.95rem;">
      Esta tarjeta tiene un nivel de profundidad ordinario en la página. Haz clic abajo para abrir un diálogo modal con z-index superior:
    </p>
    <button class="btn-abrir" onclick="abrirModal()">
      Abrir Ventana Modal &raquo;
    </button>
  </div>

  <!-- Capa 1: Fondo Oscuro (z-index: 10) -->
  <div id="miVelo" class="overlay-velo" onclick="cerrarModal()"></div>

  <!-- Capa 2: Modal (z-index: 20) -->
  <div id="miModal" class="modal-flotante">
    <h3 style="margin-top: 0; color: #1e40af;">Ventana Modal Activa</h3>
    <p style="color: #475569; font-size: 0.9rem;">
      Este elemento tiene <code>z-index: 20</code>, flotando por encima del velo oscuro (<code>z-index: 10</code>).
    </p>
    <button class="btn-abrir" style="background: #0f172a;" onclick="cerrarModal()">
      Cerrar Diálogo
    </button>
  </div>

  <script>
    function abrirModal() {
      document.getElementById('miVelo').style.display = 'block';
      document.getElementById('miModal').style.display = 'block';
    }
    function cerrarModal() {
      document.getElementById('miVelo').style.display = 'none';
      document.getElementById('miModal').style.display = 'none';
    }
  </script>

</body>
</html>