Componente de alerta de tiempo de espera de sesión

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 font-mono">
  <div class="relative w-full max-w-md mx-auto p-6 border-2 border-green-500 bg-gray-800 text-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-50 overflow-hidden
              before:content-[''] before:absolute before:inset-0 before:border-t-2 before:border-l-2 before:border-green-500 before:pointer-events-none before:animate-pulse-border
              after:content-[''] after:absolute after:inset-0 after:border-b-2 after:border-r-2 after:border-green-500 after:pointer-events-none after:animate-pulse-border-alt">
    
    <!-- Terminal Header (simulated) -->
    <div class="flex items-center space-x-2 pb-4 mb-4 border-b border-green-500">
      <span class="block w-3 h-3 bg-red-500 rounded-full"></span>
      <span class="block w-3 h-3 bg-yellow-500 rounded-full"></span>
      <span class="block w-3 h-3 bg-lime-500 rounded-full"></span>
      <div class="flex-1 text-center text-green-400 text-sm"></div>
      <span class="text-green-400 text-sm">TERMINAL::SESSION_STATUS</span>
    </div>

    <h2 class="text-2xl font-bold mb-4 text-green-400 flex items-center">
      <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
      </svg>
      SESSION EXPIRED SOON
    </h2>

    <p class="text-gray-300 text-sm mb-6 dark:text-gray-300">
      Your current session is about to expire due to inactivity.
      Please confirm to extend your session or you will be logged out.
    </p>

    <!-- Countdown Section -->
    <div class="bg-gray-900 border border-green-500 p-4 mb-6 text-center shadow-inner relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-green-900/50 to-transparent animate-pulse-background pointer-events-none"></div>
      <p class="text-green-400 text-lg sm:text-xl md:text-2xl font-bold uppercase tracking-wider mb-2 z-10 relative">
        Session Timeout In:
      </p>
      <div class="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold flex justify-center items-baseline z-10 relative">
        <span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-right">00</span>
        <span class="text-green-500 mx-1 sm:mx-2">:</span>
        <span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-left">59</span>
      </div>
      <p class="text-gray-400 text-xs sm:text-sm mt-1 z-10 relative">(minutes:seconds)</p>
    </div>

    <!-- Actions -->
    <div class="flex flex-col sm:flex-row gap-4">
      <button class="flex-1 py-3 px-6 bg-green-600 text-white font-semibold uppercase text-sm
                     hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-800
                     active:bg-green-800 transition duration-200 ease-in-out
                     border border-green-500 shadow-md transform hover:scale-105 active:scale-100
                     sm:order-1">
        <span class="flex items-center justify-center">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          EXTEND SESSION
        </span>
      </button>
      <button class="flex-1 py-3 px-6 bg-gray-700 text-gray-200 font-semibold uppercase text-sm
                     hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800
                     active:bg-gray-700 transition duration-200 ease-in-out
                     border border-gray-600 shadow-md transform hover:scale-105 active:scale-100
                     sm:order-2">
        <span class="flex items-center justify-center">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
          </svg>
          LOG OUT NOW
        </span>
      </button>
    </div>

    <!-- Background Terminal Glitch Effect (CSS for this is conceptual, would need actual JS for real glitch) -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full animate-flicker brightness-125 saturate-150" style="background-image: linear-gradient(to bottom, rgba(0,255,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,255,0,0.1) 100%); mix-blend-mode: overlay;"></div>
      <div class="absolute top-0 left-0 w-full h-full animate-scanline" style="background-image: linear-gradient(to bottom, transparent 49%, rgba(0,255,0,0.1) 50%, transparent 51%); background-size: 100% 3px;"></div>
    </div>

  </div>
</div>

<style>
  /* Keyframes for animations */
  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.01); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes pulse-border-alt {
    0% { transform: scale(1); opacity: 1;}
    50% { transform: scale(0.99); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes pulse-background {
    0% { transform: translateX(-100%); opacity: 0.2; }
    50% { transform: translateX(0%); opacity: 0.5; }
    100% { transform: translateX(100%); opacity: 0.2; }
  }
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    5% { opacity: 0.95; }
    10% { opacity: 1.05; }
    20% { opacity: 0.98; }
    30% { opacity: 1.02; }
    40% { opacity: 0.97; }
    50% { opacity: 1.03; }
    60% { opacity: 0.99; }
    70% { opacity: 1.01; }
    80% { opacity: 0.96; }
    90% { opacity: 1.04; }
  }
  @keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }

  .animate-pulse-border {
    animation: pulse-border 2.5s ease-in-out infinite;
  }
  .animate-pulse-border-alt {
    animation: pulse-border-alt 2.5s ease-in-out infinite reverse;
  }
  .animate-pulse-background {
    animation: pulse-background 3s linear infinite;
  }
  .animate-flicker {
    animation: flicker 0.5s infinite alternate;
  }
  .animate-scanline {
    animation: scanline 2s infinite linear;
  }
  .countdown-digit {
    display: inline-block;
    /* Monospace font styling for digits */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    text-shadow: 0 0 5px rgba(0,255,0,0.5), 0 0 10px rgba(0,255,0,0.3);
  }
  
  /* Dark mode specific styles */
  .dark .bg-gray-800 {
    background-color: #1a202c; /* Deeper dark for dialog */
  }
  .dark .text-gray-100 {
    color: #edf2f7; /* Lighter text in dark mode */
  }
  .dark .border-green-500 {
    border-color: #10B981; /* Maintain green accent in dark */
  }
  .dark .text-green-400 {
    color: #34D399; /* Adjust green text lightnes */
  }
  .dark .bg-gray-900 {
    background-color: #000000; /* Even darker inner background */
  }
  .dark .border-gray-600 {
    border-color: #4A5568;
  }
  .dark .text-gray-200 {
    color: #e2e8f0; /* Lighter text for secondary button */
  }
</style>