:root {
    --bg-dark-blue: #1a1a2e;
    --sidebar-bg: #16213e;
    --text-light-blue: #7df9ff;
    --accent-pink: #f92a82;
    --accent-green: #00ffab;
    --social-bg-red: #d9577c;
    --sidebar-width: 15.625rem;
    /* 250px / 16px = 15.625rem */
    --bg-dark-blue: #1a1a2e;
    --sidebar-bg: #16213e;
}

body {
    background-color: var(--bg-dark-blue);
    color: var(--text-light-blue);
    font-family: 'Roboto Mono', monospace;
    margin: 0;
    font-size: 1.1rem;
}

.portfolio-container {
    display: flex;
}

.sidebar {
    background-color: var(--sidebar-bg);
    width: 250px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* --- CAMBIO CLAVE --- */
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    flex-shrink: 0;
}

.avatar {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin-bottom: 3rem;
    object-fit: cover;
    object-position: center;
}

.menu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.menu a {
    color: var(--text-light-blue);
    text-decoration: none;
    padding: 0.8rem 0;
    font-size: 1.3rem;
}

.menu a:hover {
    color: var(--accent-pink);
}

/* --- CONTENEDOR DEL CONTENIDO CON SCROLL --- */
.scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    margin-left: calc(var(--sidebar-width) + 2rem);
}

@media (max-width: 768px) {
    .scrollable-content {
        margin-left: 0;
        /* Resetea el margen en móviles */
    }

    .sidebar {
        position: static;
        /* Devuelve la sidebar al flujo normal en móviles */
        width: 100%;
        height: auto;
    }
}

/* --- CONTENIDO PRINCIPAL --- */
.main-content {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    /* Asegura que cada sección ocupe al menos toda la pantalla */
    box-sizing: border-box;
}


h1 {
    font-size: 5.5rem;
    margin: 0;
    letter-spacing: 5px;
}

.color-pink {
    color: var(--accent-pink);
}

.color-green {
    color: var(--accent-green);
}

.main-content p {
    margin: 0.5rem 0;
    line-height: 1.5;
}

.email-link {
    color: var(--accent-green);
    text-decoration: underline;
}

.btn-cv {
    display: inline-block;
    background-color: var(--accent-green);
    color: var(--bg-dark-blue);
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 2rem;
    border: 2px solid var(--bg-dark-blue);
    box-shadow: 5px 5px 5px var(--sidebar-bg);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    align-self: flex-start;
}

.btn-cv:hover {
    box-shadow: 2px 2px 0px var(--sidebar-bg);
    transform: translate(3px, 3px);
}

.social-icons {
    margin-top: 3rem;
    display: flex;
    gap: 1.5rem;
}

.social-icons a {
    background-color: var(--social-bg-red);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    text-decoration: none;
    transition: transform 0.3s;
}

.social-icons a:hover {
    transform: scale(1.1);
}

/* --- ESTILOS PARA LA NUEVA SECCIÓN Y FUTURAS SECCIONES --- */
.content-section {
    padding: 4rem;
    min-height: 100vh;
    /* Opcional: para que cada sección llene la pantalla */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-section h2 {
    font-size: 4rem;
    margin-top: 0;
    margin-bottom: 2rem;
}

.content-section p {
    line-height: 1.7;
    max-width: 800px;
    /* Limita el ancho del texto para mejor legibilidad */
}

.highlight-text {
    color: var(--accent-pink);
    font-weight: bold;
}

/* --- ESTILOS PARA LA SECCIÓN PORTFOLIO --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    /* Espacio entre las tarjetas */
    width: 100%;
}

