/* Evitamos la selecion de texto en el html */
html {
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
}

/* Aseguramos que html y body ocupen el 100% de la altura */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Roboto", "Droid Sans", sans-serif;
}

/* Contenedor principal usando CSS Grid */
.grid-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* Header y footer toman el tamaño que necesiten, el contenido el espacio restante */
    height: 100vh;
    /* Altura total de la ventana */
}

/* Header y footer */
header {
    z-index: 2;
}

footer {
    z-index: 1;
}

/* Área de contenido */
main {
    overflow-y: auto;
    /* Permite scroll interno si el contenido es mayor al espacio asignado */
    padding: 20px;
    /* Espaciado interno para el contenido */
}