/* src/modules/user/views/home.css */

/* HEADER (Fijo arriba en el flujo) */
.home-header {
    display: flex;
    width: 100%;
    padding: 24px 24px 24px 24px; /* Ojo: Figma decía padding-top 8px pero tenemos el global 56px */
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid var(--Blanco);
    background: var(--Negro-suave);
}

.header-title {
    color: var(--Verde-acido);
    font-family: 'Clash Display', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -0.4px;
    margin: 0;
}

/* MAIN CONTENT (Empujador) */
.home-content {
    display: flex;
    flex: 1; /* Ocupa todo el espacio sobrante */
    flex-direction: column;
    justify-content: flex-end; /* CRÍTICO: Empuja el grid abajo */
    padding: 24px 24px; /* Margen de seguridad */
    width: 100%;
}

/* GRID SYSTEM */
.dashboard-grid {
    display: grid;
    width: 100%;
    /* Grid de 2 columnas iguales */
    grid-template-columns: 1fr 1fr; 
    gap: 16px;
    /* Las filas se ajustan al contenido */
    grid-auto-rows: min-content; 
}

/* Celdas que ocupan 2 columnas */
.col-span-2 {
    grid-column: span 2;
}

/* BOTTOM NAV CONTAINER */
.bottom-nav-wrapper {
    width: 100%;
    height: 64px; /* Altura fija para la barra */
    position: sticky;
    bottom: 0;
    z-index: 100;
}