@import('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #3f2c35; /* Color de fondo */
}

/* Enlace en mi nombre en el hipervinculo en el navbar */
a {
text-decoration: none; /* Elimina la línea */
color: white; /* Mantiene el color del enlace */
}

/* Cambiar color al pasar el mouse */
a:hover {
color: #fdbfd9;
}

/* Estilos de la barra de navegación superior */
.navbar {
    background-color: #3d1a2b; /* Color de la barra de título */
    color: white;
    padding: 10px 0;
    position: fixed; /* Barra fija en la parte superior */
    width: 100%;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
}

.user-profile {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-profile-pic {
    width: 30px; /* Tamaño pequeño para la barra superior */
    height: 30px;
    border-radius: 50%; /* Hace la imagen perfectamente redonda */
    margin-right: 10px;
    object-fit: cover;
}

/* Estilos del contenedor principal del perfil */
.profile-container {
    margin-top: 50px; /* Ajuste para que no quede debajo de la navbar fija */
    height: 450px;
    background-color: /* #734e60; */ #3f2c35;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cover-photo img {
    /*width: 1358px;*/
    height: 315px; /* Altura típica de la portada de FB */
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
}

.profile-info {
    position: relative /* posicionamiento de botones respecto a este contenedor */
    display: flex;
    align-items: flex-end; /* Alinea la imagen de perfil con el texto */
    padding: 0 20px 20px;
    transform: translateY(-50px); /* Superpone la info sobre la portada */
}

.profile-pic-large {
    width: 160px; /* Tamaño grande para la foto de perfil principal */
    height: 160px;
    border-radius: 50%; /* Imagen redonda */
    border: 4px solid white; /* Borde blanco como en FB */
    object-fit: cover;
    margin-right: 20px;
}

.profile-info h1 {
    margin: 0;
    font-size: 2rem;
    color: #050505;
}

/* Ajuste para el resto del contenido */
.main-content {
    max-width: 1350px;
    font-family: Caveat;
    font-size: 15px;
    margin: 8px 45px 8px; /* Continúa el flujo después de la info del perfil superpuesta */
    padding: 5px 5px;
    background-color: #967985;
    border-radius: 8px;
    /* Agrega aquí estilos para el feed */
}

/* Contenedor del footer */
footer {
    background-color: #3d1a2b; /* Color de fondo oscuro */
    color: #fff;            /* Color de texto blanco */
    text-align: center;     /* Centra el texto */
    padding: 20px 0;        /* Espaciado interno superior e inferior */
    width: 100%;            /* Ocupa todo el ancho */
    margin-top: auto;       /* Importante para "sticky footer" con flexbox */
}

/* Estilos para el texto de copyright dentro del footer */
    footer p {
    margin: 0; /* Elimina el margen predeterminado del párrafo */
    font-size: 9px; /* Tamaño de fuente ligeramente más pequeño */
}

/* Estilos para los botones de navegación del perfil */
nav {
/* background-color: #5c2d43; */ /* Fondo oscuro */
padding: 8px 0;
width: 100%;
}

/* Contenedor flex para centrar horizontalmente */
.boton-container {
display: flex;
justify-content: center; /* Centra horizontalmente */
gap: 15px; /* Espacio entre botones */
}

.boton-container a {
font-size: 12px;
text-decoration: none;
color: white;
background-color: #5c2d43;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}

/* Efecto hover */
.boton-container a:hover {
background-color: #ac6886;
}

/* Contenido normal que no se moverá */
.contenido {
/* background-color: lightblue; */
padding: 10px;
margin-bottom: 10px;
}

/* Contenedor centrado */
.centrado {
position: absolute; /* Sale del flujo normal */
top: 60%;
left: 50%;
transform: translate(-50%, -50%); /* Centrado exacto */
/* background-color: tomato; */
padding: 20px;
color: white;
border-radius: 8px;
}

/* Contenedor main */
.contenedor {
display: flex; /* Activa Flexbox */
margin-left: 2px;
margin-right: 2px;
gap: 8px;
}

.columna-izquierda {
flex: 1; /* Ocupa 1 parte proporcional */
background-color: #300819; /* morado oscuro */
border-radius: 8px;
color: white;
padding: 0px;
padding-left: 10px;
margin-top: 2px;
margin-bottom: 2px;
}

/* Columna derecha (más grande) */
.columna-derecha {
flex: 2; /* Ocupa 2 partes proporcionales */
border-radius: 8px;
background-color: #967985; /* rosa claro */
padding: 0px;
padding-left: 10px;
margin-top: 2px;
margin-bottom: 2px;
}