1  <script lang="ts">
  2    import { page } from '$app/stores';
  3    import { browser } from '$app/environment';
  4    
  5    export {};
  6    
  7    // Variables para datos reactivos
  8    let pageStatus = 404;
  9    let pageError = { message: 'Error desconocido' };
 10    
 11    // Procesamiento reactivo después de export
 12    $: if ($page) {
 13      pageStatus = $page.status;
 14      pageError = $page.error;
 15    }
 16  </script>
 17  
 18  <div class="error-container">
 19    <div class="error-logo">
 20      <img src="/logo.png" alt="CelestiumOS Logo" class="logo-img" />
 21      <span class="logo-text">CelestiumOS</span>
 22    </div>
 23    
 24    <div class="error-content">
 25      <div class="error-code">{pageStatus}</div>
 26      <h1 class="error-title">
 27        {#if pageStatus === 404}
 28          Página no encontrada
 29        {:else if pageStatus === 500}
 30          Error interno del servidor
 31        {:else}
 32          Error {pageStatus}
 33        {/if}
 34      </h1>
 35      <p class="error-message">{pageError?.message || 'Ha ocurrido un error inesperado'}</p>
 36      <div class="error-actions">
 37        <a href="/" class="home-button">Ir a la página de inicio</a>
 38        {#if pageStatus === 500}
 39          <a href="/?mock=true" class="mock-button">Usar datos simulados</a>
 40        {/if}
 41      </div>
 42    </div>
 43  </div>
 44  
 45  <style>
 46    .error-container {
 47      display: flex;
 48      flex-direction: column;
 49      align-items: center;
 50      justify-content: center;
 51      height: 100vh;
 52      width: 100%;
 53      padding: 0 20px;
 54      box-sizing: border-box;
 55      text-align: center;
 56      background-color: var(--bg-primary, #ffffff);
 57      color: var(--text-color, #333333);
 58    }
 59  
 60    .error-logo {
 61      display: flex;
 62      align-items: center;
 63      gap: 10px;
 64      margin-bottom: 40px;
 65    }
 66    
 67    .logo-img {
 68      width: 40px;
 69      height: 40px;
 70      object-fit: contain;
 71    }
 72    
 73    .logo-text {
 74      font-size: 24px;
 75      font-weight: 600;
 76      color: var(--primary);
 77    }
 78    
 79    .error-content {
 80      max-width: 600px;
 81      display: flex;
 82      flex-direction: column;
 83      align-items: center;
 84    }
 85  
 86    .error-code {
 87      font-size: 120px;
 88      font-weight: 700;
 89      color: var(--primary);
 90      line-height: 1;
 91      margin-bottom: 20px;
 92      opacity: 0.2;
 93      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 94    }
 95  
 96    .error-title {
 97      font-size: 36px;
 98      margin: 0 0 20px;
 99      font-weight: 600;
100    }
101  
102    .error-message {
103      font-size: 18px;
104      margin-bottom: 40px;
105      color: var(--text-secondary, #666666);
106      line-height: 1.6;
107    }
108  
109    .error-actions {
110      display: flex;
111      gap: 16px;
112      justify-content: center;
113      flex-wrap: wrap;
114    }
115  
116    .home-button, .mock-button {
117      padding: 12px 24px;
118      border-radius: 6px;
119      font-weight: 500;
120      text-decoration: none;
121      transition: all 0.2s ease;
122    }
123  
124    .home-button {
125      background-color: var(--primary);
126      color: white;
127      box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.25);
128    }
129  
130    .home-button:hover {
131      background-color: var(--primary-dark, #0056b3);
132      transform: translateY(-1px);
133      box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
134    }
135  
136    .mock-button {
137      background-color: transparent;
138      border: 1px solid var(--border-color);
139      color: var(--text-secondary);
140    }
141  
142    .mock-button:hover {
143      border-color: var(--primary);
144      color: var(--primary);
145      background-color: rgba(var(--primary-rgb), 0.05);
146    }
147  
148    @media (max-width: 480px) {
149      .error-code {
150        font-size: 80px;
151      }
152  
153      .error-title {
154        font-size: 28px;
155      }
156  
157      .error-message {
158        font-size: 16px;
159      }
160  
161      .error-actions {
162        flex-direction: column;
163        width: 100%;
164        max-width: 280px;
165      }
166  
167      .home-button, .mock-button {
168        width: 100%;
169        text-align: center;
170        padding: 14px 24px;
171      }
172    }
173  </style>