/*
 * Archivo: style.css
 * Estilo: Retro Futurista Metálico (Tech-Core / Y2K Glossy)
 */

/* 1. ESTILO DE BARRA DE DESPLAZAMIENTO (Clásico de la época) */
body {
    scrollbar-face-color: #00cccc; /* Cian/Aguamarina */
    scrollbar-track-color: #333333; /* Gris oscuro/Negro */
    scrollbar-arrow-color: #ffffff;
    scrollbar-shadow-color: #000000; 
}


/* 2. ESTILO GLOBAL: Fondo y Fuente */
body {
    /* Fondo: Usamos una rejilla (grid) o un color oscuro/metálico como respaldo */
    background-color: #000000; /* Fondo negro */
    
    /* Nota: Si quieres un fondo de grid o cibernético, 
       sube una imagen y usa: url('cyber_grid.png') */
    background-image: linear-gradient(0deg, #1a1a1a 1px, transparent 1px), 
                      linear-gradient(90deg, #1a1a1a 1px, transparent 1px);
    background-size: 25px 25px; /* Tamaño de la cuadrícula */
    
    font-family: 'Verdana', 'Arial', sans-serif; /* Fuentes limpias, típicas de interfaces */
    color: #00ffcc; /* Cian neón para el texto principal */
    margin: 0;
    padding: 30px 10px;
    text-align: center;
}

/* 3. CONTENEDOR PRINCIPAL: Marco de la Página (Simulación de Panel de Control) */
.border-container {
    max-width: 850px;
    margin: 0 auto;
    border: 3px solid #00cccc; /* Borde cian brillante */
    padding: 15px;
    /* Efecto de borde biselado metálico */
    border-radius: 10px;
    box-shadow: 0 0 15px #00ffcc; 
    background-color: #222222; /* Gris oscuro metálico */
}

/* 4. CAJA DE CONTENIDO */
.content-box {
    border: 1px dashed #ffffff; /* Borde interior de fibra óptica/luz */
    padding: 20px;
}

/* 5. TÍTULOS Y DECORACIÓN CLÁSICA */
h1 {
    color: #ffffff; /* Blanco brillante */
    text-shadow: 0 0 8px #00ffcc; /* Brillo de neón cian */
    font-size: 2.5em;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 3px solid #00cccc;
}

h2 {
    color: #ff00ff; /* Magenta neón */
    margin-top: 30px;
}

/* 6. ESTILO DEL LOGO */
.logo-area {
    margin-bottom: 30px;
}

.logo {
    max-width: 100%;
    height: auto;
    /* Efecto de pantalla/marco metálico */
    border: 5px ridge #999999; 
    padding: 5px;
    background-color: #000000;
}

/* Marquee: Un clásico con estilo */
marquee {
    border: 1px solid #ff00ff;
    background-color: #1a001a;
    padding: 5px;
    margin: 15px auto;
    font-weight: bold;
    color: #ffffff;
    width: 80%;
}


/* 7. BOTONES DE NAVEGACIÓN (Efecto 'Glossy' y Metálico) */
.nav-links {
    margin: 30px 0;
    padding: 10px;
}

.nav-links ul {
    list-style-type: none; 
    padding: 0;
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px; 
}

.nav-links li a {
    display: block;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    
    /* Aspecto metálico/glossy */
    background: linear-gradient(to bottom, #cccccc, #999999); 
    border: 2px solid #666666; 
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), /* Brillo superior */
                inset 0 -2px 4px rgba(0, 0, 0, 0.5);   /* Sombra inferior */
}

.nav-links li a:hover {
    color: #ffffff;
    /* Botón al ser presionado/activado (verde neón) */
    background: linear-gradient(to bottom, #00ff99, #00cc66); 
    border: 2px solid #00ffcc;
    box-shadow: 0 0 10px #00ffcc, /* Brillo exterior */
                inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

/* 8. LÍNEA HORIZONTAL Y CRÉDITOS */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #00ffcc, rgba(0, 0, 0, 0));
    margin: 25px 0;
}

.credits {
    font-size: 0.8em;
    color: #aaaaaa; /* Gris claro */
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px dashed #444444;
}

/* Biografia Pagina Configuracion*/

.profile-module {
    display: flex; /* Para poner la imagen y el texto uno al lado del otro */
    flex-wrap: wrap; /* Para que bajen si no hay espacio */
    gap: 20px; /* Espacio entre la imagen y el texto */
    background-color: #0d0d0d; /* Fondo oscuro del módulo unificado */
    border: 2px solid #00cccc; /* Borde cian brillante */
    border-radius: 8px;
    padding: 15px;
    margin-top: 25px;
    box-shadow: inset 0 0 10px #00ffcc, 0 0 15px rgba(0,255,204,0.3); /* Resplandor interior y exterior */
    text-align: left; /* Alineamos el texto dentro del módulo */
}

.profile-image-container {
    flex-shrink: 0; /* Evita que la imagen se encoja */
    text-align: center; /* Centra el contenido si la imagen es pequeña */
    min-width: 180px; /* Ancho mínimo para la imagen */
}

.profile-pic {
    width: 180px; /* Tamaño fijo para la imagen */
    height: 180px; /* Para hacerla cuadrada */
    object-fit: cover; /* Asegura que la imagen llene el cuadro sin distorsionarse */
    border: 3px solid #ff00ff; /* Borde magenta */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    box-shadow: 0 0 10px #ff00ff; /* Brillo magenta alrededor */
    margin-bottom: 10px;
}

.status-text {
    font-size: 0.9em;
    color: #00ffcc;
    background-color: #333333;
    padding: 3px 10px;
    border-radius: 3px;
    border: 1px dashed #00cccc;
    display: inline-block;
}

.bio-text-module {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    color: #ffffff; /* Texto blanco para el bloque */
    line-height: 1.6;
    padding-right: 10px; /* Pequeño padding si hay mucho texto */
}

.bio-text-module h2 {
    color: #00ffcc; /* Cian neón para el título del texto */
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 0 0 5px #00ffcc;
}

.bio-text-module p {
    margin-bottom: 1em;
}

/* Ajuste para pantallas más pequeñas, si la imagen y el texto no caben lado a lado */
@media (max-width: 600px) {
    .profile-module {
        flex-direction: column; /* Apila la imagen y el texto verticalmente */
        text-align: center;
    }
    .profile-image-container {
        margin-bottom: 15px; /* Espacio entre imagen y texto apilados */
    }
}

/* --- Estilos Específicos para la Página de Redes Sociales --- */

/* Contenedor principal para las tarjetas (las pone una al lado de la otra) */
.social-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra las tarjetas */
    gap: 30px; /* Espacio entre cada tarjeta */
    margin: 30px 0;
}

/* Estilo de cada tarjeta/cuadrado (Social Card) */
.social-card {
    width: 180px; /* Ancho de la tarjeta */
    height: 180px; /* Alto de la tarjeta (para que sea cuadrada) */
    background-color: #1a1a1a; /* Fondo gris oscuro */
    border: 3px ridge #999999; /* Borde tipo 3D metálico */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,255,204,0.5); /* Sombra cian */
    transition: transform 0.2s, box-shadow 0.2s; /* Animación de hover */
    
    /* Configuración interna para centrar el contenido (enlace) */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Efecto al pasar el mouse (simula un botón activado) */
.social-card:hover {
    transform: scale(1.05); /* Ligeramente más grande */
    box-shadow: 0 0 20px #ff00ff; /* Resplandor magenta */
    background-color: #2e002e; /* Fondo más oscuro */
}

/* Estilo del enlace (Link dentro de la tarjeta) */
.social-card a {
    text-decoration: none; /* Quita el subrayado del enlace */
    color: #ffffff; /* Texto blanco */
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;
    padding: 10px;
}

/* Estilo de la imagen del ícono */
.social-icon {
    width: 100px; /* Tamaño del icono */
    height: 100px; 
    margin-bottom: 10px;
    border: 2px solid #00cccc; /* Borde cian para destacar */
}

/* Estilo del texto que se presiona */
.social-text {
    font-weight: bold;
    font-size: 1.1em;
    color: #00ffcc; /* Cian neón */
    text-shadow: 0 0 5px #00ffcc; /* Efecto de brillo */
}