diff --git a/css/timeline.css b/css/timeline.css
new file mode 100644
index 0000000..2b32ae4
--- /dev/null
+++ b/css/timeline.css
@@ -0,0 +1,73 @@
+ :root {
+ /* Paleta de el tiempo */
+    --color-primario: #F5F5F5;   
+    --color-hover: #1E3A5F;      
+    --color-secundario: #A1A1A1; 
+    --color-fondo: #0D0D0D;      
+    --color-texto: #E5E5E5;   
+    --blanco-puro: #FFFFFF;
+    --sombra: rgba(47, 58, 86, 0.15);
+    --color-tarjeta: #1A1A1A;
+    --color-acento: #a4d7f4;
+    --gray: #acb3bf;
+    --color-borde: rgba(95, 174, 219, 0.3);
+    --color-cabecera: rgba(0,0,0,0.80);
+
+    --bg-vs: #1e1e1e; /* Fondo principal */
+    --bg-nav: #252526; /* Fondo de barra de navegación */
+    --bg-card: #2d2d2d; /* Fondo de tarjetas/secciones */
+    --keyword: #aaffff; /* Azul grisaceo  */
+    --string: #ce9178; /* Naranja/Salmón (textos) */
+    --comment: #6a9955; /* Verde (comentarios) */
+    --var-name: #9cdcfe; /* Azul claro (variables) */
+    --text: #d4d4d4; /* Gris claro (texto normal) */
+    --border-editor: #3e3e42; /* Color de bordes y líneas */
+}
+.timeline {
+    position: relative;
+    max-width: 800px;
+    margin: auto;
+    padding: 40px 0;
+}
+
+.timeline h2 {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.timeline::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    width: 4px;
+    height: 100%;
+    background: #ddd;
+    transform: translateX(-50%);
+}
+
+.timeline-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+}
+
+.timeline-item:nth-child(odd) {
+    flex-direction: row-reverse;
+}
+
+.timeline-date {
+    width: 45%;
+    text-align: right;
+    font-weight: bold;
+}
+
+.timeline-item:nth-child(odd) .timeline-date {
+    text-align: left;
+}
+
+.timeline-content {
+    width: 45%;
+    background: var(--color-tarjeta);
+    padding: 15px;
+    border-radius: 6px;
+}
\ No newline at end of file
diff --git a/eltiempo/servidor/api-weather-reverse.php b/eltiempo/servidor/api-weather-reverse.php
old mode 100755
new mode 100644
diff --git a/eltiempo/servidor/api-weather.php b/eltiempo/servidor/api-weather.php
old mode 100755
new mode 100644
diff --git a/formacion.html b/formacion.html
index 41ab8e8..08edf28 100644
--- a/formacion.html
+++ b/formacion.html
@@ -65,6 +65,52 @@
     </nav>
 </header>
 <main class="container main-content py-5">
+<<<<<<< HEAD
+
+   <section class="timeline">
+    <h2>Formación</h2>
+
+    <div class="timeline-item">
+        <div class="timeline-date">2025</div>
+        <div class="timeline-content">
+            <h3>IFCD0034 Programación con .NET</h3>
+            <p>Curso de programación con el framework .NET. Grupo Colón.</p>
+        </div>
+    </div>
+
+    <div class="timeline-item">
+        <div class="timeline-date">2025</div>
+        <div class="timeline-content">
+            <h3>IFCT052P0 Gestión de sistemas VMware</h3>
+            <p>Curso de virtualización de sistemas y aplicaciones con VMware. Grupo Colón.</p>
+        </div>
+    </div>
+    
+    
+    <div class="timeline-item">
+        <div class="timeline-date">2024</div>
+        <div class="timeline-content">
+            <h3>FPGS Desarrollo de Aplicaciones Multiplataforma (DAM)</h3>
+            <p>Formación profesional superior en desarrollo de software.</p>
+            <div class="timeline-centro">UNIR</div>
+        </div>
+    </div>
+   
+    <div class="timeline-item">
+        <div class="timeline-date">2023</div>
+        <div class="timeline-content">
+            <h3>IFCD0210 Desarrollo de Aplicaciones con Tecnologías Web</h3>
+            <p>Curso de desarrollo web (HTML, CSS, JavaScript, PHP, MySQL, XAMPP, GitHub).</p>
+            <div class="timeline-centro">Grupo Colón</div>
+        </div>
+    </div>
+</main>
+
+<footer>
+    <div class="footer">
+        <div class="footer">
+            <div>Página realizada íntegramente con código: PHP, JavaScript, HTML y CSS</div>
+=======
     
         <div class="accordion mt-4 timeline" id="accordionExample">
                 <div class="card-header" id="headingOne">
