body {
    background-color: #f4f6f8;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    color: #333;
}
.container_gaa{
    display: flex;
    flex-direction: column; /* Añadido para asegurar la disposición vertical de los elementos*/
    width: 100%;
}

.site-header {
    position: fixed;
    width: 390px;
    height: 100%;
    background-color: #000000;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 2px solid transparent; /* Borde invisible al inicio */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header:hover {
    border-right: 2px solid #24cbef; /* Borde azul clarito */
    box-shadow: 4px 0 15px -5px #24cbef; /* Pequeño glow hacia la derecha */
}


.menu-toggle{
    display: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle.visible{
    display: block;
}

/* Estilo base */
.profile-image-container {
    width: 200px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.header-image {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    border: 3px solid #24cbef;
    transition: transform 0.3s ease;
}
.principal{

    flex-direction: column;
    display: flex;
    justify-content: center;
}
/* Cuando se agrega la clase .movil desde TypeScript */
.profile-image-container.movil {
    width: 60px; /* Más amigable que 30px */
}

.header-image.movil {
    width: 60px;
    height: 60px;
}

.header-image:hover {
    transform: scale(1.05);
}

/* Nombre con fuente destacada */
.header-name-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24pt;
    font-weight: bold;
    color: #24cbef;
    text-shadow: 1px 1px 5px rgba(36, 203, 239, 0.2);
    text-align: center;
}

/* Subtítulos */
.header-dates-container {
    margin-top: 10px;
    text-align: center;
    color: #cbd5e1;
}

.dates-text {
    margin: 3px 0;
    font-size: 14pt;
}

/* Navegación vertical como columna */
.main-nav {
    margin-top: 30px;
    width: 100%;
    max-width: 300px;
    padding: 20px;
    border-radius: 12px;
    background: #1e293b;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

/* Lista de navegación */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Items */
.nav-item {
    width: 100%;
}

.nav-link-per {
    display: block;
    padding: 10px 15px;
    color: white;
    background-color: transparent;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: all 0.3s ease, box-shadow 0.4s ease; /* <- añadido box-shadow aquí */
    text-decoration: none;
}


.nav-link-per:hover {
    background-color: #24cbef;
    color: #0f172a;
    transform: translateX(1px);
    box-shadow: 0 0 15px #24cbef, 0 0 20px #24cbef, 0 0 25px #24cbef;
}


.site-footer {
    color: white;
    text-align: center;
    padding: 10px 0;
}

.footer-text {
    margin: 0;
    font-size: 0.9rem;
}


/* STYLE FOR LINK OF SOCIAL NETWORK-------------------------------------------------------------------------------------------------------*/
.icon-links-container {
    position: absolute;
    bottom: 20px;
    margin-top: 20px; /* Reducido para un mejor alineamiento visual */
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.icon-link {
    text-decoration: none;
    font-size: 24px;
    transition: transform 0.2s, color 0.3s;
}

/* Iconos específicos */
.icon-link-1 i {
    color: #0a66c2; /* LinkedIn */
}
.icon-link-2 i {
    color: #ff0000; /* YouTube */
}
.icon-link-3 i {
    color: #1da1f2; /* Twitter */
}
.icon-link-4 i {
    color: #e1306c; /* Instagram */
}
.icon-link-5 i {
    color: #ffffff; /* TikTok */
}

/* Efectos hover */
.icon-link-1:hover i {
    color: #629ddc;
    transform: scale(1.2);
}
.icon-link-2:hover i {
    color: #cc0000;
    transform: scale(1.2);
}
.icon-link-3:hover i {
    color: #0a95dd;
    transform: scale(1.2);
}
.icon-link-4:hover i {
    color: #c13584;
    transform: scale(1.2);
}
.icon-link-5:hover i {
    color: #adabac;
    transform: scale(1.2);
}

/* Style for responsive in movil ------------------------------------------------------------------------------------------------------------------*/

.site-main{
    margin-left: 370px;
    padding: 20px;
    flex: 1;
}




@media (max-width: 768px) {

    .site-main{
        margin-left: 0;
    }

  .site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    position: relative;
    background-color: #0f172a;
    z-index: 10;
      width: 100%;
  }

  .principal{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
  }

  .profile-image-container {
    width: 50px;
    height: 50px;

  }

  .header-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;

  }

  .header-name-container {
      padding: 7px 7px;
      padding-top: 0;
    flex: 1;
    text-align: center;
  }

  .header-name-container p {
      top: 10px;
    font-size: 12pt;
    color: #24cbef;
    margin: 0;
  }

  .menu-toggle {
    display: block;
    font-size: 22px;
    cursor: pointer;
    color: white;
    z-index: 20;
  }

  /* Ocultar contenido adicional por defecto */
  .header-dates-container,
  .main-nav,
  .icon-links-container {
    display: none;
  }

  /* Mostrar cuando el menú está activo */
  .site-header.active .header-dates-container,
  .site-header.active .main-nav,
  .site-header.active .icon-links-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: #1e293b;
    padding: 15px;
    gap: 10px;
    margin-top: 10px;
  }

  .dates-text{
      font-size: 12px;
  }
  .nav-list {
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
  }

  .nav-link-per {
    color: white;
    padding: 5px;
    text-decoration: none;
      font-size: 17px;
  }

  .icon-links-container {
    justify-content: center;
      position: static;
    /*gap: 15px;*/
  }

  .icon-link {
    color: #24cbef;
    font-size: 20px;
  }
}