/* --- Configuración Global y Fuentes --- */
body {
    font-family: 'Lato', sans-serif; /* Usamos Lato para el texto normal */
    line-height: 1.7;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* Un gris un poco más suave */
    color: #333;
    transition: background-color 0.4s, color 0.4s; /* Transición suave para el modo oscuro */
}

/* --- Encabezado --- */
header {
    background-color: #004080; /* El color principal que te gustó */
    color: #ffffff;
    padding: 2rem 1rem;
    text-align: center;
    border-bottom: 4px solid #002a53; /* Borde inferior más oscuro */
    transition: background-color 0.4s, border-color 0.4s;
}

header h1 {
    font-family: 'Roboto', sans-serif; /* Roboto para títulos */
    margin: 0;
    font-size: 2.8rem;
    font-weight: 700;
}

header p {
    margin: 0.25rem 0 0 0;
    font-size: 1.2rem;
    color: #cce0ff; /* Un azul claro para el subtítulo */
}

/* Estilos para el logo y título en el encabezado */
.logo-navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.logo-grande {
    height: 150px; /* Ajusta según la altura del navbar */
    width: auto;
    object-fit: contain;
}

/* Contenedor de texto centrado */
.titulo-encabezado {
    flex: 1 1 300px;
}

.titulo-encabezado h1,
.titulo-encabezado p {
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

/* Responsivo: en pantallas pequeñas, apila verticalmente */
@media (max-width: 600px) {
    .logo-navbar {
        flex-direction: column;
        align-items: center;
    }

    .logo-grande {
        height: 60px;
    }
}

/* --- Barra de Navegación (NUEVO DISEÑO CON BOTONES) --- */
nav {
    background-color: #333;
    padding: 12px 10px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    /* Usamos flexbox para alinear y espaciar */
    display: flex;
    justify-content: flex-start; /* Alinea los botones al inicio por defecto */
    align-items: center;
    flex-wrap: wrap; 
    gap: 10px; /* Espacio entre botones */
    transition: background-color 0.4s;
}

nav button {
    background-color: #004080; /* Color principal */
    color: #ffffff;
    border: none;
    padding: 10px 18px; /* Tamaño del botón */
    border-radius: 25px; /* Botones tipo "píldora" */
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem; /* Tamaño de letra del botón */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave */
    border: 2px solid #004080; /* Borde del mismo color */
}

/* --- Efecto Hover para Botones --- */
nav button:hover {
    background-color: #0059b3; /* Un azul más brillante */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px); /* Efecto de "levantar" */
}

/* Estilo para el botón activo (unidad actual) */
nav button.activo {
    background-color: #007bff;
    color: white;
}

/* Un estilo especial para el botón de Portada */
nav button:first-child {
    background-color: #f0f2f5; /* Fondo claro */
    color: #004080; /* Texto oscuro */
    border: 2px solid #004080; /* Borde azul */
}

nav button:first-child:hover {
    background-color: #ffffff;
    color: #002a53;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}



/* ⚠️ AJUSTE PARA BOTÓN "OSCURO" */

/* El botón oscuro se empuja automáticamente hacia el extremo derecho */
nav button#toggleTheme {
    margin-left: auto; /* Esto lo empuja a la derecha */
    padding: 10px 18px; /* Mantiene el padding consistente */
    /* Colores por defecto */
    background-color: #3f51b5; 
    border-color: #3f51b5;
    color: white;
}

/* --- Contenido Principal --- */
main {
    max-width: 900px; /* Un poco más estrecho para mejor lectura */
    margin: 2.5rem auto; /* Más espacio superior */
    padding: 0 20px;
    display: grid;
    justify-items: center;
}

/* --- ESTILO DE TARJETA PARA CADA UNIDAD --- */
section.unidad-contenido {
    background: #ffffff;
    margin-bottom: 20px;
    padding: 2.5rem; /* Más padding interno */
    border-radius: 12px; /* Bordes más redondeados */
    box-shadow: 0 8px 16px rgba(0,0,0,0.08); /* Sombra más suave */
    border-left: 6px solid #004080; /* Acento de color */
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    animation: fadeIn 0.5s ease-out;
    transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Estilos de Texto Dentro de la Tarjeta --- */
.unidad-contenido h2 {
    font-family: 'Roboto', sans-serif;
    color: #004080;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 15px;
    font-size: 2rem;
    margin-top: 0;
    transition: color 0.4s, border-bottom-color 0.4s;
}

.unidad-contenido p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.unidad-contenido ul,
.unidad-contenido ol {
    padding-left: 30px;
    margin-bottom: 1.5rem;
}

.unidad-contenido li {
    font-size: 1.05rem;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* --- Resaltar Términos Clave --- */
.unidad-contenido strong,
.unidad-contenido b {
    color: #004080;
    font-weight: 700;
}

/* --- Pie de Página --- */
footer {
    text-align: center;
    padding: 25px;
    background: #333;
    color: #aaa;
    margin-top: 3rem;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: background-color 0.4s, color 0.4s;
}

/* --- Botón "Ver más/Detalle" genérico --- */
.boton-detalle {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 16px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.boton-detalle:hover {
    background-color: #0056b3;
}

/* ==================================== */
/* ESTILOS DE ENLACES ESPECÍFICOS DE ARDUINO (NUEVOS) */
/* ==================================== */
.enlaces-arduino {
    display: flex;
    gap: 15px; /* Espacio entre los dos enlaces */
    margin-top: 25px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Para que se vean bien en móvil */
}

/* Estilo para el botón de Proyectos y Códigos (verde/teal) */
.enlaces-arduino .boton-detalle {
    background-color: #009688; 
    color: white;
}

.enlaces-arduino .boton-detalle:hover {
    background-color: #00796b;
}

/* Estilo específico para el enlace de YouTube (rojo) */
.enlaces-arduino .video-link {
    background-color: #f44336; /* Color rojo para YouTube */
}

.enlaces-arduino .video-link:hover {
    background-color: #d32f2f;
}


/* --- Modo Oscuro --- */
body.oscuro {
    background-color: #121212;
    color: #e0e0e0;
}

body.oscuro header {
    background-color: #1e3a5f;
    border-bottom-color: #0d243d;
}

body.oscuro nav {
    background-color: #222;
}

body.oscuro nav button {
    background-color: #1e3a5f;
    border-color: #1e3a5f;
    color: #ffffff;
}

/* Modo oscuro: botón de Portada */
body.oscuro nav button:first-child {
    background-color: #2b2b2b;
    color: #80bfff;
    border-color: #80bfff;
}

/* Modo oscuro: botón oscuro */
body.oscuro nav button#toggleTheme {
    background-color: #2b2b2b;
    border-color: #80bfff;
    color: #80bfff;
}
body.oscuro nav button#toggleTheme:hover {
    background-color: #1e3a5f;
}

body.oscuro nav button:hover {
    background-color: #0059b3;
}

body.oscuro section.unidad-contenido {
    background: #1e1e1e;
    border-left-color: #80bfff;
    box-shadow: 0 8px 16px rgba(255,255,255,0.05);
}

body.oscuro .unidad-contenido h2 {
    color: #80bfff;
    border-bottom-color: #333;
}

body.oscuro footer {
    background: #1a1a1a;
    color: #888;
}

body.oscuro .boton-detalle {
    background-color: #80bfff;
    color: #121212;
}
body.oscuro .boton-detalle:hover {
    background-color: #5d98d2;
}

/* Modo oscuro: enlaces de Arduino */
body.oscuro .enlaces-arduino .boton-detalle {
    background-color: #00796b; 
    color: white;
}

body.oscuro .enlaces-arduino .boton-detalle:hover {
    background-color: #009688;
}

body.oscuro .enlaces-arduino .video-link {
    background-color: #d32f2f;
}
body.oscuro .enlaces-arduino .video-link:hover {
    background-color: #f44336;
}