/* CONTENEDOR PADRE */
.profile-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* ESTO CENTRA TODO */
    width: 100%;
    background-color: var(--body-beige);
    min-height: 100vh;
    

}

/* BANNER SUPERIOR */
/* Contenedor del banner */
.banner-top {
    width: 100%;
    height: 200px; /* Ajusta la altura según prefieras */
    overflow: hidden;
    position: relative;
    border-radius: 15px 15px 0 0; /* Bordes redondeados superiores */
}

.banner-top img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace que la imagen no se deforme */
    display: block;
}

/* --- AVATAR (Contenedor y Posicionamiento) --- */
.avatar-wrapper {
    position: relative;
    z-index: 10;          
    text-align: center;
    margin-top: -115px;   
    margin-bottom: 70px; 
}

/* --- IMAGEN DEL AVATAR (Tamaño y Estilo) --- */
.avatar-img {
    /* REDUCIMOS EL TAMAÑO: Como en la referencia, que es más pequeño */
    width: 150px;         /* Tamaño del avatar (ancho) - Antes 200px */
    height: 150px;        /* Tamaño del avatar (alto), debe ser igual para ser un círculo */
    
    border-radius: 50%;   /* Lo hace circular */
    object-fit: cover;     /* Asegura que la foto se vea bien dentro del círculo */
    
    /* Borde blanco profesional */
    border: 2px solid white; 
    
    /* Sombra suave para que resalte (opcional, como en la referencia) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); 
}
.profile-info-block {
    margin-top: -105px; 
    position: relative;
    z-index: 1;
    background-color: var(--bg-green); /* Usando la variable definida arriba */
    padding: 30px; /* Un poco más de padding interno */
    border-radius: 20px 20px 0 0;
    padding: 40px;
    width: 90%;          /* Ocupa el 90% del ancho de la pantalla */
    max-width: 1500px;    /* Pero no más de 800px (como las cards de abajo) */
    margin-left: auto;   /* Centrado horizontal */
    margin-right: auto;  /* Centrado horizontal */
    display: flex;       /* Cambiamos a flex para alinear contenido */
    flex-direction: column;
    align-items: center; /* Centra el nombre y los tabs */
}

.username-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.username {
    color: var(--dk-green);
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin: 0;
}

.user-icon {
    stroke: var(--dk-green);
    fill: none;
}

/* Contenedor: quitamos bordes y fondo */
.tabs-container {
    display: flex;
    justify-content: center; /* Centra los botones */
    gap: 15px;              /* Espacio de separación entre los dos recuadros */
    width: 100%;
    max-width: 500px;
    border: none;           /* IMPORTANTE: quitamos el borde que los unía */
    background: transparent;
}

/* Botones individuales */
.tab {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid var(--dk-green); /* Borde individual para cada uno */
    border-radius: 8px;               /* Esquinas redondeadas para cada recuadro */
    background-color: transparent;     /* Fondo por defecto */
    color: var(--dk-green);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Estado Activo: el que está seleccionado */
.tab.active {
    background-color: var(--moss-green);
    color: white;
    border-color: var(--moss-green);
}

.tab.active .heart-icon {
    fill: white;
}

/* Efecto Hover (opcional) */
.tab:hover:not(.active) {
    background-color: rgba(144, 165, 126, 0.1); /* Un toque verde muy suave */
}
.heart-icon {
    width: 18px;
    height: 18px;
    fill: var(--dk-green);
}

/* SECCIÓN DE CARDS (CONTENIDO) */
.content-section {
    width: 100%;
    max-width: 800px;
    padding: 30px 20px;
}

.cards-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
}

.card h3 {
    color: var(--dk-green);
    margin-top: 0;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.btn-see {
    background-color: var(--moss-green-80);
    color: var(--dk-green);
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.edit-btn {
    color: var(--dk-green);
    padding: 7px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.edit-btn:hover {
    background: #354024;
    color: white;
    transform: scale(1.1);
}