@@ -134,6 +180,7 @@
         <div class="footer">
             <div class="footer">
                 <div>Página realizada íntegramente con código: PHP, JavaScript, HTML y CSS</div>
+>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
                 <div id="copyright">copyright</div>
             </div>
         </div>
diff --git a/formula1/css/estilos.css b/formula1/css/estilos.css
new file mode 100644
index 0000000..3fe582a
--- /dev/null
+++ b/formula1/css/estilos.css
@@ -0,0 +1,74 @@
+:root {
+            --f1-red: #a00000;
+            --dark-bg: #15151e;
+            --card-bg: #1f1f27;
+            --text: #ffffff;
+            --border-color: #38383f;
+            --titulo-color: #ff4c4c;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--dark-bg);
+            color: var(--text);
+            margin: 0;
+            padding: 20px;
+        }
+
+        header {
+            padding-bottom: 10px;
+            margin-bottom: 30px;
+            text-align: center;
+            color: var(--titulo-color);
+        }
+
+        .dashboard {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .stat-card {
+            background-color: var(--card-bg);
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 4px solid var(--f1-red);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+        }
+
+        th, td {
+            text-align: left;
+            padding: 8px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        th { 
+            color: var(--titulo-color); 
+            font-size: 0.8rem; 
+            text-transform: uppercase; 
+        }
+
+        .pos { 
+            font-weight: bold; 
+            color: var(--f1-red); 
+        }
+
+        .cuenta-atras { 
+            margin-bottom: 15px; 
+            text-align: center; 
+            border-bottom: 4px solid var(--f1-red);
+        }
+
+        #countdown { 
+            font-size: 2rem; 
+            font-weight: bold; 
+            letter-spacing: 2px; 
+        }
+
+
+        
\ No newline at end of file
diff --git a/formula1/index.html b/formula1/index.html
index 57f2ad7..3acacc6 100644
--- a/formula1/index.html
+++ b/formula1/index.html
@@ -3,17 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<<<<<<< HEAD
+    <title>Estadísticas F1</title>
+    <link rel="stylesheet" href="css/estilos.css">
+=======
     <title>F1 Stats Pro - Panel de Control</title>
     <link rel="stylesheet" href="css/f1.css">
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
 </head>
 <body>
 
     <header>
         <h1>Estadísticas F1</h1>
+<<<<<<< HEAD
+        <h2  style="color: #bbbb00; border: 1px solid #bbbb00; padding: 10px; border-radius: 5px; width: fit-content; text-align: center;">PÁGINA EN CONSTRUCCIÓN</h2>
+    </header>
+
+    <section class="stat-card cuenta-atras">
+    <h3> Cuenta atrás para el GP de Australia 2026</h3>
+=======
     </header>
 
     <section class="stat-card cuenta-atras">
     <h3 > Cuenta atrás para el GP de Australia 2026</h3>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
     <div id="countdown">
         00d 00h 00m 00s
     </div>
@@ -26,11 +39,20 @@
                     <thead>
                         <tr>
                             <th>#</th>
+<<<<<<< HEAD
+                            <th>Código</th>
+                            <th>Nombre</th>
+                            <th>Apellido</th>
+                            <th>Escuderia</th>
+                            <th>Nacionalidad</th>
+                            
+=======
                             <th>Nombre</th>
                             <th>Apellido</th>
                             <th>Equipo</th>
                             <th>Nacionalidad</th>
                             <th>Código</th>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
                         </tr>
                     </thead>
                     <tbody>
@@ -38,6 +60,12 @@
                     </tbody>
                 </table>
         </section>
+<<<<<<< HEAD
+            
+    </main>
+
+    <script src="js/codigo.js"></script>
+=======
             <section class="stat-card">
                 <h3 id="session-info">Equipos</h3>
                 <table id="equipos-table">
@@ -57,5 +85,6 @@
     </main>
 
     <script src="js/f1.js"></script>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
 </body>
 </html>
\ No newline at end of file
diff --git a/formula1/js/codigo.js b/formula1/js/codigo.js
new file mode 100644
index 0000000..8390e0e
--- /dev/null
+++ b/formula1/js/codigo.js
@@ -0,0 +1,126 @@
+// ===============================
+// FUNCIONES DE CONSULTA API
+// ===============================
+
+// Obtener calendario completo de la temporada actual
+async function obtenerCalendario() {
+    try {
+        const response = await fetch("https://api.jolpi.ca/ergast/f1/current.json");
+        const data = await response.json();
+        const carreras = data.MRData.RaceTable.Races;
+        return carreras;
+    } catch (error) {
+        console.error("Error al obtener calendario:", error);
+        return [];
+    }
+}
+
+// Encontrar la siguiente carrera
+function encontrarSiguienteCarrera(carreras) {
+    const ahora = new Date();
+    for (let carrera of carreras) {
+        const fecha = new Date(`${carrera.date}T${carrera.time || '00:00:00Z'}`);
+        if (fecha > ahora) {
+            return { ...carrera, fecha };
+        }
+    }
+    return null;
+}
+
+// ===============================
+// CUENTA ATRÁS DINÁMICA
+// ===============================
+function iniciarCuentaAtras(fechaCarrera) {
+    const countdown = document.getElementById("countdown");
+
+    function actualizar() {
+        const ahora = new Date();
+        const diff = fechaCarrera - ahora;
+
+        if (diff <= 0) {
+            countdown.textContent = "🏁 ¡La carrera empezó!";
+            return;
+        }
+
+        const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
+        const horas = Math.floor((diff / (1000 * 60 * 60)) % 24);
+        const minutos = Math.floor((diff / (1000 * 60)) % 60);
+        const segundos = Math.floor((diff / 1000) % 60);
+
+        countdown.textContent = `${dias}d ${horas}h ${minutos}m ${segundos}s`;
+    }
+
+    actualizar();
+    setInterval(actualizar, 1000);
+}
+
+// ===============================
+// PILOTOS
+// ===============================
+async function cargarPilotos() {
+    try {
+        const response = await fetch('/f1/api/pilotos');
+        const pilotos = await response.json();
+        const tbody = document.querySelector('#pilotos-table tbody');
+
+        tbody.innerHTML = ''; // Limpiamos antes de rellenar
+
+        pilotos.forEach(p => {
+            const fila = document.createElement('tr');
+            fila.innerHTML = `
+                <td>${p.numero}</td>
+                <td>${p.codigo}</td>
+                <td>${p.nombre}</td>
+                <td>${p.apellido}</td>
+                <td>${p.escuderia || '-'}</td>
+                <td>${p.nacionalidad}</td>
+            `;
+            tbody.appendChild(fila);
+        });
+    } catch (error) {
+        console.error('Error cargando pilotos:', error);
+        const tbody = document.querySelector('#pilotos-table tbody');
+        tbody.innerHTML = `<tr><td colspan="6">No se pudieron cargar los pilotos</td></tr>`;
+    }
+}
+
+// ===============================
+// INIT PRINCIPAL
+// ===============================
+async function init() {
+    // 1) Obtener calendario
+    const carreras = await obtenerCalendario();
+
+    // 2) Calcular siguiente evento
+    const proxima = encontrarSiguienteCarrera(carreras);
+
+    if (!proxima) {
+        document.getElementById("countdown").textContent =
+            "No hay próximos Grandes Premios este año";
+        return;
+    }
+
+    // 3) Mostrar nombre de la próxima carrera
+    document.querySelector(".cuenta-atras h3").textContent =
+        `Cuenta atrás para el GP de ${proxima.raceName}`;
+
+    // 4) Iniciar cuenta atrás
+    iniciarCuentaAtras(proxima.fecha);
+
+    // 5) Indicar modo carrera o pronóstico
+    const ahora = new Date();
+    if (ahora >= proxima.fecha) {
+        document.getElementById("session-info").textContent =
+            "Modo carrera — datos en vivo o resultados";
+    } else {
+        document.getElementById("session-info").textContent =
+            `Próxima sesión de ${proxima.raceName}`;
+    }
+
+// Cargar pilotos al inicio y cada minuto
+cargarPilotos();
+setInterval(() => { cargarPilotos(); }, 60000);
+}
+
+// Arrancar todo al cargar la página
+document.addEventListener("DOMContentLoaded", init);
\ No newline at end of file
diff --git a/oposiciones/css/estilos.css b/oposiciones/css/estilos.css
index 8184ed7..4f0d3ea 100644
--- a/oposiciones/css/estilos.css
+++ b/oposiciones/css/estilos.css
@@ -53,6 +53,29 @@ header h1 {
     margin: 0;
 }
 
+/* Navbar */
+.navbar {
+    background-color: var(--color-cabecera); /* var(--color-cabecera) con opacidad */
+    border-bottom: 2px solid var(--color-borde);
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: var(--color-acento) !important;
+}
+
+.nav-link {
+    color: var(--color-texto) !important;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.nav-link:hover {
+    color: var(--color-acento) !important;
+}
+
+
 /* ======================
    TITULOS
 ====================== */
diff --git a/oposiciones/index.html b/oposiciones/index.html
index 45f62bf..88884e0 100644
--- a/oposiciones/index.html
+++ b/oposiciones/index.html
@@ -6,15 +6,38 @@
 </head>
 <body>
     <header>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
         <link rel="icon" href="tatianalogo.png" type="image/x-icon">
         <link rel="stylesheet" href="css/estilos.css">
-        <h1>Temario TAI – AGE</h1>  
-        
-        <nav>
-            <ul>
-                <li><a href="index.html">Temario</a></li>
-                <li><a href="cuestionarios/index.html">Cuestionarios</a></li>
-            </ul>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+        <nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
+        <div class="container-fluid">
+
+            <!-- Logo -->
+            <a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
+                <span class="text-primary">{</span>Técnico Auxiliar Informático<span class="text-primary">}</span> Admin. del Estado
+            </a>
+
+             <!-- Botón móvil -->
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav"
+                    aria-controls="menuNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Menú -->
+            <div class="collapse navbar-collapse justify-content-end" id="menuNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item"><a class="nav-link" href="index.html">Temario</a></li>
+                    <li class="nav-item"><a class="nav-link" href="cuestionarios/index.html">Cuestionarios</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://tatvil.github.io/apuntes-taiage/">apuntes.md</a></li>
+                </ul>
+            </div>
+
+        </div>
+    </nav>
+
     </header>
 
 
diff --git a/proyectos.html b/proyectos.html
index 4dfa5d8..7d7f790 100644
--- a/proyectos.html
+++ b/proyectos.html
@@ -76,7 +76,6 @@
 
                 <div class="col-md-6 col-lg-4">
                     <div class="card project-card h-100">
-
                         <div class="card-body">
                             <h5 class="card-title fw-bold">El Tiempo</h5>
                             <p class="card-text text-muted">Guardo los datos del tiempo de 3 ciudades españolas que me interesan (Madrid, L'Ampolla (Tarragona), L'Alfas del Pi (Alicante)) con fines estadísticos. </p>
@@ -86,6 +85,19 @@
                     </div>
                 </div>
 
+                <div class="col-md-6 col-lg-4">
+                    <div class="card project-card h-100">
+
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">Formula 1</h5>
+                            <p class="card-text text-muted">Web de estadísticas de Fórmula 1.</p>
+                            <p class="card-text text-muted card-tecnologia">Java, Spring, Hibernate, JPA, MySQL, HTML, CSS, JavaScript.</p>
+                            <a href="formula1/index.html" class="btn-link">Saber más →</a>
+                        </div>
+                    </div>
+                </div>
+
+
                 <div class="col-md-6 col-lg-4">
                     <div class="card project-card h-100">