/* Variables (Mantenemos las de Aero Glass) */
:root {
    --main-bg-color: rgba(255, 255, 255, 0.6); /* Blanco con transparencia */
    --accent-color: #0078d7; /* Azul clásico de Windows/MSN */
    --border-light: rgba(255, 255, 255, 0.7);
    --border-dark: rgba(0, 0, 0, 0.15); /* Aumentamos la opacidad del borde oscuro */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.2);
    --radius-large: 16px;
    --radius-small: 8px;
    --gray-header: #e0e0e0; /* Gris claro para los bloques de título */
    --gray-header-text: #333;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    
    /* === PROPIEDADES DE CENTRADO FLEXBOX === */
    display: flex; /* Habilita el modelo Flexbox */
    justify-content: center; /* Centra horizontalmente el contenido (#main-window) */
    align-items: center; /* Centra verticalmente el contenido (#main-window) */
    
    background-color: #2e62a8;
    overflow: auto;
}
/* ... (body y #desktop-background se mantienen igual que la versión Aero Glass) ... */

/* 1. ESTILO DEL FONDO DE ESCRITORIO (Ahora con imagen local) */
#desktop-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    /* === CAMBIO CLAVE AQUÍ === */
    /* Reemplaza 'nombre-de-tu-imagen.jpg' con la ruta real de tu archivo. */
    /* Asegúrate que la imagen esté en la misma carpeta que 'styles.css' o ajusta la ruta. */
    background-image: url('../img/grass.jpg'); 
    
    /* Propiedades para que la imagen cubra toda la pantalla sin repetirse */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    /* Mantenemos el filtro blur (desenfoque) para el efecto "Aero" */
    filter: blur(2px); 
}

/* 2. ESTILO DE LA VENTANA PRINCIPAL (Liquid Glass) */
#main-window {
    width: 90%;
    max-width: 1200px; /* Aumentamos el ancho para acomodar más contenido */
    background-color: var(--main-bg-color); 
    backdrop-filter: blur(10px); /* Efecto Glass */
    border-radius: var(--radius-large);
    border: 1px solid var(--border-light); 
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.5s ease-in-out;
    
    
    padding: 20px;
    
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio vertical entre secciones */
    
    /* ... (Propiedades existentes como background-color, backdrop-filter, etc.) ... */
    
    /* Añadir un margen vertical para evitar que toque los bordes de la ventana en pantallas pequeñas */
    margin: 20px 0; 

    /* Quita cualquier propiedad de altura fija (si la tuviera) para que se centre bien */
    height: auto;
    display: flex;
    flex-direction: column; /* Asegura que #top-content, #bottom-content y #main-footer se apilen */
    gap: 20px; 
    padding: 20px;
}



/* Contenido Principal Superior */
#top-content {
    display: flex;
    gap: 20px;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 25%; /* La columna izquierda es más estrecha ahora */
    min-width: 200px;
    position: relative;
}

/* Nuevo contenedor que abarca la tarjeta UBA y los menús */
#center-right-container {
    width: 75%; /* Ocupa el resto del espacio */
    display: flex;
    flex-direction: column; /* Apila la tarjeta UBA y el área roja verticalmente */
    gap: 20px;
}

.right-column {
    width: 100%;
}

/* Contenido Principal Inferior */
#bottom-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 3. ESTILO PARA LOS CONTENEDORES INTERNOS (window-card) */
.window-card {
    background-color: white;
    padding: 15px;
    border-radius: var(--radius-small);
    border: 1px solid var(--border-dark);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); 
    transition: box-shadow 0.3s ease-in-out;
}

.avatar {
    /* 1. Asegura que la imagen ocupe todo el espacio disponible en el contenedor */
    width: 100%;
    height: 100%; 
    
    /* 2. PROPIEDAD CLAVE: Ajusta la imagen sin distorsionarla */
    object-fit: cover; 
    
    /* 3. Asegura que las esquinas de la imagen sigan el borde redondeado del contenedor */
    border-radius: var(--radius-small);
}

.photo-container {
    background-color: rgba(216, 255, 228, 0.596);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    padding: 1rem 0.7rem 2rem 0.7rem; /* Quita el padding si la foto debe ir al borde de la tarjeta */
    display: flex;
    border-radius: 1rem;
}

/* 4. ESTILO DE BOTONES Y ETIQUETAS RECTANGULARES (.bubble-rect) */
/* Estos reemplazan las burbujas flotantes de la versión anterior */
.bubble-rect {
    padding: 8px 12px;
    background-color: white; 
    border-radius: var(--radius-small);
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--border-dark);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); 
    transition: box-shadow 0.3s ease-in-out, transform 0.1s ease-out;
}

/* Etiqueta del Nombre (parte superior de la columna izquierda) */
.name-tag {
    /* Aquí la etiqueta no es un botón, solo una caja */
    padding: 10px 15px;
    background-color: var(--gray-header); /* Gris claro como la referencia */
    border-radius: var(--radius-small);
    border: 1px solid var(--border-dark);
    font-weight: bold;
    color: var(--gray-header-text);
}

/* Contenido del Tema Elegido */
.topic-tag {
    background-color: #bbdefb; /* Un celeste para destacar este botón */
    font-weight: bold;
}

.topic-text {
    /* Solo para alinear el texto 'texto' */
    text-align: center;
    font-size: 0.85em;
}

/* 5. ESTILO PARA LA TARJETA DE UNIVERSIDAD (university-card) */
.university-card {

    padding: 0; /* Quitamos el padding global para controlar los bloques */
    overflow: hidden; /* Asegura que los bordes internos queden bien */
}

