html, body {
  margin: 0;
  height: 100%;
  font-family: sans-serif;
}

.grid-planning {
  display: grid;
  grid-template-columns: 4px 150px 1fr 5px;
  grid-template-rows:
    40px  /* menu */
    40px  /* submenus */
    30px  /* titulos */
    40px  /* menus */
    50px  /* eventos */
    1fr /* habitaciones - reservas */
    120px  /* restaurante */
    5px;  /* borde-inferior */
  grid-template-areas:
    "borde-izquierdo menu menu borde-derecho"
    "borde-izquierdo habitaciones-menu fechas-menu borde-derecho"
    "borde-izquierdo habitaciones-titulo fechas-meses borde-derecho"
    "borde-izquierdo habitaciones-titulo fechas-dias borde-derecho"
    "borde-izquierdo habitaciones-eventos fechas-eventos borde-derecho"
    "borde-izquierdo habitaciones reservas borde-derecho"
    "borde-izquierdo restaurante-titulo restaurante borde-derecho"
    "borde-izquierdo borde-inferior borde-inferior borde-derecho";
  height: 100vh;
  width: 100vw;
}

.menu {
  grid-area: menu;
  background-color: #4d93d9;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.borde-izquierdo {
  grid-area: borde-izquierdo;
  background-color: #4d93d9;  
}
.borde-derecho {
  grid-area: borde-derecho;
  background-color: #4d93d9;  
}

.borde-inferior {
  grid-area: borde-inferior;
  background-color: #4d93d9;  
}

.habitaciones-menu {
  grid-area: habitaciones-menu;
  background-color: #4d93d9;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-top: 1px solid white;
}

.habitaciones-titulo {
  grid-area: habitaciones-titulo;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  color: #4d93d9;
  background-color: #a6c9ec;
  border-left: 1px solid white;
  border-right: 1px solid #4d93d9;
  border-bottom: 1px solid #4d93d9;
}

.habitaciones-eventos {
  grid-area: habitaciones-eventos;
  border-left: 1px solid white;
  border-right: 1px solid #4d93d9;
  border-bottom: 1px solid #4d93d9;
}

.fechas-menu {
  grid-area: fechas-menu;
  background-color: #4d93d9; 
  border-right: 1px solid white;
  border-top: 1px solid white;
}

.fechas-meses {
  grid-area: fechas-meses;
  background-color: #a6c9ec;
  border-right: 1px solid white;
  border-bottom: 1px solid #4d93d9;
}

.fechas-dias {
  grid-area: fechas-dias;
  background-color: #a6c9ec;
  border-right: 1px solid white;
  border-bottom: 1px solid #4d93d9;
}

.fechas-eventos {
  grid-area: fechas-eventos;
  border-right: 1px solid white;
  border-bottom: 1px solid #4d93d9;
}

.habitaciones {
  grid-area: habitaciones;
  border-right: 1px solid #4d93d9;
  border-bottom: 1px solid #4d93d9;
}

.reservas {
  grid-area: reservas;
  border-bottom: 1px solid #4d93d9;
}

.restaurante-titulo {
  grid-area: restaurante-titulo;
}

.restaurante {
  grid-area: restaurante;
}