/* === OVERRIDE: SPRING BOOT THEME === */

/* Color de acento principal (Verde Spring) */
:root {
    --spring-green: #6db33f;
    --spring-dark: #2c3e50; /* Un gris azulado oscuro para contraste */
}

/* Títulos en Verde */
h1, h2, h3, h4, h5, h6 {
    color: var(--spring-green) !important;
}

/* Líneas decorativas debajo de los títulos */
h2.major:after {
    background-color: var(--spring-green) !important;
}

/* Botones (Normal y Primary) */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
    color: #ffffff !important;
    box-shadow: inset 0 0 0 2px var(--spring-green) !important;
}

.button:hover {
    background-color: rgba(109, 179, 63, 0.1) !important; /* Verde transparente al pasar el mouse */
}

.button.primary {
    background-color: var(--spring-green) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* Iconos */
.icon > .label {
    display: none; /* Oculta el texto "Java", "Docker" para que solo se vean los logos limpios */
}
.icon:before {
    color: var(--spring-green) !important;
}

/* Bordes de las imágenes (si queda alguno) */
.image:before {
    background-color: rgba(44, 62, 80, 0.8) !important; /* Fondo oscuro detrás de imágenes */
}

/* Links generales */
a {
    color: var(--spring-green) !important;
    border-bottom-color: transparent !important; /* Quita el subrayado punteado por defecto */
}
a:hover {
    color: #8ed65e !important; /* Un verde un poco más claro al pasar el mouse */
}

/* === FIX: SOLO IMÁGENES DE PROYECTOS (SECCIONES 2 Y 3) === */

/* 1. Agrandar SOLO los contenedores de los proyectos (#two y #three) */
#two .image, #three .image {
    width: 50% !important; /* Le damos buen espacio (45%) */
    border-radius: 0 !important; /* Cuadradas */
    flex-basis: 50% !important;
    background: none !important; /* Sin fondo gris */
    overflow: hidden !important;
}

/* 2. Ajustar la imagen interna SOLO en proyectos */
#two .image img, #three .image img {
    width: 100% !important;
    height: auto !important;
    object-fit: fill !important;
    border-radius: 0 !important;
    transition: transform 0.5s ease !important;
}

/* 3. Ajustar el texto SOLO en proyectos para que no choque */
#two .content, #three .content {
    width: 55% !important;
}

/* 4. Ajuste para MÓVILES (Celular) SOLO en proyectos */
@media screen and (max-width: 736px) {
    #two, #three {
        flex-direction: column !important;
    }
    #two .image, #three .image {
        width: 100% !important;
        margin: 0 0 2em 0 !important;
    }
    #two .content, #three .content {
        width: 100% !important;
    }
}

#two .image:hover img, #three .image:hover img {
    transform: scale(1.1) !important; /* Aumenta tamaño al 110% */
}

/* === FIX: MENÚ LEGIBLE (ACCESIBILIDAD) === */

/* 1. Estado normal: Letra blanca y opacidad total */
#menu .links li a {
    color: #ffffff !important;      /* Blanco puro */
    opacity: 1 !important;          /* Quitamos cualquier transparencia */
    font-weight: 600 !important;    /* Hacemos la letra un poquito más gruesa */
    border: none !important;        /* Quitamos bordes raros si los hay */
}

/* 2. Estado Hover (al pasar el mouse): Se pone verde */
#menu .links li a:hover {
    color: var(--spring-green) !important;
    background-color: rgba(255, 255, 255, 0.05) !important; /* Un fondo muy sutil */
}

/* 3. El botón de cerrar (la X) también visible */
#menu .close {
    color: #ffffff !important;
    opacity: 0.8 !important;
}
#menu .close:hover {
    color: var(--spring-green) !important;
    opacity: 1 !important;
}

/* --- SECCIÓN EDUCACIÓN (Toggle) --- */

/* Clase para ocultar contenido inicialmente */
.hidden-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Animación suave */
}

/* Clase para mostrar con animación */
.hidden-content.show {
    display: block;
    animation: fadeIn 0.8s forwards;
}

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