.header-bar {
    background-color: var(--gray-header);
    padding: 8px 15px;
    font-weight: bold;
    color: var(--gray-header-text);
    border-bottom: 1px solid var(--border-dark);
}

.content-block {
    padding: 10px 15px;
    border-bottom: 1px solid var(--gray-header); /* Separación suave entre bloques */
}

.block-title {
    font-weight: bold;
    margin-bottom: 5px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--gray-header);
    color: var(--accent-color); /* Color azul de MSN/Windows */
    font-size: 0.95em;
}

/* 6. ESTILO DE MENÚS DESPLEGABLES Y FOTOS INFERIORES */
.menu-container {
    display: flex;
    gap: 15px;
    justify-content: space-between;
}

.dropdown-menu {
    flex-grow: 1;
    width: calc(33.33% - 10px);
    padding: 0; /* Ajuste para el menú */
}

.menu-title {
    /* Mantenemos el estilo .bubble-rect pero con color de fondo */
    background-color: var(--gray-header);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    display: block;
    
}


.menu-list {
    list-style: none;
    padding: 0 15px; /* Quitamos padding superior/inferior para el colapso */
    margin: 0;
    font-size: 0.9em;
    /* Propiedades clave para ocultar y animar el colapso */
    max-height: 0; /* Inicia cerrado */
    opacity: 0;
    overflow: hidden; 
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* 2. ESTADO DESPLEGADO (CUANDO EL CHECKBOX ESTÁ MARCADO) */
/* Selector: Cuando el .menu-toggle está marcado (:checked),
   selecciona su hermano adyacente que es la etiqueta (label),
   y luego al hermano adyacente de la etiqueta, que es la lista (.menu-list). */
.menu-toggle:checked + .menu-title + .menu-list {
    max-height: 500px; /* Suficiente altura para mostrar todo el contenido */
    opacity: 1;
    /* Devolvemos el padding para que el contenido tenga aire */
    padding-top: 5px; 
    padding-bottom: 15px;
}

.menu-list li {
    padding: 3px 0;
}

/* Ocultar el Checkbox - El "Hack" */
.menu-toggle {
    position: absolute;
    opacity: 0;
    /* Para que el checkbox no interfiera con el layout ni reciba clics directos */
    pointer-events: none; 
}

/* Contenedor de las fotos inferiores */
.photos-container {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 80%;


}

.colleague-photo {
    width: 150px; 
    height: 150px; 
    flex-shrink: 0; /* Evita que se encoja en pantallas pequeñas */
    flex-grow: 0;
    position: relative;

    /* Usamos position: relative para posicionar el .colleague-name */
}

.colleague-name {
    /* Volvemos al estilo "burbuja flotante" para los nombres de las fotos */
    position: absolute;
    top: -15px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 9999px; /* Ovalado */
    padding: 5px 12px;
    z-index: 10;
    white-space: nowrap;
}


/* Estilo para las fotos de los compañeros */
.colleague-image {
    /* 1. Asegura que la imagen ocupe todo el espacio disponible en el contenedor */
    width: 100%;
    height: 100%; 
    
    /* 2. PROPIEDAD CLAVE: Escala y recorta la imagen sin distorsionarla para que cubra la tarjeta */
    object-fit: cover; 
    
    /* 3. Asegura que las esquinas de la imagen sigan el borde redondeado del contenedor */
    border-radius: var(--radius-small);

    /* Propiedades de llenado y ajuste */
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: var(--radius-small);
}


.photo-card {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 150px;*/
    /* Ajustamos el padding-top para dejar espacio al nombre flotante */
    
    width: 100%;
    height: 100%;

    background-color: white; 
    border-radius: var(--radius-small);
    border: 1px solid var(--border-dark);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

    /* === FORZAR FORMA CUADRADA === */
    
    /* Establecer la altura igual al ancho para que sea un cuadrado */
   
    position: relative;
    
}

.photo-card a {
    text-decoration: none;
    color: inherit;
}

.photo-link {
    /* Hace que el enlace se comporte como un bloque y ocupe todo el ancho/alto */
    display: block; 
    width: 100%;
    height: 100%;
    
    /* Quitamos la decoración de enlace por defecto */
    text-decoration: none; 
    color: inherit; /* Hereda el color de texto del padre (normalmente negro) */
}


/* 7. ESTILO DEL FOOTER */
#main-footer {
    width: auto; /* Alineado con la columna izquierda */
    padding: 10px 15px;
    text-align: justify;
    margin-top: 20px;
    
}

/* Media Query para responsividad (móviles) */
@media (max-width: 768px) {
    #top-content, .menu-container, .photos-container {
        flex-direction: column;
    }

    .left-column, .right-column, 
    .dropdown-menu, .colleague-photo,
    #main-footer {
        width: 100%;
        min-width: auto;
    }
}

#main-window:hover {
    /* Se mantienen la sombra suave base (var(--shadow-soft))
    Y se añade una segunda sombra (la de la derecha) para el glow:
    0 0 15px (expansión y desenfoque) rgba(100, 200, 255, 0.8) (color azul claro con opacidad)
    */
    box-shadow: var(--shadow-soft), 0 0 30px rgba(255, 255, 255, 1);
}

.window-card:hover {
    /* Mantenemos la sombra interna y añadimos el glow blanco */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 20px rgba(255, 255, 255, 0.9);
}

.bubble-rect:hover {
    /* Un brillo más sutil */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 1px 1px rgba(0, 0, 0, 0.05); 
    
    /* Efecto "levantamiento" */
    transform: translateY(-1px);
}