.portfolio-item {
    background-color: var(--sidebar-bg);
    border: 2px solid var(--accent-pink);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.portfolio-item img {
    width: 100%;
    height: 200px;
    /* Altura fija para todas las imágenes */
    object-fit: cover;
    /* Asegura que la imagen cubra el espacio sin deformarse */
    object-position: top;
    /* Muestra la parte superior de la imagen */
    border-radius: 4px;
    margin-bottom: 1rem;
}

.portfolio-item h3 {
    color: var(--text-light-blue);
    margin: 0.5rem 0;
}

.portfolio-item p {
    flex-grow: 1;
    /* Empuja los tags y los links al fondo */
    line-height: 1.6;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tags-container span {
    background-color: var(--social-bg-red);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.links-container {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.links-container a {
    color: var(--text-light-blue);
    font-size: 1.8rem;
    transition: color 0.3s ease;
}

.links-container a:hover {
    color: var(--accent-pink);
}

/* --- ESTILOS PARA LA SECCIÓN EDUCACIÓN --- */

.education-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* Espacio entre cada entrada de educación */
}

.education-entry {
    display: flex;
    justify-content: space-between;
    /* Coloca los detalles a la izq. y las fechas a la der. */
    align-items: flex-start;
    /* Alinea los elementos en la parte superior */
    gap: 2rem;
    flex-wrap: wrap;
    /* Permite que las fechas se coloquen debajo en pantallas pequeñas */
}

.education-details {
    flex-grow: 1;
}

.education-entry h3 {
    color: var(--text-light-blue);
    font-size: 1.5rem;
    margin: 0 0 0.25rem 0;
}

.education-entry .institution {
    color: var(--accent-green);
    font-weight: bold;
    margin: 0 0 1rem 0;
}

.education-entry .course-duration {
    font-style: italic;
    color: var(--text-light-blue);
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.certificate-btn {
    display: inline-block;
    background-color: var(--accent-green);
    color: var(--bg-dark-blue);
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

.certificate-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--accent-green);
}

.education-dates {
    color: var(--accent-green);
    font-weight: bold;
    flex-shrink: 0;
    /* Evita que el contenedor de fechas se encoja */
    text-align: right;
    /* Alinea el texto a la derecha */
}

/* --- ESTILOS PARA LA LISTA DE TECNOLOGÍAS EN EDUCACIÓN --- */

.technologies-list {
    margin-top: 1.5rem;
    /* Espacio superior para separarlo del título */
    border-left: 3px solid var(--accent-green);
    /* Línea decorativa a la izquierda */
    padding-left: 1.5rem;
    /* Espacio interior */
}

.technologies-list p {
    display: flex;
    /* Alinea icono y texto */
    align-items: center;
    /* Centra verticalmente */
    margin: 0.8rem 0;
    color: var(--text-light-blue);
    font-size: 1rem;
}

.technologies-list strong {
    color: var(--text-light-blue);
    margin-right: 0.5rem;
    /* Espacio entre el título y la descripción */
}

.tech-icon {
    font-size: 1.5rem;
    /* Tamaño del icono */
    color: var(--accent-green);
    /* Color del icono */
    margin-right: 1rem;
    /* Espacio entre el icono y el texto */
    width: 25px;
    /* Ancho fijo para que todos los textos se alineen */
    text-align: center;
}

/* --- ESTILOS PARA LA SECCIÓN EXPERIENCIA --- */

.experience-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* Espacio entre cada puesto de trabajo */
}

.experience-entry {
    display: flex;
    align-items: flex-start;
    /* Alinea los elementos en la parte superior */
    gap: 2rem;
    /* Espacio entre el logo, los detalles y la fecha */
}

.experience-logo {
    flex-shrink: 0;
    /* Evita que el contenedor del logo se encoja */
}

.company-logo {
    width: 80px;
    /* Ancho del logo */
    height: 80px;
    /* Alto del logo */
    border-radius: 50%;
    /* Hace el logo circular, ajústalo si es necesario */
    object-fit: cover;
    border: 2px solid var(--accent-pink);
}

.experience-details {
    flex-grow: 1;
    /* Ocupa el espacio disponible */
}

.experience-entry h3 {
    color: var(--text-light-blue);
    font-size: 1.5rem;
    margin: 0 0 0.25rem 0;
}

.experience-entry .company-name {
    color: var(--accent-green);
    font-weight: bold;
    margin: 0 0 1rem 0;
}

.experience-dates {
    color: var(--accent-green);
    font-weight: bold;
    text-align: right;
    flex-shrink: 0;
}

/* --- ESTILOS PARA LA SECCIÓN SKILLS --- */

.skills-category {
    margin-bottom: 3rem;
    /* Espacio entre cada categoría de skills */
}

.skills-category h3 {
    color: var(--text-light-blue);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--sidebar-bg);
    /* Línea divisoria sutil */
    padding-bottom: 0.5rem;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* Espacio entre las etiquetas */
}

.skill-tag {
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    font-weight: bold;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

/* --- Colores específicos para cada etiqueta --- */
.skill-tag.html {
    background-color: #E34F26;
}

.skill-tag.css {
    background-color: #1572B6;
}

.skill-tag.js {
    background-color: #F7DF1E;
    color: #000;
}

.skill-tag.java {
    background-color: #007396;
}

.skill-tag.python {
    background-color: #3776AB;
}

.skill-tag.react {
    background-color: #61DAFB;
    color: #000;
}

.skill-tag.laravel {
    background-color: #FF2D20;
}

.skill-tag.git {
    background-color: #F05032;
}

.skill-tag.docker {
    background-color: #2496ED;
}

.skill-tag.vscode {
    background-color: #007ACC;
}

.skill-tag.oracle {
    background-color: #F80000;
}

.skill-tag.vue {
    background-color: #4FC08D;
}

.skill-tag.php {
    background-color: #777BB4;
}

.skill-tag.sql {
    background-color: #00758F;
}

.skill-tag.plsql {
    background-color: #E66A25;
}

.skill-tag.apex {
    background-color: #D8222A;
}

.skill-tag.prisma {
    background-color: #2D3748;
}

/* --- Estilos para la lista "Aprendiendo" --- */
.learning-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.learning-list li {
    color: var(--text-light-blue);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.1rem;
}

.learning-list .fa-check-circle {
    color: var(--accent-green);
    font-size: 1.2rem;
}


/* --- ESTILOS PARA LA SECCIÓN CONTACTO --- */

.contact-links {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Espacio entre cada línea de contacto */
}

.contact-item a {
    color: var(--text-light-blue);
    text-decoration: none;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--accent-green);
}

.contact-icon {
    color: var(--accent-green);
    font-size: 1.5rem;
    width: 30px;
    text-align: center;
}

.contact-item span {
    font-weight: bold;
    color: var(--text-light-blue);
    width: 100px;
    /* Ancho fijo para alinear el texto */
}

/* Estilos para la sección "Desarrollado con" */
.developed-with {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid var(--sidebar-bg);
}

.developed-with h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}