/* Ajuste visual para la tabla */
#education table td b {
    font-weight: 600; /* Resaltar los títulos importantes */
}

/* =================================================
   FIX DEFINITIVO: ICONOS TABLA EDUCACIÓN
   ================================================= */

/* ESTADO NORMAL (Gris y Quieto) */
/* Usamos la ruta completa para ganarle a cualquier otra regla */
section#education .table-wrapper table td a.icon {
    font-size: 1.2em !important;
    /* CLAVE PARA EL ZOOM: Convertirlo en bloque para que pueda crecer */
    display: inline-block !important; 
    
    /* COLOR: Gris claro para que se note que está "apagado" */
    color: #b2bec3 !important; 
    
    /* Limpieza */
    border-bottom: none !important;
    text-decoration: none !important;
    
    /* Velocidad de la animación */
    transition: all 0.2s ease-in-out !important;
}

/* ESTADO HOVER (Verde y Grande) */
section#education .table-wrapper table td a.icon:hover {
    /* COLOR: Tu verde Spring Boot */
    color: #6db33f !important; 
    
    /* ZOOM: Aumenta un 30% */
    transform: scale(1.3) !important; 
    
    /* Un brillo extra opcional */
    text-shadow: 0 0 8px rgba(109, 179, 63, 0.6);
}

/* =================================================
   FIX ALINEACIÓN TABLAS DE EDUCACIÓN
   ================================================= */

/* 1. Obligamos a la tabla a respetar medidas fijas */
#education table {
    table-layout: fixed !important; 
    width: 100% !important;
}

/* 2. Asignamos porcentajes exactos a cada columna (1, 2, 3 y 4) */

/* Columna 1: Título (Le damos buen espacio) */
#education table th:nth-child(1), 
#education table td:nth-child(1) { 
    width: 35% !important; 
}

/* Columna 2: Institución (La más ancha para nombres largos) */
#education table th:nth-child(2), 
#education table td:nth-child(2) { 
    width: 40% !important; 
}

/* Columna 3: Año (Pequeña y centrada) */
#education table th:nth-child(3), 
#education table td:nth-child(3) { 
    width: 15% !important; 
    text-align: center !important;
}

/* Columna 4: Icono (Muy pequeña y centrada) */
#education table th:nth-child(4), 
#education table td:nth-child(4) { 
    width: 10% !important; 
    text-align: center !important;
}

/* =========================================
   ICONOS EN EL HEADER (Estilo "Banner")
   ========================================= */

/* 1. Alineación del contenedor */
#header nav {
    display: flex;
    align-items: center; /* Centrados verticalmente */
    justify-content: flex-end; /* Pegados a la derecha */
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 0 !important;
    margin-right: 15px; /* Separación con la palabra "Menú" */
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.3); /* Una línea sutil separadora */
}

/* 2. Estilo de los Iconos (El look que te gustó) */
.header-icons a.icon {
    width: auto !important; 
    min-width: 0 !important;

    margin: 0 6px !important;

    font-size: 1.3em; /* TAMAÑO GRANDE (igual que en el banner) */
    color: rgba(255, 255, 255, 0.6); /* Blanco semi-transparente (apagado) */
    text-decoration: none;
    border: none !important;

    background: none !important; /* Por si tiene fondo heredado */
    padding: 0 !important;
    transition: all 0.3s ease; /* Transición suave */
}

/* 3. Efecto "Luminosidad" al pasar el mouse */
.header-icons a.icon:hover {
    color: #ffffff; /* Blanco puro brillante */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* El BRILLO que te gustó */
    transform: scale(1.1); /* Un pequeño zoom sutil */
    opacity: 1;
}

/* Opcional: Ocultar en celulares para que no se amontone con el logo */
@media screen and (max-width: 736px) {
    .header-icons {
        display: none;
    }
}

/* Arreglo para el icono del botón en el Footer */
#footer .button.icon:before {
    color: #ffffff !important; /* Icono BLANCO a la fuerza */
    opacity: 1 !important;     /* Que se vea sólido */
}