/* 1. RESET Y BASES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #0a001b;
    color: #a4a1a7;
}

/* 2. COMPONENTES REUTILIZABLES */
.fondosDatos, 
table.fondosDatos th, 
table.fondosDatos td {
    background-color: #1e1e1f !important;
    color: #807e83 !important;
    border: 1px solid rgba(83, 82, 82, 0.2);
    box-shadow: 4px 4px 10px #2a2a2c;
}

.colorTexto { color: #a4a1a7 !important; font-weight: bold !important; }
.titulosDatos { color: #6e6c70 !important; }

/* 3. HEADER Y NAVEGACIÓN (Escritorio) */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333 !important;
    padding: 10px 20px;
    position: relative;
    z-index: 1000;
}

.header .logo img {
    height: 50px;
    width: auto;
}

.header .menu ul {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header .menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

/* Hamburguesa y X (Ocultas por defecto en PC) */
.hamburger, .close-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px;
    background-color: rgb(194, 191, 191);
}

/* --- MENÚ MÓVIL (Unificado para pantallas < 991px) --- */
@media (max-width: 991px) {
    .hamburger { 
        display: block; 
        z-index: 1001;
    }

    .header .menu {
        display: none; /* Se oculta el nav normal */
    }

    /* El Menú cuando se pulsa la hamburguesa */
    .header .menu.show {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; 
        width: 100%; height: 100vh;
        background-color: rgba(10, 0, 27, 0.98) !important;
        justify-content: center; /* Centra la lista verticalmente */
        align-items: center;
        z-index: 9999;
    }

    .header .menu.show ul {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 50px; /* Espacio antes de la X */
    }

    .header .menu.show ul li a {
        font-size: 1.8rem !important;
    }

    /* La X personalizada al final del menú */
    .header .menu.show .close-menu {
        display: block !important;
        background-color: #111111;
        color: rgb(134, 132, 132);
        border: 2px solid rgb(54, 54, 54);
        padding: 10px 40px;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 8px;
        margin-top: 20px;
    }
}

/* 4. SECCIÓN HERO */
.hero {
    min-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}

.hero-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
}

.hero-text { flex: 1; min-width: 300px; text-align: left; }
.hero-image { flex: 1; min-width: 300px; }
.hero-image img { width: 100%; max-width: 500px; border-radius: 10px; }

.welcome {
    color: darkgreen;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
    margin: 1rem 0;
    animation: welcome 3s ease-out forwards;
}

/* 5. MEDIA QUERIES UNIFICADOS (768px) */
@media (max-width: 768px) {
    /* Ajustes del Hero */
    .hero-inner { flex-direction: column; text-align: center; }
    .hero-text { text-align: center; }

    /* Ajustes de Tablas y Datos */
    .fondosDatos { 
        display: block; 
        overflow-x: auto; 
        width: 100% !important; /* Asegura que ocupe todo el ancho */
        margin: 0 auto !important; 
    }

    /* Ajuste para que FORMACIÓN ocupe todo el ancho como Portfolio */
    .formacion-container, .container, .main-content { 
        padding-left: 5px !important; 
        padding-right: 5px !important; 
        width: 98% !important;
        max-width: 100% !important;
    }

    /* Ajustes del Footer */
    footer .footer-container { 
        flex-direction: column; 
        text-align: center; 
    }

    /* 1. Hacemos los botones un poco más pequeños en móvil */
    .page-item .page-link {
        padding: 6px 12px !important;
        font-size: 0.85rem;
    }

    /* 2. Ocultamos el texto de "Showing 1 to 3..." que mete Laravel */
    /* (Solo si tu versión de Laravel lo muestra por defecto) */
    .d-none.flex-1.items-center.justify-between, 
    nav p.text-sm {
        display: none !important;
    }

    /* 3. Aseguramos que el contenedor de los números esté centrado */
    .pagination {
        margin-top: 10px;
    }
}

/* Efecto para los iconos de tecnologías */
.devicon-html5-plain-wordmark, [class^="devicon-"] {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.devicon-html5-plain-wordmark:hover, [class^="devicon-"]:hover {
    transform: scale(1.2); /* Se hacen un poco más grandes al pasar el ratón */
}

/* En móvil, les damos un poco más de aire */
@media (max-width: 768px) {
    .gap-4 {
        gap: 1.5rem !important;
    }
}


/* 5. FOOTER */
footer.elBody {
    background-color: #333 !important;
    padding: 1.5rem 0;
    width: 100%;
}

footer .footer-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem !important;
}

/* 6. ANIMACIONES */
@keyframes welcome {
    0% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* --- ESTILO PERSONALIZADO DEL PAGINADOR (Gris y Sutil) --- */

/* 1. Contenedor principal sin bordes llamativos */
.pagination {
    border: none;
    background-color: transparent;
    gap: 5px; /* Espacio entre los numeritos */
    flex-wrap: wrap; /* Permite que los botones bajen si no caben */
    justify-content: center;
}

/* 2. Estilo de los botones (Números y Flechas) */
.page-item .page-link {
    background-color: #1e1e1f !important; /* El gris oscuro de tus tablas */
    color: #a4a1a7 !important; /* Tu color de texto gris claro */
    border: 1px solid rgba(83, 82, 82, 0.3) !important; /* Borde muy fino y discreto */
    border-radius: 5px !important; 
    padding: 8px 16px;
    transition: 0.3s;
}

/* 3. El número ACTIVO (El que estás viendo) */
.page-item.active .page-link {
    background-color: #333 !important; /* Un poco más claro o el del header */
    color: #ffffff !important; /* Texto blanco para resaltar donde estás */
    font-weight: bold;
    border-color: #a4a1a7 !important;
}

/* 4. Efecto Hover (Al pasar el ratón) */
.page-item .page-link:hover {
    background-color: #a4a1a7 !important;
    color: #0a001b !important; /* Texto oscuro al resaltar */
}

/* 5. Flechas deshabilitadas */
.page-item.disabled .page-link {
    background-color: transparent !important;
    color: #444 !important;
    border: none !important;
}